/* main.css

Standard CSS for WCMS implementation.  This pulls in the font overrides,
and provides any additional CSS that is required everywhere.

*/

/* Include links to our copy of WCMS fonts */
@import "/wcms/fonts.css";

@import "fix.css";

:root {
    --demo-bar-width: 5rem;
}

.odsy-page_wrapper {
    margin-inline: auto;
    max-width: var(--layout-max-width);
    padding-inline: 10px;
}
@media screen and (min-width: 63.1875rem) {
    body.wcms-fullwidth .uw-site--main {
        /* Allow main page to take over full width of screen */
        max-width: none;
    }

    body.wcms-fullwidth .uw-section--inner {
        /* Allow footers to take over full width of screen */
        max-width: none;

        /* Restore side padding for site footers */
        padding: 0 .8rem;
    }

    /* Restore to WCMS values padding that should *not* be overridden by our setting above */
    body.wcms-fullwidth .uw-header--global .uw-section--inner {
        padding: 0 0 0 .8rem;
    }
    body.wcms-fullwidth .uw-header--banner__alt .uw-section--inner,
    body.wcms-fullwidth .uw-site--colors .uw-section--inner,
    body.wcms-fullwidth .uw-site--watermark .uw-section--inner {
        padding: 0;
    }

    body.wcms-fullwidth .uw-site-navigation {
        /* Maximum menu width should be normal WCMS menu width.  This is calculated as 63.1875rem * 23.64621%.  The first number is the minimum screen width for the widest WCMS responsive display mode, while the second is the width specified for .uw-site-navigation.  This actually gives a width 0.25 narrower than in the regular WCMS template. */
        max-width: 14.94144894375rem;
    }
    body.wcms-fullwidth .odsy-page_wrapper {
        max-width: none;
        padding-inline: 10px;
    }
    body.wcms-fullwidth form {
        max-width: none;
    }
}
.odsy-remove-padding {
    padding-inline: 0px;
    margin-inline: 0px;
    max-width: none !important;
}
select {
    color: var(--gray-7);
    background-image: none;
    appearance: auto;
    width: auto;
}
input {
    color: var(--gray-7);
}

.odsy-demo-bar {
    background: var(--uw-gold-primary);
    color: var(--uw-gold-footer);
    flex: none;
    height: 100%;
    position: fixed;
    width: var(--demo-bar-width);
    z-index: 10; /* move above all other elements on the page*/
}

.odsy-demo-text {
    font-size: 4rem;
    left: calc(var(--demo-bar-width) / 2);
    letter-spacing: 0.5rem;
    padding-inline-start: 0.5rem; /* offset effects of extra space added at the end of the word by letter-spacing (re-centers the word)*/
    position: fixed;
    top: 50%;
    transform:
        translate(-50%, -50%)
        rotate(-90deg);
}

.odsy-demo-bar-page-wrapper {
    display: flex;
    flex-direction: row;
}

/* Fixes main page getting cut off when content is wrapped in flex box to show demo bar */
.odsy-demo-bar-page-wrapper > :last-child {
    width: 100%;
}

/* this ensures that space is made for the demo bar on the page as the bar is 'fixed' and does not make space for itself, it will end up cutting off text without this */
.odsy-demo-bar-wrapper {
    width: var(--demo-bar-width); /* Must be the same width as the demo bar */
    flex: none;
}