@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&display=swap');

@font-face {

  font-family: 'Futura-Book';

  src: url('../fonts/Futura-Book.ttf');

  font-weight: normal;

  font-style: normal;

}



@font-face {

  font-family: 'GothamCondensedMedium';

  src: url('../fonts/GothamCondensed-Medium.otf');

  font-weight: normal;

  font-style: normal;

}



@font-face {

  font-family: 'Inter-Black';

  src: url('../fonts/Inter-Black.ttf');

  font-weight: normal;

  font-style: normal;

}



@font-face {

  font-family: 'Inter-Bold';

  src: url('../fonts/Inter-Bold.ttf');

  font-weight: normal;

  font-style: normal;

}



@font-face {

  font-family: 'Inter-ExtraBold';

  src: url('../fonts/Inter-ExtraBold.ttf');

  font-weight: normal;

  font-style: normal;

}



@font-face {

  font-family: 'Inter-ExtraLight';

  src: url('../fonts/Inter-ExtraLight.ttf');

  font-weight: normal;

  font-style: normal;

}



@font-face {

  font-family: 'Inter-Light';

  src: url('../fonts/Inter-Light.ttf');

  font-weight: normal;

  font-style: normal;

}



@font-face {

  font-family: 'Inter-Medium';

  src: url('../fonts/Inter-Medium.ttf');

  font-weight: normal;

  font-style: normal;

}



@font-face {

  font-family: 'Inter-Regular';

  src: url('../fonts/Inter-Regular.ttf');

  font-weight: normal;

  font-style: normal;

}



@font-face {

  font-family: 'Inter-SemiBold';

  src: url('../fonts/Inter-SemiBold.ttf');

  font-weight: normal;

  font-style: normal;

}



@font-face {

  font-family: 'Inter-Thin';

  src: url('../fonts/Inter-Thin.ttf');

  font-weight: normal;

  font-style: normal;

}



@font-face {

  font-family: 'Raleway-Bold';

  src: url('../fonts/Raleway-Bold.ttf');

  font-weight: normal;

  font-style: normal;

}



@font-face {

  font-family: 'SportyPro-Bold';

  src: url('../fonts/SportyPro-Bold.otf');

  font-weight: normal;

  font-style: normal;

}



@font-face {

  font-family: 'SportyPro-Regular';

  src: url('../fonts/SportyPro-Regular.otf');

  font-weight: normal;

  font-style: normal;

}



/*--------------------------------------------------------------

# General

--------------------------------------------------------------*/

:root {

  --themeTextColor: #a6a5a5;

  --themeColor: #486fcc;

  --themeHover: #84aaf6;

}



.text-color{

	color: var(--themeColor);

}



.text-hover{

	color: var(--themeHover);

}



body {

  font-family: "Open Sans", sans-serif;

  color: #444444;

}



a {

  color: var(--themeColor);

  text-decoration: none;

}



a:hover {

  color: var(--themeHover);

  text-decoration: none;

}



h1, h2, h3, h4, h5, h6 {

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

}



/*--------------------------------------------------------------

# Preloader

--------------------------------------------------------------*/

#preloader {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 9999;

  overflow: hidden;

  background: var(--bs-dark);

}



#preloader:before {

  content: "";

  position: fixed;

  top: calc(50% - 30px);

  left: calc(50% - 30px);

  border: 6px solid #37517e;

  border-top-color: #fff;

  border-bottom-color: #fff;

  border-radius: 50%;

  width: 60px;

  height: 60px;

  -webkit-animation: animate-preloader 1s linear infinite;

  animation: animate-preloader 1s linear infinite;

}



@-webkit-keyframes animate-preloader {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}



@keyframes animate-preloader {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}



/*--------------------------------------------------------------

# Back to top button

--------------------------------------------------------------*/

.back-to-top {

  position: fixed;

  visibility: hidden;

  opacity: 0;

  right: 15px;

  bottom: 40px;

  z-index: 996;

  background: var(--themeColor);

  width: 40px;

  height: 40px;

  border-radius: 50px;

  transition: all 0.4s;

}



.back-to-top i {

  font-size: 24px;

  color: #fff;

  line-height: 0;

}



.back-to-top:hover {

  background: #6bc1e9;

  color: #fff;

}



.back-to-top.active {

  visibility: visible;

  opacity: 1;

}



/*--------------------------------------------------------------

# Server Status

--------------------------------------------------------------*/



.server-status {

  background:rgba(0, 0, 0, 0.3);

  padding: 10px;

  max-width: 280px;

  margin: auto;

}



@media (max-width: 576px) {

  .server-time {

    display: none !important;

  }

}



/*--------------------------------------------------------------

# Header

--------------------------------------------------------------*/

#header {

  transition: all 0.3s;

  z-index: 997;

  padding: 5px 0;

  top: 0px;

}



#header.header-scrolled, #header.header-inner-pages {

  background: rgba(0, 0, 0, 0.7);

  top: 0px;

  padding: 5px 0;

}



#header .logo {

  font-size: 30px;

  margin: 0;

  padding: 0;

  line-height: 1;

  font-weight: 500;

  letter-spacing: 2px;

  text-transform: uppercase;

}



#header .logo a {

  color: #fff;

}



#header .logo img {

  max-height: -10px;

}



@-webkit-keyframes fall {

  0% {

      opacity: 0.9;

      top: 0

  }

  100% {

      opacity: 0.2;

      top: 100%

  }

}



@keyframes fall {

  0% {

      opacity: 0.9;

      top: 0

  }

  100% {

      opacity: 0.2;

      top: 100%

  }

}



@-webkit-keyframes blow-soft-left {

  0% {

      margin-left: 0

  }

  100% {

      margin-left: -50%

  }

}



@keyframes blow-soft-left {

  0% {

      margin-left: 0

  }

  100% {

      margin-left: -50%

  }

}



@-webkit-keyframes blow-medium-left {

  0% {

      margin-left: 0

  }

  100% {

      margin-left: -100%

  }

}



@keyframes blow-medium-left {

  0% {

      margin-left: 0

  }

  100% {

      margin-left: -100%

  }

}



@-webkit-keyframes blow-soft-right {

  0% {

      margin-left: 0

  }

  100% {

      margin-left: 50%

  }

}



@keyframes blow-soft-right {

  0% {

      margin-left: 0

  }

  100% {

      margin-left: 50%

  }

}



@-webkit-keyframes blow-medium-right {

  0% {

      margin-left: 0

  }

  100% {

      margin-left: 100%

  }

}



@keyframes blow-medium-right {

  0% {

      margin-left: 0

  }

  100% {

      margin-left: 100%

  }

}



@-webkit-keyframes sway-0 {

  0% {

      -webkit-transform: rotate(-5deg)

  }

  40% {

      -webkit-transform: rotate(28deg)

  }

  100% {

      -webkit-transform: rotate(3deg)

  }

}



@keyframes sway-0 {

  0% {

      -ms-transform: rotate(-5deg);

      transform: rotate(-5deg)

  }

  40% {

      -ms-transform: rotate(28deg);

      transform: rotate(28deg)

  }

  100% {

      -ms-transform: rotate(3deg);

      transform: rotate(3deg)

  }

}



@-webkit-keyframes sway-1 {

  0% {

      -webkit-transform: rotate(10deg)

  }

  40% {

      -webkit-transform: rotate(43deg)

  }

  100% {

      -webkit-transform: rotate(15deg)

  }

}



@keyframes sway-1 {

  0% {

      -ms-transform: rotate(10deg);

      transform: rotate(10deg)

  }

  40% {

      -ms-transform: rotate(43deg);

      transform: rotate(43deg)

  }

  100% {

      -ms-transform: rotate(15deg);

      transform: rotate(15deg)

  }

}



@-webkit-keyframes sway-2 {

  0% {

      -webkit-transform: rotate(15deg)

  }

  40% {

      -webkit-transform: rotate(56deg)

  }

  100% {

      -webkit-transform: rotate(22deg)

  }

}



@keyframes sway-2 {

  0% {

      -ms-transform: rotate(15deg);

      transform: rotate(15deg)

  }

  40% {

      -ms-transform: rotate(56deg);

      transform: rotate(56deg)

  }

  100% {

      -ms-transform: rotate(22deg);

      transform: rotate(22deg)

  }

}



@-webkit-keyframes sway-3 {

  0% {

      -webkit-transform: rotate(25deg)

  }

  40% {

      -webkit-transform: rotate(74deg)

  }

  100% {

      -webkit-transform: rotate(37deg)

  }

}



@keyframes sway-3 {

  0% {

      -ms-transform: rotate(25deg);

      transform: rotate(25deg)

  }

  40% {

      -ms-transform: rotate(74deg);

      transform: rotate(74deg)

  }

  100% {

      -ms-transform: rotate(37deg);

      transform: rotate(37deg)

  }

}



@-webkit-keyframes sway-4 {

  0% {

      -webkit-transform: rotate(40deg)

  }

  40% {

      -webkit-transform: rotate(68deg)

  }

  100% {

      -webkit-transform: rotate(25deg)

  }

}



@keyframes sway-4 {

  0% {

      -ms-transform: rotate(40deg);

      transform: rotate(40deg)

  }

  40% {

      -ms-transform: rotate(68deg);

      transform: rotate(68deg)

  }

  100% {

      -ms-transform: rotate(25deg);

      transform: rotate(25deg)

  }

}



@-webkit-keyframes sway-5 {

  0% {

      -webkit-transform: rotate(50deg)

  }

  40% {

      -webkit-transform: rotate(78deg)

  }

  100% {

      -webkit-transform: rotate(40deg)

  }

}



@keyframes sway-5 {

  0% {

      -ms-transform: rotate(50deg);

      transform: rotate(50deg)

  }

  40% {

      -ms-transform: rotate(78deg);

      transform: rotate(78deg)

  }

  100% {

      -ms-transform: rotate(40deg);

      transform: rotate(40deg)

  }

}



@-webkit-keyframes sway-6 {

  0% {

      -webkit-transform: rotate(65deg)

  }

  40% {

      -webkit-transform: rotate(92deg)

  }

  100% {

      -webkit-transform: rotate(58deg)

  }

}



@keyframes sway-6 {

  0% {

      -ms-transform: rotate(65deg);

      transform: rotate(65deg)

  }

  40% {

      -ms-transform: rotate(92deg);

      transform: rotate(92deg)

  }

  100% {

      -ms-transform: rotate(58deg);

      transform: rotate(58deg)

  }

}



@-webkit-keyframes sway-7 {

  0% {

      -webkit-transform: rotate(72deg)

  }

  40% {

      -webkit-transform: rotate(118deg)

  }

  100% {

      -webkit-transform: rotate(68deg)

  }

}



@keyframes sway-7 {

  0% {

      -ms-transform: rotate(72deg);

      transform: rotate(72deg)

  }

  40% {

      -ms-transform: rotate(118deg);

      transform: rotate(118deg)

  }

  100% {

      -ms-transform: rotate(68deg);

      transform: rotate(68deg)

  }

}



@-webkit-keyframes sway-8 {

  0% {

      -webkit-transform: rotate(94deg)

  }

  40% {

      -webkit-transform: rotate(136deg)

  }

  100% {

      -webkit-transform: rotate(82deg)

  }

}



@keyframes sway-8 {

  0% {

      -ms-transform: rotate(94deg);

      transform: rotate(94deg)

  }

  40% {

      -ms-transform: rotate(136deg);

      transform: rotate(136deg)

  }

  100% {

      -ms-transform: rotate(82deg);

      transform: rotate(82deg)

  }

}



.magic-circle {

  position: absolute;

	top: 70px;

	background-image: url('../img/magic-circle.png');

	width: 636px;

	height: 636px;

	background-size: 100% auto;

	left: 50%;

	margin-left: -300px;

  opacity: 0.6;

	-webkit-animation: rotate 120s linear infinite;

	animation: rotate 120s linear infinite;

}



@-webkit-keyframes rotate {

  from {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg); }

  to {

    -webkit-transform: rotate(360deg);

            transform: rotate(360deg); } 

}



@keyframes rotate {

  from {

    -webkit-transform: rotate(0deg);

            transform: rotate(0deg); }

  to {

    -webkit-transform: rotate(360deg);

            transform: rotate(360deg); } 

}





.smoke { position: absolute; left: 0; right: 0; top: 0px; height: 100vh; width: 100%; opacity: 0.7; background-image: url(../img/fog.png); background-position: left top; background-size: cover; background-repeat: repeat-x; -webkit-animation: smoke 30s linear infinite; animation: smoke 30s linear infinite; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; }



@-webkit-keyframes smoke { 0% { background-position: left -1920px top; }

	100% { background-position: left 1920px top; } }

  

@keyframes smoke { 0% { background-position: left -1920px top; }

	100% { background-position: left 1920px top; } }





/*--------------------------------------------------------------

# Navigation Menu

--------------------------------------------------------------*/

/**

* Desktop Navigation 

*/

.navbar {

  padding: 0;

}



.navbar ul {

  margin: 0;

  padding: 0;

  display: flex;

  list-style: none;

  align-items: center;

}



.navbar li {

  position: relative;

}



.navbar a, .navbar a:focus {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 10px 25px 10px 25px;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 15px;

  font-weight: 500;

  text-transform: uppercase;

  color: #fff;

  white-space: nowrap;

  transition: 0.3s;

}



.navbar a i, .navbar a:focus i {

  font-size: 12px;

  line-height: 0;

  margin-left: 5px;

}



.navbar a:hover, .navbar .active, .navbar .active:focus, .navbar li:hover > a {

  color: #fff;

}



.navbar a::after{

  content: '';

  position: absolute;

  width: 0px;

  height: 3px;

  left: 0%;

  bottom:0;

  background-color: white;

  transition: all ease-in-out .2s;

}

.navbar a:hover::after{

  width: 100%;

  left: 0;

  transition: all ease-in-out .2s;

}



.navbar .getstarted {

  padding: 8px 20px;

  margin-left: 30px;

  border-radius: 50px;

  color: #fff;

  font-size: 14px;

  border: 2px solid var(--themeColor);

  font-weight: 600;

}



.navbar .getstarted:hover {

  color: #fff;

  background: var(--themeColor);

}



.navbar .dropdown ul {

  display: block;

  position: absolute;

  left: 14px;

  top: calc(100% + 30px);

  margin: 0;

  padding: 10px 0;

  z-index: 99;

  opacity: 0;

  visibility: hidden;

  background: #fff;

  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);

  transition: 0.3s;

  border-radius: 4px;

}



.navbar .dropdown ul li {

  min-width: 200px;

}



.navbar .dropdown ul a {

  padding: 10px 20px;

  font-size: 14px;

  text-transform: none;

  font-weight: 500;

  color: #000;

}



.navbar .dropdown ul li a:hover {

	font-weight: 400;

  display: block;

  background: var(--themeColor);

	color: white !important;

}



.navbar .dropdown ul a i {

  font-size: 12px;

}



.navbar .dropdown ul a:hover, .navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {

  color: #47b2e4;

}



.navbar .dropdown:hover > ul {

  opacity: 1;

  top: 100%;

  visibility: visible;

}



.navbar .dropdown .dropdown ul {

  top: 0;

  left: calc(100% - 30px);

  visibility: hidden;

}



.navbar .dropdown .dropdown:hover > ul {

  opacity: 1;

  top: 0;

  left: 100%;

  visibility: visible;

}



@media (max-width: 1366px) {

  .navbar .dropdown .dropdown ul {

    left: -90%;

  }

  .navbar .dropdown .dropdown:hover > ul {

    left: -100%;

  }

}



.discord-nav {

  background: url(../img/discord-logo.png);

  width: 73px;

  height: 20px;

  margin-left: 30px;

}



.discord-nav:hover {

  background: url(../img/discord-logo-dark.png);

}



@media (max-width: 991px) {



  .discord-nav {

    background: url(../img/discord-logo-dark.png);

    width: 73px;

    height: 20px;

    margin-left: 20px;

    margin-top: 5px;

  }

  

  .discord-nav:hover {

    opacity: 0.5;

  }



}





/**

* Mobile Navigation 

*/

.mobile-nav-toggle {

  color: #fff;

  font-size: 28px;

  cursor: pointer;

  display: none;

  line-height: 0;

  transition: 0.5s;

}



.mobile-nav-toggle.bi-x {

  color: #fff;

}



@media (max-width: 991px) {

  .mobile-nav-toggle {

    display: block;

    position: fixed;

	  top: 15px;

	  right: 15px;

  }

  .navbar ul {

    display: none;

  }

}



.navbar-mobile {

  position: fixed;

  overflow: hidden;

  top: 0;

  right: 0;

  left: 0;

  bottom: 0;

  background: rgba(28, 27, 28, 0.9);

  transition: 0.3s;

  z-index: 999;

}



.navbar-mobile .mobile-nav-toggle {

  position: absolute;

  top: 15px;

  right: 15px;

}



.navbar-mobile ul {

  display: block;

  position: absolute;

  top: 55px;

  right: 15px;

  bottom: 15px;

  left: 15px;

  padding: 10px 0;

  border-radius: 10px;

  background-color: #fff;

  overflow-y: auto;

  transition: 0.3s;

}



.navbar-mobile a {

  padding: 10px 20px;

  font-size: 15px;

  color: #000;

}



.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {

  font-weight: 400;

  background: var(--themeColor);

	color: white !important;

}



.navbar-mobile .getstarted {

  margin: 15px;

  color: #37517e;

}



.navbar-mobile .dropdown ul {

  position: static;

  display: none;

  margin: 10px 20px;

  padding: 10px 0;

  z-index: 99;

  opacity: 1;

  visibility: visible;

  background: #fff;

  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);

}



.navbar-mobile .dropdown ul li {

  min-width: 200px;

}



.navbar-mobile .dropdown ul a {

  padding: 10px 20px;

}



.navbar-mobile .dropdown ul a i {

  font-size: 12px;

}



.navbar-mobile .dropdown ul a:hover, .navbar-mobile .dropdown ul .active:hover, .navbar-mobile .dropdown ul li:hover > a {

  color: #47b2e4;

}



.navbar-mobile .dropdown > .dropdown-active {

  display: block;

}



/*--------------------------------------------------------------

# Hero Section

--------------------------------------------------------------*/

#hero {

  width: 100%;

  height: 100vh;

  background: url('../img/main-bg.jpg') top center no-repeat;

  background-size: cover;

}



#hero .main-bg {

  padding-top: 10px;

  width: 100%;

  max-width: 1600px;

  margin: auto;

}





#hero .animated {

  animation: up-down 2s ease-in-out infinite alternate-reverse both;

}



.char-render {

  background: url('../img/char-render.png') center no-repeat;

  height: 892px;

}



.center-intro {

  padding-top: 25vh;

}



@media (max-width: 991px) {

  #hero {

    height: 100vh;

    text-align: center;

  }

  #hero .animated {

    -webkit-animation: none;

    animation: none;

  }

  #hero .hero-img {

    text-align: center;

  }

  #hero .hero-img img {

    width: 50%;

  }

}



@media (max-width: 768px) {

  #hero h1 {

    font-size: 28px;

    line-height: 36px;

  }

  #hero h2 {

    font-size: 18px;

    line-height: 24px;

    margin-bottom: 30px;

  }

  #hero .hero-img img {

    width: 70%;

  }

  .char-render {

    background: none;

  }

}



@media (max-width: 575px) {

  #hero .hero-img img {

    width: 80%;

  }

  #hero .btn-get-started {

    font-size: 16px;

    padding: 10px 24px 11px 24px;

  }

}



@-webkit-keyframes up-down {

  0% {

    transform: translateY(10px);

  }

  100% {

    transform: translateY(-10px);

  }

}



@keyframes up-down {

  0% {

    transform: translateY(10px);

  }

  100% {

    transform: translateY(-10px);

  }

}



/*--------------------------------------------------------------

# Sections General

--------------------------------------------------------------*/

section {

  padding: 100px 0;

  overflow: hidden;

}



.section-bg {

  background-color: #f3f5fa;

}



.section-title {

  text-align: center;

  padding-bottom: 30px;

}



.section-title h2 {

  font-family: 'Futura-Book';

  font-weight: bold;

  font-size: 41pt;

  text-transform: uppercase;

  margin-bottom: 20px;

  padding-bottom: 20px;

  position: relative;

  color: var(--themeColor);

}



.section-title p {

  margin-bottom: 0;

}





/* --------------------------------

 News & Updates Section

-------------------------------- */



.scroll-arrow {

  width: 100px;

  height: 0px;

  margin: auto;

  text-align: center;

  position: relative;

  top: -115px;

  -webkit-animation: scroll-down 1.5s infinite;

  animation: scroll-down 1.5s infinite;

}



@-webkit-keyframes scroll-down {

  0% {

      -webkit-transform: translate(0, 0);

      opacity: 0;

  }



  50% {

      opacity: 1;

  }



  100% {

      -webkit-transform: translate(0, 30px);

      opacity: 0;

  }

}



@keyframes scrolldown {

  0% {

      transform: rotate(-45deg) translate(0, 0);

      opacity: 0;

  }



  50% {

      opacity: 1;

  }



  100% {

      transform: rotate(-45deg) translate(-20px, 20px);

      opacity: 0;

  }

}





.newsupdates {

  background: url('../img/bg-0.jpg') no-repeat;

  background-size: cover;

}





.news-carousel {

  background: url('../img/news-carousel/news-bg.png');

  background-repeat: no-repeat;

  background-size: contain;

  max-width: 654px;

  max-height: 392px;

  padding: 10px 7px 10px 10px;

}



.news-carousel .owl-carousel .owl-item {

	transform: scale(1);

  border: 5px solid white;

}



.news-list th {

  font-family: Arial, Helvetica, sans-serif;

  font-size: 19pt;

  font-weight: 100;

  color: #a6a5a5;

  border-bottom: 3px solid #a6a5a5; 

}



.news-list td, .news-list td a {

  color: #a6a5a5; 

  font-family: Arial, Helvetica, sans-serif; 

  font-size: 12pt;

  line-height: 26pt;

}





.news-list td a:hover {

  color: #000;

  transition: all 0.6s;

  margin-left: 5px;

}



/* ============ */

/* ============ */

/* ============ */





.owl-carousel .owl-nav{

    overflow: hidden;

    height: 0px;

}



.owl-theme .owl-dots .owl-dot.active span, 

.owl-theme .owl-dots .owl-dot:hover span {

	background: #2caae1;

}



.owl-theme .owl-dots {

	margin: 0 auto!important;

}



.owl-carousel .item {

	text-align: center;

}

.owl-carousel .nav-btn{

	height: 25px;

	position: absolute;

	width: 26px;

	cursor: pointer;

	top: 43% !important;

}



.owl-carousel .owl-prev.disabled,

.owl-carousel .owl-next.disabled{

	pointer-events: none;

	opacity: 0.2;

}



.owl-carousel .prev-slide{

	background: url('../img/nav-icon.png') no-repeat scroll 0 0;

	height: 25px;

	left: -33px;

}

.owl-carousel .next-slide{

	background: url('../img/nav-icon.png') no-repeat scroll -30px 0;

	height: 25px;

	right: -33px;

}

.owl-carousel .prev-slide:hover{

	background-position: 0px -30px;

}

.owl-carousel .next-slide:hover{

	background-position: -30px -30px;

}



.owl-carousel .owl-item{

  transition: .4s ease all;

  transform: scale(0.85);

}





.owl-carousel .center{

  opacity:1;

  transform: scale(1);

  text-align: left !important;

} 





/* --------------------------------

 Game Information Section

-------------------------------- */



.game-info {

  background: url('../img/game-info-bg.png');

  background-repeat: no-repeat;

  background-size: cover;

  max-width: 1145px;

  margin: auto;

}



.download-campaign {

  background: url('../img/download-campaign.png');

  background-repeat: no-repeat;

  width: 383px;

  height: 677px;

  margin-top: 150px;

  padding: 270px 0 0 0px;

  color: #705b4a;

  font-size: 11pt;

  text-align: center;

}



.serverinfo {

  background: url('../img/server-info-bg.png');

  background-size: 100%;

  background-repeat: no-repeat;

  max-width: 592px;

  min-height: 408px;

  padding: 30px;

  margin-top: 65px;

}







@media (min-width: 1200px) {

  .game-info {

    height: 725px;

  }

}



@media (max-width: 991px) {

  .game-info {

    background: url('../img/game-info-mob-bg.png');

    background-repeat: no-repeat;

    background-size: contain;

    min-height: 1190px;

  }

  

}



@media (max-width: 768px) {

  .serverinfo {

    background: url('../img/server-info-mob-bg.png');

    background-size: 100%;

    background-repeat: no-repeat;

  }  

}



/* --------------------------------

 Jobs Information Section

-------------------------------- */



.jobsinfo {

  background: #6b6969;

  padding-bottom: 0 !important;

}



.class-emblem {

  width: 120px;

}



.class-emblem img {

  min-width: 120px !important;

}



.classtitle {

  margin-top: 200px;

  height: 617px !important;

}



.classtype {

  font-family: Arial, Helvetica, sans-serif;

  font-size: 15pt;

  margin-bottom: 0;

	margin-top: 15px;

}



.classname {

  font-family: Arial, Helvetica, sans-serif;

  font-size: 46pt;

  line-height: 46pt;

}



.classdesc {

  font-family: Arial, Helvetica, sans-serif;

  font-size: 12pt;

}



.jobs-info {

  margin-top: -100px;

}



.jobs-visual {

  position: absolute;

  z-index: -1;

  margin-left: 150px;

	width: 100%;

}



@media (max-width: 768px) {

  .jobs-visual {

    margin-left: 0px;

    margin-top: 50px;

  }

}



.slider-nav { position: relative; bottom: 0; left: 0; right: 0; z-index: 10; margin-top: -280px; }

		

.thumbs {

	width: 80%;

	display: table;

	table-layout: fixed;

	padding: 0;

	margin: 20px auto;

}



.thumb { width: 5%; display: table-cell; vertical-align: middle; position: relative; cursor: pointer }

.thumb img { width: 100%; height: auto; display: block; filter: grayscale(100); transform: scale(0.8)}

.thumb span { font-family: monospace; font-size: 1.2em; line-height: 1; color: #fff; text-align: center; font-weight: bold; text-decoration: none; display: block; position: absolute; top: 50%; left: 0; right: 0; padding: 1em 0; margin-top: -1.6em; }



.thumb:hover img,

.thumb.active img { filter: grayscale(0) ;  transform: scale(1); transition: all 0.3s ease}





.jobs-carousel .prev-slide{

	background: url('../img/jobs-nav-icon.png') no-repeat scroll 0 0;

	height: 27px;

	left: -33px;

}

.jobs-carousel .next-slide{

	background: url('../img/jobs-nav-icon.png') no-repeat scroll -30px 0;

	height: 27px;

	right: -33px;

}

.jobs-carousel.prev-slide:hover{

	background-position: 0px -31px;

}

.jobs-carousel .next-slide:hover{

	background-position: -30px -31px;

}



.jobs-carousel .nav-btn{

	height: 25px;

	position: absolute;

	width: 26px;

	cursor: pointer;

	top: 640px !important;

}





/* --------------------------------

 Server Features Section

-------------------------------- */



.serverfeatures {

  background: url('../img/bg-1.jpg') no-repeat;

  background-size: cover;

}





/*--------------------------------------------------------------

# Breadcrumbs

--------------------------------------------------------------*/

.breadcrumbs {

  padding: 15px 0;

  background: #f3f5fa;

  min-height: 40px;

  margin-top: 72px;

}



@media (max-width: 992px) {

  .breadcrumbs {

    margin-top: 68px;

  }

}



.breadcrumbs h2 {

  font-size: 28px;

  font-weight: 600;

  color: #37517e;

}



.breadcrumbs ol {

  display: flex;

  flex-wrap: wrap;

  list-style: none;

  padding: 0 0 10px 0;

  margin: 0;

  font-size: 14px;

}



.breadcrumbs ol li + li {

  padding-left: 10px;

}



.breadcrumbs ol li + li::before {

  display: inline-block;

  padding-right: 10px;

  color: #4668a2;

  content: "/";

}



/* ------------------------

	Footer

--------------------------*/



.footer {

  background: #161616;

  padding: 60px 0;

	border-top: 1px solid #242424;

  color: #aaa9a9;

  font-size: 11pt;

  position: relative;

	top: 2px;

}



.footer .nav-link {

  font-family: Arial, Helvetica, sans-serif;

	font-size: 11pt;

	color: #aaa9a9;

	border-right: 1px solid #817f7f;

	padding: 0 1rem;

	line-height: 9pt;

	margin-bottom: 15px;

}





.footer .nav-link:first-child {

	padding: 0 1rem 0 0;

}



.footer .nav-link:last-child {

	border: 0;

}



@media (max-width: 991.98px){	

	.footer .nav-link:first-child {

		padding: 0 1rem;

	}



	.footer .nav-link {

		border: 0;

	}

	

}





.footer .nav-link:hover {

	color: var(--themeHover)

}



.footer p {

  color: #aaa9a9;

  font-size: 11pt;

}







/* --------------------------------

 Flux Pages Design Styles

-------------------------------- */



#submenu {

	color: var(--themeTextColor);

	background: none;

	font-size: 10pt;

}



#submenu a{ 

	color: var(--themeColor);

}



#submenu a:hover {

	text-decoration: none;

	color: var(--themeTextColor);

}





.admin-menu {

	color: var(--themeTextColor);

	background: none;

	font-size: 10pt;

}



.admin-menu a{

	color: var(--themeColor);

}



.admin-menu a:hover {

	text-decoration: none;

	color: var(--themeTextColor);

}







.admin-menu a:after {

	content: ' / ';

	color: var(--themeTextColor);

	text-decoration: none;

}







.toggler a {

	color: var(--themeColor);

}







.pages .page-num {

	color: var(--themeColor);

}







.pages .current-page {

	color: #cc9808 !important;

	font-weight: bold;

}







.pages .page-prev, .pages .page-next {

	color: var(--themeTextColor);

}



.horizontal-table {

  display: block;

  width: 100%;

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

  -ms-overflow-style: -ms-autohiding-scrollbar;

}



.horizontal-table > .table-bordered {

    border: 0; 

}





.vertical-table {

  display: block;

  width: 100%;

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

  -ms-overflow-style: -ms-autohiding-scrollbar;

}



.horizontal-table > .table-bordered {

    border: 0;

}   



.global-container {

	max-width: 1120px;

	font-family: 'Inter-Regular';

	border-radius: 5px;

	margin: 50px auto;

	color: var(--themeTextColor);

	font-size: 9pt;

	background: url('../img/downloads-bg.png') top center no-repeat;

	padding: 50px 15px;

}



.global-container h2,h3 {

	font-size: 25pt;

	text-decoration-color: var(--themeTextColor);

	width: unset;

	/* text-align: center; */

	margin: 20px 0px;

	/* border-bottom: 2px solid var(--themeTextColor); */

	padding: 5px 0;

	font-family:'Inter-Bold';

	color: var(--themeTextColor);

	text-transform: none;

}



.global-container p {

	font-family: 'Inter-Medium';

	font-size: 10pt;

}



.customborder-bottom {

	padding-bottom: 15px;

	border-bottom: 2px solid var(--themeTextColor);

}



.fs-medium {

	font-size: 90% !important;

}



.fs-small {

	font-size: 75% !important;

}



.security-code {

	background-color: #b7b7b7;

	height: auto;

	border: #8e8e8e;

}



.reg-label {

	font-family: 'Inter-Bold' !important;

	font-size: 9pt !important;

	color: var(--themeTextColor) !important;

}



.birthdate select {

	background-color: #212529!important;

	color: #fff!important;

	padding: 0.4rem 1rem!important;

	-moz-box-shadow: inset 0 0 7px #141414;

	-webkit-box-shadow: inset 0 0 7px #141414;

	box-shadow: inset 0 0 7px #141414;

}



h3 {

	font-size: 30pt;

}



.global-container a {

	color: var(--themeColor);

}





.global-container:empty {

	display: none;

}







.horizontal-table td {

	padding: 5px 10px;

	background: #fff;

}



	



.horizontal-table th, .horizontal-table td {

	font-size: 9pt;

	border: 1px solid var(--themeTextColor);

}







.horizontal-table th {

	padding: 5px 10px;

	background-color: transparent;

}







.vertical-table td {

	padding: 5px 10px;

	background: #fff;

}



	



.vertical-table th, .vertical-table td {



	font-size: 9pt;

	border: 1px solid var(--themeTextColor);

}





.vertical-table th {

	padding: 5px 10px;

	background-color: transparent;

}





.generic-form {

	border: 1px solid var(--themeColor);

	background: none;

}





.generic-form-table td p {

	color: var(--themeColor);

}



.search-form label, .search-form2 label {

	color: var(--themeColor);

}





.sortable {

	color: #38a6e8;

	text-decoration: underline;

}





.sortable:hover {

	color: #fff;

}





#pagemenu {

	color: var(--themeTextColor);

}





#pagemenu a{

	color: var(--themeColor);

}



.character-stats .stat-name {

	color: var(--themeColor);

}



.character-stats .stat-value {

	color: var(--themeTextColor);

}





.generic-form-table th label , .generic-form-table td div, .horizontal-table td, .horizontal-table th, .vertical-table th, .vertical-table td{

	color: var(--themeTextColor)

}



.server-time  {

    color: #fff;

    font-size: 12pt;

}	

	

.downloads-container {

    border: 2px solid #564538;

    border-radius: 15px;

}

	

.heading-container {

    background: linear-gradient(180deg, rgba(85,68,55,1) 30%, rgba(111,90,74,1) 100%);

    font-family: 'Inter-Bold';

    font-size: 12pt !important;

    padding: 5px 10px;

    border-radius: 12px 12px 0 0;

}




/* PRESTIGE HIGHLIGHT CARDS */
.prestige-highlights {
  position: relative;
  z-index: 4;
  margin-top: -72px;
  padding: 0 0 56px;
}

.pr-highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch;
}

.pr-highlight-card {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  padding: 30px 28px 26px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(106, 183, 255, 0.42);
  box-shadow:
    0 18px 40px rgba(86, 148, 224, 0.10),
    inset 0 0 0 1px rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.pr-highlight-card::before {
  content: "";
  position: absolute;
  inset: -120% auto auto -30%;
  width: 52%;
  height: 260%;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,0.42), rgba(255,255,255,0));
  transform: rotate(18deg);
  animation: prCardShine 5.2s linear infinite;
  pointer-events: none;
  opacity: 0.55;
}

.pr-highlight-card:hover {
  transform: translateY(-6px);
  border-color: rgba(66, 151, 240, 0.55);
  box-shadow:
    0 22px 46px rgba(86, 148, 224, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

.pr-highlight-icon {
  position: relative;
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(221,243,255,0.92));
  box-shadow: 0 10px 22px rgba(102,182,255,0.18);
  animation: prIconFloat 3.4s ease-in-out infinite;
}

.pr-highlight-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.06) 35%, rgba(255,255,255,0.75) 50%, rgba(255,255,255,0.06) 65%, transparent 100%);
  transform: translateX(-140%);
  animation: prIconShine 3.6s ease-in-out infinite;
}

.pr-highlight-card:hover .pr-highlight-icon {
  animation-duration: 2.4s;
}

.pr-highlight-icon i {
  position: relative;
  z-index: 1;
  font-size: 24px;
  color: #3a96ef;
}

.pr-highlight-card:nth-child(2) .pr-highlight-icon i {
  color: #4aa6ff;
}

.pr-highlight-card:nth-child(3) .pr-highlight-icon i {
  color: #45b7ff;
}

.pr-highlight-card:nth-child(4) .pr-highlight-icon i {
  color: #59a8f0;
}

.pr-highlight-card:nth-child(5) .pr-highlight-icon i {
  color: #2f8fe8;
}

.pr-highlight-card h3 {
  margin: 0 0 12px;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #2f8fe8;
}

.pr-highlight-card p {
  margin: 0;
  font-family: 'Inter-Regular', Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: #6d86a6;
}

@keyframes prIconFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

@keyframes prIconShine {
  0% { transform: translateX(-140%); opacity: 0; }
  15% { opacity: 1; }
  55% { transform: translateX(160%); opacity: 1; }
  100% { transform: translateX(160%); opacity: 0; }
}

@keyframes prCardShine {
  0% { transform: translateX(-180%) rotate(18deg); opacity: 0; }
  14% { opacity: 0.35; }
  40% { transform: translateX(260%) rotate(18deg); opacity: 0.35; }
  100% { transform: translateX(260%) rotate(18deg); opacity: 0; }
}

@media (max-width: 1199px) {
  .pr-highlight-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .prestige-highlights {
    margin-top: -34px;
    padding-bottom: 40px;
  }

  .pr-highlight-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .pr-highlight-card {
    min-height: auto;
    padding: 26px 20px 22px;
    border-radius: 22px;
  }

  .pr-highlight-card h3 {
    font-size: 18px;
  }

  .pr-highlight-card p {
    font-size: 15px;
  }
}


/* PRESTIGE HIGHLIGHT LAYOUT TUNE */
.prestige-highlights {
  margin-top: -210px !important;
  padding: 0 0 42px !important;
}

.pr-highlight-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

.pr-highlight-card {
  min-height: 172px !important;
  padding: 20px 16px 18px !important;
  border-radius: 22px !important;
}

.pr-highlight-card::before {
  opacity: 0.38 !important;
}

.pr-highlight-icon {
  width: 52px !important;
  height: 52px !important;
  margin: 0 auto 12px !important;
  border-radius: 16px !important;
}

.pr-highlight-icon i {
  font-size: 20px !important;
}

.pr-highlight-card h3 {
  font-size: 13px !important;
  line-height: 1.25 !important;
  letter-spacing: 0.06em !important;
  margin: 0 0 10px !important;
}

.pr-highlight-card p {
  font-size: 11px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

@media (max-width: 1399px) {
  .prestige-highlights {
    margin-top: -180px !important;
  }

  .pr-highlight-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .pr-highlight-card {
    min-height: 166px !important;
    padding: 18px 14px 16px !important;
  }

  .pr-highlight-card h3 {
    font-size: 12px !important;
  }

  .pr-highlight-card p {
    font-size: 10px !important;
  }
}

@media (max-width: 1199px) {
  .prestige-highlights {
    margin-top: -120px !important;
  }

  .pr-highlight-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

@media (max-width: 767px) {
  .prestige-highlights {
    margin-top: -34px !important;
    padding-bottom: 34px !important;
  }

  .pr-highlight-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .pr-highlight-card {
    min-height: auto !important;
    padding: 22px 18px 18px !important;
  }

  .pr-highlight-card h3 {
    font-size: 16px !important;
  }

  .pr-highlight-card p {
    font-size: 14px !important;
  }
}




/* HERO IMAGE SIDE PATCH */
#hero .main-bg,
.char-render {
  position: relative !important;
}

.char-render {
  background-position: right 6% bottom !important;
  background-repeat: no-repeat !important;
  background-size: min(980px, 64vw) auto !important;
  height: 892px !important;
}

@media (max-width: 1399px) {
  .char-render {
    background-position: right 2% bottom !important;
    background-size: min(900px, 66vw) auto !important;
  }
}

@media (max-width: 991px) {
  .char-render {
    background-position: center bottom !important;
    background-size: min(720px, 92vw) auto !important;
    height: 720px !important;
  }
}

@media (max-width: 768px) {
  .char-render {
    background: none !important;
  }
}


/* HERO PNG CENTER */
.char-render{
  background-position: center bottom !important;
  background-size: 1200px auto !important;
}


/* HERO SHOOTING STARS PATCH */
#hero {
  position: relative !important;
  overflow: hidden !important;
}

.hero-stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

#hero .main-bg {
  position: relative;
  z-index: 2;
}

.char-render,
.hero-logo-block,
.center-intro {
  position: relative;
  z-index: 3;
}

.hero-stars span {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 2px;
  height: 2px;
  background: rgba(255,255,255,0.95);
  border-radius: 999px;
  box-shadow:
    0 0 0 4px rgba(255,255,255,0.08),
    0 0 10px rgba(255,255,255,0.9),
    0 0 22px rgba(135, 212, 255, 0.65);
  animation: heroStarFall linear infinite;
  opacity: 0.75;
}

.hero-stars span::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 140px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,255,255,0));
}

.hero-stars span:nth-child(1) {
  top: 10%;
  left: 62%;
  animation-duration: 5.8s;
  animation-delay: 0s;
}
.hero-stars span:nth-child(2) {
  top: 18%;
  left: 78%;
  animation-duration: 7.2s;
  animation-delay: 1.1s;
}
.hero-stars span:nth-child(3) {
  top: 26%;
  left: 70%;
  animation-duration: 6.4s;
  animation-delay: 2.6s;
}
.hero-stars span:nth-child(4) {
  top: 34%;
  left: 84%;
  animation-duration: 8.0s;
  animation-delay: 0.8s;
}
.hero-stars span:nth-child(5) {
  top: 42%;
  left: 58%;
  animation-duration: 6.8s;
  animation-delay: 3.4s;
}
.hero-stars span:nth-child(6) {
  top: 12%;
  left: 88%;
  animation-duration: 7.6s;
  animation-delay: 2s;
}
.hero-stars span:nth-child(7) {
  top: 30%;
  left: 92%;
  animation-duration: 5.9s;
  animation-delay: 4.2s;
}
.hero-stars span:nth-child(8) {
  top: 22%;
  left: 66%;
  animation-duration: 7.4s;
  animation-delay: 5s;
}

@keyframes heroStarFall {
  0% {
    transform: rotate(215deg) translateX(0);
    opacity: 0;
  }
  8% {
    opacity: 0.9;
  }
  70% {
    opacity: 0.9;
  }
  100% {
    transform: rotate(215deg) translateX(-900px);
    opacity: 0;
  }
}

@media (max-width: 991px) {
  .hero-stars span::before {
    width: 90px;
  }
}




/* HERO STARS LEFT RIGHT BALANCE */
.hero-stars span:nth-child(1) {
  top: 12% !important;
  left: 12% !important;
}
.hero-stars span:nth-child(2) {
  top: 20% !important;
  left: 24% !important;
}
.hero-stars span:nth-child(3) {
  top: 30% !important;
  left: 18% !important;
}
.hero-stars span:nth-child(4) {
  top: 40% !important;
  left: 30% !important;
}
.hero-stars span:nth-child(5) {
  top: 10% !important;
  left: 62% !important;
}
.hero-stars span:nth-child(6) {
  top: 18% !important;
  left: 78% !important;
}
.hero-stars span:nth-child(7) {
  top: 28% !important;
  left: 70% !important;
}
.hero-stars span:nth-child(8) {
  top: 38% !important;
  left: 86% !important;
}



/* FINAL PAGE MICRO POLISH */
.prestige-highlights {
  margin-top: -228px !important;
  padding: 0 0 34px !important;
}

.pr-highlight-grid {
  gap: 12px !important;
  align-items: stretch !important;
}

.pr-highlight-card {
  min-height: 164px !important;
  padding: 16px 14px 14px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.64) !important;
  border: 1px solid rgba(106, 183, 255, 0.34) !important;
  box-shadow:
    0 14px 32px rgba(86, 148, 224, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.38) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.pr-highlight-card::before {
  opacity: 0.14 !important;
}

.pr-highlight-icon {
  width: 48px !important;
  height: 48px !important;
  margin: 0 auto 10px !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 18px rgba(102,182,255,0.12) !important;
}

.pr-highlight-icon i {
  font-size: 18px !important;
}

.pr-highlight-card h3 {
  min-height: 34px !important;
  margin: 0 0 8px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.05em !important;
}

.pr-highlight-card p {
  min-height: 48px !important;
  margin: 0 !important;
  font-size: 10px !important;
  line-height: 1.5 !important;
  color: #6d86a6 !important;
}

@media (max-width: 1399px) {
  .prestige-highlights {
    margin-top: -205px !important;
  }
}

@media (max-width: 1199px) {
  .prestige-highlights {
    margin-top: -120px !important;
  }

  .pr-highlight-grid {
    gap: 14px !important;
  }

  .pr-highlight-card {
    min-height: 170px !important;
    padding: 18px 16px 16px !important;
  }

  .pr-highlight-card h3 {
    min-height: auto !important;
    font-size: 13px !important;
  }

  .pr-highlight-card p {
    min-height: auto !important;
    font-size: 11px !important;
  }
}

@media (max-width: 767px) {
  .prestige-highlights {
    margin-top: -24px !important;
    padding-bottom: 28px !important;
  }

  .pr-highlight-card {
    min-height: auto !important;
    padding: 20px 18px 18px !important;
  }

  .pr-highlight-card h3 {
    font-size: 15px !important;
  }

  .pr-highlight-card p {
    font-size: 13px !important;
  }
}




/* CUTE CARD IMAGE PATCH */
.pr-highlight-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.pr-highlight-card:hover {
  transform: translateY(-8px) !important;
  box-shadow:
    0 20px 42px rgba(86, 148, 224, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.52) !important;
}

.pr-highlight-icon {
  width: 88px !important;
  height: 88px !important;
  margin: 0 auto 10px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}

.pr-highlight-img {
  width: 78px !important;
  height: 78px !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 8px 14px rgba(84, 128, 196, 0.16));
  animation: prCuteFloat 3.6s ease-in-out infinite;
  transform-origin: center bottom;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.pr-highlight-card:nth-child(1) .pr-highlight-img { animation-delay: 0s; }
.pr-highlight-card:nth-child(2) .pr-highlight-img { animation-delay: .35s; }
.pr-highlight-card:nth-child(3) .pr-highlight-img { animation-delay: .7s; }
.pr-highlight-card:nth-child(4) .pr-highlight-img { animation-delay: 1.05s; }
.pr-highlight-card:nth-child(5) .pr-highlight-img { animation-delay: 1.4s; }

.pr-highlight-card:hover .pr-highlight-img {
  transform: translateY(-4px) scale(1.06);
  filter: drop-shadow(0 12px 18px rgba(84, 128, 196, 0.22));
}

@keyframes prCuteFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-7px); }
}

@media (max-width: 1399px) {
  .pr-highlight-icon {
    width: 78px !important;
    height: 78px !important;
  }

  .pr-highlight-img {
    width: 68px !important;
    height: 68px !important;
  }
}

@media (max-width: 767px) {
  .pr-highlight-icon {
    width: 84px !important;
    height: 84px !important;
  }

  .pr-highlight-img {
    width: 72px !important;
    height: 72px !important;
  }
}


/* CUTE CARD IMAGE FINAL */
.pr-highlight-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.pr-highlight-card:hover {
  transform: translateY(-8px) !important;
  box-shadow:
    0 20px 42px rgba(86, 148, 224, 0.14),
    inset 0 0 0 1px rgba(255, 255, 255, 0.52) !important;
}

.pr-highlight-icon {
  width: 88px !important;
  height: 88px !important;
  margin: 0 auto 8px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}

.pr-highlight-img {
  width: 78px !important;
  height: 78px !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 8px 14px rgba(84, 128, 196, 0.16));
  animation: prCuteFloat 3.6s ease-in-out infinite;
  transform-origin: center bottom;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.pr-highlight-card:nth-child(1) .pr-highlight-img { animation-delay: 0s; }
.pr-highlight-card:nth-child(2) .pr-highlight-img { animation-delay: .35s; }
.pr-highlight-card:nth-child(3) .pr-highlight-img { animation-delay: .7s; }
.pr-highlight-card:nth-child(4) .pr-highlight-img { animation-delay: 1.05s; }
.pr-highlight-card:nth-child(5) .pr-highlight-img { animation-delay: 1.4s; }

.pr-highlight-card:hover .pr-highlight-img {
  transform: translateY(-4px) scale(1.06);
  filter: drop-shadow(0 12px 18px rgba(84, 128, 196, 0.22));
}

@keyframes prCuteFloat {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-7px); }
}

@media (max-width: 1399px) {
  .pr-highlight-icon {
    width: 78px !important;
    height: 78px !important;
  }

  .pr-highlight-img {
    width: 68px !important;
    height: 68px !important;
  }
}

@media (max-width: 767px) {
  .pr-highlight-icon {
    width: 84px !important;
    height: 84px !important;
  }

  .pr-highlight-img {
    width: 72px !important;
    height: 72px !important;
  }
}


/* HEADER STATUS TOPUP PATCH */
#header {
  background: rgba(255, 255, 255, 0.80) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(72, 111, 204, 0.14) !important;
  box-shadow: 0 10px 28px rgba(71, 111, 170, 0.08) !important;
  padding: 8px 0 !important;
}

#header.header-scrolled,
#header.header-inner-pages {
  background: rgba(255, 255, 255, 0.90) !important;
}

#play-pause-button,
#header .logo {
  display: none !important;
}

.header-shell {
  width: min(1380px, calc(100% - 28px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
}

.header-left {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.header-status-pill,
.server-time {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(72, 111, 204, 0.16);
  box-shadow: 0 8px 18px rgba(71, 111, 170, 0.06);
  font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #58779f !important;
  white-space: nowrap;
}

.header-status-label {
  color: #7b93b2;
}

.header-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  display: inline-block;
  box-shadow: 0 0 0 5px rgba(0,0,0,0.04);
}

.header-status-pill.is-online .header-status-dot {
  background: #25c46a;
  box-shadow: 0 0 0 5px rgba(37,196,106,0.12);
}

.header-status-pill.is-online .header-status-text {
  color: #25a75d;
}

.header-status-pill.is-offline .header-status-dot {
  background: #ef4444;
  box-shadow: 0 0 0 5px rgba(239,68,68,0.12);
}

.header-status-pill.is-offline .header-status-text {
  color: #e14f4f;
}

.server-time span {
  color: #2f8fe8;
}

#navbar {
  justify-self: center;
  display: flex;
  justify-content: center;
}

.navbar {
  padding: 0 !important;
}

.navbar ul {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.navbar li {
  list-style: none;
}

.navbar a,
.navbar a:focus {
  position: relative;
  padding: 12px 12px !important;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #58779f !important;
  text-shadow: none !important;
  white-space: nowrap;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a {
  color: #2f8fe8 !important;
}

.navbar a::after {
  height: 2px !important;
  background-color: #2f8fe8 !important;
}

.header-right {
  justify-self: end;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.nav-login-pill,
.nav-topup-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  height: 42px;
  padding: 0 18px;
  border-radius: 14px;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.nav-login-pill {
  background: linear-gradient(180deg, #8fd0ff 0%, #6bbcff 100%) !important;
  border-color: rgba(107,188,255,.22) !important;
  box-shadow:
    0 8px 18px rgba(107,188,255,.12),
    inset 0 1px 0 rgba(255,255,255,.40) !important;
  color: #ffffff !important;
}

.nav-login-pill:hover {
  color: #ffffff !important;
  background: linear-gradient(180deg, #a4dcff 0%, #7cc8ff 100%) !important;
}

.nav-topup-pill {
  background: linear-gradient(180deg, #ffd77a 0%, #f5b84d 100%);
  border-color: rgba(245,184,77,.28);
  box-shadow:
    0 8px 18px rgba(245,184,77,.12),
    inset 0 1px 0 rgba(255,255,255,.34);
  color: #8f5b05 !important;
}

.nav-topup-pill:hover {
  color: #8f5b05 !important;
  background: linear-gradient(180deg, #ffe28f 0%, #f7c25f 100%);
}

.nav-user-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(72, 111, 204, 0.16);
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.nav-user-box a,
.nav-user-box span {
  color: #58779f !important;
}

@media (max-width: 1300px) {
  .header-shell {
    width: min(1320px, calc(100% - 20px));
    gap: 14px;
  }

  .navbar a,
  .navbar a:focus {
    padding: 12px 10px !important;
    font-size: 11px !important;
    letter-spacing: 0.11em;
  }

  .header-status-pill,
  .server-time {
    padding: 0 12px;
    font-size: 10px !important;
  }

  .nav-login-pill,
  .nav-topup-pill {
    min-width: 88px;
    padding: 0 14px;
  }
}

@media (max-width: 991px) {
  .header-shell {
    grid-template-columns: 1fr auto;
    width: calc(100% - 20px);
  }

  .header-left {
    gap: 8px;
  }

  .server-time,
  .header-right {
    display: none !important;
  }

  #navbar {
    justify-self: end;
  }

  .mobile-nav-toggle {
    color: #58779f !important;
  }

  .navbar-mobile ul {
    background: rgba(255, 255, 255, 0.98) !important;
    border-radius: 18px;
  }

  .navbar-mobile a {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: #58779f !important;
  }
}


/* HEADER OVERLAP FIX */
.header-shell{
  position: relative !important;
  width: min(1500px, calc(100% - 24px)) !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.header-left{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  z-index: 3 !important;
}

.header-right{
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  margin-left: auto !important;
  z-index: 3 !important;
}

#navbar{
  position: absolute !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: 50% !important;
  translate: 0 -50% !important;
  width: max-content !important;
  z-index: 2 !important;
}

.navbar ul{
  gap: 6px !important;
}

.navbar a,
.navbar a:focus{
  padding: 12px 10px !important;
  font-size: 11px !important;
  letter-spacing: 0.11em !important;
}

.header-status-pill,
.server-time{
  height: 38px !important;
  padding: 0 14px !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
}

.header-status-pill{
  gap: 6px !important;
}

.server-time{
  gap: 4px !important;
}

.nav-login-pill,
.nav-topup-pill{
  min-width: 92px !important;
  height: 40px !important;
  padding: 0 16px !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
}

@media (max-width: 1366px){
  .header-shell{
    width: calc(100% - 18px) !important;
  }

  .header-status-pill,
  .server-time{
    padding: 0 12px !important;
    font-size: 9px !important;
  }

  .nav-login-pill,
  .nav-topup-pill{
    min-width: 86px !important;
    padding: 0 14px !important;
  }

  .navbar a,
  .navbar a:focus{
    padding: 12px 8px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 1200px){
  #navbar{
    position: static !important;
    transform: none !important;
    translate: none !important;
    width: auto !important;
  }

  .header-shell{
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 10px !important;
  }

  .header-left{
    flex-wrap: wrap !important;
  }

  .server-time{
    display: none !important;
  }
}


/* HERO LOGO CLEAN BASE */
#hero,
#hero .main-bg,
#hero .char-render{
  position: relative !important;
}

#hero .center-intro,
#hero .hero-logo-block{
  position: absolute !important;
  top: -48px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(380px, 32vw) !important;
  max-width: 380px !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
  z-index: 9 !important;
}

#hero .center-intro img,
#hero .hero-logo-block img,
#hero .hero-main-logo{
  display: block !important;
  width: 100% !important;
  max-width: 380px !important;
  height: auto !important;
  margin: 0 auto !important;
}

@media (max-width: 991px){
  #hero .center-intro,
  #hero .hero-logo-block{
    top: -8px !important;
    width: min(280px, 68vw) !important;
    max-width: 280px !important;
  }

  #hero .center-intro img,
  #hero .hero-logo-block img,
  #hero .hero-main-logo{
    max-width: 280px !important;
  }
}


/* NON-HOME HERO STRIP */
.inner-hero-strip{
  height: 128px;
  background: url('../img/main-bg.jpg') center top no-repeat;
  background-size: cover;
}

@media (max-width: 768px){
  .inner-hero-strip{
    height: 104px;
  }
}
.smoke{
  pointer-events: none !important;
}

/* Character dropdown visibility */
select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    font-size: 16px;
}

select:focus {
    border-color: #007bff;
    outline: none;
}

/* Form input styling */
.generic-form input[type='text'], .generic-form select {
    margin-bottom: 10px;
    padding: 10px;
    width: 100%;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* Button styling */
.generic-form button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.generic-form button:hover {
    background-color: #0056b3;
}

/* Table layout for the form */
.vertical-table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
}

.vertical-table th, .vertical-table td {
    padding: 10px;
    border: 1px solid #ccc;
    text-align: left;
}

.vertical-table th {
    background-color: #f4f4f4;
}


/* DONATE PAGE / INNER PAGE SPACING CLEANUP */
.inner-hero-strip{
  height: 42px !important;
}

.global-container{
  margin: 8px auto 32px !important;
  padding: 16px 15px 32px !important;
}

.downloads-container{
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

.downloads-container .p-3.px-4{
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* ===== DONATE PAGE CLEAN POLISH ===== */
.topup-clean-wrap{
  max-width: 860px;
  margin: 6px auto 32px !important;
}

.topup-clean-wrap h2{
  margin: 0 0 10px !important;
  text-align: center;
  color: #8e7a68 !important;
  font-family: 'Inter-Bold', Arial, Helvetica, sans-serif !important;
  letter-spacing: .03em;
}

.topup-intro{
  margin: 0 0 14px !important;
  color: #8d8a86 !important;
  font-size: 13px !important;
}

.topup-clean-wrap .downloads-container{
  overflow: hidden;
  border: 1px solid #745d49 !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,.32) !important;
  box-shadow: 0 10px 28px rgba(88,70,54,.07);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.topup-clean-wrap .heading-container{
  margin: 0 !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  font-family: 'Inter-Bold', Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: .02em;
  background: linear-gradient(90deg, #6b5544 0%, #8a725d 55%, #6b5544 100%) !important;
}

.topup-clean-wrap .p-3.px-4{
  padding: 18px 18px 16px !important;
}

.topup-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 0 16px;
  padding: 0 2px;
  color: #7c756f;
  font-size: 13px;
}

.topup-meta strong{
  color: #6a5848;
}

.topup-clean-wrap .generic-form{
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.topup-form-table,
.topup-history-table{
  width: 100% !important;
  display: table !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(116,93,73,.24) !important;
  border-radius: 14px !important;
}

.topup-form-table th,
.topup-form-table td,
.topup-history-table th,
.topup-history-table td{
  border: 0 !important;
  border-bottom: 1px solid rgba(116,93,73,.14) !important;
  padding: 14px 16px !important;
}

.topup-form-table tr:last-child th,
.topup-form-table tr:last-child td,
.topup-history-table tr:last-child th,
.topup-history-table tr:last-child td{
  border-bottom: 0 !important;
}

.topup-form-table th{
  width: 210px;
  background: rgba(111,90,74,.08) !important;
  color: #6b5a4a !important;
  font-family: 'Inter-Bold', Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  text-align: left !important;
  vertical-align: top !important;
}

.topup-form-table td{
  background: rgba(255,255,255,.22) !important;
}

.topup-history-table th{
  background: rgba(111,90,74,.10) !important;
  color: #6b5a4a !important;
  font-family: 'Inter-Bold', Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  text-align: left !important;
}

.topup-history-table td{
  background: rgba(255,255,255,.20) !important;
  color: #756f69 !important;
  font-size: 12px !important;
}

.topup-select,
.topup-input{
  width: 100% !important;
  max-width: 420px;
  height: 44px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(116,93,73,.28) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.92) !important;
  color: #4f453d !important;
  font-size: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}

.topup-select:focus,
.topup-input:focus{
  border-color: #b9915d !important;
  box-shadow: 0 0 0 3px rgba(185,145,93,.12) !important;
  outline: none !important;
}

.topup-choice-list{
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 10px 16px;
  max-width: 520px;
}

.topup-choice-list label{
  display: flex !important;
  align-items: center;
  gap: 9px;
  margin: 0 !important;
  padding: 11px 12px !important;
  border: 1px solid rgba(116,93,73,.16);
  border-radius: 10px;
  background: rgba(255,255,255,.55);
  color: #645a52 !important;
  font-size: 13px !important;
  transition: .18s ease;
}

.topup-choice-list label:hover{
  background: rgba(255,255,255,.78);
  border-color: rgba(185,145,93,.35);
}

.topup-choice-list input[type="radio"]{
  accent-color: #b88d57;
  transform: scale(1.02);
  margin: 0 !important;
}

.topup-help{
  margin-top: 8px;
  color: #9b9085;
  font-size: 12px;
}

.topup-submit-btn{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  height: 46px;
  padding: 0 22px;
  border: 1px solid rgba(176,126,60,.22) !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #e8c98d 0%, #d7a954 100%) !important;
  color: #6b4615 !important;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow: 0 10px 18px rgba(176,126,60,.12), inset 0 1px 0 rgba(255,255,255,.45);
}

.topup-submit-btn:hover{
  background: linear-gradient(180deg, #eed39d 0%, #ddb465 100%) !important;
  color: #6b4615 !important;
}

.topup-empty{
  margin: 0 !important;
  color: #8b7e72 !important;
  font-size: 13px !important;
}

@media (max-width: 768px){
  .topup-clean-wrap{
    margin: 4px auto 24px !important;
  }

  .topup-form-table th,
  .topup-form-table td{
    display: block;
    width: 100% !important;
  }

  .topup-choice-list{
    grid-template-columns: 1fr;
  }

  .topup-select,
  .topup-input{
    max-width: 100%;
  }
}

/* ===== TOP UP THEME ALIGNMENT: SKY / CLOUD / GOLD ===== */
.topup-clean-wrap{
  max-width: 900px;
  margin: 8px auto 34px !important;
}

.topup-clean-wrap .downloads-container{
  border: 1px solid rgba(144,195,227,.34) !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(241,249,255,.62)) !important;
  box-shadow:
    0 16px 38px rgba(112,168,210,.10),
    inset 0 1px 0 rgba(255,255,255,.60) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.topup-clean-wrap .heading-container,
.topup-clean-wrap .heading-container.text-white{
  margin: 0 !important;
  padding: 13px 16px !important;
  border-radius: 0 !important;
  color: #6789ad !important;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(228,244,255,.90)) !important;
  border-bottom: 1px solid rgba(144,195,227,.34) !important;
  box-shadow: inset 0 3px 0 rgba(239,198,109,.95) !important;
  font-family: 'Inter-Bold', Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  letter-spacing: .02em;
}

.topup-clean-wrap .heading-container i{
  color: #7da6c7 !important;
}

.topup-clean-wrap .p-3.px-4{
  padding: 18px 18px 16px !important;
}

.topup-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0 0 16px;
  padding: 0 2px;
  color: #8093a7;
  font-size: 13px;
}

.topup-meta strong{
  color: #5f7f9f;
}

.topup-clean-wrap .generic-form{
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.topup-form-table,
.topup-history-table{
  width: 100% !important;
  display: table !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(144,195,227,.28) !important;
  border-radius: 16px !important;
}

.topup-form-table th,
.topup-form-table td,
.topup-history-table th,
.topup-history-table td{
  border: 0 !important;
  border-bottom: 1px solid rgba(144,195,227,.16) !important;
  padding: 14px 16px !important;
}

.topup-form-table tr:last-child th,
.topup-form-table tr:last-child td,
.topup-history-table tr:last-child th,
.topup-history-table tr:last-child td{
  border-bottom: 0 !important;
}

.topup-form-table th{
  width: 210px;
  background: rgba(233,245,255,.56) !important;
  color: #6a89a7 !important;
  font-family: 'Inter-Bold', Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  text-align: left !important;
  vertical-align: top !important;
}

.topup-form-table td{
  background: rgba(255,255,255,.34) !important;
}

.topup-history-table th{
  background: rgba(233,245,255,.60) !important;
  color: #6a89a7 !important;
  font-family: 'Inter-Bold', Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;
  text-align: left !important;
}

.topup-history-table td{
  background: rgba(255,255,255,.28) !important;
  color: #7a8fa6 !important;
  font-size: 12px !important;
}

.topup-select,
.topup-input{
  width: 100% !important;
  max-width: 430px;
  height: 46px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(151,198,227,.40) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.94) !important;
  color: #4f6276 !important;
  font-size: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.68),
    0 4px 10px rgba(143,190,225,.06) !important;
}

.topup-select:focus,
.topup-input:focus{
  border-color: #e5be6d !important;
  box-shadow:
    0 0 0 4px rgba(229,190,109,.12),
    inset 0 1px 0 rgba(255,255,255,.70) !important;
  outline: none !important;
}

.topup-choice-list{
  display: grid;
  grid-template-columns: repeat(2, minmax(160px, 1fr));
  gap: 10px 16px;
  max-width: 530px;
}

.topup-choice-list label{
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(148,195,226,.24);
  border-radius: 12px;
  background: rgba(255,255,255,.72);
  color: #667b90 !important;
  font-size: 13px !important;
  transition: .18s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.60);
}

.topup-choice-list label:hover{
  background: rgba(255,255,255,.90);
  border-color: rgba(229,190,109,.38);
  transform: translateY(-1px);
}

.topup-choice-list input[type="radio"]{
  accent-color: #e0b55d;
  margin: 0 !important;
}

.topup-choice-list label span{
  color: #697d91 !important;
}

.topup-choice-list label:has(input:checked){
  background: linear-gradient(180deg, rgba(255,248,228,.96), rgba(252,239,196,.94));
  border-color: rgba(226,184,84,.48);
  box-shadow:
    0 10px 18px rgba(226,184,84,.12),
    inset 0 1px 0 rgba(255,255,255,.70);
}

.topup-choice-list label:has(input:checked) span{
  color: #8b5d14 !important;
  font-weight: 700;
}

.topup-help{
  margin-top: 9px;
  color: #8ea0b0;
  font-size: 12px;
}

.topup-submit-btn{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 228px;
  height: 48px;
  padding: 0 22px;
  border: 1px solid rgba(245,184,77,.28) !important;
  border-radius: 14px !important;
  background: linear-gradient(180deg, #ffd77a 0%, #f5b84d 100%) !important;
  color: #8f5b05 !important;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  box-shadow:
    0 8px 18px rgba(245,184,77,.14),
    inset 0 1px 0 rgba(255,255,255,.36) !important;
}

.topup-submit-btn:hover{
  background: linear-gradient(180deg, #ffe28f 0%, #f7c25f 100%) !important;
  color: #8f5b05 !important;
}

.topup-empty{
  margin: 0 !important;
  color: #8698aa !important;
  font-size: 13px !important;
}

@media (max-width: 768px){
  .topup-clean-wrap{
    margin: 6px auto 24px !important;
  }

  .topup-form-table th,
  .topup-form-table td{
    display: block;
    width: 100% !important;
  }

  .topup-choice-list{
    grid-template-columns: 1fr;
  }

  .topup-select,
  .topup-input{
    max-width: 100%;
  }
}

/* ===== TOP UP PREMIUM PANEL STYLE ===== */
.topup-ui-wrap{
  width: 100%;
  max-width: 760px;
  margin: 12px auto 30px !important;
}

.topup-panel-card,
.topup-history-card{
  border-radius: 22px !important;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(242,248,255,.78)) !important;
  border: 1px solid rgba(147,187,222,.34) !important;
  box-shadow:
    0 14px 34px rgba(120,165,205,.12),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-bottom: 16px !important;
}

.topup-panel-head,
.topup-history-head{
  position: relative;
  text-align: center;
  padding: 14px 18px 12px !important;
  background:
    linear-gradient(180deg, #2d98eb 0%, #1e73d5 45%, #1460c2 100%) !important;
  color: #ffffff !important;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: .03em;
  text-transform: uppercase;
  border-bottom: 3px solid #dfb14c !important;
  box-shadow:
    inset 0 -1px 0 rgba(255,255,255,.18),
    inset 0 1px 0 rgba(255,255,255,.25);
}

.topup-panel-head::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  background: #dfb14c;
  border-radius: 2px;
}

.topup-panel-body,
.topup-history-body{
  padding: 16px 18px 18px !important;
}

.topup-panel-form{
  margin: 0 !important;
}

.topup-field-box{
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.52);
  border: 1px solid rgba(155,193,225,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70);
}

.topup-field-label{
  margin-bottom: 10px;
  color: #2f5f9c;
  font-family: 'Inter-Bold', Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
}

.topup-field-control{
  display: block;
}

.topup-premium-select,
.topup-premium-input{
  width: 100% !important;
  height: 42px !important;
  padding: 0 14px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(145,173,204,.42) !important;
  background: rgba(255,255,255,.94) !important;
  color: #4f6780 !important;
  font-size: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 2px 8px rgba(145,185,220,.08) !important;
}

.topup-premium-select:focus,
.topup-premium-input:focus{
  outline: none !important;
  border-color: #e0b356 !important;
  box-shadow:
    0 0 0 4px rgba(224,179,86,.12),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
}

.topup-card-grid{
  display: grid;
  gap: 10px;
}

.amount-grid{
  grid-template-columns: repeat(4, minmax(0,1fr));
}

.pay-grid{
  grid-template-columns: repeat(4, minmax(0,1fr));
}

.topup-card-option{
  display: block;
  margin: 0 !important;
}

.topup-card-option input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.topup-card-face{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 46px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(150,180,209,.40);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(237,244,251,.96));
  color: #2b63a6;
  font-family: 'Inter-SemiBold', Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  box-shadow:
    0 3px 8px rgba(151,184,216,.12),
    inset 0 1px 0 rgba(255,255,255,.78);
  transition: .18s ease;
  cursor: pointer;
}

.topup-card-face::before{
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 999px;
  border: 1.5px solid #9db3cb;
  background: #fff;
  flex: 0 0 15px;
}

.topup-card-option input:checked + .topup-card-face{
  border-color: #dba847;
  background:
    linear-gradient(180deg, #3da8ff 0%, #1c7ae1 100%);
  color: #ffffff !important;
  box-shadow:
    0 8px 18px rgba(55,134,219,.22),
    inset 0 1px 0 rgba(255,255,255,.24),
    0 0 0 2px rgba(219,168,71,.28);
}

.topup-card-option input:checked + .topup-card-face::before{
  background: linear-gradient(180deg, #ffd86f 0%, #e0ac3d 100%);
  border-color: #f2d58d;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
}

.pay-face{
  justify-content: center;
  font-size: 14px !important;
}

.pay-brand{
  display: inline-block;
  font-weight: 700;
}

.topup-field-help{
  margin-top: 9px;
  color: #7e94aa;
  font-size: 12px;
}

.topup-note-box{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 12px 0 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(240,247,255,.82);
  border: 1px solid rgba(155,193,225,.28);
  color: #4770a0;
  font-size: 13px;
  font-weight: 600;
}

.topup-note-star{
  color: #e0b356;
  font-size: 14px;
  line-height: 1.2;
}

.topup-submit-row{
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.topup-premium-submit{
  min-width: 280px;
  height: 50px;
  padding: 0 22px;
  border-radius: 16px !important;
  border: 1px solid rgba(221,167,66,.40) !important;
  background:
    linear-gradient(180deg, #0f7ae2 0%, #0a66c9 55%, #0857b2 100%) !important;
  color: #ffffff !important;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .03em;
  text-transform: uppercase;
  box-shadow:
    0 10px 22px rgba(15,122,226,.22),
    inset 0 1px 0 rgba(255,255,255,.30),
    0 0 0 3px rgba(223,177,76,.25);
}

.topup-premium-submit:hover{
  background:
    linear-gradient(180deg, #2790f3 0%, #157ae0 55%, #0a60bf 100%) !important;
  color: #ffffff !important;
}

.topup-history-head{
  text-align: left !important;
  font-size: 15px !important;
  padding-left: 18px !important;
}

.topup-history-table{
  width: 100% !important;
  display: table !important;
  border-collapse: collapse !important;
}

.topup-history-table th{
  padding: 10px !important;
  background: rgba(234,245,255,.85) !important;
  color: #587da5 !important;
  font-size: 12px !important;
  border: 1px solid rgba(162,195,224,.25) !important;
}

.topup-history-table td{
  padding: 10px !important;
  background: rgba(255,255,255,.66) !important;
  color: #74869b !important;
  font-size: 12px !important;
  border: 1px solid rgba(162,195,224,.18) !important;
}

.topup-empty{
  margin: 0 !important;
  color: #7d91a7 !important;
  font-size: 13px !important;
}

@media (max-width: 900px){
  .amount-grid,
  .pay-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 640px){
  .topup-ui-wrap{
    max-width: calc(100% - 18px);
  }

  .amount-grid,
  .pay-grid{
    grid-template-columns: 1fr;
  }

  .topup-panel-head,
  .topup-history-head{
    font-size: 15px !important;
  }

  .topup-premium-submit{
    min-width: 100%;
  }
}

/* ===== REMOVE FOG COMPLETELY ===== */
.smoke{
  display: none !important;
  background: none !important;
  pointer-events: none !important;
}

/* ===== LOGIN / REGISTER SAFE PREMIUM PATCH ===== */
#login_form,
#register_form{
  max-width: 760px !important;
  margin: 0 auto 24px !important;
}

#login_form .generic-form,
#register_form .generic-form,
#login_form .generic-form-div,
#register_form .generic-form-div{
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(243,249,255,.72)) !important;
  border: 1px solid rgba(145,195,226,.32) !important;
  border-radius: 18px !important;
  box-shadow:
    0 14px 34px rgba(120,165,205,.10),
    inset 0 1px 0 rgba(255,255,255,.74) !important;
  padding: 22px 24px !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#login_form table,
#register_form table{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
}

#login_form table th,
#register_form table th{
  width: 220px !important;
  padding: 0 14px 0 0 !important;
  text-align: right !important;
  vertical-align: middle !important;
}

#login_form table td,
#register_form table td{
  padding: 0 !important;
  vertical-align: middle !important;
}

#login_form table th label,
#register_form table th label{
  display: block !important;
  padding: 0 !important;
  text-align: right !important;
  color: #6f8eae !important;
  font-family: 'Inter-Bold', Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
}

#login_form input[type="text"],
#login_form input[type="password"],
#register_form input[type="text"],
#register_form input[type="password"],
#register_form input[type="file"],
#login_form select,
#register_form select{
  width: 420px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: 46px !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(148,195,226,.40) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.95) !important;
  color: #50687f !important;
  font-size: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 4px 10px rgba(143,190,225,.06) !important;
}

#login_form input[type="text"]:focus,
#login_form input[type="password"]:focus,
#register_form input[type="text"]:focus,
#register_form input[type="password"]:focus,
#register_form input[type="file"]:focus,
#login_form select:focus,
#register_form select:focus{
  outline: none !important;
  border-color: #e5be6d !important;
  box-shadow:
    0 0 0 4px rgba(229,190,109,.12),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
}

#register_form .birthdate select{
  background: rgba(255,255,255,.95) !important;
  color: #50687f !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 4px 10px rgba(143,190,225,.06) !important;
}

#login_form input[type="radio"],
#register_form input[type="radio"],
#login_form input[type="checkbox"],
#register_form input[type="checkbox"]{
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  margin-right: 6px !important;
}

#login_form .submit_button,
#register_form .submit_button,
#login_form input[type="submit"],
#register_form input[type="submit"],
#login_form button,
#register_form button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 210px !important;
  height: 46px !important;
  padding: 0 20px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(245,184,77,.28) !important;
  background: linear-gradient(180deg, #ffd77a 0%, #f5b84d 100%) !important;
  color: #8f5b05 !important;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .03em !important;
  text-transform: none !important;
  box-shadow:
    0 8px 18px rgba(245,184,77,.14),
    inset 0 1px 0 rgba(255,255,255,.38) !important;
  cursor: pointer !important;
}

#login_form .submit_button:hover,
#register_form .submit_button:hover,
#login_form input[type="submit"]:hover,
#register_form input[type="submit"]:hover,
#login_form button:hover,
#register_form button:hover{
  background: linear-gradient(180deg, #ffe28f 0%, #f7c25f 100%) !important;
  color: #8f5b05 !important;
}

#login_form p,
#register_form p,
#login_form .note,
#register_form .note{
  color: #7f93a7 !important;
}

#login_form a,
#register_form a{
  color: #4f83c4 !important;
}

#login_form a:hover,
#register_form a:hover{
  color: #2f6fb8 !important;
}

@media (max-width: 768px){
  #login_form,
  #register_form{
    max-width: calc(100% - 18px) !important;
  }

  #login_form table th,
  #register_form table th,
  #login_form table td,
  #register_form table td{
    display: block !important;
    width: 100% !important;
    text-align: left !important;
  }

  #login_form table th,
  #register_form table th{
    padding: 0 0 6px 0 !important;
  }

  #login_form table th label,
  #register_form table th label{
    text-align: left !important;
  }

  #login_form input[type="text"],
  #login_form input[type="password"],
  #register_form input[type="text"],
  #register_form input[type="password"],
  #register_form input[type="file"],
  #login_form select,
  #register_form select{
    width: 100% !important;
  }

  #login_form .submit_button,
  #register_form .submit_button,
  #login_form input[type="submit"],
  #register_form input[type="submit"],
  #login_form button,
  #register_form button{
    min-width: 100% !important;
  }
}

/* Donate: QR display sizing */
.topup-gateway-qr-wrap{
  margin-top: 10px;
  text-align: center;
}

.topup-gateway-qr{
  display: block;
  width: 100%;
  max-width: 500px;
  max-height: 500px;
  height: auto;
  margin: 10px auto 0;
  object-fit: contain;
  border-radius: 8px;
}

@media (max-width: 576px){
  .topup-gateway-qr{
    max-width: 220px;
    max-height: 220px;
  }
}

/* ===== FINAL LOGIN / REGISTER FIX ===== */

/* keep fog removed */
.smoke{
  display:none !important;
}

/* login + register container */
#login_form,
#register_form{
  max-width: 860px !important;
  margin: 0 auto 28px !important;
}

#login_form .generic-form,
#register_form .generic-form,
#login_form .generic-form-div,
#register_form .generic-form-div{
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(243,249,255,.72)) !important;
  border: 1px solid rgba(145,195,226,.30) !important;
  border-radius: 18px !important;
  box-shadow:
    0 14px 34px rgba(120,165,205,.10),
    inset 0 1px 0 rgba(255,255,255,.76) !important;
  padding: 22px 24px !important;
}

/* layout */
#login_form table,
#register_form table{
  width: auto !important;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
}

#login_form table th,
#register_form table th{
  width: 220px !important;
  padding: 0 14px 0 0 !important;
  text-align: right !important;
  vertical-align: middle !important;
}

#login_form table td,
#register_form table td{
  padding: 0 !important;
  vertical-align: middle !important;
}

#login_form table th label,
#register_form table th label{
  display: block !important;
  padding: 0 !important;
  text-align: right !important;
  color: #6f8eae !important;
  font-family: 'Inter-Bold', Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
}

/* fix ALL field widths equally */
#login_form input[type="text"],
#login_form input[type="password"],
#login_form input[type="file"],
#login_form select,
#register_form input[type="text"],
#register_form input[type="password"],
#register_form input[type="file"],
#register_form select{
  width: 460px !important;
  max-width: 460px !important;
  min-width: 460px !important;
  height: 46px !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(148,195,226,.40) !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.95) !important;
  color: #50687f !important;
  font-size: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 4px 10px rgba(143,190,225,.06) !important;
  margin: 0 !important;
}

/* equal focus style */
#login_form input[type="text"]:focus,
#login_form input[type="password"]:focus,
#login_form input[type="file"]:focus,
#login_form select:focus,
#register_form input[type="text"]:focus,
#register_form input[type="password"]:focus,
#register_form input[type="file"]:focus,
#register_form select:focus{
  outline: none !important;
  border-color: #e5be6d !important;
  box-shadow:
    0 0 0 4px rgba(229,190,109,.12),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
}

/* radios + checkboxes stay small */
#login_form input[type="radio"],
#login_form input[type="checkbox"],
#register_form input[type="radio"],
#register_form input[type="checkbox"]{
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  margin-right: 6px !important;
  vertical-align: middle !important;
}

/* buttons */
#login_form .submit_button,
#register_form .submit_button,
#login_form input[type="submit"],
#register_form input[type="submit"],
#login_form button,
#register_form button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 190px !important;
  height: 46px !important;
  padding: 0 20px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(245,184,77,.28) !important;
  background: linear-gradient(180deg, #2d98eb 0%, #1e73d5 100%) !important;
  color: #ffffff !important;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .03em !important;
  box-shadow:
    0 8px 18px rgba(30,115,213,.16),
    inset 0 1px 0 rgba(255,255,255,.28),
    0 0 0 2px rgba(229,190,109,.16) !important;
  cursor: pointer !important;
}

#login_form .submit_button:hover,
#register_form .submit_button:hover,
#login_form input[type="submit"]:hover,
#register_form input[type="submit"]:hover,
#login_form button:hover,
#register_form button:hover{
  background: linear-gradient(180deg, #40a5f4 0%, #2b82de 100%) !important;
  color: #ffffff !important;
}

/* text */
#login_form p,
#register_form p,
#login_form .note,
#register_form .note{
  color: #7f93a7 !important;
}

#login_form a,
#register_form a{
  color: #4f83c4 !important;
}

#login_form a:hover,
#register_form a:hover{
  color: #2f6fb8 !important;
}

/* mobile */
@media (max-width: 768px){
  #login_form,
  #register_form{
    max-width: calc(100% - 18px) !important;
  }

  #login_form table,
  #register_form table{
    width: 100% !important;
  }

  #login_form table th,
  #register_form table th,
  #login_form table td,
  #register_form table td{
    display: block !important;
    width: 100% !important;
    text-align: left !important;
  }

  #login_form table th,
  #register_form table th{
    padding: 0 0 6px 0 !important;
  }

  #login_form table th label,
  #register_form table th label{
    text-align: left !important;
  }

  #login_form input[type="text"],
  #login_form input[type="password"],
  #login_form input[type="file"],
  #login_form select,
  #register_form input[type="text"],
  #register_form input[type="password"],
  #register_form input[type="file"],
  #register_form select{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #login_form .submit_button,
  #register_form .submit_button,
  #login_form input[type="submit"],
  #register_form input[type="submit"],
  #login_form button,
  #register_form button{
    min-width: 100% !important;
  }
}

/* ===== AUTH FORM RESCUE V2 ===== */

/* keep fog removed */
.smoke{
  display:none !important;
  background:none !important;
  pointer-events:none !important;
}

/* auth wrappers */
#login_form,
#register_form{
  max-width: 940px !important;
  margin: 0 auto 30px !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(145,195,226,.34) !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(243,249,255,.72)) !important;
  box-shadow:
    0 14px 34px rgba(120,165,205,.10),
    inset 0 1px 0 rgba(255,255,255,.76) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* use the real rendered form structure */
#login_form table,
#register_form table{
  width: auto !important;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
}

#login_form tr,
#register_form tr{
  vertical-align: middle !important;
}

#login_form th,
#register_form th{
  width: 210px !important;
  min-width: 210px !important;
  padding: 0 12px 0 0 !important;
  text-align: right !important;
  vertical-align: middle !important;
}

#login_form td,
#register_form td{
  padding: 0 !important;
  text-align: left !important;
  vertical-align: middle !important;
}

/* labels */
#login_form th label,
#register_form th label{
  display: block !important;
  padding: 0 !important;
  text-align: right !important;
  color: #6f8eae !important;
  font-family: 'Inter-Bold', Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
}

/* CRITICAL: normalize ALL text/password/select fields equally */
#login_form input[type="text"],
#login_form input[type="password"],
#login_form input[type="email"],
#login_form input[type="file"],
#login_form select,
#register_form input[type="text"],
#register_form input[type="password"],
#register_form input[type="email"],
#register_form input[type="file"],
#register_form select{
  width: 390px !important;
  max-width: 390px !important;
  min-width: 390px !important;
  height: 42px !important;
  line-height: 42px !important;
  padding: 0 14px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  display: inline-block !important;
  vertical-align: middle !important;
  border: 1px solid rgba(148,195,226,.40) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.95) !important;
  color: #50687f !important;
  font-size: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    0 4px 10px rgba(143,190,225,.06) !important;
}

/* focus state */
#login_form input[type="text"]:focus,
#login_form input[type="password"]:focus,
#login_form input[type="email"]:focus,
#login_form input[type="file"]:focus,
#login_form select:focus,
#register_form input[type="text"]:focus,
#register_form input[type="password"]:focus,
#register_form input[type="email"]:focus,
#register_form input[type="file"]:focus,
#register_form select:focus{
  outline: none !important;
  border-color: #e5be6d !important;
  box-shadow:
    0 0 0 4px rgba(229,190,109,.12),
    inset 0 1px 0 rgba(255,255,255,.78) !important;
}

/* radios stay small */
#login_form input[type="radio"],
#login_form input[type="checkbox"],
#register_form input[type="radio"],
#register_form input[type="checkbox"]{
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  line-height: normal !important;
  margin-right: 6px !important;
  vertical-align: middle !important;
}

/* buttons */
#login_form .submit_button,
#register_form .submit_button,
#login_form input[type="submit"],
#register_form input[type="submit"],
#login_form button,
#register_form button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 190px !important;
  height: 44px !important;
  padding: 0 20px !important;
  margin-top: 6px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(245,184,77,.28) !important;
  background: linear-gradient(180deg, #2d98eb 0%, #1e73d5 100%) !important;
  color: #ffffff !important;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: .02em !important;
  box-shadow:
    0 8px 18px rgba(30,115,213,.16),
    inset 0 1px 0 rgba(255,255,255,.28),
    0 0 0 2px rgba(229,190,109,.16) !important;
  cursor: pointer !important;
}

#login_form .submit_button:hover,
#register_form .submit_button:hover,
#login_form input[type="submit"]:hover,
#register_form input[type="submit"]:hover,
#login_form button:hover,
#register_form button:hover{
  background: linear-gradient(180deg, #40a5f4 0%, #2b82de 100%) !important;
  color: #ffffff !important;
}

/* text palette */
#login_form p,
#register_form p,
#login_form .note,
#register_form .note{
  color: #7f93a7 !important;
}

#login_form a,
#register_form a{
  color: #4f83c4 !important;
}

#login_form a:hover,
#register_form a:hover{
  color: #2f6fb8 !important;
}

/* mobile */
@media (max-width: 768px){
  #login_form,
  #register_form{
    max-width: calc(100% - 18px) !important;
    padding: 16px 14px !important;
  }

  #login_form table,
  #register_form table{
    width: 100% !important;
  }

  #login_form th,
  #register_form th,
  #login_form td,
  #register_form td{
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  #login_form th,
  #register_form th{
    padding: 0 0 6px 0 !important;
  }

  #login_form th label,
  #register_form th label{
    text-align: left !important;
  }

  #login_form input[type="text"],
  #login_form input[type="password"],
  #login_form input[type="email"],
  #login_form input[type="file"],
  #login_form select,
  #register_form input[type="text"],
  #register_form input[type="password"],
  #register_form input[type="email"],
  #register_form input[type="file"],
  #register_form select{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #login_form .submit_button,
  #register_form .submit_button,
  #login_form input[type="submit"],
  #register_form input[type="submit"],
  #login_form button,
  #register_form button{
    min-width: 100% !important;
  }
}