/* ---------------- CHANGE THEME COLOR SETTINGS ---------------- */
:root {
  /* Fonts */
  --font-family: "Poppins", sans-serif;
  --font-weight: 500;

  /* Backgrounds */
  --bg: #080b0f;
  --bg-dark: #15181d;
  --bg-darker: #0e1016;
  --bg-light: #9c9eb4;
  --bg-primary: #ffc107;
  --bg-secondary: #eaeaea;

  /* Borders */
  --border: #1c202b;
  --border-bottom: #222633;
  --border-dark: #15181d;
  --border-darker: #0e1016;
  --border-light: #323649;
  --border-primary: #ffc107;
  --border-secondary: #eaeaea;
  --primary-border-bottom: #dd8500;

  /* Social Borders */
  --discord-border: #404eed;
  --kick-border: #53fc19;
  --twitch-border: #6034b2;
  --youtube-border: #ff0000;
  --youtube-border-bottom: #861f1f;

  /* General Buttons */
  --btn-cancel: #cf2222;
  --btn-cancel-border-bottom: #631616;
  --btn-hover: #eaeaea;
  --btn-primary: #ffc107;
  --btn-primary-border-bottom: #dd8500;
  --btn-secondary: #eaeaea;
  --btn-secondary-border-bottom: #858585;
  --btn-txt-dark: #0d0d0d;
  --btn-txt-light: #eaeaea;

  /* Social Buttons */
  --btn-discord: #404eed;
  --btn-discord-border-bottom: #0000ee;
  --btn-kick: #53fc19;
  --btn-kick-border-bottom: #30a30a;
  --btn-twitch: #6034b2;
  --btn-twitch-border-bottom: #36196d;
  --btn-youtube: #ff0000;

  /* Button Hovers */
  --btn-hover-border: #c0c0c0;
  --btn-hover-border-bottom: #858585;

  /* General Text */
  --txt-code: #ffcf87;
  --txt-dark: #0d0d0d;
  --txt-muted: #929eaf;
  --txt-placeholder: #3a3f46;
  --txt-primary: #ffc107;
  --txt-secondary: #eaeaea;
  --txt-selection: #080b0f;

  /* Social Text */
  --txt-discord: #404eed;
  --txt-kick: #53fc19;
  --txt-twitch: #6034b2;
  --txt-youtube: #ff0000;

  /* Staff Roles */
  --txt-beta-tester: #ffff88;
  --txt-community-manager: #ff4cff;
  --txt-content-creator: #992dff;
  --txt-designer: #17ff77;
  --txt-developer: #ff2e2e;
  --txt-events-coordinator: #ff952b;
  --txt-gm: #508dff;
  --txt-manager: #74ff3d;
  --txt-senior-gm: #00ffff;
  --txt-support: #2bffca;

  /* WoW Classes */
  --txt-deathknight: #c41f3b;
  --txt-druid: #ff7d0a;
  --txt-hunter: #abd473;
  --txt-mage: #69ccf0;
  --txt-paladin: #f58cba;
  --txt-priest: #ffffff;
  --txt-rogue: #fff569;
  --txt-shaman: #0070de;
  --txt-warlock: #9482c9;
  --txt-warrior: #c79c6e;
  --txt-monk: #00ff96;
  --txt-demonhunter: #a330c9;

  /* WoW Item Qualities */
  --txt-item-poor: #9d9d9d;
  --txt-item-common: #ffffff;
  --txt-item-uncommon: #1eff00;
  --txt-item-rare: #0070dd;
  --txt-item-epic: #a335ee;
  --txt-item-legendary: #ff8000;
  --txt-item-artifact: #e6cc80;
  --txt-item-heirloom: #00ccff;
}
/* ---------------- END OF CHANGE THEME COLOR SETTINGS ---------------- */

/* Global Styles */
* {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
}

body {
  background-color: var(--bg);
  background-image: none;
}

::selection {
  background-color: var(--bg-primary);
  color: var(--txt-dark);
}

::-moz-selection {
  background-color: var(--bg-primary);
  color: var(--txt-dark);
}

/* Navbar Styles */
.header::before,
.nav-active::before,
.dropdown-toggle::after {
  display: none;
}

/* Navbar - Main Styles */
.header {
  width: 100%;
  height: auto;
  z-index: 98;
  background-color: var(--bg-darker);
  background-image: none;
  -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); /* For Safari and Chrome */
  -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); /* For Firefox */
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); /* Standard Syntax */
}

/* Navbar - Main Styles - Dividers */
.header .navbar .navbar-nav .nav-item::after {
  background-color: none;
}

/* Navbar - Link Dividers */
.header .navbar .navbar-nav .nav-item::after {
  display: none;
}

.header .navbar .navbar-nav .nav-item .nav-link {
  color: var(--txt-primary);
  text-transform: uppercase;
}

.nav-link {
  color: var(--txt-primary);
  text-transform: uppercase;
  transition: none;
  font-size: 1.1rem;
}

.nav-link:hover,
.nav-link:focus,
.nav-item:hover {
  color: var(--txt-secondary) !important;
  background-color: var(--bg-darker);
}

.nav-link.active {
  color: var(--txt-secondary) !important;
  border-radius: 0rem;
}

.nav-link:focus-visible {
  box-shadow: none;
}

/* Navbar - Default State */
.header .navbar .navbar-nav .nav-item .nav-link {
  border: 0.1rem solid transparent;
}

/* Navbar - Hover Block */
.header .navbar .navbar-nav .nav-item:hover .nav-link,
.header .navbar .navbar-nav .nav-item .nav-link:hover,
.header .navbar .navbar-nav .nav-item .nav-link:active,
.header .navbar .navbar-nav .nav-item .nav-link.nav-active {
  background-color: var(--bg-dark);
  border-color: var(--border);
}

/* Navbar Logo */
.navbar-logo {
  height: auto;
  min-width: 15rem;
  max-width: 40%;
  display: block;
  margin: auto;
  transition: all 0.3s ease-in-out;
}

.navbar-logo:hover {
  filter: saturate(0) brightness(1.2);
}

/* UCP - Nav */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  background-color: var(--bg-primary) !important;
  color: var(--txt-dark) !important;
  font-weight: 600;
}

/* Account Info Text */
.section-topbar .membership-bar .membership-bar-info,
.info-welcome {
  color: var(--txt-secondary);
  font-size: 1rem;
  font-style: normal;
  text-shadow: none;
}

.section-topbar {
  background-color: transparent;
}

/* Currency Text */
.gold-points {
  color: var(--txt-primary) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
}
.silver-points {
  color: var(--txt-secondary) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
}

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

.text-silver,
.ampersand {
  color: var(--txt-secondary) !important;
}

.text-gold,
.text-silver,
.ampersand {
  font-size: 1rem;
  font-weight: 500;
}

/* Anchor Tag */
a {
  color: var(--txt-primary);
  font-weight: 600;
  text-decoration: none;
  text-shadow: none;
}

a:hover {
  color: var(--txt-secondary);
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--txt-primary);
  font-weight: 600;
  text-transform: uppercase;
}

/* Paragraphs */
p {
  color: var(--txt-secondary);
  font-weight: 500;
  text-shadow: none;
}

/* Code Blocks */
body code {
  color: var(--txt-code);
  font-size: 0.875em;
  word-wrap: break-word;
}

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

/* Dropdown Menus */
.dropdown .dropdown-menu,
.dropdown .dropdown-menu li .dropdown-item {
  background-color: var(--bg-darker);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
}

.dropdown .dropdown-menu {
  border: 0.1rem solid var(--border);
  border-radius: 0;
  padding: 0;
}

.dropdown .dropdown-menu li .dropdown-item {
  color: var(--txt-secondary);
  padding: 0.6em 0;
  z-index: 100;
}

.dropdown-item {
  background-color: transparent;
  color: var(--txt-secondary);
  padding: 0.6em 1em;
  text-transform: uppercase;
  font-weight: 600;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--txt-primary);
  text-transform: uppercase;
}

.dropdown .dropdown-menu li .dropdown-item::after {
  border: 0.1rem solid var(--border);
  width: auto;
}

.dropdown .dropdown-menu li:hover .dropdown-item,
.dropdown .dropdown-menu li .dropdown-item:hover,
.dropdown .dropdown-menu li .dropdown-item:active,
.dropdown .dropdown-menu li .dropdown-item.nav-active {
  background-color: var(--bg);
  color: var(--txt-primary);
  text-transform: uppercase;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--txt-primary);
  background-color: var(--bg-dark);
}

.header .navbar .navbar-nav .nav-item .dropdown-menu {
  margin-top: 0;
}

/* Mobile Menu */
.offcanvas {
  background-color: var(--bg-darker);
  border-right: 0.1rem solid var(--border) !important;
}

.offcanvas-header {
  background-color: var(--bg-darker);
  border-bottom: 0.1rem solid var(--border);
  padding: 1rem;
}

.mobile-logo {
  width: 1rem;
  height: auto;
}

.btn-close {
  opacity: 1;
}

/* Text and Backgrounds */
.text-light {
  color: var(--txt-secondary);
}

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

.bg-darker::before {
  background-color: var(--bg-darker) !important;
}

.border {
  border-color: var(--border) !important;
}

.border-bottom {
  border-bottom: 0.1rem solid var(--border) !important;
}

/* Section Padding */
.section-padding {
  overflow: hidden;
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* Button - Default */
.btn,
.btn-warning,
.nice_button,
.btn-close,
.btn-primary,
.btn-secondary,
.accordion-button,
.btn-check,
.btn.active,
.btn.show {
  background-color: var(--btn-primary) !important;
  border-bottom: 0.3rem solid var(--btn-primary-border-bottom) !important;
  border-radius: 0;
  font-family: "Poppins", sans-serif;
  color: var(--btn-txt-dark);
  font-size: 1rem;
  font-weight: 600;
  text-shadow: none;
  font-style: normal;
  text-transform: uppercase;
  box-shadow: none !important;
  transition: all 0.3s ease-in-out;
  border-radius: 0.15rem !important;
}

/* Button - Default - Hover States */
.btn:hover,
.btn-warning:hover,
.nice_button:hover,
.btn-close:hover,
.btn-primary:hover,
.btn-secondary:hover,
.accordion-button:hover,
.btn-check:hover,
.btn.active:hover,
.btn.show:hover {
  background-color: var(--btn-secondary) !important;
  border-bottom: 0.3rem solid var(--btn-secondary-border-bottom) !important;
  border-radius: 0;
  color: var(--btn-txt-dark) !important;
  font-size: 1rem;
  font-weight: 600;
  text-shadow: none;
  font-style: normal;
  text-transform: uppercase;
  transition: all 0.3s ease-in-out !important;
  border-radius: 0.15rem !important;
}

/* Button - Default - Active States */
.btn:active,
.btn-warning:active,
.nice_button:active,
.btn-close:active,
.btn-primary:active,
.btn-secondary:active,
.accordion-button:active,
.btn:focus,
.btn-warning:focus,
.nice_button:focus,
.btn-close:focus,
.btn-primary:focus,
.btn-secondary:focus,
.accordion-button:focus,
.btn-check:active,
.btn-check:focus,
.btn.active:active,
.btn.active:focus,
.btn.show:active,
.btn.show:focus {
  background-color: var(--btn-primary);
  border-bottom: 0.3rem solid var(--btn-primary-border-bottom);
  border-radius: 0;
  color: var(--btn-txt-dark);
  font-size: 1rem;
  font-weight: 600;
  text-shadow: none;
  font-style: normal;
  text-transform: uppercase;
  box-shadow: none;
  transition: all 0.3s ease-in-out !important;
}

.btn.active,
.nice_active {
  color: var(--btn-txt-dark);
  background-color: var(--btn-secondary) !important;
  border-bottom: 0.3rem solid var(--btn-secondary-border-bottom) !important;
  transition: all 0.3s ease-in-out !important;
}

/* Button - Disabled */
.btn.disabled,
.btn:disabled {
  color: var(--btn-txt-dark);
  background-color: var(--btn-secondary);
  border-bottom: var(--btn-secondary-border-bottom);
  transition: all 0.3s ease-in-out !important;
}

/* Button - Others */
button,
.nice_button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
  background-color: var(--btn-primary);
  border-bottom: 0.3rem solid var(--btn-primary-border-bottom);
  border-radius: 0 !important;
  color: var(--btn-txt-dark);
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-shadow: none;
  font-style: normal;
  text-transform: uppercase;
  box-shadow: none;
  transition: all 0.3s ease-in-out !important;
}

/* ---------------- HOMEPAGE HERO BANNERS ---------------- */

/* Hero Section */
.hero {
  position: relative;
  height: 50vh;
  overflow: hidden;
  z-index: 0;
}

/* Hero - Video */
.hero .hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 105%;
  height: 100%;
  object-fit: cover;
  background-color: var(--bg);
  opacity: 1;
  z-index: -2;
  /* transform: scaleX(-1); */
}

/* Hero - Heading Vertical Spacing Adjustment */
body h2.tighten-up {
  margin-bottom: -0.3rem;
}

/* Hero - Video - Grid Overlay */
.video-overlay {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, hsla(0, 0%, 5%, 0.3) 1px, transparent 1px), linear-gradient(to bottom, hsla(0, 0%, 5%, 0.3) 1px, transparent 1px);
  background-size: 2px 2px; /* Increase the spacing between the dots */
  opacity: 1;
}
/* ---------------- END OF HOMEPAGE HERO BANNERS ---------------- */

/* ---------------- BANNERS ---------------- */

/* Banner Border */
.banner {
  border-top: 0.1rem solid var(--border);
  border-bottom: 0.1rem solid var(--border);
}

/* Banner Grid Overlay Effect */
.banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, hsla(0, 0%, 5%, 0.3) 1px, transparent 1px), linear-gradient(to bottom, hsla(0, 0%, 5%, 0.3) 1px, transparent 1px);
  background-size: 2px 2px; /* Increase the spacing between the dots */
  opacity: 0.5;
}

/* Positions the heading and description text above the overlays */
.section-heading,
.section-description {
  position: relative;
  z-index: 10;
}

/* Responsive - General - For large screens */
.bg-responsive {
  background-position: right 30%;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-size: 2600px; */
  background-color: #101218;
}

/* Responsive - Socials - For large screens */
.bg-responsive-socials {
  background-position: left top;
  background-size: cover;
  background-repeat: no-repeat;
  margin-bottom: 0.1rem;
}

/* Headers - Reduce Opacity on Mobile */
@media (max-width: 765px) {
  .bg-responsive::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 1);
    opacity: 0.6;
    z-index: 1;
  }

  .bg-responsive > div {
    position: relative;
    z-index: 2;
  }
}

/* Responsive - More Sections - For large screens */
.more-section {
  background-position: right top;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Responsive - General - For small screens */
@media (max-width: 765px) {
  .bg-responsive {
    background-position: right center;
    text-align: center;
  }
}

/* Responsive - Socials - For large screens */
@media (max-width: 765px) {
  .bg-responsive-socials {
    background-position: left center;
    text-align: center;
  }
}

.banner .section-heading,
.banner .section-description {
  text-shadow: #080b0f 0px 1px 1px !important;
}

/* ---------------- END OF BANNERS ---------------- */

/* Dim Images - On Hover */
.dim-image {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.dim-image:hover {
  opacity: 0.6;
}

/* ---------------- SOCIAL BANNERS ---------------- */

/* Discord Banner - Animated Background Color */
.discord-banner {
  border: solid var(--discord-border);
  border-width: 0.1rem 0;
  position: relative;
  overflow: hidden;
}

.discord-banner::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent, #404eed, transparent);
  animation: backgroundShine 4s linear infinite;
  transform: rotate(-45deg);
  opacity: 0.5;
  filter: blur(100px);
}

@keyframes backgroundShine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Discord Button */
.btn-discord {
  background-color: var(--btn-discord) !important;
  border-bottom: 0.3rem solid var(--btn-discord-border-bottom) !important;
  color: var(--btn-txt-light);
  overflow: hidden;
}

/* Discord Button Hover */
.btn-discord:hover {
  background-color: var(--btn-secondary);
  border-bottom-color: var(--btn-hover-border-bottom);
  color: var(--btn-txt-dark);
}

.btn-discord-footer {
  background-color: var(--btn-discord) !important;
  border-bottom: 0.3rem solid var(--btn-discord-border-bottom) !important;
  color: var(--btn-txt-light);
  overflow: hidden;
  border-radius: 0;
}

/* Discord Button Hover */
.btn-discord-footer:hover {
  background-color: var(--btn-secondary) !important;
  border-bottom-color: var(--btn-hover-border-bottom) !important;
  color: var(--btn-txt-dark);
  border-radius: 0;
}

/* Discord Text */
.text-discord {
  color: var(--txt-discord);
}

/* Discord Banner Paragraph */
.discord-banner p {
  margin: 0;
}

/* YouTube Section */
.youtube-section {
  border: solid var(--youtube-border);
  border-width: 0.1rem 0;
}

/* YouTube - Button */
.btn-youtube {
  background-color: var(--btn-youtube) !important;
  border-bottom: 0.3rem solid var(--youtube-border-bottom) !important;
  color: var(--btn-txt-light);
  transition: all 0.3s ease-in-out;
}

/* YouTube - Button Hover */
.btn-youtube:hover {
  background-color: var(--btn-secondary);
  border-bottom-color: var(--btn-hover-border-bottom);
  color: var(--btn-txt-dark);
}

/* YouTube - Text Color */
.text-youtube {
  color: var(--txt-youtube);
}

/* YouTube - Video Embed Responsive */
.embed-responsive {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 0;
}

/* YouTube - Video Embed Responsive Item */
.embed-responsive-item {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* YouTube - Video Embed Responsive Pseudo-element */
.embed-responsive::before {
  content: "";
  display: block;
  padding-top: 55%;
}

/* Twitch Section */
.twitch-section {
  border: solid var(--twitch-border);
  border-width: 0.1rem 0;
}

/* Twitch - Button */
.btn-twitch {
  background-color: var(--btn-twitch) !important;
  border-bottom: 0.3rem solid var(--btn-twitch-border-bottom) !important;
  color: var(--btn-txt-light);
}

/* Twitch - Button Hover */
.btn-twitch:hover {
  background-color: var(--btn-secondary);
  border-bottom: 0.3rem solid var(--btn-hover-border-bottom);
  color: var(--btn-txt-dark);
}

/* Twitch - Text Color */
.text-twitch {
  color: var(--txt-twitch);
}

/* Kick Section */
.kick-section {
  border: solid var(--kick-border);
  border-width: 0.1rem 0;
}

/* Kick - Button */
.btn-kick {
  background-color: var(--btn-kick) !important;
  border-bottom: 0.3rem solid var(--btn-kick-border-bottom) !important;
  color: var(--btn-txt-dark);
}

/* Kick - Button Hover */
.btn-kick:hover {
  background-color: var(--btn-secondary);
  border-bottom: 0.3rem solid var(--btn-secondary-border);
  color: var(--btn-txt-dark);
}

/* Kick - Text Color */
.text-kick {
  color: var(--txt-kick);
}

/* ---------------- END - SOCIAL BANNERS ---------------- */

/* Server Features Section */
#card-features .cards {
  background-color: var(--bg-darker);
  border: 0.1rem solid var(--border);
  font-size: 1rem;
}

/* Card Images - Hide Overflow */
#card-features .cards .image-box {
  overflow: hidden;
}

/* Card Images - Set Size */
#card-features .cards .image-box img {
  height: 100%;
  width: 100%;
  transition: transform 0.3s;
  transform: scale(1.01);
}

/* Card Images - Hover Effect */
#card-features .cards:hover .image-box img {
  opacity: 0.5;
  transform: scale(1.1);
  transition: all 0.3s ease-in-out;
}

/* Card Image Zoom Properties and Hover State */
.card .card-img-zoom {
  overflow: hidden;
  opacity: 1;
  border-bottom: 0.1rem solid var(--border);
  transition: all 0.3s;
}

.card .card-img-zoom img {
  transition: transform 0.3s;
  transform: scale(1.01);
}

.card:hover .card-img-zoom img {
  opacity: 0.7;
  transform: scale(1.1);
}

.card-header {
  color: var(--txt-dark);
  background-color: var(--bg-primary);
  border-bottom: 1px solid var(--border-light);
  font-weight: 600;
  text-transform: uppercase;
}

.card:not(.card-disabled).card-hover:hover {
  filter: saturate(0) brightness(1.2);
  transition: filter 0.3s;
  border: 0.1rem solid var(--border-primary);
}

.card-img,
.card-img-top {
  border-radius: 0;
  border: 0.1rem solid var(--border);
  border-bottom: 0;
}

#vote-cards,
#donate-cards {
  border: 0.1rem solid var(--border-light);
}

.card-header:first-child {
  border-radius: 0;
}

/* Server Team Members - Card Background Images */
.small-screen-bg {
  display: none;
}

@media (max-width: 768px) {
  .card {
    position: relative;
  }
  .small-screen-bg {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-repeat: no-repeat;
    background-position: 50% 30%;
    background-size: cover;
    opacity: 0.1;
    filter: saturate(0.5);
  }
  .card::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

/* Server Team Members - Profile Link - Hover State */
.profile-link:hover h6 {
  color: var(--txt-secondary) !important;
}

/* Testimonial Section */
.quote_ {
  opacity: 0.1 !important;
}

/* Testimonial Section - Avatar Images */
.testimonial-avatar {
  border: 0.1rem solid var(--border);
  transition: opacity 0.3s ease-in-out;
}

.testimonial-avatar:hover {
  border: 0.1rem solid var(--border);
  opacity: 0.7;
  transition: opacity 0.3s ease-in-out;
}

/* Class & Rank Text Colors */
.text-designer {
  color: var(--txt-designer);
}

.text-developer {
  color: var(--txt-developer);
}

.text-gm {
  color: var(--txt-gm);
}

.text-senior-gm {
  color: var(--txt-senior-gm);
}

.text-support {
  color: var(--txt-support);
}

.text-deathknight {
  color: var(--txt-deathknight);
}

.text-druid {
  color: var(--txt-druid);
}

.text-hunter {
  color: var(--txt-hunter);
}

.text-mage {
  color: var(--txt-mage);
}

.text-paladin {
  color: var(--txt-paladin);
}

.text-priest {
  color: var(--txt-priest);
}

.text-rogue {
  color: var(--txt-rogue);
}

.text-shaman {
  color: var(--txt-shaman);
}

.text-warlock {
  color: var(--txt-warlock);
}

.text-warrior {
  color: var(--txt-warrior);
}

/* WoW Item Qualities */
.item-poor {
  color: var(--txt-item-poor);
}

.item-common {
  color: var(--txt-item-common);
}

.item-uncommon {
  color: var(--txt-item-uncommon);
}

.item-rare {
  color: var(--txt-item-rare);
}

.item-epic {
  color: var(--txt-item-epic);
}

.item-legendary {
  color: var(--txt-item-legendary);
}

.item-artifact {
  color: var(--txt-item-artifact);
}

.item-heirloom {
  color: var(--txt-item-heirloom);
}

/* Store - Cart */
#cart_item_count {
  color: var(--txt-secondary);
}

/* Store - Price Color DP & VP */
#cart_price #dp_price_full span,
#cart_price #vp_price_full span {
  color: var(--txt-primary);
}

/* Store - Override VP price color */
#cart_price #vp_price_full span {
  color: var(--txt-secondary);
}

/* Store - Checkout Info */
#checkout_info {
  padding-bottom: 1rem;
}

/* Store - Margin */
#checkout_info .mb-3 {
  margin-top: 20px;
}

/* Store - Checkout Info Font */
#checkout_info b {
  color: var(--txt-primary);
  font-weight: 500;
}

/* Store - Hide Images Checkout */
#checkout_info img {
  display: none;
}

/* Store - Padding Paragraphs Checkout Info */
#checkout_info p {
  padding-bottom: 5rem;
}

/* Store - Item Quality Font */
#item_quality {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
}

/* Store - Background Color Card Body */
#item_space .card-body {
  background-color: var(--bg);
}

/* Store - Filter - Button Focus & Active States */
.btn-check:checked + .btn,
.btn.show,
.btn:first-child:active,
:not(.btn-check) + {
  color: var(--txt-dark);
  background-color: var(--btn-secondary);
  border-color: var(--btn-secondary-border);
}

/* Store - Filter - Button Active State When Filter Is Enabled */
.nice_active {
  color: var(--txt-dark);
  background-color: var(--btn-secondary);
  border-color: var(--btn-secondary-border);
}

/* Store - Filter - Box and Dropdown Menu - Remove Browser Styes */
select.filter-menu {
  background-color: var(--bg-dark);
  color: var(--txt-muted);
  text-transform: uppercase;
  border: 1px solid var(--border);
  padding: 0.375rem 0.75rem;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Store - Filter - Dropdown Menu - Items */
select.filter-menu option {
  background-color: var(--bg-dark);
  color: var(--txt-secondary);
  text-transform: uppercase;
  border: 1px solid var(--border);
  padding: 0.375rem 0.75rem;
}

/* Store - Filter - Search Box */
input.filter-menu {
  background-color: var(--bg-dark);
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  color: var(--txt-primary);
  text-transform: uppercase;
  border: 1px solid var(--border);
  padding: 0.375rem 0.75rem;
}

/* Store - Filter - Search Box */
input.filter-menu:active,
input.filter-menu:focus {
  background-color: transparent;
  box-shadow: none;
}

/* Store - Filter - Search Box - Remove Browser Styles */
input.filter-menu:-webkit-autofill,
input.filter-menu:-webkit-autofill:hover,
input.filter-menu:-webkit-autofill:focus,
input.filter-menu:-webkit-autofill:active {
  -webkit-box-shadow: none !important;
}

/* Store - Filter - Search Placeholder Text */
#filter_name::placeholder {
  color: var(--txt-placeholder);
  opacity: 1; /* Firefox */
  text-transform: uppercase;
  font-size: 1rem;
}

.store-groups {
  padding: 0.55rem;
}

body .store_item {
  margin: 0.3rem;
  padding: 1rem;
  border: 0.1rem solid var(--border-light) !important;
  border-radius: 0rem;
}

/* Tables */
.table {
  --bs-table-bg: var(--bg-darker);
  --bs-table-striped-color: var(--txt-secondary);
  --bs-table-striped-bg: var(--bg-dark);
  --bs-table-active-color: var(--txt-secondary);
  --bs-table-active-bg: var(--bg-dark);
  --bs-table-hover-color: var(--txt-primary);
  --bs-table-hover-bg: var(--bg);
  --bs-table-color: var(--txt-secondary);
  cursor: pointer;
}

/* Table Header */
.table thead th {
  background-color: var(--bg-light);
  color: var(--txt-dark);
  text-transform: uppercase;
  font-size: 1rem;
}

.table thead th:hover {
  background-color: var(--bg-primary);
  color: var(--txt-dark);
}

/* Table - Items - Vertically Align Center */
.table td,
.table th {
  vertical-align: middle;
}

#dungeons,
#raids,
#mythics,
#search_results_items {
  border-color: var(--border);
  border-style: solid;
  border-width: 0.1rem;
}

#dungeons td,
#dungeons th,
#raids td,
#raids th,
#mythics td,
#mythics th,
#search_results_items td,
#search_results_items th {
  /* text-align: start; */
  vertical-align: middle;
}

/* Table - Armor - Character - Border Color */
.armory-table th,
.armory-table td,
.armory-table tbody,
thead,
tbody,
tfoot,
tr,
td,
th,
table.dataTable thead th,
table.dataTable thead td {
  border: 0.1rem solid var(--border) !important;
}

table.dataTable thead th,
table.dataTable thead td {
  padding: 10px 18px;
  border: 0.1rem solid var(--border);
}

table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting {
  background-image: none !important;
}

table.dataTable thead .sorting_asc::before {
  content: "\f0de"; /* fa-sort-asc */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  float: right;
}

table.dataTable thead .sorting_desc::before {
  content: "\f0dd"; /* fa-sort-desc */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  float: right;
}

table.dataTable thead .sorting::before {
  content: "\f0dc"; /* fa-sort */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  float: right;
}

.dataTables_wrapper {
  position: relative;
  padding-bottom: 5%;
}

body .dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
  color: var(--txt-secondary) !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  color: var(--txt-dark) !important;
}

/* Datatables - Processing */
.dataTables_wrapper .dataTables_processing {
  top: 60% !important;
  padding: none !important;
  font-size: 0.8em !important;
  background-color: transparent !important;
  background: none !important;
  text-transform: uppercase !important;
}

#changelogTable td {
  font-family: monospace;
  font-weight: 100;
  font-size: 0.9rem;
  text-transform: capitalize;
}

#changelogTable th {
  font-weight: 600;
  font-size: 0.9rem;
}

#changelogTable tbody tr:hover td,
#changelogTable tbody tr:hover th {
  color: var(--txt-primary) !important;
}

/* Table - Sorting & Searching */
body .dataTables_wrapper .dataTables_paginate .paginate_button {
  background-color: var(--bg-light) !important;
  border: 0.1rem solid var(--border) !important;
  border-radius: 0.25rem;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  color: var(--txt-muted) !important;
  border: 0.1rem solid var(--border);
  background-color: var(--bg-dark);
  background: none !important;
  background: none !important;
  background: none !important;
  background: none !important;
  background: none !important;
  background: none !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  color: var(--txt-dark) !important;
  border: 0.1rem solid var(--border);
  background-color: var(--bg-darker);
  background: var(--bg-primary) !important;
}

body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
  cursor: default;
  color: var(--txt-dark) !important;
  border: 1px solid var(--border);
  background: transparent;
  box-shadow: none;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--border-light) !important;
  border-radius: 0 !important;
  padding: 0.3rem !important;
  background-color: transparent;
  color: var(--txt-secondary) !important;
}

table.dataTable.no-footer {
  margin-bottom: 1rem !important;
}

.dataTables_filter label {
  margin-bottom: 1rem !important;
}

label {
  color: var(--txt-muted) !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 0.8rem !important;
  text-shadow: none !important;
  text-transform: uppercase;
  display: flex;
  align-items: center; /* Add this line */
  gap: 1rem !important;
}

/* Table Borders */
.table-bordered {
  border: 0.1rem solid var(--border);
}

/* Accordion button properties */
.accordion .accordion-item .accordion-header .accordion-button {
  color: var(--txt-dark);
  font-style: normal;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 1rem;
  text-shadow: none;
  border-radius: 0;
  padding: 0.8rem;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}

/* Accordion chevron arrow dark */
.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='txt-dark'%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");
  transform: rotate(-180deg);
}

/* Accordion body properties */
.accordion .accordion-item .accordion-body {
  background-color: var(--bg-dark);
  border: 0.1rem solid var(--border-light);
  font-weight: 500;
  text-transform: capitalize;
  color: var(--txt-secondary);
  text-shadow: none;
}

/* Accordion button after properties */
.accordion .accordion-item .accordion-header .accordion-button::after {
  background-image: none;
  font-family: "Font Awesome 5 Free";
  content: "\f107";
  font-weight: 900;
}

/* Card properties in timeline cards */
#timeline-cards .card {
  background-color: #080b0f;
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4);
  margin-top: 50px;
}

/* Image zoom properties in card */
#timeline-cards .card .card-img-zoom {
  overflow: hidden;
}

/* Image properties in image zoom */
#timeline-cards .card .card-img-zoom img {
  height: 100%;
  width: 100%;
}

/* Card hover properties in timeline cards */
#timeline-cards .card:hover {
  box-shadow: 0 15px 26px rgba(0, 0, 0, 0.5);
}

/* Image properties in image zoom on card hover */
#timeline-cards .card:hover .card-img-zoom img {
  opacity: 0.7;
  transform: scale(1.15);
}

.card-bg {
  background-color: var(--bg-darker);
}

/* Bootstrap Tooltip */
.tooltip {
  background-color: var(--bg-darker);
  border: 0.1rem solid var(--border-light);
  padding: 3rem;
  border-radius: 0.25rem;
  box-shadow: none;
  color: var(--txt-secondary);
  text-transform: capitalize;
  font-size: 1rem;
}

.tooltip-inner {
  padding: 0.3rem;
  color: var(--txt-secondary);
  background-color: var(--bg-darker);
  border-radius: 0.25rem;
}

/* FusionGEN Tooltip */
#fusion_tooltip,
.fusion_tooltip {
  background-color: var(--bg-dark);
  border: 0.1rem solid var(--border-light);
  border-radius: 0.25;
  box-shadow: none;
  color: var(--txt-secondary);
  padding: 1rem;
  text-transform: capitalize;
  font-size: 0.8rem;
}

/* Tooltip - Hide Arrow */
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
  display: none;
}

/* Affix-icon padding */
.affix-icon {
  padding: 0.2rem;
}

/* Avatar link setup */
.avatar-link {
  display: inline-block;
  position: relative;
  cursor: pointer;
}

/* Avatar image and text transitions */
.avatar-img,
.avatar-text {
  transition: opacity 0.3s ease-in-out;
}

/* Avatar image opacity on hover */
.avatar-link:hover .avatar-img {
  opacity: 0.3;
}

/* Avatar text visibility on hover */
.avatar-link:hover .avatar-text {
  opacity: 1;
}

/* Avatar text positioning and color */
.avatar-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  color: var(--txt-primary);
}

.avatar {
  float: left;
  margin-right: 10px;
  margin-left: 0;
  margin-top: 3px;
}

/* Avatar box shadow and border */
body .my_avatar {
  box-shadow: none;
  border: 0.1rem solid var(--border-light);
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}

/* Avatar image desaturation on hover */
body .my_avatar:hover img {
  filter: saturate(0);
}

/* Avatar box shadow and border on hover */
body .my_avatar:hover {
  box-shadow: none;
  border: 0.1rem solid var(--border-primary);
}

/* Current avatar border */
body .avatar_current {
  border: 0.1rem solid var(--border-primary);
}

/* Badge border radius and font size */
.badge {
  border-radius: 0;
  font-size: 0.75em;
}

/* Character - Fit Image */
.character-avatar {
  object-fit: cover;
}

/* Alliance background image */
body .bg-faction.alliance {
  background-image: url(/application/images/misc/bg_alliance_complete.png);
}

/* Dark border color */
.border-dark {
  border-color: var(--border-dark);
}

/* Default card setup */
.card {
  background-color: var(--bg-darker);
  border: 0.1rem solid var(--border);
  border-radius: 0rem;
  box-shadow: none;
}

/* Card title color */
.card-title {
  color: var(--txt-primary);
}

/* Card footer border */
.card-footer {
  border-top: 0.1rem solid var(--border);
}

/* Footer - Discord Widget Header */
.discord-header {
  background-color: var(--btn-discord);
}

/* Disabled card appearance */
.card-disabled {
  opacity: 50%;
  filter: saturate(0);
}

/* Character select block text */
.character-select .d-block {
  color: var(--txt-secondary);
  font-weight: 500;
  text-transform: uppercase;
}

/* Character select image setup */
.character-select img {
  background-color: transparent;
  border: 0.1rem solid #323649;
  border-radius: 0 !important;
}

/* Copper points text setup */
.copper-points,
.copper-points:before {
  color: #ffb45e;
  font-weight: 500;
  text-transform: uppercase;
}

/* Copper points icon */
.copper-points:before {
  content: "\f51e";
  font-family: "FontAwesome";
}

/* Hide icon within copper points */
.copper-points i {
  display: none;
}

/* dp_price_value customization */
.dp_price_value {
  color: #141a21 !important;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  text-shadow: none;
}

/* Error feedback customization */
.error-feedback {
  background-color: #13141a;
  border: 0.1rem solid #323649;
  border-radius: 0;
  color: #df2929 !important;
  text-transform: uppercase;
}

/* Icon color settings */
.fa-arrow-alt-circle-left:before,
.fa-circle-left:before,
.fa-arrow-alt-circle-right:before,
.fa-circle-right:before,
.fa-shopping-cart {
  color: #080b0f;
}

/* Specific icon color override */
.fa-circle-arrow-right:before {
  color: var(--txt-secondary) !important;
  content: "\e1d9" !important;
}

/* Font weight for all children of fa-ul */
.fa-ul > * {
  font-weight: 400 !important;
}

/* Positioning for fixed-arrow */
.fixed-arrow {
  bottom: 20px;
  position: fixed;
  right: 20px;
  z-index: 999;
}

/* Page link color and background settings */
.page-item .page-link,
.page-item.disabled .page-link,
#search_results_items_next {
  color: var(--txt-secondary);
  background-color: var(--primary-color);
  border-radius: 0.25rem;
}

/* Border radius for last page-item */
.page-item:last-child .page-link {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Background color for active page-item and on hover */
.page-item.active .page-link,
.pagination li a:hover {
  background-color: var(--txt-secondary);
}

/* Margin for pagination button */
ul.pagination li.paginate_button {
  margin-right: 0.2rem;
}

/* Box shadow for select on focus and active, and page-link on focus */
select:focus,
select:active,
.page-link:focus {
  box-shadow: none !important;
}

/* Customization for item, item a, and item img */
.item,
.item a,
.item img {
  border-radius: 0 !important;
}

/* Customization for item a */
.item a {
  background-image: none !important;
}

/* Customization for item img */
.item img {
  border: #181b25 0.1rem solid;
  border-radius: 4px !important;
}

/* Customization for item_price img */
.item_price img {
  display: none;
}

/* Customization for list-group, list-group-item, list-group-item active, list-group-item + .list-group-item */
.list-group,
.list-group-item,
.list-group-item.active,
.list-group-item + .list-group-item {
  border-radius: 0;
  background-color: var(--bg-darker);
  border-color: var(--border);
  font-family: "Poppins", sans-serif;
  color: var(--txt-secondary);
  box-shadow: none;
  text-transform: uppercase;
}

/* Customization for list-group-item:focus, list-group-item.active */
.list-group-item:focus,
.list-group-item.active {
  background-color: var(--bg-primary);
  color: var(--txt-dark);
  cursor: pointer;
}

/* Customization for list-group-item:hover */
.list-group-item:hover {
  background-color: var(--bg-secondary);
  color: var(--txt-dark);
  cursor: pointer;
}

/* Customization for location-select .d-block */
.location-select .d-block {
  color: var(--primary-color) !important;
  font-weight: 500;
  text-transform: uppercase;
}

/* Customization for nice_active::after, nice_active::before, nice_button img */
.nice_active::after,
.nice_active::before,
.nice_button img {
  display: none;
}

/* Customization for page-subbody */
.page-subbody {
  background: none;
  margin: 0rem;
  padding: 0rem;
}

/* Customization for page_form label */
.page_form label {
  color: var(--txt-muted);
  font-family: "Poppins", sans-serif;
  font-size: 1rem !important;
  font-weight: 500;
}

/* Customization for pagebody */
.pagebody {
  background: none;
  box-shadow: none;
  color: var(--txt-muted);
  padding: 1rem;
}

/* Customization for realm_bar and poll_bar */
.realm_bar,
.poll_bar {
  border-radius: 0;
  margin: 0;
}

/* Hide span inside realm_bar_fill */
.realm_bar_fill span {
  visibility: hidden;
}

/* Customization for realm_bar_fill.alliance and realm_bar_fill.horde */
.realm_bar_fill.alliance,
.realm_bar_fill.horde {
  border: 2px solid #141a21;
  border-radius: 0;
  padding: 0.4rem;
}

/* Background color for realm_bar_fill.alliance */
.realm_bar_fill.alliance {
  background-color: #0070dd;
}

/* Background color for realm_bar_fill.horde */
.realm_bar_fill.horde {
  background-color: #c41e3b;
}

/* Customization for profile-avatar */
.section-topbar .membership-bar .membership-bar-profile .profile-avatar {
  border: 0.1rem solid var(--border-primary);
  box-shadow: none;
}

/* Border color change on hover and active for profile-avatar */
.section-topbar .membership-bar .membership-bar-profile:hover,
.section-topbar .membership-bar .membership-bar-profile:active {
  border-color: var(--border-secondary);
}

/* Customization for sidebox */
.sidebox {
  background-color: var(--bg-darker);
  background-image: none;
  border: 0.1rem solid var(--border);
  border-radius: 0;
  box-shadow: none;
}

/* Padding for card-body inside sidebox */
.sidebox .card-body {
  padding: 0;
}

/* Customization for sidebox-body */
.sidebox .sidebox-body {
  color: var(--txt-secondary);
  height: auto;
  padding: 0.5rem;
  text-transform: uppercase;
  width: 100%;
}

/* Customization for silver-points and its pseudo-element */
.silver-points,
.silver-points:before {
  color: #d4d4d4;
  font-weight: 500;
  text-transform: uppercase;
}

/* Content for silver-points:before */
.silver-points:before {
  content: "\f51e";
  font-family: "FontAwesome";
}

/* Hide i inside silver-points */
.silver-points i {
  display: none;
}

/* Customization for sort */
.sort {
  display: none;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
}

/* Customization for popup messages */
.swal2-container.swal2-center > .swal2-popup {
  color: var(--txt-secondary);
  text-transform: uppercase;
  border: 0.1rem solid var(--border-light);
  border-radius: 0;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  background-color: var(--bg-dark);
  background-image: none;
}

.swal2-title {
  color: var(--txt-primary);
  font-size: 2em;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  word-wrap: break-word;
}

/* Customization for confirm button in popup messages */
.swal2-styled.swal2-confirm {
  background-color: var(--btn-primary) !important;
  border-bottom: 0.3rem solid var(--btn-primary-border-bottom) !important;
  color: var(--btn-txt-dark);
  font-size: 1rem;
  font-weight: 600;
  text-shadow: none;
  font-style: normal;
  text-transform: uppercase;
  box-shadow: none !important;
}

/* Customization for cancel button in popup messages */
.swal2-deny {
  background-color: var(--btn-cancel) !important;
  border-bottom: 0.3rem solid var(--btn-cancel-border-bottom) !important;
  color: var(--btn-txt-dark);
  font-size: 1rem;
  font-weight: 600;
  text-shadow: none;
  font-style: normal;
  text-transform: uppercase;
  box-shadow: none !important;
  transition: all 3s ease;
}

/* Customization for user-avatar */
.user-avatar {
  display: inline-block;
  height: 150px;
  position: relative;
  width: 150px;
}

/* Customization for avatar-change-text inside user-avatar */
.user-avatar .avatar-change-text {
  background-color: rgba(19, 21, 30, 0.8);
  border-radius: 0 !important;
  color: var(--primary-color) !important;
  display: none;
  height: calc(100% + 2px);
  left: -0.1rem;
  position: absolute;
  text-transform: uppercase !important;
  top: -0.1rem;
  width: calc(100% + 2px);
}

/* Customization for img inside user-avatar */
.user-avatar img {
  border: 0.1rem solid var(--primary-color);
  height: 150px;
  width: 100%;
}

/* Customization for avatar-change-text inside user-avatar on hover */
.user-avatar:hover .avatar-change-text {
  display: flex;
}

/* Customization for vp_price_value */
.vp_price_value {
  color: var(--txt-dark) !important;
  font-family: "Poppins", sans-serif;
  text-shadow: none;
}

/* Customization for invalid form controls on focus */
.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus {
  border-color: var(--border);
  box-shadow: none;
}

.form-check-input:checked {
  background-color: var(--bg-light);
  border-color: var(--border);
}

.form-check-input:focus {
  border-color: var(--border);
  box-shadow: none;
}

/* Customization for hr */
hr {
  border-top: 0.1rem solid var(--border-light);
  color: var(--border-light);
  height: 0.1rem;
}

/* Customization for img.item_icon */
body .store_item img.item_icon {
  border: 0.1rem solid var(--border-light);
  margin-right: 0.1rem;
}

/* Customization for select and its options */
select,
select option,
select optgroup {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  text-transform: uppercase;
  background-color: var(--bg-dark);
  color: var(--txt-muted);
}

/* Additional customization for select */
select {
  background-position: 90% 50%;
  background-repeat: no-repeat;
  background-size: 1rem;
}

/* Customization for list items */
ul.list-unstyled li:not(:last-child) {
  border-bottom: 0.1rem solid var(--border-bottom);
  padding: 1rem;
}

/* Additional customization for list items with no-custom-style class */
ul.list-unstyled li:not(:last-child).no-custom-style {
  border-bottom: none;
  padding: 0;
}

/* Customization for form controls */
select,
textarea,
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="file"],
input[type="text"],
input[type="time"],
input[type="week"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="datetime-local"] {
  color: var(--txt-dark);
  font-size: 0.9rem;
  font-family: var(--font-family);
  font-weight: 500;
  border-radius: 0;
  background-color: var(--bg-light);
  border-color: var(--border-light);
  text-shadow: none;
}

/* Customization for form-select */
.form-select {
  cursor: pointer;
  padding: 0.8rem;
  font-size: 0.9rem;
  background-color: var(--bg-light);
  border: transparent;
  text-shadow: none;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  border-radius: 0;
}

/* Form - Search Box - Focus */
textarea:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="file"]:focus,
input[type="text"]:focus,
input[type="text"]:active,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="datetime-local"]:focus {
  color: var(--txt-dark);
  background-color: var(--bg-light);
  box-shadow: none;
}

/* Customization for form controls on focus */
select:focus,
textarea:focus,
input:focus {
  border: transparent;
  box-shadow: none !important;
}

/* Customization for input-group */
.input-group {
  gap: 1rem;
  display: flex;
  flex-direction: row;
  border: transparent;
}

/* Font size for countdown label */
.countdown-label {
  font-size: 1rem;
}

.footer-logo {
  width: 100%;
  max-width: 80%;
  margin: auto;
}

@media (max-width: 768px) {
  .footer-logo {
    max-width: 100%;
  }
}

/* Footer - Logo - Hover */
.footer-logo {
  transition: filter 0.3s;
}

.footer-logo:hover {
  filter: saturate(0) brightness(1.2);
}

/* Textures */
.texture::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='0.2'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' seed='3' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='18' specularConstant='0.2' specularExponent='20' lighting-color='%23eaeaea' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='95'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%230e1016'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23eaeaea' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E");
  background-size: 350px 350px;
  background-repeat: repeat;
  z-index: -1;
  opacity: 1;
}

/* Button - Return To Top Button */
#return-to-top {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

#return-to-top.show {
  opacity: 1;
}

/* Notice Bar */
.notice-bar {
  overflow: hidden;
  border-bottom: 0.1rem solid var(--border-light);
}

/* Notice Bar - Animation */
.notice-bar::before,
.notice-bar::after {
  content: "";
  position: absolute;
  top: 49%;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, transparent, #ff0019, transparent);
  animation: backgroundShine 3s linear infinite;
  opacity: 1;
}

.notice-bar::before {
  transform: scaleY(3%);
}

.notice-bar::after {
  filter: blur(6px);
  opacity: 0.1;
}

@keyframes backgroundShine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* News Article Image */
.img-height {
  height: 20rem;
  object-fit: cover;
}

/* Maintenance Page */
.maintenance-margin {
  margin-top: 10rem;
}

.maintenance-logo {
  width: 400px; /* Adjust as needed */
  margin: auto;
}