@media(max-width: 1000px){
    
    .trans-container{
        position: relative;
        height: 78vh;
        width: 95%;
        margin: 1rem auto;
        box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 4rem 4rem 1fr;
        grid-template-areas: "header-left"
                            "left-sub-header"
                            "customers";
                            
    }

    #right-grid{
        visibility: hidden;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 4rem 1fr;
        grid-template-areas: "header-right"
                            "cust-trans-box";
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
    }
    .header-right, .cust-trans-box{
        border-left: none;
    }
    #add-modal .dialogue, #add-row-modal .dialogue, #delete_cust_dialogue, #delete_trans_dialogue{
        width: 95%;
    }


    #back-btn{
        display: block;
    }

    #title_arrow, #amount_title{
        transition: none;
    }
    
}

@media(max-width: 500px){
    .outstanding{
        width: 80%; 
    }
}

@media(min-width: 500px) and (max-width: 700px){
    #add-modal .dialogue, #add-row-modal .dialogue, #delete_cust_dialogue, #delete_trans_dialogue{
        width: 60%;
    }
    .outstanding{
        width: 50%; 
    }
}

@media(min-width: 700px) and (max-width: 1200px){
    #add-modal .dialogue, #add-row-modal .dialogue, #delete_cust_dialogue, #delete_trans_dialogue{
        width: 40%;
    }
}

@media (max-width: 700){
    #failed-animation svg {
        width: 5rem;
    }
    .menu-items a {
        transition: none;
    }
    .menu-items a:hover:not(.contact-btn) {
        color: #dcad00;
        transition: none;
      }
}