@font-face {
    font-family: "AMX regular";
    src: url("../fonts/Roboto-Regular.woff");
    font-display: auto;
  }
@font-face {
    font-family: "AMX regular";
    src: url("../fonts/AMX-Regular.woff");
    font-display: auto;
}
body, * {
    color: #222;
    font-family: "AMX regular";
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'AMX regular';
    padding: 0;
}

hr {
    border-top: 3px solid #AFAFAF;
    margin-bottom: 0;
    margin-top: 0;
    width: 60%;
}

.sub-title {
    color: #222;
    font-family: 'AMX regular';
    font-size: 1.2em;
    font-weight: 300;
    margin-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
}
.formulario .sub-title {
    padding-left: 15px;
    padding-right: 15px;
    word-spacing: 5px;
}
.sub-confirmacion {
    font-size: 25px;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    margin-top: 0;
    padding-left: 15px;
    padding-right: 15px;
}

.text-left {
    text-align: left !important;
}

.row, .row > * {
    margin-left: 0px;
    margin-right: 0px;
    padding: 0 !important;
}

.form-control:focus {
    border-color: #afafaf !important;
}

/* Inicio estilos barra de navegación. */
.navbar {
    border-radius: 0;
    margin-bottom: 0;
}

/*.navbar img {
    width: 98px;
    height: 30px;
}*/

.navbar-default {
    background-color: #E52A1B;
    border-color: #E52A1B;
}

.navbar-default .navbar-brand,
.navbar-default .navbar-brand:hover {
    color: #fff;
    padding: 6px 15px;
    font-size: 3.5rem;
}

.navbar-default .navbar-text {
    color: #fff;
    font-weight: 700;
    font-size: 2rem;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-right: 45px;
}

/* Fin estilos barra de navegación. */

/* Inicio estilo de botones. */
.btn.btn-primary2, .btn.btn-primary3 , .btn.btn-primary4 , .btn.btn-primary5{
    font-family: 'AMX regular';
    font-weight: 400;
    margin-top: 20px;
    padding: 8px;
    border-radius: 5px;
}

/* Fin estilo de botones. */

/* Inicio estilos inicio.php */
.pant-inicio {
    width: 100%;
    margin: 0 auto;
    padding-top: 20px;
}

#page-wrap {
    margin: 20px 24%;
}

.barra-nav {
    color: #E52A1B;
    font-family: 'AMX regular';
    font-size: .9rem;
    font-weight: 400;
}

.barra-nav a {
    color: #E52A1B;
    font-family: 'AMX regular';
}

.subtitulo-claro {
    color: #222;
    font-family: 'AMX regular';
    font-size: 1.2rem;
    font-weight: 300;
    padding: 10px 8px 0 8px;
    padding-top: 20px;
}

.selecc-opcion {
    color: #222;
    font-family: 'AMX regular';
    font-size: 1.2rem;
    font-weight: 300;
    margin: 0;
    padding: 10px 2% 0;
}

/* Fin estilos inicio.php */

/* Inicio estilos de formularios.php */
.formulario {
    padding-top: 0px;
    padding-bottom: 50px;
}

.formulario .barra-nav {
    color: #E52A1B;
    font-family: 'AMX regular';
    font-size: .9rem;
    font-weight: 500;
}

#titulo_claro {
    color: #222;
    font-size: 32px;
    font-weight: 700;
    margin-left: 0;
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 20px;
    padding-left: 0;
    padding-top: 20px;
    text-align: center;
    vertical-align: middle;
}

#form {
    /*border-top: 3px solid #AFAFAF;*/
    padding-top: 10px;
}

.span_numeros {
    border: 1px solid #000;
    border-radius: 50%;
    text-align: center;
    padding: 0 0 0 5px;
    margin-right: 10px;
}
label, .visualCaptcha-explanation {
    text-align: justify;
    color: #5E5E5E;
    font-weight: 400;
}
.submsg-captcha {
    font-size: 16px;
    color: #AFAFAF;
    font-weight: 300;
}
input[type="text"], input[type="password"], input[type="email"] {
    
    
    line-height: 1em;
    background-color: #fff;
    color: #222;
    font-size: 1.2rem;
    font-weight: 300;
    padding: 0 10px;

    
}
.register-switch {
    clear: both;
    display: flex;
    align-items: center;
    justify-content: left;
    padding-top: 0 !important;
    margin-left: 0%;
}
.register-switch-span {
    font-size: 16px;
    color: #5E5E5E;
    font-family: 'AMX regular';
}
.content-switch {
    height: 40px;
    padding: 2px !important;
    background: #E52A1B;
    border-radius: 25px;
    margin-left: 5%;
    margin-right: 5%;
    width: 85px;
}
.register-switch-label {
    padding-top: 1.5%;
    float: left;
    width: 50%;
    height: 100%;
    line-height: 32px;
    color: #000;
    text-align: center;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    text-indent: 100%;
    overflow: hidden;
}
.register-switch-input {
    display: none;
}
.register-switch-input:checked + .register-switch-label {
    color: #fff;
    background: #fff;
    border-radius: 50%;
    text-indent: 100%;
    overflow: hidden;
}
select {
    /*-moz-appearance: none;*/
    background-color: #fff !important;
    border: 1px solid #AFAFAF !important;
    color: #AFAFAF !important;
    font-size: 1.2rem !important;
    font-weight: 300;
}
.visualCaptcha {
    margin-bottom: 0px;
}
.visualCaptcha-accessibility-button {
    display: none;
}
/*select#TIPO_COMPRA:focus {
    border-color: #AFAFAF !important;
    box-shadow: 10px 6px 7px 3px #afafaf;
}*/
.btn.btn-primary2 {
    background-color: #E52A1B;
    font-size: 18px;
    width: 100%;
    
    color: #fff;
}
.btn.btn-primary2:hover, .btn.btn-primary2:active {
    background-color: #E52A1B;
}
.btn.btn-primary3 {
    background-color: #5E5E5E;
    font-size: 18px;
    width: 100%;
    /*text-transform: uppercase;*/
    color: #fff;
}
.btn.btn-primary3:hover, .btn.btn-primary3:active {
    background-color: #5E5E5E;
}
/* Estilos del carousel */
.owl-carousel {
    border: 1px solid #afafaf;
    padding: 15px;
}
.owl-nav {
    display: flex;
    justify-content: space-between;
    position: relative;
}
.owl-nav .owl-prev {
    margin-left: -6px;
}
.owl-nav .owl-next {
    margin-right: -6px;
}

.owl-nav .owl-prev,
.owl-nav .owl-next {
    bottom: 120px;
    position: relative;
}

.owl-item {
    padding: 20px 20px 0;
}
.owl-item .paquete {
    line-height: 1.5;
	padding: 10px;
    /*padding-left: 30px;*/
}
.owl-item .paquete-selected {
    background-color: #E52A1B;
}
.owl-item .paquete label {
    font-weight: 300;
}
.owl-item .paquete span {
    color: #E52A1B;
    display: block;
    font-weight: 700;
    text-align: center;
}
.owl-item .paquete small {
    display: block;
    font-size: 1rem;
    margin-bottom: 5px;
    text-align: center;
}
.owl-item .paquete a {
    font-weight: 500;
    width: auto;
    color: #fff;
    background: #E52A1B;
    font-size: 1rem;
    padding: 5px;
}

.owl-item .paquete-selected .cl_sel_paq,
.owl-item .paquete-selected span,
.owl-item .paquete-selected small {
    color: #fff;
}
.owl-item .paquete.paquete-selected a {
    background-color: #fff;
    color: #E52A1B;
}
/**/
/* Estilos lista de forma de pago. */
#FORMA_PAGO_ {
    width: 100% !important;
    margin-top: 0;
}
.dd-container {
    width: 100% !important;
}
.dd-select {
    width: 100% !important;
    border-radius: 5px;;
}
.dd-selected {
    background-color: #fff;
    padding: 2px !important;
    width: 100% !important;
    border-radius: 5px; 
}
.dd-selected-image {
    width: 40px;
}
.dd-selected-text {
    color: #222;
    font-weight: 300;
    line-height: 40px !important;
}
.dd-options {
    position: relative !important;
}
.dd-options.dd-click-off-close {
    width: 100% !important;
}
.dd-option.dd-option-selected {
    background-color: #fff !important;
    padding: 2px;
}
.dd-option {
    background: rgb(255, 255, 255) none repeat scroll 0% 0% !important;
    border-bottom: solid 1px #edeef0 !important;
    padding: 2px !important;
}
.dd-option-image {
    width: 40px;
}
.dd-option-text {
    color: #222;
    font-weight: 300;
    line-height: 40px !important;
}

.cl_sel_paq {
    font-weight: 700 !important;
}
/* Fin estilos de formularios.php */

/* Inicio estilos de confirmacion.php y estadoMsg.php */

.registro .etiqueta {
    font-size: 1.2rem;
    font-weight: 700;
    padding-left: 0px;
}

.confirmacion-pago .form-group div {
    padding-top: 7px;
    font-weight: 300;
    font-size: 20px;
}

#confirm {
    /*border-top: 3px solid #AFAFAF;*/
    padding-top: 0px;
    width: 100%;
    margin: 4% 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Fin estilos de confirmacion.php y estadoMsg.php */

/* Inicio estilos pagos.php */
/*label#LB_ASOCIAR_CLPAY::after {
    content: url(http://200.29.119.96:7081/personal/claro/imagenes/icono-claropay.png);
    transform: scale(0.6);
    display: inline-block;
    margin-left: -40px;
    margin-top: -15px;
}*/
.logo_pse {
    height: 85px;
    width: 85px;
}

#LB_ASOCIAR_CLPAY .tarjeta-asocia {
    display: flex;
    flex-direction: column-reverse;
}

#LB_ASOCIAR_CLPAY .tarjeta-asocia img {
    width: 150px;
}

.content-switch-negativo {
    background: #AFAFAF;
    height: 40px;
    padding: 2px !important;
    border-radius: 25px;
    margin-left: 5%;
    margin-right: 5%;
    width: 85px;
}

.datos-transac {
    display: flex;
    flex-direction: column;
}
.datos-transac label {
    font-size: 18px;
}
.inf-transac {
   /* width: 100%;*/
    order: 2;
}
.inf-tarj {
    background-color: #f0f0f0;
    border: 2px solid #afafaf;
    order: 1;
    padding: 20px 15px;
    width: 100%;
}

.datos-transac .inf-transac h3 {
    margin-bottom: 20px;
    margin-top: 20px;
}

/* Estilos css requerimiento Pago Saldo Parcial */

.mesaje_parcial{
    
    /*position: relative;*/
    top: 300px;
    width: 100%;
    order: 3;
    border-radius: 10px 10px 10px 10px;
    background-color: #ffffff !important;
    text-align: left;
        
}

.img_title{
     
    width: 50px;
    height: 50px;
    margin: 10px auto;
    top: auto;
    display: inline-block;
    position: relative;
    left: 40%;
   
}

.info_par{
	border-radius: 10px !important ;
    margin: -30px 20px auto 20px;
    display: inline-flex;
    text-align: start;
}



.info_men_par{
    
    margin: 0px auto;
    font-size: 15px;
    color: #000000;
    text-align: justify;
    word-break: normal;         
}

/* FIN Estilos css requerimiento Pago Saldo Parcial */

.datos-transac .inf-transac h3, .datos-transac .inf-tarj h3 {
    font-weight: 500;
    color: #222;
    font-size: 1.5rem;
    /*padding: 0 15px;*/
}

.inf-transac .col-xs-12 {
    padding-right: 0 !important;
}

.inf-transac #imprimir,
.inf-transac #finalizar {
    padding-right: 15px;
}

.pagos {
    padding-top: 20px;
    padding-bottom: 50px;
}

/*.pagos .form-horizontal .inf-tarj .form-group {
    padding: 0 15px;
}*/
.pagos .expli-claroPay {
    font-size: 15px !important;
    text-align: center;
    margin-left: 0%;
    color: #5E5E5E
}

.pagos .form-horizontal .inf-tarj .control-label {
    text-align: left;
}

.pagos .form-horizontal .inf-tarj div {
    padding-top: 7px;
    font-weight: 300;
    font-size: 20px;
}

.inf-asocia {
    order: 3;
}

#pagos {
    /*border-top: 3px solid #AFAFAF;*/
    padding-top: 10px;
    width: 100%;
    margin: 4% auto;
}

.conta-tarjetas {
    border: 0;
    display: flex;
    flex-direction: row;
    height: auto;
}

.conta-tarjetas .cards {
    align-items: center;
    /*border-bottom: 1px solid #afafaf;*/
    display: flex;
    flex-direction: row;
    justify-content: start;
    padding: 5px;
    opacity: .5;
    width: 30%;
}
.cards input[type="radio"] {
    display: none;
    margin: 0 15px;
    visibility: hidden;
}

.unopacity {
    opacity: 1 !important;
}

.cards img {
    width: 80px;
}
.conta-fecha {
    border: 0;
    height: auto;
}
.conta-elemento {
    border: 0;
    height: auto;
}
input[type="radio"] {
    width: auto;
    margin-bottom: 0;
}

.form-control {
    background-color: #fff;
}


#CODIGO_SEGURIDAD::after {
    content: url('personal/claro/imagenes/code-security.png');
    position: absolute;
   
}



.pagos .error {
    clear: both;
    font-size: 12px;
    display: block;
    margin-left: 10px;
}

.pagos .form-horizontal .form-group {
    margin-right: 0;
}

.pagos .checkbox {
    margin-left: 0;
    padding: 0px !important;
    width: 100%;
}

.pagos .checkbox label {
    margin-left: 5px;
}

.pagos input[type="checkbox"] {
    display: none;
    height: auto;
    margin-left: 0px;
    margin-top: 9px;
    width: auto;
}

.pagos .checkbox  a {
    color: #EF3829;
    font-family: 'AMX regular';
    font-size: 1rem;
    font-weight: 400;
}

/* Fin estilos pagos.php */

/* Inicio estilo confirmaPagos.php */
.btns-pago .btn {
    height: auto;
}
.btns-pago td {
    padding: 0 10px !important;
}

/* Inicio estilos estadoMsg.php */
.estadoMsg {
    padding-top: 20px;
}

.estadoMsg .msg-estado {
    color: #222;
    font-size: 21px;
    font-weight: 300;
}

.estadoMsg .pie-pagina {
    padding-top: 100px;
}

.tarjeta-asocia {
    display: flex;
    align-items: center;
}

.tarjeta-asocia img {
    margin-right: 10px;
    width: 50px;
}
/* Fin estilos estadoMsg.php */

/* Inicio estilos para textos de anuncio de tarjeta debito como credito */
.imagen__modal {
    display: flex;
    justify-content: center;
}
.modal__img {
    width: 75px;
}
.imagen__modal:first-child {
    display: none;
}
.texto__modal {
    color: #222;
    font-size: .85rem;
    padding: 15px;
    text-align: center;
}
.texto__desc {
    color: #5E5E5E;
    font-size: .75rem;
    padding: 0px;
    text-align: justify;
}
.texto__modal strong, .texto__desc strong {
    font-weight: 600;
    color:#5E5E5E;
}
.modal__img--tarjeta {
    width: 275px;
    height: 125px;
}
.modal__btn {
    border-top: 0;
    display: flex;
    justify-content: flex-end;
    margin-top: 0px;
}
.btn__modal {
    border-radius: 5px;
    font-size: 16px !important;
    font-weight: 700 !important;
    margin-top: 0px !important;
    padding: 0 15px;
    text-transform: capitalize !important;
}

.titulo-modalPagos {
    text-align: center;
    width: 100%;
    margin-bottom: 0;
}

.footer-modalPagos {
	margin-bottom: 20px;
}

/* Fin estilos para textos de anuncio de tarjeta debito como credito */

/* Estilo tienda virtual */
/*table tbody tr:nth-child(5) td:first-child {
    display: block;
    margin-top: 11px;
    position: absolute;
}*/

@media screen and (min-width: 600px) and (orientation: portrait) {
    .btn.btn-primary2, .btn.btn-primary3, .btn.btn-primary4 ,.btn.btn-primary5{
        max-width: 95%;
    }
}

@media (min-width: 541px) and (max-width: 780px) {
    .formulario {
        padding-top: 20px;
        padding-bottom: 50px;
    }
    #titulo_claro {
        font-size: 32px;
        padding-left: 0;
    }
    .cards img {
        width: 40%;
    }

    #fecha {
        align-items: center;
        flex-direction: row;
    }
    #fecha .form-venci {
        width: 50%;
    }

    .owl-nav .owl-prev,
    .owl-nav .owl-next {
        bottom: 90px;
        position: relative;
    }
    .form-control {
        border-radius: 6px !important;
        height: 35px;
        width: 92%;
        margin-left: 2.6%
    }
    #fecha >select{


        margin-left: -8%;
    }
    

    #fecha {
    
        height: 100%
        
    }
    #fecha .form-venci {
        min-height: 60%;
        width: 100%;
        height: 80%;
    }
    .form-control-label {
        border-radius: 6px !important;
height: 20px;
width: 90%;
margin-left: 2%;
margin-top: 15px
    }
    
}
@media (min-width: 781px) {
    .barra-nav {
        font-size: 1.5rem;
        font-weight: 400;
        padding-left: 7px;
    }
    .ajuste-barra-nav {
        font-size: .9rem;
    }

    .btn.btn-primary2, .btn.btn-primary3, .btn.btn-primary4, .btn.btn-primary5{
        margin-top: 4;
    }

    .subtitulo-claro {
        font-size: 2.3rem;
    }

    .selecc-opcion {
        font-size: 2.3rem;
        font-weight: 300;
        margin-left: 5px;
        padding: 0 2%;
    }

    .formulario {
        padding-top: 20px;
        padding-bottom: 50px;
    }
    #titulo_claro {
        font-size: 32px;
        padding-left: 0;
    }
    .registro .etiqueta{
        font-weight: 700;
        padding-left: 10px;
    }
    
    #confirm {
        /*border-top: 3px solid #AFAFAF;*/
        padding-top: 10px;
        width: 80%;
        margin: 4% auto !important;
    }
    
    .logo_pse {
        height: 115px;
        width: 115px;
    }

    #pagos {
        /*border-top: 3px solid #AFAFAF;*/
        padding-top: 10px;
        width: 85%;
        margin: 4% auto;
    }

    .estadoMsg .btn-primary2 {
        width: 30%;
    }
    .texto__modal {
        font-size: 1.1rem;
    }
    .texto__desc {
        font-size: .9rem;
    }
    .btn__modal {
        font-size: 18px !important;
        font-weight: 700 !important;
        text-transform: capitalize !important;
        width: auto !important;
    }
	
	.titulo-modalPagos {
		text-align: center;
		width: 100%;
		margin-bottom: 0;
	}
	
	.footer-modalPagos {
		margin-bottom: 20px;
	}
		
    .form-control {
        border-radius: 6px !important;
        height: 35px;
        width: 92%;
        margin-left: 1%
    }

    #fecha >select{


        margin-left:-3%;
    }

    #fecha {
    
        height: 100%
        
    }
    #fecha .form-venci {
        min-height: 60%;
        width: 100%;
        height: 80%;
    }

    

    .form-control-label {
        border-radius: 6px !important;
    height: 20px;
    width: 90%;
    margin-left: 2%;
    margin-top: 15px
        
    }
}

/* Estilos sacados de otros archivos para modificar alguna propiedad */
#msg_error {
    width: auto;
    line-height: 1.5;
}
.visualCaptcha-possibilities .visualCaptcha-selected {
    background-color: #F2F2F2;
}
@media only screen and (max-width: 360px) {
    .accessibility-description, .status.valid, .visualCaptcha-explanation {
        font-size: 18px;
    }

    #fecha {
    
        height: 100%
        
    }
    #fecha .form-venci {
        min-height: 60%;
        width: 100%;
        height: 80%;
    }

    .form-control-label {
        border-radius: 6px !important;
        height: 20px;
        width: 90%;
        margin-left: 2%;
        margin-top: 15px
    }
    
}

@media screen and (max-width: 736px) {
    input[type="button"], input[type="submit"], input[type="reset"], .button {
        max-width: 50em;
        width: 100%;
    }
    .p-title{

        
            text-align: center;
            white-space: normal;
            word-wrap: break-word;
    }
    .form-control {
        border-radius: 6px !important;
        height: 40px;
        width: 92%;
        /*margin-left: 1%*/
    }

    #fecha >select{


        margin-left: -2%;
        height: 50%;
    }

    #fecha {
    
        height: 70px
        
    }
    #fecha .form-venci {
        min-height: 60%;
        width: 100%;
        height: 70%;
        margin-top: 4px;
    }

    .form-control-label {
        border-radius: 6px !important;
        height: 20px;
        width: 90%;
        margin-left: 2%;
        margin-top: 1px
    }
}
@media screen and (max-width: 768px) and (min-width: 640px) and (orientation: landscape) {
    .btn.btn-primary2 {
        max-width: 100%;
    }
    .btn.btn-primary4 {
        max-width: 95%;
    }
    .btn.btn-primary5 {
        max-width: 95%;
    }
    .btn.btn-primary3 {
        max-width: 50em;
    }
    .form-control {
        border-radius: 6px !important;
        height: 35px;
        width: 92%;
        margin-left: 2.6%
    }

    #fecha >select{


        margin-left: 8%;
    }

    #fecha {
    
        height: 100%
        
    }
    #fecha .form-venci {
        min-height: 60%;
        width: 100%;
        height: 80%;
    }

    .form-control-label {
        border-radius: 6px !important;
        height: 20px;
        width: 90%;
        margin-left: 2%;
        margin-top: 15px
    }
}

@media screen and (max-width: 1024px) and (min-width: 768px) and (orientation: portrait) {
    #tablaDetalleconfirma td {
        padding: 4px;
        width: 100%;
        margin-bottom: 5px;
    }

    .cards img {
        width: 60%;
    }

    img {
        width: 25%;
    }
    .form-control {
        border-radius: 6px !important;
        height: 35px;
        width: 92%;
        margin-left: 1%
    }

    #fecha >select{


        margin-left: 8%;
    }

    #fecha {
    
        height: 100%
        
    }
    #fecha .form-venci {
        min-height: 60%;
        width: 100%;
        height: 80%;
    }

    .form-control-label {
        border-radius: 6px !important;
        height: 20px;
        width: 90%;
        margin-left: 2%;
        margin-top: 15px
    }

    #fecha >select{

        width: 47%;
    }
}

@media screen and (min-width: 1024px) and (orientation: landscape) {
    #tablaDetalleconfirma td {
        padding: 4px;
        width: 65%;
        margin-bottom: 5px;
    }
    .form-control {
        border-radius: 6px !important;
        height: 35px;
        width: 92%;
        margin-left: 2.6%
    }

    #fecha >select{


        margin-left: 8%;
    }
    #fecha {
    
        height: 100%
        
    }
    #fecha .form-venci {
        min-height: 60%;
        width: 100%;
        height: 80%;
    }

    .form-control-label {
        border-radius: 6px !important;
height: 20px;
width: 90%;
margin-left: 2%;
margin-top: 0px
    }
}
/* */

@media only screen and (max-width: 760px), (max-device-width: 1024px) and (min-device-width: 368px) {
    td {
        position: relative;
        width: 100%;
    }
    .form-control {
        border-radius: 6px !important;
        height: 35px;
        width: 92%;
        margin-left: 2.6%
    }

    #fecha >select{


        margin-left: 8%;
    }

    #fecha {
    
        height: 100%
        
    }
    #fecha .form-venci {
        min-height: 60%;
        width: 100%;
        height: 80%;
    }

    .form-control-label {
        border-radius: 6px !important;
height: 20px;
width: 90%;
margin-left: 2%;
margin-top: 0px
    }
}

@media (min-width: 781px) {
    .datos-transac {
        flex-direction: row;
    }
    .inf-transac {
      /*  width: 62%;*/
        order: 1;
        
    }
    .inf-tarj {
        display: table;
        height: fit-content;
        order: 2;
        width: 57%;
    }

    .owl-nav .owl-prev,
    .owl-nav .owl-next {
        bottom: 90px;
        position: relative;
    }

    .conta-tarjetas {
        flex-direction: row;
    }
    .conta-tarjetas .cards {
        flex-direction: row;
        border-bottom: 0px solid #afafaf;
        justify-content: space-around;
        align-content: center;
    }
    .cards img {
        width: 60%;
    }
    #fecha {
        align-items: center;
        flex-direction: row;
    }
    #fecha .form-venci {
        width: 50%;
    }

    .datos-transac .inf-transac #finalizar {
        margin-left: -15px;
    }
    .datos-transac .inf-transac #imprimir {
        margin-right: -15px;
    }

    #ASOCIAR_DOMICILIA_.register-switch {
        margin-left: -15px;
        justify-content: flex-start;
    }
    .form-control {
        border-radius: 5px !important;
        height:35px;
        width: 92%;
        margin-left: 1%
    }

    #fecha >select{


        margin-left: -3%;
    }

    #fecha {
    
        height: 100%
        
    }
    #fecha .form-venci {
        min-height: 60%;
        width: 100%;
        height: 80%;
    }

    .form-control-label {
        border-radius: 6px !important;
height: 20px;
width: 90%;
margin-left: 2%;
margin-top: 15px
    }
}

@media print {
    .box {
        width: 50%;
    }
}

/* Estilos sobreescritos de otroa archivos. */
@media screen and (max-width: 736px) {
    h1 {
        text-transform: unset;
    }
    .form-control {
        border-radius: 6px !important;
        height: 45px;
        width:100%;
        margin-left: 1%
    }
    #fecha >select{


        margin-left: 0%;
        height: 60%;
        width: 100%;
    }

   

    #fecha {
    
        height: 70px
        
    }
    #fecha .form-venci {
        min-height: 55%;
        width: 100%;
        height: 70%;
        margin-top: 4px;
    }

    .form-control-label {
        border-radius: 6px !important;
height: 20px;
width: 90%;
margin-left: 2%;
margin-top: 0px
    }
}

.logo_daviplata {    
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    display: block;
    width: 300px !important;
}

/* Mensaje Informativo Claro */

.informative_msjPR{
    
background-color: #f7f7f7 !important;
    border-radius: 10px !important;
    margin: 2% 10% 0% 10%;
    
}

.img_informative{
    
    position: relative;
    width: 4em;
    margin: 3% 3% -4% 4%;
    
}

.img_informative_mvl{
    
    position: relative;
    left: 36%;
    width: 4em;
    margin: 3% 3% 2% 4%;
    
}



.text_informative{
    font-size: 18px;       
    display: flex;
    padding: 20px;
    word-break: normal;
    margin: -4% 1% 2% 12%;
}

/* Inicio estilo de comprobante rediseño. */

.table{

    font-size: 85%;
}
 
.title{
    height: auto;
    min-height:32px;
    border-top-left-radius: 5px; 
    border-top-right-radius: 5px;
    border-bottom: 3px solid #F2F2F2;
    
}
.p-title{
    color:#fff;
    margin-top:2px;
    font-size: 20px;
    white-space: normal;
    word-wrap: break-word;
    font-weight: medium;
    font-family: 'AMX regular';
}
.mt-3{
    font-size: 15px;
    font-family: 'AMX regular';
}

.sub-title2{

    height:auto;
    background-color:#625f5f;
}

.data{
    min-height:30px;
    background-color: #f5f4f4;
    border:1px solid #d5d4d4;
    margin-top:-3px;
   
}

.data >div{
    white-space: normal;
    word-wrap: break-word;
    margin-top: 5px;
    color: #625f5f;
    font-weight: 400;
    font-family: 'AMX regular';
    font-size: 14px;
}

.text-data{
    margin-top:1%;

}

.border-fin{

 border-bottom-left-radius: 5px;
 border-bottom-right-radius: 5px;

}



.btn.btn-primary4 {
    background-color: #E52A1B;
    font-size: 16px;
    width: 98%;
    
    color: #fff;
    height: 45px;
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
    padding: 3%;
    font-family: 'AMX regular';
    
}
.btn.btn-primary5 {
    background-color: #5E5E5E;
    font-size: 16px;
    width: 98%;
    
    color: #fff;
    height: 45px;
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
    padding: 3%;
    font-family: 'AMX regular';
    
}

.btn.btn-primary4:hover, .btn.btn-primary4:active {
    background-color: #E52A1B;
}


/*INICIO ESTILOS FOOTER REDISEÑO DEL GATEWAY*/


.navbar-default_foot1 {
    background-color: #313131;
    border-color: #313131;
    height: auto;
}

.navbar-default_foot1 .navbar-brand,
.navbar-default_foot1 .navbar-brand:hover {
    color: #fff;
    padding: 6px 15px;
    font-size: 3.5rem;
}

.navbar-default_foot1 .navbar-text {
    color: #fff;
    font-weight: 700;
    font-size: 2rem;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-right: 40px;
}

.navbar-default_foot1MVL {
    background-color: #343434;
    border-color: #343434;
    height: auto;
}

.navbar-default_foot1MVL .navbar-brand,
.navbar-default_foot1MVL .navbar-brand:hover {
    color: #fff;
    padding: 6px 15px;
    font-size: 3.5rem;
}

.navbar-default_foot1MVL .navbar-text {
    color: #fff;
    font-weight: 700;
    font-size: 2rem;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-right: 45px;
}



.navbar-default_foot2 {
    background-color: #050505;
    border-color: #050505;
    word-wrap: break-word;
    text-align: center;
    height: auto;
}

.navbar-default_foot2 .navbar-brand,
.navbar-default_foot2 .navbar-brand:hover {
    color: #fff;
    padding: 6px 15px;
    font-size: 3.5rem;
}

.navbar-default_foot2 .navbar-text {
    color: #fff;
    font-weight: 700;
    font-size: 2rem;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-right: 45px;
}


.navbar-default_foot2MVL {
    background-color: #050505;
    border-color: #050505;
    word-wrap: break-word;
    text-align: center;
    height: 60%;
}

.navbar-default_foot2MVL .navbar-brand,
.navbar-default_foot2 .navbar-brand:hover {
    color: #fff;
    padding: 6px 15px;
    font-size: 3.5rem;
}

.navbar-default_foot2MVL .navbar-text {
    color: #fff;
    font-weight: 700;
    font-size: 2rem;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-right: 45px;
}

.texto-footer{

    font-size: 80%;
    color: #edeef0;
    
}
.texto-footerMVL{

    font-size: 60%;
    color: #edeef0;
    
}

 #img-foot {
    width: 98px;
    height: 30px;
    min-width: 40px;
    min-height: 40px;
   
}

#img-footMVL {
    width: 98px;
    height: 30px;
    min-width: 40px;
    min-height: 40px;
   
}





.form-control >select{

    width: 98%;
} 

 

.terminos_con{
    color:cornflowerblue ;
}
.terminos_con:hover{
    color:cornflowerblue ;
}

.p-title-estado-exi{

    color:#4e9d85;    
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    margin-top:2%;
}

.p-title-estado-recha{

    color:#E52A1B;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    margin-top:2%;
    font-family: 'AMX regular';
    font-size: 14px;
}

.p-title-img{

    margin-top:10%;
    

}
.p-title-img_mvl{

    margin-top:10%;

}
.frm_domicilia input{

    margin-left:0;
    
}

/*#ayuda_card{

    width: 60%;
    height: 60%;
}*/




/*INICIO ESTILOS HEADER NUEVO*/

.navbar_new {
    position: relative;
    min-height: 30px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

/* Inicio estilos barra de navegación. */
.navbar_new  {
    border-radius: 0;
    margin-bottom: 0;
}

.navbar_new  img {
    width: 90px;
    height: 28px;
    margin-top: 10px;
   margin-left:4%;
}

.navbar-default_new {
    background-color: #E52A1B;
  
}

.navbar-default_new .navbar-brand,
.navbar-default_new .navbar-brand:hover {
    color: #fff;
    padding: 6px 15px;
    font-size: 3.5rem;
}

.navbar-default_new .navbar-text {
    color: #fff;
    font-weight: 700;
    font-size: 2rem;
    margin-top: -4px;
    margin-bottom: 3px;
    padding-right: 0px;
}


.navbar_new_fondo {
    position: relative;
    min-height: 100px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

/* Inicio estilos barra de navegación. FONDO 1 */
.navbar_new_fondo  {
    border-radius: 0;
    margin-bottom: 0;
}

.navbar_new_fondo  img {
    width: 90px;
    height: 22px;
    margin-left: -20px;
}

.navbar-default_new_fondo {
    background-image: url('../imagenes/fondo-top.png');
    -webkit-background-size: 100% 100%;
   -moz-background-size: 100% 100%;
   -o-background-size: 100% 100%;
   background-size: 100% 100% !important;
   background-repeat:no-repeat !important;
    
}

.navbar-default_new_fondo .navbar-brand,
.navbar-default_new_fondo .navbar-brand:hover {
    color: #000;
    padding: 6px 15px;
    font-size: 3.5rem;
}

.navbar-default_new_fondo .navbar-text_fondo {
    color: #5c5c5c;
    
    margin-top: 4%;
    margin-bottom: 0px;
    text-align: center;
    font-family: 'AMX regular';
    font-weight: 100;
}



.navbar-text_fondo {
    float: center;
    margin-left: 15px;
    margin-right: 15px;
   
}

.navbar_new_fondo {
    position: relative;
    min-height: 120px;
  
    border: 1px solid transparent;
    z-index: 1;
}

.navbar_new_fondoMvl {
    position: relative;
    min-height: 110px;
  
    border: 1px solid transparent;
    z-index: 1;
}

/* Inicio estilos barra de navegación. FONDO 2*/
.navbar_new_fondo2  {
    border-radius: 0;
    margin-bottom: 0;
}

.navbar_new_fondo2  img {
    width: 90px;
    height: 22px;
    margin-left: -20px;
}

.navbar-default_new_fondo2 {
    background-image: url('../imagenes/fondo-top2.png');
    -webkit-background-size: 100% 100%;
   -moz-background-size: 100% 100%;
   -o-background-size: 100% 100%;
   background-size: 100% 100% !important;
   background-repeat:no-repeat !important;
   height: 90px;
   margin-top: -4px;
   
    
}


/*estilo en los divs de los textos en el enbezado*/





.titulo{

    margin-top: 2%;
}

.pagos_titulo{

    font-weight: 600;
    color: #EF3829;
}

.recargas_titulo{

    font-weight: 100;
    color: #E52A1B;
}

@media (min-width: 781px) {
    #fecha_pagos >select{
        margin-left: 1% !important;
        height: 38px;
        width: 30%;
    
    }
	
    .titulo{

        margin-top: 2%;
    }

    .divs_pasos{

        padding-left: 0px;
        padding-right: 0px;
        margin-top: 1px;
    }
    .active_text h3{
 
        color: #2c97ad;
        font-family: 'AMX regular';
        font-size: 14px;
        
   
   }
   
   .inactive_text h3{
    
       color: #000;
       font-family: 'AMX regular';
       font-size: 14px;
       
   
   }
 
}
@media only screen and (max-width: 360px) {
    #fecha_pagos >select{
        margin-left: 1% !important;
        height: 38px;
        width: 30%;
    
    }
	
    .titulo{

        margin-top: 2%;
    }
    .divs_pasos{

        padding-left: 0px;
        padding-right: 0px;
       
    }
    .active_text h3{
 
        color: #2c97ad;
        font-family: 'AMX regular';
        font-size: 14px;
        
   
   }
   
   .inactive_text h3{
    
       color: #000;
       font-family: 'AMX regular';
       font-size: 14px;
       
   
   }
  
}
@media screen and (max-width: 736px) {
    #fecha_pagos >select{
        margin-left: 1% !important;
        height: 38px;
        width: 30%;
    
    }
	
    .titulo{

        margin-top: 2%;
    }

    .divs_pasos{

        padding-left: 0px;
        padding-right: 0px;
       
    }
    .active_text h3{
 
        color: #2c97ad;
        font-family: 'AMX regular';
        font-size: 14px;
        
   
   }
   
   .inactive_text h3{
    
       color: #000;
       font-family: 'AMX regular';
       font-size: 14px;
       
   
   }
  
   
    
}



@media screen and (max-width: 768px) and (min-width: 690px) and (orientation: landscape) {
    #fecha_pagos >select{
        margin-left: 1% !important;
        height: 38px;
        width: 30%;
    
    }
	
    .titulo{

        margin-top: 2%;
    }

    .divs_pasos{

        padding-left: 0px;
        padding-right: 0px;
        margin-top: 32px;
       
    }
    .active_text h3{
 
        color: #2c97ad;
        font-family: 'AMX regular';
        font-size: 14px;
        
   
   }
   
   .inactive_text h3{
    
       color: #000;
       font-family: 'AMX regular';
       font-size: 14px;
       
   
   }
   
   
}



@media screen and (max-width: 1024px) and (min-width: 768px) and (orientation: portrait) {

    #fecha_pagos >select{
        margin-left: 1% !important;
        height: 38px;
        width: 30%;
    
    }
    .navbar-default_new_fondo .navbar-text_fondo {
        
        font-size:2rem;
       
    }
	
    .titulo{

        margin-top: 2%;
    }

    .divs_pasos{

        padding-left: 0px;
        padding-right: 0px;
       
    }
    .active_text h3{
 
        color: #2c97ad;
        font-family: 'AMX regular';
        font-size: 17px;
        
   
   }
   
   .inactive_text h3{
    
       color: #000;
       font-family: 'AMX regular';
       font-size: 17px;
       
   
   }
  
}

@media screen and (min-width: 1024px) and (orientation: landscape) {

    #fecha_pagos >select{
        margin-left: 1% !important;
        height: 38px;
        width: 30%;
    
    }

    .navbar-default_new_fondo .navbar-text_fondo {
        
        font-size: 2rem;
       
    }
    
    .titulo{

        margin-top: 2%;
    }

    .divs_pasos{

        padding-left: 0px;
        padding-right: 0px;
    }
    .active_text h3{
 
        color: #2c97ad;
        font-family: 'AMX regular';
        font-size: 14px;
        
   
   }
   
   .inactive_text h3{
    
       color: #000;
       font-family: 'AMX regular';
       font-size: 14px;
       
   
   }
  

}



@media (max-width: 760px) and (min-width: 368px) {

    #fecha_pagos >select{
        margin-left: 1% !important;
        height: 40px;
        width: 106%;
    
    }

    .navbar-default_new_fondo .navbar-text_fondo {
        
        font-size: 1.6rem;
       
    }
	
    .g-recaptcha   {
        transform: scale(0.95);
        transform-origin: 0 0;
       }
    
    .titulo{

        margin-top: 0%;
    }

   
    .divs_pasos{

        padding-left: 0px;
        padding-right: -20px;
        margin-top: 32px;
    }
    .active_text h3{
 
        color: #2c97ad;
        font-family: 'AMX regular';
        font-size: 14px;
        margin-right: 15px;
   
   }

   
   
   .inactive_text h3{
    
       color: #000;
       font-family: 'AMX regular';
       font-size: 14px;
       
   
   }

  
  
}

@media (max-width: 368px) and (min-width: 200px) {

    #fecha_pagos >select{
        margin-left: 1% !important;
        height: 40px;
        width: 102%;
    
    }

    .navbar-default_new_fondo .navbar-text_fondo {
        
        font-size: 1.6rem;
       
    }
	
    .titulo{

        margin-top: 2%;
    }

    .divs_pasos{

        padding-left: 0px;
        padding-right: 0px;
        margin-top: 20px;
    }
    .active_text h3{
 
        color: #2c97ad;
        font-family: 'AMX regular';
        font-size: 14px;
        
   
   }

   .g-recaptcha   {
    transform: scale(0.75);
    transform-origin: 0 0;
   }

   
   .inactive_text h3{
    
       color: #000;
       font-family: 'AMX regular';
       font-size: 14px;
       
   
   }

   
   
  
}
.div_flecha{
    margin-top: -15px;
    margin-left: 1.5%;
  }
.img_enca {
    width: 57px;
    position: relative;
}
.img_res {
    width: 18px;
    position: relative;
}
.img_enca_flecha{

    width:100px;margin-top:11px
}


.btn_primary3New{

    border-radius: 5px;
    background-color: #5E5E5E;
    font-size: 20px;
    width: 100%;
   
    color: #fff;
    height: 42px;
    border: 1px solid #fff;
}

.btn-primary2New{

    border-radius: 5px;
    background-color: #E52A1B;
    font-size: 20px;
    width: 100%;
    
    color: #fff;
    height: 42px;
    border: 1px solid #E52A1B;
}


.tittle-1New .infoNew {
    background-color: #f7f7f7 !important;
    border-radius: 10px !important;
    display: center;
    margin-bottom: 15px;
}

.informa_parcial{

    border: 2px solid #f3f3f3;
    border-radius:5px;
    color:#616060;
    margin-top: 3%;
}

/* Diseño Multipagos */

.checkbox_Mul{

    float: none;
    margin: 10px !important;
    display: unset !important;
    -ms-transform: scale(2); /* IE */
    -moz-transform: scale(2); /* FF */
    -webkit-transform: scale(2); /* Safari y Chrome */
    -o-transform: scale(2); /* Opera */
    padding: 10px;
}

.label_titulo_transac{

    font-size: 30px;
    font-weight: 500;
    color: #6f6f6fdb;
    text-align: center;
}

.label_titulo_subtransac{

    font-weight: 500;
    color: #6f6f6fdb;
    text-align: center;
}

.img_transac_titulo{

    float: initial;
    height: 42px;
    width: 42px;
}

.p-title-nc{

    margin-top: 5px;
}

.page_title_maximo{
    
    margin: 20px 25% !important;
    width: 84% !important;
}

.title_multi_refeCT{

    font-weight: 500;
    color: #3c8dbc;
    font-size: 20px;
    
}

.title_multi_refeCT_pagos{

    font-weight: 500;
    color: #6f6f6fdb;
    font-size: 14px;
    margin-top: 10px;
}
.enlace_a_terminos{

    text-decoration: underline;
}

.enlace_a_terminos:hover {
    
    font-weight: 500;
    text-decoration: underline;
    color: #3c8dbc;
}

.enlace_a_terminos:link { 
    
    color: #3c8dbc; 
    text-decoration: underline;
}      

.inputTextform{

    height: 2.5em;
}

.text_div_totalCT{

    border: 2px solid #9c9797;
}

.totalizado_carteraCT{

    margin: 10px;
    text-align: left;
}

.ct_totalizado_st{

    font-size: 18px;
}

.total_label_CTA{

    color: #E52A1B;
    font-weight: 700;
}

/* Funciones Check Box*/
[type="checkbox"]{

    display: block;
}

.labelCheckbox{

    padding-left: 1.6em;
    position: relative;
    font-size: 1.3em;
    
}

.labelCheckbox:before{

    content: '';
    border: solid 2px #9e9e9e9e;
    border-radius: 3px;
    width: 1.2em;
    height: 1.1em;
    position: absolute;
    left: 0px;
    top: 3px;
    transform: rotate(0deg);
    background: white;
}

[type="checkbox"]:checked + .labelCheckbox:before{

    border-color: rgb(116, 116, 116);
    color: #E52A1B;
    content: '\f00c';
    font-family: 'FontAwesome';
    transform: rotate(360deg);
}

.labelCheckboxPagos{

    padding-left: 1.6em;
    position: relative;
    font-size: 1.3em;
    
}

.labelCheckboxPagos:before{

    content: '';
    border: solid 2px #9e9e9e9e;
    border-radius: 3px;
    width: 1.2em;
    height: 1.1em;
    position: absolute;
    left: 0px;
    top: 3px;
    transform: rotate(0deg);
    background: white;
}

[type="checkbox"]:checked + .labelCheckboxPagos:before{

    border-color: rgb(116, 116, 116);
    color: #E52A1B;
    content: '\f00c';
    font-family: 'FontAwesome';
    transform: rotate(360deg);
}

.styleSelect select {
    background: #E52A1B;
  
    padding: 5px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    border-radius: 0;
    height: 34px;
    -webkit-appearance:none;
   -moz-appearance:none;
    color: #E52A1B; 
   }
    
    .styleSelect { 
       
    
       padding: 5px;
       font-size: 16px;
       line-height: 1;
       border: 0;
       border-radius: 5px;
       height: 34px;
       -webkit-appearance: none;
       background-position-x: 244px;
       background: url("../imagenes/flecha_select.png") no-repeat right #fff;
       
   }


   input[class="rdb"] {
    /* Remueve la apariencia de fondo por defecto */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Crea una apariencia perzonalizada del boton radio */
    display: inline-block;
    width: 20px;
    height: 20px;
    padding: 2px;
    /* Color de fondo solo para el contenido */
    background-clip: content-box;
    border: 2px solid #bbbbbb;
    background-color: #e7e6e7;
    border-radius: 50%;
  }
  
  /* Apariencia para el boton de radio marcado */
  input[class="rdb"]:checked {
    background-color: #E52A1B;
  }
  
  /* Estilos opcionales, estoy usando esto para centrar botones de radio */
  .flex {
    display: flex;
    align-items: center;
  }
  
/* Imput de sms */
.sms_input_clapay{
	
	width: 10% !important;
	padding: 5px !important;
	text-align: center;
}

.sms_div_clapay{
	
	display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

@media(min-width:2000px){
	.btn_relevo{
		width:240px !important;
	}
	
}