:root {
  --bs-blue-200: #9ec5fe;
  --bs-blue-light: #9ec5fe;
  --bs-blue-300: #6ea8fe;
  --bs-blue-400: #3d8bfd;
  --bs-blue-500: #0d6efd;
  --bs-blue: #0d6efd;
  --bs-blue-600: #0a58ca;
  --bs-blue-700: #084298;
  --bs-blue-800: #052c65;
  --bs-blue-dark: #052c65;
  --bs-blue-900: #031633;
  --bs-indigo-100: #e0cffc;
  --bs-indigo-200: #c29ffa;
  --bs-indigo-light: #c29ffa;
  --bs-indigo-300: #a370f7;
  --bs-indigo-400: #8540f5;
  --bs-indigo-500: #6610f2;
  --bs-indigo: #6610f2;
  --bs-indigo-600: #520dc2;
  --bs-indigo-700: #3d0a91;
  --bs-indigo-800: #290661;
  --bs-indigo-dark: #290661;
  --bs-indigo-900: #140330;
  --bs-purple-100: #e2d9f3;
  --bs-purple-200: #c5b3e6;
  --bs-purple-light: #c5b3e6;
  --bs-purple-300: #a98eda;
  --bs-purple-400: #8c68cd;
  --bs-purple-500: #6f42c1;
  --bs-purple: #6f42c1;
  --bs-purple-600: #59359a;
  --bs-purple-700: #432874;
  --bs-purple-800: #2c1a4d;
  --bs-purple-dark: #2c1a4d;
  --bs-purple-900: #160d27;
  --bs-pink-100: #f7d6e6;
  --bs-pink-200: #efadce;
  --bs-pink-light: #efadce;
  --bs-pink-300: #e685b5;
  --bs-pink-400: #de5c9d;
  --bs-pink-500: #d63384;
  --bs-pink: #d63384;
  --bs-pink-600: #ab296a;
  --bs-pink-700: #801f4f;
  --bs-pink-800: #561435;
  --bs-pink-dark: #561435;
  --bs-pink-900: #2b0a1a;
  --bs-red-100: #f8d7da;
  --bs-red-200: #f1aeb5;
  --bs-red-light: #f1aeb5;
  --bs-red-300: #ea868f;
  --bs-red-400: #e35d6a;
  --bs-red-500: #dc3545;
  --bs-red: #dc3545;
  --bs-red-600: #b02a37;
  --bs-red-700: #842029;
  --bs-red-800: #58151c;
  --bs-red-dark: #58151c;
  --bs-red-900: #2c0b0e;
  --bs-orange-100: #ffe5d0;
  --bs-orange-200: #fecba1;
  --bs-orange-light: #fecba1;
  --bs-orange-300: #feb272;
  --bs-orange-400: #fd9843;
  --bs-orange-500: #fd7e14;
  --bs-orange: #fd7e14;
  --bs-orange-600: #ca6510;
  --bs-orange-700: #984c0c;
  --bs-orange-800: #653208;
  --bs-orange-dark: #653208;
  --bs-orange-900: #331904;
  --bs-yellow-100: #fff3cd;
  --bs-yellow-200: #ffe69c;
  --bs-yellow-light: #ffe69c;
  --bs-yellow-300: #ffda6a;
  --bs-yellow-400: #ffcd39;
  --bs-yellow-500: #ffc107;
  --bs-yellow: #ffc107;
  --bs-yellow-600: #cc9a06;
  --bs-yellow-700: #997404;
  --bs-yellow-800: #664d03;
  --bs-yellow-dark: #664d03;
  --bs-yellow-900: #332701;
  --bs-green-100: #d1e7dd;
  --bs-green-200: #a3cfbb;
  --bs-green-light: #a3cfbb;
  --bs-green-300: #75b798;
  --bs-green-400: #479f76;
  --bs-green-500: #198754;
  --bs-green: #198754;
  --bs-green-600: #146c43;
  --bs-green-700: #0f5132;
  --bs-green-800: #0a3622;
  --bs-green-dark: #0a3622;
  --bs-green-900: #051b11;
  --bs-teal-100: #d2f4ea;
  --bs-teal-200: #a6e9d5;
  --bs-teal-light: #a6e9d5;
  --bs-teal-300: #79dfc1;
  --bs-teal-400: #4dd4ac;
  --bs-teal-500: #20c997;
  --bs-teal: #20c997;
  --bs-teal-600: #1aa179;
  --bs-teal-700: #13795b;
  --bs-teal-800: #0d503c;
  --bs-teal-dark: #0d503c;
  --bs-teal-900: #06281e;
  --bs-cyan-100: #cff4fc;
  --bs-cyan-200: #9eeaf9;
  --bs-cyan-light: #9eeaf9;
  --bs-cyan-300: #6edff6;
  --bs-cyan-400: #3dd5f3;
  --bs-cyan-500: #0dcaf0;
  --bs-cyan: #0dcaf0;
  --bs-cyan-600: #0aa2c0;
  --bs-cyan-700: #087990;
  --bs-cyan-800: #055160;
  --bs-cyan-dark: #055160;
  --bs-cyan-900: #032830;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-light: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-dark: #343a40;
  --bs-gray-900: #212529;
}

.bg-blue {
  --bs-text-opacity: 1;
  color: var(--bs-blue-900) !important;
  background-color: var(--bs-blue) !important;
}
.bg-indigo {
  --bs-text-opacity: 1;
  color: var(--bs-indigo-900) !important;
  background-color: var(--bs-indigo) !important;
}
.bg-purple {
  --bs-text-opacity: 1;
  color: var(--bs-purple-900) !important;
  background-color: var(--bs-purple) !important;
}
.bg-pink {
  --bs-text-opacity: 1;
  color: var(--bs-pink-900) !important;
  background-color: var(--bs-pink) !important;
}
.bg-red {
  --bs-text-opacity: 1;
  color: var(--bs-red-900) !important;
  background-color: var(--bs-red) !important;
}
.bg-orange {
  --bs-text-opacity: 1;
  color: var(--bs-orange-900) !important;
  background-color: var(--bs-orange) !important;
}
.bg-yellow {
  --bs-text-opacity: 1;
  color: var(--bs-yellow-900) !important;
  background-color: var(--bs-yellow) !important;
}
.bg-yellow-700 {
  background-color: var(--bs-yellow-700) !important;
}
.bg-green {
  --bs-text-opacity: 1;
  color: var(--bs-green-900) !important;
  background-color: var(--bs-green) !important;
}
.bg-green-700 {
  background-color: var(--bs-green-700) !important;
}
.bg-teal {
  --bs-text-opacity: 1;
  color: var(--bs-teal-900) !important;
  background-color: var(--bs-teal) !important;
}
.bg-cyan {
  --bs-text-opacity: 1;
  color: var(--bs-cyan-900) !important;
  background-color: var(--bs-cyan) !important;
}
.bg-gray {
  --bs-text-opacity: 1;
  color: var(--bs-gray-900) !important;
  background-color: var(--bs-gray) !important;
}

@font-face {
  font-family: starjedi; /* set name */
  src: url(../resources/Starjedi.ttf); /* url of the font */
}

.main-container {
  margin-left: 66px;
  margin-top: 76px;
}

.left-sidebar-nav {
  position: fixed;
  top: 76px;
  left: 0;
  height: 100vh;
  align-items: flex-start;
}

.left-sidebar-nav a:hover {
  transform: scale(1.12);
  filter: drop-shadow(0 0 0.4em var(--bs-red-700));
  transition: transform 0.15s ease, filter 0.15s ease;
}

.helper {
  padding-bottom: 76px;
}

.selected_character {
  filter: drop-shadow(0 0 0.3em var(--bs-red-700));
  box-shadow: 0 0 0.5em var(--bs-red-700);
  border-color: var(--bs-red-700) !important;
  opacity: 100% !important;
}

.not_selected_character {
  opacity: 50%;
}

.not_selected_character:hover {
  opacity: 100%;
}

.navbar-toggler {
  border: 0;
}

.navbar-toggler:hover,
.navbar-toggler:active,
.navbar-toggler:focus,
.navbar-toggler:focus-visible,
.navbar-toggler[aria-expanded="true"] {
  border: 0;
  box-shadow: none;
  outline: none;
}

.navbar-toggler .nav-toggle-icon-fill {
  display: none;
}

.navbar-toggler:hover .nav-toggle-icon-outline,
.navbar-toggler:focus-visible .nav-toggle-icon-outline {
  display: none;
}

.navbar-toggler:hover .nav-toggle-icon-fill,
.navbar-toggler:focus-visible .nav-toggle-icon-fill {
  display: inline-block;
}


.bonus-roll-label {
  transform: scale(0.85);
  color: rgba(var(--bs-body-color-rgb), 0.65);
}

.left-sidebar-nav .container-fluid {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#regles #navbar-helper .nav-link.active,
#regles #navbar-helper .show > .nav-link {
  background-color: var(--bs-light-bg-subtle);
  color: var(--bs-body-color);
}

.progress-controls {
  --progress-control-size: var(--bs-progress-height, 1rem);
  --progress-value-optical-shift: -0.07em;
}

.progress-controls-400 {
  width: 400px;
}

.progress-controls .progress {
  height: var(--progress-control-size);
}

.progress-controls .progress-stat-trigger {
  display: inline-block;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}

.progress-controls .progress-stat-trigger:hover,
.progress-controls .progress-stat-trigger:focus-visible {
  transform: scale(1.12);
  filter: drop-shadow(0 0 0.35rem currentColor);
}

@keyframes luck-click-pop {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 currentColor);
  }
  45% {
    transform: scale(1.28);
    filter: drop-shadow(0 0 0.45rem currentColor);
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 currentColor);
  }
}

.progress-controls .progress-stat-trigger.luck-click-feedback {
  animation: luck-click-pop 0.24s ease-out;
}

.progress-control-btn {
  width: var(--progress-control-size);
  height: var(--progress-control-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--progress-control-size);
  line-height: 1;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  transition: color 0.10s ease;
  text-decoration: none;
}

.progress-icon-fill {
  display: none;
}

.progress-control-btn:hover,
.progress-control-btn:focus-visible {
  color: var(--bs-secondary-text-emphasis) !important;
}

.progress-control-btn:active .progress-icon-outline {
  display: none;
}

.progress-control-btn:active .progress-icon-fill {
  display: inline-block;
}

.log-entry-icon {
  line-height: 1;
  transform: translateY(-0.03rem);
}

.log-entry-emoji {
  line-height: 1;
  transform: translateY(-0.03rem);
}

.glow {
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    filter: drop-shadow(0 0 2px var(--bs-green));
  }
  to {
    filter: drop-shadow(0 0 10px var(--bs-green));
  }
}

/* Bootstrap enhancement */

.fs-0 {
  font-size: 3.5rem !important;
}

.spinner-border-xl {
  width: 3.5rem;
  height: 3.5rem;
  border-width: 0.65em;
  --bs-spinner-animation-speed: 0.75s;
}

.mb-n1 {
  margin-bottom: -0.25rem !important;
}

.mb-n2 {
  margin-bottom: -0.5rem !important;
}

.mb-n3 {
  margin-bottom: -1rem !important;
}

.mb-n4 {
  margin-bottom: -1.5rem !important;
}

.mb-n5 {
  margin-bottom: -3rem !important;
}

.mt-n1 {
  margin-top: -0.25rem !important;
}

.mt-n2 {
  margin-top: -0.5rem !important;
}

.mt-n3 {
  margin-top: -1rem !important;
}

.mt-n4 {
  margin-top: -1.5rem !important;
}

.mt-n5 {
  margin-top: -3rem !important;
}

.w-15 {
  width: 15% !important;
}

.bubble-left-arrow {
  position: relative;
}

.bubble-left-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.55rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 0.4rem solid transparent;
  border-bottom: 0.4rem solid transparent;
  border-right: 0.55rem solid var(--bs-alert-border-color);
}

.bubble-left-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -0.45rem;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 0.35rem solid transparent;
  border-bottom: 0.35rem solid transparent;
  border-right: 0.45rem solid var(--bs-alert-bg);
}

/* Bootstrap Override */

.card-img-top {
    height: 200px;
    object-fit: cover;
}