.ranking-container {
    margin:25px auto;
    padding:0;
    width:650px;
    height:auto;
    overflow:hidden;
}

.ranking-table {
    margin:0 auto;
    width:100%;
}

.ranking-table th,
.ranking-table td {
    padding:10px 5px;
    font-size:12px;
    text-align:center;
}

.ranking-table th {
    font-weight:600;
    color:#95f770;
    background-color:#0b1521;
    border-right:1px solid #0d1f2d;
}

.ranking-table th:last-child {
    border-right:none;
}

.ranking-table td {
    color:white;
}

.ranking-table td img {
    vertical-align:middle;
}

.ranking-table td img.ranking-status-icon {
    width:22px;
    height:22px;
}

.ranking-table td img.ranking-class-avatars {
    width:24px;
    height:24px;
}

.ranking-table tbody tr:nth-child(even) {
    background-color:#081526;
}

.ranking-table tbody tr:nth-child(odd) {
    background-color:#0a1b30;
}

.ranking-top-characters {
    margin:0 auto 20px auto;
    padding:0;
    width:100%;
    height:auto;
    overflow:hidden;
    float:left;
    clear:both;
    display:block;
}

.ranking-top-character {
    position:relative;
    margin:12.5px 12px 0 auto;
    padding:0;
    width:120px;
    height:150px;
    /*overflow:hidden;*/
    float:left;
    display:inline-block;
    text-align:center;
    background:url('../images/ranking/ranking-top-characters-background.png') top center no-repeat transparent;
    background-size:100%;
}

.ranking-top-character:before {
    content: "";
    position:absolute;
    top:-12.5px;
    left:50%;
    margin:0 auto 0 -25px;
    width:50px;
    height:25px;
    background:url('../images/ranking/ranking-top-characters-star.png') center center no-repeat transparent;
    background-size:100%;
}

.ranking-top-character:last-child {
    margin-right:0;
}

.ranking-top-character img {
    margin:21px auto 0 auto;
    width:80px;
    height:auto;
}

.ranking-top-character h3 {
    margin:15px auto 0 auto;
    width:100%;
    height:31px;
    float:left;
    clear:both;
    display:block;
    line-height:31px;
    font-size:13px;
    font-weight:bold;
    color:#95f770;
    background:url('../images/ranking/ranking-top-characters-title.png') top center no-repeat transparent;
    background-size:100%;
}

.ranking-order-image {
    width:14px;
    height:auto;
}

.ranking-guild-members {
    display:none;
    position:fixed;
	width:50%;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    background:#020910;
    padding:20px;
    border:1px solid #033254;
    border-radius:10px;
    z-index:9999;
    max-height:80vh;
    overflow:auto;
}

.ranking-guild-members h3 {
    color:#0ff;
	float:left;
    margin-bottom:10px;
    font-size:13px;
}

.ranking-guild-members a {
    font-size:13px !important;
    text-transform:none !important;
}

.ranking-guild-members span {
    color:#0ff;
	font-size:13px;
	font-weight:600;
	text-transform:none;
}

.ranking-guild-close {
    color:#ff4d4d;
    cursor:pointer;
    font-size:20px;
    margin-right:10px;
    transition:color 0.3s ease, transform 0.3s ease;
}

.ranking-main-title {
    display:flex !important;
    align-items:center;
    justify-content:space-between;
    width:100%;
}

.ranking-guild-close:hover {
    color:#ff1a1a;
    transform:scale(1.2);
}

.view-guild-members {
    cursor:pointer;
    margin-right:5px;
    color:#0ff;
}

.view-guild-members i {
    color:#0ff;
    margin-right:5px;
    cursor:pointer;
}

.view-guild-members i:hover {
    color:#00bfff;
}

/* START PROGRESSBAR */

.progress {
    position:relative;
    margin:0 auto;
    padding: 4px;
    width:100%;
    overflow:hidden;
    float:left;
    display:block;
    text-align:center;
    background:#0d1826;
    border-radius: 6px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}

.progress-bar {
    height: 8px;
    border-radius: 4px;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
    -webkit-transition: 0.4s linear;
    -moz-transition: 0.4s linear;
    -o-transition: 0.4s linear;
    transition: 0.4s linear;
    -webkit-transition-property: width, background-color;
    -moz-transition-property: width, background-color;
    -o-transition-property: width, background-color;
    transition-property: width, background-color;
    -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}

.progress-text {
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    font-size:10px;
    -webkit-font-smoothing:antialiased;
    color:white;
    /*mix-blend-mode: difference;*/
    /*text-shadow:-1px -1px 0 rgba(0,0,0,.6), 0 -1px 0 rgba(0,0,0,.6), 1px -1px 0 rgba(0,0,0,.6), 1px 0 0 rgba(0,0,0,.6), 1px 1px 0 rgba(0,0,0,.6), 0 1px 0 rgba(0,0,0,.6), -1px 1px 0 rgba(0,0,0,.6), -1px 0 0 rgba(0,0,0,.6);*/
}

.progress-bar-ten {
  background-color: #f63a0f;
}

.progress-bar-thirty {
  background-color: #f27011;
}

.progress-bar-fifty {
  background-color: #f2b01e;
}

.progress-bar-seventy {
  background-color: #f2d31b;
}

.progress-bar-onehundred {
  background-color: #86e01e;
}

/* END PROGRESSBAR */