html {
    overflow-x: hidden;
}
body {
    background-image: url(../img/kol-bkgrd.jpg);
    background-color: #000;
    background-repeat: no-repeat;
    background-position: top center;
    font-family: verdana, sans-serif;
    margin: 0;
}
#LoopVideo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    opacity: 0.1;
}
body > *:not(#LoopVideo) {
    position: relative;
    z-index: 1;
}
.visually {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
img {
    border: 0;
}
img.langIcon {
    margin-right: 2px;
    filter: alpha(opacity=40);
    opacity: 0.4;
}
img.langIcon.english {
    filter: alpha(opacity=100);
    opacity: 1;
}
img.langIcon.turkish {
    filter: alpha(opacity=100);
    opacity: 1;
}
img.langIcon.spanish {
    filter: alpha(opacity=100);
    opacity: 1;
}
table,
select {
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 10px;
}
input {
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 10px;
}
select {
    background: #f5f5ef;
    color: #767569;
    font: 11px verdana, geneva, lucida, lucida grande, arial, helvetica, sans-serif;
}
a {
    color: #9f7401;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
}
a:hover {
    color: #fff;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
}
#columnLeftTop {
    background-image: url(../img/nav_top.gif);
    float: left;
    height: 57px;
    width: 264px;
}
#columnLeftMid {
    background-image: url(../img/nav_tbl_bck.gif);
    float: left;
    width: 264px;
}
#columnLeftBottom {
    background-image: url(../img/nav_bottom.gif);
    float: left;
    height: 59px;
    width: 264px;
}
#contentBottom {
    background-image: url(../img/content_bottom.gif);
    background-repeat: no-repeat;
    height: 57px;
}
#Footer1 {
    background-image: url(../img/content_bottom.gif);
    background-repeat: no-repeat;
    width: 990px;
    height: 57px;
}
#Footer2 {
    background-image: url(../img/footer_bck.gif);
    background-repeat: no-repeat;
    height: 90px;
    width: 990px;
}
.text {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #000;
}
.textwhite {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 400;
    color: #fff;
}
.textbrown {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #25120b;
}
.textbm {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 10px;
    margin-bottom: 15px;
    margin-top: 6px;
    color: Maroon;
}
.submit {
    width: 44px;
    height: 27px;
}
.nav1 {
    text-align: center;
    margin-bottom: 12px;
    margin-top: 12px;
    font-size: 11px;
    color: #fff;
}
.nav2 {
    color: gray;
    margin-left: 73px;
}
.status {
    margin-left: 67px;
    color: #9f7401;
}
div#server-status {
    margin-left: 30px;
    color: gray;
    font-weight: 700;
}
.kings {
    margin-left: 60px;
    color: #9f7401;
}
div#kings-list {
    margin-left: 47px;
    color: gray;
    font-weight: 700;
}
.gamemasters {
    margin-left: 65px;
    color: #9f7401;
}
div#gamemasters-list {
    margin-left: 28px;
    color: gray;
    font-weight: 700;
}
.online {
    background-image: url(../img/server-online.gif);
    position: absolute;
    height: 8px;
    width: 8px;
    right: 0;
}
.offline {
    background-image: url(../img/server-offline.gif);
    position: absolute;
    height: 8px;
    width: 8px;
    right: 0;
}
#nationcount {
    background-image: url(../img/hk.jpg);
    width: 170px;
    height: 98px;
}
div.tnationcount {
    position: absolute;
    text-align: center;
    margin-top: 24px;
    color: #000;
    font-size: 13px;
    font-weight: bolder;
    height: 10px;
    width: 169px;
}
div.enationcount {
    position: absolute;
    text-align: center;
    margin-top: 64px;
    color: #000;
    font-size: 13px;
    font-weight: bolder;
    height: 10px;
    width: 86px;
}
div.knationcount {
    position: absolute;
    text-align: center;
    margin-top: 64px;
    color: #000;
    font-size: 13px;
    font-weight: bolder;
    height: 10px;
    width: 252px;
}
.usersonline {
    display: inline;
    margin-left: 5px;
    color: #9f7401;
}
.textredlg {
    color: #900;
    font-size: 13px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 400;
}
pre {
    display: none;
}
#noItem {
    padding-left: 45px;
    padding-bottom: 0;
}
.leftchar {
    position: absolute;
    font-size: 10px;
    font-weight: bold;
    color: white;
    padding: 50px;
}
.leftstat {
    position: absolute;
    font-size: 10px;
    font-weight: bold;
    color: #33afff;
    padding: 50px;
}
.inncoins {
    position: absolute;
    font-size: 12px;
    font-weight: bold;
    color: #ff0;
    padding: 50px;
    padding: 270px 0 0 175px;
}
.coins {
    position: absolute;
    font-size: 12px;
    font-weight: bold;
    color: #ff0;
    padding: 50px;
    padding: 270px 0 0 342px;
}
#mapPoint1 {
    position: relative;
    width: 16px;
    height: 16px;
    background: url(../img/arrow.gif);
    animation: blink 1s infinite;
}
#mapPoint {
    position: absolute;
    width: 4px;
    height: 4px;
    background: url(../img/pointer.png);
    border: 1px solid black;
}
#deathPoint {
    position: relative;
    width: 40px;
    height: 40px;
    background: url(../img/deathmark.png);
}
.itemInfo {
    display: none;
    padding: 5px;
    opacity: 1;
    width: 200px;
    color: #fff;
    background: #000;
    z-index: 999;
}
#sRankPos {
    width: 50px;
    height: 27px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #c31402;
}
#sRankName {
    width: 130px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
}
#sRankLoyalty {
    width: 120px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #bd8e00;
}
.popup.fixed {
    position: fixed;
}
.npcInfo {
    display: none;
    padding: 5px;
    opacity: 1;
    width: auto;
    min-width: 200px;
    max-width: 400px;
    color: #fff;
    background: #430b0b;
    z-index: 999;
    border: 1px solid #000;
  }

#npchp {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    width: 148px;
    height: 22px;
    background: url(../img/hp.png) no-repeat;
}
#tdLogin1 {
    height: 16px;
}
#tdLogin2 {
    height: 16px;
}
#shortRankingsMain {
    height: 26px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bolder;
    color: #fff;
}
#itemType-0 {
    color: #c87cc7;
}
#itemType-1 {
    color: #8080ff;
}
#itemType-2 {
    color: #ff0;
}
#itemType-3 {
    color: #80ff00;
}
#itemType-4 {
    color: #dcc77c;
}
#itemBonuses {
    color: #80ff00;
}
#character {
    z-index: 0;
}
.events {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
    margin: 0;
    overflow: hidden;
    width: 308px;
    padding-top: 0;
    height: 189px;
}
.pics {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
    margin: 0;
    overflow: hidden;
    width: 627px;
    padding-top: 0;
    height: 176px;
}
a {
    color: #9f7401;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
}
a:hover {
    color: #fff;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
}
a.faq {
    color: #9f7401;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
}
a.faq:hover {
    color: #fff;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
}
a.faq2 {
    color: #fff;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
}
a.faq2:hover {
    color: #9f7401;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
}
a.bodytextwhite {
    color: #fff;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
}
a.bodytextwhite:hover {
    color: #fff;
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
}
a.bodytext {
    color: #900;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
}
a.bodytext:hover {
    color: #900;
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
}
a.bodytextnews {
    color: #391602;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
}
a.bodytextnews:hover {
    color: #391602;
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
}
a.bodytext2 {
    color: #900;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
}
a.bodytext2:hover {
    color: #900;
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
}
a.bodytextwhite {
    color: #fff;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
}
a.bodytextwhite:hover {
    color: #fff;
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
}
a.bodytextwhitesml {
    color: #fff;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 400;
}
a.bodytextwhitesml:hover {
    color: #fff;
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 400;
}
a.bodytextred {
    color: red;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
}
a.bodytextred:hover {
    color: red;
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
}
a.bodytextred2 {
    color: red;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 700;
}
a.bodytextred2:hover {
    color: red;
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 700;
}
a.bodytextred3 {
    color: #900;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
}
a.bodytextred3:hover {
    color: #900;
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
}
a.bodytextred4 {
    color: #900;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 400;
}
a.bodytextred4:hover {
    color: #900;
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 400;
}
a.brown {
    color: #25120b;
    text-decoration: none;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
}
a.brown:hover {
    color: #25120b;
    text-decoration: underline;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
}
.footer {
    color: #8c8c8c;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 400;
    line-height: 14px;
}
a.footer {
    font-size: 10px;
    color: #8c8c8c;
    text-decoration: underline;
    line-height: 14px;
}
a.footer:hover {
    font-size: 10px;
    color: #fff;
    text-decoration: underline;
    line-height: 14px;
}
#nav {
    position: relative;
    left: 63px;
    width: 141;
}
#nav2 {
    position: relative;
    left: 63px;
    top: 1px;
    width: 141;
}
#nav3 {
    position: relative;
    left: 63px;
    top: 2px;
    width: 141;
}
#nav4 {
    position: relative;
    left: 63px;
    top: 3px;
    width: 141;
}
#nav5 {
    position: relative;
    left: 63px;
    top: 4px;
    width: 141;
}
#nav6 {
    position: relative;
    left: 63px;
    top: 6px;
    width: 141;
}
#nav7 {
    position: relative;
    left: 63px;
    top: 5px;
    width: 141;
}
#navtbl {
    position: relative;
    left: 1px;
    width: 141;
    top: -12px;
}
#contentheader {
    position: relative;
    align: top;
}
#contentfooter {
    position: absolute;
    text-align: bottom;
}
.text {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #000;
}
.textmed {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #000;
}
.textlg {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #000;
}
.text1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #fff;
}
.text2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 400;
    color: #000;
}
.textbrown {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #25120b;
}
.textred {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #8c0000;
}
.textredbold {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 700;
    color: #8c0000;
}
.textred2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: red;
}
.textwhitesml {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #fff;
}
.textwhite {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 400;
    color: #fff;
}
.textwhitelg {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #fff;
}
.scroll_img {
    margin: 5px;
    float: left;
}
#contenttitlehome {
    position: relative;
    width: 682px;
}
#contenttitle {
    position: relative;
}
.textred {
    color: #900;
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 400;
}
.textbrown {
    color: #391602;
    font-size: 11px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 400;
}
.textred2 {
    color: #900;
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 700;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    color: #ffffff;
    text-align: left;
    list-style: none;
    background-color: #060606;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 0.25rem;
  }

  .dropdown-menu > li > a {
    display: block;
    padding: 0.25rem 1.5rem;
    clear: both;
    font-weight: 400;
    color: #ff0000;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
  }

  .dropdown-menu > li > a:hover,
  .dropdown-menu > li > a:focus {
    color: #ffffff;
    text-decoration: none;
    background-color: #454545;
  }

.textredlg {
    color: #900;
    font-size: 13px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 400;
}
.textbrownlg {
    color: #391602;
    font-size: 13px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 400;
}
.textredlglg {
    color: #900;
    font-size: 15px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 400;
}
.contenttext1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #000;
}
.contenttext2 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #000;
}
#sword {
    position: relative;
    left: 250px;
    top: -5px;
    z-index: 1;
}
.tsmc {
    color: #fff;
    font-size: 6pt;
    font-family: courier new, Courier, monospace;
    font-style: normal;
    font-weight: 400;
}
.tsmy {
    color: #dfdfdf;
    font-size: 7pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-variant: small-caps;
    vertical-align: bottom;
}
.tsmy:link {
    color: #dfdfdf;
    font-size: 7pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-variant: small-caps;
    vertical-align: bottom;
}
.tsmy:active {
    color: #dfdfdf;
    font-size: 7pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-variant: small-caps;
    vertical-align: bottom;
}
.tsmy:visited {
    color: #dfdfdf;
    font-size: 7pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-variant: small-caps;
    vertical-align: bottom;
}
.tsmy:hover {
    color: #dfdfdf;
    font-size: 7pt;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 700;
    font-variant: small-caps;
    vertical-align: bottom;
}
#ticket_container {
    float: left;
    position: relative;
    width: 560px;
    left: 0;
    top: 0;
}
.newsType {
    background-image: url(../img/newstype.html);
    height: 1.5em;
    width: 80px;
    text-align: center;
    padding: 2px;
    overflow: hidden;
    color: #fff;
    font-size: 9px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-style: normal;
}
.menu {
    width: 163px;
}
#botmainbkgrd {
    position: absolute;
    width: 482px;
    height: 381px;
    overflow: hidden;
    background-image: url(../img/bot_main_bkgrd.html);
    background-repeat: no-repeat;
    left: 0;
}
.style20 {
  background: url(../img/icons/spark.gif) repeat scroll 0% 0% transparent;
}
.style21 {
  background: url(../img/icons/spark2.gif) repeat scroll 0% 43% transparent;
}
#tbnewsmainbkgrd {
    position: absolute;
    width: 482px;
    height: 296px;
    overflow: hidden;
    background-image: url(../img/latest_news_bkgrd.gif);
    background-repeat: no-repeat;
    left: 0;
}
#poll_container {
    position: absolute;
    width: 482px;
    height: 381px;
    overflow: hidden;
    background-image: url(../img/bot_main_bkgrd.html);
    background-repeat: no-repeat;
    left: 0;
}
#polltext_container {
    float: left;
    position: relative;
    width: 360px;
    left: 200px;
    top: 76px;
}
#polltext_container_ff {
    float: left;
    position: relative;
    width: 260px;
    left: 200px;
    top: 100px;
}
#polltext_container_form {
    float: left;
    position: relative;
    width: 260px;
    left: 185px;
    top: 55px;
}
#polltitle_container {
    position: relative;
    left: 105px;
    top: 93px;
}
.stylep {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #fff;
}
a.poll {
    color: #fff;
    font-weight: 400;
    text-decoration: none;
}
a.poll:hover {
    color: #fff;
    font-weight: 400;
    text-decoration: underline;
}
.pollperc {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
}
.tblcell {
    border-bottom: solid 1px #25120b;
    border-right: solid 1px #25120b;
}
.tblcellrt {
    border-bottom: solid 1px #25120b;
    border-right: solid 1px #25120b;
}
.news_style {
    display: none;
}
.news_show {
    position: absolute;
    margin-left: 45px;
    top: 84px;
    background-color: #000;
    color: #000;
    font: 100% arial, lucida grande, Verdana, Sans-Serif;
    clip: rect(0 627px 176px 0);
    z-index: 1;
}
.news_show2 {
    position: absolute;
    margin-left: 64px;
    top: 204px;
    z-index: 3;
}
.news_show3 {
    position: absolute;
    margin-left: 345px;
    top: 89px;
    z-index: 3;
}
.news_border {
    background-color: #000;
    width: 627px;
    height: 176px;
    font: 100% arial, lucida grande, Verdana, Sans-Serif;
}
.buttondiv {
    position: absolute;
    margin-left: 596px;
    top: 232px;
    width: 70px;
    border-top: none;
    z-index: 4;
}
.btn.active {
    opacity: 0.5;
}
.btn:before {
    content: " ";
    display: block;
    background: rgba(255, 255, 255, 0.1);
    position: absolute;
    top: -20px;
    left: -230px;
    transform: rotate(-45deg);
    transition: all 0.3s ease-in-out;
}
.btn:hover:before {
    margin-left: 420%;
}
.btn:hover {
    color: #dfd1af;
    -webkit-filter: brightness(120%);
    filter: brightness(120%);
}
.bar-right::after {
    content: "";
    width: 100%;
    height: 1px;
    background: linear-gradient(to left, #dfd1af 20%, #8b8773 20%);
}
.form-control.is-invalid {
    border: 2px solid red;
}
.news_move {
    position: relative;
}
.mytable {
    width: 627px;
    height: 176px;
    vertical-align: top;
}
#inventoryold {
    z-index: 0;
    width: 177px;
    height: 281px;
    background-repeat: no-repeat;
    background-image: url(../img/inventory/inventoryold.gif);
    border-spacing: 0;
    padding: 14px 9px 9px 19px;
}
table.inventoryold tr {
    height: 25px;
    padding: 0;
    margin: 0;
}
#inventory {
    z-index: 0;
    width: 361px;
    height: 302px;
    background-repeat: no-repeat;
    background-image: url(../img/inven.png);
    border-spacing: 0;
    padding: 8px 7px 30px 190px;
}
table.inventory tr {
    height: 25px;
    padding: 0;
    margin: 0;
}
.info, .success, .warning, .error {
    border-radius: 3px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    margin-bottom: 10px;
    -moz-border-radius: 3px;
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    padding: 10px 5px 10px 40px;
    text-shadow: #fff 1px 1px 1px;
    -webkit-border-radius: 3px;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

.info {
    background: #bde5f8 url(../img/icons/exclamation.html) no-repeat 10px center;
    color: #004079;
}

.success {
    background: #dff2bf url(../img/icons/accept.html) no-repeat 10px center;
    color: #3f7a00;
}

.warning {
    background: #feefb3 url(../img/icons/error.html) no-repeat 10px center;
    color: #804d00;

}

.error {
    background: #ffbaba url(../img/icons/cancel.html) no-repeat 10px center;
    color: #870008;
}

table.inventory td {
    position: relative;
    margin: 0;
    text-align: center;
    padding: 0;
}
.largeFont {
    font-size: 12px;
}
.largeFont:hover {
    font-size: 12px;
}
.lightrope {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    margin: -15px 0 0;
    padding: 0;
    pointer-events: none;
    width: 100%;
}
.lightrope li {
    position: relative;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    list-style: none;
    margin: 0;
    padding: 0;
    display: block;
    width: 12px;
    height: 28px;
    border-radius: 50%;
    margin: 20px;
    display: inline-block;
    background: #00f7a5;
    box-shadow: 0 4.6666666667px 24px 3px #00f7a5;
    animation-name: flash-1;
    animation-duration: 2s;
}
.lightrope li:nth-child(2n + 1) {
    background: #0ff;
    box-shadow: 0 4.6666666667px 24px 3px rgba(0, 255, 255, 0.5);
    animation-name: flash-2;
    animation-duration: 0.4s;
}
.lightrope li:nth-child(4n + 2) {
    background: #f70094;
    box-shadow: 0 4.6666666667px 24px 3px #f70094;
    animation-name: flash-3;
    animation-duration: 1.1s;
}
.lightrope li:nth-child(odd) {
    animation-duration: 1.8s;
}
.lightrope li:nth-child(3n + 1) {
    animation-duration: 1.4s;
}
.lightrope li:before {
    content: "";
    position: absolute;
    background: #222;
    width: 10px;
    height: 9.3333333333px;
    border-radius: 3px;
    top: -4.6666666667px;
    left: 1px;
}
.lightrope li:after {
    content: "";
    top: -14px;
    left: 9px;
    position: absolute;
    width: 52px;
    height: 18.6666666667px;
    border-bottom: solid #222 2px;
    border-radius: 50%;
}
.lightrope li:last-child:after {
    content: none;
}
.lightrope li:first-child {
    margin-left: -40px;
}
@keyframes flash-1 {
    0,
    100% {
        background: #00f7a5;
        box-shadow: 0 4.6666666667px 24px 3px #00f7a5;
    }
    50% {
        background: rgba(0, 247, 165, 0.4);
        box-shadow: 0 4.6666666667px 24px 3px rgba(0, 247, 165, 0.2);
    }
}
@keyframes flash-2 {
    0,
    100% {
        background: #0ff;
        box-shadow: 0 4.6666666667px 24px 3px #0ff;
    }
    50% {
        background: rgba(0, 255, 255, 0.4);
        box-shadow: 0 4.6666666667px 24px 3px rgba(0, 255, 255, 0.2);
    }
}
@keyframes flash-3 {
    0,
    100% {
        background: #f70094;
        box-shadow: 0 4.6666666667px 24px 3px #f70094;
    }
    50% {
        background: rgba(247, 0, 148, 0.4);
        box-shadow: 0 4.6666666667px 24px 3px rgba(247, 0, 148, 0.2);
    }
}
div.select-language {
    text-align: center;
    line-height: 18px;
}
.server-notice {
    background-image: url(../img/header_rule2.gif);
    width: 1262px;
    height: 49px;
    background-repeat: no-repeat;
    text-align: center;
    line-height: 45px;
    color: #ff0;
    font-size: 13px;
    font-weight: 700;
    position: relative;
}

.server-notice-start {
    font-size: 17px;
    font-weight: 700;
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    font: 15px Trebuchet MS;
    color: orange;
}
p.credits {
    text-align: center;
    line-height: 10px;
    color: #fff;
    font-weight: 700;
}
p.links {
    text-align: center;
    line-height: 13px;
    color: gray;
}
p.copyright {
    text-align: center;
    line-height: 8px;
    color: #fff;
}
div.bckground {
    margin: 0 auto;
    background: url(../img/kol-bkgrd.jpg) no-repeat 50% 0%;
    overflow: visible;
}
td.nav-bckground {
    background: url(../img/nav_bck.gif);
    background-repeat: repeat-y;
}
td.nav-bckground2 {
    background: url(../img/nav_bck2.gif);
    background-repeat: repeat-y;
}
.td-1 {
    background-image: url(../img/login_bck.jpg);
    padding-left: 5px;
    padding-top: 5px;
}
.td-3 {
    background-image: url(../img/righttoplogo.jpg);
}
td#td-2 {
    background-image: url(../img/login_bck.jpg);
    padding-left: 0;
    padding-top: 5px;
}
div#div-1 {
    background-image: url(../img/header_rule1.gif);
    width: 264px;
    height: 49px;
    background-repeat: no-repeat;
}
div#nav-forums {
    position: relative;
    left: 63px;
    width: 141;
    margin-top: 5px;
}
div#nav-fb {
    position: relative;
    left: 10px;
    width: 141;
    margin-top: 20px;
    margin-left: -30px;
}
div#nav-fb2 {
    position: relative;
    left: 10px;
    width: 141;
    margin-top: 10px;
    margin-left: -30px;
}
iframe#fb-frame {
    border: 0;
    overflow: hidden;
}
td#banner-img {
    background: url(../img/banner.gif);
}
img.top-nav-buttons {
    position: relative;
    z-index: 7;
}
td#bottom-index {
    background-image: url(../img/content_bottom_index_0312.gif);
    background-repeat: no-repeat;
}
td.footer-bckground {
    background-image: url(../img/footer_bck.gif);
    background-repeat: no-repeat;
}
.sRankPos {
    width: 50px;
    height: 27px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #c31402;
}
.sRankName {
    width: 130px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
}
.sRankLoyalty {
    width: 120px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #bd8e00;
}
.sealed {
    position: absolute;
    width: 80%;
    height: 80%;
    top: 4px;
    left: 6px;
    background: rgb(200 196 80 / 33%);
}
td.shortRankingsMain {
    height: 26px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bolder;
    color: #fff;
}
a.nav-link {
    font-weight: 700;
}
a.nav-link-red {
    color: #980000;
    font-weight: 700;
}
a.nav-link-green {
    color: green;
    font-weight: 700;
}
td.nav-bckground-img {
    width: 141px;
    height: 24px;
    background-image: url(../img/bckground-img.gif);
}
#inventory2 {
    z-index: 0;
    width: 361px;
    height: 229px;
    background-repeat: no-repeat;
    background-image: url(../img/inven2.png);
    border-spacing: 0;
    padding: 1px 9px 25px 12px;
}
table.inventory2 tr {
    height: 45px;
    padding: 0;
    margin: 0;
}
table.inventory2 td {
    margin: 0;
    text-align: center;
    padding: 0;
}
td.characterItem {
    position: relative;
}
td.characterItem div.countable {
    position: absolute;
    font-weight: 700;
    font-size: 11px;
    top: 29px;
    left: 5px;
    color: #fff;
}
.animated-button {
    background: linear-gradient(-30deg, #0b1b3d 50%, #08142b 50%);
    padding: 20px 40px;
    margin: 12px;
    display: inline-block;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    overflow: hidden;
    color: #d4e0f7;
    font-size: 20px;
    letter-spacing: 2.5px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.animated-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #8592ad;
    opacity: 0;
    -webkit-transition: 0.2s opacity ease-in-out;
    transition: 0.2s opacity ease-in-out;
}
.animated-button:hover::before {
    opacity: 0.2;
}
.animated-button span {
    position: absolute;
}
.animated-button span:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, right top, left top, from(rgba(8, 20, 43, 0)), to(#2662d9));
    background: linear-gradient(to left, rgba(8, 20, 43, 0), #2662d9);
    -webkit-animation: 2s animateTop linear infinite;
    animation: 2s animateTop linear infinite;
}
@-webkit-keyframes animateTop {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
@keyframes animateTop {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
.animated-button span:nth-child(2) {
    top: 0;
    right: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(8, 20, 43, 0)), to(#2662d9));
    background: linear-gradient(to top, rgba(8, 20, 43, 0), #2662d9);
    -webkit-animation: 2s animateRight linear -1s infinite;
    animation: 2s animateRight linear -1s infinite;
}
@-webkit-keyframes animateRight {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}
@keyframes animateRight {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}
.animated-button span:nth-child(3) {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(8, 20, 43, 0)), to(#2662d9));
    background: linear-gradient(to right, rgba(8, 20, 43, 0), #2662d9);
    -webkit-animation: 2s animateBottom linear infinite;
    animation: 2s animateBottom linear infinite;
}
@-webkit-keyframes animateBottom {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}
@keyframes animateBottom {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}
.animated-button span:nth-child(4) {
    top: 0;
    left: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(8, 20, 43, 0)), to(#2662d9));
    background: linear-gradient(to bottom, rgba(8, 20, 43, 0), #2662d9);
    -webkit-animation: 2s animateLeft linear -1s infinite;
    animation: 2s animateLeft linear -1s infinite;
}
@-webkit-keyframes animateLeft {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}
@keyframes animateLeft {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}
.animated-button1 {
    background: linear-gradient(-30deg, #3d0b0b 50%, #2b0808 50%);
    display: inline-block;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    overflow: hidden;
    color: #f7d4d4;
    /* font-size: 20px;
    letter-spacing: 2.5px; */
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.animated-button1::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ad8585;
    opacity: 0;
    -webkit-transition: 0.2s opacity ease-in-out;
    transition: 0.2s opacity ease-in-out;
}
.animated-button1:hover::before {
    opacity: 0.2;
}
.animated-button1 span {
    position: absolute;
}
.animated-button1 span:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, right top, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
    background: linear-gradient(to left, rgba(43, 8, 8, 0), #d92626);
    -webkit-animation: 2s animateTop linear infinite;
    animation: 2s animateTop linear infinite;
}
@keyframes animateTop {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
.animated-button1 span:nth-child(2) {
    top: 0;
    right: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(43, 8, 8, 0)), to(#d92626));
    background: linear-gradient(to top, rgba(43, 8, 8, 0), #d92626);
    -webkit-animation: 2s animateRight linear -1s infinite;
    animation: 2s animateRight linear -1s infinite;
}
@keyframes animateRight {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}
.animated-button1 span:nth-child(3) {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(43, 8, 8, 0)), to(#d92626));
    background: linear-gradient(to right, rgba(43, 8, 8, 0), #d92626);
    -webkit-animation: 2s animateBottom linear infinite;
    animation: 2s animateBottom linear infinite;
}
@keyframes animateBottom {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}
.animated-button1 span:nth-child(4) {
    top: 0;
    left: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(43, 8, 8, 0)), to(#d92626));
    background: linear-gradient(to bottom, rgba(43, 8, 8, 0), #d92626);
    -webkit-animation: 2s animateLeft linear -1s infinite;
    animation: 2s animateLeft linear -1s infinite;
}
@keyframes animateLeft {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}
.progress-bar {
    width: 100%;
    height: 20px;
    border-radius: 10px;
    background-color: #857474;
    position: relative;
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 10px;
    background-color: #0F691C;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    line-height: 20px;
}
.xuna {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
.flip {
    height: auto;
    width: auto;
    margin: 0 auto;
}

.flip img {
    width: auto;
    height: auto;
}
.animated-button2 {
    background: linear-gradient(-30deg, #3d240b 50%, #2b1a08 50%);
    display: inline-block;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    overflow: hidden;
    color: #f7e6d4;
    letter-spacing: 2.5px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.animated-button2::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ad9985;
    opacity: 0;
    -webkit-transition: 0.2s opacity ease-in-out;
    transition: 0.2s opacity ease-in-out;
}
.animated-button2:hover::before {
    opacity: 0.2;
}
.animated-button2 span {
    position: absolute;
}
.animated-button2 span:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, right top, left top, from(rgba(43, 26, 8, 0)), to(#320b02));
    background: linear-gradient(to left, rgba(43, 26, 8, 0), #d98026);
    -webkit-animation: 2s animateTop linear infinite;
    animation: 2s animateTop linear infinite;
}
@keyframes animateTop {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
.animated-button2 span:nth-child(2) {
    top: 0;
    right: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(43, 26, 8, 0)), to(#d98026));
    background: linear-gradient(to top, rgba(43, 26, 8, 0), #d98026);
    -webkit-animation: 2s animateRight linear -1s infinite;
    animation: 2s animateRight linear -1s infinite;
}
@keyframes animateRight {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}
.animated-button2 span:nth-child(3) {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(43, 26, 8, 0)), to(#d98026));
    background: linear-gradient(to right, rgba(43, 26, 8, 0), #d98026);
    -webkit-animation: 2s animateBottom linear infinite;
    animation: 2s animateBottom linear infinite;
}
@keyframes animateBottom {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}
.animated-button2 span:nth-child(4) {
    top: 0;
    left: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(43, 26, 8, 0)), to(#d98026));
    background: linear-gradient(to bottom, rgba(43, 26, 8, 0), #d98026);
    -webkit-animation: 2s animateLeft linear -1s infinite;
    animation: 2s animateLeft linear -1s infinite;
}
@keyframes animateLeft {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}
.animated-button3 {
    background: linear-gradient(-30deg, #3d3d0b 50%, #2b2b08 50%);
    display: inline-block;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    overflow: hidden;
    color: #f7f7d4;
    font-size: 20px;
    letter-spacing: 2.5px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.animated-button3::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #adad85;
    opacity: 0;
    -webkit-transition: 0.2s opacity ease-in-out;
    transition: 0.2s opacity ease-in-out;
}
.animated-button3:hover::before {
    opacity: 0.2;
}
.animated-button3 span {
    position: absolute;
}
.animated-button3 span:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, right top, left top, from(rgba(43, 43, 8, 0)), to(#d9d926));
    background: linear-gradient(to left, rgba(43, 43, 8, 0), #d9d926);
    -webkit-animation: 2s animateTop linear infinite;
    animation: 2s animateTop linear infinite;
}
@keyframes animateTop {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
.animated-button3 span:nth-child(2) {
    top: 0;
    right: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(43, 43, 8, 0)), to(#d9d926));
    background: linear-gradient(to top, rgba(43, 43, 8, 0), #d9d926);
    -webkit-animation: 2s animateRight linear -1s infinite;
    animation: 2s animateRight linear -1s infinite;
}
@keyframes animateRight {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}
.animated-button3 span:nth-child(3) {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(43, 43, 8, 0)), to(#d9d926));
    background: linear-gradient(to right, rgba(43, 43, 8, 0), #d9d926);
    -webkit-animation: 2s animateBottom linear infinite;
    animation: 2s animateBottom linear infinite;
}
@keyframes animateBottom {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}
@keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}
.animated-button3 span:nth-child(4) {
    top: 0;
    left: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(43, 43, 8, 0)), to(#d9d926));
    background: linear-gradient(to bottom, rgba(43, 43, 8, 0), #d9d926);
    -webkit-animation: 2s animateLeft linear -1s infinite;
    animation: 2s animateLeft linear -1s infinite;
}
@keyframes animateLeft {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}
.animated-button4 {
    display: inline-block;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    overflow: hidden;
    color: #e6f7d4;
    letter-spacing: 2.5px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.animated-button4::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #99ad85;
    opacity: 0;
    -webkit-transition: 0.2s opacity ease-in-out;
    transition: 0.2s opacity ease-in-out;
}
.animated-button4:hover::before {
    opacity: 0.2;
}
.animated-button4 span {
    position: absolute;
}
.animated-button4 span:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, right top, left top, from(rgba(26, 43, 8, 0)), to(#80d926));
    background: linear-gradient(to left, rgba(26, 43, 8, 0), #80d926);
    -webkit-animation: 2s animateTop linear infinite;
    animation: 2s animateTop linear infinite;
}
@keyframes animateTop {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
.animated-button4 span:nth-child(2) {
    top: 0;
    right: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(26, 43, 8, 0)), to(#80d926));
    background: linear-gradient(to top, rgba(26, 43, 8, 0), #80d926);
    -webkit-animation: 2s animateRight linear -1s infinite;
    animation: 2s animateRight linear -1s infinite;
}
@keyframes animateRight {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}
.animated-button4 span:nth-child(3) {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(26, 43, 8, 0)), to(#80d926));
    background: linear-gradient(to right, rgba(26, 43, 8, 0), #80d926);
    -webkit-animation: 2s animateBottom linear infinite;
    animation: 2s animateBottom linear infinite;
}
@keyframes animateBottom {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}
.animated-button4 span:nth-child(4) {
    top: 0;
    left: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(26, 43, 8, 0)), to(#80d926));
    background: linear-gradient(to bottom, rgba(26, 43, 8, 0), #80d926);
    -webkit-animation: 2s animateLeft linear -1s infinite;
    animation: 2s animateLeft linear -1s infinite;
}
@keyframes animateLeft {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}
.animated-button5 {
    background: linear-gradient(-30deg, #0b3d0b 50%, #082b08 50%);
    display: inline-block;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    overflow: hidden;
    color: #d4f7d4;
    font-size: 20px;
    letter-spacing: 2.5px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.animated-button5::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #85ad85;
    opacity: 0;
    -webkit-transition: 0.2s opacity ease-in-out;
    transition: 0.2s opacity ease-in-out;
}
.animated-button5:hover::before {
    opacity: 0.2;
}
.animated-button5 span {
    position: absolute;
}
.animated-button5 span:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, right top, left top, from(rgba(8, 43, 8, 0)), to(#26d926));
    background: linear-gradient(to left, rgba(8, 43, 8, 0), #26d926);
    -webkit-animation: 2s animateTop linear infinite;
    animation: 2s animateTop linear infinite;
}
@keyframes animateTop {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
.animated-button5 span:nth-child(2) {
    top: 0;
    right: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(8, 43, 8, 0)), to(#26d926));
    background: linear-gradient(to top, rgba(8, 43, 8, 0), #26d926);
    -webkit-animation: 2s animateRight linear -1s infinite;
    animation: 2s animateRight linear -1s infinite;
}
@keyframes animateRight {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}
.animated-button5 span:nth-child(3) {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(8, 43, 8, 0)), to(#26d926));
    background: linear-gradient(to right, rgba(8, 43, 8, 0), #26d926);
    -webkit-animation: 2s animateBottom linear infinite;
    animation: 2s animateBottom linear infinite;
}
@keyframes animateBottom {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}
.animated-button5 span:nth-child(4) {
    top: 0;
    left: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(8, 43, 8, 0)), to(#26d926));
    background: linear-gradient(to bottom, rgba(8, 43, 8, 0), #26d926);
    -webkit-animation: 2s animateLeft linear -1s infinite;
    animation: 2s animateLeft linear -1s infinite;
}
@keyframes animateLeft {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}
.animated-button6 {
    background: linear-gradient(-30deg, #0b3d24 50%, #082b1a 50%);
    display: inline-block;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    overflow: hidden;
    color: #d4f7e6;
    font-size: 20px;
    letter-spacing: 2.5px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.animated-button6::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #85ad99;
    opacity: 0;
    -webkit-transition: 0.2s opacity ease-in-out;
    transition: 0.2s opacity ease-in-out;
}
.animated-button6:hover::before {
    opacity: 0.2;
}
.animated-button6 span {
    position: absolute;
}
.animated-button6 span:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, right top, left top, from(rgba(8, 43, 26, 0)), to(#26d980));
    background: linear-gradient(to left, rgba(8, 43, 26, 0), #26d980);
    -webkit-animation: 2s animateTop linear infinite;
    animation: 2s animateTop linear infinite;
}
@keyframes animateTop {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
.animated-button6 span:nth-child(2) {
    top: 0;
    right: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(8, 43, 26, 0)), to(#26d980));
    background: linear-gradient(to top, rgba(8, 43, 26, 0), #26d980);
    -webkit-animation: 2s animateRight linear -1s infinite;
    animation: 2s animateRight linear -1s infinite;
}
@keyframes animateRight {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}
.animated-button6 span:nth-child(3) {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(8, 43, 26, 0)), to(#26d980));
    background: linear-gradient(to right, rgba(8, 43, 26, 0), #26d980);
    -webkit-animation: 2s animateBottom linear infinite;
    animation: 2s animateBottom linear infinite;
}
@keyframes animateBottom {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}
.animated-button6 span:nth-child(4) {
    top: 0;
    left: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(8, 43, 26, 0)), to(#26d980));
    background: linear-gradient(to bottom, rgba(8, 43, 26, 0), #26d980);
    -webkit-animation: 2s animateLeft linear -1s infinite;
    animation: 2s animateLeft linear -1s infinite;
}
@keyframes animateLeft {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}
.animated-button7 {
    background: linear-gradient(-30deg, #0b3d3d 50%, #082b2b 50%);
    display: inline-block;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    overflow: hidden;
    color: #d4f7f7;
    font-size: 20px;
    letter-spacing: 2.5px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.animated-button7::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #85adad;
    opacity: 0;
    -webkit-transition: 0.2s opacity ease-in-out;
    transition: 0.2s opacity ease-in-out;
}
.animated-button7:hover::before {
    opacity: 0.2;
}
.animated-button7 span {
    position: absolute;
}
.animated-button7 span:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, right top, left top, from(rgba(8, 43, 43, 0)), to(#26d9d9));
    background: linear-gradient(to left, rgba(8, 43, 43, 0), #26d9d9);
    -webkit-animation: 2s animateTop linear infinite;
    animation: 2s animateTop linear infinite;
}
@keyframes animateTop {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
.animated-button7 span:nth-child(2) {
    top: 0;
    right: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(8, 43, 43, 0)), to(#26d9d9));
    background: linear-gradient(to top, rgba(8, 43, 43, 0), #26d9d9);
    -webkit-animation: 2s animateRight linear -1s infinite;
    animation: 2s animateRight linear -1s infinite;
}
@keyframes animateRight {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}
.animated-button7 span:nth-child(3) {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(8, 43, 43, 0)), to(#26d9d9));
    background: linear-gradient(to right, rgba(8, 43, 43, 0), #26d9d9);
    -webkit-animation: 2s animateBottom linear infinite;
    animation: 2s animateBottom linear infinite;
}
@keyframes animateBottom {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}
.animated-button7 span:nth-child(4) {
    top: 0;
    left: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(8, 43, 43, 0)), to(#26d9d9));
    background: linear-gradient(to bottom, rgba(8, 43, 43, 0), #26d9d9);
    -webkit-animation: 2s animateLeft linear -1s infinite;
    animation: 2s animateLeft linear -1s infinite;
}
@keyframes animateLeft {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}
.animated-button8 {
    background: linear-gradient(-30deg, #0b243d 50%, #081a2b 50%);
    display: inline-block;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    overflow: hidden;
    color: #d4e6f7;
    font-size: 20px;
    letter-spacing: 2.5px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.animated-button8::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #8599ad;
    opacity: 0;
    -webkit-transition: 0.2s opacity ease-in-out;
    transition: 0.2s opacity ease-in-out;
}
.animated-button8:hover::before {
    opacity: 0.2;
}
.animated-button8 span {
    position: absolute;
}
.animated-button8 span:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, right top, left top, from(rgba(8, 26, 43, 0)), to(#2680d9));
    background: linear-gradient(to left, rgba(8, 26, 43, 0), #2680d9);
    -webkit-animation: 2s animateTop linear infinite;
    animation: 2s animateTop linear infinite;
}
@keyframes animateTop {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
.animated-button8 span:nth-child(2) {
    top: 0;
    right: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(8, 26, 43, 0)), to(#2680d9));
    background: linear-gradient(to top, rgba(8, 26, 43, 0), #2680d9);
    -webkit-animation: 2s animateRight linear -1s infinite;
    animation: 2s animateRight linear -1s infinite;
}
@keyframes animateRight {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}
.animated-button8 span:nth-child(3) {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(8, 26, 43, 0)), to(#2680d9));
    background: linear-gradient(to right, rgba(8, 26, 43, 0), #2680d9);
    -webkit-animation: 2s animateBottom linear infinite;
    animation: 2s animateBottom linear infinite;
}
@keyframes animateBottom {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}
.animated-button8 span:nth-child(4) {
    top: 0;
    left: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(8, 26, 43, 0)), to(#2680d9));
    background: linear-gradient(to bottom, rgba(8, 26, 43, 0), #2680d9);
    -webkit-animation: 2s animateLeft linear -1s infinite;
    animation: 2s animateLeft linear -1s infinite;
}
@keyframes animateLeft {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}
.animated-button9 {
    background: linear-gradient(-30deg, #0b0b3d 50%, #08082b 50%);
    display: inline-block;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    overflow: hidden;
    color: #d4d4f7;
    font-size: 20px;
    letter-spacing: 2.5px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.animated-button9::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #8585ad;
    opacity: 0;
    -webkit-transition: 0.2s opacity ease-in-out;
    transition: 0.2s opacity ease-in-out;
}
.animated-button9:hover::before {
    opacity: 0.2;
}
.animated-button9 span {
    position: absolute;
}
.animated-button9 span:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, right top, left top, from(rgba(8, 8, 43, 0)), to(#2626d9));
    background: linear-gradient(to left, rgba(8, 8, 43, 0), #2626d9);
    -webkit-animation: 2s animateTop linear infinite;
    animation: 2s animateTop linear infinite;
}
@keyframes animateTop {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
.animated-button9 span:nth-child(2) {
    top: 0;
    right: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(8, 8, 43, 0)), to(#2626d9));
    background: linear-gradient(to top, rgba(8, 8, 43, 0), #2626d9);
    -webkit-animation: 2s animateRight linear -1s infinite;
    animation: 2s animateRight linear -1s infinite;
}
@keyframes animateRight {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}
.animated-button9 span:nth-child(3) {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(8, 8, 43, 0)), to(#2626d9));
    background: linear-gradient(to right, rgba(8, 8, 43, 0), #2626d9);
    -webkit-animation: 2s animateBottom linear infinite;
    animation: 2s animateBottom linear infinite;
}
@keyframes animateBottom {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}
.animated-button9 span:nth-child(4) {
    top: 0;
    left: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(8, 8, 43, 0)), to(#2626d9));
    background: linear-gradient(to bottom, rgba(8, 8, 43, 0), #2626d9);
    -webkit-animation: 2s animateLeft linear -1s infinite;
    animation: 2s animateLeft linear -1s infinite;
}
@keyframes animateLeft {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}
.animated-button10 {
    background: linear-gradient(-30deg, #240b3d 50%, #1a082b 50%);
    display: inline-block;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    overflow: hidden;
    color: #e6d4f7;
    font-size: 20px;
    letter-spacing: 2.5px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.animated-button10::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #9985ad;
    opacity: 0;
    -webkit-transition: 0.2s opacity ease-in-out;
    transition: 0.2s opacity ease-in-out;
}
.animated-button10:hover::before {
    opacity: 0.2;
}
.animated-button10 span {
    position: absolute;
}
.animated-button10 span:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, right top, left top, from(rgba(26, 8, 43, 0)), to(#8026d9));
    background: linear-gradient(to left, rgba(26, 8, 43, 0), #8026d9);
    -webkit-animation: 2s animateTop linear infinite;
    animation: 2s animateTop linear infinite;
}
@keyframes animateTop {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
.animated-button10 span:nth-child(2) {
    top: 0;
    right: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(26, 8, 43, 0)), to(#8026d9));
    background: linear-gradient(to top, rgba(26, 8, 43, 0), #8026d9);
    -webkit-animation: 2s animateRight linear -1s infinite;
    animation: 2s animateRight linear -1s infinite;
}
@keyframes animateRight {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}
.animated-button10 span:nth-child(3) {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(26, 8, 43, 0)), to(#8026d9));
    background: linear-gradient(to right, rgba(26, 8, 43, 0), #8026d9);
    -webkit-animation: 2s animateBottom linear infinite;
    animation: 2s animateBottom linear infinite;
}
@keyframes animateBottom {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}
.animated-button10 span:nth-child(4) {
    top: 0;
    left: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(26, 8, 43, 0)), to(#8026d9));
    background: linear-gradient(to bottom, rgba(26, 8, 43, 0), #8026d9);
    -webkit-animation: 2s animateLeft linear -1s infinite;
    animation: 2s animateLeft linear -1s infinite;
}
@keyframes animateLeft {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}
.animated-button11 {
    background: linear-gradient(-30deg, #3d0b3d 50%, #2b082b 50%);
    display: inline-block;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    overflow: hidden;
    color: #f7d4f7;
    font-size: 20px;
    letter-spacing: 2.5px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.animated-button11::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ad85ad;
    opacity: 0;
    -webkit-transition: 0.2s opacity ease-in-out;
    transition: 0.2s opacity ease-in-out;
}
.animated-button11:hover::before {
    opacity: 0.2;
}
.animated-button11 span {
    position: absolute;
}
.animated-button11 span:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, right top, left top, from(rgba(43, 8, 43, 0)), to(#d926d9));
    background: linear-gradient(to left, rgba(43, 8, 43, 0), #d926d9);
    -webkit-animation: 2s animateTop linear infinite;
    animation: 2s animateTop linear infinite;
}
@keyframes animateTop {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
.animated-button11 span:nth-child(2) {
    top: 0;
    right: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(43, 8, 43, 0)), to(#d926d9));
    background: linear-gradient(to top, rgba(43, 8, 43, 0), #d926d9);
    -webkit-animation: 2s animateRight linear -1s infinite;
    animation: 2s animateRight linear -1s infinite;
}
@keyframes animateRight {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}
.animated-button11 span:nth-child(3) {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(43, 8, 43, 0)), to(#d926d9));
    background: linear-gradient(to right, rgba(43, 8, 43, 0), #d926d9);
    -webkit-animation: 2s animateBottom linear infinite;
    animation: 2s animateBottom linear infinite;
}
@keyframes animateBottom {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}
.animated-button11 span:nth-child(4) {
    top: 0;
    left: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(43, 8, 43, 0)), to(#d926d9));
    background: linear-gradient(to bottom, rgba(43, 8, 43, 0), #d926d9);
    -webkit-animation: 2s animateLeft linear -1s infinite;
    animation: 2s animateLeft linear -1s infinite;
}
@keyframes animateLeft {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}
.animated-button12 {
    background: linear-gradient(-30deg, #3d0b24 50%, #2b081a 50%);
    display: inline-block;
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
    overflow: hidden;
    color: #f7d4e6;
    font-size: 20px;
    letter-spacing: 2.5px;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}
.animated-button12::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ad8599;
    opacity: 0;
    -webkit-transition: 0.2s opacity ease-in-out;
    transition: 0.2s opacity ease-in-out;
}
.animated-button12:hover::before {
    opacity: 0.2;
}
.animated-button12 span {
    position: absolute;
}
.animated-button12 span:nth-child(1) {
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, right top, left top, from(rgba(43, 8, 26, 0)), to(#d92680));
    background: linear-gradient(to left, rgba(43, 8, 26, 0), #d92680);
    -webkit-animation: 2s animateTop linear infinite;
    animation: 2s animateTop linear infinite;
}
@keyframes animateTop {
    0% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
}
.animated-button12 span:nth-child(2) {
    top: 0;
    right: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left bottom, left top, from(rgba(43, 8, 26, 0)), to(#d92680));
    background: linear-gradient(to top, rgba(43, 8, 26, 0), #d92680);
    -webkit-animation: 2s animateRight linear -1s infinite;
    animation: 2s animateRight linear -1s infinite;
}
@keyframes animateRight {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    100% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
}
.animated-button12 span:nth-child(3) {
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: -webkit-gradient(linear, left top, right top, from(rgba(43, 8, 26, 0)), to(#d92680));
    background: linear-gradient(to right, rgba(43, 8, 26, 0), #d92680);
    -webkit-animation: 2s animateBottom linear infinite;
    animation: 2s animateBottom linear infinite;
}
@keyframes animateBottom {
    0% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }
    100% {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
}
.animated-button12 span:nth-child(4) {
    top: 0;
    left: 0;
    height: 100%;
    width: 2px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(43, 8, 26, 0)), to(#d92680));
    background: linear-gradient(to bottom, rgba(43, 8, 26, 0), #d92680);
    -webkit-animation: 2s animateLeft linear -1s infinite;
    animation: 2s animateLeft linear -1s infinite;
}
@keyframes animateLeft {
    0% {
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }
    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}
.itemSelector {
    cursor: pointer;
    width: 31%;
    height: 75px;
    border: 1px solid black;
    background-color: #e7dbc3;
    margin-left: 2px;
    margin-right: 2px;
    float: left;
    text-align: center;
    font-weight: bold;
}
.itemSelector.active {
    border: 1px solid red;
    background-color: #99ff99;
}
/* Have fun stealing just because you selebr can't do it */
.main-wrapper {
    background-color: #310C11;
    color: #fff;
    font-family: Arial, sans-serif;
    padding: 20px;
}
.main-wrapper-r {
    background-color: #310C11;
    padding: 20px;
}
/* Have fun stealing just because you selebr can't do it */
.ranking-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 36px;
}
/* Have fun stealing just because you selebr can't do it */
.ranking-item {
    width: 200px;
    padding: 20px;
    background: linear-gradient(180deg, #591923 0%, #310C11 50%, #290A0F 75%, rgba(10, 14, 21, 0) 100%);
    border-radius: 10px;
    text-align: center;
    position: relative;
}
/* Have fun stealing just because you selebr can't do it */
.ranking-item.gold-highlight {
    margin-top: -30px;
    z-index: 1;
    width: 220px;
    padding: 25px;
}
/* Have fun stealing just because you selebr can't do it */
.ranking-crown {
    width: 52px;
    position: absolute;
    top: -38px;
    left: 50%;
    transform: translateX(-50%);
}
/* Have fun stealing just because you selebr can't do it */
.gold-crown {
    filter: brightness(1.2) sepia(1) hue-rotate(20deg);
}
/* Have fun stealing just because you selebr can't do it */
.silver-crown {
    filter: grayscale(30%) brightness(1.1);
}
/* Have fun stealing just because you selebr can't do it */
.bronze-crown {
    filter: sepia(1) hue-rotate(-10deg) brightness(0.9);
}
/* Have fun stealing just because you selebr can't do it */
.avatar-container {
    position: relative;
    margin-top: 30px;
    margin-bottom: 15px;
}
/* Have fun stealing just because you selebr can't do it */
.avatar {
    width: 80px;
    border-radius: 50%;
    display: block;
    margin: auto;
}
/* Have fun stealing just because you selebr can't do it */
.coin {
    position: absolute;
    width: 40px;
    bottom: -19px;
    left: 50%;
    transform: translateX(-50%);
}
/* Have fun stealing just because you selebr can't do it */
.name {
    font-weight: bold;
    font-size: 1.2em;
    margin: 10px 0 5px;
}
.level {
    font-size: 1.2em;
    margin: 10px 0 5px;
}
.points {
    font-size: 1.2em;
    margin: 10px 0 5px;
}
/* Have fun stealing just because you selebr can't do it */
.level, .points {
    margin: 0;
}
/* Have fun stealing just because you selebr can't do it */
.empire-icon {
    width: 18px;
    margin-top: 10px;
}
.bronze-highlight, .silver-highlight, .gold-highlight{
    transition: all 1s ease;
}
/* Have fun stealing just because you selebr can't do it */
.bronze-highlight:hover{
    filter: drop-shadow(0px 0px 20px rgba(174, 121, 107, 0.5));
}
/* Have fun stealing just because you selebr can't do it */
.silver-highlight:hover{
    filter: drop-shadow(0px 0px 20px rgba(197, 197, 197, 0.5));
}
/* Have fun stealing just because you selebr can't do it */
.gold-highlight:hover{
    filter: drop-shadow(0px 0px 20px rgba(214, 164, 82, 0.5));
}
.highlight-avatar-wrapper {
    height: 64px;
    width: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    text-align: center;
    line-height: 1.6;
}
/* Have fun stealing just because you selebr can't do it */
.shine {
    position: relative;
    overflow: hidden;
    margin: auto;
}
/* Have fun stealing just because you selebr can't do it */
.shine::before {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
    content: "";
    display: block;
    height: 100%;
    left: -105%;
    position: absolute;
    top: 0;
    transform: skewX(-25deg);
    width: 50%;
    z-index: 2;
}
/* Have fun stealing just because you selebr can't do it */
.ranking-highlight-col:hover .shine::before, .ranking-highlight-col:hover .shine:focus::before {
    animation: shine 0.85s;
}
@keyframes shine {
    100% {
        left: 125%;
    }
}


/* ===== LAST NEWS ===== */
.last-news-box {
    width: 652px;
    box-sizing: border-box;
    border: 8px solid #58210C;
    background: linear-gradient(#3b1408, #1a0804);
    box-shadow: inset 0 0 15px #000;
    font-family: Trebuchet MS, Arial, sans-serif;
}

.last-news-title {
    text-align: center;
    font-size: 18px;
    color: #ffa500;
    padding: 10px 0;
    border-bottom: 1px solid #6e2b12;
}

.last-news-table {
    width: 100%;
    border-collapse: collapse;
}

.last-news-table tr {
    background: rgba(0, 0, 0, 0.45);
}

.last-news-table tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.04);
}

.last-news-table td {
    padding: 6px 10px;
    font-size: 13px;
    color: #d8c08a;
    white-space: nowrap;
}

.last-news-table td:first-child { width: 80%; }

.last-news-table td.date {
    width: 20%;
    text-align: right;
    font-size: 12px;
    color: #a98b5a;
}

.last-news-table a {
    color: #f1c04f;
    text-decoration: none;
}

.last-news-table a:hover {
    color: #ffd56a;
    text-decoration: underline;
}

/* ===== PUS BOX ===== */
.pus-box {
    width: 652px;
    box-sizing: border-box;
    border: 8px solid #58210C;
    background: linear-gradient(#3b1408, #1a0804);
    box-shadow: inset 0 0 15px #000;
    font-family: Trebuchet MS, Arial, sans-serif;
    overflow: hidden;
}

.pus-title {
    text-align: center;
    font-size: 18px;
    color: #ffa500;
    padding: 10px 0;
    border-bottom: 1px solid #6e2b12;
}

.pus-viewport {
    width: 100%;
    height: 175px;
    overflow: hidden;
    position: relative;
}

.pus-track {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    gap: 10px;
    padding: 10px;
    width: max-content;
    animation: pusSlide 22s linear infinite;
}

@keyframes pusSlide {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.ItemIcerik {
    width: 120px;
    height: 150px;
    flex-shrink: 0;
    border: 1px solid #6e2b12;
    box-shadow: inset 0 0 10px #000;
    position: relative;
}

.ItemIcerik TitleX {
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 12px;
    color: #f1c04f;
}

/* ===== KING BOX ===== */
.king-box {
    width: 652px;
    box-sizing: border-box;
    border: 8px solid #58210C;
    background: linear-gradient(#3b1408, #1a0804);
    box-shadow: inset 0 0 15px #000;
    font-family: Trebuchet MS, Arial, sans-serif;
    overflow: hidden;
    margin: 0 auto 15px;
}

.king-title {
    text-align: center;
    font-size: 18px;
    color: #ffa500 !important;
    padding: 10px 0;
    border-bottom: 1px solid #6e2b12;
    background: linear-gradient(#3b1408, #1a0804);
}

.king-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.king-table th {
    background: linear-gradient(#3b1408, #1a0804);
    color: #ffa500;
    font-size: 13px;
    padding: 6px 4px;
    border-bottom: 1px solid #6e2b12;
}

.king-table td {
    padding: 6px 4px;
    color: #f2dc6c;
    vertical-align: middle;
}

.king-col-nation {
    width: 16px;
    text-align: center;
}

.king-col-nick {
    width: 210px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.king-col-notice {
    width: auto;
}

.king-col-nation img {
    display: block;
    margin: 0 auto;
}

/* NOTICE SLIDER */
.notice-viewport {
    width: 100%;
    height: 22px;
    overflow: hidden;
    position: relative;
}

.notice-track {
    position: absolute;
    white-space: nowrap;
    animation: noticeSlide 15s linear infinite;
}

@keyframes noticeSlide {
    from { transform: translateX(100%); }
    to   { transform: translateX(-100%); }
}

.page-title-box {
    width: 100%;
    margin: 15px 0 10px 0;
    text-align: center;
}

.page-title-text {
    display: inline-block;
    padding: 8px 28px;
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 20px;
    font-weight: bold;
    color: #5b3a1a;
    background: linear-gradient(#f3e6c8, #e6d2a2);
    border: 1px solid #b99b63;
    border-radius: 4px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.6),
        0 2px 6px rgba(0,0,0,0.25);
    letter-spacing: 0.5px;
}

/* tooltip */
.Aedcre_tooltip, .item_tooltip{
  position: absolute; 
  top:0;
  left:0;
  z-index: 9999;
  background: rgba(0,0,0, .75);
  padding: 15px;
  color: #fff;
  text-align: center;
  font-family: Arial;
  font-size:12px;
  width:230px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  box-shadow: 0px 0px 3px #000;
  /*border: 1px solid #d8e0ee;
  border-top: 1px solid #d8e0ee;*/
  -webkit-box-shadow: 0px 0px 3px #000;
  -moz-box-shadow: 0px 0px 3px #000;
  box-shadow: 0px 0px 3px #000;
}

.Aedcre_tooltip .white
{
  color: white;
}

.Aedcre_tooltip .blue
{
  color: blue;
}

.Aedcre_tooltip .red
{
  color: red;
}

.Aedcre_tooltip .yellow
{
  color: yellow;
}

.Aedcre_tooltip .lime
{
  color: lime;
}

.Aedcre_tooltip .gold
{
  color: gold;
}

.Aedcre_tooltip .purple
{
  color: purple;
}

.Aedcre_tooltip .cospre
{
  color: #00FFCE;
}

.Aedcre_tooltip .reverse
{
  color: #FF82A5;
}

.Aedcre_tooltip .unique_item
{
  color: #DFC68C;
}
.Aedcre_tooltip .event_item
{
  color: #18ffff;
}



.Aedcre_tooltip .item_title {
  font-weight: bold;
  font-size:16px;
}

.Aedcre_tooltip .item_type {
  font-size:12px;
}

.Aedcre_tooltip .item_kind {
  font-size:12px;
  text-decoration: underline;
  padding-bottom: 15px;
}

.Aedcre_tooltip span {
  display: block;
}

.Aedcre_tooltip .item_property{
  font-size:12px;
  text-align: left;

}

.Aedcre_tooltip .item_property p{
  display: block;
  line-height: 5px;
}

table.XXX.modern-tab {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 8px;
}

table.XXX .tablinks {
    width: 100%;
    padding: 11px 14px;
    background: linear-gradient(#4b2a14, #2e160a);
    border: 1px solid #d2a95c;
    color: #f3d9a3;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 6px;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.15),
        inset 0 -2px 4px rgba(0,0,0,0.6);
    transition: all 0.2s ease;
}

table.XXX .tablinks:hover {
    background: linear-gradient(#6a3a18, #3a1c0b);
    color: #ffe2a8;
    box-shadow:
        0 0 6px rgba(210,169,92,0.6),
        inset 0 1px 0 rgba(255,255,255,0.2);
}

table.XXX .tablinks.activex {
    background: linear-gradient(#e1b25c, #b07a28);
    color: #3a1c0b;
    border-color: #ffd98a;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.35),
        0 0 8px rgba(225,178,92,0.8);
}

table.XXX .tablinks.highlight {
    background: linear-gradient(#d8a64a, #a8741e);
    color: #2a1508;
    border-color: #ffdd99;
}

table.XXX tr td {
    padding: 2px;
}

.tabcontent {
    margin-top: 20px;
}

table.XXX.modern-tab {
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 14px;
}

table.XXX.modern-tab td {
    width: 48px;
    height: 48px;
    padding: 4px;
    text-align: center;
    vertical-align: middle;

    background: linear-gradient(#2b160a, #120804);
    border: 1px solid #6b4a2d;
    border-radius: 6px;

    box-shadow:
        inset 0 0 6px rgba(0,0,0,.8),
        0 0 6px rgba(0,0,0,.6);

    transition: all .2s ease;
}

table.XXX.modern-tab td a {
    display: inline-block;
    width: 100%;
    height: 100%;
}

table.XXX.modern-tab img {
    max-width: 38px;
    max-height: 38px;
    image-rendering: crisp-edges;
}

table.XXX.modern-tab td:hover {
    border-color: #e3b85c;
    box-shadow:
        0 0 8px rgba(227,184,92,.8),
        inset 0 0 8px rgba(0,0,0,.6);
    transform: scale(1.08);
    cursor: pointer;
}

table.XXX.modern-tab td.active-item {
    background: linear-gradient(#d6a44a, #8a5a1e);
    border-color: #ffdd88;
}

.exchange-result {
    width: 75%;
    margin: 15px auto;
    background: linear-gradient(
        180deg,
        #2a190f 0%,
        #140b06 100%
    );
    border: 1px solid #6f4a28;
    border-radius: 10px;
    box-shadow:
        inset 0 0 14px rgba(255, 210, 120, 0.10),
        0 0 12px rgba(0,0,0,0.75);
}
.exchange-result table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 10px;
}

.exchange-result td {
    width: 16.66%;
    text-align: center;
    background: rgba(0,0,0,0.35);
    border: 1px solid #4b2f1a;
    border-radius: 8px;
    box-shadow:
        inset 0 0 8px rgba(0,0,0,0.65);
}


.exchange-item {
    display: inline-block;
    width: 45px;
    height: 45px;
    cursor: default;
}

.exchange-item img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    transition: transform 0.15s ease, filter 0.15s ease;
}

.exchange-item:hover img {
    transform: scale(1.08);
    filter: brightness(1.25);
}

.exchange-item > img,
.exchange-item img {
    padding: 0 !important;
}

#ko-modal-overlay {
    position: fixed !important;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999 !important;
}

.ko-modal {
    width: 420px;
    background: linear-gradient(to bottom, #2a2318, #1b160f);
    border-radius: 12px;
    overflow: hidden;
    font-family: Arial, sans-serif;
    box-shadow:
        0 0 0 1px #3a2f1f,
        0 10px 30px rgba(0,0,0,0.8);
}

.ko-modal-header {
    padding: 14px 16px;
    font-weight: bold;
    text-align: center;
    color: #f2dc6c;
    position: relative;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 0 #000;
}

.ko-modal-close {
    position: absolute;
    right: 14px;
    top: 8px;
    font-size: 22px;
    cursor: pointer;
    color: #e6d8a8;
    opacity: .7;
}
.ko-modal-close:hover {
    opacity: 1;
}

.ko-modal-body {
    padding: 18px 22px !important;
    text-align: center !important;
    color: #e6e1d3;
    line-height: 1.6;
    font-size: 14px;
}

.ko-modal-footer {
    padding: 12px;
    text-align: center;
    border-top: 1px solid #3a2f1f;
}

.ko-modal-btn {
    background: linear-gradient(to bottom, #3a2f1f, #221b12);
    color: #f2dc6c;
    border: 1px solid #4a3a25;
    padding: 8px 22px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}
.ko-modal-btn:hover {
    background: linear-gradient(to bottom, #4a3a25, #2a2116);
}

.ko-modal.success .ko-modal-header {
    background: linear-gradient(to bottom, #2e4b33, #1f3324);
}
.ko-modal.error .ko-modal-header {
    background: linear-gradient(to bottom, #4a1f1f, #2b1212);
}
.ko-modal.warning .ko-modal-header {
    background: linear-gradient(to bottom, #4a3a18, #2a210e);
}
.ko-modal.info .ko-modal-header {
    background: linear-gradient(to bottom, #243447, #151f2b);
}

.ko-modal.success,
.ko-modal.error,
.ko-modal.warning,
.ko-modal.info {
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.ko-modal .ko-modal-body *,
.ko-modal.success *,
.ko-modal.error *,
.ko-modal.warning *,
.ko-modal.info * {
    margin: 0 !important;
    text-align: center !important;
    box-sizing: border-box !important;
}

.item-upgrade-page table.XXX {
    width: 100%;
    min-height: 345px;
    max-height: 345px;
    border-collapse: separate;
    border-spacing: 0;
    background: #f6ecd8;
    border: 1px solid #3a2614;
    box-shadow:
        inset 0 0 0 1px #b08a55,
        0 4px 10px rgba(0,0,0,0.35);
}

.item-upgrade-page table.XXX tr.textwhite {
    background: linear-gradient(
        to bottom,
        #3a2614 0%,
        #25120B 100%
    );
    color: #f5e6c8;
    text-align: center;
}

.item-upgrade-page table.XXX tr.textwhite td {
    padding: 0 !important;
    height: 160px;
    vertical-align: middle;
    border-bottom: 1px solid #7a5a33;
}

.item-upgrade-page table.XXX tr.textwhite img {
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle;
}

.item-upgrade-page table.XXX tr.activex {
    background: linear-gradient(
        to bottom,
        #caa86a 0%,
        #a8844d 100%
    );
    color: #2a160a;
    font-weight: bold;
}

.item-upgrade-page table.XXX tr.activex td {
    padding: 6px;
    text-align: center;
    border-bottom: 1px solid #7a5a33;
}

.item-upgrade-page table.XXX td {
    text-align: center;
    background-color: #f6ecd8;
    border-bottom: 1px solid #d2b48c;
    color: #2a160a;
}

.item-upgrade-page table.XXX span {
    text-shadow: 0 1px 1px rgba(0,0,0,0.6);
}

.ko-itemsearch-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #efe6c9;
    border: 2px solid #2a1409;
    box-shadow: inset 0 0 0 1px #6b4a2d;
}

.ko-itemsearch-table thead th {
    background: linear-gradient(#2b160b, #1a0c05);
    color: #f5e6c8;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #6b4a2d;
}

.ko-itemsearch-icon {
    width: 64px;
    text-align: center;
    background: #d9cfad;
    border-right: 1px solid #6b4a2d;
}

.ko-itemsearch-icon img {
    width: 45px;
    height: 45px;
    margin: 6px 0;
    image-rendering: pixelated;
}

.ko-itemsearch-name {
    padding: 10px 12px;
    background: #efe6c9;
    color: #3a1f0e;
    font-weight: bold;
    text-shadow: 0 1px 0 #fff4d6;
}

.ko-itemsearch-table tbody tr:nth-child(even) .ko-itemsearch-name {
    background: #e4d9b8;
}

.ko-itemsearch-table tbody tr:nth-child(even) .ko-itemsearch-icon {
    background: #d2c79f;
}

.ko-itemsearch-name a {
    color: #b47400;
    text-decoration: none;
}

.ko-itemsearch-name a:hover {
    color: #e0b200;
}

.ko-itemsearch-table tbody tr:last-child td {
    border-bottom: 1px solid #6b4a2d;
}

.ko-itemsearch-input {
    width: 110px;
    max-width: 110px;
    height: 30px;

    padding: 0 10px;
    margin-top: 9px;

    background: linear-gradient(#1f140c, #120a05);
    border: 1px solid #6b4a2d;
    border-radius: 6px;

    color: #f3e6c8;
    font-weight: bold;
    font-size: 12px;

    outline: none;
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.6),
        0 0 4px rgba(0,0,0,0.4);
}

.ko-itemsearch-input[value=""] {
    color: #a8926a;
}

.ko-itemsearch-input:focus {
    border-color: #c89b3c;
    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.6),
        0 0 6px rgba(200,155,60,0.6);
}

/* Sadece #user-stats-table için geçerli olacak */
#user-stats-table {
    width: 255px;
    min-width: 255px;
    max-width: 255px;
    border-collapse: collapse;
    font-family: 'Verdana', sans-serif;
    background-color: #f5f0e1;
    color: #2c2c2c;
    box-shadow: 0 0 12px rgba(0,0,0,0.4);
    overflow: hidden;
}

/* Satırlar */
#user-stats-table tr {
    border-bottom: 1px solid #d8cbb7;
}

/* İlk hücre (başlık) */
#user-stats-table td:first-child {
    font-weight: bold;
    background-color: #bfb089;
    padding: 6px 10px;
    width: 40%;
    text-align: left;
    vertical-align: middle;
}

/* Veri hücreleri */
#user-stats-table td:last-child {
    padding: 6px 10px;
    text-align: left;
    vertical-align: middle;
}

/* İkon ve yazıyı ortala */
#user-stats-table td img {
    vertical-align: middle;
    margin-right: 5px;
}

/* Hover efekti */
#user-stats-table tr:hover {
    background-color: #f0e6d2;
}

/* Son satırın border'ını kaldır */
#user-stats-table tr:last-child {
    border-bottom: none;
}

/* RESET */
* {
    box-sizing: border-box;
}

/* PANEL */
.ko-panel {
    width: 100%;
    background: linear-gradient(#2a150a, #160b06);
    border: 2px solid #5a3a1c;
    border-radius: 6px;
    padding: 10px;
    font-family: Tahoma, Verdana, Arial, sans-serif;
    color: #f3e6c6;
}

/* TABLO */
.ko-panel table {
    width: 100%;
    border-collapse: collapse;
}

.ko-panel td {
    padding: 6px;
    vertical-align: middle;
}

/* LABEL */
.ko-label {
    font-size: 12px;
    color: #f5e6c2;
    white-space: nowrap;
}

/* INPUT */
.ko-input {
    width: 100%;
    height: 28px;
    padding: 4px 6px;
    background: linear-gradient(#f7efd7, #e3d2a6);
    border: 1px solid #7a5a2e;
    border-radius: 3px;
    font-size: 12px;
    color: #3b2412;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
}

.ko-input:focus {
    outline: none;
    border-color: #c9a24d;
}

/* SECURITY CODE (732) */
.ko-code {
    width: 100%;
    height: 36px;
    text-align: center;
    font-size: 26px;
    font-weight: bold;
    color: #b98b2d;
    background: linear-gradient(#fff6dc, #ecd8a5);
    border: 1px solid #7a5a2e;
    border-radius: 3px;
}

/* AÇIKLAMA METNİ */
.ko-warning {
    font-size: 11px;
    color: #ff9900;
    line-height: 1.3;
}

/* BUTTON */
.ko-button {
    float: right;
    padding: 5px 16px;
    background: linear-gradient(#6b3a18, #3b1e0b);
    border: 1px solid #c9a24d;
    border-radius: 3px;
    color: #f7e7b5;
    font-size: 12px;
    cursor: pointer;
}

.ko-button:hover {
    background: linear-gradient(#8a4a1f, #4a260e);
}

.ko-input:required {
    border-color: #c9a24d;
}

.ko-input:required:invalid {
    border-color: #b33a2b;
    box-shadow: 0 0 6px rgba(179,58,43,0.6);
}

.ko-input:required:valid {
    border-color: #4caf50;
}

/* PANEL */
.ko-panel{
    background:#1a0e07;
    border:1px solid #4e2a10;
    color:#f3d9a3;
    font-family:Tahoma,Arial,sans-serif;
    animation:koFade .25s ease-out
}
.ko-panel-header{
    background:linear-gradient(#4b260c,#2a1406);
    padding:10px;
    color:#ffcc66;
    font-weight:bold;
    border-bottom:1px solid #6a3a14
}
.ko-panel-header:before{
    content:"⚔";
    margin-right:6px;
    color:#ffcc66
}
.ko-panel-header:after{
    content:"⚔";
    margin-left:6px;
    color:#ffcc66
}
.ko-panel-body{padding:15px}

/* PANEL ANIM */
@keyframes koFade{
    from{opacity:0;transform:translateY(6px)}
    to{opacity:1;transform:translateY(0)}
}

/* TABLE */
.ko-table{
    width:100%;
    border-collapse:collapse;
    background:#1a0e07
}
.ko-table td,.ko-table th{
    padding:8px;
    border-bottom:1px solid #2d1609;
    background:linear-gradient(transparent,rgba(255,204,102,.02))
}
.ko-label{
    width:160px;
    color:#ffcc66
}

/* STATUS */
.ko-status-ok{
    color:#00ff6a;
    font-weight:bold
}
.ko-status-bad{
    color:#ff3b3b;
    font-weight:bold;
    animation:koPulse 1.5s infinite
}
@keyframes koPulse{
    0%{opacity:1}
    50%{opacity:.6}
    100%{opacity:1}
}

/* INPUT */
.ko-input{
    width:100%;
    padding:7px;
    background:#2a1406;
    border:1px solid #6d3b14;
    color:#f3d9a3;
    transition:border-color .15s,box-shadow .15s
}
.ko-input:focus{
    border-color:#ffcc66;
    box-shadow:0 0 6px rgba(255,204,102,.45);
    outline:none
}

/* MESSAGE */
.ko-msg-warn{
    color:orange;
    font-size:12px
}
.ko-msg-ok{
    color:#00ff6a;
    font-size:12px
}
.ko-msg-bad{
    color:#ff9090;
    font-size:12px
}

/* BUTTON */
.ko-btn{
    background:linear-gradient(#ffd98e,#b8860b);
    border:1px solid #5a3b0a;
    padding:9px 26px;
    font-size:14px;
    font-weight:bold;
    cursor:pointer;
    transition:background .15s,box-shadow .15s,transform .05s
}
.ko-btn:hover{
    background:linear-gradient(#ffe7b3,#d4a017);
    box-shadow:0 0 8px rgba(255,204,102,.6)
}
.ko-btn:active{
    transform:scale(.97)
}

.ko-section{
    padding:8px;
    font-weight:bold;
    color:#ffcc66;
    border-bottom:1px solid #6a3a14;
    margin:10px 0
}

.ko-icon-grid{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin-top:15px
}
.ko-icon-grid a{
    width:90px;
    text-align:center;
    color:#f3d9a3;
    font-size:12px
}
.ko-icon-grid img{
    width:55px;
    height:55px;
    display:block;
    margin:0 auto 5px
}
.ko-icon-grid a:hover{
    filter:brightness(1.15)
}

.ko-padding {
	padding-bottom:50px;
}

/* SELECT */
.ko-select {
    width: 100%;
    height: 36px;
    padding: 6px 10px;
    background: linear-gradient(#2a1406, #3b1e0b);
    border: 1px solid #6d3b14;
    border-radius: 4px;
    color: #f3d9a3;
    font-size: 14px;
    font-family: Tahoma, Arial, sans-serif;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: none; /* Default tarayıcı okunu kaldırır */
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'><polygon points='0,0 12,0 6,6' fill='%23f3d9a3'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    cursor: pointer;
}

.ko-select:focus {
    border-color: #ffcc66;
    box-shadow: 0 0 6px rgba(255, 204, 102, 0.45);
    outline: none;
}

.ko-textarea {
    width: 100%;
    height: 300px; /* sabit yükseklik */
    padding: 8px 10px;
    background: linear-gradient(#2a1406, #3b1e0b);
    border: 1px solid #6d3b14;
    border-radius: 4px;
    color: #f3d9a3;
    font-size: 14px;
    font-family: Tahoma, Arial, sans-serif;
    resize: none; /* kullanıcı boyut değiştiremesin */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.4);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ko-textarea:focus {
    border-color: #ffcc66;
    box-shadow: 0 0 6px rgba(255, 204, 102, 0.45);
    outline: none;
}

span.onlineX{color:#00ff18}
span.offlineX{color:#ff0000}