@import url("/_css/festival/base.css");
@import url("/_css/festival/footer.css");
@import url("/_css/festival/widgets.css");
@import url("/_css/festival/invitation.css");
@import url("payments.css");

#main {
    background-color: var(--primary-color);
    background-size: cover;
}

#main.mnwf-main {
    background-image: none;
    background-color: var(--light-background-color);
}

.heroes {
    position: relative;
    min-height: 400px;
    max-height: 692px;
    background-color: var(--primary-color);
}

.franchise-title h1 {
    color: var(--light-text-color);
}

div.navigationContainer .left img {
    height: 60px;
}

.navigationContainer input.search {
    border: solid 1px var(--primary-contrast-color);
    color: var(--primary-contrast-color);
}

.navigationContainer input.search::placeholder {
    color: var(--primary-contrast-color);
}

.menu-header h1 {
    color: var(--menu-foreground-color);
}

.login-menu-items, .main-menu-items, .profile-menu-items {
    background-color: var(--public-menu-background);
    color: var(--public-menu-foreground);
    border: solid 3px var(--off-white);
}

hr.menu-divider {
    border: solid 1px var(--off-white);
}

div.login-menu > .up-arrow, div.profile-menu > .up-arrow {
    border-bottom: 10px solid var(--off-white)
}

div.navigation-tabs .navigation-title {
    width: 150px;
    display: flex;
    justify-content: center;
    padding-top: 35px;
}

div.navigation-tabs .navigation-title h2{
      text-transform: none;
}

div.navigation-tabs, div.ad-space {
    background-color: var(--primary-color);
    color: var(--primary-contrast-color);
}

#main > div.index-body > div.section-navigation.row > div.navigation-tabs > div.tabs > div.tab {
    border: 2px solid;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

div.tab.selected {
    color: var(--secondary-color);
}

div.tab.selected img {
    filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(65%) contrast(70%);
}

div.tab .menu {
    background-color: var(--primary-color);
    text-transform: uppercase;
    width: 500px;
}

div.tab .menu a, div.tab .menu a:hover, div.tab .menu a:visited {
    color: var(--primary-contrast-color);
}


.menu-item {
    font-size: 10pt;
}

div.app {
    color: var(--secondary-contrast-color);
}

div.app-content {
    background-color: var(--secondary-color);
}

h1.section-title {
    color: var(--secondary-contrast-color);
}

.app-dialog {
    color: var(--secondary-contrast-color);
}

div.text-container {
    color: var(--dark-text-color);
}

#app\.agreements .text-container {
    background-color: var(--light-background-color);
}

#app\.workspace\.show\.content {
    color: var(--light-text-color);
    background-color: var(--dark-background-color);
}

.app-workspace-editor h3 {
    color: var(--label-color);
}

#app\.workspace\.show\.content textarea, select,
#app\.workspace\.show\.content input[type='text'],
#app\.workspace\.show\.content input[type='email'],
#app\.workspace\.show\.content input[type='url'],
#app\.workspace\.show\.content input[type='password'],
#app\.workspace\.show\.content input[type='number'],
#app\.workspace\.show\.content input[type='date'] {
    color: var(--dark-text-color);
    border: solid 1px var(--off-white);
}

.tooltip .tooltiptext {
    color: var(--black);
    background-color: var(--highlight-color);
}

.editor-classification > div {
    border-top: solid 5px var(--highlight-color);
}

.editor-classification li.add {
    background-color: var(--light-background-color);
}

li.add a, li.add a:visited, li.add a:hover {
    color: var(--highlight-color);
}

div.app-navigation a, div.app-navigation a:hover, div.app-navigation a:visited {
    color: var(--black);
}

div.help a {
    background-color: var(--primary-color);
}

.carousels {
    padding-bottom: 200px;
}

.small-carousel .overlay h3 {
    color: var(--light-text-color);
}

.editor-top span.value {
    color: var(--highlight-color);
}

div.franchise-meta {
    color: var(--white);
}

.carousel-item-detail {
    background-image: none !important;
    background-color: var(--primary-color);
}

.carousel-item-detail-header h3, .carousel-item-detail-info p {
    color: var(--primary-contrast-color);
}

.carousel-item-detail-info {
    background-image: linear-gradient(to right, var(--carousel-detail-bg-right) 40%, var(--carousel-detail-bg-left));
}

.cancel a, .cancel a:hover, .cancel a:visited {
    color: var(--highlight-color);
}

.app .editor-group-header {
    border-top: solid 3px var(--off-white);
}

.app .editor-group-icon {
    color: var(--off-white);
}

.app .image-container {
    border-color: var(--secondary-color);
}

.app .image-actions {
    color: var(--light-link-color);
}

.app .label {
    color: var(--label-color);
}

.wizard .label {
    color: var(--dark-text-color);
}

.app textarea, .app select, .app input[type='text'], .app input[type='email'], .app input[type='url'], .app input[type='password'], .app input[type='date'] {
    border-color: var(--off-white);
    color: var(--light-text-color);
}

.wizard textarea, .wizard select, .wizard input[type='text'], .wizard input[type='email'], .wizard input[type='url'], .wizard input[type='password'], .wizard input[type='date'] {
    border-color: var(--highlight-color);
    color: var(--dark-text-color);
}

.hero-poster {
    max-height: 100%;
    max-width: 100vw;
}

.hero-poster img {
    max-height: 692px;
    object-fit: contain;
}

.hero-content {
    position: absolute;
    top: 100px;
    left: 50%;
    width: 40%;
    color: var(--primary-contrast-color);
    background-color: var(--primary-color);
    border: solid 3px var(--highlight-color);
    padding: 50px;
}

.hero-content h1 {
    color: var(--primary-contrast-color);
    margin-top: 0;
    padding: 0;
}

.hero-content p {
    font-size: 14pt;
}


#dialog\.login\.body {
    align-items: center;
}

#login\.apple {
    height: 50px;
    width: 200px;
    justify-content: center;
}

#appleid-signin {
    display: flex;
    height: 45px;
    background-color: black;
    width: 195px;
}

#login\.google {
    height: 50px;
    margin: 5px 5px 10px 5px;
    justify-content: center;
}


button {
    display: flex;
    border: solid 2px var(--off-white);
    color: var(--primary-button-contrast);
    background-color: var(--primary-button-color);
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    border-radius: 8px;
    font-size: 1em;
    padding: 7px 15px 7px 15px;
}

button:hover {
    color: var(--dark-text-color);
    background-color: var(--off-white);
    border-color: var(--primary-color);
}


button.supports-google {
    background: none;
    border: none;
    padding: 0;
}

button.supports-google img {
    object-fit: contain;
    max-height: 50px;
    max-width: 200px;
}

button:disabled {
    background-color: var(--gray);
    color: var(--dark-text-color);
    border: solid 2px var(--primary-color);
    opacity: .5;
}

div.mainContainer {
    padding-bottom: 300px;
}

@media only screen and (max-width: 768px) {
    .heroes {
        min-height: auto;
    }
}

@media only screen and (max-width: 480px), only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
    div.navigation-tabs {
        color: var(--primary-color);
    }

    div.ad-space {
        background-color: var(--primary-contrast-color);
    }

    div.tab .menu {
        /* width: 250%; */
        flex-direction: column;
    }

    #footer {
        top: calc(100% - 150px);
        height: 150px;
    }

    #footer\.avatar {
        display: flex !important;
    }

    #footer\.avatar img {
        max-width: 100%;
    }
}

input:focus, select:focus, button:focus, textarea:focus, .sysdialog a:focus, div[role="button"]:focus {
    outline: dashed 2px var(--highlight-color);
}

@media only screen and (min-width: 320px) and (max-width: 775px) {
    #profile\.menu {
      width: 280px;
      left: 30px;
    }
}

@media only screen and (max-width: 480px) {
#menu\.genre {
    padding-left: 75px;
}

div .tab .menu {
    top: 27px;
}

div .tab .menu:last-child {
    left: -150px;
}

div.navigation-tabs {
    display: flex;
    flex-direction: column;
}

div.navigation-tabs .navigation-title {
    width: 100%;
    color: white;
}
}