﻿.contOpcion .verificacion .principal {
    display: grid;
    align-items: center;
    margin-top: 20px;
    grid-gap: 0px;
    margin-left: 10px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
.contOpcion .verificacion .principal .VerificacionTitulo {
    display: grid;
    align-items: center;
    grid-gap: 0px;
    grid-template-columns: 1fr;
    grid-template-rows: 60px 30px 30px;
    grid-template-areas: "et1" "et2" "et3";
}
.contOpcion .verificacion .principal .VerificacionTitulo .et1 {
    grid-area: et1;
}
.contOpcion .verificacion .principal .VerificacionTitulo .et2 {
    grid-area: et2;
}
.contOpcion .verificacion .principal .VerificacionTitulo .et3 {
    grid-area: et3;
}
.contOpcion .verificacion .principal .VerificacionEmail {
    display: grid;
    align-items: center;
    margin-top:10px;
    grid-template-columns: 1fr 10px 1fr 10px 1fr 10px;
    grid-template-rows: 30px 60px;
    grid-template-areas: 
        "lbl1     esp1    txt1    txt1    txt1   val1"
        "btn1     esp1    btn2    esp2    btn3   esp3";
}
.contOpcion .verificacion .principal .VerificacionEmail .lbl1 {
    grid-area: lbl1;
}
.contOpcion .verificacion .principal .VerificacionEmail .txt1 {
    grid-area: txt1;
}
.contOpcion .verificacion .principal .VerificacionEmail .val1 {
    grid-area: val1;
}
.contOpcion .verificacion .principal .VerificacionEmail .btn1 {
    margin-top: 40px;
    grid-area: btn1;
}
.contOpcion .verificacion .principal .VerificacionEmail .btn2 {
    grid-area: btn2;
    margin-top: 40px;
}
.contOpcion .verificacion .principal .VerificacionEmail .btn3 {
    grid-area: btn3;
    margin-top: 40px;
}
.contOpcion .verificacion .principal .VerificacionCelular {
    display: grid;
    align-items: center;
    margin-top:10px;
    grid-template-columns: 1fr 10px 1fr 10px 1fr 10px;
    grid-template-rows: 30px 60px;
    grid-template-areas: 
      "lbl1     esp1    txt1    txt1    txt1   val1"
      "btn1     esp1    btn2    esp2    btn3   esp3";
}
.contOpcion .verificacion .principal .VerificacionCelular .lbl1 {
    grid-area: lbl1;
}
.contOpcion .verificacion .principal .VerificacionCelular .txt1 {
    grid-area: txt1;
}
.contOpcion .verificacion .principal .VerificacionCelular .val1 {
    grid-area: val1;
}
.contOpcion .verificacion .principal .VerificacionCelular .btn1 {
    grid-area: btn1;
    margin-top: 40px;
}
.contOpcion .verificacion .principal .VerificacionCelular .btn2 {
    grid-area: btn2;
    margin-top: 40px;
}
.contOpcion .verificacion .principal .VerificacionCelular .btn3 {
    grid-area: btn3;
    margin-top: 40px;
}

@media (max-width: 500px) {
    .contOpcion .verificacion .lblOpcionesMedio {
        font-size: 14px !important;
        font-weight: 500;
    }
    .contOpcion .verificacion .lblOpcionesGrande {
        height: 48px;
        font-weight: 500;
        font-size: 18px !important;
    }
    .contOpcion .verificacion .RadButton.rbButton.btnDebit.big {
        width: 150px;
        height: 48px;
        font-size: 16px;
    }
}
@media (max-width: 400px) {
    .contOpcion .verificacion .lblOpcionesMedio {
        font-size: 12px !important;
        font-weight: 500;
    }
    .contOpcion .verificacion .lblOpcionesGrande {
        height: 48px;
        font-weight: 500;
        font-size: 16px !important;
    }
    .contOpcion .verificacion .RadButton.rbButton.btnDebit.big {
        width: 140px;
        height: 48px;
        font-size: 16px;
    }
}
@media (max-width: 350px) {
    .contOpcion .verificacion .lblOpcionesMedio {
        font-size: 10px !important;
        font-weight: 500;
    }

    .contOpcion .verificacion .lblOpcionesGrande {
        height: 48px;
        font-weight: 500;
        font-size: 14px !important;
    }

    .contOpcion .verificacion .RadButton.rbButton.btnDebit.big {
        width: 130px;
        height: 48px;
        font-size: 14px;
    }
}