:root {
    --Typescale-font-size-Body-1: 16px;
    --Typescale-line-height-Body-1: 24px;
    --Typescale-font-size-Overline: 12px;
    --Typescale-line-height-Overline: 16px;
    --Corner-radius-medium: 4px;
    --Neutral-Dark-darken: #1E1E1E;
    --Neutral-Gray-lighter: #E7EBEE;
    --Text-Text-primary: #262626;
}

.dockableContainer.showDockableContainer {
    font-family: 'Inter' !important;
    text-decoration: unset !important;
}

    .dockableContainer.showDockableContainer button, .sidebarHeader {
        font-size: var(--Typescale-font-size-Body-1,16px) !important;
        font-style: normal !important;
        font-weight: 600 !important;
        line-height: var(--Typescale-line-height-Body-1,24px) !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }

#FirstName-label, .fieldList span {
    color: #6b6d6f;
    font-size: 14px;
    font-weight: 600;
    margin-left: 0px;
}

.fieldList input {
    margin-top: 5px !important;
    margin-bottom: 0px !important;
    border: 1px solid #1e1e1e !important;
    font-size: var(--Typescale-font-size-Body-1,16px) !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: var(--Typescale-line-height-Body-1,24px) !important;
}

.fieldList .form-element__help {
    font-family: 'Inter' !important;
    font-weight: 400 !important;
    font-size: 12px !important;
}

.buttonWrapper button {
    background: #1e1e1e !important;
    font-size: var(--Typescale-font-size-Body-1,16px) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: var(--Typescale-line-height-Body-1,24px) !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
}

.endChatButton.closeChatButton, button.dialogButton.dialog-button-0 {
    border-radius: var(--Corner-radius-medium,4px) !important;
    background: var(--Neutral-Dark-darken,#1e1e1e) !important;
    text-decoration: unset !important;
    border: none !important;
}

button.saveTranscriptButton, button.waitingCancelChat, button.dialogButton.dialog-button-1 {
    border-radius: 4px !important;
    border: 1px solid #1e1e1e !important;
    background-color: #fff !important;
}

    button.saveTranscriptButton span, button.waitingCancelChat span, button.dialogButton.dialog-button-1 span {
        color: var(--Text-Text-primary,#262626) !important;
    }

.messageWrapper .avatar, .avatar.iconAvatar.agentInitial.agentIconColor0 {
    background: var(--Neutral-Gray-lighter,#e7ebee) !important;
    font-size: var(--Typescale-font-size-Overline,12px) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: var(--Typescale-line-height-Overline,16px) !important;
    text-transform: uppercase;
    color: #262626 !important;
    width: 24px !important;
    height: 24px !important;
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    padding: 0px;
}

.chasitorInputWrapper {
    background: var(--Neutral-Gray-lighter,#e7ebee) !important;
}

.plaintextContent.chasitor {
    background-color: var(--Text-Text-primary,#262626) !important;
}

.sidebarHeader {
    gap: 20px;
}

    .sidebarHeader button {
        display: block !important;
        width: 20px !important;
        min-width: 20px !important;
        height: 28px !important;
        min-height: 28px !important;
        padding: 0px !important;
    }

        .sidebarHeader button:hover:before {
            display: block !important;
            top: 0 !important;
            right: -5px !important;
        }

.endChatContainer {
    gap: 16px;
}

.uiLabel-left {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    margin-left: 0px !important;
    gap: 3px !important;
}

.required {
    position: relative !important;
    left: 0px !important;
}

.helpButtonLabel {
    font-family: 'Inter' !important;
    font-size: var(--Typescale-font-size-Body-1,16px) !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: var(--Typescale-line-height-Body-1,24px) !important;
    text-decoration: none !important;
}

.embeddedServiceHelpButton .uiButton {
    padding: 16px;
    bottom: 0px !important;
    background: var(--Neutral-Dark-darken,#1e1e1e);
}

.uiButton.helpButtonEnabled {
    min-width: 239px !important;
    padding: 16px !important;
}

.embeddedServiceLiveAgentStateChatInputFooter .chasitorText {
    height: 40px !important;
}

.embeddedServiceLiveAgentStateChatInputFooter .chasitorControls {
    display: flex;
    align-items: center !important;
}

    .embeddedServiceLiveAgentStateChatInputFooter .chasitorControls .uiInput {
        align-self: auto !important;
    }

.embeddedServiceLiveAgentStateChatInputFooter .chasitorText.textAreaIsFocused {
    border: unset;
}

.embeddedServiceLiveAgentStateChatInputFooter.dynamicResizeTextOneRow .chasitorText {
    padding: 10px 10px !important;
}

.embeddedServiceLiveAgentStateChatInputFooter .footerMenuWrapper .footer-menu .slds-button__icon {
    width: 1em !important;
    height: 1em !important;
    fill: black !important;
}

.embeddedServiceLiveAgentStateChatInputFooter .footerMenuWrapper .footer-menu-items .slds-dropdown__item > a:focus {
    border: none !important;
}

.embeddedServiceLiveAgentStateChatInputFooter .footerMenuWrapper .footer-menu-items .slds-dropdown__item > a:focus {
    box-shadow: none !important;
}

.embeddedServiceLiveAgentStateChatInputFooter .footerMenuWrapper .footer-menu-items .slds-dropdown__item > a {
    color: black !important;
    text-decoration: none !important;
}

@media only screen and (max-width: 720px) {
    .embeddedServiceIcon {
        display: none !important;
    }

    .uiButton.helpButtonEnabled {
        width: 160px !important;
    }

    .embeddedServiceHelpButton .uiButton {
        bottom: 10px !important;
    }
}