@charset "UTF-8";
:root {
  --primary: #f54952;
  --secondary: #422680;
  --dark: #190040;
  --navbar-bg: #fff;
  --navbar-text: #422680;
  --body-bg: #f8f7fa;
  --body-text: #222;
}

body {
  background: var(--body-bg, #f8f7fa);
  color: var(--body-text, #222);
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

a {
  color: #f54952;
  text-decoration: none !important;
}

a:hover {
  text-decoration: none !important;
  color: #f54952;
}

h1, h2, h3, h4, h5, h6, h7, p, a, ul, li, button, input, table, th, td, span, select, div {
  font-family: "Nunito", sans-serif;
}

.weight-1000 {
  font-weight: 1000 !important;
}

.weight-700 {
  font-weight: 700 !important;
}

::-webkit-scrollbar {
  width: 8px; /* Set the width of the scrollbar */
  height: 8px; /* Set the width of the scrollbar */
}

::-webkit-scrollbar-track {
  background-color: #f8d2d3; /* Set the background color of the scrollbar track */
  margin-top: 0vh;
  margin-bottom: 0vh;
}

::-webkit-scrollbar-thumb {
  background-color: #f54952; /* Set the color of the scrollbar thumb */
  border-radius: 8px; /* Set the border-radius of the scrollbar thumb */
}

::-webkit-scrollbar-thumb:hover {
  background-color: #422680; /* Set the color of the scrollbar thumb on hover */
}

.btn-primary {
  background: rgba(245, 73, 82, 0.3);
  border: 2px solid rgba(245, 73, 82, 0.5);
  color: #fff;
  font-weight: 700;
  border-radius: 0.5rem;
  transition: background 0.2s;
  padding: 8px 16px;
}

.btn-primary:hover, .btn-primary:focus {
  background: rgba(245, 73, 82, 0.8);
  border: 2px solid rgb(245, 73, 82);
  color: #fff;
}

.btn-secondary {
  background: rgba(66, 38, 128, 0.3);
  border: 2px solid rgba(66, 38, 128, 0.6);
  color: #fff;
  font-weight: 700;
  border-radius: 0.5rem;
  transition: background 0.2s;
  padding: 8px 16px;
}

.btn-secondary:hover, .btn-secondary:focus {
  background: rgba(66, 38, 128, 0.8);
  border: 2px solid rgb(66, 38, 128);
  color: #fff;
}

.btn-dark {
  background: var(--dark, #190040);
  color: #fff !important;
  border: none;
  font-weight: 700;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(25, 0, 64, 0.08);
  transition: background 0.2s;
  padding: 8px 16px;
}

.btn-dark:hover, .btn-dark:focus {
  background: #090017;
  border: none;
}

.btn:focus {
  box-shadow: none !important;
}

.btn-white {
  background: rgba(255, 255, 255, 0.3) !important;
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: #fff !important;
  font-weight: 700;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(66, 38, 128, 0.04);
  transition: background 0.2s;
  padding: 8px 16px;
}

.btn-white:hover, .btn-white:focus {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 2px solid rgba(255, 255, 255, 0.9);
  color: var(--secondary, #422680) !important;
}

.btn-label-white {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, 0.2) !important;
  font-weight: 700;
  border-radius: 0.5rem;
  padding: 8px 16px;
}

.btn-label-white:hover, .btn-label-white:focus {
  background: rgba(255, 255, 255, 0.2) !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  color: var(--secondary, #422680) !important;
}

.btn-outline-white {
  background: transparent !important;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, 0.6) !important;
  font-weight: 700;
  border-radius: 0.5rem;
  transition: background 0.2s, color 0.2s;
  padding: 8px 16px;
}

.btn-outline-white:hover, .btn-outline-white:focus {
  background: rgba(255, 255, 255, 0.3) !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  color: var(--secondary, #422680) !important;
}

.btn-outline-primary {
  background: transparent !important;
  color: var(--primary, #f54952) !important;
  border: 2px solid var(--primary, #f54952) !important;
  font-weight: 700;
  border-radius: 0.5rem;
  transition: background 0.2s, color 0.2s;
  padding: 8px 16px;
}

.btn-outline-primary:hover, .btn-outline-primary:focus {
  background: var(--primary, #f54952) !important;
  color: #fff !important;
}

.btn-label-primary {
  background: rgba(245, 73, 82, 0.08) !important;
  color: var(--primary, #f54952) !important;
  border: 2px solid rgba(245, 73, 82, 0.2) !important;
  font-weight: 700;
  border-radius: 0.5rem;
  padding: 8px 16px;
}

.btn-label-primary:hover, .btn-label-primary:focus {
  background: rgba(245, 73, 82, 0.2) !important;
  border: 2px solid rgba(245, 73, 82, 0.4) !important;
  color: #fff !important;
}

.bg-label-primary {
  background: rgba(245, 73, 82, 0.08) !important;
  color: var(--primary, #f54952) !important;
}

.btn-outline-secondary {
  background: transparent !important;
  color: var(--secondary, #422680) !important;
  border: 2px solid var(--secondary, #422680) !important;
  font-weight: 700;
  border-radius: 0.5rem;
  transition: background 0.2s, color 0.2s;
}

.btn-outline-secondary:hover, .btn-outline-secondary:focus {
  background: var(--secondary, #422680) !important;
  color: #fff !important;
}

.btn-label-secondary {
  background: rgba(66, 38, 128, 0.08) !important;
  color: var(--secondary, #422680) !important;
  border: 2px solid rgba(66, 38, 128, 0.2);
  font-weight: 700;
  border-radius: 0.5rem;
  padding: 8px 16px;
}

.btn-label-secondary:hover, .btn-label-secondary:focus {
  background: rgba(66, 38, 128, 0.2) !important;
  border: 2px solid rgba(66, 38, 128, 0.4);
  color: #fff !important;
}

.bg-label-secondary {
  background: rgba(66, 38, 128, 0.08) !important;
  color: var(--secondary, #422680) !important;
}

.btn-outline-dark {
  background: transparent !important;
  color: var(--dark, #190040) !important;
  border: 2px solid var(--dark, #190040) !important;
  font-weight: 700;
  border-radius: 0.5rem;
  transition: background 0.2s, color 0.2s;
}

.btn-outline-dark:hover, .btn-outline-dark:focus {
  background: var(--dark, #190040) !important;
  color: #fff !important;
}

.btn-label-dark {
  background: rgba(25, 0, 64, 0.08) !important;
  color: var(--dark, #190040) !important;
  border: 1px solid var(--dark, #190040) !important;
  font-weight: 700;
  border-radius: 0.5rem;
}

.btn-label-dark:hover, .btn-label-dark:focus {
  background: var(--dark, #190040) !important;
  color: #fff !important;
}

.bg-label-dark {
  background: rgba(25, 0, 64, 0.08) !important;
  color: var(--dark, #190040) !important;
}

.btn-success {
  background: rgba(40, 167, 69, 0.3);
  border: 2px solid rgba(40, 167, 69, 0.5);
  color: #fff;
  font-weight: 700;
  border-radius: 0.5rem;
  transition: background 0.2s;
  padding: 8px 16px;
}

.btn-success:hover, .btn-success:focus {
  background: rgba(40, 167, 69, 0.8);
  border: 2px solid rgb(40, 167, 69);
  color: #fff;
}

.btn-outline-success {
  background: transparent !important;
  color: #28a745 !important;
  border: 2px solid #28a745 !important;
  font-weight: 700;
  border-radius: 0.5rem;
  transition: background 0.2s, color 0.2s;
  padding: 8px 16px;
}

.btn-outline-success:hover, .btn-outline-success:focus {
  background: #28a745 !important;
  color: #fff !important;
}

.btn-label-success {
  background: rgba(40, 167, 69, 0.08) !important;
  color: #28a745 !important;
  border: 2px solid rgba(40, 167, 69, 0.2) !important;
  font-weight: 700;
  border-radius: 0.5rem;
  padding: 8px 16px;
}

.btn-label-success:hover, .btn-label-success:focus {
  background: rgba(40, 167, 69, 0.2) !important;
  border: 2px solid rgba(40, 167, 69, 0.4) !important;
  color: #fff !important;
}

.bg-label-success {
  background: rgba(40, 167, 69, 0.08) !important;
  color: #28a745 !important;
}

.btn-info {
  background: rgba(23, 162, 184, 0.3);
  border: 2px solid rgba(23, 162, 184, 0.5);
  color: #fff;
  font-weight: 700;
  border-radius: 0.5rem;
  transition: background 0.2s;
  padding: 8px 16px;
}

.btn-info:hover, .btn-info:focus {
  background: rgba(23, 162, 184, 0.8);
  border: 2px solid rgb(23, 162, 184);
  color: #fff;
}

.btn-outline-info {
  background: transparent !important;
  color: #17a2b8 !important;
  border: 2px solid #17a2b8 !important;
  font-weight: 700;
  border-radius: 0.5rem;
  transition: background 0.2s, color 0.2s;
  padding: 8px 16px;
}

.btn-outline-info:hover, .btn-outline-info:focus {
  background: #17a2b8 !important;
  color: #fff !important;
}

.btn-label-info {
  background: rgba(23, 162, 184, 0.08) !important;
  color: #17a2b8 !important;
  border: 2px solid rgba(23, 162, 184, 0.2) !important;
  font-weight: 700;
  border-radius: 0.5rem;
  padding: 8px 16px;
}

.btn-label-info:hover, .btn-label-info:focus {
  background: rgba(23, 162, 184, 0.2) !important;
  border: 2px solid rgba(23, 162, 184, 0.4) !important;
  color: #fff !important;
}

.bg-label-info {
  background: rgba(23, 162, 184, 0.08) !important;
  color: #17a2b8 !important;
}

.btn-danger {
  background: rgba(220, 53, 69, 0.3);
  border: 2px solid rgba(220, 53, 69, 0.5);
  color: #fff;
  font-weight: 700;
  border-radius: 0.5rem;
  transition: background 0.2s;
  padding: 8px 16px;
}

.btn-danger:hover, .btn-danger:focus {
  background: rgba(220, 53, 69, 0.8);
  border: 2px solid rgb(220, 53, 69);
  color: #fff;
}

.btn-outline-danger {
  background: transparent !important;
  color: #dc3545 !important;
  border: 2px solid #dc3545 !important;
  font-weight: 700;
  border-radius: 0.5rem;
  transition: background 0.2s, color 0.2s;
  padding: 8px 16px;
}

.btn-outline-danger:hover, .btn-outline-danger:focus {
  background: #dc3545 !important;
  color: #fff !important;
}

.btn-label-danger {
  background: rgba(220, 53, 69, 0.08) !important;
  color: #dc3545 !important;
  border: 2px solid rgba(220, 53, 69, 0.2) !important;
  font-weight: 700;
  border-radius: 0.5rem;
  padding: 8px 16px;
}

.btn-label-danger:hover, .btn-label-danger:focus {
  background: rgba(220, 53, 69, 0.2) !important;
  border: 2px solid rgba(220, 53, 69, 0.4) !important;
  color: #fff !important;
}

.bg-label-danger {
  background: rgba(220, 53, 69, 0.08) !important;
  color: #dc3545 !important;
}

.btn-primary-solid {
  background: var(--primary, #f54952) !important;
  border: 2px solid var(--primary, #f54952) !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: 0.5rem;
  transition: background 0.2s;
  padding: 8px 16px;
}

.btn-primary-solid:hover, .btn-primary-solid:focus {
  background: #f21924 !important;
  border: 2px solid #f21924 !important;
  color: #fff !important;
}

.btn-secondary-solid {
  background: var(--secondary, #422680) !important;
  border: 2px solid var(--secondary, #422680) !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: 0.5rem;
  transition: background 0.2s;
  padding: 8px 16px;
}

.btn-secondary-solid:hover, .btn-secondary-solid:focus {
  background: #2e1a59 !important;
  border: 2px solid #2e1a59 !important;
  color: #fff !important;
}

.btn-dark-solid {
  background: var(--dark, #190040) !important;
  border: 2px solid var(--dark, #190040) !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: 0.5rem;
  transition: background 0.2s;
  padding: 8px 16px;
}

.btn-dark-solid:hover, .btn-dark-solid:focus {
  background: #05000d !important;
  border: 2px solid #05000d !important;
  color: #fff !important;
}

.btn-white-solid {
  background: #ffffff !important;
  border: 2px solid #ffffff !important;
  color: var(--secondary, #422680) !important;
  font-weight: 700;
  border-radius: 0.5rem;
  transition: background 0.2s;
  padding: 8px 16px;
}

.btn-white-solid:hover, .btn-white-solid:focus {
  background: #f8f9fa !important;
  border: 2px solid #f8f9fa !important;
  color: var(--primary, #f54952) !important;
}

.btn-success-solid {
  background: #28a745 !important;
  border: 2px solid #28a745 !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: 0.5rem;
  transition: background 0.2s;
  padding: 8px 16px;
}

.btn-success-solid:hover, .btn-success-solid:focus {
  background: #218838 !important;
  border: 2px solid #218838 !important;
  color: #fff !important;
}

.btn-info-solid {
  background: #17a2b8 !important;
  border: 2px solid #17a2b8 !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: 0.5rem;
  transition: background 0.2s;
  padding: 8px 16px;
}

.btn-info-solid:hover, .btn-info-solid:focus {
  background: #138496 !important;
  border: 2px solid #138496 !important;
  color: #fff !important;
}

.btn-danger-solid {
  background: #dc3545 !important;
  border: 2px solid #dc3545 !important;
  color: #fff !important;
  font-weight: 700;
  border-radius: 0.5rem;
  transition: background 0.2s;
  padding: 8px 16px;
}

.btn-danger-solid:hover, .btn-danger-solid:focus {
  background: #c82333 !important;
  border: 2px solid #c82333 !important;
  color: #fff !important;
}

.btn-primary-solid:disabled,
.btn-primary-solid.disabled,
.btn-primary-solid[aria-disabled=true],
.btn-secondary-solid:disabled,
.btn-secondary-solid.disabled,
.btn-secondary-solid[aria-disabled=true],
.btn-dark-solid:disabled,
.btn-dark-solid.disabled,
.btn-dark-solid[aria-disabled=true],
.btn-white-solid:disabled,
.btn-white-solid.disabled,
.btn-white-solid[aria-disabled=true],
.btn-success-solid:disabled,
.btn-success-solid.disabled,
.btn-success-solid[aria-disabled=true],
.btn-info-solid:disabled,
.btn-info-solid.disabled,
.btn-info-solid[aria-disabled=true],
.btn-danger-solid:disabled,
.btn-danger-solid.disabled,
.btn-danger-solid[aria-disabled=true] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed !important;
  background-color: inherit;
  border-color: inherit;
  color: inherit;
}

.form-control, .form-select {
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  font-size: 1rem;
  transition: border-color 0.2s;
}

.form-control:focus, .form-select:focus {
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: none;
}

.navbar {
  background: var(--navbar-bg, #fff) !important;
  color: var(--navbar-text, #422680) !important;
}

.navbar .nav-link {
  color: var(--navbar-text, #422680) !important;
  font-weight: 700;
  transition: color 0.2s;
}

.navbar .nav-link.active, .navbar .nav-link:focus, .navbar .nav-link:hover {
  color: var(--primary, #f54952) !important;
}

.nav-link {
  color: #422680;
  font-weight: 700;
  transition: color 0.2s;
}

.nav-link:hover {
  color: var(--primary, #f54952);
}

.nav-tabs .nav-link {
  /* margin-bottom: -1px; */
  background: #422680;
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  color: #fff;
  border-bottom: 2px solid white;
  font-weight: 1000;
}

.nav-tabs .nav-link.active {
  color: #422680;
  font-weight: 1000;
  background-color: #fff;
  border-bottom: 2px solid #422680;
}

.nav-tabs .nav-item .nav-link:hover {
  color: #f54952;
  background-color: #fff;
  border-bottom: 2px solid #f54952;
}

.text-primary {
  color: var(--primary, #f54952) !important;
}

.text-secondary {
  color: var(--secondary, #422680) !important;
}

.text-dark {
  color: var(--dark, #190040) !important;
}

.bg-primary {
  background: var(--primary, #f54952) !important;
}

.bg-secondary {
  background: var(--secondary, #422680) !important;
}

.bg-dark {
  background: var(--dark, #190040) !important;
}

a, a:visited {
  text-decoration: none;
  transition: color 0.2s;
}

a:hover, a:focus {
  text-decoration: underline;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Nunito", "Inter", "Segoe UI", Arial, sans-serif;
  font-weight: 1000;
  margin-bottom: 0.5em;
  line-height: 1.1;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

h4 {
  font-size: 1.2rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 0.9rem;
}

p, ul, ol, li {
  font-family: "Nunito", "Inter", "Segoe UI", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

small {
  font-size: 0.85em;
  color: #888;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  background: rgba(245, 73, 82, 0.3);
  border: 2px solid rgba(245, 73, 82, 0.5);
  color: #fff !important;
  font-weight: 700;
  box-shadow: 0 2px 4px 0 rgba(245, 73, 82, 0.15);
  border-radius: 0.5rem;
}

.progress {
  background-color: #f0eafc;
  border-radius: 0.5rem;
  height: 1.1rem;
  box-shadow: 0 1px 4px 0 rgba(66, 38, 128, 0.07);
}

.progress-bar {
  background-color: var(--primary, #f54952) !important;
  color: #fff;
  font-weight: 700;
  border-radius: 0.5rem;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-button:focus {
  border-color: var(--primary, #f54952) !important;
  box-shadow: none !important;
}

.accordion-button::after {
  -webkit-filter: brightness(0) invert(1);
          filter: brightness(0) invert(1); /* This turns black SVG to white */
}

.accordion-button:not(.collapsed)::after {
  -webkit-filter: none;
          filter: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f54952'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.card {
  border: none !important;
}

input {
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  font-weight: 700;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(66, 38, 128, 0.04);
  transition: background 0.2s;
  padding: 8px 16px;
}

input:focus {
  background: rgba(255, 255, 255, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.9);
  color: var(--secondary, #422680);
  box-shadow: none;
}

input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

input::-moz-placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

input:-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

input::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

input::placeholder {
  color: rgba(255, 255, 255, 0.4) !important;
}

select {
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  font-weight: 700;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(66, 38, 128, 0.04);
  transition: background 0.2s;
  padding: 8px 16px;
  width: 100%;
}

/* Style when focused */
select:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  font-weight: 700;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(66, 38, 128, 0.04);
  transition: background 0.2s;
  padding: 8px 16px;
  width: 100%;
}

/* Style for dropdown options */
/* Style the selected option in dropdown */
select option:checked {
  background-color: rgba(66, 38, 128, 0.4);
  color: #fff;
  font-weight: 700;
  border-radius: 4px;
}

select[multiple] {
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  font-weight: 700;
  border-radius: 0.5rem;
  transition: background 0.2s;
  padding: 8px 16px;
  width: 100%;
  height: auto;
  min-height: 120px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Keep consistent styling on focus */
select[multiple]:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: #fff;
}

/* Keep consistent styling on focus */
select[multiple]:active {
  outline: none;
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: #fff;
}

/* Options inside the multiple select */
select[multiple] option {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-weight: 700;
  padding: 8px;
  border-radius: 4px;
  margin: 2px 0;
}

/* Selected options */
select[multiple] option:checked {
  background-color: rgba(66, 38, 128, 0.6);
  color: #fff;
}

/* Optional: remove the blue highlight on active/focused options in WebKit browsers */
select[multiple] option:focus,
select[multiple] option:active {
  background-color: rgba(66, 38, 128, 0.8) !important;
  color: #fff !important;
}

textarea {
  background: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  font-weight: 700;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(66, 38, 128, 0.04);
  transition: background 0.2s;
  padding: 8px 16px;
  width: 100%;
}

.form-label {
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}

.form-check-input {
  background-color: rgba(255, 255, 255, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.6);
  width: 1.2em;
  height: 1.2em;
  margin-top: 0.15em;
  vertical-align: top;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 4px 8px;
}
.form-check-input:checked {
  background-color: var(--primary, #f54952);
  border-color: var(--primary, #f54952);
}
.form-check-input:focus {
  border-color: var(--primary, #f54952);
  box-shadow: 0 0 0 0.25rem rgba(245, 73, 82, 0.25);
}
.form-check-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.form-range {
  width: 100%;
  height: 8px;
  padding: initial;
  background-color: initial;
  border: none;
  box-shadow: none;
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
}

input[type=range] {
  /* ensure the browser default track is restyled */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 10px;
  border: none;
  width: 100%;
  margin: 0;
  padding: 0;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border-radius: 50%;
  background-color: #f54952;
  border: none;
  cursor: pointer;
  margin-top: 0;
  box-shadow: none;
}
input[type=range]::-moz-range-thumb {
  border-radius: 50%;
  background-color: #f54952;
  border: none;
  cursor: pointer;
  box-shadow: none;
}
input[type=range]::-ms-thumb {
  border-radius: 50%;
  background-color: #f54952;
  border: none;
  cursor: pointer;
  box-shadow: none;
}
input[type=range]:focus {
  outline: none; /* remove default ring */
}
input[type=range]:focus::-webkit-slider-thumb {
  box-shadow: none;
}
input[type=range]:focus::-moz-range-thumb {
  box-shadow: none;
}
input[type=range]:focus::-ms-thumb {
  box-shadow: none;
}

.form-check-label {
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  margin-bottom: 0;
}

.modal-content {
  border: none;
}

.modal-footer {
  border-top: none;
}

.nav-tabs .nav-link:hover {
  color: rgb(255, 255, 255);
}

.pagination-container {
  padding-left: 12px;
  padding-right: 12px;
}

#vocabulary-list-container {
  padding: 12px;
}

.pagination {
  border-radius: 8px;
  --bs-pagination-padding-x: 0.5125rem;
  --bs-pagination-padding-y: 0.625rem;
  --bs-pagination-font-size: 0.9375rem;
  --bs-pagination-color: rgba(254, 254, 254, 0.9984);
  --bs-pagination-bg: rgba(255, 255, 255, 0.1);
  --bs-pagination-border-width: 0px;
  --bs-pagination-border-color: rgba(255, 255, 255, 0.9984);
  --bs-pagination-border-radius: 0.25rem;
  --bs-pagination-hover-color: rgba(254, 254, 254, 0.9984);
  --bs-pagination-hover-bg: rgba(245, 73, 82, 1);
  --bs-pagination-hover-border-color: var(--bs-border-color);
  --bs-pagination-focus-color: rgba(255, 255, 255, 1);
  --bs-pagination-focus-bg: rgba(245, 73, 82, 1);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: rgba(245, 73, 82, 0.08);
  --bs-pagination-active-border-color: rgba(245, 73, 82, 0.08);
  --bs-pagination-disabled-color: rgba(255, 255, 255, 0);
  --bs-pagination-disabled-bg: rgba(255, 255, 255, 0);
  --bs-pagination-disabled-border-color: var(--bs-border-color);
  display: -ms-flexbox;
  display: flex;
  padding-left: 6px;
  padding-right: 6px;
  padding-top: 2px;
  padding-bottom: 2px;
  list-style: none;
  background: rgba(66, 38, 128, 0);
}

.pagination .page-link {
  color: #422680;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 12px;
}

.page-item.active .page-link, .page-item.active .page-link:hover, .page-item.active .page-link:focus, .pagination li.active > a:not(.page-link), .pagination li.active > a:not(.page-link):hover, .pagination li.active > a:not(.page-link):focus {
  font-weight: 1000;
}

.page-item:first-child .page-link {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.page-item:last-child .page-link {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.pagination .page-link:hover {
  color: #fff;
}

.page-item.disabled .page-link {
  color: rgba(255, 255, 255, 0.3);
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0);
  border-color: rgba(0, 0, 0, 0);
}

.page-item {
  border-radius: 12px;
}

.pagination .page-link {
  color: #422680;
}

.pagination .page-item.active .page-link {
  background: rgba(245, 73, 82, 0.4);
  border: 2px solid rgba(245, 73, 82, 0.6);
  color: #fff;
  font-weight: 700;
}

.dt-paging {
  border-radius: 8px;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
      justify-content: center;
  padding: 6px;
  margin-top: 1rem;
  list-style: none;
  background: rgba(66, 38, 128, 0);
}

.dt-paging-button {
  color: #422680 !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 0px solid rgba(255, 255, 255, 0.9984) !important;
  border-radius: 12px !important;
  padding: 0.625rem 0.5125rem !important;
  margin: 2px !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  min-width: 2.5rem !important;
  text-align: center !important;
}

.dt-paging-button:hover {
  color: #fff !important;
  background: rgb(245, 73, 82) !important;
  border-color: rgb(245, 73, 82) !important;
  text-decoration: none !important;
}

.dt-paging-button.current {
  background: rgba(245, 73, 82, 0.4) !important;
  border: 2px solid rgba(245, 73, 82, 0.6) !important;
  color: #fff !important;
  font-weight: 1000 !important;
}

.dt-paging-button.current:hover {
  background: rgba(245, 73, 82, 0.6) !important;
  border: 2px solid rgba(245, 73, 82, 0.8) !important;
}

.dt-paging-button.disabled {
  color: rgba(255, 255, 255, 0.3) !important;
  pointer-events: none !important;
  background-color: rgba(0, 0, 0, 0) !important;
  border-color: rgba(0, 0, 0, 0) !important;
  cursor: not-allowed !important;
  opacity: 0.5 !important;
}

.dt-paging-button.first,
.dt-paging-button.last,
.dt-paging-button.previous,
.dt-paging-button.next {
  font-weight: 700 !important;
  padding: 0.625rem 1rem !important;
}

.dt-paging-button.previous::before {
  content: "« " !important;
}

.dt-paging-button.next::after {
  content: " »" !important;
}

#mobileProfileOffcanvas {
  background-color: var(--dark) !important;
  z-indeX: 2000;
}

.btn:disabled,
.btn.disabled,
.btn[aria-disabled=true] {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed !important;
}

.btn-primary:disabled,
.btn-primary.disabled,
.btn-primary[aria-disabled=true],
.btn-secondary:disabled,
.btn-secondary.disabled,
.btn-secondary[aria-disabled=true],
.btn-dark:disabled,
.btn-dark.disabled,
.btn-dark[aria-disabled=true],
.btn-success:disabled,
.btn-success.disabled,
.btn-success[aria-disabled=true],
.btn-danger:disabled,
.btn-danger.disabled,
.btn-danger[aria-disabled=true] {
  background-color: inherit;
  border-color: inherit;
  color: inherit;
}

.btn-sm {
  padding: 4px 8px;
  font-size: 0.6rem;
}