@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,600,700");
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i');
@import url('https://fonts.googleapis.com/css?family=Oswald:400,700');

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

html,
body {
    height: 100%;
}

body {
    font-size: 14px;
    color: #3E3F3A;
    background-color: #E3E4E6 !important;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: scroll;
}

/* Application Globals */

.uppercase {
    text-transform: uppercase;
}

.heading {
    padding-top: 8px;
    padding-bottom: 8px;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 400;
    text-align: left;
    text-transform: uppercase;
    color: #636363;
    margin: 0;
}

.label:last-child {
    margin-bottom: 0;
}

.label,
.badge {
    display: inline;
    margin-bottom: 5px;
    padding: 2px 4px;
    vertical-align: baseline;
    white-space: nowrap;
    line-height: 14px;
    color: #ffffff !important;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
}

/* Application Base */

.page_module {
    width: 100%;
    min-height: 100%;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
}

.page_module.margin {
    margin-top: 20px;
    margin-bottom: 20px;
}

.page_module.no_style {
    padding: 0;
    border: none;
    background: none;
}

#navbar,
#bottom_bar {
    flex: none;
}

.app#page_wrapper {
    flex: 1 0 auto;
    padding: 0;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
}

.app.no_page_top_margin {
    margin-top: 0 !important;
}

.app.no_page_bottom_margin {
    margin-bottom: 0 !important;
}

.app.avatar {
    width: 24px !important;
    height: 24px !important;
    border-radius: 3px;
}

.app.avatar.small {
    width: 18px !important;
    height: 18px !important;
}

.app.avatar.margin,
.app.avatar.small.margin img {
    margin-right: 8px;
}

.app.vertical {
    display: inline-flex !important;
    align-items: center !important;
}

#navbar {
    background: #fbad45;
    z-index: 999;
    border-radius: 0;
    margin: 0;
    font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#navbar .menu .item {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

#navbar .results {
    text-transform: none;
}

#navbar .top_bar_profile {
    background-color: rgba(0, 0, 0, 0.1);
}

#navbar .top_bar_profile a {
    display: block;
}

#navbar .top_bar_profile > span,
#navbar .top_bar_profile > a {
    text-transform: uppercase;
}

#navbar .top_bar_header .header {
    font-size: 24px;
    color: #ffffff;
}

#navbar .top_bar_header .top_bar_header_extra {
    font-weight: 300;
    text-transform: uppercase;
}

#navbar .top_bar_header .top_bar_header_extra strong {
    font-weight: 700;
}

#bottom_bar {
    background-color: #030303;
}

#bottom_bar h4.header {
    text-transform: uppercase;
}

#bottom_bar_right_content {
    margin-top: 0;
}

#staff_bar {
    display: block;
    width: 100%;
    margin: 0;
    background-color: #212121;
    border-radius: 0;
}

a:hover{
    text-decoration: none;
}

.ui.search .results {
    border-radius: 0;
}

.ui.search .results .result {
    width: 100%;
    display: block;
}

.ui.table .neutral {
    background: #DFF2FF !important;
    color: #40A2FF !important;
}

.table td.fit,
.table th.fit {
    white-space: nowrap;
    width: 1%;
}

.table td.fit-min,
.table th.fit-min {
    min-width: 225px;
}

#hero {
    display: flex;
    align-items: center;
    width: 100%;
    height: 700px;
    background: url('../img/background.png') center;
    background-size: cover;
}

#hero h1 {
    margin: 0;
    color: white;
    font-size: 62px;
    font-weight: 700;
}

#hero p {
    margin-bottom: 0;
    color: white;
    font-size: 20px;
}

#hero .button-group {
    margin-top: 15px;
}

#hero_alt {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 60px;
    background: url('../img/background.png') center;
    background-size: cover;
}

#hero_alt h1 {
    margin: 0;
    color: white;
    font-family: 'Roboto', sans-serif;
    font-size: 62px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}

#hero_alt .ui.button {
    display: block;
    max-width: 180px;
    margin: 0 auto;
}

.rank-color-owner {
    background-color: #AA0000;
    border: 1px solid #52100B;
    color: #AA0000;
}

.rank-color-developer {
    background-color: #00CCFF;
    border: 1px solid #2191AD;
    color: #00CCFF;
}

.rank-color-manager {
    background-color: #82048C;
    border: 1px solid #63036B;
    color: #82048C;
}

.rank-color-admin {
    background-color: #991F15;
    border: 1px solid #52100B;
    color: #991F15;
}

.rank-color-senior-admin {
    background-color: #991F15;
    border: 1px solid #52100B;
    color: #991F15;
}

.rank-color-senior-mod {
    background-color: #82048C;
    border: 1px solid #63036B;
    color: #82048C;
}

.rank-color-moderator {
    background-color: #1373A3;
    border: 1px solid #0C4A69;
    color: #02AABA;
}

.rank-color-trial-mod {
    background-color: #C4BC39;
    border: 1px solid #B0992A;
    color: #BDA700;
}

.rank-color-builder,
.rank-color-host {
    background-color: #0c8b08;
    border: 1px solid #064204;
    color: #0C8B08;
}

.rank-color-partner {
    background-color: #D4AB63;
    border: 1px solid #7a623c;
    color: #D4AB63;
}

.rank-color-vip,
.rank-color-youtuber {
    background-color: #C506D4;
    color: #C506D4;
}

.rank-color-bouncer,
.rank-color-bartender {
    background-color: #004ed1;
    border: 1px solid #004dcc;
    color: #4482ea;
}

.rank-color-premium,
.rank-color-partyman {
    background-color: #D48A00;
    border: 1px solid #A16900;
    color: #EBB745;
}

.rank-color-clubber {
    background-color: #EB2BD4;
    border: 1px solid #AE0BDE;
    color: #CF28E8;
}

.rank-color-normal,
.rank-color-other {
    background-color: #242424;
    color: #242424;
}

.caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 4px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* BxSlider */

.bx-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 30px !important;
}

.bx-pager-item {
    opacity: 0.5 !important;
}

.bx-pager-link {
    background: #DEDEDE !important;
}

.bx-pager-link.active {
    background: #FFFFFF !important;
}

/* Server */

#server-info {
    width: 100%;
    height: 250px;
    background-color: #FAFAFA;
}

#server-info h1 {
    margin: 0;
    color: #333;
    font-size: 40px;
    font-weight: 700;
}

.server_module {
    width: 100%;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
}

.server_module > .progress > .bar {
    border-radius: 0 !important;
}

.server_module > .progress {
    border-radius: 0 !important;
    border: 1px solid #999999 !important;
}

#not_found_page {
    width: 100%;
    height: auto;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    padding: 40px;
    text-align: center;
}

#not_found_page h2 {
    margin-bottom: 0;
}

#not_found_page img {
    display: block;
    width: 144px;
    height: 144px;
    margin: 0 auto;
}

.ui.stacked.segment:after,
.ui.stacked.segments:after {
    visibility: hidden !important;
}