.form-container {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 100px;
    padding: 30px;
    background-color: #EDFAFF;
    border-radius: 32px;
}

.form-left {
    width: 50%;
}

.form-right {
    width: 50%;
}

label {
    /*font-weight: bold;*/
    display: block;
    margin-bottom: 5px;
    color: #333;
}

input, textarea, button, output {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

input[type="range"] {
    width: 100%;
}

input#actionUnits {
    padding: 10px 0;
}

.product-size, .manipulation-types{
    display: flex;
    /*justify-content: flex-start;*/
    flex-wrap: nowrap;
}

.additional-services {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

button {
    background-color: #FFA000;
    color: white;
    font-weight: bold;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #FFB300;
}

input#unitsOutput {
    margin-bottom: 20px!important;
}

#unitsContainer {
    display: inline-flex;
    align-items: center;
    gap: 5px; /* Espacio entre el número y el signo + */
}

#unitsOutput {
    width: auto; /* Ajusta el ancho del campo al contenido */
    text-align: right; /* Alinea el número a la derecha */
}

#outputSpan {
    font-size: 1em; /* Ajusta el tamaño del signo + para que coincida con el número */
    color: inherit; /* Hereda el color del texto del número */
    position: relative;
    right: 20px;
    top: -11px;
}

/* Para navegadores Webkit (Chrome, Safari, Edge) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Para Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

/*span#outputSpan {
    position: relative;
    right: 28px;
    top: -10px;
}*/

.reference-counter {
    display: flex;
    gap: 10px;
    align-items: center;
}

.reference-counter button {
    padding: 5px;
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    background-color: #fff;
    cursor: pointer;
}

.reference-counter input {
    text-align: center;
}

.form-row {
    display: flex;
    gap: 60px;
}

.form-column {
    width: 50%;
}

label#label-product-size {
    margin-top: 20px;
}

.product-option {
    cursor: pointer;
    text-align: center;
    border: 2px solid transparent;
    border-radius: 8px;
    margin: 4px;
    transition: border-color 0.3s;
}

.product-size{
    justify-content: space-between;
    margin-bottom: 15px;
}

.product-option.selected {
    border-color: #0D7690;
}

/*caja unidades para los dos forms*/
output#unitsOutput, output#palletsOutput {
    display: flex;
    justify-content: flex-end;
}

label#campo-uni-cotizar {
    margin-top: 30px;
}

.manipulation-types {
    display: flex;
    flex-direction: column; /* Coloca cada elemento en una nueva línea */
    gap: 10px; /* Añade un espacio vertical entre cada opción */
    margin-top: 10px;
}


.manipulation-types div {
    display: flex;
    align-items: center; /* Asegura que el checkbox y la etiqueta estén alineados verticalmente */
}

.manipulation-types input[type="checkbox"] {
    margin-right: 10px; /* Añade un pequeño espacio a la derecha del checkbox */
    width: auto;
}

button#decreaseReference, button#increaseReference, button#decreaseReference2, button#increaseReference2 {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
}

input#originUnits, input#destinationUnits {
    margin-bottom: 15px;
}

textarea#details {
    margin-bottom: 15px;
}

.additional-services {
    margin-bottom: 15px;
}

/*seccion tambien me interesa*/

.additional-service-option {
    display: inline-block;
    padding: 10px 15px;
    margin: 5px;
    border: 2px solid #ddd;
    border-radius: 12px;
    background-color: #f9f9f9;
    cursor: pointer;
    transition: all 0.3s ease;
}

.additional-service-option:hover {
    background-color: #e6f7ff;
    border-color: #85d7ff;
}

.additional-service-option.selected {
    background-color: #0D7690;
    border-color: #0D7690;
    color: white;
    font-weight: bold;
}

/*formulario izquierdo*/

.form-left input, .form-left textarea, select#palletHeight {
    /* margin-bottom: 10px; */
    border-radius: 6px!important;
    border: 1px solid #E5E7EB!important;
}

/*formulario derecho*/

.form-right {
    margin-top: 58px;
}

.form-right button {
    margin-top: 15px;
    border: none;
    width: 100%;
}

.form-right input {
    margin-bottom: 10px;
    border-radius: 6px!important;
    border: 1px solid #E5E7EB!important;
}



/*SEGUNDO FORMULARIO*/

#pallet-height{
    margin-top: 16px;
}

select#palletHeight {
    margin-bottom: 30px;
}

input#storageDuration {
    margin-bottom: 15px;
}

textarea#details2 {
    margin-bottom: 15px;
}

input#palletsNumber {
    padding: 10px 0;
}

input#palletsOutput {
    text-align: right;
    margin-bottom: 20px;
}

span#palletsSpan {
    margin-left: -20px;
}

/*RESPONSIVE*/

@media screen and (max-width: 960px) {
    .form-container {
        flex-direction: column;
    }

    .form-left,
    .form-right {
        width: 100%;
    }

    .form-right {
        margin-top: 0px;
    }

    .form-row {
        display: block!important;
      }
      
      .form-column {
                width: 100%!important;
      }
}