@font-face {
	font-family: 'UTM Avo';
	font-style: normal;
	font-weight: normal;
	src: local('UTM Avo'), url('../fonts/avo/utm-avo.woff') format('woff'), url('../fonts/avo/utm-avo.ttf') format("truetype");
}
@font-face {
	font-family: 'UTM Avo bold';
	font-style: normal;
	font-weight: normal;
	src: local('UTM Avo'), url('../fonts/avo/utm-avobold.woff') format('woff'), url('../fonts/avo/utm-avobold.ttf') format("truetype");
}
body {
    background: transparent;
    overflow-x: hidden;
	font-family: 'UTM Avo';
	font-size: 16px;
    color: #000000;
}
a {
	user-drag: none; 
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
div {
    display: block;
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul {
    list-style: none;
    margin: 0;
	padding: 0;
}
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	padding: 0;
}
*:hover, *:active, *:focus {
	outline: none !important;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance:textfield;
}
.wrapper {
	background: #ebebeb;
	padding-top: 5px;
}
.text-ellipsis {
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
}
.text-ego {
	color: #ff7700;
}
.datepicker {
    border-radius: 0;
}
.datepicker-days table thead, .datepicker-days table tbody, .datepicker-days table tfoot {
    padding: 10px;
    display: list-item;
}
.datepicker-days table thead, .datepicker-months table thead, .datepicker-years table thead, .datepicker-decades table thead, .datepicker-centuries table thead {
    background: #3546b3;
    color: #ffffff;
    border-radius: 0;
}
.datepicker-days table thead tr:nth-child(2n+0) td, .datepicker-days table thead tr:nth-child(2n+0) th {
    border-radius: 3px;
}
.datepicker-days table thead tr:nth-child(3n+0) {
    text-transform: uppercase;
    font-weight: 300 !important;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}
.table-condensed > tbody > tr > td, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > td, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, .table-condensed > thead > tr > th {
    padding: 11px 13px;
}
.datepicker-months table thead td, .datepicker-months table thead th, .datepicker-years table thead td, .datepicker-years table thead th, .datepicker-decades table thead td, .datepicker-decades table thead th, .datepicker-centuries table thead td, .datepicker-centuries table thead th {
    border-radius: 0;
}
.datepicker td, .datepicker th {
    border-radius: 50%;
    padding: 0 12px;
}
.datepicker-days table thead, .datepicker-months table thead, .datepicker-years table thead, .datepicker-decades table thead, .datepicker-centuries table thead {
    background: #3546b3;
    color: #ffffff;
    border-radius: 0;
}
.datepicker table tr td.active, .datepicker table tr td.active:hover, .datepicker table tr td.active.disabled, .datepicker table tr td.active.disabled:hover {
    background-image: none;
}
.datepicker .prev, .datepicker .next {
    color: rgba(255, 255, 255, 0.5);
    transition: 0.3s;
    width: 37px;
    height: 37px;
}
.datepicker .prev:hover, .datepicker .next:hover {
    background: transparent;
    color: rgba(255, 255, 255, 0.99);
    font-size: 21px;
}
.datepicker .datepicker-switch {
    font-size: 24px;
    font-weight: 400;
    transition: 0.3s;
}
.datepicker .datepicker-switch:hover {
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
}
.datepicker table tr td span {
    border-radius: 2px;
    margin: 3%;
    width: 27%;
}
.datepicker table tr td span.active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled:hover {
  background-color: #3546b3;
  background-image: none;
}
.dropdown-menu {
    border: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.datepicker-dropdown.datepicker-orient-top:before {
    border-top: 7px solid rgba(0,0,0,.1);
}
/*==============================================
	HEADER
==============================================*/
header {
	height: 50px;
	line-height: 50px;
	background: #262D3A;
}
header .header-logo {
	display: inline-block;
	float: left;
	margin-right: 25px;
	overflow: hidden;
}
header .header-logo h1 {
	line-height: 1;
}
header .header-menu {
	display: inline-block;
}
header .header-menu li {
	display: inline-block;
	margin-right: 25px;
}
header .header-menu li:last-child {
	margin-right: 0;
}
header .header-menu li a {
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}
header .header-menu li a:hover {
	text-decoration: none;
	color: #ff7700;
}
header .mobile-menu-btn {
	display: none;
}
header .header-sign li {
	display: inline-block;
}
header .header-sign li:last-child:before {
	content: '';
	width: 0;
	height: 100%;
	border-left: 1px solid #fff;
	border-right: 1px solid #fff;
	margin: 0 7px 0 5px;
}
header .header-sign li a {
	color: #fff;
	font-family: 'UTM AVO Bold';
}
header .header-sign li a i {
	color: #ff7700;
}
/*==============================================
	FOOTER
==============================================*/
footer {
	padding: 40px 0;
}
.footer-logo {
	float: left;
    margin-right: 30px;
	margin-bottom: 30px;
    margin-top: 20px;
}
.footer-logo img {
	width: 150px;
}
.footer-intro {
	padding: 20px 0;
}
.footer-intro h2 {
	font-weight: 700;
	margin-bottom: 20px;
	letter-spacing: 5px;
}
.footer-intro h2 span:first-child {
	color: #ff7700;
}
.footer-intro h2 span:last-child {
	color: #ff0000;
}
.footer-intro p {
	max-width: 90%;
	font-weight: 700;
	line-height: 1.5;
	font-size: 14px;
}
.footer-contact {
	text-transform: uppercase;
}
.footer-contact span {
	padding: 5px 15px;
	background: #ebebeb;
	font-weight: 700;
}
.footer-contact a {
	display: block;
	color: #000;
}
.footer-contact a i {
	color: #fff;
    background: #000;
    padding: 5px;
    width: 25px;
    height: 25px;
    line-height: 15px;
    vertical-align: middle;
    text-align: center;
    border-radius: 50%;
    font-size: 12px;
}
.footer-contact h5, .footer-contact hr {
	margin-left: 28px;
}
.footer-contact hr {
	height: 1px;
	background: #000;
	width: 50%
}

/*==============================================
	HOME
==============================================*/
.slider-nav {
    position: static;
}
.slider-nav .slider-prev, .slider-nav .slider-next {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 99;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.slider-nav .slider-prev {
    left: 20px;
}
.slider-nav .slider-next {
    right: 20px;
}
.slider-nav a {
    font-size: 18px;
	width: 40px;
    height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
    color: #dcdcdc;
    background: rgb(255, 119, 0, 0.5);
}
.slider-nav a:hover {
    background: rgb(255, 119, 0);
	text-decoration: none;
	color: #fff;
}
.intro-list {
	padding-bottom: 20px;
}
.intro-list .intro-item img {
	max-width: 100%;
	width: 100%;
	object-fit: cover;
	margin-bottom: 10px
}
/*==============================================
	REGISTER - LOGIN
==============================================*/
.sign-page-logo {
	width: 30%;
	text-align: center;
	margin: 0 auto 20px;
	padding: 30px 0;
}
.sign-page-logo img {
	width: 69%;
}
form .form-group input, form .btn {
	border-radius: 0;
}
form .form-check input {
	width: 15px;
	height: 15px;
}
form .form-check .form-check-label {
	font-size: 15px;
}
.form-login h6 {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #000; 
   line-height: 0.1em;
   margin: 25px 0 25px; 
} 
.form-login h6 span { 
    background: #ebebeb; 
    padding: 0 10px; 
}
/*==============================================
	USER PAGES
==============================================*/
/* user menu */
.user-menu {
	width: 100%;
}
.user-menu li {
	width: 100%;
	margin-bottom: 3px;
	background: #fff;
}
.user-menu li a {
	color: #000;
	display: block;
	width: 100%;
	height: 100%;
	padding: 12px 15px;
	border-left: 5px solid transparent;
}
.user-menu li a.active {
	color: #ff7700;
	font-weight: bold;
}
.user-menu li a.active i {
	color: #ff7700;
}
.user-menu li a.active, .user-menu li:hover a {
	border-left: 5px solid #ff7700;
}
.user-menu li a i {
	color: #000;
	margin-right: 5px;
}
.user-menu li:hover a, .user-menu li:hover a i {
	text-decoration: none;
	color: #ff7700;
}
/* ------ */
.page-title {
	font-family: 'UTM Avo Bold';
	text-transform: uppercase;
	margin-bottom: 25px;
}
.page-sub-title {
	display: block;
	margin-top: -18px;
}
/* info group */
.info-group {
	margin-bottom: 30px;
}
.info-group-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	border-left: 5px solid #ff7700;
	padding: 15px;
	background: #fff;
	margin-bottom: 3px;
}
.info-group-head h3 {
	font-family: 'UTM Avo bold';
	font-size: 16px;
}
.info-group-head span, .info-group-head a {
	font-weight: 700;
	color: #ff7700;
	cursor: pointer;
}
.info-group-body {
	padding: 10px;
	background: #fff;
}
.info-group-body p {
	font-weight: 600;
	font-size: 15px;
	margin-bottom: 0;
}
.info-group-body table {
	margin-bottom: 0;
}
.info-group-body table td {
	vertical-align: middle;
	font-size: 13px;
}
.info-group-body table.account td {
	font-size: 16px;
}
.info-group-body table.account td:first-child {
	width: 20%;
}
.info-group-body table.account td a {
	color: #ff7700;
	font-size: 14px;
	font-weight: 700;
}
.info-group-body table.account td i {
	color: #6CDB00;
}
.info-group-body a.money-charge-btn {
	display: block;
	font-size: 14px;
	background-color: #007bff;
	color: #fff;
	border: 1px solid #007bff;
	border-radius: 4px;
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	padding: 5px
}
/* tab history */
#historyTab {
	margin-bottom: 15px;
	border: none;
}
#historyTab .nav-link {
    color: #000;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
	position: relative;
}
#historyTab .nav-link.active {
    background: transparent;
	border: none;
}
#historyTab .nav-link.active:after, #historyTab .nav-link:hover:after {
	content: '';
	width: 100%;
	height: 5px;
	background: #ff7700;
	position: absolute;
	bottom: 0;
	left: 0;
}
#historyTabContent table {
	background: #fff;
}
#historyTabContent thead {
	border-left: 5px solid #ff7700;
}
.table-footer {
	display: flex;
	align-items: center;
}
.table-footer ul {
	display: inline-flex;
	margin-right: 10px;
}
.table-footer form {
	position: relative;
	width: 25%;
}
.table-footer form input {
	height: calc(1.5em + .75rem - 1px);
	padding-right: 30px;
}
.table-footer form i {
	position: absolute;
	right: 10px;
	top: 50%;
	-webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* history play */
.user_rank .user_rank_left {
	width: 75%;
	justify-content: flex-end;
	margin-left: auto;
}
.user_rank .user_rank_avatar {
	display: inline-block;
	width: 30%;
}
.user_rank .user_rank_avatar img {
	width: 55px;
	height: 55px;
	border-radius: 50%;
}
.user_rank .user_rank_info {
	display: inline-block;
	width: 70%;
}
.user_rank .user_rank_detail {
	width: 60%;
}
.user_rank .user_rank_detail img {
	width: 45px;
	height: 45px;
}
@media only screen and (max-width: 1199px) {
	.user_rank .user_rank_left {
		width: 100%;
	}
}
@media only screen and (min-width: 576px) and (max-width: 991px) {
	.user_rank .col-md-1, .user_rank .col-md-2 {
		display: none;
	}
	.user_rank .col-md-4, .user_rank .col-md-5 {
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 50%;
	}
}
@media only screen and (max-width: 575px) {
	.user_rank .user_rank_left {
		justify-content: center;
		padding-bottom: 10px;
		border-bottom: 1px solid #ccc
	}
	.user_rank .user_rank_avatar {
		width: 35%;
		text-align: right;
		padding-right: 10px;
	}
	.user_rank .user_rank_info {
		width: 65%;
	}
	.user_rank .user_rank_detail {
		padding-top: 10px;
		margin: 0 auto;
	}
	.user_rank .user_rank_detail img {
		width: 55px;
		height: 55px;
	}
}
.type_history a {
	width: calc(50% - 1.5px);
	height: 40px;
	background-color: #000;
	font-weight: 700;
	color: #fff;
	line-height: 36px;
	vertical-align: middle;
	text-align: center;
}
.type_history a.active, .type_history a:hover {
	background-color: #ff7700;
	text-decoration: none;
}
.gametype_link a {
	display: inline-block;
	background-color: #fff;
	color: #000;
	font-weight: 700;
	font-size: 16px;
	padding: 5px 30px;
	margin-right: 5px;
	margin-bottom: 10px;
}
.gametype_link a.active, .gametype_link a:hover {
	color: #ff7700;
}
.lastmatch-table {
	margin-bottom: 0;
}
.lastmatch-table th, .lastmatch-table td {
	vertical-align: middle !important;
	text-align: center;
	border: 2px solid #ebebeb !important;
}
.lastmatch-table p{
	margin-bottom: 0;
	font-size: 13px;
}
.lastmatch-table tr a {
	color: #ff7700;
	font-weight: 700;
}
.lastmatch-table tr span {
	color: #ff7700;
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
}

.match-detail .player-match-info div:first-child {
	border-width: 2px 2px 5px 2px;
	border-style: solid;
	font-weight: 700;
	text-transform: uppercase;
	padding: 5px;
}
.match-detail .player-match-info.win div:first-child {
	border-color: #227AC3;
}
.match-detail .player-match-info.lose div:first-child {
	border-color: #C32222;
}
.match-detail .player-info {
	padding: 5px;
}
.match-detail .player-info img {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	margin-bottom: 10px;
}
.match-detail .player-empire-color {
	height: 15px;
}
.match-detail div p span {
	font-size: 16px;
}
/* confirm link */
.radialProgressBar {
	border-radius: 50%;
	width: 100px;
	height: 100px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	background: #666;
	margin: 11px auto;
}
.radialProgressBar .overlay {
	border-radius: 50%;
	width: 80px;
	height: 80px;
	margin: auto;
	background: #fff;
	text-align: center;
	padding-top: 30%;
}

.progress-0 {
	background-image: -webkit-linear-gradient(left, #666 50%, transparent 50%), -webkit-linear-gradient(left, #ff7700 50%, #666 50%);
	background-image: linear-gradient(90deg, #666 50%, transparent 50%), linear-gradient(90deg, #ff7700 50%, #666 50%);
}
.progress-33 {
	background-image: -webkit-linear-gradient(60deg, #666 50%, transparent 50%), -webkit-linear-gradient(right, #ff7700 50%, #666 50%);
	background-image: linear-gradient(30deg, #666 50%, transparent 50%), linear-gradient(-90deg, #ff7700 50%, #666 50%);
}
.progress-66 {
	background-image: -webkit-linear-gradient(right, #ff7700 50%, transparent 50%), -webkit-linear-gradient(120deg, #ff7700 50%, #666 50%);
	background-image: linear-gradient(-90deg, #ff7700 50%, transparent 50%), linear-gradient(-30deg, #ff7700 50%, #666 50%);
}
.progress-100 {
	background-image: -webkit-linear-gradient(left, #ff7700 50%, transparent 50%), -webkit-linear-gradient(right, #ff7700 50%, #666 50%);
	background-image: linear-gradient(90deg, #ff7700 50%, transparent 50%), linear-gradient(-90deg, #ff7700 50%, #666 50%);
}

.confirm-link {
	width: 100%;
    height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.confirm-link a {
	display: block;
	color: #000;
	font-size: 16px;
	padding: 5px 0;
}
.confirm-link a i {
	font-size: 22px;
}
.confirm-link a.done, .confirm-link a.done i {
	color: #5e9cff;
}
.confirm-link a.not_done, .confirm-link a.not_done i {
	color: #ff0000;
}
.confirm-link a.done:hover {
	text-decoration: none;
}

/* User detail */
.user-detail-bg {
	background-image: url('../images/user-detail-bg.jpg');
    background-size: contain;
    background-repeat: no-repeat;
	background-color: #fff;
    width: 100%;
    height: 0;
    padding-top: 20.43%;
	margin-bottom: 80px;
}
.user-detail-bg h2 {
	width: 100%;
	text-align: center;
	position: absolute;
	top: 10px;
	left: 50%;
	-webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
	color: #fff;
	font-weight: 700;
	text-transform: capitalize;
}
.user-detail-bg .user-info {
	display: block;
	width: 120px;
	height: 120px;
	position: absolute;
	bottom: -40px;
	left: 50%;
	-webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.user-detail-bg .user-info img {
	width: 100%;
	height: 100%;
	border: 5px solid #ff7700;
	border-radius: 50%;
}
.user-detail-bg span {
	color: #fff;
	font-weight: 700;
	position: absolute;
	bottom: 5px;
}
.user-detail-bg span#rank {
	left: 30%;
}
.user-detail-bg span#money-rank {
	left: 59%;
}
.user-rank-set {
	background-image: url(../images/rank_gold_bg.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 100%;
	height: 0;
	padding-top: 118%;
}
.user-rank-set img {
	width: 32%;
    height: 27%;
    border-radius: 50%;
    position: absolute;
    top: 12%;
    left: 50%;
	-webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}
.user-rank-set p.rank-user {
	width: 100%;
	text-align: center;
	margin-bottom: 0;
    position: absolute;
	top: 50%;
    left: 50%;
	-webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 12px;
	font-weight: 700;
    color: #fff;
}
.user-rank-set p.rank-point {
	position: absolute;
    bottom: 1px;
    margin-bottom: 0;
    width: 100%;
    text-align: center;
    font-weight: 700;
}
.user-rank-info span {
    font-weight: 700;
}
.progress-info {
	font-size: 12px;
	margin-bottom: 4px;
}
.progress {
	height: 5px;
}
.progress-bar {
	background: #ff7700
}
/* customer assist */
#customer-assist-search {
	position: relative;
}
#customer-assist-search input {
	padding-right: 30px;
}
#customer-assist-search i {
	position: absolute;
	right: 10px;
	top: 50%;
	-webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}
.info-group-body.trans-bg {
	background: transparent;
	padding: 0;
}
.info-group-body.trans-bg .info-group-fixed p {
	background: #fff;
	margin-top: 5px;
	margin-bottom: 0;
	padding: 20px;
}
.info-group-body.trans-bg .info-group-fixed p a {
	color: #000;
	font-size: 16px;
}
.info-group-body.trans-bg .info-group-fixed p a:hover {
	color: #ff7700;
	text-decoration: none;
}

/* nap tien */
.money-charge .nav {
	justify-content: center;
	border: none;
	margin-bottom: 10px;
}
.money-charge .nav li+li {
	margin-left: 15px;
}
.money-charge .nav .nav-link {
	min-width: 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 10px;
	padding: 12px;
}
.money-charge .nav .nav-link img {
	width: 35px;
	height: 25px;
	-webkit-filter: brightness(0);
	-moz-filter: brightness(0);
	-ms-filter: brightness(0);
	filter: brightness(0);
	margin-bottom: 10px;
}
.money-charge .nav .nav-link p {
	margin-bottom: 0;
	font-weight: 700;
	color: #000;
}
.money-charge .nav .nav-link.active img, .money-charge .nav .nav-link:hover img {
	-webkit-filter: none;
	-moz-filter: none;
	-ms-filter: none;
	filter: none;
}
.money-charge .nav .nav-link.active p, .money-charge .nav .nav-link:hover p {
	color: #ff7700;
}
.money-charge .tab-pane {
	width: 70%;
	margin: 0 auto;
}
.money-charge .tab-pane input, .money-charge .tab-pane select {
	font-weight: 700;
}
.money-charge .tab-pane select {
	background-image: url(../images/triangle.png);
	background-repeat: no-repeat;
	background-position: right 10px center;
	-moz-appearance: none; 
	-webkit-appearance: none; 
	appearance: none;
}
.money-charge .tab-pane input {
	text-align: center;
	color: #ff7700;
}
.money-charge .tab-pane button {
	border-radius: 20px;
}
.money-charge .tab-pane button:hover {
	background-color: #ff7700;
	border-color: #ff7700;
}

/* payment history table */
.payment-history-table th {
	color: #ff7700
}
.payment-history-table th, .payment-history-table tr:nth-child(even) td {
	background: #fff;
}
.payment-history-table th, .payment-history-table td {
	text-align: center;
	padding: 5px;
}
/* pagination */
ul.pagination {
    list-style: outside none none;
    margin-bottom: 0;
    padding: 0;
}

.pagination {
    display: inline-block;
    padding-left: 50%;
    margin: 0;
    border-radius: 4px;
    clear: both;
    background: #ffffff;
}
#paginate{
    background: #ffffff;
}

ul.pagination li {
    display: inline-block;
}

.pagination>li>a {
    color: #ff7700;
}

.pagination>li:first-child>a,
.pagination>li:first-child>span {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    background-color: #ff7700;
    border-color: #ff7700;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #ff7700;
    border-color: #ff7700;
}

.pagination>li>a {
    color: #ff7700;
}

.pagination>li>a,
.pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #ff7700;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    background-color: #ff7700;
    border-color: #ff7700;
}

/* alert */
.alert {
	top: 25% !important;
	font-size: 30px;
	color: #ff0000 !important;
}
/*==============================================
	RESPONSIVE
==============================================*/
@media only screen and (max-width: 1024px) {
	/* header */
	header .header-menu li:nth-child(4) {
		margin-right: 120px;
	}
	/* footer */
	.footer-logo {
		margin-top: 10px;
		margin-bottom: 10px;
	}
	.footer-logo img {
		width: 75px;
	}
	.footer-intro p {
		margin-top: 30px;
		text-align: justify;
	}
	.footer-contact h5 {
		text-transform: lowercase;
		margin-left: 0;
		margin-top: 5px;
		font-size: 18px;
	}
	/* user detail */
	.user-detail-bg .user-info {
		width: 100px;
		height: 100px;
	}
	.user-detail-bg span#rank {
		left: 28%;
	}
	.user-rank-set p.rank-user {
		font-size: 10px;
	}
}
@media only screen and (max-width: 991px) {
	.col-100-768 {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	/* login - register */
	.slide_home {
		order: 2;
	}
	.login_home {
		order: 1;
		margin-bottom: 15px;
	}
	.sign-page-logo {
		width: 30%;
	}
}
@media only screen and (max-width: 768px) {
	/* header */
	header .header-menu li {
		margin-right: 8px;
	}
	header .header-menu li:nth-child(4) {
		margin-right: 8px;
	}
	/* home */
	.footer-contact hr {
		width: 100%;
		margin-left: 0;
	}
	/* user */
	.user-detail-bg {
		background-size: cover;
		height: 150px;
	}
	.user-detail-bg .user-info {
		bottom: -30px;
	}
	.user-detail-bg span#rank {
		left: 20%;
	}
	.user-detail-bg span#money-rank {
		left: 61%;
	}
	.user-rank-set p.rank-user {
		font-size: 14px;
	}
	.info-group-body table.account td:first-child {
		width: 30%;
	}
	.table-footer form {
		width: 50%;
	}
	.match-history-table td, .match-history-table th {
		min-width: 120px;
		padding: 5px;
	}
}
@media only screen and (max-width: 575px) {
	/* header */
	header .container {
		height: 100%;
	}
	header .menu-main {
		display: none;
	}
	/* footer */
	footer {
		text-align: center;
	}
	.footer-logo {
		width: 100%;
		float: none;
		margin: 0
	}
	.footer-logo img {
		width: 120px;
	}
	.footer-intro h2 {
		margin-bottom: 0;
	}
	.footer-intro p {
		margin-top: 10px;
		max-width: 100%;
	}
	.footer-contact hr {
		width: 50%;
		margin-left: auto;
	}
	/* user detail */
	.user-detail-bg span#rank {
		left: 22%;
	}
	.user-rank-set {
		padding-top: 50%;
		background-position: center;
		margin-bottom: 40px;
	}
	.user-rank-set img {
		width: 18%;
		height: 37%;
		top: 13%;
	}
	.user-rank-set p.rank-user {
		font-size: 18px;
		top: 65%;
	}
	.user-rank-set p.rank-point {
		bottom: -10px;
	}
	.user-rank-info p {
		text-align: center;
	}
	.table-footer {
		justify-content: space-between;
	}
	.table-footer ul {
		width: 48%;
		margin-right: 0;
	}
	.table-footer form {
		width: 48%;
	}
}
@media only screen and (max-width: 480px) {
	.datepicker .datepicker-switch {
		font-size: 20px;
	}
	.table-condensed > tbody > tr > td, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > td, .table-condensed > tfoot > tr > th, .table-condensed > thead > tr > td, .table-condensed > thead > tr > th {
		padding: 8px;
	}
	.info-group-head h3, .info-group-head span {
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
		max-width: 100%;
	}
	.user-detail-bg {
		height: 200px;
		margin-bottom: 10px;
	}
	.user-detail-bg .user-info {
		width: 90px;
		height: 90px;
		bottom: 10px;
	}
	.user-detail-bg span#rank {
		left: 17%;
		bottom: 20px;
	}
	.user-detail-bg span#money-rank {
		left: 63%;
		bottom: 20px;
	}
}
@media only screen and (max-width: 420px) {
	.user-detail-bg span#rank {
		left: 13%;
	}
	.user-rank-set p.rank-user {
		font-size: 15px;
		top: 65%;
	}
	.gametype_link {
		display: flex;
		justify-content: space-between;
	}
	.gametype_link a {
		width: 23%;
		padding: 5px 0;
		text-align: center;
	}
	#elo .gametype_link a {
		width: 32%;
	}
	.gametype_link a:last-child {
		margin-right: 0;
	}
}
@media only screen and (max-width: 400px) {
	.user-detail-bg {
		height: 240px;
	}
	.user-detail-bg .user-info {
		width: 120px;
		height: 120px;
		position: absolute;
		top: 50%;
		bottom: unset;
		-webkit-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}
	.user-detail-bg span#rank {
		bottom: 5px;
		left: 10px;
	}
	.user-detail-bg span#money-rank {
		bottom: 5px;
		left: unset;
		right: 10px;
	}
	table.kd th, table.kd td {
		min-width: 150px;
		padding: 10px;
		vertical-align: middle;
	}
}