* {margin:0;
padding:0;
letter-spacing: 1.3px;
font-family: 'monospace', sans-serif;
font-size:13px}
h1{font-size:14px}
li{margin-top:17px; margin-bottom:4px}
a{text-decoration:none; color: rgb(43, 42, 42); font-weight:bold}

:root { 
    --cor1: #66178d;
    --cor2: #fbbe12
}

body{
    width:100vw;
    background-color:#e6e6e6;
    padding-bottom: 50px;
}

label {font-size:80%}

header {
    background-color: var(--cor1);
    display: flex;
    width: 93%;
    justify-content: space-between;
    align-items: center;
    color: var(--cor2);
    padding: 1% 7% 1% 5%;
    position: fixed;
    top: 0;
    z-index: 5;
    height: 8.5vh;
    flex-wrap: wrap;
}

header p{color:white}




h1 {
            color: #333;
        }

        #selectdatefinanc,
        #selectdaterelatorio {
            background-color: #fff;
            border: 1px solid #ddd;
            padding: 20px;
            margin: 10px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .formRelatorio {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        p {
            margin-bottom: 10px;
        }

        .inputCampos {
            padding: 8px;
            margin-bottom: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box;
            width: 100%;
        }

        button {
            padding: 10px;
            background-color: #4caf50;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }





#conteudo{
    display: flex;
    margin-top: 100px;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    min-height: 75vh;
}

.formulario_AP {
    margin-top: 10px !important;
    width:90%;
    text-align: center;
    justify-content: space-around;
    flex-wrap: wrap;
    display:flex
}
.campoform{
    min-width: 310px;
    padding: 5px;
    margin-bottom: 5px;
    min-height: 30px;
    border-color: black;
    border-radius: 6px;
    border: none;
    background-color: white;
    text-align: center;
}

/*.radioinfos*/
input{
    margin: 10px auto;
}

.askradio{
    font-size:12px;
    font-weight:600;
}
.break-line {
    display: block;
    width: 350px;
  }

.barratolls {
    position: fixed;
    left: 0;
    top: 110px;
    background-color: var(--cor1);
    width: 150px;
    height: 100%;
    display:none
}  

.descricao-input{
    min-height: 129px;;
}

.top50{margin-top:15px}

.box{
    padding:10px;
    margin:auto}

.min80{width:74px;
    margin-left: 5px;
    margin-right: 5px;
    min-width:60px}

.resumoitem{
    display: flex;
    justify-content: space-between;
}

.btn1{
    padding: 10px 50px;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 600;
    color: white;
    background-color: var(--cor1);
    border-radius: 5px;
    margin: 50px auto;
}
.form-group{
    margin-bottom: 30px;
    background-color: #435b5b8f;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 13px 4px #00000036;
    position: relative;
    color: #fff9f9;;

}

.min150{width:143px;
    margin-left: 5px;
    margin-right: 5px;
    min-width:100px}

.centerWH{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;}

.boxcenter{
background-color: var(--cor2);
border-radius: 5px;
padding: 6%;
box-shadow: 0px 0px 20px 7px #00000069;
color: darkslategray;
line-height: 5vh;
}

.btn2{
    padding: 5px 20px;
    border-radius: 5px;
    border: none;
    box-shadow: 0px 0px 8px 1px #ebbe1a96;
    margin-top: -10px;
}

.btn-excluir{
    position: absolute;
    right: -7px;
    top: -7px;
    padding: 3px 5px 4px 7px;
    border: none;
    box-shadow: 0px 0px 4px 1px #0000006b;
    border-radius: 100%;
}

#addButton{
    margin-left: auto;
    margin-right: auto;
}

.menucontainer{
    height: 100vh;
    width: 80vw;
    background-color: white;
    position: fixed;
    z-index: 22;
    top: 76px;
    display:none
}

input:read-only {
    background-color: #b3b6bb54; 
    color: var(--cor1); 
    font-weight:bold;
    font-size:110%;
  }

#navMenu{
    width: 100vw;
    font-size: 85%;
    margin-bottom: -1px;
    overflow-y: auto;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-y: scroll;
    position: absolute;
    bottom: 0px;
}
.btnMenu{
  background-color: #e4e5e5b6;
  padding: 3px 10px;
  border: none;
  border-start-start-radius: 8px;
  border-start-end-radius: 8px;
  display: block;
  min-width: 142px;
  min-height:30px;
  font-size: 87%;
  text-transform: uppercase;
  margin-left: 1px;
}

.btnMenuActived {
    background-color: #e4e5e5 !important;
}
.dropzone{
    min-height: 125px !important;
    max-width:350px;
    background-color: #0c0c0c17;
}

.imgcont_ped{
    width: 267px;
    height: 250px;
    margin-left: 0.5px;
}
#sidebar{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 166px;
    top: 0;
    padding-top: 10vh;
    z-index: 3;
    background-color: whitesmoke;
    z-index: 1;
    overflow-y: hidden;
    box-shadow: -1px 1px 6px 8px #6e2b92;
}

.icon-sidebar{
    padding: 5%;
    border: 2px solid #0000001c;
    border-radius: 15%;
    margin-right: 10px;
    display: flex;
    justify-content: space-around;
    min-width: 27px;
    width:27px;
    height:27px;
}
.icon-sidebar:hover{
    fill:white;
}
.conteinetped{
    padding: 12px;
    width: calc(32% - 23px);
    min-width: 300px;
    height: calc(5in);
    /*border: solid #a7a7a7 0.1px;*/
    margin: 5px;
    border-radius: 5px;
    background-color: #ffffff;
    position: relative;
    overflow-x: auto;
    overflow-y: none;
    transition: width 0.10s ease;
    flex-direction: column;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,.12);
    display: flex;
    filter:drop-shadow(0px 0px 10px #0000008b);
   
}

.gerar-pdf{
    display:none
}
.conteinetped:hover{
    /*border: solid 1px var(--cor1);*/
    box-shadow: 0px 4px 7px 1px #66178d57;
}

.contcanv{
    max-width:80vw;
    width:450px;
    height:400px;
    margin-top:20px;
}

.canva-styles {
    display: block;
    box-sizing: border-box;
    height: 473px;
    width: 380px;
    max-width: 380px;
    background-color: white;
    padding: 1%;
    box-shadow: 0 0 4px 0px #00000057;
    border-radius: 5px;
    margin-top: 10px;
    /*min-height:300px;*/
}

#os_pedidos{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    margin-left: 175px;
    overflow-y: hidden;
    
}
.pagination{
    border-bottom: 1px solid #c8cdda;
    border-top: 1px solid #c8cdda;
    width:100%
}
.pagination ul li {
    display: inline-block;
    padding: 0 11px;
    font-size: 1.275rem;
    font-family: 'Poppins', sans-serif;
    color: #3b3f51;
    text-decoration: none;
    position: relative;
    border: none;
    cursor: pointer;
}

.pagination ul li.current{
    color:var(--cor1);
    border-bottom: 1px solid var(--cor1);
    font-weight: 600;}
    
.lineDesc {
    text-transform: capitalize;
}

.dados_PedCont{
    display: grid;
    position: relative;
}
.cxid{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.contPedid, .contPedentrada {
    bottom: -10%;
    left: 2%;
    display: flex;
    justify-content: space-around;
    color: rgba(0,0,0,.45);
    font-size:90%;
    min-width:45%}

.contPednome{
    font-family: 'Poppins', sans-serif;
    margin-top: 10px;
    font-weight: 600;
    white-space: wrap;
    text-transform: uppercase;
}
.contPedtel, .contPednome{
    justify-content: center;
    display: flex;
    width:90%
}
.contPedtel{
    margin-bottom: 15px;
}
.imgs{
    overflow-x: auto;
    position: relative;
    min-height: 250px;
    margin-bottom: 10px;
}

.img_conteiner{
    width: 1500px;
    display: flex;
    box-sizing: border-box;
}

.conteinetpedFull{
    width: 90%;
    position: absolute;
    height: 84%;
    left: 4%;
    top: 5%;
    box-shadow: #0000008b 0px 0px 20vw 20vw !important;
    z-index: 5;
    display:math;
    
}
.imgcontainerfull{
    width: 617px;
    height: 415px
}

.cdItem_valorUnitario, .cdItem_valorTotalItem, .ordertotal, .orderfrete, .orderdesconto, .ordertipopag{
    display:none !important
}

.cdItem_quantidade{
    grid-column-start: 1;
    grid-column-end: 2;
}

.cdItem_descricao{
    grid-column-start: 2;
    grid-column-end: 8;}

.etiq{
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    font-size:10.5px
}

.titleQuant, .titleDesc {
    font-size: 12px;
    text-align: center;
}

.cardItem {
    margin: 10px, 0;
    border-radius: 5px;
    padding:5px;
    width:100%;
    color: #6338df;
    text-rendering: optimizelegibility;
    outline-style: auto;
    margin-top:10px
}
.cardItem > tbody > tr > td{
    font-size:12px;
    padding:5px;
    text-transform:Uppercase;
    line-height:1.4;
    letter-spacing:1.4;
}
.iconprodobs{
    
   width:33px;
   height:35px}


.linevalorUnitario, .linevalorTotalItem{
    display:none;
}
.lineQuant, .titleQuant{
    width:60px;
    text-align: center;
    border-right: solid black 0.5px;
}

.cdItem_obs{
    display:none !important;
}
.campoObs{
    background: #f7a50a99 !important;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    letter-spacing: 2px;
    display:flex !important;
    text-transform: uppercase;
    font-weight: 600;
}
.dataContainerPed{
    display: flow-root;
}

.imgsfullPed{
    width:60%;
    float:left;
}
.imgsfullPed.img_conteiner{
    width:inherit
}
.dataContainerPedFull{
    margin-top:10px;
    padding:10px;
    max-height: 410px;
    overflow-x: auto;
}

.envioPed{
    display:none
}

.envioPedFull{
    position: absolute;
    bottom: 50px;
    left: 2%;
    width: 99%;
    background-color: #d5d5d5;
    display: flex;
    flex-wrap: wrap;
    padding: 7px;
    justify-content: space-around;
    color: #250b73;
    margin-top: 20px;
    width:92%;
}

.titleEnvio {
    font-weight: 600;
    width:96%;
    margin-bottom: 5px;}

.campoDataPed{
    flex-wrap: wrap;
    min-height: 26px;
    border: solid 0.1px #dbdbdb;
    margin-bottom: 5px;
    text-align: justify;
    display: flex;
    padding: 3px;
    border-radius: 5px;
    margin-top: 2px;
    font-size: 11px;
    max-height: 40px;
    overflow-x: auto;
    min-width:70px;
}

::-webkit-scrollbar {
    width: 8px; 
  }
  

.cdItem_tipopag, .cdItem_desconto, .cdItem_frete, .cdItem_total {
    display:none;
}
.cdItem_pagparc{
    BACKGROUND-COLOR: DARKRED;
    COLOR: WHITE;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 110%;
}
.GeralPedFull{display:flex;
    flex-wrap: wrap;
    min-height: 26px;
    border: solid 0.1px cornflowerblue;
    margin-bottom: 5px;
    text-align: justify;
    display: flex;
    padding: 3px;
    border-radius: 5px;
    margin-top: 2px;
    font-size: 11px;
    max-height: 250px;
    overflow-x: auto;
    min-width: 75px;
    font-size: 14px;
    padding: 2px 10px;
    max-width: 470px;
    margin-top: 10px;
    background-color: aliceblue;
    letter-spacing: 1.7px;
    line-height: 21px;
    color: #4f4f4f;
    margin-left: 5px;
    overflow-x: auto;}

.btnFluxo{
    cursor:pointer;
    justify-content: flex-start;
    align-items: center;
    display: flex;
    margin-top: 15px;
    padding: 7px;
    border-radius: 5px;
    background-color: rgb(221 211 211 / 0%);
    color: rgb(73 70 70);
    border: none;
    letter-spacing: 1.5px;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    box-shadow: 0 0 2px 2px #0000000f;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    width: 100%;
}

#btnProximo, #btnAnterior{
    background-color: blueviolet;
    color: white;
}

#fluxo_ped{
    margin-top: 15px;
    padding: 0 0px 0 7px;
    margin-right: -1px;
}
.fluxobtn{
    border: none;
    background-color: #f0f8ff00;
}

.btnFluxo:hover{
    border: none;
    background-color: var(--cor1);
    color:white;
    font-weight: 500;
    fill:white;
}

.iconFluxo{
    border-radius: 100%;
    padding: 5px;
    border: solid 3px#E9C417;
    box-shadow: 0px 0px 4px 4px #23212175;
    cursor: pointer;
    position: absolute;
    right: 4%;
    top: 10%;
    max-width: 33px;
    max-height: 33px;
    background-color: #ffffffbf;
    z-index: 4;
}
.iconFluxo:hover {
    background-color: #f7de6d; 
    border-color: #ffffff; 
}
#btnsidebarped{
    padding: 0 0px 0 7px;
    margin-right: -1px;}
.fechar{position: absolute;
    right: 0%;
    top: 1%;
    border-radius: 20%;
    background-color: #0c0c0c;
    padding: 5px 10px;
    color: white;
    display: none;
    cursor:pointer}

.fecharatv{
    display:block;
}

tbody{
    background-color: #f7f7f7;
    color: #494949;
    text-wrap-style: pretty;
    }

@media only screen and (min-width:650px) {

    .btn2{height:30px}

    #boxscroll{max-height: 57vh;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 33px;}
    
    
}

@media only screen and (max-width:550px) {


    .conteinetped{
        width: 75vw;
        height:60vh;
    }
    .conteinetpedFull{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row !important;
        width: 85vw;
        margin: 0;
        height: 70vh;
        padding: 10% 3%;
        justify-content: center;
    }
    
    
  
    .imgcontainerfull{
        width:80vw;
        height:inherit
    }

    .envioPedFull{
        bottom:inherit;
    }
    .dataContainerPedFull, .imgsfullPed{
        width: 95%;
    }

    #sidebar{
        width:53px;
        transition:width 0.5s ease 
    }
    .sideBarExp{
        width:167px !important;
    }

    .fluxo_SB:hover{
        fill:white;
    }
    .fluxo_SB:not(:hover) {
        fill:black;
    }
    /*#sidebar:hover{
        width:166px;
    }*/
   #sidebar:not(:hover) {
    width: 53px !important;
   }
    #os_pedidos{
        margin-left:55px;
    }

}