@import "owl.carousel.min.css";
@import "owl.theme.default.min.css";
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@200;300&family=Work+Sans:wght@300&display=swap");
@import url("./plugins.css");

/*

font-family: 'Oswald', sans-serif;
font-family: 'Work Sans', sans-serif;

*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  border: none;
  text-decoration: none;
  font-family: "Oswald", sans-serif;
  list-style: none;
  position: relative;
}

p,
li,
a,
ul {
  font-size: 13px;
}

body {
  background: #141414 url(../images/background.jpg) top center no-repeat;
}

.menu-nav {
  display: flex;
  justify-content: center;
  width: 1200px;
  margin: auto;
}

.bottom-10 {
  margin-bottom: 10px;
}

.bottom-20 {
  margin-bottom: 20px;
}

.w-60 {
  width: 77% !important;
}

.w-40 {
  width: 57% !important;
}

.info-server {
  width: 669px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #8e542a;
  border-radius: 5px 5px 0 0;
  border-bottom: 3px solid #000000;
}

.info-server ul {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 16px;
}

.info-server ul li {
  font-size: 12px;
  color: #fefefe;
  padding: 5px;
  border-radius: 5px;
}

.info-server ul li span {
  font-size: 12px;
  color: #f8e3a8;
}

.header-main {
  width: 100%;
  height: 550px;
  background: #000000 url(../images/background.jpg) top center no-repeat;
}

.header {
  width: 100%;
  height: 75px;
  margin: auto;
  background: rgba(0, 0, 0, 0.2);
  top: 24px;
  position: fixed;
  z-index: 99;
}

.info-server-header {
  width: 550px;
  margin: auto;
  top: 200px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.3), transparent);
  padding: 20px;
  font-size: 72px;
  color: #a9a9a9;
  left: 204px;
  text-align: center;
  font-weight: bold;
}

.info-server-header h4 {
  font-weight: 400;
}

.info-server-header p {
  font-size: 24px;
  letter-spacing: 2px;
}

.logotipo img {
  top: 8px;
}

.logotipo:before {
  content: "";
  transform: skewX(-33deg);
  -webkit-transform: skewX(-33deg);
  background: #f28f36;
  position: absolute;
  right: -47px;
  top: -33px;
  bottom: -11px;
  left: -1000%;
  /* z-index: -2; */
  transition: 400ms all;
  -webkit-transition: 400ms all;
}

.logotipo:after {
  content: "";
  transform: skewX(-33deg);
  -webkit-transform: skewX(-33deg);
  background: darkgray;
  position: absolute;
  right: -40px;
  bottom: 0;
  left: -1000%;
  z-index: -1;
  top: 0;
}

.web-content {
  width: 1140px;
  margin: auto auto 50px auto;
}

.content {
  width: 1140px;
  margin: auto;
  column-gap: 10px;
  border-radius: 5px 0 5px 5px;
}

.main {
  display: flex;
  justify-content: space-between;
  z-index: 3;
}

.load-content {
  width: 810px;
  margin-top: 36px;
}

.menu-left {
  width: 282px;
  overflow: hidden;
}

/*
##########
# TITLES #
##########
 */

.menu-login ul {
  padding: 5px;
  margin: 0 !important;
  top: 0;
}

.menu-login p {
  padding: 0 10px !important;
}

.menu-login ul li,
.menu-login ul li a,
.menu-login p {
  border: none;
  padding: 3px 5px;
  margin: 1px auto;
  color: #ededed;
  border-radius: 3px;
}

.pass-button {
  display: flex;
  align-items: center;
}

.pass-button input[type="submit"] {
  background: url("../images/entrar.png");
  right: 43px;
  width: 143px !important;
  top: 0px;
  height: 42px !important;
}

.pass-button input[type="submit"]:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: #f30;
  z-index: 3;
}

.staff ul li {
  background: #3a1203;
  margin: 3px 0;
  border-radius: 2px;
  padding: 4px !important;
}

.staff ul li span {
  float: right;
}

.menu-left .links .box ul li {
  background: none;
}

.menu-left .box-panel {
  width: 250px;
}

.menu-left .box-panel .title {
  background: none !important;
}

.menu-left .box-panel .title:after,
.menu-left .title:after {
  content: "";
  position: absolute;
  height: 1px;
  background: darkgray;
  top: 50%;
  right: -1000%;
  width: 1000%;
}

.menu-left .box-panel a {
  color: #fff;
}

.menu-left .box-panel .title:before,
.menu-left .title:before {
  content: "";
  position: absolute;
  height: 1px;
  background: darkgray;
  top: 50%;
  right: 100%;
  width: 100%;
}

.menu-left .links .box ul li a {
  display: block;
  padding: 7px 0 7px 26px;
  background: linear-gradient(180deg, #fefefe, #bcc0c3);
  border: none;
  color: #0a0a0a;
  transition: all 0.2s ease-in-out;
  border-radius: 3px;
}

.menu-left .links .box ul li a:hover {
  background: linear-gradient(0deg, #fefefe, #bcc0c3);
}

.menu-left .links .box ul li a:before {
  content: "";
  width: 10px;
  height: 10px;
  background: #6e6e6e;
  position: absolute;
  left: 10px;
  border-radius: 2px;
  top: 9px;
}

.menu-left .box {
  width: 282px;
  margin: auto auto 10px auto;
  padding: 5px;
}

.menu-left .title {
  margin: auto;
  color: #ffffff;
  height: 67px;
  line-height: 67px;
  text-transform: uppercase;
  font-size: 20px;
  padding: 0 19px 0 5px;
  display: inline-block;
  margin-left: 20px;
}

.menu-left .box form li {
  margin: 10px auto;
  padding: 8px;
  border: 1px solid #646464;
}

.menu-left .box form input:not(input[type="submit"]) {
  background: none;
  font-size: 14px;
  color: #a6a6a6;
  font-family: "Work Sans";
}

.menu-left .box form input::-webkit-input-placeholder {
  color: #a1a1a1;
}

.menu-left .box form input[type="submit"] {
  display: block;
  color: #fbfbfb;
  font-weight: 400;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  width: 120px;
  height: 31px;
  transition: all 0.2s ease-in-out;
}

.menu-left .box form a {
  color: #fff;
  font-size: 9px;
  width: 120px;
  display: block;
  margin: 0.4rem 0;
}

.menu-left .box form input[type="submit"]:hover {
  background: url("../images/entrar-hover.png");
}

.menu-left .box form a:hover {
  color: #5e5e5e !important;
}

.menu-left .box form a:hover {
  color: #8b7765;
}

.menu-left .box > .center p span,
.menu-left .box > .center ul li span {
  float: right;
  color: #ababab;
}

.menu-left .box > .center a {
  color: #ffffff;
  display: block;
  width: 100%;
  padding: 3px;
  margin: 7px auto;
  background: #9e5723;
  border-radius: 5px;
  text-align: center;
}

.menu-left .box > .center a:hover {
  background: #b46e3b;
}

.menu-left li {
  padding: 4px;
  margin: 3px 0;
  color: #ac8e69;
  border-bottom: 1px solid #2a1a0d;
}

.menu-left li span {
  color: #ffffff;
  width: 115px;
  float: right;
}

.server p {
  text-align: center;
  padding: 5px 0;
  font-size: 12px;
}

.server ul li {
  background: #181919 !important;
  border: none;
}

.menu-left .informations-server ul li:first-child {
  border-radius: 3px 3px 0 0;
}

.menu-left .informations-server ul li {
  padding: 8px 12px 8px 40px;
  display: block;
  overflow: hidden;
  position: relative;
  z-index: 2;
  font-family: "Work Sans";
  font-size: 11px;
  text-transform: uppercase;
  font-weight: bold;
  color: #fff;
  line-height: 24px;
  background: #363533;
}

.menu-left .informations-server ul li:before {
  content: "";
  width: 50px;
  background: #f28f36;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -21px;
  transform: skew(-33deg);
  -webkit-transform: skew(-33deg);
  transition: 400ms all;
  -webkit-transition: 400ms all;
  z-index: -1;
}

.menu-left .informations-server ul li:hover:before {
  width: 160%;
  right: -21%;
  left: -21%;
}

.menu-navigation {
  display: flex;
  height: 70px;
  align-items: center;
  width: 100%;
  gap: 1.5rem;
  z-index: 1;
  justify-content: center;
  left: -16px;
}

.menu-navigation a {
  display: block;
  height: 45px;
  line-height: 35px;
  font-size: 15px;
  text-transform: uppercase;
  color: #fff9e7;
  text-align: center;
  font-family: "Oswald", sans-serif;
  padding: 0 10px;
}

.menu-navigation a p {
  font-size: 10px;
  color: #ffd950;
  top: -19px;
}

.menu-navigation a:hover {
  display: block;
  color: #ffd950;
}

.web-error,
.web-accept {
  background: #a42001 !important;
  color: #ffffff !important;
  font-size: 12px;
  border-radius: 1px;
  text-align: center;
  padding: 3px;
}

.web-accept {
  padding: 2px;
  background: #094d00 !important;
}

.players-on {
  padding: 3px 8px;
  border: 1px solid #282727;
  background: #4c4a4a !important;
  color: #ffffff;
}

.players-on span {
  float: right;
  color: #ffffff !important;
}

.staff-off,
.info-off,
.offline {
  color: #ffffff !important;
  background: #972509;
  text-align: center;
  border-radius: 5px;
}

.staff-on,
.info-on,
.online {
  color: #ffffff !important;
  background: #20830b;
  text-align: center;
  border-radius: 5px;
}

.owl-dots {
  margin-top: -26px !important;
}

.slider-new {
  width: 100%;
}

.load-content .title {
  color: #fff;
  border-bottom: 1px solid #eee;
  padding: 5px 0;
  text-transform: uppercase;
  font-size: 20px;
  text-align: center;
}

.web-notice-list ul {
  padding: 10px;
}

.load-content .title p {
  text-transform: uppercase;
  font-size: 20px;
}

.web-notice-list ul li a {
  padding: 15px;
  display: block;
  margin: 5px 0;
  transition: all 0.2s ease-in-out;
  color: #ffffff;
  background: #363533;
  text-transform: uppercase;
  font-size: 15px;
}

.web-notice-list ul li a:hover {
  color: #9f9f9f;
  text-decoration: none;
}

.web-notice-list ul li a span {
  color: #ffffff;
  background: #744c12;
  padding: 8px;
  font-weight: normal;
  font-size: 15px;
  text-transform: uppercase;
}

.web-notice-list ul li a time {
  color: #db8610;
  float: right;
}

.web-notice-preview .center {
  font-size: 13px;
}

.web-notice-preview .center > .mensagem {
  padding: 10px;
  background: #000000;
  width: 100%;
  margin: 10px auto;
  color: #fff;
}

.web-notice-preview .center > .mensagem aside {
  background: #9e5723;
  text-align: center;
  margin: 10px auto;
  width: 60%;
  border-radius: 5px;
  font-size: 11px;
  padding: 5px 0;
}

.comments {
  padding: 10px;
  background: #202020;
}

.comments form,
.register form,
.allform form {
  padding: 10px;
}

.comments form div,
.register form div,
.allform form div {
  margin: 5px 0;
}

.register form section {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.comments form div p,
.register form div p,
.allform form div p {
  color: #959595;
  width: 100%;
  padding: 10px 0;
}

.result {
  text-align: center;
  margin: 30px 0;
}

.comments form div select,
.comments form div textarea,
.register form div select,
.register form div textarea,
.register form div input,
.allform form div select,
.allform form div input,
.allform form div textarea,
.allform form div input[type="file"],
.form-pix form input,
#qrcode-payload textarea{
  color: #e3e0dd;
  width: 100%;
  padding: 10px;
  border-radius: 1px;
  background: #020202;
  border: 1px solid #646464;
}

#qrcode-payload.hidden {
    display:none;
}

.comments form input[type="submit"],
.register form input[type="submit"],
.allform form input[type="submit"],
.form-pix form input[type="submit"],
.result form input[type="submit"],
.form-pix form button,
#qrcode-payload button,
.list-packages .package a{
  padding: 10px;
  background: linear-gradient(180deg, #97720b, #503901);
  border-radius: 2px;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
  margin: 10px auto;
  border: 2px solid #ff9c27;
  color: #e5e5e5;
  display: block;
  width: 170px;
  text-transform: uppercase;
}

.allform form input[type="submit"] {
  top: -1px;
  position: relative;
}

.raking-form form {
  display: flex;
  justify-content: center;
  column-gap: 5px;
  align-items: center;
}

.raking-form form select {
  width: 415px !important;
}

.comments form input[type="submit"]:hover,
.register form input[type="submit"]:hover,
.allform form input[type="submit"]:hover,
.form-pix form input[type="submit"]:hover,
.result form input[type="submit"]:hover,
.form-pix form button:hover,
#qrcode-payload button:hover,
.list-packages .package a:hover{
  background: linear-gradient(0deg, #97720b, #503901);
}

.ranking-home {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 10px 0 0;
}

.ranking-home div {
  margin: 10px 0;
  text-align: center;
  width: 248px;
  background: url("../images/castle-v2.jpg");
  object-fit: contain;
  border: 1px solid #383836;
  padding: 5px;
}

.ranking-home div > section:first-child {
  background: url("../images/top-one.png");
  height: 298px;
  width: 180px;
  float: left;
  border: none;
  border-radius: 0;
  position: absolute;
  left: -179px;
  text-align: center;
}

.ranking-home div > section:first-child a {
  background: none;
  left: 30px;
  top: 74px;
}

.ranking-home div > section:first-child p.name {
  background: #fff;
  color: #000;
  border-radius: 18px 0 18px 0;
}

.ranking-home div img {
  margin-top: 5px;
}

.ranking-home div a {
  width: 122px;
  display: block;
  font-size: 12px;
  padding: 5px;
}

.ranking-home div a p {
  font-size: 12px;
  width: 108px;
  color: #fff;
  font-family: "myriad";
}

.ranking-home div a p.name span {
  position: absolute;
  top: -9px;
  right: -5px;
  background: #ff9b00;
  width: 33px;
  border-radius: 0 0 0 20px;
  text-shadow: 0 0 3px BLACK;
}

.ranking-home div a:hover {
  color: #fb955e;
}

.ranking-home div a,
.top-killer tr td a,
.top-hero tr td a,
.result_rankings tr td a {
  text-decoration: none;
  color: #d3d3d3;
}

.ranking .links {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 1rem auto 5rem;
}

.ranking .links a {
  padding: 6px 20px;
  background: linear-gradient(180deg, #97720b, #503901);
  border-radius: 2px;
  cursor: pointer;
  border: 2px solid #ff9c27;
  color: #e5e5e5;
  display: block;
  transition: all 0.2s ease-in-out;
}

.ranking .links a:hover {
  background: linear-gradient(0deg, #97720b, #503901);
}

.top-killer tr td a:hover,
.top-hero tr td a:hover,
.result_rankings tr td a:hover {
  text-decoration: underline;
  color: #ffffff;
}

.ranking-home div p {
  padding: 2px;
  margin: 5px 0;
  color: #c3c3c3;
  text-transform: uppercase;
  text-align: center;
  font-size: 14px;
  border-bottom: 1px solid #686868;
}

.result_rankings_table,
.result_rankings {
  width: 750px;
  margin: 10px auto;
}

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

.result_rankings .title {
  position: absolute !important;
  top: -57px;
}

.result_rankings section {
  margin: 10px 0;
  text-align: center;
  width: 122px;
  background: url("../images/bg-chars-ranking.png");
}

.result_rankings section p {
  padding: 14px 0;
  text-align: center;
  font-size: 12px;
  border-radius: 5px;
}

.result_rankings section p:first-child {
  top: -5px;
}

.result_rankings section p:last-child {
  top: 6px;
}

.result_rankings section p .score {
  color: #a1928c;
}

.result_rankings section p .tag {
  color: #a3a3a3;
}

.result_rankings section p .name {
  color: #a3a3a3;
  font-weight: bold;
}

.result_rankings section p .count {
  color: #a1928c;
  font-weight: bold;
}

.result_rankings_table tr td {
  color: #000;
}

.ranking-home div table,
.top-killer table,
.top-hero table,
.result_rankings table {
  padding: 3px;
  width: 100%;
  border-radius: 5px;
  font-size: 13px;
}

.ranking-home div table tbody tr td,
.top-killer table tbody tr td,
.top-hero table tbody tr td,
.result_rankings table tbody tr td {
  padding: 3px;
  border-bottom: 1px dotted #afb5bf;
  width: 30px;
  text-align: left;
  color: #eee;
}

.ranking-home div table tbody tr td:nth-child(3),
.top-killer table tbody tr td:nth-child(3),
.top-hero table tbody tr td:nth-child(3),
.result_rankings table tbody tr td:nth-child(3) {
  color: #81c367;
}

.ranking-home div p span {
  color: #fff;
}

.casle-siege a {
  text-decoration: none;
}

/*Format Scroll*/

.web-download table,
.web-vip table,
.list-members table,
.list-members {
  width: 100%;
  padding: 5px;
}

.web-download table thead,
.web-vip table thead,
.list-members table thead,
.result_rankings_table table thead {
  background: #000000;
}

.web-download table tbody,
.web-vip table tbody,
.list-members table tbody,
.result_rankings_table table tbody {
  background: #323131;
}

.web-download table thead tr td,
.web-download table tbody tr td,
.web-vip table thead tr td,
.web-vip table tbody tr td,
.list-members table thead tr td,
.list-members table tbody tr td,
.result_rankings_table table tbody tr td {
  padding: 8px;
  font-size: 13px;
  color: #c7c7c7;
  border-bottom: 1px solid #484848;
}

table tbody tr td.info-off,
table tbody tr td.info-on {
  color: #f30 !important;
  width: auto !important;
  background: none;
  text-align: left;
  border-radius: 0 !important;
}

table tbody tr td.info-on {
  color: #2cff00 !important;
}

.web-download table tbody tr td a,
.list-members table tbody tr td a {
  padding: 3px;
  text-decoration: none;
  background: #938d8d;
  color: #fff;
  border-radius: 5px;
}

.result_rankings_table table thead tr td {
  padding: 8px;
  color: #eee;
}

.web-download table tbody tr td a:hover,
.list-members table tbody tr td a:hover {
  padding: 3px;
  text-decoration: none;
  background: #efefed;
  color: #000;
  border-radius: 5px;
}

.vip h2 {
  padding: 10px 5px;
  font-size: 16px;
  font-weight: normal;
  border-bottom: 1px solid #343434;
  margin-bottom: 15px;
}

/*Footer*/

footer {
  width: 100%;
  display: flex;
  justify-content: center;
  background: #333;
  align-items: center;
  height: 150px;
}

footer div img {
  height: 100px;
}

footer div p {
  color: #858282;
  text-align: center;
}

footer div p span {
  color: #ff6700;
}

/*Panel User*/

.menu-nav-panel {
  padding: 10px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  justify-content: center;
}

.menu-nav-panel a {
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 2px;
  background: #9e5723;
  color: #ffffff;
  transition: all 0.2s ease-in-out;
  width: 123px;
  display: block;
  text-align: center;
}

.menu-nav-panel a:hover {
  background: #d08313;
}

.panel-control .information ul li {
  padding: 5px;
  margin: 3px 0;
}

.panel-control h2 {
  padding: 0 10px;
  font-weight: normal;
  font-size: 14px;
  color: #dbdbdb;
  text-transform: uppercase;
  margin-top: 20px;
}

/*Shoppping*/

.shopping {
  display: flex;
  justify-content: center;
  margin: 9px auto;
}

.container-shopping {
  display: flex;
  align-items: flex-start;
  column-gap: 10px;
  padding: 20px;
  width: 580px;
  justify-content: center;
}

.shopping section {
  text-align: center;
  padding: 10px;
  border-radius: 5px;
  background: #9e5723;
  width: 130px;
}

.shopping img {
  width: 65px;
  height: 100px;
  object-fit: contain;
}

.shopping section p {
  padding: 4px;
  background: #000000;
  border-radius: 2px;
  margin: 3px 0;
  font-size: 11px;
  color: #fff;
  text-transform: uppercase;
}

.shopping section a {
  text-decoration: none;
  background: #e5dcc1;
  color: #1e0d05;
  padding: 2px;
  border-radius: 4px;
  display: block;
  transition: all 0.2s ease-in-out;
}

.shopping section a:hover {
  background: #ccc19f;
}

#mensagem-shopping {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  align-items: center;
  justify-self: center;
  z-index: 6666;
  width: 100%;
  height: 100vh;
  transition: all 0.4s ease-in-out;
  background: rgba(0, 0, 0, 0.8);
}

#mensagem-shopping.view {
  top: 0;
  display: flex !important;
}

#mensagem-shopping div {
  padding: 10px;
  border-radius: 5px;
  background-color: #9e5723;
  text-align: center;
  margin: auto;
  border: 2px solid #f1caa8;
  color: #fff;
}

#mensagem-shopping .alert-success h1 {
  color: rgb(25, 106, 14);
  padding: 10px;
}

#mensagem-shopping .alert-success p {
  font-size: 13px;
  letter-spacing: 1px;
}

#mensagem-shopping .alert-warning h1 {
  color: rgb(124, 28, 4) !important;
  padding: 10px;
}

#mensagem-shopping .alert-warning p {
  font-size: 13px;
  letter-spacing: 1px;
}

.menu-shopping {
  padding: 5px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.menu-shopping .info {
  text-align: center;
  padding: 5px;
  border-radius: 2px;
  background: #323232;
  color: #fff;
  width: 195px;
}

.menu-shopping a {
  display: block;
  width: 100%;
  margin: 5px 0;
  border-radius: 2px;
  background: #9e5723;
  padding: 5px;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  border: 1px solid #f1caa8;
  color: #fff;
  text-align: center;
}

.menu-shopping a:hover {
  background: #ce6416;
}

.preview-container {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  align-items: flex-start;
  gap: 5px;
  background: #363533;
}

.preview-container .imagem {
  padding: 5px 5px 0 5px;
  background: #222222;
  border-radius: 5px;
}

.preview-container .imagem img {
  background: #fff;
}

.preview-container .infos {
  width: 635px;
}

.preview-container .infos ul li {
  background: linear-gradient(0deg, #222222, #222222);
  padding: 5px 8px;
  margin: 5px 0;
  color: #ffffff;
  border-bottom: 1px solid #363533;
}

.preview-container .infos ul li span {
  float: right;
  color: #fff;
}

.preview-container .infos ul li span a,
.list-members table tbody tr td a {
  padding: 1px 10px;
  border-radius: 5px;
  color: #fff;
  transition: all 0.2s ease-in-out;
  text-decoration: none;
  background: #c54206;
}

.preview-container .infos ul li span a:hover,
.list-members table tbody tr td a:hover {
  background: #e45a1a;
  padding: 1px 10px;
  color: #fff;
}

.panel-control .information ul {
  padding: 8px;
}

.panel-control .information ul li {
  background: #363533;
  color: #d1d1d1;
  border-bottom: 2px solid #141414;
}

.panel-control .information ul li span {
  color: #f28f36;
}

.vip {
  padding: 10px;
  color: #cfcfcf !important;
}

/*REFERENCE*/

.informations-reference ul li {
  padding: 5px;
  border-bottom: 3px solid #202020;
  color: #e1e1e1;
  background: #383737;
}

.list-chars {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  margin: 2rem 0;
}

.list-chars div {
  padding: 5px;
  border-radius: 5px;
  background: #4e4e4e;
  text-align: center;
  width: 190px;
}

.list-chars div p {
  padding: 4px;
  background: #c64305;
  border-radius: 5px !important;
  margin: 5px 0;
}

.list-chars div a {
  margin-top: 15px;
  display: block;
  background: #fff;
  color: #000;
  text-decoration: none;
  padding: 5px;
  border-radius: 5px;
}

.list-chars div a:hover {
  background: #d9d9d9;
}

.message-reference {
  display: none;
}

.message-reference.view {
  display: block !important;
  margin: 1rem;
  text-align: center;
}

.information-reference {
  padding: 10px 5px;
  font-size: 13px;
  text-align: center;
  color: #d7d7d7;
}

.information-reference strong,
.information-reference small {
  color: #ffcc82;
}

.informations-reference {
  margin-top: 2rem;
  padding: 5px;
}

.inventory {
  width: 298px;
  height: 295px;
  background: url("../images/inventory.png");
  margin: 1rem auto;
  border: 20px solid #131316;
}

.inventory .sword {
  left: 6px;
  top: 79px;
  position: absolute;
  width: 56px;
  text-align: center;
  height: 92px;
  line-height: 9;
}

.inventory .shield {
  left: 84px;
  top: -177px;
}

.inventory .helm {
  left: 101px;
  top: 8px;
  width: 57px;
  height: 58px;
  text-align: center;
  position: absolute;
}

.inventory .armor img {
  width: 46px;
  height: 42px;
  object-fit: contain;
}

.inventory .armor {
  left: 101px;
  top: 76px;
  width: 58px;
  height: 91px;
  line-height: 9;
  position: absolute;
}

.inventory .armor img {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

.inventory .gloves {
  left: 4px;
  top: 182px;
  width: 59px;
  height: 62px;
  position: absolute;
}

.inventory .pants {
  left: 101px;
  top: 186px;
  width: 57px;
  height: 60px;
  position: absolute;
}

.inventory .boots {
  left: 195px;
  top: 180px;
  width: 58px;
  height: 62px;
  position: absolute;
}

.inventory .shield {
  left: 195px;
  top: 79px;
  width: 58px;
  height: 92px;
  line-height: 9;
  position: absolute;
  text-align: center;
}

.inventory .pet {
  left: 5px;
  top: 7px;
  width: 58px;
  height: 59px;
  text-align: center;
  line-height: 5;
  position: absolute;
}

.inventory .pendant {
  left: 67px;
  top: 81px;
  width: 28px;
  height: 24px;
  position: absolute;
}

.inventory .ring_2 {
  left: 162px;
  top: 181px;
  width: 32px;
  height: 32px;
  position: absolute;
}

.inventory .ring_1 {
  left: 66px;
  top: 181px;
  width: 31px;
  height: 25px;
  position: absolute;
}

.inventory .wing {
  left: 165px;
  top: 7px;
  width: 89px;
  height: 60px;
  position: absolute;
}

.inventory .wing img {
  width: 89px;
  height: 100px;
  object-fit: contain;
  top: -20px;
}

.inventory div p {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  width: 100% !important;
  display: block;
  top: 0;
  text-align: center;
  min-width: 100px;
  left: -25px;
  color: #fff;
}

.inventory div:hover > p {
  visibility: visible;
  opacity: 1;
}

.title-circle {
  padding: 8px 8px 8px 25px !important;
}

.title-circle:before {
  content: "\00BB";
  width: 7px;
  height: 7px;
  position: absolute;
  left: 10px;
  border-radius: 50%;
  top: 7px;
  color: #ffbd9e;
}

.group-shopping {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 1rem;
  flex-wrap: wrap;
}

.group-shopping a {
  padding: 5px 20px;
  border-radius: 5px;
  color: #ffffff;
  background: #9e5723;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  border: 1px solid #f1caa8;
  width: 130px;
  text-align: center;
}

.group-shopping a:hover {
  background: #ce6416;
}

.group-shopping.buttons {
  gap: 4px;
}

.group-shopping button {
  padding: 5px;
  border-radius: 5px;
  color: #ffffff;
  background: #9e5723;
  text-decoration: none;
  transition: all 0.2s ease-in-out;
  border: 1px solid #f1caa8;
  text-align: center;
  font-size: 12px;
  width: 120px;
  cursor: pointer;
}

.group-shopping button:hover {
  background: #ce6416;
}

.king {
  width: 200px;
  height: 305px;
  background: url("../images/rei_pvp.png") no-repeat;
  top: -244px;
  position: absolute;
  background-size: contain;
  text-align: center;
  z-index: 1;
  right: 25px;
}

.info-king {
  position: absolute;
  text-align: center;
  width: 200px;
  top: -52px;
  right: 25px;
}

.info-king img {
  top: -114px;
  width: 113px;
  height: 113px;
}

.info-king p {
  top: -131px;
  color: #fff;
  z-index: 3;
  width: 120px;
  margin: 10px auto;
}

.info-king p:nth-child(3) {
  background: #2b2622;
  border-radius: 1px;
  top: -130px;
}

.warning-staff {
  font-size: 10px;
  color: #f7f7f7;
  text-align: center;
}

.warning-staff p {
  padding: 5px 0;
}

.office {
  text-align: center;
  padding: 5px;
  background: linear-gradient(276deg, #17100f, #442112, #17100f) !important;
}

.search {
  display: flex;
  width: 500px;
  margin: auto;
  padding: 0 0 3rem;
  gap: 10px;
}

.search .imagem {
  text-align: center;
  padding: 5px;
}

.search .imagem p {
  padding: 3px;
  background: #7f3a18;
  margin: 3px auto;
  border-radius: 2px;
}

.search .informations {
  width: 300px;
}

.search .informations p {
  padding: 3px;
  background: #64412f;
  margin: 3px auto;
  border-radius: 2px;
  width: 100%;
}

.search .informations p span {
  float: right;
}

.top-view-left {
  display: flex;
  padding: 10px;
  align-items: center;
  gap: 10px;
  height: 150px;
}

.top-view-left img {
  left: 2px;
  top: 15px;
  width: 103px;
  height: 103px;
}

.donate-info {
  background: url("../images/desbravador.png");
}

.desb-info {
  background: url("../images/donate.png");
}

.top-view-left div {
  width: 200px;
  top: 14px;
}

.top-view-left div a,
.top-view-left div p {
  padding: 5px;
  display: block;
  color: #fff;
  background: #784128;
  width: 100%;
  border-radius: 3px;
  transition: all 0.2s ease-in-out;
  font-size: 12px;
  border: 2px solid #c18469;
  box-shadow: inset 0 0 8px #000;
}

.top-view-left div a:hover {
  background: #906c5d;
}

.top-view-left div p {
  margin-top: 5px;
}

.preview-ticket {
  padding: 5px;
}

.preview-ticket h2 {
  padding: 5px;
  background: #000000;
  color: #f7f7f7;
}

.preview-ticket div {
  padding: 5px;
  background: #3c3c3c;
  border-radius: 2px;
  text-align: left;
  margin: 0 auto 1rem 0;
  color: #fff;
  font-family: "Tahoma";
  font-size: 13px;
}

.preview-ticket div p.message {
  color: #fff;
  text-align: left;
  padding: 1rem 0.5rem;
  background: #222;
  font-size: 12px;
}

.preview-ticket div p.date {
  color: #fff;
  padding: 0.3rem;
  background: #af2610;
  font-size: 12px;
  text-align: center;
  width: 60%;
  margin: 0.3rem auto;
  border-radius: 5%;
}

.preview-answered h2 {
  padding: 5px;
  background: #000000;
}

.preview-answered div {
  padding: 5px;
  background: #3c3c3c;
  border-radius: 2px;
  text-align: left;
  margin: 0 auto 1rem 0;
}

.preview-answered div p.message {
  color: #fff;
  text-align: left;
  padding: 1rem 0.5rem;
  background: #222;
  font-size: 12px;
}

.preview-answered div p.date {
  color: #fff;
  padding: 0.3rem;
  background: #6a6a6a;
  font-size: 12px;
  text-align: center;
  width: 60%;
  margin: 0.3rem auto;
  border-radius: 2px;
}

.preview-answered div:nth-child(2):before {
  content: "ultima resposta";
  width: 80px;
  padding: 4px;
  bottom: 12px;
  right: 20px;
  position: absolute;
  z-index: 3;
  font-size: 11px;
  border-radius: 2px;
  text-align: center;
  animation: animaAnswared 1s infinite ease-in-out;
  color: #fff;
  text-transform: uppercase;
}

@keyframes animaAnswared {
  0%,
  100% {
    background: #f28f36;
  }

  50% {
    background: #cc711f;
  }
}

.info-main-home {
  padding: 15px 30px 30px;
  background: url("../images/castle-v2.jpg") center center;
  object-fit: contain;
  border: 1.5px solid #f28f36;
  margin: 0 0 30px;
  color: #fff;
  text-align: center;
}

.info-main-home h2 {
  font-size: 20px;
  padding: 0 0 30px;
}

.ranking-events {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 10px 0 0;
}

.ranking-events > div {
  width: 248px;
  box-shadow: inset 0 0 33px #141414, inset 0 0 33px #141414;
  height: 300px;
  margin: 5px 0 0;
  border: 1px solid rgb(169, 169, 169);
  color: #eee;
  font-size: 14px;
  text-align: center;
}

.ranking-events > div p {
  padding: 5px;
  background: rgba(0, 0, 0, 0.7);
  text-transform: uppercase;
}

.ranking-events > div div {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.ranking-events > div div p span,
.ranking-events > div div p span a {
  text-transform: capitalize;
  color: #f28f36;
}

.box.events {
  background: url("../images/castle-v2.jpg");
  border: 1px solid #363533;
  box-shadow: inset 0 0 24px #000000;
  padding: 10px;
  width: 259px;
}

.box.events ul li {
  border-bottom: 1px dotted #77746f;
  color: #fff;
  font-size: 15px;
}

.box.events ul li span {
  background: #f28f36;
  color: #333;
  border-radius: 5px;
  text-align: center;
  width: 80px;
  font-size: 13px;
  letter-spacing: 2px;
}

.register {
  background: #363533;
}

.information {
  background: #363533;
}

.panel-logged {
  background: #3c3c3c;
  margin-top: 30px !important;
}

.panel-logged ul li {
  background: #222;
  margin: 3px 0;
}

.web-castle {
  margin: 35px 0 35px 0 !important;
  position: relative;
  background: transparent url("../images/castlesiege2.png") right no-repeat;
  padding: 15px;
  box-shadow: inset 0 0 25px 0 #000;
  border: 1px solid #363533;
}

.web-castle.king2 {
  background: transparent url("../images/reidomu2.png") right no-repeat;
}

.web-castle.devias2 {
  background: transparent url("../images/wardevias2.png") right no-repeat;
}

.web-castle .title-castle {
  font-size: 20px;
  text-transform: uppercase;
  color: #ffffff;
  padding-left: 19px;
}

.web-castle .statue {
  width: 124px;
  height: 325px;
  background: url("../images/castlesiege.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

.web-castle .casle-siege {
  display: flex;
  gap: 40px;
  padding: 1.2rem;
  align-items: center;
}

.date-hours-castle {
  color: #fff;
  text-transform: uppercase;
}

.date-hours-castle span {
  color: #f28f36;
}

.mark-winner p.bord {
  background: linear-gradient(to right, #141313, transparent);
  padding: 5px;
  margin-top: 0px;
}

.mark-winner p {
  color: #fff;
  font-size: 15px;
  background: linear-gradient(to right, #141313, transparent);
  text-transform: uppercase;
  padding: 5px;
}

.mark-winner a {
  color: #fff;
  font-size: 24px;
  font-weight: 500;
  background: linear-gradient(90deg, #f28f3647, transparent);
  display: block;
  margin-bottom: 1rem;
  padding: 4px;
}

.mark-winner p span {
  display: block;
  text-transform: uppercase;
  color: #fff;
  padding: 4px;
  background: linear-gradient(90deg, #f28f3647, transparent);
}

.char-on {
  color: #2cff00;
}

.char-off {
  color: #f30;
}

.forms-payment {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 10px 0;
}

.forms-payment form {
  text-align: center;
  background: #363533;
}

.register .checkbox {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #fff;
  width: 300px;
  padding: 0.2rem;
}

.register .checkbox input {
  width: auto;
}

.select-char {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 2rem;
}

.select-char a {
  display: block;
  padding: 5px;
  text-align: center;
  background: #5a5a5a;
  color: #fff;
}

.packages {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.packages .info {
  width: 230px;
  padding: 10px;
  background: #383838;
  text-align: center;
}

.packages.shopping .info {
  width: 160px;
}

.mkt-home.packages.shopping .info img {
  width: 125px;
  height: 100px;
  object-fit: none;
}

.mkt-home {
  flex-wrap: nowrap;
}

.packages.shopping .info img {
  width: 140px;
  height: 100px;
  object-fit: none;
}

.packages .info img {
  width: 200px;
  height: 180px;
  object-fit: contain;
  background: #474747;
  margin: 0.5rem auto;
}

.packages .info > p {
  padding: 5px;
  background-color: #0e0e0e;
  color: #fff;
}

.mkt-home .info p.name,
.mkt-home .info p.price {
  padding: 5px;
  background-color: #0e0e0e;
  color: #fff;
}

.packages .info p.description {
  margin-bottom: 10px;
}

.packages .info a {
  color: #ffffff;
  display: block;
  width: 100%;
  padding: 3px;
  margin: 7px auto;
  background: #9e5723;
  border-radius: 5px;
  text-align: center;
}

.packages .info a:hover {
  background: #b46e3b;
}

.shopping .menu-left {
  width: 140px;
  gap: 0;
}

.shopping .menu-left a {
  display: block;
  margin: 0;
}

.shopping .content-shop {
  width: 100%;
}

.container-shopping .infos {
  display: flex;
  gap: 20px;
  align-items: start;
}

.container-shopping .infos .image {
  width: 120px;
  padding: 10px;
  background: #383838;
  text-align: center;
}

.container-shopping .infos .image {
  width: 110px;
  height: 100%;
  object-fit: contain;
}

.container-shopping .infos .details {
  width: 450px;
}

.container-shopping .infos .details .excelent {
  display: flex;
  align-items: center;
  color: #eee;
  gap: 10px;
}

.container-shopping .infos .details .excelent input {
  width: 20px;
}

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

.list-chars a {
  color: #fff;
  padding: 2px 10px;
  border-radius: 5px;
  background-color: #333;
}

.redes {
  position: fixed;
  right: 10px;
  top: 20%;
  width: 50px;
  z-index: 99999;
}

.redes a {
  display: block;
  width: 50px;
  height: 50px;
  color: #fff;
  background: #035270;
  border-radius: 5px;
  margin: 3px 0;
  font-size: 25px;
  text-align: center;
  line-height: 50px;
  border: 1px solid #035270;
  box-shadow: inset 0 0 10px #000;
}

.redes a:hover {
  background: #0784b4;
}

.warning_vault {
  text-align: center;
  padding: 5px;
  color: #fff;
  margin: 1rem auto;
  font-size: 13px;
  background: #3f3f3f;
  border-radius: 10px;
}
.btn-payments {
    display: flex;
    gap: 2rem;
} 
.views-payment > div {
    display:none;
}.views-payment > div.active {
    display:block;
}
.list-packages {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 5px;
}
.list-packages .package > *:not(:last-child){
    margin-bottom: 1rem;
}
.list-packages .package {
    padding: 1rem;
    background: #333;
    border-radius: 5px;
    border: 1px solid #444;
    text-align: center;
    color: #fff;
}.list-packages .package p:nth-child(1){
    color: #f19f63;
    font-size: 15px;
}.list-packages .package p:nth-child(3){
    color: #ededed;
    font-size: 13px;
    padding: 4px;
    background: #000;
    border-radius: 8px;
}