.flex {
    display: flex;
    align-items: center;
}

.itemDesktop {
    display: none;
}

.containerVolumes {
    border-radius: 8px;
    background: #DDEDF9;
    padding: 16px;
    margin-top: 16px;
}

.modalVolumes {
    display: none;
    background-color: var(--light);
}

    .modalVolumes h2 {
        font-size: 24px;
        color: var(--primary-color-900);
        margin: 0;
        font-weight: bold;
    }

.headerModalVolumes {
    margin-bottom: 24px;
}

.bodyModalVolumes {
    border-radius: 8px;
    padding: 24px;
    background-color: var(--base-color);
}

.volumes {
    border: 1px solid var(--light-color-600);
    border-radius: 8px;
    overflow: visible;
}

    .volumes .conteudo:first-child {
        border-radius: 8px;
        margin-top: 0px;
    }

.hasMoreThanOneElement .conteudo:first-child {
    border-radius: 8px 8px 0 0;
}

.hasMoreThanOneElement .conteudo:last-child {
    border-radius: 0 0 8px 8px;
}

.volumes .conteudo {
    background-color: var(--base-color);
}

    .volumes .conteudo .divider {
        display: none;
    }

    .volumes .conteudo .flex {
        flex-direction: column;
    }

    .volumes .title {
        font-size: 16px;
        font-family: 'HelveticaNeueLight', sans-serif;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #025692;
    }

.volumesInternacional .containerInputs {
    margin-top: 16px;
}

    .volumes .title p {
        margin: 0;
    }

    .volumes .title .volume-numeracao {
        transition: opacity 0.3s ease;
        display: inline-block;
    }

.volumes .inputAzul {
    width: 100%;
    margin-bottom: 8px;
    font-family: 'Helvetica Neue';
}

    .volumes .inputAzul input {
        border-radius: 8px;
    }

    .volumes .inputAzul label {
        color: var(--primary-color-500);
    }

    .volumes .inputAzul.errorValidator i,
    .volumes .inputAzul.errorValidator label {
        color: var(--danger-color);
    }

.bodyModalVolumes button {
    border: none;
    border-radius: 8px;
    width: 100%;
    margin-top: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Helvetica Neue';
}

    .bodyModalVolumes button.btnAdicionar {
        background-color: #F5F9FC;
        color: var(--primary-color-500);
        font-size: 16px;
        justify-content: center;
        gap: 8px;
        padding: 20px 0;
        margin-top: 14px;
    }

    .bodyModalVolumes button.btnCalcularEnvio {
        background-color: var(--main-color-500);
        color: var(--base-color);
        padding: 16px 0;
    }

        .bodyModalVolumes button.btnCalcularEnvio:disabled {
            background-color: var(--light-color-600);
            cursor: not-allowed;
        }

@media(min-width: 1024px) {
    .itemMobile {
        display: none;
    }

    .itemDesktop {
        display: block;
    }

    .modalVolumes {
        margin: -200px -15px -48px;
        padding: 50px 124px 124px;
    }

    .volumes {
        border: none;
    }

        .volumes .conteudo {
            background-color: transparent;
            margin-top: 16px;
        }

            .volumes .conteudo .divider {
                display: block;
            }

            .volumes .conteudo .flex {
                padding: 12px;
                flex-direction: column;
                border-radius: 8px;
                border: 1px solid var(--light-color-600);
                background: var(--base-color);
                overflow: hidden;
                flex-direction: row;
                gap: 16px;
            }

        .volumes .inputAzul input {
            border: none;
        }

        .volumes .inputAzul input:focus {
            border: 2px solid var(--primary-color-500);
        }

        .volumes .inputAzul.errorValidator input {
            border: 1px solid var(--light-color-900);
        }

        .volumes .inputAzul.errorValidator {
            margin-bottom: 14px;
        }

    .volumes .btnExcluirVolume {
        cursor: pointer;
    }

    .volumes .inputAzul {
        margin-bottom: 0px;
    }

    .bodyModalVolumes .btnCalcularEnvio {
        max-width: 184px;
    }

    .footerModalVolumes {
        display: none;
    }
}


@media (max-width: 1024px) {
    .modalVolumes {
        height: 100vh;
        overflow: hidden;
    }

    .headerModalVolumes {
        width: 100%;
        padding: 24px;
        background-color: var(--base-color);
        border-bottom: 1px solid var(--light-color-700);
        margin-bottom: 0;
    }

        .headerModalVolumes h2 {
            font-size: 20px;
        }

    .bodyModalVolumes {
        overflow-y: scroll;
        height: 100%;
        background-color: var(--light);
        padding-bottom: 200px;
    }

        .bodyModalVolumes .containerVolumes {
            padding: 16px;
            border-radius: 8px;
            border: 1px solid var(--light-color-100);
            background-color: var(--base-color);
        }

    .volumes .inputAzul {
        margin-bottom: 16px;
    }

        .volumes .inputAzul.errorValidator {
            margin-bottom: 24px;
        }

    .volumes .conteudo {
        padding: 16px;
        border: 1px solid var(--light-color-500);
    }

    .conteudo .flex {
        transition: all 0.3s ease;
        margin-top: 16px;
    }

    .conteudo.hide .flex,
    .conteudo.hide .containerInputs,
    .conteudo.hide .containerCanBeStacked {
        display: none;
    }

    .btnOpenCloseVolume svg {
        transition: transform 0.3s ease;
    }

    .btnOpenCloseVolume.rotate svg {
        transform: rotate(180deg);
    }

    .actionsVolume {
        display: flex;
        gap: 16px;
    }
}