/*!
 * Denali Data Systems Inc. 
 * Frontier Innovation Inc. - Whisper FYI
 * Whisper FYI UI/UX Design (https://denalidatasystems.atlassian.net/wiki/spaces/FIWF/pages/2772664352/UI+UX+Design)
 */


:root {
    --color-midnight-blue: #292843;
    --white: #ffffff;
}

body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
    background: none;
    background-color: var(--white);
    font-size: initial; /* Reset default font size to browser default (16px) */
    min-height: 100vh;
}

* {
    box-sizing: border-box;
}

/* Reset Button Styling */
button {
    all: unset;
    display: inline-block;
    width: auto;
}



/*********************
    Fonts, Headings and Text
*/

.w-heading-page,
.w-heading-section,
.w-heading-sub-section,
.rz-text-h1 {
    font-family: "Lato", system-ui;
    font-weight: 300;
    font-style: normal;
    line-height: 110%;
    letter-spacing: -0.5px;
}

.rz-text-h1,
.w-heading-page {
    font-size: 2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    margin: 0 0 1rem 0;
}

.w-heading-page span {
    display: block;
    margin-left: 10px;
}

.w-heading-page .material-icons {
    font-size: inherit;
}

.w-heading-section {
    font-size: 1.75rem;
    padding: 0;
    margin: 0 0 1rem 0;
}

.w-heading-sub-section {
    font-size: 1.5rem;
}

.w-msgbox {
}

.w-msgbox--error {
    color: #842029;
    background-color: #F8D7DA;
    border: solid 1px #842029;
    border-radius: 2px;
    padding: 5px;
    margin-top: 5px;
}

.w-chat-disclaimer {
    font-size: 0.75em;
    color: gray;
    text-align: center;
    margin: 10px 0 0 0;
}
.rz-text-body2 {
    font-size: 16px;
}



.lato-light {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.lato-regular {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.lato-bold {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-style: normal;
}



/*********************
    Page ("pg")

*/

.w-pg {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /*overflow-x: hidden;*/
    /*padding: 100px 30px 170px 30px;*/
}


.w-pg__content {
    /*flex: 1;*/
    /*width: 100%;*/
    padding: 100px 30px 30px 30px;
}

.w-pg__header {
    align-items: center;
    background-color: var(--color-midnight-blue);
}

#mobileHeader {
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

#desktopHeader {
    display: none;
}

.w-pg-header__logo {
    display: block;
    width: 48px;
    height: 48px;
    cursor: pointer;
    margin-right: 20px;
}

.w-pg-header__logo img {
    display: block;
    height: 100%;
    width: auto;
}

.w-pg-header__profile {
    width: 48px;
    height: 48px;
    padding: 10px 20px;
    cursor: pointer;
    display: none;
}

.w-profile-initials {
    width: 48px;
    height: 48px;
    border-radius: 50%; /* Makes the element circular */
    background-color: #dbdbdb; /* Adjust to your desired background color */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000; /* Text color */
    font-size: 18px;
    font-weight: bold;
    text-transform: uppercase; /* Ensures initials are capitalized */
    text-decoration: none;
    margin-left: auto;
    padding: 6px;
}

.w-pg-header__menu-toggle {
    padding: 10px;
    font-size: 2rem;
    line-height: 100%;
    color: #fff;
}


.w-pg__body {
    background-color: #fff;
    /*flex-grow: 1;*/
    overflow-y: auto; /* Ensure content scrolls if necessary */
}


.w-pg__sidebar {
    color: #fff;
    z-index: 9;
    width: 250px;
    height: 100%; /*100vh; /*calc(100vh - 72px);*/
    box-shadow: 4px 0px 4px 0px rgba(0,0,0,0.25);
    background-color: var(--color-midnight-blue);
    /*    display: flex;
    flex-direction: column;
    justify-content: space-between;*/
    position: fixed;
    left: -254px;
    top: 0;
    box-sizing: border-box;
    padding: 70px 10px 10px 10px;
}

.w-pg-sidebar__content {
    height: 100%; /*100vh; /*calc(100vh - 72px);*/
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
}


.w-pg__footer {
    color: #000;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 14px;
}

.w-footer__copyright {
    font-size: .8rem;
    padding: 10px;
    line-height: 1.2rem;
}

.w-footer-nav__legal {
    justify-content: space-between;
}

.w-footer-legal__link {
    text-align: center;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    color: #7B78CB;
}

.w-footer-legal__link:hover {
    text-decoration: underline;
}


.w-pg-section {
    margin: 0 0 30px 0;
}

/*
    END - Page
*********************/

.w-link {

}

.w-link--back {
    display: inline-block;
}

/*********************
    Downloads
*/

.w-download-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.w-download-item__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
}

.w-download-item__icon--pdf {
    color: #e44d26;
}

.w-download-item__icon--word {
    color: #2b579a;
}

.w-download-item__icon--excel {
    color: #217346;
}

.w-download-item__icon--powerpoint {
    color: #d24726;
}

.w-download-item__icon--image {
    color: #0099e5;
}

.w-download-item__icon--archive {
    color: #783cbd;
}

.w-download-item__icon--default {
    color: #607d8b;
}

.w-download-item__name {
    font-size: 0.9rem;
}

/*
    END - Downloads
*********************/

/*********************
    Toolbars
*/
.w-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.w-toolbar__item {

}

.w-toolbar--ar {
    justify-content: flex-end;
}

.w-toolbar--post-form {
    margin: 30px 0;
    padding-top: 20px;
    border-top: solid 1px #bfbfbf;
}

.w-toolbar--pre-form {
    margin-bottom: 1rem;
}

.w-fjc-end {
    justify-content: flex-end;
}

/*Flex Justify Content - Space Between*/
.w-fjc-sb {
    justify-content: space-between;
}

/*
    END - Toolbars
*********************/



/*********************
    Chat
*/

#chatArea {
    transition: height 0.5s ease; /* Animate height */
    margin: 0;
    padding-bottom: 160px;
}

.w-chat-controls {
/*    display: flex;
    flex-wrap: wrap;
    gap: 10px;*/
    width: 100%;
    /*max-width: 1000px;*/
    padding: 10px;
    position: fixed;
    bottom: 0px;
    left: 0;
    background-color: #fff;
}

.w-chat-controls__wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}



.w-chat-composer__btns {
    display: flex;
    width: 100%;
    gap: 10px;
}

.w-chat-composer {
    flex: 1 1 100%; /* Take full width on mobile */
    order: 0;
}

.w-chat__btn.w-btn--save {
    width: 65%;
}

.w-chat__btn.w-btn--clear {
    width: 35%;
}

.w-chat-convo-starters {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    max-width: 300px;
    margin: 0 auto 20px auto;
    padding: 20px 0;
}

.w-chat-convo-starter__item {

}

.rz-button.rz-button-md.rz-variant-outlined.rz-secondary.rz-shade-default.w-chat__btn.w-chat__btn--starters {
    font-size: 0.875rem;
    background-color: #fff;
    color: #404040;
    border: solid 1px #e0e0e0;
    box-shadow: none;
    width: 100%;
    max-width: 300px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .rz-button.rz-button-md.rz-variant-outlined.rz-secondary.rz-shade-default.w-chat__btn.w-chat__btn--starters:hover {
        background-color: #888;
        color: #fff;
    }

.w-chat-disclaimer {
    text-align: center;
}

.w-chat-logo {
    width: 140px;
    height: auto;
}

.w-chat-thread {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    transition: height 0.5s ease;
}
/*
    END - Chat
*********************/


/*********************
    Navigation
*/
.w-pg__sidebar {
    z-index: 999;
    transition: left 0.3s ease;
}

.w-pg__sidebar.open {
    left: 0;
}

.w-hide-mobile {
    display: none;
}

.w-menu__divider {
    border-top: solid 2px rgba(0,0,0,0.5);
    border-bottom: solid 1px rgba(255,255,255,0.25);
    margin: 10px 0;
}

.w-menu__section-title {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 1.75rem;
    line-height: 100%;
    padding: 10px;
}

.w-menu__items {
    display: flex;
    flex-direction: column;
    gap: 5px 0;
}

.w-menu__item {
}

.w-menu__footer {
    display: flex;
    flex-direction: column;
    gap: 0 10px;
    font-size: .8rem;
}

.w-menu__footer .w-menu__items {
    flex-direction: column;
    justify-content: space-between;
    gap: 0 10px;
}

.w-menu__link {
    display: flex;
    align-items: center;
    gap: 0 10px;
    line-height: 100%;
    padding: 10px;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
    background-color: transparent;
    cursor: pointer;
}

.w-menu__link:hover {
    background: rgba(255,255,255,.25);
}

.w-menu-items--pinned .w-menu__link {
    justify-content: space-between;
}

.w-menu__link.w-menu__link-feedback {
    width: 80%;
    margin: 0 auto;
    text-decoration: none;
    border-radius: 6px;
    padding: 5px 10px;
    color: #fff;
    background: #2F6BB8;
    background: linear-gradient(90deg, rgba(47, 107, 184, 1) 0%, rgba(100, 185, 205, 1) 100%);
}


/* ********************
    Breadcrumbs
*/
.w-breadcrumbs {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

.w-breadcrumb {
    display: flex;
    align-items: center;
    position: relative;
}

.w-breadcrumbs--title .w-breadcrumb {
    padding-right: 10px;
    line-height: 100%;
    font-size: 1.4rem;
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.w-breadcrumbs--title .w-breadcrumb:first-child {
    font-weight: 700;
}

.w-breadcrumbs--title .w-breadcrumb:not(:last-child)::after {
    content: "\2023"; /* This is the Unicode for ‣ */
    padding-left: 10px;
    font-size: 1.2em;
    line-height: 1;
    display: flex;
    align-items: center;
}

.w-breadcrumbs--title h1 {
    padding: inherit;
    font-size: inherit;
    margin: inherit;
    color: inherit;
    line-height: inherit;
    font-family: inherit;
}

.w-breadcrumbs--title .material-icons {
    padding: inherit;
    font-size: inherit;
    margin: inherit;
    color: inherit;
    line-height: inherit;
}





/* ********************
    Logos
*/
.w-logo {
}

.w-logo .w-logo--manufacturer img {
    display: block;
    height: 40px;
    width: auto;
}



.w-pg__hdr {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin-bottom: 20px;
}

.w-pg-hdr__item {
    flex-grow: 0;
}



.w-pg-hdr__secondary-nav {
    position: absolute;
    top: 80px;
}

.w-hdr-secondary-nav__items {
    list-style: none;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.w-hdr-nav__item {
    position: relative;
    padding-right: 10px;
    display: flex;
    align-items: center;
}

    .w-hdr-nav__item:not(:last-child)::after {
        content: "\2023"; /* "\00BB" "\2023" is the Unicode for » */
        position: relative;
        right: 0;
        padding-left: 5px;
        font-size: 2rem;
    }

.w-hdr-nav__link {
    text-decoration: none;
    padding: 10px;
}

    .w-hdr-nav__link:hover {
        background-color: black;
        color: #fff;
    }



/* Cleaned Up */
.w-pg-nav__items,
.w-hdr-nav__items,
.w-footer-nav__legal {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
}



.w-row {
    display: flex;
}

.w-col {
    flex: 1;
}

.w-va-center > .w-col {
    display: flex;
    align-items: center;
}


.w-row--form {
    gap: 30px;
}



.nav-link {
    color: #fff;
}

/*********************
    Page - Entry (Login, Forgot Password, etc.)
*/

.w-row--entry {
    flex-direction: column;
    width: 100%;
}

.w-row--entry > .w-col {
    padding: 2.5rem 1.875rem;
}

.w-row--entry > .w-col:first-child {
    background-color: var(--color-midnight-blue);
    text-align: center;
}

.w-entry__greeting .w-logo-whisper {
    width: 130px;
    margin: 0 auto;
}

.w-entry__greeting .w-logo-whisper img {
    display: block;
    width: 100%; /*130px*/
    height: auto; /*118px*/
}

.w-entry__main {
    max-width: 400px;
    margin: 0 auto;
}

.w-title-greeting {
    font-family: "Lato", system-ui;
    font-weight: 300;
    font-style: normal;
    line-height: 100%;
    font-size: 2rem;
    color: #fff;
    margin-bottom: .5em;
}

/*
    END - Page - Entry
*********************/

/*Layout*/

.w-section {
    margin-bottom: 30px;
}

.w-divider {
    border-top: solid 1px silver;
    margin-top: 30px;
    padding-bottom: 30px;
}

.w-divider--form {

}

.w-form-upload {
    max-width: 100%;
    padding: 10px;
    border: solid 1px silver;
    border-radius: 6px;
}



#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}


/* ********************
    Radzen Overrides
*/

.rz-button {
    text-align: center;
    text-transform: capitalize;
    border-radius: 26px;
}

.rz-button.rz-primary.rz-shade-default {
    background-color: #3571b9;
    border: solid 2px #3571b9;
}

.rz-button.rz-secondary.rz-shade-default {
    border: solid 2px transparent;
}

    .rz-button.rz-secondary.rz-shade-default:hover {
        border: solid 2px rgba(93,137,247,0.16);
    }

.rz-button.rz-variant-filled.rz-light.rz-shade-default {
    background-color: #fff;
    color: #3571b9;
    border: solid 2px #3571b9;
}


.rz-button-md {
    font-weight: 300;
    font-stretch: 100%;
    font-size: 1rem;
}

input {
    font-size: 1rem !important;
}

.rz-tabview-nav li a, .rz-tabview-nav li a:not([href]):not([class]) {
    padding-left: 30px;
    padding-right: 30px;
}

.rz-tabview-top > .rz-tabview-nav .rz-tabview-selected,
.rz-tabview-top > .rz-tabview-nav li {
    margin-right: 5px;
}

.w-pg__content .rz-notification {
    position: fixed; /* Use absolute if 'fixed' causes layout issues */
    top: 20px; /* Positioning within the content container */
    right: 20px;
    z-index: 1050; /* Ensure visibility over other elements */
}

/* From Chat.razor.css file */
.user-message {
    display: flex;
    justify-content: flex-end;
}

.bot-message {
    display: flex;
    justify-content: flex-start;
}


    .user-message .rz-card,
    .bot-message .rz-card {
        max-width: 100%;
    }

.rz-dialog-confirm-message {
    margin: 0 0 15px 0;
}

.rz-textarea, textarea, input {
    font-size: 16px;
}

pre {
    text-wrap-mode: wrap; /* Override default nowrap for pre tag to fix issue where bot response text extends outside of its wrapper. */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Show Password Button */

.rz-button.rz-button-sm.rz-variant-text.rz-primary.rz-button-icon-only {
    background-color: #fff;
    border-color: #fff;
}

.rz-button.rz-button-sm.rz-variant-text.rz-primary.rz-button-icon-only:hover {
    background-color: #d4d4d4;
}

.rz-button.rz-button-sm.rz-variant-text.rz-primary.rz-button-icon-only .notranslate.rz-button-icon-left.rzi {
    color: #000;
    opacity: 50%;
}

.rz-button.rz-button-sm.rz-variant-text.rz-primary.rz-button-icon-only .notranslate.rz-button-icon-left.rzi:hover {
    opacity: 100%;
}

/* END - Radzen Overides */


/*********************
    Utility Classes
*/

/* Align Right */
.w-ar {
    text-align: right;
    justify-content: flex-end;
}

/* Align Center */
.w-ac {
    text-align: center;
}

/* Marting Top - Small */
.w-mt-sm {
    margin-top: 20px !important;
}

/* Margin Bottom - Small */
.w-mb-sm {
    margin-bottom: 20px !important;
}

.w-strong { 
    font-weight: 700 !important;
}

/*
    END - Utility Classes
*********************/



@media only screen and (min-width: 576px) {
    /* Styles for small devices (landscape phones) */

    .w-pg__content {
        /*padding: 30px;*/
    }

    .w-pg__footer {
        flex-direction: row;
        margin-top: 20px;
    }

    .w-footer-legal__item:first-child {
        border-right: solid 1px silver;
    }

    .w-chat-composer__btns {
        justify-content: flex-end;
    }

    .w-chat__btn.w-btn--save,
    .w-chat__btn.w-btn--clear {
        width: auto !important;
    }

    .w-chat__btn.w-btn--save {
        padding-left: 40px;
        padding-right: 40px;
    }

}


@media only screen and (min-width: 768px) {
    /* Styles for medium devices (tablets) */

    .w-text-h1 {
        font-size: 3rem;
    }

    .w-title-greeting {
        margin-bottom: 3rem;
    }

    .w-row--entry {
        flex-direction: row;
    }

    .w-row--entry > .w-col {
        min-height: 100vh;
        padding: 8rem 1.875rem;
    }

    .w-entry__greeting .w-logo-whisper {
        width: 195px;
        height: 178px;
    }


    .w-pg-hdr__profile-avatar {
        flex-shrink: 0;
        flex-grow: 0;
    }

    .w-pg__nav {
        display: block;
        width: 300px;
        background-color: #292843;
    }

    .w-pg-hdr__secondary-nav {
        display: flex;
        align-items: center;
        position: relative;
        top: 0;
        flex-shrink: 0;
        flex-grow: 1;
        margin-left: 10px;
    }

    .w-hdr-nav__link {
        color: #000;
        font-size: 20px;
        line-height: 100%;
    }

    .w-hdr-nav__item:first-child .w-hdr-nav__link {
        font-weight: 700;
    }

    .w-pg__title {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .w-chat-controls {
        position: relative;
        width: 100%;
        /*max-width: 1000px;*/
        /*margin: 0 auto 20px auto;*/
        /*padding: 10px 30px 10px 30px;*/
    }

    .w-chat-controls.w-chat-controls--fixed {
        position: fixed;
        bottom: 0px;
        /*left: 50%;*/
        width: 100%;
        /*max-width: 1000px;*/
        /*transform: translateX(calc(-50% + 125px));*/
    }

    .w-chat__composer {
        flex: 1 1 auto; /* Take up remaining space on desktop without wrapping buttons */
    }

    .w-chat-convo-starter__item {
        width: auto;
    }

    .w-chat-logo {
        width: 220px;
    }

    .w-chat-thread {
        /*padding-bottom: 100px;*/
    }

    .w-breadcrumbs--title .w-breadcrumb {
        font-size: 2rem;
    }

    .w-pg__footer {
        background-color: #fff;
    }

}
.w-pg.w-pg--entry {
    padding: 0;
}


@media only screen and (min-width: 992px) {
    /* Styles for large devices (desktops) */

    #mobileHeader {
        display: none;
    }

    #desktopHeader {
        display: block;
    }

    .w-pg {
        /*padding: 40px 40px 170px 290px;*/
        padding-left: 250px;
    }

    .w-pg__content {
        margin-top: 0;
        padding-top: 30px;
    }

    .w-pg-header__logo {
        margin: 0 auto;
    }

    .w-pg__sidebar {
        left: 0px;
        top: 0;
        height: 100vh;
        padding: 20px 10px 10px 10px;
    }

    .w-menu--side-menu {
        box-shadow: none;
    }

    .w-hide-mobile {
        display: block;
    }

    .w-pg--entry .w-col {
        padding: 10rem 1.875rem;
    }
    .w-title-greeting {
        font-size: 2.5rem;
    }

    .w-form-upload {
        max-width: 580px;
        min-width: 480px;
        padding: 15px;
    }

    .user-message .rz-card,
    .bot-message .rz-card {
        max-width: 80%;
    }

    .bot-message {
        margin-right: 20%;
    }

    .user-message {
        margin-left: 20%;
    }

    .w-menu__footer {
        z-index: 999;
    }

    .w-pg__footer {

    }

    .w-chat-controls.w-chat-controls--fixed {
        left: 280px;
        width: calc(100% - 320px);
        /*left: 50%;
        transform: translateX(calc(-50% + 125px));*/
    }
}


@media only screen and (min-width: 1200px) {
    /* Styles for extra large devices (large desktops) */

}