header.site-header{
    background:var(--vc_white);
    box-shadow:var(--vc_box_shadow);
    color:var(--vc_black);
    margin:0;
    max-width:100vw!important;
    padding:8px 15px;
    position: sticky;
    position: -webkit-sticky;
    top:0;
    width:100%;
    z-index:9;
}

.game-mode header.site-header{
    background: var(--vc_black);
    color:var(--vc_white);
}

body.admin-bar .site-header,
body.admin-bar #menu-popup.open {
    top:32px;
}

body.scroll-down .site-header{
    padding:5px 15px;
}

.site-header-inner {
    align-items:center;
    display:flex;
    justify-content:center;
    margin:0;
    width:100%;
}

.site-header .site-logo {
    align-items:center;
    display:flex;
    transform-origin:top left;
    width:100%;
}

.site-header .site-logo a{
    align-items:center;
    display:flex;
}

.game-mode .site-header .logo-image.black,
.site-header .logo-image.white{
    display:none;
}

.site-header .logo-image.black,
.game-mode .site-header .logo-image.white{
    display:block;
    max-height:30px;
    width:100%;
    object-fit:contain;
}

body.scroll-down .site-logo svg {
    width:75%;
}

/* SEARCH BAR */
.site-header .search-bar {
    align-items:center;
    display:flex;
    justify-content:center;
    opacity:1;
    width:100%;
    height:100%;
}

body.scroll-down .site-header .search-bar {
    opacity:0;
    pointer-events: none;
}

.site-header form[role="search"].search-bar {
    border: 2px solid;
    border-color:var(--vc_cement);
    border-radius:8px;
    display:flex;
    overflow:hidden;
    width:100%;
}

.game-mode .site-header form[role="search"].search-bar {
    border-color:var(--vc_white);
}

.site-header form[role="search"]:hover.search-bar{
    border-color:var(--vc_black);
}

.game-mode .site-header form[role="search"]:hover.search-bar{
    border-color:var(--vc_white);
}

.site-header .search-bar label {
    width:100%;
}

.site-header .search-bar input[type="search"] {
    background:none;
    border:none;
    border-radius:0;
    padding:4px 7px;
}

.site-header .search-bar input[type="search"]:focus{
    outline:none;
}

.site-header .search-bar input[type="search"]::placeholder {
    color:var(--vc_cement);
}

.game-mode .site-header .search-bar input[type="search"]::placeholder {
    color:var(--vc_white);
}

.site-header .search-bar button[type="submit"] {
    background:none;
    border:none;
    border-radius:0;
    background:var(--vc_cement);
    color:var(--vc_white);
    padding: .3rem 0.75rem;
    display:flex;
    justify-content: center;
    align-items:center;
    height:100%;
}

.game-mode .site-header .search-bar button[type="submit"] {
    background:var(--vc_white);
    color:var(--vc_black);
}

.site-header .search-bar:hover button[type="submit"]{
    background:var(--vc_black);
}

.game-mode .site-header .search-bar:hover button[type="submit"]{
    background:var(--vc_white);
}

.site-header .search-bar #search-button {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.site-header .search-bar .search-submit svg {
    width:15px;
    height:15px;
    fill:var(--vc_white)
}

.game-mode .site-header .search-bar .search-submit svg {
    fill:var(--vc_black);
}

/* PROFILE PIC IN MAIN HEADER */
.menu-navigation .account-photo {
	display:flex;
}
.menu-navigation .account-photo img {
    width:100%;
    height:100%;
    max-width:25px;
    max-height:25px;
	width:25px;
    height:25px;
    border-radius:100px;
}

.menu-navigation a.login-button {
	color:var(--vc_black);
	border:1px solid var(--vc_black); 
	border-radius:6px;padding:4px 8px;
}

.menu-navigation a.login-button:hover{
	background:var(--vc_concrete)
}

/* NAVIGATION */
.site-header .menu-navigation {
    display:flex;
    width:100%;
    justify-content: flex-end;
    align-items:center;
    gap:1em;
}

.site-header .menu-navigation .menu-icon {
    display:flex;
    justify-content: flex-end;
    align-items:center;
}

.site-header .menu-navigation svg {
    font-size:20px;
    fill:var(--vc_black);
    width:25px;
    height:25px;
    max-width:25px;
    max-height:auto;
}

.game-mode .site-header .menu-navigation svg {
    fill:var(--vc_white);
}

.site-header .menu-navigation .menu-icon:hover{
    cursor:pointer;
}

.site-header #open-guide{
    gap:8px;
}

body.admin-bar #menu-popup {
    height:calc(100vh - 32px)
}

#menu-popup {
    background-color:var(--vc_white);
    border-radius:16px 0 0 16px;
    box-shadow:var(--vc_box_shadow);
    color:var(--vc_black);
    display: flex;
    flex-direction:column;
    gap:20px;
    height: 100vh;
    opacity:0;
    padding:20px 15px 30px 30px;
    position: fixed;
    right:-100%;
    top:0;
    width:clamp(200px,100%,460px);
    z-index: -999;
    overflow-y:auto;
    font-family:"Aspekta", "Inter", sans-serif;
    font-weight:500;
}

.game-mode #menu-popup {
    background-color:var(--vc_dark_200);
    color:var(--vc_white);
}

#menu-popup.open {
    opacity:1;
    z-index:999;
    right:0;
}

#menu-popup a {
    color:var(--vc_black);
}

.game-mode #menu-popup a {
    color:var(--vc_white);
}

#menu-popup .main-menu-label {
    opacity:0.4;
    display:flex;
    align-items:center;
    gap:10px;
}

#menu-popup .main-menu-label:hover {
    opacity:1;
}

#menu-popup #close-menu {
    text-align: right;
    position: fixed;
    right: 30px;
    z-index: 3;
}

#menu-popup #close-menu:hover{
    cursor:pointer
}

#menu-popup .main-menu-top {
    display:flex;
    flex-direction:column;
    gap:8px;
}

#menu-popup .main-menu-account {
    display:flex;
    flex-direction:row;
    align-items: center;
    gap:8px;
}

#menu-popup .main-menu-account img {
    width:100%;
    height:100%;
    max-width:64px;
    max-height:64px;
    border-radius:100px;
}

#menu-popup .main-menu-account .account-name{
    font-size:1.5em;
    font-weight:700;
}

#menu-popup .main-menu-account .my-account,
#menu-popup .main-menu-account .divider,
#menu-popup .main-menu-account .logout{
    opacity:0.4;
}

#menu-popup .main-menu-account .my-account:hover,
#menu-popup .main-menu-account .logout:hover{
    opacity:1;
}

#menu-popup .main-menu-label {
    text-transform:uppercase;
    font-weight:700;
}

#menu-popup .main-menu-top:hover .main-menu-label {
    opacity:1;
}

#main-menu-sign-in.main-menu-top {
	flex-direction:row;
}

.limited-access {
    opacity:0.4;
    font-weight:500;
    font-size:0.875em;
    border:1px solid var(--vc_black);
    border-color:var(--vc_black);
    border-radius:4px;
    padding:0.5em 0.5em;
    line-height:1em;
    width:fit-content;
}

.game-mode .limited-access {
    border-color:var(--vc_white);
}

.limited-access.login{
	border:0;
}

.limited-access:hover{
    opacity:1;
    cursor:pointer;
}

#menu-popup .sub-menu {
    display:flex;
    flex-direction:column;
    gap:8px;
    padding-left:10px;
}

#menu-popup .sub-menu-item {
    display:flex;
    flex-direction:row;
    align-items: center;
    width:100%;
    border-radius:4px;
    opacity:0.4
}

#menu-popup .sub-menu-item:hover{
    opacity:1;
}

#menu-popup .sub-menu-item.pd-1096{
    background:rgba(233, 26, 82,0);
}

#menu-popup .sub-menu-item.pd-1096:hover {
    background:rgba(233, 26, 82,0.1);
}

#menu-popup .sub-menu-item.ra-9514{
    background:rgba(243, 112, 34,0);
}

#menu-popup .sub-menu-item.ra-9514:hover {
    background:rgba(243, 112, 34,0.1);
}

#menu-popup .sub-menu-item.bp-344{
    background:rgba(0, 153, 202,0);
}

#menu-popup .sub-menu-item.bp-344:hover {
    background:rgba(0, 153, 202,0.1);
}

#menu-popup .sub-menu-item.gbc{
    background:rgba(66, 182, 73,0);
}

#menu-popup .sub-menu-item.gbc:hover {
    background:rgba(66, 182, 73,0.1);
}

#menu-popup .sub-menu-item.bp-220{
    background:rgba(255, 205, 0,0);
}

#menu-popup .sub-menu-item.bp-220:hover {
    background:rgba(255, 205, 0,0.1);
}

#menu-popup .sub-menu-item.pd-957{
    background:rgba(154, 59, 187,0);
}

#menu-popup .sub-menu-item.pd-957:hover {
    background:rgba(154, 59, 187,0.1);
}

#menu-popup .sub-menu-item.under-construction{
    filter:grayscale(100%);
	pointer-events:none;
	opacity:0.2
}

#main-menu-comparison-tables .sub-menu-item {
    background:rgba(12, 12, 12,0);
}

#main-menu-comparison-tables .sub-menu-item:hover {
    background:rgba(12, 12, 12,0.1);
}

#main-menu-comparison-tables .sub-menu-item svg{
    transform:rotate(-90deg)
}

#menu-popup .sub-menu-item-icon svg {
    display:block;
    width:100%;
    height:100%;
    max-width:25px;
    max-height:25px;
}

#menu-popup .sub-menu-item.pd-1096 svg {
    fill:var(--pd_1096_400);
}

#menu-popup .sub-menu-item.ra-9514 svg {
    fill:var(--ra_9514_400);
}

#menu-popup .sub-menu-item.bp-344 svg {
    fill:var(--bp_344_400);
}

#menu-popup .sub-menu-item.gbc svg {
    fill:var(--gbc_400);
}

#menu-popup .sub-menu-item.bp-220 svg {
    fill:var(--bp_220_500);
}

#menu-popup .sub-menu-item.pd-957 svg {
    fill:var(--pd_957_400);
}

#menu-popup .sub-menu-item.bp-220-pd-957 svg {
    fill:linear-gradient(180deg, var(--bp_220_400) 0%, var(--pd_957_400) 100%);

}

#menu-popup .sub-menu-item.under-construction svg{
    fill:var(--vc_cement)
}

#menu-popup .sub-menu-item-label {
    padding:0px 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width:100%;
}

#main-menu-navigation .sub-menu {
    gap:0;
}

#main-menu-navigation .sub-menu-item{
    background:rgba(12, 12, 12,0);
    padding:4px 0;
}

#main-menu-navigation .sub-menu-item:hover{
    background:rgba(12, 12, 12,0.1);
    padding-left:8px;
}

#main-menu-code-library{
	padding:4px 0;
	margin-bottom:-8px;
}

#main-menu-code-library:hover {
    background: rgba(12, 12, 12, 0.1);
    padding-left: 8px;
    border-radius: 4px;
}

#main-menu-navigation .sub-menu-item-label {
    padding:0;
}

#main-menu-socials .sub-menu {
    flex-direction:row;
    padding-left:0;
}

#main-menu-socials .sub-menu a{
    width:auto;
}

.game-mode #main-menu-socials svg {
    fill:var(--vc_white)
}

@media screen and (max-width:768px){
    .site-header .search-bar {
        display:none;
    }

    body.admin-bar .site-header,
    body.admin-bar #menu-popup.open {
        top:0;
    }

    body.admin-bar #menu-popup {
        height: 100vh;
    }

    #menu-popup {
        width:calc(100% - 58px);
    }
}