#form {
    width: 100%;
    max-width: 600px;
    background-color: rgb(255, 255, 255); /*whitesmoke*/
    border-radius: 4px;
    font-size: 15px;
    margin: 0 auto;
}

#form h1 {
    font-family: 'Lobster Two', cursive;
}

.forma_de_pago_input {
    height: 40px;
    /* width: 370px; */
    border-radius: 5px;
    border: 1px solid #56ccf5;
    background-color: #eee;
    color: #333;
    padding: 0;
    text-align: center;
    font-size: 1.2em;
    margin-right: 25px;

}



.form button {
    text-align: center;
    vertical-align: middle;
    padding: .18em;
    cursor: pointer;
    color: white;
    background-color: #56ccf2;
    border: none;
    border-radius: .3em;
    background-color: #2d9cbd;
}




/* This class sets up a container to hold input controls. 
It's configured to use flexbox layout with a column direction, meaning the input controls will stack vertically inside it. */
.input-control {
    display: flex;
    flex-direction: column;
}

/* This targets the input elements inside the .input-control container. 
It sets various styles for the input elements, such as border, border-radius, display, font size, padding, and width. 
This makes the input fields have a consistent appearance with rounded borders, adequate padding, and occupying the full width of their container. */
.input-control input {
    height: 40px;
    /* width: 370px; */
    border-radius: 5px;
    border: 1px solid #56ccf5;
    background-color: #eee;
    color: #333;
    padding: 0;
    text-align: center;
    font-size: 1.2em;
    margin-right: 25px;
}

/* This targets the input elements inside the .input-control container. 
It sets various styles for the input elements, such as border, border-radius, display, font size, padding, and width. 
This makes the input fields have a consistent appearance with rounded borders, adequate padding, and occupying the full width of their container. */
.input-control textarea {
    height: 40px;
    /* width: 370px; */
    border-radius: 5px;
    border: 1px solid #56ccf5;
    background-color: #eee;
    color: #333;
    padding: 1;
    text-align: left;
    font-size: 1.2em;
    margin-right: 25px;
    height: 5pc;
}
input-control textarea:focus {
    border-color: #56ccf5; /* keeps the border color the same when focused */
    outline: none; /* removes the default outline */
}


/*This targets the input elements inside .input-control when they are in focus (i.e., when clicked or tabbed into). 
It removes the default focus outline, which can improve the visual appearance and consistency of the form controls.*/
.input-control input:focus {
    outline: 0;
}

/*These target the input elements inside .input-control when they are in a "success" or "error" state, respectively. 
They change the border color of the input field to indicate success or error feedback to the user. 
For example, a green border for success and a red border for error.*/
.input-control.success input {
    border-color: #09c372;
}

/*This targets an element with the class error that is a child of .input-control. 
It's likely used to display error messages or indicators associated with input fields in an error state. 
It sets the text color to red, reduces the font size, and sets a specific height, likely to accommodate small error messages.*/
.input-control.error input {
    border-color: #ff3860;
}

/*Overall, this rule appears to be styling error messages or indicators within input controls. 
It makes the text red, sets a small font size, and restricts the height of the element to maintain a compact appearance.*/
.input-control .error {
    color: #ff3860;
    font-size: 9px;
    height: 13px;
}

/* Spinner while processing order */
.spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }