[data-bs-theme=light] {
  --bs-blue: #007bff;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #e83e8c;
  --bs-red: #d6293e;
  --bs-orange: #fd7e14;
  --bs-yellow: #f7c32e;
  --bs-green: #0cbc87;
  --bs-teal: #20c997;
  --bs-cyan: #4f9ef8;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray-100: #f7f8f9;
  --bs-gray-200: #eff2f6;
  --bs-gray-300: #eef0f2;
  --bs-gray-400: #e1e4e6;
  --bs-gray-500: #a1a1a8;
  --bs-gray-600: #676a79;
  --bs-gray-700: #29292e;
  --bs-gray-800: #14191e;
  --bs-gray-900: #0f0f10;
  --bs-primary: #0f6fec;
  --bs-secondary: #14191e;
  --bs-success: #0cbc87;
  --bs-info: #4f9ef8;
  --bs-warning: #f7c32e;
  --bs-danger: #d6293e;
  --bs-light: #eef0f2;
  --bs-dark: #14191e;
  --bs-primary-rgb: 15, 111, 236;
  --bs-secondary-rgb: 20, 25, 30;
  --bs-success-rgb: 12, 188, 135;
  --bs-info-rgb: 79, 158, 248;
  --bs-warning-rgb: 247, 195, 46;
  --bs-danger-rgb: 214, 41, 62;
  --bs-light-rgb: 231, 235, 243;
  --bs-dark-rgb: 20, 25, 30;
  --bs-primary-text-emphasis: #0b4ea5;
  --bs-secondary-text-emphasis: #0e1215;
  --bs-success-text-emphasis: #08845f;
  --bs-info-text-emphasis: #376fae;
  --bs-warning-text-emphasis: #ad8920;
  --bs-danger-text-emphasis: #961d2b;
  --bs-light-text-emphasis: #29292e;
  --bs-dark-text-emphasis: #0e1215;
  --bs-primary-bg-subtle: #cfe2fb;
  --bs-secondary-bg-subtle: #d0d1d2;
  --bs-success-bg-subtle: #cef2e7;
  --bs-info-bg-subtle: #dcecfe;
  --bs-warning-bg-subtle: #fdf3d5;
  --bs-danger-bg-subtle: #f7d4d8;
  --bs-light-bg-subtle: #fbfcfc;
  --bs-dark-bg-subtle: #d0d1d2;
  --bs-primary-border-subtle: #9fc5f7;
  --bs-secondary-border-subtle: #a1a3a5;
  --bs-success-border-subtle: #9ee4cf;
  --bs-info-border-subtle: #b9d8fc;
  --bs-warning-border-subtle: #fce7ab;
  --bs-danger-border-subtle: #efa9b2;
  --bs-light-border-subtle: #eff2f6;
  --bs-dark-border-subtle: #a1a3a5;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: "Inter", sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #000;
  --bs-body-color-rgb: 0, 0, 0;
  --bs-emphasis-color: #000;
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color: rgba(103, 106, 121, 0.5);
  --bs-secondary-color-rgb: 103, 106, 121;
  --bs-secondary-bg: #eff2f6;
  --bs-secondary-bg-rgb: 239, 242, 246;
  --bs-tertiary-color: rgba(103, 106, 121, 0.5);
  --bs-tertiary-color-rgb: 103, 106, 121;
  --bs-tertiary-bg: #f7f8f9;
  --bs-tertiary-bg-rgb: 248,249,250;
  --bs-heading-color: var(--bs-gray-800);
  --bs-link-color: #0f6fec;
  --bs-link-color-rgb: 15, 111, 236;
  --bs-link-decoration: none;
  --bs-link-hover-color: #0c59bd;
  --bs-link-hover-color-rgb: 12, 89, 189;
  --bs-code-color: #d63384;
  --bs-highlight-color: #212529;
  --bs-highlight-bg: #fff3cd;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: rgba(0, 0, 0, 0.1);
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.4rem;
  --bs-border-radius-sm: 0.2rem;
  --bs-border-radius-lg: 0.7rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0px 0px 20px rgba(93, 83, 84, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(83, 88, 93, 0.15);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(83, 88, 93, 0.15);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
  --bs-form-valid-color: #198754;
  --bs-form-valid-border-color: #198754;
  --bs-form-invalid-color: #dc3545;
  --bs-form-invalid-border-color: #dc3545;
  --custom-button-background: #fff;
  --custom-button-border: #acb3c1;
  --custom-button-hover: #f9f9f9;
  --custom-button-text: #000;
}

[data-bs-theme=dark] {
  color-scheme: dark;
  --bs-body-color: #eef0f2;
  --bs-body-color-rgb: 238, 240, 242;
  --bs-body-bg: #0f0f10;
  --bs-body-bg-rgb: 15, 15, 16;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(238, 240, 242, 0.5);
  --bs-secondary-color-rgb: 238, 240, 242;
  --bs-secondary-bg: #14191e;
  --bs-secondary-bg-rgb: 20, 25, 30;
  --bs-tertiary-color: rgba(238, 240, 242, 0.5);
  --bs-tertiary-color-rgb: 238, 240, 242;
  --bs-tertiary-bg: #121417;
  --bs-tertiary-bg-rgb: 18, 20, 23;
  --bs-primary-text-emphasis: #6fa9f4;
  --bs-secondary-text-emphasis: #727578;
  --bs-success-text-emphasis: #6dd7b7;
  --bs-info-text-emphasis: #95c5fb;
  --bs-warning-text-emphasis: #fadb82;
  --bs-danger-text-emphasis: #e67f8b;
  --bs-light-text-emphasis: #f7f8f9;
  --bs-dark-text-emphasis: #eef0f2;
  --bs-primary-bg-subtle: #03162f;
  --bs-light-rgb: 32, 34, 39;
  --bs-secondary-bg-subtle: #040506;
  --bs-success-bg-subtle: #02261b;
  --bs-info-bg-subtle: #102032;
  --bs-warning-bg-subtle: #312709;
  --bs-danger-bg-subtle: #2b080c;
  --bs-light-bg-subtle: #14191e;
  --bs-dark-bg-subtle: #0a0d0f;
  --bs-primary-border-subtle: #09438e;
  --bs-secondary-border-subtle: #0c0f12;
  --bs-success-border-subtle: #077151;
  --bs-info-border-subtle: #2f5f95;
  --bs-warning-border-subtle: #94751c;
  --bs-danger-border-subtle: #801925;
  --bs-light-border-subtle: #29292e;
  --bs-dark-border-subtle: #14191e;
  --bs-heading-color: inherit;
  --bs-link-color: #a1a1a8;
  --bs-link-hover-color: #0c59bd;
  --bs-link-color-rgb: 15, 111, 236;
  --bs-link-hover-color-rgb: 12, 89, 189;
  --bs-code-color: #e685b5;
  --bs-highlight-color: #eef0f2;
  --bs-highlight-bg: #664d03;
  --bs-border-color: #29292e;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-form-valid-color: #75b798;
  --bs-form-valid-border-color: #75b798;
  --bs-form-invalid-color: #ea868f;
  --bs-form-invalid-border-color: #ea868f;
  --custom-button-background: #313448;
  --custom-button-border: #191b2a;
  --custom-button-hover: #404353;
  --custom-button-text: #fff;
}

* {
  font-family: var(--bs-font-sans-serif);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

#offcanvasSidebar {
  max-width: 80%;
}

.dropdown-menu {
  max-height: 200px;
  overflow-y: scroll;
}

.dropdown-menu.show {
  -webkit-animation: fadeIn 0.3s alternate;
  animation: fadeIn 0.3s alternate;
}

.navbar-nav {
  flex-direction: row !important;
}

.nav-item {
  margin-right: 10px;
}

.counter-item {
  padding: 16px;
  text-align: center;
}

.counter-number {
  margin-bottom: 4px;
  font-size: 28px;
  line-height: 32px;
  display: block;
}

.counter-label {
  font-size: 16px;
}

.custom-shadow {
  box-shadow: 0 4px 50px -12px rgba(17, 12, 46, 0.16);
}

/* Style for each stage */
.counter-stage {
  flex-grow: 1;
  display: flex;
  justify-content: space-evenly;
  border-right: 1px solid rgba(0, 0, 0, 0.08);
}

.counter-stage:last-child {
  border-right: none;
}

.hover-effect {
  min-width: 3rem;
  min-height: 3rem;
  height: 3rem;
  border-radius: 50%;
}

.area-color {
  background-color: rgb(18 12 52/8%);
  border: 4px solid #00000012;
}

.area-color-border {
  border: 4px solid #00000012;
}

.custom-button {
  background-color: var(--custom-button-background);
  color: var(--custom-button-text);
  border-radius: 10px;
  margin: 12px;
  min-width: 20%;
  line-height: 50px;
  text-align: center;
  text-transform: uppercase;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 5px solid var(--custom-button-border) !important;
}

.custom-button:hover {
  color: var(--custom-button-text) !important;
  background-color: var(--custom-button-hover) !important;
}

.custom-button:active {
  color: var(--custom-button-text) !important;
  background-color: var(--custom-button-hover) !important;
}

.progress {
  flex-grow: 1;
  height: 40px;
}

.progress-bar {
  transition: width 0.5s ease-out;
}

.list-group-item-action:hover {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-light-rgb), var(--bs-bg-opacity)) !important;
}

.selected-time-btn {
  background-color: #007bff;
  color: white;
}

.scrollable-row {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  padding-left: 2px;
}

.scrollable-row .btn {
  flex: 0 0 auto;
}

.scrollable-row::-webkit-scrollbar {
  height: 4px;
}

.scrollable-row::-webkit-scrollbar-thumb {
  background-color: #007bff;
  border-radius: 2px;
}


.rounded-table {
  border-collapse: separate;
  border-spacing: 0;
  border: 4px solid #00000012;
  border-radius: 10px;
  overflow: hidden;
}

.rounded-table thead th {
  border-top: none;
}

.rounded-table th,
.rounded-table td {
  border-bottom: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.rounded-table th:first-child,
.rounded-table td:first-child {
  border-left: none;
}

.rounded-table th:last-child,
.rounded-table td:last-child {
  border-right: none;
}

.rounded-table tbody tr:last-child td {
  border-bottom: none;
}

.rounded-table tbody tr:nth-of-type(odd) {
  background-color: #f9f9f9;
}

.custom-background {
  background: rgb(18 12 52/8%);
}

.colorlist {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.colorcondiv {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.colrdiv {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-bottom: 5px;
}

.blue {
  background-color: #0000FF;
}

.green {
  background-color: #008000;
}

.red {
  background-color: #FF0000;
}

.black {
  background-color: #000000;
}

.yellow {
  background-color: #FFFF00;
}

.orange {
  background-color: #FFA500;
}

.pink {
  background-color: #FFC0CB;
}

.purple {
  background-color: #800080;
}

.white {
  background-color: #FFF;
}

.colorname a {
  color: var(--bs-body-color);
  text-decoration: none;
}

@media (max-width: 441px) {
  .nav.nav-pills.nav-stack .nav-item {
    margin-top: 10px;
  }
}

@media (max-width: 576px) {
  .responsive-h1 {
    font-size: 1.12rem;
    font-weight: bold;
  }

  .hover-effect {
    min-width: 2rem;
    min-height: 2rem;
    height: 2rem;
  }
}

@media (min-width: 577px) {
  .hover-effect:hover {
    background-color: hsla(0, 0%, 0%, 0.13);
  }
}