body {

    font-family: 'Rubik', sans-serif;
    background-color: var(--dark-bg);
}

.rwd-test {

    width: 100%;
    height: 25px;
    background-color: pink;
}

* {

    outline: 0px transparent !important;

}

:root {
    --dark-bg: #020512;
    --dark-color: #040718;
    --support-color: #60657B;
    --support-secondary: #6C7C8B;
    --low-border: rgba(96, 101, 123, 0.15);
    --boxes-color: #141622;
    --green-color: rgba(146, 205, 39, 1);
    --green-dark-color: rgba(26, 178, 30, 1);
    --orange-color: rgba(254, 153, 1, 1);
    --orange-dark-color: rgba(195, 95, 23, 1);
    --low-orange: rgba(254, 153, 1, 0.1);
    --grey-color: rgba(78, 89, 107, 1);
    --grey-dark-color: rgba(43, 51, 64, 1);
    --white: #fff;
    --low-white-opacity-65: rgba(255, 255, 255, 0.65);
    --other-dark: #0B0D1C;
}

.font-green {

    color: var(--green-color) !important;
    font-weight: 500;
}

.font-orange {

    color: var(--orange-color) !important;
    font-weight: 500;
}

.green-gradient {

    background: -moz-linear-gradient(326deg, var(--green-color) 0%, var(--green-dark-color) 100%);
    background: -webkit-linear-gradient(326deg, var(--green-color) 0%, var(--green-dark-color) 100%);
    background: linear-gradient(326deg, var(--green-color) 0%, var(--green-dark-color) 100%);

}

.orange-gradient {

    background: -moz-linear-gradient(326deg, var(--orange-dark-color) 0%, var(--orange-color) 100%);
    background: -webkit-linear-gradient(326deg, var(--orange-dark-color) 0%, var(--orange-color) 100%);
    background: linear-gradient(326deg, var(--orange-dark-color) 0%, var(--orange-color) 100%);

}

.grey-gradient {

    background: -moz-linear-gradient(326deg, var(--grey-color) 0%, var(--grey-dark-color) 100%);
    background: -webkit-linear-gradient(326deg, var(--grey-color) 0%, var(--grey-dark-color) 100%);
    background: linear-gradient(326deg, var(--grey-color) 0%, var(--grey-dark-color) 100%);

}

/*Button Theme*/
.btn {

    display: inline-block;
    font-weight: 400;
    color: transparent;
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: .575rem .75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border-radius: 3px;
    transition: color .15s ease-in-out,

}

.btn:hover {

    color: var(--white);

}

.btn-setting {

    background-color: #191C2E;
    border: 1px solid rgba(11, 13, 28, 1);
}

.w-45 {

    width: 45% !important;

}

.server-list-add input button {

    margin: 15px 0px;

}

.server-list-add button {

    padding: 0.8rem;

}

.btn-copy {

    border-radius: 3px;
    background-color: var(--support-secondary);
    border: 0;
    padding: 5px 8px;
    margin-left: 5px;
}

.btn-green,
.btn-grey {

    color: var(--white);
    font-weight: 400;
    font-size: 0.875rem;
}

.avatar,
.avatar-xl,
.avatar-big,
.avatar-xs {

    width: 44px;
    height: 44px;
    border: 2px solid var(--green-color);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
}

.avatar-xl {

    width: 54px;
    height: 54px;
    border: 1px solid var(--support-color);

}

.avatar-big {

    width: 74px;
    height: 74px;

}

/*scroll*/

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #2A333B;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.20);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(87, 94, 100, 1);
}

/*Navbar*/
.navbar-toggler i {

    color: var(--white);

}

.navbar {

    background-color: var(--boxes-color);
    border-bottom: 1px solid var(--low-border);
}

.nav-item {

    min-height: 65px;
    display: flex;
    align-items: center;
    transition: box-shadow 0.3s ease-in-out;
}

.my-nav {

    padding: 0rem 1rem;
}

.my-nav .nav-link {

    color: var(--white);
    text-transform: uppercase;
    font-weight: 500;
    font-size: 0.8125rem;
    letter-spacing: 1px;
    transition: color .2s ease-in-out;
}

.my-nav .nav-link:hover {

    color: var(--green-color);

}

.my-nav .nav-item:hover {

    box-shadow: 0px 2px 0px 0px var(--green-color);

}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 2;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky+.content {
    padding-top: 102px;
}

.nav-social {

    padding: 0;
    margin-bottom: 0;

}

.nav-social-item {

    list-style-type: none;

}

.nav-social-link {

    padding-right: 1rem;
    padding-left: .5rem;
    color: var(--support-secondary);

}

.nav-social-link:hover {

    color: var(--green-color);

}

.user a {

    margin-bottom: 0px;
    color: var(--white);
}

.user a:hover {

    text-decoration: none;

}

.user span {

    font-size: 0.8125rem;

}

.dropdown-menu {

    background-color: #020512;
    border-bottom: 1px solid var(--low-border);

}

.dropdown-item {

    color: var(--white);
    font-size: 0.875rem;
    border-bottom: 1px solid var(--low-border);
    padding: .725rem;
}

.dropdown-item:focus,
.dropdown-item:hover {

    background-color: #14192d;
    color: var(--white);
}

/*header*/

.header-main {

    background-image: url('/assets/img/header23.png');
    min-height: 825px;
    background-position: top;
    background-size: 100% auto;
    background-repeat: no-repeat;
    position: relative;
}

.header-static {

    min-height: 550px;
    display: flex;
    align-items: flex-end;
}

.static-box {

    display: flex;
    align-items: center;
    padding: 1.75rem 1.25rem;
    color: var(--white);
    border-radius: 3px;
    border: 1px solid var(--support-color);
    margin-bottom: 15px;
}

.green-border {

    border: 1px solid var(--green-color) !important;

}

.static-title h5 {

    font-size: 1.25rem;
    font-weight: 500;
    margin-bottom: 0px;
}

.static-title span {

    font-size: 0.875rem;
    color: var(--low-white-opacity-65);
}

.static-value {

    background-color: var(--dark-color);
    padding: .5rem;
    border-radius: 3px;
    font-weight: 500;
    font-size: 0.875rem;
}

/*Main Wrapper*/


.main-wrapper {

    position: relative;
    top: -200px;

}

.title-page {

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 15px;
    min-height: 55px;

}

.bt-1 {

    border-top: 1px solid var(--low-border);

}

.standard-title {

    justify-content: flex-start;

}

.standard-title h5 {

    color: var(--white);
    margin-bottom: 0px;
    font-weight: 500;
}

.standard-title a {

    color: var(--low-white-opacity-65);
    text-decoration: none;
    font-size: 0.875rem;
}

.standard-title a:hover {

    text-decoration-color: none;

}

.title-page span {

    font-weight: 500;
    color: var(--orange-color);

}

.title-page span:nth-child(2) {

    color: var(--white);

}

.table thead th {

    border: 0;

}

.table td,
.table th {

    border: 0;
    vertical-align: middle;
    font-size: 0.875rem;
    color: var(--white);
    font-weight: 400;
    word-break: keep-all;
}

tbody tr th {

    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;

}


.table thead th {

    font-size: 0.9125rem;
    color: var(--support-color);
    font-weight: 500;
}

.panel-table {

    background-color: var(--boxes-color);
    border-collapse: collapse;
    border: 2px solid var(--low-border);
}

.table td,
.table th .panel-table-bottom {

    border-bottom: 1px solid var(--low-border);
}

.table-history .table td {

    padding: 1rem .75rem;

}

.table-item {

    display: inline-flex;
    align-items: center;
    justify-content: center;

}

.table-img {

    width: 25%;
    height: auto;
    margin-right: 10px;
}

.table-item-name h6 {

    margin-bottom: 0px;
    font-size: 0.875rem;
}

.table-item-name span {

    font-size: 0.75rem;
    color: var(--low-white-opacity-65);
}

.table-item img {

    width: 9%;
    height: auto;
    margin-right: 10px;
}

.panel-orange {

    border: 2px solid var(--orange-color);
    background-color: var(--low-orange);
}

/*sidebar*/

.sidebar-panel {


    border-radius: 4px;
    background-color: var(--boxes-color);
    border: 1px solid var(--low-border);
    margin-bottom: 15px;
}

.sidebar-title {

    border-bottom: 1px solid var(--low-border);

}

.sidebar-title h5 {

    margin-bottom: 0px;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--white);
    font-size: 1rem;
}

.sidebar-content {

    padding: 15px;

}

.text-border {

    padding-bottom: 15px;
    padding-top: 15px;
    border-bottom: 1px solid var(--low-border);
}

.text-border span {

    font-size: 0.875rem;
    color: var(--white);
}

.text-border a {

    font-size: 0.8rem;
    margin-left: 5px;
}

.player-panel {

    display: flex;
    border-bottom: 1px solid var(--low-border);
    align-items: center;
    padding-bottom: 15px;
    padding-top: 15px;
}

.player-panel:nth-of-type(1) {

    padding-top: 0px;

}

.player-panel:nth-of-type(5) {

    border-bottom: 0;

}

.player-panel span {

    color: var(--support-secondary);
    font-size: 0.875rem;
}

.player-panel a {

    font-size: 1rem;
    font-weight: 500;
    color: var(--white);

}

.player-info img {

    margin-right: 5px;
    margin-left: 8px;
    margin-top: -2px;
}

.player-panel a:hover {

    text-decoration: none;

}

.giveaway-item {

    min-height: 175px;
    background-color: red;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(20, 22, 34);
    background: -moz-linear-gradient(0deg, rgba(20, 22, 34, 1) 0%, rgba(4, 7, 24, 1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(20, 22, 34, 1) 0%, rgba(4, 7, 24, 1) 100%);
    background: linear-gradient(0deg, rgba(20, 22, 34, 1) 0%, rgba(4, 7, 24, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#141622", endColorstr="#040718", GradientType=1);
}

.giveaway-item img {

    width: 215px;
    height: auto;
}

.giveaway-name {

    font-size: 1.25rem;
    padding: 15px 0px;
    color: var(--white);
    font-weight: 500;
}

.giveaway-info {

    padding: 10px 0px;

}

.giveaway-info h6 {

    color: var(--support-color);
    font-weight: 400;
}

.giveaway-info span {

    color: var(--white);
    font-size: 1.125rem;
    font-weight: 500;
}

.sidebar-footer-panel {

    padding: 15px 0px;

}

.border-1 {

    border-right: 1px solid var(--low-border);

}

.border-2 {

    border-top: 1px solid var(--low-border);


}

.border-3 {

    border-bottom: 1px solid var(--low-border);

}

.sidebar-content p {

    color: var(--low-white-opacity-65);
    font-size: 0.875rem;
    line-height: 24px;
}

.carousel-inner {

    padding: 3rem 0rem;

}

.carousel-item img {

    background: no-repeat center center;
    width: 250px !important;
    height: auto;
    margin: 0 auto;
}

/*Withdraw.html*/
.with-bg,
.ref-bg,
.dl-bg,
.panel-bg,
.partner-bg {

    background-image: url("../assets/img/with_bg.png");
    background-repeat: no-repeat;
    background-position: top center;
}

.panel-bg {

    background-image: url("../assets/img/panel-bg.png");
    background-position: center 5%;
}

.partner-bg {

    background-image: url("../assets/img/bg-partner.png");
}

.ref-bg {

    background-image: url("../assets/img/ref-bg.png");
    background-position: center 10%;
}

.dl-bg {

    background-image: url("../assets/img/dl-bg.png");
    background-position: center 10%;
}

.pt-100 {

    padding-top: 200px;

}

.panel {

    background-color: var(--boxes-color);
    border: 1px solid var(--low-border);
    padding: 1rem 0.5rem;
    border-radius: 4px;
    align-items: center;
}

.btn-refresh,
.form-search {

    padding: 0.8rem;
    border-radius: 4px;
    background-color: #0e101d;
    border: 1px solid var(--low-border);
    color: var(--low-white-opacity-65);

}

.form-gift {

    background-color: var(--orange-color) !important;
    color: var(--white) !important;
}

.form-gift::placeholder {

    color: var(--white);

}

.form-classic,
.form-gift {

    padding: 0.8rem;
    border-radius: 4px;
    background-color: #0e101d;
    border: 1px solid var(--low-border);
    color: var(--low-white-opacity-65);
    width: 100%;
}

.form-search:focus {

    outline-offset: 0px;

}

.btn-refresh img {

    width: 75%;
    height: auto;
    transition: transfrom 500ms ease-in-out;
    transform: rotate(0deg);
}

.btn-refresh img:hover {

    transform: rotate(145deg);

}

.p-35 {

    padding: 0px 100px 100px 100px;

}

.withdraw-select h6 {

    font-weight: 400;
    color: var(--white);
    font-size: 0.875rem;
}

.withdraw-select span {

    font-weight: 500;
    color: var(--white);

}

.withdraw-wrapper-items {

    height: 575px;
    overflow-y: scroll;
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 15px;
}

.withdraw-item {

    background-color: var(--boxes-color);
    margin-bottom: 15px;
    background: rgb(20, 22, 34);
    background: -moz-linear-gradient(0deg, rgba(20, 22, 34, 1) 0%, rgba(4, 7, 24, 1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(20, 22, 34, 1) 0%, rgba(4, 7, 24, 1) 100%);
    background: linear-gradient(0deg, rgba(20, 22, 34, 1) 0%, rgba(4, 7, 24, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#141622", endColorstr="#040718", GradientType=1);
    border-radius: 4px;
    border: 1px solid var(--low-border);
    transition: border 500ms linear;
}

.withdraw-item:hover,
.active-item {

    border: 1px solid var(--green-color);

}

.blocked-item:hover {

    border: 1px solid #b60303;
    ;

}

.img-item,
.name-item {

    padding: 15px;

}

.name-item h5 {

    margin-bottom: 0;
    color: var(--white);
    font-size: 1rem;
    font-weight: 500;
}

.img-item {

    min-height: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img-item img {

    width: 85%;
    height: auto;

}

.blocked-item {

    filter: grayscale(0.3);

}

.c-blocked {

    color: #b60303;

}

.name-item span {

    color: var(--low-white-opacity-65);
    font-size: 0.75rem;
    text-transform: uppercase;
}

/*Panel.html*/

.page-wrapper {

    padding: 0px 20px;

}

.nav-pills .nav-link {

    color: var(--white);
    font-weight: 400;
    font-size: 0.875rem;

}

.nav-pills .nav-link {

    border-radius: 0;

}

.nav-pills {

    border-bottom: 1px solid var(--low-border);

}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {

    color: var(--green-color);
    border-bottom: 1px solid var(--green-color);
    background-color: transparent;
    height: 65px;
    display: flex;
    align-items: center;

}

.panel-user-info {

    padding: 35px 35px;
    display: flex;
    margin-bottom: 15px;
}

.panel-user-info span {

    color: var(--white);
    font-size: 0.875rem;
    letter-spacing: 1px;
}

.panel-user-info a {

    font-size: 1.5rem;
    font-weight: 500;
}

.trade-url,
.email-user {

    margin-bottom: 15px;

}

.title-panel-small {

    border-bottom: 1px solid var(--low-border);
    padding: 8px 0;
    color: var(--white);
    margin-bottom: 15px;
}

.widget-add-server {

    background-image: url("../assets/img/bg_light.png");
    min-height: 194px;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0px 25px;
    border: 1px solid var(--green-color);
}

.widget-add-server h5 {

    color: var(--white);
    font-size: 1rem;
    font-weight: 500;
}

.trade-url a {

    margin-top: 15px;
    font-size: 0.75rem !important;
}

.card-payment {

    text-align: center;
    font-size: 0.8125rem;
    color: var(--white);
    padding: 10px;
    min-height: 365px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.card-payment img {

    margin-bottom: 20px;

}

.card-payment span {

    padding: 0px 0px 15px 0px;
}

.card-payment select {

    padding: 0.8rem;
    border-radius: 4px;
    background-color: var(--dark-color);
    border: 1px solid var(--low-border);
    color: var(--low-white-opacity-65);
    width: 100%;

}

.card-payment option {


    padding: 1rem;

}

.card-payment {

    margin-bottom: 15px;

}

.card-payment input {

    margin-bottom: 10px;

}


/*server-list.html*/

.sidebar-modal {

    background-color: var(--low-border);
    height: 100%;
    width: 100%;
    padding: 15px;
}

.bp-credit span>img {

    margin-top: -4px !important;

}

.bp-credit span {

    font-size: 1rem;

}

.bp-wrapper {

    padding: 15px;

}

.alert-success {

    background-color: var(--orange-color);
    color: var(--white);
    border: var(--orange-dark-color);
}

.panel-secondary {

    border: 1px solid var(--low-border);
    padding: 15px;
}

.panel-secondary small {

    color: var(--orange-color);

}

.panel-secondary .badge {

    font-size: 0.875rem;
    font-weight: 400;
    position: relative;
    top: -4px;
}


.bs-alert {

    width: 100%;
    margin-top: 10px;
    background-color: var(--green-dark-color);
    border: 1px solid var(--green-color);
    color: var(--white);
    padding: 15px;
    border-radius: 4px;
}

/*Partner.html*/

.partner-item {

    min-height: 150px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 20px;
}

.partner-item a {

    color: var(--low-white-opacity-65);
    font-size: 0.75rem;
}

.partner-logo {

    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-item img {

    width: 120px;
    height: auto;
}

.partner-footer {

    display: flex;
    width: 100%;
    height: 60px;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--low-border);
    margin-top: 10px;
}

.pt-50 {

    padding-top: 25px;

}

/*affiliates.html*/

.invite-number {

    min-height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.invite-number small {

    color: var(--orange-color);

}

.invite-number span {

    font-size: 2.3rem;
    color: var(--green-color);
    font-weight: 500;
}

.table-user {

    align-items: center;
}

.table-user a {

    color: var(--green-color);
    font-weight: 500;
}

/*Download.html*/

.dl-box {

    margin-bottom: 15px;

}

.dl-box h5 {

    font-size: 1.2rem;
    color: var(--white);
}

.dl-box p {

    font-size: 0.75rem;
    color: var(--white);
    padding-top: 10px;
}

.dl-box img {

    width: 100%;
    height: 235px;
    margin-top: 10px;
}

/*Footer*/
.main-footer {

    padding: 35px;
    background-color: #020512;
}

.footer-column h5 {

    text-transform: uppercase;
    color: var(--white);
    font-size: 1rem;
    margin-bottom: 15px 0px;
}

.footer-brand p {

    padding-top: 10px;
    color: var(--support-color);
    line-height: 25px;
    font-size: 0.875rem;
}

.footer-nav {

    padding: 0px;
    margin: 0px;
}

.footer-nav-item {

    list-style-type: none;
    padding: 5px 0px;
    transition: border 500ms ease-in-out;
}

.footer-nav-link {

    color: var(--support-secondary);
    font-size: 0.875rem;
}

.footer-nav-link:hover {

    text-decoration: none;
    color: var(--white);
}

.footer-payment {

    padding: 20px 0px;

}

.footer-text {

    color: var(--support-color);

}

.info {

    color: var(--white);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1px;
}


/*Modal style*/


.modal-content {

    border-radius: 4px;
    border: 1px solid var(--low-border);
    background-color: var(--boxes-color);

}

.modal-header {

    border-bottom: 1px solid var(--low-border);
    color: var(--white);
}

.modal-footer {

    border-top: 1px solid var(--low-border);

}

/*Chart JS*/

.chart-js {

    min-height: 350px;
    background-color: pink;

}


/*26.07.2020 - MOdal List Banned */


.alert-list-modal p {

    font-size: 1rem;
    color: var(--green-color);
}

.text-normal {

    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    min-height: 50px;
}

.list-content {

    height: 350px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.list-modal-player {

    min-height: 75px;
    border: 1px solid var(--low-border);
    display: flex;
    align-items: center;
    padding: 20px;
    position: relative;
    margin-bottom: 30px;
}

.list-modal-player .overlay {

    z-index: 2;
    color: red;
    opacity: 0;
    position: absolute;
    background-color: rgba(11, 13, 28, 0.5);
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5 ease-in-out;
}

.list-modal-player .overlay:hover {

    opacity: 1;

}

.list-row {

    padding: 20px 0px;

}

.list-title {

    padding: 15px 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--low-border);
}

.list-title h5 {

    display: inline;
    font-size: 1.2rem;
    color: var(--white);
    padding-top: 20px;
    padding-bottom: 20px;
}

.list-player-name {

    flex-direction: column;
    display: flex;
    padding-left: 15px;
}

.list-player-name span {

    color: var(--white);
    font-size: 1rem;
}


/*SLIDER LOGOS*/


.swiper-slide {

    width: 100%;
    height: 150px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-wrapper {

    height: 150px;

}

.swiper-slide img {

    width: 150px;
    height: auto;
}

.swiper-button-next,
.swiper-button-prev {

    color: rgba(26, 178, 30, 1) !important;

}

.swiper-button-next:after,
.swiper-button-prev:after {

    font-size: 1.25rem !important;

}


/*list table*/



.list-group-server {

    list-style-type: none;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    flex: 0 0 100%;
    padding-left: 0px;
}




.server-block,
.server-footer {

    flex: 0 0 100%;
    background-color: var(--boxes-color);
    border-collapse: collapse;
    border: 1px solid var(--low-border);
    padding: 0.75em;
    display: flex;

}

.cell {

    display: table-cell;
    padding: 10px 10px;
    vertical-align: middle;
    text-align: center;
    font-size: 0.875rem;
    color: var(--white);
    align-items: center;
    justify-content: flex-start;
    display: flex;
}

.server-number,
.server-game,
.server-name,
.server-ip,
.server-player,
.server-map,
.server-credit,
.server-connect {

    min-width: 250px;
    max-width: 350px;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;

}

.server-number,
.server-game {

    min-width: 35px;
    max-width: 55px;
}

.server-name {

    min-width: 400px;
    max-width: 475px;
}

.server-player,
.server-map {

    min-width: 120px;
    max-width: 120px;
}

.server-credit {

    min-width: 70px;
    max-width: 300px;
}

.server-connect,
.server-credit {

    justify-content: flex-end;

}

.server-connect {

    min-width: 330px;
    max-width: 375px;
}

.server-footer {

    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.server-vote {

    display: flex;
    align-items: center;
    color: var(--white);
    font-size: 0.875rem;
}

.server-player-online {

    display: flex;
    align-items: center;
}

.server-player-online span {

    font-size: 0.875rem;
    color: var(--white);
}

.server-player-online .player-online {

    margin-left: 10px;

}

.btn-like {

    border: 0;
    background-color: var(--dark-color);
    border-radius: 50%;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px 8px;
    transition: background 0.3s ease-in-out;
}

.btn-like:hover {

    background-color: var(--green-color);
    box-shadow: 0px 0px 10px 0px rgba(26, 178, 30, 0.35);
}

.btn-like:focus {

    background-color: var(--green-dark-color);

}

.avatar-xs {

    width: 40px;
    height: 40px;
}

.status {

    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 10px;
}

.status-offline {

    background-color: #b60303;
    box-shadow: 0px 0px 10px 0px #c50505;

}

.status-online {

    background-color: var(--green-color);
    box-shadow: 0px 0px 10px 0px rgba(26, 178, 30, 0.35);

}

/*Profile Server*/

.layout {

    min-height: 50vh;

}

.sidebar-right {

    background-color: var(--other-dark);
    min-height: 100%;
    border: 1px solid var(--low-border);
    padding: 25px;
}

.vote-box {

    min-height: 115px;
    border: 1px solid var(--low-border);
    background-color: var(--low-border);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    transition: border .3s ease-in-out;
    cursor: pointer;
    margin-bottom: 20px;
}
.vote-text {

    font-size: 0.875rem;
    color: var(--white);
}
.vote-box a {

    display: block;
    font-weight: 500;
    font-size: 1.25rem;
    color: var(--white);
}
.vote-box a:hover {

    text-decoration: none;

}
.vote-box a>span{

    display: inline;
    color: var(--green-color);
    font-size: 1.25rem;
}
.vote-box .text-info {

    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: underline;
}
.vote-box span {

    color: var(--white);
    font-size: 0.75rem;
    padding: 5px 0px;
}

.vote-box:hover {

    border: 1px solid var(--green-color);

}

.server-container {

    min-height: 50vh;
    padding-top: 50px;
}

#bg-map {

    background-image: url("../assets/img/map.png");
    /* height: 640px; */
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top;
}

.server-main-info {

    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--low-border);
    padding-bottom: 35px;
}

.server-detalis-content h4 {

    color: var(--white);
    font-weight: 600;
}

.server-detalis-info {

    display: flex;
    align-items: center;

}
.mod-badge {

    padding: 2px 4px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    margin-left: 3px;
}

.mod-ffa {

    border: 1px solid var(--orange-color);
    background: -moz-linear-gradient(326deg, var(--orange-dark-color) 0%, var(--orange-color) 100%);
    background: -webkit-linear-gradient(326deg, var(--orange-dark-color) 0%, var(--orange-color) 100%);
    background: linear-gradient(326deg, var(--orange-dark-color) 0%, var(--orange-color) 100%);

}
.server-detalis-item {

    margin-right: 10px;
    border-right: 1px solid var(--low-border);
    padding-right: 10px;
    color: var(--white);
    font-size: 0.875rem;
    display: flex;
}
.server-detalis-item span {

    margin-right: 5px;

}
.server-logo {

    height: 140px;
    width: 140px;
    background-color: var(--boxes-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    border: 1px solid var(--low-border);
}

.server-logo img {

    max-width: 125px;
    height: auto;
}
.server-detalis-item a {

    color: var(--green-color);

}

.server-box, .user-box {

    min-height: 100px;
    border: 1px solid var(--low-border);
    background-color: var(--low-border);
    display: flex;
    align-items: center;
    /* flex-wrap: wrap; */
    padding: 0px 15px;
    margin-top: 30px;
}

.user-box {

    margin-top: 0px;

}

.server-box-info, .user-box-info {

    padding-left: 10px;

}
.server-box-info h6, .user-box-info h6{

    margin-bottom: 0px;
    color: var(--white);
    font-weight: 400;
}
.server-box-info span, .user-box-info span {

    color: var(--green-color);
    font-weight: 500;
    font-size: 1.5rem;
}

.server-box-info small, .user-box-info small{

    display: block

}
.user-box-info small {

    color: red;

}
.user-box-info a {

    font-size: 1.25rem;
    color: var(--white);
}
.steam-id {

    font-size: 0.75rem!important;
    color: var(--white)!important;
    font-weight: 400!important;
}
.text-orange {

    color: var(--orange-color)!important;

}
.server-box-icon {

    border-radius: 50%;
    height: 60px;
    width: 60px;
    border: 1px solid var(--low-border);
    background-color: var(--boxes-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-server-container {

    padding-top: 35px;
}

.about-server-title h5 {

    position: relative;
    padding-left: 10px;
    color: var(--white);
    font-size: 1.125rem;
    font-weight: 500;
    margin-bottom: 25px;
}

.about-server-title h5::before {

    content: '';
    width: 3px;
    height: 100%;
    background-color: green;
    position: absolute;
    left: 0;
}

.about-server-item {

    display: flex;
    height: 55px;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: var(--low-border);
    border-top: 1px solid var(--low-border);
    border-left: 1px solid var(--low-border);
    border-right: 1px solid var(--low-border);
    color: var(--white);
    font-size: 0.875rem;
}

.status-ip {

    display: flex;
    align-items: center;
}