/*  Sort replace  */
#sort
{
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    position: relative;
    z-index: 10;
}

#sort a
{
	height: 100%;
    display: table-cell;
    /* width: 14%;
    height: 100%;
    padding: 0 4px 0 4px;
    vertical-align: top; */
}

#sort .image
{
    padding-top: 5px;
    transition: .6s ease,color .2s ease,border .2s ease;
    position: relative;
    display: inline-block;
}

#sort .image:hover
{
  -ms-transform: scale(1.1); /* IE 9 */
  -webkit-transform: scale(1.1); /* Safari 3-8 */
  transform: scale(1.1); 
  transition: .5s ease,color .2s ease,border .2s ease;
}

#sort .selected
{
    border-top: 3px solid #007bff;
    padding-top: 2px;
}

#sort .selected:hover{
	  -ms-transform: scale(1.0); /* IE 9 */
  -webkit-transform: scale(1.0); /* Safari 3-8 */
  transform: scale(1.0); 
}

#sort .black
{
    background-color: rgb(0 0 0 / 50%);
    width: 100%;
    height: 100%;
    z-index: 10;
    text-align: center;
}

#sort .black span
{
    display: none;
    padding-top: 13px;
    font-size: 14px;
    color: white;
    color: rgba(255, 255, 255, 0.7);
}

/*  Sort replace  */

.cs {
    background: linear-gradient( rgb(12 12 12 / 0%), rgb(2 2 2 / 0%)), url(../../images/pics/capsule/cs.webp) no-repeat;
    background-size: cover;
    position: relative;
    height: 120px;
    width: 85px;
    background-position: center;
}


.css {
    background: linear-gradient( rgb(12 12 12 / 0%), rgb(2 2 2 / 0%)), url(../../images/pics/capsule/css.webp) no-repeat;
    background-size: cover;
    position: relative;
    height: 120px;
    width: 85px;
    background-position: center;
}


.csgo {
    background: linear-gradient( rgb(12 12 12 / 0%), rgb(2 2 2 / 0%)), url(../../images/pics/capsule/csgo.webp) no-repeat;
    background-size: cover;
    position: relative;
    height: 120px;
    width: 85px;
    background-position: center;
}

.cs2 {
    background: linear-gradient( rgb(12 12 12 / 0%), rgb(2 2 2 / 0%)), url(../../images/pics/capsule/cs2.webp) no-repeat;
    background-size: cover;
    position: relative;
    height: 120px;
    width: 85px;
    background-position: center;
}


.samp {
    background: linear-gradient( rgb(12 12 12 / 0%), rgb(2 2 2 / 0%)), url(../../images/pics/capsule/samp.webp) no-repeat;
    background-size: cover;
    position: relative;
    height: 120px;
    width: 85px;
    background-position: center;
}


.tf2 {
    background: linear-gradient( rgb(12 12 12 / 0%), rgb(2 2 2 / 0%)), url(../../images/pics/capsule/tf2.webp) no-repeat;
    background-size: cover;
    position: relative;
    height: 120px;
    width: 85px;
    background-position: center;
}


.minecraft {
    background: linear-gradient( rgb(12 12 12 / 0%), rgb(2 2 2 / 0%)), url(../../images/pics/capsule/minecraft.webp) no-repeat;
    background-size: cover;
    position: relative;
    height: 120px;
    width: 85px;
    background-position: center;
}


.dayz {
    background: linear-gradient( rgb(12 12 12 / 0%), rgb(2 2 2 / 0%)), url(../../images/pics/capsule/dayz.webp) no-repeat;
    background-size: cover;
    position: relative;
    height: 120px;
    width: 85px;
    background-position: center;
}


.rust {
    background: linear-gradient( rgb(12 12 12 / 0%), rgb(2 2 2 / 0%)), url(../../images/pics/capsule/rust.webp) no-repeat;
    background-size: cover;
    position: relative;
    height: 120px;
    width: 85px;
    background-position: center;
}


.fivem {
    background: linear-gradient( rgb(12 12 12 / 0%), rgb(2 2 2 / 0%)), url(../../images/pics/capsule/fivem.webp) no-repeat;
    background-size: cover;
    position: relative;
    height: 120px;
    width: 85px;
    background-position: center;
}


.gmod {
    background: linear-gradient( rgb(12 12 12 / 0%), rgb(2 2 2 / 0%)), url(../../images/pics/capsule/gmod.webp) no-repeat;
    background-size: cover;
    position: relative;
    height: 120px;
    width: 85px;
    background-position: center;
}


.ark {
    background: linear-gradient( rgb(12 12 12 / 0%), rgb(2 2 2 / 0%)), url(../../images/pics/capsule/ark.webp) no-repeat;
    background-size: cover;
    position: relative;
    height: 120px;
    width: 85px;
    background-position: center;
}


.ts3 {
    background: linear-gradient( rgb(12 12 12 / 0%), rgb(2 2 2 / 0%)), url(../../images/pics/capsule/ts3.webp) no-repeat;
    background-size: cover;
    position: relative;
    height: 120px;
    width: 85px;
    background-position: center;
}

/* sort new */

.image .tooltips {
  visibility: hidden;
  width: 225px;
  height: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-image: linear-gradient(black, #757575);
  align-items: center;
  
  /* Position the tooltip Right side*/
  /*position: absolute;
  z-index: 1;
  top: -31px;
  left: 105%;
  transition: .3s ease,color .3s ease,border .3s ease;*/
  
  /* Position bottom */
  
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .3s ease,color .3s ease,border .3s ease;
    margin-top: 112px;
}


.image:hover .tooltips {
  visibility: visible;
  transition: .6s ease,color .6s ease,border .6s ease;
}

.tooltips.tlpsleft {
    transform: translate(-20%, -50%);
}

.tooltips.tlpsright {
    transform: translate(-80%, -50%);
}

.headerpic {
    width: 100%;
    height: 104px;
    box-shadow: 0 1px 4px rgb(0 0 0 / 28%);
}

.statstool {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    width: 100%;
    height: 72px;
    justify-content: center;
}

span.stots {
    padding: 2 20px;
    color: #b3b3b3;
}

.gamenames {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    /* height: 17px; */
    padding: 10px 0;
}

span.gmn {
    padding: 2 20px;
    color: #ebebeb;
	text-align: left;
}

/*  head games */

.cs16head, .gm0 {
    background: linear-gradient( rgb(12 12 12 / 8%), rgb(2 2 2 / 6%)), url(../../images/pics/header/cs16.webp) no-repeat;
    background-size: cover;
}

.csshead, .gm1 {
    background: linear-gradient( rgb(12 12 12 / 8%), rgb(2 2 2 / 6%)), url(../../images/pics/header/css.webp) no-repeat;
    background-size: cover;
}

.csgohead {
    background: linear-gradient( rgb(12 12 12 / 8%), rgb(2 2 2 / 6%)), url(../../images/pics/header/csgo.webp) no-repeat;
    background-size: cover;
}

.cs2head, .gm3 {
    background: linear-gradient( rgb(12 12 12 / 8%), rgb(2 2 2 / 6%)), url(../../images/pics/header/cs2.webp) no-repeat;
    background-size: cover;
}

.rusthead, .gm8 {
    background: linear-gradient( rgb(12 12 12 / 8%), rgb(2 2 2 / 6%)), url(../../images/pics/header/rust.webp) no-repeat;
    background-size: cover;
}

.gmodhead, .gm10 {
    background: linear-gradient( rgb(12 12 12 / 8%), rgb(2 2 2 / 6%)), url(../../images/pics/header/gmod.webp) no-repeat;
    background-size: cover;
}

.arkhead, .gm11 {
    background: linear-gradient( rgb(12 12 12 / 8%), rgb(2 2 2 / 6%)), url(../../images/pics/header/ark.webp) no-repeat;
    background-size: cover;
}

.tf2head, .gm6 {
    background: linear-gradient( rgb(12 12 12 / 8%), rgb(2 2 2 / 6%)), url(../../images/pics/header/tf2.webp) no-repeat;
    background-size: cover;
}

.samphead, .gm4, .gm13 {
    background: linear-gradient( rgb(12 12 12 / 8%), rgb(2 2 2 / 6%)), url(../../images/pics/header/samp.webp) no-repeat;
    background-size: cover;
}

.minecrafthead, .gm5 {
    background: linear-gradient( rgb(12 12 12 / 8%), rgb(2 2 2 / 6%)), url(../../images/pics/header/minecraft.webp) no-repeat;
    background-size: cover;
}

.ts3head, .gm12 {
    background: linear-gradient( rgb(12 12 12 / 8%), rgb(2 2 2 / 6%)), url(../../images/pics/header/ts3.webp) no-repeat;
    background-size: cover;
}

.dayzhead, .gm7 {
    background: linear-gradient( rgb(12 12 12 / 8%), rgb(2 2 2 / 6%)), url(../../images/pics/header/dayz.webp) no-repeat;
    background-size: cover;
}

.fivemhead, .gm9 {
    background: linear-gradient( rgb(12 12 12 / 8%), rgb(2 2 2 / 6%)), url(../../images/pics/header/fivem.webp) no-repeat;
    background-size: cover;
}


/* Sort new */

#serversList
{
    width: 80%;
    margin: auto;
    margin-bottom: 0;
	display: flex;
    flex-direction: column;
	margin-top: 12px;
}

#content
{
    margin: 0 auto;
    max-width: 1200px;
	padding-top: 30px;
}

#centerContent
{
	margin: 0 auto;
    width: 100% !important;
}

.filter {
    position: absolute;
    left: 20;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    background: #4b4f56;
    padding: 12px;
    border-radius: 7px;
    display: flex;
}

.boxs {
    width: 200px;
    color: gray;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.searbut {
    float: left;
}

.search {
    position: absolute;
    left: 80;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    background: #ffffff;
    padding: 9px;
    border-radius: 7px;
    display: flex;
    box-shadow: 0 1px 0 0 #dfdfe3, 0 0 0 1px #e9e9ec;
    max-width: 100%;
}



.lists {align-items: center;background-color: rgb(255, 255, 255);border-radius: 8px;padding: 16px;max-width: 100%;direction: ltr;justify-content: space-between;box-shadow: rgb(223, 223, 227) 0px 1px 0px 0px, rgb(233, 233, 236) 0px 0px 0px 1px;font-family: Roboto, sans-serif;transition: transform 0.3s ease-in-out 0s;margin-bottom: 12px;}

.lists:hover
{
    background-color: #f9f9f9;
    transition: transform .3s ease-in-out;

}

.aligl {
    display: flex;
    align-items: center;
    max-width: 100%;
	justify-content: space-between;
}

.srvdata {
    align-items: center;
    display: flex;
    flex: 0 0 calc(50% - -30px);
    order: 0;
    padding: 0px 12px 0px 0px;
    width: auto;
    max-width: 100%;
    gap: 10px;
}

.srvconnect {
    order: 3;
    width: auto;
    display: flex;
    justify-content: center;
    gap: 9px;
    max-width: 100%;
}



.infosrv {
    background-color: #2b9f37;
    border-radius: 6px;
    color: #fff;
    display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 16px;
    padding: 8px 10px;
    text-align: center;
    width: 100px;
}

.titleserv {
    color: rgb(75, 79, 86);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    background-color: rgb(255, 255, 255);
    border-radius: 8px;
    flex-wrap: nowrap;
    padding: 16px;
    max-width: 100%;
    box-shadow: rgb(223, 223, 227) 0px 1px 0px 0px, rgb(233, 233, 236) 0px 0px 0px 1px;
    font-family: Heebo, sans-serif;
    margin: 10px 0;
    position: relative;
	    justify-content: center;
}

/*
.titservip span {
    font-size: 17px;
    font-weight: 500;
    background: -webkit-linear-gradient(127.18deg, #ffbc6c, #b0763f), #f64a35;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
*/
.titservip span {
    font-size: 17px;
    font-weight: 500;
    background: -webkit-linear-gradient(127.18deg, #6caeff, #3f66b0), #35a4f6;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.numbsrv {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    margin: 0 13px 0 5px;
    color: #192544;
    width: 20px;
}


.vipmap {
    border-radius: 4px;
    height: 50px;
    width: 80px;
    background-size: cover;
    position: relative;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: lightgrey;
    font-size: 13px;
    cursor: pointer;
	-webkit-text-fill-color: lightgrey;
}

.vipmap span {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000000b5;
    border-radius: 4px;
	  text-transform: uppercase;

}

.vipnc {
    align-items: center;
    display: flex;
    width: auto;
}

.viname {
	width: 100%;
}

.viname a {
	color: #1b1b27;
	line-height: 18px;
	word-break: break-word;
	text-overflow: ellipsis;
	overflow: hidden;
	width: 100%;
	align-items: center;
	gap: 5px;
}

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

.viname a:hover {
	color: #006fee;

}


.vipip {
    align-items: center;
    display: flex;
    padding: 6px 0 0;
}


.v2ip {
    color: #4b4f56;
    font-size: 13px;
    line-height: 15px;
}

.butcopy {
    color: #a0a0a9;
    display: flex;
    margin: -3px -3px -3px 3px;
    padding: 3px;
    cursor: pointer;
}

.butcopy:hover
{
color: #007eff;
}

.server-ping-badge {
    display: inline-flex;
    align-items: center;
    background: #f1f5f9;
    color: #64748b;
    padding: 2.5px 6px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    margin-right: 8px;
    vertical-align: middle;
    border: 1px solid #e2e8f0;
    line-height: 1;
    direction: ltr;
    font-family: Heebo, sans-serif;
    transition: all 0.2s ease;
}

.vipl2 {
    display: flex;
    order: 1;
    width: 100%;
    justify-content: center;

}

.orderline2 {
    padding: 20px 40px 0 0;
}

.vipls {
 min-width: 50px;
}

.plstit {
    color: #888891;
    display: block;
    font-size: 12px;
    line-height: 15px;
    margin: 0 0 5px;
    text-align: right;
}

.vinpls {
    color: #1b1b27;
    text-align: right;
    display: flex;
    align-items: center;
    gap: 5px;
	justify-content: flex-end;
}

.vinpls img {
    width: 17px;
    height: 17px;
    border-radius: 50%;
}


.vipnum {
    color: #1b1b27;
    line-height: 18px;
    margin: 0 6px 0 0;
    order: 1;
}

.srvlinkc:hover

{

    background-color: #0162c0;
}


.servord2 {
    display: flex;
    justify-content: center;
    margin: -20px 0px 0px auto;
    order: 1;
    width: auto;
}


/*  Marked  */

.marked {
    background: radial-gradient(
		circle at 100%,
		#a8befd,
		#7894f9 50%, 
		#c7ddfe 75%,
		#8da5fd 75%);
	
    background-size: 200% auto;
    animation: animatedTextGradient 2.5s linear infinite;
    }

@keyframes animatedTextGradient {
  to {
    background-position: 200% center;
  }
}

.marked>div {
   background: radial-gradient(
    circle at 100%,
    #ffffff,
    #e1e6ff 50%,
    #ffffff 75%,
    #e1e4ff 75%
  );
   font-weight: 600;
   background-size: 200% auto;
   color: #000;
   background-clip: text;
   -webkit-text-fill-color: transparent;
   animation: animatedTextGradient 3.5s linear infinite;
}

@keyframes animatedTextGradient {
  to {
    background-position: 200% center;
  }
}


.markedc {
    background: #00000082 !important;
    -webkit-text-fill-color: #e0e8ff;
    font-weight: 600;
}