/* ---------------- CHANGE THEME COLOR SETTINGS ---------------- */

:root {

  /* Fonts */

  --font-family: 'Poppins', sans-serif;

  /* --font-weight: 600; */



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

  text-wrap: balance;

}



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 {

  font-family: "Poppins", sans-serif;

  font-weight: 500;

  color: var(--txt-primary);

  text-transform: uppercase;

  transition: none;

  font-size: 1.1rem;

}



.nav-link:hover,

.nav-link:focus,

.nav-item:hover {

  font-family: "Poppins", sans-serif;

  color: var(--txt-secondary) !important;

  background-color: var(--bg-darker);

}



.nav-link.active {

  font-family: "Poppins", sans-serif;

  color: var(--txt-secondary) !important;

  border-radius: 0rem;

}



.nav-link:focus-visible {

  font-family: "Poppins", sans-serif;

  box-shadow: none;

}



/* Navbar - Default State */

.header .navbar .navbar-nav .nav-item .nav-link {

  font-family: "Poppins", sans-serif;

  font-weight: 500;

  font-size: 1.1rem;

  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 {

  font-family: "Poppins", sans-serif;

  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-family: "Poppins", sans-serif;

  font-weight: 500;

  text-decoration: none;

  text-shadow: none;

}



a:hover {

  color: var(--txt-secondary);

}



span {

  font-family: "Poppins", sans-serif;

  font-weight: 500;

}



/* Headings */

h1,

h2,

h3,

h4,

h5,

h6 {

  color: var(--txt-primary);

  font-family: "Poppins", sans-serif;

  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;

  font-family: "Poppins", sans-serif;

  font-weight: 500;

  font-size: 1rem;

}



.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: 40vh; */

  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: 0.3;

}

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

  font-weight: 600;

}



/* 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-family: "Poppins", sans-serif;

  font-weight: 500;

  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);

}



/* Common Tooltip Styles */

.tooltip, .tooltip-inner, #fusion_tooltip, .fusion_tooltip {

  border-radius: 0.25rem;

  box-shadow: none;

  text-transform: capitalize;

}



/* Bootstrap Tooltip */

.tooltip {

  background-color: var(--bg-darker);

  border: 0.1rem solid var(--border-dark);

  color: var(--txt-secondary) !important;

  font-size: 0.95rem;

}



.tooltip-inner {

  /* padding: 0.5rem; */

  color: var(--txt-secondary);

  background-color: var(--bg-darker);

}



/* FusionGEN Tooltip */

#fusion_tooltip,

.fusion_tooltip {

  background-color: var(--bg-dark);

  border: 0.1rem solid var(--border-light);

  color: var(--txt-secondary);

  padding: 1rem;

  font-size: 0.8rem;

}



/* Tooltip - Hide Arrow */

.bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {

  display: none !important;

}



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

  font-family: "Poppins", sans-serif;

  font-weight: 500;

  font-size: 1rem;

}



/* 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(/#nnnoise-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: 25vh;

  object-fit: cover;

}



.img-height-news {

  height: 15vh;

  object-fit: cover;

}



/* Player & Guild of the month Image */

.img-height-month {

  height: 25vh;

  object-fit: cover;

}



/* Maintenance Page */

.maintenance-margin {

  margin-top: 10rem;

}



.maintenance-logo {

  width: 400px;

  margin: auto;

}
/*
     FILE ARCHIVED ON 23:42:48 Jul 31, 2025 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 10:30:14 Apr 08, 2026.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  capture_cache.get: 56.808
  captures_list: 0.688
  exclusion.robots: 0.019
  exclusion.robots.policy: 0.007
  esindex: 0.009
  cdx.remote: 174.693
  LoadShardBlock: 121.027 (3)
  PetaboxLoader3.datanode: 564.794 (5)
  load_resource: 786.39 (2)
  PetaboxLoader3.resolve: 268.245 (2)
*/