@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
 *{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     outline:none;
     border: none;
     font-family: 'DM Sans', sans-serif;
     text-decoration: none;
     list-style:none;
     position: relative;
   font-weight: normal
}
 .breadcrumber {
     display: none;
}

.space {
 height: 15px;
}
 body {
    width: 100%;
    background: #000 url(https://i.imgur.com/aDNiyH0.jpeg) no-repeat center top;
}
 .wrap {
    width: 980px;
    margin: 0 auto;
    background: url(https://i.imgur.com/QUq55Sl.jpeg) center top no-repeat, url(https://i.imgur.com/DL0sPv1.jpeg) repeat-y left bottom;
}
 .header > .logotipo {
     width: 365px;
     margin: 4rem auto 0;
}
 .menu-top {
    display: flex;
    width: 100%;
    height: 65px;
    background: transparent;
    margin-top: -3.2rem;
}
 .menu-top ul {
    display: flex;
    align-items: center;
    height: 60px;
    left: 80px;
}
 .menu-top ul li a {
    display: block;
    width: 90px;
    text-align: center;
    font-size: 13px;
    color: #fff;
    text-transform: uppercase;
    height: 60px;
    line-height: 60px;
    transition: all .2s cubic-bezier(0.42, 0, 0.59, 0.98);
}
 .menu-top ul li a:hover{
     color: #9423ff 
}
 .menu-top ul li a > span {
     font-size: 12px;
}
 .main {
    display: flex;
    padding: 20px;
    justify-content: space-between;
    align-items: flex-start;
}
 .sidebar.left {
    padding: 8px 8px 0 8px;
    border-radius: 5px;
    background: url(https://i.imgur.com/PDlWAS4.png) no-repeat top, url(https://i.imgur.com/uRTzSfi.png) bottom no-repeat;
    width: 285px;
}
 .sidebar.left .title {
    border: none;
    background: linear-gradient(to bottom, #2f2f2f, #151515);
    font-size: 13px;
    text-transform: uppercase;
    color: #fff;
    padding: 8px;
    border-bottom: 1px solid #403f3f;
}
 .sidebar.left .title > span {
     font-size: 12px;
}
 .sidebar.left .title.title-panel {
    border: none;
    background: linear-gradient(to bottom, #2f2f2f, #151515);
    border-bottom: 1px solid #848484;
    width: 100%;
    height: 32px;
}
 .sidebar.left .box {
    padding: 10px;
    background: url(https://i.imgur.com/6rvSSLK.png) no-repeat left bottom;
    border: 1px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
 .sidebar.left .box-bottom{
     margin: 15px 0;
}
 .sidebar.left .box ul,
.events-spotlight{
     padding: 8px 
}

 .sidebar.left .events-spotlight .event{
 padding:2px 0;
}
 .sidebar.left .box ul li,
.events-spotlight .event span.name{
     padding: 7px 0 7px 15px;
     color: #908d90;
     font-family: 'Tahoma';
     font-size: 13px;
}
 .sidebar.left .box ul li::before,
 .sidebar.left .events-spotlight .event:before{
     content: "";
     position: absolute;
     width: 7px;
     height: 7px;
     top: 10px;
     left: 0;
     background: #39088f;
     border-radius: 50%;
}

 .sidebar.left .box ul li span,
 .sidebar.left .events-spotlight .event span.time{
     float: right;
   font-size: 12px;
  color: #b3b3b3;
}

.sidebar.left a.btn {
    color: #811ca8;
    font-size: 13px;
    padding: 5px;
    border-radius: 5px;
    background: #1d1c1a;
}

.sidebar.left a.btn:hover {
 color: #bd12ff;
}

.sidebar.left .box ul li span.offline{
 color: #ea4b23;
}

.sidebar.left .box ul li span.online{
 color: #68ea23;
}

 .sidebar.left .inputs-form {
     display: flex;
     justify-content: space-between;
     align-items:center;
}
 .sidebar.left .inputs-form .inputs li {
     width: 159px;
     height: 31px;
     margin: 3px;
}
 .sidebar.left .inputs-form .inputs li:first-child{
     background: #15003aad; 
}
 .sidebar.left .inputs-form .inputs li:last-child{
     background: #15003aad; 
}
 .sidebar.left .inputs-form .inputs input {
    width: 150px;
    height: 30px;
    margin-left: 5px;
    color: #fff;
    font-size: 12px;
    background: transparent;
}
 .sidebar.left .inputs-form .inputs input::-webkit-input-placeholder {
     color: #d8d8d8;
}
 .sidebar.left .inputs-form input[type="submit"]{
    width: 80px;
    height: 65px;
    background: #15003aad;
    transition: all .2s cubic-bezier(0.42, 0, 0.56, 1);
    color: #fff;
    cursor: pointer;
}
 .sidebar.left .inputs-form input[type="submit"]:hover {
     filter: grayscale(60%) 
}
 .sidebar.left form .loading-login {
     position: absolute;
     top: 20px;
     right: 25px;
}
 .sidebar.left .remember-login {
     color: #fff;
     font-size: 11px;
     margin-top: 10px;
     left: 2px;
}
 .sidebar.left .remember-login input {
     top: 2px 
}
 .sidebar.left .forgot-password {
     position: absolute;
     right: 10px;
     bottom: 8px;
}
 .sidebar.left .forgot-password a {
     font-size: 12px;
     color: #cb9ecc;
}
 .sidebar.left .forgot-password a:hover{
  color: #95c7ef;
 }

.sidebar.left .redes-sociais {
  padding: 1rem;
}

.sidebar.left .redes-sociais a{
  box-shadow: 0 0 7px 4px #202020;
  display: block;
  width: 190px;
  height: 33px;
  margin: auto;
  border-radius: 5px;
}

.sidebar.left .redes-sociais a:hover {
  transform: scale(1.03)
}

.sidebar.left .redes-sociais a:not(:last-child){
  margin-bottom: 15px;
}

.sidebar.left .status-server {
 width: 190px;
 height: 33px;
 background: url("../images/status-server.png");;
 margin: 2rem auto 1rem;
}

.sidebar.left .status-server p {
 left: 50px;
 padding: 8px 0;
 font-size: 13px;
 color:#fff;
 width: 131px;
}
.sidebar.left .status-server p span{
 font-size: 12px;
}
.sidebar.left .status-server p span.offline {
  color: #ea4b23;
}
.sidebar.left .status-server p span.online {
  color: #68ea23;
}
.sidebar.left .status-server p span.onlines {
 float: right;
 color: #68ea23;
}
/* Content */
 .content {
     width: 652px;
}
 .content .content-web {
     padding: 5px;
     border-radius: 5px;
     background: #121111;
}
 .content .title {
    border: none;
    background: linear-gradient(to bottom, #2f2f2f, #151515);
    border-bottom: 1px solid #848484;
    width: 100%;
    height: 35px;
    font-size: 15px;
    color: #fff;
    text-transform: uppercase;
    padding: 5px 10px;
}
 .content .title > span {
     font-size: 12px;
}
 .content .content-web form label{
     color: #fff;
     font-size: 11px;
     padding: 10px 0;
     display: block;
}
 .content .content-web form label span.required, .error-message label {
     color: #f74316 !important;
     font-size: 11px !important;
}
 .content .content-web form{
     padding: 10px;
}
 .content .content-web form input:not(input[type="checkbox"]):not(input[type="submit"]),
.content .content-web form textarea{
     width: 100% !important;
     padding: 10px;
     border-radius: 5px;
     background: #323232;
     border: 2px solid #464546;
     box-shadow: inset 0 0 20px #1c1c1c;
     color: #fff;
}
 .content .content-web form .captcha .img {
     margin: 1rem 0 
}
 .content .content-web form .field.checkbox {
     margin: .2rem 0 
}
 .content .content-web form .field.checkbox a {
     color: #9eb8cc;
     font-size: 12px;
}
 .content .content-web form input[type="submit"]{
     width: 145px;
     padding: 10px;
     border-radius: 5px;
     background: linear-gradient(0deg, #020012, #201a418f);
     border: 1px solid #403f3e;
     margin: 1rem auto 0;
     display: block;
     color: #fff;
     cursor: pointer;
}
 .content .content-web form input[type="submit"]:hover {
     background: linear-gradient(0deg, #020012, #4634a98f);
}
 .content .content-web table {
     width: 100%;
     font-size: 13px;
}
 .content .content-web .box-panel {
     margin: .5rem auto;
     padding: 10px;
     color: #fff;
     font-size: 13px;
}
 .content .content-web .box-panel > .box-panel-title {
     padding: 5px;
     background: #2b2b2b;
     margin: 0 0 .3rem;
}
 .content .content-web table{
     border-collapse: collapse;
}
 .content .content-web table thead tr th {
    background: #414242;
    padding: 10px;
    border-bottom: 2px solid #252424;
}
 .content .content-web table tbody tr{
    border-bottom: 3px solid #252424;
}
 .content .content-web table tbody tr td {
    background: #0a0a0a;
    padding: 10px;
    font-size: 12px;
}

.content .content-web table tbody tr td span.offline {
 color: #ea4b23;
}

.content .content-web table tbody tr td span.online {
 color: #68ea23;
}

 .content .content-web table tbody tr td a {
    color: #fff;
    padding: 5px;
     background: #2f3333;
    border-radius: 5px
}
 .content .content-web table tbody tr td a:hover {
    background: #110c1c
}


/*Panel User*/

.panel-services {
 display: flex;
 justify-content:center;
 flex-wrap: wrap;
 gap: 10px;
 margin-top: 2rem;
}


.panel-services a {
    width: 160px;
    padding: 5px;
    border-radius: 5px;
    background: linear-gradient(0deg, #020012, #574b9a8f);
    border: 1px solid #403f3e;
    display: block;
    color: #fff;
 font-size: 13px;
 text-align:center;
}

.panel-services a:hover,
.panel-services li.active a{
 background: linear-gradient(0deg, #020012, #201a418f);
 border: 1px solid #403f3e;
}

.partial-login .box ul li {
 padding: 5px !important;
}

.partial-login .box ul li::before{
 display: none;
}

.partial-login .box ul li a{
  background: #1e1e1e;
  display: block;
  padding: 5px;
  color: #fff;
  border-radius: 5px;
  font-size: 12px;
}

.partial-login .box ul li a:hover{
 background: #383838;
}

.partial-login .box ul li:last-child a{
  background: #8d0000;
  display: block;
  padding: 5px;
  color: #fff;
  border-radius: 5px;
  font-size: 12px;
}

.partial-login .box ul li:last-child a:hover{
 background: #c10000;
}

.warning-panel {
 text-align:center;
 font-size: 12px;
 color: #f5f5f5;
 margin: 2rem auto 0;
}

.warning-panel p span {
 color: #c10000
}

/* Ranking Home */

.ranking-home {
 display: flex;
 justify-content:center;
 gap: 15px;
 padding: 1rem 0;
}
.ranking-home > div {
 padding: 5px;
 border-radius: 5px;
 background: #222121;
 text-align:center;
 border: 1.5px solid #403f3f;
 width: 140px;
 box-shadow: inset 0 0 15px #080808;
}

.ranking-home > div .title-ranking {
 text-align: left;
 padding: 5px 10px;
 color: #868686;
 font-size: 12px;
 text-transform: uppercase;
}

.ranking-home > div .image > img {
 background: #2f2e2e;
}

.ranking-home > div > .name {
 text-align: right;
 padding: 5px 10px;
 color: #aedeff;
 font-size: 10px;
}

.ranking-home > div .title-ranking span {
 color: #aedeff;
 text-transform: initial;
}

.king_war {
 width: 100%;
 height: 229px;
 background: url('../images/bg-king-war.png');
 display: flex;
 align-items:center;
 font-size: 11px;
 text-align:center;
 color: #fff;
}

.king_war > div {
 width: 108px;
 left: 108px;
 top: 16px;
}

.king_war > div > .image img {
 background: #191818;
}

.king_war > div:last-child {
  width: 100px;
  left: 110px;
  top: 21px;
}
.king_war > div p.name_sub {
 color: #b2b2b2;
}
.king_war > div span {
 color: #bad8ed;
 text-transform: uppercase;
}

/*Posts*/

.posts {
 padding: 10px
}

.posts li {
 padding: 10px;
 margin: 0 0 5px;
 font-size: 13px;
 text-transform: uppercase;
 background: #0c0c0c;
 border-radius: 5px;
}

.posts li:hover{
 background: #09020e;
}

.posts li a {
 color: #fff !important;
}

.posts li span {
 color: #723ab1 !important;
}

.posts .author-created{
 color: #f1f1f1;
 font-size: 10px;
 margin-bottom: 1rem
}

.posts li .body {
 font-size: 11px;
 text-transform: initial;
 color: #bad8ed;
}

.single-post {
 padding: 10px;
 color: #fff;
 font-size: 12px;
}

.single-post img {
 width: 100%;
 height: 100%;
}

div.msg {
 padding: 10px;
 font-size: 13px;
 text-align:center;
 color: #5e5e5e;
}

/*Vip*/

.content-vip {
 padding: 1rem;
 font-size: 13px;
 color: #fff;
}

.content-vip .links-vip,
.links-ranking{
 padding: 1rem;
 display: flex;
 gap: 20px;
}

.content-vip .links-vip a,
.links-ranking a{
 color: #fff;
 background: #221a32;
 border-radius: 5px;
 padding: 3px 10px;
 transition: all .2s ease-in-out
}

.content-vip .links-vip a:hover,
.links-ranking a:hover,
.links-ranking a.active{
 background: #110c1c;
}

.content-vip h3 {
 padding: 5px;
 background: #333;
 border-radius: 5px 5px 0 0;
}

.content-vip p {
 padding: 10px 5px;
 background: #0d0d0d;
 margin: 0 0 1rem;
 font-size: 12px;
}

.content-vip p a {
 color: #9eb8cc;
}

.content-vip p a:hover {
 color: #6eb6ee;
}

/*rankings*/

.rankings {
 margin-top: 2rem;
 display: flex;
 justify-content:center;
 gap: 30px;
 flex-wrap: wrap;
}
.rankings > div .rank-stayed {
 display: none;
}
.rankings > div {
 width: 130px;
 padding: 5px;
 border-radius: 5px;
 background: #222121;
 text-align:center;
 border: 1.5px solid #403f3f;
 width: 140px;
 box-shadow: inset 0 0 15px #080808;
 color: #fff;
 font-size: 13px;
}

.rankings > div div.rank,
.rankings > div div.name {
 color: #aedeff;
}
.rankings > div div.class,
.rankings > div div.guild-name{
 color: #878a8d;
}
.rankings > div div.level {
 padding: 3px;
 background:#0e0e0e;
 color: #fff;
 width: 100px;
 margin: .5rem auto;
 border-radius: 5px;
}

.rankings > div span.offline {
 color: #f30;
}
.rankings > div span.offline{
 color: #ea4b23;
}

.rankings > div span.online{
 color: #68ea23;
}


.rankings > div div.image{
 width: 64px;
 margin: .5rem auto;
 height: 64px;
}

.rankings > div div.image > img{
 background: #2d2d2d;
 width: 64px;
 margin: auto;
 height: 64px;
}

/*all-events*/

.all-events {
 padding: 1rem;
}

.all-events .event {
 padding: 10px;
 background: #464646;
 margin: 3px 0;
 color: #fff;
 font-size: 13px;
}

.all-events .event .time  {
 letter-spacing: 2px;
 color: #c2c1c1;
 float: right;
}

/* Character */

.characters {
 display: flex;
 justify-content:center;
 gap: 20px;
 flex-wrap:wrap
}

.characters a {
 padding: 5px;
 font-size: 13px;
 text-align:center;
 background: #2f2e2e;
 border-radius: 5px;
 border: 1.5px solid #403f3f;
 color: #fff;
}


.characters a:hover,
.characters a.active{
 background: #3c3c3c;
}

.manage-personagem {
 margin-top: 2rem
}

.manage-personagem .rates{
 margin-bottom: 1rem;
}
.manage-personagem .rates ul {
 color: #fff;
 font-size: 13px;
}

.manage-personagem .rates ul li {
 padding: 8px;
 margin: 2px 0;
 background: #434242;
}


/*credit-shop*/

.saldo {
 padding: 1rem;
 font-size: 13px;
 color: #fff;
}

.credit-shop {
 display: flex;
 justify-content:center;
 gap: 30px;
 flex-wrap: wrap;
 color: #fff;
 font-size: 13px;
 text-align:center;
}

.credit-shop li {
 width: 180px;
 border-radius: 5px;
 padding: .5rem;
 border: 1.5px solid #333;
 background: #1e1e1e;
}

.credit-shop li img {
 width: 160px;
 height: 200px;
 top: 1px;
  object-fit: contain;
}

.credit-shop li .title-package,
.credit-shop li .price{
 padding: 5px;
 margin: 0 0 .2rem;
 background: #333;
 border-radius: 5px;
}

.credit-shop li a {
 padding: 3px 10px;
 color: #fff;
 display: block;
 background: linear-gradient(0deg, #020012, #574b9a8f);
 border-radius: 5px;
 transition: all .2s cubic-bezier(0.42, 0, 0.58, 0.96)
}

.credit-shop li a:hover {
 background: linear-gradient(0deg, #020012, #2621458f);
}
/* Footer */

.sup-footer {
 margin: 3rem auto 1rem;
}

.sup-footer ul {
 display: flex;
 justify-content:center;
}

.sup-footer ul li{
 width: 90px;
 text-align:center;
}

.sup-footer ul li:not(:last-child)::before {
     content: "";
     position: absolute;
     width: 1px;
     height: 100%;
     top: 0;
     right: 0;
     background: #080808;
     border-radius: 50%;
}

.sup-footer ul li a {
 font-size: 13px;
 color: #abadaf;
}

.sup-footer ul li a:hover {
 color: #c4c7ca
}

.footer {
    font-family: 'Segoe UI', 'Lucida Sans Unicode', 'Lucida Grande', 'Tahoma', 'Arial', 'sans-serif';
    width: 100%;
    font-size: 14px;
    color: #666;
    padding: 60px 0px;
    overflow: auto;
    text-align: center;
}

.footer p {
 color: #8c8989;
 font-size: 13px;
 font-family: 'Tahoma';
}

.footer p a {
 color: #824295;
}
.gateway{
 margin: 1rem 0;
}
.gateway a {
 display: block;
 width: 200px;
 overflow: hidden;
 padding: 10px;
 background: #000;
 border-radius: 5px;
}

.gateway a img {
 width: 100%;
 
}

.gateway a:hover {
background: #333}