@font-face {
    font-family: century_gothic;
    src: url(../fonts/century_gothic.woff);
}
@font-face {
    font-family: crom_v1;
    src: url(../fonts/crom_v1.woff);
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

ul, li {
    list-style: none;
}

body {
    font-family: 'Montserrat';
    font-size: 14px;
    font-weight: 400;
    word-wrap: break-word;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
}


/* ----- POSITION ----- */

.flx {
    display: flex;
}
.mar-r-12 {
    margin-right: 12px;
}





/* ----- BACKGROUND ----- */
.bg-absolute {
    position: absolute;
    z-index: -100;
    top: 0;
    left: 0;
    background-size: cover;
    filter: grayscale(70%);
    -webkit-filter: grayscale(70%); /* Safari 6.0 - 9.0 */
    background-position: center 50px;
    height: 805px;
    width: 100%;
}
    .bg-absolute::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(180deg, rgba(38,38,38,1) 0%, rgba(38,38,38,.3) 50%, #0A0A0A 100%)
    }

.bg-fixed {
    position: fixed;
    z-index: -100;
    top: 0;
    left: 0;
    background-size: cover;
    filter: grayscale(70%);
    -webkit-filter: grayscale(70%); /* Safari 6.0 - 9.0 */
    background-position: 100% 50px;
    height: 100vh;
    width: 100vw;
}
    .bg-fixed::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(rgba(0,0,0,.1),#0A0A0A 90%);
        top: 0;
        min-height: 100vh;
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }





/* ----- LAYOUT ----- */

main {
    position: absolute;
    width: 100%;
    padding: 50px 0 0 0;
    min-height: 100vh;
    background-color: #262626;
    z-index: 0;
}

footer {
    font-family: 'Play', sans-serif;
    font-size: 11px;
    position: absolute;
    height: 150px;
    bottom: 0;
    margin: 0 auto;
    max-width: 940px;
    color: grey;
    z-index: 1;
}
    footer p {
        padding: 5px 15px;
    }





/* ----- HEADER ----- */

header.header-style {
    padding: 0 1rem;
    min-height: 50px;
    background-color: #262626 !important;
    -webkit-box-shadow: 0px 4px 10px -3px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 4px 10px -3px rgba(0,0,0,0.75);
    box-shadow: 0px 4px 10px -3px rgba(0,0,0,0.75);
}

    header.header-style .header-brand {
        font-family: crom_v1;
        color: #edb82b;
        padding: 0 10px 8px 10px;
        line-height: 42px;
        font-size: 44px;
        outline: none;
    }
    header.header-style .header-brand:hover {
        color: #edb82b;
    }

    header.header-style .navbar-brand {
        display: none;
        outline: none;
    }
    @media (min-width: 576px) {
        header.header-style .navbar-brand {
            display: block
        }
    }

header.header-style ul.navbar-nav li.nav-item a.nav-link {
    padding: 17px 8px;
    transition: padding .3s, color .1s;

    color: #fcfcfc;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    font-family: Montserrat;
    outline:none;
    text-decoration:none;
}
    header.header-style ul.navbar-nav li.nav-item a.nav-link:hover {
        color: #edb82b;
    }

header.header-style ul.navbar-nav li.nav-item .flag-icon {
    background-size: cover;
    display: inline-block;
    width: 20px;
    height: 14px;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 1px;
    vertical-align: -3px;
    border: 1px solid transparent;
    margin-right: 5px;
}

.header-login-form {
    top: 0;
    position: fixed;
    right: 1rem;
}

header.header-style a.account-enter-link {
    padding: 17px 8px;
    transition: padding .3s, color .1s;
    color: #fcfcfc;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    font-family: Montserrat;
    outline: none;
    text-decoration: none;
}
    header.header-style a.account-enter-link:hover {
        color: #edb82b;
    }

@media (min-width: 576px) {
    .header-login-form {
        top: unset;
        position: relative;
        right: unset;
    }
}
@media (min-width: 768px) {
    header.header-style ul.navbar-nav li.nav-item a.nav-link {
        padding-left: 16px;
        padding-right: 16px;
    }
    header.header-style a.account-enter-link {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (min-width: 992px) {
    header.header-style ul.navbar-nav li.nav-item a.nav-link {
        padding-left: 24px;
        padding-right: 24px;
    }
    header.header-style a.account-enter-link {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (min-width: 1200px) {
    header.header-style ul.navbar-nav li.nav-item a.nav-link {
        padding-left: 32px;
        padding-right: 32px;
    }
    header.header-style a.account-enter-link {
        padding-left: 32px;
        padding-right: 32px;
    }
}

header.header-style button.navbar-toggler {
    outline: none;
    border: none;
    border-radius: 0;
    padding: 0 10px 8px 0;
    font-size: 0;
}

header.header-style .header-address-link {
    color: #fcfcfc;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    font-family: Montserrat;
    outline: none;
    text-decoration: none;
    flex: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: padding .3s, color .1s;
    text-align: left;
}
@media (max-width: 575.98px) {
    header.header-style .header-address-link {
        text-align: center;
        padding: 0 84px 0 50px;
        width: 100%;
        position: absolute;
        z-index: -1;
        top: 0;
        line-height: 50px;
    }
}

/* HEADER DROPDOWN-MENU */
@keyframes dropdownAnimation {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: none;
    transform: translate3d(0, 0px, 0);
  }
}

header.header-style div.dropdown-menu-style {
    background-color: #262626;
    border: none;
    border-radius: 0;
    color: #fcfcfc;
    margin: 0;
    padding: 0 0 .5rem 0;
    transition: padding .3s;

    -webkit-animation-name: dropdownAnimation;
    animation-name: dropdownAnimation;
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

    header.header-style div.dropdown-menu-style a.dropdown-item {
        color: #fcfcfc;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 1px;
        font-family: Montserrat;
        padding: .5rem 1.5rem;
        transition: color .1s;
        outline: none;
        background-color: transparent;
    }

        header.header-style div.dropdown-menu-style a.dropdown-item:hover {
            color: #edb82b;
            background-color: transparent;
        }

@media (min-width: 576px) {
    header.header-style div.dropdown-menu-style {
        background-color: #030303;
        border: none;
        border-radius: 0;
        color: #fcfcfc;
        margin: auto 0px auto auto;
        padding: .5rem 0;
        right: 0;
    }

        header.header-style div.dropdown-menu-style a.dropdown-item {
            color: #fcfcfc;
            font-weight: bold;
            text-transform: uppercase;
            font-size: 11px;
            letter-spacing: 1px;
            font-family: Montserrat;
            padding: .5rem 1.5rem;
            transition: color .1s;
            outline: none;
            background-color: transparent;
        }

            header.header-style div.dropdown-menu-style a.dropdown-item:hover {
                color: #edb82b;
                background-color: transparent;
            }
}

/* HEADER DROPDOWN-MENU ACCOUNT */

.header-login-form a.thumbnail {
    line-height: 50px;
    padding-right: 10px;
}
    .header-login-form a.thumbnail img {
        border-radius: 50%;
        width: 32px;
        height: 32px;
        transition: box-shadow .2s;
    }
        .header-login-form a.thumbnail img:hover {
            -webkit-box-shadow: 0px 0px 6px 0px rgba(237,185,43,1);
            -moz-box-shadow: 0px 0px 6px 0px rgba(237,185,43,1);
            box-shadow: 0px 0px 6px 0px rgba(237,185,43,1);
        }
header.header-style .header-login-form div.dropdown-menu-account-style {
    left: unset;
    right: 0;
    text-align: center;

    background-color: #030303;
    border: none;
    border-radius: 0;
    color: #fcfcfc;
    margin: 0;
    padding: .5rem 0;

    -webkit-animation-name: dropdownAnimation;
    animation-name: dropdownAnimation;
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
    header.header-style .header-login-form div.dropdown-menu-account-style img {
        border-radius: 50%;
        width: 64px;
        height: 64px;
        transition: box-shadow .2s;
        margin: 1rem 0;
    }
        header.header-style .header-login-form div.dropdown-menu-account-style img:hover {
            -webkit-box-shadow: 0px 0px 6px 0px rgba(237,185,43,1);
            -moz-box-shadow: 0px 0px 6px 0px rgba(237,185,43,1);
            box-shadow: 0px 0px 6px 0px rgba(237,185,43,1);
        }
    header.header-style .header-login-form div.dropdown-menu-account-style p {
        font-family: 'Play', sans-serif;
        font-size: 16px;
        color: #edb82b;
        letter-spacing: 2px;
        cursor: default;
        word-break: break-word; 
        padding: 0 1.5rem;
    }
    header.header-style .header-login-form div.dropdown-menu-account-style a {
        text-align: left;
        background-color: transparent;
        outline: none;

        color: #fcfcfc;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 1px;
        font-family: Montserrat;
        padding: .5rem 1.5rem;
        transition: color .1s;
    }
        header.header-style .header-login-form div.dropdown-menu-account-style a:hover {
            color: #edb82b;
            background-color: transparent;
        }
    header.header-style .header-login-form div.dropdown-menu-account-style button {
        text-align: left;
        color: #fcfcfc;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 1px;
        font-family: Montserrat;
        padding: .5rem 1.5rem;
        transition: color .1s;
        background-color: transparent;
        outline: none;
    }
        header.header-style .header-login-form div.dropdown-menu-account-style button:hover {
            color: #edb82b;
            background-color: transparent;
        }





/* HOMEPAGE */

.home-description {
    padding-top: 54px;
    transition: padding .3s;
    word-wrap: break-word;
    cursor: default;
}
    .home-description h2 {
        margin: 0;
        line-height: normal;
        font-size: 20px;
        font-weight: 200;
        text-transform: uppercase;
        letter-spacing: 7px;
        color: #edb82b;
        transition: font-size .3s;
    }
    .home-description h1 {
        margin: 0;
        line-height: normal;
        font-weight: 800;
        font-size: 32px;
        color: #fff;
        text-transform: uppercase;
        transition: font-size .3s;
    }
    .home-description h3 {
        font-family: 'Play', sans-serif;
        margin: 4px 0 24px 0;
        font-size: 14px;
        color: #afafaf;
        letter-spacing: 2px;
        transition: font-size .3s;
    }

@media (min-width: 576px) {
    .home-description {
        padding-top: 212px;
    }
        .home-description h2 {
            font-size: 26px;
        }
        .home-description h1 {
            font-size: 40px;
        }
        .home-description h3 {
            font-size: 14px;
        }
}

.home-description .account-enter-link {
    text-decoration: none;
    color: #fff;
    border-radius: 4px;
    background-color: rgba(24,24,24,.7);
    display: inline-block;
    padding: 16px 80px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 7px;
    transition: all .5s;
}
    .home-description .account-enter-link:hover {
        text-decoration: none;
        color: #fff;
        /*background-color: rgba(44,44,44,.9);*/
    }
.glow-on-hover {
    border: none;
    outline: none;
    cursor: pointer;
    position: relative;
    z-index: 0;
}

    .glow-on-hover:before {
        content: '';
        background: linear-gradient(45deg, #43B581, transparent, #edb82b, transparent, #43B581);
        position: absolute;
        top: -2px;
        left: -2px;
        background-size: 400%;
        z-index: -1;
        filter: blur(5px);
        width: calc(100% + 4px);
        height: calc(100% + 4px);
        animation: glowing 20s linear infinite;
        opacity: 0;
        transition: opacity .3s ease-in-out;
        border-radius: 4px;
    }

.glow-on-hover:active {
    color: #000
}

.glow-on-hover:active:after {
    background: transparent;
}

.glow-on-hover:hover:before {
    opacity: 1;
}

    .glow-on-hover:after {
        z-index: -1;
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(24,24,24,.7);
        left: 0;
        top: 0;
        border-radius: 4px;
    }

@keyframes glowing {
    0% { background-position: 0 0; }
    50% { background-position: 400% 0; }
    100% { background-position: 0 0; }
}


/* SERVERS */
/*#servers-bg-1 {
    background-image: url('/images/backgrounds/bg5.jpg');
    z-index: -100;
    position: fixed;
    top: 0;
    left: 0;
    background-size: cover;
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    background-position-x: center;
    background-position-y: 50px;
    -webkit-filter: grayscale(70%);*/ /* Safari 6.0 - 9.0 */
/*filter: grayscale(70%);
}
    #servers-bg-1::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;*/
/*background-image: linear-gradient(180deg, rgba(38,38,38,1) 0%, rgba(38,38,38,.3) 50%, rgba(38,38,38,1) 100%);*/
/*background: linear-gradient(rgba(0,0,0,.1),#0A0A0A 90%)*/
/*opacity: .7;*/
/*}*/
.servers-list {
    margin-top: 30px;
    transition: margin .3s;
    max-width: 1140px;
    padding: 0;
}
@media (min-width: 576px) {
    .servers-list {
        margin-top: 60px;
        padding: 0 15px 0 15px;
    }
}
.statistics {
    display: flex;
    color: #fff;
    text-transform: uppercase;
    padding-bottom: 30px;
    cursor: default;
}
    .statistics > div {
        padding-right: 20px;
        word-break: break-word;
    }
        .statistics > div > small {
            font-family: 'Play', sans-serif;
            font-size: 11px;
            white-space: nowrap;
            transition: font-size .3s;
        }
        .statistics > div > span {
            font-size: 28px;
            display: block;
            line-height: 24px;
            word-break: break-word;
            transition: font-size .3s;
        }
@media (max-width: 575.98px) {

    .statistics > div > small {
        font-size: 9px;
    }
    .statistics > div > span {
        font-size: 26px;
    }
}
@media (max-width: 991.98px) {
    .statistics {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        text-align: center;
    }
        .statistics > div {
            padding-right: 5px;
        }
            .statistics > div:first-child {
                padding-left: 10px;
            }
            .statistics > div:last-child {
                padding-right: 10px;
            }
}




/* ----- TABLES ----- */

.container-table {
    background: rgba(24,24,24,.9);
    box-shadow: 0px 1px 2px 0px rgba(0,0,0,.1), 0px 2px 6px 2px rgba(0,0,0, .1);
    margin-bottom: 20px;
    transition: margin .3s, padding .3s;
}

@media (max-width: 767.98px) {
    .container-table {
        margin-top: 20px;
    }
}






.pl-status {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 10px;
}
    .pl-status.offline {
        background: transparent;
    }
    .pl-status.online {
        background: #1CA261;
    }

.deleted {
    text-decoration: line-through;
    opacity: 0.3;
}

.table-cell-768 {
    display: none !important;
}
@media (max-width: 767.98px) {
    .table-cell-768 {
        display: inline-block !important;
    }
}
table.table-style > thead > tr > th.table-column-hide {
    display: none;
}
table.table-style > tbody > tr > td.table-column-hide {
    display: none;
}
.table-column-hide768 {
    display: table-cell;
}
@media (max-width: 767.98px) {
    .table-column-hide768 {
        display: none;
    }
}


table.table-style {
    display: block;
    border: none !important;
    overflow-x: auto;
}


/* TABLES MEDIA */
@media (min-width: 576px) {
    table.table-servers {
        display: table;
    }
    table.table-servers-top {
        display: table;
    }
}
/*@media (min-width: 1200px) {
    table.table-style {
        display: table;
    }
}*/





/* TABLES FILTER */
.container-table .dataTables_filter {
    float: none;
    text-align: left;
    margin: 0;
}
    .container-table .dataTables_filter label {
        margin: 0;
        line-height: 40px;
        flex-wrap: nowrap;
        display: flex;
        font-weight: 600;
        text-transform: uppercase;
        color: rgb(178,178,178);
        font-size: 11px;
        transition: letter-spacing .3s;
    }
        .container-table .dataTables_filter label input {
            font-weight: 600;
            color: rgb(178,178,178);
            font-size: 11px;
            border: none;
            margin-left: 0;
            padding: 0 10px 0 10px;
            flex: auto;
            outline: none;
            transition: letter-spacing .3s;
        }
            .container-table .dataTables_filter label input::-webkit-search-decoration,
            input::-webkit-search-cancel-button,
            input::-webkit-search-results-button,
            input::-webkit-search-results-decoration {
                display: none;
            }




/* TABLES INFO */
.container-table > .dataTables_wrapper > .dataTables_info {
    font-family: 'Play';
    color: #B2B2B2;
    letter-spacing: 1px;
    font-size: 12px;
    transition: letter-spacing .3s;
    padding: 0;
    line-height: 40px;
    text-transform: uppercase;
}




/* TABLES PAGINATOR-TOP */
.container-table .dataTables_length {
    float: right;
}
    .container-table .dataTables_length label {
        margin: 0;
        font-family: 'Play';
        color: #B2B2B2;
        letter-spacing: 1px;
        font-size: 12px;
        transition: letter-spacing .3s;
        line-height: 40px;
    }
        .container-table .dataTables_length label select {
            border: 1px solid rgba(255,255,255,.1);
            border-radius: 2px;
            outline: none;
            height: 26px;
            width: 80px;
            font-family: 'Play';
            color: #B2B2B2;
            letter-spacing: 1px;
            font-size: 12px;
        }
            .container-table .dataTables_length label select option {
                background-color: black;
                font-family: 'Play';
                color: #B2B2B2;
                letter-spacing: 1px;
                font-size: 12px;
            }


/* TABLES PAGINATOR-BOTTOM */
.container-table .dataTables_wrapper .paging_simple_numbers {
    padding: 0;
    white-space: nowrap;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 5px;
    margin: 10px 10px 0 10px;
}
    .container-table .dataTables_wrapper .paging_simple_numbers a.paginate_button,
    .container-table .dataTables_wrapper .paging_simple_numbers span.ellipsis {
        font-family: 'Play';
        color: #B2B2B2 !important;
        letter-spacing: 1px;
        font-size: 12px;
        transition: letter-spacing .3s;
        padding: 0 10px;
        line-height: 30px;
        border: none;
        border-radius: 0;
        margin: 0;
        display: inline-block;
        outline: none;
        box-shadow: none;
        transition: padding .3s, background-color .2s, letter-spacing .3s;
    }
@media (max-width: 767.98px) {
    .container-table .dataTables_wrapper .paging_simple_numbers a.paginate_button,
    .container-table .dataTables_wrapper .paging_simple_numbers span.ellipsis {
        width: 100%;
    }
    .container-table .dataTables_wrapper .paging_simple_numbers > span {
        display: flex;
    }
}

        .container-table .dataTables_wrapper .paging_simple_numbers a.paginate_button:hover {
            background: rgba(255,255,255,.1);
            border: none;
        }
        .container-table .dataTables_wrapper .paging_simple_numbers a.paginate_button.disabled {
            color: #333 !important;
        }
            .container-table .dataTables_wrapper .paging_simple_numbers a.paginate_button.disabled:hover {
                background: transparent;
            }
            .container-table .dataTables_wrapper .paging_simple_numbers a.paginate_button.disabled.next:hover {
                background: transparent;
            }
        .container-table .dataTables_wrapper .paging_simple_numbers a.paginate_button.current {
            cursor: default;
            background: rgba(255,255,255,.1);
            color: white !important;
        }

.container-table .dataTables_wrapper .paging_simple_numbers a.paginate_button.previous {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.container-table .dataTables_wrapper .paging_simple_numbers a.paginate_button.next {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

@media (max-width: 991.98px) {
    .container-table .dataTables_wrapper .paging_simple_numbers a.paginate_button.previous {
        display: none;
    }
    .container-table .dataTables_wrapper .paging_simple_numbers a.paginate_button.next {
        display: none;
    }
    .container-table .dataTables_wrapper .paging_simple_numbers span a.paginate_button:first-child {
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }
    .container-table .dataTables_wrapper .paging_simple_numbers span a.paginate_button:last-child {
        border-top-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }
}
@media (max-width: 575.98px) {
    .container-table .dataTables_wrapper .paging_simple_numbers a.paginate_button,
    .container-table .dataTables_wrapper .paging_simple_numbers span.ellipsis {
        padding: 0 5px;
    }
}
@media (max-width: 399.98px) {
    .container-table .dataTables_wrapper .paging_simple_numbers a.paginate_button,
    .container-table .dataTables_wrapper .paging_simple_numbers span.ellipsis {
        padding: 0;
        letter-spacing: -1px;
    }
}







/* TABLES HEADER */
table.table-style thead {
    line-height: 48px;
    white-space: nowrap;
}
table.table-style thead tr th {
    font-weight: 600;
    text-transform: uppercase;
    color: rgb(178,178,178);
    font-size: 11px;
    transition: letter-spacing .3s;
    padding: 0 10px 0 10px;
    border: none;
    border-left: 2px solid transparent;
}
        table.table-style thead tr :last-child {
            padding: 0 10px 0 10px;
        }
        table.table-style thead tr th.sorting {
            background-image: none;
        }
table.table-style thead tr th.sorting_desc {
    background-image: none;
    /*border-image: linear-gradient(0deg, transparent 50%, rgba(253,45,45,1) 100%);*/
    border-image: linear-gradient(0deg, transparent 50%, #EDB82B 100%);
    border-image-slice: 1;
}
table.table-style thead tr th.sorting_asc {
    background-image: none;
    /*border-image: linear-gradient(180deg, transparent 50%, rgba(45,253,132,1) 100%);*/
    border-image: linear-gradient(180deg, transparent 50%, #EDB82B 100%);
    border-image-slice: 1;
}


/* TABLES BODY */
.table-style tbody {
    color: white;
    letter-spacing: 1px;
    font-size: 14px;
    transition: font-size .3s, letter-spacing .3s;
}
.table-style a {
    color: white;
}
@media (max-width: 575.98px) {
    .table-style tbody {
        letter-spacing: 0px;
    }
}
table.table-style tbody tr {
    background-color: transparent;
}
    .table-style > tbody > tr.odd {
        /*background-color: rgba(130,130,130,.05);*/
    }
    .table-style > tbody > tr.even {

    }

    .table-style > tbody > tr > td {
        padding: 0 0 0 10px;
        border-top: 1px solid rgba(255,255,255,.01);
    }
    .table-style > tbody > tr > td:last-child {
        padding: 0 10px 0 10px;
    }
    .table-style > tbody > tr:last-child > td {
        border-bottom: 1px solid rgba(255,255,255,.01);
    }
    .table-style > tbody > tr > td.dataTables_empty {
        font-family: 'Play';
        line-height: 64px;
        width: 100vh;
    }
    .table-cell {
        font-family: 'Play';
        /*font-size: 14px;*/
    }


/* ANIMATION MAP */
.TheExiledLands {
    background: linear-gradient(276deg, transparent, transparent, rgba(255,229,151,.1), transparent, transparent);
    background-size: 1000% 1000%;
    -webkit-animation: TheExiledLands 10s ease infinite;
    -moz-animation: TheExiledLands 10s ease infinite;
    -o-animation: TheExiledLands 10s ease infinite;
    animation: TheExiledLands 10s ease infinite;
}
.TheIsleofSiptah {
    background: linear-gradient(276deg, transparent, transparent, rgba(26,161,95,.1), transparent, transparent);
    background-size: 1000% 1000%;
    -webkit-animation: TheIsleofSiptah 10s ease infinite;
    -moz-animation: TheIsleofSiptah 10s ease infinite;
    -o-animation: TheIsleofSiptah 10s ease infinite;
    animation: TheIsleofSiptah 10s ease infinite;
}

@-webkit-keyframes TheExiledLands {
    0%{background-position:0% 0%}
    50%{background-position:93% 100%}
    100%{background-position:0% 0%}
}
@-moz-keyframes TheExiledLands {
    0%{background-position:0% 0%}
    50%{background-position:93% 100%}
    100%{background-position:0% 0%}
}
@-o-keyframes TheExiledLands {
    0%{background-position:0% 0%}
    50%{background-position:93% 100%}
    100%{background-position:0% 0%}
}
@keyframes TheExiledLands {
    0%{background-position:0% 0%}
    50%{background-position:93% 100%}
    100%{background-position:0% 0%}
}

@-webkit-keyframes TheIsleofSiptah {
    0%{background-position:0% 0%}
    50%{background-position:93% 100%}
    100%{background-position:0% 0%}
}
@-moz-keyframes TheIsleofSiptah {
    0%{background-position:0% 0%}
    50%{background-position:93% 100%}
    100%{background-position:0% 0%}
}
@-o-keyframes TheIsleofSiptah {
    0%{background-position:0% 0%}
    50%{background-position:93% 100%}
    100%{background-position:0% 0%}
}
@keyframes TheIsleofSiptah {
    0%{background-position:0% 0%}
    50%{background-position:93% 100%}
    100%{background-position:0% 0%}
}

    .table-servers .table-servers-players {
        letter-spacing: 0px;
    }
@media (max-width: 575.98px) {
    .table-servers .table-servers-players {
        letter-spacing: -1px;
    }
}

/* TABLES TABLE-SERVERS */
.container-table-servers {

}
    .container-table-servers .dataTables_filter {
        margin-left: 10px;
    }
table.table-servers {
    cursor: default;
}
    table.table-servers tbody tr.odd {
        background-color: rgba(255,255,255,.02);
    }
table.table-servers > tbody > tr > td {
    height: 64px;
    font-family: 'Play';
    white-space: nowrap;
}
@media (max-width: 767.98px) {
    table.table-servers > tbody > tr > td {
        height: 84px;
    }
}
@media (max-width: 575.98px) {
    table.table-servers > tbody > tr > td {
        /*white-space: nowrap;*/
        max-height: 64px;
    }
}
table.table-servers > tbody > tr {
    background-color: transparent;
    transition: background-color .2s;
}
    table.table-servers > tbody > tr:hover {
        background-color: rgba(130,130,130,.2);
    }
.table-servers .table-servers-name {
    max-height: 20px;
    overflow: hidden;
    white-space: normal;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-servers .table-servers-address {
    display: inline-block;
    margin: 5px 0;
    font-size: 12px;
    /*border: 1px solid rgba(130,130,130,.3);*/
    border: 2px solid rgba(130,130,130,0.2);
    border-radius: 3px;
    padding: 5px 8px;
    white-space: nowrap;
    transition: background-color .2s, box-shadow .2s, transform .2s;
}
    .table-servers .table-servers-address:hover {
        background-color: rgba(90,90,89,1);
        box-shadow: 0px 1px 2px 0px rgba(38, 38, 38, 0.3), 0px 2px 6px 2px rgba(38, 38, 38, 0.15);
        transform: translateY(-1px);
    }
@media (max-width: 767.98px) {
    .table-servers .table-servers-address {
        margin-right: 5px;
        font-size: 10px;
        text-transform: uppercase;
        padding: 5px 5px;
        border: 1px solid rgba(130,130,130,0.2);
    }
}

.table-servers .table-servers-map {
    display: inline-block;
    margin: 5px 0;
    font-size: 12px;
    /*border: 1px solid rgba(130,130,130,.3);*/
    border: 2px solid rgba(130,130,130,0.2);
    border-radius: 3px;
    padding: 5px 8px;
    white-space: nowrap;
    transition: background-color .2s, box-shadow .2s, transform .2s;
}
    .table-servers .table-servers-map:hover {
        box-shadow: 0px 1px 2px 0px rgba(38, 38, 38, 0.3), 0px 2px 6px 2px rgba(38, 38, 38, 0.15);
        transform: translateY(-1px);
    }
@media (max-width: 767.98px) {
    .table-servers .table-servers-map {
        font-size: 10px;
        text-transform: uppercase;
        padding: 5px 5px;
        border: 1px solid rgba(130,130,130,0.2);
    }
}



/* TABLES TABLE-SERVERS-TOP */
table.table-servers-top {
    margin-top: 120px;
    cursor: default;
}
    table.table-servers-top tbody tr.odd {
        background-color: rgba(255,255,255,.02);
    }
table.table-servers-top > tbody > tr > td {
    height: 64px;
    font-family: 'Play';
    white-space: nowrap;
}
@media (max-width: 767.98px) {
    table.table-servers-top > tbody > tr > td {
        height: 84px;
    }
}
@media (max-width: 575.98px) {
    table.table-servers-top > tbody > tr > td {
        /*white-space: nowrap;*/
        max-height: 64px;
    }
}
table.table-servers-top > tbody > tr {
    background-color: transparent;
    transition: background-color .2s;
}
    table.table-servers-top > tbody > tr:hover {
        background-color: rgba(130,130,130,.2);
    }

table.table-servers-top thead tr th.table-servers-top-text-right {
    padding: 0 10px 0 0;
    text-align: right;
}
table.table-servers-top tbody tr td.table-servers-top-text-right {
    padding: 0 10px 0 0;
    text-align: right;
}

.table-servers-top .table-servers-top-name {
    max-height: 20px;
    overflow: hidden;
    white-space: normal;
    word-break: break-all;
    overflow: hidden;
    text-overflow: ellipsis;
}

.table-servers-top .table-servers-top-address {
    display: inline-block;
    margin: 5px 0;
    font-size: 12px;
    /*border: 1px solid rgba(130,130,130,.3);*/
    border: 2px solid rgba(130,130,130,0.2);
    border-radius: 3px;
    padding: 5px 8px;
    white-space: nowrap;
    transition: background-color .2s, box-shadow .2s, transform .2s;
}
    .table-servers-top .table-servers-top-address:hover {
        background-color: rgba(90,90,89,1);
        box-shadow: 0px 1px 2px 0px rgba(38, 38, 38, 0.3), 0px 2px 6px 2px rgba(38, 38, 38, 0.15);
        transform: translateY(-1px);
    }
@media (max-width: 767.98px) {
    .table-servers-top .table-servers-top-address {
        margin-right: 5px;
        font-size: 10px;
        text-transform: uppercase;
        padding: 5px 5px;
        border: 1px solid rgba(130,130,130,0.2);
    }
}

.table-servers-top .table-servers-top-map {
    display: inline-block;
    margin: 5px 0;
    font-size: 12px;
    /*border: 1px solid rgba(130,130,130,.3);*/
    border: 2px solid rgba(130,130,130,0.2);
    border-radius: 3px;
    padding: 5px 8px;
    white-space: nowrap;
    transition: background-color .2s, box-shadow .2s, transform .2s;
}
    .table-servers-top .table-servers-top-map:hover {
        box-shadow: 0px 1px 2px 0px rgba(38, 38, 38, 0.3), 0px 2px 6px 2px rgba(38, 38, 38, 0.15);
        transform: translateY(-1px);
    }
@media (max-width: 767.98px) {
    .table-servers-top .table-servers-top-map {
        font-size: 10px;
        text-transform: uppercase;
        padding: 5px 5px;
        border: 1px solid rgba(130,130,130,0.2);
    }
}





/* TABLES TABLE-MANAGE */
.container-table-manage {
    cursor: default;
    padding: 24px;
}
@media (max-width: 767.98px) {
    .container-table-manage {
        padding: 20px 5px;
    }
}
.table-manage tbody {
    font-family: 'Play';
    font-size: 12px;
    letter-spacing: 1px;
    line-height: 40px;
    transition: letter-spacing .3s;
}
@media (max-width: 1199.98px) {
    .table-manage tbody {
        letter-spacing: 0px;
    }
}

.table-manage tbody tr {
    transition: background-color .2s;
}
    .table-manage tbody tr:hover {
        background-color: rgba(130,130,130,.1);
    }
    .table-manage tbody tr td {
        /*height: 40px;*/
        white-space: nowrap;
    }
        .table-manage tbody tr td input {
            font-family: 'Play';
            font-size: 12px;
            width: 100%;
            height: auto;
            background-color: transparent;
            border: none;
            outline: none;
            color: #fff;
            letter-spacing: 1px;
        }
            .table-manage tbody tr td input[type=checkbox] {
                margin: 5px 5px 0 0;
                height: auto;
            }
@media (max-width: 1199.98px) {
    .table-manage tbody tr td input {
        letter-spacing: 0px;
    }
}






/* TABLES TABLE-CHAT */
.container-table-chat {
    cursor: default;
    padding: 24px;
}
@media (max-width: 767.98px) {
    .container-table-chat {
        margin: 0;
        padding: 20px 5px;
    }
}

table.table-chat {
    display: table;
}
    table.table-chat > thead {
        display: none;
    }
    table.table-chat > tbody > tr {
        width: 100%;
        display: inline-block;
        padding: 0 10px;
    }
        table.table-chat > tbody > tr.odd {
            background-color: transparent;
        }
        table.table-chat > tbody > tr.even {
            background-color: transparent;
        }
        table.table-chat > tbody > tr > td {
            display: block;
            border: none;
        }
        table.table-chat > tbody > tr:last-child > td {
            border: none;
        }


            /* left default */
            table.table-chat > tbody > tr > td > div.table-chat-autor {
                font-family: 'Play';
                letter-spacing: 2px;
                margin: 0;
                /* position: relative; */
                width: fit-content;
            }
            table.table-chat > tbody > tr > td > div.table-chat-message {
                max-width: 80%;
                font-family: 'Play';
                position: relative;
                padding: 7px 15px;
                margin-bottom: 4px;
                width: -webkit-fit-content;
                width: -moz-fit-content;
                width: fit-content;
                background-color: rgba(114, 124, 245, 0.1);
                border-radius: 0 5px 5px;
                display: inline-block;
            }
                table.table-chat > tbody > tr > td > div.table-chat-message::before {
                    content: '';
                    width: 0;
                    height: 0;
                    position: absolute;
                    left: -10px;
                    right: auto;
                    top: 0;
                    border-top: 5px solid rgba(114, 124, 245, 0.1);
                    border-bottom: 5px solid transparent;
                    border-left: 5px solid transparent;
                    border-right: 5px solid rgba(114, 124, 245, 0.1)
                }
            table.table-chat > tbody > tr > td > div.table-chat-time {
                font-family: 'Play';
                font-size: 10px;
                letter-spacing: 2px;
                color: #474746;
                margin: 0;
                /* position: relative; */
                width: fit-content;
                display: inline-block;
                margin: 0px 0 2px 5px;
                vertical-align: bottom;
            }

            /* right */
            table.table-chat > tbody > tr > td > div.table-chat-autor-right {
                margin-left: auto;
            }
            table.table-chat > tbody > tr > td > div.table-chat-message-right {
                float: right;
                background: rgba(102, 209, 209, 0.1);
                border-radius: 5px 0 5px 5px;
            }
                table.table-chat > tbody > tr > td > div.table-chat-message-right::before {
                    content: '';
                    width: 0;
                    height: 0;
                    position: absolute;
                    left: auto;
                    right: -10px;
                    top: 0;
                    border-top: 5px solid rgba(102, 209, 209, 0.1);
                    border-bottom: 5px solid transparent;
                    border-left: 5px solid rgba(102, 209, 209, 0.1);
                    border-right: 5px solid transparent;
                }

            table.table-chat > tbody > tr > td > div.table-chat-time-right {
                float: right;
                margin: 20px 5px 0 0;
            }

@media (min-width: 992px) {
    table.table-chat > tbody > tr > td > div.table-chat-autor {
        margin: 20px 0 0 0;
    }

    /* right */
    table.table-chat > tbody > tr > td > div.table-chat-message-right {
        float: none;
        border-radius: 0 5px 5px;
    }
        table.table-chat > tbody > tr > td > div.table-chat-message-right::before {
            content: '';
            width: 0;
            height: 0;
            position: absolute;
            left: -10px;
            right: auto;
            top: 0;
            border-top: 5px solid rgba(102, 209, 209, 0.1);
            border-bottom: 5px solid transparent;
            border-left: 5px solid transparent;
            border-right: 5px solid rgba(102, 209, 209, 0.1)
        }
    table.table-chat > tbody > tr > td > div.table-chat-time-right {
        float: none;
        margin: 0px 0 0 5px;
    }
}


/* TABLES TABLE-CHATARCH */
.container-table-chatarch {
    cursor: default;
    padding: 24px;
}
@media (max-width: 767.98px) {
    .container-table-chatarch {
        padding: 20px 5px;
    }
}
table.table-chatarch > tbody > tr.odd {
    background-color: transparent;
}
table.table-chatarch > tbody > tr.even {
    background-color: transparent;
}
table.table-chatarch > tbody > tr > td {
    border: none;
}
table.table-chatarch > tbody > tr:last-child > td {
    border: none;
}
table.table-chatarch > tbody > tr > td > div.table-chatarch-time {
    white-space: nowrap;
    font-family: 'Play';
    font-size: 14px;
    letter-spacing: 0px;
    color: #474746;
}
table.table-chatarch > tbody > tr > td > div.table-chatarch-autor {
    white-space: nowrap;
    font-family: 'Play';
    font-size: 14px;
    letter-spacing: 2px;
    text-align: right;
}
table.table-chatarch > tbody > tr > td > div.table-chatarch-message {
    font-family: 'Play';
    font-size: 14px;
    letter-spacing: 0px;
    position: relative;
    padding: 7px 15px;
    margin-bottom: 4px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    background-color: rgba(114, 124, 245, 0.1);
    border-radius: 0 5px 5px;
    min-height: 35px;
}
    table.table-chatarch > tbody > tr > td > div.table-chatarch-message::before {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        left: -10px;
        right: auto;
        top: 0;
        border-top: 5px solid rgba(114, 124, 245, 0.1);
        border-bottom: 5px solid transparent;
        border-left: 5px solid transparent;
        border-right: 5px solid rgba(114, 124, 245, 0.1)
    }

table.table-chatarch > tbody > tr > td > div.table-chatarch-message-change {
    background: rgba(102, 209, 209, 0.1);
}
    table.table-chatarch > tbody > tr > td > div.table-chatarch-message-change::before {
        border-top: 5px solid rgba(102, 209, 209, 0.1);
        border-bottom: 5px solid transparent;
        border-left: 5px solid transparent;
        border-right: 5px solid rgba(102, 209, 209, 0.1)
    }




/* TABLES TABLE-GAMEEVENTS */
.container-table-gameevents {
    cursor: default;
    padding: 10px 24px 24px 24px;
}
@media (max-width: 767.98px) {
    .container-table-gameevents {
        padding: 20px 5px;
    }
}
table.table-gameevents > tbody {
    letter-spacing: 1px;
    transition: letter-spacing .3s;
}
@media (max-width: 1199.98px) {
    table.table-gameevents > tbody {
        letter-spacing: 0px;
    }
}
table.table-gameevents > tbody > tr {
    transition: background-color .2s;
}
    table.table-gameevents > tbody > tr.odd {
        background-color: transparent;
    }
    table.table-gameevents > tbody > tr:hover {
        background-color: rgba(130,130,130,.1);
    }
    table.table-gameevents > tbody > tr > td {
        border: none;
        white-space: nowrap;

        font-family: 'Play';
        font-size: 12px;
        line-height: 28px;
        cursor: default;
    }
    table.table-gameevents > tbody > tr:last-child > td {
        border: none;
    }
    table.table-gameevents > tbody > tr > td div {
        font-family: 'Play';
        font-size: 12px;
        line-height: 28px;
        cursor: default;
    }

table.table-gameevents > tfoot > tr > th {
    padding: 0;
    border: none;
    border-top: 1px solid rgba(255,255,255,.05);
    border-bottom: 1px solid rgba(255,255,255,.05);
}
    table.table-gameevents > tfoot > tr > th > input {
        padding: 0 5px;
        font-family: 'Play';
        font-size: 12px;
        width: 100%;
        height: 30px;
        background-color: transparent;
        border: none;
        outline: none;
        color: #fff;
        letter-spacing: 1px;
        /*border-left: 1px solid #474746;*/
        /*border-image: linear-gradient(180deg, rgba(0,0,0,0) 15%, rgba(71,71,70,1) 30%, rgba(71,71,70,1) 70%, rgba(0,0,0,0) 85%) 1;*/
    }
        table.table-gameevents > tfoot > tr > th > input::placeholder {
            color: #474746;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        table.table-gameevents > tfoot > tr > th > input[placeholder] {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    /*table.table-gameevents > tfoot > tr > th > select {
        padding: 0 5px;
        font-family: 'Play';
        font-size: 12px;
        width: 100%;
        height: 30px;
        background-color: transparent;
        border: none;
        outline: none;*/
        /*color: #fff;*/
        /*letter-spacing: 1px;
    }*/

@media (max-width: 1199.98px) {
    table.table-gameevents > tfoot > tr > th > input {
        letter-spacing: 0px;
    }
}

.table-gameevents select {
    border: none;
    border-radius: inherit;
    outline: none;
    width: 96px;
    height: 30px;
    font-family: 'Play';
    color: #B2B2B2;
    font-size: 12px;
    letter-spacing: 1px;
    background-color: transparent;
    text-overflow: ellipsis;
    transition: background-color .2s;
}
    .table-gameevents select:hover {
        background-color: rgba(130,130,130,.1);
    }
    .table-gameevents select option {
        background-color: black;
        font-family: 'Play';
        color: #B2B2B2;
        letter-spacing: 1px;
        font-size: 14px;
    }



/* TABLES TABLE-RCON */
.container-table-rcon {
    cursor: default;
    background: #181818;
    background-color: rgba(24,24,24,.9);
}
@media (max-width: 767.98px) {
    .container-table-rcon {
        margin: 10px;
    }
}
    .container-table-rcon .input-rcon {
        display: flex;
        width: 100%;
        background-color: #343a40;
        line-height: 40px;
    }
        .container-table-rcon .input-rcon > label {
            margin: 0;
            padding: 0 10px;
            color: #fff;
            font-family: 'Play';
            font-size: 14px;
            letter-spacing: 1px;
        }
    .container-table-rcon .input-rcon > input {
        width: 100%;
        outline: none;
        padding-right: 10px;
        background-color: transparent;
        border: none;
        color: #fff;
        font-family: 'Play';
        font-size: 14px;
        letter-spacing: 1px;
    }

table.table-rcon {
    display: table;
}
    table.table-rcon > thead {
        display: none;
    }
    table.table-rcon > tbody > tr > td > pre {
        font-family: monospace;
        font-size: 12px;
        color: #fff;
        margin: 10px 0;
    }
        table.table-rcon > tbody > tr > td > pre.rcon-my-command {
            color: #edb82b;
        }
    table.table-rcon > tbody > tr.odd {
        background-color: transparent;
    }
    table.table-rcon > tbody > tr.even {
        background-color: transparent;
    }











/* MODAL */

.modal-content {
    background-color: #202225;
    border: none;
    color: #fff;
    z-index: -2;
    border-radius: 8px;
}
.modal-head {
    text-align: center;
}
.modal-body {
    padding: 0;
}
.modal-backdrop.show {
    opacity: 0.7;
}

.modal-head .btn-close {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 30px;
    width: 36px;
    line-height: 32px;
    background-color: transparent;
    border-top-right-radius: 8px;
    border: none;
    color: #B9BBBE;
    font-family: ui-monospace;
    outline: none;
    transition: color .2s;
}
    .modal-head .btn-close:hover {
        color: #ffc107;
    }

.modal-head .avatar-container {
    position: relative;
}
    .modal-head .avatar-container img {
        position: relative;
        border-radius: 50%;
        width: 82px;
        height: 82px;
        box-shadow: 2px 0px 10px 0px #000;
        transition: all .4s;
    }
        .modal-head .avatar-container img:hover {
            -webkit-box-shadow: 0px 0px 10px 0px rgba(237,185,43,1);
            -moz-box-shadow: 0px 0px 10px 0px rgba(237,185,43,1);
            box-shadow: 0px 0px 10px 0px rgba(237,185,43,1);
        }

.modal input {
    background-color: #2F3136;
    width: 100%;
    border: none;
    border-radius: 4px;
    color: #fff;
    padding: 8px;
    outline: none;
    font-size: 14px;
    font-family: 'Play';
}
.modal select {
    border: none;
    border-right: 8px solid transparent;
    background-color: #2F3136;
    width: 100%;
    border-radius: 4px;
    color: #fff;
    padding: 8px;
    font-size: 14px;
    font-family: 'Play';
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 37px;
    outline: none;
}
.modal-body button {
    width: 180px;
    outline: none;
    min-height: 38px;
    border: none;
    background-color: rgba(255,255,255,.1);
    color: #fff;
    font-size: 12px;
    border-radius: 4px;
    transition: background-color .2s, color .2s;
}
.modal .tab-content {
    padding: 24px;
    background-color: #2F3136;
}
@media (max-width: 991.98px) {
    .modal .tab-content {
        padding: 12px;
    }
}
.modal-divider {
    border-bottom: 1px solid #42454A;
    margin: 36px 0;
}


/* MODAL-CHARACTER */

.modal-charinfo {

}
.modal-charinfo .modal-head {
    padding: 20px;
    display: flex;
    align-items: center;
}
.modal-charinfo .modal-body {
    padding: 0;
}
.modal-charinfo .modal-title {
    text-align: center;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 1px;
    font-family: Montserrat;
    outline: none;
    text-decoration: none;
    overflow-wrap: anywhere;
    flex-grow: 1;
    padding: 0 82px 0 0;
}
@media (max-width: 991.98px) {

    .modal-charinfo .modal-title {
        padding: 0;
    }
}
.modal-character-tabs {
    border-top: 1px solid #2F3136;
    border-bottom: 1px solid #2F3136;
    display: flex;
    margin: 0;
}
    .modal-character-tabs a {
        display: block;
        text-decoration: none;
        padding: 12px 24px;
        color: #B9BBBE;
    }
        .modal-character-tabs a:hover {
            color: #fff;
        }
        .modal-character-tabs a.active {
            color: #ffc107;
        }
@media (max-width: 575.98px) {
    .modal-character-tabs a {
        padding: 12px;
    }
}

.modal-pl-status {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    position: absolute;
    bottom: 6px;
    right: 0px;
    /* box-shadow: 2px 0px 10px 0px #000; */
    border: 2px solid #202225;
}
    .modal-pl-status.offline {
        background: #36393F;
    }
    .modal-pl-status.online {
        background: #1CA261;
    }


/* MODAL CHAR TAB MAIN */
#tab-personinfo {
    position: relative;
    border-radius: 8px;
    background-color: #36393F;
    padding: 36px;
    transition: all .3s;
}
@media (max-width: 575.98px){
    #tab-personinfo {
        padding: 48px 12px;
    }
}
#tab-personinfo label {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #8A8E93;
    margin: 8px 0 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}
#tab-personinfo .person-info {
    background-color: #2F3136;
    width: 100%;
    border-radius: 4px;
    color: #8A8E93;
    padding: 8px;
    font-size: 14px;
    font-family: 'Play';
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 37px;
}
    #tab-personinfo .person-info.status-blocked {
        color: #F04747;
    }
    #tab-personinfo .person-info.status-active {
        color: #43B581;
    }
#charactersModal-copycoords {
    position: absolute;
    top: 8px;
    right: 8px;
    width: auto;
    height: auto;
    padding: 8px;
    background-color: transparent;
    z-index: 1;
}
    #charactersModal-copycoords:hover svg {
        color: #fff;
    }
    #charactersModal-copycoords:active svg {
        bottom: 4px;
    }
    #charactersModal-copycoords svg {
        position: relative;
        bottom: 0;
        color: #8A8E93;
        transition: color .3s, bottom .2s;
    }

#charactersModal-steamprofile {
    position: absolute;
    top: 6px;
    right: 40px;
    width: auto;
    height: auto;
    padding: 8px;
    background-color: transparent;
    z-index: 1;
}
    #charactersModal-steamprofile:hover svg {
        color: #fff;
    }
    #charactersModal-steamprofile:active svg {
        bottom: 4px;
    }
    #charactersModal-steamprofile svg {
        width: 28px;
        height: auto;
        position: relative;
        bottom: 0;
        color: #8A8E93;
        transition: color .3s, bottom .2s;
    }


/* MODAL CHAR TAB STATISTICS */
#tab-stat {
    text-align: center;
    padding: 0 24px;
}
.char-statistics {
    color: #888C90;
    cursor: default;
    text-transform: uppercase;
}

@media (max-width: 399.98px) {
    .char-statistics .row-braker {
        width: 100%;
    }
}
.char-statistics > div:nth-child(2-3) {
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
}
        .char-statistics > div > small {
            font-family: 'Play', sans-serif;
            font-size: 11px;
            white-space: nowrap;
            transition: font-size .3s;
        }
        .char-statistics > div > span {
            font-size: 28px;
            display: block;
            line-height: 24px;
            word-break: break-word;
            transition: font-size .3s;
        }
@media (max-width: 575.98px) {
    .char-statistics > div > small {
        font-size: 9px;
    }
    .char-statistics > div > span {
        font-size: 26px;
    }
}

.modal-stat-box {
    text-align: left;
    padding: 10px 0;
}
    .modal-stat-box span {
        text-transform: uppercase;
        font-weight: bold;
        font-size: 12px;
        letter-spacing: 1px;
    }
    .modal-stat-box .points {
        text-align: right;
        display: inline-block;
        background-color: #36393F;
        /* border-top: 2px solid rgba(255,255,255,.3); */
        /* border-bottom: 2px solid rgba(255,255,255,.3); */
        line-height: 20px;
        padding-right: 5px;
        min-width: 50px;
        float: right;
        border-radius: 4px;
    }
    .modal-stat-box .pr-bar {
        display: flex;
        height: 16px;
        /*overflow: hidden;*/
        background-color: #36393F;
        border-bottom-left-radius: 50%;
        border-top-left-radius: 50%;
        border-bottom-right-radius: 8px;
        border-top-right-radius: 8px;
        padding-right: 5px;
    }
        .modal-stat-box .pr-bar div {
            background: linear-gradient(180deg, rgba(118,96,76,0) 0%, rgba(252,244,236,1) 14%, rgba(254,216,161,1) 37%, rgba(107,65,8,1) 58%, rgba(251,244,237,1) 72%, rgba(143,114,87,1) 88%, rgba(118,96,76,0) 100%);
            background: #8A8D93;
            transition: width 1s ease-in-out;
            -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
            -webkit-animation-name: animWidth;
            animation-name: animWidth;
            border-bottom-left-radius: 50%;
            border-top-left-radius: 50%;
            box-shadow: 2px 0px 10px 0px #8a8d93;
        }
@keyframes animWidth {
    from {
        width: 0%;
    }
}
.modal-stat-box .stat-checkpoints {
    position: relative;
    top: -19px;
    margin: 0;
}
    .modal-stat-box .stat-checkpoints div div {
        position: absolute;
        right: 0;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background-color: #2F3136;
        border: 1px solid rgba(255,255,255,.3);
        transition: box-shadow 5s;
        text-align: center;
    }
    .modal-stat-box .stat-checkpoints .point-active {
        box-shadow: 0px 0px 10px 3px #8a8d93;
        border: 1px solid #fff;
        -webkit-animation-duration: 1.5s;
        animation-duration: 1.5s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-animation-name: animPointsActive;
        animation-name: animPointsActive;
    }
    .modal-stat-box .stat-checkpoints div div span {
        position: relative;
        top: -4px;
        padding-left: 2px;
        font-family: 'crom_v1';
        font-size: 18px;
        font-weight: 300;
    }
@keyframes animPointsActive {
    from {
        box-shadow: none;
        border-color: rgba(255,255,255,.3);
    }
}


/* MODAL CHAR TAB CONTROL */
#tab-manage {

}
@media (max-width: 991.98px) {
    #tab-manage {
        padding: 12px;
    }
}
.tab-manage-container {
    border-radius: 8px;
    background-color: #36393F;
}

.modal-block {
    border-bottom: 1px solid #42454A;
    padding: 48px 36px;
    transition: all .3s;
}
@media (max-width: 575.98px) {
    .modal-block {
        padding: 48px 12px;
    }
}
    .modal-block:last-child {
        border-bottom: none;
    }
    .modal-block h4 {
        display: inline-block;
        /* background-color: #2F3136; */
        border-radius: 4px;
        font-size: 14px;
        text-transform: uppercase;
        color: #8A8E93;
        margin: 0;
    }
    .modal-block span {
        display: block;
        color: #8A8E93;
        font-family: 'Play';
        padding-bottom: 12px;
    }


#btn-rconsendmessage {
    background-color: #43B581;
}
    #btn-rconsendmessage:hover {
        background-color: #54C692;
    }
#btn-characterrename {
    background-color: #FAA61A;
}
    #btn-characterrename:hover {
        background-color: #FFC034;
    }
#btn-characterban {
    display: block;
    background-color: #2F3136;
    border-left: 3px solid #F04747;
    margin: 8px 0;
    width: 100%;
    text-align: left;
    padding-left: 12px;
    color: #F04747;
}
    #btn-characterban:hover {
        background-color: #F04747;
        color: #fff;
    }
#btn-characterunban {
    display: block;
    background-color: #2F3136;
    border-left: 3px solid #6578BA;
    margin: 8px 0;
    width: 100%;
    text-align: left;
    padding-left: 12px;
    color: #6578BA;
}
    #btn-characterunban:hover {
        background-color: #6578BA;
        color: #fff;
    }









.modal-character-footer {
    display: -ms-flexbox;
    display: flex;
    justify-content: flex-end;
}
    .modal-character-footer > button {
        width: 100px;
        height: 30px;
        border: none;
        background-color: #EB8D1E;
        border-radius: 14px;
        font-family: 'Montserrat';
        color: #fcfcfc;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 1px;
        outline: none;
        transition: background-color .3s;
    }
        .modal-character-footer > button:hover {
            background-color: #FFBA4B;
        }


/* MODAL RESTART TASK */

.modal-restask {

}
.modal-restask .modal-title {
    line-height: 64px;
}
    .modal-restask .modal-body {
        padding: 24px;
        background-color: #2F3136;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
    }

    .modal-restask .form-container {
        border-radius: 8px;
        background-color: #36393F;
    }
    .modal-restask .modal-block:last-child {
        display: flex;
        justify-content: space-between;
        padding: 16px;
    }
    .modal-restask .modal-block label {
        font-size: 12px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #8A8E93;
        margin: 8px 0 0 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }
    .modal-restask .modal-block div {
        background-color: #2F3136;
        width: 100%;
        border-radius: 4px;
        color: #8A8E93;
        padding: 8px;
        font-size: 14px;
        font-family: 'Play';
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: 37px;
    }
        .modal-restask .modal-block div.status-done {
            color: #43B581;
        }
    .modal-restask button#btn-restarttaskupdate {
        background-color: #43B581;
    }
        .modal-restask button#btn-restarttaskupdate:hover {
            background-color: #54C692;
        }
    .modal-restask button#btn-restarttaskremove {
        background-color: #F04747;
    }
        .modal-restask button#btn-restarttaskremove:hover {
            background-color: #FF5F5F;
        }



/* POPOVER */
.popover {
    background-color: black;
    border: none;
}
    .popover .arrow::after {
        border-top-color: black;
        border-bottom-color: black;
    }
    .popover h3 {
        font-family: 'Play';
        font-size: 12px;
        text-transform: uppercase;
        background-color: black;
        border: none;
        color: #edb82b;
        font-weight: 600;
        padding: 5px 10px;
    }
    .popover h3::before {
        content: none !important;
    }
    .popover .popover-body {
        font-family: 'Play';
        font-size: 14px;
        color: white;
        padding: 0 10px 5px 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }















































/* ----- LOGIN ----- */

.video-fixed {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -100;
}
.video-overlay {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,.7) 0%, transparent 20%, transparent 80%, rgba(0,0,0,.7) 100%);
}

.login-container {
    display: flex;
    min-height: 90vh;
    align-items: center;
    justify-content: center;
}
.login-form {
    position: relative;
    max-width: 400px;
    padding: 48px 40px 60px 40px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.4);
    margin: 0 10px 24px 10px;
    border-radius: 2px;
    transition: box-shadow .3s, padding .3s;

    background-color: rgba(24,24,24,.85);
    backdrop-filter: blur(10px);
    color: white;
    font-size: 12px;
    letter-spacing: 1px;
    text-align: center;
}
    .login-form:hover {
        box-shadow: 0 8px 18px 0 rgba(0,0,0,0.8);
    }
@media (max-width: 419.98px) {
    .login-form {
        padding: 48px 15px;
    }
}

.login-form-bg {
    background-image: url('/images/backgrounds/bg6.jpg');
}
.login-auth-form {

}

.login-brend {
    height: auto;
    max-width: 100%;
    margin-bottom: 40px;
    padding: 0 24px;
    filter: grayscale(70%);
    -webkit-filter: grayscale(50%);
    transition: padding .3s;
}
@media (max-width: 419.98px) {
    .login-brend {
        height: auto;
        max-width: 100%;
        margin-bottom: 20px;
        padding: 0;
    }
}

.login-textbox {
    position: relative;
    text-align: left;
    margin-bottom: 10px;
}
    .login-textbox svg {
        width: 24px;
        height: 24px;
        margin: 8px 10px;
        z-index: 100;
        stroke-width: 2;
        stroke: rgba(255,255,255,.3);
        transition: margin .3s;
    }
    .login-textbox input {
        position: absolute;
        outline: none;
        background: none;
        border: none;
        border-bottom: 2px solid rgba(255,255,255,.2);
        width: 100%;
        height: 100%;
        color: white;
        padding: 0 10px 0 48px;
        border-radius: 0;
        transition: border-bottom .3s;
        letter-spacing: 1px;
        font-size: 14px;
        font-family: 'Play';
    }
        .login-textbox input:focus ~ svg {
            margin: 8px 18px 8px 4px;
        }
        /* for browser autofill */
        .login-textbox input:-webkit-autofill {
            transition: background-color 1s ease-in 2000s, color 1s ease-in 2000s;
        }

.login-btn {
    position: relative;
    font-size: 16px;
    letter-spacing: 2px;
    font-family: 'Play';
    text-transform: uppercase;
    color: #FFFFFF;
    border: none;
    outline: none !important;
    border-radius: 3px;
    width: 100%;
    height: 40px;
    margin: 50px 0 0 0;
    background-color: transparent;
    transition: all .4s;
}
.login-btn span {
    position: relative;
    z-index: 1;
}
    .login-btn:after {
        position: absolute;
        content: "";
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background: rgba(0,0,0,.5);
        border-radius: 3px;
        transition: all .4s;
    }
        .login-btn:hover:after {
            width: 100%;
        }





/* ----- IMG,SVG ----- */

.bg-home {
    background-image: url('/images/backgrounds/bg1.jpg');
}
.bg-servers {
    background-image: url('/images/backgrounds/bg5.jpg');
}
.bg-manage {
    background-image: url('/images/backgrounds/bg2.jpg');
}
.bg-error {
    background-image: url('/images/backgrounds/bg7.jpg');
    background-position: 100%;
}

.flag-icon-ru {
    background-image: url('/images/flags/ru.svg');
}
.flag-icon-en {
    background-image: url('/images/flags/en.svg');
}
.flag-icon-de {
    background-image: url('/images/flags/de.svg');
}
.flag-icon-es {
    background-image: url('/images/flags/es.svg');
}
.flag-icon-fr {
    background-image: url('/images/flags/fr.svg');
}
.flag-icon-ir {
    background-image: url('/images/flags/ir.svg');
}
.flag-icon-lt {
    background-image: url('/images/flags/lt.svg');
}
.flag-icon-ro {
    background-image: url('/images/flags/ro.svg');
}
.flag-icon-gb {
    background-image: url('/images/flags/gb.svg');
}


/* ----- SCROLLBARS ----- */

.scroll-style::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background: transparent;
    outline: none;
}
.scroll-style::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #323232;
}
.scroll-style::-webkit-scrollbar-corner {
    background-color: transparent;
}

/* ----- SCROLLBAR-FOR-SELECT ----- */

.select-scroll::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: #000;
    outline: none;
}
.select-scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #323232;
}
.select-scroll::-webkit-scrollbar-corner {
    background-color: #000;
}



/* ----- RAMER ----- */
#map_server {
    height: 900px;
}

.leaflet-container {
    background: transparent;
}

.datatables-clipboard-button {
    cursor: pointer;
}

table.dataTable tbody tr td.table-violation {
    background-color: rgba(255,193,193,0.4);
}

table.dataTable tbody tr td.table-week {
    background-color: rgba(70,200,255,0.1);
}

table.dataTable tbody tr td.table-2week {
    background-color: rgba(0,123,255,0.1);
}

table.dataTable tbody tr td.table-ban {
    background-color: rgba(255,193,193,0.4);
}
/* ----- /RAMER ----- */




/* WTF */
    /* Object */

    .failure {
        animation: background-anim-red 1s;
    }

    @keyframes background-anim-red {
        0% {
            background-color: lightcoral;
        }
        100% {
            background-color: transparent;
        }
    }

    .success {
        animation: background-anim-green 1s;
    }

    @keyframes background-anim-green {
        0% {
            background-color: lightgreen;
        }
        100% {
            background-color: transparent;
        }
    }








/* ----- TAB CONTAINER ----- */

.tab-container {
    padding: 20px 20px 20px 270px;
    transition: padding .3s;
}
@media (max-width: 767.98px) {
    .tab-container {
        padding: 0;
    }
}

/* ----- SIDEBAR ----- */

.sidebar-manage {
    position: fixed;
    width: 250px;
    height: calc(100% - 50px);
    text-transform: none;
    overflow-y: auto;
    white-space: nowrap;
    background-color: rgba(24,24,24,.9);
    box-shadow: 0px 1px 2px 0px rgb(0 0 0 / 10%), 0px 2px 6px 2px rgb(0 0 0 / 10%);
    font-family: 'Play';
    text-transform: uppercase;
    transition: width .3s;
}
.sb-menu {
    display: block;
    overflow-x: hidden;
    padding-bottom: 20px;
    border: none;
}
.sb-menu-category {
    display: block;
    line-height: 22px;
    cursor: default;
    font-size: 13px;
    color: #474746;
    padding: 20px 0 0 30px;
}
.sb-menu a {
    display: block;
    line-height: 40px;
    padding: 0 0 0 30px;
    border-left: 2px solid transparent;
    color: #b2b2b2;
    font-size: 12px;
    letter-spacing: 1px;
    text-decoration: none;
    transition: color .3s;
}
    .sb-menu a:hover {
        color: #fff;
    }
    .sb-menu a.active {
        color: #ffc107;
        border-left: 2px solid #ffc107;
    }
    .sb-menu a:hover > svg {
        margin-right: 15px;
    }
.sb-menu svg {
    display: inline-block;
    margin: 0 10px 3px 0;
    width: 16px;
    transition: margin .3s;
}

@media (max-width: 767.98px) {
    .sidebar-manage {
        position: relative;
        width: auto;
        height: auto;
    }
    .sb-menu {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        padding: 0;
    }
    .sb-menu-category {
        display: none;
    }
    .sb-menu a {
        padding: 0 10px;
        letter-spacing: 0px;
        border: none;
    }
        .sb-menu a.active {
            border: none;
        }
    .sb-menu svg {
        display: none;
    }
}

.sb-toggler {
    cursor: pointer;
    display: block;
    position: absolute;
    right: 0;
    border-radius: 0;
    background: transparent;
    color: #b2b2b2;
    padding: 5px;
    transition: color .3s;
}
    .sb-toggler:hover {
        color: #fff;
    }
    .sb-toggler svg {
        width: 20px;
    }
    .sb-toggler .sb-toggle-icon-close {
    }
    .sb-toggler .sb-toggle-icon-open {
        display: none;
    }
@media (max-width: 767.98px) {
    .sb-toggler {
        display: none;
    }
}

/* ----- SIDEBAR MINIMIZE----- */
@media (min-width: 768px) {
    .sb-close .tab-container {
        padding-left: 90px;
    }

    .sb-close .sidebar-manage {
        width: 70px;
        text-align: center;
    }
    .sb-close .sb-menu-category {
        visibility: hidden;
    }
        .sb-close .sb-menu-category:before {
            content: '';
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #474746;
            position: absolute;
            visibility: visible;
            margin: 8px 0 0 3px;
        }
    .sb-close .sb-menu a {
        padding: 0;
    }
        .sb-close .sb-menu a span {
            display: none;
        }
        .sb-close .sb-menu a:hover > svg {
            margin: 0;
        }
    .sb-close .sb-menu svg {
        margin: 0;
    }

    .sb-close .sb-toggler {
        width: 100%;
        position: relative;
    }
        .sb-close .sb-toggler .sb-toggle-icon-close {
            display: none;
        }
        .sb-close  .sb-toggler .sb-toggle-icon-open {
            display: inline-block;
        }
}



/* ----- ERRORS----- */

.container-error {
    text-align: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
}
    .container-error .error-code {
        font-size: 100px;
        font-weight: 500;
    }
    .container-error .error-message {
        font-family: 'Play';
        letter-spacing: 2px;
        font-size: 18px;
    }



















    .container-memberof {
        display: block;
    }

    @media (min-width: 576px) {
        .container-memberof {
            display: flex;
        }
    }

    #datatables-memberof tbody tr img {
        position: relative;
        width: 16px;
        height: 16px;
        transition: box-shadow .2s;
    }

    @media (min-width: 576px) {
        #datatables-memberof tbody tr img {
            width: 32px;
            height: 32px;
        }
    }

    #datatables-groups tbody tr img {
        position: relative;
        width: 16px;
        height: 16px;
        transition: box-shadow .2s;
    }

    @media (min-width: 576px) {
        #datatables-groups tbody tr img {
            width: 32px;
            height: 32px;
        }
    }