:root {
  --theme-color: #eb8220;
  --bg-primary: #ffffff;
  --bg-secondary: #d9d9d9;

  --bg-input: #efefef;
  --border-input: #d9d9d9;
  --text-input: #424242;
  --text-placeholder: #97979b;

  --shadow-md: 0 0 20px rgba(0, 0, 0, 0.1);

  --primary-text: #212529;
  --secondary-text: #8f8e93;
  
  --text-color: #121212;

  --bg-footer-left: #949398;
  --bg-footer-right: #a9a8ad;

  --light: #ffffff;
  --light-gray: #d9d9d9;
  --light-gray-50: #efefef;

  --dark-text: #424242;
  --teal-green: #007884;

  --img-filter: none;
}

html,
body {
  overflow-x: hidden;
  background-color: var(--bg-primary);
  font-size: 10px;
  color: var(--primary-text);
}

/* ============================================== DARK MODE START ============================================= */

body.dark-mode {
  --bg-primary: #121212;
  --bg-secondary: #2a2a2a;

  --bg-input: #2a2a2a;
  --border-input: #3a3a3a;
  --text-input: #ffffff;
  --text-placeholder: #97979b;

  --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.6);

  --primary-text: #ffffff;

  --bg-footer-left: #212124;
  --bg-footer-right: #28282b;

  --light-gray: #2a2a2a;
  --light-gray-50: #1e1e1e;

  --img-filter: invert(1) hue-rotate(180deg) brightness(1.1) contrast(0.9);
}

/* Sections, cards, boxes */
body.dark-mode .nf-text {
  background-color: var(--bg-secondary);
}

/* body.dark-mode .btn-light:hover,
body.dark-mode .btn-light-round:hover {
  color: inherit;
} */

/* Breadcrumb background fix */
body.dark-mode ol.breadcrumb {
  background-color: transparent;
}

/* Footer */
body.dark-mode .fixed-footer {
  background-color: #0e5c63;
  color: var(--light);
}

/* Loader tweak */
body.dark-mode .loader {
  border-top: 4px solid #444;
}

/* ============================================== DARK MODE END ============================================= */

/*Common css*/
button:focus,
button:active,
button:focus-visible {
  outline: none;
  box-shadow: none;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: none;
  border: none;
}

.dark-mode .btn-wh:hover {
  color: var(--light);
}

.jumbo-container {
  color: var(--text-color);
}
.dark-mode .jumbo-container {
  color: var(--light);
}