/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+                    WARNING:    DO NOT UPDATE OR CHANGE THIS FILE                    +
+     IF YOU WANT MODIFY THESE STYLES PLEASE USE THE OVERRIDE FILE IN YOUR CSS_SITE   +
+     FOLDER, UPDATES TO THESE STYLES DELETED UPON NEXT TEMPLATE UPGRADE              +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*-- show hide-me objects in edit mode --*/
.hide-me .overlay-content *, .hide-me .data-content *, div:not([id*='grid-']).hide-me {
    display: grid !important;
}

.visually-hidden, .sr-only, .off-screen
/* -- keep text for screen readers but hidden for display -- */ {
    position: absolute;
    clip: rect(0px, 0px, 0px, 0px);
    overflow: hidden;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    border: 0;
    color: #fff;
    background-color: #000;
}

/* Site Setup Interface Standards */
body.setup {
    background-color: var(--titan-blue);
    color: var(--titan-blue-text);
    margin: 0px;
    font-size: var(--font-size-body);
    font-family: var(--font-family);
}

    body.setup #SiteName_Tabs h1 {
        font-size: var(--font-size);
        margin: 0px;
        padding: 0px;
        line-height: unset;
        text-transform: uppercase;
    }

    body.setup p {
        line-height: var(--font-size-larger);
    }

    body.setup h2 {
        color: inherit;
    }

    body.setup #edit-current {
        margin: 0px;
    }

#main-content input:focus, #main-content select:focus, #main-content select:focus-within {
    outline: solid 2px var(--orange) !important;
    outline-offset: .4em;
}

.content-preview {
    display: grid;
    gap: 10px;
    padding: 10px;
}

.col-1 {
    display: grid;
    grid-template-columns: 1fr;
}

.col-2-25-75 {
    display: grid;
    grid-template-columns: minmax(250px, 1fr) 4fr;
}

.col-2-75-25 {
    display: grid;
    grid-template-columns: 4fr minmax(250px, 1fr);
}

.col-2-50 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.col-2-65-auto {
    display: grid;
    grid-template-columns: 65px auto;
}

.col-2-60-40 {
    display: grid;
    grid-template-columns: 6fr 4fr;
}

.col-3-40-30-30 {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
}

.col-AF-350 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

.span-2 {
    grid-column: span 2;
}

.span-3 {
    grid-column: span 3;
}

.span-4 {
    grid-column: span 4;
}


.content-preview section {
    padding: 5px;
    border-radius: var(--border-radius-small);
}

body.setup .setup-banners img {
    max-width: 100%;
    height: auto;
}

.content-preview ul {
    margin-left: 30px;
}

section.setup-info {
    background-color: var(--cloud);
    color: var(--cloud-text);
}

    section.setup-info ul {
        margin-left: 0px;
    }

body.setup button.active {
    background-color: var(--medium-blue);
    color: var(--medium-blue-text);
    cursor: pointer;
}

body.setup .title {
    font-weight: bold;
    border-bottom: solid 1px var(--dark-gray);
    margin-bottom: 15px;
}


.ou-instruction-block ul {
    margin-left: 0px;
    padding-left: 30px;
}

.ou-instruction-block p, .ou-instruction-block li {
    margin: 0px;
    padding: 10px 5px;
}

.setup-instructions {
    font-size: var(--font-size-small);
    padding: 0px;
    margin: 0px;
    margin-bottom: 5px;
    border-bottom: solid 1px var(--gray);
}

.setup-directions {
    font-size: var(--font-size-reduced);
    padding: 8px;
    margin: 0px;
    margin-bottom: 5px;
}


.setup-selector {
    display: grid;
    gap: 15px;
    padding: 15px 4px;
    margin: 0px;
}

    .setup-selector li {
        display: block;
        margin: 0px;
        padding: 0px;
    }

        .setup-selector li button {
            width: 100%;
            border: solid 1px var(--gray);
            padding: 8px;
            background-color: var(--light-gray);
            color: var(--light-gray-text);
        }

            .setup-selector li button:hover {
                background-color: var(--medium-blue);
                color: var(--medium-blue-text);
                cursor: pointer;
            }

        .setup-selector li.title {
            border-bottom: solid 1px var(--light-gray);
            font-size: var(--font-size-small);
            margin: 0px;
        }

.preview-content, .edit-content {
    padding: 10px;
    margin: 0px 15px 15px 15px;
    border: solid 3px var(--cloud);
    background-color: var(--white);
    color: var(--white-text);
    display: grid;
    border-radius: var(--border-radius);
}

.edit-content {
    place-items: unset;
}

.use-yes {
    color: var(--green);
}

.use-no {
    color: var(--brick-red);
}

.sticky-top {
    position: sticky;
    top: 0px;
}

.help-instructions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

    .help-instructions article {
        background-color: var(--light-gray);
        color: var(--light-gray-text);
        border: solid 1px transparent;
    }

        .help-instructions article:hover {
            background-color: var(--off-white);
            color: var(--off-white-text);
            border: solid 1px var(--light-gray);
        }

    .help-instructions p {
        margin: 0px;
        margin-bottom: 5px;
        padding: 4px;
    }

        .help-instructions p.title {
            background-color: var(--gray);
            color: var(--gray-text);
            margin: 0px;
            margin-bottom: 2px;
            padding: 5px;
        }

    .help-instructions ul {
        margin: auto;
        margin-left: 50px;
        padding: initial;
        box-sizing: border-box;
    }
/*--------------------------------
    MODERN CAMPUS INTERFACE UPDATE
*/
#cms-inline-editor-id .tox-form__controls-h-stack:has(input[type="url"]), .tox-form__controls-h-stack:has(input[type="url"]) {
    margin-bottom: 30px;
    position: relative;
}

    #cms-inline-editor-id .tox-form__controls-h-stack:has(input[type="url"]):after, .tox-form__controls-h-stack:has(input[type="url"]):after {
        position: absolute;
        bottom: -30px;
        height: 25px;
        font-size: var(--font-size-small);
        content: "No direct links to staging servers (e.g. https://itwebstg...)";
    }


/*---------------
Site-wide Redirect list
*/
#redirect-table table {
    padding: 0em;
    font-size: var(--font-size);
    background-color: var(--my-white);
    color: var(--my-white-text);
    border: solid 1px var(--primary);
    width: 90%;
    margin: auto;
}

    #redirect-table table th {
        padding: 1em;
        font-size: var(--font-size-large);
        background-color: var(--primary);
        color: var(--primary-text);
    }

    #redirect-table table td {
        padding: .8em;
        font-size: var(--font-size);
        border: solid 1px var(--border-gray);
    }


/*---------------
    PAGE SIZE PREVIEW
*/
#page-size {
    margin: auto;
    display: block;
}

    #page-size.desktop {
        max-width: unset;
    }

    #page-size.tablet {
        max-width: 1024px;
    }

    #page-size.mobile {
        max-width: 600px;
    }

header.page-header.lower-scroll {
    top: 44px;
}

/*------------
    PAGE HEADERS
*/

#header.page-landing, #header.page-presenation {
    top: 170px;
}

#header.lower-scroll {
    top: -50px;
}

/*-------------
    PAGE NAVIGATION
*/

.left-nav-editor .left-nav #left-compartment {
    position: relative;
}

#main-content.left-nav.edit-mode #main-content-shell {
    /* padding-left:260px;*/
}
/*------------
    PAGE BANNERS
*/

.edit-page-banner {
    padding: 10px;
    margin: 0px 15px 15px 15px;
    border: solid 3px var(--cloud);
    background-color: var(--white);
    color: var(--white-text);
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    border-radius: var(--border-radius);
}

    .edit-page-banner img {
        display: block;
    }

.page-banner-selector {
    grid-template-columns: 1fr 1fr;
    color: var(--cloud-text);
    position: sticky;
    top: 0px;
}

    .page-banner-selector li:nth-child(1), .page-banner-selector li:nth-child(2) {
        grid-column: span 2;
    }

    .page-banner-selector li:nth-child(1) {
        font-size: var(--font-size-reduced);
        font-weight: bold;
        text-align: center;
    }

.banner {
    font-size: var(--font-size-reduced);
    font-weight: bold;
    display: block;
}


/*------------
   SITE SETUP
*/

.site-setup-selector {
    grid-template-columns: 1fr;
    color: var(--cloud-text);
    position: sticky;
    top: 0px;
}

    .site-setup-selector li:nth-child(1) {
        font-size: var(--font-size-reduced);
        font-weight: bold;
        text-align: center;
    }

.site-settings {
    gap: 15px;
}

    .site-settings p {
        display: grid;
        align-items: center;
        grid-template-columns: 125px 1fr;
        margin-bottom: 8px;
        font-size: var(--font-size-reduced);
    }

        .site-settings p.title {
            grid-template-columns: 1fr;
            margin-bottom: 0px;
        }

    .site-settings label {
        background-color: var(--cloud);
        color: var(--cloud-text);
        padding: 5px;
        margin-right: 10px;
        font-size: var(--font-size-reduced);
    }


/*-------------------------------
   TAB NAVIGATION
*/

#div-edit-instructions {
    padding: 10px;
    box-sizing: border-box;
}


#SiteName_Tabs {
    background: var(--white);
    color: var(--white-text);
    padding: 10px;
    border-bottom: solid 4px var(--orange);
    margin-bottom: 5px;
}

#MainContent #SiteName_Tabs {
    margin-bottom: 0px;
}

.TabEditingBlock {
    background: var(--white);
    color: var(--white-text);
    position: relative;
}

.ib-option-title-button {
    display: grid;
    grid-template-columns: auto 40px;
    gap: 10px;
    width: 100% !important;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

    .ib-option-title-button .OUSectionTitle {
        flex-basis: 100%;
    }

    .ib-option-title-button button {
        flex-basis: auto;
        font-size: var(--font-size);
        background-color: var(--primary);
        color: var(--primary-text);
        cursor: pointer;
        border-radius: var(--border-radius-small);
        border: solid 1px var(--border-gray);
        height: 44px;
        width: 44px;
    }

        .ib-option-title-button button i {
            font-size: var(--font-size-large);
            background-color: var(--primary);
            color: var(--primary-text);
        }

        .ib-option-title-button button:hover, .ib-option-title-button button:hover i {
            background-color: var(--primary-text);
            color: var(--primary);
        }

#navMain.preview, #navSecondary.preview {
    float: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 10px;
    background-color: var(--primary);
    color: var(--primary-color);
    border: none;
    padding: 8px;
}

    #navMain.preview div.nav-item,
    #navSecondary.preview div.nav-item {
        background-color: var(--default);
        color: var(--default-text);
        padding: 15px;
        border-radius: var(--border-radius-small);
    }

.nav-item {
    border: solid 3px var(--light-gray);
}

.extended-navigation-full p.headline {
    padding-top: 15px;
    position: relative;
}

    .extended-navigation-full p.headline:before {
        content: "[ Title ]";
        position: absolute;
        top: 0px;
        left: 0px;
        font-size: var(--font-size-small);
        text-align: center;
        text-transform: capitalize;
        font-weight: 800;
    }

.extended-navigation-full p.no-show {
    text-decoration: line-through;
    padding-top: 15px;
    position: relative;
}

    .extended-navigation-full p.no-show:not(:last-child):before {
        content: "[Requires Link, or Title Style]";
        position: absolute;
        top: 0px;
        left: 0px;
        font-family: var(--font-family);
        font-size: var(--font-size-reduced);
        color: var(--alert-red-dark);
    }

.extended-navigation-full > p:empty:not(:last-child):not(i):not(div) {
    border: 2px solid var(--alert-red-dark);
    height: 15px;
    padding: 4px;
}

    .extended-navigation-full > p:empty:not(:last-child):not(i):not(div):before {
        content: "Empty Element Found";
        padding: 4px;
    }

:not(.mobile) #main-nav .main-tab.active .extended-navigation,
:not(.mobile) #main-nav .main-tab.pinned .extended-navigation,
:not(.mobile) #main-nav .main-tab:focus-within .extended-navigation {
    /* in edit mode we disable drop down menu to help with editing content, the dropdowns
        were getting in the way
    */
    display: none;
}

.not-visible {
    border: solid 3px var(--alert-red);
}

.extended-nav-header {
    margin-top: 15px;
}

.hidden-tab {
    padding: 4px;
    color: var(--warm-gray-text);
    border-radius: var(--border-radius);
    text-align: right;
    font-size: var(--font-size-small);
}

.tab-status {
    font-size: var(--font-size-small);
}

.tab-editing-title {
    font-size: var(--font-size-small);
    color: var(--warm-dark-gray);
    background-color: var(--cloud);
}

.tab-selector {
    grid-template-columns: 1fr;
    color: var(--cloud-text);
    position: sticky;
    top: 0px;
}

    .tab-selector li:nth-child(1) {
        font-size: var(--font-size-reduced);
        font-weight: bold;
        text-align: center;
    }

.tab-message {
    font-size: var(--font-size-reduced);
    font-weight: bold;
}

#btnMode.light i, #btnMode.dark i {
    font-size: var(--font-size);
    padding: 3px;
    border: solid 1px var(--coal);
    border-radius: var(--border-radius);
}

#btnMode.light i {
    background-color: var(--sunshine);
    color: var(--sunshine-text);
}

#btnMode.dark i {
    background-color: var(--coal);
    color: var(--coal-text);
}

#span-max-width, #span-min-width, #span-current-width {
    font-size: var(--font-size-small);
    padding: 4px;
    margin: 0px 8px;
}

#span-current-width {
    margin-left: 50px;
}

.setup.tablet header #navigation,
.setup.mobile header #navigation {
    opacity: 1;
    height: unset;
    margin-top: .6rem;
    pointer-events: unset;
}

/*----------------------------
    SITE WIDE CONTENT
*/

.help-instructions.site-wide {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

    .help-instructions.site-wide article:first-child {
        grid-row: span 2;
        border: solid 1px var(--gray);
    }

    .help-instructions.site-wide article.full-wide {
        grid-column: span 2;
    }

.setup #workspace #setup-info .sticky-top > h2,
.setup #workspace #edit-setup-workspace > h2 {
    font-size: var(--font-size);
    padding: 0px;
    padding-bottom: 5px;
    margin: 0px;
}

#block-container {
    padding: 10px;
}

.site-wide-preview-outline {
    border: solid 1px var(--light-gray);
}

#multi-block-options {
    grid-template-columns: repeat(4, 1fr);
}

    #multi-block-options li:first-child {
        grid-column: span 4;
    }

    #multi-block-options li:last-child {
        grid-column: span 2;
    }

#link-style-options {
    grid-template-columns: 1fr 1fr;
    align-items: center;
}

    #link-style-options li:first-child {
        grid-column: span 2;
    }

#gap-style-options {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

    #gap-style-options li:first-child {
        grid-column: span 4;
    }

#txtLayoutStyle {
    min-width: 230px;
    width: 75%;
    padding: 8px;
}

.site-wide-preview-outline > h2,
.site-wide-preview-outline .setup-instructions,
.site-wide-preview-outline .tab-editing-title {
    display: none;
}

.setup-content.side-bar #block-container {
    max-width: 230px;
}

/*---------------------
    PAGE STRUCTRUAL STUFF
*/
/* getting rid of lower scroll header within edit mode */
header .LowerScroll {
    display: none;
}

/*----------
    OU EDIT BUTTON FIXES
*/
[class*="card"]:not([class*="fa-"]) .ou-icon-pencil,
.ou-icon-pencil {
    background: inherit !important;
    background-color: inherit !important;
    color: inherit !important;
    display: inline-block !important;
}

/*-- glass button fixes --*/
a[class*='glass-button'] {
    /*  color: var(--my-black) !important;*/
    text-shadow: none;
}


/*--------------------------
    OU EDITING FIXES FOR EDITING CONTENT
*/

.ou-justedit-region.mce-content-body.mce-edit-focus *,
[class*='card-']:not([class*='fa-']) *:not([class*="button"]):not(i) .ou-justedit-region.mce-content-body.mce-edit-focus *,
div[id*='box'][class*='stock-'] .content-overlay *:not([class*="button"]):not(i) .ou-justedit-region.mce-content-body.mce-edit-focus * {
    color: unset !important;
    background-color: unset !important;
    text-shadow: none !important;
}

.ou-justedit-region.mce-content-body.mce-edit-focus h1,
div[id*='box'][class*='stock-'] .grid-item .overlay-content *.ou-justedit-region.mce-content-body.mce-edit-focus h1,
div[id*='box'][class*='stock-'] div[id*='div'] .overlay-content *.ou-justedit-region.mce-content-body.mce-edit-focus h1 {
    color: var(--medium-blue) !important;
}

.ou-justedit-region.mce-content-body.mce-edit-focus h2,
div[id*='box'][class*='stock-'] .grid-item .overlay-content *.ou-justedit-region.mce-content-body.mce-edit-focus h2,
div[id*='box'][class*='stock-'] div[id*='div'] .overlay-content *.ou-justedit-region.mce-content-body.mce-edit-focus h2 {
    color: var(--medium-blue) !important;
}

.ou-justedit-region.mce-content-body.mce-edit-focus h3,
div[id*='box'][class*='stock-'] .grid-item .overlay-content *.ou-justedit-region.mce-content-body.mce-edit-focus h3,
div[id*='box'][class*='stock-'] div[id*='div'] .overlay-content *.ou-justedit-region.mce-content-body.mce-edit-focus h3 {
    color: var(--my-black) !important;
}

.ou-justedit-region.mce-content-body.mce-edit-focus *:not(h1):not(h2):not(h3),
div[id*='box'][class*='stock-graphic'] .grid-item .overlay-content *.ou-justedit-region.mce-content-body.mce-edit-focus *:not(h1):not(h2):not(h3) {
    color: var(--my-white-text) !important;
    background-color: var(--my-white) !important;
}

/*------------------------------------------------------
    PAGE EDIT MODE HEADER
*/
.edit-header {
    background-color: var(--white);
    color: var(--white-text);
    border-top: solid 2px var(--orange);
    border-bottom: solid 1px var(--light-dialog);
    padding: 10px;
}

    .edit-header h1, .edit-header h2 {
        font-size: var(--font-size);
        text-transform: unset;
        margin-bottom: unset;
        padding: 5px;
    }

h1.component-title {
    background-color: var(--titan-blue);
    color: var(--titan-blue-text);
    font-size: var(--font-size-large);
    margin: 0px;
    padding: 8px;
}


/*---------------------------------------------------------------------------
    Verison 5 Page Manager*/
#secPageManagerHolder {
    position: -webkit-sticky;
    position: sticky;
    top: 4px;
    height: 54px;
    width: 100%;
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-size: 16px;
    z-index: 214748364699999;
}

#divPageManager {
    position: relative;
    display: grid;
    grid-template-columns: auto auto auto auto auto auto 2px auto;
    gap: 6px;
    align-content: center;
    align-items: center;
    height: 50px;
    width: calc(100% - 12px);
    margin: 4px 8px;
    padding: 0px;
    box-sizing: border-box;
    border: solid 1px var(--border-gray);
    /*background: var(--gradient-white);*/
    background: linear-gradient(to bottom, #ffffff 0%,#f3f3f3 69%,#f3f3f3 89%,#f3f3f3 89%,#ededed 100%);
    color: var(--gradient-white-text);
    box-shadow: var(--box-shadow-down);
    border-radius: var(--border-radius-small);
    font-size: 16px;
    z-index: 10;
}

    #divPageManager:hover, #divPageManager.active {
        background-color: var(--secondary);
        color: var(--secondary-text);
    }

.pm-fails {
    display: none;
}

#divPageManager .issue-count {
    background-color: var(--my-white);
    color: var(--my-white-text);
    border: solid 1px var(--secondary);
    padding: 6px;
    margin: 0px 5px;
    border-radius: 100%;
    text-align: center;
    display: grid;
    align-content: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
}

#divPageManager:hover .issue-count, #divPageManager.active .issue-count {
    border-radius: 50%;
    background-color: var(--secondary-text);
    color: var(--secondary);
}

#divPageManager.problem {
    background-color: #97321F;
    color: #fff;
}

    #divPageManager.problem:hover {
        background-color: #9D3520;
        color: #fff;
    }

#btnPageManager {
    background: transparent;
    color: var(--my-black);
    border: 0px;
    border-right: solid 1px var(--border-gray);
    cursor: pointer;
    text-align: left;
    width: max-content;
    padding: .2em .95em;
    border-top-left-radius: var(--border-radius-small);
    border-bottom-left-radius: var(--border-radius-small);
}

#divPageManager #btnPageManager:hover, #divPageManager #btnPageManager:focus {
    background: var(--gradient-1);
    color: var(--graident-1-text);
}

#divPageManager button, #divPageManager input, #divPageManager select {
    font-size: 1em;
    height: 50px;
}

#btnPageManagerFull {
    margin-top: 4px;
}

#basicScan {
    color: var(--my-black);
    font-size: var(--font-size-reduced);
}

#secATIScan {
    position: relative;
}

#divFullScanInfo {
    display: none;
}

#secATIScan.active button {
    background-color: var(--orange-hover);
    color: var(--orange-hover-text)
}

#secATIScan.active #divFullScanInfo {
    position: absolute;
    top: 51px;
    min-width: 570px;
    width: fit-content;
    background-color: var(--my-gray);
    color: var(--my-gray-text);
    display: flex;
    flex-direction: column;
    gap: 5px;
    border: solid 1px var(--border-gray);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    padding: 6px 18px;
    box-shadow: var(--box-shadow-down);
}

    #secATIScan.active #divFullScanInfo p {
        flex: 1 1 auto;
        margin: 3px;
        padding: 0px;
    }

    #secATIScan.active #divFullScanInfo .scan-info {
        flex-basis: 100%;
    }

    #secATIScan.active #divFullScanInfo a[class*='button-'] {
        display: flex;
        flex-direction: row;
        gap: 5px;
        align-items: baseline;
        flex: 1 1 auto;
        width: 80%;
        justify-content: center;
    }

#divPageManager #btnPageManagerFull {
    float: left;
    background-color: transparent;
    border: 0px;
    color: #fff;
}

#pPageManagerTitle, #pGoLiveStatus {
    float: left;
    margin-right: 5px;
}

#divGoLiveStuff {
    float: right;
    margin-right: 5px;
    width: auto;
}

#GoLiveStatusOptions {
    background-color: #f7f7f7;
    color: #222;
    border-radius: 2px;
    padding: 15px;
    box-sizing: border-box;
    list-style-type: none;
    margin: 0px;
    position: fixed;
    top: 28px;
    right: 10px;
    display: none;
}

    #GoLiveStatusOptions li {
        height: 28px;
        margin-bottom: 8px;
    }

#divPageManager button#btnChangeGoLive {
    border: 0px;
    font-size: 16px;
    width: 30px;
    text-align: center;
    color: #fff;
    background-color: transparent;
    float: left;
}

#btnPageManagerFull {
    font-size: 16px;
}

.alert {
    display: block;
    background-color: var(--alert-red);
    color: var(--alert-red-text);
    padding: 8px;
    border-radius: var(--border-radius-small);
}

.msg-reload-page button,
.ou-editor-workspace-setup .msg-reload-page button {
    display: inline;
    background-color: var(--alert-red-dark);
    color: var(--alert-red-dark-text);
    padding: 10px;
    border: solid 1px var(--alert-red-dark-text);
}


.pm-feature {
    position: fixed;
    display: grid;
    grid-template-columns: 250px auto;
    gap: 0px;
}

    .pm-feature.active {
        display: grid;
    }

    .pm-feature.hide {
        transform: rotateX(90deg);
        height: 0px;
        transition: transform var(--transition-time) ease-in-out;
    }

    .pm-feature.active {
        transform: rotateX(0deg);
        /*height: auto;*/
        width: 100vw;
        transition: transform var(--transition-time) ease-in-out;
        transform-origin: top center;
    }

.pm-menu {
    width: 250px;
    background-color: var(--default);
    color: var(--default-text);
    padding: 0px;
    box-sizing: border-box;
    height: calc(100vh - 50px);
    overflow-y: auto;
}

    .pm-menu .headline {
        background-color: var(--dialog);
        color: var(--dialog-text);
        padding: 4px;
        margin: 0px;
        font-size: var(--font-size);
        text-transform: uppercase;
    }

.pm-work {
    width: calc(100% - 30px);
    height: calc(100vh - 50px);
    overflow-y: auto;
    background-color: var(--default);
    color: var(--default-text);
    border: solid 1px var(--border-gray);
    box-shadow: 0 0 4px rgba(0,0,0, .8);
}

.pm-backgrounds {
    background-color: var(--light-gray);
    color: var(--light-gray-text);
    border-left: solid 2px var(--dark-warm-gray);
    border-bottom: solid 2px var(--dark-warm-gray);
    border-bottom-left-radius: var(--border-radius);
    width: 400px;
    padding: 10px;
    padding-top: 0px;
    height: calc(100vh - 60px);
    grid-template-columns: 1fr;
    right: 0px;
}

    .pm-backgrounds.active {
        width: 400px;
        right: 0px;
        top: 58px;
        z-index: 2099999999999;
        align-content: start;
    }

.background-work-title-close {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
}

    .background-work-title-close p {
        margin: 0px;
    }

.background-stock,
.background-close {
    text-align: right;
}

    .background-stock button,
    .background-close button {
        height: 30px;
        cursor: pointer;
    }

#div-bg-holders {
    position: absolute;
    top: 50px;
    left: 2%;
    width: 96%;
    height: calc(100% - 7px);
}

#div-stockphoto-gallery {
    position: absolute;
    top: 0px;
    right: 400px;
    width: 0;
    height: 90vh;
    transform: rotateY(90deg);
    transform-origin: right center;
    z-index: 0;
    border-bottom-left-radius: var(--border-radius);
    background-color: var(--cloud);
    color: var(--cloud-text);
    padding: 8px;
    border: solid 2px var(--dialog);
    opacity: 0;
    transition: opacity var(--transition-time-fast) ease-in-out, transform var(--transition-time-fast) ease-in-out;
}

    #div-stockphoto-gallery.active {
        right: 400px;
        width: 65vw;
        height: 93vh;
        opacity: 1;
        transform: rotateY(0deg);
        transition: transform var(--transition-time) ease-in-out, opacity var(--transition-time-slow) ease-in;
    }


    #div-stockphoto-gallery .directory-filter {
        top: 65px;
    }

#stockphoto-ajax-dir-data {
    overflow-y: auto;
    height: calc(75vh);
}

#btnStockPhotoGallery.active {
    background-color: var(--secondary);
    color: var(--secondary-text);
    border: solid 1px var(--dark);
}

.pm-backgrounds p.section-header {
    background-color: var(--light-gray);
    color: var(--light-gray-text);
    padding: 10px;
    font-weight: bold;
}

.pm-backgrounds .tabbed-content-buttons-section {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 5px;
}

    .pm-backgrounds .tabbed-content-buttons-section button {
        border: 0px;
        border-radius: 0px;
        border-bottom: 6px;
        background-color: var(--warm-gray);
        color: var(--warm-gray-text);
        border-color: var(--warm-gray);
        padding: 8px;
        margin: 0px 4px;
        font-size: var(--font-size-reduced);
        cursor: pointer;
    }

        .pm-backgrounds .tabbed-content-buttons-section button.active {
            background-color: var(--primary);
            color: var(--primary-text);
            border-color: var(--primary);
        }

.pm-backgrounds .details-section {
    border-top: solid 2px var(--primary);
    margin: 0px;
    padding: 5px;
    height: calc(100% - 90px);
    overflow-y: auto;
}

.pm-backgrounds details {
    display: none;
}

    .pm-backgrounds details.active {
        display: block;
    }

    .pm-backgrounds details summary {
        font-size: var(--font-size-reduced);
        padding: 10px;
    }

#stockphoto-ajax-data-filter details {
    display: block;
}

[id*='stockphoto-'] .app-filter ul {
    max-height: 350px;
    overflow: auto;
}

    [id*='stockphoto-'] .app-filter ul li {
        flex-basis: 99%;
    }

.background-css, .background-desktop, .background-mobile {
    margin: 5px;
}

    .background-css:last-child, .background-mobile {
        padding-bottom: 5px;
        border-bottom: solid 1px var(--warm-gray);
    }

.pm-backgrounds img {
    max-width: 100%;
    height: auto;
}

#secPageSize {
    display: grid;
    align-content: center;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

    #secPageSize button {
        border: solid 1px var(--dark-gray);
        background-color: var(--gray);
        border-radius: var(--border-radius-small);
        width: 50px;
        height: 30px;
    }

        #secPageSize button:nth-child(1), #secPageSize button:nth-child(2) {
            border: solid 1px var(--secondary);
            background-color: var(--titan-blue);
            color: var(--titan-blue-text);
        }

        #secPageSize button:hover, #secPageSize button.active {
            border: solid 1px var(--light-gray);
            background-color: var(--orange-hover);
            color: var(--orange-hover-text);
            cursor: pointer;
        }

/*--------------------------------------------------------------------------
    CSS BUILDER
*/

.pm-css-builder {
    background-color: var(--light-gray);
    color: var(--light-gray-text);
    border-right: solid 2px var(--dark-warm-gray);
    border-bottom: solid 2px var(--dark-warm-gray);
    border-bottom-right-radius: var(--border-radius);
    width: 400px;
    padding: 10px;
    padding-top: 0px;
    height: calc(100vh - 65px);
    grid-template-columns: 1fr;
    left: 0px;
}

    .pm-css-builder.hide {
        transform: rotateX(90deg);
        height: 0px;
        transition: transform var(--transition-time) ease-in-out;
    }


    .pm-css-builder.active {
        width: 400px;
        left: 0px;
        top: 58px;
        z-index: 2099999999999;
        transform: rotateX(0deg);
        transition: transform var(--transition-time) ease-in-out;
        transform-origin: top center;
        align-content: start;
    }

    .pm-css-builder p.section-header {
        font-weight: bold;
        padding: 10px;
        margin: 0px;
    }

        .pm-css-builder p.section-header span {
            font-size: var(--font-size-small);
            text-transform: uppercase;
            text-align: right;
        }

.css-builder-button-group {
    margin: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

    .css-builder-button-group button {
        height: 34px;
        width: 100%;
        border-radius: var(--border-radius-small);
        border: solid 1px var(--medium-blue);
        background-color: var(--medium-blue);
        color: var(--medium-blue-text);
    }

        .css-builder-button-group button:hover, .css-builder-button-group button.active {
            border: solid 1px var(--light-gray);
            background-color: var(--white);
            color: var(--white-text);
            cursor: pointer;
        }

.layout-catalog-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: center;
}

    .layout-catalog-gallery button {
        height: 30px;
        cursor: pointer;
    }

#div-layout-preview-tools p {
    margin: 0px;
}

#div-layout-preview-tools label {
    font-size: var(--font-size-reduced);
    font-weight: 600;
}

#preview-layout-css {
    width: 100%;
    min-height: 60px;
}

.divider-line {
    border-bottom: solid 1px var(--coal);
    margin-bottom: 15px;
    padding-bottom: 15px;
}

#div-layout-preview-holder {
    position: relative;
}

    #div-layout-preview-holder .grid-item,
    #divCSSBuilderOptions .grid-item {
        padding: 1px;
    }

#div-layout-gallery {
    position: absolute;
    left: 390px;
    width: 0px;
    height: 55vh;
    background-color: var(--information);
    color: var(--information-text);
    top: -40px;
    padding: 0px;
    overflow-y: hidden;
    border-bottom-right-radius: var(--border-radius);
    border: solid 4px var(--information-border);
    border-left: 0px;
    z-index: 1;
}

    #div-layout-gallery.active {
        width: 815px;
        left: 390px;
        height: 90vh;
        padding: 5px 10px;
        padding-top: 0px;
        border-top: 0px;
        transition: all var(--transition-time) ease-in-out;
        z-index: 7;
    }

.gallery-layout-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.gallery-layout-preview {
    background-color: var(--beige);
    padding: 15px;
    border: solid 1px var(--gray);
    display: grid;
    align-items: end;
    justify-content: center;
}

.gallery-meta-data {
    display: none;
}

.gallery-layout-box {
    padding: 4px;
    border: solid 1px var(--dark-warm-gray);
    background-color: var(--light-gray);
    margin-bottom: 5px;
    display: grid;
    min-height: 110px;
}


.gallery-layout-div {
    min-height: 15px;
    height: auto;
    background-color: var(--white);
    color: var(--white-text);
    margin: 2px;
    border: solid 1px var(--dark-gray);
}

.gallery-layout-copy-button {
    text-align: center;
    display: grid;
    align-content: center;
}

    .gallery-layout-copy-button button {
        background-color: var(--light-blue);
        color: var(--light-blue-text);
        cursor: pointer;
        border-radius: var(--border-radius-small);
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        padding: 8px;
    }

        .gallery-layout-copy-button button:hover {
            background-color: var(--primary);
            color: var(--primary-text);
        }

#div-gallery-tools {
    height: 80px;
    width: 80%;
    margin: auto;
    padding: 5px;
    background-color: var(--ash);
    color: var(--ash-text);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border: solid 2px var(--warm-gray);
    border-top: 0px;
    display: grid;
    grid-template-columns: 2fr 2fr 1fr;
    align-items: center;
}

    #div-gallery-tools button {
        border-radius: var(--border-radius-small);
        color: var(--dark-text);
        background-color: var(--dark);
        padding: 8px;
        height: 30px;
        border: 0px;
        cursor: pointer;
        grid-row: span 2;
        align-content: start;
    }

#p-gallery-layout-search-results {
    grid-column: span 2;
    font-size: var(--font-size-small);
    background-color: inherit;
    color: inherit;
    font-weight: 800;
    padding-left: 20px;
    text-align: center;
}

#div-gallery-frame {
    margin-top: 30px;
    height: calc(85vh - 60px);
    width: 100%;
    overflow-y: auto;
}

    #div-gallery-frame.filter .gallery-layout-preview {
        display: none;
    }

        #div-gallery-frame.filter .gallery-layout-preview.active {
            display: grid;
        }

#div-layout-builder {
    position: absolute;
    left: 390px;
    width: 380px;
    height: 91vh;
    background-color: var(--cloud);
    color: var(--cloud-text);
    top: -40px;
    padding: 5px 10px;
    overflow-y: auto;
    border-bottom-right-radius: var(--border-radius);
    border: solid 2px var(--dialog);
    border-left: 0px;
    z-index: 6;
}

    #div-layout-builder p {
        margin: 0px;
    }


#div-layout-preview {
    position: absolute;
    left: 750px;
    width: 450px;
    height: 91vh;
    background-color: var(--cloud);
    color: var(--cloud-text);
    top: -40px;
    padding: 10px 20px;
    padding-left: 50px;
    overflow-y: auto;
    border-bottom-right-radius: var(--border-radius);
    border: solid 2px var(--dialog);
    border-left: 0px;
    z-index: 5;
}

    #div-layout-preview div.hide {
        display: none;
    }

    #div-layout-preview p.section-header {
        margin: 0px;
        text-align: center;
    }

    #div-layout-preview section {
        background-color: var(--light-gray);
        color: var(--warm-gray-text);
        border: solid 1px var(--warm-gray);
        padding: 10px;
        display: grid;
        gap: 3px;
        margin-bottom: 5px;
    }

    #div-layout-preview.gap-0 section {
        gap: 0px;
    }

    #div-layout-preview.gap-2 section {
        gap: 2px;
    }

    #div-layout-preview.gap-5 section {
        gap: 5px;
    }

    #div-layout-preview.gap-8 section {
        gap: 8px;
    }

    #div-layout-preview.gap-10 section {
        gap: 10px;
    }

    #div-layout-preview.gap-15 section {
        gap: 15px;
    }

    #div-layout-preview.gap-20 section {
        gap: 20px;
    }

    #div-layout-preview.gap-25 section {
        gap: 25px;
    }

    #div-layout-preview.gap-30 section {
        gap: 30px;
    }

    #div-layout-preview.gap-35 section {
        gap: 35px;
    }

.grid-container.grid-container-preview {
    gap: 2px !important;
}

#div-layout-preview section div {
    border: solid 1px var(--dialog);
    background-color: var(--off-white);
    color: var(--off-white-text);
    text-align: center;
}

#div-layout-configure-gaps {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 15px;
    border-bottom: solid 1px var(--border-gray);
}

[id*='div-layout-group'] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    gap: 5px;
    align-content: center;
    padding-top: 4px;
    padding-bottom: 4px;
}

    [id*='div-layout-group'] input[type='checkbox'] {
        float: left;
        margin-right: 8px;
        height: 20px;
        width: 20px;
        background-color: var(--medium-blue);
        color: var(--medium-blue-text);
    }

#div-choose-gaps {
    padding: 2px;
    display: flex;
    align-items: start;
    justify-content: flex-end;
    height: 100%;
    flex-wrap: wrap;
    flex-direction: column;
}

    #div-choose-gaps p {
        margin-top: auto;
        flex-basis: 100%;
        padding-top: 12px;
    }

#selGapSize {
    display: block;
    width: 100%;
    margin-top: 10px;
}

#div-layout-catalog-filter {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-content: center;
    background-color: var(--cloud);
    color: var(--colud-text);
    border: solid 1px var(--warm-gray);
    align-items: center;
    text-align: center;
    padding: 4px;
    border-radius: var(--border-radius-small);
}

[id*='div-layout-catalog-filter'] select {
    height: 30px;
    margin-left: 10px;
    background-color: var(--medium-blue);
    color: var(--medium-blue-text);
}


#divCSSBuilderOptions #ulMediaCatalog {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    padding: 0px;
    margin: 0px;
    list-style: none;
    box-sizing: border-box;
    max-height: calc(100vh - 366px);
    overflow-y: auto;
}

.pm-add-layout-button {
    background-color: var(--warm-gray);
    color: var(--warm-gray-text);
    border: 0px;
    width: 100% !important;
    margin: 0px;
    padding: 6px !important;
    cursor: pointer;
    display: block !important;
    border-bottom-left-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
}

    .pm-add-layout-button:hover {
        background-color: var(--light-blue);
        color: var(--light-blue-text);
    }

#layout-build-message {
    min-height: 60px;
    text-align: center;
}

#layout-box-build-preview {
    border: dashed 2px var(--warm-gray);
    padding: 5px;
    width: 96%;
    margin: 2%;
    min-height: 100px;
}

.alert-layout {
    border: solid 2px var(--brick-red);
}

    .alert-layout .grid-item {
        background-color: var(--alert-red);
        color: var(--alert-red-text);
    }

#ul-build-preview-layout {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

    #ul-build-preview-layout > li {
        display: grid;
        grid-template-columns: 30px 30px 1fr 30px;
        align-content: start;
        gap: 5px;
        padding-bottom: 5px;
    }

        #ul-build-preview-layout > li button {
            cursor: pointer;
            border: 0px;
            border-radius: var(--border-radius-small);
        }

            #ul-build-preview-layout > li button:hover {
                background-color: var(--light-blue);
                color: var(--light-blue-text);
            }

    #ul-build-preview-layout li.hint {
        border: solid 1px var(--green);
    }

    #ul-build-preview-layout li.active {
        border: solid 1px var(--orange);
    }

#layout-update-buttons {
    border-top: solid 2px var(--titan-blue);
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 15px;
    padding-top: 15px;
    justify-content: center;
    gap: 20px;
    text-align: center;
}

    #layout-update-buttons button {
        height: 44px;
        background-color: var(--warm-gray);
        color: var(--warm-gray-text);
        border: 0px;
        border-radius: var(--border-radius-small);
        cursor: pointer;
        width: 80%;
    }

        #layout-update-buttons button:hover {
            background-color: var(--light-blue);
            color: var(--light-blue-text);
        }

            #layout-update-buttons button:hover[disabled] {
                background-color: var(--alert-red);
                color: var(--alert-red-text);
                cursor: not-allowed;
            }

#div-layout-preview section div.grid-nest-preview,
#div-layout-preview section div.grid-container-preview {
    border: 0px;
    padding-bottom: 1px;
}

[id*="preview-div-"] {
    display: grid;
    height: 100%;
    align-content: center;
}

/*----------------------------------
    LAYOUT EDITING MODE - NOT LAYOUT BUILDER
*/

.layout-hide-mode {
    display: grid;
    grid-template-columns: auto 3fr;
    gap: 20px;
    padding: 10px;
    font-size: var(--font-size-reduced);
    border: dashed 1px var(--dark-warm-gray);
    background-color: var(--warm-gray);
    color: var(--warm-gray-text);
}


    .layout-hide-mode p {
        margin: 0px;
    }


        .layout-hide-mode p.section-header {
            font-weight: 700;
        }

/*---------------------------------------------------------------------------------*/
#ulPageTools, #ulTrainingResources {
    margin: 0px;
    padding: 0px;
}

    #ulPageTools li, #ulTrainingResources li {
        border-bottom: solid 1px var(--border-gray);
        box-sizing: border-box;
    }

        #ulPageTools li a, #ulPageTools li button,
        #ulTrainingResources li a {
            border: 0;
            padding: 4px;
            box-sizing: border-box;
            display: grid;
            grid-template-columns: 30px auto;
            align-content: center;
            font-size: var(--font-size-reduced);
            height: 44px;
            width: 100%;
            background-color: var(--ash);
            color: var(--ash-text);
            text-align: left;
            padding: 8px;
            border-left: solid 5px var(--ash);
            cursor: pointer;
        }

        #ulTrainingResources li a {
            grid-template-columns: auto 30px;
        }

        #ulPageTools li i {
            width: 30px;
            text-align: center;
        }

        #ulPageTools li:hover, #ulPageTools li:focus,
        #ulPageTools li:hover button, #ulPageTools li:focus a,
        #ulPageTools li:hover a, #ulPageTools li:focus a {
            background-color: var(--dark-gray);
            color: var(--dark-gray-text);
            cursor: pointer;
            border-left: solid 5px var(--orange);
        }

.pm-menu-active li.li-active, .pm-menu-active li.li-active button, .pm-menu-active li.li-active a {
    background-color: var(--default-link);
    color: var(--default-link-text);
}

.pm-menu-active p {
    margin: 0px;
    margin-top: 10px;
    font-weight: bold;
}

#secPageManagerWork {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 44px;
    gap: 10px;
    width: 100%;
}

#pm-work {
    grid-row: span 2;
    padding: 15px;
}

.pm-title {
    font-size: var(--font-size-large);
    background-color: var(--titan-blue);
    color: var(--titan-blue-text);
    border-bottom: solid 1px var(--orange);
    padding: 10px;
}

.pm-work-details {
    padding: 10px;
    background-color: var(--white);
    color: var(--white-text);
}

    .pm-work-details ul {
        margin: 0px;
        padding: 5px;
        list-style-type: none;
    }

    .pm-work-details li {
        margin: 0px;
        padding: 5px;
        margin-bottom: 15px;
        padding-bottom: 15px;
        border-bottom: solid 1px var(--gray);
    }

.pm-node-type {
    font-size: var(--font-size-small);
    font-weight: bold;
}

.pm-node-img-info {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 10px;
}

.pm-node-img {
    background-color: var(--dark-gray);
    color: var(--dark-text-text);
    border: solid 1px var(--black);
    padding: 10px;
    text-align: center;
}

    .pm-node-img img {
        max-height: 100px;
        width: auto;
    }

    .pm-node-img iframe {
        max-width: 180px;
        height: auto;
    }

.pm-node-img-attributes {
    font-size: var(--font-size);
    display: grid;
    grid-template-columns: 55px 1fr;
    gap: 10px;
}

    .pm-node-img-attributes em {
        width: 30px;
    }

.pm-fail-text, .pm-warn-text, .pm-seo-text {
    font-size: var(--font-size);
    margin-left: 25px;
    margin-top: 10px;
    padding: 5px;
}

    .pm-fail-text em, .pm-warn-text em, .pm-seo-text em, .pm-node-img-attributes em {
        font-size: var(--font-size-small);
    }

.pm-fail-text {
    border-left: solid 4px var(--alert-red);
}

.pm-warn-text {
    border-right: dotted 4px var(--orange);
}

.pm-seo-text {
    border-top: dashed 4px var(--dark-green);
}

#divFeatureTests {
    grid-column: span 2;
    padding: 5px;
}

#divPageContent {
    grid-row: span 2;
    padding: 5px;
}

#divMessages, #divHelp {
    padding: 5px;
    border: solid 1px var(--border-gray);
}

    #divMessages ul, #divHelp ul {
        padding: 5px;
        margin: 0px;
        list-style: none;
        /* max-height: 250px;*/
        overflow-y: auto;
    }

        #divMessages ul li, #divHelp ul li {
            display: grid;
            grid-template-columns: 50px 1fr;
            grid-template-rows: minmax(44px, auto);
            gap: 10px;
            align-content: center;
            margin-bottom: 4px;
        }

#ulScanItems button {
    border: 0px;
    font-size: 16px;
    background-color: transparent;
    color: #222;
    text-align: left;
    margin-top: 15px;
    height: 32px;
    width: 225px;
}

    #ulScanItems button:hover {
        cursor: pointer;
        background-color: #334F2E;
        color: #f7f7f7;
    }



#ulHeaderMessages .pm-warning, #ulHeaderMessages .pm-failure,
#ulLinkMessages .pm-warning, #ulLinkMessages .pm-failure {
    padding: 5px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#ulHeaderMessages em {
    font-size: var(--font-size-small);
    font-weight: bold;
}

#fail-icon i, #warn-icon i, #seo-icon i {
    font-size: var(--font-size-large);
}

.pm-failure {
    border-left: solid 10px var(--brick-red) !important;
    padding: 0px .5em;
    box-sizing: border-box;
    display: block;
}

.pm-warning {
    border-right: dotted 10px var(--dark-orange) !important;
    padding: 10px;
    box-sizing: border-box;
    display: block;
}

.pm-seo {
    border-top: dashed 10px var(--dark-green) !important;
    padding: 10px;
    box-sizing: border-box;
    display: block;
}

.pm-message {
    color: var(--dialog-box-gray-text);
    background-color: var(--dialog-box-gray);
    font-size: 16px;
    font-weight: bold;
}

#ulPageTools li.pm-warning, #ulPageTools li.pm-failure {
    padding: unset;
}

#secPageFailures, #secPageWarnings, #secPageSEO {
    z-index: 5;
    height: 52px;
    display: grid;
    grid-template-columns: 25px 44px auto;
    gap: 4px;
    align-items: center;
    align-content: center;
    padding: 8px;
    position: relative;
}

#divPageManager:hover #secPageFailures, #divPageManager:focus-within #secPageFailures, #divPageManager.active #secPageFailures,
#divPageManager:hover #secPageWarnings, #divPageManager:focus-within #secPageWarnings, #divPageManager.active #secPageWarnings,
#divPageManager:hover #secPageSEO, #divPageManager:focus-within #secPageSEO, #divPageManager.active #secPageSEO {
    color: var(--secondary);
}

#secPageFailures:hover #fail-points, #secPageWarnings:hover #warn-points, #secPageSEO:hover #seo-points {
    min-height: 100px;
    min-width: 300px;
    max-width: 650px;
    max-height: 350px;
    width: fit-content;
    opacity: 1;
    box-shadow: 2px 2px 3px rgba(0, 0, 0,.4);
    overflow-y: auto;
    top: 48px;
    z-index: 8;
    position: absolute;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

#fail-points, #warn-points, #seo-points {
    position: fixed;
    z-index: 3;
    display: grid;
    top: -2000px;
    min-height: 0px;
    max-height: 0px;
    opacity: 0;
    background-color: var(--light-warm-gray);
    color: var(--light-warm-gray-text);
    padding: 10px;
    transition: min-height .3s ease-in-out, opacity .5s ease-in-out;
    grid-template-columns: 44px 1fr;
    grid-template-rows: minmax(44px, auto);
    align-items: center;
    gap: .25em;
    margin-bottom: 8px;
    border-bottom: solid 1px var(--orange);
    padding: 5px;
}

    #fail-points button,
    #warn-points button,
    #seo-points button {
        border: 0px;
        border-radius: var(--border-radius);
        background: inherit;
        color: inherit;
        cursor: pointer;
        height: 44px;
        width: 44px;
        box-sizing: border-box;
        display: grid;
        align-items: center;
        align-content: center;
        justify-content: center;
        height: 2rem;
        width: 2rem;
        font-size: 1.25rem;
    }

        #fail-points button:hover, #fail-points button.pm-active:hover {
            color: var(--titan-blue);
        }

        #warn-points button:hover,
        #seo-points button:hover {
            color: var(--dark-orange);
        }

        #warn-points button.pm-active:hover,
        #seo-points button.pm-active:hover {
            color: var(--white);
        }

        #fail-points button.pm-active {
            color: var(--alert-red);
            background-color: var(--alert-red-text);
        }

        #warn-points button.pm-active,
        #seo-points button.pm-active {
            color: var(--dark-orange);
            background: var(--dark-orange-text);
        }

#secATIScan button {
    background: transparent;
    color: var(--my-black);
    border: 0px;
    cursor: pointer;
    text-align: left;
    width: max-content;
    padding: .2em .95em;
}

    #secATIScan button:hover, #secATIScan button:focus {
        background: var(--gradient-1);
        color: var(--gradient-1-text);
    }

/* HEADERS: check the current headers on the page */
.header-outline li {
    list-style: none;
    margin: 0px;
    display: grid;
    grid-template-columns: 44px auto;
    margin-bottom: 5px;
}

.empty-heading {
    position: relative;
    background-color: var(--alert-red) !important;
    color: var(--alert-red-text) !important;
}

    .empty-heading:before {
        content: "Empty Heading Detected";
        border: solid 5px var(--brick-red);
        text-shadow: none !important;
        font-size: 1.5rem;
        background-color: var(--alert-red) !important;
        color: var(--alert-red-text) !important;
        position: absolute;
        z-index: 10;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        display: grid;
        align-content: center;
        justify-content: center;
    }

/* LINKS: check the current links on the page */
.link-outline li {
    list-style: none;
    margin: 0px;
    display: grid;
    grid-template-columns: 22px 1fr;
    margin-bottom: 5px;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

    .link-outline li span:first-child {
        border-right: solid 1px var(--border-gray);
        text-align: center;
    }

    .link-outline li p {
        font-size: var(--font-size);
        text-align: left;
    }

    .link-outline li em {
        font-size: var(--font-size-small);
        display: block;
        max-width: 350px;
        overflow-x: auto;
    }

/* IMAGES: check the current images on the page */
.image-outline li {
    list-style: none;
    margin: 0px;
    display: grid;
    grid-template-columns: 22px 1fr 100px;
    margin-bottom: 5px;
    align-items: center;
    justify-content: center;
    gap: 10px;
}


    .image-outline li span:first-child {
        border-right: solid 1px var(--border-gray);
        text-align: center;
    }

    .image-outline li p {
        font-size: var(--font-size);
        text-align: left;
    }

        .image-outline li p img {
            height: auto;
            width: 100%;
        }

    .image-outline li em {
        font-size: var(--font-size-small);
        display: block;
        max-width: 350px;
        overflow-x: auto;
    }


/* IFRAMES AND TABLES: check the current content on the page */
#ulPageTools li button.iframe-tables {
    grid-template-columns: 30px 1fr 30px 1fr;
}

.iframe-table-outline li {
    list-style: none;
    margin: 0px;
    display: grid;
    grid-template-columns: 22px 1fr;
    margin-bottom: 5px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-bottom: solid 1px var(--medium-blue);
}

    .iframe-table-outline li span.pm-count {
        border-right: solid 1px var(--border-gray);
        text-align: center;
        grid-row: span 2;
    }

    .iframe-table-outline li p {
        font-size: var(--font-size);
        text-align: left;
    }

    .iframe-table-outline li em {
        font-size: var(--font-size-small);
        display: block;
        max-width: 350px;
        overflow-x: auto;
    }

    .iframe-table-outline li p span {
        font-size: var(--font-size-small);
        float: left;
        width: 30px;
        text-align: right;
        margin-right: 5px;
        color: var(--medium-blue);
    }

        .iframe-table-outline li p span.table {
            width: 45px;
        }

        .iframe-table-outline li p span.table-headers {
            width: 90%;
            text-align: left;
        }

    .iframe-table-outline li span.pm-tagname {
        clear: both;
        float: none;
        font-weight: bold;
    }

/* SEO: check the current content on the page */
.seo-outline li {
    list-style: none;
    margin: 0px;
    display: grid;
    grid-template-columns: 22px 1fr;
    margin-bottom: 5px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-bottom: solid 1px var(--medium-blue);
}

    .seo-outline li span.pm-count {
        border-right: solid 1px var(--border-gray);
        text-align: center;
        grid-row: span 2;
    }

    .seo-outline li p {
        font-size: var(--font-size);
        text-align: left;
    }

    .seo-outline li em {
        font-size: var(--font-size-small);
        display: block;
        max-width: 350px;
        overflow-x: auto;
    }

    .seo-outline li p span {
        font-size: var(--font-size-small);
        float: left;
        width: 30px;
        text-align: right;
        margin-right: 5px;
        color: var(--medium-blue);
    }

        .seo-outline li p span.table {
            width: 45px;
        }

        .seo-outline li p span.table-headers {
            width: 90%;
            text-align: left;
        }

    .seo-outline li span.pm-tagname {
        clear: both;
        float: none;
        font-weight: bold;
    }
/*------------------------
    OU EDITOR BASIC INPUT LABEL
*/
.ou-editor-input {
    display: grid;
    grid-template-columns: 1fr;
}

    .ou-editor-input label {
        font-size: var(--font-size-small);
    }

    .ou-editor-input input, .ou-editor-input textarea {
        font-size: var(--font-size);
        width: auto;
        border-radius: var(--border-radius);
        color: var(--medium-blue);
        background-color: var(--white);
        padding: var(--border-radius);
    }


/*************************************************************
    V5 Page Level Classes
*************************************************************/
.edit-page-level-css {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 5px;
    /* border-top: solid 3px var(--light-green);
    border-bottom: solid 3px var(--light-green);*/
    background-color: var(--white);
    color: var(--white-text);
    align-items: start;
    position: relative;
    z-index: 11;
}

.dark-mode .edit-page-level-css {
    background-color: var(--default-dark);
    color: var(--default-dark-text);
}

[id*='div-top-media'] .editing-content-meta,
[id*='box'] .grid-item .editing-content-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 8px !important;
    margin-bottom: 10px !important;
    max-width: max(350px, 33vw);
    background-color: var(--my-white) !important;
    color: var(--my-white-text) !important;
    text-shadow: none !important;
    border-radius: var(--border-radius-small);
    line-height: normal;
}

.editing-content-meta *:not(i),
.editing-content-meta *[toolbar='css-editor'] p,
[id*='div-top-media'] .editing-content-meta,
[id*='box'] .grid-item .editing-content-meta,
[id*='box'] .grid-item[class*='wash-'] .overlay-content .editing-content-meta *:not(i),
[id*='box'] .grid-item[class*='breakout-'] .editing-content-meta,
[id*='box'][class*='gradient-'] .overlay-content .editing-content-meta *:not(.ou-btn):not(.ou-icon-pencil),
[class*='gradient-'] .overlay-content .editing-content-meta *:not(.ou-btn):not(.ou-icon-pencil),
[class*='background-'] [class*='transparent-gradient-'] .overlay-content .editing-content-meta *:not(.ou-btn):not(.ou-icon-pencil),
[class*='background-'] .overlay-content .editing-content-meta,
[id*='div'][class*='no-overlay'] .overlay-content .editing-content-meta *:not([class*='button']):not(.standout-block):not([class*='directory-']):not(i) {
    background-color: var(--my-white) !important;
    color: var(--my-white-text) !important;
    text-shadow: none !important;
    padding: 3px;
    margin: 0px;
    margin-bottom: 2px;
}

[id*='div'][class*='no-overlay'] .overlay-content *[class*='editing-content'] i:not([class*='button']):not(.standout-block):not([class*='directory-']),
[id*='div'][class*='stock'][class*='no-overlay'] .overlay-content *[class*='editing-content'] i:not([class*='button']):not(.standout-block):not([class*='directory-']) {
    background-color: inherit !important;
    color: var(--my-white) !important;
}

.overlay-content .OUSectionTitle,
.overlay-content p:first-child.OUSectionTitle, .OUSectionTitle, p:first-child.OUSectionTitle {
    border-bottom: solid 1px var(--border-gray);
    font-weight: bold;
    font-size: var(--font-size-small);
    text-shadow: none;
    text-align: left;
    margin-bottom: 5px;
}

[id*='div'][class*='no-overlay'] .overlay-content .OUSectionTitle:not([class*='button']):not(.standout-block):not([class*='directory-']),
[id*='div'][class*='stock'][class*='no-overlay'] .overlay-content .OUSectionTitle:not([class*='button']):not(.standout-block):not([class*='directory-']) {
    background-color: var(--box-shade-background) !important;
    color: var(--my-white) !important;
}

[class*='background-'] [class*='transparent-gradient-'] .overlay-content *.editing-content-meta, [class*='background-'] .overlay-content *.editing-content-meta {
    background-color: var(--my-white) !important;
    color: var(--my-white-text) !important;
}

text-shadow: none !important;
#div-top-media .editing-content-meta a[data-region-style='button'][role="button"].ou-btn {
    display: block !important;
    width: 80px !important;
}

#div-top-media p.OUSectionTitle,
#div-top-media .editing-content-meta *[toolbar="css-editor"] p {
    padding: 4px 6px !important;
    line-height: normal;
}

.editing-content-meta *[label*='editing-content-css'],
[id*='div-top-media'] .editing-content-meta *[label*='editing-content-css'],
[id*='div-'].section-stock .editing-content-meta *[label*='editing-content-css'],
[id*='box'][class*='background'] .grid-item[class*='stock'] *[label*='editing-content-css'] {
    border: solid 3px var(--light-green);
    border-radius: var(--border-radius-small);
    background-color: var(--my-white) !important;
    color: var(--my-white-text) !important;
    text-shadow: none !important;
}

[id*="box"][class*='stock-'] div[id*='div']:not([class*='background']) .overlay-content .editing-content-meta *:not(i) {
    background-color: var(--my-white) !important;
    color: var(--my-white-text) !important;
    text-shadow: none !important;
}

.edit-page-guides-options {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.edit-page-level-css button:hover {
    cursor: pointer;
}
/*************************************************************
    INFO DECK EDITING
*************************************************************/
.infoblock-setup-type p {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr;
    gap: 10px;
    margin-bottom: 0px;
    align-items: center;
    padding: 4px;
    padding-right: 25%;
}

#easy-setup div {
    display: grid;
    grid-template-columns: 1fr 3fr;
    margin-bottom: 5px;
}

    #easy-setup div select {
        font-size: var(--font-size-large);
    }


#div-editor-workspace-titles {
    display: grid;
    gap: 10px;
}

.ou-editor-workspace-setup section {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 2fr 2fr;
    gap: 10px;
    font-size: var(--font-size-small);
    align-content: center;
    justify-content: center;
    border-bottom: solid 1px var(--medium-blue);
    padding-top: 4px;
    padding-bottom: 4px;
}

#div-editor-workspace-titles section p {
    border-bottom: solid 3px var(--medium-blue);
    font-size: var(--font-size-small);
    text-align: center;
    text-transform: uppercase;
    margin: 0px;
}

.ou-editor-workspace-setup p,
.ou-editor-workspace-setup p * {
    font-size: var(--font-size-small);
}

.ou-editor-workspace-setup p {
    margin: 0px;
}

.ou-editor-workspace-setup button {
    background: inherit;
    border: solid 1px var(--medium-blue);
    cursor: pointer;
    border-radius: var(--border-radius);
    padding: 6px;
    display: grid;
    grid-template-columns: 1fr 3fr;
    align-items: center;
}

    .ou-editor-workspace-setup button span {
        font-size: var(--fonts-size-small);
    }

    .ou-editor-workspace-setup button:hover {
        background-color: var(--light-warm-gray);
        color: var(--light-warm-gray-text);
    }

    .ou-editor-workspace-setup button.active {
        background-color: var(--dialog-box-gray);
        color: var(--dialog-box-gray-text);
    }


.width-small, .width-balanced, .width-large {
    width: 20px;
    display: inline-grid;
    border: solid 1px var(--medium-blue);
    box-sizing: border-box;
}

button.active .width-small, button.active .width-balanced, button.active .width-large {
    border-color: var(--dialog-box-gray-text);
}

.width-small {
    border-left: solid 15px var(--medium-blue);
}

.width-balanced {
    border-left: solid 10px var(--medium-blue);
}

.width-large {
    border-left: solid 5px var(--medium-blue);
}

#centercontent .media-setup-choice ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

#centercontent .large-options .media-setup-choice ul {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

#centercontent .balanced-options .media-setup-choice ul {
    grid-template-columns: 1fr 1fr 1fr;
}

#centercontent .small-options .media-setup-choice ul {
    grid-template-columns: 1fr 1fr;
}

.media-setup-choice li {
    margin: 0px;
}

.ou-editor-class-builder button {
    width: 100%;
    padding: 1%;
    border: solid 1px var(--border-gray);
    min-height: 30px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
}

    .ou-editor-class-builder button.active {
        background-color: var(--light-blue);
        color: var(--light-blue-text);
    }

    .ou-editor-class-builder button:hover {
        background-color: var(--white);
        color: var(--medium-blue);
    }


#btn-ibp-media-framework {
    display: block;
    margin: 8px auto;
    width: auto;
}

.media-setup-choice .option-title {
    margin: 0px;
    font-size: var(--font-size-small);
    color: var(--medium-blue);
    padding: 5px 0px 0px 0px;
}

    .media-setup-choice .option-title * {
        font-size: var(--font-size-small);
    }

#centercontent .option-input {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
}

#centercontent .checkbox-options .option-input {
    display: grid;
    grid-template-columns: 1fr 4fr;
    align-items: center;
}

#centercontent .option-input input[type="checkbox"] {
    height: 20px;
    width: 20px;
}

#centercontent .option-input label {
    font-size: var(--font-size-small);
}

#centercontent .accordion-open li.media-setup-choice-header, #centercontent .media-setup-choice-header {
    text-align: center;
    font-weight: bold !important;
    font-size: 12px !important;
    line-height: 20px !important;
}

.block-main-title {
    margin-top: 28px;
    position: relative;
    font-size: 1.67em;
    font-weight: bold;
    border-bottom: solid 1px var(--orange);
}

    .block-main-title:before {
        content: "[ Content Title ]";
        width: 115px;
        position: absolute;
        left: 5px;
        top: -20px;
        font-size: var(--font-size-small);
        text-align: center;
        text-transform: capitalize;
        font-weight: 800;
    }

.accordion-title, .tab-title, .accordion-end {
    margin-top: 28px;
    padding-left: 10px;
    position: relative;
    border-bottom: solid 1px var(--titan-blue);
}

    .accordion-title:before, .tab-title:before, .accordion-end:before {
        content: "[ Title ]";
        position: absolute;
        left: 5px;
        top: -20px;
        font-size: var(--font-size-small);
        text-transform: capitalize;
        font-weight: 800;
    }

    .accordion-end:before {
        content: "[ End Accordion / Tab Group ]";
    }


.off-screen {
    position: relative;
    clip: unset;
    overflow: unset;
    height: unset;
    margin-left: 85px;
    padding-left: 10px;
    position: relative;
    border: dashed 1px var(--titan-blue);
    width: calc(100% - 95px);
}

    .off-screen:before, .off-screen:before {
        content: "[ Off Screen ]";
        width: 85px;
        position: absolute;
        left: -85px;
        top: 0px;
        font-size: var(--font-size-small);
        text-align: center;
        text-transform: capitalize;
        font-weight: bold;
    }


.TransitionCSS {
    font-size: .85em;
    padding: 1%;
    color: #2D68A8;
    width: auto;
    min-width: 90%;
}

.Slideshow_box {
    border: dashed 4px #aaa;
    background-color: #ddd;
    color: #434343;
    position: relative;
}

    .Slideshow_box:before {
        position: absolute;
        top: 40%;
        left: 20%;
        font-size: 2em;
        content: 'Edit Mode: Slideshow Goes Here';
    }


.TabEditingBlock img {
    max-width: 100%;
    height: auto;
}


#skiptocontent {
    display: none
}



.desktop header.header-edit {
    top: 60px;
}

#editbar {
    background-color: #393d41;
    color: #d9d9d9;
    border-top: solid 1px #363636;
    border-bottom: solid 1px #8b8b8b;
    display: block;
    position: sticky;
    top: 0px;
    z-index: 10;
    padding: 5px;
    height: 60px;
    width: 100%;
    box-sizing: border-box;
}

    #editbar p, #editbar ul {
        float: left;
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }

    #editbar .edtTitle {
        width: 60px;
        margin-left: 5px;
        font-size: 14px;
        letter-spacing: 4px;
        border-right: solid 1px #8b8b8b;
    }

    #editbar .edtResizeMode, #editbar .edtHelpResources {
        float: left;
        border: solid 1px #8b8b8b;
    }

.edtResizeMode li, .edtHelpResources li {
    float: left;
    width: 25%;
    box-sizing: border-box;
    text-align: center;
    padding: 3px;
    font-size: 20px;
    background-color: #2b2b2b;
    border-left: solid 1px #8b8b8b;
}

    .edtResizeMode li:nth-child(n+2):hover, .edtHelpResources li:nth-child(n+2):hover {
        background-color: #0b0b0b;
    }

    .edtResizeMode li.active {
        background-color: #084B8A;
    }

    .edtResizeMode li:first-child, .edtHelpResources li:first-child {
        clear: both;
        width: 100%;
        border: 0px;
        font-size: 12px;
        text-transform: uppercase;
        border-bottom: solid 1px #8b8b8b;
    }

    .edtResizeMode li:nth-child(2), .edtHelpResources li:nth-child(2) {
        border-left: 0px;
    }

    .edtResizeMode li:last-child i {
        transform: rotate(-90deg);
        padding-left: 6px;
    }

    .edtResizeMode li a, .edtHelpResources li a {
        color: #d9d9d9;
    }

li.flex-list {
    position: relative;
    padding-top: 20px;
}

    li.flex-list:before {
        content: "[ Flex List ]";
        font-weight: bold;
        position: absolute;
        left: 0px;
        top: 0px;
        font-size: var(--font-size-small);
        text-transform: capitalize;
    }

/*----------------------------------------
  PAGE TITLE
----------------------------------------*/
#divPageTitleData [class*='notice-'], #divPageDescData [class*='notice-'] {
    margin: 10px 3px;
    padding: 8px;
    padding-left: 55px;
    position: relative;
}

#divPageTitleData .smaller {
    margin: 0px;
    padding: 4px;
}

button.btn-description-builder {
    padding: 8px;
    border-radius: var(--border-radius-chamfer);
    border: solid 1px var(--my-gray-dark);
    position: absolute;
    top: 10px;
    right: 10px;
}

button.btn-title-help:hover {
    background-color: var(--my-gray-dark);
    color: var(--my-gray-dark-hover-text);
}

#divTitleInfo, #divDescriptionInfo {
    height: 0px;
    transform: rotateX(90deg);
    transition: height var(--transition-time-fast), transform var(--transition-time-fast);
    transform-origin: top center;
    padding: 2px 8px;
}

    #divTitleInfo.active, #divDescriptionInfo.active {
        height: auto;
        transform: rotateX(0deg);
        transition: height var(--transition-time-fast), transform var(--transition-time-fast);
    }


#divDescriptionBuilder {
    display: none;
    grid-column: span 2;
}

    #divDescriptionBuilder.active {
        display: grid;
        background-color: var(--my-white);
        color: var(--my-white-text);
        border: solid 1px var(--border-gray);
        padding: 0px;
    }

    #divDescriptionBuilder p.title, #divSearchResultsPreview p.title {
        margin: 0px;
        padding: 4px;
        margin-bottom: 4px;
        text-transform: capitalize;
        font-weight: normal;
        font-size: unset;
        height: 30px;
    }

    #divDescriptionBuilder p label {
        display: grid;
        grid-template-columns: 1fr;
        gap: 2px;
    }

        #divDescriptionBuilder p label span {
            color: var(--secondary);
            font-size: var(--font-size-small);
        }

    #divDescriptionBuilder p textarea {
        padding: 8px;
        min-height: 70px;
    }

#divDescInfo {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 10px;
}

p#txtDescCount {
    text-align: right;
    font-size: var(--font-size-small);
    padding-right: 25px;
}

#divWordBreakdown p {
    margin-top: 0px;
}

.description-item {
    padding: 1px 10px;
    margin: 0px;
}

.word-count {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

    .word-count span {
        flex-basis: 32%;
    }

#divSearchResultsPreview {
    padding: 20px;
    padding-top: 0px;
}

.preview-page-title {
    font-size: 25px;
    margin-top: 18px;
    padding-top: 5px;
    margin-bottom: 3px;
}

.preview-page-description {
    font-size: 18px;
    margin-top: 0px;
    font-weight: 400;
}
/*----------------------------------------
    HEADER FIXES
----------------------------------------*/
header #search-quicklinks {
    top: 63px;
}

header #website-quicklinks,
header #website-search,
.tablet #mainnav {
    /*top: 108px !important;*/
}

/*----------------------------------------
    RESIZE FOR DISPLAY IN MOBILE HOLDER
----------------------------------------*/

#ReSizePreview {
    position: relative;
    float: left;
    width: 100%;
}

    #ReSizePreview.desktop {
        width: 100%;
        padding: 0px;
    }

    #ReSizePreview.tablet {
        width: 1024px;
        height: 46vw;
        max-height: 1366px;
        padding: 0px;
        display: block;
        margin: auto;
        overflow-Y: scroll;
        float: none;
    }

    #ReSizePreview.mobile-portrait {
        width: 400px;
        min-height: 700px;
        max-height: 815px;
        padding: 0px;
        display: block;
        margin: auto;
        overflow-Y: scroll;
        float: none;
    }

    #ReSizePreview.mobile-landscape {
        width: 700px;
        height: 400px;
        padding: 0px;
        display: block;
        margin: auto;
        overflow-Y: scroll;
        float: none;
    }

/*----------------------------------------------
    EDITING FLOURISHES
-----------------------------------------------*/

.disclaimer-small {
    font-size: 10px;
    letter-spacing: 2px;
    padding-bottom: 3px;
}

.disclaimer-standin-small {
    height: 15px;
    float: left;
    width: 90%;
    background-color: #dfdfdf;
    margin-bottom: 2px;
}

.disclaimer-standin {
    float: left;
    height: 25px;
    width: 90%;
    background-color: #dfdfdf;
}


/*------------------------------------------------------
    EDITING CLASSES
--------------------------------------------------------*/
.edit-section-title {
    color: #334F2E;
    font-size: 10px;
    text-transform: uppercase;
    width: 99%;
    padding: 5px;
    box-sizing: border-box;
    font-weight: bold;
    letter-spacing: 1px;
    border-bottom: solid 1px var(--dialog-box-gray);
}

.edit-info-box-title-start {
    border-top: dashed 1px var(--dialog);
    margin-top: 1px;
}

.edit-info-box-title-end {
    border-bottom: dashed 1px var(--dialog);
    margin-bottom: 1px;
}

.edit-info-box-title-start, .edit-info-box-title-end {
    color: var(--dialog) !important;
    background-color: var(--default) !important;
    border-color: var(--dialog);
    font-size: var(--font-size-small);
    text-transform: uppercase;
    padding: 5px;
    box-sizing: border-box;
    font-weight: bold;
    letter-spacing: 1.25px;
    display: block;
    text-align: right;
    z-index: 5;
    height: 30px;
}

.dark-mode .edit-info-box-title-start, .dark-mode .edit-info-box-title-end {
    color: var(--dialog-dark-text) !important;
    background-color: var(--dialog) !important;
}


.edtLayoutMode {
    border: solid 1px #8b8b8b;
    padding: 3px;
    background-color: #2b2b2b;
    color: #d9d9d9;
}

    .edtLayoutMode li {
        float: left;
        clear: both;
        padding: 3px;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
    }

        .edtLayoutMode li:first-child {
            border-bottom: solid 1px #8b8b8b;
        }

#editbar label {
    font-size: 12px;
    text-transform: uppercase;
}

#editbar #txtTryLayout {
    border-radius: 3px;
    border: solid 1px #bdbdbd;
    font-size: 14px;
}


.edtHelpResources a {
    text-decoration: none;
}

/*---------------------------------------
    SITE SETUP FILES
 ----------------------------------------*/

#editbar #edtMode {
    float: right;
    margin: 5px;
    text-align: center;
}

.edtSiteManagerTitle {
    width: 210px;
}

    .edtSiteManagerTitle a {
        color: #f7f7f7;
        background-color: inherit;
    }

#edtCurrent h1 {
    margin-bottom: 6px;
    margin-top: 7px;
    position: relative;
    text-transform: uppercase;
    font-size: 24px;
    padding: 0 0 10px 0;
    letter-spacing: 2px;
    color: #fff;
    display: inline-block;
}

.site-manager-title {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
}

#sitemanager-interface-box {
    /* display: grid;
    grid-template-columns: 220px 1fr;*/
}

#edit-setup-workspace-options,
#edit-setup-workspace-info,
#edit-setup-workspace-work {
    display: none;
}

#edit-setup-workspace-options {
    grid-column: span 2;
}

#edit-setup-options {
    min-height: 500px;
    border-right: solid 1px var(--border-gray);
    background-color: var(--dialog-box-gray);
    color: var(--dialog-box-gray-text);
    border-bottom-right-radius: 15px;
}

    #edit-setup-options ul {
        margin: 0px;
        padding: 0px;
        list-style-type: none;
    }

    #edit-setup-options li {
        border-bottom: solid 1px #aaa;
    }

    #edit-setup-options button,
    #edit-setup-workspace-info button {
        background: inherit;
        color: inherit;
        border: 0px;
        letter-spacing: 1px;
        cursor: pointer;
        font-size: 14px;
        padding: 8px;
        width: 100%;
        text-align: left;
    }

        #edit-setup-options button i,
        #edit-setup-workspace-info button i {
            width: 20px;
        }

        #edit-setup-options button:hover {
            border-bottom: solid 1px #aaa;
            background-color: #d9d9d9;
            color: #404040;
        }

        #edit-setup-options button:active,
        #edit-setup-workspace-info button:active {
            background: #f7f7f7;
            color: #222;
        }


#edit-setup-workspace {
    background-color: var(--default);
    color: var(--default-text);
    padding: 10px;
    margin: 0px;
}

.li-active {
    background-color: #084B8A;
    color: #f7f7f7;
}

#sitemanager-workspace-grid-box.workspace-start-cards {
    display: grid;
    grid-template-columns: 1fr;
}

#sitemanager-workspace-grid-box.workspace-editing {
    display: grid;
    grid-template-columns: 2fr minmax(365px, 1fr);
}

/*---------------------------------------------
      DASHBOARD OPTIONS
---------------------------------------------*/
#edit-setup-workspace-options p.manager-tool-header {
    font-size: var(--font-size);
    text-transform: uppercase;
}

.section-features {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.edit-menu-option {
    margin: 0px;
    margin-right: 1%;
    margin-bottom: 1%;
    padding: 15px;
    box-sizing: border-box;
    border: solid 1px #222;
    background-color: #fff;
    color: #4c5254;
    box-shadow: 0px 0px 2px rgba(0,0,0,.4);
    min-height: 280px;
}

    .edit-menu-option button {
        font-size: 16px;
        background-color: #fff;
        color: #222;
        border: solid 1px #ccc;
        min-width: 20%;
        display: block;
        margin: auto;
        padding: 12px;
        cursor: pointer;
    }

        .edit-menu-option button:hover {
            color: #fff;
            background-color: #000;
            transition-duration: .3s;
        }

    .edit-menu-option i, #edit-setup-workspace-info button i {
        font-size: 25px;
        margin-bottom: 8px;
        color: #084B8A
    }

#edit-setup-workspace-options h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.edit-dashboard-results {
    min-height: 60px;
}


/*------------------------------------------------
        WORKSPACE AREA
---------------------------------------------------*/

.media-framework-workspace-box {
    display: grid;
    grid-template-columns: 2fr 1fr;
}

#edit-setup-workspace-info {
    min-height: 300px;
    border-right: solid 1px var(--border-gray);
    border-radius: 0;
    box-sizing: border-box;
}

#edit-setup-workspace-work {
    min-height: 300px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

/*-------------------------------------------------------
    GOLIVE 2.0 EDITOR
-----------------------------------------------------------*/
#edit-setup-workspace-info h1, #edit-setup-workspace-info h2, #edit-setup-workspace-info h3, #edit-setup-workspace-info h4 {
    margin: 0px;
    margin-bottom: 5px;
}

#edit-setup-workspace-info button, #edit-setup-workspace-work button {
    font-size: var(--font-size-small);
    background-color: var(--cloud);
    color: var(--cloud-text);
    border: solid 1px var(--border-gray);
    min-width: 20%;
    display: block;
    margin: auto;
    padding: 6px;
    margin-top: 4px;
    cursor: pointer;
    text-align: center;
}

    #edit-setup-workspace-info button:hover, #edit-setup-workspace-work button:hover {
        border-bottom: solid 1px var(--border-gray-dark);
        background-color: var(--light-blue);
        color: var(--light-blue-text);
        transition: all .3s;
    }

    #edit-setup-workspace-info button.button-link {
        float: none;
        clear: both;
        border: 0px;
        background-color: inherit;
        color: #084B8A;
        border-bottom: solid 1px transparent;
        min-width: unset;
        width: auto;
        margin: 0px;
        text-align: left;
        padding-left: 0px;
        padding-top: 0px;
    }

        #edit-setup-workspace-info button.button-link:hover {
            float: none;
            clear: both;
            border: 0px;
            background-color: inherit;
            color: #084B8A;
            border-bottom: solid 1px #084B8A;
        }

.edit-golive-file-list ul {
    list-style-type: none;
    margin: 0px;
    padding: 3px;
}

.edit-golive-file-list li {
    padding: 5px;
}

.edit-golive-file-list i {
    width: 20px;
    text-align: center;
}

#edit-setup-workspace-info button.button-file-index {
    border: 0px;
    float: none;
    width: auto;
    text-align: left;
    margin: 2px;
    display: inline;
    background: inherit;
}

    #edit-setup-workspace-info button.button-file-index:hover {
        background: inherit;
        color: #000;
        font-weight: bold;
        border-bottom: solid 1px #ccc;
        transition: border-bottom .3s ease-in-out;
        cursor: pointer;
    }

.sitemanager-golive-file-review-holder {
    overflow: auto;
    height: 560px;
}

.edit-golive-file-list ul.subfile {
    display: block;
}

.edit-golive-file-list ul.sub-ul-1 {
    display: none;
    padding-left: 25px;
    box-sizing: border-box;
}

.edit-golive-file-list ul.sub-ul-1-open {
    display: block;
    padding-left: 25px;
    box-sizing: border-box;
}


#artQueueHeader p {
    float: left;
    margin-top: 0px;
    padding-top: 0px;
}

#artQueueHeader hr {
    clear: both;
}

#artQueueHeader button {
    margin-right: 10px;
}

.edit-transfer-tools {
    padding: 5px;
}



    .edit-transfer-tools .FastAdd {
        font-size: 18px;
        letter-spacing: 2px;
    }

        .edit-transfer-tools .FastAdd i {
            color: #084B8A;
        }

    .edit-transfer-tools ul {
        list-style-type: none;
        margin: 0px;
        padding-left: 20px;
    }

#edit-setup-workspace-work .edit-transfer-tools li {
    padding: 5px;
}

    #edit-setup-workspace-work .edit-transfer-tools li button {
        padding: 12px;
        font-size: 14px;
        border: solid 1px #ccc;
        background-color: #fff;
        color: #222;
        cursor: pointer;
        width: 225px;
        text-align: left;
    }

        #edit-setup-workspace-work .edit-transfer-tools li button:hover {
            background-color: #222;
            color: #fff;
            transition: all .2s ease-in-out;
        }

        #edit-setup-workspace-work .edit-transfer-tools li button i {
            width: 20px;
        }

#edit-setup-workspace-info ul.sitemanager-golive-file-review-queue {
    margin: 0px;
    list-style-type: none;
    padding: 0px;
    padding-left: 10px;
    box-sizing: border-box;
    height: 510px;
}

    #edit-setup-workspace-info ul.sitemanager-golive-file-review-queue li {
        border-left: solid 5px #084B8A;
        padding: 3px 8px;
        margin-bottom: 8px;
    }

        #edit-setup-workspace-info ul.sitemanager-golive-file-review-queue li:hover {
            border-left: solid 5px #222;
            background-color: #fff;
        }

/*----------------------------------------------------------------
SITE MANAGER PREVIEW PANE
--------------------------------------------------------------------*/
#asdMyPreviewPane {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 0px;
    width: 98%;
    background-color: transparent;
    color: #084B8A;
    border: solid 1px transparent;
    margin: 1%;
    transition: height .3s ease-in-out, background-color .4s ease-in-out;
    overflow: hidden;
    box-shadow: none;
}

button#btnClosePreviewPane {
    text-align: right;
    width: auto;
    border: 0px;
    float: right;
}

#asdMyPreviewPane iframe {
    width: 98%;
    height: 570px;
}

#asdMyPreviewPane.sitemanager-preview-pane-show {
    height: 600px;
    box-shadow: 0px 2px 4px rgba(0,0,0,.3);
    border: solid 1px #ccc;
    background-color: #fff;
}

#asdMyPreviewPane.sitemanager-preview-pane-hide {
    height: 0px;
    box-shadow: none;
    border: solid 1px transparent;
    background-color: transparent;
}
/*-----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------------------------
    MEDIA FRAMEWORK SITE MANAGER / PLUGIN
-----------------------------------------------------*/

#liMenuCollapse, #liBackToTop {
    text-align: end;
}

#btnMenuCollapse, #btnBackToTop {
    width: 44px;
}

.small-menu .site-manager-feature-text {
    display: none;
}

.site-manager-feature-text {
    font-size: var(--font-size-reduced);
    margin-left: 5px;
}

.small-menu .setup-selector {
    padding: 0px;
    gap: 5px;
    transition: all 200ms ease-in-out;
}

    .small-menu .setup-selector button,
    .small-menu .setup-selector #btnMenuCollapse,
    .small-menu .setup-selector #btnBackToTop {
        height: 35px;
        width: 100%;
        padding: 5px;
        box-sizing: border-box;
        text-align: center;
    }

.setup-selector button i {
    width: 25px;
    text-align: center;
}

#divCurrentLayouts {
    padding: 5px;
}

#LayoutStatus {
    display: block;
    font-size: var(--font-size-reduced);
    padding: 3px;
    box-sizing: border-box;
}

    #LayoutStatus.save {
        border-left: solid 8px var(--orange);
    }

    #LayoutStatus.loading {
        border-left: solid 8px var(--warm-gray);
    }

    #LayoutStatus.error, .sort-list li.box-error {
        border-left: solid 8px var(--alert-red);
    }

#LayoutMessage {
    display: grid;
    grid-template-columns: 1fr;
    background-position: center left;
    font-size: var(--font-size-small);
}

#sitemanager-media-layouts-layout-controls {
    margin-top: 5px;
    display: grid;
    grid-template-columns: 80px auto;
    gap: 5px;
}

#divCurrentLayouts label {
    color: var(--medium-blue);
    font-size: var(--font-size-small);
}

#divMediaCatalogFilter {
    display: grid;
    grid-template-columns: 1fr 3fr 3fr 3fr;
    align-items: center;
    padding-top: 10px;
}

    #divMediaCatalogFilter label {
        margin-right: 10px;
    }

#divEditSiteLayout {
    margin-top: 5px;
    border-top: solid 2px var(--border-gray);
    padding: 5px;
    width: 100%;
    box-sizing: border-box;
}

    #divEditSiteLayout p {
        margin-bottom: unset;
    }

    #divEditSiteLayout ul {
        margin-left: 0px;
        padding: 2px;
    }

#sitemanager-media-layouts-layout-name-box {
    display: grid;
    grid-template-columns: 80px auto 25px 25px 25px;
    gap: 5px;
    padding-bottom: 4px;
    border-bottom: solid 1px var(--warm-gray);
    margin-bottom: 4px;
}

#divEditSiteLayout label,
#divMediaCatalogFilter i, #divMediaCatalogFilter span, #divMediaCatalogFilter label {
    font-size: var(--font-size-small);
    color: var(--medium-blue);
}

#divEditSiteLayout input {
    font-size: var(--font-size-small);
    color: var(--medium-blue);
}

#btnLayoutBox {
    grid-column: span 5;
}

.li-media-catalog {
    box-sizing: border-box;
    cursor: move;
    margin: 0px;
    padding: 0px;
}

    .li-media-catalog.dragging {
        border-left: solid 8px var(--orange);
    }

.sitemanager-media-framework-layout-block-preview {
    padding: 0px;
    margin: 0px;
    border: solid 1px var(--border-gray);
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    position: relative;
    border-bottom-left-radius: var(--border-radius-small);
    border-bottom-right-radius: var(--border-radius-small);
}

.sitemanager-media-framework-add-layout-div {
    font-size: var(--font-size);
}

.sitemanager-media-framework-add-layout-button {
    width: 100%;
    margin: 0px;
    padding: 2px;
}

.layout-ul-preview-rows {
    width: 100%;
    list-style-type: none;
    margin: 0px;
    margin-top: 8px;
    margin-bottom: 8px;
    min-height: 50px;
    border: dashed 2px var(--warm-gray);
}

#divPreviewLayoutBuilder .layout-ul-preview-rows.preview-version {
    margin-left: 0px;
}

.layout-ul-preview-rows li {
    width: 100%;
    list-style-type: none;
    margin-bottom: 2px;
    display: grid;
    grid-template-columns: auto 85px;
    gap: 4px;
}

#divPreviewLayoutBuilder .layout-ul-preview-rows.preview-version li {
    grid-template-columns: 1fr;
}


.layout-preview-row-tools {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 5px;
}

#divEditSiteLayout button {
    min-width: unset;
    box-sizing: border-box;
    text-align: center;
    margin: 0px;
    padding: 4px;
}

.layout-preview-row, .layout-preview-row span.box-label {
    font-size: var(--font-size-small);
}

.row-box {
    display: grid;
    grid-template-columns: 20px auto;
    align-content: center;
}

.preview-layout-list {
    margin: 0px;
    width: auto;
    list-style-type: none;
}

#divPreviewLayoutBuilder ul .grid-item {
    min-height: 60px;
}

/*---------------------------------------------
    FILE MANAGER
-----------------------------------------------------*/

.file-manager #edit-setup-workspace-info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .1em;
    align-items: flex-start;
    min-height: 75vh;
}

.file-manager .file-types {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .1em;
    align-items: flex-start;
    width: 100%;
}

.file-manager #edit-setup-workspace-info p {
    flex-basis: 100%;
}


.file-manager #edit-setup-workspace-info button {
    font-size: 16px;
    background-color: var(--my-white);
    color: var(--my-white-text);
    border: solid 1px var(--border-gray);
    display: block;
    margin: auto;
    padding: 12px;
    cursor: pointer;
}

    .file-manager #edit-setup-workspace-info button:hover,
    .file-manager #edit-setup-workspace-info button:focus {
        color: var(--secondary-text);
        background-color: var(--secondary);
        transition-duration: .3s;
    }

.file-item-holder {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

    .file-item-holder .file-item {
        overflow: auto;
        height: 88vh;
    }

        .file-item-holder .file-item ul {
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }

        .file-item-holder .file-item li {
            padding: 1em;
            text-align: left;
            margin: 0px;
        }

#edit-setup-workspace-work .file-item-holder .file-item li button {
    padding: 1em;
    text-align: left;
    margin: 0px;
    width: 100%;
    font-size: var(--font-size);
}

.file-item-holder .file-preview iframe {
    border: solid 1px var(--border-gray);
    border-radius: var(--border-round);
    margin: auto;
    height: 100%;
    width: 100%;
    padding: 0px;
    position: sticky;
    top: 50px;
}

/*------------------------------------------------
        WORKSPACE BUTTONS
---------------------------------------------------*/
#edit-setup-workspace .button-save {
}

    #edit-setup-workspace .button-save:hover {
        background-color: var(--light-green);
        color: var(--light-green-text);
    }

#edit-setup-workspace .button-move-up, #edit-setup-workspace .button-move-down {
}

    #edit-setup-workspace .button-move-up:hover, #edit-setup-workspace .button-move-down:hover {
        background-color: var(--medium-blue);
        color: var(--medium-blue-text);
    }

#edit-setup-workspace .button-delete {
    background-color: var(--alert-red-text);
    color: var(--alert-red);
}

    #edit-setup-workspace .button-delete:hover {
        background-color: var(--alert-red);
        color: var(--alert-red-text);
    }


/*---------------------------------
    OU EDITOR INFO BLOCKS
*/
.page-type {
    display: grid;
    grid-template-columns: 1fr auto;
}

    .page-type p {
        font-size: var(--font-size-small);
        margin: 0px;
    }

div[id*="instruction"] {
    background-color: var(--light-dialog);
    color: var(--light-dialog-text);
    padding: 0px;
}

    div[id*="instruction"] .accordion-set.overlay-content {
        padding: 8px;
    }

    div[id*="instruction"] .accordion-set details {
        margin: 0px;
        width: 100%;
        margin-bottom: 5px;
    }

        div[id*="instruction"] .accordion-set details summary {
            display: grid;
            padding: 10px 8px;
        }

.instruction-block {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 10px;
    align-items: center;
}

    .instruction-block input {
        font-size: var(--font-size-large);
        color: var(--white-text);
        background-color: var(--white);
        border: solid 1px var(--border-gray);
        padding: 10px;
        border-radius: var(--border-radius-small);
    }

#divEditPageWorkspace {
    display: grid;
    grid-template-columns: 260px 2fr 0px;
    gap: 10px;
}

    #divEditPageWorkspace.active {
        grid-template-columns: 260px 2fr 1fr;
    }

#divEditInfoPreview {
    display: none;
    /*turned this off just to save space on the editor*/
}

    #divEditInfoPreview .button-holder {
        display: grid;
        padding-top: 10px;
    }

    #divEditInfoPreview #btnDataPreview {
        display: block;
        font-size: 1em;
        cursor: pointer;
        width: 55px;
    }

    #divEditInfoPreview .data-preview {
        display: none;
        position: relative;
    }

    #divEditInfoPreview.active .data-preview {
        display: block;
        position: relative;
    }


.info-block-grid {
    background-color: var(--white);
    color: var(--white-text);
}

#div-search-blocks {
    position: sticky;
    top: -1px;
    height: 50px;
    box-sizing: border-box;
    padding: 8px;
    display: grid;
    grid-template-columns: 5fr 1fr;
    background-color: var(--warm-gray);
    color: var(--warm-gray-text);
    align-content: center;
    z-index: 999999999999999999999;
    border-bottom: solid 1px var(--titan-blue);
}

.search-blocks-grid {
    display: grid;
    grid-template-columns: 200px 1fr 45px 45px;
    align-items: center;
    grid-area: 10px;
}

#div-search-blocks label {
    font-weight: bold;
    width: 200px;
    text-align: center;
}

#div-search-blocks input {
    font-weight: bold;
    padding: 5px;
    font-size: var(--font-size-large);
    color: var(--medium-blue);
    background-color: var(--default);
    width: 98%;
}

#div-search-blocks button {
    font-weight: bold;
    padding: 5px;
    font-size: var(--font-size-large);
    color: var(--dark-gray-text);
    background-color: var(--dark-gray);
    width: 40px;
    text-align: center;
    border-radius: 40px;
}

    #div-search-blocks button:hover {
        cursor: pointer;
        background-color: var(--white);
        color: var(--medium-blue);
    }

#infoblocks-search-results {
    display: grid;
    place-items: center;
}

.ib-item-tools {
    display: grid;
    grid-template-columns: 1fr 50px;
    gap: 10px;
}

.ib-item-tool-button {
    width: 46px;
    margin: auto;
}

    .ib-item-tool-button button {
        width: 44px;
        min-height: 30px;
        margin: auto;
        background-color: var(--information);
        color: var(--information-text);
        border: solid 1px var(--information-border);
        cursor: pointer;
        border-radius: var(--border-radius-small);
    }

        .ib-item-tool-button button * {
            background-color: inherit;
            color: inherit;
        }

        .ib-item-tool-button button.active {
            background-color: var(--dialog);
            color: var(--dialog-text);
            border-color: var(--onyx);
        }

        .ib-item-tool-button button i {
            font-size: var(--font-size-large);
        }

        .ib-item-tool-button button:hover {
            background-color: var(--dialog-text);
            color: var(--dialog);
        }

.toggle-block {
    border-radius: 8px;
    margin-right: 6px;
    height: 30px;
    width: 30px;
    min-width: fit-content !important;
    background-color: inherit;
    color: inherit;
    border: solid 1px var(--border-gray);
}

    .toggle-block:hover {
        cursor: pointer;
        background-color: var(--titan-blue);
        color: var(--titan-blue-text);
    }

    .toggle-block i {
        font-size: var(--font-size-small);
    }

#centercontent .OUSectionTitle .content-block-title {
    font-size: var(--font-size);
}

/* META DATA EDITORS */
#divEditInfoBlockLayoutStyle .edit-info-block-meta *[button-text='CSS'] {
    grid-area: block-css;
}

#divEditInfoBlockLayoutStyle .edit-info-block-meta *[button-text='Categories'] {
    grid-area: block-categories;
}

#divEditInfoBlockLayoutStyle .edit-info-block-meta *[button-text='Tags'] {
    grid-area: block-tags;
}

#divEditInfoBlockLayoutStyle .edit-info-block-meta *[button-text='Events'] {
    grid-area: block-events;
}

#divEditInfoBlockLayoutStyle .edit-info-block-meta *[button-text='Hours'] {
    grid-area: block-hours;
    position: sticky;
    top: 60px;
    height: fit-content;
}

#divEditInfoBlockLayoutStyle .edit-info-block-meta *[button-text='Details'] {
    grid-area: block-details;
}

/* CHECK FOR STOCK PHOTOS */
#centercontent .info-block-editor[class*="stock"] .OUSectionTitle {
    background-color: var(--box-shade-background-hover)
}

    #centercontent .info-block-editor[class*="stock"] .OUSectionTitle * {
        color: var(--my-white);
    }

/* FIX EXTRA PADDING FOR BACKGROUNDS */
.info-block-editor[class*='background'] {
    padding: 0px;
}


#centercontent .workspace-block.info-block-grid p.OUSectionTitle {
    margin-bottom: 15px;
}

#divEditPage {
    position: sticky;
    top: 50px;
    overflow-y: scroll;
    height: 90vh;
}

    /* width */
    #divEditPage::-webkit-scrollbar {
        width: 10px;
    }

    /* Track */
    #divEditPage::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px grey;
        border-radius: 10px;
    }

    /* Handle */
    #divEditPage::-webkit-scrollbar-thumb {
        background: var(--titan-blue);
        border-radius: 10px;
    }

        /* Handle on hover */
        #divEditPage::-webkit-scrollbar-thumb:hover {
            background: var(--light-blue);
        }

.info-block-editor [button-text='Details'] img {
    max-width: 100%;
    height: auto;
    width: 100px;
}

.info-block-item {
    display: grid;
    grid-template-columns: 4fr minmax(340px, 1fr);
    grid-template-areas: "Editor Meta";
    gap: 10px;
}

    .info-block-item .edit-info-block-meta {
        grid-area: Meta;
        /*width: 220px;*/
    }

    .info-block-item .edit-info-block-data {
        grid-area: Editor;
        text-align: start;
    }


#divEditPageWorkspace.info-block-events #divEditInfoBlockLayoutStyle .info-block-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
}

.info-block-events .info-block-editor.grid-item {
    flex-basis: 49%;
    align-content: baseline;
}

/*-------
        HOURS FIELDS
*/
#divEditPageWorkspace.info-block-hours {
    grid-template-columns: 185px 1fr 0px;
}

    #divEditPageWorkspace.info-block-hours #divEditInfoBlockLayoutStyle .info-block-grid {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5px;
    }

.info-block-hours .info-block-editor.grid-item {
    flex-basis: 99%;
}

.info-block-hours #divEditPage {
    height: unset;
    overflow: auto;
}

.info-block-hours .ib-preview-ajax {
    overflow-y: unset;
}

#divEditPageWorkspace.info-block-hours .ib-rows .info-block-item {
    grid-template-columns: 1fr;
    grid-template-areas: unset;
}

/*-- hide elements --*/
.info-block-hours .content-layout,
.info-block-hours .editor-categories, .info-block-hours .editor-tags,
.info-block-hours .edit-info-block-meta *[button-text='CSS'],
.info-block-hours .edit-info-block-meta *[button-text='Tags'],
.info-block-hours .edit-info-block-meta *[button-text='Categories'],
.info-block-hours .edit-info-block-meta *[button-text='Events'],
.info-block-hours .edit-info-block-meta *[button-text='Details'],
.info-block-hours .edit-info-block-data {
    display: none;
}


/*-- not enabled for show options always --*/

.info-block-dynamic .info-block-item:not(.options) {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "Editor";
}

#divEditInfoBlockContainer.regular-content .info-block-item:not(.options) .edit-info-block-meta {
    display: none;
}

.info-block-hours .TabEditingBlock.page-type {
    display: grid;
    grid-template-columns: 1fr;
}

.info-block-hours .info-block-item {
    grid-template-columns: 1fr;
    width: 200px;
}

.info-block-hours .edit-info-block-meta {
    grid-template-columns: 1fr;
    grid-area: unset;
}

.info-block-hours .info-block-item .edit-info-block-meta {
    display: grid !important;
    grid-template-areas: "block-hours";
}

.info-block-hours .edit-info-block-meta [label*="info block"] {
    border: 0px;
}

.info-block-hours .edit-info-block-meta *[toolbar='block-details'] {
    /* display: grid;
    grid-template-columns: 1fr 1fr;*/
    display: flex;
    flex-direction: column;
}

.info-block-hours .edit-info-block-meta *[button-text='Hours'] a:first-child {
    grid-column: span 2;
}


.small .info-block-item {
    grid-template-columns: 1fr;
    grid-template-areas: "Meta" "Editor";
}

    .small .info-block-item .edit-info-block-meta,
    .small .info-block-item .edit-info-block-data {
        width: unset;
    }

.info-block-content .info-block-item {
    grid-template-columns: 1fr minmax(0px, 10px);
}

    .info-block-content .info-block-item.options {
        grid-template-columns: 1fr minmax(240px, 350px);
    }

.info-block-hours #divEditInfoPreview,
.info-block-hours #divEditInfoPreview .data-preview {
    display: block;
}

    .info-block-hours #divEditInfoPreview .button-holder {
        display: none;
    }


/*-- hours control panel editor --*/
.info-block-hours .hours-holder {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1em;
}

.info-block-hours .edit-info-block-meta *[toolbar='block-details'] {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 13rem;
    max-height: 50vh;
    overflow-y: auto;
}

.hours-control-panel {
    flex-basis: calc(100% - 230px);
}

.hours-panel-frame {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1em;
    border: solid 1px var(--secondary);
    padding: 20px;
    border-radius: var(--border-radius-small);
    background-color: var(--default);
    color: var(--default-text);
    width: 100%;
}

.hours-workarea {
    flex: 1 1 auto;
    width: calc(100% - 340px);
}


    .hours-workarea details {
        border-radius: var(--border-radius);
        width: 100%;
        display: flex;
        flex-direction: column;
        background-color: var(--my-gray);
        color: var(--my-gray-text);
    }

        .hours-workarea details[open] {
            width: 100%;
            background-color: var(--my-gray);
            color: var(--my-gray-text);
        }

    .hours-workarea summary {
        background-color: var(--my-gray);
        color: var(--my-gray-text);
        border-radius: var(--border-radius);
        flex-basis: 100%;
        min-height: 60px;
        font-family: var(--editor-font-family);
    }

    .hours-workarea details summary:after {
        content: "\2b";
        font-family: var(--font-awesome-family);
        position: absolute;
        right: 40px;
        top: 0px;
        height: 60px;
        display: grid;
        align-content: center;
        font-size: var(--font-size-large);
    }

    .hours-workarea details[open] summary:after {
        content: "\f068";
    }

    .hours-workarea details[open] summary {
        font-size: var(--font-size-larger);
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
        margin-bottom: 0px;
    }

    .hours-workarea details .hours-basics-fields,
    .hours-workarea details .hours-extended-fields {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0px;
    }

    .hours-workarea details summary {
        flex-basis: 100%;
    }

    .hours-workarea p {
        align-items: center;
    }


        .hours-workarea p:not(.checkbox):not(.other-class) {
            flex-basis: 100%;
        }

    .hours-workarea hr {
        flex-basis: 100%;
        border-color: var(--secondary);
        margin: .4em;
    }

    .hours-workarea p.form-hours-location:not(.checkbox):not(.other-class),
    .hours-workarea p.form-hours-phone:not(.checkbox):not(.other-class),
    .hours-workarea p.form-hours-email:not(.checkbox):not(.other-class) {
        flex-basis: 33.33%;
    }

    .hours-workarea .hours-explained {
        border-top: solid 1px var(--border-gray);
        border-bottom: solid 1px var(--border-gray);
        font-size: var(--font-size-portal-small);
    }

    .hours-workarea label {
        display: grid;
        grid-template-columns: 1fr;
        gap: 3px;
    }

        .hours-workarea label span {
            font-size: var(--font-size-small);
            font-weight: 900;
        }

            .hours-workarea label span.input-hint,
            .hours-workarea label ul.input-hint li {
                font-size: var(--font-size-portal-small);
                font-weight: normal;
            }

        .hours-workarea label ul.input-hint li {
            margin: .2em;
            padding: 0px;
        }

            .hours-workarea label ul.input-hint li a:hover,
            .hours-workarea label ul.input-hint li a:focus {
                border-bottom: solid 3px var(--accent-1);
                text-decoration: none;
            }

        .hours-workarea label input, .hours-preview label select,
        .hours-workarea label textarea {
            font-size: var(--font-size);
            border-radius: var(--border-radius-small);
            background-color: var(--my-white);
            color: var(--my-white-text);
            border: solid 1px var(--border-ash);
            padding: 5px;
        }

    .hours-workarea p.checkbox, .hours-workarea p.other-class {
        flex-basis: 50%;
    }

        .hours-workarea p.checkbox label {
            display: flex;
            flex-direction: row-reverse;
            gap: 5px;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

    .hours-workarea input[type='checkbox'] {
        transform: scale(1.5);
        outline-offset: initial;
    }

    .hours-workarea p.checkbox span[id*="Hint"] {
        flex-basis: 100%;
        font-size: var(--font-size-portal-small);
    }

    .hours-workarea p.form-hours-use-weblink-title {
        flex-basis: 30%;
    }

    .hours-workarea p.form-hours-use-weblink-title {
        flex-basis: 40%;
    }

    .hours-workarea p.form-hours-weblink-text:not(.checkbox):not(.other-class) {
        flex-basis: 60%;
    }

    .hours-workarea p.form-hours-font-awesome-code:not(.checkbox):not(.other-class) {
        flex-basis: 60%;
    }

    .hours-workarea p.form-hours-default-closed:not(.checkbox):not(.other-class) {
        flex-basis: 40%;
    }

    .hours-workarea .hours-stock-class, .hours-workarea .hours-image-path {
        flex-basis: 49%;
    }

    .hours-workarea .test-stock-photo, .hours-workarea .test-image-path {
        height: 6em;
        padding: 0px;
        margin: 0px;
        background-size: cover;
    }

        .hours-workarea .test-image-path img {
            max-height: 6em;
            width: auto;
            padding: 0px;
            margin: auto;
            display: block;
        }

#main-content .hours-workarea input[type='checkbox']:focus, #main-content .hours-workarea input[type='checkbox']:focus-within {
    outline-offset: .1em;
    outline-width: 1px;
}

.hours-workarea .hours-tabs {
    display: flex;
    flex-direction: row;
    gap: 5px;
    border-bottom: dotted 1px var(--border-ash);
    padding: .2em;
    margin: .2em 1em;
}

    .hours-workarea .hours-tabs button {
        border-radius: var(--border-radius-small);
        border: solid 1px var(--border-ash);
    }

        .hours-workarea .hours-tabs button.button-data {
            background-color: var(--my-gray);
            color: var(--my-gray-text);
            padding-left: 30px;
            position: relative;
        }

            .hours-workarea .hours-tabs button.button-data.active:before {
                content: "\f00c";
                font-family: var(--font-awesome-family);
                position: absolute;
                top: 0px;
                left: 0px;
                width: 30px;
                display: grid;
                height: 100%;
                align-content: center;
            }

            .hours-workarea .hours-tabs button.button-data.active,
            .hours-workarea .hours-tabs button.button-data:hover, .hours-workarea .hours-tabs button.button-data:focus {
                background-color: var(--orange-hover);
                color: var(--orange-hover-text);
            }

.hours-workarea .edit-current-hours {
    padding: 8px;
    margin: 0px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    gap: .25em;
    list-style-type: none;
    container: edit-current-hours / inline-size;
}

.hours-workarea .hours-by-day {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
    align-items: start;
    width: 100%;
    border-bottom: solid 1px var(--border-gray);
    container: hours-by-day / inline-size;
}

.hours-workarea .hours-delete-date-range.active {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--my-white);
    color: var(--my-white-text);
    border-radius: var(--border-radius);
    border: solid 3px var(--border-ash);
    margin: 0px;
    margin-bottom: 12px;
    padding: 8px 20px;
}

.hours-workarea .hours-delete-date-range .confirm-delete-date-range {
    display: none;
}

.hours-workarea .hours-delete-date-range.active .confirm-delete-date-range {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    background-color: var(--information);
    color: var(--information);
    border: solid 2px var(--information-border);
    margin-top: .5em;
    border-radius: var(--border-radius-chamfer);
}

    .hours-workarea .hours-delete-date-range.active .confirm-delete-date-range p {
        flex-basis: 20%;
        align-content: center;
    }

        .hours-workarea .hours-delete-date-range.active .confirm-delete-date-range p:first-child {
            flex-basis: 58%;
            color: var(--information-text);
            font-weight: bold;
            font-size: var(--font-size-reduced);
        }

        .hours-workarea .hours-delete-date-range.active .confirm-delete-date-range p span {
            font-weight: normal;
            font-size: var(--font-size-small);
        }

        .hours-workarea .hours-delete-date-range.active .confirm-delete-date-range p button {
            border: solid 2px var(--border-ash);
            border-radius: var(--border-radius);
            background-color: var(--my-gray);
            color: var(--my-gray-text);
            padding: 1em;
            cursor: pointer;
        }

        .hours-workarea .hours-delete-date-range.active .confirm-delete-date-range p.confirm-yes button:hover,
        .hours-workarea .hours-delete-date-range.active .confirm-delete-date-range p.confirm-yes button:focus {
            border: solid 2px var(--alert-red-border);
            background-color: var(--alert-red);
            color: var(--alert-red-text);
        }

        .hours-workarea .hours-delete-date-range.active .confirm-delete-date-range p.confirm-no button:hover,
        .hours-workarea .hours-delete-date-range.active .confirm-delete-date-range p.confirm-no button:focus {
            border: solid 2px var(--information-border);
            background-color: var(--information-dark);
            color: var(--information-dark-text);
        }


.hours-workarea .hours-delete-date-range {
    flex-basis: 100%;
}

.hours-workarea p.p-delete-date-range {
    display: flex;
    flex-direction: column;
    align-items: end;
}

.hours-workarea .button-delete-date-range {
    font-size: var(--font-size-reduced);
    margin-right: 10px;
    border-radius: var(--border-radius-chamfer);
    height: fit-content;
    padding: .8em;
    background-color: var(--my-gray-hover);
    color: var(--my-gray-text);
    border: solid 1px var(--border-ash);
    cursor: pointer;
}

    .hours-workarea .button-delete-date-range:hover, .hours-workarea .button-delete-date-range:focus {
        background-color: var(--orange-hover);
        color: var(--orange-hover-text);
    }

.hours-workarea .div-active-days-options {
    display: flex;
    flex-direction: row;
    flex-basis: 100%;
}

    .hours-workarea .div-active-days-options ul {
        display: flex;
        flex-direction: row;
        gap: .6em;
        width: 100%;
        list-style-type: none;
        align-items: center;
        margin: 0px;
    }

        .hours-workarea .div-active-days-options ul li button {
            border-radius: var(--border-radius-chamfer);
            border: solid 1px var(--border-ash);
            background-color: var(--my-gray);
            color: var(--my-gray-text);
            padding: 6px 12px;
        }

            .hours-workarea .div-active-days-options ul li button:hover,
            .hours-workarea .div-active-days-options ul li button:focus {
                background-color: var(--orange-hover);
                color: var(--orange-hover-text);
            }



.hours-workarea .hours-the-date-range,
.hours-workarea ul.hours-by-day {
    background-color: var(--my-white);
    color: var(--my-white-text);
    border-radius: var(--border-radius);
    border: solid 1px var(--border-ash);
    margin: .25em;
    margin-bottom: 1em;
    padding: 8px 20px;
    width: 100%;
}

.hours-workarea ul.hours-by-day {
    flex-basis: 24%;
    min-width: 300px;

    @container edit-current-hours (inline-size < 1250px) {
        flex-basis: 32%;
        min-width: 250px;
    }

    @container edit-current-hours (inline-size < 900px) {
        flex-basis: 48%;
        min-width: 250px;
    }

    @container edit-current-hours (inline-size < 600px) {
        flex-basis: 100%;
    }
}

.hours-workarea ul.hours-by-day {
    height: min-content;
}

    .hours-workarea ul.hours-by-day li.all-day,
    .hours-workarea ul.hours-by-day li.day-time,
    .hours-workarea ul.hours-by-day li.day-note {
        display: none;
    }

    .hours-workarea ul.hours-by-day.active li.all-day,
    .hours-workarea ul.hours-by-day.active li.day-time,
    .hours-workarea ul.hours-by-day.active li.day-note {
        display: flex;
    }

    .hours-workarea ul.hours-by-day li {
        margin: 0px;
    }


        .hours-workarea ul.hours-by-day li p {
            margin: 0px;
        }


.hours-workarea .hours-by-day .hours-error-check {
    flex-basis: 100%;
}

.hours-workarea .hours-by-day .day-active {
    flex-basis: 18%;

    @container hours-by-day (inline-size < 1000px) {
        flex-basis: 20%;
    }

    @container hours-by-day (inline-size < 850px) {
        flex-basis: 28%;
    }

    @container hours-by-day (inline-size < 550px) {
        flex-basis: 100%;
    }
}

.hours-workarea .hours-by-day .all-day,
.hours-workarea .hours-by-day .all-day p.checkbox {
    flex-basis: 100%;
}

.hours-workarea .hours-by-day .day-time {
    flex-basis: 38%;

    @container hours-by-day (inline-size < 1000px) {
        flex-basis: 78%;
    }

    @container hours-by-day (inline-size < 850px) {
        flex-basis: 68%;
    }

    @container hours-by-day (inline-size < 550px) {
        flex-basis: 100%;
    }
}

.hours-workarea .hours-by-day .day-note {
    flex-basis: 40%;

    @container hours-by-day (inline-size < 1000px) {
        flex-basis: 100%;
    }
}

.hours-workarea .hours-by-day .hours-time input,
.hours-workarea .hours-by-day .hours-note input {
    width: 100%;
}

.hours-workarea .hours-by-day li.hours-error-check,
.hours-workarea .hours-notes div.hours-error-check {
    flex-basis: 100%;
    font-size: var(--font-size-small);
    background-color: var(--warning);
    color: var(--warning-text);
    font-weight: bold;
    border: solid 1px var(--warning-border);
    border-radius: var(--border-radius-chamfer);
    margin-bottom: .25em;
    padding: .45em;
    display: none;
}

    .hours-workarea .hours-by-day li.hours-error-check.active,
    .hours-workarea .hours-notes div.hours-error-check.active {
        display: flex;
    }

    .hours-workarea .hours-notes div.hours-error-check.active {
        display: flex;
        flex-direction: column;
        align-items: start;
    }

        .hours-workarea .hours-notes div.hours-error-check.active ul {
            padding-left: 0px;
            margin: 0px;
            width: 98%;
            list-style-type: none;
        }

            .hours-workarea .hours-notes div.hours-error-check.active ul li:before {
                content: "\f188";
                font-family: var(--font-awesome-family);
                left: 0px;
                top: 0px;
                height: 30px;
                width: 30px;
                display: grid;
                align-items: center;
            }

            .hours-workarea .hours-notes div.hours-error-check.active ul li {
                margin-bottom: .1em;
                background-color: inherit;
                color: inherit;
                border: 0px !important;
                padding: .2em;
                padding-left: 1em;
            }

.hours-workarea .information {
    background-color: inherit;
    color: inherit;
}

    .hours-workarea .information p:first-child {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: space-between;
    }

        .hours-workarea .information p:first-child button.button-instructions {
            position: relative;
            padding-left: 30px;
        }

            .hours-workarea .information p:first-child button.button-instructions:before {
                content: "\f05a";
                font-family: var(--font-awesome-family);
                position: absolute;
                left: 0px;
                width: 30px;
                top: 0px;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                height: 100%;
                font-size: var(--font-size);
            }

    .hours-workarea .information button.close-button {
        background: inherit;
        color: inherit;
        border: 0px;
        font-size: var(--font-size-extra-large);
        position: relative;
    }

    .hours-workarea .information p:first-child button.close-button:before {
        opacity: 0;
        pointer-events: none;
        transition: all .18s ease-out;
        content: attr(aria-label);
        position: absolute;
        bottom: 100%;
        width: max-content;
        z-index: 5;
        left: 50%;
        background-color: var(--primary);
        color: var(--primary-text);
        height: auto;
        font-size: var(--font-size-small);
        padding: .5em;
        align-items: center;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .hours-workarea .information p:first-child button.close-button:hover:before {
        opacity: 1;
        transform: translate(-50%, 0);
    }

    .hours-workarea .information div,
    .hours-workarea .information:not(.active) button.close-button {
        display: none;
    }

    .hours-workarea .information.active div {
        display: flex;
        flex-direction: column;
        padding: .2em 1.8em;
    }

.hours-workarea .information {
    background-color: inherit;
    color: inherit;
    border: solid 1px transparent;
    padding: 8px;
    transition: all .18s ease-in-out;
    border-radius: var(--border-radius);
}

    .hours-workarea .information.active {
        background-color: var(--information);
        color: var(--information-text);
        border: solid 1px var(--information-border);
    }

.hours-workarea .toolbar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-start;
    align-items: center;
    padding: 8px;
    border-bottom: solid 2px var(--border-ash);
    background-color: var(--light-gray);
    color: var(--light-gray-text);
}

    .hours-workarea .toolbar > button, .hours-workarea .toolbar > p:not(.checkbox):not(.other-class) {
        flex-basis: auto;
        width: fit-content;
        padding: .25em .8em;
        position: relative;
    }

        .hours-workarea .toolbar > button i {
            font-size: var(--font-size);
            margin-right: 10px;
            color: var(--secondary);
        }

    .hours-workarea .toolbar > button {
        font-size: var(--font-size-reduced);
        margin-right: 10px;
        border-radius: var(--border-radius-chamfer);
        height: fit-content;
        padding: .8em;
        padding-left: 2em;
        background-color: var(--my-gray-hover);
        color: var(--my-gray-text);
        border: solid 1px var(--border-ash);
    }

    .hours-workarea .toolbar .button-add {
        background-color: var(--secondary-hover);
        color: var(--secondary-hover-text);
        padding-left: .8em;
    }

    .hours-workarea .toolbar > button.active {
        padding-left: 30px;
    }

    .hours-workarea .toolbar > button.button-data:not(.active):before {
        content: "\f133";
        font-family: var(--font-awesome-family);
        position: absolute;
        height: 100%;
        align-content: center;
        width: 30px;
        left: 0px;
        text-align: center;
        display: grid;
    }

    .hours-workarea .toolbar > button.active:before {
        content: "\f00c";
        font-family: var(--font-awesome-family);
        position: absolute;
        height: 100%;
        align-content: center;
        width: 30px;
        left: 0px;
        text-align: center;
        display: grid;
    }

    .hours-workarea .toolbar > button.active,
    .hours-workarea .toolbar > button:hover, .hours-workarea .toolbar > button:focus {
        background-color: var(--orange-hover) !important;
        color: var(--orange-hover-text) !important;
    }

    .hours-workarea .toolbar label {
        grid-template-columns: auto auto;
    }

        .hours-workarea .toolbar label span {
            width: fit-content;
        }

    .hours-workarea .toolbar > p select {
        font-size: var(--font-size);
        border-radius: var(--border-radius-chamfer);
        height: fit-content;
        padding: .4em;
    }

    .hours-workarea .toolbar .data-date-range {
        border: dashed 3px var(--primary);
        padding: 10px;
        border-radius: var(--border-radius);
        display: none;
    }

.hours-workarea .confirm-delete {
    display: none;
}

    .hours-workarea .confirm-delete.active {
        flex-basis: 100%;
        display: flex;
        flex-direction: row;
        gap: 8px;
        border-radius: var(--border-radius-small);
        border: solid 2px var(--information-border);
        background-color: var(--information);
        color: var(--information-text);
        align-items: center;
        margin: 8px;
        padding: 8px 4px;
    }

.hours-workarea .toolbar .confirm-delete .confirm-text {
    flex-basis: 60%;
    font-size: var(--font-size);
    font-weight: bold;
}

    .hours-workarea .toolbar .confirm-delete .confirm-text span {
        font-size: var(--font-size-small);
        font-weight: normal;
    }

.hours-workarea .toolbar .confirm-delete .confirm-yes, .hours-workarea .toolbar .confirm-delete .confirm-no {
    flex-basis: 20%;
}

    .hours-workarea .toolbar .confirm-delete .confirm-yes button,
    .hours-workarea .toolbar .confirm-delete .confirm-no button {
        font-size: var(--font-size-reduced);
        cursor: pointer;
        background-color: var(--my-gray);
        color: var(--my-gray-text);
        border-radius: var(--border-radius-chamfer);
    }

        .hours-workarea .toolbar .confirm-delete .confirm-yes button:hover,
        .hours-workarea .toolbar .confirm-delete .confirm-yes button:focus {
            background-color: var(--alert-red-dark);
            color: var(--alert-red-dark-text);
            border: solid 1px var(--alert-red-border);
        }

        .hours-workarea .toolbar .confirm-delete .confirm-no button:hover,
        .hours-workarea .toolbar .confirm-delete .confirm-no button:focus {
            background-color: var(--information-dark);
            color: var(--information-dark-text);
            border: solid 1px var(--information-border);
        }


.hours-workarea .toolbar .confirm-delete button {
    font-size: var(--font-size);
    padding: .8em;
}

.hours-workarea .closure-notes {
    padding: 15px;
    margin: 0px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    list-style-type: none;
    container: closure-notes / inline-size;
}

    .hours-workarea .closure-notes li {
        background-color: var(--my-white);
        color: var(--my-white-text);
        border-radius: var(--border-radius);
        border: solid 1px var(--border-ash);
        margin: 0px;
        margin-bottom: 12px;
        padding: 8px 20px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
    }

        .hours-workarea .closure-notes li:not([type='info-closure']):not([type='info-special-note']):not([type='info-overwrite-hours']) {
            border: solid 4px var(--neutral);
        }

            .hours-workarea .closure-notes li:not([type='info-closure']):not([type='info-special-note']):not([type='info-overwrite-hours']) p.closurenote-type:not(.checkbox):not(.other-class) {
                background-color: var(--neutral);
                color: var(--neutral-text);
            }

        .hours-workarea .closure-notes li p {
            margin: 0px;
            padding: .2em .5em;
        }

            .hours-workarea .closure-notes li p.closurenote-type:not(.checkbox):not(.other-class) {
                flex-basis: 16%;
                border-radius: var(--border-radius);
                padding: .6em;

                @container closure-notes (inline-size < 1150px) {
                    flex-basis: 30%;
                }

                @container closure-notes (inline-size < 500px) {
                    flex-basis: 100%;
                    padding: .5em;
                    padding-top: .2em;
                    padding-bottom: 1em;
                }
            }

            .hours-workarea .closure-notes li p.closurenote-type.closure {
                background-color: var(--closed-item);
                color: var(--closed-item-text);
            }

            .hours-workarea .closure-notes li p.closurenote-type.special-note {
                background-color: var(--modify-item);
                color: var(--modify-item-text);
            }

            .hours-workarea .closure-notes li p.closurenote-type.overwrite-hours {
                background-color: var(--overwrite-item);
                color: var(--overwrite-item-text);
            }

            .hours-workarea .closure-notes li p.closurenote-type select {
                font-size: var(--font-size);
                padding: 4px;
                border-radius: var(--border-radius-chamfer);
            }

        .hours-workarea .closure-notes li[type='info-closure'] {
            border: solid 4px var(--closed-item-border);
        }

        .hours-workarea .closure-notes li[type='info-special-note'] {
            border: solid 4px var(--modify-item-border);
        }


        .hours-workarea .closure-notes li[type='info-overwrite-hours'] {
            border: solid 4px var(--overwrite-item-border);
        }

        .hours-workarea .closure-notes li .closurenote-hours {
            display: none;
        }

        .hours-workarea .closure-notes li[type='info-overwrite-hours'] .closurenote-hours {
            display: flex;
        }

        .hours-workarea .closure-notes li p.closurenote-date:not(.checkbox):not(.other-class) {
            flex-basis: 32%;

            @container closure-notes (inline-size < 1150px) {
                flex-basis: 70%;
            }

            @container closure-notes (inline-size < 500px) {
                flex-basis: 100%;
                padding: .5em;
            }
        }

        .hours-workarea .closure-notes li[type='info-overwrite-hours'] p.closurenote-date:not(.checkbox):not(.other-class) {
            flex-basis: 22%;

            @container closure-notes (inline-size < 1150px) {
                flex-basis: 70%;
            }

            @container closure-notes (inline-size < 500px) {
                flex-basis: 100%;
                padding: .5em;
            }
        }

        .hours-workarea .closure-notes li p.closurenote-hours:not(.checkbox):not(.other-class) {
            flex-basis: 28%;

            @container closure-notes (inline-size < 1150px) {
                flex-basis: 100%;
            }

            @container closure-notes (inline-size < 500px) {
                flex-basis: 100%;
                padding: .5em;
            }
        }

        .hours-workarea .closure-notes li p.closurenote-text:not(.checkbox):not(.other-class) {
            flex-basis: 38%;

            @container closure-notes (inline-size < 1150px) {
                flex-basis: 100%;
            }

            @container closure-notes (inline-size < 500px) {
                flex-basis: 100%;
                padding: .5em;
            }
        }

        .hours-workarea .closure-notes li[type='info-overwrite-hours'] p.closurenote-text:not(.checkbox):not(.other-class) {
            flex-basis: 18%;

            @container closure-notes (inline-size < 1150px) {
                flex-basis: 100%;
            }

            @container closure-notes (inline-size < 500px) {
                flex-basis: 100%;
                padding: .5em;
            }
        }

        .hours-workarea .closure-notes li p.closurenote-delete:not(.checkbox):not(.other-class) {
            flex-basis: 10%;
            align-content: center;
            align-items: center;
            justify-content: flex-end;

            @container closure-notes (inline-size < 1150px) {
                flex-basis: 100%;
                display: flex;
            }

            @container closure-notes (inline-size < 500px) {
                flex-basis: 100%;
                padding: .5em;
            }
        }

            .hours-workarea .closure-notes li p.closurenote-delete:not(.checkbox):not(.other-class) button i {
                font-size: var(--font-size-medium);
                margin-right: 10px;
            }

            .hours-workarea .closure-notes li p.closurenote-delete:not(.checkbox):not(.other-class) button:hover,
            .hours-workarea .closure-notes li p.closurenote-delete:not(.checkbox):not(.other-class) button:focus {
                background-color: var( --alert-red-dark);
                color: var(--alert-red-dark-text);
                border: solid 1px var(--alert-red-dark-border);
            }

        .hours-workarea .closure-notes li div.delete-confirm-closure-note-item {
            display: none;
        }


            .hours-workarea .closure-notes li div.delete-confirm-closure-note-item.active {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                flex-basis: 100%;
                margin: .6em;
                padding: .4em;
                background-color: var(--my-gray);
                color: var(--my-gray-text);
                border: solid 2px var(--my-gray-border);
                border-radius: var(--border-radius);
                gap: 15px;
                align-items: center;
            }

            .hours-workarea .closure-notes li div.delete-confirm-closure-note-item .delete-confirm-closure-note-item-message {
                font-size: var(--font-size-reduced);
                flex-basis: 50%;
            }

            .hours-workarea .closure-notes li div.delete-confirm-closure-note-item .closurenote-delete-yes,
            .hours-workarea .closure-notes li div.delete-confirm-closure-note-item .closurenote-delete-no {
                flex-basis: 20%;
                justify-content: center;
            }

            .hours-workarea .closure-notes li div.delete-confirm-closure-note-item button {
                border-radius: var(--border-radius);
            }

            .hours-workarea .closure-notes li div.delete-confirm-closure-note-item .closurenote-delete-yes button:hover,
            .hours-workarea .closure-notes li div.delete-confirm-closure-note-item .closurenote-delete-yes button:focus {
                background-color: var(--alert-red);
                color: var(--alert-red-text);
                border: solid 2px var(--alert-red-dark-border);
            }

            .hours-workarea .closure-notes li div.delete-confirm-closure-note-item .closurenote-delete-no button:hover,
            .hours-workarea .closure-notes li div.delete-confirm-closure-note-item .closurenote-delete-no button:focus {
                background-color: var(--secondary-hover);
                color: var(--secondary-hover-text);
                border: solid 2px var(--secondary-border);
            }

.hours-workarea .error-message {
    margin: 0px;
    padding: 0px;
}

.hours-preview {
    display: block;
    flex: 1 1 auto;
    width: 300px;
    padding: 10px;
    border-left: solid 1px var(--border-gray);
}

    .hours-preview label {
        display: grid;
        grid-template-columns: 1fr;
        font-size: var(--font-size-small);
    }

.hours-preview-data {
    position: sticky;
    top: 60px;
    display: block;
}

.preview-hours-widget {
}

.hours-widget-wrapper {
    border: solid 1px var(--border-ash);
    box-shadow: var(--box-shadow);
    color: var(--my-white-text);
    background-color: var(--my-white);
    border-radius: var(--border-radius-chamfer);
    padding: 0;
    margin: 1.5em .2em;
    display: flex;
    flex-direction: column;
}

    .hours-widget-wrapper > div {
        padding: .2em .8em;
    }

.widget-hours-background {
    border-top-left-radius: var(--border-radius-chamfer);
    border-top-right-radius: var(--border-radius-chamfer);
    background-position: center;
    background-size: cover;
}

    .widget-hours-background:not(.full, .half, .third, .two-thirds, .quarter, .three-quarters, .eighth) {
        min-height: 125px;
    }

    .widget-hours-background.blank-background:not(.full, .half, .third, .two-thirds, .quarter, .three-quarters, .eighth) {
        min-height: 8px;
        align-items: center;
    }

.hours-preview .preview-code {
    min-height: 300px;
    max-height: 500px;
    overflow: scroll;
    width: 100%;
}

.hours-preview .hours-widget-header > * {
    flex-basis: content;
    font-size: var(--font-size-large);
    margin: 0px;
    padding: .2em;
}

.hours-preview .widget-hours-background .hours-status,
.hours-preview .widget-hours-background .the-icon,
.hours-preview .widget-hours-background .the-title,
.hours-preview .widget-hours-background .the-desc {
    display: none;
}

.hours-preview .hours-widget-title-group {
    display: grid;
    grid-template-areas: "hours-title"
        "hours-status"
        "hours-description"
        "hours-notes";
    gap: .1em;
    margin: 0px;
    padding: 0px;
}

    .hours-preview .hours-widget-title-group.with-icon {
        grid-template-columns: 70px 1fr;
        grid-template-areas: "hours-icon hours-title"
            "hours-icon hours-status"
            "hours-description hours-description"
            "hours-notes hours-notes";
    }

        .hours-preview .hours-widget-title-group.with-icon.closed {
            grid-template-columns: 70px 1fr;
            grid-template-areas: "hours-icon hours-title"
                "hours-description hours-description"
                "hours-notes hours-notes";
            align-items: center;
        }

            .hours-preview .hours-widget-title-group.with-icon.closed .hours-status {
                display: none;
            }

    .hours-preview .hours-widget-title-group > p {
        margin: 0px;
        padding: .1em;
    }

.hours-preview .hours-widget-header .the-icon {
    grid-area: hours-icon;
    display: grid;
    font-size: 1.8em;
    width: auto;
    text-align: center;
    justify-content: center;
    align-items: center;
    border: solid 1px var(--my-white);
    background-color: var(--secondary);
    color: var(--secondary-text);
    border-radius: var(--border-radius-round);
    padding: .1em;
    aspect-ratio: 1 / 1;
    height: 64px;
}

.hours-preview .hours-widget-title-group:not(.with-icon) .the-icon {
    display: none;
}

.hours-preview .hours-widget-header .the-title {
    grid-area: hours-title;
    font-size: var(--font-size-large);
}

.hours-preview .widget-hours-background .hours-status,
.hours-preview .hours-widget-header .hours-status {
    grid-area: hours-status;
    font-size: var(--font-size-small);
    border: solid 1px var(--border-gray);
    background-color: var(--neutral);
    color: var(--neutral-text);
    padding: .1em .8em;
    border-radius: var(--border-radius);
    width: fit-content;
}

.hours-preview .hours-widget-header .the-desc {
    grid-area: hours-description;
    font-size: var(--font-size-small);
}

.hours-preview .hours-widget-header .the-header-note {
    grid-area: hours-notes;
    font-size: var(--font-size-reduced);
    padding: .4em;
    color: var(--dark);
    margin-top: .4em;
    margin-bottom: .4em;
    border-left: solid 4px var(--secondary-hover);
    box-shadow: var(--box-shadow-less);
}

    .hours-preview .hours-widget-header .the-header-note.no-note {
        display: none;
    }

.hours-preview .hours-widget-header .hours-widget-header-notes {
    padding: 0px;
    margin: 0px;
    list-style-type: none;
    width: 100%;
    text-align: left;
}

    .hours-preview .hours-widget-header .hours-widget-header-notes li {
        padding: .2em .4em;
        margin: 0px;
        font-size: var(--font-size-reduced);
        font-weight: 700;
        line-height: 1.2em
    }

        .hours-preview .hours-widget-header .hours-widget-header-notes li i {
            color: var(--secondary-hover);
            margin-right: .2em;
            font-weight: normal;
        }

        .hours-preview .hours-widget-header .hours-widget-header-notes li .date-range {
            color: var(--my-gray-text);
            margin-left: 2.2em;
            font-weight: normal;
            font-size: var(--font-size-tiny);
        }

.hours-preview .hours-widget-header,
.hours-preview .hours-widget-options {
    border-bottom: solid 1px var(--border-gray);
}

.hours-preview .hours-widget-header, .hours-preview .hours-widget-options {
    display: grid;
}

    .hours-preview .hours-widget-options > * {
        flex-basis: 100%;
        font-size: var(--font-size-small);
        margin: 0px;
        padding: .2em;
        align-content: center;
    }

    .hours-preview .hours-widget-options i,
    .hours-preview .hours-widget-time i {
        font-size: var(--font-size-medium);
        width: 20px;
    }

.hours-preview .hours-widget-time .todays-hours {
    margin: 0px;
    padding: .2em;
}

    .hours-preview .hours-widget-time .todays-hours .hours-title {
        margin: 0;
        padding: 0;
        font-size: var(--font-size-small);
        display: grid;
        grid-template-columns: 20px 1fr;
        align-items: center;
    }

        .hours-preview .hours-widget-time .todays-hours .hours-title.with-note span {
            grid-column: span 2;
            text-align: center;
            font-size: var(--font-size-medium);
            padding: .2em;
            font-weight: 700;
            border-bottom: solid 2px var(--orange);
        }

    .hours-preview .hours-widget-time .todays-hours .the-hours {
        margin: 0px;
        margin-left: 16px;
        font-size: var(--font-size-medium);
        text-align: right;
        padding-right: 5rem;
    }

.hours-preview .hours-widget-time details,
.hours-preview .hours-widget-notes-closures details,
.hours-preview .hours-widget-options details {
    margin: 0;
    margin-bottom: .25em;
    padding: 0;
    border: 0;
    width: 100%;
}

    .hours-preview .hours-widget-time details summary,
    .hours-preview .hours-widget-notes-closures details summary,
    .hours-preview .hours-widget-options details summary {
        margin: 0px;
        padding: .2em;
        background-color: var(--my-white);
        color: var(--secondary);
        grid-template-columns: 28px 1fr 25px;
        font-weight: normal;
        font-size: var(--font-size);
    }

        .hours-preview .hours-widget-time details summary i,
        .hours-preview .hours-widget-notes-closures details summary i,
        .hours-preview .hours-widget-options details summary i {
            margin: 0px;
            padding: 0;
            display: grid;
            align-content: center;
        }

    .hours-preview .hours-widget-time details[open] summary,
    .hours-preview .hours-widget-notes-closures details[open] summary,
    .hours-preview .hours-widget-options details[open] summary {
        border-bottom: solid 2px var(--secondary);
    }

    .hours-preview .hours-widget-time details summary:after,
    .hours-preview .hours-widget-notes-closures details summary:after,
    .hours-preview .hours-widget-options details summary:after {
        content: "\f078";
        font-family: var(--font-awesome-family);
        width: 22px;
        text-align: center;
    }

    .hours-preview .hours-widget-time details[open] summary:after,
    .hours-preview .hours-widget-notes-closures details[open] summary:after,
    .hours-preview .hours-widget-options details[open] summary:after {
        content: "\f00d";
    }

    .hours-preview .hours-widget-time details div,
    .hours-preview .hours-widget-notes-closures details div {
        margin: 0;
        padding: 0;
    }

    .hours-preview .hours-widget-time details ul,
    .hours-preview .hours-widget-notes-closures details ul {
        margin: 0px;
        padding: .2em;
        list-style-type: none;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: .2em;
        width: 100%;
        border-bottom: solid 1px var(--border-gray);
    }

        .hours-preview .hours-widget-time details ul.active {
            background-color: var(--my-gray);
            color: var(--my-gray-text);
        }

        .hours-preview .hours-widget-time details ul:last-child {
            border-bottom: 0px;
        }

        .hours-preview .hours-widget-time details ul li {
            flex: 1 1 auto;
            font-size: var(--font-size-reduced);
            line-height: 2em;
            margin-bottom: 0px;
        }

            .hours-preview .hours-widget-time details ul li.day-name {
                flex-basis: 42%;
            }

            .hours-preview .hours-widget-time details ul li.day-hours {
                flex-basis: 55%;
                text-align: right;
            }

            .hours-preview .hours-widget-time details ul li.day-note {
                flex-basis: 100%;
            }

    .hours-preview .hours-widget-notes-closures details ul {
        border-bottom: 0px;
    }

        .hours-preview .hours-widget-notes-closures details ul li {
            flex: 1 1 auto;
            flex-basis: 100%;
            font-size: var(--font-size-reduced);
            background-color: var(--my-gray);
            color: var(--my-gray-text);
            line-height: 2em;
            margin-bottom: .8em;
            padding: .5em;
        }

            .hours-preview .hours-widget-notes-closures details ul li:last-child {
                margin-bottom: 0px;
            }

            .hours-preview .hours-widget-notes-closures details ul li p {
                padding: 0px;
                margin: 0px;
            }

                .hours-preview .hours-widget-notes-closures details ul li p.closure-note,
                .hours-preview .hours-widget-notes-closures details ul li p.closure-hours {
                    padding-left: 0px;
                    margin: 0px;
                }

.hours-preview .hours-widget-notes-closures span.note-type,
.hours-preview .hours-widget-notes-closures li.closure-note-type {
    font-size: var(--font-size-tiny);
}

.hours-preview .closure-dates {
    font-size: var(--font-size-small);
    color: var(--secondary);
    font-weight: bold;
    background-color: inherit;
}

.hours-preview .hours-widget-notes-closures details ul {
    margin-bottom: .3em;
    border-bottom: solid 2px var(--border-gray);
}

.hours-preview .hours-widget-time details p,
.hours-preview .hours-widget-notes-closures details p,
.hours-preview .hours-widget-options details p {
    margin: 0px;
    padding: .8em .5em .1em .5em;
}

.hours-preview p span.closed-label, .hours-status {
    padding: .1em .9em;
    border-radius: var(--border-radius-chamfer);
    width: fit-content;
    margin-left: 5px;
}

    .hours-preview p span.closed-label, .hours-status.closed {
        border: solid 1px var(--pd-alert-border);
        background-color: var(--pd-alert) !important;
        color: var(--pd-alert-text) !important;
    }


    .hours-status.open {
        border: solid 1px var(--success-dark-border);
        background-color: var(--success-light) !important;
        color: var(--success-dark) !important;
    }

    .hours-status.opening-soon {
        border: solid 1px var(--information-dark-border);
        background-color: var(--information-light) !important;
        color: var(--information-dark-text) !important;
    }


    .hours-status.closing-soon {
        border: solid 1px var(--warning-dark-border);
        background-color: var(--warning-dark) !important;
        color: var(--warning-dark-text) !important;
    }

/*-- hours widget compact --*/
.hours-preview .hours-compact .hours-widget-wrapper {
    border-radius: 0px;
    border: solid 1px var(--border-gray);
}

.hours-preview .hours-compact .widget-hours-background {
    display: none;
}

.hours-preview .hours-compact .hours-widget-header {
    padding: .95em .85em;
}

    .hours-preview .hours-compact .hours-widget-header,
    .hours-preview .hours-compact .hours-widget-header a {
        background-color: var(--primary);
        color: var(--primary-text);
        text-decoration-color: var(--primary-hover-text);
    }

        .hours-preview .hours-compact .hours-widget-header a:hover,
        .hours-preview .hours-compact .hours-widget-header a:focus {
            background-color: var(--primary);
            color: var(--orange-hover);
            text-decoration-color: var(--orange);
        }


.hours-preview .hours-compact .hours-widget-title-group,
.hours-preview .hours-compact .hours-widget-title-group.with-icon,
.hours-preview .hours-compact .hours-widget-title-group.with-icon.closed {
    grid-template-columns: 1fr auto;
    grid-template-areas: "hours-title hours-status";
    align-items: start;
}

.hours-preview .hours-compact .hours-widget-header .the-title {
    font-size: var(--font-size-medium);
}

.hours-preview .hours-compact .hours-widget-title-group .hours-status {
    display: flex !important;
    align-items: center;
    gap: .2em;
}

.hours-preview .hours-compact .hours-widget-title-group .the-icon,
.hours-preview .hours-compact .hours-widget-title-group .the-desc,
.hours-preview .hours-compact .hours-widget-title-group .the-header-note {
    display: none;
}

.hours-preview .hours-compact .todays-hours .hours-title,
.hours-preview .hours-compact .hours-widget-time details:not(:first-child) {
    display: none;
}

.hours-preview .hours-compact .hours-widget-time .todays-hours {
    padding: 0px;
}

    .hours-preview .hours-compact .hours-widget-time .todays-hours .the-hours {
        margin: 0px;
        margin-left: 0px;
        font-size: var(--font-size);
    }

.hours-preview .hours-compact .hours-widget-notes-closures, .hours-preview .hours-compact .hours-widget-options {
    display: none;
}


/*-- hours widget icon --*/

.hours-preview .hours-icon .widget-hours-background {
    display: none;
}

.hours-preview .hours-icon .hours-widget-header {
    background-color: var(--my-white);
    color: var(--my-white-text);
    text-decoration-color: var(--primary-text-hover);
    border-top-left-radius: var(--border-radius-chamfer);
    border-top-right-radius: var(--border-radius-chamfer);
}

    .hours-preview .hours-icon .hours-widget-header a {
        background-color: var(--my-white);
        color: var(--secondary);
        text-decoration-color: var(--primary-hover-text);
    }

        .hours-preview .hours-icon .hours-widget-header a:hover,
        .hours-preview .hours-icon .hours-widget-header a:focus {
            background-color: var(--my-white);
            color: var(--secondary-hover);
            text-decoration-color: var(--orange);
        }

    .hours-preview .hours-icon .hours-widget-header .the-icon {
        background-color: var(--my-white);
        color: var(--orange-dark);
        border-radius: 0px;
        font-size: var(--font-size-extra-large);
    }

.hours-preview .hours-icon .hours-widget-title-group,
.hours-preview .hours-icon .hours-widget-title-group.with-icon,
.hours-preview .hours-icon .hours-widget-title-group.with-icon.closed {
    grid-template-columns: auto 1fr;
    grid-template-areas: "hours-icon hours-title"
        "hours-icon hours-status"
        "hours-description hours-description";
    align-items: start;
}

.hours-preview .hours-icon .hours-widget-header .the-title {
    font-size: var(--font-size-medium);
}

.hours-preview .hours-icon .hours-widget-title-group .hours-status {
    display: flex !important;
    align-items: center;
    gap: .2em;
}

.hours-preview .hours-icon .hours-widget-title-group .the-header-note {
    display: none;
}

.hours-preview .hours-icon .todays-hours .hours-title,
.hours-preview .hours-icon .hours-widget-time .hours-range-group {
    display: none;
}

.hours-preview .hours-icon .hours-widget-time .todays-hours {
    padding: 0px;
}

    .hours-preview .hours-icon .hours-widget-time .todays-hours .the-hours {
        margin: 0px;
        margin-left: 0px;
        font-size: var(--font-size);
    }

.hours-preview .hours-icon .hours-widget-notes-closures,
.hours-preview .hours-icon .hours-widget-options {
    display: none;
}


/*-- hours widget image compact --*/

.hours-preview .hours-image-compact .widget-hours-background {
    display: grid;
    min-height: 80px
}

    .hours-preview .hours-image-compact .widget-hours-background .hours-status {
        display: flex;
        height: fit-content;
        align-items: center;
        gap: .2em;
        justify-content: start;
        grid-area: unset;
        margin-top: auto;
    }

.hours-preview .hours-image-compact .hours-widget-header {
    background-color: var(--my-white);
    color: var(--my-white-text);
    text-decoration-color: var(--primary-hover-text);
    border-top-left-radius: var(--border-radius-chamfer);
    border-top-right-radius: var(--border-radius-chamfer);
    font-size: var(--font-size-medium);
}

    .hours-preview .hours-image-compact .hours-widget-header a {
        background-color: var(--my-white);
        color: var(--secondary);
        text-decoration-color: var(--primary-hover-text);
        font-size: var(--font-size-medium);
    }

        .hours-preview .hours-image-compact .hours-widget-header a:hover,
        .hours-preview .hours-image-compact .hours-widget-header a:focus {
            background-color: var(--my-white);
            color: var(--secondary-hover);
            text-decoration-color: var(--orange);
        }

    .hours-preview .hours-image-compact .hours-widget-header .the-icon {
        background-color: var(--my-white);
        color: var(--orange-dark);
        border-radius: 0px;
        font-size: var(--font-size-large);
        height: 44px;
    }

.hours-preview .hours-image-compact .hours-widget-title-group {
    grid-template-columns: 1fr;
    grid-template-areas: "hours-title";
    align-items: center;
}

    .hours-preview .hours-image-compact .hours-widget-title-group.with-icon,
    .hours-preview .hours-image-compact .hours-widget-title-group.with-icon.closed {
        grid-template-columns: 45px 1fr;
        grid-template-areas: "hours-icon hours-title";
        align-items: center;
    }

.hours-preview .hours-image-compact .hours-widget-header .the-title {
    font-size: var(--font-size-medium);
}

.hours-preview .hours-image-compact .hours-widget-title-group .hours-status,
.hours-preview .hours-image-compact .hours-widget-title-group .the-desc,
.hours-preview .hours-image-compact .hours-widget-title-group .the-header-note {
    display: none;
}

.hours-preview .hours-image-compact .todays-hours .hours-title,
.hours-preview .hours-image-compact .hours-widget-time .hours-range-group {
    display: none;
}

.hours-preview .hours-image-compact .hours-widget-time .todays-hours {
    padding: 0px;
}

    .hours-preview .hours-image-compact .hours-widget-time .todays-hours .the-hours {
        margin: 0px;
        margin-left: 0px;
        font-size: var(--font-size);
    }

.hours-preview .hours-image-compact .hours-widget-notes-closures,
.hours-preview .hours-image-compact .hours-widget-options {
    display: none;
}


/*-- hours widget image full --*/

.hours-preview .hours-image .widget-hours-background {
    display: grid;
}

    .hours-preview .hours-image .widget-hours-background .hours-status {
        display: flex;
        height: fit-content;
        align-items: center;
        gap: .2em;
        justify-content: start;
        grid-area: unset;
    }

.hours-preview .hours-image .hours-widget-header {
    background-color: var(--my-white);
    color: var(--my-white-text);
    text-decoration-color: var(--primary-hover-text);
    border-top-left-radius: var(--border-radius-chamfer);
    border-top-right-radius: var(--border-radius-chamfer);
    font-size: var(--font-size-large);
}

    .hours-preview .hours-image .hours-widget-header a {
        background-color: var(--my-white);
        color: var(--secondary);
        text-decoration-color: var(--primary-hover-text);
        font-size: var(--font-size-large);
    }

        .hours-preview .hours-image .hours-widget-header a:hover,
        .hours-preview .hours-image .hours-widget-header a:focus {
            background-color: var(--my-white);
            color: var(--secondary-hover);
            text-decoration-color: var(--orange);
        }

    .hours-preview .hours-image .hours-widget-header .the-icon {
        background-color: var(--my-white);
        color: var(--orange-dark);
        border-radius: 0px;
        height: auto;
        font-size: var(--font-size-large);
    }

.hours-preview .hours-image .hours-widget-title-group {
    grid-template-columns: 1fr;
    grid-template-areas: "hours-title"
        "hours-description"
        "hours-notes";
    align-items: center;
}

    .hours-preview .hours-image .hours-widget-title-group.with-icon,
    .hours-preview .hours-image .hours-widget-title-group.with-icon.closed {
        grid-template-columns: auto 1fr;
        grid-template-areas: "hours-icon hours-title"
            "hours-description hours-description"
            "hours-notes hours-notes";
        align-items: center;
    }

.hours-preview .hours-image .hours-widget-header .the-title {
    font-size: var(--font-size-medium);
}

.hours-preview .hours-image .hours-widget-title-group .hours-status {
    display: none;
}

.hours-preview .hours-image .todays-hours .hours-title {
    display: none;
}

.hours-preview .hours-image .hours-widget-time .todays-hours {
    padding: 0px;
}

    .hours-preview .hours-image .hours-widget-time .todays-hours .the-hours {
        margin: 0px;
        margin-left: 0px;
        font-size: var(--font-size);
    }

.hours-preview .hours-image .hours-widget-notes-closures,
.hours-preview .hours-image .hours-widget-options {
    display: none;
}


/*-- hours widget by week --*/

.hours-preview .hours-by-week .hours-widget-wrapper > div {
    padding: 0px;
}

.hours-preview .hours-by-week .hours-widget-wrapper .hours-widget-time > div {
    padding: .2em .8em;
}

.hours-preview .hours-by-week .widget-hours-background {
    display: none;
}

    .hours-preview .hours-by-week .widget-hours-background .hours-status {
        display: flex;
        height: fit-content;
        align-items: center;
        gap: .2em;
        justify-content: start;
        grid-area: unset;
    }

.hours-preview .hours-by-week .hours-widget-title-group {
    background-color: var(--primary);
    color: var(--primary-text);
    padding: 1em;
}

.hours-preview .hours-by-week .hours-widget-header {
    background-color: var(--primary);
    color: var(--primary-hover-text);
    text-decoration-color: var(--primary-hover-text);
    border-top-left-radius: var(--border-radius-chamfer);
    border-top-right-radius: var(--border-radius-chamfer);
    font-size: var(--font-size-large);
}

    .hours-preview .hours-by-week .hours-widget-header a {
        background-color: var(--primary);
        color: var(--primary-text);
        text-decoration-color: var(--primary-hover-text);
        font-size: var(--font-size-large);
        text-underline-offset: var(--text-underline-offset-more);
    }

        .hours-preview .hours-by-week .hours-widget-header a:hover,
        .hours-preview .hours-by-week .hours-widget-header a:focus {
            background-color: var(--primary);
            color: var(--primary-hover-text);
            text-decoration-color: var(--orange);
        }

    .hours-preview .hours-by-week .hours-widget-header .the-icon {
        border: 0px;
        background: inherit;
        color: inherit;
        border-radius: 0px;
        height: auto;
        font-size: var(--font-size-large);
    }

.hours-preview .hours-by-week .hours-widget-title-group {
    grid-template-columns: 1fr;
    grid-template-areas: "hours-title"
        "hours-description"
        "hours-notes";
    align-items: center;
    border-top-left-radius: var(--border-radius-chamfer);
    border-top-right-radius: var(--border-radius-chamfer);
}

    .hours-preview .hours-by-week .hours-widget-title-group.with-icon,
    .hours-preview .hours-by-week .hours-widget-title-group.with-icon.closed {
        grid-template-columns: auto 1fr;
        grid-template-areas: "hours-icon hours-title"
            "hours-description hours-description"
            "hours-notes hours-notes";
        align-items: center;
        border-top-left-radius: var(--border-radius-chamfer);
        border-top-right-radius: var(--border-radius-chamfer);
    }

.hours-preview .hours-by-week .hours-widget-header .the-title {
    font-size: var(--font-size-medium);
}

.hours-preview .hours-by-week .hours-widget-header .the-header-note {
    color: var(--primary-text);
    border-left: solid 4px var(--orange-hover);
    box-shadow: none;
}

.hours-preview .hours-by-week .hours-widget-header .hours-widget-header-notes li {
    color: var(--primary-text);
    background-color: var(--primary);
}

    .hours-preview .hours-by-week .hours-widget-header .hours-widget-header-notes li i {
        color: var(--orange-hover);
        background-color: var(--primary);
    }

.hours-preview .hours-by-week .hours-widget-title-group .hours-status {
    display: none;
}

.hours-preview .hours-by-week .todays-hours .hours-title {
    display: none;
}

.hours-preview .hours-by-week .hours-widget-time .todays-hours {
    padding: 0px;
}

    .hours-preview .hours-by-week .hours-widget-time .todays-hours .the-hours {
        margin: 0px;
        margin-left: 0px;
        font-size: var(--font-size);
    }

.hours-preview .hours-by-week .hours-widget-notes-closures,
.hours-preview .hours-by-week .hours-widget-options {
    display: none;
}

/*-- content preivew --*/
.preview-hours-calendar {
    display: none;
}
/*-- info block editor layouts --*/
.edit-info-block-meta {
    display: grid;
    grid-template-areas: "block-css"
        "block-categories"
        "block-tags"
        "block-details";
    padding: 4px;
    gap: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.edit-info-block-meta {
    /* transform: rotateY(90deg);*/
    transform-origin: right;
}

.info-block-item.options .edit-info-block-meta {
    transform: rotateY(0);
    transform-origin: right;
    transition: transform var(--transition-time) ease-in-out;
}

.info-block-item:not(.options) .edit-info-block-meta {
    display: none;
}

.open-options .info-block-item:not(.options) .edit-info-block-meta {
    display: grid;
}

.edit-info-block-meta *[label*='info block'] {
    border: solid 1px var(--black);
}

    .edit-info-block-meta *[label*='info block'], .edit-info-block-meta *[label*='info block'] * {
        background-color: var(--white);
        color: var(--white-text);
        text-align: left;
    }

.info-block-content .edit-info-block-meta {
    grid-template-columns: 1fr;
}

.info-block-content *[button-text='Hours'], .info-block-content *[button-text='Events'], .info-block-content *[button-text='Details'], .info-block-content *[button-text='Categories'], .info-block-content *[button-text='Tags'] {
    display: none;
}

.info-block-dynamic .info-block-item.options, .info-block-dynamic .open-options .info-block-item {
    display: grid;
    grid-template-columns: 1fr minmax(200px, 50%);
}

.info-block-dynamic .open-options .ib-item-tool-button {
    display: none !important;
}

.info-block-dynamic .edit-info-block-meta {
    display: grid;
    grid-template-columns: 1fr;
    align-content: start;
}

.info-block-dynamic *[button-text='Hours'], .info-block-dynamic *[button-text='Events'], .info-block-dynamic [class*='ib-slide'] *[button-text='Tags'], .info-block-dynamic [class*='ib-slide'] .ib-item-tool-button {
    display: none !important;
}
/*-- extra wide editor --*/
.wide-editor .info-block-item, #divEditInfoBlockContainer.wide-editor.open-options .info-block-item {
    grid-template-columns: 1fr;
    grid-template-areas: unset;
}

    .wide-editor .info-block-item .edit-info-block-meta, .wide-editor .info-block-item .edit-info-block-data {
        grid-column-start: unset;
        grid-column-end: unset;
        grid-row-start: unset;
        grid-row-end: unset;
    }
/*-- apps editor --*/
.ib-app .info-block-item, .ib-app .info-block-item:not(.options) {
    grid-template-columns: 1fr;
}

.ib-app:not(.open-options) .info-block-item:not(.options) .edit-info-block-data {
    grid-area: unset;
}

.ib-app.open-options .info-block-item {
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "Editor Meta";
}

    .ib-app.open-options .info-block-item .edit-info-block-data {
        grid-template-columns: 1fr 1fr;
    }
/*-- directory editor --*/
.editor-dir .info-block-item, .editor-dir .info-block-item:not(.options) {
    grid-template-columns: 1fr 1fr;
}

.editor-dir .edit-info-block-meta {
    transform: unset;
    display: grid !important;
    /* grid-template-columns: 1fr 1fr 1fr;*/
    grid-column-start: unset;
    grid-column-end: unset;
}

    .editor-dir .edit-info-block-meta [button-text="Details"] {
        grid-row-start: 1;
        grid-row-end: 2;
        grid-column: span 3;
    }

    .editor-dir .edit-info-block-meta [button-text="CSS"] {
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 2;
    }

    .editor-dir .edit-info-block-meta [button-text="Categories"] {
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start: 2;
        grid-column-end: 3;
    }

    .editor-dir .edit-info-block-meta [button-text="Tags"] {
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start: 3;
        grid-column-end: 4;
    }

.editor-dir .edit-info-block-data {
    grid-column-start: 2;
    grid-column-end: 3;
}

.editor-dir .info-block-item.options {
    grid-template-columns: 1fr 1fr;
}

.editor-dir [toolbar="block-details"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
    /* flex-direction: row;
    flex-wrap: wrap;*/
    gap: 10px;
}

    .editor-dir [toolbar="block-details"] p {
        /* flex-basis: 48%;*/
        word-break: break-all;
    }

.edit-info-block-meta * {
    background-color: var(--white);
    color: var(--white-text);
}

.edit-info-block-meta p {
    margin-bottom: unset;
    padding: 4px;
    width: unset;
    position: relative;
    z-index: 5;
}

.display-tags-cats.label-elements li {
    display: grid;
    grid-template-columns: 40px 100px 40px;
    gap: 5px;
}

    .display-tags-cats.label-elements li.show-range {
        grid-template-columns: 1fr;
        align-content: center;
    }

#ul-show-range {
    margin-top: 10px;
}

    #ul-show-range li {
        margin-bottom: 10px;
    }

#p-sticky-edit {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
}

.display-tags-cats button.active {
    background-color: var(--medium-blue);
    color: var(--medium-blue-text);
}
/*-- slides or media layouts --*/
.info-block-dynamic [class*='ib-slide'].open-options .info-block-item, .info-block-dynamic [class*='ib-slide'] .info-block-item {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "Editor Meta";
}

.info-block-dynamic [class*='ib-slide'] .edit-info-block-meta {
    transform: unset;
}
/*-- blog editor --*/
.ib-blog .info-block-item, .ib-blog .info-block-item:not(.options) {
    grid-template-columns: 1fr;
}

.ib-blog:not(.open-options) .info-block-item:not(.options) .edit-info-block-data {
    grid-area: unset;
}

.ib-blog.open-options .info-block-item {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "Editor Meta";
}

    .ib-blog.open-options .info-block-item .edit-info-block-data {
        grid-template-columns: 1fr 1fr;
    }
/*------------
    DYNAMIC CONTENT PREVIEW OPTIONS
*/
.ib-presentation-icon {
    /*  position: absolute;
    top: 8px;
    right: 10px;
    width: 40px;*/
    margin: 0px;
}

    .ib-presentation-icon.second-row {
        top: 60px;
    }

        .ib-presentation-icon i, .ib-presentation-icon.second-row i {
            margin: 0px;
        }

.ib-presentation-icon {
    background-color: var(--dark);
    color: var(--dark-text);
    border: solid 1px var(--primary);
    border-radius: var(--border-radius-small);
    padding: 8px;
    cursor: pointer;
}

#ib-preview-options {
    position: relative;
    z-index: 5;
    margin: 8px;
    padding: 8px;
    width: calc(100% - 16px);
    min-height: 5px;
    height: 8px;
    background-color: var(--dialog);
    color: var(--dialog-text);
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    border-top: solid 2px var(--dark-gray);
    transform: rotateX(90deg);
    transform-origin: top center;
    transition: transform var(--transition-time) ease-in-out, height 1s ease-in-out;
}

    #ib-preview-options * {
        opacity: 0;
        transition: opacity var(--transition-time-fast) ease-in-out;
    }

    #ib-preview-options.active {
        transform: rotateX(0);
        height: auto;
        transform-origin: top center;
        transition: transform var(--transition-time) ease-in-out, height var(--transition-time) ease-in-out;
    }

        #ib-preview-options.active * {
            opacity: 1;
            transition: opacity var(--transition-time) ease-in-out;
        }

    #ib-preview-options .OUSectionTitle {
        color: var(--inherit);
        border-color: var(--white);
        margin: 0px;
    }

#ib-preview-option-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: min-content;
    gap: 10px;
    justify-content: center;
}

#ib-preview-list-options p label {
    display: grid;
    grid-template-columns: 220px 30px;
}
/**----------------
    OU EDITOR CLASS BUILDER: Slideshows / Events / Galleries / etc
    this class builds a workspace where the options are on the left and the work area is on the right

*/
.ou-editor-class-builder {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.display-tags-cats {
    margin: 0px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    list-style-type: none;
    padding: 0px;
    gap: 10px;
}

#div-show-blocks .display-tags-cats {
    grid-template-columns: 1fr 1fr;
}

#btnShowAll {
    grid-column: span 2;
}

.display-tags-cats button {
    width: 100%;
    word-break: keep-all;
    padding: 8px;
    border: solid 1px var(--coal);
    /*text-transform: capitalize;*/
}

    .display-tags-cats button:hover {
        background-color: var(--titan-blue);
        color: var(--titan-blue-text);
        border: solid 1px var(--black);
        cursor: pointer;
    }
/*--- FIELD SETTINGS TO SHOW WHAT DATA HAS BEEN TAGGED AS */
.info-multi-fields-error, .info-contact, .info-department, .info-unit, .info-role, .info-status, .info-position, .info-degree, .info-lifespan, .info-medium, .info-subject, .info-time, .info-date, .info-day-of-week, .info-reocurrance, .info-closure, .info-cost, .info-cost-student, .info-cost-faculty-staff, .info-cost-alumni, .info-location, .info-email, .info-phone, .info-website, .info-audience, .info-hours-title, .info-hours-unique, .info-hours-location, .info-closure-text, .info-hours-active, .info-hours-display, .info-hours-override, .info-hours-header, .info-hours-image, .info-event-feed-rss, .info-event-feed-xml, .info-event-feed-json, .info-event-feed-function, .info-title, .info-image, .info-description, .info-csuf-event, .info-event-sponsor, .info-rsvp, .info-registration, .info-virtual, .info-video, .info-category, .info-is-student, .info-is-faculty, .info-is-staff, .info-is-public, .info-group, .info-dress, .info-contact-name, .info-contact-first, .info-contact-last, .info-contact-headshot, .info-item-override-pub-date, .info-item-override-update-date, .info-item-date, .info-item-time, .info-item-date-time, .info-alternate, .info-hours-primary, .info-hours-ignore-primary, .info-item-pubdate, .info-item-sort-rank, .info-item-update, .info-item-title, .info-item-desc-text, .info-item-location, .info-item-image-header, .info-item-image-preview, .info-user-phone, .info-user-email, .info-user-office, .info-user-hours, .info-user-web, .info-item-web, .info-website, .info-item-active, .info-contact-pronouns, .flex-list, .full-panel, .top-panel, .middle-panel, .bottom-panel {
    margin-top: 20px;
    position: relative;
}

.flex-list, .full-panel, .top-panel, .middle-panel, .bottom-panel {
    margin-top: 2.2em;
}

    .flex-list:before, .full-panel:before, .top-panel:before, .middle-panel:before, .bottom-panel:before {
        position: absolute;
        font-size: var(--font-size-small);
        color: var(--medium-blue);
        top: -2em;
        left: 4px;
        font-weight: 600;
    }

.info-multi-fields-error:before, .info-contact:before, .info-department:before, .info-unit:before, .info-role:before, .info-status:before, .info-position:before, .info-degree:before, .info-lifespan:before, .info-medium:before, .info-subject:before, .info-date:before, .info-time:before, .info-day-of-week:before, .info-reocurrance:before, .info-closure:before, .info-cost:before, .info-cost-student:before, .info-cost-faculty-staff:before, .info-cost-alumni:before, .info-location:before, .info-email:before, .info-phone:before, .info-website:before, .info-audience:before, .info-hours-title:before, .info-hours-unique:before, .info-hours-location:before, .info-closure-text:before, .info-hours-active:before, .info-hours-display:before, .info-hours-override:before, .info-hours-header:before, .info-hours-image:before, .info-item-date:before, .info-item-time:before, .info-item-date-time:before, .info-alternate:before, .info-hours-primary:before, .info-hours-ignore-primary:before, .info-event-feed-rss:before, .info-event-feed-xml:before, .info-event-feed-json:before, .info-event-feed-function:before, .info-title:before, .info-image:before, .info-description:before, .info-csuf-event:before, .info-event-sponsor:before, .info-rsvp:before, .info-event-cost:before, .info-registration:before, .info-virtual:before, .info-video:before, .info-category:before, .info-is-student:before, .info-is-faculty:before, .info-is-staff:before, .info-is-public:before, .info-group:before, .info-dress:before, .info-contact-name:before, .info-contact-first:before, .info-contact-last:before, .info-contact-headshot:before, .info-website:before, .info-item-sort-rank:before, .info-item-pubdate:before, .info-item-update:before, .info-item-title:before, .info-item-desc-text:before, .info-item-location:before, .info-item-image-header:before, .info-item-image-preview:before, .info-user-phone:before, .info-user-email:before, .info-user-office:before, .info-user-hours:before, .info-user-web:before, .info-item-web:before, .info-item-active:before, .info-item-override-pub-date:before, .info-item-override-update-date:before, .info-contact-pronouns:before {
    position: absolute;
    font-size: var(--font-size-small);
    color: var(--medium-blue);
    top: -18px;
    left: 4px;
    font-weight: 600;
}

.info-item-active:before {
    content: "Active (Y/N)";
}

.info-item-sort-rank:before {
    content: "Sort Rank (will not display)";
}

.info-contact-first:before {
    content: "First Name";
}

.info-contact-last:before {
    content: "Last Name";
}

.info-contact-pronouns:before {
    content: "Pronouns";
}

.info-contact-headshot:before {
    content: "User/Item Image";
}

.info-department:before {
    content: "Department ";
}

.info-unit:before {
    content: "Unit ";
}

.info-role:before {
    content: "Role ";
}

.info-status:before {
    content: "Status ";
}

.info-position:before {
    content: "Position";
}

.info-degree:before {
    content: "Degree";
}

.info-lifespan:before {
    content: "Lifespan";
}

.info-medium:before {
    content: "Medium";
}

.info-subject:before {
    content: "Subject";
}

.info-date:before {
    content: "Start Date | End Date";
}

.info-time:before {
    content: "Start Time | End Time";
}

.info-day-of-week:before {
    content: "Days (Sun-Sat or Mon, Tue, etc)";
}

.info-alternate:before {
    content: "Alternate Time: Date(s) | Hours(s)";
}

.info-hours-primary:before {
    content: "Is Primary Hours (Y)"
}

.info-hours-ignore-primary:before {
    content: "Ignore Primary Hours (Y)"
}

.info-closure-text:before {
    content: "Default Closed Text"
}

.info-closure-text:before {
    content: "Default Closed Text"
}

.info-reocurrance:before {
    content: "Reocurrance (Sun-Sat or Mon, Tue, etc)";
}

.info-closure:before {
    content: "Closed Date(s) | Closed Text";
}

.info-hours-title:before {
    content: "Hours Title";
}

.info-hours-location:before {
    content: "Building / Desk Location";
}

.info-hours-unique:before {
    content: "Is Unqiue Hours (yes, no)";
}

.info-hours-active:before {
    content: "Active Status (yes, no)";
}

.info-hours-header:before {
    content: "Display in Header (yes, no)";
}

.info-hours-override:before {
    content: "Is Override (yes, no)";
}

.info-hours-display:before {
    content: "Display in Header (yes, no)";
}

.info-hours-image:before {
    content: "Hours Image";
}

.info-event-feed-rss:before {
    content: "Events Feed URL - RSS";
}

.info-event-feed-xml:before {
    content: "Events Feed URL - XML";
}

.info-event-feed-json:before {
    content: "Events Feed URL - JSON";
}

.info-event-feed-function:before {
    content: "JS Processing Function For Feed";
}

.info-title:before {
    content: "Title";
}

.info-image:before {
    content: "Event Image";
}

.info-description:before {
    content: "Event Description";
}

.info-location:before {
    content: "Location";
}

.info-csuf-event:before {
    content: "CSUF Event (Y/N)";
}

.info-event-sponsor:before {
    content: "Event Sponsor";
}

.info-category:before {
    content: "Categories";
}

.info-rsvp:before {
    content: "RSVP Required";
}

.info-cost:before {
    content: "Cost To Attend (general)";
}

.info-cost-student:before {
    content: "Cost To Attend (student)";
}

.info-cost-faculty-staff:before {
    content: "Cost To Attend (fac/staff)";
}

.info-cost-alumni:before {
    content: "Cost To Attend (alumni)";
}

.info-registration:before {
    content: "Registration Link";
}

.info-audience:before {
    content: "Audience";
}

.info-is-student:before {
    content: "Students (limits or restrictions)";
}

.info-is-faculty:before {
    content: "Faculty (limits or restrictions)";
}

.info-is-staff:before {
    content: "Staff (limits or restrictions)";
}

.info-is-public:before {
    content: "Public (limits or restrictions)";
}

.info-group:before {
    content: "Group/Organization";
}

.info-dress:before {
    content: "Dress Code";
}

.info-contact-name:before {
    content: "Contact Name";
}

.info-email:before {
    content: "Email";
}

.info-phone:before {
    content: "Phone";
}

.info-website:before {
    content: "Website Link";
}

.info-item-override-pub-date:before {
    content: "Override Publish Date ";
}

.info-item-override-update-date:before {
    content: "Override Last Updated Date ";
}

.info-item-date:before {
    content: "Item Date: depreciated, use Item Date Time";
}

.info-item-time:before {
    content: "Item Time: depreciated, use Item Date Time";
}

.info-item-date-time:before {
    content: "Item Date and Time: (date | time)";
}

.info-item-title:before {
    content: "Item Title ";
}

.info-item-desc-text:before {
    content: "Description Text";
}

.info-item-location:before {
    content: "Location ";
}

.info-item-image-header:before {
    content: "Header Image ";
}

.info-item-image-preview:before {
    content: "Preview Image ";
}

.info-user-phone:before {
    content: "User Phone ";
}

.info-user-email:before {
    content: "Email ";
}

.info-user-office:before {
    content: "Office ";
}

.info-user-hours:before {
    content: "Office Hours ";
}

.info-user-web:before {
    content: "User Website ";
}

.info-item-web:before {
    content: "Item Website ";
}

.info-virtual:before {
    content: "Virtual Link ";
}

.info-video:before {
    content: "Video Link ";
}

.error-found:before {
    color: var(--brick-red-text);
    background-color: var(--brick-red);
}

.info-multi-fields-error:before {
    content: " Item Has Multiple Fields! ";
    color: var(--brick-red-text);
    background-color: var(--brick-red);
    padding: 1px 8px;
    top: -24px
}

.flex-list:before {
    content: "[ Flex List ]";
}

.full-panel:before {
    content: "[ Full Panel ]";
}

.top-panel:before {
    content: "[ Top Panel ]";
}

.middle-panel:before {
    content: "[ Middle Panel ]";
}

.bottom-panel:before {
    content: "[ Bottom Panel ]";
}

.flex-list.full-panel:before {
    content: "[ Flex List & Full Panel ]";
}

.flex-list.top-panel:before {
    content: "[ Flex List & Top Panel ]";
}

.flex-list.middle-panel:before {
    content: "[ Flex List & Middle Panel ]";
}

.flex-list.bottom-panel:before {
    content: "[ Flex List & Bottom Panel ]";
}
/*-------
        EVENTS FIELDS
*/
#divEditPageWorkspace.info-block-events {
    grid-template-columns: 200px 1fr 10px;
}

.info-block-events #divEditInfoBlockLayoutStyle .info-block-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.info-block-events .info-block-item .edit-info-block-meta {
    display: grid !important;
}

.info-block-events #divEditPage {
    height: unset;
    overflow: auto;
}

.info-block-events .content-layout, .info-block-events .editor-categories, .info-block-events .editor-tags, .info-block-events .edit-info-block-meta *[button-text='Hours'], .info-block-events .edit-info-block-meta *[button-text='Details'], .info-block-events .edit-info-block-meta *[button-text='CSS'], .info-block-events .edit-info-block-meta *[button-text='Tags'], .info-block-events .edit-info-block-meta *[button-text='Categories'], .info-block-events .edit-info-block-data {
    display: none;
}

.info-block-events .TabEditingBlock.page-type {
    display: grid;
    grid-template-columns: 1fr;
}

.info-block-events .info-block-item {
    grid-template-columns: 1fr;
}

.info-block-events .edit-info-block-meta {
    grid-template-columns: 1fr;
    grid-area: unset;
    grid-template-areas: "block-events";
    word-break: break-all;
}

    .info-block-events .edit-info-block-meta [label*="info block"] {
        border: 0px;
    }

.info-block-events .edit-info-block-meta {
    transform: none;
}

.info-block-events #divEditInfoPreview, .info-block-events #divEditInfoPreview .data-preview {
    display: block;
}

.info-block-events .button-holder {
    display: none !important;
}

#div-event-preview-builder {
    display: none;
}

.info-block-events #div-event-preview-builder {
    display: block;
    position: sticky;
    top: 49px;
    height: 50px;
    width: 100%;
    overflow: hidden;
    background-color: var(--my-gray);
    color: var(--my-gray-text);
    z-index: 99999999999999999999999;
}

#div-event-preview-builder.active {
    height: 500px;
}

#div-event-preview-builder .title-bar {
    display: grid;
    width: 100%;
    grid-template-columns: 3fr 1fr;
    gap: 10px;
    border-bottom: solid 2px var(--border-gray);
    align-content: center;
    height: 48px;
    margin: 0px;
}

.dual-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

    .dual-options p {
        padding: 2px;
        margin: 0px;
    }

#divEventsAllCalendars {
}

.choose-calendar-legend {
    margin: 0px;
    padding: 2px;
    border-bottom: solid 1px var(--warm-gray);
}

    .choose-calendar-legend i {
        color: var(--orange);
        font-weight: normal;
    }

.choose-calendar {
    height: 200px;
    overflow-y: scroll;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
}

    .choose-calendar p {
        flex-basis: 24%;
        margin: 0px;
        padding: 1px;
        position: relative;
        border-bottom: solid 1px var(--warm-gray);
    }

    .choose-calendar label {
        display: flex;
        flex-direction: row-reverse;
        gap: 4px;
        align-items: flex-start;
        justify-content: flex-end;
    }

        .choose-calendar label span {
            display: flex;
            align-items: start;
            flex-direction: row-reverse;
        }

        .choose-calendar label i {
            color: var(--orange);
            float: left;
            padding-right: 5px;
        }

.info-block-events #div-ib-layout-builder, .info-block-events #div-ib-layout-builder-gallery, .info-block-events #div-ib-dynamic-preview-options, .info-block-events #div-ib-dynamic-snapshot-options, .info-block-events #div-ib-dynamic-newsletter-options .info-block-events #div-ib-search-options {
    display: none;
}
/*----------------------------------------------------------------------------
    INFO BLOCK LAYOUT BUILDER - THIS IS INSIDE THE INFO BLOCK CONTENT EDITOR
----------------------------------------------------------------------------------*/
#div-ib-layout-builder, #div-ib-layout-builder-gallery, #div-ib-dynamic-preview-options, #div-ib-dynamic-snapshot-options, #div-ib-dynamic-gallery-options, #div-ib-dynamic-newsletter-options, #div-ib-search-options {
    transform: rotateY(90deg);
    position: fixed;
    left: 269px;
    top: 53px;
    z-index: 9999999999;
    height: calc(100vh - 75px);
    width: calc(100vw - 300px);
    background-color: var(--off-white);
    color: var(--off-white-text);
    border: solid 1px var(--gray);
    padding: 10px;
    box-shadow: 0px 0px 3px rgba(0,0,0,.8);
}

    #div-ib-layout-builder.active, #div-ib-layout-builder-gallery.active, #div-ib-dynamic-preview-options.active, #div-ib-dynamic-snapshot-options.active, #div-ib-dynamic-gallery-options.active, #div-ib-dynamic-newsletter-options.active, #div-ib-search-options.active {
        transform: rotateY(0);
        transition: transform var(--transition-time) ease-in-out;
        transform-origin: left;
    }

[id*='div-ib-layout-builder'] #div-layout-preview-holder {
    display: grid;
    grid-template-columns: minmax(400px, 1fr) 1fr 1fr;
    grid-template-rows: max-content;
    gap: 10px;
    height: calc(100vh - 95px);
}

.ib-dynamic-presentation-worksheet {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 20px;
}

.ib-presentation-title {
    font-size: var(--font-size-small);
    margin: 0px;
    padding: 0px;
}

#ib-config-feed-blog p, #ib-config-feed-app p, #ib-config-feed-directory p {
    margin: 0;
    padding: 4px;
}

.ib-dynamic-presentation-worksheet fieldset {
    font-size: var(--font-size-reduced);
    border: solid 1px var(--information-border);
    border-radius: var(--border-radius-small);
    margin-top: 8px;
}

    .ib-dynamic-presentation-worksheet fieldset legend {
        font-size: var(--font-size-small);
        color: var(--primary);
    }

    .ib-dynamic-presentation-worksheet fieldset label {
        float: none;
        width: unset;
    }

        .ib-dynamic-presentation-worksheet fieldset label input[type='radio'] {
            float: left;
            margin-right: 4px;
        }

.ib-dynamic-setup-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0px;
    margin-bottom: 10px;
    padding: 0px;
    gap: 10px;
}

    .ib-dynamic-setup-options button {
        width: 100%;
        padding: 12px 8px;
        font-size: 1.2em;
        text-align: center;
        border: 0px;
        background-color: inherit;
        color: inherit;
        border-bottom: solid 2px var(--light-gray);
        cursor: pointer;
    }

        .ib-dynamic-setup-options button.active {
            color: var(--primary);
            border-bottom: solid 2px var(--primary);
        }

.ib-datatype-options {
    display: flex;
    flex-direction: row;
    flex-grow: inherit;
    flex-wrap: wrap;
    gap: 10px;
    padding-top: 10px;
}

    .ib-datatype-options > div {
        padding: 8px;
        border: solid 1px var(--information-border);
        flex-basis: calc(50% - 5px);
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: max-content;
        font-size: var(--font-size-reduced);
        background-color: var(--information);
        color: var(--information-text);
        border-radius: var(--border-radius-small);
        align-items: end;
    }

        .ib-datatype-options > div p:last-child {
            margin: 0px;
            display: grid;
            align-content: end;
        }

        .ib-datatype-options > div label {
            width: unset;
        }

    .ib-datatype-options label input[type='radio'] {
        float: left;
        margin-right: 8px;
    }

#div-ib-dynamic-preview-options fieldset p.explain {
    padding-top: 10px;
    font-size: var(--font-size-small);
}

.data-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-content: start;
    gap: 10px;
}

    .data-group .data-sorting-options {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        width: 100%;
        grid-column: span 2;
    }

        .data-group .data-sorting-options p:first-child {
            grid-column: span 2;
        }

.bar-left {
    border-left: solid 1px var(--gray);
    padding-left: 10px;
}

.ib-dynamic-setup-features {
    border-top: solid 3px var(--primary);
}

.ib-data-groups-detail-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
}

#div-data-type, #div-config-options, #div-field-mapping, #ib-config-feed-blog, #ib-config-feed-app, #ib-config-feed-slide, #ib-config-feed-directory {
    display: none;
}

    #div-data-type.active, #div-config-options.active, #div-field-mapping.active, #ib-config-feed-blog.active, #ib-config-feed-app.active, #ib-config-feed-slide.active, #ib-config-feed-directory.active {
        display: grid;
    }

[id*='div-ib-layout-builder'] #div-layout-gallery {
    display: none;
}

.data-options div, .data-app-features div {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 10px;
}

    .data-options div p {
        flex-basis: calc(32% - 5px);
    }

    .data-app-features div p {
        flex-basis: calc(40% - 5px);
    }

        .data-options div p input, .data-app-features div p input {
            float: left;
            margin-right: 10px;
        }

[id*='div-ib-layout-builder'] #div-layout-preview-tools, [id*='div-ib-layout-builder'] #div-layout-builder, [id*='div-ib-layout-builder'] #div-layout-preview {
    position: relative;
    height: 100%;
    width: 100%;
    top: unset;
    left: unset;
    background-color: var(--white);
    color: var(--white-text);
    border: 0px;
    padding: 10px;
    border-radius: var(--border-radius);
    box-shadow: 0px 0px 3px rgba(0,0,0,.5);
    overflow: hidden;
}

    [id*='div-ib-layout-builder'] #div-layout-preview-tools textarea, [id*='div-ib-layout-builder']-gallery #div-layout-preview-tools textarea {
        height: 60px;
        width: 96%;
    }

    [id*='div-ib-layout-builder'] #div-layout-preview-tools #div-layout-box-group-1 p {
        width: 42px;
    }

    [id*='div-ib-layout-builder'] #div-layout-preview-tools #div-layout-catalog-filter {
        width: 100%;
    }

        [id*='div-ib-layout-builder'] #div-layout-preview-tools #div-layout-catalog-filter p {
            padding: 2px;
        }

    [id*='div-ib-layout-builder'] #div-layout-preview-tools #ulMediaCatalog {
        padding: 0px;
        grid-template-columns: 1fr 1fr 1fr;
        overflow-y: auto;
        height: calc(100vh - 340px);
        width: 100%;
    }

    [id*='div-ib-layout-builder'] #div-layout-preview-tools .sitemanager-media-framework-add-layout-div button {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: center;
        gap: 10px;
        width: 100%;
    }

    [id*='div-ib-layout-builder'] #div-layout-builder #layout-builder-scroll, [id*='div-ib-layout-builder'] #div-layout-preview #layout-preview-scroll {
        height: 72vh;
        overflow-y: auto;
    }

.ib-preview-div {
    min-height: 10px;
}

.ib-preview-ajax {
    position: sticky;
    top: 50px;
    overflow-y: auto;
    height: calc(100vh - 60px);
    font-size: var(--font-size-small) !important;
}

    .ib-preview-ajax::-webkit-scrollbar {
        width: 4px;
        height: 25px;
    }

    .ib-preview-ajax::-webkit-scrollbar-button {
        width: 0px;
        height: 0px;
    }

    .ib-preview-ajax::-webkit-scrollbar-thumb {
        background: var(--gray);
        border: 0px none var(--white);
        border-radius: 50px;
    }

        .ib-preview-ajax::-webkit-scrollbar-thumb:hover {
            background: var(--medium-blue);
        }

        .ib-preview-ajax::-webkit-scrollbar-thumb:active {
            background: var(--titan-blue);
        }

    .ib-preview-ajax::-webkit-scrollbar-track {
        background: var(--dialog);
        border: 0px none var(--white);
        border-radius: 50px;
    }

        .ib-preview-ajax::-webkit-scrollbar-track:hover {
            background: var(--gray);
        }

        .ib-preview-ajax::-webkit-scrollbar-track:active {
            background: var(--warm-gray);
        }

    .ib-preview-ajax::-webkit-scrollbar-corner {
        background: transparent;
    }

.ib-preview-div .accordion-title {
    margin-left: unset;
    padding-left: unset;
}

    .ib-preview-div .accordion-title:before {
        content: none;
    }
/*-------------------------------------
    INFO BLOCK DYNAMIC CONTENT INTERFACE SETUP SECTION
*/
#ib-config-feed-directory {
    grid-template-columns: 1fr;
    gap: 10px;
}
/*-------------------------------------
    INFO BLOCK DYNAMIC CONTENT INTERFACE SETUP SLIDES
*/
#div-ib-dynamic-preview-options #ib-config-feed-slide fieldset p {
    margin: 0px;
    padding: 4px;
    margin-bottom: 5px;
}

#ib-config-feed-slide .slide-label label {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 10px;
}

.ib-slide .info-block-editor img {
    max-height: 200px;
    width: auto;
}

.preview-slide {
    text-align: center;
    background-color: var(--cloud);
    color: var(--cloud-text);
    border: solid 1px var(--gray);
    padding: 2px;
    display: grid;
    place-content: center;
}

.example-slide-preview .display-single, .example-slide-preview .display-double, .example-slide-preview .display-stack-right, .example-slide-preview .display-stack-left, .example-slide-preview .display-list, .example-slide-preview .display-zigzag {
    display: grid;
    gap: 5px;
}

.example-slide-preview .stack-count-1 {
    grid-template-columns: 1fr;
}
/* 2 count slides */
.example-slide-preview .display-single.stack-count-2 {
    grid-template-columns: 1fr 1fr;
}

.example-slide-preview .display-double.stack-count-2 {
    grid-template-columns: 1fr;
}
/* 3 count slides */
.example-slide-preview .display-single.stack-count-3 {
    grid-template-columns: repeat(3, 1fr);
}

.example-slide-preview .display-double.stack-count-3 {
    grid-template-columns: repeat(2, 1fr);
}

    .example-slide-preview .display-double.stack-count-3 .preview-slide:last-child {
        grid-column: span 2;
    }
/* 4 count slides */
.example-slide-preview .display-single.stack-count-4 {
    grid-template-columns: repeat(4, 1fr);
}

.example-slide-preview .display-double.stack-count-4 {
    grid-template-columns: repeat(2, 1fr);
}
/* 5 count slides */
.example-slide-preview .display-single.stack-count-5 {
    grid-template-columns: repeat(5, 1fr);
}

.example-slide-preview .display-double.stack-count-5 {
    grid-template-columns: repeat(6, 1fr);
}

    .example-slide-preview .display-double.stack-count-5 .preview-slide {
        grid-column: span 2;
    }

        .example-slide-preview .display-double.stack-count-5 .preview-slide:nth-child(n+4) {
            grid-column: span 3;
        }
/* 6 count slides */
.example-slide-preview .display-double.stack-count-6 {
    grid-template-columns: repeat(3, 1fr);
}
/* 7 count slides */
.example-slide-preview .display-double.stack-count-7 {
    grid-template-columns: repeat(10, 1fr);
}

    .example-slide-preview .display-double.stack-count-7 .preview-slide {
        grid-column: span 2;
    }

        .example-slide-preview .display-double.stack-count-7 .preview-slide:nth-child(n+6) {
            grid-column: span 5;
        }
/* 8 count slides */
.example-slide-preview .display-double.stack-count-8 {
    grid-template-columns: repeat(4, 1fr);
}
/* 9 count slides */
.example-slide-preview .display-double.stack-count-9 {
    grid-template-columns: repeat(20, 1fr);
}

    .example-slide-preview .display-double.stack-count-9 .preview-slide {
        grid-column: span 4;
    }

        .example-slide-preview .display-double.stack-count-9 .preview-slide:nth-child(n+6) {
            grid-column: span 5;
        }
/* 10 count slides */
.example-slide-preview .display-double.stack-count-10 {
    grid-template-columns: repeat(5, 1fr);
}
/* Single Row 5+ slides will just wrap */
.example-slide-preview .display-single.stack-count-5, .example-slide-preview .display-single.stack-count-6, .example-slide-preview .display-single.stack-count-7, .example-slide-preview .display-single.stack-count-8, .example-slide-preview .display-single.stack-count-9, .example-slide-preview .display-single.stack-count-10 {
    grid-template-columns: repeat(5, 1fr);
}
/* stacked right slides */
.example-slide-preview .display-stack-right.stack-count-2 {
    grid-template-columns: repeat(5, 1fr);
}

    .example-slide-preview .display-stack-right.stack-count-2 .preview-slide {
        grid-column: span 2;
    }

        .example-slide-preview .display-stack-right.stack-count-2 .preview-slide:first-child {
            grid-column: span 3;
        }
/* 3 count slides */
.example-slide-preview .display-stack-right.stack-count-3 {
    grid-template-columns: repeat(5, 1fr);
}

    .example-slide-preview .display-stack-right.stack-count-3 .preview-slide:first-child {
        grid-column: span 3;
    }
/* 4 count slides */
.example-slide-preview .display-stack-right.stack-count-4 {
    grid-template-columns: repeat(5, 1fr);
}

    .example-slide-preview .display-stack-right.stack-count-4 .preview-slide:first-child {
        grid-column: span 2;
    }
/* 5 count slides */
.example-slide-preview .display-stack-right.stack-count-5 {
    grid-template-columns: repeat(4, 1fr);
}

    .example-slide-preview .display-stack-right.stack-count-5 .preview-slide:first-child {
        grid-column: span 2;
        grid-row: span 2;
    }
/* 6 count slides */
.example-slide-preview .display-stack-right.stack-count-6 {
    grid-template-columns: repeat(12, 1fr);
}

    .example-slide-preview .display-stack-right.stack-count-6 .preview-slide {
        grid-column: span 2;
    }

        .example-slide-preview .display-stack-right.stack-count-6 .preview-slide:first-child {
            grid-column: span 6;
            grid-row: span 2;
        }

        .example-slide-preview .display-stack-right.stack-count-6 .preview-slide:nth-child(n+5) {
            grid-column: span 3;
        }
/* 7 count slides */
.example-slide-preview .display-stack-right.stack-count-7 {
    grid-template-columns: repeat(6, 1fr);
}

    .example-slide-preview .display-stack-right.stack-count-7 .preview-slide:first-child {
        grid-column: span 3;
        grid-row: span 2;
    }
/* 8 count slides */
.example-slide-preview .display-stack-right.stack-count-8 {
    grid-template-columns: repeat(10, 1fr);
}

    .example-slide-preview .display-stack-right.stack-count-8 .preview-slide {
        grid-column: span 2;
    }

        .example-slide-preview .display-stack-right.stack-count-8 .preview-slide:first-child {
            grid-column: span 6;
        }

        .example-slide-preview .display-stack-right.stack-count-8 .preview-slide:nth-child(n+6) {
            grid-column: span 2;
        }
/* 9 count slides */
.example-slide-preview .display-stack-right.stack-count-9 {
    grid-template-columns: repeat(4, 1fr);
}

    .example-slide-preview .display-stack-right.stack-count-9 .preview-slide:first-child {
        grid-column: span 2;
        grid-row: span 2;
    }
/* 10 count slides */
.example-slide-preview .display-stack-right.stack-count-10 {
    grid-template-columns: repeat(6, 1fr);
}

    .example-slide-preview .display-stack-right.stack-count-10 .preview-slide {
        grid-column: span 2;
    }

        .example-slide-preview .display-stack-right.stack-count-10 .preview-slide:first-child {
            grid-column: span 4;
            grid-row: span 3;
        }
/* stacked left slides */
.example-slide-preview .display-stack-left.stack-count-2 {
    grid-template-columns: repeat(5, 1fr);
}

    .example-slide-preview .display-stack-left.stack-count-2 .preview-slide {
        grid-column: span 2;
    }

        .example-slide-preview .display-stack-left.stack-count-2 .preview-slide:last-child {
            grid-column: span 3;
        }
/* 3 count slides */
.example-slide-preview .display-stack-left.stack-count-3 {
    grid-template-columns: repeat(5, 1fr);
}

    .example-slide-preview .display-stack-left.stack-count-3 .preview-slide:last-child {
        grid-column: span 3;
    }
/* 4 count slides */
.example-slide-preview .display-stack-left.stack-count-4 {
    grid-template-columns: repeat(4, 1fr);
}

    .example-slide-preview .display-stack-left.stack-count-4 .preview-slide:nth-child(3) {
        grid-column: span 2;
    }

    .example-slide-preview .display-stack-left.stack-count-4 .preview-slide:last-child {
        grid-column-start: 3;
        grid-column-end: 5;
        grid-row-start: 1;
        grid-row-end: 3;
    }
/* 5 count slides */
.example-slide-preview .display-stack-left.stack-count-5 {
    grid-template-columns: repeat(4, 1fr);
}

    .example-slide-preview .display-stack-left.stack-count-5 .preview-slide:nth-child(5) {
        grid-column: span 2;
        grid-row: span 2;
        grid-column-start: 3;
        grid-column-end: 5;
        grid-row-start: 1;
        grid-row-end: 3;
    }
/* 6 count slides */
.example-slide-preview .display-stack-left.stack-count-6 {
    grid-template-columns: repeat(6, 1fr);
}

    .example-slide-preview .display-stack-left.stack-count-6 .preview-slide {
        grid-column: span 2;
    }

        .example-slide-preview .display-stack-left.stack-count-6 .preview-slide:nth-child(5) {
            grid-column: span 4;
        }

        .example-slide-preview .display-stack-left.stack-count-6 .preview-slide:last-child {
            grid-column-start: 5;
            grid-column-end: 7;
            grid-row-start: 1;
            grid-row-end: 4;
        }
/* 7 count slides */
.example-slide-preview .display-stack-left.stack-count-7 {
    grid-template-columns: repeat(8, 1fr);
}

    .example-slide-preview .display-stack-left.stack-count-7 .preview-slide {
        grid-column: span 2;
    }

        .example-slide-preview .display-stack-left.stack-count-7 .preview-slide:last-child {
            grid-column-start: 5;
            grid-column-end: 9;
            grid-row-start: 1;
            grid-row-end: 4;
        }
/* 8 count slides */
.example-slide-preview .display-stack-left.stack-count-8 {
    grid-template-columns: repeat(3, 1fr);
}

    .example-slide-preview .display-stack-left.stack-count-8 .preview-slide:last-child {
        grid-column-start: 3;
        grid-column-end: 4;
        grid-row-start: 2;
        grid-row-end: 4;
    }
/* 9 count slides */
.example-slide-preview .display-stack-left.stack-count-9 {
    grid-template-columns: repeat(4, 1fr);
}

    .example-slide-preview .display-stack-left.stack-count-9 .preview-slide:last-child {
        grid-column-start: 3;
        grid-column-end: 5;
        grid-row-start: 2;
        grid-row-end: 4;
    }
/* 10 count slides */
.example-slide-preview .display-stack-left.stack-count-10 {
    grid-template-columns: repeat(3, 1fr);
}

    .example-slide-preview .display-stack-left.stack-count-10 .preview-slide:last-child {
        grid-column-start: 2;
        grid-column-end: 4;
        grid-row-start: 3;
        grid-row-end: 6;
    }
/* LIST VIEW */
.preview-slide-group {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 10px;
}

.preview-info {
    display: grid;
    align-content: center;
    background-color: var(--light-warm-gray);
    color: var(--light-warm-gray-text);
    border: solid 1px var(--gray);
}
/* ZIGZAG VIEW */
.display-zigzag .preview-slide-group {
    display: grid;
    grid-template-areas: "slide slideinfo slideinfo slideinfo";
    gap: 10px;
}

    .display-zigzag .preview-slide-group:nth-child(even) {
        grid-template-areas: "slideinfo slideinfo slideinfo slide";
    }

.display-zigzag .preview-slide {
    grid-area: slide;
}

.display-zigzag .preview-info {
    display: grid;
    grid-area: slideinfo;
    align-content: center;
}

.slide-preview-controls {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 5px;
    width: fit-content;
    color: var(--gray);
    padding: 6px 2px;
}

.control-center {
    justify-content: center;
    width: 100%;
    text-align: center;
}

.control-right {
    justify-content: end;
    width: 100%;
}

.slide-wrap-controls {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 5px;
    color: var(--gray);
    align-items: center;
    justify-content: space-evenly;
}
/*------------------------------------------------------------------------
    INFO BLOCK DYNAMIC CONTENT LAYOUT BUILDER
*/
.info-block-item .ou-justedit-region.mce-content-body.mce-edit-focus {
    width: 100%;
    grid-column: span 3;
    text-align: left;
}

.copy-dyamic-css-builder textarea, #txt-app-data-set-name, #txt-dir-data-set-name, [id*='-data-set-name'] {
    display: block;
    width: 100%;
    min-height: 20px;
    border-radius: var(--border-radius-small);
}

.copy-dyamic-css-builder textarea {
    border: solid 2px var(--orange);
    min-height: 200px;
}

#div-ib-dynamic-preview-options fieldset p {
    margin: 0px;
    padding: 0px;
    display: grid;
    grid-template-columns: 1fr;
    align-content: baseline;
}

#div-ib-dynamic-preview-options fieldset .double-option > p {
    grid-template-columns: auto auto;
    gap: 10px;
    align-items: center;
}

#div-ib-dynamic-preview-options fieldset p.option-title {
    grid-column: span 2;
    font-size: var(--font-size-small);
    color: inherit;
}

input[id='txt-blog-link'], input[id='txt-app-link'] {
    width: 500px;
}

.option-title {
    border-bottom: solid 1px var(--orange);
    color: var(--secondary);
    font-size: var(--font-size-large);
    margin: 0px;
    margin-bottom: 5px;
}

    .option-title.field-mapping {
        display: grid;
        grid-template-columns: 1fr 44px;
    }

#div-field-mapping {
    height: 50px;
    min-height: unset;
    transition: all var(--transition-time-slow) ease-in-out;
}

    #div-field-mapping.active {
        height: unset;
        min-height: 350px;
        transition: all var(--transition-time) ease-in-out;
    }

        #div-field-mapping.active #btn-field-mapping i:before {
            content: "\f068";
        }

#div-field-mapping-content {
    transform: rotateX(90deg);
    transform-origin: top center;
    height: 0px;
    transition: transform var(--transition-time-fast) ease-in-out, height var(--transition-time-slow) ease-in-out;
    min-height: unset;
}

    #div-field-mapping-content.active {
        transform: rotateX(0);
        transition: all var(--transition-time-fast) ease-in-out;
        height: unset;
    }

    #div-field-mapping-content fieldset {
        display: flex;
        flex-direction: row;
        flex-grow: inherit;
        flex-wrap: wrap;
        gap: 10px;
        padding-top: 10px;
    }

        #div-field-mapping-content fieldset p {
            flex-basis: 32%;
            margin: 0px;
        }

        #div-field-mapping-content fieldset label {
            display: grid;
        }

#ib-preview-option-grid fieldset label {
    float: unset;
    width: 100%;
}

    #ib-preview-option-grid fieldset label input {
        float: left;
        margin-right: 10px;
    }

.config-interface {
    background-color: var(--white);
    color: var(--white-text);
    border-radius: var(--border-radius-small);
    padding: 10px;
    border: solid 1px var(--light-gray);
    box-shadow: 0px 0px 4px rgba(0,0,0,.4);
    overflow-y: auto;
    max-height: calc(100vh - 188px);
    /*scrollbar-width: thin;
    scrollbar-color: var(--primary) var(--white);*/
    font-size: var(--font-size-reduced);
}

.ib-dynamic-copy .config-interface {
    max-height: calc(100vh - 130px);
}

#div-example-gallery.config-interface {
    max-height: calc(100vh - 140px);
}

.config-interface::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: var(--off-white);
}

.config-interface::-webkit-scrollbar {
    width: 6px;
    background-color: var(--cloud);
}

.config-interface::-webkit-scrollbar-thumb {
    background-color: var(--accent-2);
}

/*------------------------------------------
    DYNAMIC INFO BLOCKS EDITOR LAYOUTS
*/
.editor-cols-auto .info-block-grid {
    display: flex;
    flex-flow: wrap;
    gap: 10px;
}

    .editor-cols-auto .info-block-grid .grid-item {
        flex-basis: content;
    }

.editor-cols-2.info-block-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.editor-cols-3 .info-block-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.editor-cols-4 .info-block-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
}
/*-----------------------------------------
    DYNAMIC PREVIEW CONTENT EXAMPLES
*/
#ib-preview-option-grid .gallery-holder {
    transform: rotateX(90deg);
    transform-origin: top center;
    transition: all var(--transition-time-fast) ease-in-out;
    height: 0px;
    padding: 0px;
}

    #ib-preview-option-grid .gallery-holder.active {
        transform: rotateX(0deg);
        transform-origin: bottom center;
        height: auto;
        transition: all var(--transition-time) ease-in-out;
    }

        #ib-preview-option-grid .gallery-holder.active p {
            display: block;
        }

    #ib-preview-option-grid .gallery-holder .example-more {
        display: none;
    }

    #ib-preview-option-grid .gallery-holder.more .example-more {
        display: block;
        text-align: right;
    }

#example-sideline {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
}

    #example-sideline .description {
        grid-column: span 2;
    }

.example-data {
    background-color: var(--warm-gray);
    height: 100%;
    width: 100%;
}

.example-title {
    background-color: var(--warm-gray);
    border-left: solid 16px var(--orange);
    height: 25px;
    width: 100%;
}

#example-scroll {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

    #example-scroll .example-data {
        background-color: var(--warm-gray);
        height: 40px;
        width: 100%;
        border-bottom: solid 2px var(--secondary);
        margin-bottom: 10px;
    }

#example-blocks .example-block-holder {
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
}

#example-blocks .example-data {
    flex-basis: auto;
    min-width: 33%;
}

#example-columns .example-block-holder {
    display: flex;
    flex-flow: column wrap;
    align-content: space-between;
    gap: 10px;
}

#example-columns .example-data {
    height: unset;
    width: unset;
    flex-grow: 1;
}

#example-columns.col-auto .example-data {
    flex-basis: auto;
}

#example-columns.col-25 .example-data {
    flex-basis: 23%;
}

#example-columns.col-33 .example-data {
    flex-basis: 31%;
}

#example-columns.col-25 .example-data {
    flex-basis: 48%;
}
/*------------------------------------------------
    BLOG SETUP CONTENT EDITOR WINDOW
*/
[id*='ib-config-feed-'] .data-name {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.blog-start, .blog-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

    .blog-options p input {
        float: left;
        margin-right: 10px;
    }

.ib-preview-blog {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
}

.ib-preview-blog-data {
    grid-row: span 2;
    background-color: var(--white);
    color: var(--white-text);
    border-radius: var(--border-radius);
    border: solid 2px var(--primary);
    padding: 15px;
    font-size: var(--font-size-small);
}

.ib-preview-blog-stories ul {
    margin: 0px;
    padding: 0;
    list-style-type: none;
}

    .ib-preview-blog-stories ul li {
        color: var(--secondary);
        position: relative;
    }

.ib-preview-blog-stories li button {
    border: 0px;
    background-color: inherit;
    color: var(--secondary);
    cursor: pointer;
    padding: 8px;
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    align-content: start;
    text-align: left;
    width: 100%;
}

.ib-preview-blog-stories button i {
    color: var(--orange);
    font-size: var(--font-size);
    grid-row: span 2;
}

.ib-preview-blog-stories button .the-date {
    color: var(--dialog);
    font-size: var(--font-size-small);
}

.ib-preview-blog-stories button .the-title {
    color: var(--secondary);
    font-size: var(--font-size);
    font-weight: 600;
}

.ib-preview-blog-stories li button:hover, .ib-preview-blog-stories li button:hover * {
    background-color: var(--secondary);
    color: var(--secondary-text);
}

.blog-title {
    font-weight: bold;
    color: var(--secondary);
    border-bottom: solid 1px var(--secondary);
}
/*-- LONG SCROLL --*/
.ib-preview-blog-scroll {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

    .ib-preview-blog-scroll .ib-preview-blog-data {
        background-color: var(--warm-gray);
    }

.blog-story {
    padding: 10px;
    border-top: solid 2px var(--dialog);
    padding-top: 20px;
    border-bottom: solid 2px var(--dialog);
    padding-bottom: 20px;
    margin-bottom: 20px;
    background-color: var(--white);
    color: var(--white-text);
}

[class*='blog-scroll'] .blog-title {
    text-align: center;
    font-size: var(--font-size-large);
    padding: 0px;
    margin: 0px;
}
/*-- APPLICATION --*/
#example-app {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 10px;
}

    #example-app .description, .example-search-only, .no-filter {
        grid-column: span 2;
    }

.example-search-only, .example-search {
    border: solid 1px var(--gray);
    border-radius: var(--border-radius);
    background-color: var(--white);
    color: var(--white-text);
    font-size: var(--font-size-small);
    width: 98%;
    padding: 5px;
    margin: auto;
    margin-bottom: 8px;
    display: none;
}

.example-filter-tools {
    display: none;
}

.example-dataset, .example-filter, .example-detail {
    border-top: solid 8px var(--dialog);
    background-color: var(--light-gray);
    color: var(--light-gray-text);
    padding: 5px;
    display: none;
}

.example-dataset, .example-filter {
    margin-bottom: 8px;
}

    .example-search-only.active, .example-search.active, .example-filter-tools.active, .example-dataset.active, .example-filter.active, .example-detail.active {
        display: block;
    }
/*----------------------------------
    DYNAMIC CONTENT PREVIEW APP SYTLE
------------------------------------------------*/
.ib-preview-app {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 10px;
}

.ib-preview-app-filter-search {
    margin-bottom: 8px;
}

.ib-preview-app-filter, .ib-preview-app-details {
    border: solid 1px var(--gray);
    background-color: var(--white);
    color: var(--white-text);
    margin-bottom: 8px;
    padding: 0px;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.ib-filter-title {
    background-color: var(--dialog);
    color: var(--dialog-text);
    padding: 8px;
    text-align: center;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    margin: 0px;
}

#div-app-filter ul {
    margin: 0px;
    padding: 5px;
    list-style: none;
}

#div-app-filter label {
    display: grid;
    grid-template-columns: 25px auto;
    gap: 10px;
    align-items: center;
}

    #div-app-filter label input {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 1;
        grid-row-end: 2;
    }

    #div-app-filter label .the-label-text {
        grid-column-start: 2;
        grid-column-end: 3;
        grid-row-start: 1;
        grid-row-end: 2;
    }

.app-data * {
    display: none;
}

.app-data .app-title {
    display: block;
}
/*----------------------------------------------------------------------------------
    MEDIA FRAMEWORK SHORT FORM (WHERE YOU BUILD CONTENT NOT THE SITE MANAGER)
--------------------------------------------------------------------------------------*/
#centercontent .mediaframework-shortform {
    background-color: var(--white);
    color: var(--white-text);
    border: solid 1px var(--border-gray);
    margin: 0px;
    margin-bottom: 10px;
    height: 400px;
    overflow: scroll;
}

.mediaframework-shortform #divMediaCatalogFilter {
    display: grid;
    grid-template-columns: 1fr 3fr 4fr 4fr;
}

.mediaframework-shortform .option-title button {
    width: 20px;
    height: auto;
}

.mediaframework-shortform .option-title {
    color: var(--medium-blue);
    background-color: var(--white);
}

.mediaframework-shortform #edit-setup-workspace-info, .mediaframework-shortform #edit-setup-workspace-work {
    min-height: unset;
    width: 100%;
    border: 0px;
    border-bottom: solid 1px var(--border-gray);
    margin-top: 0px;
}

    .mediaframework-shortform #edit-setup-workspace-info h3 {
        width: 8% !important;
    }

.mediaframework-shortform .MediaLayoutFilterTitle {
    display: none;
}

.mediaframework-shortform button.show-hide-mediaframework-panel {
    padding: 4px;
    width: 20px;
    border: 0px;
}

.mediaframework-shortform #edit-setup-workspace-info p {
    font-size: var(--font-size-small);
    margin: 1px;
}

    .mediaframework-shortform #edit-setup-workspace-info p label, .mediaframework-shortform #edit-setup-workspace-info p select option {
        font-size: var(--font-size-small);
    }

#ulMediaCatalog {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
    margin: 0px;
    list-style: none;
    box-sizing: border-box;
}

.mediaframework-shortform #ulMediaCatalog {
    width: 100%;
    margin: 0px;
    border: solid 1px var(--border-gray);
}

.mediaframework-shortform #divLayoutBuilder .layout-ul-preview-rows {
    margin: 0px;
}

.mediaframework-shortform #divEditSiteLayout label {
    grid-column: span 4;
}

.mediaframework-shortform #sitemanager-media-layouts-layout-name-box {
    display: grid;
    grid-template-columns: auto 25px 25px 25px;
    gap: 5px;
}

#ou-campus-edit-id a[data-region-style='button'][role="button"], #ou-campus-edit-id a[data-region-style='button'][role="button"].ou-btn, #cms-inline-editor-id a[data-region-style='button'][role="button"].ou-btn, a[data-region-style='button'][role="button"].ou-btn {
    min-height: unset;
    min-width: 100px;
    height: fit-content !important;
}

#ou-campus-edit-id a[data-region-style='button'] i {
    background-color: inherit;
    display: inline-block;
    color: #fff !important;
    min-width: 20px;
}
/*---------------------------------------------------------
    DYNAMIC CONTENT SNAPSHOT OPTIONS
------------------------------------------------*/
#div-ib-dynamic-snapshot-options {
    overflow-y: auto;
}

    #div-ib-dynamic-snapshot-options #divSnapshotClass {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 15px;
    }

.edit-info-snapshot-meta {
    display: grid;
    gap: 15px;
}

    .edit-info-snapshot-meta [toolbar='image-choose'] img {
        max-height: 300px;
        width: auto;
    }

#divSnapshotPreview .snapshot {
    border: solid 1px var(--border-gray);
    border-radius: var(--border-radius-small);
}

#divSnapshotPreview .snapshot-top {
    border-top-left-radius: var(--border-radius-small);
    border-top-right-radius: var(--border-radius-small);
    padding: 10px;
    background-size: cover;
    height: 14vh;
    width: auto;
    display: flex;
    flex-flow: column;
    justify-content: flex-end;
    position: relative;
}

    #divSnapshotPreview .snapshot-top.has-background *, #divSnapshotPreview .snapshot-top[class*='stock-'] * {
        background-color: transparent !important;
        color: var(--white) !important;
        z-index: 3;
        position: relative;
        text-shadow: var(--text-shadow-snapshot) !important;
        font-size: var(--main-standout-font-size);
        font-weight: 400;
        line-height: calc(var(--main-standout-font-size) - .8em);
        margin-bottom: 0px;
        margin-top: 10px;
        flex-basis: auto;
    }

    #divSnapshotPreview .snapshot-top.has-background:before, #divSnapshotPreview .snapshot-top[class*='stock-']:before {
        position: absolute;
        content: " ";
        background-color: var(--box-shade-background);
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        border-top-left-radius: var(--border-radius-small);
        border-top-right-radius: var(--border-radius-small);
        z-index: 2;
    }

#divSnapshotPreview .snapshot-bottom button {
    border: solid 1px var(--border-gray);
    background-color: var(--my-gray);
    color: var(--my-gray-text);
    cursor: pointer;
    width: 30%;
    min-width: 80px;
    border-radius: var(--border-radius-round);
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 5px;
    align-content: center;
    align-items: center;
    min-height: 35px;
    margin: auto;
}

    #divSnapshotPreview .snapshot-bottom button:hover {
        background-color: var(--orange-hover);
        color: var(--orange-hover-text);
    }

.option-field {
    padding: 4px 8px;
}
/*---------------------------------------------------------
    DYNAMIC CONTENT SEARCH OPTIONS
------------------------------------------------*/
#div-ib-search-options {
    overflow-y: auto;
}

#divSearchOptions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

    #divSearchOptions .instructions {
        border-bottom: solid 2px var(--primary);
        margin-bottom: 15px;
    }

        #divSearchOptions .instructions ul {
            margin: 0px;
            padding: 0px;
            padding-left: 30px;
            list-style-type: none;
        }
/*----------------------------------------------------------------------------------
    NEWSLETTER INFO BLOCKS
--------------------------------------------------------------------------------------*/
/*-- newsletter presentation --*/
#div-ib-dynamic-newsletter-options #divNewsletterClass {
    height: 90vh;
    max-height: 95vh;
    overflow: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.edit-info-newsletter-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

    .edit-info-newsletter-meta .meta-item {
        border-bottom: solid 1px var(--border-gray);
        padding: 5px 3px;
    }
/*-- newsletter editor --*/
.info-block-editor .newsletter-holder {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.newsletter-holder .edit-info-block-meta {
    display: none;
}

.info-block-editor .newsletter-holder .info-block-item {
    grid-template-areas: "Editor";
    grid-template-columns: 1fr;
}

.info-block-editor .newsletter-holder .newsletter-preview {
    display: grid;
}

.info-block-editor .newsletter-holder iframe {
    width: 100%;
    height: 90vh;
    overflow: auto;
}
/*-- Gallery layout builder and snapshot options --*/
.gallery-layout-chooser {
    display: inline-flex;
    flex-direction: row;
    gap: 10px;
    list-style-type: none;
    margin: 0px;
    padding: 4px;
    width: 100%;
}

    .gallery-layout-chooser button {
        border: solid 1px var(--border-gray);
        background-color: var(--my-gray);
        color: var(--my-gray-text);
        cursor: pointer;
        min-width: 80px;
        border-radius: var(--border-radius-chamfer);
        display: grid;
        grid-template-columns: 1fr;
        gap: 5px;
        align-content: center;
        align-items: center;
        min-height: 35px;
    }

    .gallery-layout-chooser li:last-child {
        margin-left: auto;
    }

        .gallery-layout-chooser li:last-child button {
            display: flex;
            flex-direction: row;
            width: fit-content;
            justify-content: center;
        }

    .gallery-layout-chooser button.active {
        background-color: var(--secondary);
        color: var(--secondary-text);
    }

    .gallery-layout-chooser button:hover, .gallery-layout-chooser button:focus {
        background-color: var(--orange-hover);
        color: var(--orange-hover-text);
    }
/*-- Gallery snapshot editor --*/
#div-ib-dynamic-gallery-options {
    overflow-y: scroll;
}

#divGallerySnapshot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

    #divGallerySnapshot .info-block-item {
        grid-template-areas: "Editor";
        grid-template-columns: 1fr;
    }

.info-block-editor .newsletter-holder .newsletter-preview {
    display: grid;
    align-items: start;
    height: fit-content;
}

.edit-gallery-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px;
}

.gallery-snapshot-editors-info details p, .gallery-snapshot-editors-info details ul {
    margin-bottom: 0px;
    padding: 4px 20px;
}

.gallery-snapshot {
    padding: 0px;
    background-color: var(--my-white);
    color: var(--my-white-text);
    border: solid 1px var(--border-gray);
    border-radius: var(--border-radius-pill);
    box-shadow: var(--box-shadow-down);
}

    .gallery-snapshot .snapshot-image {
        height: 200px;
        background-size: cover;
        border-top-left-radius: var(--border-radius-pill);
        border-top-right-radius: var(--border-radius-pill);
    }

    .gallery-snapshot .snapshot-top {
        padding: 8px;
    }

        .gallery-snapshot .snapshot-top * {
            font-size: var(--font-size-large);
            color: var(--secondary);
            padding: 4px 10px;
            margin: 0px
        }

    .gallery-snapshot .snapshot-bottom {
        padding: 0px 10px 20px 10px;
    }

        .gallery-snapshot .snapshot-bottom * {
            font-size: var(--font-size-medium);
            padding: 4px 10px;
            margin: 0px
        }

        .gallery-snapshot .snapshot-bottom button {
            border-radius: var(--border-radius-pill);
            cursor: pointer;
            display: flex;
            margin: auto;
            align-items: center;
        }
/*-- gallery showcase editor --*/
.gallery-showcase-builder fieldset legend {
    text-align: left;
}

.gallery-showcase-options {
    display: grid;
    overflow-y: auto;
    max-height: 80vh;
    grid-template-columns: 1fr 3fr;
    gap: 10px;
}

.gallery-showcase-builder fieldset {
    padding: 8px;
    font-size: var(--font-size-reduced);
    border: solid 1px var(--information-border);
    border-radius: var(--border-radius-small);
    margin-top: 8px;
}

    .gallery-showcase-builder fieldset p {
        margin: 0px;
        padding: 4px;
        padding-bottom: 8px;
        display: flex;
        line-height: normal;
        align-items: start;
    }

        .gallery-showcase-builder fieldset p label {
            display: flex;
            flex-direction: row-reverse;
            float: none;
            width: fit-content;
            gap: 15px;
            text-align: start;
        }

        .gallery-showcase-builder fieldset p.no-flex-reverse label {
            flex-direction: row;
        }

        .gallery-showcase-builder fieldset p input[type='radio'] {
            width: 20px;
            height: 20px;
        }

        .gallery-showcase-builder fieldset p input[type='text'] {
            width: 300px;
        }

.gallery-showcase-type {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    justify-content: left;
}

    .gallery-showcase-type p.regular-gallery, .gallery-showcase-type p:last-child {
        grid-column: span 2;
    }

.showcase-gallery-setup {
    text-align: left;
    display: none;
}

    .showcase-gallery-setup.active {
        display: block;
    }

.showcase-option-titles {
    font-size: var(--font-size-reduced);
    font-weight: bold;
    border-bottom: solid 2px var(--primary);
}

.showcase-gallery-setup ul {
    list-style: none;
    display: inline-flex;
    gap: 10px;
    margin: 0px;
    padding-left: 10px;
}

    .showcase-gallery-setup ul button {
        border: solid 1px var(--border-gray);
        background-color: var(--my-gray);
        color: var(--my-gray-text);
        cursor: pointer;
        min-width: 80px;
        border-radius: var(--border-radius-chamfer);
        display: grid;
        grid-template-columns: 1fr;
        gap: 5px;
        align-content: center;
        align-items: center;
        min-height: 35px;
    }

        .showcase-gallery-setup ul button.active, .showcase-gallery-setup ul button:hover, .showcase-gallery-setup ul button:focus {
            background-color: var(--orange-hover);
            color: var(--orange-hover-text);
        }

.gallery-showcase-regular-sorting, .showcase-gallery-setup .gallery-showcase-config, .showcase-gallery-setup .gallery-showcase-sorting, .showcase-gallery-setup .gallery-showcase-filters, .showcase-gallery-setup .gallery-showcase-fieldmapping {
    display: none;
}

    .gallery-showcase-regular-sorting.active, .showcase-gallery-setup .gallery-showcase-config.active, .showcase-gallery-setup .gallery-showcase-sorting.active, .showcase-gallery-setup .gallery-showcase-filters.active, .showcase-gallery-setup .gallery-showcase-fieldmapping.active {
        display: block;
    }

.gallery-showcase-type.gallery-sorting-type p:last-child {
    grid-column: unset;
}

.showcase-gallery-setup .data-options div p {
    flex-basis: unset;
    max-width: 200px;
}

.gallery-showcase-fieldmapping fieldset {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    justify-content: left;
}

    .gallery-showcase-fieldmapping fieldset p label {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }
/*-- GALLERY EDITOR - USING PRESENTATION OPTIONS --*/
.gallery-editor #divEditInfoBlockLayoutStyle .ib-item-tools {
    grid-template-columns: 1fr;
}

.gallery-editor #divEditInfoBlockLayoutStyle .info-block-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    align-items: start;
}

.gallery-editor #divEditInfoBlockLayoutStyle.gallery .info-block-grid .grid-item {
    flex: 1 1 auto;
    flex-basis: 32%;
    min-width: 250px;
}

.gallery-editor #divEditInfoBlockLayoutStyle .ib-item-tool-button {
    display: none;
}

.gallery-editor #divEditInfoBlockLayoutStyle.gallery .info-block-item, .gallery-editor #divEditInfoBlockLayoutStyle.gallery-simple .info-block-item {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas: "Meta"
        "Editor";
}

.gallery-editor #divEditInfoBlockLayoutStyle .info-block-item .edit-info-block-meta {
    display: grid;
    height: min-content;
    gap: 10px;
}

.gallery-editor #divEditInfoBlockLayoutStyle.gallery .info-block-item .edit-info-block-meta {
    grid-template-areas: "block-css";
}

    .gallery-editor #divEditInfoBlockLayoutStyle.gallery .info-block-item .edit-info-block-meta *[button-text='Categories'], .gallery-editor #divEditInfoBlockLayoutStyle.gallery .info-block-item .edit-info-block-meta *[button-text='Tags'], .gallery-editor #divEditInfoBlockLayoutStyle.gallery .info-block-item .edit-info-block-meta *[button-text='Details'], .gallery-editor #divEditInfoBlockLayoutStyle.gallery .info-block-item .edit-info-block-meta *[button-text='Hours'], .gallery-editor #divEditInfoBlockLayoutStyle.gallery .info-block-item .edit-info-block-meta *[button-text='Events'] {
        display: none;
    }

.gallery-editor.regular-sortdetails #divEditInfoBlockLayoutStyle.gallery .info-block-item .edit-info-block-meta {
    grid-template-areas: "block-css"
        "block-details";
}

    .gallery-editor.regular-sortdetails #divEditInfoBlockLayoutStyle.gallery .info-block-item .edit-info-block-meta *[button-text='Details'] {
        display: grid;
    }
/* -- showcase simple -- */
.gallery-editor #divEditInfoBlockLayoutStyle.gallery-simple .info-block-grid .grid-item {
    flex-basis: 32%;
    align-items: start;
    align-content: start;
}

.gallery-editor #divEditInfoBlockLayoutStyle.gallery-simple .info-block-item .edit-info-block-meta {
    grid-template-areas: "block-css block-css"
        "block-categories block-tags";
}

    .gallery-editor #divEditInfoBlockLayoutStyle.gallery-simple .info-block-item .edit-info-block-meta *[button-text='Details'], .gallery-editor #divEditInfoBlockLayoutStyle.gallery-simple .info-block-item .edit-info-block-meta *[button-text='Hours'], .gallery-editor #divEditInfoBlockLayoutStyle.gallery-simple .info-block-item .edit-info-block-meta *[button-text='Events'] {
        display: none;
    }

    .gallery-editor #divEditInfoBlockLayoutStyle.gallery-simple .info-block-item .edit-info-block-meta *[button-text='CSS'], .gallery-editor #divEditInfoBlockLayoutStyle.gallery-simple .info-block-item .edit-info-block-meta *[button-text='Categories'], .gallery-editor #divEditInfoBlockLayoutStyle.gallery-simple .info-block-item .edit-info-block-meta *[button-text='Tags'] {
        display: grid;
        justify-content: start;
        width: 100%;
    }
/* -- showcase details -- */
.gallery-editor #divEditInfoBlockLayoutStyle.gallery-details .info-block-grid .grid-item {
    flex-basis: 48%;
}

.gallery-editor #divEditInfoBlockLayoutStyle.gallery-details .info-block-item .edit-info-block-meta {
    display: grid;
    grid-template-areas:
        "block-css"
        "block-categories"
        "block-tags"
        "block-details";
    gap: 10px;
}

    .gallery-editor #divEditInfoBlockLayoutStyle.gallery-details .info-block-item .edit-info-block-meta *[button-text='Hours'], .gallery-editor #divEditInfoBlockLayoutStyle.gallery-details .info-block-item .edit-info-block-meta *[button-text='Events'] {
        display: none;
    }

    .gallery-editor #divEditInfoBlockLayoutStyle.gallery-details .info-block-item .edit-info-block-meta *[button-text='CSS'], .gallery-editor #divEditInfoBlockLayoutStyle.gallery-details .info-block-item .edit-info-block-meta *[button-text='Categories'], .gallery-editor #divEditInfoBlockLayoutStyle.gallery-details .info-block-item .edit-info-block-meta *[button-text='Tags'], .gallery-editor #divEditInfoBlockLayoutStyle.gallery-details .info-block-item .edit-info-block-meta *[button-text='Details'] {
        display: grid;
        justify-content: start;
        width: 100%;
    }
/* -- showcase events -- */
.gallery-editor #divEditInfoBlockLayoutStyle.gallery-events .info-block-grid .grid-item {
    flex-basis: 48%;
}

.gallery-editor #divEditInfoBlockLayoutStyle.gallery-events .info-block-item .edit-info-block-meta {
    display: grid;
    grid-template-areas:
        "block-css"
        "block-categories"
        "block-tags"
        "block-events";
    gap: 10px;
}

    .gallery-editor #divEditInfoBlockLayoutStyle.gallery-events .info-block-item .edit-info-block-meta *[button-text='Hours'], .gallery-editor #divEditInfoBlockLayoutStyle.gallery-events .info-block-item .edit-info-block-meta *[button-text='Details'] {
        display: none;
    }

    .gallery-editor #divEditInfoBlockLayoutStyle.gallery-events .info-block-item .edit-info-block-meta *[button-text='CSS'], .gallery-editor #divEditInfoBlockLayoutStyle.gallery-events .info-block-item .edit-info-block-meta *[button-text='Categories'], .gallery-editor #divEditInfoBlockLayoutStyle.gallery-events .info-block-item .edit-info-block-meta *[button-text='Tags'], .gallery-editor #divEditInfoBlockLayoutStyle.gallery-events .info-block-item .edit-info-block-meta *[button-text='Events'] {
        display: grid;
        justify-content: start;
        width: 100%;
    }
/* -- showcase details and events -- */
.gallery-editor #divEditInfoBlockLayoutStyle.gallery-details-events .info-block-grid .grid-item {
    flex-basis: 48%;
}

.gallery-editor #divEditInfoBlockLayoutStyle.gallery-details-events .info-block-item .edit-info-block-meta {
    display: grid;
    grid-template-areas:
        "block-css"
        "block-categories"
        "block-tags"
        "block-events"
        "block-details";
    gap: 10px;
}

    .gallery-editor #divEditInfoBlockLayoutStyle.gallery-details-events .info-block-item .edit-info-block-meta *[button-text='Hours'] {
        display: none;
    }

    .gallery-editor #divEditInfoBlockLayoutStyle.gallery-details-events .info-block-item .edit-info-block-meta *[button-text='CSS'], .gallery-editor #divEditInfoBlockLayoutStyle.gallery-details-events .info-block-item .edit-info-block-meta *[button-text='Categories'], .gallery-editor #divEditInfoBlockLayoutStyle.gallery-details-events .info-block-item .edit-info-block-meta *[button-text='Tags'], .gallery-editor #divEditInfoBlockLayoutStyle.gallery-details-events .info-block-item .edit-info-block-meta *[button-text='Events'] .gallery-editor #divEditInfoBlockLayoutStyle.gallery-details-events .info-block-item .edit-info-block-meta *[button-text='Details'] {
        display: grid;
        justify-content: start;
        width: 100%;
    }
/* --- PAGE BANNERS ---*/
.editor-page-banners .info-block-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.editor-page-banners .info-block-editor.grid-item {
    flex-basis: 32%;
    min-width: 400px;
}

    .editor-page-banners .info-block-editor.grid-item .info-block-item {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-areas: "Meta"
            "Editor";
        gap: 10px;
    }

.info-block-page-banners #divEditInfoBlockLayoutStyle.editor-page-banners .info-block-item .edit-info-block-meta {
    display: grid;
    grid-template-areas:
        "block-css"
        "block-categories"
        "block-tags"
        "block-details";
    gap: 10px;
}

    .info-block-page-banners #divEditInfoBlockLayoutStyle.editor-page-banners .info-block-item .edit-info-block-meta [button-text='Hours'], .info-block-page-banners #divEditInfoBlockLayoutStyle.editor-page-banners .info-block-item .edit-info-block-meta [button-text='Events'] {
        display: none;
    }
/*-----------------------------
        PARALLAX
---------------------------------- */
[id*='box'][class*='parallax'] {
    z-index: 2;
}

    [id*='box'][class*='parallax'] .MaxGutter {
        z-index: 10;
    }
/*--------------------------------
        LIST EDITING
    */
div[class*='list-']:not(.list-check) ul, div[class*='list-']:not(.list-check) ul li ul {
    display: block;
    list-style-type: disc;
    padding: 6px;
    margin: initial;
    margin-left: 20px;
    line-height: normal;
    padding-top: 35px;
    position: relative;
}

div[class*='list-']:not(.list-check) li {
    background-color: inherit !important;
    color: inherit !important;
    border: unset !important;
    padding: 8px !important;
    margin: initial !important;
    line-height: normal;
    list-style-type: square !important;
}

div[class*='list-']:not(.list-check) ul:before {
    content: "List column items have no bullets when published";
    position: absolute;
    top: 20px;
    left: 0px;
    font-size: var(--font-size-small);
}

div[class*='list-']:not(.list-check) li:before {
    display: none;
}

div[class*='list-']:not(.list-check) li:after {
    display: none;
}
/*--------------------------------------
    PAGE EDITING OVERRIDES
*/
.feature.edit-mode, .feature-middle.edit-mode {
    opacity: 1;
}

.service-button .overlay-content {
    height: auto;
    width: 100%;
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+                               END OF CSS FILE                                       +
+     IF YOU WANT TO OVER RIDE THESE STYLES PLEASE DO IT IN THE CSS OVERRIDE FILES    +
+     CHANGES TO THIS FILE WILL BE DELETED UPON NEXT TEMPLATE UPDATE                  +
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/