.embeddedServiceSidebar.layout-docked .dockableContainer {
    width: 22.5rem!important;
    max-height: 40rem!important;
    font-family: "Benton Sans Pro", sans-serif;
}

.embeddedServiceHelpButton.forceCommunityEmbeddedServiceHelpButton {
    bottom: 2rem;
    right: 2rem;
    z-index: 4;
    height: unset;
}

.embeddedServiceSidebarMinimizedDefaultUI.embeddedServiceSidebarMinimizedDefaultUI {
    width: auto;
    bottom: 2rem !important;
    right: 2rem !important;
    background: var(--secondary-actions, #0051ff) !important;
    border-radius: 1.625rem !important;
    padding: 0 .625rem;
    border: none !important;
    display: flex !important;
    align-items: center;
}
.embeddedServiceSidebarMinimizedDefaultUI.minimizedContainer:hover{
    background-color: inherit;
}

.embeddedServiceSidebarMinimizedDefaultUI.embeddedServiceSidebarMinimizedDefaultUI::before {
    content: '';
    display: block;
    background-image: url("/sfsites/c/resource/sbgIcons/SMARTPHONE/icn_chat.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 1.5rem;
    height: 1.5rem;
    filter: invert(94%) sepia(95%) saturate(0%) hue-rotate(152deg) brightness(111%) contrast(101%);
    background-position: center;
    flex-shrink: 0;
}

.embeddedServiceHelpButton.forceCommunityEmbeddedServiceHelpButton .flatButton {
    bottom: 0;
    background: #0062E1;
    border-radius: 2.625rem;

    position: relative;
    isolation: isolate;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, .5);
    height: unset;

    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.62rem;
    justify-content: center;
    min-height: unset;
    line-height: 1rem !important;
}

.embeddedServiceHelpButton.forceCommunityEmbeddedServiceHelpButton .flatButton:hover,
.embeddedServiceHelpButton.forceCommunityEmbeddedServiceHelpButton .flatButton:focus {
    background: #0062E1;
}

.embeddedServiceHelpButton.forceCommunityEmbeddedServiceHelpButton .flatButton>span.embeddedServiceIcon {
    padding-right: 0;
    padding-left: 0;
    display: none;
}

.message{
    padding-left: 10px;
    padding-right: 1rem;
}

.flatButton[aria-label=""] .message{
    display: none;
    line-height: 1rem !important;
}

.embeddedServiceHelpButton.forceCommunityEmbeddedServiceHelpButton .icon>path {
    opacity: 1;
}

.embeddedServiceHelpButton.forceCommunityEmbeddedServiceHelpButton .help svg {
    display: none;
}

.embeddedServiceHelpButton.forceCommunityEmbeddedServiceHelpButton .flatButton:before {
    content: '';
    display: block;
    background-image: url("/sfsites/c/resource/sbgIcons/SMARTPHONE/icn_chat.svg");
    background-repeat: no-repeat;
    background-size: contain;
    width: 1.5rem;
    height: 1.5rem;
    filter: invert(94%) sepia(95%) saturate(0%) hue-rotate(152deg) brightness(111%) contrast(101%);

    background-position: center;
    flex-shrink: 0;
}

.embeddedServiceSidebar .sidebarBody {
    background:  #F2F4F6 !important;
    color: white;
    padding: 0 0 1.5rem 0;
}

.embeddedServiceLiveAgentStateChat.embeddedServiceLiveAgentStateChat .typingIndicatorBall,
.embeddedServiceLiveAgentStateWaiting .loadingBallContainer.embeddedServiceLoadingBalls .loadingBall {
    background-color: #0033AA;
}

.embeddedServiceSidebarState.embeddedServiceSidebarDialogState .dialogButtonContainer .slds-button.slds-button--neutral.dialogButton.dialog-button-1.uiButton span.label.bBody {
    color: #0033AA;
}

.embeddedServiceLiveAgentStateChat.embeddedServiceLiveAgentStateChat .messageArea {
    background: var(--neutrals-pale-grey-25-background, #F4F5F7);
    /* card elevations/level-20 */
    box-shadow: unset;
}


.embeddedServiceLiveAgentStateChat.embeddedServiceLiveAgentStateChat .chatSessionStartTime>span {
    color: var(--neutrals-light-grey-text-subdued, #5C6C80);
    font-family: "Benton Sans Pro", sans-serif;
    font-size: 0.625rem;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
}

.embeddedServiceLiveAgentStateChat.embeddedServiceLiveAgentStateChat .chatSessionStartTime {
    margin: 1rem 0;
}

.embeddedServiceLiveAgentStateChatItem.chatMessage{
    background: none!important;
    margin-bottom: 1rem !important;
}

.embeddedServiceLiveAgentStateChatItem.chatMessage button {
    background: #FFFFFF !important;
    border-radius: 0.5rem;
    color: var(--primary-secondary-color, #0062E1);
    font-family: "Benton Sans Pro", sans-serif !important;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 500 !important;
    line-height: 130%;
    padding: 0.7rem 1.25rem;
    border: 1px solid var(--neutrals-pale-grey-50, #0062E1);
    box-shadow: none;
    margin-right: 0.5rem;
    --slds-c-button-color-background: unset !important;
    --slds-c-button-color-border: unset !important;
}

.embeddedServiceLiveAgentStateChatMenuMessage.agent .chatContent {
    background: #fff !important;
    width: calc(100% - 2.5rem);
    margin-left: 2.5rem;
    border-radius: var(--radius-md, 0.5rem);
}

.embeddedServiceLiveAgentStateChatButtonMessage.agent .chatContent {
    background: white;
}

.embeddedServiceLiveAgentStateChatButtonMessage.agent .chatContent:hover {
    background-color: #1948AF;
    color: #fff;
}

.embeddedServiceLiveAgentStateChatMenuMessage.embeddedServiceLiveAgentStateChatMenuMessage .rich-menu {
    width: 100%;
    border-radius: var(--radius-md, 0.5rem);
}

.embeddedServiceLiveAgentStateChatMenuMessage.embeddedServiceLiveAgentStateChatMenuMessage .rich-menu-items {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    padding: 1rem;
}

.messageWrapper .embeddedServiceLiveAgentStateChatItem .chatContent ul.rich-menu-items li,
.messageWrapper .embeddedServiceLiveAgentStateChatItem .chatContent ul.rich-menu-items li:first-of-type {
    border-color: transparent;
}

.messageWrapper .embeddedServiceLiveAgentStateChatMenuMessage .rich-menu {
    background-color: transparent;
}

.messageWrapper .embeddedServiceLiveAgentStateChatMenuMessage .chatContent .rich-menu-item:hover,
.messageWrapper .embeddedServiceLiveAgentStateChatMenuMessage .chatContent .rich-menu-item:active,
.messageWrapper .embeddedServiceLiveAgentStateChatMenuMessage .chatContent .rich-menu-item:hover:active,
.messageWrapper .embeddedServiceLiveAgentStateChatMenuMessage .chatContent .rich-menu-item:focus,
.messageWrapper .embeddedServiceLiveAgentStateChatMenuMessage .chatContent .rich-menu-item:focus:hover {
    border-radius: 0.5rem;
    opacity: 1;
    border: 1px solid #0062E1;
}

.messageWrapper .embeddedServiceLiveAgentStateChatItem .isCommunitiesContext .avatar {
    background-image: url("/sfsites/c/resource/MallChatStyles/StandardBankChatBotAvatar.svg");
    color: transparent;
    margin-bottom: 0;
    width: auto;
    height: 1.5rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: unset;
}

.messageWrapper .embeddedServiceLiveAgentStateChatAvatar.isCommunitiesContext {
    background: none;
    margin: 0;
    height: unset;
    top: 5px;
}

.embeddedServiceLiveAgentStateChat.embeddedServiceLiveAgentStateChat .chasitorInputWrapper {
    background-color: unset;
    border-top: 1px solid #CED3D9;
    margin: 0 1rem;
    width: calc(100% - 2rem);
    max-height: unset;
    height: auto;
    padding-top: 1rem;
}

.embeddedServiceLiveAgentStateWaiting .waitingGreeting,
.embeddedServiceLiveAgentStateWaiting .waitingMessage {
    font-weight: 400;
    font-size: var(--font-size-body-m, 1rem);
    line-height: 1.25rem;
    text-align: center;
    font-family: "Benton Sans Pro", sans-serif;

}

.embeddedServiceLiveAgentStateWaiting .waitingGreeting {

    color: var(--neutrals-medium-grey-text-body, #1A314D);
    font-family: "Benton Sans Pro", sans-serif;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 500;
    line-height: 130%;
}

.embeddedServiceLiveAgentStateWaiting .waitingMessage {
    color: var(--neutrals-medium-grey-text-body, #1A314D);
    text-align: center;
    font-family: "Benton Sans Pro", sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
}

.embeddedServiceLiveAgentStateWaiting .waitingStateButtonContainer {
    background: #F4F5F7;
}

.embeddedServiceSidebarDialogState.embeddedServiceSidebarDialogState #dialogTextTitle {
    font-weight: 700;
    font-size: var(--font-size-heading-s, 1.125rem);
    line-height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Benton Sans Pro", sans-serif;
    color: #0033AA;
    
}

.embeddedServiceLiveAgentStateChatEventMessage .eventMessage>.uiOutputRichText {
    color: white;
}


.embeddedServiceLiveAgentStateChatItem.agent .nameAndTimeContent {
    color: var(--neutrals-light-grey-text-subdued, #5C6C80);
    font-family: "Benton Sans Pro", sans-serif;
    font-size: 0.625rem;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    padding-top: 0.4rem;
}


.embeddedServiceLiveAgentStateChatInputFooter .uiInput--textarea .textarea:focus,
.embeddedServiceLiveAgentStateChatInputFooter .uiInput--textarea.textarea:focus,
.embeddedServiceLiveAgentStateChatInputFooter .uiInput--textarea .textarea:active,
.embeddedServiceLiveAgentStateChatInputFooter .uiInput--textarea.textarea:active,
.embeddedServiceLiveAgentStateChatInputFooter.embeddedServiceLiveAgentStateChatInputFooter .chasitorText {
    --lwc-esColorBackgroundInverse: #fff;
    --lwc-esColorBorderInverse: #0a2240;
    --lwc-colorBackgroundInputActive: #fff;
    --lwc-colorTextDefault: #fff6;
    color: var(--secondary-text-dark-grey, #0b0f14);
    font-weight: 400;
    font-size: var(--font-size-body-s, 0.875rem);
    line-height: 1rem;
    font-family: "Benton Sans Pro", sans-serif;
}

.embeddedServiceLiveAgentStateChatInputFooter .uiInput--textarea .textarea.textAreaIsFocused:focus,
.embeddedServiceLiveAgentStateChatInputFooter .uiInput--textarea.textarea.textAreaIsFocused:focus,
.embeddedServiceLiveAgentStateChatInputFooter .uiInput--textarea .textarea.textAreaIsFocused:active,
.embeddedServiceLiveAgentStateChatInputFooter .uiInput--textarea.textarea.textAreaIsFocused:active {
    --lwc-colorTextDefault: #fff;
    --lwc-colorBackgroundInputActive: #fff;
    --lwc-colorBrand: #fff6;
}

.embeddedServiceLiveAgentStateChatInputFooter.embeddedServiceLiveAgentStateChatInputFooter .chasitorControls {
    position: relative;
    border-radius: 0;
    display: flex;
    align-items: center;
    height: 100%;
    justify-content: center;
    margin: 0;
    background: var(--neutral-light-grey, #f4f5f7);
}

.embeddedServiceLiveAgentStateChatInputFooter.embeddedServiceLiveAgentStateChatInputFooter .chasitorControls .uiInput {
    align-self: stretch;
    max-width: 100%;
    height: unset;
    flex-grow: 1;
    padding: 1.2rem 1rem;
    margin: auto;
    border: 1px solid #DFE0E3;
    max-height: unset;
}

.embeddedServiceSidebarButton.embeddedServiceSidebarButton.uiButton--inverse:not(:disabled),
.embeddedServiceSidebarButton.embeddedServiceSidebarButton:not(:disabled),
.embeddedServiceSidebarButton.embeddedServiceSidebarButton.uiButton--inverse:not(:disabled):focus,
.embeddedServiceSidebarButton.embeddedServiceSidebarButton.uiButton--inverse:not(:disabled):hover,
.embeddedServiceSidebarButton.embeddedServiceSidebarButton:not(:disabled):focus,
.embeddedServiceSidebarButton.embeddedServiceSidebarButton:not(:disabled):hover {
    background: var(--secondary-actions, #0051ff);
    border-radius: 0.5rem;
    padding: .9375rem .625rem;
    gap: .25rem;
    border-color: #0051FF !important;
    border: 1px solid;
}


.embeddedServiceSidebarButton:focus {
    text-decoration: none !important;
}

.slds-button.slds-button--neutral.waitingCancelChat.uiButton--inverse.uiButton.embeddedServiceSidebarButton {
    background: #0062E1 !important;
}

.slds-button.slds-button--neutral.waitingCancelChat.uiButton--inverse.uiButton.embeddedServiceSidebarButton > span {
    color: #fff !important;
}

.embeddedServiceLiveAgentStateChat .endChatContainer .endChatButton {
    background: #0062E1 !important;
}

.embeddedServiceSidebarButton.embeddedServiceSidebarButton.dialog-button-0:not(:disabled) {
    background: var(--secondary-actions, #0051ff) !important;
}

.embeddedServiceSidebarButton.embeddedServiceSidebarButton:not(:disabled):hover,
.embeddedServiceSidebarButton.embeddedServiceSidebarButton.uiButton--inverse:not(:disabled):hover {
    background: #003FCA !important;
}

.embeddedServiceSidebarButton.embeddedServiceSidebarButton:not(:disabled):hover span.label.bBody,
.embeddedServiceSidebarButton.embeddedServiceSidebarButton.uiButton--inverse:not(:disabled):hover span.label.bBody {
    color: #fff !important;
}



.embeddedServiceSidebarDialogState.embeddedServiceSidebarDialogState #dialogTextBody {
    color: #1A314D;
}

.stateBody.embeddedServiceSidebarState.embeddedServiceSidebarDialogState,
.waitingStateContent {
    background: #F4F5F7;
}

.embeddedServiceSidebarButton.embeddedServiceSidebarButton.uiButton--inverse {
    background: #FFF !important;
    border-radius: .375rem;
    padding: .9375rem .625rem;
    gap: .25rem;
}

.embeddedServiceSidebarButton.embeddedServiceSidebarButton.uiButton--inverse .label {
    color: #0051FF;
    font-family: "Benton Sans Pro", sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1rem;
    text-transform: uppercase;
}





.embeddedServiceLiveAgentStateChatItem.chatMessage button:hover {
    background-color: #0062E1 !important;
    color: white !important;
}

.embeddedServiceLiveAgentStateChatItem.embeddedServiceLiveAgentStateChatItem .chatContent li:first-child button.rich-menu-itemOptionIsClicked,
.embeddedServiceLiveAgentStateChatItem.embeddedServiceLiveAgentStateChatItem .chatContent ul.rich-menu-items li:first-of-type,
.embeddedServiceLiveAgentStateChatItem.embeddedServiceLiveAgentStateChatItem .chatContent ul.rich-menu-items li:last-of-type,
.embeddedServiceLiveAgentStateChatItem.embeddedServiceLiveAgentStateChatItem .chatContent li:last-child button.rich-menu-itemOptionIsClicked {
    border-radius: .5rem !important;
}

.embeddedServiceLiveAgentStateChatItem.chatMessage button span {
    color: #FFF;
}

.embeddedServiceLiveAgentStateChatItem .chatMessage.agent{
    float: unset!important;
}

.embeddedServiceLiveAgentStateChatItem.embeddedServiceLiveAgentStateChatItem.chatMessage button span {
    color: var(--secondary-text-dark-grey, #0b0f14);
    color: var(--primary-secondary-color, #0062E1);
    font-family: "Benton Sans Pro", sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1rem;
    text-transform: uppercase;
}

.slds-button.slds-button--neutral.dialogButton.dialog-button-1.uiButton.embeddedServiceSidebarButton label.bBody {
    color: #0051FF;
}

.embeddedServiceLiveAgentStateChatInputFooter .chasitorControls .uiInput {
    align-self: stretch;
    max-width: 100%;
    height: 100%;
    flex-grow: 1;
    background: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: .375rem;
    margin: 0rem .9375rem;
    color: #273851;
    font-weight: 400;
    font-size: var(--font-size-body-s, 0.875rem);
    line-height: 1rem;
    font-family: "Benton Sans Pro", sans-serif;
    display: flex;
    align-items: center;
}

.embeddedServiceSidebarButton .label{
    /* 14/BUTTON _s_bold */
    font-family: "Benton Sans Pro", sans-serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1rem; /* 114.286% */
    text-transform: uppercase;
}



.embeddedServiceLiveAgentStateChatItem.embeddedServiceLiveAgentStateChat .endChatContainer:before {
    position: absolute;
    content: " ";
    width: 100%;
    height: 1.5rem;
    left: 0;
    top: -1.5rem;
    border-bottom: .0625rem solid var(--neutral-light-grey, #f4f5f7);
}

@media only screen and (max-width:480px) {
    .embeddedServiceHelpButton.forceCommunityEmbeddedServiceHelpButton {
        bottom: 3rem;
        right: 1rem;
    }
}

.embeddedServiceSidebar .dialog-button-1{
    background: #fff!important;
}

.embeddedServiceSidebar .dialog-button-1 .label{
    color: var(--primary-secondary-color, #0062E1)!important;

}

.chatMessage .chasitor{
    background: var(--neutrals-medium-grey-text-body, #1A314D)!important;
}

.embeddedServiceLiveAgentStateChatItem .isCommunitiesContext{
    background-color: unset!important;
    float:  none!important;
    bottom: unset!important;
    display:  flex;
    align-items:  center;
    justify-content:  center;
}

.embeddedServiceLiveAgentStateChatItem .isCommunitiesContext .avatar{
    background-image: url("/sfsites/c/resource/MallChatStyles/StandardBankChatBotAvatar.svg")!important;
    color: transparent!important;
    margin-bottom: 0!important;
    width: 1.5rem!important;
    height: 1.5rem!important;
    background-size: contain!important;
    background-repeat: no-repeat!important;
    background-position: center!important;
    border-radius: unset!important;
    flex-shrink: 0!important;
    transform: unset!important;
}

.forceCommunityEmbeddedServiceHelpButton .flatButton .helpButtonLabel{
    align-items: center;
    display:  flex;
}

@media only screen and (max-width: 500px){
    .embeddedServiceSidebar.layout-docked .dockableContainer {
        width: 100%!important;
        max-height: 40rem!important;
        max-width: unset!important;
        right: 0!important;
        left: 0!important;
        font-family: "Benton Sans Pro", sans-serif;
    }

    .embeddedServiceHelpButton.forceCommunityEmbeddedServiceHelpButton .flatButton{
        bottom: 6rem;
        right:  1.5rem;
        position:  fixed;
        padding: 0.5rem;
    }
}

.forceCommunityEmbeddedServiceHelpButton.slds-input-has-icon .slds-input__icon {
    width: var(--lwc-squareIconMediumContentAlt,0.875rem);
    height: var(--lwc-squareIconMediumContentAlt,0.875rem);
    position: absolute;
    top: 50%;
    margin-top: -14px;
    line-height: 1;
    border: 0;
    z-index: 2
}