@media screen and (max-width: 767px) {
  .dockableContainer {
    right: 0px !important;
    left: 0px !important;
    margin: auto !important;
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
}


.cCc_embeddedChatServiceAura .esPrechatForm {
    font-family: Noto Serif Regular;
}

.prechatUI > .esPrechatForm{
    display: flex;
    flex-direction: column;
}

.backgroundPattern{
    background-position:0 0 !important;
    background-size:cover !important;
}

.sidebarBody {
    overflow:auto !important;
}


.embeddedServiceSidebarHeader h2 {
margin:0px !important;
font-size:16px !important;

}

.sidebarHeader {
  background-image: linear-gradient(to right, #154c67 , #227aa7) !important;
}

.sidebarHeader h2 {
    color:white;
}

.sldsChatButton {
  height: 54px;
  font-family: "News Cycle";
  font-size: 1.375rem !important;
  font-weight: bold !important;
}

.chatSlds .slds-form-element__label {
font-size:1rem !important;
}
.chatSlds .slds-input,.slds-textarea {
font-size:1rem !important;
border-radius:0px !important;
}

.slds-textarea{
    height:166px;
    max-height:166px;
}

.modalContainer.sidebarMinimized{
    background: none !important;
}

.embeddedServiceSidebar {
    font-size: 16px !important;

}

.embeddedServiceSidebarHeader .headerTextContent {
    font-weight:normal;
}

.embeddedServiceSidebar .layout-docked .dockableContainer
{
    position: fixed !important;
    left: auto !important;
    bottom: 0 !important;
    right: 20px !important;
    height: 90% !important;
    width: 840px !important;
    max-height: 498px !important;
    border-radius: 8px 8px 0 0 !important;
    margin-right: 80px !important;
    margin-bottom: 0px !important;
    margin-top: 0px !important;
    margin-left: 0px !important;
}

@media print {
  .embeddedServiceSidebar.layout-docked .dockableContainer.showDockableContainer, 
  .embeddedServiceSidebar.layout-float .dockableContainer.showDockableContainer {
    display: none !important;
  }
}

.embeddedServiceHelpButton .helpButton .uiButton {
        background-color: #046B99 !important;
        font-family: "Arial", sans-serif !important;
    }
    .embeddedServiceHelpButton .helpButton .uiButton:focus {
        outline: 1px solid #005290 !important;
    }
.embeddedServiceSidebar .headerItem {
    right: 0 !important;
}
button.minimizeButton.headerItem {
    position: fixed !important;
    right:30px !important;
    top: 1px !important;
}
.agentInfo.fade.fade-4x {
    display: none !important;
}
.icon {
    margin: 0px !important;
}

.embeddedServiceLiveAgentStateWaitingHeader .waitingGreeting { margin-left: 12px !important;}
button.dialogButton.uiButton.embeddedServiceSidebarButton {
    border: 2px solid #046B99 !important;
    color: #046B99  !important;
    font-family: "News Cycle" !important;
    font-size: 22px !important;
    font-weight: bold !important;
    line-height: 27px !important;
    text-align: center !important;
}

.embeddedServiceSidebarButton.uiButton--default, .embeddedServiceSidebarButton.uiButton--default:disabled {
    background: #046B99 !important;
    color: white !important;
    border: 2px solid #046B99 !important;
    color: #046B99  !important;
    font-family: "News Cycle" !important;
    font-size: 22px !important;
    font-weight: bold !important;
    line-height: 27px !important;
    text-align: center !important;
}
.embeddedServiceSidebarButton.uiButton--inverse, .embeddedServiceSidebarButton.uiButton--inverse:disabled {
    background: none !important;
    color: #046B99  !important;
}
/*.embeddedServiceSidebarButton .label,*/

.embeddedServiceSidebarButton.uiButton--inverse .label,
.embeddedServiceSidebarButton:disabled .label {
    color: #046B99 !important;
}
.waitingCancelChat, .dialogButton, .endChatButton {
    text-decoration:unset !important;

}
.dialog-button-0.embeddedServiceSidebarButton .label.bBody, .closeChatButton .label.bBody {
    color: white !important;

}

.embeddedServiceSidebarButton:not(:disabled):focus, .embeddedServiceSidebarButton:not(:disabled):hover {
    background: #046B99 !important;
}
.embeddedServiceSidebarButton.uiButton--inverse:not(:disabled):focus, .embeddedServiceSidebarButton.uiButton--inverse:not(:disabled):hover, .embeddedServiceSidebarButton.uiButton--inverse:not(:disabled){
    background-color: white  !important;
    text-decoration-color: #046B99 !important;
    border: 2px solid #046B99 !important;
    color: #046B99  !important;
    font-family: "News Cycle" !important;
    font-size: 22px !important;
    font-weight: bold !important;
    line-height: 27px !important;
    text-align: center !important;
}

.embeddedServiceSidebarExtendedHeader, .embeddedServiceSidebarHeader .shortHeaderContent {
    background: rgb(22,78,107) !important;
    background: linear-gradient(90deg, rgba(22,78,107,1) 0%, rgba(34,122,167,1) 100%) !important;
}
.embeddedServiceLiveAgentStateChat .chatSessionStartTime {
    text-align: center !important;
}

.embeddedServiceLiveAgentStateChatHeader .content {
    height: 120px  !important;
}
a.chatOption.embeddedServiceLiveAgentStateChatHeaderOption:last-of-type {
    display: none !important;
}

.optionName {
    color:white !important;
}

.embeddedServiceLiveAgentStateChat .endChatContainer .endChatButton:first-child {
    margin-bottom:8px !important;
}

h2[embeddedservice-chatheader_chatheader] {
  font-weight: bold !important;
  font-family: "News Cycle" !important;
  color: #FFFFFF !important;
  text-align: center !important;
  padding-left: 49px;
  font-size: 1.125rem !important;
}

h2[embeddedservice-chatheader_chatheader]::after {
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  content: "\f0d8";
  color: #FFFFFF;
  padding-left: 5px;
  font-size: .625rem;
  vertical-align: text-top;
}

.slds-form-element__label, .slds-form-element__control, .slds-select {
  font-family: "Noto Serif" !important;
  font-size: 1rem !important;
  color: #040E13  !important;
}

.startButton.embeddedServiceSidebarButton {
  font-weight: bold !important;
  font-family: "News Cycle" !important;
  color: #FFFFFF !important;
  font-size: 1.375rem !important;
  background: #227AA7 !important;
}

.slds-textarea {
  height: 100px !important;
  resize: none !important;
}

.slds-select_container::before {
  border-bottom: none !important;
}

.slds-select_container::after {
  border-top: none !important;
  font-family: "Font Awesome 5 Pro";
  font-weight: 400;
  content: "\f107" !important;
  color: #6e7678;
  padding: 4px 8px;
  position: absolute;
  right: 0;
  top: 0;
  text-align: center;
  width: 10%;
}

.esPrechatNonFields {
  font-family: 'Noto Serif' !important;
  font-size: .8125rem !important;
  color: #6e7678 !important;
}

.esPrechatNonFields.charCount{
   font-size: .875rem !important;
 }

.esPrechatNonFields i {
  font-size: .8125rem !important;
}


.slds-form-element__help {
  font-family: 'Noto Serif' !important;
  display: inline-block !important;
  position: relative !important;
  background: #CD2026 !important;
  color: #FFF !important;
  text-decoration: none !important;
  padding: 4px !important;
  margin-top: 10px !important;
  width: 100% !important;
  font-size: 1rem !important;
}

.slds-form-element__help::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  left: 8px !important;
  bottom: 100% !important;
  height: 0 !important;
  border-bottom: 8px solid #CD2026 !important;
  border-top: 8px solid transparent !important;
  border-left: 8px solid transparent !important;
  border-right: 8px solid transparent !important;
}

.slds-form-element__help::before {
  font-family: "Font Awesome 5 Pro"!important;
  font-weight: 900 !important;
  content: "\f06a"!important;
  color: #FFFFFF !important;
  padding-left: 4px !important;
  padding-right: 8px !important;
}

.charCount.esPrechatNonFields.esPrechatNonFields.slds-text-align_left {
  padding-left: 12px !important;
}