*
    margin: 0
    padding: 0

body
    height: 100vh
    width: 100vw
    display: flex
    overflow: hidden
.aside
    width: 400px
    height: 100%
    overflow: auto
    border-right: 1px solid black
    background-color: #292f30
    display: flex
    flex-direction: column
    align-items: center
    padding-top: 10px
    scroll-behavior: smooth
    overflow-x: hidden
    z-index: 99
    position: relative

    &-products
        margin: 3px !important
        border-bottom: 1.5px solid black
        min-width: 95%
        min-height: 52px
        padding: 0 5px !important
        cursor: pointer
        overflow: hidden
        display: flex
        align-items: center
        justify-content: space-between
        
        &-more
            width: 80px
            display: flex
            justify-content: space-between

            & span
                display: inline-block
                width: 35px
                height: 35px
                display: flex
                justify-content: center
                align-items: center
                color: black
                font-size: 30px

.header
    background-color: #313030
    width: 100%
    height: 80px
    display: flex
    justify-content: center
    align-items: center
    position: relative
    z-index: 99

    &-criar
        width: 300px
        height: 95%
        display: flex
        justify-content: center
        align-items: center
        cursor: pointer
        z-index: 99

    &-formulario
        position: absolute
        left: 0px
        bottom: 100px
        background-color: #4d4c4c 
        width: 300px
        height: 300px
        z-index: 9
        transition: .5s 
    
    &-resultados
        width: 150px
        height: 95%
        display: flex
        justify-content: center
        align-items: center
        cursor: pointer
        z-index: 99
        position: absolute
        right: 0

        &-result
            background-color: #e2e0e0
            width: 400px
            position: absolute
            right: -400px
            height: 600px
            bottom: -600px
            overflow: hidden
            transition: .6s

.areas
    width: 100%
    height: 100%

.painel
    width: 100%
    height: 100%
    display: flex
    justify-content: center
    align-items: center
    background-color: rgba(50,50,50,.8)

    &-area
        width: 500px

form
    flex-direction: column
    align-items: center

*::-webkit-scrollbar
  width: 7px

*::-webkit-scrollbar-track 
  background: transparent


*::-webkit-scrollbar-thumb 
  background-color: #1a1818
  border-radius: 20px
  border: 3px solid transparent


.formCriar
    bottom: -300px !important

.resultadosDiario
    right: 0px

.precototal
    width: 100% 
    height: 100%



.pesquisar
    position: absolute
    left: 0
    display: flex
    justify-content: center
    align-items: center
    
    &-mecanismo
        left: 0
        display: flex
        align-items: center
        width: 300px
        height: 35px
        bottom: -100px
        

        &-area
            display: flex
            position: relative
            top: -100px
            transition: .4s

            & input
                margin:  0 5px

        & i
            display: block
            padding: 10px
            border-radius: 50%
            margin-left: 5px
            background-color: white
            z-index: 99
            cursor: pointer
                

        