body{
    background:#f5f7fb;
    overflow-x:hidden;
}

/* ===========================
   Sidebar
=========================== */

.sidebar{
    width:260px;
    background:#212529;
}

.sidebar .logo{
    padding:20px;
    color:#fff;
    font-size:24px;
    font-weight:bold;
    border-bottom:1px solid rgba(255,255,255,.1);
}

.sidebar ul{
    list-style:none;
    margin:0;
    padding:20px 0;
}

.sidebar ul li{
    margin:5px 0;
}

.sidebar ul li a{
    display:block;
    padding:12px 20px;
    color:#ced4da;
    text-decoration:none;
    transition:.3s;
}

.sidebar ul li a:hover,
.sidebar ul li a.active{
    background:#0d6efd;
    color:#fff;
}

/* ===========================
   Main Content
=========================== */

.main-content{
    margin-left:260px;
    min-height:100vh;
}

.top-navbar{
    background:#fff;
    padding:15px 25px;
    box-shadow:0 2px 10px rgba(0,0,0,.05);
}

.content{
    padding:25px;
}

.card{
    border:none;
    border-radius:12px;
    box-shadow:0 2px 15px rgba(0,0,0,.05);
}

/* ===========================
   Desktop
=========================== */

@media (min-width:992px){

   .sidebar{
        position:fixed !important;
        top:0;
        left:0;
        width:260px;
        height:100vh;
        transform:none !important;
        visibility:visible !important;
    }

    .main-content{
        margin-left:260px;
    }

}

/* ===========================
   Mobile
=========================== */

@media (max-width:991.98px){

    .main-content{
        margin-left:0;
    }

    .sidebar{
        width:260px;
    }

    .sidebar .logo{
        display:none;
    }

    .offcanvas-body{
        padding:0;
    }

    .top-navbar{
        padding:15px;
    }

    .content{
        padding:15px;
    }

}

/* ===========================
   Offcanvas
=========================== */

.sidebar.offcanvas{
    --bs-offcanvas-width: 260px;
    width: 260px;
    background: #212529;
    color: #fff;
}

/* ===========================
   Pagination
=========================== */

.pagination svg{
    width:16px !important;
    height:16px !important;
}

.pagination .page-link{
    display:flex;
    align-items:center;
    justify-content:center;
}

svg{
    width:1.5rem;
    height:1.5rem;
}

.sidebar.offcanvas{
    background:#212529 !important;
    color:#fff;
    border-right:none;
}

.sidebar .offcanvas-header{
    background:#212529;
    color:#fff;
    border-bottom:1px solid rgba(255,255,255,.1);
}

.sidebar .offcanvas-title{
    color:#fff;
}

.sidebar .btn-close{
    filter:invert(1);
}

.invoice{
    background:#fff;
    padding:40px;
}

.invoice-header{
    display:flex;
    justify-content:space-between;
    border-bottom:3px solid #198754;
    margin-bottom:25px;
}

.company h2{
    color:#198754;
    font-weight:bold;
}

.customer-box{
    display:flex;
    justify-content:space-between;
    background:#f8f9fa;
    padding:20px;
    border-radius:10px;
    margin-bottom:20px;
}

.table th{
    vertical-align:middle;
}

.table-success{
    font-size:18px;
    font-weight:bold;
}

.table-danger{
    font-size:18px;
    font-weight:bold;
}

@media print {

    .no-print {
        display: none !important;
    }

    body {
        margin: 0;
        padding: 0;
    }

    .invoice {
        width: 100%;
        box-shadow: none;
        border: none;
    }
}