/* ************************************************************* */
/*
/* Charadex CSS Styling
/*
/* ************************************************************* */
/* You should visit any section with [!!!] and adjust their 
/* settings. You can visit [***] for optional adjustments.
/*
/* INDEX
/*   1. Basic Variables       [!!!]
/*   2. Color Calculations
/*   3. Bootstrap Overrides   [!!!]
/*   4. Charadex Styles       [!!!]
/*   5. Tweaks
/*
/* ************************************************************* */
/* Some notes about CSS:
/*   - CSS reads from top to bottom. If something is re-defined
/*     further below, that definition takes precedence.
/*
/*   - The more specific a definition is, the more important it is.
/*
/*   - You can use !important to prevent a definition from being
/*     overridden by other classes.
/*
/*   - "bs" is used as a prefix for Boostrap. "cd" is used as
/*     a prefix for charadex.
/*
/* ************************************************************* */

:root {
/* ************************************************************* */
/*                      1. Basic Variables
/* ************************************************************* */
/* These variables override bootstrap's color and styling.
/*
/* ************************************************************* */
/* THEME colors for your site */
/* ------------------------------------------------------------- */
/* RGB variables use RGB values. You can use a color picker like */
/* https://www.w3schools.com/colors/colors_picker.asp            */
/* to select RGB values.                                         */

  --bs-primary-rgb: 187, 95, 19;
  --bs-secondary-rgb: 108, 117, 125;
  
/* may want to flip these if going dark mode */
  --bs-black-rgb: 0, 0, 0;
  --bs-white-rgb: 255, 255, 255;

/* greys range from the first to the second */
  --bs-gray: #afb6bd;
  --bs-gray-dark: #343a40;

/* colors used for alerts, cards, buttons, etc */
  --bs-success-rgb: 25, 135, 84; /* for success, approve, save, etc */
  --bs-info-rgb: 13, 202, 240;   /* for info popups and tips */
  --bs-warning-rgb: 255, 193, 7; /* for warnings and alerts */
  --bs-danger-rgb: 220, 53, 69;  /* for extreme warnings, delete, etc */
  --bs-light-rgb: 248, 249, 250; /* if you want light text or cards */
  --bs-dark-rgb: 33, 37, 41;     /* if you want dark text or cards */

/* ------------------------------------------------------------- */
/* Fonts, Weights, Sizes
/* ------------------------------------------------------------- */
  --cd-font-header: "Comfortaa";
  --cd-font-body: "Montserrat";
  --cd-font-monospace: SFMono-Regular;
  --cd-font-serif: "Domine";
  --cd-font-decorative: "Permanent Marker";

  --bs-body-font-size: 10pt;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;

  --cd-header-max-size: 1.4rem; /* h1 size */
  --cd-header-min-size: 1.1rem; /* h6 size */
  --cd-header-transform: uppercase; /* capitalize, lowercase, none */

/* ------------------------------------------------------------- */
/* Misc Colors                                                   */
/* ------------------------------------------------------------- */
/* technically you can change these colors but bootstrap doesn't */
/* really use em                                                 */
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;

/* ************************************************************* */
/*                    2. Color Calculations
/* ************************************************************* */
/* 
/* These bootstrap variables are calculated based on the above and
/* do not need to be adjusted... unless you have specific color needs
/* such as tweaking contrast or specifying hues.
/*
/* You can ignore this section, at least to start.
/* 
/* ************************************************************* */
/* Colors
/* ------------------------------------------------------------- */
  --bs-primary: rgb(var(--bs-primary-rgb));
  --bs-secondary: rgb(var(--bs-secondary-rgb));
  --bs-black: rgb(var(--bs-black-rgb));
  --bs-white: rgb(var(--bs-white-rgb));
  --bs-success: rgb(var(--bs-success-rgb));
  --bs-info: rgb(var(--bs-info-rgb));
  --bs-warning: rgb(var(--bs-warning-rgb));
  --bs-danger: rgb(var(--bs-danger-rgb));
  --bs-light: rgb(var(--bs-light-rgb));
  --bs-dark: rgb(var(--bs-dark-rgb));

  --bs-gray-100: color-mix(in srgb,var(--bs-gray),var(--bs-gray-dark) 10%);
  --bs-gray-200: color-mix(in srgb,var(--bs-gray),var(--bs-gray-dark) 20%);
  --bs-gray-300: color-mix(in srgb,var(--bs-gray),var(--bs-gray-dark) 30%);
  --bs-gray-400: color-mix(in srgb,var(--bs-gray),var(--bs-gray-dark) 40%);
  --bs-gray-500: color-mix(in srgb,var(--bs-gray),var(--bs-gray-dark) 50%);
  --bs-gray-600: color-mix(in srgb,var(--bs-gray),var(--bs-gray-dark) 60%);
  --bs-gray-700: color-mix(in srgb,var(--bs-gray),var(--bs-gray-dark) 70%);
  --bs-gray-800: color-mix(in srgb,var(--bs-gray),var(--bs-gray-dark) 80%);
  --bs-gray-900: color-mix(in srgb,var(--bs-gray),var(--bs-gray-dark) 90%);

  --bs-primary-text-emphasis: color-mix(in srgb,var(--bs-primary),var(--bs-black) 50%);
  --bs-secondary-text-emphasis: color-mix(in srgb,var(--bs-secondary),var(--bs-black) 50%);
  --bs-success-text-emphasis: color-mix(in srgb,var(--bs-success),var(--bs-black) 50%);
  --bs-info-text-emphasis: color-mix(in srgb,var(--bs-info),var(--bs-black) 50%);
  --bs-warning-text-emphasis: color-mix(in srgb,var(--bs-warning),var(--bs-black) 50%);
  --bs-danger-text-emphasis: color-mix(in srgb,var(--bs-danger),var(--bs-black) 50%);
  --bs-light-text-emphasis: color-mix(in srgb,var(--bs-light),var(--bs-black) 50%);
  --bs-dark-text-emphasis: color-mix(in srgb,var(--bs-dark),var(--bs-black) 50%);

  --bs-primary-bg-subtle: color-mix(in srgb,var(--bs-primary),var(--bs-white) 90%);
  --bs-secondary-bg-subtle: color-mix(in srgb,var(--bs-secondary),var(--bs-white) 90%);
  --bs-success-bg-subtle: color-mix(in srgb,var(--bs-success),var(--bs-white) 90%);
  --bs-info-bg-subtle: color-mix(in srgb,var(--bs-info),var(--bs-white) 90%);
  --bs-warning-bg-subtle: color-mix(in srgb,var(--bs-warning),var(--bs-white) 90%);
  --bs-danger-bg-subtle: color-mix(in srgb,var(--bs-danger),var(--bs-white) 90%);
  --bs-light-bg-subtle: color-mix(in srgb,var(--bs-light),var(--bs-white) 90%);
  --bs-dark-bg-subtle: color-mix(in srgb,var(--bs-dark),var(--bs-white) 90%);

  --bs-primary-border-subtle: color-mix(in srgb,var(--bs-primary),var(--bs-white) 40%);
  --bs-secondary-border-subtle: color-mix(in srgb,var(--bs-secondary),var(--bs-white) 40%);
  --bs-success-border-subtle: color-mix(in srgb,var(--bs-success),var(--bs-white) 40%);
  --bs-info-border-subtle: color-mix(in srgb,var(--bs-info),var(--bs-white) 40%);
  --bs-warning-border-subtle: color-mix(in srgb,var(--bs-warning),var(--bs-white) 40%);
  --bs-danger-border-subtle: color-mix(in srgb,var(--bs-danger),var(--bs-white) 40%);
  --bs-light-border-subtle: color-mix(in srgb,var(--bs-light),var(--bs-white) 40%);
  --bs-dark-border-subtle: color-mix(in srgb,var(--bs-dark),var(--bs-white) 40%);

  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));

/* ------------------------------------------------------------- */
/* Fonts
/* ------------------------------------------------------------- */
/* Fonts will default to the first available. Universal fonts    */
/* are listed just in case.                                      */
  --bs-font-sans-serif:var(--cd-font-body), 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: var(--cd-font-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-body-font-family: var(--bs-font-sans-serif);

/* ------------------------------------------------------------- */
/* Headers
/* ------------------------------------------------------------- */
/* Calculating header increment */
  --cd-header-inc-size: calc((var(--cd-header-max-size) - var(--cd-header-min-size)) / 4);
}
/* Set header sizes */
h1 { font-size: var(--cd-header-max-size); }
h2 { font-size: calc(var(--cd-header-min-size) + var(--cd-header-inc-size) * 4); }
h3 { font-size: calc(var(--cd-header-min-size) + var(--cd-header-inc-size) * 3); }
h4 { font-size: calc(var(--cd-header-min-size) + var(--cd-header-inc-size) * 2); }
h5 { font-size: calc(var(--cd-header-min-size) + var(--cd-header-inc-size) * 1); }
h6 { font-size: var(--cd-header-min-size); }

/* ------------------------------------------------------------- */
/* Buttons
/* ------------------------------------------------------------- */
.btn-primary, .btn-outline-primary {
  --cd-btn-text-color: var(--bs-white);
  --cd-btn-class-color: var(--bs-primary);
  --cd-btn-class-color-rgb: var(--bs-primary-rgb);
}
.btn-secondary, .btn-outline-secondary {
  --cd-btn-text-color: var(--bs-white);
  --cd-btn-class-color: var(--bs-secondary);
  --cd-btn-class-color-rgb: var(--bs-secondary-rgb);
}
.btn-success, .btn-outline-success {
  --cd-btn-text-color: var(--bs-white);
  --cd-btn-class-color: var(--bs-success);
  --cd-btn-class-color-rgb: var(--bs-success-rgb);
}
.btn-info, .btn-outline-info {
  --cd-btn-text-color: var(--bs-black);
  --cd-btn-class-color: var(--bs-info);
  --cd-btn-class-color-rgb: var(--bs-info-rgb);
}
.btn-warning, .btn-outline-warning {
  --cd-btn-text-color: var(--bs-black);
  --cd-btn-class-color: var(--bs-warning);
  --cd-btn-class-color-rgb: var(--bs-warning-rgb);
}
.btn-danger, .btn-outline-danger {
  --cd-btn-text-color: var(--bs-white);
  --cd-btn-class-color: var(--bs-danger);
  --cd-btn-class-color-rgb: var(--bs-danger-rgb);
}
.btn-light, .btn-outline-light {
  --cd-btn-text-color: var(--bs-black);
  --cd-btn-class-color: var(--bs-light);
  --cd-btn-class-color-rgb: var(--bs-light-rgb);
}
.btn-dark, .btn-outline-dark {
  --cd-btn-text-color: var(--bs-white);
  --cd-btn-class-color: var(--bs-dark);
  --cd-btn-class-color-rgb: var(--bs-dark-rgb);
}
/* Overriding bootstrap colors for buttons */
.btn {
  --bs-btn-font-size: var(--bs-body-font-size);
  --bs-btn-color: var(--cd-btn-text-color);
  --bs-btn-bg: var(--cd-btn-class-color);
  --bs-btn-border-color: var(--cd-btn-class-color);

  --bs-btn-focus-shadow-rgb: var(--cd-btn-class-color-rgb);
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-hover-bg: color-mix(in srgb,var(--bs-btn-bg),var(--bs-white) 10%);
  --bs-btn-hover-border-color: color-mix(in srgb,var(--bs-btn-bg),var(--bs-white) 5%);

  --bs-btn-active-color: var(--bs-btn-color);
  --bs-btn-active-bg: color-mix(in srgb,var(--bs-btn-bg),var(--bs-black) 10%);
  --bs-btn-active-border-color: color-mix(in srgb,var(--bs-btn-bg),var(--bs-black) 15%);

  --bs-btn-disabled-color: var(--bs-btn-color);
  --bs-btn-disabled-bg: color-mix(in srgb,var(--bs-btn-bg),var(--bs-white) 10%);
  --bs-btn-disabled-border-color: color-mix(in srgb,var(--bs-btn-bg),var(--bs-white) 5%);
}
/* special rules for outline buttons */
.btn-outline-primary, .btn-outline-secondary, 
.btn-outline-success, .btn-outline-info, 
.btn-outline-warning, .btn-outline-danger, 
.btn-outline-light, .btn-outline-dark {
  --bs-btn-color: var(--cd-btn-class-color);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--cd-btn-class-color);

  --bs-btn-focus-shadow-rgb: var(--cd-btn-class-color-rgb);
  --bs-btn-hover-color: var(--cd-btn-text-color);
  --bs-btn-hover-bg: var(--cd-btn-class-color);
  --bs-btn-hover-border-color: var(--cd-btn-class-color);

  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: color-mix(in srgb,var(--bs-btn-hover-bg),var(--bs-black) 10%);
  --bs-btn-active-border-color: color-mix(in srgb,var(--bs-btn-hover-bg),var(--bs-black) 15%);

  --bs-btn-disabled-color: color-mix(in srgb,var(--bs-btn-color),var(--bs-white) 5%);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: color-mix(in srgb,var(--bs-btn-border-color),var(--bs-white) 5%);
}

/* ------------------------------------------------------------- */
/* misc fixes
/* ------------------------------------------------------------- */
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  --bs-nav-pills-link-active-bg: var(--bs-primary);
}
.progress, .progress-stacked {
  --bs-progress-bar-bg: var(--bs-primary);
}

:root {
/* ************************************************************* */
/*                 3. Bootstrap Overrides
/* ************************************************************* */
/* Tweak these to further adjust bootstrap CSS
/*
/* The reason these are below the calculations is because
/* they rely on the variables defined above in some cases.
/*
/* ************************************************************* */
/* body text
/* ------------------------------------------------------------- */
  --bs-body-color: var(--bs-dark);
  --bs-body-color-rgb: var(--bs-dark-rgb);
  --bs-body-bg: var(--bs-white);
  --bs-body-bg-rgb: var(--bs-white-rgb);

  --bs-code-color: #d63384;
  --bs-highlight-bg: #fff3cd;

/* ------------------------------------------------------------- */
/* border styles
/* ------------------------------------------------------------- */
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);

  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-2xl: 2rem;
  --bs-border-radius-pill: 50rem;

/* ------------------------------------------------------------- */
/* link and text
/* ------------------------------------------------------------- */
  --bs-link-color: var(--bs-primary);
  --bs-link-color-rgb: var(--bs-primary-rgb);
  --bs-link-hover-color: var(--bs-secondary);
  --bs-link-hover-color-rgb: var(--bs-secondary-rgb);
}

  /* dropdown links */
.dropdown-menu {
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-color: var(--bs-primary);
  --bs-dropdown-link-hover-bg: var(--bs-primary-bg-subtle);
  --bs-dropdown-link-active-color: var(--bs-white);
  --bs-dropdown-link-active-bg: var(--bs-primary);
  --bs-dropdown-link-disabled-color: var(--bs-tertiary-color);
}

/* ************************************************************* */
/*                       4. Charadex Styles
/* ************************************************************* */
/* You can further tweak Charadex CSS styles here.
/*
/* ************************************************************* */
/* Global
/* ------------------------------------------------------------- */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;

/* ------------------------------------------------------------- */
/* Main Background
/* ------------------------------------------------------------- */
  background-color: var(--bs-light);
  background-image: url("/charadex-rp/assets/bg-image.png");
  background-position: center top;
  background-size: auto;
  background-repeat: repeat;
}

/* ------------------------------------------------------------- */
/* Category Badges
/* ------------------------------------------------------------- */
/* Character categories appear as "badges" in listings.
/* In addition to '.bg-all', you want one for each category in the
/* format of '.bg-[categoryname]' with all lowercase, no spaces.
/* For example, if "Good Guys" is the category name,
/* '.bg-goodguys' is the badge name.
/* ------------------------------------------------------------- */
.bg-all {
  background-color: var(--bs-secondary) !important;
  color: var(--bs-white) !important;
}

.bg-one {
  background-color: #143c81 !important;
  color: #ffffff !important;
}
.bg-two {
  background-color: #801a1a !important;
  color: #ffffff !important;
}
.bg-three {
  background-color: #1a7a1e !important;
  color: #ffffff !important;
}
.bg-four {
  background-color: #9ab2df !important;
  color: #252525 !important;
}
.bg-five {
  background-color: #531a94 !important;
  color: #ffffff !important;
}

/* Pronoun badges work the same...! */
.bg-sheher {
  background-color: #801a1a !important;
  color: #ffffff !important;
}
.bg-hehim {
  background-color: #143c81 !important;
  color: #ffffff !important;
}
.bg-itits {
  background-color: #531a94 !important;
  color: #ffffff !important;
}
.bg-theythem {
  background-color: #1a7a1e !important;
  color: #ffffff !important;
}
.bg-other {
  background-color: #9ab2df !important;
  color: #252525 !important;
}

/* ------------------------------------------------------------- */
/* Header and Footer
/* ------------------------------------------------------------- */
#header {
  background-color: var(--bs-light);
  margin-bottom: 1rem;
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-light-bg-subtle);
}

#footer {
  background-color: transparent;
  color: var(--bs-gray);
  margin-top: 1em;
  margin-bottom: 1em;
}

/* ------------------------------------------------------------- */
/* Scrollbar
/* ------------------------------------------------------------- */
@media (min-width: 992px) {
  body::-webkit-scrollbar-track {
    background-color: rgba(var(--bs-light), 0.2);
    border-width: 0px !important;
  }

  body::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  body::-webkit-scrollbar-thumb {
    background-color: var(--cd-primary-color);
  }

  body::-webkit-scrollbar-corner,
  body::-webkit-resizer {
    background-color: var(--cd-border-color);
  }
}

/* ------------------------------------------------------------- */
/* Inactive field
/* ------------------------------------------------------------- */
/* Adds a lockpad to 'inactive' character fields marked FALSE    */
[data-cd-bool="false"] {
  opacity: .5;
}
[data-cd-bool="false"]::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f023";
  margin-right: 0.3rem;
}

/* ------------------------------------------------------------- */
/* Containers
/* ------------------------------------------------------------- */
#main-container {
  padding: 1rem;
  -ms-flex: 1 1 auto !important;
  flex: 1 1 auto !important;
}

#main-card {
  overflow: scroll;
}

@media (min-width: 768px) {
  #main-container {
    padding: 0rem 0.5rem;
    height: 62vh;
  }

  #main-card {
    padding: 1rem 7rem;
  }
}
/* Small container for more compact view */
.container {
  max-width: 950px !important;
}

/* ------------------------------------------------------------- */
/* Navbar
/* ------------------------------------------------------------- */
.navbar {
  font-family: var(--cd-font-header);
  text-transform: var(--cd-header-transform);
  z-index: 2000;
}

/* Navbar "Brand" aka title/logo */
.navbar .navbar-brand {
  color: var(--bs-primary);
  font-size: var(--cd-header-max-size);
  font-weight: bold;
  transition: color 0.2s ease-in-out;
}

.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color: var(--bs-secondary);
}

@media (min-width: 768px) {
  .navbar .navbar-brand {
    font-size: calc(1.4rem + 1.5vw);
  }
}

/* Navbar Links */
.navbar .navbar-nav .nav-link {
  color: var(--bs-link-color);
  font-size: 1.5em;
  font-weight: bold;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link:focus {
  color: var(--bs-link-hover-color);
}

.navbar .navbar-nav .nav-link.disabled {
  color: var(--bs-tertiary-color) ;
}

.nav .nav-item {
  margin-bottom: 0 !important;
  padding-left: 0 !important;
}

/* Navbar Dropdowns */
.dropdown-menu {
  color: var(--bs-link-color) !important;
  background-color: var(--bs-body-bg) !important;
  border: var(--bs-border-color) var(--bs-border-style) var(--bs-border-width);
  border-radius: var(--bs-border-radius) !important;
}

.dropdown-menu .dropdown-header {
  color: var(--bs-body-color) !important;
}

.dropdown-item, .dropdown-menu .nav-item {
  color: var(--bs-body-color) !important;
  transition: color 0.2s ease-in-out;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active,
.dropdown-item.selected,
.dropdown-menu .nav-item:hover,
.dropdown-menu .nav-item:focus,
.dropdown-menu .nav-item:active {
  color: var(--bs-primary) !important;
}

.dropdown-menu .nav-item .nav-link {
  font-size: 1em;
  padding-left: 1em;
}

.navbar .dropdown-divider {
  border-top: var(--bs-border-color) var(--bs-border-style) var(--bs-border-width) !important;
  width: 100%;
  padding: 0;
}

/* ------------------------------------------------------------- */
/* Various Text Styling
/* ------------------------------------------------------------- */
blockquote {
  color: var(--bs-secondary);
  border-left: calc(var(--bs-border-width)*2) var(--bs-border-style) var(--bs-border-color);
  margin: 0 0 1rem;
  padding: 0 0 0 1em;
}

.text-justify {
  text-align: justify !important;
}

/* Headers */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--cd-font-header);
  font-weight: bold;
  text-transform: var(--cd-header-transform);
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  text-decoration: none; /* remove header url underline */
}

.span-header { /* in-line 'header' */
  font-family: var(--cd-font-header);
  font-weight: bold;
  text-transform: var(--cd-header-transform);
}

.subtitle {
  font-family: var(--cd-fond-header);
  font-weight: bold;
  color: var(--bs-gray);
  font-size: var(--cd-header-min-size);
  text-align: center;
  margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------- */
/* Bullets
/* ------------------------------------------------------------- */
ul {
  list-style-type: "✦";
}
ul li::marker {
  color: var(--bs-secondary) !important;
}

ol li::marker {
  color: var(--bs-primary);
  font-family: var(--cd-font-header);
}

#charadex-profile ul li, #charadex-profile ol li,
#main-card ul li, #main-card ol li {
  margin-bottom: 0.5em;
  padding-left: 0.5em;
}

/* ------------------------------------------------------------- */
/* Tooltips
/* ------------------------------------------------------------- */
.tooltip {
  z-index: 10000 !important;
}
.tooltip.show {
  opacity: 1 !important;
}

.cd-tooltip {
  /* only applies to tooltips with data-bs-custom-class="cd-tooltip" */
  --bs-tooltip-bg: var(--bs-primary);
  --bs-tooltip-color: var(--bs-white);
}

/* ------------------------------------------------------------- */
/* to Top & Bottom
/* ------------------------------------------------------------- */
/* These buttons are used on the character profile page          */
.to-top {
  right: calc((100vw - 950px) / 2 - 99px);
  top: 45%;
  width: 100px;
}
.to-bottom {
  right: calc((100vw - 950px) / 2 - 99px);
  bottom: 45%;
  width: 100px;
}

/* ------------------------------------------------------------- */
/* Loading
/* ------------------------------------------------------------- */
/* Spinner icon */
.loading {
  margin-top: 50vh;
  width: 100%;
  height: 100vh;
  text-align: center;
  position: absolute;
}
.loading.inactive {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Fades container in on load so its not as jarring */
.softload {
  opacity: 0;
}
.softload.active {
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* Specifically for the body */
#charadex-body {
  display: none;
}
#charadex-body.active {
  display: block;
}

/* ------------------------------------------------------------- */
/* Hero images
/* ------------------------------------------------------------- */
.cd-hero-title {
  color: var(--bs-white);
  text-shadow: 0px 0px 3px var(--bs-black);
  background-color: var(--bs-secondary);
  background-position: center;
  background-size: cover;
  border-radius: var(--bs-border-radius);
  font-family: var(--cd-font-header);
  text-transform: var(--cd-header-transform);
  text-align: center;
  font-weight: 800;
  font-size: calc(var(--cd-header-min-size) + var(--cd-header-inc-size) * 3);
  line-height: 1em;
  padding: 1em;
}
@media (min-width: 768px) {
  .cd-hero-title {
    letter-spacing: 2px;
  }
}

/* ************************************************************* */
/*                        5. Tweaks
/* ************************************************************* */
/* Adjustments to things that probably don't need changing
/* unless they're really screwing with your styles.
/*
/* ************************************************************* */
img {
  image-rendering: -webkit-optimize-contrast;
}

.img-fluid {
  object-fit: contain;
  max-height: 600px;
}

/* ------------------------------------------------------------- */
/* Pagination
/* ------------------------------------------------------------- */
.page-link {
  border-width: var(--bs-border-width) !important;
  border-style: var(--bs-border-style) !important;
  transition: color 0.2s ease-in-out, 
              background-color 0.2s ease-in-out,
              border 0.2s ease-in-out;
}

.page-link,
.page-item.disabled .page-link {
  color: var(--bs-primary-text-emphasis) !important;
  background-color: var(--bs-primary-bg-subtle) !important;
  border-color: var(--bs-primary-border-subtle) !important;
}

.page-item.active .page-link,
.page-link:hover,
.page-link:focus,
.page-link:active {
  color: var(--bs-white) !important;
  background-color: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
}

/* Adjusts pointer behavior on buttons */
.page-link, .btn-prev, .btn-next {
  cursor: pointer;
  user-select: none;
}

/* ------------------------------------------------------------- */
/* Field labels
/* ------------------------------------------------------------- */
label {
  color: var(--bs-link-color);
  font-family: var(--cd-font-header);
  font-weight: bold;
  text-transform: var(--cd-header-transform);
}

/* ------------------------------------------------------------- */
/* Chee's Tweaks
/* ------------------------------------------------------------- */
/* Remove box shadow */
button:focus,
.page-link:focus,
.form-control:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Remove margin from last paragraphs */
p:last-child {
  margin-bottom: 0 !important;
}

/* ------------------------------------------------------------- */
/* overflow and spacing for content boxes
/* ------------------------------------------------------------- */
#gallery-card {
  overflow: scroll;
}
@media (min-width: 768px) {
  #gallery-card {
    margin: .5rem 1rem;
  }
}

#profile-card .card-body {
  overflow: visible;
}
@media (min-width: 768px) {
  #profile-card .card-body {
  overflow: scroll;
  }
}

@media (min-width: 768px) {
  .prompt-body,
  .lore-body,
  .item-body {
    padding: 1rem 7rem;
  }
}

.cd-profile-image-container > img {
  max-height: 400px;
}

/* Fixes unique header covering text */
.z-1 {
  z-index: 1;
}

/* ------------------------------------------------------------- */
/* Gallery lists
/* ------------------------------------------------------------- */
#charadex-gallery .cd-gallery-card {
  aspect-ratio: 1/1;
}
#charadex-gallery .list .card-header,
#prompt-gallery .list .card-header,
#player-gallery .list .card-header,
#item-gallery .list .card-header {
  padding: .5em;
}
#charadex-gallery .list .card-header a,
#prompt-gallery .list .card-header a,
#player-gallery .list .card-header a,
#item-gallery .list .card-header a {
  text-decoration: none;
}
#charadex-gallery .list .card-body img,
#prompt-gallery .list .card-body img,
#player-gallery .list .card-body img,
#item-gallery .list .card-body img {
  max-height: 200px;
}