@media (max-width: 1024px) and (max-height: 768px) {
    .box {
        /*transform: scale(0.90);*/
    }

    .toldo{
        transform: scale(0.90);
    }
    html{
        transform: scale(0.90);
    }
}

body,
html {
    margin: 0;
    padding: 0;
    height: 100%;
    background-image: url("../imagens/cbc39e07-c565-4801-8daa-b0e72c45b125.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.container {

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    /*background-color: #584d4d; /* Cor de fundo para o container principal */
}

.left-container,
.center-container,
.right-container {
    display: flex;
    flex-direction: column;
    /*background-color: #926060; /* Cor de fundo para os containers laterais e central */
}

.left-container,
.right-container {
    width: 220px;
    height: auto;
    max-height: 650px;
    /*height: 650px;*/
    padding-top: 30px;
}

.left-container {
    background-size: contain;
    /* Ajusta o tamanho da imagem de fundo */
    background-repeat: no-repeat;
}

.right-container {
    background-size: contain;
    height: 650px;
    /* Ajusta o tamanho da imagem de fundo */
    background-repeat: no-repeat;
}

.center-container {
    width: auto;
    max-width: 840px;
    height: auto;
}

.box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(245, 245, 245);
    /*border: 1px solid gray;*/
    margin: 10px;
    border-radius: 15px;
}

.box-left,
.box-right {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    max-height: 750px;
}

.box-right {
    /*background-image: url(".");*/
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.box-center {
    height: auto;
    max-height: 640px;
    width: auto;
    max-width: 800px;
    display: inline-flex;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    background-size: 100% 100%;
    /* Ajusta o tamanho da imagem de fundo */
    background-repeat: no-repeat;

}

.ico {
    position: relative;
    margin-top: -20px;
    /* Ajusta o icone para que ultrapasse a borda superior */
    margin-left: -90%;
}

.buttoncategoria {
    background-color: #e7e7e7;
    width: 99%;
    height: 35px;
    border: 1px solid #9b9b9b;
    margin-top: 1px;
    color: #000000;
}

.buttoncategoria:hover {
    background-color: #ffffff;
    cursor: pointer;
}

.buttoimagemico {
    margin-left: 15%;
    display: flex;
    align-items: center;
}

form {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

input[type=text] {
    border-radius: 5px;
    width: auto;
    max-width: 250px;
    height: 25px;
    border: #9b9b9b 1px solid;
}

input[type=password] {
    border-radius: 5px;
    width: auto;
    max-width: 250px;
    height: 25px;
    border: #9b9b9b 1px solid;
}

input[type=button],
input[type=submit],
.cadastro {
    border-radius: 10px;
    border: #9b9b9b 1px solid;
    height: 40px;
    width: 70px;
    background-color: #1762a8;
    color: #ffffff;

}

input[type=submit] {
    margin-top: 10px;
    margin-left: -45%;
}

input[type=button],
.cadastro {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 50%;
    margin-top: -41px;
}

a:link {
    text-decoration: none;
}

input[type=button]:hover,
input[type=submit]:hover,
.cadastro:hover {
    background-color: #41a3ff;
    cursor: pointer;
}

label {
    margin-top: 10px;
}


.produtoslista {
    margin-left: 30px;
    overflow-y: auto;
    max-height: 639px;
    max-width: 99%;
}

.cardproduto {
    width: auto;
    min-width: 230px;
    max-width: 230px;
    height: 298px;
    border: #000000 1px solid;
    border-radius: 15px;
}

.cardinfoprodutos {
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    max-width: 99%;
    height: 35px;
    border: 1px #9b9b9b solid;
}

.pd_button {
    border: #9b9b9b 1px solid;
    height: 40px;
    width: auto;
    min-width: 100%;
    background-color: #1762a8;
    color: #ffffff;
}

.pd_button:hover,
.pb_button:hover, .logoutbutton:hover, .infoprodbuttonleft:hover, .infoprodbuttonright:hover {
    background-color: #41a3ff;
    cursor: pointer;
}

.pb_button {
    border-radius: 0px 0px 15px 15px;
    border: #9b9b9b 1px solid;
    height: 40px;
    width: auto;
    min-width: 100%;
    margin-top: 1px;
    background-color: #1762a8;
    color: #ffffff;
}

.logoutbutton {
    border-radius: 0px 0px 15px 15px;
    border: #9b9b9b 1px solid;
    height: 40px;
    width: auto;
    min-width: 198px;
    margin-top: 35px;
    background-color: #1762a8;
    color: #ffffff;
}


.Row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 5px;
    width: auto;
    height: auto;
    max-height: 570px;
    /*Optional*/
    min-width: 180px;
    max-width: 99%;
    table-layout: auto;
    /*Optional*/
    border-spacing: 10px;
    /*Optional*/
    overflow-y: auto;
    overflow-x: hidden;
}

.Column {
    margin: 5px;
    display: table-cell;
}

.lojapoup {
    visibility: hidden;
    justify-content: center;
    align-items: center;
    width: auto;
    max-width: 470px;
    min-width: 470px;
    height: 415px;
    border-radius: 15px;
    border: #9b9b9b 1px solid;
    background-color: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
}

.infoitempopup {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    border: #9b9b9b 1px solid;
    width: auto;
    max-width: 100%;
    height: 120px;
    font-family: Arial, Helvetica, sans-serif;
}

.infoprodbuttonleft {
    border-radius: 0px 0px 0px 15px;
    border: #9b9b9b 1px solid;
    height: 40px;
    width: auto;
    min-width: 232px;
    margin-top: 1px;
    background-color: #1762a8;
    color: #ffffff;

}

.infoprodbuttonright {

    border-radius: 0px 0px 15px 0px;
    border: #9b9b9b 1px solid;
    height: 40px;
    width: auto;
    min-width: 232px;
    margin-top: 1px;
    background-color: #1762a8;
    color: #ffffff;

}

.toldo {
    display: flex;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    margin-top: -80px;
    margin-left: 10px;
    width: auto;
    height: 103px;
    max-width: 800px;
}

.toldo img {
    width: auto;
}