html,
        body {
            overflow-x: hidden;
            overflow-y: auto;
        }

        body {
            position: relative;
            margin: 0;
            padding: 0;
        }

        .wrapper {
            min-height: 100vh;
        }

        /* .login-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        } */

       #logBtn {
            position: fixed;
           
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            cursor: pointer;
            font-weight: 700;
            transition: all 0.2s;
            padding: 10px 20px;
            border-radius: 100px;
            background: #262626;
            border: 1px solid transparent;
            display: flex;
            align-items: center;
            font-size: 15px;
            border: 2px solid #000000;
            color: #ffffff;
        } 
        #logBtn:hover {
            background: #393939;
            color: #eaeaea;
        }

        #logBtn > svg {
            width: 34px;
            margin-left: 10px;
            transition: transform 0.3s ease-in-out;
        }

        #logBtn:hover svg {
            transform: translateX(5px);
        }

        button:active {
            transform: scale(0.95);
          
        }


 @font-face {
            font-family: "Ubuntu-Regular";
            font-style: normal;
            font-weight: 500;
            src:
                url(https://bm-app.org/public/fonts/ubuntu-regular-webfont.woff) format("woff2"),
                url(https://bm-app.org/public/fonts/ubuntu-regular-webfont.ttf) format("truetype");
        }

        
        html,
        body {
            overflow-x: hidden;
            overflow-y: auto;
              
        }

        body {
            position: relative;
            background-color: rgb(119, 120, 120);
        }


        * {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            font-family: 'Ubuntu-Regular', sans-serif;
            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            
        }
        .ubuntu {
            font-family: 'Ubuntu-Regular', sans-serif;
        }

        .form-control {
            padding: 2px 4px !important;
        }

        .invoice-view {
            height: 150vh !important;
            max-width: 950px !important;
            width: 100% !important;
            background-color: rgb(226, 226, 226) !important;
            margin-top: 10px;
            z-index: 50;
        }
        .notify {
            position: fixed;
            left: 50%;
            transform:  translateX(-50%);
            z-index: 99559;
            padding: 10px 12px;
            border-radius: 8px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
            font-size: 16px;
            font-weight: bold;
            max-width: 95%;
            min-width: 310px;
            width: 450px;
            top: 3%;
            line-height: 18px;
            
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .border-bright {
            border: 2px solid rgb(238, 160, 15) !important;
            background-color: rgb(255, 218, 148) !important;
        }

        .wrapper{
           display: none; 
           max-width: 950px; 
           background-color: rgb(194, 192, 192); 
           margin: auto;
        }

        .inv-container {
            font-family: Arial, Helvetica, sans-serif;
            padding: 10px;
            background-color: rgb(238, 240, 242);
            border-radius: 5px;
            box-shadow: 1px 1px 5px #b3b1b1;
            margin: auto;
            min-height: 94vh;
            max-width: 775px;
        }
        .invoice-btn {
            background-color: rgb(71, 107, 214);
            border: none;
            color: white !important;
            font-weight: bold;
        }

        .bg-main {
            background-color: rgb(238, 240, 242);
        }
        .bg-user {
            background-color: rgb(243, 193, 113);
        }
        .bg-header {
            background-color: rgb(71, 107, 214);
            color: rgb(255, 255, 255) !important;
            border-radius: 5px;
        }

        .toolbar-main {
            background-color: #6c757d;
            border: 1px solid rgb(123, 121, 121);
            color: rgb(255, 255, 255) !important;
            padding: 2px 6px;
            margin-bottom: 3px;
            border-radius: 2px;
            box-shadow: 1px 1px 5px 1px rgb(199, 198, 198);
           
            margin-top: 5px;
            margin-bottom: 5px;
        }
        .menu-bar {
            background-color: rgb(71, 107, 214);
            color: white !important;
            padding: 4px 9px !important;
            margin-bottom: 3px !important;
        }
        .btn-primary {
            background-color: rgb(71, 107, 214);
            border: 1px solid rgb(14, 118, 14);
        }
        .btn-success {
            background-color: rgb(57, 168, 45);
            border: none;
        }
        .bg-info {
            background-color: rgb(63, 166, 210) !important;
        }
        .bg-info-subtle {
            background-color: rgb(181, 212, 244) !important;
        }
        .bg-success-subtle {
            background-color: rgb(192, 245, 186) !important;
        }
        .bg-danger-subtle {
            background-color: rgb(245, 186, 191) !important;
        }
        .bg-bright {
            background-color: rgb(244, 181, 81);
        }
        
        .form-control{
            border-radius:4px;
            background-color: #ffffff !important;
            border: 1px solid #bcbcbc;
            margin: 0px !important;
            padding: 2px !important;
            padding-left: 4px !important;
        }
        .form-label{
            position: relative;
            top:6px;
            border-radius: 15px;
            font-weight: bold;
            
            /* background-color: rgb(223, 226, 230);  */
            /* padding: 2px 6px; */
        }
        .row {
            
        }
        .col-5, .col-6, .col-2, .col-4, .col-7, .col-8, .col-9, .col-12, .col-xs-12, .col-xs-6, .col-sm-3, .row{
            padding: 0px 7px;
        }

        .fade-in {
            animation: fadeInAnimation ease 0.2s;
            animation-iteration-count: 1;
            animation-fill-mode: forwards;
        }
        @keyframes fadeInAnimation {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }
        .dropdown-menu-invoices {
            max-height: 80vh;
            overflow-y: scroll;
        }
        .dropdown-menu-vendor {
            max-height: 70vh;
            overflow-y: scroll;
            min-width: 150px;
        
        }
        .dropdown-menu {
            padding: 5px;
        }
        .preview-image {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
            box-shadow: 1px 1px 5px #b3b1b1;
        }