/*********************************************************************/
/***** BEGIN DESIGNPLUS THEME IMPORT & CUSTOMIZATION  ****************/
/*********************************************************************/
/* Import statements need to be at the top of your CSS file */

/* For Main CSS files */
@import url(https://designplus.ciditools.com/css/content.css);
@import url(https://designplus.ciditools.com/css/editor.css);
/* For Mobile app CSS file */
/*@import url(https://designplus.ciditools.com/css/mobile.css);*/

:root {
    --dt-color-primary: #1A3E6F;
    --dt-color-primary-contrast: #FFFFFF;
    --dt-color-primary-dark-text: #1A3E6F;
    --dt-color-secondary: #D92D27;
    --dt-color-secondary-contrast: #FFFFFF;
    --dt-color-secondary-dark-text: #AD271D;
    --dt-color-accent: #FED16D;
    --dt-color-accent-contrast: #000000;
    --dt-color-accent-dark-text: #736032;
    --dt-color-gray: #C1C5C8;
    --dt-color-gray-contrast: #000000;
    --dt-color-gray-dark-text: #474747;
    --dt-color-white: #FFFFFF;
    --dt-color-white-contrast: #000000;
    --dt-color-white-dark-text: #707070;
}

/*********************************************************************/
/***** END DESIGNPLUS THEME IMPORT & CUSTOMIZATION   *****************/
/*********************************************************************/

/*********************************************************************/
/***** CUSTOM JAA HELP SIDEBAR ***************************************/
/*********************************************************************/

/*
 * DesignPLUS gives its content wrapper overflow:auto.
 * That prevents position:sticky from following Canvas's
 * actual scrolling container.
 *
 * This override applies ONLY to pages containing our
 * custom JAA sticky-help layout.
 */
.dp-wrapper-parent:has(.jaa-help-layout) {
    overflow: visible !important;
}

.jaa-help-layout {
    display: flex !important;
    gap: 24px;
    align-items: flex-start;
    width: 100%;
}

.jaa-help-main {
    flex: 1 1 auto;
    min-width: 0;
}

.jaa-help-sidebar {
    flex: 0 0 280px;
    width: 280px;
    min-width: 0;

    position: sticky !important;
    top: 20px !important;
    align-self: flex-start !important;
    z-index: 10 !important;
}

/*
 * The sidebar itself is sticky.
 * This inner wrapper does not need positioning.
 */
.jaa-sticky-help {
    position: static !important;
}

/*
 * On narrow screens, put Help back into normal document flow.
 */
@media (max-width: 767px) {
    .jaa-help-layout {
        display: block !important;
    }

    .jaa-help-sidebar {
        width: auto;
        max-width: none;
        position: static !important;
    }
}