body {

  /* ============================================================= */
  /*
  /* Main Styles
  /*
  /* ============================================================= */
  /* 
  /* This only styles the elements shown on the page.
  /* 
  /* Some CSS knowledge is going to be needed to style these
  /* elements further. If you're just looking for a swatch and
  /* font swap, then you'll only need to edit the variables below.
  /*
  /* ============================================================= */
  /* Primary Color
  ================================================================ */
  --cd-primary-color: #20254f;
  --cd-primary-text-color: #fff;

  /* ============================================================= */
  /* Secondary Color
  ================================================================ */
  --cd-secondary-color: #939799;
  --cd-secondary-text-color: #fff;

  /* ============================================================= */
  /* Backgrounds
  ================================================================ */
  --cd-body-background-color: #20254f;
  --cd-content-background-color: #eebed2;
  --cd-faded-background-color: #20254f;

  /* Background Extras */
  --cd-body-background-image: url();

  /* ============================================================= */
  /* Text
  ================================================================ */
  --cd-body-text-color: #20254f;
  --cd-faded-text-color: #20254f;

  /* ============================================================= */
  /* Borders
  ================================================================ */
  --cd-border-color: rgba(0, 0, 0, 0.125);
  --cd-border-width: 1px;
  --cd-border-style: solid;
  --cd-border-radius: 1rem;

  /* ============================================================= */
  /* Navbar
  ================================================================ */
  --cd-navbar-background-color: #FFF;
  --cd-navbar-brand-color: var(--cd-primary-color);
  --cd-navbar-brand-color-hover: var(--cd-secondary-color);
  --cd-navbar-text-color: var(--cd-content-background-color);
  --cd-navbar-link-color: var(--cd-navbar-text-color);
  --cd-navbar-link-color-hover: var(--cd-primary-color);
  --cd-navbar-font-family: var(--cd-header-font-family);

  /* ============================================================= */
  /* Main Fonts
  ================================================================ */
  --cd-body-font-family: 'Montserrat', sans-serif;
  --cd-header-font-family: 'Comfortaa', sans-serif;
  
  /* ============================================================= */
  /* Rarities
  ================================================================ */

  --cd-rarity-common-bg: #d58353;
  --cd-rarity-common-txt: #fcf4ed;

  --cd-rarity-uncommon-bg: #e0bb68;
  --cd-rarity-uncommon-txt: var(--cd-rarity-common-txt);
  
  --cd-rarity-rare-bg: #97b34e;
  --cd-rarity-rare-txt: var(--cd-rarity-common-txt);

  --cd-rarity-veryrare-bg: #548b71;
  --cd-rarity-veryrare-txt: var(--cd-rarity-common-txt);

  /* Legendary & Mythic */
  --cd-rarity-legendary-bg: #5a473e;
  --cd-rarity-legendary-txt: var(--cd-rarity-common-txt);


  /* ============================================================= */
  /*
  /* Optional Styles
  /* These are just for extra easy styling
  /*
  /* ============================================================= */
  /* Navbar Dropdown 
  ================================================================ */

  /* Background */
  --cd-navbar-dropdown-background-color: var(--cd-navbar-background-color);
  --cd-navbar-dropdown-background-hover: var(--cd-primary-color);

  /* Link/Text */
  --cd-navbar-dropdown-link-color: var(--cd-navbar-link-color);
  --cd-navbar-dropdown-link-color-hover: var(--cd-primary-text-color);

  /* Divider */
  --cd-navbar-dropdown-divider: rgba(255, 255, 255, .12);
  --cd-navbar-dropdown-border-radius: 0 0 var(--cd-border-radius) var(--cd-border-radius);


  /* ============================================================= */
  /* Footer
  ================================================================ */

  /* Background */
  --cd-footer-background-color: var(--cd-navbar-background-color);

  /* Link/Text */
  --cd-footer-text-color: var(--cd-navbar-text-color);
  --cd-footer-link-color: var(--cd-navbar-link-color);
  --cd-footer-link-color-hover: var(--cd-navbar-link-color-hover);


  /* ============================================================= */
  /* Link
  ================================================================ */

  --cd-link-text-color: #4c8ebd;
  --cd-link-text-color-hover: var(--cd-secondary-color);


  /* ============================================================= */
  /* HR
  ================================================================ */

  --cd-hr-border-width: var(--cd-border-width);
  --cd-hr-border-color: var(--cd-border-color);
  --cd-hr-border-style: var(--cd-border-style);


  /* ============================================================= */
  /* Pagination
  ================================================================ */

  /* Background */
  --cd-pagination-background-color: transparent;
  --cd-pagination-background-hover: transparent;

  /* Text */
  --cd-pagination-text-color: var(--cd-faded-text-color);
  --cd-pagination-text-color-hover: var(--cd-primary-color);

  /* Border */
  --cd-pagination-border-radius: var(--cd-border-radius);
  --cd-pagination-border-width: 0;
  --cd-pagination-border-style: var(--cd-border-style);
  --cd-pagination-border-color: var(--cd-border-color);
  --cd-pagination-border-color-hover: var(--cd-primary-color);


  /* ============================================================= */
  /* Cards
  ================================================================ */

  /* Background */
  --cd-card-background-color: var(--cd-content-background-color);
  --cd-card-header-background-color: var(--cd-card-background-color);

  /* Text */
  --cd-card-header-font-family: var(--cd-header-font-family);

  /* Border */
  --cd-card-border-width: var(--cd-border-width);
  --cd-card-border-style: var(--cd-border-style);
  --cd-card-border-color: var(--cd-border-color);
  --cd-card-border-radius: var(--cd-border-radius);


  /* ============================================================= */
  /* Button
  ================================================================ */

  /* Background */
  --cd-button-background-color: var(--cd-primary-color);
  --cd-button-background-color-hover: var(--cd-secondary-color);

  /* Text */
  --cd-button-text-color: var(--cd-primary-text-color);
  --cd-button-text-color-hover: var(--cd-secondary-text-color);

  /* Border */
  --cd-button-border-width: var(--cd-border-width);
  --cd-button-border-style: var(--cd-border-style);
  --cd-button-border-color: var(--cd-button-background-color);
  --cd-button-border-color-hover: var(--cd-button-background-color-hover);
  --cd-button-border-radius: var(--cd-border-radius);


  /* ============================================================= */
  /* Input
  ================================================================ */

  /* Background */
  --cd-input-background-color: var(--cd-faded-background-color);

  /* Text */
  --cd-input-text-color: var(--cd-faded-text-color);

  /* Border */
  --cd-input-border-width: var(--cd-border-width);
  --cd-input-border-style: var(--cd-border-style);
  --cd-input-border-color: var(--cd-border-color);
  --cd-input-border-color-hover: var(--cd-primary-color);
  --cd-input-border-radius: var(--cd-border-radius);
  

}


/* ============================================================= */
/* General Page Styles
/* ============================================================= */

body {

  /* Global Text */
  color: var(--cd-body-text-color);
  font-family: var(--cd-body-font-family);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Global Background */
  background-color: var(--cd-body-background-color);
  background-image: var(--cd-body-background-image);
  background-position: center;
  background-size: cover;

}


/* ============================================================= */
/* Plain Links
/* ============================================================= */

a,
a:visited {
  color: var(--cd-link-text-color);
  transition: color .2s ease-in-out;
}

a:hover,
a:focus,
a:active {
  color: var(--cd-link-text-color-hover);
  text-decoration: none;
}

/* ============================================================= */
/* Navbar
/* ============================================================= */
.navbar {
  background-color: var(--cd-navbar-background-color) !important;
  font-family: var(--cd-navbar-font-family) !important;
  z-index: 2000;
}

.navbar .navbar-brand {
  color: var(--cd-navbar-brand-color) !important;
  font-size: 2rem;
}

.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
  color: var(--cd-navbar-brand-color-hover) !important;
}

.navbar .navbar-nav .nav-link {
  color: var(--cd-navbar-link-color) !important;
}

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

.navbar .navbar-toggler {
  color: var(--cd-navbar-link-color) !important;
  border: none !important;
}

.navbar .nav-link {
  display: flex;
  align-items: center;
}

.navbar .nav-link-icon {
  font-size: .5rem;
  margin-left: .25rem;
}


/* ============================================================= */
/* Dropdowns
/* This is for navbar dropdowns only
/* ============================================================= */

.navbar .dropdown-menu {
  color: var(--cd-navbar-dropdown-link-color) !important;
  background-color: var(--cd-navbar-dropdown-background-color) !important;
  border-radius: var(--cd-navbar-dropdown-border-radius) !important;
  border: none;
  margin-top: 0;
}

.dropdown:hover .dropdown-menu,
.dropdown-menu:hover {
  display: block !important
}

.navbar .dropdown-divider {
  border-top: 1px solid var(--cd-navbar-dropdown-divider) !important;
}

.navbar .dropdown-item,
.navbar .dropdown-item-text {
  color: var(--cd-navbar-dropdown-link-color) !important;
  transition: color .2s ease, background .2s ease;
}

.navbar .dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active {
  color: var(--cd-navbar-dropdown-link-color-hover) !important;
  background-color: var(--cd-navbar-dropdown-background-hover) !important;
}

.navbar .dropdown-header {
  color: var(--cd-navbar-dropdown-link-color-hover) !important;
}


/* ============================================================= */
/* Footer
/* ============================================================= */

.footer {
  background-color: var(--cd-footer-background-color) !important;
  color: var(--cd-footer-text-color) !important;
}

.footer a,
.footer a:visited {
  color: var(--cd-footer-link-color) !important;
}

.footer a:hover,
.footer a:focus,
.footer a:active {
  color: var(--cd-footer-link-color-hover) !important;
}


/* ============================================================= */
/* Pagination
/* ============================================================= */

.page-link {
  transition: color .2s ease, background .2s ease, border .2s ease;
  border-width: var(--cd-pagination-border-width) !important;
  border-style: var(--cd-pagination-border-style) !important;
}

.page-link,
.page-item.disabled .page-link {
  color: var(--cd-pagination-text-color) !important;
  background-color: var(--cd-pagination-background-color) !important;
  border-color: var(--cd-pagination-border-color) !important;
}

.page-item.active .page-link,
.page-link:hover,
.page-link:focus,
.page-link:active {
  color: var(--cd-pagination-text-color-hover) !important;
  background-color: var(--cd-pagination-background-hover) !important;
  border-color: var(--cd-pagination-border-color-hover) !important;
}

/* Keeps users from accidentally highlighting */
.page-link {
  cursor: pointer;
  user-select: none;
}

/* Fixes my jank nav/pagination hybrid */
.nav .pagination .page-item:first-child .page-link {
  border-radius: 0 !important;
  border-left: 0 !important;
}

.nav .pagination .page-item:last-child .page-link {
  border-radius: 0 !important
}

.nav .page-item:first-child .page-link {
  border-radius: var(--cd-pagination-border-radius) 0 0 var(--cd-pagination-border-radius) !important;
}

.nav .page-item:last-child .page-link {
  border-radius: 0 var(--cd-pagination-border-radius) var(--cd-pagination-border-radius) 0 !important
}


/* ============================================================= */
/* Multi Select Fixes
/* ============================================================= */

.bootstrap-select > .dropdown-toggle.bs-placeholder, 
.bootstrap-select>.dropdown-toggle.bs-placeholder:active, 
.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,
.bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--cd-body-text-color) !important;
}

.dropdown-menu {
  border-radius: var(--cd-border-radius) !important;
  background-color: var(--cd-faded-background-color) !important;
  color: var(--cd-body-text-color) !important;
}

.dropdown-item {
  color: var(--cd-body-text-color) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active,
.dropdown-item.selected {
  background-color: var(--cd-primary-color) !important;
  color: var(--cd-primary-text-color) !important;
}


/* ============================================================= */
/* Card
/* ============================================================= */

.card {
  background-color: var(--cd-card-background-color) !important;
  border-width: var(--cd-card-border-width) !important;
  border-style: var(--cd-card-border-style) !important;
  border-color: var(--cd-card-border-color) !important;
  border-radius: var(--cd-border-radius) !important;
}

.card-header {
  background-color: var(--cd-card-header-background-color) !important;
  border-bottom-color: var(--cd-card-border-color) !important;
  border-bottom-width: var(--cd-card-border-width) !important;
  border-bottom-style: var(--cd-card-border-style) !important;
  font-family: var(--cd-card-header-font-family) !important;
  border-radius: calc(var(--cd-border-radius) - 1px) calc(var(--cd-border-radius) - 1px) 0 0 !important;
}

.card-footer {
  background-color: var(--cd-card-header-background-color) !important;
  border-top-color: var(--cd-card-border-color) !important;
  border-top-width: var(--cd-card-border-width) !important;
  border-top-style: var(--cd-card-border-style) !important;
  font-family: var(--cd-card-header-font-family) !important;
  border-radius: 0 0  calc(var(--cd-border-radius) - 1px) calc(var(--cd-border-radius) - 1px) !important;
}



/* ============================================================= */
/* Buttons & Badges
/* ============================================================= */

.btn {
  border-style: var(--cd-button-border-style) !important;
  border-width: var(--cd-button-border-width) !important;
  border-radius: var(--cd-button-border-radius) !important;
}

.btn.btn-primary,
.badge.badge-primary {
  color: var(--cd-button-text-color) !important;
  background-color: var(--cd-button-background-color) !important;
  border-color: var(--cd-button-border-color) !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary:active,
a.badge.badge-primary:hover,
a.badge.badge-primary:focus,
a.badge.badge-primary:active {
  color: var(--cd-button-text-color-hover) !important;
  border-color: var(--cd-button-border-color-hover) !important;
  background-color: var(--cd-button-background-color-hover) !important;
  box-shadow: none !important;
}

/* ============================================================= */
/* Input
/* ============================================================= */

.form-control {
  background-color: var(--cd-input-background-color) !important;
  color: var(--cd-input-text-color) !important;
  border-width: var(--cd-input-border-width) !important;
  border-style: var(--cd-input-border-style) !important;
  border-color: var(--cd-input-border-color) !important;
  border-radius: var(--cd-input-border-radius) !important;
}

.form-control:focus,
.form-control:active {
  background-color: var(--cd-input-background-color) !important;
  border-color: var(--cd-input-border-color-hover) !important;
}


/* ============================================================= */
/* Scrollbar
/* ============================================================= */

@media (min-width: 992px) {
  body::-webkit-scrollbar-track {
    background-color: var(--cd-faded-background-color);
    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);
  }
}


/* ============================================================= */
/* Misc
/* ============================================================= */

.text-primary {
  color: var(--cd-primary-color) !important;
}

.bg-faded {
  background-color: var(--cd-faded-background-color) !important;
}

.bg-reset {
  background-color: var(--cd-content-background-color) !important;
}

.text-muted {
  color: var(--cd-faded-text-color) !important;
}

h1, h2, h3,
h4, h5, h6 {
  font-family: var(--cd-navbar-font-family) !important;
}

hr {
  border-top-color: var(--cd-hr-border-color) !important;
  border-top-width: var(--cd-hr-border-width) !important;
  border-top-style: var(--cd-hr-border-style) !important;
}

img {
  image-rendering: -webkit-optimize-contrast;
}

.img-thumbnail {
  border-radius:  var(--cd-border-radius) !important;
  border-color: var(--cd-border-color) !important;
}

/* Fix any border radiuses that were messed from before */
.rounded {
  border-radius: var(--cd-border-radius) !important
}

.rounded-circle {
  border-radius: 100%;
}

.rounded-0 {
  border-radius: 0 !important;
}


/* ============================================================= */
/* Loading
/* ============================================================= */

/* Fades container in on load so its not as jarring */
.softload {
  opacity: 0;
}

.softload.active {
  opacity: 1;
  transition: opacity 2s ease;
}

/* Fades container in on load so its not as jarring */
.hardload {
  opacity: 0;
}

.hardload.active {
  opacity: 1;
  transition: opacity .1s ease;
}

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

#charadex-body.active {
  display: block;
}


/* ============================================================= */
/* Chee's Tweaks
/* ============================================================= */

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#main-container {
  min-height: calc(100vh - 105px);
  padding: 1rem;
  -ml-flex: 1 1 auto !important;
  flex: 1 1 auto !important;
}

@media (min-width: 768px) {
  #main-container {
    padding: 5rem 1.5rem;
  }
}

/* Remove ugly 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;
}

/* Small container for more compact view */
.container {
  max-width: 950px !important;
}

/* ============================================================= */
/* Custom Classes
/* ============================================================= */

/* Prevents awkward load in stutter */
#charadex-gallery .list .card-body {
  min-height: calc(200px + 2.5rem);
}

#charadex-gallery .list .card-body img {
  max-height: 200px;
}

.cd-gallery-card {
  min-height: calc(175px + 2.5rem);
}

.cd-gallery-card > img {
  max-height: 175px !important;
}

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

/* Traits */
.cd-traits-scroll {
  max-height: 200px;
  overflow-y: auto;
}

/* Prompts */
.cd-prompt-background {
  background-position: center;
  background-size: cover;
  min-height: 150px;
}

/* Makes sure your text formatting is preserved from the sheet */
/* Best for large areas like notes */
.cd-text-pre {
  white-space: break-spaces;
}

/* For the hero image in the index */
.cd-hero-title {
  color: var(--cd-primary-color);
  background-color: var(--cd-faded-background-color);
  border-radius: var(--cd-border-radius);
  font-family: var(--cd-header-font-family);
  display: flex;
  padding: 1.5rem;
  min-height: 250px;
  font-weight: 800;
  font-size: 2.5rem;
}

@media (min-width: 768px) {
  .cd-hero-title {
    letter-spacing: 2px;
    font-size: 5rem;
  }
}


/* ============================================================= */
/* Rarity
/* ============================================================= */

.badge-common {
  background-color: var(--cd-rarity-common-bg);
  color: var(--cd-rarity-common-txt);
}

.badge-uncommon {
  background-color: var(--cd-rarity-uncommon-bg);
  color: var(--cd-rarity-uncommon-txt);
}

.badge-rare {
  background-color: var(--cd-rarity-rare-bg);
  color: var(--cd-rarity-rare-txt);
}

.badge-veryrare {
  background-color: var(--cd-rarity-veryrare-bg);
  color: var(--cd-rarity-veryrare-txt);
}

.badge-legendary,
.badge-mythic {
  background-color: var(--cd-rarity-legendary-bg);
  color: var(--cd-rarity-legendary-txt);
}