@media screen and (max-width: 500px) {
    .c-section {
        width: 100%;
    }
    body {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
    .overflow {
        overflow: hidden;
    }
    .modal-backdrop {
        align-items: normal;
    }
    .c-wrapper-inputs {
        flex-direction: column;
    }
    /* =-=-=-=-=-=-= HEADER =-=-=-=-=-=-= */
    .c-header {
        width: 100%;
        position: sticky;
        padding: 0 18px;
        background-color: var(--black3);
        height: 60px;
        z-index: 800;
        gap: 0;
        top: -1px;
        border: none; 
    }

    .c-header__logo .c-logo {
        display: none;
    }
    .c-header__logo {
        height: 60px;
        justify-content: space-between;
        width: 100%;
        box-shadow: 0px 10px 20px -10px #161616;
    }
    .c-header__icon {
        width: 24px;
        display: block;
    }
    .c-header--icon {
        font-size: 2.4rem;
    }
    .c-profile--infos {
        grid-template-columns: 1fr;
    }
    /* =-=-=-=-=-=-= NAVBAR =-=-=-=-=-=-= */
    .c-header__logo .nofi-display {
        display: flex;
      }
    .container-nav {
        z-index: 7;
        position: fixed;

        width: 100%;
        top: 80px;
        left: -100%;
        animation: 1s ease closeNavlist;
    }
    
    .c-header__nav {
        width: 80%;
        position: relative;
        overflow: auto;
        background-color: var(--black3);
    }
    
    .c-header__logout a {
        padding: 18px 18px;
    }
    
    .container-nav.openNavlist {
        left: 0;
        backdrop-filter: blur(10px);
        animation: 1s ease openNavlist;
    }

    @keyframes openNavlist {
        from {
            left: -100%;
        }
        to {
            left: 0;
        }
    }

    @keyframes closeNavlist {
        from {
            left: 0;
        }
        to {
            left: -100%;
        }
    }

    .test {
        display: none;
        width: 100%;
        height: 100%;
        background-color: var(black3);
        backdrop-filter: blur(1px);
        z-index: 1;
        position: fixed;
        top: 60px;
        animation: 0.5s ease testClose;
    }
    .test.openTest {
        display: block;
        animation: 0.5s ease testOpen;
    }
    @keyframes testClose {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }
    @keyframes testOpen {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    
    /* =-=-=-=-=-=-= NAVBAR =-=-=-=-=-=-= */
    /* =-=-=-=-=-=-= HEADER =-=-=-=-=-=-= */
    /* =-=-=-=-=-=-= TABLE =-=-=-=-=-=-= */
    .min-colum {
        width: 150px;
    }
    /* =-=-=-=-=-=-= TABLE =-=-=-=-=-=-= */
    /* =-=-=-=-=-=-= SECTION - BODY =-=-=-=-=-=-= */
    .c-section__header {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
    }
    .c-header__profile .profile--userName {
        display: none;
    }
    #c-header__title {
        font-size: 2.4rem;
    }
    .c-header__profile .profile--icon {
        width: 40px;
        height: 40px;
        margin: 0;
    }
    .c-section__body {
        gap: 3rem;
    }
    
    /* =-=-=-=-=-=-= USER =-=-=-=-=-=-= */
    .c-section__user--profile {
        display: none;
    }
    .c-section__user--title {
        display: block;
        font-size: 2.4rem;
        font-weight: 600;
    }
    .user--btns {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    /* =-=-=-=-=-=-= BTN =-=-=-=-=-=-= */
    .ai-circle-plus {
        font-size: 1.8rem;
    }
    .btn__addproduct--text {
        font-size: 1.4rem;
    }
    /* =-=-=-=-=-=-= BTN =-=-=-=-=-=-= */
    /* =-=-=-=-=-=-= USER =-=-=-=-=-=-= */

    /* =-=-=-=-=-=-= PRODUCTS =-=-=-=-=-=-= */
    /* =-=-=-=-=-=-= ADD PRODUCT =-=-=-=-=-=-= */
    .c-product__inputs {
        width: 100%;
        padding: 0 18px;
    }
    /* =-=-=-=-=-=-= ADD PRODUCT =-=-=-=-=-=-= */
    .c-modal__addproduct {
        width: 100%;
    }
    /* =-=-=-=-=-=-= HEADER =-=-=-=-=-=-= */
    .c-product__header {
        display: flex;
        justify-content: space-between ; 
    }
    .c-product--title {
        font-size: 1.8rem;
        font-weight: 600;
    }
    .c-product--icon {
        width: 18px;
    }
    .ai-cross {
        font-size: 1.6rem;
    }
    /* =-=-=-=-=-=-= HEADER =-=-=-=-=-=-= */

    /* =-=-=-=-=-=-= INPUTS =-=-=-=-=-=-= */
    .c-product__inputs {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    label {
        justify-content: center;
    }
    .modal-addProduct {
        width: 100%;
    }
    .inputs {
        grid-template-columns: repeat(2, 1fr);
    }
    /* =-=-=-=-=-=-= BTN =-=-=-=-=-=-= */
    /* =-=-=-=-=-=-= BTN =-=-=-=-=-=-= */
    /* =-=-=-=-=-=-= INPUTS =-=-=-=-=-=-= */
    /* =-=-=-=-=-=-= ESTOQUE =-=-=-=-=-=-= */
    .estoque-buttons {
        flex-direction: column;
        gap: 20px;
    }


    
    /* =-=-=-=-=-=-= ESTOQUE =-=-=-=-=-=-= */
    /* =-=-=-=-=-=-= PRODUCTS =-=-=-=-=-=-= */

    .btn-remover {
        margin-top: 12px;
        border: none;
        width: 80px; /* Reduzi o width para 80px */
        height: 40px; /* Reduzi o height para 40px */
        text-align: center;
        background-color: #e74c3c; /* Cor de fundo vermelha */
        border-radius: 8px; /* Reduzi o raio da borda para 8px */
        color: #fff; /* Texto branco */
        cursor: pointer; /* Mostrar o cursor de apontar ao passar por cima */
    }

    /* =-=-=-=-=-=-= TABLE =-=-=-=-=-=-= */
    .c-table {
        max-height: 470px;
    }
    .c-table__search {
        width: 100%;
    }
    .c-section__table {
        gap: 1.8rem;
    }
    .c-table_header {
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: space-between;
    }
    .c-table__table {
        width: 720px;
        position: relative;
    }
    th {
        white-space: nowrap;
    }
    td {
        white-space: normal;
        font-size: 1.3rem;
        font-weight: 400;
        /* min-width: 130px; */
    }
    #id {
        max-width: 50px !important;
        min-width: 50px !important;
    }
    .categoria {
        width: 180px !important;
    }
    /* =-=-=-=-=-=-= TABLE =-=-=-=-=-=-= */
    /* =-=-=-=-=-=-= SECTION - BODY =-=-=-=-=-=-= */
    /* =-=-=-=-=-=-= CLIENT =-=-=-=-=-=-= */
    .c-section__clients {
        padding: 0 18px;
    }
    /* =-=-=-=-=-=-= CLIENT =-=-=-=-=-=-= */
    /* =-=-=-=-=-=-= FINANCEIRO =-=-=-=-=-=-= */
    .c-financeiro h1 {
        font-size: 2.8rem;
        font-weight: 600;
    }
    .dados-subTitle {
        font-size: 2rem;
    }
    .dados-subSubTitle {
        font-size: 18rem;
    }
    .dados-campos {
        font-weight: bold;
        font-size: 16px;
    }
    .dados-valores {
        font-size: 16px;
    }
    .dados-inputForm {
        flex-direction: column;
        align-items: center;
    }
    /* =-=-=-=-=-=-= FINANCEIRO =-=-=-=-=-=-= */

    /* Vendas */
    .c-vendas__produtos {
        flex-direction: column;
        max-height: 870px;
    }
    .btn__addProduto {
        width: 100%;
    }
    .c-vendas {
        padding: 0 18px 78px 18px;
    }
    .c-vendas__cliente {
        grid-template-columns: 1fr;
    }
    #detail {
        height: 3px;
        width: 100%;
        margin: 32px 0;
        background-color: var(--details);
    }
    .c-produtos__add {
        max-width: 380px;
        width: 100%;
    }
    .c-produtos__add div {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    /* Vendas */
    /* Editar produtos */
    .c-modal__editproduct {
        width: 100%;
    }
    /* Editar produtos */

    /* Home */
    .ai {
        min-width: 35px;
    }
    .rv, .rc {
        display: none;
    }
    .scroll {
        overflow-x: scroll;
    }
    .scroll::-webkit-scrollbar {
        height: 0;
    }

    .c-home__infos {
        display: flex;
        flex-direction: column;
    }
    .vt, .ct, .v {
        padding: 20px 15px;
        width: 206px;
    }
    /* Home */
    /* PEDIDOS */
    .pedidos-buttons {
        flex-direction: column;
    }
    /* Folha Pedido */

    .c-nota__info {
        font-size: 1.4rem;
    }
    .c-pedido__header span {
        font-size: 2rem;
    }
    /* Folha Pedido */
    /* Comissoes */
    .form-select-tipocomissao {
        gap: 12px;
        flex-direction: column;
    }
    /* Comissoes */
}