/* importing fonts */
@import url("https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100..900;1,100..900&family=DM+Mono:wght@400;500&display=swap");
/* Ligth theme variables */
:root,
[data-bs-theme="light"] {
  /* Brand / primary */
  --color-primary: #f97316;
  --color-primary-hover: #ea6c0a;
  --color-primary-light: #fff4ed;
  --color-primary-muted: #fed7aa;
  --color-primary-dark: #c2560a;
  --shadow-primary: 0 4px 12px rgba(249, 115, 22, 0.35);

  /* Side NavBar ----> Always Dark!*/
  --color-sidebar-bg: #0f172a;
  --color-sidebar-surface: #1e293b;
  --color-sidebar-active: #f97316;
  --color-sidebar-text: #94a3b8;
  --color-sidebar-text-active: #ffffff;
  --color-sidebar-icon: #64748b;
  --color-sidebar-border: #1e293b;
  --color-sidebar-width: 220px;

  /* Page / Content Area */
  --color-page-bg: #f1f5f9;
  --color-topbar-bg: #ffffff;
  --color-topbar-border: #e2e8f0;

  /* Surface / cards */
  --color-surface: #ffffff;
  --color-surface-hover: #f8fafc;
  --color-surface-raised: #ffffff;
  --color-border: #e2e8f0;
  --color-border-light: #f1f5f9;
  --color-border-dashed: #cbd5e1;

  /* Typography */
  --color-text-primary: #0f172a; /* near black — headings, strong labels */
  --color-text-secondary: #475569; /* slate — body text, descriptions */
  --color-text-muted: #94a3b8; /* light slate — hints, placeholders, subtitles */
  --color-text-disables: #cbd5e1; /* disabled text */
  --color-text-inverse: #ffffff; /* white text on dark backgrounds */
  --color-text-link: #f97316; /* orange — View links, clickable text */

  /* Semantic Colors */
  /* success => stock added, saved successfully */
  --color-success: #22c55e;
  --color-success-bg: #f0fdf4;
  --color-success-text: #16a34a;
  --color-success-border: #bbf7d0;

  /* warning => low stock, below reorder level */
  --color-warning: #f59e0b;
  --color-warning-bg: #fffbeb;
  --color-warning-text: #d97706;
  --color-warning-border: #fde68a;

  /* danger => delete actions, errors, validation */
  --color-danger: #ef4444;
  --color-danger-bg: #fef2f2;
  --color-danger-text: #dc2626;
  --color-danger-border: #fecaca;

  /* info => informational badges, neutral choices */
  --color-info: #3b82f6;
  --color-info-bg: #eff6ff;
  --color-info-text: #2563eb;
  --color-info-border: #bfdbfe;

  /* Table */
  --color-table-header-bg: #e2e8f0;
  --color-table-header-text: #64748b;
  --color-table-row-bg: #ffffff;
  --color-table-row-hover: #f8fafc;
  --color-table-border: #e2e8f0;
  --color-table-text: #475569;
  --color-table-text-strong: #0f172a;

  /* Form / Input */
  --color-input-bg: #ffffff;
  --color-input-border: #e2e8f0;
  --color-input-border-focus: #f97316;
  --color-input-border-error: #ef4444;
  --color-input-placeholder: #94a3b8;
  --color-input-shadow-focus: rgba(249, 115, 22, 0.12);
  --color-input-shadow-error: rgba(239, 68, 68, 0.1);

  /* Modal Dialog */
  --color-overlay: rgba(15, 23, 42, 0.55);
  --color-modal-bg: #ffffff;
  --color-modal-border: #e2e8f0;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.16);

  /* Typography scaling */
  --font-sans: "Public Sans", sans-serif;
  --font-mono: "DM Mono", monospace; /* for SKUs and IDs in tabels*/

  --text-xs: 0.6875rem; /* 11px — labels, badges, hints  */
  --text-sm: 0.8125rem; /* 13px — table data, form labels */
  --text-base: 0.875rem; /* 14px — body default */
  --text-md: 0.9375rem; /* 15px — slightly larger body */
  --text-lg: 1.125rem; /* 18px — modal titles */
  --text-xl: 1.5rem; /* 24px — section titles */
  --text-2xl: 1.75rem; /* 28px — page headings */
  --text-3xl: 2.25rem; /* 36px — stat card numbers */

  /* Font weights */
  --weight-light: 300; /* light descriptive text  */
  --weight-normal: 400; /* body text default        */
  --weight-medium: 500; /* nav links, form labels   */
  --weight-semi: 600; /* buttons, column headers  */
  --weight-bold: 700; /* page titles, card names  */

  /* Line heights */
  --leading-tight: 1.2; /* headings & compact */
  --leading-snug: 1.4; /* subheadings */
  --leading-base: 1.6; /* body text comfortable */

  /* Spacing Scale */
  --space-xs: 0.25rem; /* 4px  — icon gaps, tiny nudges */
  --space-sm: 0.5rem; /* 8px  — between inline elements */
  --space-md: 1rem; /* 16px — standard padding */
  --space-lg: 1.5rem; /* 24px — section padding */
  --space-xl: 2rem; /* 32px — page-level padding */
  --space-2xl: 3rem; /* 48px — large section gaps */

  /* Border Radius */
  --radius-sm: 0.375rem; /* 6px  */
  --radius-md: 0.5rem; /* 8px  */
  --radius-lg: 0.75rem; /* 12px */
  --radius-xl: 1rem; /* 16px */
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s ease;

  /* Z-index Layers */
  --z-dropdown: 100; /* dropdowns float above content */
  --z-topbar: 300; /* sticky topbar above dropdowns */
  --z-sidebar: 400; /* sidebar above topbar on mobile */
  --z-modal: 500; /* dialogs above everything */
  --z-toast: 600; /* toasts above modals */
}

/* DARK MODE VARIABLES */
[data-bs-theme="dark"] {
  --color-primary: #f97316;
  --color-primary-hover: #fb923c;
  --color-primary-light: #431407; /* inverted — dark bg for orange badges */
  --color-primary-muted: #7c2d12; /* inverted — darker muted orange */
  --color-primary-dark: #fdba74; /* inverted — lighter text on dark fills */
  --shadow-primary: 0 4px 12px rgba(249, 115, 22, 0.25); /* softer in dark */

  --color-page-bg: #0f172a;
  --color-topbar-bg: #1e293b; /* slightly lighter than page bg */
  --color-topbar-border: #334155;

  --color-surface: #1e293b;
  --color-surface-hover: #253347; /* slightly lighter on hover */
  --color-border: #334155; /* visible border on dark surface */
  --color-border-light: #1e293b; /* subtle divider inside cards */
  --color-border-dashed: #475569; /* dashed borders need to be stronger */

  --color-text-primary: #f1f5f9; /* near-white for headings */
  --color-text-secondary: #94a3b8; /* slate for body text */
  --color-text-muted: #64748b; /* dimmer slate for hints */
  --color-text-disabled: #334155; /* very dark — barely visible */
  --color-text-inverse: #0f172a; /* dark text on light backgrounds */
  --color-text-link: #fb923c; /* slightly lighter orange link */

  /* Semantic again! */
  --color-success-bg: #052e16; /* deep dark green */
  --color-success-text: #4ade80; /* bright green text on dark bg */
  --color-success-border: #166534; /* medium green border */

  --color-warning-bg: #1c1400; /* deep dark amber  */
  --color-warning-text: #fcd34d; /* bright amber text */
  --color-warning-border: #92400e; /* medium amber border */

  --color-danger-bg: #1c0505; /* deep dark red */
  --color-danger-text: #f87171; /* bright red text */
  --color-danger-border: #7f1d1d; /* medium red border */

  --color-info-bg: #0c1a3a; /* deep dark blue */
  --color-info-text: #60a5fa; /* bright blue text */
  --color-info-border: #1e3a8a; /* medium blue border */

  /* Table inverts to match the dark surface/border system. */
  --color-table-header-bg: #253347; /* darker than card surface */
  --color-table-header-text: #94a3b8; /* muted — secondary info */
  --color-table-row-bg: #1e293b; /* same as card surface */
  --color-table-row-hover: #253347; /* slightly lighter on hover */
  --color-table-border: #334155; /* same as global dark border */
  --color-table-text: #94a3b8; /* slate for table data */
  --color-table-text-strong: #f1f5f9; /* near-white for first column */

  /* Inputs */
  --color-input-bg: #0f172a;
  --color-input-border: #334155;
  --color-input-placeholder: #475569; /* darker placeholder in dark mode */
  --color-input-shadow-focus: rgba(
    249,
    115,
    22,
    0.15
  ); /* slightly more visible */

  --color-overlay: rgba(0, 0, 0, 0.7);
  --color-modal-bg: #1e293b;
  --color-modal-border: #334155;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Reseting margin, padding and box-sizing -> border box */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  overflow-x: hidden;
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text-primary);
  background-color: var(--color-page-bg);

  transition:
    background-color var(--transition-slow),
    color var(--transition-slow);
}

/* Layout: (sidebar + main Content) */
.main-cont {
  padding: 0;
}

/* sidebar */
.sidebar {
  background: var(--color-sidebar-bg);
  min-height: 100vh;
  padding-top: var(--space-md);
}

.sidebar .nav-link {
  color: var(--color-sidebar-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: 10px var(--space-md);
  border-radius: var(--radius-md);
  margin: 2px var(--space-sm);
  transition:
    background var(--transition-fast),
    color var(--transition-fast);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.sidebar .nav-link:hover {
  background: var(--color-sidebar-surface);
  color: var(--color-sidebar-text-active);
}

.sidebar .nav-link.active {
  background: var(--color-sidebar-active);
  color: var(--color-sidebar-text-active);
  font-weight: var(--weight-semi);
}

.sidebar .nav-link i {
  width: 20px;
  text-align: center;
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.offcanvas-body {
  background: var(--color-sidebar-bg) !important;
}

.offcanvas-header {
  background: var(--color-sidebar-bg) !important;
  border-bottom: 1px solid var(--color-sidebar-border) !important;
  color: var(--color-sidebar-text-active) !important;
}

#page-content-wrapper {
  background: var(--color-page-bg);
  min-height: 100vh;
  transition: background var(--transition-slow);
}

/* NavBar the top one */
.navbar.bg-dark {
  background: var(--color-sidebar-bg) !important;
  border-bottom: 1px solid var(--color-sidebar-border);
}

.navbar-brand {
  font-weight: var(--weight-bold);
  font-size: var(--text-md) !important;
  color: var(--color-sidebar-text-active);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* Page Header */
.header-section {
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-md);
}

.header-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
}

.header-section p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* Buttons */
.primary-btn {
  background: var(--color-primary) !important;
  color: #ffffff !important;
  border: none;
  font-weight: var(--weight-semi);
  font-size: var(--text-md);
  border-radius: var(--radius-md);
  border-radius: var(--radius-md);
  padding: 0.5rem 1.25rem;
  transition:
    background var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.primary-btn:hover,
.primary-btn:focus {
  background: var(--color-primary-hover) !important;
  box-shadow: var(--shadow-primary);
  color: #ffffff !important;
}

.primary-btn:active {
  transform: scale(0.98);
}

.edit-btn,
.delete-btn {
  padding: 0 4px !important;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  transition:
    color var(--transition-fast),
    transform var(--transition-fast);
}

.edit-btn:hover {
  color: var(--color-primary);
  transform: scale(1.15);
}
.delete-btn:hover {
  color: var(--color-danger-text);
  transform: scale(1.15);
}

td:has(.edit-btn) {
  white-space: nowrap;
}

/* Table! */
table {
  --bs-table-bg: var(--color-table-row-bg);
  --bs-hover-table-bg: var(--color-table-row-hover);
  --bs-table-border-color: var(--color-table-border);
  --bs-table-color: var(--color-table-text);
}

thead th {
  background: var(--color-table-header-bg) !important;
  color: var(--color-table-header-text) !important;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-table-border) !important;
}

tbody td {
  color: var(--color-table-text) !important;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  background: var(--color-table-row-bg);
  border-color: var(--color-table-border) !important;
  transition: background var(--transition-fast);
}

tbody tr:hover td {
  background: var(--color-table-row-hover);
}

tbody td:first-child {
  font-size: var(--text-base);
  font-weight: var(--weight-semi);
  color: var(--color-table-text-strong) !important;
}

.table > :not(caption) > * > * {
  border-right: 1px solid var(--color-table-border);
}

.table > :not(caption) > * > *:last-child {
  border-right: none;
}

/* Formmmmmmm */
.form-control,
.form-select {
  /* background: var(--color-input-bg) !important; */
  border-color: var(--color-input-border) !important;
  color: var(--color-text-primary) !important;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.form-control::placeholder {
  color: var(--color-input-placeholder) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--color-input-border-focus) !important;
  box-shadow: 0 0 0 3px var(--color-input-shadow-focus) !important;
}

.form-label {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.form-text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Dialog / Modal */
dialog {
  background: var(--color-modal-bg);
  border: 1px solid var(--color-modal-border);
  border-radius: var(--radius-xl);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-xl);
  padding: var(--space-lg);
  min-width: 420px;
  max-width: 500px;
  width: 100%;
  transition:
    background var(--transition-slow),
    border-color var(--transition-slow);
}

dialog::backdrop {
  /* background: var(--color-overlay); */
}

.dialog-header h5 {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
}

.dialog-footer {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  justify-content: flex-end;
}

[data-bs-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Stock hint يارب فك الضيقة */
.stock-hint {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  margin-top: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  min-height: 20px;
  transition: all var(--transition-fast);
}

.stock-hint.success {
  color: var(--color-success-text);
  background-color: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
}

.stock-hint.warning {
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
}

.stock-hint.danger {
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger-border);
}

/* Toggle Buttons! */
.type-toggle {
  display: flex;
  gap: var(--space-sm);
}

.type-btn {
  flex: 1;
  padding: var(--space-sm) var(--space-md);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  transition: all var(--transition-fast);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
}

.type-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

#type-increase.active {
  background: var(--color-success-bg);
  border-color: var(--color-success-text);
  color: var(--color-success-text);
}

#type-decrease.active {
  background: var(--color-danger-bg);
  border-color: var(--color-danger-text);
  color: var(--color-danger-text);
}

.type-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: var(--color-border);
  color: var(--color-text-disabled);
  background: var(--color-surface);
}

/* Toast Notification */
.toast {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  border-radius: var(--radius-lg) !important;
}

.toast-header {
  background: transparent !important;
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-text-primary) !important;
}

.text-bg-success {
  background: var(--color-success-bg) !important;
  color: var(--color-success-text) !important;
  border: 1px solid var(--color-success-border) !important;
}

.text-bg-danger {
  background: var(--color-danger-bg) !important;
  color: var(--color-danger-text) !important;
  border: 1px solid var(--color-danger-border) !important;
}

/* BOOTSTRAP THEME TOGGLE DROPDOWN */
.btn-bd-primary {
  --bd-violet-bg: var(--color-primary);
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-border-color: var(--color-primary-hover);
  --bs-btn-active-bg: var(--color-primary-dark);
  --bs-btn-active-border-color: var(--color-primary-dark);
  --bs-btn-font-weight: 600;
}

.bd-mode-toggle .dropdown-menu {
  background: var(--color-surface);
  border-color: var(--color-border);
}

.bd-mode-toggle .dropdown-item {
  color: var(--color-text-secondary);
}

.bd-mode-toggle .dropdown-item:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

.bd-mode-toggle {
  z-index: var(--z-toast);
}

.bi {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: -0.125em;
  fill: currentColor;
}

/* Responsive and media breakpointz */
@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

/* Mobile — below 768px */
@media (max-width: 768px) {
  dialog {
    min-width: unset;
    width: calc(100% - 2rem);
    margin: 1rem auto;
  }

  .header-section .d-flex {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .type-toggle {
    gap: var(--space-xs);
  }

  .sidebar {
    min-height: 1px;
  }
}

/* 
/* ************************** Roaa 

thead th {
  background-color: #e2e8f0 !important;
  color: #64748b !important;
  font-family: "Public Sans", sans-serif;
  font-size: 0.75rem;
}

tbody td {
  color: #475569 !important;
  font-family: "Public Sans", sans-serif;
  font-size: 0.875rem;
}

tbody td:first-child {
  font-size: 1rem;
}

.table > :not(caption) > * > * {
  border-right: 1px solid #e2e8f0;
}

.table > :not(caption) > * > *:last-child {
  border-right: none;
}

.edit-btn,
.delete-btn {
  padding: 0 !important;
}

td:has(.edit-btn) {
  white-space: nowrap;
}

#type-decrease, 
#type-increase {
  border: 1px solid black;
}

#type-decrease:active, 
#type-decrease:hover,
#type-decrease:focus {
  color: white;
  background: darkred !important;
  border: 1px solid darkred;
}

#type-increase:active,
#type-increase:hover,
#type-increase:focus {
  color: white;
  background: #22c55e !important; 
  border: 1px solid #ec5b13;
}

.primary-btn {
  background-color: #ec5b13;
}

.primary-btn:hover,
.primary-btn:focus {
  background-color: #ef6b28;
}

.search {
  outline: none;
}

.add-supplier-section,
.add-category-section {
  display: none;
}

.fa-trash-can:hover,
.fa-pen-to-square:hover {
  scale: 1.2;
  cursor: pointer;
}


/* ************************** Yousef 
.bd-placeholder-img {
  font-size: 1.125rem;
  text-anchor: middle;
}
.b-example-divider {
  width: 100%;
  height: 3rem;
  background-color: #0000001a;
  border: solid rgba(0, 0, 0, 0.15);
  border-width: 1px 0;
  box-shadow:
    inset 0 0.5em 1.5em #0000001a,
    inset 0 0.125em 0.5em #00000026;
}
.b-example-vr {
  flex-shrink: 0;
  width: 1.5rem;
  height: 100vh;
}
.bi {
  fill: currentColor;
}
.nav-scroller {
  position: relative;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
}
.nav-scroller .nav {
  display: flex;
  flex-wrap: nowrap;
  padding-bottom: 1rem;
  margin-top: -1px;
  overflow-x: auto;
  text-align: center;
}
.btn-bd-primary {
  --bd-violet-bg: #712cf9;
  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet-bg);
  --bs-btn-border-color: var(--bd-violet-bg);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #6528e0;
  --bs-btn-hover-border-color: #6528e0;
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #5a23c8;
  --bs-btn-active-border-color: #5a23c8;
}
.bd-mode-toggle {
  z-index: 1500;
}
.bd-mode-toggle .bi {
  width: 1em;
  height: 1em;
}
.bd-mode-toggle .dropdown-menu .active .bi {
  display: block !important;
}
/* *******************
.bi {
  display: inline-block;
  width: 1rem;
  height: 1rem;
}

/*
 * Sidebar
 

@media (min-width: 768px) {
  .bd-placeholder-img-lg {
    font-size: 3.5rem;
  }
}

.sidebar .nav-link {
  font-size: 0.875rem;
  font-weight: 500;
}

.sidebar-heading {
  font-size: 0.75rem;
}

/*
 * Navbar

.nav-item .nav-link {
  /* ! Haven't settled on the colors yet 
  /* color: #373b3e; 
  padding-top: 15px;
  padding-bottom: 15px;
}
.nav-item .nav-link:hover,
.active {
  background-color: #373b3e !important;
  color: #ffff !important;
}
.navbar-brand {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  background-color: rgba(0, 0, 0, 0.25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
}

.navbar .form-control {
  padding: 0.75rem 1rem;
} */
.hidden {
  display: none;
}