:root {
    --primary-color: #E07E3C;
    --secondary-color: #c38c65cf;
    --light-bg: #FEFEFE;
    --dark-text: #1A1A1A;
    --gray-text: #808080;
    --gray-bg: #F6F6F6;
    --accent-color: #f6a649c9;
    --secondary-btn-bg: #808080;
    --primary-text-color: #FEFEFE;
    --gradient-primary: linear-gradient(310deg, var(--primary-color) 0%, var(--primary-color) 0%);
    --gradient-accent: linear-gradient(310deg, #c6723a, var(--accent-color));
    --gradient-update: linear-gradient(90deg, var(--primary-color), #F3A953);
}

.navbar-vertical.navbar-expand-xs .navbar-collapse {
    height: 600px !important;
}

.navbar-vertical .navbar-nav .nav-item .collapse .nav .nav-item .nav-link:before,
.navbar-vertical .navbar-nav .nav-item .collapsing .nav .nav-item .nav-link:before {
    content: unset !important;
}

.bg-gradient-primary,
.bg-gradient-success,
.bg-gradient-info {
    background-image: var(--gradient-primary);
    color: white;
}


.card .card-title,
.card h3 {
    color: var(--light-bg) !important;
}

.navbar-vertical .navbar-nav > .nav-item .nav-link.active .icon {
    background-image: linear-gradient(310deg, var(--primary-color) 0%, var(--primary-color) 100%);
}

.text-gradient.text-info {
    background-image: var(--gradient-accent);
}

.main-content,
.container-fluid.py-4 {
    background-color: var(--gray-bg);
}

.your-element-selector {
    background-color: var(--light-bg) !important;
}

h2,
h6 {
    color: var(--dark-text);
}

#chart-bars,
#chart-line {
    background-color: var(--light-bg);
}

.navbar-vertical .navbar-nav > .nav-item .nav-link.active {
    color: var(--gray-text);
    background-color: var(--light-bg);
}

.navbar-vertical .navbar-nav .nav-item .collapse .nav .nav-item .nav-link.active,
.navbar-vertical .navbar-nav .nav-item .collapsing .nav .nav-item .nav-link.active {
    color: var(--gray-text);
}

a.mx-3 i.fas.fa-user-edit,
a.mx-3 i.fa-solid.fa-pencil {
    color: var(--primary-color) !important;
}

a[title*="Add"]:hover,
a[title*="Back"]:hover,
a[title*="Add"]:hover i,
a[title*="Back"]:hover i {
    color: var(--primary-color) !important;
    text-decoration: none;
}

.btn-update,
button[type="submit"].btn-update,
button[type="submit"]:not([disabled]) {
    background: var(--gradient-update) !important;
    border-color: var(--primary-color) !important;
    color: #fff !important;
    transition: background-color 0.3s ease;
}
.btn-back,
.btn-secondary {
    background-color: var(--secondary-btn-bg) !important;
    border-color: var(--secondary-btn-bg) !important;
    color: #fff !important;
    transition: background-color 0.3s ease;
}
.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}
.table-bordered th,
.table-bordered td {
    border: 1px solid #dee2e6 !important;
    vertical-align: top;
    padding: 8px;
}
.table-bordered thead th {
    background-color: #f8f9fa;
    font-weight: 600;
}
.bg-light {
    background-color: var(--primary-color) !important;
    color: var(--primary-text-color) !important;
}

/*!*invoice*!*/

/*.receipt {*/
/*    font-family: monospace;*/
/*    font-size: 14px;*/
/*    color: black;*/
/*    width: 100%;*/
/*}*/

/*.receipt .center {*/
/*    text-align: center;*/
/*    margin-bottom: 10px;*/
/*}*/

/*.receipt .line {*/
/*    border-bottom: 1px dashed #000;*/
/*    margin: 10px 0;*/
/*}*/

/*.receipt .table {*/
/*    width: 100%;*/
/*    border-collapse: collapse;*/
/*}*/

/*.receipt .table td {*/
/*    padding: 4px 0;*/
/*}*/

/*.receipt .amount {*/
/*    text-align: right;*/
/*}*/

/*.receipt .footer {*/
/*    text-align: center;*/
/*    margin-top: 20px;*/
/*    font-size: 13px;*/
/*}*/


.text-primary
{
    color: var(--primary-color) !important;
}
.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color:  var(--primary-color);
}
.main-content,.container-fluid.py-4 {
    position: relative;

    background-repeat: repeat;
    background-size: 200px 37px; /* Customize size as needed */
    background-position: center center;
    height: 100%; /* Ensure it covers the full height */
    z-index: 0;

}
.main-content::before,.container-fluid.py-4::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("/assets/img/cortado-bg.png");
    background-repeat: repeat;
    background-size: 200px 37px;
    opacity: 0.3;  /* Adjust opacity here */
    z-index: -1; /* Make sure it stays behind the content */
}


.sidenav{
    background: #ffffff!important;
}

.navbar-vertical.navbar-expand-xs .navbar-collapse {
    overflow: hidden!important;
}