body {
    /*overflow: hidden;
    overflow-y: scroll; */
}


.up{
    border: 8px solid #fff;
    border-radius: 49px;
    margin: -12% auto 2% auto;
    display: block;
    position: relative;
    width: 300px;
}
.text-content{
    text-align: center;
    margin-top: 8%;
    color: black
}
/* .text-content p{
    font-weight: 500;
    font-size: 1.5rem;
    margin-bottom: 10px
} */
.text-content h5, .text-content h3{
    margin-top: 5px;
    font-weight: bold;
}
h5, h3{
    color:black
}
.img-content{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 7% 3% 3% 3%
}
.img-content img{
    width: 30%;
    margin:2% 
}
.tb-wrapper{
    width: 800px;
    border-radius: 10px;
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.03);
    border: solid 0.5px #c6c9dd;
    background-color: #ffffff;
    margin: auto;
    padding: 2% 3% 2% 3%
}
.tb-wrapper table tr:last-child{
    border-bottom: unset
}
#nav-war{
    text-align: center;
    margin: 7% 0;
}
#nav-war a{
    display: inline-flex;
    margin-right: 1%;
    color: black;
    width: 112px;
    height: 31.2px;
    align-items: center;
    justify-content: center;
    border-radius: 17px;
}
.nv-l-a-active, #nav-war a:hover{
    height: 31.2px;
    display: inline-flex!important;
}
#nav-war a:hover{
    background-color: #d0caca;
}
.nav-active{
    color: white!important;
    background-color: black!important;
}


html::-webkit-scrollbar {
    background: #fff;
    width: 0px;
    height: 15px; 
}
.rule_content::-webkit-scrollbar {
    background: rgba(0, 0, 0, 0);
    width: 0px;
    height: 15px; 
}
.modal-wrapper::-webkit-scrollbar {
    background: #fff;
    width: 0px;
    height: 15px; 
}

.imgup{
    max-width:100%;
    margin-top: 1.95em;
    width:100%;
}
@media only screen and (max-width: 768px) {
}
/* end of navbar related */

.up-left {
    position: absolute;
    left: 30px;
    top: 20px;
}
.logohan{
    margin: -12% auto 5% auto; 
    display: block;
}
a {
    text-decoration: none;
    color: aliceblue;
}

.rule_content table th, .rule_content table  td{
    border: 1px solid #fff!important;
}
.rule_content{
    text-align: left;
    padding: 5%;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, 0.03);
    border: solid 0.5px #c6c9dd;
    margin: auto;
    width: 80%;
}
.rule_content li{
    white-space: unset!important;
    color: #fff!important;
}
img{
    max-width: 100%;
    height: auto;
}
.up-mid {
    margin: 10px auto;
}

.data_unavailable{
    margin: 2em auto;
    font-size: 2em;
}

.menu-list {
    margin: 0 8px;
    cursor: pointer;
    position: relative;
    padding: 12px 0;
}

.active:after {
    width: 100% !important;
    left: 0 !important;
}

.r-active:after {
    width: 100% !important;
    left: 0 !important;
}

.week-item:hover {
    /* background-color: #5b200f; */
}

.week-group {
    width: 600px;
    max-width: 100%;
    margin: auto;
}

.day-group-next-active {
    color: #383535;

}

.intro {
    text-align: center;
    margin: -3% auto
}
.page-reward-wrapper{
    display: flex;
    width: 75%;
    margin:2.5% auto;
}
.rule{
    margin: 5%;
}
.kt-title {
    color: #ed6060;
    font-size: 20px;
}


.kingdom-rank {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 70%;
    margin: 0% auto;
}

#myChart {
    width: 400px !important;
    height: auto !important;
    max-width: 100%;
    margin: 15px auto;
}

.week-item {
    padding: 5px 10px;
    border: 1px solid #c6c9dd;
    cursor: pointer;
    display: inline-block;
    margin: 4px 2px;
    background-color: white;
    border-radius: 5px;
}

.week-item-active {
    padding: 5px 10px;
    border: 1px solid #999695;
    background-color: white;
    cursor: pointer;
}

.schedule {
    text-align: center;
}

.day-group {
    display: flex;
    width: max-content;
    margin: auto;
}

.day-group-next {
    display: table;
    margin: 10px 20px;
    cursor: pointer;
}

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

.table-city td,
th {
    /* padding: 5px 20px; */
}

.table-city th {
    /* background-color: #252525; */
}

#r-clan {
    cursor: pointer;
}

#r-kingdom {
    cursor: pointer;
}

.sub-standing {
    padding: 12px 0;
    color: #ed6060;
    font-weight: bold;
    margin: 30px 40px;
    display: inline-block;
    font-size: 20px;
    position: relative;
}

.sub-standing:after {
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: #ffffff;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
}

.sub-standing:hover:after {
    width: 100%;
    left: 0;
}
 /* flame related */
.spark {
    background-color: #DE4A00;
    font-family: 'Helvetica', sans-serif;
    visibility: hidden;
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 30%;
    box-shadow: 0 0 5px #AB000B;
}
/* end of flame related */

/* glow button related */

/* .img-re-1,.img-re-2 {
	-webkit-filter: none;
	-webkit-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
    transition: all 0.2s linear;
    width:100%;
	
}
.img-re-2:hover {
	-webkit-filter: drop-shadow(0px 0px 75px rgba(177, 40, 40, 0.8));
}
.img-re-1:hover {
	-webkit-filter: drop-shadow(0px 0px 75px rgba(21, 208, 233, 0.8));
}
.reward-img {
    margin: 0 auto 2.5% auto;
    cursor:pointer;
    transition: box-shadow 0.5s;
    border-radius: 50%; 
    width:60%
}
.overlay {
    position: absolute;
    width: inherit;
    height: inherit;
    min-width:inherit;
    background: rgba(0, 0, 0, 0);
    transition: background 0.5s ease;
}
.product-thumb:hover .overlay {
    display: block;
    background: rgba(0, 0, 0, .3);
}
.button-tr {
    position: absolute;
    width: 100%;
    left:0;
    top: 100px;
    text-align: center;
    opacity: 0;
    transition: opacity .35s ease;
}
.prev-b{
    display: none;
    border: 1px solid#393b3e;
    background-color:rgba(11, 11, 13, 0.36);
    color:aliceblue;
    padding: 5px 8px;
    font-size: 13px;
    width: 75px;
    margin: auto;
    font-weight: bold;
    transition: background-color 5s ease,
    opacity 5s;
}
.reward-img:hover .prev-b {
    display: block;
}
.img-button-wrapper{
    width:100%;
    height:100%;
    position:relative
}
.prev-b-wrapper{
    position: absolute;
    top: 40%;
    width: 100%;
} */
.row .col img{
    cursor: pointer;
}
#modal-detail{
    height: 85%;
    max-height: 85%;
    overflow: visible;
    box-shadow: none;
    background: none
}
#modal-detail .modal-content{
    padding: 0;
    font-size: 0;
    background: none!important;
    height: 100%;
    text-align: center;
}
#modal-detail .modal-content img{
    height: 100%;
    width: auto
}
#modal-detail .modal-close{
    position: fixed;
    top: -2rem;
    color: #c1c1c1;
    z-index: 1017;
    font-size: 0;
    right: -2rem;
}
p.gold{
    font-weight: bold;
    color: blue;
    font-size: 1.7rem;
    margin: 3rem 0 0 0;
}
@media only screen and (max-width: 700px) {
    #modal-detail .modal-content img{
        height: auto;
        width: 100%
    }
}
/* end of manual modal related */
@media only screen and (max-width: 820px) {
    .tb-wrapper{
        width:95%;
    }
}
@media only screen and (max-width: 450px) {
    #nav-war a{
        width: unset;
        padding: 0 10px;
        margin: 0;
    }
    .tb-wrapper h5{
        font-weight: bold;
        color: #6a6e6f;        
        font-size: 1.4rem;
    }
    .top-p{
        display: none;
    }
    .up{
        margin: 20% auto 2% auto;
        width: 250px;
    }
    .sub-standing {
        margin: 30px 20px;
    }
	
    .rule_content{
        padding: 4% 5%;
        width: 90%;
    }

    .kingdom-rank {
        width: 100%;
    }

    .tb-clan {
        width: 100%;
    }

    .table-city {
        width: 100%;
        font-size: 13px;
    }
    .table-city td, th{
        padding: 0;
    }

    .tabel{
        max-width: 100%;
        overflow-x: scroll;
    }
    .logohan{
        width: 80%;
    }
    .modal-wrapper{
        top: 1em;
    }
    .modal-wrapper-inner,.page-reward-wrapper{
        display: table;
    }
    .inner-left{
        width: 100%;
    }
    .inner-right{
        width: 100%;
    }
}