@import url('https://fonts.googleapis.com/css2?family=Afacad+Flux:wght@300..700&display=swap');

:root {
    --color: #eee;
    --nav-color: #ffffff;
    --nav-hover-color: #FCFD75;
    --nav-background: rgba(96,228,240,0.02);
    --nav-background-customized: rgba(12, 46, 59,0.20);
    --nav-hover-background: rgba(96,228,240,0.1);
    --nav-border: rgba(96,228,240,0.1);
    --nav-border-2: rgba(96,228,240,0.3);
    --nav-hover-border: rgba(96,228,240,0.05);
    --nav-hover-customized: rgba(12, 46, 59,0.50);
    --btn-outline-bg: rgba(96,228,240,0.3);
    --btn-outline-hover-bg: transparent;
    --btn-outline-border: rgba(96,228,240,0.1);
    --btn-outline-hover-border: rgba(96,228,240,0.3);
    --btn-outline-hover-color: rgba(96,228,240,0.9);
    --hover-color: #fff;
    --background-color: #001623;
    --bs-font-sans-serif:"Afacad Flux",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" !important;
}
html, body {
    position: relative;
}
body {
    background-color: var(--background-color) !important;
    color: var(--color) !important;
}
ol,
ul,
nav {
    list-style: none;
}
a {
    text-decoration: none;
    transition: all 0.3s ease !important;
}
header {
    height: 593px;
    /* background-position: center top !important;
    background-repeat: no-repeat !important; */
}

header .container {
    padding-top: 20px;
}
header .container:hover img {
    transition: all 0.3s ease !important;
}
ul.warn {
    margin-top: 1rem !important;
}

.container {
    width: 100%;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.navbar {
    padding: 10px 0;
    --bs-navbar-nav-link-padding-x: 1rem;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.navbar-nav {
    --bs-nav-link-padding-x: 100px;
}

.container,
.navbar > .container-fluid {
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
}

.navbar-nav .nav-item {
    margin-right: 10px;
    background:var(--nav-background-customized);
    border: 1px solid var(--nav-border);
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    padding: 0 20px;
    transition: all 0.3s ease !important;
}

.navbar-nav .nav-item:not(.dropdown) {
    backdrop-filter: blur(8px);
}

.navbar-nav .nav-item:focus,
.navbar-nav .nav-item:hover {
    background: var(--nav-hover-background);
    border: 1px solid var(--nav-hover-border);
}

.nav-right-item {
    color: var(--nav-color) !important;
    margin-right: 10px;
    background:var(--nav-background);
    border: 1px solid var(--nav-border);
    border-top-left-radius: 15px;
    border-bottom-right-radius: 15px;
    backdrop-filter: blur(8px);
    padding: 8px 30px;
    transition: all 0.3s ease !important;
}

.nav-right-item:focus,
.nav-right-item:hover {
    background: var(--nav-hover-background);
    border: 1px solid var(--nav-hover-border);
}

.navbar-nav {
    --bs-nav-link-color: #ddd;
}

.navbar-nav .nav-link {
    color: var(--nav-color);
}

.nav-link:focus,.nav-link:hover {
    color: var(--nav-hover-color);
}
.dropdown-custom .dropdown-menu {
    left: -2px !important;
    font-size: 14px !important;
    --bs-dropdown-item-padding-x: 2rem;
    --bs-dropdown-link-color: var(--nav-color) !important;
    --bs-dropdown-bg: transparent;
    --bs-dropdown-link-hover-bg: transparent;
    --bs-dropdown-link-active-bg: transparent;
    --bs-dropdown-border-color: transparent;
    --bs-dropdown-link-hover-color: var(--nav-hover-color); 
}
.dropdown-custom .dropdown-menu .bg-menu {
    margin-top:-5px;
    padding: 10px 0;
    background: var(--nav-hover-customized);
    backdrop-filter: blur(5px);
    border: 1px solid var(--nav-hover-border);
    border-top-right-radius: 15px;
    border-bottom-left-radius: 15px;
}
.dropdown-item:hover,
.dropdown-item.active,
.dropdown-item:focus {
    background: var(--nav-hover-background);
}
.nav-tabs.top-kill {
    border-bottom: 1px solid var(--nav-border);
}

.nav-tabs .nav-item.top-kill {
    width: 50%;
    border: 0px;
}

.nav-tabs .nav-item.top-kill .nav-link {
    width: 100%;
    background-color: var(--nav-background);
    border-color: var(--nav-border);
    color: var(--nav-color);
}

.nav-tabs .nav-item.top-kill .nav-link.active,
.nav-tabs .nav-item.top-kill .nav-link:focus,
.nav-tabs .nav-item.top-kill .nav-link:hover {
    color: var(--nav-hover-color) !important;
    background-color: var(--nav-hover-background);
}

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

main {
    display: flex;
    padding: 20px 0;
}
.fullbar {
    width: 100%;
}
.fullbar .card-body {
    font-size: 1.1rem;
    padding: 30px 30px 20px 30px !important;
    min-height: 245px;
}
.sidebar {
    position: relative;
    width: 377px;
    margin-left: 12px;
}

.mainbar {
    position: relative;
    width: 810px;
}

.img-status {
    width: 18px;
    height: 18px;
    margin-top: -5px;
    margin-right: 2px;
}
b.status-server {
    margin-top: -1px;
}
.text-white {
    color: #bbb !important;
}
.text-offline {
    color: rgb(255, 0, 0) !important;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 20px;
}
.text-online {
    color: rgb(0, 255, 0) !important;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 19px;
}
.text-accretia {
    color: #c9bb00 !important;
    font-weight: 550
}

.text-bellato {
    color: #7effff !important;
    font-weight: 550
}

.text-cora {
    color: #ff4dff !important;
    font-weight: 550
}
.text-green {
    color: rgb(0, 255, 0);
}
.text-red {
    color: rgb(255, 50, 50);
}
.text-soft {
    color: #ffffff88;
}
.text-up {
    text-transform: uppercase;
}

.border-radius-bottom-left {
    border-bottom-left-radius: 15px;
}

.border-radius-top-right {
    border-top-right-radius: 15px;
}

.border-radius-top-left {
    border-top-left-radius: 15px;
}

.border-radius-bottom-right {
    border-bottom-right-radius: 15px;
}

.card {
    border-radius: 0px;
    color: var(--color) !important;
    border: 1px solid var(--nav-border);
    background-color: var(--nav-background);
    /* padding: 0 10px 10px 10px; */
    padding-bottom: 0;
    margin-bottom: 10px !important;
    backdrop-filter: blur(8px);
}

.card .top-right

.card-body {
    font-size: 15px;
    --bs-card-color: #eee;
}

.card-body-trans {
    flex: 1 1 auto;
    padding: 5px 0;
    --bs-card-color: #eee;
    color: var(--bs-card-color);
    background-color: transparent !important;
}

.card-header {
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    color: var(--nav-color);
    font-size: 18px;
    font-weight: 550;
    text-align: left;
    background-color: transparent;
    border-bottom: 1px solid var(--nav-border) !important;
}

.card-header.bg1 {
    text-transform: uppercase;
    background-color: var(--nav-hover-background) !important;
    border: 1px solid var(--nav-hover-border);
    margin: -1px;
    padding: 12px 20px 8px 20px !important;
}

.card-header.bg2 {
    background-color: var(--nav-hover-background) !important;
    border: 1px solid var(--nav-hover-border);
    margin: -1px;
    font-size: 24px !important;
}

.card-header.bg3 {
    vertical-align: middle;
    background-color: var(--nav-hover-background) !important;
    border: 1px solid var(--nav-hover-border);
    margin: -1px;
    font-size: 24px !important; 
    padding: 13px 20px 13px 20px !important;
}

.card-header .badge {
    text-transform: uppercase;
}

.text-post-title {
    position: relative;
    top: 2px;
}

.card-header span {
    color: var(--color);
}

.card-header i {
    color: #E4EE94;
    position: relative;
    top: 1px;
}

.card-header b,
.card-header .show-right,
.card-header input {
    float: right;
    font-weight: normal;
}

.card-header input {
    /* margin-top: 0px !important; */
}

.card-header .form-control {
    padding: 0.175rem 0.75rem;
}

table {
    width: 100%;
}

table.rank tr td {
    line-height: 2.5;
    padding: 5px 0;
    border-bottom: 1px solid var(--nav-border);
}

table.rank tr td .img-cl {
    margin-right: 10px;
}

table.rank tr td .nick {
    line-height: 1.12;
}

table.rank tr td .guild-bottom {
    line-height: 1.12;
    font-size: 15px;
}

table.rank tr:last-child td {
    border-bottom: 0;
}

.rank tr td .guildemblem { line-height: 1.0; }
.rank tr td .guildemblem img{ width:auto; height: 39px !important; display:inline-block; margin: 0 !important;}
.rank tr td .guildemblem .guildmark {width:auto;height:40px!important;left:15px;display:inline-block;position:absolute;mask-repeat:no-repeat; }
.rank tr td .guildname { margin-left: 7px; vertical-align: middle; line-height: 1.0;}
.rank tr td .guildname span { font-size: 15px; line-height: 1.0; }

.sliderBg {
    border-radius: 0px;
    background-color: var(--nav-hover-background);
    border: 1px solid var(--nav-border);
    width: 810px;
    height: 270px;
    margin-bottom: 10px;
    padding: 8.5px;
}

.carousel-inner {
    /* margin: -1px; */
    border-radius: 0px;
}

.carousel-control-next, .carousel-control-prev {
    width: 50px !important;
    margin: -15px !important;
    opacity: .7 !important;
}

.carousel-control-next:focus,.carousel-control-next:hover,.carousel-control-prev:focus,.carousel-control-prev:hover {
    opacity: 1 !important
}

.carousel-control-next-icon, .carousel-control-prev-icon {
    width: 2rem !important;
    height: 2rem !important;
}

.carousel-control-prev-icon {
    background-image: url(../images/arrow-prev.png);
}

.carousel-control-next-icon {
    background-image: url(../images/arrow-next.png);
}

#carouselSlideFade {
    width: 790px;
    height: 250px;  
    /* border: 1px solid var(--nav-border); */
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,1);
    z-index: 2;
    border-radius: 0px;
}

.post-detail {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    padding-top: 10px;
    border-top: 1px solid var(--nav-border-2);
}

.news-block-image {
    display: flex;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--nav-border);
}

.news-block-image img {
    margin-right: 20px;
}

.news-block-image .field {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around
}

.news-block-image .field h4 {
    color: #ddd;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--nav-border-2);
}

.news-block-image .field h4 .btn-share {
    float:right;
}

.news-block-image .field h4 .btn-share a {
    padding: 0 2px;
}

.post-detail .shared .bi-facebook,
.news-block-image .field h4 .bi-facebook {
    color: #4862A3;
}

.post-detail .shared .bi-whatsapp,
.news-block-image .field h4 .bi-whatsapp {
    color: #04BE3C;
}

.news-block-image .field h4 a:hover .bi {
    filter: brightness(1.25);
    transition: 0.3s
}

.news-block-image .field h4 i {
    font-size: 15px;
    vertical-align: middle;
}

.news-block-image .field h4 .badge {
    --bs-badge-padding-x: 0.45em;
    --bs-badge-padding-y: 0.15em;
    --bs-badge-font-weight: 600;
    margin-right: 5px;
    text-transform: uppercase;
}

.news-block-image .field .footer2 {
    width: 850px;
}

.news-block-image .field div span{
    float: right;
    color: #888;
    padding-top: 5px;
    padding-right: 7px;
}

.btn-outline-light {
    --bs-btn-color: var(--color);
    --bs-btn-bg: var(--btn-outline-bg);
    --bs-btn-border-color: var(--btn-outline-border);
    --bs-btn-hover-color: var(--btn-outline-hover-color);
    --bs-btn-hover-bg: var(--btn-outline-hover-bg);
    --bs-btn-hover-border-color: var(--btn-outline-hover-border);
    --bs-btn-active-color: var(--btn-outline-hover-color);
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: var(--color);
}

.btn-download {
    color: var(--color);
    min-width: 400px;
    background-color: purple;
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: 600;
    text-shadow: 0px 0px 5px #000;
}

.btn-download:hover {
    background-color: purple;
    filter: brightness(1.2);
}

.news-block-image div a {
    padding-left: 20px;
    padding-right: 20px;
}

.news-block {
    display: block;
    font-size: 18px;
    vertical-align: middle;
    padding: 10px 0;
    border-bottom: 1px solid var(--nav-border);
    text-decoration: none;
    color: inherit;
}

/* .news-block:last-child {
    border-bottom: 0;
} */

.news-block .date {
    color: #888;
}

.news-block .strip {
    margin-right: 10px;
    margin-left: 10px;
}

.news-block .title {
    font-size: 20px;
    vertical-align: middle;
    margin-left: 7px;
}

.news-block i {
    vertical-align: middle;
    margin-right: 7px;
}

.news-block .badge {
    --bs-badge-padding-y: 0.25em;
    font-size: 15px;
    text-transform: uppercase;
}

.news-block .time {
    float: right;
    color: #888;
    font-size: 16px;
    padding-top: 5px;
}

.news-block .time i {
    vertical-align: top;
}

.news-block:hover {
    background: rgba(255,255,255, 0.05);
    transition: 0.3s
}

.text-bg-discord {
    font-size: 20px;
    color: #fff !important;
    background-color: #5865F2 !important;
}

.text-bg-line {
    font-size: 20px;
    color: #fff !important;
    background-color: #0BC50A !important;
}

.text-bg-facebook {
    font-size: 20px;
    color: #fff !important;
    background-color: #106BFF !important;
}

.text-bg-instagram {
    font-size: 20px;
    color: #fff !important;
    background-color: #C4089C !important;
}

.toTopBlock{background:url(../images/totop-bg.png) center no-repeat;height:65px;margin-bottom:0;display:flex;justify-content:center;align-items:center}
.toTopBlock span{background:url(../images/totop-circle.png) no-repeat;width:50px;height:50px;display:flex;cursor:pointer;transition:0.1s}
.toTopBlock span:hover{box-shadow:inset 0 0 5px 0 #98e0e5;filter:drop-shadow(0 0 5px rgba(152,224,229,.5));width:50px;height:50px;border-radius:50%}

.text-bg-floating {
    font-size: 20px;
    color: var(--color) !important;
    background-color: var(--nav-background) !important;
    border: 1px solid var(--nav-border) !important;  
}

.text-bg-floating:hover {
    color: var(--nav-hover-color) !important;
    background-color: var(--nav-hover-background) !important;
    border: 1px solid var(--nav-hover-border) !important;  
}

footer .copyright {
    display: flex;
    padding: 20px 0;
    margin-bottom: 100px !important;
    color: var(--nav-color);
}

footer .copyright p {
    text-shadow: 2px 2px #000;
}

footer .badge {
    margin-right: 10px;
}

footer p {
    margin-bottom: 5px !important;
}

footer a {
    margin-bottom: 15px !important;
}

footer img {
    width: 100px;
}

footer .small {
    font-size: 14px;
    color: #aaa;
}

footer .logo {
    margin-top: 25px;
    margin-left: 25px;
    vertical-align: middle;
}
.odView {
    display: none;
}
.odView.show {
    display: block;
}
#newsRes {
    font-size: 18px;
    text-align: center;
    padding: 20px 0;
}
div.pagination {
    justify-content: center;
    padding: 20px 0;
    margin: 3px;
    text-transform: uppercase;
    font-size: 14px;
}
div.pagination a {
    padding: 5px 8px;
    margin: 2px;
    border: 1px solid var(--nav-border-2);
    zoom: 100%;
    text-decoration: none; /* no underline */
    color: var(--nav-color);
    
}
div.pagination a:hover, div.pagination a:active {
    background-color: var(--btn-outline-bg);
    color: var(--btn-outline-hover-color);
}
div.pagination span.page_current {
    padding: 5px 8px;
    margin: 2px;
    color: var(--btn-outline-border);
}
  div.pagination span.page_disabled {
    display: none;
    padding: 2px 5px 2px 5px;
    margin: 2px;
    border: 1px solid #444;
    color: #444;
}
div.pagination .page_current {
    background-color: var(--btn-outline-bg);
    padding: 5px 8px;
    margin: 2px;
    border: 1px solid var(--nav-border-2);
    color: var(--btn-outline-hover-color);
}
div.pagination .page_disabled {
    display: none;
}
.tbRules {
    /* font-size: 15.5px; */
    width: 100%;
    border-collapse: collapse;
}
.tbRules tr td {
    padding: 5px 5px;
    vertical-align: middle;
}
.tbRules tr:nth-child(odd) td {
    border-bottom: 3px solid var(--nav-color);
}
.tbRules tr:nth-child(even) td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tbRules tr:nth-child(even) td:nth-child(2) {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.tbRate {
    text-align: left;
    /* font-size: 15.5px; */
    width: 100%;
    border-collapse: collapse;
}
.tbRate tr th {
    font-weight: normal;
    padding: 5px 5px;
    vertical-align: middle;
    border-bottom: 3px solid var(--nav-color);
    text-align: center;
    font-size: 18px;
}
.tbRate tr:last-child td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tbRate tr td {
    padding: 10px 10px;
    vertical-align: middle;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.tbRate tr td img {
    margin-top: -2.5px !important;
}
.tbRate.bordered tr td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tbRate.stripped tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.05);
}
.tbRate.withJudul tr td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tbRate.withJudul tr:first-child td {
    text-align: center;
    border-bottom: 3px solid rgba(255, 255, 255, 0.2);
    font-size: 17px;
}
.tbRate tr td:last-child {
    border-right: 0;
}
.tbBordered {
    text-align: left;
    /* font-size: 15.5px; */
    width: 100%;
    border-collapse: collapse;
}
.tbBordered tr th {
    font-weight: normal;
    padding: 5px 5px;
    vertical-align: middle;
    border-bottom: 3px solid var(--nav-color);
    font-size: 18px;
}
.tbBordered tr td {
    padding: 10px 10px;
    vertical-align: middle;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tbBordered tr td:last-child {
    border-right: 0;
}
.tbBordered.withJudul tr td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tbBordered.withJudul tr:first-child td {
    text-align: center;
    border-bottom: 3px solid rgba(255, 255, 255, 0.2);
    font-size: 17px;
}
.tbStripped {
    /* font-size: 15.5px; */
    width: 100%;
    border-collapse: collapse;
}
.tbStripped tr th {
    font-weight: normal;
    padding: 5px 5px;
    vertical-align: middle;
    border-bottom: 3px solid var(--nav-color);
    font-size: 18px;
}
.tbStripped tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.05);
}
.tbStripped tr td {
    padding: 10px 10px;
    vertical-align: middle;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tbStripped tr:last-child td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tbStripped tr td:last-child {
    border-right: 0;
}
.tbFullBordered {
    width: 100%;
    border-collapse: collapse;
}
.tbFullBordered tr th {
    color: var(--nav-hover-color) !important;
    font-weight: normal;
    padding: 5px 5px;
    vertical-align: middle;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 3px solid var(--nav-hover-color);
    font-size: 18px;
}
.tbFullBordered tr td {
    padding: 10px 10px;
    vertical-align: middle;
    border: 1px solid rgba(255, 255, 255, 0.1);
}
ul.cst1 {
    padding-left: 0 !important;
}
ul.cst1 li {
    padding: 5px 0;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
ul.cst1 li:last-child {
    border-bottom: 0px;
}
ul.cst2 {
    padding-left: 0 !important;
}
ul.cst2 li::before{
    font-family: bootstrap-icons !important;
    content: "\F231";
    font-size: 12px;
    vertical-align: text-bottom;
    margin-right: 5px;
}
ul.cst2 li:last-child {
    border-bottom: 0px;
}
.pbBlock {
    display: flex;
}
  
.pbBlock ul {
    padding-left: 0 !important;
}
  
.pbMapList {
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255,255,255,.1);
    background: none;
}
  
.pbMapItem {
    cursor: pointer;
    background: none !important;
    border: none;
    color: #dfdee3;
    padding: 10px 20px !important;
    width: 100%;
    text-align: right;
    transition: 0.2s ease all;
}
  
.pbMapItem.active {
    cursor: auto;
    background: rgba(255,255,255,.1) !important;
    color: #dfdee3;
}
  
.pbMapContent {
    display: none;
    width: 80%;
    transition: 0.3s ease all;
}
  
.pbMapContent.active {
    display: block;
    transition: 0.3s ease all;
}
  
.pbTableContentList tr {
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
}
  
.pbTableContentList tr td {
    padding: 10px 20px 10px 20px;
    vertical-align: middle;
}
  
.pbTableContentList .monster {
    font-size: 18px;
}

.page-wrapper {
    border: none;
    height: 200px;
    margin: 0;
    padding: 0;
    width: auto;
}

.discord-join-text {
    font-family: "Source Sans Pro";
    color: #000 ;
    font-size: 14px;
    float: right;
    background-color: var(--color);
    transition: 0.2s;
    padding: 3px 14px;
    border: 1px solid rgba(255,255,255, 0.1);
}
.discord-join-text:hover {
    color: var(--color);
    border: 1px solid var(--color);
    background-color: transparent;
}

table.discord-widget {
    margin-top: -4px;
    width: 100%;
}

table.discord-widget tr td {
    font-size: 14px !important;
    color: #fff;
    padding: 5px 0;
    border-bottom: 1px dashed rgba(255,255,255, 0.2);
}

table.discord-widget tr:last-child td {
    border-bottom: 0;
}

table.discord-widget .discord-avatar  {
    width: 35px;
    margin-right: 10px
}

table.discord-widget .discord-online  {
    padding-right: 10px;
    float: right;
    color: green;
}

table.discord-widget .discord-busy  {
    padding-right: 10px;
    float: right;
    color: red;
}

table.discord-widget .discord-idle  {
    padding-right: 10px;
    float: right;
    color: yellow;
}

.discord-footer {
    font-size: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 10px;
    padding-top: 15px;
}

.text-bg-event {
    width: 70px;
    color: var(--color);
    background-color: darkred;
}

.text-bg-news {
    width: 70px;
    color: var(--color);
    background-color: purple;
}
.dropdown-divider {
    border-top: 1px solid var(--nav-hover-border) !important;
}