/* PLACE YOUR CUSTOM STYLES IN THIS FILE */
.return {
    box-sizing: border-box;
}
.mpl-navbar li.mpl-dropdown.active::after {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    border-bottom: 3px solid #0eb708; /* This creates the border. Replace black with whatever color you want. */
    transition: width .2s  ease-in-out; /* This establishes the amount of time in seconds the animation should take from start to finish */
}
.mpl-widget-categories ul li
{
    padding: 10px 0 10px 30px;
    background-color: #282927;
    margin-bottom:3px;
    transition: background-color .15s ease-in-out;
}
.mpl-widget-categories ul li:hover
{
    background-color: #1f211f;
    /*border-bottom: 5px solid rgb(0, 160, 53);*/
}

.mpl-widget-categories ul a::after {
    content: "";
    position: relative;
    display: block;
    z-index: 999;
    width: 10px;
    height: 0;
    margin-right:-10px;
    border-right: 5px solid #0eb708; /* This creates the border. Replace black with whatever color you want. */
    transition: height .2s  ease-in-out; /* This establishes the amount of time in seconds the animation should take from start to finish */
}

.mpl-widget-categories ul a:hover::after {
    height: 100%; /* This will be the new width of your border when on hover */
    transition: height .1s  ease-in-out; /* This establishes the amount of time in seconds the animation should take from start to finish */
}

video {
    opacity: 100%;
    object-fit: cover;
    width: 100vw;
    height: 100%;
    top: 0 50%;
    left: 0;
  }

@media (max-width: 479px) {
    .custom-hidden-xs-down {
        display: none;
    }
}

@media (min-width: 480px) {
    .custom-hidden-xs-up {
        display: none;
    }
}

@media (max-width: 575px) {
    .mobile-p-30 {
       padding-left: 30px;
       padding-right:30px; 
    }
}

@media (min-width: 576px) {
    .home-welcome {
        /*-webkit-box-flex: 0;
        -webkit-flex: 0 0 70%;
        -ms-flex: 0 0 70%;
        flex: 0 0 70%;
        background-image: linear-gradient(#282927cf, #282927cf, #28292717);
        border-radius: 5px;
        padding: 30px;
        margin: auto;*/
        text-align: left;
        max-width: 75%;
        
    }
}

@media (min-width: 992px) {
    .home-welcome {
        /*-webkit-box-flex: 0;
        -webkit-flex: 0 0 70%;
        -ms-flex: 0 0 70%;
        flex: 0 0 70%;
        background-image: linear-gradient(#282927cf, #282927cf, #28292717);
        border-radius: 5px;
        padding: 30px;
        margin: auto;*/
        text-align: left;
        max-width: 52%;
        
    }
}
.home-welcome {
    padding-right: 20px;
    padding-left: 20px;
}

.table-bordered {
    border: 0;
}

.page-middle-banner {
    height: 972px;
}

.page-top-banner {
    height: 500px;
}
.npc {
    border: 1px solid #3f3f3f;
    background-color: #282927;
}
.npc:hover {
    background-color: #3f3f3f;
}
.img-rounded
{
    border-radius: 5px;
    opacity: 0.83;
    will-change: opacity;
    -webkit-transition: opacity .2s ease-in-out;
    -o-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
}
.img-rounded:hover {
    opacity: 1.0;
}
.modal {
    top: 15% !important;
}
.mpl-widget-categories ul li {
    display: flex;
    width: 100%;
}
.mpl-widget-categories ul li i {
    width: 25px;
    display: flex;
    vertical-align: middle;
    font-size: 15px;
    color: #f8f8f8 !important;
    margin-right: 15px !important;
    margin-left: -10px !important;
    padding: 7px;
}
.mpl-widget-categories {
    margin-bottom: -20px !important;
}
.charSelectClick {
    cursor: pointer;
    margin: 2px;
    background-color: #282927;
    padding: 10px;
    border: 2px solid #2c2e30;
}
.char-name {
    margin-top: -20px;
    font-size: 10px;
    color: #ffffff;
}
.table-hover td:first-child, .table th:first-child {
    text-align:left;
    white-space: pre;
}
hr {
    border: 0; 
  height: 1px; 
  background-image: -webkit-linear-gradient(left, #202124, #8c8b8b, #202124);
  background-image: -moz-linear-gradient(left, #202124, #8c8b8b, #202124);
  background-image: -ms-linear-gradient(left, #202124, #8c8b8b, #202124);
  background-image: -o-linear-gradient(left, #202124, #8c8b8b, #202124); 
  margin-top:20px;
  margin-bottom:20px;
}
/*.custom-bg {
    background-image:url(https://exiliumworld.com/assets/images/match-background.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
	background-size: cover;
}*/
.bg-moons {
    background-image:url(https://exiliumworld.com/assets/images/bg-news.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover; 
    background-position: 50% 50%;   
}
.vote-news {
    background-image:url(https://exiliumworld.com/assets/images/bg-news.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover; 
    background-position: 50% 50%;   
}
.play-now {
    background-image:url(https://exiliumworld.com/assets/images/dark/banner-bg.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover; 
    background-position: 50% 50%;   
}
.bg-xlight {
background-color: #282927;
}
.bg-table {
    background-color: #1f211f;
}
.bg-form {
    background-color: #282927!important;
    /*border-radius: 5px;*/
}
.news .mpl-post-item {
background-color: #282927 !important;
padding: 30px;
border: 1px solid #414141;
}
.ex-gold {
    color:rgb(255, 212, 70) !important;
}
.ex-cyan {
    color:rgb(70, 233, 255) !important;
}
.npcs td {
background-color: #282927;
border: 2px solid #202121;
}
.vote_reception {
    padding: 8px 20px !important;
    font-size: .85rem !important;
}
.home_votelinks_div .ul {
padding: 0 !important;
margin: 0 !important;
}
.home_votelinks_div {
    background: #272926c2 !important;
    padding: 30px;
    border-radius:4px;
    text-align: center;
}
.home_votelinks_div h2 {
text-align: center;
margin-bottom: 15px;
}
.home_votelinks_div .btn {
	width: 100%;
justify-content: center;
}
.home_votelinks_div ul {
	list-style-type:none;
}
.home_votelinks_div ul li {
    margin: 12px 0;
}
/* width */
.news::-webkit-scrollbar {
    width: 8px;
  }
  
  /* Track */
  .news::-webkit-scrollbar-track {
    background: rgb(167, 167, 167); 
  }
   
  /* Handle */
  .news::-webkit-scrollbar-thumb {
    background: #5a5a5a; 
  }
  
  /* Handle on hover */
  .news::-webkit-scrollbar-thumb:hover {
    background: #4d4d4d; 
  }
.col-lg.mpl-content {
    padding-right: 10px;
    margin-right: 20px;
}
.mpl-sidebar {
    padding-right: 15px;
}
#btn-config-master{
    background: #2fc6bb;
    display: inline-block;
    line-height: 46px; 
    width: 50px;
    background-size: 0, 100%;
    height: 46px;
    padding: 2px 0 0 15px;
    border-radius: 3px;
}
#btn-config-master:hover{
    color: #2fc6bb;
    background: #FFF;
}
#btn-streamer{
    color: #3a3a3a;
    text-shadow:  0px 0px 1px #000;
}
#btn-streamer li{
    background: #2fc6bb;
}
#btn-streamer:hover li{
    background: #FFF;
}
#btn-streamer:hover,
#btn-streamer:hover i{
    color: #2fc6bb !important;
    
    
}

.select-dd-control {
    height: auto;
    padding: 5px 0;
    font-family: proxima-nova, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #cacaca;
    border: 0;
    -webkit-transition: color .15s, background-color .15s;
    -o-transition: color .15s, background-color .15s;
    transition: color .15s, background-color .15s;
    background-color: transparent;
}

.select-dd-control {
    cursor: pointer;
    height: auto;
    padding: 5px 0;
    font-family: proxima-nova, sans-serif;
    font-weight: 600;
    color: #cacaca;
    border: 0;
    -webkit-transition: color .15s, background-color .15s;
    -o-transition: color .15s, background-color .15s;
    transition: color .15s, background-color .15s;
    background-color: transparent;
}
.select-dd-control:hover {
    color: #ffffff;
}
.select-dd-control:focus {
    color: #ffffff;
}
.select-dd-control > option {
    color: #cacaca;
    background-color: #2b2c2a;
}


/* NEWS.php INI*/
.news-grid .col-md-4{ 
    float: left;
}
.news-grid article{
    /* padding: 15px; */
    background: #2D2E2C !important;
    margin-bottom: 30px;
}

.news-grid article .content-text{
    padding: 40px 30px;
}
.news-grid article .content-text > span{
    font-size: 12px;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: block;
}
.news-grid article .content-text > span a{
    color: #cacaca;
}
.news-grid article .content-text > h5{
    text-transform: uppercase;
    margin-bottom: 20px;
    display: block;
    line-height: 28px;
}

.news-grid article .content-img {
    overflow: hidden;
    display: block;
    position: relative;
    margin: 0;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    z-index: 1
}
.news-grid article .content-img:hover img {
    -webkit-transform: scale(1);
    transform: scale(1);
}
    
.news-grid article .content-img img {
    max-width: initial;
    height: auto;
    max-height:205px;
    display: block;
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-transition: all .6s ease;
    transition: all .6s ease;
    /* margin-left: -58.5%; */                               
    
}
/* NEWS.php END*/

/* Fundo escurecido */
.custom-popup#popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

/* Estilo do pop-up */
.custom-popup #popup {
    background: transparent;
    width: 850px;
    height: 540px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Imagem de fundo */
.custom-popup .popup-body {
    position: relative;
    width: 100%;
    height: 100%;
}

.custom-popup .popup-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Card estilizado no pop-up */
.custom-popup .popup-card {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    width: 40%;
    background: rgba(51, 51, 51, 1.00);
    color: white;
    text-align: center;
    overflow: hidden;
}

/* Imagem do baú funcionando como "capa" do card */
.custom-popup .popup-card .popup-card-header {
    width: 100%;
    height: 150px; /* Altura fixa para a imagem do topo */
    background-image: url(https://exiliumworld.com/assets/images/chest.png);
    background-size: cover;
    background-position: center;
}

/* Conteúdo do card */
.custom-popup .popup-card .popup-card-body {
    padding: 20px;
}

/* Botão de Fechar */
.custom-popup .close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    color: white;
    z-index: 1000;
}
.custom-popup .close-btn:hover {
    color: red;
}

.custom-popup .popup-button:hover {
    background: #cc5200;
    text-decoration: none;
}


        
/* Fundo escurecido */
.discord-popup#popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
display: none;
justify-content: center;
align-items: center;
z-index: 1050; /* Maior que o z-index do modal do Bootstrap */
}

/* Estilo do pop-up */
.discord-popup #popup {
background: rgba(51, 51, 51, 1.00);
width: 320px;
text-align: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding: 40px;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.discord-popup #popup img {
width: 60%;
border-radius: 8px;
}

.discord-popup #popup h2 {
margin: 15px 0 10px;
font-size: 1.5em;
color: #fff;
}

.discord-popup #popup p {
font-size: 1em;
color: #bfbfbf;
}

.discord-popup .popup-button {
background: #5865F2; /* Cor do Discord */
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 1em;
margin-top: 15px;
}

.discord-popup .popup-button:hover {
background: #4752C4;
}

/* Botão de fechar */
.discord-popup .close-btn {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
font-size: 1.2em;
cursor: pointer;
color: #fff;
}