.lines{
    position: absolute;
    width: 18.2%;
    margin-left: 83.2%;
}

.modalStyle{
    background-color: rgb(11, 53, 184);
    margin-top: 10%;
    margin-left: -28%;
    width: 800px;
}

.linesTwo{
    position: absolute;
    width: 40%;
    margin: -2% 0 0 58%;
}

.closeModal{
    position: absolute;
    width: 4%;
    margin: 2% 0 0 85%;
}

.punterModal{
    width: 30%;
}

.iconModal{
    position: absolute;
    width: 15%;
    margin: -8% 0 0 5%;
}

.pModal{
    color: white;
    margin-left: -5%;
}

.fixed-width {
    width: 85%;
}

select option {
    width: 85%;
}

.title-one{
    text-align: center;
    font-weight: 700;
}

.inputOne{
    margin: 8% 0 0 8%
}

.card-white{
    background-color: #DFE4EF;
    width: 98%;
    margin-left: 1%;
}

.card-blue{
    background-color: rgb(11, 53, 184);
    position: relative;
    width: 98%;
    margin-left: 1%;
}

.img-calculator{
    width: 3%;
    text-align: center;
    margin: 0 0 -6% 32%;
}

.tp-btn-calculate {
    background: #0634C6;
    display: inline-block;
    height: 0px;
    line-height: 3px;
    padding: 19.3px 25px;
    font-weight: 400;
    font-size: 16px;
    font-weight: -10%;
    letter-spacing: 0.05em;
    text-transform: capitalize;
    color: white;
    position: relative;
    transition: all 500ms ease-in-out;
  }
/*   .tp-btn-calculate i {
    margin-left: 5px;
  } */
  .tp-btn-calculate:hover {
    color: #ffffff;
    background-color: #FF7700;
    border-color: #FF7700;
  }

.moneyIcon{
    width: 80%;
    position: relative;
}

.openIcon{
    margin: 25px 0 0 0;
    width: 70%;
    cursor: pointer;
}

.button-blue{
    text-align: center;
    margin: -40px 0 20px 0;
}

.valueDown{
    font-size: 12px;
    margin-top: 2%;
}

.title-two{
    color: white;
    margin: 15px 0 0 25px;
}

.yourCota{
    color: white;
    margin: 2% 0 2% 7%;
}

.value{
    color: white;
    margin: 2% 0 10% 8%;
    font-size: 380%;
}

.valueDownEspecial{
    margin: 20% 0 0 0
}

.marginButton{
    margin-top: 63px;
}

/* Estilos para pantallas muy pequeñas (teléfonos) */
@media (max-width: 480px) {
    .card-white{
        width: 107%;
        margin-left: -3.5%;
    }

    .inputOne{
        margin: 8% 0 0 0;
    }

    .marginButton{
        text-align: center;
        margin-top: 30px;
    }
    
    .valueDownEspecial{
        margin: 15% 0 0 0
    }
    
    .card-blue{
        width: 107%;
        margin-left: -3.5%;
    }

    .img-calculator{
        width: 30%;
        text-align: center;
        margin: 0 0 0 32%;
    }

    .button-blue{
        text-align: center;
        margin: 0 0 20px 0;
    }

    .moneyIcon{
        width: 150%;
        position: relative;
    }
    
    .title-two{
        color: white;
        margin: 2% 0 0 0;
    }

    .openIcon{
        margin: 25px 0 25px 0;
        width: 50%;
    }

    .lines{
        position: absolute;
        width: 60%;
        margin-left: 45%;
        z-index: 2;
    }

    .yourCota{
        color: white;
        margin: 0 0 0 0;
    }

    .value{
        color: white;
        margin: 0 0 0 0;
    }

    .punterModal{
        width: 100%;
    }

    .modalStyle{
        margin-top: 5%;
        margin-left: -3%;
        width: 100%;
    }

    .linesTwo{
        position: absolute;
        width: 40%;
        margin: -4% 0 0 58%;
    }
    
    .closeModal{
        width: 8%;
        margin: 2% 0 0 85%;
    }
    
    .punterModal{
        width: 200px;
    }
    
}