/*!
 * cache=false;cachewrite=true
 * @license Licences are viewable at this URL: https://test10.gaiaonline.com/src/_/7d521e341b61a0ffc382e34b6c768bdb-2001-83/src/css/mainui/header.css
 */


/*! /src/css/mainui/header.css */
body.mainui-new #gaia_header.mainui-header {
    min-width: 1140px;
    --mainui-topbar-gap: 20px;
    --mainui-notifications-width: 162px;
    --mainui-header-icon-size: 24px;
    --mainui-currency-icon-size: 24px;
    --mainui-currency-subscription-size: 22px;
    --mainui-account-min-width: 200px;
    --mainui-account-join-overlap: 16px;
    --mainui-account-overlap: calc(0px - var(--mainui-topbar-gap) - var(--mainui-account-join-overlap));
    --mainui-account-pill-right: 100%;
}

body.mainui-new #gaia_header.mainui-header.mainui-header-fixed {
    --mainui-account-pill-right: 1140px;
}

body.mainui-new #gaia_header.mainui-header.mainui-header-wide {
    --mainui-account-pill-right: 100%;
}

body.mainui-new #gaia_header.mainui-header .header_content.mainui-header-content {
    height: 150px;
    position: relative;
}

body.mainui-new #gaia_header.mainui-header.mainui-header-wide .header_content.mainui-header-content {
    width: 100% !important;
}

body.mainui-new #gaia_header.mainui-header .header_content .imgAvatar,
body.mainui-new #gaia_header.mainui-header .header_content #animated_item {
    left: 168px;
    top: 0;
}

body.mainui-new #gaia_header.mainui-header .mainui-header-logo {
    position: absolute;
    top: 47px;
    left: 21px;
    z-index: 35;
    display: block;
    width: 120px;
    height: 52px;
    color: #ffffff;
    text-decoration: none;
}

body.mainui-new #gaia_header.mainui-header .mainui-header-logo svg {
    display: block;
    width: 120px;
    height: 52px;
    overflow: visible;
}

body.mainui-new #gaia_header.mainui-header .mainui-header-logo:focus {
    outline: none;
}

body.mainui-new #gaia_header.mainui-header .mainui-header-logo:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.95);
    outline-offset: 3px;
    border-radius: 4px;
}

.mainui-topbar {
    position: absolute;
    top: 0;
    right: calc(100% - var(--mainui-account-pill-right));
    z-index: 40;
    display: flex;
    align-items: flex-start;
    gap: var(--mainui-topbar-gap);
    height: 32px;
    font-family: Poppins, arial, helvetica, clean, sans-serif;
}

.mainui-notifications,
.mainui-currency,
.mainui-account-pill {
    height: 32px;
    box-sizing: border-box;
}

.mainui-notifications,
.mainui-currency {
    border-radius: 16px;
}

.mainui-currency {
    border-radius: 16px 0 0 16px;
}

.mainui-account-pill {
    border-radius: 10px;
}

.mainui-notifications {
    width: var(--mainui-notifications-width);
    flex: 0 0 var(--mainui-notifications-width);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(38, 38, 38, 0.42);
}

.mainui-notification {
    position: relative;
    width: var(--mainui-header-icon-size);
    height: var(--mainui-header-icon-size);
    box-sizing: border-box;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.mainui-notification-disabled {
    cursor: default;
}

.mainui-notification .mainui-icon,
.mainui-subscription-holder {
    width: var(--mainui-header-icon-size);
    height: var(--mainui-header-icon-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mainui-currency-icon svg,
.mainui-subscription-holder svg,
.mainui-icon-img,
.mainui-account-arrow svg {
    width: 100%;
    height: 100%;
    display: block;
}

.mainui-account-arrow svg {
    fill: currentColor;
}

.mainui-icon svg,
.mainui-icon img {
    width: 100%;
    height: 100%;
    display: block;
}

.mainui-badge {
    position: absolute;
    top: 0;
    right: 0;
    width: 10px;
    height: 10px;
    padding: 0;
    box-sizing: border-box;
    border-radius: 50%;
    background: #fd3458;
    border: 1px solid #ffffff;
    box-sizing: border-box;
}

.mainui-currency {
    position: relative;
    width: auto;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 4px 27px 4px 14px;
    gap: 0;
    background: transparent;
    color: #ffffff;
}

.mainui-currency:before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 9px;
    border-radius: 100px 0 0 100px;
    background: rgba(38, 38, 38, 0.42);
}

body.mainui-new #gaia_header .mainui-currency,
body.mainui-new #gaia_header .mainui-currency a,
body.mainui-new #gaia_header .mainui-currency a:link,
body.mainui-new #gaia_header .mainui-currency a:visited,
body.mainui-new #gaia_header .mainui-currency a:hover,
body.mainui-new #gaia_header .mainui-currency a:active,
body.mainui-new #gaia_header .mainui-currency .mainui-currency-value,
body.mainui-new #gaia_header .mainui-currency .mainui-currency-value span {
    color: #ffffff !important;
    font-family: Poppins, arial, helvetica, clean, sans-serif !important;
    font-weight: 600 !important;
    text-decoration: none;
}

.mainui-currency-item,
.mainui-subscription,
.mainui-currency-discount {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    color: #ffffff;
    text-decoration: none;
}

.mainui-currency-platinum-wrap {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.mainui-currency-item {
    min-width: 0;
    max-width: none;
    flex: 0 0 auto;
    gap: 5px;
}

.mainui-currency-platinum .mainui-currency-value {
    width: auto;
    flex: 0 0 auto;
}

.mainui-platinum-bubble {
    position: absolute;
    top: 24.221px;
    left: var(--mainui-platinum-bubble-left, 8.074px);
    z-index: 47;
    display: block;
    width: var(--mainui-platinum-bubble-width, 56px);
    min-width: 56px;
    height: 27.818px;
    box-sizing: border-box;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #ffffff;
    font-family: Poppins, arial, helvetica, clean, sans-serif;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-2px);
    transition: opacity 200ms ease, transform 200ms ease;
}

.mainui-platinum-bubble:before {
    display: none;
}

.mainui-platinum-bubble:after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 5.818px;
    left: 0;
    width: 100%;
    height: 22px;
    border-radius: 8px;
    background: var(--mainui-platinum-bubble-bg, #a094cf);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.mainui-platinum-bubble:focus {
    outline: none;
}

.mainui-platinum-bubble:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.95);
    outline-offset: 2px;
}

.mainui-platinum-bubble.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.mainui-platinum-bubble.is-fading {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-2px);
}

.mainui-platinum-bubble-tail {
    position: absolute;
    z-index: 1;
    top: 0.779px;
    left: 44.465px;
    width: 8px;
    height: 6px;
    display: block;
    overflow: visible;
    color: var(--mainui-platinum-bubble-bg, #a094cf);
}

.mainui-platinum-bubble-text {
    position: absolute;
    z-index: 1;
    top: 8.818px;
    right: 7.628px;
    left: 6.878px;
    display: inline-flex;
    align-items: flex-start;
    gap: 5.506px;
    min-width: 0;
    height: 18px;
    overflow: visible;
    color: #ffffff;
}

.mainui-platinum-bubble-amount,
.mainui-platinum-bubble-label {
    position: static;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    font-weight: 400;
}

.mainui-platinum-bubble-amount:empty,
.mainui-platinum-bubble-label:empty {
    display: none;
}

.mainui-platinum-bubble-amount {
    flex: 0 0 auto;
    height: 18px;
    font-size: 12px;
    line-height: 18px;
}

.mainui-platinum-bubble-label {
    flex: 0 0 auto;
    height: 15px;
    margin-top: 1.5px;
    font-size: 10px;
    line-height: 15px;
}

.mainui-currency-gcash .mainui-currency-value {
    width: auto;
    flex: 0 0 auto;
}

.mainui-currency-gcash {
    margin-left: 10px;
}

.mainui-currency > :first-child {
    margin-left: 0;
}

.mainui-angelsub {
    margin-left: 20px;
}

.mainui-currency-icon,
.mainui-subscription-holder {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: visible;
}

.mainui-currency-icon {
    width: var(--mainui-currency-icon-size);
    height: var(--mainui-currency-icon-size);
    flex: 0 0 var(--mainui-currency-icon-size);
}

.mainui-subscription-holder {
    width: var(--mainui-currency-subscription-size);
    height: var(--mainui-currency-subscription-size);
    flex: 0 0 var(--mainui-currency-subscription-size);
}

.mainui-currency-icon > svg,
.mainui-currency-icon > img,
.mainui-subscription-holder > svg,
.mainui-subscription-holder > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.mainui-currency-icon > svg:not(.mainui-icon-outline),
.mainui-currency-icon > img:not(.mainui-icon-outline),
.mainui-subscription-holder > svg:not(.mainui-icon-outline) {
    z-index: 1;
}

.mainui-currency-icon .mainui-icon-outline,
.mainui-subscription-holder .mainui-icon-outline {
    z-index: 2;
    fill: none !important;
    pointer-events: none;
}

.mainui-currency-icon .mainui-icon-outline path,
.mainui-subscription-holder .mainui-icon-outline path {
    fill: none !important;
    stroke: #ffffff;
}

.mainui-currency-icon {
    background: transparent;
}

.mainui-subscription-holder {
    background: rgba(16, 16, 16, 0.28);
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35));
}

.mainui-angelsub .mainui-subscription-holder,
.mainui-perks .mainui-subscription-holder {
    background: transparent;
    filter: none;
}

.mainui-subscription.is-inactive .mainui-subscription-holder {
    opacity: 0.5;
}

.mainui-subscription.is-active .mainui-subscription-holder {
    opacity: 1;
}

.mainui-perks {
    width: var(--mainui-currency-subscription-size);
    flex-basis: var(--mainui-currency-subscription-size);
    margin-left: 10px;
}

.mainui-perks .mainui-subscription-holder {
    width: var(--mainui-currency-subscription-size);
    flex-basis: var(--mainui-currency-subscription-size);
}

.mainui-currency-value {
    min-width: 0;
    max-width: none;
    flex: 0 0 auto;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    font-size: 12px;
    line-height: 18px;
    font-weight: 600;
    padding-left: 0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}

.mainui-currency-discount {
    display: none;
}

.mainui-currency-discount #show_on_header_span {
    position: static;
    display: inline-block;
    margin: 0 2px 0 0;
    padding: 2px 5px;
    border-radius: 6px;
    border-width: 1px;
    border-style: solid;
    font-size: 10px;
    line-height: 12px;
}

.mainui-currency-discount #show_on_header_span:after {
    display: none;
}

.mainui-subscription {
    width: var(--mainui-currency-subscription-size);
    height: var(--mainui-currency-subscription-size);
    flex: 0 0 var(--mainui-currency-subscription-size);
    justify-content: center;
}

.mainui-account-wrap {
    position: relative;
    width: max-content;
    min-width: var(--mainui-account-min-width);
    flex: 0 0 auto;
    z-index: 42;
    margin-left: var(--mainui-account-overlap);
}

.mainui-account-pill {
    position: relative;
    z-index: 46;
    width: max-content;
    min-width: var(--mainui-account-min-width);
    margin: 0;
    border: 0;
    background: var(--mainui-account-pill-bg, #7b63d9);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 0 24px;
    overflow: visible;
    text-indent: 0;
    line-height: normal;
    cursor: pointer;
    font-family: Poppins, arial, helvetica, clean, sans-serif;
    box-shadow: 0 2px 4px rgba(35, 22, 92, 0.2);
}

.mainui-account-name {
    display: block;
    flex: 0 0 auto;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
    color: #ffffff;
}

.mainui-account-name span,
.mainui-account-name a {
    color: #ffffff !important;
    font-family: Poppins, arial, helvetica, clean, sans-serif !important;
    font-size: 14px !important;
    line-height: 21px !important;
    font-weight: 700 !important;
    text-decoration: none;
}

.mainui-account-arrow {
    flex: 0 0 24px;
    width: 24px;
    height: 18px;
    margin-left: 8px;
    margin-right: 4px;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.mainui-account-arrow svg {
    width: 14px;
    height: 9px;
    transform-origin: center;
    transition: transform 120ms ease;
}

.mainui-account-pill[aria-expanded="true"] {
    border-radius: 10px;
    box-shadow: none;
}

.mainui-account-pill[aria-expanded="true"] .mainui-account-arrow svg {
    transform: rotate(180deg);
}

.mainui-user-dropdown {
    position: absolute;
    top: 23px;
    left: 0;
    width: 100%;
    min-width: var(--mainui-account-min-width);
    height: 82px;
    overflow: hidden;
    background: transparent;
    border-radius: 0 0 10px 10px;
    font-family: Poppins, arial, helvetica, clean, sans-serif;
    z-index: 45;
}

.mainui-user-dropdown::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 9px;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--mainui-account-dropdown-bg, #9380e0);
    border-radius: 0 0 10px 10px;
    box-shadow: 0 8px 14px rgba(35, 22, 92, 0.16);
    pointer-events: none;
}

.mainui-user-dropdown::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    height: 9px;
    background: var(--mainui-account-dropdown-bg, #9380e0);
    pointer-events: none;
}

body.mainui-new #gaia_header.mainui-header .header_content .mainui-user-dropdown ul {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 10px 0 6px;
    line-height: normal;
}

.mainui-user-dropdown li {
    list-style: none;
}

.mainui-user-dropdown a {
    display: flex;
    align-items: center;
    height: 22px;
    padding: 0 24px;
    color: #ffffff !important;
    border-radius: 4px;
    box-sizing: border-box;
    font-family: Poppins, arial, helvetica, clean, sans-serif;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    text-decoration: none !important;
}

.mainui-user-dropdown a.is-selected,
.mainui-user-dropdown a:hover,
.mainui-user-dropdown a:focus {
    background: var(--mainui-account-dropdown-hover-bg, #c5bcfe);
    color: var(--mainui-account-dropdown-hover-text, #4a4568) !important;
    font-weight: 500 !important;
    outline: none;
}

.mainui-hidden {
    display: none;
}

.mainui-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

@media (max-width: 1220px) {
    .mainui-topbar {
        right: calc(100% - var(--mainui-account-pill-right));
        gap: var(--mainui-topbar-gap);
    }

    .mainui-notifications {
        width: var(--mainui-notifications-width);
        flex-basis: var(--mainui-notifications-width);
        gap: 14px;
    }

    .mainui-currency {
        width: auto;
    }

    .mainui-account-wrap,
    .mainui-account-pill {
        width: max-content;
        min-width: var(--mainui-account-min-width);
    }

    .mainui-account-name {
        font-size: 14px;
    }
}