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:                    #8FB7D4;
  --cd-primary-text-color:               #fff;

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

  /* ============================================================= */
  /* Backgrounds
  ================================================================ */
  --cd-body-background-color:            #f8f8f8;
  --cd-content-background-color:         #ffffff;
  --cd-faded-background-color:           #f8f8f8;

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

  /* ============================================================= */
  /* Text
  ================================================================ */
  --cd-body-text-color:                  #303030;
  --cd-faded-text-color:                 #575757;

  /* ============================================================= */
  /* 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:          #222222;
  --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;


  /* ============================================================= */
  /*
  /* 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
}


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


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

.btn.btn-primary,
.badge.badge-primary {
  color: var(--cd-button-text-color) !important;
  background-color: var(--cd-button-background-color) !important;
  border-width: var(--cd-button-border-width) !important;
  border-style: var(--cd-button-border-style) !important;
  border-color: var(--cd-button-border-color) !important;
  border-radius: var(--cd-button-border-radius) !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;
}

.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;
}

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

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

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

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

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

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

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

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

.gallery-img {
    max-height: 150px;
}

/* Combines search and its companion filter */
#search-filter.form-control {
  border-radius: var(--cd-border-radius) 0 0 var(--cd-border-radius) !important;
  border-right: 0 !important;
} 

#search.filtered.form-control {
  margin-left: -.5rem;
  width: calc(100% + .5rem) !important;
  border-radius: 0 var(--cd-border-radius) var(--cd-border-radius) 0 !important;
}

/* Loading Icon */
#loading {
  width: 5rem; 
  height: 5rem;
  position: absolute;
  top: calc(50% - 2.5rem);
  left: calc(50% - 2.5rem);
  animation-duration: 2s;
  opacity: .5;
  border-color: var(--cd-body-text-color);
  border-right-color: transparent !important;
}


#log-table {
    max-height: 200px;
    overflow-y: auto;
}

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

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

.hero-title {
    color: var(--cd-primary-text-color);
    background-color: var(--cd-primary-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) {
    .hero-title {
        letter-spacing: 2px;
        font-size: 5rem;
    }
}