/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

.available, .accepted, .paid, .Active, .Accepted, .Paid, .Yes, .Completed{
   background-color: green;
}

.delivered,.Delivered,.New{
   background-color: rgb(120, 233, 120);
}

.Online{
   background-color: rgb(148, 255, 148);
}

.delivering,.Delivery{
   background-color: rgb(241, 207, 11);
}

.unavailable,.Closed,.Canceled,.Rejected,.Blocked, .No {
   background-color: #ea5455;
}

.Pending{
   background-color: #ea54d1;
}

.Offline{
   background-color:#000000;
}


.btn.btn-sm.btn-icon {
   padding: 0.5rem;
}

.red-boder {
   border: 3px solid red;
   padding: 15px;
}

/* ==========================================================================
   Sidebar navigation - standardized layout + selected-item indication

   All colours resolve from the --brand-* custom properties emitted by
   partials/_branding_css.blade.php (Settings > Branding & Theme), falling back
   to the stock theme primary when branding has not been configured.

   The visual language is:
     - selected top-level entry (no children) -> filled primary pill
     - expanded / selected group parent       -> primary tint + primary label
     - selected child                         -> primary tint + left accent bar
   Loaded after the theme stylesheets, so it overrides components.css.
   ========================================================================== */

:root {
   --menu-active-bg: var(--brand-primary, #7367f0);
   --menu-active-fg: var(--brand-primary-contrast, #ffffff);
   --menu-tint-bg: var(--brand-primary-light, #f0eefd);
   --menu-accent: var(--brand-primary, #7367f0);
   --menu-accent-rgb: var(--brand-primary-rgb, 115, 103, 240);
}

/* Was an inline <style> block inside partials/menu.blade.php. */
a {
   text-decoration: none !important;
}

.main-menu.menu-light,
.main-menu.menu-light .navigation {
   background-color: var(--brand-sidebar, #ffffff);
}

.main-menu.menu-light .navigation > li > a {
   border-radius: 6px;
   transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

/* --- selected top-level entry (leaf, i.e. no children) --- */
.main-menu.menu-light .navigation > li.active > a {
   background: var(--menu-active-bg) !important;
   box-shadow: 0 4px 14px -4px var(--menu-active-bg) !important;
   color: var(--menu-active-fg) !important;
   font-weight: 500;
   border-radius: 6px;
}

/* --- expanded / selected group parent ---
   Never white-on-white: the stock rule set color:#fff on a white sidebar,
   which made expanded group labels invisible. A parent is also neutralised
   when app-menu.js adds `active` to it, so a group never looks like a leaf. */
.main-menu.menu-light .navigation > li.open:not(.menu-item-closing) > a,
.main-menu.menu-light .navigation > li.sidebar-group-active > a,
.main-menu.menu-light .navigation > li.has-sub.active > a {
   background: var(--menu-tint-bg) !important;
   box-shadow: none !important;
   color: var(--menu-accent) !important;
   font-weight: 500;
}

.main-menu.menu-light .navigation > li:not(.active):not(.open):not(.sidebar-group-active) > a:hover {
   background: rgba(var(--menu-accent-rgb), 0.07) !important;
   color: var(--menu-accent) !important;
}

/* --- children --- */
.main-menu.menu-light .navigation > li ul.menu-content li.menu-child > a {
   position: relative;
   padding: 9px 15px 9px 3.1rem;
   margin: 1px 15px;
   font-size: 12px;
   border-radius: 6px;
   transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

/* Uniform bullet, replacing the per-item feather icons some children had. */
.main-menu.menu-light .navigation > li ul.menu-content li.menu-child > a::before {
   content: '';
   position: absolute;
   left: 1.7rem;
   top: 50%;
   width: 6px;
   height: 6px;
   margin-top: -3px;
   border-radius: 50%;
   background: currentColor;
   opacity: 0.4;
}

/* Cancel the stock flat grey block so the tint below is the only indicator. */
.main-menu.menu-light .navigation > li .active,
.main-menu.menu-light .navigation > li ul.menu-content li.menu-child.active {
   background: transparent;
}

.main-menu.menu-light .navigation > li ul.menu-content li.menu-child.active > a,
.main-menu.menu-light .navigation > li .active > a {
   background: var(--menu-tint-bg) !important;
   color: var(--menu-accent) !important;
   font-weight: 500;
}

.main-menu.menu-light .navigation > li ul.menu-content li.menu-child.active > a::before {
   opacity: 1;
   box-shadow: 0 0 0 3px rgba(var(--menu-accent-rgb), 0.2);
}

/* Left accent bar marks the selected child at a glance. */
.main-menu.menu-light .navigation > li ul.menu-content li.menu-child.active > a::after {
   content: '';
   position: absolute;
   left: 0.5rem;
   top: 20%;
   bottom: 20%;
   width: 3px;
   border-radius: 3px;
   background: var(--menu-accent);
}

.main-menu.menu-light .navigation > li ul.menu-content li.menu-child:not(.active) > a:hover {
   background: rgba(var(--menu-accent-rgb), 0.07) !important;
   color: var(--menu-accent) !important;
}

/* Collapsed sidebar: the flyout children keep the same indentation rules. */
.vertical-layout.vertical-menu-modern.menu-collapsed .main-menu:not(.expanded) .navigation > li ul.menu-content li.menu-child > a {
   padding-left: 2.2rem;
}