/* Styling overwrites */

#bottomStat {
    margin-top: 2em!important;
    margin-bottom: 2em!important;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
}

#bottomStat .statistic {
    flex-grow: 1;
}

td,
th {
    border: 1px black;
}

@media only screen and (max-width: 767px) {
    #statistics,
    #bottomStat {
        display: none;
    }
}

.ui.menu .item {
    font-size: 1.1em;
}

.ui.menu .item,
.ui.menu .active.item {
    border-left: 0!important;
}

.server img {
    height: 130px;
}

@media only screen and (max-width: 640px) {
    td.server img {
        height: 130px;
    }
}

.spoofed-playercount-message {
    margin-top: 1.5em !important;
    margin-bottom: -1em !important;
}

@media only screen and (max-width: 550px) {
    .ui.pagination.menu .item {
        font-size: 0.7rem !important;
    }
}

.pushable>.pusher {
    -webkit-transition: none !important;
    transition: none !important;
}

.pushable>.pusher:after {
    -webkit-transition: none !important;
    transition: none !important;
}

@media only screen and (max-width: 975px) {
    .top.menu .container {
        display: none !important;
    }
    .top.menu a.toggle-sidebar {
        display: block !important;
    }
    nav.ui.menu .active.item {
        background: rgba(0, 0, 0, .15);
    }
    .ui.menu .item.toggle-sidebar>i.icon {
        font-size: 1.3rem;
        margin: 0;
    }
}

.container {
    width: 1100px !important;
}

@media only screen and (max-width: 767px) {
    td.server .description {
        display: block !important;
        float: none;
    }
    td.server .server-ip {
        font-size: 1rem;
    }
    td.server .server-ip .copy-action {
        display: none;
    }
    td.server .server-ip .plug-icon {
        display: none;
    }
    .server-ip p {
        width: 60% !important;
    }
}

.ui.table.servers {
    border: 0px;
}

.ui.table.servers tr td:first-of-type {
    border-left: 1px solid rgba(34, 36, 38, .1);
}

.ui.table.servers tr td:last-of-type {
    border-right: 1px solid rgba(34, 36, 38, .1);
}

.ui.very.basic.table.servers tr td:first-of-type {
    border: none;
}

.ui.very.basic.table.servers tr td:last-of-type {
    border: none;
}

.servers p.description {
    float: none !important;
}

.server-ip {
    float: none !important;
}

.ui.menu {
    margin-top: 0;
}

.ui.pagination.menu {
    border-radius: 0.28571429rem;
}

.ui.tabular.menu.nav-menu {
    border-bottom: none;
}

.ui.attached.tab.segment {
    border: none;
}

.ui.table.info {
    border: none;
}

.ui.table.info tr:last-child>td:first-child {
    border-bottom-left-radius: 0.28571429rem;
}

.ui.table.info tr:last-child>td:last-child {
    border-bottom-right-radius: 0.28571429rem;
}

#st-2 {
    text-align: left !important;
}


/* Styling additions */

.table.info {
    word-break: break-all;
}

.description {
    max-width: 468px;
}

.server-map-image {
    width: 100%;
}

.play-link {
    color: white;
    background: #2a2550;
    margin: 0;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    width: 20%;
    position: relative;
    float: right;
    font-weight: 500;
    text-align: center;
}

.play-link:hover {
    color: white;
}

.player-count {
    display: none;
    color: white;
    margin: 0;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    width: 20%;
    position: relative;
    float: right;
    font-weight: 500;
    text-align: center;
}

.ui.vertical.menu.insta-search {
    background-color: white;
    padding: 1rem 0rem 1rem 1rem;
    border: 1px solid rgba(34, 36, 38, .15);
    border-radius: .28571429rem;
}

.ui.message .header+p {
	color: black;
}


/* top message styles */

.top-message-container {
    display: none;
    background-color: #36393F;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9em;
    padding: 0.5em 0.25em;
    margin-bottom: -1em;
}


/* atmospheric-image-container styles */

#page-introduction-container {
    display: table;
    width: 100%;
    height: 178px;
    color: white;
    background-color: rgb(0 0 0 / 61%);
    background-image: url('https://rustservers.gg/CSS/atmospherics/original-atmospheric.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-blend-mode: color;
}

#page-introduction-content-container {
    display: table;
    width: 100% !important;
    height: 100%;
}

#page-introduction-content {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

#page-introduction-content p {
    padding: 0 1em;
    line-height: 1em;
}

.homepage-introduction-checkmarks {
    padding: 0 1em;
}

.homepage-introduction-checkmarks span {
    margin-right: 0.5em;
    white-space: nowrap;
    line-height: 1.75em;
}


/* Server name inside server column */

.hypr-server-name {
    line-height: 1.5em;
    margin-bottom: 0.5em;
    word-break: break-all;
    max-width: 468px;
}

.hypr-server-name a.hypr-server-name-link {
    color: rgba(0, 0, 0, .87);
}


/* Hypr search */

#hypr-search {
    position: relative;
    display: inline-block;
    width: calc(70% - 2rem);
    max-width: none;
}

#hypr-search i {
    position: absolute;
    left: 0;
    width: 2.67142857em;
    height: 40px;
    line-height: 38px;
    margin: 0;
    color: rgba(0, 0, 0, 0.4);
    pointer-events: none;
    float: left;
}

#hypr-search input {
    width: calc(100% - 7rem);
    height: 40px;
    background: white;
    color: rgba(0, 0, 0, .87);
    border: none;
    border-top: 1px solid rgba(34, 36, 38, .15);
    border-bottom: 1px solid rgba(34, 36, 38, .15);
    border-left: 1px solid rgba(34, 36, 38, .15);
    border-radius: .28571429rem 0 0 .28571429rem;
    padding-left: 2.67142857em;
    outline: none;
    float: left;
}

#hypr-search button {
    width: 7rem;
    height: 40px;
    background: white;
    color: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(34, 36, 38, .15);
    border-radius: 0 .28571429rem .28571429rem 0;
    cursor: pointer;
    float: left;
}

@media only screen and (max-width: 767px) {
    #hypr-search {
        width: 100%;
        margin-bottom: 0.75em;
    }
}


/* Hypr justwiped timeago text styling */

.hypr-justwiped-timeago {
    height: 1rem;
    font-size: 12px;
    font-weight: 400;
    text-shadow: 1px 1px 0 rgb(255 255 255 / 40%);
}


/* Hypr justwiped navigation */

#hypr-justwiped-navigation {
    padding-top: 0.5rem;
}

#hypr-justwiped-navigation a {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: white;
    color: rgba(0, 0, 0, .87);
    font-size: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    margin-right: 0.25rem;
    margin-bottom: 0.5rem;
}

#hypr-justwiped-navigation a:last-of-type {
    margin-right: 0;
}

#hypr-justwiped-navigation a.active {
    background: black;
    color: white;
}


/* Community server label styles */

.community-server-label {
    background: #21ba45;
    color: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    padding: 2px 5px;
    margin-right: 5px;
    font-size: 12px;
    font-weight: 400;
}

.community-server-label i {
    color: rgba(0, 0, 0, 0.4);
}


/* Top horizontal addy banner styles */

.top-horizontal-addy-banner-container {
    width: 100%;
    text-align: center;
    margin-top: 2rem;
}

.top-horizontal-addy-banner-container iframe {
    border-radius: 5px;
}

.top-horizontal-addy-banner {
    display: inline-block;
    transition: transform 0.1s;
}

.top-horizontal-addy-banner:hover {
    transform: scale(1.01);
}

.top-horizontal-addy-banner img {
    width: 100%;
    border-radius: 5px;
}

.top-horizontal-addy-banner-small {
    display: none;
}

@media only screen and (max-width: 767px) {
    .top-horizontal-addy-banner-large {
        display: none;
    }
    .top-horizontal-addy-banner-small {
        display: inline-block;
    }
}


/* Left and right scrolling vertical addy banner styles */

.ui.container {
    position: relative;
}

.left-scrolling-vertical-addy-banner iframe,
.right-scrolling-vertical-addy-banner iframe {
    border-radius: 5px;
}

.left-scrolling-vertical-addy-banner img,
.right-scrolling-vertical-addy-banner img {
    width: 100%;
    border-radius: 5px;
}

.left-scrolling-vertical-addy-banner {
    position: absolute;
    width: 160px;
    height: 600px;
    top: 1rem;
    left: calc(-160px - 2rem);
}

.right-scrolling-vertical-addy-banner {
    position: absolute;
    width: 160px;
    height: 600px;
    top: 1rem;
    right: calc(-160px - 2rem);
}

@media only screen and (max-width: 1470px) {
    .left-scrolling-vertical-addy-banner {
        display: none;
    }
    .right-scrolling-vertical-addy-banner {
        display: none;
    }
}


/* Server description styles */

.server-banner-and-description-container {
    position: relative;
    overflow: hidden;
    max-width: 468px;
}

.server-banner-and-description-container:hover>.server-description-container {
    height: 100%;
    color: rgba(255, 255, 255, 1);
    background: rgba(0, 0, 0, 0.75);
}

@media only screen and (max-width: 767px) {
    .server-banner-and-description-container:hover>.server-description-container {
        height: calc(100% - 2.5rem);
    }
}

@media only screen and (max-width: 767px) {
    .server-banner-and-description-container:hover>.server-description-container .show-description-button {
        background: rgba(0, 0, 0, 0.75);
    }
}

.server-description-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    max-width: 468px;
    height: 3.65rem;
    padding: 0.5rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    font-weight: 300;
    background: rgba(0, 0, 0, 0.5);
    transition: 0.5s ease;
    pointer-events: none;
}

@media only screen and (max-width: 767px) {
    .server-description-container {
        height: 2.15rem;
        pointer-events: all;
    }
}

.server-description-container .show-description-button {
    display: none;
    position: absolute;
    top: -1.5rem;
    left: 0;
    line-height: 1.5rem;
    padding: 0 0.5rem;
    background: rgba(0, 0, 0, 0.5);
    border-top-right-radius: 3px;
    pointer-events: all;
}

@media only screen and (max-width: 767px) {
    .server-description-container .show-description-button {
        display: block;
    }
}


/* PREMIUM STYLES ===================================================== */


/* premium-server */

.ui.table tr.premium-server td {
    border-top: 1px solid #FFD700;
    border-bottom: 1px solid #FFD700;
    font-weight: bold;
}

.ui.table tr.premium-server {
    border: 1px solid #FFD700;
    background: #ffe599 !important;
    font-weight: bold;
}

.ui.table tr.premium-server td:first-of-type {
    border-left: 1px solid #FFD700;
}

.ui.table tr.premium-server td:last-of-type {
    border-right: 1px solid #FFD700;
}

.premium-server .premium-server-label,
.premium-server-label-standalone {
    background: gold;
    color: black;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    padding: 2px 5px;
    margin-right: 5px;
    font-size: 12px;
    font-weight: bold;
}

.premium-server .premium-server-label i,
.premium-server-label-standalone i {
    color: darkgoldenrod;
}


/* supreme-premium-server */

.ui.table tr.supreme-premium-server td {
    border-top: 1px solid #00F2FF;
    border-bottom: 1px solid #00F2FF;
}

.ui.table tr.supreme-premium-server {
    border: 1px solid #00F2FF;
    background: linear-gradient(to bottom, #b5e7ff 0, #ffffff 100%);
}

.ui.table tr.supreme-premium-server td:first-of-type {
    border-left: 1px solid #00F2FF;
}

.ui.table tr.supreme-premium-server td:last-of-type {
    border-right: 1px solid #00F2FF;
}

.supreme-premium-server .premium-server-label,
.supreme-premium-server-label-standalone {
    background: gold;
    color: black;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    padding: 2px 5px;
    margin-right: 5px;
    font-size: 12px;
}

.supreme-premium-server .premium-server-label i,
.supreme-premium-server-label-standalone i {
    color: darkgoldenrod;
}


/* vip-premium-server */

.ui.table tr.vip-premium-server td {
    border-top: 0px solid #ffefbe;
    border-bottom: 0px solid #ffefbe;
    font-weight: bold;
}

.ui.table tr.vip-premium-server {
    border: 0px solid #ffefbe;
    background: linear-gradient(140deg, #ffefbe, #fbbd08, #fff8b7, #fbbd08);
    background-size: 150% 100%;
    background-repeat: no-repeat;
    animation: gradient 5s cubic-bezier(0.45, 0.05, 0.46, 0.09) infinite;
    font-weight: bold;
}

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

.ui.table tr.vip-premium-server td:first-of-type {
    border-left: 0px solid #ffefbe;
}

.ui.table tr.vip-premium-server td:last-of-type {
    border-right: 0px solid #ffefbe;
}

.vip-premium-server .premium-server-label,
.vip-premium-server-label-standalone {
    background: linear-gradient(88deg, #fcc829, #ffffff7d, #fcc829, #fcc829);
    animation: gradient 3s cubic-bezier(0.74, -0.02, 0.44, 1.04) infinite;
    background-size: 150% 100%;
    color: black;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    padding: 2px 5px;
    margin-right: 5px;
    font-weight: bold;
}

.vip-premium-server .premium-server-label i,
.vip-premium-server-label-standalone i {
    color: #cc0077;
}


/* END =============================================================== */


/* Mobile site title styles */

.site-title {
    display: flex;
    font-size: 1.4em;
    font-weight: 600;
    align-items: center;
    margin-right: 1.5em;
}

.mobile-site-title {
    display: none;
    font-size: 1.4em;
    font-weight: 600;
    padding-left: 1em;
    align-items: center;
}

.site-title i,
.mobile-site-title i {
    line-height: 1.1em;
    margin-right: 0.5em;
}


/* Vote steam login container styles */

.vote-steam-login-container {
    width: 100%;
    padding: 0.5rem;
    text-align: center;
}


/* WhatsApp button VIP*/

.float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    left: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
}

.my-float {
    margin-top: 16px;
}


/* Buttons About page colored */

.ui.primary.button,
.ui.primary.buttons .button {
    background-color: #ce422b;
    color: #fff;
    text-shadow: none;
    background-image: none;
}

.ui.secondary.button,
.ui.secondary.buttons .button {
    background-color: #16bbd1;
    color: #fff;
    text-shadow: none;
    background-image: none;
}


/* Blog overview page styles */

.blog-overview-page-item-container {
    width: calc(100%/3) !important;
}

.blog-overview-page-item {
    display: block;
    height: 100%;
    background: white;
    color: black;
    border-radius: 5px;
    padding: 0.5rem;
}

.blog-overview-page-item-image {
    width: 100%;
    height: 12.5rem;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.blog-overview-page-item-content {
    padding: 1rem 0.5rem 0.5rem 0.5rem;
}

.blog-overview-page-item-published {
    display: block;
    margin-bottom: 1rem;
    opacity: 0.8;
}

.blog-overview-page-item-read-button {
    display: inline-block;
    background-color: #ce422b;
    color: #fff;
    padding: 0.5rem 1.5rem;
    border-radius: 5px;
}

#blog-pagination {
    margin-top: 1.5rem;
    margin-bottom: 7.5rem;
}


/* Blog post page styles */

#blog-post-main {
    background: white;
    color: black;
    border-radius: 5px;
    padding: 1rem;
}

img#blog-post-image {
    width: 100%;
}

#blog-post-title {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

#blog-post-publication-date {
    display: block;
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

#blog-post-aside {
    padding-top: 0;
}

#blog-post-information table {
    width: 100%;
    border-collapse: collapse;
}

#blog-post-information table th, #blog-post-information table td {
    text-align: left;
    padding: 10px!important;
}

#blog-post-information table tr td:first-of-type {
    width: 100px;
    font-weight: 800;
}

#blog-post-information table tr:first-of-type>th {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

#blog-post-information table tr:last-of-type>td:first-child {
    border-bottom-left-radius: 5px;
}

#blog-post-information table tr:last-of-type>td:last-child {
    border-bottom-right-radius: 5px;
}

#blog-author-image {
    display: inline-block;
    width: 75px;
    height: 75px;
    line-height: 75px;
    border-radius: 50%;
    background-color: #cf452e;
    margin: 0.5rem 0;
    text-align: center;
}

#blog-author-image i {
    font-size: 2rem;
    color: white;
    margin: 0;
}

/* Community servers info message */

.community-servers-info-message-container {
    display: none;
}

.community-servers-info-message-body span:after {
    content: "our servers are currently undergoing maintenance, they are expected to come back online soon. From now on, whenever issues with one of our servers arise, we will not only inform our players inside our Discord but also show this message so everyone will stay fully informed at all times. Questions? You are more than welcome to join our Discord.";
    color: black;
}


/* Mobile styles */

@media only screen and (max-width: 975px) {
    #page-introduction-content p {
        display: none;
    }
    .mobile-site-title {
        display: flex;
    }
}

@media only screen and (max-width: 767px) {
    .player-count {
        display: block;
        width: 40%;
        max-width: 7.5em;
        background-color: rgba(0, 0, 0, 0.1);
    }
    .play-link {
        display: none;
    }
    .top-message {
        width: 100% !important;
    }
}