/* Header drop menu - header.alt */
#header-drop-menu {
    background: #FFF;
    height: auto;
    min-width: 100px;
    padding: 5px 20px;
    position: absolute;
    z-index: 10;
}
#header-drop-menu .selection-option {
    border-bottom: 1px solid #DDDDDD;
    color: #242C3F;
    font-size: 14px;
    padding: 10px;
    text-align: center;
}
#header-drop-menu .selection-option:last-of-type {
    border-bottom: none;
}
#header-drop-menu .selection-option a {
    color: inherit;
}

/* Header float tab */
#header-float-tab a:link,  
#header-float-tab a:visited,
#header-float-tab a:hover,
#header-float-tab span:hover { text-decoration: none; color: #242C3F; }

/* Header */
header { 
    background: #FFFFFF; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.55); height: 100px; margin-bottom: 0; width: 100%; 
}
header.alt { background: #F46034; border-bottom: none; }
header a:hover,
header span:hover { text-decoration: none; color: #242C3F; }
header .playerxp-logo {
    background-image: url(../../images/icons/svg/PlayerXP-Logo-Main.svg); background-size: contain; background-repeat: no-repeat;
    height: 50px; transform: none; -moz-transform: none; -o-transform: none; -webkit-transform: none;
}
header.alt .playerxp-logo { background-image: url(../../images/icons/svg/PlayerXP-Logo-Main-White.svg); }
#header-user-menu { z-index: 16; }

#header-float-tab {
    background-color: #FFFFFF; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; position: fixed;
    top: 0; right: 10px; padding: 10px 20px; z-index: 16; box-shadow: 0 1.5px 5px 0 rgba(0, 0, 0, 0.2);
}

@media (max-width: 1100px) {
    #header-float-tab { box-shadow: none; }
}

/* Header filters */
#header-discord-categories, #header-discord-channels, #header-topic-search { background-color: #DFE5F4; border: none; outline: none; padding: 5px 10px; }
#header-discord-categories, #header-discord-channels { padding-right: 25px; max-width: 200px; }
#page-title .moddable > * { display: inline-block; }

/* Header Image */
#header_image_wrap {
    position: absolute;
    width: 100%;
    height: 425px;
    background-color: #283147;
    line-height: 0;
}
#header_image {
    width: 100%;
    height: 100%;
    background-position: 50% 25%;
    background-size: cover;
    position: relative;
    top: 0;
    left: 0;
}
.bg-placeholder {
    width: 100%;
    height: 100%;
    background-position: 50% 25%;
    background-size: cover;
    position: relative;
    top: 0;
    left: 0;
}

/* Header Video */
#hero_video_bg {
    height: 100%; 
    width: 100%; 
    object-fit: fill;
}

/* Video Overlay */
#hero_overlay {
    background-color: rgba(38,46,63,.85); 
    position: absolute; 
    width: 100%; 
    top: 0; 
    height: 100%;
}

/* Logo Overlay */
#logo_overlay {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 35%;
    height: 60%;
    width: 100%;
}