#main-content{
    margin-left:265px;
    margin-top:80px;
}

.fade:not(.show){
    opacity: 1!important;
}

.alert-error{
    background-color:#f44336!important;
    color:white;
}
button.btn-gradient-primary {
    background: #8b6c5c !important; /* default bg color */
    color: #fff !important;          /* button text color */
    transition: background 0.2s ease; /* smooth transition */
}

/* Hover effect */
button.btn-gradient-primary:hover {
    background: #591416 !important;  /* darker background on hover */
    color: #fff !important;           /* text stays white */
}

/* Default style for btn-info override */
button.btn-info {
    background-color: #8b6c5c !important; /* default button color */
    color: #fff !important;               /* text color */
    border: none !important;              /* remove border if needed */
    transition: background-color 0.2s ease;
}

/* Hover effect */
button.btn-info:hover {
    background-color: #591416 !important; /* darker shade on hover */
    color: #fff !important;                /* keep text white */
}

/* Override default btn-success */
button.btn-success {
    background-color: #8b6c5c !important;  /* default button color */
    color: #fff !important;                /* text color */
    border: none !important;               /* remove border */
    transition: background-color 0.2s ease;
}

/* Hover effect */
button.btn-success:hover {
    background-color: #591416 !important;  /* darker shade on hover */
    color: #fff !important;                /* keep text white */
}

/* Target btn-success inside a.page-title-box or anywhere */
.page-title-box .btn-success,
.btn-success {
    background-color: #8b6c5c !important;  /* your custom default color */
    color: #fff !important;                /* text color */
    border: none !important;               /* remove border */
    text-decoration: none !important;      /* remove underline */
    transition: background-color 0.2s ease;
}

/* Hover effect */
.page-title-box .btn-success:hover,
.btn-success:hover {
    background-color: #591416 !important;  /* darker shade on hover */
    color: #fff !important;                 /* text remains white */
    text-decoration: none !important;
}

/* Secondary button (Cancel) */
.modal-footer .btn-secondary {
    background-color: red !important;  /* your theme color */
    color: #fff !important;
    border: none !important;
    transition: background-color 0.2s ease;
}

/* Hover effect for secondary button */
.modal-footer .btn-secondary:hover {
    background-color: red !important;  /* darker shade on hover */
    color: #fff !important;
}

/* Default style for outline button */
#btn_recommended,
.btn-outline-primary {
    color: #8b6c5c !important;       /* text color */
    border-color: #8b6c5c !important; /* border color */
    background-color: transparent !important; /* keep background transparent */
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

/* Hover effect */
#btn_recommended:hover,
.btn-outline-primary:hover {
    color: #fff !important;           /* text becomes white on hover */
    background-color: #591416 !important; /* background changes to dark */
    border-color: #591416 !important;     /* border also dark */
}
/* Default style for small secondary button */
#addAttributeBtn,
.btn-secondary {
    background-color: #8b6c5c !important;  /* theme default color */
    color: #fff !important;                /* text color */
    border: none !important;               /* remove border */
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover effect */
#addAttributeBtn:hover,
.btn-secondary:hover {
    background-color: #591416 !important;  /* darker shade on hover */
    color: #fff !important;                 /* keep text white */
}

/* Small info buttons (Recipe, Group Modifier, Edit, View) */
.btn-info,
.btn-info.btn-sm {
    background-color: #8b6c5c !important; /* theme color */
    color: #fff !important;
    border: none !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover for info buttons */
.btn-info:hover,
.btn-info.btn-sm:hover {
    background-color: #591416 !important; /* darker shade on hover */
    color: #fff !important;
}

/* Default tab links */
.nav-tabs .nav-link {
    color: #8b6c5c !important;          /* default text color */
    background-color: transparent !important; /* keep background transparent */
    border: 1px solid #ddd;             /* optional: border */
    transition: color 0.2s, background-color 0.2s 0.2s;
}

/* Hover effect */
.nav-tabs .nav-link:hover {
    color: #591416 !important;          /* dark text on hover */
    background-color: transparent !important; /* keep bg transparent */
}

/* Active tab */
.nav-tabs .nav-link.active {
    color: #fff !important;             /* text color for active tab */
    background-color: #591416 !important; /* dark background for active */
    border-color: #591416 !important;   /* match border to active background */
    font-weight: 600;                    /* optional bold */
}

/* Optional: remove bottom border gap for active tab */
.nav-tabs .nav-item.show .nav-link {
    border-bottom-color: #591416 !important;
}

/* Default / inactive tab */
.nav-tabs .nav-link {
    color: #fff !important;              /* text color */
    background-color: #8b6c5c !important;    /* light background for inactive */
    border: 1px solid #ddd;                  /* border around tab */
    border-bottom-color: #ddd;               /* keep bottom border light */
    transition: color 0.2s, background-color 0.2s;
}

/* Hover effect for inactive tab */
.nav-tabs .nav-link:hover {
    color: #fff !important;              /* dark text on hover */
    background-color: #591416 !important;   /* slightly darker light background on hover */
}

/* Target btn-success inside your page container specifically */
.col-sm-2.text-end .btn-success,
a.btn-success,
button.btn-success {
    background-color: #8b6c5c !important;  /* your custom color */
    color: #fff !important;
    border: none !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Hover effect */
.col-sm-2.text-end .btn-success:hover,
a.btn-success:hover,
button.btn-success:hover {
    background-color: #591416 !important;  /* darker shade on hover */
    color: #fff !important;
    text-decoration: none !important;
}

/* Active tab */
.nav-tabs .nav-link.active {
    color: #fff !important;                 /* white text for active */
    background-color: #591416 !important;   /* dark background for active */
    border-color: #591416 !important;       /* match border to active background */
    font-weight: 600;
}


/* Primary button (Save) */
.modal-footer .btn-primary {
    background-color: #8b6c5c !important;  /* your theme color */
    color: #fff !important;
    border: none !important;
    transition: background-color 0.2s ease;
}

/* Hover effect for primary button */
.modal-footer .btn-primary:hover {
    background-color: #591416 !important;  /* darker shade on hover */
    color: #fff !important;
}

/* Default sidebar / menu links */
ul.nav li.nav-item h6.menu-title a {
    color: #8b6c5c !important; /* default text color */
    text-decoration: none;
    transition: color 0.2s;
}

/* Hover effect - only text color changes */
ul.nav li.nav-item h6.menu-title a:hover {
    color: #591416 !important;  /* dark text on hover */
    background-color: transparent !important; /* keep background unchanged */
}

/* Active state */
ul.nav li.nav-item h6.menu-title a.active {
    color: #591416 !important;   /* dark color when active */
    font-weight: 600;            /* optional: make active link bold */
    background-color: transparent !important; /* keep background unchanged */
    text-decoration: none;       /* optional: remove underline */
}

/* For h6.menu-title without <a> (toggle) */
.menu-title {
    color: #8b6c5c !important;
    cursor: pointer;
    transition: color 0.2s;
}

/* Hover effect for toggle */
.menu-title:hover {
    color: #591416 !important;
}

/* Optional: if toggle itself can be "active" */
.menu-title.active {
    color: #591416 !important;
    font-weight: 600;
}

.menu-title a,
.nav-link {
    color: #8b6c5c !important;  /* default text color */
    text-decoration: none;
    transition: color 0.2s;
}

/* Hover effect */
.menu-title a:hover,
.nav-link:hover {
    color: #591416 !important;  /* dark text on hover */
    background-color: transparent !important; /* keep background unchanged */
}

/* Active state */
.menu-title a.active,
.nav-link.active {
    color: #591416 !important;   /* dark color when active */
    font-weight: 600;            /* optional bold */
    background-color: transparent !important;
    text-decoration: none;       /* remove underline */
}

/* Sidebar / menu links */
ul.nav li.nav-item h6.menu-title a {
    color: #8b6c5c !important;
} 
ul.nav li.nav-item h6.menu-title a:hover {
    color: #591416 !important;  /* dark text on hover */
    background-color: transparent !important; /* keep bg unchanged */
    text-decoration: none; /* optional: remove underline on hover */
}