.slider {
    width: 100%;
    text-align: center;
    overflow: hidden;
    position: absolute;
    bottom: 16px;
}

#searchInput {

    height: 30px;
    margin: 20px;
}

.slides {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.slide {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 450px;
    height: 450px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #f6fafa;
    margin-right: 10px;
    border-radius: 10px;
    border: none;
    display: flex;
}

.slide.selected {
    border: 2px solid #4285f4;
}

.slide:focus {
    outline: none;
}

.slide:focus-visible {
    outline: 1px solid #4285f4;
}

/* Estilo para o contêiner principal do slide */
.slide {
    width: 20%;
    display: flex;
    flex-direction: column;
    border: 1px solid #ccc;
    margin: 30px;
}

/* Estilo para o contêiner do conteúdo do slide */
.slide-content {
    display: flex;
    flex-direction: row;
    padding: 10px;
}

/* Estilo para a imagem do item */
.item-image {
    width: 500px;
    height: 200px;
    background-size: cover;
    background-position: center;
    margin-right: 20px;
}

/* Estilo para as outras informações do item */
.item-details {
    flex-grow: 1;
}

/* Estilo para o campo Nome */
.item-details p strong {
    color: #333;
    font-size: 1.0em;
    font-weight: bold;
}

/* Estilo para o campo Descrição */
.item-details p {
    margin-bottom: 10px;
    color: #666;
    font-size: 16px;
}

/* Estilo para o preço */
.item-details .price {
    font-weight: bold;
    font-size: 1.0em;
    color: #2ecc36;
}

/* Estilo para o botão de adicionar à tabela */
.add-to-table-btn {
    padding: 10px;
    background-color: #374038;
    color: #fff;
    border: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.add-to-table-btn:hover {
    background-color: #0056b3;
}







/* CODIGO DA TABELA  */


.invoice {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
    font-size: 14px;
}

.invoice th,
.invoice td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    font-size: 14px;
}

.invoice th {
    background-color: #f2f2f2;
}

.total {
    margin-top: 20px;
    font-size: 18px;
    text-align: right;
    font-size: 14px;
}

.invoice-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 14px;
}

.invoice-table th,
.invoice-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    font-size: 14px;
}

.invoice-table th {
    background-color: #f2f2f2;
}

.invoice-table td input {
    width: 60px;
    font-size: 14px;
}

.invoice-table .delete-btn {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 14px;
}

/* Media queries para tornar responsivo */
@media (max-width: 768px) {
    .slider {
        width: 50%;
        text-align: center;
        overflow: hidden;
        position: absolute;
        bottom: 16px;
    }

    .slides {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .slide {
        scroll-snap-align: start;
        flex-shrink: 0;
        width: 350px;
        height: 350px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-color: #ebf3f4;
        margin-right: 10px;
        border-radius: 10px;
        border: none;
        display: flex;
    }

    .slide.selected {
        border: 2px solid #4285f4;
    }

    .slide:focus {
        outline: none;
    }

    .slide:focus-visible {
        outline: 1px solid #4285f4;
    }

    /* Estilo para o contêiner principal do slide */
    .slide {
        width: 50%;
        display: flex;
        flex-direction: column;
        border: 1px solid #ccc;
        margin: 30px;
    }

    /* Estilo para o contêiner do conteúdo do slide */
    .slide-content {
        display: flex;
        flex-direction: row;
        padding: 10px;
    }

    /* Estilo para a imagem do item */
    .item-image {
        width: 300px;
        height: 300px;
        background-size: cover;
        background-position: center;
        margin-right: 20px;
    }

    /* Estilo para as outras informações do item */
    .item-details {
        flex-grow: 1;
    }

    /* Estilo para o campo Nome */
    .item-details p strong {
        color: #333;
        font-size: 1.0em;
        font-weight: bold;
    }

    /* Estilo para o campo Descrição */
    .item-details p {
        margin-bottom: 10px;
        color: #666;
        font-size: 16px;
    }

    .item-details .price {
        font-weight: bold;
        font-size: 1.22em;
        color: #2ecc36;
    }

    /* Estilo para o botão de adicionar à tabela */
    .add-to-table-btn {
        padding: 10px;
        background-color: #374038;
        color: #fff;
        border: 10px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .add-to-table-btn:hover {
        background-color: #0056b3;
    }


    /* CODIGO DA TABELA  */


    .invoice {
        border-collapse: collapse;
        width: 100%;
        margin-bottom: 20px;
        font-size: 14px;
    }

    .invoice th,
    .invoice td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
        font-size: 14px;
    }

    .invoice th {
        background-color: #f2f2f2;
    }

    .total {
        margin-top: 20px;
        font-size: 18px;
        text-align: right;
        font-size: 14px;
    }

    .invoice-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
        font-size: 14px;
    }

    .invoice-table th,
    .invoice-table td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
        font-size: 14px;
    }

    .invoice-table th {
        background-color: #f2f2f2;
    }

    .invoice-table td input {
        width: 60px;
        font-size: 14px;
    }

    .invoice-table .delete-btn {
        background-color: #f44336;
        color: white;
        border: none;
        padding: 5px 10px;
        cursor: pointer;
        font-size: 14px;
    }

}

@media (max-width: 480px) {
    .container {
        margin: 0 2px;
    }

    .slide {
        width: 100%;
    }

    .item-image {
        max-height: 100px;
        max-width: 100px;
    }

    .item-details .price {
        font-size: 1.0em;
    }

    .slider {
        width: 100%;
        text-align: center;
        overflow: hidden;
        position: absolute;
        bottom: 16px;
    }

    .slides {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    .slide {
        scroll-snap-align: start;
        flex-shrink: 0;
        width: 450px;
        height: 250px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        background-color: #f6fafa;
        margin-right: 10px;
        border-radius: 10px;
        border: none;
        display: flex;
    }

    .slide.selected {
        border: 2px solid #4285f4;
    }

    .slide:focus {
        outline: none;
    }

    .slide:focus-visible {
        outline: 1px solid #4285f4;
    }

    /* Estilo para o contêiner principal do slide */
    .slide {
        width: 80%;
        display: flex;
        flex-direction: column;
        border: 1px solid #ccc;
        margin: 10px;
    }

    /* Estilo para o contêiner do conteúdo do slide */
    .slide-content {
        display: flex;
        flex-direction: row;
        padding: 10px;
    }

    /* Estilo para as outras informações do item */
    .item-details {
        flex-grow: 1;
    }

    /* Estilo para o campo Nome */
    .item-details p strong {
        color: #333;
        font-size: 1.px;
        font-weight: bold;
    }

    /* Estilo para o campo Descrição */
    .item-details p {
        margin-bottom: 10px;
        color: #666;
        font-size: 9px;
    }

    /* Estilo para o preço */
    .item-details .price {
        font-weight: bold;
        font-size: 1.0em;
        color: #2ecc36;
    }

    /* Estilo para o botão de adicionar à tabela */
    .add-to-table-btn {
        padding: 10px;
        background-color: #374038;
        color: #fff;
        border: 10px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .add-to-table-btn:hover {
        background-color: #0056b3;
    }

    /* Estilo para o campo de entrada de quantidade na tabela */
    .quantity-input {
        width: 50px;
    }

    .delete-btn {
        background: none;
    }

    th,
    td {
        padding: 10px;
        text-align: left;
        border-bottom: 1px solid #000000;
        text-decoration: solid;
    }

    tfoot td {
        text-align: right;
        font-weight: bold;
    }

    th {
        text-decoration: solid;
        text-align: right;
        font-weight: bold;
        margin: 40px;
    }

    #searchInput {
        height: 30px;
        margin: 20px;
    }

    table {
        display: table;
        width: 100%;
        border-collapse: collapse;
        margin: 0 auto;
    }

    th,
    td {
        padding: 8px;
        color: #000000;
        border: 1px solid #000;
        text-align: left;
    }

    th {
        color: #333131;
        background-color: #f2f2f2;
        font-weight: bold;
    }

    tr:nth-child(even) {
        background-color: #f9f9f9;
    }

    tr:nth-child(odd) {
        background-color: #eaeaea;
    }

    tr:first-child {
        background-color: #d9d9d9;
    }

    .Carimbo {
        display: none;
    }

    .invoice-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
        font-size: 9px;
    }

    .invoice-table th,
    .invoice-table td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left;
        font-size: 9px;
    }

    .invoice-table th {
        background-color: #f2f2f2;
        font-size: 9px;
    }

    .invoice-table td input {
        width: 60px;
    }

    .invoice-table .delete-btn z {
        background-color: #f44336;
        color: white;
        border: none;

        cursor: pointer;
        font-size: 9px;
    }

}

/* Estilo para a página de impressão */
@media print {
    .header {
        display: none;
    }

    .container {

        margin: 0, 02px;
    }

    body {

        margin-bottom: 500px;
    }

    table {
        display: table;
        /* Exibe a tabela */
        width: 100%;
        /* Largura total */
        border-collapse: collapse;
        /* Remove espaços entre células */
        margin: 0 auto;
        /* Centraliza a tabela na página */
    }

    .print-btn {
        display: none;
    }

    .check-out-btn {
        display: none;
    }


    th,
    td {
        padding: 8px;
        /* Espaçamento interno */
        border: 1px solid #000;
        /* Borda das células */
        text-align: left;
        /* Alinhamento do texto */
        border-collapse: collapse;
        /* Garante que as bordas sejam visíveis */
    }

    th {
        background-color: #f2f2f2;

        /* Cor de fundo das células de cabeçalho */
        font-weight: bold;
        /* Fonte em negrito para cabeçalhos */
    }

    tr:nth-child(even) {
        background-color: #f9f9f9;
        /* Cor de fundo para linhas pares */
    }

    tr:nth-child(odd) {
        background-color: #eaeaea;
        /* Cor de fundo para linhas ímpares */
    }

    tr:first-child {
        background-color: #d9d9d9;
        /* Cor de fundo para o cabeçalho */
    }

    #searchInput {
        display: none;
    }

    .quantity-input {
        background: transparent;
        border: none;

    }


    #nav {
        display: none;
    }

    .no-print {
        display: none;
    }

    .delete-btn {
        display: none;
    }

    .slider {
        display: none;
    }


    .slides {
        display: none;
    }

    .slide {
        display: none;
    }


    /* Estilo para o contêiner principal do slide */
    .slide {
        width: 50%;
        display: flex;
        flex-direction: column;
        border: 1px solid #ccc;
        margin: 30px;
    }

    /* Estilo para o contêiner do conteúdo do slide */
    .slide-content {
        display: none;
    }

    /* Estilo para a imagem do item */
    .item-image {
        display: none;
    }

    /* Estilo para as outras informações do item */
    .item-details {
        flex-grow: 1;
        /* Ocupa o espaço restante */
    }

    /* Estilo para o campo Nome */
    .item-details p strong {
        color: #333;
        /* Cor do texto */
        font-size: 1.0em;
        font-weight: bold;
        /* Negrito */
    }

    /* Estilo para o campo Descrição */
    .item-details p {
        margin-bottom: 10px;
        /* Espaçamento inferior */
        color: #666;
        /* Cor do texto */
        font-size: 16px;
        /* Tamanho da fonte */
    }



    .item-details .price {
        font-weight: bold;
        /* Negrito */
        font-size: 1.22em;
        /* Tamanho da fonte maior */
        color: #2ecc36;
        /* Cor verde */
    }

    /* Estilo para o botão de adicionar à tabela */
    .add-to-table-btn {
        padding: 10px;
        background-color: #374038;
        /* Cor de fundo do botão */
        color: #fff;
        /* Cor do texto do botão */
        border: 10px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        /* Transição suave ao passar o mouse */
    }

    .add-to-table-btn:hover {
        background-color: #0056b3;
        /* Cor de fundo do botão ao passar o mouse */
    }

    #print-btn {
        display: none;
    }

    .print {
        display: none;
    }

    .Carimbo {

        display: block;

    }

    #check-out-btn {
        display: none;
    }

    .ADD {
        display: none;
    }

}