/*REUMEN DE COMPRA*/
.resumen-compra hr {
    border-top: 1px solid #d6d6d6;
    margin: 10px 0;
}
.resumen-white {
    background: #fff; border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}
.resumen-compra {
    float: left; width: 25%; position: relative; top: 30px;
}
.resumen-title{
    background: #cacaca;
    color: #6e6e6b;
    font-size: 13px;
    padding: 17px 5px;
    font-weight: 500;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    text-align: center;
    text-transform: uppercase;
}
.resumen-contenido {
    background: #fff; padding: 15px;
    min-height: 120px;
}
.resumen-item {
    display: table; width: 100%;
}
.art-cantidad{
    font-size: 16px;
    font-weight: 300;
    color: #c1c1c1;
    float: right;
    padding: 5px 0;
    display: inline-block;
    vertical-align: middle;
}
.resumen-item-title {
    font-size: 11px; display: inline-block; padding: 8px 0 0;
    vertical-align: middle; font-weight: 500; max-width: 85%;
}
.resumen-total {
    background: #fff; border-bottom-left-radius: 10px; color: #a2a2a2;
    border-bottom-right-radius: 10px; padding: 0 15px;
}
.resumen-total div {
    display: table; width: 100%; padding: 0;
}
.resumen-total div p {
    margin: 0; font-size: 11px; padding: 0;
    display: inline-block;
    vertical-align: middle;
}
.resumen-total div span {
    float: right; display: inline-block; font-size: 11px; vertical-align: middle; padding: 3px 0 0;
}
.resumen-total div h6{
    color: #0050a3;
    font-size: 17px;
    font-weight: 400;
    text-align: right;
    margin: 20px 0 20px;
}
.resumen-total div h6 strong {
    font-weight: 500;
}
/*INICIA CHECKOUT*/
.checkout-wrap {
    width: 100%; position: relative; background: url('../images/carrito/carrito-de-compras-bg.jpg') no-repeat center; background-size: cover;
}
.checkout-cont {
    width: 85%; position: relative; margin: 0 auto; padding: 150px 0 50px; display: table; max-width: 1000px;
}

.datos-envio h2, .datos-pago h2{
    font-size: 16px; color: #676767; text-transform: uppercase; font-weight: 500; margin: 0 0 7px;
    line-height: 150%;
}
.datos-pago h2  {
    display: inline-block;
}
.cards-pay {
    float: right; margin: 8px 0 0; width: 200px;
}
.realizar-pago {
    text-align: left; margin: 30px 0 0;
}
.btn-realizar-pago {
    text-transform: uppercase; font-size: 18px; letter-spacing: 5px;
    font-weight: 500; border: 2px solid rgba(0, 196, 67, 0); border-radius: 10px; padding: 9px 12px 9px 20px;
    transition:All 0.3s ease;
    -webkit-transition:All 0.3s ease;
    -moz-transition:All 0.3s ease;
    -o-transition:All 0.3s ease; vertical-align: middle; display: inline-block;
}
.myButton {
    margin: 0 10px 0 0;
}
.input{
    width: 100%; height: 40px; position: relative; margin: 8px 0;
}
.input-col-2{
    width: 49%; display: inline-block; vertical-align: middle;
}
.input-col-2 {
    padding-right: 20px;
}
.nopad {
    padding:0;
}
.tarjeta{
    width: 53%; display: inline-block; margin: 0px 10px 0 0;
}

.vigencia {
    width: 19%; display: inline-block; margin: 0px 10px 0 0;
}
.cvv {
    width: 19%; display: inline-block; margin: 0px 0 0;
}
.pagos-de {
    float: right; margin: 20px 0 0; font-size: 16px; font-weight: 300; color: #676767;
}
.datos-envio {
     margin: 0 20px;
}
.datos-pago {
    margin: 20px 20px 0;
}
.datos-envio-cont, .datos-pago-cont {
    background: #fff; padding: 20px 40px; border-radius: 20px; border: 1px solid #dedede;
}
.datosForm {
    float: left; width: 75%;
}
.datosForm input[type=text]{
    width: 100%; height: 25px; background: none;
    border-bottom: 1px solid #d9d9d9; border-right: none; border-top: none;
    border-left: none; position: relative; z-index: 10; outline: none;
    font-size: 12px; position: relative; z-index: 1;
}
.datosForm label{
    position: absolute; z-index: 0; top:5px; font-size: 13px;
    transition: .3s all ease-in-out; -webkit-transition: .3s all ease-in-out;
    -moz-transition: .3s all ease-in-out; -ms-transition: .3s all ease-in-out;
    -o-transition: .3s all ease-in-out; color: #000;
}
.datosForm label.activeLabel{
    font-size: 11px; top:-10px; color: #a2a2a2;
}

/************ ERROR FORMULARIO ***************/
.parsley-required{
    display: table; width: 100%; margin-top: 10px;
    color: red; font-size: 10px;
}

/***** CHECK *******/
.check{
    width: 100%; margin-top: 20px;
    box-sizing: border-box; padding-left: 20px;
}
/**** RADIO PAGO *****/
.inputR{
    width: 100%; height: auto; display: table;
}
.radio{
    width: 50%; float: left; display: table; padding-bottom: 10px;
}
.radio label{
    color: #000; position: relative; top: 0px; left: 10px;
}
.radio .activeLabel{
    color: #000 !important; font-size: 14px !important; top: 0px !important;
}

/*TERMINA CHECKOUT*/
#paypal-button-container {
    display: inline-block; vertical-align: middle;
}
@media screen and (max-width: 1280px) {
    .radio{
        width: 100%; float: none;
    }
}
/*=======MOVIL========*/
@media screen and (max-width: 1150px) {
    .checkout-cont {width: 90%;}
    .datosForm label {font-size: 12px;}
}

@media screen and (max-width: 1130px) {
    .checkout-cont {padding: 200px 0 50px;}

}

@media screen and (max-width: 850px) {
    .checkout-cont {padding: 150px 0 50px;}
    .resumen-compra {width: 100%; top: initial;}
    .datosForm {width: 100%;}
    .datos-envio {margin: 20px 0;}
    .datos-pago {margin: 0px;}
    .resumen-contenido {min-height: initial;}

}
@media screen and (max-width: 770px) {
    .checkout-cont {padding: 100px 0 50px;}
}
@media screen and (max-width: 700px) {
    .checkout-cont {width: 80%;}
}

@media screen and (max-width: 500px) {
    .checkout-cont {width: 90%;}
    .cards-pay{
        width: 160px; top: -5px; margin-top: 0px;
    }
}

@media screen and (max-width: 450px) {
    .vigencia {padding-right: 20px;}
    .vigencia, .cvv {width: 47%; margin: 0; }
    .tarjeta {width: 100%; margin: 15px 0;}
    .meses {width: 100%}
    .pagos-de {float: none; margin: 0;}
    .datos-envio-cont, .datos-pago-cont {padding: 20px 25px;}
}


.address{
    display: block;
    width: 74.5%;
    height: calc(1.5em + 14px + 2px);
    padding: 7px .75rem;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.5;
    color: #2d353c;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #d5dbe0;
    border-radius: 4px;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.address:focus {
    color: #2d353c;
    background-color: #fff;
    border-color: #5db0ff;
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(52,143,226,.25);
}

input[type="text"]:disabled {
    color: #000;
    cursor: not-allowed;
  }

.selectedShipping {
    background: white;
    border: 2px solid #ccc;
    border-radius: 5px;
    padding: 10px 20px;
    margin-top: 5px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}

.selectedShipping span {
    flex: 1;
    font-weight: 500;
    margin-left: 10px;
}
.selectedShipping small {
    color: #8f8f8f;
}