* {
    margin: 0;
    padding: 0;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
}
.article-textarea{
    width: 95%;
    height: 300px;
    margin: 0 auto;
    padding: 10px;
    font-size: 1em;
    border-radius: 15px;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
    text-align: left    ;
}
.input-textarea-ckeditor {
    width: 95%;
}
.email-change-container i,
.change-password-container i {
    font-size: 2em;
}
.theme-toggle{
    cursor: pointer;
    text-wrap: nowrap;
}
.theme-toggle i{
    position: relative;
    font-size: 1.25em;
    width: 10px;
    z-index: 1;
}
.theme-toggle i:nth-child(2){
    color: #0B3A68ff;
    z-index: -1;
}
h1,h2,h3,h4,h5,h6{
    font-weight: 900;
}
input, select, textarea, button {}
header {
    width: calc(50vw - 50px + 50%);
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    background-color: #0B3A68ff;
    border-radius: 0 0 15px 15px;
}
.header-item{
    flex-grow: 1;
    text-align: center;
}
header a {
    text-decoration: none;
    color: white;
}
.header-user, .header-logo{
    max-width: 20%;
    justify-content: center;
}
.nav-box {
    width: auto;
    display: flex;
    text-align: center;
    border-radius: 5px;
    color: white;
    font-size: 1.2em;
    z-index: 1;
}
.nav-box-left, .nav-box-right{
    width: 25%;
}

.nav-box-left{

}
.nav-box-center{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}
.nav-box-center:nth-child(1){
    text-align: left;
}
.nav-box-notifs{
    padding: 8px 0;
}
.nav-box-right{

}

.nav-box-logged-in {
    top: 13px;
}
.nav-box-avatar {
    width: 48px;
    height: 48px;
    vertical-align: top;
    padding: 1px;
    border-left: 2px solid rgba(77, 188, 221, 1);
    border-top: 2px solid rgba(77, 188, 221, 1);
    border-bottom: 2px solid rgba(37, 204, 148, 1);
    border-right: 2px solid rgba(37, 204, 148, 1);
    border-radius: 50%;
}

nav{
    display: flex;
    justify-content: center;
    align-items: center;
}
nav ul{
    display: flex;
    flex-grow: .2;
    list-style: none;

}
nav ul li{
    flex:auto;
}
header li{
    position: relative;
    font-weight: bold;
    font-size: 1.3em;
    padding: 10px;
}
header li a:hover{
    color: rgba(77, 188, 221, 1);
}
.logo {
    max-width: 200px;
}
.notloggedin{
    align-items: center;
}
.notloggedin .nav-box-notifs{
    margin: 0 2.5px;
}
#help-nav {
    position: absolute;
    z-index: 4;
    min-width: 175px;
    display: none;
    border-radius: 15px;
    left: -60%;
    top: 40px;
    background-color: #0B3A68ff;
}
#list{
    position: relative;
}
.loader-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    

}

.loader {
    height: 80px;
    aspect-ratio: 1;
    display: grid;
  }
  .loader:before,
  .loader:after {
    content: "";
    --c:no-repeat linear-gradient(#000 0 0);
    background: var(--c), var(--c);
    background-size: 25% 50%;
    animation: l4 1.5s infinite linear;
  }
  .loader:after {
    transform: scale(-1);
  }
  @keyframes l4 {
    0%,
    10%  {background-position:33.4% 100%,66.6% 100%}
    40%  {background-position:33.4% 0,100% 100%}
    70%  {background-position:0 100%,66.6% 0}
    100% {background-position:33.4% 100%,66.6% 100%}
  } 
.list-filters > label {
    display: flex;
    vertical-align: middle;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin: 5px 0;
}
.page-list-item{
    display: inline-block;
    width: 100%;
    transition: opacity .75s;
    vertical-align: top;
}
#loading-bar{
    position: relative;
    width: 100%;
    height: 25px;
    background-color: rgba(77, 188, 221, 1);
    margin: 10px 0;
    border-radius: 15px;
    text-align: center;
}
#loading-bar-fill{
    position: absolute;
    width: 0;
    height: 100%;
    background-color: rgba(37, 204, 148, 1);
    border-radius: 15px;
    transition: width 1s;
    border-radius: 15px;
    z-index: 1;
}
#tooltip-controller{
    display: none;
    position:fixed;
    bottom:0;
    right:0;
    border-radius: 10%;
    min-width: 150px;
    max-width: 150px;
    padding: 5px;
    margin: 5px;
    cursor: pointer;
    z-index: 9999;
    text-align: center;
}
#tooltip-controller>div{
    display: none; 
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    text-align: center;
    padding: 5px;
    width: 60%;
}
#tooltip-controller>div>div{
    display: none;
    justify-content: center;
    width: 15px;
    font-size: 1.2em;
    padding: 5px;
    border-radius: 10px;
}
.tippy-box{
    display: none;
    font-size: 1.1em;
}
a {
    color: black;
}
.main-search{
    display: block;
    margin: 0 auto;
    width: 50%;
    padding: 10px;
    text-align: center;
    border-radius: 15px;
}
.main-search input[type="text"]{
    width: 98%;
    padding: 1%;
    font-size: 3em;
    border-radius: 10px;
}
.section-header i{
    font-size: 1.6em;
}
.setting_section_cont{
    display: none;
}
.server-list,
.user-profile{
    min-height: calc(100vh - 200px);
}
.community-carousel{
    width: 100%;
    height: 50%;
    display: grid;
    grid-template-columns: .25fr .25fr .25fr;
    grid-template-rows: .5fr;
    justify-items: center;
    margin: 0 auto;
    padding: 5vh 0;
    justify-content: center;
}
.community-carousel-item{
    min-width: 300px;
    width: 33.3%;
    height: auto;
    display: grid;
    text-align: center;
    padding: 10px;
    border-radius: 15px;
    box-shadow: 0 0 5px;
    background-color: #fff;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}
.community-carousel-banner{
    min-height: 100px;
    position: relative;
}
.community-carousel-icon{
    position: absolute;
    bottom: 0;
    right: 0;
    left:0;
    margin: 0 auto;
    width: 64px;
    height: 64px;
    padding: 5px;
    background-color: rgba(255,255, 255, 0.9);
    border-radius: 50px;

}
.community-carousel-icon img{
    bottom:0;
}
.community-carousel-banner-img{
    width: 100%;
    max-height: 50%;
    border-radius: 15px;
}

.messages-grid-header{
    font-size: 1.3em;
}
.messages-grid-header, .messages-grid-list{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 5px;
    align-items: center;
    justify-items: center;
    border-radius: 5px;

}
.messages-grid-list{
    margin: 3px 0;
}
.ck-content ul, .ck-content ol, .ck-content li{
    padding: revert;
    margin: revert;
}
.setting-section{
    width: 90%;
}
.setting{
    display:inline-flex;
    vertical-align: top;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 0 2px;
    border-radius: 15px;
    margin: 5px 2px;
    min-height: 175px;
    text-align: left;
}
.setting label{
    font-size: 1.2em;
    font-weight: bold;
    display: block;
    margin: 10px;
}
.setting>input, .setting>select, .setting>textarea{
    width: 90%;;
    padding: 5px;
    margin: 5px;
}
.setting textarea{
    min-height: 100px;
}
.report-form
.add-server-desc .ck-content {
    min-height: 400px;
}
.add-server-desc #serverDesc{
    text-align: left;
}
#url_preview{
    word-break: break-all;
}
.user-perms{
    display: block;
    margin: 2px;
    padding: 2px;
    border-radius: 5px;
    font-size: 1em;
}
.permission-select{
    height: 100px;
}
.permissions-list-item>button,.permissions-list-item>p{
    display: inline-block;
}
#hide-ads,
#hide-ads u {
    cursor: pointer;
}

.content-page-link {
    margin: 10px 0;
}

.content-page {
    margin: 0 auto;
    min-width: 300px;
    max-width: 50%;
    min-height: 80vh;
}

.replyComment,
.postComment {
    box-shadow: inset 0 0 2px black;
    border-radius: 15px !important;
    height:auto;
    max-height: 250px;
}
.postComment:focus, .replyComment:focus{
    height: 100px;
}
.postComment:focus, .replyComment:focus{
    height: 100px;
}

.content-hr {
    border-left: 2px solid rgba(77, 188, 221, 1);
    border-top: 2px solid rgba(77, 188, 221, 1);
    border-bottom: 2px solid rgba(37, 204, 148, 1);
    border-right: 2px solid rgba(37, 204, 148, 1);
}

input[type=checkbox] {
    width: 30px;
    height: 30px;
}



.content-feed-user {
    display: inline-block;

}

.content-feed-comment-item {
    width: 90%;
}

.content-feed-content {
    max-height: 50px;
    overflow: hidden;
}

.content-feed-content img {
    max-width: 100%;
}

.content-feed-comment {
    position: relative;
    width: 100%;
}

.content-feed-interactions-bar {
    text-align: center;
    display: flex;
}

.content-react-btn,
.content-comment-btn,
.content-share-btn {
    position: relative;
    border-left: 2px solid rgba(77, 188, 221, 1);
    border-top: 2px solid rgba(77, 188, 221, 1);
    border-bottom: 2px solid rgba(37, 204, 148, 1);
    border-right: 2px solid rgba(37, 204, 148, 1);
    padding: 5px;
    width: 33%;
    margin: 5px;
    vertical-align: middle;
    border-radius: 10px;
}

.content-react-cont {
    position: relative;
    font-size: 20px;
    margin: 2px;
    min-height: 24px;
    vertical-align: middle;

}

.content-react-cont > div > span {
    font-size: 16px !important;
    vertical-align: middle;
    padding: 3px;
}

.feels-text-cont {
    margin: 0 6px;
}

.feels-text-cont,
.your-feels {
    display: inline-flex;
    font-size: 20px;
    vertical-align: middle;
}

.content-react-cont > div i {
    vertical-align: middle;
}

.heart-icon {
    background: crimson;

}

.sad-icon {
    background: rgba(77, 188, 221, 1);

}

.laugh-icon {
    background: #eade00;

}

.like-icon {
    background: -webkit-linear-gradient(rgba(77, 188, 221, 1), rgba(37, 204, 148, 1));

}

.angry-icon {
    background: -webkit-linear-gradient(#ff5b5b, crimson);

}

.surprise-icon {
    background: #c707f2;
}

.heart-icon,
.like-icon,
.sad-icon,
.laugh-icon,
.angry-icon,
.surprise-icon {
    font-size: 20px !important;
    -webkit-background-clip: text;
    background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    vertical-align: middle;
}


.content-react-hover,
.content-share-hover {
    display: none;
    position: absolute;
    top: 98%;
    left: -25px;
    min-width: 275px;
    min-height: 50px;
    justify-content: center;
    font-size: 24px;
    padding: 5px;
    z-index: 9999;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 15px;
}



.react-icon-cont {
    display: inline-flex;
    align-items: center;
}

.react-icon-cont > div {
    display: inline-flex;
    margin: 0 3px;
    vertical-align: middle;
}

.react-icon-cont > div > i,
.react-icon-cont > div > span,
.your-feels > div {
    padding: 0 3px;
}

.content-react-hover i {
    font-size: 48px !important;
    margin: 2px;
}



.content-share-btn:hover > .content-share-hover,
.content-react-btn:hover > .content-react-hover {
    display: flex;
}


.content-react-hover > i:hover {
    font-size: 58px !important;
}

#tooltip-controller,
#tooltip-controller,
.content-feed-item,
.drophere,
.edit-link-items,
.legal-disclosure,
.server-page-title,
.srv-page-interact,
.serverDetailWrap,
.srv-page-desc,
.server-page-right,
.left-list,
.right-list,
.help-block,
.contactus,
.login-register,
.account-settings,
.server-settings-editor,
.account-recover-cont,
.parentComment,
.childComment,
.server-dashboard,
.dashboard-left,
.dashboard-small-items,
.dashboard-items,
.notifications,
.notif-item,
.old-notif-item,
.messages-container,
.message-list,
.message-read,
.messages,
.reply-message,
.news-title,
.news-info,
.news-content,
.parentNewsComment,
.commentInteract,
.edit-comment-overlay,
.delete-overlay,
.delete-confirm,
.delete-confirm-review,
.stuff-box,
#login-form,
.MOTD-confirm,
.extra-options,
.add-server-heading,
.add-server-desc,
.add-server-tags,
.add-server-obj-center,
.hide-ip-option,
.server-confirmation,
.error-container,
.claim-form,
.report-form form,
.review-container,
.review-item,
.announcement,
.lists-page,
.default-list-link,
.bedrock-support-cont,
.server-dashboard-calendar,
.calendar-left,
.server-event-item,
.delete-modal,
.error,
.event-edit-item,
.upcoming-only,
.delete-box,
.current-announcement,
.error-popup,
.success-popup,
.user-perms,
.settings-section, .special-thanks {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 1px 0 5px rgba(0, 0, 0, 0.1);
    margin: 10px;
}

.special-thanks{
    text-align: left;
    font-size: 1.2em;
    padding: 5px;
    margin: 5px auto;
    list-style-position: inside;

}
.special-thanks ol{
    padding: 0 10px;
    margin: 0;
}
.content-feed-item {
    text-align: left;
    height: auto;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
} 
#popup-cont {
    position: fixed;
    margin: 0 auto;
    width: auto;
    top: 0;
    left: 0;
    right: 0;
    max-width: 500px;
    min-width: 300px;
    z-index: 100;
    text-align: center;
    max-height: 40vh;
    overflow: hidden;
}

.error-popup,
.success-popup {
    position: relative;
    display: block;
    padding: 10px;
    font-size: 1.2em;
    box-shadow: 0 3px 5px black;
}

.error-item,
.success-item {
    display: block;
    opacity: 0;
    transition: opacity .5s linear;
}

.error-item-show,
.success-item-show {
    opacity: 1;
}

.error-popup {
    color: white;
    background-color: crimson;
}

.success-popup {
    background-color: #21e600;
    color: white;
}

.legal-disclosure {
    width: 90%;
    padding: 5px;
    font-size: .9em;
    margin: 10px auto;
    font-style: italic;
    word-break: keep-all;
    background-color: rgb(239, 239, 239);

}

.visually-hidden {
    display: none;
}

.opened {
    display: block;
}

.delete-server-setting button {
    background-color: orangered;
    font-size: 1.2em;
    width: 200px;
}

.delete-server-setting button:hover {
    background-color: red;
}

.delete-server-setting input {
    font-size: 1.2em;
    padding: 3px;
}

.future-event-display {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
    background-color: #fff;
}

.success-notif-box {
    background-color: lightgreen;
    font-size: 1.1em;
    padding: 5px;
    color: black;
    margin: 5px;
}

.site-setting-input {
    font-size: 1.2em;
    padding: 5px;
    width: 50px;
    text-align: center;
}

.site-setting-item {
    text-align: center;
    display: inline-block;
    width: auto;
    min-width: 100px;
    max-width: 200px;
    border-radius: 15px;
    margin: 5px;
    padding: 5px;
    min-height: 80px;
    max-height: 200px;
    background-color: #fff;
    vertical-align: top;
}

.site-setting-save {
    width: 200px;
    font-size: 1.3em;
    padding: 10px;
    border-radius: 15px;
    cursor: pointer;
}

.site-setting-save:hover {
    box-shadow: inset 0 0 1px black;
}

.failed-notif-box, .remove-perms-btn {
    background-color: crimson;
    font-size: 1.1em;
    padding: 5px;
    color: white;
    margin: 5px;
}
.remove-perms-btn{
    font-size: .6em;
    cursor: pointer;
    border-radius: 10px;
}
.remove-perms-btn:hover{
    background-color: red;
}
.change-email-form,
.change-password-form {
    display: none;
    margin: 10px 0;
    box-shadow: 0 0 1px;
    padding: 10px 0;
    border-radius: 15px;
}

.change-email-form label,
.change-email-form input,
.change-email-form button,
.change-password-form button,
.change-password-form label,
.change-password-form input {
    display: block;
    width: 50%;
    padding: 5px;
    margin: 0 auto;
    font-size: 1.2em;
}

.change-email-form button,
.change-password-form button {
    margin: 10px auto;
    cursor: pointer;
}

.default-list-link {
    margin: 5px auto !important;
    min-width: 190px;
    width: 10%;
    display: block;
    padding: 5px;
    font-size: 1.2em;
    background: linear-gradient(90deg, rgba(37, 204, 148, 0.5) 0%, rgba(77, 188, 221, 0.5) 100%);
}

.default-list-link:hover {
    animation: gradient_bg 1s linear infinite;
    cursor: pointer;
    cursor: pointer;
}

.default-list-link a:hover {
    color: white;
}

@keyframes gradient_bg {
    0% {
        background: linear-gradient(0deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    2.7% {
        background: linear-gradient(0deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    5.4% {
        background: linear-gradient(10deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    8.1% {
        background: linear-gradient(20deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    10.8% {
        background: linear-gradient(30deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    13.5% {
        background: linear-gradient(40deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    16.2% {
        background: linear-gradient(50deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    18.9% {
        background: linear-gradient(60deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    21.6% {
        background: linear-gradient(70deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    24.3% {
        background: linear-gradient(80deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    27% {
        background: linear-gradient(90deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    29.7% {
        background: linear-gradient(100deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    32.4% {
        background: linear-gradient(110deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    35.1% {
        background: linear-gradient(120deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    37.8% {
        background: linear-gradient(130deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    40.5% {
        background: linear-gradient(140deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    43.2% {
        background: linear-gradient(150deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    45.9% {
        background: linear-gradient(160deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    48.6% {
        background: linear-gradient(170deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    51.3% {
        background: linear-gradient(180deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    54% {
        background: linear-gradient(190deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    56.7% {
        background: linear-gradient(200deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    59.4% {
        background: linear-gradient(210deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    62.1% {
        background: linear-gradient(220deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    64.8% {
        background: linear-gradient(230deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    67.5% {
        background: linear-gradient(240deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    70.2% {
        background: linear-gradient(250deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    72.9% {
        background: linear-gradient(260deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    75.6% {
        background: linear-gradient(270deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    78.3% {
        background: linear-gradient(280deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    81% {
        background: linear-gradient(290deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    83.7% {
        background: linear-gradient(300deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    86.4% {
        background: linear-gradient(310deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    89.1% {
        background: linear-gradient(320deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    91.8% {
        background: linear-gradient(330deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    94.5% {
        background: linear-gradient(340deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    97.2% {
        background: linear-gradient(350deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }

    99.9% {
        background: linear-gradient(360deg, rgba(37, 204, 148, 1) 0%, rgba(77, 188, 221, 1) 100%);
    }
}

.lists-page {
    padding: 10px;
    min-height: 59vh;
}

.lists-item {
    display: inline-block;
    border-radius: 15px;
    margin: 3px !important;
    width: 40%;
    text-align: center !important;
    background: linear-gradient(90deg, rgba(37, 204, 148, 0.5) 0%, rgba(77, 188, 221, 0.5) 100%);
}

.lists-item:hover {
    animation: gradient_bg 1s linear;
    animation-iteration-count: infinite;
}

.list-item-img {
    min-height: 100px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.server-page-review-buttons {
    text-align: center;
}

.server-page-review-buttons div,
.server-page-review-buttons a {
    cursor: pointer;
    padding: 5px;
    text-decoration: underline;
    display: inline-block;
}

.fa-bell,
.fa-envelope {
    position: relative;
}

.fa-bell::before,
.fa-envelope::before,
.fa-cog::before,
.fa-chart-bar::before,
.fa-server::before,
.fa-paper-plane,
.fa-shield-alt::before,
.fa-newspaper-o {
    display: inline-block;
    vertical-align: middle;
    font-size: 1.6em;
}

.nav-box-icons::before {
    font-size: 1.4em;
}

.nav-box-icons {
    margin: 0 5px;
}

.notification-number-overlay {
    position: absolute;
    right: -4px;
    top: -8px;
    color: #fff;
    background-color: #CF503Bff;
    border-radius: 50%;
    padding-top: 1px;
    padding-bottom: 3px;
    padding-right: 4px;
    padding-left: 4px;
    font-size: 14px;
    text-align: center;
}

.gemini-servers-comment {
    font-size: 1.5em;
    font-weight: bold;
}

.gemini-servers-comment-fade {
    opacity: 0.5;
}

#search-dropdown {
    list-style-type: none;
}

.tagit {
    overflow: hidden;
}
/* TODO: FIX - This is causing some weirdmess when focusing the input and scrolling while it is focused. */
.textarea-ckeditor-description .ck-editor__editable_inline {
    min-height: 300px; /* Set your desired minimum height here */
}
 .cke_contents {
    min-height: 500px;
}

.event-edit-selection .ck-content,
.dashboard-board .ck-content,
.compose-mail .ck-content,
.admin-site-settings .ck-content {
    height: 80vh;
    max-height: 80vh;
}

.save-settings-btn {
    margin-top: 10px;
    width: 50%;
    height: 45px;
}

#load-more-box a {
    text-decoration: none;
}

.server-page {
    display: inline-flex;
}

.contactus-header {
    font-size: 3em;
    padding-top: 1%;
}

.server-page-review-buttons {
    margin: 15px;
}

.add-server-heading,
.add-server-desc,
.add-server-tags,
.add-server-obj-center,
.add-server-ip-port,
.hide-ip-option,
.server-confirmation {
    padding: 10px;
}

.server-settings-editor {
    font-size: 1.1em;
    padding: 10px;
}

.server-settings-editor input,
.server-settings-editor span {
    vertical-align: middle;
}

.server-settings-editor input[type=checkbox] {
    width: 30px;
    height: 30px;
}

.add-server-form-cont {
    width: 50%;
    margin: 0 auto;
}

#login-form,
.stuff-box {
    margin: 0;
}

.server-setting-editor input {
    background-color: lightgray;
}

.help-block {
    text-align: left;
    padding: 1%;
    line-height: 1.25;
}

.help-list a {
    padding: 5px;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    display: inline-block;
    margin: 2px;
}

.help-list a:hover {
    background-color: #0B3A68;
}

.amazon-links {
    width: auto;
    text-align: center;
}

.grecaptcha-badge {
    bottom: 10vh !important;
}

.form-creator {
    display: inline-flex;
    width: 76%;
    border: solid 1px black;
    min-height: 560px;
    vertical-align: top;
}

.form-creator label {
    display: block;
}

#form-creator,
#form-created {
    width: 49%;
}

.form-creator-div:nth-child(even) {
    background-color: beige;
}

.form-creator-div {
    position: relative;
    height: 5vh;
}

.application-delete-element {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 2em;
    color: red;
    text-align: center;
}

#form-creator > input,
#form-creator > textarea {
    display: block;
}

.form-item-selection {
    display: inline-block;
    vertical-align: top;
    max-height: 70vh;
    overflow: auto;
}

.form-item > button,
.form-item > span {
    display: block;
    width: 60%;
    margin: 0 auto;
}

.form-item {
    display: block;
    width: 300px;
    text-align: center;
    padding: 10px;
    border: solid 1px black;
}

.app-item {
    height: auto;
    padding: 2px;
    max-width: 300px;
    border: 1px solid;
    border-radius: 4px;
    box-shadow: 0 0 1px black;
}

.app-item-preview {
    text-align: center;
    padding: 10px;
    border: 1px solid;
    overflow: hidden;
    box-shadow: inset 0 0 2px black;
}

.hide-button {
    display: block;
    height: 50px;
    width: 50px;
}

.vertical-align {
    vertical-align: middle;
}

.admin-icon {
    width: 35px;
}

#show-qr {
    margin-top: 5px;
    font-size: 1.1em;
}

#show-qr:hover,
#hide-qr:hover,
.btn-login:hover,
.btn-signup:hover,
.save-settings-btn:hover,
.content-share-hover img:hover {
    cursor: pointer;
}


#qr-code a img {
    width: 100%;
}

#qr-code span {
    font-weight: bold;
    font-size: 1.2em;
}

/* Slideshow container */
.slideshow-container {
    max-width: 1000px;
    max-height: 486px;
    position: relative;
}

#server_status {
    width: 100%;
    padding: 2px 0;
    text-align: center;
}

/* Hide the images by default */
.mySlides,
.myVidSlides {
    position: relative;
    min-height: 350px;
    display: none;
}

.myVidSlides {
    min-height: 350px;
}

.page-video-cont {
    position: relative;
}

.mySlides img,
.myVidSlides iframe {
    width: auto;
    height: 350px;
    height: 350px;
    max-width: 100%;
    max-height: 350px;
    overflow: hidden;
}
.myVidSlides iframe{
    width:100%;
}

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(0, 0, 0, 0.15);
}

.pause-play {
    display: inline-block;
    padding: 1px;
    box-shadow: 0 0 2px black;
    width: 100px;
    margin-left: 5px;
    vertical-align: middle;
    cursor: pointer;
}

.pause-play:hover {
    background-color: #3C6D70;
    color: white;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.prev {
    left: 0;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);

}

/* Number text (1/3 etc) */
.numbertext {
    color: #f2f2f2;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.dot,
.viddot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    transition: background-color 0.6s ease;
}

.active,
.dot:hover,
.viddot:hover {
    background-color: #717171;
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    }

    to {
        opacity: 1
    }
}

.voteTestButton {
    padding: 5px;
    background-color: #fff;
    margin: 4px auto;
    box-shadow: 0 0 3px;
    width: 100px;
    border-radius: 5px;
}

.voteTestButton:hover {
    background-color: #519296;
    color: white;
    cursor: pointer;
    box-shadow: inset 0 0 3px;
}

#testVote {
    font-size: 1.2em;
    font-weight: bold;
    background-color: #fff;
    box-shadow: 0 0 2px black;
    border-radius: 5px;
    padding: 2px;
}

#toggle-video-img {
    display: block;
    width: 50%;
    margin: 5px auto;
    padding: 5px;
    box-shadow: 0 0 5px;
    cursor: pointer;
}

#toggle-video-img:hover {
    box-shadow: inset 0 0 5px;
}

#share-buttons img {
    width: 35px;
    padding: 5px;
    border: 0;
    box-shadow: 0;
    display: inline;
}

#share-buttons a {
    text-decoration: none;
}

.login-register {
    display: block;
    text-align: center;
    padding: 10px;
}

.block-label,
.inline-block-label {
    display: block;
    font-weight: bold;
}

.inline-block-label {
    display: inline-block !important;
}

.recover-account-inputs {
    position: relative;
    display: block;
    width: 100%;
}

.recover-account-inputs input,
.recover-account-inputs button {
    width: 50%;
    padding: 10px;
    font-size: 1.2em;
    margin: 2.5px 0;
}

.recover-account-inputs a {
    display: inline-block;
    font-size: 1.5em;
    padding: 3px;

}

.login-register-input-cont {
    display: block;
    margin: 0 auto;
    width: 75%;
}



.login-register input,
.login-register button {
    width: 100%;
    margin: 3px;
    padding: 7px;
}
.login-register-buttons{
    width: 50%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5px;

}
.register, .forgotpassword, .forgotpassword a, .register a {
    color:white !important;
    text-decoration: none;
    font-size: 1em;
}
.login-register-buttons{
    width: 50%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5px;

}
.register, .forgotpassword, .forgotpassword a, .register a {
    color:white !important;
    text-decoration: none;
    font-size: 1em;
}
.login-register input[type=checkbox],
.account-settings-form input[type=checkbox] {
    width: 25px;
    height: 25px;
    vertical-align: middle;
}
.account-settings-form input[type=text], .account-settings-form select {

    min-width: 50%;
    max-width: 80vw;
    padding: 5px;
    font-size: 1em;
    margin: 5px auto;
}
.stay_logged {
    display: inline-block;
}

.login-register-btn {
    max-width: 50px;
    max-height: 50px;
    position: relative;
    vertical-align: top;
    z-index: 1;
    font-size: 2.4em;
    padding: 5px 10px;
    margin-left: 10px;
}
.login-register-buttons button:hover, 
.login-register-input-cont button:hover{
    background-color: #25CC94ff;
}
.login-register-btn:hover{
    cursor: pointer;
    background-color: #fff;
    color: #25CC94ff;
}

.privacy-check {
    height: 20px;
    width: 20px;
    vertical-align: middle;
    display: inline;
}

.privacy-label,
.stay_logged {
    font-weight: bold;
}

.register-email,
.register-username,
.register-passwords,
.login-register-input-cont {
    text-align: left;
    display: block;
    width: 50%;
    margin: 5px auto;
}

.register-email span,
.register-username label,
.register-passwords span {
    display: inline-flex;
    text-align: left;
    width: auto;
}

.register-email input,
.register-username input,
.register-passwords input {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0 5px;
    height: 4vh;
    font-size: 16px;
    font-weight: bold;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.login-fade {
    position: fixed;
    display: none;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    z-index: 50;
    text-align: center;
}

.edit-comment-overlay span,
.delete-confirm span {
    text-decoration: underline;
    cursor: pointer;
}

.edit-comment-overlay span:hover,
.delete-confirm span:hover {
    color: #397b7f;
}

.delete-confirm,
.edit-comment-overlay,
.delete-confirm-review {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 45vw;
    min-width: 100px;
    padding: 10px;
    height: auto;
    border: 1px solid;
    text-align: center;
    z-index: 9999;
    transform: translate(-50%, -50%);
}

.delete-confirm p,
.delete-confirm-review p {
    color: crimson;
    padding: 5px;
    font-size: 1.15em;
}

.delete-confirm a {
    margin: 15px;
    padding: 5px;
    background-color: gainsboro;
    box-shadow: black 1px 1px 1px;
}

.delete-confirm a:hover {
    box-shadow: inset black 1px 1px 1px;
}

.login {
    display: inline-block;
    width: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    text-align: left;
}

.close-infobox::before {
    content: "x";

}

.close-infobox {
    padding: 2px;
    font-weight: bold;
    position: absolute;
    top: 0.5%;
    right: 1%;
    color: red;
    font-size: 1.8em;
}

.close-infobox:hover {
    color: tomato;
    cursor: pointer;
}

table {
    border: solid #dcdcdc 1px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
    background-color: #fff;
}

table tr,
td {
    padding: 15px;
    width: auto;
}

table tr td input {
    width: 97%;
    height: 45px;
    border: solid #e1e1e1 1px;
    border-radius: 3px;
    padding-left: 10px;
    font-size: 16px;
    background: #f9f9f9;
    transition-duration: 0.5s;
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 1.2);
}

table tr td button {
    width: 100%;
    height: 45px;
    border: 0;
    background: #AAA;
    background: -moz-linear-gradient(top, #595959, #515151);
    border-radius: 3px;
    box-shadow: 1px 1px 1px rgba(1, 0, 0, 0.2);
    color: #f9f9f9;
    font-size: 18px;
    font-weight: bolder;
    text-transform: uppercase;
}

table tr td button:active {
    position: relative;
    top: 1px;
}

table tr td button:hover {
    box-shadow: 2px 2px 2px rgba(1, 0, 0, 0.5);
    transition: all .2s;
    cursor: pointer;
}

table tr td a {
    text-decoration: none;
    color: #000;
    font-size: 1em;
}

#login img,
.setting-icon {
    vertical-align: middle;
    height: 30px;
}

.events-header {
    display: flex;
}

.navigation-bars {
    font-size: 40px;
    padding: 5px 10px;
}

.menu-button {
    position: absolute;
    display: none;
    z-index: 1;
    right: 0;
    border: none;
}

.login-link,
.register-link {
    display: inline-block;
}

.info-box {
    width: 100%;
    height: auto;
}

.info-box a {
    text-decoration: none;
}

.avatar {
    vertical-align: middle;
    width: 35px;
    height: 35px;
    padding: 4px;
}

.mail-icon {
    width: 25px;
    height: 20px;
    vertical-align: middle;
}

.youHaveMail {
    background-color: red;
}

.notification {
    width: 25px;
    vertical-align: middle;
}

.info-box span {
    padding: 3px;
    margin: 2px;
}


#list-nav {
    left: -20%;
}

#help li,
#list-nav li {
    display: block;
    font-size: 1em;
}

body {
    position: relative;
    display: block;
    min-height: 100vh;
    background-color: #F0F2F5;
}

.server-list,
.ultima-server-list,
.dashboard-container,
.breadcrumb,
.user-profile {
    margin: 0 auto;
    height: 100%;
    width: 100%;
    overflow: hidden;
    text-align: center;
}
.breadcrumb i{
    margin: 0 2.5px;
    font-size: 1.2em;
}
.breadcrumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: unset;
    padding: 5px 0;
    font-weight: bold;
    font-size: 1em;
}
.breadcrumb a, .breadcrumb span {
    text-decoration: none;
    color: rgb(0, 141, 188);
    padding: 5px;
}
.breadcrumb a:hover {
    color: #0B3A68ff;
    text-decoration: underline;
}
.breadcrumb i{
    margin: 0 2.5px;
    font-size: 1.2em;
}
.breadcrumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: unset;
    padding: 5px 0;
    font-weight: bold;
    font-size: 1em;
}
.breadcrumb a, .breadcrumb span {
    text-decoration: none;
    color: rgb(0, 141, 188);
    padding: 5px;
}
.breadcrumb a:hover {
    color: #0B3A68ff;
    text-decoration: underline;
}

.list-container,
.ultima-list-container,
.server-dashboard,
.server-dashboard-calendar,
.settings-list-cont {
    display: inline-flex;
    flex-direction: column;
    width: calc(50vw - 50px);
    text-align: center;
    flex-wrap: nowrap;
    margin: 0 0;
    margin: 0 0;
}

.settings-list-cont {
    width: 65vw;
}

.server-dashboard-calendar {
    width: auto;
    max-width: 83%;
}

.sitewide-calendar {
    max-width: 100%;
}

.ultima-list-container {
    min-height: 75vh;
    height: auto;
    width: calc(50vw - 110px);
    border: 30px solid transparent;
    border-image: url(images/default/uo-scroll-background.png) 60 fill;
}

.ultima-online-list,
.ultima-online-page {
    background: transparent;
}

.ultima-online-item,
.ultima-online-texture {
    background: url(images/default/uo-repeated-texture.jpg) repeat top left;
    box-shadow: inset 0 0 4px;
    font-weight: bold;
}

.ultima-online-texture {
    font-weight: normal;
    box-shadow: none;
}

.uo-news-header {
    font-size: 1.1em;
    text-decoration: underline;
}

.list-container-large {
    display: block;
    float: left;
    width: 100%;
    margin: 0 auto;
    min-height: 90vh;
    height: 100%;
    background-color: #d9d9d9;
    clear: both;
}

.server-dashboard {
    position: relative;
    height: 100%;
    margin: 0.5%;
}

.dashboard-board {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 1.7em;
}

.dashboard-left,
.calendar-left {
    width: 15%;
    min-height: 0;
    height: auto;
}

.calendar-left {
    width: 20% !important;
    margin: 0;

}

.dashboard-container {
    min-height: 100vh;
    text-align: center;
}

.dashboard-small-items {
    display: inline-block;
    vertical-align: top;
    width: 40%;
    padding: 5px;
    margin: 0.3%;
    min-height: 165px;
}

.review-container {
    width: 75%;
    margin: 1% auto;
    padding: 1%;
    min-height: 55vh;
}

.image-delete-btn {
    max-width: 250px;
    width: auto;
    box-shadow: black 0 0 3px;
    background-color: #eee;
    color: black;
    margin: 15px auto;
}

.image-delete-btn:hover {
    box-shadow: black inset 0 0 3px;
    color: white;
    background-color: crimson;
}

.post-news-btn {
    display: inline-block;
    padding: 5px;
    margin: 5px;
    background-color: #eee;
    box-shadow: 1px 1px 1px black;
}

.compose-mail {
    margin: 10px 0;
    text-align: center;
}

.compose-mail input {
    margin: 10px;
    height: 25px
}

.compose-mail textarea {
    height: 200px;
    width: 500px;
}

.msg-subject-input {
    width: 80%;
}

.msg-lookup-user {
    margin: 2px 0;
    padding: 2px;
    border-left: 2px solid rgba(77, 188, 221, 1);
    border-top: 2px solid rgba(77, 188, 221, 1);
    border-bottom: 2px solid rgba(37, 204, 148, 1);
    border-right: 2px solid rgba(37, 204, 148, 1);
}

.msg-lookup-user:hover {
    cursor: pointer;
    background-color: rgba(77, 188, 221, 1);
}

.msg-search-dropdown {
    overflow: hidden;
    transition: height .6s, opacity .5s linear;
    opacity: 0;
    height: 1px;
    margin: 0 auto;
    width: 250px;
}

.additional-msg-input {
    display: inline-block;
}

.additional-msg-input-item {
    border: none;
    background-color: #eee;
    text-align: center;
    display: inline-block;
    max-width: 150px;
    width: auto;
    min-width: 50px;
    font-weight: bold;
    font-size: 1em;
}

.first-msg-input-item {
    text-align: center;
    font-size: 1em;
    font-weight: bold;
}

.mail-send {
    height: 50px;
    width: 80px;
}

.srv-list-item,
.news-list-item,
.list-ad {
    display: flex;
    align-items: center;
    width: auto;
    height: auto;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #fff;
    animation: list 0.5s linear 1;
    overflow: hidden;
    padding: 2px;
    margin: 2.5px 0;
    justify-content: center;
}

.server-list-link {
    width: 100%;
    display: block;
    margin: 0 auto;
    text-decoration: none;
}

.news-list-item {
    height: auto;
}

.news-list-item a {
    text-decoration: none;
}

.news-title {
    padding: 5px 10px;
    text-align: left;
}

.news-info {
    border-radius: 10px;
    padding: 5px 10px;
}

.news-info span {
    margin: 0 5px;
    display: inline-block;
}

.news-content {
    font-size: 1.2em;
    padding: 10px;
    text-align: left;
}

.news-content,
.news-info,
.news-title {
    margin: 2.5px;
}

.news-content ol {
    margin-left: 20px;
}

@keyframes list {
    0% {
        height: 0;
        padding: 0;
    }

    100% {
        height: 100px;
        padding: 10px 0;
    }
}

.srv-list-item > img {
    margin-right: 5%;
    width: 12%;
    height: auto;
}

.list-item-middle,
.list-item-right {
    vertical-align: middle;
}

.list-item-middle {
    vertical-align: middle;
    display: inline-block;
    width: 60%;
    text-align: center;
    word-break: break-all;
}

.list-item-middle span {
    min-width: 50px;
    display: block;
    font-size: 1.4em;
}

.svr-list-version {
    overflow-wrap: break-word;
}

.srv-list-country,
.srv-list-lang {
    font-size: 1.07em !important;
    display: inline-block !important;
    width: auto;
    margin: 0 auto;
    overflow: auto;
    word-break: keep-all;
    max-height: 2em;
    overflow: auto;
    word-break: keep-all;
    max-height: 2em;
}

.list-item-right {
    width: 20%;
    vertical-align: middle;
    overflow: hidden;
    margin-right: -1%;
}

.list-item-right ul {
    text-align: center;
    list-style: none;
}

.list-item-right img {
    height: 30px;
    width: 30px;
}

.isonline,
.isoffline {
    position: relative;
    padding: 2px 0;
    box-shadow: inset 0 0 2px black;
    overflow: hidden;
    font-size: 1.2em;
    border-radius: 3px;
}

.isonline {
    background-color: greenyellow;
}

.isoffline {
    background-color: rgba(255, 0, 0, 0.7);
}

.filter {
    display: block;
    width: 100%;
}

.filter-submit:hover {
    cursor: pointer;
}

.filter-note {
    padding: 3px;
    margin: 5px;
}

#arrow {
    width: 50px;
    height: 50px;
}

@keyframes arrow_up {
    0% {
        transform: rotateZ(270deg)
    }

    100% {
        transform: rotateZ(90deg);
    }
}

@keyframes arrow_down {
    0% {
        transform: rotateZ(90deg)
    }

    100% {
        transform: rotateZ(270deg);
    }
}

@keyframes arrow_left {
    0% {
        transform: rotateZ(180deg)
    }

    100% {
        transform: rotateZ(0deg);
    }
}

@keyframes arrow_right {
    0% {
        transform: rotateZ(0deg)
    }

    100% {
        transform: rotateZ(180deg);
    }
}

.arrow_up,
.arrow_up_noanim {
    -webkit-animation: arrow_up 0.3s linear;
    /* Safari 4.0 - 8.0 */
    animation: arrow_up 0.3s linear;
    transform: rotateZ(90deg);
}

.arrow_down,
.arrow_down_noanim {
    -webkit-animation: arrow_down 0.3s linear;
    /* Safari 4.0 - 8.0 */
    animation: arrow_down 0.3s linear;
    transform: rotateZ(270deg);
}

.arrow_left,
.arrow_left_noanim {
    -webkit-animation: arrow_left 0.3s linear;
    /* Safari 4.0 - 8.0 */
    animation: arrow_left 0.3s linear;
    transform: rotateZ(0deg);
}

.arrow_right,
.arrow_right_noanim {
    -webkit-animation: arrow_right 0.3s linear;
    /* Safari 4.0 - 8.0 */
    animation: arrow_right 0.3s linear;
    transform: rotateZ(180deg);
}

.arrow_right_noanim {
    animation: arrow_right 0s linear;
}

.arrow_left_noanim {
    animation: arrow_left 0s linear;
}

.arrow_down_noanim {
    animation: arrow_down 0s linear;
}

.arrow_up_noanim {
    animation: arrow_up 0s linear;
}

.side-search-bar input,
.side-search-bar select,
.side-search-bar option,
.side-search-bar {
    margin: 0 auto;
    width: calc(99% - 8px);
    padding: 2px;
    font-size: 1em;
    cursor: pointer;
}

.side-search-bar {
    cursor: auto;
}

input[type=text] {
    cursor: text;
}

.side-search-bar input[type=checkbox] {
    display: inline-flex;
    width: 20px;
    height: 20px;
    margin: 5px;
}

.filter-checkbox {
    display: flex;
    justify-content: center;
    justify-items: center;
    flex-wrap: nowrap;
    align-items: center;

}

.side-search-bar div label {
    width: auto;
    font-size: 1.1em;
}

.side-search-bar ul li {
    display: inline-block;
    padding: 2px;
}

.side-search-bar {
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 5px;
}

.right-list,
.left-list,
.ultima-right-list,
.ultima-left-list,
.calendar-left,
.dashboard-left {
    width: 24%;
    margin: 0.5%;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    font-size: 1.1em;
    vertical-align: top;
}

.ultima-right-list,
.ultima-left-list {
    border: 30px solid transparent;
    width: calc(24% - 80px);
    border-image: url(images/default/uo-scroll-background.png) 60 fill;
    vertical-align: top;
    margin: 0 0.5%;
    min-height: calc(75vh - 20px);
}

.list-news-wrapper {
    width: 100%;
    margin: 0;
}

.mojang::before,
.latest-news-header::before,
.list-links-header::before,
.affiliate-links::before,
.website-stats-header::before,
.info-box::before,
.side-search-bar::before,
.side-search-bar::after,
.contactus-header::after {
    content: '';
    width: 98%;
    margin: 1.5vh auto;
    display: block;
    border-bottom: 2px solid rgba(37, 204, 148, 0.7);
}

.latest-news-header,
.mojang-server-status,
.list-links-header,
.affiliate-links,
.website-stats-header,
.share-header {
    margin-top: 1vh;
    font-size: 2em;
}

.list-news {
    padding: 3px;
    margin: 3px 0;
    background-color: #fff;
    font-size: 1em;
    border: 2px solid #fff;
}

.list-news a {
    text-decoration: none;
}

.list-news:hover {
    border-left: 2px solid rgba(77, 188, 221, 1);
    border-top: 2px solid rgba(77, 188, 221, 1);
    border-bottom: 2px solid rgba(37, 204, 148, 1);
    border-right: 2px solid rgba(37, 204, 148, 1);}

.list-links a {
    display: inline-block;
    padding: 4px;
    margin: 2px;
    font-weight: bold;
    color: black;
}

.add-server span {
    font-size: 1.2em;
}

.add-server select,
.add-server input {
    padding: 10px;
}

.add-form {
    display: block;
}

.add-form input,
.add-form textarea {
    width: 100%;
    height: 30px;
}

.add-form textarea {
    min-height: 100px;
}
.add-server-object-full-width{
    display: block;
    width: 100%;
}
.add-server-object {
    display: inline-block;
    width: 45%;
}

.add-server-object select,
.add-server-object input {
    width: 100%;
}

.server-confirmation {
    text-align: center;
    padding: 10px;
}

.server-confirmation input {
    padding: 10px;
}

.verification-key {
    background-color: #4DBCDDff;
    border-radius: 15px;
}

.add-server-ip-port input,
.add-server-submit,
.successful-ping input {
    padding: 10px;
}

.MOTD-confirm {
    height: 60vh;
    padding: 1% 5%;
    font-size: 1.2em;
}

.successful-ping,
.failed-ping,
.success {
    font-size: 1.2em;
    text-align: center;
    box-shadow: 0 0 3px;
    border-radius: 10px;
    padding: 10px;
    margin: 10px 10%;
    background-color: greenyellow;
}

.failed-ping {
    background-color: #FF4B12;
    margin-top: 10px;
}

.help {
    padding: 10px;
    font-size: 1.2em;
}

.help p {
    margin: 5px 2px;
}

.help img {
    max-width: 50px;
}

.help ol li {
    margin: 15px;
}

.error {
    margin: 1% 5%;
    padding: 1%;
    font-weight: bold;
}

.error-container {
    min-height: 59vh;
    padding: 1%;
}

.server-page-left,
.server-page-right {
    width: 45vw;
    display: inline-flex;
    height: 100%;
    flex-direction: column;
    vertical-align: top;
}

#server-page-footer {
    background-color: #d9d9d9;
    text-align: center;
    max-width: 1000px;
    margin: 0 auto;
}

.server-page-img {
    width: 100%;
    max-height: 400px;
    opacity: 0.75;
}

.server-page-apply {
    cursor: pointer;
}

#review-preview-display {
    cursor: pointer;
    text-decoration: underline;
    margin-right: 5px;
}

.srv-page-interact,.server-page-title,.serverDetailWrap,.srv-page-desc{
    margin: 5px 10px;
}
.server-page-title {
    text-align: center;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 5px;
    margin-top: 10px;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 5px;
    min-height: 20%;
    height: auto;
}
.srv-page-interact {
    height: auto;
}

.srv-page-desc {
    min-height: 50%;
    height: auto;
}

.server-page-title h1 {
    font-size: 3em;
}

.server-page-title span {
    font-size: 2em;
}

.serverAddress {
    margin: 0 auto;
    width: auto;
    padding-bottom: 1vh;
}

.serverAddress:hover {
    cursor: pointer;
    background-color: rgba(77, 188, 221, 0.5);
    border-radius: 15px;
}

.reauthenticate {
    padding: 5px;
    box-shadow: 0 0 1px;
    text-align: center;
}

.reauthenticate form {
    display: block;
    width: 40%;
    margin: 0 auto;
}

.srv-page-interact {
    padding: 5px 0;
    text-align: center;
    font-size: 1.5em;
}

#interact2 {
    font-size: 1.25em;
}

.srv-page-interact > span {
    margin: 0 3px;
    vertical-align: middle;
    padding: 3px;
    text-decoration: underline;
}

.srv-page-interact span:hover {
    cursor: pointer;
    color: grey;

}

.server-display-votes {
    text-decoration: none !important;
    font-size: 1.2em;
}

.server-display-votes:hover {
    cursor: default !important;
    color: black !important;
}

.srv-page-interact input {
    padding: 5px;
}

#vote-btn {
    padding: 5px;
}

.serverDetailWrap {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    min-height: 22%;
    height: auto;
}

.srv-detail-vote {
    width: 49%
}

.page-important-links {
    width: 100%;
}

.page-link-item {
    width: auto;
}

.important-link-cont {
    display: flex;
    flex-wrap: wrap;
}

.imp-lnk-cnt-left,
.imp-lnk-cnt-right {
    text-align: left;
    width: 48%;
    padding: 5px;
    font-size: 1.1em;
}

.srv-page-details {
    font-size: 1.2em;
    display: flex;
    flex-direction: column;
    padding: 10px;
    vertical-align: top;
    text-align: left;

}

#copiedAddress {
    display: block;
    font-size: 1.8em;
    font-weight: bold;
    padding: 10px;
}

.srv-page-desc {
    font-size: 1.2em;
    text-align: left;
    padding: 10px;
    min-height: 0;
    overflow: auto;
    color: black;
}

.srv-detail-items {
    padding: 0 2px;
}

.srv-detail-items h4,
.srv-detail-items div {
    justify-content: center;
    display: inline-flex;
    padding: 2px 2.5px;
}

.srv-detail-items:nth-child(even) {
    background-color: #fff;
}

ol,
li,
ul {
    margin: inherit;
    padding: inherit;
}

.reply-box {
    padding: 1% 0;
}

.reply-box > form > textarea,
.ck-content {
    display: block;
    width: auto;
    margin: 0 5px;
    padding: 5px;
    border: solid 1px black;
    border-radius: 5px;
    min-height: 10px;
    min-height: 10px;
    height: 100%;
    max-height: 250px;
}
.setting .ck-content {
    max-height: unset;
}
.setting .ck-content {
    max-height: unset;
}

.reply-box > form > input {
    padding: 5px;
    display: block;
    width: 77%;
    margin: 0 auto;
    border-radius: 5px;
}

.reply-box > form > input:hover {
    box-shadow: inset 0 0 3px black;
    cursor: pointer;
}

.comments,
.comment2 {
    clear: both;
    margin: 0 auto;
    width: 95%;
}

.comment2 {
    width: 96%;
    margin: 0;
    padding: 5px;
}

.commentDateTime,
.contentDateTime {
    font-size: 0.9em;
    opacity: 0.6;
    padding: 2px;
    margin-bottom: 5px;
    display: inline-block;
    width: 100%;
}

.small-rounded-border {
    border-radius: 10px;
}

.colorful-borders {
    border-left: 2px solid rgba(77, 188, 221, 1);
    border-top: 2px solid rgba(77, 188, 221, 1);
    border-bottom: 2px solid rgba(37, 204, 148, 1);
    border-right: 2px solid rgba(37, 204, 148, 1);
}

.colorful-borders-n-background,
.event-active-listing {
    border-left: 2px solid rgba(77, 188, 221, 1);
    border-top: 2px solid rgba(77, 188, 221, 1);
    border-bottom: 2px solid rgba(37, 204, 148, 1);
    border-right: 2px solid rgba(37, 204, 148, 1);
    background: linear-gradient(90deg, rgba(37, 204, 148, 0.3) 0%, rgba(77, 188, 221, 0.3) 100%);
}

.active-event-li {
    font-size: 1.2em;
}

.parentComment,
.parentNewsComment,
.childComment,
.review-item,
.lists-item
 {
    margin: 5px auto;
    position: relative;
    text-align: left;
    padding: 3px;
    border-left: 4px solid rgba(77, 188, 221, 1);
    border-top: 4px solid rgba(77, 188, 221, 1);
    border-bottom: 4px solid rgba(37, 204, 148, 1);
    border-right: 4px solid rgba(37, 204, 148, 1);
}

.childComment {
    max-width: 80%;
    margin-left: 1vw;
    background-color: #fff;

}

.parentNewsComment {
    width: 100%;
}

.parentCommentImg,
.childCommentImg,
.messages-avatar,
.content-feed-user-img img,
.mention-details img {
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 100%;
    max-height: 64px;
    max-width: 64px;
    margin-left: 2px;
    margin-top: 2px;
    padding: 2px;
    border-radius: 50%;
    border-left: 1px solid rgba(77, 188, 221, 1);
    border-top: 1px solid rgba(77, 188, 221, 1);
    border-bottom: 1px solid rgba(37, 204, 148, 1);
    border-right: 1px solid rgba(37, 204, 148, 1);
}

.childCommentImg {
    max-height: 52px;
    max-width: 52px;
    vertical-align: middle;
}

.parentCommentUserName,
.childCommentUserName,
.reviewUserName,
.contentUsername {
    padding: 1px;
    font-size: 1.25em;
    font-weight: bold;
    display: inline-block;
    vertical-align: middle;
}

.childCommentUserName {
    font-size: 1.05em !important;
}

.parentCommentWrap,
.childCommentWrap {
    position: relative;
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
}

.username-icon-cont {
    position: relative;
    display: inline-block;
    width: 75%;
    vertical-align: middle;
}

.parentCommentComment,
.childCommentComment,
.review-item p,
.content-feed-content,
#submitEdit,
#cancelEdit {
    font-size: 1.05em;
    padding: 10px;
    margin: 1% 1%;
    background: linear-gradient(90deg, rgba(37, 204, 148, 0.1) 0%, rgba(77, 188, 221, 0.1) 100%);
    border-radius: 15px;
}

.review-item p {
    font-size: 1.2em;
}

.fa-ellipsis-h {
    vertical-align: top;
    font-size: 1.5em;
    z-index: 999;
}

.fa-ellipsis-h:hover {
    cursor: pointer;
}

.comment-interact-drop,
.notification-interact-drop {
    position: absolute;
    display: flex;
    vertical-align: middle;
    right: 8px;

}

.notification-interact-drop {
    right: 15px;
    top: 5px;
}

.commentInteract,
.notificationInteract {
    position: relative;
    right: 8px;
    margin: 0;
    display: none;
    /* inline block*/
    vertical-align: middle;
    padding: 6px;
    border-radius: 10px;
    font-size: 1.3em;
    z-index: 999;
    border-left: 2px solid rgba(77, 188, 221, 1);
    border-top: 2px solid rgba(77, 188, 221, 1);
    border-bottom: 2px solid rgba(37, 204, 148, 1);
    border-right: 2px solid #25cc94;
    border-right: 2px solid #25cc94;
}

.commentInteractButtons {
    padding: 5px;
    text-decoration: underline;
    margin: 0 4px;
}

.commentInteractButtons:hover {
    color: #397b7f;
    cursor: pointer;
}

.server-page-vote-notif {
    font-size: .75em;
    padding: 2px;
}

.account-settings,
.settings-form,
.server-settings,
.settings-form-dashboard {
    padding: 1%;
}

.settings-form-dashboard {
    text-align: center;
    max-height: 80vh;
    overflow: auto;
}

.server-settings {
    max-height: 450px;
    overflow: auto;
    text-align: center;
}

.settings-textarea {
    min-height: 100px;
    width: 100%;
}

.dashboard-servers-edit,
.profile-servers-edit {
    display: inline-block;
    width: auto;
    min-width: 150px;
    min-height: 150px;
    max-width: 150px;
    box-shadow: 0 0 4px;
    vertical-align: top;
    text-align: center;
    padding: 3px;
    margin: 2.5px;
    border-radius: 10px;
    word-break: break-all;
}

.profile-servers-edit:hover {
    box-shadow: inset 0 0 4px;
}

.profile-servers-edit a img,
.dashboard-servers-edit a img {
    max-width: 100px;
}

.add-server-form-cont span {
    font-size: 1em;
    margin: 3px;
}

.add-server-form-cont input,
.server-name-input input {
    width: 99%;
    height: 30px;
    border-radius: 5px;
    box-shadow: 0 0 1px black;
    font-size: 1.2em;
    margin: 5px auto;
    padding: 3px;
    border: none;
}

.add-server-form-cont textarea {
    width: 90%;
    padding: 3px;
    min-height: 250px;
    box-shadow: 0 0 1px;
}

.add-server-form-cont select {
    font-size: 1.2em;
}

.extra-options input {
    vertical-align: middle;
}

.extra-options-list input[type=checkbox] {
    width: 25px;
    height: 25px;
}

.ui-widget.ui-widget-content {
    border: none !important;
}

.tagit-new input {
    width: 95%;
}

.add-server-obj-center {
    text-align: center;
}

.text-icon {
    display: none;
}

.add-server-object {
    margin: 0 auto;
    text-align: left;
    width: 42%;
    display: inline-block;
    margin: 5px;
    font-size: 1em;
    padding: 0 5px;
}
.add-server-object-full-width{
    display: inline-block;
    width: 100%;
}
.add-server-object-full-width{
    display: inline-block;
    width: 100%;
}
.add-server-object select {
    width: 100%
}

.add-server-form-cont p {
    font-size: 1.2em;
    padding: 10px;
}

.standard-button,
.standard-file,
.alert-button{
    background-color: #4DBCDDff;
    font-size: 1.3em;
    padding: 5px;
    margin: 5px;
    color: white;
    border-radius: 15px;
    cursor: pointer;
    box-sizing: border-box;
}
.sidebar-button a{
    color: white;
}

.standard-file, .sidebar-button{
    font-size: 1em;
}

.alert-button{
    background-color: crimson;
}
.modal-button-cont{
    box-sizing: border-box;
    padding: 5px;
    margin: 5px;
}

.standard-button,
.standard-file,
.alert-button{
    background-color: #4DBCDDff;
    font-size: 1.3em;
    padding: 5px;
    margin: 5px;
    color: white;
    border-radius: 15px;
    cursor: pointer;
    box-sizing: border-box;
}
.sidebar-button a{
    color: white;
}

.standard-file, .sidebar-button{
    font-size: 1em;
}

.alert-button{
    background-color: crimson;
}
.modal-button-cont{
    box-sizing: border-box;
    padding: 5px;
    margin: 5px;
}

.add-server-submit,
.upload-btn,
.post-comment-btn {
    font-size: 2em;
    background-color: #4DBCDDff;
    margin: 20px 0;
    width: 150px;
    padding: 30px;
    color: white;
    cursor: pointer;
    border-radius: 15px;
}
.add-server-submit{
    min-width: 150px;
    width: auto;
    max-width: 500px;
}
.button-value{
    font-size: 1.2em; 
    padding: 10px;
 }
 #verification_key{
    font-size: 1.2em;
    padding: 3px;
    margin: 10px;
    border-radius: 10px;
    background-color: #4DBCDDff;
    color: white;
    cursor: pointer;
}
.add-server-submit{
    min-width: 150px;
    width: auto;
    max-width: 500px;
}
.button-value{
    font-size: 1.2em; 
    padding: 10px;
 }
 #verification_key{
    font-size: 1.2em;
    padding: 3px;
    margin: 10px;
    border-radius: 10px;
    background-color: #4DBCDDff;
    color: white;
    cursor: pointer;
}
.post-comment-btn {
    font-size: 1.2em;
    width: auto;
    margin: 5px;
    padding: 5px;
}
#submitEdit, #cancelEdit{
    border-radius: 2px;
    font-size: 1em;
    margin: 5px;
    padding:3px;
}
#submitEdit{
    margin-left: 15px;
}
#submitEdit:hover, #cancelEdit:hover{
    color: white;
    cursor: pointer;
    border-radius: 5px;
}
#submitEdit:hover{
    background-color: #25CC94ff;
}
#cancelEdit:hover{
    background-color: #FF4B12;
}
#submitEdit, #cancelEdit{
    border-radius: 2px;
    font-size: 1em;
    margin: 5px;
    padding:3px;
}
#submitEdit{
    margin-left: 15px;
}
#submitEdit:hover, #cancelEdit:hover{
    color: white;
    cursor: pointer;
    border-radius: 5px;
}
#submitEdit:hover{
    background-color: #25CC94ff;
}
#cancelEdit:hover{
    background-color: #FF4B12;
}
.add-link-btn {
    display: inline-block !important;
    width: auto;
    padding: 5px;
    font-size: 100%;
}

.add-server-submit {
    display: block;
    margin: 20px auto;
}

.add-server-submit:hover,
.upload-btn:hover,
.post-comment-btn:hover {
    background-color: #25CC94ff;
}

.upload-btn {
    display: inline;
    vertical-align: middle;
}

.messages-container {
    width: 50vw;
    margin: 0 auto;
    padding: 5px 0;
}
.message-list{
    min-height: 70vh;
}
.message-list table {
    width: 100%;
    text-align: center;
    border-radius: 15px;
    padding: 5px 0;
    box-shadow: inset 1px 0 5px rgba(0, 0, 0, 0.1);
}

.messages-avatar {
    vertical-align: top;
}

.messages-topbar {
    display: block;
    font-size: 1.3em;
    padding: 10px 0;
    margin: 10px 10px;
}

.messages-topbar span {
    margin: 0 10px;
}

.message-table,
.messages-topbar {
    width: auto;
}

.message-read {
    min-height: 50px;
    height: auto;
    text-align: left;
}

.fromThem {
    background-color: #F0F2F5;
}

.fromYou {
    background-color: #fff;
}

.message {
    display: block;
    width: 100%;
    margin: 3px 5px;
    padding: 5px;
    font-size: 1.1em;
    overflow-y: auto;
    word-break: normal;
    clear: both;
}

.message-sender {
    display: inline-block;
    font-size: 1.2em;
    margin: 0 5px;
    padding: 5px 0;
}

.message-date {
    font-size: 0.8em;
}

.sender-msg-name {
    font-weight: bold;
}

.reply-message {
    padding: 1%;
}

.reply-form input,
.reply-form div {
    padding: 2%;
    text-align: left;
}

.reply-form .cke_contents {
    min-height: 200px !important;
}

.loadMore {
    display: block;
    text-align: center;
    font-size: 1.5em;
    width: auto;
    padding: 5px 0;
    margin: 2px 10px;
    border-radius: 10px;
    background-color: #4DBCDDff;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 3px black;
}

.loadMore:hover {
    background-color: #25CC94ff;
    color: white;
    cursor: pointer;
}

.notifications {
    margin: 10px auto;
    width: 50%;
    height: auto;
    min-height: 58vh;
    padding: 10px;
}

.notifications > span:nth-child(1) {
    display: block;
    font-size: 1.4em;
    margin: 5px;
}

.errorfof {
    display: block;
    margin: 0 auto;
    max-width: 50%;
}

.errorPage,
.error {
    color: #CF503Bff;
    font-weight: bold;
}

.mark-as-read {
    display: block;
    margin: 10px;
}
.notif-link{
    display: inline-block;
    margin: 5px 0;
    padding: 5px;
    border-radius: 5px;
    background-color: rgba(77, 188, 221, 1);
    color: white;
    text-decoration: none;
    font-size: 1.2em;
}
.notif-link:hover{
    background-color: #25CC94ff;
}
.notif-link{
    display: inline-block;
    margin: 5px 0;
    padding: 5px;
    border-radius: 5px;
    background-color: rgba(77, 188, 221, 1);
    color: white;
    text-decoration: none;
    font-size: 1.2em;
}
.notif-link:hover{
    background-color: #25CC94ff;
}
.notif-item,
.old-notif-item {
    position: relative;
    padding: 30px;
    margin: 0 10px 15px 10px;
    box-shadow: 3px 3px 3px 4px rgba(0, 0, 0, 0.1);
    
    box-shadow: 3px 3px 3px 4px rgba(0, 0, 0, 0.1);
    
}

.old-notif-item {
    opacity: 0.50;
    box-shadow: 0 0 2px;
    box-shadow: 0 0 2px;
}

.was-read {
    position: absolute;
    right: 10px;
    top: 10px;
    font-weight: bold;
}

.notif-item {
    background-color: #fff;
    
    
}

.notif-item a {
    text-decoration: none;
    color: black;
}

.notif-wrap {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    width: 90%;
}

.notif-text {
    font-size: 1.2em;
}

.notif-time {
    margin: 0 3%;
}

.notif-item > img,
.old-notif-item > img {
    display: inline-block;
    width: 20px;
    vertical-align: middle;
}

.notif-mark-success {
    display: inline-block;
    padding: 5px;
    background-color: chartreuse;
    margin: 5px 30px;
    font-weight: bold;
    font-size: 1.1em;
}

.smile-please:hover {
    width: 50px;
    height: 50px;
}

.server-review {
    display: none;
    width: 90%;
    margin: 10px auto;
    padding: 10px;
    text-align: center;
}

.edit-review-modal {
    width: 50%;
}

.server-review form {
    font-size: 1.1em;
}

.server-review form input[type=text] {
    padding: 10px;
    width: 98%;
}

.rating {
    margin: 15px;
}

.rating input {
    margin: 10px;
}

.server-review textarea {
    width: 98%;
    height: 400px;
    padding: 10px;
}

.server-review input[type=submit] {
    padding: 10px;
    width: 50%;
}

.report-user,
.contact-form {
    margin: 0 auto;
    width: 75%;
}

.report-form,
.contactus {
    text-align: center;
}
.report-form{
    box-shadow: 0 8px 15px;
}
.report-form{
    box-shadow: 0 8px 15px;
}

.contactus form {
    padding-bottom: 1%;
}

.contactus label,
.contactus p {
    font-weight: bold;
    display: block;
    font-size: 1.2em;
}

.report-form form {
    padding: 10px;
    font-size: 1.2em;
}

.report-form input,
.contactus input {
    padding: 5px;
    font-size: 20px;
}

.report-form textarea,
.contactus textarea {
    margin: 10px;
    padding: 5px;
    height: 250px;
    width: 75%;
}

.report-disclaimer {
    font-size: 0.9em;
    padding: 5px;
    margin-bottom: 5px;
}

.add-server-btn {
    display: block;
    padding: 7px;
    margin: 5px 5px;
    background-color: #4DBCDDff;
    font-weight: bold;
    color: white;
    text-align: center;
    font-size: 1.45em;
    box-shadow: 0 0 2px black;
    text-shadow: 0 0 5px black;
    border-radius: 5px;
}

.add-server-btn:hover {
    box-shadow: inset 0 0 4px black;
    background-color: #25CC94ff;
}

footer,
.footer {
    display: flex;
    width: calc(50vw - 50px + 50%);
    margin: 0 auto;
    height: auto;
    max-height: 20vh;
    text-align: center;
    background-color: #0B3A68ff;
    color: #F2EBEAff;
    font-size: 1rem;
    align-items: center;
    justify-content: center;
    border-radius: 15px 15px 0 0;
}

.footer-copyright,
.footer-links,
.footer-social-links {
    display: flex;
    flex-grow: 1;
    height: auto;
    padding: 1rem;
    margin-top: 0;
    margin-bottom: 0;
    justify-content: center;
    align-items: center;
}

.footer-copyright {
    font-size: 1em;
    max-width: 20%;
    flex-flow: column nowrap;
}
.footer-links{
    max-width: 50%;
}
.footer-links,
.footer-social-links a {
    justify-content: center;
    font-size: 1.15em;
}

.footer-links a,
.back-to-top-footer a {
    padding: 5px 5px;
    color: white;
    transition: 0.25s ease;
}

.footer-links a:hover,
.back-to-top-footer:hover {
    background-color: #006080ff;
}

.footer-social-links a {
    padding: 5px;
}

.footer-social-links > a > img {
    width: 64px;
    max-height: 64px;
}

.back-to-top-footer {
    padding: 5px;
    font-size: 1.2rem;
}

.claim-form {
    padding: 10px;
    font-size: 1.1em;
    text-align: center;
}

.claim-form > form > input[type=submit] {
    padding: 5px;
}

.pagination span,
.pagination a {
    display: inline-block;
    font-size: 1.3em;
    margin: 1px;
    padding: 5px 10px;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}

.pagination a:hover {
    background-color: #CF503Bff;
    color: #F2EBEAff;
    box-shadow: inset 0 0 3px black;
}

.current {
    background-color: #CF503Bff !important;
    color: #F2EBEAff;
    box-shadow: inset 0 0 3px black;
}

.disabled:hover {
    cursor: not-allowed !important;
    background-color: #CF503Bff !important;
    color: #F2EBEAff;
    box-shadow: inset 0 0 3px black;
}
.disabled{
    cursor: not-allowed !important;
    background-color: #6f7371 !important;
    color: #F2EBEAff;
    box-shadow: inset 0 0 3px black;
}

.admin-mail-cont {
    margin: 5px 0;
    max-height: 200px;
    max-width: 600px;
    display: block;
    padding: 5px;
    overflow: auto;
    background-color: #fff;
}

.admin-mail-item div {
    overflow: auto;
    max-height: 200px;
}

.server-info {
    max-height: 800px;
}

.announcement {
    text-align: center;
    width: 50%;
    left: 0;
    right: 0;
    position: absolute;
    padding: 10px;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    z-index: 30;
}

.announcement u:hover {
    cursor: pointer;
}

.disabled-message {
    text-align: center;
    font-size: 1.3em;
    font-weight: bold;
    padding: 15px;
    margin: 1%;
}

.discord {
    display: flex;
    width: 100%;
}

#discord-display img {
    width: 150px;
    vertical-align: middle;
}

#discord-display:hover {
    cursor: pointer;
}

.mojang-servers {
    margin: 5px 0;
}

.mojang-servers h3 {
    padding: 2px;
    margin: 2px 0;
}

.status-container {
    display: inline-block;
    margin: 0 2px;
}

.mojang-status {
    width: 60px;
    height: 25px;
    padding: 1.1em 0;
    margin: 0 0 .5em 0;
    border: 5px solid #353535;
    border-radius: 50%;
    background-color: #353535;
    font-weight: bold;
    font-size: 14px;
    color: white;
}

.status-name,
.status-result {
    text-align: center;

}

.status-name {
    padding: 4px 0;
}

.server-page-review {
    display: block;
    padding: 1%;
    text-align: left;
}

.review-preview {
    width: 45% !important;
    margin: 3.5px !important;
}

.review-preview .review-recommendation img {
    max-width: 30px;
}

.review-preview > p {
    max-height: 50px;
    overflow: auto;

}

.review-preview:hover {
    box-shadow: 0 0 3px;
}

.review-preview > hr {
    margin: 2px 10%;
}

.review-preview-arrow {
    width: 35px;
    vertical-align: middle;
}

.left-align {
    text-align: left;
}

.stats {
    margin: 1% 1%;
}

.edit-comment-overlay {
    text-align: center;
    min-height: 30%;

}

.edit-comment-overlay>#edit-comment {
    margin: 0 auto;
}

.edit-comment-overlay>#edit-comment {
    margin: 0 auto;
    width: 70%;
    min-height: 150px;
    padding: 1%;
    border: #000 1px solid;
    border-radius: 15px;
    border: #000 1px solid;
    border-radius: 15px;
}

.srv-page-video
    {
    display: block;
    margin: 0 auto;
    width: calc(560px + 10vw);
    height: calc(340px + 4.3vw);
}

.youtube-video {
    width: 100%;
    height: calc(340px + 4.3vw);
}

.srv-page-img {
    display: block;
}


.srv-posts {
    padding: 10px;
    background-color: #eee;
}

.srv-post-item {
    margin: 5px auto;
    padding: 1%;
    box-shadow: 0 0 2px black;
    background-color: #fff;
    font-size: 1.2em;
}

.srv-post-content,
.srv-post-info {
    padding: 3px;
    margin: 2px;
}

#serverAddress, #mc_server_key {
    position: absolute;
    left: -9999px;
}

.loading {
    position: absolute;
    z-index: -1;
}

.review-item {
    position: relative;
    display: inline-flex;
    width: 25%;
    height: auto;
    box-shadow: 0 0 3px black;
    margin: 3px 10px;
    vertical-align: top;
    padding: 5px;
    background-color: #fff;
    text-align: center;
}

.server-review-interactions {
    float: right;
    vertical-align: middle;
    padding: 3px;
    box-shadow: 0 0 1px;
    margin: 0 3px 5px 0;
}

.server-review-title {
    display: inline-block;
    text-align: center;
    width: 300px;
}

.review-recommendation {
    text-align: center;
    font-size: 1.2em;
}

.review-recommendation > img,
.review-recommendation > span {
    display: inline-block;
    vertical-align: middle;
    padding: 0 3px;
    font-weight: bold;

}

.review-recommendation img {
    width: 50px;
}

.server-review-body {
    position: relative;
    text-align: left;
    height: auto;
    overflow: auto;
    padding: 3px;
    margin: 5px 0;
}

.review-spacer {
    float: left;
    height: 38px;
    width: 200px;
}

.server-review-author {
    position: absolute;
    display: block;
    width: 100%;
    bottom: 0;
    text-align: center;
}

.server-review-author > span {
    display: block;
}

.hr {
    margin: 2% 0;
}

.account-settings-form {
    font-size: 1.25em;
}

.account-settings-form > label {
    font-weight: bold;
}

.features {
    margin: 1%;
    padding: 1%;
}

.features > ol > li p {
    margin-left: 15px;
}

.admin-hub {
    padding: 0;
    display: block;
    background-color: #eee;
    height: 79vh;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
}

.admin-left,
.admin-right {
    vertical-align: top;
}

.admin-left,
.dashboard-nav-left {
    position: relative;
    display: inline-block;
    width: 20vmax;
    min-width: 175px;
    height: 98.5%;
    padding: 5px;
    overflow: auto;
}

.dashboard-left {
    width: 15vmax;
    min-width: 235px;
}

.dashboard-nav-left {
    width: auto;
}

.dashboard-right {
    width: 30%;
}

.admin-left1 > a {
    display: block;
    padding: 2.5px;
    margin: 2.5px;
}

.admin-right {
    position: relative;
    display: inline-block;
    width: 100vmax;
    min-width: 1000px;
    height: 100%;
    background-color: #afb2b5;
    margin: 0;
    padding: 0;
}

.admin-center {
    width: 70%;
    overflow: auto;
}

.admin-links,
.dashboard-links {
    margin: 2px;
}

.admin-links h3,
.dashboard-links h3 {
    padding: 4px;
}

.admin-links a,
.dashboard-links a {
    display: block;
    padding: 3px;
    margin: 2px 4px;
    background-color: #4DBCDDff;
    color:white;
    text-shadow: 0 0 5px black;
    border-radius: 3px;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
}

.admin-links a:hover,
.dashboard-links a:hover {
    background-color: #25CC94ff;
}

.report-wrapper {
    text-align: center;
    height: 100%;
    overflow: hidden;
}

.report-table {
    text-align: left;
    height: 95%;
}

.tr-wrapper {
    height: 75%;
    overflow: auto;
}

.report-table-tr {
    display: block;
    width: 90%;
    padding: 10px;
    box-shadow: 0 0 3px #3c6d70;
    margin: 0 auto;
    text-align: center;

}

.report-table-tr-list {
    padding: 10px;
}

.admin-report-item {
    display: inline-block;
    width: 25%;
    vertical-align: middle;
    text-align: center;
}

.admin-report-id {
    max-width: 50px;
}

.moderate-report-id {
    width: auto;
}

.moderate-report-user {
    padding: 0 3px;
    width: 25%;
    overflow-x: auto;
}

.moderate-report-status {
    width: auto;
    padding: 2px 8px;
}

.moderate-report-date {
    width: 25%;
}

.admin-home {
    position: relative;
    height: 100%;
    flex-direction: column;
    flex-wrap: wrap;
    overflow: hidden;
}

.admin-right-topbar {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    width: 78vmax;
    height: 20%;
}

.admin-topbar-stat-item {
    position: relative;
    display: inline-block;
    width: 20%;
    min-height: 70px;
    max-height: 110px;
    height: auto;
    padding: 5px;
    margin: 5px;
    background-color: #8cc6ea;
    font-weight: 700;
    border-radius: 10px;
    box-shadow: 1px 1px 5px black;
    overflow: auto;
}

.switch-list-btn {
    text-align: left;
    cursor: pointer;
}

.reasonTextarea {
    max-width: 500px;
    width: auto;
    min-width: 350px;
    min-height: 150px;
    height: auto;
    max-height: 300px;
    padding: 5px;
    margin: 5px;
}

.refresh-notif {
    position: absolute;
    opacity: 0;
    bottom: 3%;
    left: 5%;
    width: 20%;
    margin: 5px auto;
    text-align: center;
    padding: 10px;
    background-color: lightgreen;
    font-weight: bold;
    animation: refreshnotif 6s ease;
}

@keyframes refreshnotif {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.admin-stat-item-cont {
    font-size: max(min(5vmin, 16px), 1em);
}

.admin-home-main {
    width: 98%;
    height: 100%;
    flex: 1;
    padding: 5px;
}
.moderate-profile-cont{
    width: 45%;
    display: inline-block;
    vertical-align: top;
}
.moderate-profile-history {
    width: 45%;
    display: inline-block;
    vertical-align: top;
    padding: 3px;
    margin: 3px;
    background-color: #eee;
}

.moderate-profile-history > div {
    padding: 2px;
    margin: 1px 0;
}

.moderate-server-img-cont {
    display: block;
    width: 100%;
}

.server-img-moderation {
    display: inline-block;
    min-width: 128px;
    max-width: 256px;
    vertical-align: middle;
    cursor: pointer;
    min-height: 128px;
    max-height: 256px;
}

.server-img-moderation-enlarged {
    display: inline-block;
    min-width: 256px;
    max-width: 512px;
    vertical-align: middle;
    cursor: pointer;
    min-height: 256px;
    max-height: 512px;
}

.server-img-moderation:hover {
    box-shadow: inset 0 0 3px;
}

.delete-fade-inline-block {
    display: inline-block;
}

.moderate-server-profile-cont {
    position: relative;
    height: 250px;
}

.admin-urgent-reports,
.admin-emails,
.moderate-panel,
.admin-site-settings,
.admin-news-section {
    display: inline-block;
    width: 30%;
    text-align: center;
    padding: 5px;
    background-color: #f2f2f2;
    min-height: 35%;
    height: 100%;
    max-height: 75%;
    border-radius: 5px;
    vertical-align: top;
    box-shadow: 0 0 5px black;
}

.admin-news-section-container {
    max-height: 90%;
    overflow: auto;
}

.admin-gemini-news {
    padding: 5px;
    margin: 3px;
}

.admin-gemini-news > a {
    text-decoration: none;
}

.admin-gemini-news:hover {
    background-color: #5ED8AA;
}

.admin-site-settings {
    width: 100%;
    max-height: 97%;
    overflow: auto;
}

.site-setting-wrapper {
    text-align: left;
}

.require-review,
.moderate-panel {
    max-height: 96%;
}

.moderate-reqReview-item {
    word-wrap: break-word;
}

.moderate-panel {
    position: relative;
    width: 65%;
    height: 100%;
}

.moderate-user-comment,
.moderate-replied-comment {
    font-size: 1.1em;
    padding: 5px;
    box-shadow: 0 0 1px black;
}

.moderate-replied-comment {
    font-size: 1em;
}

.moderation-user-profile {
    position: relative;
    height: 50vh;
    max-height: 50vh;
}

.moderate-panel-icon {
    width: 100px;
}

.moderate-cont {
    width: 99%;
    background-color: lightgray;
    margin: 0 auto;
    padding: 5px;
    overflow: auto;
}

.moderate-actions,
.profile-info-cont {
    width: 100%;
    position: absolute;
    padding: 0;
    bottom: 10px;
}

.moderate-actions-cont {
    margin-top: 10px;
}

.moderate-actions-cont > div,
.profile-info-cont > div {
    display: inline-block;
    width: auto;
    min-width: 100px;
    padding: 20px 15px;
    margin: 2.5px 0;
    font-size: .9em;
    background-color: #8cc6ea;
    font-weight: bold;
}

.profile-info-cont > div {
    background-color: white;
    vertical-align: middle;
    margin: 3px 0;
}

.moderate-ban-btn:hover,
.moderate-removeIcon-btn:hover,
.moderate-warn-btn:hover,
.moderate-reportSpam-btn:hover {
    background-color: lightcoral;
}

.moderate-msg-btn:hover,
.moderate-unban-btn:hover {
    background-color: aquamarine;
}

.moderate-ban-btn:hover,
.moderate-warn-btn:hover,
.moderate-removeIcon-btn:hover,
.moderate-msg-btn:hover,
.require-review-item:hover,
.moderate-unban-btn:hover,
.moderate-reportSpam-btn:hover {
    cursor: pointer;
}

.moderate-unban-btn {
    display: none;
}

.message-icon {
    display: inline-block;
    vertical-align: middle;
    width: 32px !important;
    border: none !important;
}

.message-icon-comment-reply {
    display: inline-block;
    vertical-align: middle;
    width: 24px;
}

.moderate-avatar-wrap {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 90%;
    height: 90%;
    overflow-y: auto;
}

.moderate-avatar {
    position: relative;
    display: block;
    margin: 0 auto;
    max-width: 275px;
    max-height: 200px;
}

.moderate-item {
    position: relative;
    display: inline-block;
    width: auto;
    min-width: 300px;
    max-height: 350px;
    background-color: #eee;
    text-align: center;
    margin: 5px;
}
.moderate-image{
    max-height: 300px;
    max-width: 300px;
}
.moderate-interact-items {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

.moderate-interact-items > div {
    display: inline-block;
    padding: 5px;
    margin: 3px 4px;
}

.moderate-approve-btn,
.moderate-escalate-btn,
.moderate-remove-btn {
    font-weight: bold;
    box-shadow: 0 0 1px black;
    cursor: pointer;
}

.moderate-approve-btn {
    background-color: lawngreen;
}

.moderate-escalate-btn {
    background-color: red;
}

.moderate-remove-btn {
    background-color: indianred;
}

.moderate-approve-btn:hover,
.moderate-escalate-btn:hover,
.moderate-remove-btn:hover {
    box-shadow: inset 0 0 3px black;

}

.urgent-report-cont,
.admin-email-cont {
    overflow: auto;
    height: 87%;
}

.admin-urgent-reports a,
.admin-emails a {
    text-decoration: none;
    cursor: pointer;

}

.urgent-report-item,
.admin-email-item {
    width: 75%;
    margin: 5px auto;
    box-shadow: 0 0 2px black;
    background-color: #fff;
}

.urgent-report-item > div,
.admin-email-item > div {
    font-size: 1.3em;
    display: block;
    margin: 0 5px;
}

.urgent-report-item:hover,
.admin-email-item:hover {
    background-color: #8cc6ea;
}

.server-error {
    font-size: 1.5em;
    font-weight: bold;
}

.report-box {
    border: solid 1px;
}

.report-tr {
    border-bottom: 1px solid;
}

.report-td {
    padding: 5px;
    display: inline-block;
}

.admin-center-list {
    height: 600px;
    overflow: auto;
}

.admin-server-item,
.admin-server-item2 {
    display: block;
    padding: 5px;
    margin: 5px;
    width: auto;
    min-width: 300px;
    text-align: left;
    border: 1px solid;
    border-radius: 10px;
}

.admin-server-item2 {
    display: block;
}

.user-name {
    font-weight: bold;
    font-size: 1.2em;
}

.admin-server-item > img,
.admin-server-item2 > img {
    width: 50px;
    height: 50px;
}

.edit-news {
    background-color: firebrick;
    padding: 3px;
    float: left;
    font-weight: bold;

}

.application-drop {
    display: none;
    text-align: center;
    padding: 5px;
    margin: 5px auto;
    box-shadow: 0 0 3px black;
    background-color: #cccccc;
    width: 95%;
    border-radius: 5px;
}

.application-drop input[type="submit"] {
    padding: 5px;
    font-size: 1.2em;
}

.application-drop input[type="submit"]:hover {
    box-shadow: inset 0 0 3px black;
}

#graph-div {
    margin: 2px 0;
}

.graph-div > div {
    margin: 0 auto;
    width: 100% !important;
}

.back-button {
    padding: 2px;
    margin: 3px;
}

.report-info-box {
    border: solid 1px black;
    min-width: 290px;
    max-width: 100%;
    width: 500px;
    padding: 5px;
    margin: 3px;
}

.admin-action-menu {
    display: inline-block;
    vertical-align: top;
}

.section-list {
    background-color: #eee;
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 5px;
}

.news-form {
    background-color: #eee;
    width: 100%;
    text-align: center;
}

.news-form input {
    width: 50%;
    padding: 10px;
    font-size: 1.2em;
}

.news-threads {
    width: 100%;
    overflow: auto;
    margin: 0 auto;
}

.ad-small {
    text-align: center;
}

.logviewer-form {
    text-align: center;
    font-size: 1.2em;
    margin: 5px 0;
}

.logviewer-form select {
    min-width: 30%;
}

.logviewer-form input,
.logviewer-form select {
    padding: 3px;
}

.logviewer-form div {
    margin: 3px;
}

.srv-app-item {
    display: inline-block;
    box-shadow: 0 0 2px;
    min-width: 150px;
    min-height: 100px;
    width: 100%;
    max-width: 430px;
    max-height: 350px;
    margin: 3px;
    padding: 3px;
    background-color: #e2e2e2;
    vertical-align: top;
}

.srv-app-text {
    min-height: 80px;
    max-height: 200px;
    overflow: auto;
}

.srv-app-button {
    display: inline-block;
    padding: 10px;
    box-shadow: 0 0 2px;
    border-radius: 5px;
    margin: 15px 5px;
    font-weight: bold;
    width: 15%;

}

.srv-app-button:nth-child(2) {
    background-color: greenyellow;
}

.srv-app-button:nth-child(3) {
    background-color: crimson;
}

.srv-app-button:hover {
    box-shadow: inset 0 0 3px;
    cursor: pointer;
}

.srv-app-wrapper,
.srv-app-buttons {
    text-align: center;
}

.gemini-coins-info {
    font-size: 1.1em;
}

.gemini-coins-home {
    width: 75%;
    display: block;
    margin: 0 auto;
    text-align: center;
}

.gemini-coins-home table {
    width: 50%;
    margin: 0 auto;
}

.gemini-coins-home table tr td {
    border: solid 1px #eee;
}

.gemini-coins-home table tr td:hover {
    border: solid 1px skyblue;
    background-color: deepskyblue;
}

.gemini-coins-buy-item {
    width: 20%;
    display: inline-block;
    border: solid 1px black;
    padding: 10px;
    margin: 10px;
}

.gemini-coins-buy-item:hover {
    background-color: deepskyblue;
}

.table {
    width: 100%;
}

.table-tr {
    box-shadow: 0 0 1px;
}

.table-td {
    display: inline-block;
    min-width: 20px;
    border: 1px solid black;
    padding: 3px;
    font-size: 1.2em;
    margin: 0;
}

.coins-navigation {
    width: 99%;
    box-shadow: 0 0 1px;
    padding: 10px;
}

.table-tr-nav,
.coins-nav-items {
    text-align: center;
}

.table-td-nav {
    display: inline-block;
    font-size: 1.4em;
    margin: 0 5px;
}

.coin-nav-item {
    display: inline-block;
    box-shadow: 0 0 1px;
    padding: 10px;
    width: 28%;
    min-height: 50px;
    font-size: 1.4em;
    vertical-align: middle;
    line-height: 50px;
}

.coin-nav-item:hover {
    background-color: #3C6E71;
    color: white;
}

.container {
    text-align: center;
}

.coin-right-top-bar div:nth-child(1),
.coin-list-item div:nth-child(1),
.coin-right-top-bar div:nth-child(2),
.coin-list-item div:nth-child(2),
.coin-right-top-bar div:nth-child(3),
.coin-list-item div:nth-child(3),
.coin-right-top-bar div:nth-child(4),
.coin-list-item div:nth-child(4),
.coin-right-top-bar div:nth-child(5),
.coin-list-item div:nth-child(5) {
    border-right: 1px solid black;
}

.coin-prev-balance {
    width: 18%;
}

.coin-list-item {
    position: relative;
    box-shadow: 0 0 3px;
    margin: 5px 0 0 0;
}

.coin-balance {
    width: 13%;
    text-align: center;
}

.coin-spent,
.coin-purchased,
.coin-earned {
    width: 12%;
    text-align: center;
}

.coin-purchased {
    width: 15%;
}

.coin-date {
    width: 15%;
    text-align: center;
}

.coin-right-bar {
    padding: 5px;
    display: inline-block;
}

.coin-vert-align {
    vertical-align: middle;
}

.coin-right-top-bar {
    border-bottom: 2px solid white;
}

.hide-ip-check {
    width: 100px !important;
}

.hide-ip-check,
.hide-ip-text {
    position: relative;
    display: inline-block !important;
    box-shadow: none !important;
    vertical-align: middle;
}

.hide-ip-text {
    font-size: 2em;
}

.discord-help-img {
    display: block;
    max-width: 300px !important;
    width: 100% !important;
    box-shadow: 0 0 2px black;
    margin-bottom: 5px;
}

.moderator-list-item {
    background-color: #eee;
    max-width: 600px;
    margin: 0 5px;
    padding: 3px;
    margin-bottom: 15px;
    text-align: center;
}

.mod-list-btn {
    display: inline-block;
    padding: 5px;
    background-color: #EF704E;
    font-weight: bold;
    box-shadow: 0 0 2px;
}

.mod-list-btn:hover {
    box-shadow: inset 0 0 3px;
    cursor: pointer;
}

.server-item-mod-info {
    font-weight: bold;
}

.server-item-mod-info > div {
    display: inline-block;
    padding: 5px;
}

.add-image-form {
    font-size: .8em;
}

.upload-image-dividers {
    width: 50%;
    margin: 5px auto;
}

.upload-image-split {
    margin: 5px;
}

.wide-input-field {
    padding: 5px;
    width: 50%;
}

.upload-image-dividers label,
.upload-image-split label {
    font-weight: bold;
}

.image-search-item {
    position: relative;
    display: inline-block;
    max-width: 48%;
    vertical-align: top;
}

.image-search-text {
    position: absolute;
    left: 0;
    bottom: 0;
    color: white;
    background-color: rgb(50, 50, 50);
    padding: 3px;
}

.image-search-item img {
    width: 100%;
    max-height: 250px;
}

.image-search-item img:hover {
    cursor: pointer;
}

.image-search {
    padding: 10px 0;
}

#image_search_result {
    margin-top: 10px;
}

.event-name-cont input,
.event-datetime-cont input {
    display: block;
    margin: 0 auto;
    font-size: 1.2em;
    width: 95%;
}

.event-datetime-cont,
.inline-event-datetime {
    display: inline-block;
}

.event-datetime-cont input {
    width: auto;
}

.event-submit {
    margin-top: 5px;
    padding: 5px;
    font-size: 1em;
}

.event-edit-item,
.event-edit-item-show {
    display: block;
    width: auto;
    max-height: 300px;
    overflow: auto;
    margin: 5px;
}

.event-edit-action-item,
.inline-event-datetime,
.delete-options {
    display: inline-block;
    text-align: center;
    width: 45%;
    margin: 1%;
}

.event-edit-edit-btn,
.event-edit-delete-btn,
.save-changes,
.delete-options {
    padding: 5px;
    cursor: pointer;
    box-shadow: 0 0 2px black;
}

.event-edit-edit-btn:hover,
.event-edit-delete-btn:hover,
.save-changes:hover {
    box-shadow: inset 0 0 4px black;
}

.event-edit-edit-btn,
.save-changes,
.cancel-btn {
    background-color: lightgreen;
}

.event-edit-delete-btn,
.delete-btn {
    color: white;
    background-color: crimson;
}

.datetime-font,
.event-name-font {
    font-size: 1.7em;
}

.cancel-editing,
.save-btn,
.event-edit-hidden,
.event-edit-item-hide,
.event-edit-info {
    display: none;
}

.save-changes {
    width: 100%;
    border: none;
}

.server-event-cont {
    max-height: 100vh;
    overflow: auto;
    font-size: 0.8em;
}

.server-event-item {
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);
    position: relative;
    display: none;
    padding: 5px 5px;
    padding-right: 4.5%;
    font-size: 0.8em;
}

.event-display {
    padding: 2px;
    background-color: #fff;
    margin: 5px;
    border-radius: 15px;
    cursor: pointer;
}

.delete-modal, .confirmation-modal {
    position: absolute;
    display: none;
    width: 50vw;
    height: auto;
    padding: 10px;
    margin-left: auto;
    margin-right: auto;
    z-index: 10;
}
.confirmation-modal {
    position:fixed;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 0 5px black;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 1.3em;

}

.event-edit-select {
    position: relative;
}

.container-shadow {
    position: absolute;
    display: none;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(0, 0, 0, 0.2);
    width: 98%;
    height: 86%;
    z-index: 1;
    border-radius: 15px;
}

.inset-effect {
    word-break: break-all;
    padding: 10px;
    box-shadow: inset 0 0 3px black;
    border-radius: 15px;
}

.btn-contactus {
    font-size: 2em;
    max-width: 150px;
}

.server-page-icon,
.server-page-name {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;

}

.server-page-name {
    width: 95%;
    word-break: break-all;
}

.server-page-icon {
    max-width: 64px;
}

.announcement-textarea {
    max-height: 50vh;
    overflow: auto;
}

.announcement-submit {
    margin-top: 10px;
}

.current-announcement {
    padding: 5px;
    width: 50%;
    margin: 0 auto;
}

.announcement-form {
    margin: 10px;
}

.opened {
    display: block;
}

.available-videos-left,
.used-videos-right {
    display: inline-flex;
    width: 49%;
    height: 500px;
    vertical-align: top;
    flex-direction: column;
    overflow: auto;
    overflow: auto;

}

.available-videos-left {
    background-color: rgba(0, 0, 0, .05);
}

.dropzone {
    height: 100%;
    max-height: 500px;
    overflow: auto;
}

.drophere {
    padding: 10px 0;
}

.draggable:hover {
    cursor: grab;
}
.draggable:active {
    cursor: grabbing;
    box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
    background-color: #fff;
    border-radius: 15px;
}
.ui-sortable{
    width: 100%;
    min-height: 50px;
    background-color: rgba(0, 0, 0, .05);
}
.mention-details{
    position: absolute;
    z-index: 1;
    background: #fff;
    border-radius: 15px;
    padding: 10px;
    box-shadow: 1px 1px 2px black;
    bottom:30.5%;
    height: auto;
    max-height: 50vh;
    width: 300px;
    max-width: 300px;
}
/* Flex container for the user profile sections */
.user-profile-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px; /* Space between sections */
    padding: 20px;
}

.user-profile-left{
    flex: 1; /* Allow this section to grow */
    max-width: 15%; /* Set a maximum width for the left section */
}
.user-profile-center{
    flex: 2; /* Allow this section to grow more than the left section */
    max-width: 70%; /* Set a maximum width for the center section */
}
.user-profile-right{
    flex: 1; /* Allow this section to grow */
    max-width: 15%; /* Set a maximum width for the right section */
}
/* Left, Center, and Right sections */
.user-profile-left,
.user-profile-center,
.user-profile-right {
    min-width: 300px; /* Ensure sections don't shrink too much */
    padding: 2px;
    border-radius: 10px;
    min-height: calc(100vh - 200px);
}

/* Header styling */
.user-profile-header {
    text-align: center;
    margin-bottom: 20px;
}

.user-profile-header h1 {
    font-size: 2em;
    color: #333;
}

/* Section-specific styling */
.user-profile-left h3,
.user-profile-center h3,
.user-profile-right h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #4AAEDC;
}

.user-profile-content {
    font-size: 1em;
    line-height: 1.6;
    color: #555;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .user-profile-container {
        flex-direction: column; /* Stack sections vertically on smaller screens */
    }

    .user-profile-left,
    .user-profile-center,
    .user-profile-right {
        min-width: 100%; /* Full width for each section */
    }
}

.user-profile-center-selector {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    gap:10px;
}
.user-profile-center-selector-item{
    flex: 1; /* Allow this section to grow */
    max-width: 30%; /* Set a maximum width for the left section */
    padding: 10px;
    background-color: #f0f0f0;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.user-profile-center-selector-item:hover{
    background-color: #e0e0e0;
    cursor: pointer;
}
.user-profile-center-selector-item.active{
    background-color: #4AAEDC;
    color: white;
    font-weight: bold;
}


/*								MOBILE
///////////////////////////////////////////
///////////////////////////////////////////
///////////////////////////////////////////
///////////////////////////////////////////
*/
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3),
only screen and (min-device-width:300px) and (max-device-width:620px),
only screen and (min-width:360px) and (max-width:1000px) {
    #verification_key{
        word-wrap: break-word;
        background-color: unset;
        color: rgb(33, 176, 128);
    }
    .settings-section{
        display: block;
        width: 100%;
        margin: 5px auto;
    }
    .setting{
        min-width: 100%;
        margin:3px auto;
    }
    #verification_key{
        word-wrap: break-word;
        background-color: unset;
        color: rgb(33, 176, 128);
    }
    .settings-section{
        display: block;
        width: 100%;
        margin: 5px auto;
    }
    .setting{
        min-width: 100%;
        margin:3px auto;
    }
    .content-share-hover {
        left: auto;
        right: 0;
    }

    .content-page {
        margin: 0 auto;
        min-width: 300px;
        max-width: 99.5%;
        min-height: 80vh;
    }

    .stuff-box {
        height: 65vh;
    }

    .stuff-box .far {
        font-size: 16px;
    }

    .stuff-box table tr,
    .stuff-box td {
        padding: 5px 2px;
        height: auto;
        width: auto;
    }

    .stuff-box a {
        font-size: 16px;
    }

    .stuff-box i {
        width: auto;
    }

    .dashboard-left {
        width: 95%;
        height: auto;
        min-height: 0;
        margin: 0 auto;
    }

    .server-dashboard-calendar {
        max-width: none;
    }

    .discord,
    .discord,
    .side-search-bar {
        display: none;
    }

    .register-email,
    .register-username,
    .register-passwords {
        text-align: left;
        display: block;
        width: 75%;
    }

    .register-email span,
    .register-username span,
    .register-passwords span {
        display: inline-flex;
        text-align: left;
        width: auto;
    }

    .register-email input,
    .register-username input,
    .register-passwords input {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0 5px;
        height: 4vh;
        font-size: 16px;
        font-weight: bold;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
    }

    footer,
    .footer {
        display: block;
        width: 100%;
        min-height: 15vh;
        height: auto;
        max-height: 100%;
        text-align: center;
        background-color: #284B63;
        color: white;
        align-items: center;
        justify-content: center;
    }

    .footer-copyright,
    .footer-links,
    .footer-social-links {
        display: block;
        width: 95%;
        height: auto;
        padding: 5px 0;
        justify-content: center;
    }

    .footer-copyright {
        font-size: 1.15em;
        flex-flow: column nowrap;
    }

    .footer-links,
    .footer-social-links a {
        justify-content: center;
        font-size: 1.15em;
        flex-flow: column nowrap;
    }

    .footer-links a,
    .back-to-top-footer a {
        padding: 4px 5px;
        color: white;
        flex-flow: column nowrap;
        transition: 0.25s ease;
    }

    .footer-links a:hover,
    .back-to-top-footer:hover {
        background-color: #3C6E70;
    }

    .footer-social-links a,
    .back-to-top-footer {
        padding: 5px;
    }

    .footer-social-links > a > img {
        width: 64px;
        max-height: 64px;
    }

    .delete-confirm,
    .edit-comment-overlay,
    .delete-confirm-review {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        width: 95vw;
        min-width: 100px;
        padding: 10px;
        height: auto;
        border: 1px solid;
        text-align: center;
        z-index: 9999;
        transform: translate(-50%, -50%);
    }

    .moderate-panel {
        width: 100%;
        height: auto;
        max-height: none;
    }

    .moderate-cont {
        padding: 0;
    }

    .moderate-actions,
    .profile-info-cont {
        bottom: 0;
    }

    .moderation-user-profile,
    .moderate-server-profile-cont {
        height: auto;
        max-height: none;
    }

    .profile-info-cont,
    .moderate-actions {
        position: relative;
    }

    .moderate-user-profile {
        height: auto;
        max-height: 100%;
    }

    .profile-info-cont > div,
    .moderate-actions-cont > div {
        display: block !important;
    }

    .moderate-actions-cont > div {
        margin: 3px 0;
    }

    .logo {
        display: block;
        padding: 5px;
        width: 267px;
        margin: 0 auto;
    }

    .loadMore {
        display: block;
        text-align: center;
        font-size: 1.5em;
        width: auto;
        padding: 5px 0;
        margin: 2px 10px;
        border-radius: 10px;
        background-color: #4DBCDDff;
        font-weight: bold;
        color: white;
        text-shadow: 0 0 3px black;
    }

    .list-container-large {
        float: none;
    }

    .settings-form-dashboard {
        display: block;
        width: 100%;
        padding: 0;
        overflow: auto;
        text-align: center;
    }

    .server-dashboard {
        float: none;
        display: block;
        width: 100%;
        padding: 0;
    }

    .dashboard-board {
        display: block;
        width: 100%;
        margin: 0 auto;
        text-align: center;
        font-size: 1.4em;
    }

    .dashboard-small-items {
        display: block;
        width: 100%;
        padding: 0;
        margin: 5px 0;
        min-height: 165px;
    }

    .server-page-title h1,
    .server-page-title span,
    .server-page-title {
        padding: 0;
        margin: 0;
    }

    .server-page-title h1 {
        font-size: 2.4em;
    }

    .server-page-title span {
        font-size: max(min(5vmin, 16px), 1.5em);
    }

    .reauthenticate {
        padding: 5px;
        box-shadow: 0 0 1px;
        text-align: left;
    }

    .reauthenticate form {
        display: block;
        width: 100%;
    }

    .comments,
    .comment2 {
        clear: both;
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }

    #share-buttons img {
        width: 35px;
        padding: 5px;
        border: 0;
        box-shadow: 0;
        display: inline;
    }

    #share-buttons a {
        text-decoration: none;
    }

    .application-drop {
        width: 100%;
        margin: 0;
        padding: 2px;
    }

    .news-content img {
        max-width: 100%;
    }

    .parentComment,
    .parentNewsComment,
    .childComment {
        width: 95%;
        max-width: 95%;
        margin: 5px auto;
        position: relative;
        text-align: left;
        padding: 0.5%;
        border-left: 2px solid rgba(77, 188, 221, 1);
        border-top: 2px solid rgba(77, 188, 221, 1);
        border-bottom: 2px solid rgba(37, 204, 148, 1);
        border-right: 2px solid rgba(37, 204, 148, 1);

    }

    .childComment {
        margin-left: 3px;
    }

    .parentCommentImg,
    .childCommentImg,
    .mention-details img {
        position: relative;
        display: inline-block;
        vertical-align: middle;
        max-height: 48px;
        max-width: 48px;
        margin-left: 2px;
        margin-top: 2px
    }
    .parentCommentWrap {
        display: block;
        width: 100%;
        max-width: 100%;
    }

    .username-icon-cont {
        position: relative;
        display: inline-block;
        width: 75%;
        vertical-align: middle;
    }

    .childCommentImg,
    .mention-details img {
        max-height: 32px;
        max-width: 32px;
    }

    .fa-ellipsis-h::before {
        font-size: 1em;
    }

    .commentInteract {
        position: relative;
        right: 8px;
        margin: 0;
        display: inline-block;
        /* inline block*/
        vertical-align: middle;
        padding: 6px;
        border-radius: 10px;
        font-size: 1.3em;
    }

    .comment-interact-drop {
        position: absolute;
    }

    .review-preview {
        display: block;
        width: 90% !important;
        margin: 0 auto;
    }

    .login-register-btn {
        display: inline-block;
        vertical-align: middle;
    }

    header {
        flex-direction: column;
    }
    .header-logo,.header-user{
        max-width: 100%;
    }
    .header {
        display: block;
    }

    .header ul li {
        display: block;
    }
    .footer-copyright,.footer-links {
        max-width: 100%;
        display: block;
        width: 100%;
        text-align: center;
    }
    .menu-button {
        position: absolute;
        display: block;
        z-index: 1;
        right: 0;
        border: none;
    }

    .menu-button::after {
        clear: both;
    }

    .primary-navigation {
        display: none !important;
        clear: both;
    }

    .opened {
        display: block !important;
    }

    .list-container,
    .settings-list-cont {
        float: none;
        display: block;
        width: 100%;
    }

    .ultima-list-container {
        width: calc(100% - 25px);
        margin-left: -20px;
        min-height: 25px;
    }

    .srv-list-item {
        max-width: 99;
        padding: 1px;
    }

    .srv-list-item > img {
        vertical-align: middle;
        display: inline-block;
        min-width: 64px;
        width: 20%;
        height: auto;
        margin-right: 0;
        padding-right: 5px;
        max-width: 96px;

    }

    .list-item-middle {
        vertical-align: middle;
        display: inline-block;
        padding: 5px 0;
        text-align: center;
        overflow: hidden;
        width: 50%;

    }

    .list-item-right {
        width: 25%;
        vertical-align: middle;
        display: inline-block;
        padding: 0;
    }

    .right-list {
        max-width: 92%;
        width: 75%;
        text-align: center;
        padding: 10px;
        position: relative;
        float: none;
        margin: 0 auto;
    }

    .server-list {
        margin: 0 auto;
        min-width: 100%;
        max-width: 100%;
        width: 100%;
        height: auto;
    }

    .nav-box {
        position: relative;
        padding: 5px;
        text-align: center;
        border-radius: 5px;
        color: white;
        font-size: 1.2em;
        z-index: 1;
    }

    .nav-box-logged-in {
        top: 0;
    }

    .nav-box-avatar {
        max-width: 48px;
        vertical-align: top;
    }

    .login-link,
    .register-link {
        display: inline-block;
    }

    .nav-box a {
        color: white;
        text-decoration: none;
    }

    .srv-page-details {
        float: none;
        clear: both;
        display: block;
        margin: 0 auto;
        width: 95%;
        padding: 5px;
        font-size: 1em;
        min-height: 0;
    }

    #help {
        position: relative;
    }

    #help-nav {
        position: relative;
        display: block;
        width: 100%;
        left: 0;
        right: 0;
        top: 5px;
        border-top: 1px solid white;
        border-bottom: 1px solid white;
        box-shadow: none;
        border-radius: 0;
    }

    .announcement {
        text-align: center;
        width: auto;
        position: relative;
        padding: 10px;
    }

    .admin-hub {
        padding: 0;
        display: block;
        background-color: #eee;
        height: auto;
        width: 100%;
        max-width: 100%;
        display: block;
        overflow: auto;
    }

    .admin-left,
    .admin-right {
        vertical-align: top;
    }

    .admin-left {
        position: relative;
        display: none;
        width: 99%;
        min-width: 250px;
        height: auto;
        border-right: 1px solid black;
        padding: 5px;
        overflow: scroll;
    }

    .admin-left1 > a {
        display: block;
        padding: 2.5px;
        margin: 2.5px;
    }

    .admin-right {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        min-width: 280px;
        background-color: #afb2b5;
        margin: 0;
        padding: 0;
    }

    .admin-center {
        width: 70%;
        overflow: auto;
    }

    .admin-links {
        margin: 2px;
    }

    .admin-links h3 {
        padding: 4px;
    }

    .admin-links a {
        display: block;
        padding: 3px;
        margin: 2px 4px;
        background-color: #8cc6ea;
        border-radius: 3px;
        font-size: 1.1em;
        font-weight: bold;
        text-align: center;
    }

    .admin-links a:hover {
        background-color: #8cead4;
    }

    .report-wrapper {
        text-align: center;
        height: 45vh;
        overflow: hidden;
    }

    .report-table {
        text-align: left;
        height: 95%;
    }

    .tr-wrapper {
        height: 75%;
        overflow: auto;
    }

    .report-table-tr {
        display: block;
        width: 90%;
        padding: 10px;
        box-shadow: 0 0 3px #3c6d70;
        margin: 0 auto;
        text-align: center;

    }

    .report-table-tr-list {
        padding: 10px;
    }

    .admin-report-item {
        display: inline-block;
        width: 25%;
        vertical-align: middle;
        text-align: center;
    }

    .admin-report-id {
        max-width: 50px;
    }

    .moderate-report-id {
        max-width: 25px;
    }

    .moderate-report-id-server {
        max-width: auto;
    }

    .admin-home {
        position: relative;
        height: 100%;
        display: block;
        flex-direction: column;
        flex-wrap: wrap;
        overflow: auto;
    }

    .admin-right-topbar {
        position: relative;
        display: none;
        flex-wrap: nowrap;
        width: 100%;
        height: auto;
    }

    .admin-topbar-stat-item {
        position: relative;
        display: block;
        width: 99%;
        padding: 5px;
        margin: 5px;
        background-color: #8cc6ea;
        font-size: 1.3em;
        font-weight: 700;
        border-radius: 10px;
        box-shadow: 1px 1px 5px black;
        overflow: auto;
    }

    .admin-home-main {
        width: 92%;
        height: 100%;
        flex: 1;
        padding: 0;
    }

    .admin-urgent-reports,
    .admin-emails,
    .admin-news-section {
        display: block;
        width: 99%;
        text-align: center;
        padding: 5px;
        background-color: #f2f2f2;
        min-height: 35%;
        height: auto;
        max-height: 75%;
        border-radius: 5px;
        box-shadow: 0 0 5px black;
        overflow: auto;
        margin: 5px 0;
    }

    .message-icon {
        display: inline-block;
        vertical-align: middle;
        width: 32px;
    }

    .message-icon-comment-reply {
        display: inline-block;
        vertical-align: middle;
        width: 24px;
    }

    .moderate-avatar-wrap {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        width: 90%;
        height: 90%;
        overflow-y: auto;
    }

    .moderate-avatar {
        position: relative;
        display: block;
        margin: 0 auto;
        max-width: 275px;
        max-height: 200px;

    }

    .moderate-item {
        position: relative;
        display: inline-block;
        width: auto;
        min-width: 300px;
        max-height: 350px;
        background-color: #eee;
        text-align: center;
        margin: 5px;
    }

    .moderate-interact-items {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
    }

    .moderate-interact-items > div {
        display: inline-block;
        padding: 5px;
        margin: 3px 4px;
    }

    .moderate-approve-btn,
    .moderate-escalate-btn,
    .moderate-remove-btn {
        font-weight: bold;
        box-shadow: 0 0 1px black;
        cursor: pointer;
    }

    .moderate-approve-btn {
        background-color: lawngreen;
    }

    .moderate-escalate-btn {
        background-color: red;
    }

    .moderate-remove-btn {
        background-color: indianred;
    }

    .moderate-approve-btn:hover,
    .moderate-escalate-btn:hover,
    .moderate-remove-btn:hover {
        box-shadow: inset 0 0 3px black;

    }

    .urgent-report-cont,
    .admin-email-cont {
        overflow: auto;
        height: 87%;
    }

    .admin-urgent-reports a,
    .admin-emails a {
        text-decoration: none;
        cursor: pointer;

    }

    .urgent-report-item,
    .admin-email-item {
        width: 75%;
        margin: 5px auto;
        box-shadow: 0 0 2px black;
        background-color: #fff;
    }

    .urgent-report-item > div,
    .admin-email-item > div {
        font-size: 1.3em;
        display: block;
        margin: 0 5px;
        word-wrap: break-word;
    }

    .urgent-report-item:hover,
    .admin-email-item:hover {
        background-color: #8cc6ea;
    }

    .server-error {
        font-size: 1.5em;
        font-weight: bold;
    }

    .report-box {
        border: solid 1px;
    }

    .report-tr {
        border-bottom: 1px solid;
    }

    .report-td {
        padding: 5px;
        display: inline-block;
    }

    .admin-center-list {
        height: 600px;
        overflow: auto;
    }

    .admin-server-item,
    .admin-server-item2 {
        display: block;
        padding: 5px;
        margin: 5px;
        width: auto;
        min-width: 300px;
        text-align: left;
        border: 1px solid;
        border-radius: 10px;
    }

    .admin-server-item2 {
        display: block;
    }

    .user-name {
        font-weight: bold;
        font-size: 1.2em;
    }

    .admin-server-item > img,
    .admin-server-item2 > img {
        width: 50px;
        height: 50px;
    }

    .ultima-online-list,
    .ultima-online-page {
        padding: 10px 0;
        font-family: 'MedievalSharp', cursive;
        border-right: none;
        border-left: none;

    }

    .ultima-online-item,
    .ultima-online-texture {
        background: url(images/default/uo-repeated-texture.jpg) repeat top left;
        box-shadow: inset 0 0 4px;
        font-weight: bold;
    }

    .ultima-online-texture {
        font-weight: normal;
        box-shadow: none;
    }

    .uo-news-header {
        font-size: 1.1em;
        text-decoration: underline;
    }

    .server-page {
        display: flex;
        flex-direction: column;
    }

    .server-page-left,
    .server-page-right {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        vertical-align: top;
    }

    .serverDetailWrap {
        flex-direction: column;
    }

    .srv-detail-vote,
    .srv-page-video  {
        width: 100%;
    }

    .srv-page-video iframe {
        width: calc(100% - 20px);
        margin: 0 auto;
    }

    .server-page-title,
    .srv-page-interact,
    .serverDetailWrap,
    .srv-page-desc,
    .server-page-right,
    .server-comments,
    .server-page-left {
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 1px 0 5px rgba(0, 0, 0, 0.1);
        margin: 3px 3px;
    }

    .right-list,
    .left-list,
    .ultima-right-list,
    .ultima-left-list {
        width: 100%;
        margin: 0.5%;
        position: relative;
        display: inline-flex;
        flex-direction: column;
        font-size: 1.1em;
    }

    .ultima-right-list,
    .ultima-left-list {
        margin-left: -20px;
        width: calc(100% - 24px);
        min-height: 25px;

    }

    .close-infobox::before {
        content: "x";

    }

    .close-infobox {
        padding: 3px 8px;
        font-weight: bold;
        position: absolute;
        top: -3px;
        right: 5px;
        color: red;
        font-size: 2em;
    }

    .close-infobox:hover {
        color: tomato;
        cursor: pointer;
    }

    .messages-container,
    .notifications {
        width: 100%;
        margin: 0 auto;
        padding: 5px 0;
    }

    .notifications {
        margin: 5px auto;
        padding: 2px;
    }

    .add-server-form-cont,
    .review-container
     {
        width: auto;
    }

    .review-item {
        display: block;
        width: auto;
    }
    .mySlides img,
    .myVidSlides iframe {
        height: 400px;
    }
}