.cstMenuBox {
    display: grid;
    width: 100%;
    grid-template-rows: 50px;
	grid-template-columns:  1fr  400px    1fr;
    grid-template-areas: "  .    cstMenu  ."; 
    place-items: center;

}
@media screen and (max-width: 400px) {
    .contenedorCstT  {
        grid-template-columns:  400px;
        grid-template-areas: "  cstMenu"; 
    }
}
.cstMenu {
    grid-area: cstMenu; 
    display: grid;
    width: 400px;
    grid-template-columns:  auto    1fr  46px  46px;
    grid-template-areas: "  cstTit  .    iconY  iconX"; 
    place-items: center;
    
}
.cstTit {
    grid-area: cstTit;
    display:grid;
    width: auto;
    font-size: 20px;
    letter-spacing:1px;
}
.iconX {  grid-area: iconX;  }
.iconY {  grid-area: iconY;  }
.leyenda_in { 
    font-family:Roboto; 
    font-size:20px; 
    font-weight:300;
    color:#BBB; 
    text-align:center;
    letter-spacing:1px;
}



/*----------------------------------------------------------------------------------- LINEA HORIZONTAL - 10px both*/
.contLinea {
    display: grid;
    width: 100%;
    grid-template-rows: 10px;
	grid-template-columns:  1fr  400px     1fr;
    grid-template-areas: "  .    lineaHor  .";
    margin-top:10px;
}
.lineaHor {
    display: grid;
    grid-area: lineaHor;
    width: 400px;
    border-top:1px solid #CCC;
}
@media screen and (max-width: 400px) {
    .contLinea {
        grid-template-columns:  100%;
        grid-template-areas: "  lineaHor";
    }
    .lineaHor {  width: 100%;  }
}
/*----------------------------------------------------------------------------------- LINEA HORIZONTAL - 10px both*/
.contLinea10d {
    display: grid;
    width: 100%;
    grid-template-rows: 10px;
	grid-template-columns:  1fr  400px     1fr;
    grid-template-areas: "  .    lineaHor  .";
}
.lineaHor10d {
    display: grid;
    grid-area: lineaHor;
    width: 400px;
    border-top:1px solid #CCC;
}
@media screen and (max-width: 400px) {
    .contLinea10d {
        grid-template-columns:  100%;
        grid-template-areas: "  lineaHor";
    }
    .lineaHor10d {  width: 100%;  }
}
/*------------------------------------------------------------------------------------------- CONSULTORES TITULOS*/
.contenedorCstT  {
    display: grid;
    width: 100%;
    grid-template-rows: 20px;
	grid-template-columns:  1fr  400px        1fr;
    grid-template-areas: "  .    cajaBoxCstTit  ."; 
    place-items: center;
}
.cajaBoxCstT { 
    grid-area: cajaBoxCstTit; 
    display: grid;
    width: 400px;
    grid-template-columns:  35px   auto   1fr  60px   46px    46px;
    grid-template-areas: "  editT  nameT  .    asigT  enviaT  cst4GT"; 
    place-items: center;
}
@media screen and (max-width: 400px) {
    .contenedorCstT  {
        grid-template-columns:  400px;
        grid-template-areas: "  cajaBoxCstTit"; 
    }
    .cajaBoxCstT { 
        width: 100%;
        grid-template-columns:  10px  35px   auto   1fr  60px   46px    46px    10px;
        grid-template-areas: "  .     editT  nameT  .    asigT  enviaT  cst4GT  ."; 
    }
}
/*----------------------------------------------------------------------------------------------- CONSULTORES */
.contenedorCst {
    display: grid;
    width: 100%;
	grid-template-columns:  1fr  400px        1fr;
    grid-template-areas: "  .    cajaBoxCst   .";   
    height:36px;
}
.cajaBoxCst  { 
    grid-area: cajaBoxCst;
    display: grid;
    width: 400px;
    height: 36px;
    grid-template-columns:  auto   1fr   60px   46px    46px;
    place-items: center center;
    grid-template-areas: "  nameC  .     asigC  enviaC  cst4GC"; 
}
@media screen and (max-width: 400px) {
    .contenedorCst  {
        grid-template-columns:  400px;
        grid-template-areas: "  cajaBoxCst"; 
    }
    .cajaBoxCst { 
        width: 100%;
        grid-template-columns:  10px  auto   1fr  60px   46px    46px    10px;
        grid-template-areas: "  .     nameC  .    asigC  enviaC  cst4GC  ."; 
    }
}

.nameC {
	grid-area: nameC;
	display: grid;
    font-size: 17px;
    color:#000; 
    text-decoration:none}
.nameC:hover {
    font-size: 17px;
} 
.asigC {
	grid-area: asigC;
	display: grid;
    font-size: 15px; 
    color:#994C00;}
/*.editarC { grid-area: editarC; place-items:center start }*/ 
.enviaC { grid-area: enviaC } 
.cst4GC { grid-area: cst4GC }

.editT  { grid-area: editT; display:grid; place-items:center start }
.nameT  { grid-area: nameT }
.asigT  { grid-area: asigT }
.enviaT { grid-area: enviaT }
.cst4GT { grid-area: cst4GT }
.editT, .nameT, .asigT, .enviaT, .cst4GT {
	display: grid;
    font-size: 14px;
    color:#BBB; }

@media screen and (max-width: 400px) {

}
/*----------------------------------------------------------------------------------------------- TEXTO ENMEDIO */
.boxEdicion {
    display: grid;
    width: 100%;
    height:40px;
	grid-template-columns:  1fr  400px    1fr;
    grid-template-areas: "  .    textoE   .";
    place-items: center center;
}
.textoE  { 
    grid-area: textoE;
    font-size: 18px;
}
/*----------------------------------------------------------------------------------------------- TITULO 20PX */
.boxTitulo {
    display: grid;
    width: 100%;
	grid-template-columns:  1fr  400px    1fr;
    grid-template-areas: "  .    tituloE   .";
    place-items: center center;
}
.tituloE  { 
    grid-area: tituloE;
    display:grid; 
    place-items:center;
    font-size:20px; 
    font-weight:bold; 
    letter-spacing:1px;
    word-spacing:4px;
    color:#077;
    letter-spacing:1px;
}

/*------------------------------------------------------------------------------------- PROGRESO */
.boxProgresoE {
    display: grid;
    width: 100%;
    grid-template-rows: 80px;
	grid-template-columns:  1fr  400px    1fr;
    grid-template-areas: "  .    progressE     .";
}
.progressE {  
    display:grid; 
    grid-area: progressE; 
    width:100%; 
    grid-template-rows: 25px 25px 30px;
    grid-template-columns: auto   20px    70px    1fr     auto     20px    70px     1fr    auto;
    grid-template-areas:"  tituE  tituE   tituE   .       tit4GE   tit4GE  tit4GE   .      metaE"
                        "  enviE  enviE   enviE   .       env4GE   env4GE  env4GE   .      totalE"
                        "  tasaE  iconE   barrE   .       tasa4GE  icon4GE barr4GE  .      cienE";
}
@media screen and (max-width: 400px) {
    .boxProgresoE {
        grid-template-columns:  100%;
        grid-template-areas: "  progressE";
    }
    .progressE { 
        grid-template-columns: 10px  auto   20px    70px    1fr     auto    20px    v70px     1fr   auto    10px;
        grid-template-areas:"  .     tituE  tituE   tituE   .       tit4GE   tit4GE  tit4GE   .     metaE   ."
                            "  .     enviE  enviE   enviE   .       env4GE   env4GE  env4GE   .     totalE  ."
                            "  .     tasaE  iconE   barrE   .       tasa4GE  icon4GE barr4GE  .     cienE   .";
    }
}
.metaE  { grid-area: metaE;  place-items: center end }
.tituE  { grid-area: tituE;  place-items: center end }
.tit4GE { grid-area: tit4GE; place-items: center end }
.tituE,.tit4GE,.metaE {
    display:grid;
    font-size: 14px;
    color:#AAA;
    letter-spacing:1px; }
.cienE {
    display: grid;
	grid-area: cienE;
    place-items: center end;
    font-family: "Roboto";
    font-size: 16px; 
    font-weight: bold;
    letter-spacing:1px;
    color:#036; }
.enviE { grid-area:enviE }
.env4GE { grid-area:env4GE }
.enviE, .env4GE { display: grid; place-items: center end; font-size:16px; color:#06C;letter-spacing:1px }
.totalE { grid-area:totalE; display: grid; place-items: center end; font-size:16px; color: #009; letter-spacing:1px }
.iconE { grid-area:iconE }
.icon4GE { grid-area:icon4GE }
.iconE,.icon4GE { font-size:15px; color:#AAA; display:grid; place-items:center start }
.tasaE { grid-area: tasaE }
.tasa4GE { grid-area: tasa4GE }
.tasaE, .tasa4GE {
    display: grid;
    width:100%;
    place-items: center end;
    padding-right:2px;
    font-size: 15px;
    font-weight:bold;
    letter-spacing:1px;
    color:#111;}
.barrE { grid-area: barrE }
.barr4GE { grid-area: barr4GE; padding-right:15px }
.barrE, .barr4GE {  display:grid; place-items: center end; }
.barraE { width:70px; height:24px; }
@media screen and (max-width: 370px) {
    .progressE { 
        grid-template-columns: 10px  auto   20px    60px    1fr     auto    20px    60px     1fr    auto    10px;
    }
    .tituE,.tit4GE,.metaE {
        font-size: 12px;
        letter-spacing:0px; }
}
/*------------------------------------------------------------------------- Boton de acceso en Verificar */
.button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: blue;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
}
.button:hover {
    background-color: darkblue;
}