@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body{
    background-image: url('./assets/imgs/walpaper-money.jpg');
    background-position: center;
    background-repeat: no-repeat;
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

h1{
    font-size: 1.8rem;
    font-weight: 700;
}
.logo{
    display: flex;
    justify-content: center;
    margin: 10px;
}

.box{
    display: block;
    background-color: rgb(16, 134, 26);
    padding: 40px;
    border-radius: 10px;
}

.field_values{
    display: flex;
    flex-direction: column;
}

.box_fields{
    display: flex;
    justify-content: space-between;

}

label{
    font-size: 18px;
    font-weight: 600;
}

input{
    border: none;
    border-radius: 5px;
    padding: 5px;
    font-size: 18px;
}

select{
    padding: 5px;
    border: none;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 600;
    width: 150px;
}

button{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 15px;
    text-align: center;
    background-color: #ffe606;
    border: none;
    border-radius: 10px;
    margin-top: 10px;
    width: 100%;
    font-size: 1.1rem;
    font-weight: 600;
}

button > img{
    margin-right: 5px;
}

button:hover{
    transition: 0.5s;
    cursor: pointer;
    background-color: rgb(196, 146, 39);
    animation: l12 0.5s infinite linear;
}
@keyframes l12{
    from {transform: translateY(0.7px);
    }
    to{
        transform: translate(0);
    }
}

.result{
    display: none;
    background-color: rgb(180, 28, 28);
    padding: 20px;
    margin-top: 10px;
    color: #000;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
    border-radius: 10px;
}

.result_end{
    font-size: 1.4rem;
}

.tax{
    font-size: 0.9rem;
}

h2{
    font-size: 18px;
}

.info{
    display: none;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    font-size: 0.9rem;
    font-weight: 600;
}

.error{
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    font-size: 1rem;
    font-weight: 600;
}

.loading{
    display: none;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.loader {
  display: block;
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
  radial-gradient(farthest-side,#f8d71d 94%,#0000) top/8px 8px no-repeat,
  conic-gradient(#0000 30%,#e8ff16);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
  animation: l13 0.4s infinite linear;
}
@keyframes l13{ 
  100%{transform: rotate(1turn)}
}