/* Variables */
:root {
    --shell-conversation-width: 380px;
    --shell-conversation-width-small: 338px;
    --shell-health-strip-height: 12px;
    --shell-environment-strip-height: 16px;
    --shell-nav-height: 4rem;
    --shell-nav-o-size: calc(var(--shell-nav-height) + 8px);
    --shell-nav-o-icon-size: 2.75rem;
    --shell-plugin-visible-height: calc(100vh - var(--shell-health-strip-height) - var(--shell-nav-height));
}

:root.oj-scale-md {
    --shell-health-strip-height: 10px;
    --shell-nav-height: 3.5rem;
    --shell-nav-o-icon-size: 2.5rem;
}

:root.oj-scale-sm {
    --shell-health-strip-height: 8px;
    --shell-nav-height: 3rem;
    --shell-nav-o-icon-size: 2.25rem;
}

/* Hide the error/exception overlay displayed by the webpack dev server. Instead we will display the errors in using shell messaging */
#webpack-dev-server-client-overlay,
#webpack-dev-server-client-overlay-div {
    display: none !important;
}

.force-display-hidden {
    display: none !important;
}

.devin-jarvis-avatar:before {
    background:url("images/DevinJarvis.jpg")
}

.samir-ayyad-avatar:before {
    background:url("images/SamirAyyad.jpg")
}

.demo-oracle-icon {
    width:137px;
    height:18px
}

.demo-oracle-icon:before {
    content:url("images/oracle_logo.svg")
}

html:not([dir="rtl"]) .demo-oracle-icon {
    padding-right:4px
}

html[dir="rtl"] .demo-oracle-icon {
    padding-left:4px
}

.demo-oracle-icon:before {
    display:inline
}

.demo-appheader-avatar {
    width:24px;
    height:24px
}

.demo-appheader-avatar:before {
    content:url("images/avatar_24px.png")
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
    .demo-appheader-avatar:before {
        content:url("images/avatar_24px_2x.png");
        -webkit-transform:translate(-25%, -25%) scale(0.5);
        transform:translate(-25%, -25%) scale(0.5)
    }
}

html, body, .shell-container {
    height: 100%;
    min-height: 100%;
    margin: 0;
}

/* Session dialogs are siblings of .shell-container, so they remain readable and interactive. */
body[data-session-content-obscured] .shell-container {
    filter: blur(1rem);
    pointer-events: none;
    user-select: none;
}

.shell-container {
    background: url(https://static.oracle.com/cdn/fnd/gallery/2610.0.0/images/background-shell-health-start.png) no-repeat bottom left, url(https://static.oracle.com/cdn/fnd/gallery/2610.0.0/images/background-shell-health-end.png) no-repeat bottom right;
    display: flex;
    flex-direction: column;

    .shell-strip {
        height: var(--shell-health-strip-height);
        min-height: var(--shell-health-strip-height);
        display: block;
    }

    .shell-header {
        padding: 0;
    }

    .shell-environment-strip {
        min-height: var(--shell-environment-strip-height);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 16px;
        box-sizing: border-box;
        background-color: rgb(var(--oj-palette-danger-rgb-120));
        color: #ffffff;
        font-family: "Oracle Sans", Arial, sans-serif;
        font-size: 12px;
        font-weight: 600;
        line-height: 16px;
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .shell-content {
        flex:2;
        display: flex;
        flex-direction: unset;
        min-height: auto;

        .shell-main {
            flex: 1 1;
        }

        .shell-plugins-container {
            flex-wrap: nowrap;
            height: var(--shell-plugin-visible-height) /* header + navigation */
        }

        .shell-plugin {
            overflow-y: auto;

            .inferred-action-expand-wrapper {
                position: relative;
            }
        }
    }

    .shell-nav-wrapper {
        width: 100%; 
        left: 0;
        bottom: 0;
        position: absolute;
    }

    .shell-nav-conveyor {
        background-color: #043343;
        display: block;
        height: var(--shell-nav-height);
        position: relative;
        width: calc(100vw - var(--shell-nav-o-size));
        max-width: calc(100vw - var(--shell-nav-o-size));
    }

    .shell-nav-conveyor .oj-conveyorbelt-overflow-container {
        width: 100%;
    }

    .shell-nav-conveyor .oj-conveyorbelt-overflow-indicator.oj-start,
    .shell-nav-conveyor .oj-conveyorbelt-overflow-indicator.oj-end {
        background-color: #043343;
        height: var(--shell-nav-height);
        margin: 0;
        position: absolute;
        top: 0;
        z-index: 1;
    }

    .shell-nav-conveyor .oj-conveyorbelt-overflow-indicator.oj-start {
        left: 0;
    }

    .shell-nav-conveyor .oj-conveyorbelt-overflow-indicator.oj-end {
        right: 0;
    }

    .shell-nav {
        background-color: #043343;
        overflow-y: hidden;
        --oj-tab-bar-item-bg-color-hover: #04232D;
        --oj-tab-bar-item-bg-color-selected: #04536F;
        --oj-tab-bar-item-border-color-selected: #F0CC71;
        --oj-tab-bar-item-border-color-active: #04232D;
        --oj-tab-bar-item-min-height: var(--shell-nav-height);
        --oj-tab-bar-icon-margin: 8px;
        --oj-tab-bar-item-margin: 0;
        --oj-tab-bar-item-padding: 0;
        --shell-nav-badge-subtle-text-color: var(--oj-core-text-color-primary);
    }

    .oj-tabbar-item-img {
        align-self: center;
        block-size: min(2.5rem, calc(var(--shell-nav-height) - 1rem));
        inline-size: auto;
        margin-inline-end: var(--oj-tab-bar-icon-to-text-padding);
        max-inline-size: 2.5rem;
        object-fit: contain;
    }

    .shell-nav .oj-tabbar-item-label {
        overflow: visible;
    }

    .shell-nav .oj-tabbar-item-end.oj-badge-subtle {
        color: var(--shell-nav-badge-subtle-text-color);
    }

    .shell-nav li.shell-tab-item  {
        box-sizing: border-box;
        height: var(--shell-nav-height);
        max-height: var(--shell-nav-height);
        overflow-y: hidden;
        padding-right: 24px;
        padding-left: 24px;
    }

    .shell-nav li.shell-tab-item > a,
    .shell-nav li.shell-tab-item .oj-tabbar-item-content {
        box-sizing: border-box;
        max-height: 100%;
        overflow-y: hidden;
    }

    .shell-ask {
        --oj-button-borderless-chrome-text-color: #FFF;
        --oj-button-borderless-chrome-text-color-hover: #FFF;
        --oj-button-borderless-chrome-text-color-active: #FFF;
        --oj-button-borderless-chrome-text-color-selected: #FFF;
        --oj-button-borderless-chrome-text-color-selected-hover: #FFF;
        width: var(--shell-nav-o-size);
        height: var(--shell-nav-o-size);
        position: absolute;
        right: 0;
        bottom: 0;
        background-color: #C74634;
        color: #FFF;
    }

    .shell-ask .shell-ask-icon {
        color: #FFF;
        font-size: var(--shell-nav-o-icon-size);
    }

    .shell-footer {
        height: 58px;
    }
}

@media screen and (max-width: 767px) {
    .shell-container {
        background: none;
    }
}

.shell-container.mobile-platform {
    --shell-plugin-visible-height: calc(100vh - var(--shell-health-strip-height));
}

.shell-container.mobile-platform .shell-content .shell-plugins-container {
    height: var(--shell-plugin-visible-height) !important;
}

.shell-o-menu {
    min-width: 320px !important;
}

.shell-o-menu-footer {
    width: 100%;
    gap: var(--oj-core-spacing-4x);
}

.shell-preferences-drawer {
    max-width: 100vw;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--oj-core-bg-color-content);
}

.shell-preferences-drawer-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid var(--oj-core-divider-color);
}

.shell-preferences-drawer-title {
    flex: 1;
}

.shell-preferences-drawer-body {
    flex: 1;
    padding: 24px;
}

.shell-preferences-drawer-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--oj-core-divider-color);
}

#env-info-popup {
    h3 {
        position: relative;
    }

    #btn-clipboard {
        position: absolute;
        right: 12px;
        top: -6px;
    }

    .break-world {
        overflow-wrap: break-word;
    }
}

#env-info-popup #btn-clipboard {
    position: absolute;
    right: 12px;
    top: -6px;
}

div[cda-inferred-action="expand"]{
    visibility: hidden;
    height: 0;

    &.expanded {
        visibility: visible;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: rgb(251, 249, 248);
    }
}

/* temp */
.cda-Patient-vitals {
    oj-chart {
        width: 95%;
    }
}

.shell-container.mobile-platform .shell-nav-wrapper > oj-tab-bar {
    display: none;
}

/* Apply to all <div> generated by shell, ensuring their height expands to fill the outer container.  */
.agent-panel-flex-height {
    height: 100%;
}

.flex-height-scroll {
    overflow-y: auto;
}

.shell-empty-container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    height: 500px
}

.shell-flex-point-dialog-header {
    display: flex;
    flex-direction: row;
    height: 70px;
    min-height: 70px;
    max-height: 70px;
    align-items: center;
    padding-right: 5px;
    box-sizing: border-box;
    overflow: hidden;
    background: #fbf9f8;
    border-bottom: 1px solid rgb(224, 221, 221);
}

.shell-flex-point-dialog-text-panel {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
}

.shell-flex-point-dialog-title-text {
    font-weight: 600;
    font-size: large;
    line-height: normal;
}

.shell-flex-point-form-scroller-with-footer {
    flex-grow: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 180px);
    padding: 20px;
}

.shell-flex-point-form-layout > oj-c-input-text,
.shell-flex-point-form-layout > oj-c-select-single {
    display: block;
}

.shell-flex-point-form-layout > oj-c-input-text + oj-c-select-single,
.shell-flex-point-form-layout > oj-c-select-single + oj-c-select-single {
    margin-top: var(--oj-core-spacing-4x);
}

.shell-flex-point-form-footer {
    height: 65px;
    min-height: 65px;
    max-height: 65px;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;
    background: #fbf9f8;
    border-top: 1px solid rgb(224, 221, 221);
}

.shell-flex-point-form-footer oj-toolbar {
    flex-direction: row;
    flex-grow: 1;
    justify-content: flex-end;
    margin-right: 20px;
}