drawer{
    display: block;
    box-sizing: border-box;
    position: absolute;
    top: 125px;
    left: 0;
    height: calc(100% - 125px);
    width: min(850px, 100%);
    padding: 10px;
    background-color: var(--darkAccent);
    /* border-right: 5px solid var(--mainColor); */
    z-index: 100;
    box-shadow: 15px 5px 5px #00000064;
    transition: transform 0.3s ease-out;
    transform: translateX(calc(-100% - 20px));
    pointer-events: none;

    &.open{
        pointer-events: all;
        transition: transform 0.1s ease-in;
        transform: translateX(0);
    }

    &[data-type="expenses"]{
        /* opacity: 0.95; */
    }

    h1{
        margin: 0px 0px 10px 0px;
    }
    div.viewbox{
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: calc(100% - 3rem);
        max-height: calc(100% - 3rem);
        overflow: auto;
        &::-webkit-scrollbar {
            width: 20px !important;
        }
        &::-webkit-scrollbar-track {
            background: transparent;
        }
        &::-webkit-scrollbar-thumb {
            background-color: var(--accentColor);
            border-radius: 5px;
            height: 10%;
        }
        table{
            box-sizing: content-box;
            overflow: auto;
            border-collapse: collapse;
            thead{
                border: none;
                stroke: none;
                outline: none;
                tr{
                    border: none;
                    stroke: none;
                    outline: none;
                }
                th{
                    position: sticky;
                    top: 0;
                    padding: 5px 0px;
                    background-color: var(--darkAccent);
                    text-align: left;
                    height: 30px;
                    z-index: 9999;
                    border: none;
                    stroke: none;
                    outline: none;
                }
                td{
                    position: sticky;
                    top: 30px;
                    padding: 0;
                    border: none;
                    stroke: none;
                    outline: none;
                    background-color: var(--darkAccent);
                    input{
                        border: none;
                        stroke: none;
                        outline: none;
                        height: 25px;
                        width: 95%;
                        max-width: 95%;
                        border-radius: 5px;
                        &[data-type="id"]{
                            background-color: var(--darkAccent);
                            color: var(--mainColor);
                        }
                        &[data-type="description"]{
                            width: 100%;
                            max-width: 100%;
                        }
                    }
                    button{
                        height: 25px;
                        width: fit-content;
                        padding: 0px 5px;
                        margin: 0px 5px 0px 5px;
                        line-height: 1em;
                        background-color: var(--boardingAccent);
                        font-size: smaller;
                    }
                    z-index: 9999;
                }
            }
            tbody{
                tr{
                    border: none;
                    td{
                        border: none;
                        div{
                            text-align: left;
                            white-space: nowrap;
                            max-width: 100px;
                            overflow: auto;
                            font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
                            font-size: smaller;
                            user-select: all;
                        }
                        
                    }
                    &:nth-child(odd){
                        background-color: #282828;
                    }
                    &:hover{
                        filter: brightness(1.1);
                        background-color: var(--softColor);
                    }
                }
            }
        }
    }
}