/* Light mode */
/* .light-mode {
  background-color: #f8f9fa;
  transition: all 0.5s;
}
.light-mode header,
.light-mode nav {
  background: var(--black);
  transition: all 0.5s;
}
.light-mode nav .links a {
  color: var(--nav-text-color);
}
.light-mode header ul li a,
.light-mode header ul li {
  color: var(--main-nav-text-color);
}

.light-mode header,
.light-mode nav {
  background: #ffffff;
  transition: all 0.5s;
}
.light-mode nav .profile a {
  color: var(--nav-text-color);
}

.light-mode nav .links .active-link {
  color: var(--activeTab-light-color);
  background: var(--primary-color);
}

.light-mode .bell-icon .light-bell {
  display: block;
}
.light-mode .bell-icon .dark-bell {
  display: none;
}

.light-mode .card-background {
  background: var(--card-background-color-light);
}

.light-mode .primary-btn {
  background: var(--primary-color);
}

.light-mode .secondary-btn {
  background: var(--secondary-btn-bg-color);
}
.light-mode .view-profile-btn {
  border: 1px solid #e5e5e5;
} */

/* Dark mode  */
/* .dark-mode {
  background-color: var(--background-color);
  color: var(--secondary-text-color) !important;
  transition: all 0.5s;
}
.dark-mode header,
.dark-mode nav {
  background: var(--black);
  transition: all 0.5s;
}
.dark-mode nav .links a {
  color: var(--secondary-text-color);
}
.dark-mode nav .links .active-link {
  color: var(--primary-color);
  background: var(--activeTab-background-color);
}
.dark-mode nav .profile a {
  color: var(--secondary-text-color);
}
.dark-mode .bell-icon .light-bell {
  display: none;
}
.dark-mode .bell-icon .dark-bell {
  display: block;
}

.dark-mode .card-background {
  background: var(--card-background-color);
}

.dark-mode .main-heading-color {
  color: var(--primary-text-color);
}

.dark-mode .secondary-btn , .dark-mode  .view-profile-btn {
  border: 1px solid var(--secondary-btn-border-color);
  background: transparent;
  color: var(--golden);
}
.dark-mode .text-color  {
  color: var(--primary-text-color);
}
.dark-mode .profile-view {
  background: #2A2E32;
} */

/* .dark-mode .image-section {
  background: #2A2E32;
} */

.swimmer-selection:hover {
  cursor: pointer;
  border: 1px solid #dee2e6 !important;
  border-color: var(--primary-color) !important;
}

.day-container-style2.disabled {
  background-color: #e3e3e3;
  color: black;
}

.active-timing {
  background-color: #bdb187 !important;
  color: black !important;
}

.overlay {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background: #000000d1;
}

.overlay__inner {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.overlay__content {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.spinner {
  width: 75px;
  height: 75px;
  display: inline-block;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.05);
  border-top-color: #fff;
  animation: spin 1s infinite linear;
  border-radius: 100%;
  border-style: solid;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.my-progress-dashboard {
  width: 20% !important;
}

.icon-swim svg {
  cursor: pointer;
}

.dark-mode .form-control {
  background: #1f2224;
  color: white;
}

.dark-mode .profile-dropdown {
  background: #1f2224;
  color: var(--secondary-text-color);
}

.dark-mode .profile-dropdown button {
  background: #1f2224;
  color: var(--secondary-text-color);
}

.dark-mode .profile-dropdown a:hover {
  color: var(--primary-color);
  background: var(--activeTab-background-color);
}

.dark-mode .profile-dropdown button:hover {
  color: var(--primary-color);
  background: var(--activeTab-background-color);
}

.breadcrumb a {
  color: var(--primary-color);
}

.btn.btn-primary {
  z-index: 1;
  border: 1px solid var(--border-color) !important;
  background: var(--primary-color) !important;
  color: #fff;
}

.date-today-week .date-picker {
  border: none;
  background: none !important;
}

.btn.btn-outline-primary,
.page-item.active .page-link {
  z-index: 1;
  border: 1px solid var(--border-color) !important;
  background: var(--primary-color) !important;
  color: #fff;
}

.dataTables_paginate {
  float: right;
}

.paginate_button a {
  border: 1px solid var(--border-color) !important;
  background: var(--primary-color) !important;
  color: #fff;
}

table .filters input {
  border-color: #434343 !important;
  background: none !important;
}

.dataTables_filter input {
  border: 1px solid #434343 !important;
  margin-bottom: 10px;
  margin-top: 5px;
}

.card-background .modal-header {
  border: none;
}

.card-background .modal-body .form-control {
  border: 1px solid #525252;
  background: none !important;
  color: #b9b9ba;
}

.card-background.padding {
  padding: 23px 32px;
  margin-bottom: 20px;
}

.card-background .input-group-text {
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  background: var(--primary-color);
  color: #fff;
}

.select2-container--default .select2-selection--multiple {
  background-color: #fff !important;
}
.select2-container--default
  .select2-selection--multiple
  .select2-selection__choice {
  background-color: #7c001f !important;
  color: #fff;
  margin-top: 3px !important;
}
.select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: #7c001f !important;
}

/* Set the background color, text color, and border for the select dropdown */
.dark-mode select {
  background-color: #1f2224 !important;
  color: #fff;
  /* White text color */
}

/* Style the dropdown options */
.dark-mode select option {
  background-color: #1f2224 !important;
  color: #fff;
  /* White text color */
}

/* Remove the default arrow and style it with a custom one if needed */
.dark-mode select::-ms-expand {
  display: none;
}

/* For styling the custom arrow, you can use a pseudo-element */
.dark-mode .select-wrapper {
  position: relative;
}

.dark-mode .select-wrapper::after {
  content: "\25BC";
  /* Down arrow */
  position: absolute;
  top: 74%;
  right: 14px;
  transform: translateY(-50%);
  pointer-events: none;
  color: black;
  /* Arrow color */
}

.action-btns button,
.action-btns a {
  padding: 5px;
  float: left;
  margin-left: 2px;
}

.action-icons button,
.action-icons a {
  padding: 6px;
  margin-top: 5px;
}

.action-icons button i,
.action-icons a i {
  color: #fff;
  font-size: 12px;
}

.photography-holder img {
  background: #fff;
  margin-left: 10px;
  border-radius: 5px;
  border: 1px solid #000;
}

.dark-mode td {
  color: white !important;
}

.nav-tabs .nav-link {
  color: #7c001f !important;
}

.nav.nav-tabs .nav-link.active {
  background: #7c001f !important;
  color: white !important;
}