body {
    overflow-x: hidden;
    font-family: Arial, sans-serif;
    color: #fff;
    display: flex;
    flex-direction: column;
}

body.rank {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-color: #000000;
    width: 100%;
    margin: 0;
    min-height: 100vh;
    height: auto !important;
    display: flex;
    flex-direction: column;
}

/* 径向渐变遮罩层 - 四周深中间浅效果 */
body.rank::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* 兼容老版本浏览器的径向渐变 */
    background: -webkit-gradient(radial, center center, 0, center center, 500, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.7)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 30%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0.7) 100%);
    background: radial-gradient(ellipse at center, rgba(0,0,0,0) 30%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.5) 70%, rgba(0,0,0,0.7) 100%);
    pointer-events: none;
}


		.scroll-indicators {
		    position: fixed;
		    top: 50%; /* 先定位到视口50%位置 */
		    right: 40px; /* 保持右侧位置不变 */
		    display: flex;
		    flex-direction: column;
		    gap: 12px;
		    z-index: 1000;
		    -webkit-transform: translateY(-50%); /* 再上移自身高度的50%实现完美居中 */
		    transform: translateY(-50%);
		}
        
        .progress-conta {
            width: 56px;
            height: 56px;
            position: relative; /* 确保内部元素可以相对定位 */
            cursor: pointer;
            opacity: 0;
            -webkit-transition: opacity 0.5s cubic-bezier(0.33, 1, 0.68, 1);
            transition: opacity 0.5s cubic-bezier(0.33, 1, 0.68, 1);
            filter: drop-shadow(0 2px 6px rgba(0,0,0,0.1));
            position: relative;
        }
        
        /* 主圆圈样式 */
        .progress-circle {
            width: 100%;
            height: 100%;
            position: relative;
        }
        
        .progress-circle circle {
            fill: transparent;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-dasharray: 154;
            stroke-dashoffset: 154;
            -webkit-transition: stroke-dashoffset 0.2s ease-out;
            transition: stroke-dashoffset 0.2s ease-out;
        }
        
        /* 向下箭头圆圈（上方） */
        .down-container circle {
            stroke: #696969;
        }
        
        /* 向上箭头圆圈（下方）- 完全显示 */
        .up-container circle {
            stroke: #696969;
            stroke-dashoffset: 0 !important; /* 强制完全显示 */
        }
        
        /* 箭头通用样式 */
        .arrow {
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            width: 16px;
            height: 16px;
        }
        
        /* 向下箭头（上方） */
        .down-arrow::before, .down-arrow::after {
            content: '';
            position: absolute;
            width: 2px;
            height: 12px;
            background: #696969;
            border-radius: 1px;
            top: 0;
        }
        
        .down-arrow::before {
            left: 50%;
            -webkit-transform: translateX(-50%) rotate(-45deg);
            transform: translateX(-50%) rotate(-45deg);
            transform-origin: top center;
        }
        
        .down-arrow::after {
            right: 50%;
            -webkit-transform: translateX(50%) rotate(45deg);
            transform: translateX(50%) rotate(45deg);
            transform-origin: top center;
        }
        
        /* 向上箭头（下方） */
        .up-arrow::before, .up-arrow::after {
            content: '';
            position: absolute;
            width: 2px;
            height: 12px;
            background: #696969;
            border-radius: 1px;
            bottom: 0;
        }
        
        .up-arrow::before {
            left: 50%;
            -webkit-transform: translateX(-50%) rotate(45deg);
            transform: translateX(-50%) rotate(45deg);
            transform-origin: bottom center;
        }
        
        .up-arrow::after {
            right: 50%;
            -webkit-transform: translateX(50%) rotate(-45deg);
            transform: translateX(50%) rotate(-45deg);
            transform-origin: bottom center;
        }
        
        /* 悬停效果 */
        .progress-conta:hover {
            -webkit-transform: scale(1.05);
            transform: scale(1.05);
        }
        
        .down-container:hover circle {
            stroke: #F8F8FF;
        }
        
        .up-container:hover circle {
            stroke: #F8F8FF;
        }

@keyframes scrollText {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }

    /* 初始位置为左侧起点 */
    100% {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    /* 结束位置为右侧边界外 */
}

.circle {
    width: 25px;
    height: 25px;
    border-style: solid;
    border-width: 1px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius : 50%;
    border-color: #1E90FF;
    -webkit-border-radius: 50%;
}

.circle-text {
    font-family: "黑体",Helvetica,"Arial","Microsoft YaHei","宋体",sans-serif;
    ; width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 15px;
    font-weight: normal;
    color: #1E90FF;
}

#creditos {
    width: 80%;
    display: table;
    text-align: center;
    font-size: 15px;
    box-shadow: 0 1px 0 rgb(255 255 255 / 10%), inset 0 1px 0 #202020;
    background: rgb(46 46 46 / 30%);
    padding: 2px;
    margin: 10px 0 10px 0;
    /*top right bottom left*/
}

#creditos_imagem_esquerda {
    float: left;
    display: inline-block;
    padding-left: 10px;
}

#creditos_imagem_direita {
    float: right;
    display: inline-block;
    padding-right: 10px;
}

#creditos_texto {
    display: inline-block;
    padding-top: 5px;
    padding-bottom: 5px;
}

.circular {
    vertical-align:middle;
    width:25px;
    height:25px;
    border-radius:50%;
    -webkit-box-shadow: 0 0 5px #000000;
}

#footer_profile {
    margin: 3px 0 0 0;
}

.width {
    font-size: 50px;
    display: inline-block;
}

.width a {
    color: #828282;
}

.youtube, .steam {
    display: inline-block;
}

.youtube a:hover {
    color: #31c735;
}

.steam a:hover {
    color: #183538;
}

.rank-badge {
  display: inline-block;
  padding: 3px 8px;
  background: linear-gradient(135deg, #3498db, #9b59b6);
  color: white;
  border-radius: 12px;
  font-size: 0.8em;
}
        
video {
    -webkit-background-size: cover;
    -o-background-size: cover;
    position: absolute;
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    object-fit: cover;
    z-index: -99;
}

button {
    border-radius: 5px;
    -webkit-box-shadow: 0 0 5px #ffffff;
    background-color: #6FD65D;
}

button:hover {
    background-color: red;
}

.btn_green_white_innerfade {
    border-radius: 2px;
    border: none;
    padding: 1px;
    display: inline-block;
    cursor: pointer;
    text-decoration: none !important;
    color: #D2E885 !important;
    background: #a4d007;
    background: -webkit-linear-gradient( top, #a4d007 5%, #536904 95%);
    background: linear-gradient( to bottom, #a4d007 5%, #536904 95%);
}
.btn_green_white_innerfade>span {
    border-radius: 2px;
    display: block;
    background: #799905;
    background: -webkit-linear-gradient( top, #799905 5%, #536904 95%);
    background: linear-gradient( to bottom, #799905 5%, #536904 95%);
}
.btn_green_white_innerfade:not(.btn_disabled):not(:disabled):not(.btn_active):not(.active):hover {
    text-decoration: none !important;
    color: #fff !important;
    background: #b6d908;
    background: -webkit-linear-gradient( top, #b6d908 5%, #80a006 95%);
    background: linear-gradient( to bottom, #b6d908 5%, #80a006 95%);
}
.btn_green_white_innerfade:not(.btn_disabled):not(:disabled):not(.btn_active):not(.active):hover>span {
    background: #a1bf07;
    background: -webkit-linear-gradient( top, #a1bf07 5%, #80a006 95%);
    background: linear-gradient( to bottom, #a1bf07 5%, #80a006 95%);
}

.btn_small_thin>span, input.btn_small_thin {
    padding: 0 5px;
    font-size: 12px;
    line-height: 20px;
}

#all-stats {
    color: #6FD65D;
    font-size: 2.73em;
    margin-right: 50px;
}

#adminlink {
    margin: 0;
    position: fixed;
    width: 25px;
    right: 0;
    top: 0;
    background-image: linear-gradient(45deg, #ffffff00, #ffffff00, #ff000061);
    height: 25px;
}

#adminlink:hover {
    background-image: linear-gradient(45deg, #ffffff00, #ffffff00, #f30606);
}

#player_report {
    margin: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 80px; /* 调整宽度以适应文本 */
    height: 30px; /* 根据需要调整高度 */
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: white; /* 文字颜色 */
    font-size: 10px; /* 调整字体大小 */
    text-decoration: none; /* 移除链接下划线 */
    -webkit-transition: background 0.3s ease-in-out; /* 添加背景色过渡效果 */
    transition: background 0.3s ease-in-out; /* 添加背景色过渡效果 */
    background-image: linear-gradient(1deg, rgba(211, 123, 0, 0), rgba(207, 123, 42, 0.4), rgb(76, 50, 165));
    border-radius: 4px;
}

#player_report .beta {
    color: #ff0000; /* Beta 文字颜色设置为红色，可根据需要调整 */
    font-weight: bold; /* 可选：使文字加粗 */
}

#player_report:hover {
    background-color: rgba(0, 0, 0, 0.0); /* 鼠标悬停时改变背景色 */
}
.content {
    flex: 1 0 auto;
    position: relative;
    z-index: 10;
}

.footer {
    flex-shrink: 0;
}

i {
    color: white;
}

th {
    text-align: left;
}

a {
    color: #6FD65D;
    text-decoration: none;
}

a:hover {
    color: #fff;
    text-align: center;
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;
    text-decoration: none;
}

img.center {
    position: absolute;
    top: 35%;
    left: 43%;
    width: 300px;
    height: 300px;
    margin-top: -50px;
    margin-left: -50px;
}

.box:hover {
    box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);
    -webkit-transform: translate(0, -10px);
    transform: translate(0, -10px);
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
}

::-webkit-scrollbar-thumb {
    background: #6FD65D;
}

@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot');
    src: url('../fonts/icomoon.eot') format('embedded-opentype'), url('../fonts/icomoon.ttf') format('truetype'), url('../fonts/icomoon.woff') format('woff'), url('../fonts/icomoon.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon', serif !important;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 20px;
}

.icon-ak47:before {
    content: "\e90b";
}

.icon-grenade:before {
    content: "\e900";
}

.icon-awp:before {
    content: "\e901";
}

.icon-famas:before {
    content: "\e902";
}

.icon-knife:before {
    content: "\e903";
}

.icon-m4a1:before {
    content: "\e904";
}

.icon-m249:before {
    content: "\e905";
}

.icon-p90:before {
    content: "\e906";
}

.icon-scout:before {
    content: "\e907";
}

.icon-sg552:before {
    content: "\e908";
}

.icon-usp:before {
    content: "\e909";
}

.icon-usp-knife:before {
    content: "\e90a";
}

@font-face {
    font-family: batman;
    src: url(../fonts/Batman.ttf);
}

@font-face {
    font-family: Arial, sans-serif; font-weight: bold;
    src: url(../fonts/Play-Bold.ttf);
}

@font-face {
    font-family: Arial, sans-serif;
    src: url(../fonts/Play-Regular.ttf);
}

big {
    color: #6FD65D;
    font-weight: 400;
}

.big {
    color: #6FD65D;
    font-weight: 400;
}

med {
    font-size: 13px;
    font-family: Arial, sans-serif;
    color: #6FD65D;
    font-weight: bold;
}

med:hover {
    color: #fff;
    text-align: center;
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;
}

.med {
    font-size: 13px;
    font-family: Arial, sans-serif;
    font-weight: 400;
}

small {
    font-size: 13px;
    font-family: Arial, sans-serif; font-weight: bold;
    color: white;
    font-weight: 600;
}

smalls {
    color: #828282;
    font-size: 13px;
    font-family: Arial, sans-serif; font-weight: bold;
    font-weight: 600;
    text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
}

smallsb {
    color: #FFFFFF;
    font-size: 12px;
    font-family: Arial, sans-serif;
    font-weight: 400;
}

smallsa {
    font-size: small;
    font-family: Arial, sans-serif;
    font-weight: 400;
}

.small {
    color: #afafaf;
    font-size: 12px;
    font-family: Arial, sans-serif; font-weight: bold;
    font-weight: bold;
}

.x-small {
    font-size: x-small;
    color: white;
}

.serverinfo {
    font-size: 13px;
    font-family: Arial, sans-serif; font-weight: bold;
    color: white;
    font-weight: 600;
}

    .server-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 20px;       /* 上下间距 */
        column-gap: 20px;    /* 左右间距 */
    }
	.server {
	    display: flex;
	    padding: 10 8px;
	    margin-bottom: -7px;
	    align-items: baseline;
	    justify-content: space-between;
	}
    .server-name {
        color:#6FD65D;
        font-size: 14px;
        margin-bottom: 5px;
        font-weight: bold;
    }
    .server-ip {
        font-size: 12px;
        margin-bottom: 5px;
    }
    .server-image {
        width: 100%;
        height: 190px; /* 减小图片高度 */
        object-fit: cover;
        margin-bottom: -30px;
        border: none; /* 移除默认边框 */
	   border-radius: 0 0 10px 10px; /* 左右下方圆角 */
	   overflow: hidden; /* 确保内容不会溢出圆角 */
    }
	.server-map {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    padding: 5px;
	    background-color: rgb(0 0 0 / 20%); /* 半透明背景 */

	    border: none; /* 移除默认边框 */
	    border-radius: 0 0 10px 10px; /* 左右下方圆角 */
	    overflow: hidden; /* 确保内容不会溢出圆角 */
	}
    .map-name {
        font-size: 12px;
    }
    .server-players {
        font-size: 12px;
    }
.server-center {

}
/* 定义呼吸灯动画 */
@keyframes breathing {
    0% {
        box-shadow: 0 0 10px rgba(0, 255, 204, 0.5); /* 初始状态：半透明 */
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 255, 204, 1); /* 中间状态：完全不透明，亮度最高 */
    }
    100% {
        box-shadow: 0 0 10px rgba(0, 255, 204, 0.5); /* 回到初始状态 */
    }
}

/* 应用呼吸灯效果 */
.server-center:hover {
    border: 0px solid #6FD65D; /* 边框颜色（可选） */
    animation: breathing 1.5s infinite ease-in-out; /* 呼吸灯动画 */
}
    .copy-icon {
        cursor: pointer; /* 鼠标悬停时显示为手型 */
        margin-right: 5px; /* 图标与文字之间的间距 */
    }
    .copy-icon:hover {
        color: #6FD65D; /* 鼠标悬停时的颜色 */
    }
	@keyframes fade {
	    0% {
	        opacity: 1;
	    }
	    50% {
	        opacity: 0.3;
	    }
	    100% {
	        opacity: 1;
	    }
	}
	
	/* 应用动画到 .reconnect-icon 类 */
	.error-icon {
	    color: red; /* 设置为红色 */
	    opacity: 0.8;
	    font-size: 16px;
	    margin-right: 5px;
	    animation: fade 2s infinite; /* 使用无限循环的旋转动画 */
	}
		/* 应用动画到 .reconnect-icon 类 */
	.run-icon {
	    color: #6FD65D; /* 设置为红色 */
	    opacity: 0.8;
	    font-size: 16px;
	    margin-right: 5px;
	}

.table_thead_tr {
    font-size: 14px;
    font-family: Arial, sans-serif; font-weight: bold;
    font-weight: 600;
}

.table_tbody_tr {
    font-size: 13px;
    font-family: Arial, sans-serif; font-weight: bold;
    color: white;
    font-weight: 600;
    height: 35px;
}

.table-fixed {
    table-layout: fixed;
}

.block-center {
    margin-right: auto;
    margin-left: auto;
}

/* 表格容器样式 */
.table-container {
    margin: 0 auto;
    width: 90%;
    max-width: 1200px;
    padding: 20px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* 确保DataTables包装器居中对齐 */
.table-container .dataTables_wrapper {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* 确保表格居中对齐 */
.table-container .dataTables_wrapper .dataTables_scroll {
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* 确保表格内容居中对齐 */
.table-container .dataTables_wrapper .dataTables_scrollBody {
    margin: 0 auto;
    text-align: center;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* 确保表格左对齐 */
.table-container .dataTables_wrapper table {
    text-align: left;
    margin: 0 auto;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* 确保表格包装器的左右边距相等 */
.dataTables_wrapper {
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* 确保表格的左右边距相等 */
.dataTables_wrapper .dataTables_scrollHead,
.dataTables_wrapper .dataTables_scrollBody {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* 确保表格的左右边距相等 */
.dataTables_wrapper table {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* 确保表格的列宽总和为100% */
.dataTables_wrapper table thead th,
.dataTables_wrapper table tbody td {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}


.table-collapsed {
    border-collapse: collapse;
}

.table-shadow {
    background-color: #211f1e;
    -webkit-box-shadow: 0 0 2em 1em #211f1e, inset 0 0 1em 1em #211f1e;
    box-shadow: -2px 1px 2em 1em #1f1d1d, inset 0 0 1em 1em #211f1e;
}

.table-shadows {
    background-color: rgba(255, 255, 255, 0.1);
    padding: 8px;
    border-radius: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

/* 服务器卡片悬停效果 */
.server-box {
    transition: all 0.3s ease;
    position: relative;
    /* 确保每个卡片都有自己的堆叠上下文 */
    z-index: 1;
}

.server-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    background-color: rgba(80, 80, 85, 0.8);
}

/* 查看玩家列表按钮悬停效果 */
.show-players-btn {
    transition: all 0.3s ease;
}

.show-players-btn:hover {
    background-color: rgba(111, 214, 93, 0.5) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

/* 玩家列表弹窗样式 */
.player-list-popup {
    position: fixed;
    /* 初始隐藏位置 */
    left: -9999px;
    top: -9999px;
    width: 350px;
    background-color: rgba(70,70,75,0.6);
    border: none; /* 取消边框 */
    border-radius: 10px;
    padding: 10px;
    /* 增加z-index值，确保弹窗在所有内容上方 */
    z-index: 99999;
    /* 初始状态为隐藏，但通过JavaScript控制显示 */
    display: none;
    opacity: 1; /* 移除透明度过渡，直接显示/隐藏 */
    /* 添加最大高度和滚动条，防止玩家过多时弹窗过长 */
    max-height: 350px;
    overflow-y: auto;
    /* 确保弹窗不会被其他元素裁剪 */
    overflow: visible;
    clip-path: none;
    /* 确保弹窗始终可见 */
    pointer-events: auto;
    -webkit-transform: none;
    transform: none;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    /* 添加毛玻璃效果，与其他表格保持一致 */
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    /* 添加阴影效果，替代边框 */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* 弹窗标题样式 */
.player-list-popup h5 {
    margin: 0;
    color: #6FD65D;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

/* 关闭按钮样式 */
.close-popup {
    background: none;
    border: none;
    color: #6FD65D;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: all 0.3s ease;
}

.close-popup:hover {
    color: #fff;
    transform: rotate(90deg);
}

/* 弹窗头部容器 */
.player-list-popup .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 5px;
    border: none; /* 取消所有边框 */
}

/* 表格样式优化 */
.player-list-popup table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    border: none;
}

/* 服务器昵称样式（h5元素） */
.player-list-popup h5 {
    color: white;
}

/* 表头样式 */
.player-list-popup th {
    padding: 5px;
    text-align: left;
    color: #aaa; /* 表头文本灰色 */
    font-weight: bold;
    border: none; /* 取消边框 */
    background-color: transparent; /* 透明背景 */
}

/* 表格内容样式 */
.player-list-popup td {
    padding: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none; /* 取消边框 */
}

/* 玩家昵称颜色 - 绿色 */
.player-list-popup td:nth-child(1) {
    color: #6FD65D;
}

/* 分数和在线时间颜色 - 白色 */
.player-list-popup td:nth-child(2),
.player-list-popup td:nth-child(3) {
    color: white;
}

/* 移除所有表格边框 */
.player-list-popup tr {
    border: none;
}

.player-list-popup thead,
.player-list-popup tbody {
    border: none;
}

/* 表格列宽优化 */
.player-list-popup th:nth-child(1),
.player-list-popup td:nth-child(1) {
    width: 60%;
    text-align: left;
}

.player-list-popup th:nth-child(2),
.player-list-popup td:nth-child(2) {
    width: 20%;
    text-align: center;
}

.player-list-popup th:nth-child(3),
.player-list-popup td:nth-child(3) {
    width: 20%;
    text-align: right;
    color: #aaa;
}

/* 优化滚动条样式 */
.player-list-popup::-webkit-scrollbar {
    width: 6px;
}

.player-list-popup::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.player-list-popup::-webkit-scrollbar-thumb {
    background: #6FD65D;
    border-radius: 3px;
}

.player-list-popup::-webkit-scrollbar-thumb:hover {
    background: #5CA04D;
}

/* 优化玩家项样式 */
.player-item {
    padding: 5px 10px;
    border-bottom: 1px solid rgba(111, 214, 93, 0.2);
    color: #fff;
    font-size: 12px;
    text-align: center;
    /* 添加文字溢出处理，防止玩家名称过长 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 居中显示弹窗，移除箭头 */
.player-list-popup::before {
    display: none;
}

/* 弹窗在卡片上方时，箭头位置调整 */
.player-list-popup.above::before {
    display: none;
}

/* 已在上方定义了h5样式，此处移除重复定义 */

.player-item {
    padding: 5px 10px;
    border-bottom: 1px solid rgba(111, 214, 93, 0.2);
    color: #fff;
    font-size: 12px;
    text-align: center;
    /* 添加文字溢出处理，防止玩家名称过长 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player-item:last-child {
    border-bottom: none;
}

/* 弹窗显示/隐藏由JavaScript控制，不再使用CSS hover规则 */

.main-content-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    background-color: transparent;
    padding: 20px;
    border-radius: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    overflow: hidden;
    text-align: left;
    position: relative;
    z-index: 10;
}

/* 左右布局容器 */
.left-right-container {
    width: 100%;
    margin-bottom: 20px;
    margin-top: -5px;
    overflow: hidden;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    position: relative;
}

/* 添加分栏线 */
.left-section:after {
    content: "";
    position: absolute;
    right: -2%;
    top: 28px;
    bottom: 28px;
    width: 0;
    background-color: transparent;
    z-index: 1;
}

/* 清除浮动 */
.left-right-container:after {
    content: "";
    display: table;
    clear: both;
    height: 0;
    visibility: hidden;
}

/* 左侧容器 */
.left-section {
    width: 20%;
    min-width: 180px;
    margin-right: 0;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -ms-flex: 0 0 auto;
    box-flex: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* 左侧容器中的表格 */
.left-section .block-center {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    min-width: 100%;
    display: table;
}

/* 为左侧表格添加专门的样式，保持背景色可见 */
.left-section .table-shadows {
    padding: 8px; /* 统一内边距，与右侧表格对齐 */
    margin-right: 0; /* 确保表格与容器右边对齐 */
}

/* 调整左侧表格的宽度，确保内容充满容器 */
.left-section table {
    width: 100%; /* 确保表格充满容器 */
}

/* 左侧容器中的表格单元格 */
.left-section .block-center td,
.left-section .block-center th {
    width: 50%;
    text-align: left;
    padding: 5px;
}

/* 左侧容器中的表格标题行 */
.left-section .block-center tr td[colspan="2"] {
    text-align: center;
}

/* 右侧容器 */
.right-section {
    width: 80%;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1 1 auto;
    box-flex: 1;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    margin-left: 0;
}

/* 右侧容器中的表格 */
.right-section .block-center {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    border-collapse: collapse;
}

/* 右侧表格的单元格样式 */
.right-section .table-data-txt td,
.right-section .table-data-txt th {
    padding: 8px 10px;
    text-align: left;
}

/* 确保右侧表格占满容器 */
.right-section table {
    width: 100% !important;
}



/* 响应式调整 */
@media screen and (max-width: 500px) {
    .left-section,
    .right-section {
        width: 100%;
        float: none;
        margin-right: 0;
        margin-bottom: 20px;
    }
    .left-section:after {
        display: none;
    }
}

/* 调整记录类型按钮容器 */
.main-content-container center:first-child {
    text-align: center;
    margin: 0 auto;
    width: 100%;
    max-width: 68em; /* 与记录表格宽度匹配 */
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* 侧边栏表格样式 */
.sidebar-profile {
    width: 100%;
    max-width: 300px;
    min-width: 100px;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.1);
    padding: 15px;
    border-radius: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    table-layout: fixed;
}

/* 侧边栏头像样式 */
.sidebar-avatar {
    text-align: center;
    padding: 0;
    margin-bottom: 15px;
}

.sidebar-avatar img {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

/* 侧边栏表格行样式 */
.sidebar-profile tr {
    margin-bottom: 8px;
}

.sidebar-profile td {
    padding: 6px 8px;
    vertical-align: top;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.sidebar-profile tr:last-child td {
    border-bottom: none;
}

/* 侧边栏表格标题样式 */
.sidebar-profile td:first-child {
    font-weight: bold;
    color: #6FD65D;
    text-align: right;
    width: 40%;
}

/* 侧边栏表格内容样式 */
.sidebar-profile td:last-child {
    color: #afafaf;
    text-align: left;
    width: 60%;
    word-wrap: break-word;
}

/* 左右布局容器 */
.left-right-container {
    width: 100%;
    margin-bottom: 20px;
    overflow: hidden;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    position: relative;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    /* 确保两个容器顶部对齐 */
    vertical-align: top;
}

/* 左侧容器 */
.left-section {
    width: 20%;
    margin-right: 2%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    position: relative;
    /* 为旧浏览器使用float作为回退 */
    float: left;
    /* 确保容器顶部对齐 */
    vertical-align: top;
    padding-top: 0;
}

/* 右侧容器 */
.right-section {
    width: 78%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /* 为旧浏览器使用float作为回退 */
    float: left;
    /* 确保容器顶部对齐 */
    vertical-align: top;
    padding-top: 0;
}

/* 添加分栏线 */
.left-section:after {
    content: "";
    position: absolute;
    right: 0;
    top: 28px;
    bottom: 28px;
    width: 0;
    background-color: transparent;
    z-index: 1;
}

/* 清除浮动 */
.left-right-container:after {
    content: "";
    display: table;
    clear: both;
    height: 0;
    visibility: hidden;
}

/* 重置左右容器中的block-center类，确保表格左对齐 */
.left-section .block-center,
.right-section .block-center {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    display: block !important;
    float: left !important;
}

/* 左侧玩家信息表格专门样式 */
.left-section .block-center table {
    text-align: center !important;
}

/* 左侧玩家信息表格单元格样式 */
.left-section .block-center table td {
    text-align: left !important;
    padding: 4px 8px !important;
}

/* 左侧玩家信息表格合并单元格样式 */
.left-section .block-center table td[colspan="2"] {
    text-align: center !important;
}

/* 为左侧表格添加专门的样式，保持背景色可见 */
.left-section .table-shadows {
    padding: 8px;
    margin-right: 0;
    margin-left: 0;
    float: left;
    display: block;
}

/* 调整左侧表格的宽度，确保内容充满容器 */
.left-section table {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    /* 确保表格左对齐 */
    float: left;
    display: block;
}

/* 记录分类按钮容器样式 */
.record-category-buttons {
    width: 100%;
    margin-bottom: -10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* 调整记录类型切换标签的样式 */
.right-section .rec_links {
    padding: 10px 10px 10px 0;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
}

/* 右侧表格样式 */
.right-section table {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-collapse: collapse;
    /* 确保表格左对齐 */
    float: left;
    display: block;
}

/* 确保两个表格的table-shadows样式完全相同 */
.left-section .table-shadows,
.right-section .table-shadows {
    background-color: rgba(255, 255, 255, 0.1) !important;
    padding: 8px !important;
    border-radius: 10px !important;
    -webkit-backdrop-filter: blur(10px) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    /* 确保表格左对齐 */
    float: left !important;
    display: block !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}


.table-data-txt {
    font-size: 13px;
    font-family: Arial, sans-serif; font-weight: bold;
    color: white;
    font-weight: 600;
}

.rank1 {
    color: #eac117;
    display: inline-block;
    font: normal normal normal 20px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.rank2 {
    color: #c0c0c0;
    display: inline-block;
    font: normal normal normal 20px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.rank3 {
    color: #cd7f32;
    display: inline-block;
    font: normal normal normal 20px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.hp-godmode {
    color: green;
}

.hp-yellow {
    color: yellow;
}

.hp-red {
    color: red;
}

@keyframes fadeEffect {
    /*index last*/
    0% {
        opacity: 0;
    }

    5% {
        opacity: 1;
    }

    /* 在1/4的时间 (2s) 内淡入 */
    90% {
        opacity: 1;
    }

    /* 保持不变直到3/4的时间 (6s), 这样消息将在2s ~ 6s时完全可见 */
    100% {
        opacity: 0;
    }

    /* 在最后1/4的时间 (2s) 内淡出 */
}

#display {
    animation-name: fadeEffect;
    animation-duration: 8s;
    animation-iteration-count: infinite;
    text-align: left;
}

.background-images {
    /*index background*/
    transition: background-image 2.5s ease-in-out;
    box-shadow: 0 0 380px 180px #000000 inset;
}

#background-name {
    font-size: 25px;
    font-family: Arial, sans-serif; font-weight: bold;
    color: #6FD65D;
    font-weight: 400;
    color: #fff;
    text-align: center;
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;
    margin-top: 30px;
}


#background-tip {
    font-size: 20px;
    font-family: Arial, sans-serif; font-weight: bold;
    color: #6FD65D;
    font-weight: 400;
    color: #fff;
    -webkit-animation: glow 1s ease-in-out infinite alternate;
    animation: glow 1s ease-in-out infinite alternate;
    margin-top: 15px;
}

.connect-btn {
    display: inline-block; /* 改为 inline-block 更适合按钮 */
    width: auto; /* 自适应宽度 */
    padding: 1px 5px; /* 增加左右内边距，让按钮更宽一些 */
    background: linear-gradient(to right, #bb799f, rgb(51 155 114));
    color: white;
    border-radius: 5px;
    font-weight: 600;
    transition: background 1.3s ease, transform 1.2s ease; /* 添加平滑过渡效果 */
}

.connect-btn:hover {
    background: linear-gradient(to right, #000000, #4CAF50); /* 鼠标悬停时反向渐变 */
    transform: scale(1.05); /* 按钮稍微放大 */
}
/*国旗*/
.fi {
    vertical-align: middle;
}

/*points积分*/
.dc {
    float: left;
    margin-left: -20px;
}

.sc {
    width: 50px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border-radius: 50%;
    border: 2px solid #6FD65D;
    background-color: transparent;
    display: inline-block;
}

/*steam_name颜色*/
.sn {
    color: #f5ffea;
}

.play {
    color: #50ff25 !important;
}

.play:hover {
    color: white !important; /* 悬停时的颜色 */
}

.play-button {
color: #6FD65D;
    display: inline-block; /* 确保设置宽度和高度有效 */
    width: 60px; /* 设置按钮宽度 */
    height: 48px; /* 设置按钮高度 */
    line-height: 60px; /* 垂直居中图标 */
    text-align: center; /* 水平居中图标 */
    border-radius: 10px; /* 轻微圆角，根据喜好调整 */
	background-color: transparent;
    /* 如果需要可以设置背景颜色 */
    box-shadow: 0 0 10px rgb(255 255 255 / 80%);
    /* 默认发光效果，更贴近按钮 */
    transition: all 0.3s ease;
}

.play-button:hover {
    color: white; /* 悬停时改变颜色 */
    box-shadow: 0 0 15px rgba(111, 214, 93, 0.9), 0 0 0 3px rgba(111, 214, 93, 0.7); /* 悬停时增强发光效果 */
    transform: scale(1.05); /* 悬停时轻微放大 */
}

/*存点*/
.cp {
    float: left;
}

/*读点*/
.gc {
    text-align: center;
}

.rec-bars {
    background: -webkit-linear-gradient(left, rgba(255,107,107,1) 0%, rgba(251,255,0,1) 53%, rgba(174,255,82,1) 89%, rgba(151,255,107,1) 100%);
    width: 100%;
    height: 6px; /* 变小进度条高度 */
    -webkit-animation: 1.5s slide;
    animation: 1.5s slide;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    position: relative;
    margin-top: 5px;
}

.unc-bars {
    background: -webkit-linear-gradient(left, rgba(0,132,255,1) 0%, rgba(67,67,67,1) 100%);
    width: 100%;
    height: 6px; /* 变小进度条高度 */
    -webkit-animation: 1.5s slide;
    animation: 1.5s slide;
    -webkit-transform-origin: left center;
    transform-origin: left center;
    position: relative;
    margin-top: 5px;
}

/* WR时间显示样式，与时间列样式保持一致 */
.wr-time {
    font-size: inherit; /* 使用继承的字体大小 */
    color: inherit; /* 使用继承的字体颜色，与时间列保持一致 */
    margin-bottom: 2px;
    display: block;
}

/* 进度条样式，鼠标悬停显示差异值 */
.rec-bars,
.unc-bars {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* 差异值显示样式 */
.rec-bars::after,
.unc-bars::after {
    content: attr(data-diff);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

/* 鼠标悬停时显示差异值 */
.rec-bars:hover::after,
.unc-bars:hover::after {
    opacity: 1;
}

.tooltip .rec {
    visibility: hidden;
    width: 220px;
    background-color: #333;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -150px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 13px;
    font-family: Arial, sans-serif; font-weight: bold;
    color: #6FD65D;
    font-weight: 400;
}

.tooltip .rec::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.tooltip:hover .rec {
    visibility: visible;
    opacity: 1;
}

.centered {
    text-align: center;
}

.w10 {
    width: 10em;
}

@media (max-width: 10em) {
    .w10 {
        width: 98%;
    }
}

.w20 {
    width: 20em;
}

@media (max-width: 20em) {
    .w20 {
        width: 98%;
    }
}

.w30 {
    width: 30em;
}

@media (max-width: 30em) {
    .w30 {
        width: 98%;
    }
}

.w40 {
    width: 40em;
}

.w50 {
    width: 50em;
}


@media (max-width: 50em) {
    .w40 {
        width: 98%;
    }
}

@media (max-width: 40em) {
    .w40 {
        width: 98%;
    }
}

.w48 {
    width: 48em;
}

@media (max-width: 48em) {
    .w48 {
        width: 98%;
    }
}

.w58 {
    width: 58em;
}

@media (max-width: 58em) {
    .w58 {
        width: 98%;
    }
}

.w65 {
    width: 65em;
}

@media (max-width: 65em) {
    .w65 {
        width: 98%;
    }
}

.w68 {
    width: 68em;
}

@media (max-width: 68em) {
    .w68 {
        width: 98%;
    }
}

.w80 {
    width: 80em;
}

@media (max-width: 80em) {
    .w80 {
        width: 98%;
    }
}

.thumb span {
    position: relative;
    visibility: hidden;
}

.thumb:hover, .thumb:hover span {
    visibility: visible;
}

.container {
    position: relative;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: #202020;
}

.container:hover .overlay {
    opacity: 1;
}

.text {
    color: white;
    font-size: small;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.visible-title {
    visibility: visible;
    animation: fadeIn ease 3s;
    -webkit-animation: fadeIn ease 3s;
}

div p {
    visibility: hidden;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.row:before, .row:after {
    display: table;
    content: " ";
}

.row:after {
    clear: both;
}

.row {
    margin-right: -5px;
    margin-left: -5px;
}

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {float: left;}
.col-xs-12 {width: 100%;}
.col-xs-11 {width: 91.66666667%;}
.col-xs-10 {width: 83.33333333%;}
.col-xs-9 {width: 75%;}
.col-xs-8 {width: 66.66666667%;}
.col-xs-7 {width: 58.33333333%;}
.col-xs-6 {width: 50%;}
.col-xs-5 {width: 41.66666667%;}
.col-xs-4 {width: 33.33333333%;}
.col-xs-3 {width: 25%;}
.col-xs-2 {width: 16.66666667%;}
.col-xs-1 {width: 8.33333333%;}
.col-xs-pull-12 {right: 100%;}
.col-xs-pull-11 {right: 91.66666667%;}
.col-xs-pull-10 {right: 83.33333333%;}
.col-xs-pull-9 {right: 75%;}
.col-xs-pull-8 {right: 66.66666667%;}
.col-xs-pull-7 {right: 58.33333333%;}
.col-xs-pull-6 {right: 50%;}
.col-xs-pull-5 {right: 41.66666667%;}
.col-xs-pull-4 {right: 33.33333333%;}
.col-xs-pull-3 {right: 25%;}
.col-xs-pull-2 {right: 16.66666667%;}
.col-xs-pull-1 {right: 8.33333333%;}
.col-xs-pull-0 {right: auto;}
.col-xs-push-12 {left: 100%;}
.col-xs-push-11 {left: 91.66666667%;}
.col-xs-push-10 {left: 83.33333333%;}
.col-xs-push-9 {left: 75%;}
.col-xs-push-8 {left: 66.66666667%;}
.col-xs-push-7 {left: 58.33333333%;}
.col-xs-push-6 {left: 50%;}
.col-xs-push-5 {left: 41.66666667%;}
.col-xs-push-4 {left: 33.33333333%;}
.col-xs-push-3 {left: 25%;}
.col-xs-push-2 {left: 16.66666667%;}
.col-xs-push-1 {left: 8.33333333%;}
.col-xs-push-0 {left: auto;}
.col-xs-offset-12 {margin-left: 100%;}
.col-xs-offset-11 {margin-left: 91.66666667%;}
.col-xs-offset-10 {margin-left: 83.33333333%;}
.col-xs-offset-9 {margin-left: 75%;}
.col-xs-offset-8 {margin-left: 66.66666667%;}
.col-xs-offset-7 {margin-left: 58.33333333%;}
.col-xs-offset-6 {margin-left: 50%;}
.col-xs-offset-5 {margin-left: 41.66666667%;}
.col-xs-offset-4 {margin-left: 33.33333333%;}
.col-xs-offset-3 {margin-left: 25%;}
.col-xs-offset-2 {margin-left: 16.66666667%;}
.col-xs-offset-1 {margin-left: 8.33333333%;}
.col-xs-offset-0 {margin-left: 0;
}
@media (min-width: 768px) {
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {float: left;}
    .col-sm-12 {width: 100%;}
    .col-sm-11 {width: 91.66666667%;}
    .col-sm-10 {width: 83.33333333%;}
    .col-sm-9 {width: 75%;}
    .col-sm-8 { width: 66.66666667%;}
    .col-sm-7 {width: 58.33333333%;}
    .col-sm-6 {width: 50%;}
    .col-sm-5 {width: 41.66666667%;}
    .col-sm-4 {width: 33.33333333%;}
    .col-sm-3 {width: 25%;}
    .col-sm-2 {width: 16.66666667%;}
    .col-sm-1 {width: 8.33333333%;}
    .col-sm-pull-12 {right: 100%;}
    .col-sm-pull-11 {right: 91.66666667%;}
    .col-sm-pull-10 {right: 83.33333333%;}
    .col-sm-pull-9 {right: 75%;}
    .col-sm-pull-8 {right: 66.66666667%;}
    .col-sm-pull-7 {right: 58.33333333%;}
    .col-sm-pull-6 {right: 50%;}
    .col-sm-pull-5 {right: 41.66666667%;}
    .col-sm-pull-4 {right: 33.33333333%;}
    .col-sm-pull-3 {right: 25%;}
    .col-sm-pull-2 {right: 16.66666667%;}
    .col-sm-pull-1 {right: 8.33333333%;}
    .col-sm-pull-0 {right: auto;}
    .col-sm-push-12 {left: 100%;}
    .col-sm-push-11 {left: 91.66666667%;}
    .col-sm-push-10 {left: 83.33333333%;}
    .col-sm-push-9 {left: 75%;}
    .col-sm-push-8 {left: 66.66666667%;}
    .col-sm-push-7 {left: 58.33333333%;}
    .col-sm-push-6 {left: 50%;}
    .col-sm-push-5 {left: 41.66666667%;}
    .col-sm-push-4 {left: 33.33333333%;}
    .col-sm-push-3 {left: 25%;}
    .col-sm-push-2 {left: 16.66666667%;}
    .col-sm-push-1 {left: 8.33333333%;}
    .col-sm-push-0 {left: auto;}
    .col-sm-offset-12 {margin-left: 100%;}
    .col-sm-offset-11 {margin-left: 91.66666667%;}
    .col-sm-offset-10 {margin-left: 83.33333333%;}
    .col-sm-offset-9 {margin-left: 75%;}
    .col-sm-offset-8 {margin-left: 66.66666667%;}
    .col-sm-offset-7 {margin-left: 58.33333333%;}
    .col-sm-offset-6 {margin-left: 50%;}
    .col-sm-offset-5 {margin-left: 41.66666667%;}
    .col-sm-offset-4 {margin-left: 33.33333333%;}
    .col-sm-offset-3 {margin-left: 25%;}
    .col-sm-offset-2 {margin-left: 16.66666667%;}
    .col-sm-offset-1 {margin-left: 8.33333333%;}
    .col-sm-offset-0 {margin-left: 0;}
}
@media (min-width: 992px) {
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
        float: left;}
    .col-md-12 {width: 100%;}
    .col-md-11 {width: 91.66666667%;}
    .col-md-10 {width: 83.33333333%;}
    .col-md-9 {width: 75%;}
    .col-md-8 {width: 66.66666667%;}
    .col-md-7 {width: 58.33333333%;}
    .col-md-6 {width: 50%;}
    .col-md-5 {width: 41.66666667%;}
    .col-md-4 {width: 33.33333333%;}
    .col-md-3 {width: 25%;}
    .col-md-2 {width: 16.66666667%;}
    .col-md-1 {width: 8.33333333%;}
    .col-md-pull-12 {right: 100%;}
    .col-md-pull-11 {right: 91.66666667%;}
    .col-md-pull-10 {right: 83.33333333%;}
    .col-md-pull-9 {right: 75%;}
    .col-md-pull-8 {right: 66.66666667%;}
    .col-md-pull-7 {right: 58.33333333%;}
    .col-md-pull-6 {right: 50%;}
    .col-md-pull-5 {right: 41.66666667%;}
    .col-md-pull-4 {right: 33.33333333%;}
    .col-md-pull-3 {right: 25%;}
    .col-md-pull-2 {right: 16.66666667%;}
    .col-md-pull-1 {right: 8.33333333%;}
    .col-md-pull-0 {right: auto;}
    .col-md-push-12 {left: 100%;}
    .col-md-push-11 {left: 91.66666667%;}
    .col-md-push-10 {left: 83.33333333%;}
    .col-md-push-9 {left: 75%;}
    .col-md-push-8 {left: 66.66666667%;}
    .col-md-push-7 {left: 58.33333333%;}
    .col-md-push-6 {left: 50%;}
    .col-md-push-5 {left: 41.66666667%;}
    .col-md-push-4 {left: 33.33333333%;}
    .col-md-push-3 {left: 25%;}
    .col-md-push-2 {left: 16.66666667%;}
    .col-md-push-1 {left: 8.33333333%;}
    .col-md-push-0 {left: auto;}
    .col-md-offset-12 {margin-left: 100%;}
    .col-md-offset-11 {margin-left: 91.66666667%;}
    .col-md-offset-10 {margin-left: 83.33333333%;}
    .col-md-offset-9 {margin-left: 75%;}
    .col-md-offset-8 {margin-left: 66.66666667%;}
    .col-md-offset-7 {margin-left: 58.33333333%;}
    .col-md-offset-6 {margin-left: 50%;}
    .col-md-offset-5 {margin-left: 41.66666667%;}
    .col-md-offset-4 {margin-left: 33.33333333%;}
    .col-md-offset-3 {margin-left: 25%;}
    .col-md-offset-2 {margin-left: 16.66666667%;}
    .col-md-offset-1 {margin-left: 8.33333333%;}
    .col-md-offset-0 {margin-left: 0;}
}
@media (min-width: 1200px) {
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
        float: left;}
    .col-lg-12 {width: 100%;}
    .col-lg-11 {width: 91.66666667%;}
    .col-lg-10 {width: 83.33333333%;}
    .col-lg-9 {width: 75%;}
    .col-lg-8 {width: 66.66666667%;}
    .col-lg-7 {width: 58.33333333%;}
    .col-lg-6 {width: 50%;}
    .col-lg-5 {width: 41.66666667%;}
    .col-lg-4 {width: 33.33333333%;}
    .col-lg-3 {width: 25%;}
    .col-lg-2 {width: 16.66666667%;}
    .col-lg-1 {width: 8.33333333%;}
    .col-lg-pull-12 {right: 100%;}
    .col-lg-pull-11 {right: 91.66666667%;}
    .col-lg-pull-10 {right: 83.33333333%;}
    .col-lg-pull-9 {right: 75%;}
    .col-lg-pull-8 {right: 66.66666667%;}
    .col-lg-pull-7 {right: 58.33333333%;}
    .col-lg-pull-6 {right: 50%;}
    .col-lg-pull-5 {right: 41.66666667%;}
    .col-lg-pull-4 { right: 33.33333333%;}
    .col-lg-pull-3 {right: 25%;}
    .col-lg-pull-2 {right: 16.66666667%;}
    .col-lg-pull-1 {right: 8.33333333%;}
    .col-lg-pull-0 {right: auto;}
    .col-lg-push-12 {left: 100%;}
    .col-lg-push-11 {left: 91.66666667%;}
    .col-lg-push-10 {left: 83.33333333%;}
    .col-lg-push-9 {left: 75%;}
    .col-lg-push-8 {left: 66.66666667%;}
    .col-lg-push-7 {left: 58.33333333%;}
    .col-lg-push-6 {left: 50%;}
    .col-lg-push-5 {left: 41.66666667%;}
    .col-lg-push-4 {left: 33.33333333%;}
    .col-lg-push-3 {left: 25%;}
    .col-lg-push-2 {left: 16.66666667%;}
    .col-lg-push-1 {left: 8.33333333%;}
    .col-lg-push-0 {left: auto;}
    .col-lg-offset-12 {margin-left: 100%;}
    .col-lg-offset-11 {margin-left: 91.66666667%;}
    .col-lg-offset-10 {margin-left: 83.33333333%;}
    .col-lg-offset-9 {margin-left: 75%;}
    .col-lg-offset-8 {margin-left: 66.66666667%;}
    .col-lg-offset-7 {margin-left: 58.33333333%;}
    .col-lg-offset-6 {margin-left: 50%;}
    .col-lg-offset-5 {margin-left: 41.66666667%;}
    .col-lg-offset-4 {margin-left: 33.33333333%;}
    .col-lg-offset-3 { margin-left: 25%;}
    .col-lg-offset-2 { margin-left: 16.66666667%;}
    .col-lg-offset-1 { margin-left: 8.33333333%;}
    .col-lg-offset-0 {margin-left: 0;}
}

.tooltip {
    position: relative;

}

.main-menu a {
    margin-right: 0.5em;
}

.main-menu .tooltip span {
    background-color: #0c0b0b;
    background-size: cover;
    background-position: center;
    visibility: hidden;
    width: 350px;
    text-align: left;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-right: -2cm;
    opacity: 0;
    transition: opacity 0.3s;
    margin-right: -1.5cm; margin-left: -0.8cm; width: auto;
    font-size: 13px;
    font-family: Arial, sans-serif; font-weight: bold;
    color: white;
    font-weight: 600;
}

.main-menu .tooltip span::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.main-menu .tooltip:hover span {
    visibility: visible;
    opacity: 1;
}

.tooltip .playerinfotip {
    background-color: #0c0b0b;
    background-size: cover;
    background-position: center;
    visibility: hidden;
    width: 350px;
    text-align: left;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-right: -2cm;
    opacity: 0;
    transition: opacity 0.8s;
}

.tooltip .playerinfotip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.tooltip:hover .playerinfotip {
    visibility: visible;
    opacity: 1;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 220px;
    background-color: #333;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -150px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.tooltip .top1ingame {
    width: 220px;
    background-color: #333;
    text-align: left;
    padding: 5px 5px 5px 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -225px;
    opacity: 1;
    transition: opacity 0.3s;
    color: white;
    font-size: 13px;
    font-family: Arial, sans-serif; font-weight: bold;
    font-weight: 600;
}

.tooltip .top1ingame::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 96%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

.quality {
    -webkit-animation: 1.5s slide;
    animation: 1.5s slide;
    -webkit-transform-origin: left center;
    transform-origin: left center;
}

.smallq {
    color: #828282;
    font-size: 13px;
    font-family: Arial, sans-serif; font-weight: bold;
    font-weight: 600;
    text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
    margin-right: 0;
    margin-left: -3cm;
}

@-webkit-keyframes slide {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}

@keyframes slide {
    0% {
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
    }

    to {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
    }
}

.pct-bar div {
    height: 100%;
    text-align: left;
    background-color: #434343;
}

.pct-bar {
    -webkit-box-shadow: 1px 0 .2em rgba(30,30,30,.3),inset 0 -.25em .25em rgba(30,30,30,.3);
    box-shadow: 1px 0 .2em rgba(30,30,30,.3),inset 0 -.25em .25em rgba(30,30,30,.3);
    background-color: #c8c8c8;
    height: 6px;
    overflow: hidden;
    text-align: left;
    float: none !important;
    text-align: left !important;
}

.rec_links {
    padding: 10px 10px 10px 0;
    display: inline-block;
    vertical-align: middle;
}

a.active {
    color: #fff;
    border-width: 2px;
    border-style: solid;
    border-color: transparent transparent #6FD65D transparent;
    padding: 0 0 10px 0;
}

a.active_weap {
    color: #fff;
}

.selected_display {
    color: #fff;
}

@-webkit-keyframes glow {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #6FD65D, 0 0 30px #6FD65D;
    }

    to {
        text-shadow: 0 0 20px #fff, 0 0 30px #0050ff;
    }
}

@keyframes glow {
    from {
        text-shadow: 0 0 10px #fff, 0 0 20px #6FD65D, 0 0 30px #6FD65D;
    }

    to {
        text-shadow: 0 0 20px #fff, 0 0 30px #0050ff;
    }
}

a span.en, a:hover span.mi {
    display: inline;
}

a:hover span.en, a span.mi {
    display: none;
    font-family: Batman;
}

.container_points {
    width: 100px;
    height: 100px;
    float: right;
    border: 3px solid #0099B7;
    border-radius: 50%;
    text-align: center;
    background: -webkit-linear-gradient(left, #00c5aa, #003ad2);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.player_points {
    font-size: 2em;
    text-align: center;
    margin: 30% auto;
    background: -webkit-linear-gradient(left, #00c5aa, #003ad2);
    background-clip: border-box;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

profile.vip-1 {
    background-image: -webkit-linear-gradient(left,#ffca68,#2a8c1f),-webkit-linear-gradient(left,#ffffff,#ec2020);
}

.vip-1, profile.vip-1 a {
    font-size: 13px;
    font-family: Arial, sans-serif; font-weight: bold;
    font-weight: 600;
    background: -webkit-linear-gradient(left, #fb83fa, #31bcb8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-color: #31bcb8;
}

profile.vip-2 {
    background-image: -webkit-linear-gradient(left,#ffcb52,#ff451f),-webkit-linear-gradient(left,#ffcb52,#ff451f);
}

.vip-2, profile.vip-2 a {
    font-size: 13px;
    font-family: Arial, sans-serif; font-weight: bold;
    font-weight: 600;
    background: -webkit-linear-gradient(left,#00ff7f,#e065af);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-color: #ff451f!important;
}

profile.vip-3 {
    background-image: -webkit-linear-gradient(left,#00ffdc,#f723f0),-webkit-linear-gradient(left,#ffffff,#ff01c8);
}

.vip-3, profile.vip-3 a {
    font-size: 13px;
    font-family: Arial, sans-serif; font-weight: bold;
    font-weight: 600;
    background: -webkit-linear-gradient(left,#add356,#00dfa6);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    border-color: #00dfa6!important;
}

.zt {
    font-size: 12px;
}

.jixian{
  background-image: -webkit-linear-gradient(bottom,  #fbfbfb, #ff0000, #ff0000);
  font-size: 13px;
  font-family: 'Times New Roman', serif;
  font-weight: bold;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

.jixian::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
  animation: flashOnce 0.5s linear forwards;
}

.chaoren{
  background-image: -webkit-linear-gradient(bottom, #ffffff, #ef0079, #ed1fdc);
  font-size: 13px;
  font-family: 'Times New Roman', serif;
  font-weight: bold;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}

.chaoren::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
  animation: flashOnce 0.5s linear forwards;
}

.wangzhe{
  background-image: -webkit-linear-gradient(bottom, #e55bd4, #993131, #f370ca);
  font-size: 13px;
  font-family: 'Times New Roman', serif;
  font-weight: bold;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  vertical-align: middle;
}

.wangzhe::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
  animation: flashOnce 0.5s linear forwards;
  
}

@keyframes flashOnce {
  to {
    left: 100%;
    opacity: 0;
  }
}

.dashi {
  background-image: -webkit-linear-gradient(bottom, #C6E2FF, #FFA500, #EE3B3B);
  font-size: 13px;
  font-family: Arial, sans-serif; font-weight: bold;
  font-weight: bold;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  vertical-align: middle;
}

.zuanshi {
    background-image: -webkit-linear-gradient(bottom,#BCEE68,#FFBBFF,#D4D4D4);
    font-size: 13px;
    font-family: Arial, sans-serif; font-weight: bold;
    font-weight: bold;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    vertical-align: middle;
}

.bojin {
    background-image: -webkit-linear-gradient(bottom,#212121,#00BFFF,#9370DB);
    font-size: 13px;
    font-family: Arial, sans-serif; font-weight: bold;
    font-weight: bold;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    vertical-align: middle;
}

.huangjin {
    background-image: -webkit-linear-gradient(bottom,#CD2626,#b6ff00,#FFD700);
    font-size: 13px;
    font-family: Arial, sans-serif; font-weight: bold;
    font-weight: bold;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    vertical-align: middle;
}

.baiyin {
    background-image: -webkit-linear-gradient(bottom,#CD2626,#00FF7F,#00FF7F);
    font-size: 13px;
    font-family: Arial, sans-serif; font-weight: bold;
    font-weight: bold;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    vertical-align: middle;
}

.qingtong {
    background-image: -webkit-linear-gradient(bottom,#FFFFFF,#FFFFFF,#222222);
    font-size: 13px;
    font-family: Arial, sans-serif; font-weight: bold;
    font-weight: bold;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    vertical-align: middle;
}

.shuzi {
    background-image: -webkit-linear-gradient(bottom,#232322,#FF98D8,#B9D3EE);
    font-size: 14px;
    font-family: Play-Bold;
    font-weight: 500;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    vertical-align: middle;
}

video {
    -webkit-background-size: cover;
    -o-background-size: cover;
    position: absolute;
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    object-fit: cover;
    z-index: -99;
}

.mes:nth-of-type(n+10) {
    display: none
}

#more {
    margin: 0 auto;
    text-align: center;
    border: 1px solid rgb(0, 128, 255);
    cursor: pointer;
    display: table;
    padding: 3px 10px;
}


#jixian {
    vertical-align: middle;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 8px #ff0000;
    margin-right: 5px;
}


#chaoren {
    vertical-align: middle;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 8px #ef0079;
    margin-right: 5px;
}

#wangzhe {
    vertical-align: middle;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 8px #993131;
    margin-right: 5px;
}
#dashi {
    vertical-align: middle;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 5px #FFA500;
    margin-right: 5px;
}

#zuanshi {
    vertical-align: middle;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 5px #FFBBFF;
    margin-right: 5px;
}

#bojin {
    vertical-align: middle;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 5px #9370DB;
    margin-right: 5px;
}

#huangjin {
    vertical-align: middle;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 5px #FFD700;
    margin-right: 5px;
}

#baiyin {
    vertical-align: middle;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 5px #00FF7F;
    margin-right: 5px;
}

#qingtong {
    vertical-align: middle;
    border-radius: 5px;
    -webkit-box-shadow: 0 0 5px #FFFFFF;
    margin-right: 5px;
}

.community {
    position: absolute;
    bottom: -18px;
    left: 20px;
    height: 50px;
}

.border_0 {
    padding: 1px;
    border: 2px solid Red;
}

.border_1, .border_5, .border_6 {

border-radius: 5px;
    -webkit-box-shadow: 0 0 8px #ff0000;
    margin-right: 5px;
}

.border_2, .border_3 {
    padding: 1px;
    border: 2px solid Silver;
}

.border_4 {
    padding: 1px;
    border: 2px solid Aqua;
}

.bcb.red {
    border-left: 10px solid #e45050;
    border-right: 0px solid #e45050;
}

.bcb {
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.1);
    box-shadow: -2px 1px 2em 1em #1f1d1d, inset 0 0 1em 1em rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.mb-3, .my-3 {
    margin-bottom: 1rem!important;
}

.server-card {
    background-size: 500px;
    background-repeat: no-repeat;
    width: 75%;
    max-width: 800px;
    height: 250px;
    display: block;
    border-radius: 8px;
    box-shadow: 0 8px 12px 0 rgba(0,0,0,.25);
}

.color-overlay {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(to right,rgba(42,159,255,0) 0%,#212120 60%,#212120 100%);
    background-blend-mode: multiply;
}

#kzplayer-container {
    background-color: rgba(38,38,39,.7);
    padding: 15px;
    margin-bottom: 20px;
}

.text-center {
    text-align: center!important;
}

.pt-4, .py-4 {
    padding-top: 1.5rem!important;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.red-pulse {
    -webkit-animation: red-pulse 2s linear infinite;
    animation: red-pulse 2s linear infinite;
}

@keyframes red-pulse {
    0% {
        color: rgba(255,0,0,1);
    }

    50% {
        color: rgba(255,0,0,.2);
    }

    100% {
        color: rgba(255,0,0,1);
    }
}

@-webkit-keyframes red-pulse {
    0% {
        color: rgba(255,0,0,1)
    }

    50% {
        color: rgba(255,0,0,.2)
    }

    100% {
        color: rgba(255,0,0,1)
    }
}

.yellow-pulse2 {
    -webkit-animation: yellow-pulse2 0.5s linear infinite;
    animation: yellow-pulse2 0.5s linear infinite;
}

@keyframes yellow-pulse2 {
    0% {
        color: rgba(246,219,4,1);
    }

    50% {
        color: rgba(246,219,4,.2);
    }

    100% {
        color: rgba(246,219,4,1);
    }
}

@-webkit-keyframes yellow-pulse2 {
    0% {
        color: rgba(246,219,4,1)
    }

    50% {
        color: rgba(246,219,4,.2)
    }

    100% {
        color: rgba(246,219,4,1)
    }
}

.fog1 {
    color: rgb(0, 255, 0);
}

.fog2 {
    color: rgb(255, 255, 0);
}

.fog3 {
    color: rgb(255, 0, 0);
}

.particle-network-animation {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    background-color: #171717;
}

.particle-network-animation::before {
    z-index: -2;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    opacity: 0.2;
}

.glow {
    z-index: -1;
    position: fixed;
    top: 50%;
    left: 50%;
    background-image: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.025), transparent);
}

.glow-1 {
    width: 150vw;
    height: 150vh;
    margin-top: -75vh;
    margin-left: -75vw;
    animation: glow-1-move 25s linear infinite both;
}

@keyframes glow-1-move {
    from {
        transform: translate(-100%, 100%);
    }

    to {
        transform: translate(100%, -100%);
    }
}

.glow-2 {
    width: 100vw;
    height: 100vh;
    margin-top: -50vh;
    margin-left: -50vw;
    animation: glow-2-move 25s linear 8.3333333333s infinite both;
}

@keyframes glow-2-move {
    from {
        transform: translate(-100%, 0%);
    }

    to {
        transform: translate(100%, 100%);
    }
}

.glow-3 {
    width: 120vw;
    height: 120vh;
    margin-top: -60vh;
    margin-left: -60vw;
    animation: glow-3-move 25s linear 16.6666666667s infinite both;
}

@keyframes glow-3-move {
    from {
        transform: translate(100%, 100%);
    }

    to {
        transform: translate(0%, -100%);
    }
}

.addserver_table {
    margin: auto;
}

.annotation {
    text-align: center;
    background-color: #282828;
    padding-top: 17px;
    padding-bottom: 17px;
}

.players_table {
    margin: auto;
    border: 1px solid #22252f;
    border-spacing: 0 0;
    border-collapse: collapse;
}

.settings_table {
    margin: auto;
    border: 1px solid #22252f;
    border-spacing: 0 0;
    border-collapse: collapse;
    max-width: 600px;
}

.players_table tr, .settings_table tr {
    white-space: nowrap;
    border: 1px solid #22252f;
    table-layout: fixed;
}

.players_table tr:nth-child(n), .settings_table tr:nth-child(n) {
    background-color: rgba(26, 28, 34, 0.2);
}

.players_table tr:nth-child(2n), .settings_table tr:nth-child(2n) {
    background-color: rgba(26, 28, 34, 0.1);
}

.players_table td {
    padding: 8px;
    border-top: 1px solid #22252f;
}

.settings_table td {
    padding: 8px;
    border-top: 1px solid #22252f;
    white-space: pre-wrap;
}

.details_info_row {
    margin-top: 14px;
}

.details_info, .details_info_column:nth-child(2) {
    vertical-align: top;
}

.details_info_ceil, .details_info_column, .details_info_scolumn {
    display: inline-block;
}

.details_info_column {
    margin-right: 12px;
}

.details_info_srow {
    border: 1px solid #22252f;
    margin: -1px 3px;
    padding: 8px;
}

.details_info_ceil:first-child {
    padding-right: 4px;
}

.details_info_ceil:nth-child(2) {
    font-weight: 300;
}

#gamelink {
    vertical-align: middle;
    display: block;
    margin-bottom: 6px;
    width: 99.9%;
    border: 1px solid #22252f;
    padding: 4px 0;
}

.details_info_column:nth-child(2), .details_password_image {
    background-size: cover;
    width: 250px;
    height: 188px;
    background-position: center;
}

.details_password_image, .details_game_image, .details_location_image {
    display: block;
    z-index: 5;
    background-size: cover;
}

.details_info_column:nth-child(2) {
    border-radius: 4px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12) !important;
}

.details_password_image {
    background-position: right bottom;
    position: absolute;
    background-size: auto;
    background-repeat: no-repeat;
}

.details_location_image {
    width: 16px;
    height: 11px;
    position: relative;
    right: 4px;
    float: right;
    top: 4px;
}

.details_game_image {
    width: 32px;
    height: 32px;
    position: relative;
    left: 4px;
    top: 4px;
    opacity: .4;
    border-radius: 6px;
}

.details_game_image:hover {
    opacity: 1;
    transition-duration: 500ms;
}

img[title='Location: XX'] {
    display: none;
}

.table_head {
    font-weight: bold;
}

.spacer {
    background-color: #282828;
    height: 6px;
    width: 90%;
    margin: 10px auto;
    border: 1px dotted black;
}

.noinfo {
    margin: auto;
    text-align: center;
    background-color: #282828;
    display: inline-block;
    padding: 15px;
}

#invalid_server_id, #back_to_servers_list {
    margin: auto;
    text-align: center;
}

div[id^="servername"] {
    margin: auto;
    text-align: center;
    font-weight: bold;
    padding-bottom: 15px;
    font-size: 16px;
}

#details_playerlist {
    margin: auto;
    overflow: auto;
    text-align: center;
    padding: 10px
}

/* list */
.contry_icon {
    border: none;
    width: 16px;
    height: 16px;
}

.details_icon, .status_icon_onl, .status_icon_nrs, .status_icon_onp {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-size: cover;
}

.details_icon {
    background-image: url(../lgsl_files/other/icon_details.gif) !important;
}

.status_icon_onl {
    background-image: url(../lgsl_files/other/icon_online.gif) !important;
}

.status_icon_pen {
    width: 14px;
    height: 14px;
    background-color: gray;
    display: inline-block;
    border: 1px solid black;
}

.status_icon_nrs {
    background-image: url(../lgsl_files/other/icon_no_response.gif) !important;
}

.status_icon_onp {
    background-image: url(../lgsl_files/other/icon_online_password.gif) !important;
}

img.game_icon {
    width: 16px;
    border-radius: 2px;
}

#server_list_table {
    width: 40%;
    border-radius: 12px;
    margin: 30px auto auto;
    border-collapse: collapse;
}

#server_list_table tr {
    background-color: #282828;
}

#server_list_table td {
    padding: 13px;
    border-bottom: 0 dotted black;
}

#server_list_table_top {
    display: none;
}

.connectlink_cell {
    text-align: left;
}

.servername_cell {
    text-align: left;
}

.servername_cell > div {
    width: 100%;
    overflow: hidden;
    height: 1.3em;
    line-height: 1.3em;
}

div.servername_link {
    display: none;
}

.map_cell {
    white-space: nowrap;
    text-align: left;
}

.players_cell {
    white-space: nowrap;
    text-align: right;
}

.outer_bar {
}

.inner_bar {
    width: 100% !important;
}

.players_numeric {
}

*[class^='players_percent'] {
    display: none;
}

.details_cell, .status_cell {
    white-space: nowrap;
    text-align: center;
}

.details_cell > a {
    text-decoration: none;
}

#pages {
    width: fit-content;
    margin: 2.6em auto;
    font-size: 1.12em;
}

#pages a {
    padding: 5px;
    background-color: #282828;
    font-size: 1.3em;
}

#pages span {
    padding: 10px;
}

#totals {
    width: fit-content;
    margin: 16px auto auto;
    text-align: center;
    font-size: 13px;
    font-family: Arial, sans-serif;
    font-weight: 600;
}

#totals > div {
    width: fit-content;
    display: inline-block;
}

.center {
    text-align: center;
}