/* Load fonts */
  @font-face {
    font-family: "OpenSans-Bold";
    src: url("../fonts/OpenSans-Bold.ttf");
  }

  @font-face {
    font-family: "OpenSans-Light";
    src: url("../fonts/OpenSans-Light.ttf");
  }

  @font-face {
    font-family: "OpenSans-Medium";
    src: url("../fonts/OpenSans-Medium.ttf");
  }

  @font-face {
    font-family: "OpenSans-Regular";
    src: url("../fonts/OpenSans-Regular.ttf");
  }

  @font-face {
    font-family: "OpenSans-SemiBold";
    src: url("../fonts/OpenSans-SemiBold.ttf");
  }

  /* ----- Vars ----- */
  :root {
    /* General Var */
    --nf-OpenSans-Bold: OpenSans-Bold;
    --nf-OpenSans-Light: OpenSans-Light;
    --nf-OpenSans-Medium: OpenSans-Medium;
    --nf-OpenSans-Regular: OpenSans-Regular;
    --nf-OpenSans-SemiBold: OpenSans-SemiBold;
    --nf-mainFontFamily:	 OpenSans-Regular;
	--nf-secondaryFontFamily: OpenSans-Regular;
    /* CTA Variables #c4960c;*/
    --nf-tertiaryColor:			     #000;
    --nf-mainBackground:			 #000000;
    --nf-mainColor:					 #000000;
    --nf-common-hoverColor:          #000000;
    --nf-primaryBackground:			 #000000;

    --nf-cta-backgroundColor:        #9e007e;
    --nf-cta-hoverBackgroundColor:   #9e007e;
	--nf-hamburger-menu-color:       #9e007e;
	--nf-form-icon-color:            #9e007e;
	--nf-privacy-policy-color:       #9e007e;

    --nf-menu-item-Selected-Color:   #000000;
    --nf-menu-button-Selected-Color: #000000;

    --nf-linkColor:				     #007a9c;
	--nf-linkvisited:				 #551a8b;
    --cta-imgUrl:					 url("../images/desktopCTA.svg");
	--mobileCTA-imgUrl:				 url("../images/mobileCTA.svg");
	--mobileCTAHover-imgUrl:		 url("../images/mobileCTAHover.svg");

    --nf-titleFontSize:				 18px;
    --nf-largeFontSize:				 16px;
    --nf-boxShadowLight:			 0 0 8px 0 rgba(0, 0, 0, 0.08);
    --nf-borderRadius:				 8px;

    --nf-fontWeight:				 normal;
    --nf-fontWeight2:				 bold;
    --white:                       #ffffff;
	--nf-button-color:				#000000;

    --nf-error-border-color:                #CA6E68;
    --nf-error-color:                       #B32820;
    --nf-error-color-hover:                 #680002;

    --nf-chatMessageLineItem-paddingLeft:		18px;
    --nf-chatMessageLineItem-paddingRight:		18px;
    --nf-chatMessage-maxWidth:					222px;
    --nf-menuItemBorder-borderWidth:			1px;
    --nf-menuItemBorder-borderWidth-negative:	calc(-1 * var(--nf-menuItemBorder-borderWidth));
    --nf-header-paddingRight:					14px;
    --nf-header-paddingLeft:					14px;

    /* Specific Var */
    --nf-loadingScreen-backgroundColor:	        #f4f4f4;
    --nf-mainFontColor:					        #000000;
    --nf-secondaryFontColor:			        #000;
    --nf-action-color:                      #FFF;
    --nf-actionHoverBackgroundColor:        #000000;
    --nf-actionHoverColor:			        #FFF;
    --nf-actionDisabledColor:               #979797;

    --nf-input-body-background:             #FFFFFF;
    --nf-input-body-background-inverse:     #46464A;
    --nf-bot-elements-border:               #46464A;
	--nf-bot-privacypolicy-background:      #d2db0e;
  }

 /*FL*/

	.embeddedServiceLiveAgentStateChat {
		--lwc-brandTextLink : var(--nf-linkColor,#007a9c) !important;
		--lwc-brandTextLinkActive : var(--nf-linkColor,#007a9c) !important;
	}

	.policy-link {
		color: var(--nf-linkColor,#007a9c) !important;
		font-weight: bold;
		font-size: 11px;
		text-decoration: underline !important;
	}

	.embeddedServiceSidebar{
		font-family: var(--nf-mainFontFamily, OpenSans-Regular);
	}

	/* Loading Ball Container */
	.embeddedServiceSidebar .waitingStateContainer .loadingBallContainer{
		padding-top: 0px;
	}

	/* Loading Ball Balls */
	.embeddedServiceSidebar .waitingStateContainer .loadingBallContainer .loadingBall{
		background-color:	var(--nf-tertiaryColor, #000);
	}

  .embeddedServiceLiveAgentStateChatInputFooter .chasitorControls .uiInput {
    align-self: stretch;
    max-width: 100%;
    height: 100%;
    flex-grow: 1;
    background-color: #f4f4f4 !important;
  }

 /* ----- CTA ----- */
  /* base styling for CTA in before chat and minimized state */
  button.uiButton.helpButtonEnabled,
  button.sidebarHeader.minimizedContainer.embeddedServiceSidebarMinimizedDefaultUI {
      width: 280px !important;
      min-width: 280px !important;
      height: 35px !important;
      border-radius: 17.5px !important;
      background-color: var(--nf-cta-backgroundColor) !important;
      border: 1px;
      bottom: 35px;
      right: 70px;
      box-shadow: 0 0 12px 0 rgb(0 0 0 / 25%) !important;
	  font-size: 14px !important;
  }

  .embeddedServiceSidebarMinimizedDefaultUI.helpButton .messageContent{
	justify-content: initial !important;
  }

  button.uiButton.helpButtonEnabled:hover,
  button.sidebarHeader.minimizedContainer.embeddedServiceSidebarMinimizedDefaultUI:hover {
      background-color: var(--nf-cta-hoverBackgroundColor) !important;
	  text-decoration: none !important;
  }

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

  button.uiButton.helpButtonEnabled:hover::before,
  button.uiButton.helpButtonEnabled:focus::before {
      display: none !important;
  }

  button.uiButton.helpButtonDisabled {
      display: none !important;
  }

  .uiButton span.message {

	width: 220px !important;
	height: 19px !important;
	margin: 0px 0 0 0px !important;
	font-family: var(--nf-OpenSans-Regular);
	font-size: 14px !important;
	font-weight: 600 !important;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	letter-spacing: normal;
	text-align: center;
	color: var(--white);

  }

  .embeddedServiceSidebarMinimizedDefaultUI .content {
    width: 250px !important;
    height: 19px !important;
    margin: 0px 0 0 0px !important;
    font-family: var(--nf-OpenSans-Regular);
    font-size: 14px !important;
    font-weight: 600 !important;
    font-stretch: normal !important;
    font-style: normal;
    line-height: normal;
    letter-spacing: normal;
    text-align: center !important;
    color: var(--white);
	padding: 0 0px !important;
}

.embeddedServiceSidebarMinimizedDefaultUI .minimizedText>.message{
	font-family: var(--nf-OpenSans-Regular) !important;
    font-size: 14px !important;
	margin: 0px !important;
}

.embeddedServiceSidebarMinimizedDefaultUI .minimizedText{
	overflow: inherit !important;
}

.embeddedServiceIcon svg {
    /* display: inline-block; */
    box-sizing: content-box !important;
    fill: var(--lwc-colorTextInverse,rgb(255, 255, 255));
}

  .embeddedServiceHelpButton .helpButton {
      position: fixed;
      height: 35px !important;
      width: 213px !important;
  }

  .embeddedServiceHelpButton .helpButton .helpButtonDisabled .embeddedServiceIcon:before,
  .embeddedServiceHelpButton .helpButton .helpButtonEnabled .embeddedServiceIcon:before,
  .messageContent > span.help > svg.icon {
      display: inline-block !important;
      content: "";
      background-image: var(--cta-imgUrl);
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      vertical-align: middle;
      /* margin-left: auto !important; */

	  width: 32px !important;
	  height: 32px !important;
	  margin: 0 0px 0px 0 !important ;
	  padding: 1px 1px 1px 1px !important;
  }

  .embeddedServiceHelpButton .embeddedServiceIcon {
      position: relative;
      z-index: 1;
      display: inline-block;
      margin-right: 0 !important;
      line-height: 1;
      vertical-align: top;
  }

 .messageContent > span.help > svg.icon > path {
      display: none;
      content: "";
      background-image: var(--cta-imgUrl);
      height: 32px;
      width: 32px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      vertical-align: middle;
      margin-left: auto !important;
      margin: 0 5px 0px 0 !important;
      padding: 6.3px 5.7px 4.9px 5.7px;
  }

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

  .embeddedServiceSidebar .minimizedContainer.newMessage .messageContent {
    height: 100%;
    margin: 0;
    visibility: visible;
  }

  .embeddedServiceSidebar .minimizedContainer.newMessage .messageContent .minimizedText {
    height: 100%;
    border-radius:100%;
  }

  /* ----- Loading Screen ----- */
	.embeddedServiceSidebar{
		font-family: var(--nf-mainFontFamily, Helvetica, sans-serif);
	}

	/* Waiting Chat Background */
	.embeddedServiceSidebar .waitingStateContainer{
		background-color:  #f4f4f4;
	}

	/* Welcome Text | "Hello!" */
	.embeddedServiceSidebar .waitingStateContainer .waitingGreeting {
		color:			var(--nf-mainFontColor, #000);
		font-weight:	bold;
		font-family:	var(--nf-mainFontFamily, Helvetica, sans-serif);
		font-size:		var(--nf-titleFontSize, 18px);
	}

	/* Loading Ball Container */
	.embeddedServiceSidebar .waitingStateContainer .loadingBallContainer{
		padding-top: 0px;
	}

	/* Loading Ball Balls */
	.embeddedServiceSidebar .waitingStateContainer .loadingBallContainer .loadingBall{
		background-color:	var(--nf-tertiaryColor, #000);
	}

	/* Cancel Chat Request Button Container | ["Cancel Chat Request"] */
	.embeddedServiceSidebar .waitingStateContainer .waitingStateButtonContainer{
		padding: 0 22px 23px;
		color: #fff !important;
	}

	/* Cancel Chat Request Button | ["Cancel Chat Request"] */
	.embeddedServiceSidebar .waitingStateContainer .waitingStateButtonContainer .embeddedServiceSidebarButton.uiButton{
		background-color:	var(--nf-button-color) !important;
		color: #fff !important;
		text-decoration: none;
	}

	.embeddedServiceSidebar .waitingStateContainer .waitingStateButtonContainer .embeddedServiceSidebarButton.uiButton .label.bBody{
		color:				#fff !important;
		font-size:			var(--nf-largeFontSize, 16px);
		font-family:		var(--nf-mainFontFamily);
		font-weight:		var(--nf-fontWeight2, bold);
	}

	/* Cancel Chat Request Button | :hover and :focus | ["Cancel Chat Request"] */
	.embeddedServiceSidebar .waitingStateContainer .waitingStateButtonContainer .embeddedServiceSidebarButton.uiButton:hover{
		/* background-color:	var(--nf-common-hoverColor) !important; */
		text-decoration:	none !important;
	}

	.embeddedServiceSidebar .waitingStateContainer .waitingStateButtonContainer .embeddedServiceSidebarButton.uiButton:focus{
		background-color:	var(--nf-button-color) !important;
		text-decoration:	none !important;
	}

	.embeddedServiceSidebar .waitingStateContainer .waitingStateButtonContainer .embeddedServiceSidebarButton.uiButton:hover .label.bBody,
	.embeddedServiceSidebar .waitingStateContainer .waitingStateButtonContainer .embeddedServiceSidebarButton.uiButton:focus .label.bBody{
		text-decoration: none !important;
	}

  /* ----- Connecting Screen ----- */
	/* Connecting Chat Background */
	.embeddedServiceSidebar .queue.hideLogoForMobile+#sidebarDialogAssistiveText+.dockableContainer .waitingStateContainer {
		/* background-color: var(--nf-loadingScreen_backgroundColor, #f4f4f4); */
	}

	/* Chat Bubble */
	.embeddedServiceSidebar .waitingStateContainer .queuePositionChatIcon svg.icon {
		fill: #d8d8d8;
	}

	/* Waiting Message | "We'll be with you shortly!" */
	.embeddedServiceSidebar .waitingStateContainer .queuePositionContent .queuePositionCounter.youAreNextMessage {
		font-size:			14px;
		color:				var(--nf-mainFontColor, #000);
		font-family:		var(--nf-mainFontFamily);
	}

	.embeddedServiceLiveAgentQueuePosition.queuePositionTransferring .youAreNextMessage {
		visibility: hidden !important;
	}

	.embeddedServiceLiveAgentQueuePosition.queuePositionTransferring .youAreNextMessage:after {
		visibility: visible !important;
		content: "You're up next!" !important;
	}

	/* Status Message | "Connecting..." */
	.embeddedServiceSidebar .waitingStateContainer .queuePositionContent .queuePositionMessage>p{
		font-family:	var(--nf-mainFontFamily);
		font-size:		var(--nf-titleFontSize, 18px);
		color:			var(--nf-mainFontColor, #000);

	}

  	/* Close and Minimize Buttons */
	.embeddedServiceSidebar .dockableContainer .sidebarHeader button:before {
		border-radius: 4px !important;
	}
	.embeddedServiceSidebar .sidebarHeader .minimizeButton {
		background: none !important;
		border: none !important;
		height: 17px;
		min-height: 17px;
		width: 17px;
		min-width: 17px;
		margin-right:14px;
		color: inherit;
		font: inherit;
		letter-spacing: inherit;
		padding: 0 !important;
		text-align: inherit;
		text-transform: inherit;
    }
	.embeddedServiceSidebar .sidebarHeader .minimizeButton:hover:before {
		right: calc(31px + var(--nf-header-paddingRight, 14px)) !important;
		width: 17px !important;
		height: 17px !important;
		top: 14px !important;
	}
    .embeddedServiceSidebar .sidebarHeader .closeButton {
		background: none !important;
		border: none !important;
		height: 17px;
		min-height: 17px;
		width: 17px;
		min-width: 17px;
		color: inherit;
		font: inherit;
		letter-spacing: inherit;
		padding: 0 !important;
		text-align: inherit;
		text-transform: inherit;
    }
	.embeddedServiceSidebar .sidebarHeader .closeButton:hover:before {
		right: var(--nf-header-paddingRight, 14px) !important;
		width: 17px !important;
		height: 17px !important;
		top: 14px !important;
	}


  	/* Sidebar Body */
	.embeddedServiceSidebar .sidebarBody {
		background-color:	#f4f4f4;
	}

	/* Body of chat window where messages appear */
	.embeddedServiceSidebar .messageArea {
		background-color:	transparent;
	}

  	/* Chat Message Line Item */
	.embeddedServiceSidebar .embeddedServiceSidebarState .messageArea .messageWrapper .chatMessage,
	.embeddedServiceSidebar .messageArea>.typingIndicatorContainer>.embeddedServiceLiveAgentStateChatTypingIndicator {
		/* Distance from left to agent avatar */ /* #VAR1 */
		padding-left:		var(--nf-chatMessageLineItem-paddingLeft, 18px);
		/* Distance from right to chasitor message */
		padding-right:		var(--nf-chatMessageLineItem-paddingLeft, 18px);
		/* Distance from end of chat message line item to next chat message line item */
		margin-bottom:		4px;
		background-color:	transparent;
	}

  	/* Bot Avatar (Agent Avatar) */
	.embeddedServiceSidebar .messageWrapper .chatMessage>.embeddedServiceLiveAgentStateChatAvatar>.avatar {
		margin-bottom: 17px;
		width:			32px;
		height:			unset;
		aspect-ratio:	1;
	}

  	/* Message Bubble */
	.embeddedServiceLiveAgentStateChatPlaintextMessageDefaultUI.agent.plaintextContent {
		color: var(--lwc-colorTextDefault,#333333);
		background-color: #fff !important;
		box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08);
		/* max-width: var(--nf-chatMessage-maxWidth, 222px); */
		max-width: 100% !important;
	}

	.embeddedServiceSidebar .messageWrapper>.chatMessage>.chatContent .chat-content {
		padding:			10px;
		box-shadow:			0 2px 12px 0 rgb(0 0 0 / 12%);
		max-width:			var(--nf-chatMessage-maxWidth, 222px);
		box-sizing:			border-box;
		background-color:	#fff !important;
	}
	.embeddedServiceSidebar .messageWrapper>.chatMessage>.chatContent .chat-content.agent {
		margin-left:		40px;
		background-color:	#fff !important;
		color:				var(--nf-mainFontColor, #000);
		border-radius:		var(--nf-borderRadius, 8px)  var(--nf-borderRadius, 8px)  var(--nf-borderRadius, 8px)  0px;
	}
	.embeddedServiceSidebar .messageWrapper>.chatMessage>.chatContent .chat-content.chasitor {
		background-color:	var(--nf-mainFontColo, #000000) !important;
		color:				#fff;
		border-radius:		var(--nf-borderRadius, 8px)  var(--nf-borderRadius, 8px)  0px  var(--nf-borderRadius, 8px);
	}

  	/* Message Bubble Text */
	.embeddedServiceSidebar .messageWrapper>.chatMessage>.chatContent .chat-content>.chatMessageContent {
		font-family:	var(--nf-mainFontFamily, Helvetica, sans-serif);
		font-size:		14px;
		line-height:	1.34;
	}

  .embeddedServiceSidebar .messageWrapper>.chatMessage>.chatContent .chat-content.agent>.chatMessageContent {
        background-color:	#fff;
	}

  	/* Chat Interaction Footer */
	.embeddedServiceSidebar .dockableContainer .stateBody>.chasitorInputWrapper.embeddedServiceLiveAgentStateChatInputFooter {
		height:				64px;
		min-height:			64px;
		border-top:			2px solid var(--nf-mainColor);
		background-color:	#fff;

		/* box-sizing:	content-box; */
	}

	/* Hamburger Menu Container */
	.embeddedServiceSidebar .embeddedServiceLiveAgentStateChatInputFooter .footer-menu>.slds-dropdown-trigger.slds-dropdown-trigger_click {
		height:			100%;
		box-sizing:		border-box;
		padding-bottom:	21px;
		padding-left:	7px;
		padding-right:	7px;
	}

  	/* Hamburger Menu Button */
	.embeddedServiceSidebar .slds-dropdown-trigger>.slds-button.slds-button_icon.slds-button_icon-container-more:hover {
		fill:	var(--nf-mainColor) !important;
	}
	.embeddedServiceSidebar .slds-dropdown-trigger>.slds-button.slds-button_icon.slds-button_icon-container-more:active {
		fill:	var(--nf-mainColor) !important;
	}
	.embeddedServiceLiveAgentStateChatInputFooter .footerMenuWrapper .footer-menu .slds-button:focus {
		box-shadow: none !important;
		text-decoration: none !important;
	}

	/* Hamburger Menu Button | Menu Opened */
	.embeddedServiceSidebar .slds-dropdown-trigger.slds-is-open>.slds-button.slds-button_icon.slds-button_icon-container-more{
		fill:	var(--nf-mainColor);
	}

	/* Hamburger Menu Button Icon */
	.embeddedServiceLiveAgentStateChatInputFooter .footerMenuWrapper .footer-menu .slds-button__icon {
		fill: #D9D9D9;
	}
	.embeddedServiceLiveAgentStateChatInputFooter .footerMenuWrapper .footer-menu .slds-button__icon:hover {
		fill: #244486;
	}
	.embeddedServiceLiveAgentStateChatInputFooter .footerMenuWrapper .footer-menu .slds-button__icon:active {
		fill:	var(--nf-mainColor);
	}

	.embeddedServiceSidebar .footerMenuWrapper .slds-button.slds-button_icon-container-more:hover svg.slds-button__icon {
		filter: none !important;/*drop-shadow(0 0 8px rgba(0, 0, 0, 0.16));*/
	}

	/* Hamburger Menu Button Icon | Menu Opned */
	.embeddedServiceSidebar .slds-dropdown-trigger.slds-is-open>.slds-button.slds-button_icon.slds-button_icon-container-more svg.slds-button__icon {
		filter: none !important;/*drop-shadow(0 0 8px rgba(0, 0, 0, 0.16));*/
		fill:	var(--nf-mainColor);
	}

	/* Text Input Box Container */
	.embeddedServiceSidebar .embeddedServiceLiveAgentStateChatInputFooter>.chasitorControls {
		margin-right:	7.5px;
		margin-bottom:	7px;
		margin-top:		7px;
		height:			calc(100% - 14px);
	}

	/* Text Input Box */
	.embeddedServiceLiveAgentStateChatInputFooter>.chasitorControls>.uiInput.textarea.chasitortext {
		border-radius:	0px;
		height:			100%;
		padding:		17px 10px;
		border:			none;
		font-size:		14px;
		line-height:	normal;
		font-family:	var(--nf-mainFontFamily);

		color:			var(--nf-mainFontColor, #000);
	}

	/* Text Input Box Placeholder Text */
	.embeddedServiceLiveAgentStateChatInputFooter>.chasitorControls>.uiInput.textarea.chasitortext::placeholder {
		color: #9b9b9b;
		font-size: 14px;
		font-style: oblique;
	}

	/* Text Input Box Placeholder Text | ::selection*/
	.embeddedServiceLiveAgentStateChatInputFooter>.chasitorControls>.uiInput.textarea.chasitortext::selection {
		/* color: red; */
		/* background-color:blue; */
	}


/* ----- Chat Start w/ Temporary Banner ----- */
	/* Announcement Banner | "Thanks for chatting with us!" */
	.embeddedServiceSidebar .headerAnnouncement .text.announcement {
		padding:		10px 10px 10px 10px;
		font-family:	var(--nf-mainFontFamily);
		font-size:		12px;
	}

	/* Message Background */
	/* .embeddedServiceSidebar .dockableContainer embeddedservice-chat-header {
		background-color: var(--nf-mainBackground, #4b70c4);
	} */

	/* Chat Started Stamp */
	.embeddedServiceSidebar .messageArea>.chatSessionStartTime {
		/* margin-left centers the message to the center of the agent message bubble */
		margin-left:	40px;
		max-width:		var(--nf-chatMessage-maxWidth, 222px);
		padding-left:	var(--nf-chatMessageLineItem-paddingLeft, 18px);
		font-family:	var(--nf-mainFontFamily);
		font-size:		12px;
		line-height:	normal;
		margin-bottom:	12px;
		color:			var(--nf-mainFontColor, #000);
	}


/* ----- Menu Base State ----- */
	/* Menu */
	.embeddedServiceLiveAgentStateChatMenuMessage>.chatContent>.rich-menu {
		width:			222px;
		margin-left:	40px;
		border-radius:	var(--nf-borderRadius, 8px);
	}

	/* Menu Items */
	.embeddedServiceLiveAgentStateChatMenuMessage>.chatContent>.rich-menu>.rich-menu-items>li {
		box-sizing:			border-box;
		background-color:	#fff;
		border:				solid var(--nf-menuItemBorder-borderWidth, 1px) var(--nf-mainColor);
		margin-top:			var(--nf-menuItemBorder-borderWidth-negative, -1px);
		width: 				222px !important;
	}
	.embeddedServiceLiveAgentStateChatMenuMessage>.chatContent>.rich-menu>.rich-menu-items>li:first-of-type {
		margin-top:			0px;
		border:				var(--nf-menuItemBorder-borderWidth, 1px) solid var(--nf-mainColor);
		border-radius:		var(--nf-borderRadius, 8px)  var(--nf-borderRadius, 8px)  0px  0px;
	}
	.embeddedServiceLiveAgentStateChatMenuMessage>.chatContent>.rich-menu>.rich-menu-items>li:last-of-type {
		border-radius:		0px  0px  var(--nf-borderRadius, 8px)  var(--nf-borderRadius, 8px);
	}

	/* Menu Item Button */
	.embeddedServiceSidebar .chatMessage .rich-menu-items>li>.embeddedServiceLiveAgentStateChatRichItem {
		font-family:	var(--nf-mainFontFamily);
		font-size:		14px !important;
		color:			var(--nf-mainFontColor, #000);

		margin:			var(--nf-menuItemBorder-borderWidth-negative, -1px);
		width:			calc(100% + var(--nf-menuItemBorder-borderWidth, 1px) + var(--nf-menuItemBorder-borderWidth, 1px)) !important;
	}

	/* Menu Item Button | :hover, :focus, :active:focus */
	.embeddedServiceSidebar .chatMessage .rich-menu-items>li>.rich-menu-item:hover,
	.embeddedServiceSidebar .chatMessage .rich-menu-items>li>.rich-menu-item:focus,
	.embeddedServiceSidebar .chatMessage .rich-menu-items>li>.embeddedServiceLiveAgentStateChatRichItem:active:focus {
		background-color:	var(--nf-mainBackground);
		color:				#fff;
		opacity:			1;
		text-decoration: none !important;
	}

	/* Menu Item Button | :disabled */
	.embeddedServiceSidebar .chatMessage .rich-menu-items>li>.embeddedServiceLiveAgentStateChatRichItem[disabled] {
		border:				var(--nf-menuItemBorder-borderWidth, 1px) solid #d9d9d9;
		color:				#d9d9d9;
	}

	.embeddedServiceLiveAgentStateChatMenuMessage .rich-menu-item, .embeddedServiceLiveAgentStateChatMenuMessage .rich-menu-itemOptionIsClicked{
		padding: 10px 5px !important;
		width: 222px !important;
	}

/*Avatar*/
.embeddedServiceLiveAgentStateChatAvatar.isCommunitiesContext {
    color: var(--lwc-colorTextInverse,#FFFFFF);
    box-sizing: border-box;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-size: 100%;
    background-color: transparent !important;
    bottom: 10px;
}

/* ----- Save Transcript (Hamburger Menu Selected) ----- */
	/* Menu Container */
	.embeddedServiceSidebar .footer-menu>.slds-dropdown-trigger>.slds-dropdown {
		margin-bottom: 2px;
	}

	/* Menu */
	.embeddedServiceSidebar .footer-menu .slds-dropdown .slds-dropdown__list .footer-menu-items {
		border: none;
	}

	/* Menu Item */
	.embeddedServiceSidebar .footer-menu .slds-dropdown .slds-dropdown__list .footer-menu-items>.slds-dropdown__item {
		border: 1px solid var(--nf-mainColor);
		border-bottom: none;
	}

	/* Menu Item Link */
	.embeddedServiceSidebar .embeddedServiceLiveAgentStateChatInputFooter .footer-menu .footer-menu-items>.slds-dropdown__item>a {
		background:		#fff;
		font-size:		14px;
		color:			 var(--nf-hamburger-menu-color);
		border:			none;
		font-family:	var(--nf-mainFontFamily);
		padding-left:	35.5px;
	}

	/* Menu Item Link | :focus */
	.embeddedServiceSidebar .embeddedServiceLiveAgentStateChatInputFooter .footer-menu .footer-menu-items>.slds-dropdown__item>a:focus {
		/* border:				none; */
		text-decoration:	none !important;
		box-shadow:			none !important;
	}

	/* Menu Item Link | :hover */
	.embeddedServiceSidebar .embeddedServiceLiveAgentStateChatInputFooter .footer-menu .footer-menu-items>.slds-dropdown__item>a:hover {
		/* border:				none; */
		text-decoration:	none;
		box-shadow:			none;
	}


/* ----- Quick Reply Button Base State ----- */
	.embeddedServiceSidebar .embeddedServiceSidebarState .messageArea .messageWrapper .chatMessage>.chatContent {
		/* Eleminate the 40px margin on the right */
		margin-inline:	auto;
	}

	.embeddedServiceLiveAgentStateChatButtonMessage.agent .chatContent {
		background: none;
		float: none;
		margin: 0;
		max-width: calc(100% - 40px);
		width: 100%;
		padding: 0;
		margin-left: 40px;
		padding-left: 32px;
	}

	.embeddedServiceSidebar .chatMessage>.chatContent .rich-button-item.uiButton {
		padding-top:	4px;
		padding-bottom:	4px;
		padding-left:	4px;
		padding-right:	4px;
		border:			1px solid var(--nf-mainColor);
		background:		#fff;
		min-width:		64px;
		box-sizing:		content-box;
		border-radius:	20px !important;
		margin-inline:	5px;
		margin-top:		3px;
		box-shadow:		var(--nf-boxShadowLight, 0 0 8px 0 rgba(0, 0, 0, 0.08));
		color:			var(--nf-mainColor);
		float: none !important;
	}

	.embeddedServiceSidebar .chatContent>.rich-button-item.uiButton>.label.bBody {
		font-family:	var(--nf-mainFontFamily, Helvetica, sans-serif);
		font-size:		14px;
		font-weight:	var(--nf-fontWeight2, bold);
		color:			inherit;
		padding:		0 15px;
	}

	.embeddedServiceSidebar .chatMessage>.chatContent .rich-button-item.uiButton:hover:not([disabled]) {
		background:		var(--nf-mainBackground);
		color:			#fff;
		opacity:		1;
		text-decoration:  none !important;
	}

	.embeddedServiceSidebar .chatMessage>.chatContent .rich-button-item.uiButton:hover{
		opacity: 1;
	}


/* ----- Transfer Queue ----- */
	/* Transfer Queue Heading Text | You're up next! */
	.embeddedServiceSidebar .embeddedServiceLiveAgentQueuePosition.queuePositionTransferring .youAreNextMessage.queuePositionCounter {
		margin-top: 6px !important;
		margin-bottom: 16px !important;
	}

	/* Three Dots */
	.embeddedServiceSidebar .queuePositionTransferring .loadingBallContainer>.loadingBall {
		margin: 3px 2.5px;
		background: #000;
	}

	/* Transfer Status | Transferring... */
	.embeddedServiceSidebar .embeddedServiceSidebarState .queuePositionContainer .queuePositionMessage p {
		margin-top: 21px;
		margin-bottom: 15px;
		font-family: var(--nf-mainFontFamily);
		font-size: 18px;
	}


/* ----- Agent Transfer ----- */
	/* Agent Avatar */
		/* See "Bot Avatar (Agent Avatar)" */

	/* Chat Transfer Marker | Chat started with Codey B */
	.embeddedServiceSidebar .chatMessage .eventMessage {
		margin-top: 2px;
		font-size: 14px;
		color: var(--nf-mainFontColor, #000);
	}

	/* Chat Interaction Footer */
		/* Not possible to style the footer differently when transfered */


/* ----- After Chat Options Base State ----- */
	/* After End Chat Background */
	.embeddedServiceSidebar .embeddedServiceLiveAgentStateChat .endChatContainer {
		padding-bottom: 20px;
		/* background-color: transparent !important; */
	}

	.embeddedServiceLiveAgentStateChat .endChatContainer:before{
		/* Hide the gradient on top of the message area above the End Chat button group*/
		display: none;
	}

	/* Close Chat Button Group Buttons*/
	.embeddedServiceSidebar .endChatContainer>.uiButton.embeddedServiceSidebarButton {
		margin-bottom:		4px;
		text-decoration: none !important;
		font-family:		var(--nf-mainFontFamily);
		font-size:			16px;
		font-weight:		var(--nf-fontWeight2, bold);
		font-stretch:		normal;
		font-style:			normal;
		line-height:		normal;
		letter-spacing:		normal;
		text-align:			center;
	}
	.embeddedServiceSidebar .endChatContainer>.uiButton.embeddedServiceSidebarButton.uiButton--default {
		background-color:	var(--nf-primaryBackground, #000000) !important;
		color:				#fff;
		text-decoration: none !important;
	}
	.embeddedServiceSidebar .endChatContainer>.uiButton.embeddedServiceSidebarButton.uiButton--default:hover{
		background-color: var(--nf-common-hoverColor) !important;
		text-decoration: none !important;
	}

	.embeddedServiceSidebar .endChatContainer>.uiButton.embeddedServiceSidebarButton.uiButton--default:focus {
		background-color: var(--nf-mainColor) !important;
		text-decoration: none !important;
	}

	.embeddedServiceSidebar .endChatContainer>.uiButton.embeddedServiceSidebarButton.uiButton--inverse {
		/* background-color:	var(--nf-mainColor) !important; */
		color:				var(--nf-mainFontColor) !important;
		text-decoration: none !important;
		font-weight: bold !important;
	}

	.endChatButton .saveTranscriptButton {
		/* background-color:	var(--nf-mainColor) !important; */
		color:				var(--nf-mainFontColor);
		text-decoration: none !important;
	}

	.embeddedServiceSidebar .endChatContainer>.uiButton.embeddedServiceSidebarButton>.label.bBody {
		color:				inherit;
		font-family:		inherit;
		font-size:			inherit;
		font-weight:		inherit;
		font-stretch:		inherit;
		font-style:			inherit;
		line-height:		inherit;
		letter-spacing:		inherit;
		text-align:			inherit;
	}

	/* chat ended by bot message */


/* ----- End of Chat Confirmation ----- */
	/* End Chat Background */
	.embeddedServiceSidebar .sidebarBody .activeFeature>.featureBody:not(.embeddedServiceLiveAgentSidebarFeature)>.stateBody>.dialogState {
		background-color: var(--nf-loadingScreen-backgroundColor) !important;
	}

	button.slds-button.slds-button--neutral.endChatButton.closeChatButton.uiButton--default.uiButton.embeddedServiceSidebarButton {
		background-color: var(--nf-mainBackground) !important;
	}

	button.slds-button.slds-button--neutral.dialogButton.dialog-button-0.uiButton.embeddedServiceSidebarButton {
		background-color: var(--nf-mainBackground) !important;
	}

	button.slds-button.slds-button--neutral.dialogButton.dialog-button-1.uiButton--inverse.uiButton.embeddedServiceSidebarButton{
		text-decoration: none !important;
		background-color: none !important;
		margin-left: 0rem !important;
	}

	button.slds-button.slds-button--neutral.waitingCancelChat.uiButton--inverse.uiButton.embeddedServiceSidebarButton {
		background-color: none !important;
		color: #000000 !important;
	}

	button.slds-button.slds-button--neutral.dialogButton.dialog-button-1.uiButton--inverse.uiButton.embeddedServiceSidebarButton{
		background-color: none !important;
		color: #000000 !important;
	}

	button.slds-button.slds-button--neutral.waitingCancelChat.uiButton--inverse .label{
		color: #000000 !important;
	}

	.embeddedServiceSidebarButton.uiButton--inverse .label:hover {
		text-decoration: none !important;
	}

	.embeddedServiceSidebarButton.uiButton--inverse .label {
		color: black !important;
	}

	/* End Chat Prompt */
	.embeddedServiceSidebar .dialogState>.dialogTextContainer {
		font-family:	var(--nf-mainFontFamily);
		font-weight:	var(--nf-fontWeight, normal);
		font-stretch:	normal;
		font-style:		normal;
		letter-spacing:	normal;
		text-align:		center;
		color:			#000;
	}

	.embeddedServiceSidebar #dialogTextTitle{
		font-family:	inherit;
		font-size:		18px;
		font-weight:	var(--nf-fontWeight2, bold);
		font-stretch:	inherit;
		font-style:		inherit;
		line-height:	1.01;
		letter-spacing:	inherit;
		text-align:		inherit;
		color:			inherit;
	}

	.embeddedServiceSidebar #dialogTextBody{
		font-family:	inherit;
		font-size:		14px;
		font-weight:	inherit;
		font-stretch:	inherit;
		font-style:		inherit;
		line-height:	1.27;
		letter-spacing:	inherit;
		text-align:		inherit;
		color:			inherit;
	}

	/* bot dialog css */
	.embeddedServiceLiveAgentStateChatMessage .uiOutputRichText {
		text-align: left;
		font-family: var(--nf-OpenSans-Regular) !important;
	}

	/* bot link css */
	.embeddedServiceLiveAgentStateChatPlaintextMessageDefaultUI.agent.plaintextContent a:link {
		color: var(--nf-linkColor) !important;
	}

	/* bot link css */
	.embeddedServiceLiveAgentStateChatPlaintextMessageDefaultUI.agent.plaintextContent a:visited {
		color: var(--nf-linkvisited) !important;
	}

	.embeddedServiceLiveAgentStateChatPlaintextMessageDefaultUI.plaintextContent a:link {
		text-decoration: underline;
		color: var(--nf-linkColor) !important;
	}

	.embeddedServiceLiveAgentStateChatPlaintextMessageDefaultUI.plaintextContent a:visited {
		text-decoration: underline;
		color: var(--nf-linkvisited) !important;
	}

	.embeddedServiceLiveAgentStateChat .messageWrapper, .embeddedServiceLiveAgentStateChat .typingIndicatorContainer, .embeddedServiceLiveAgentStateChat .queuePositionContainer {
		background-color: var(--nf-loadingScreen-backgroundColor,#f4f4f4) !important;
	}

	.embeddedServiceLiveAgentStateChat .messageArea.smoothScroll{
		background-color: var(--nf-loadingScreen-backgroundColor,#f4f4f4) !important;
	}

	.dialogButton .dialog-button-0 .uiButton .embeddedServiceSidebarButton:focus{
		text-decoration: none !important;
	}

	/* Confirm end chat button */
	.embeddedServiceSidebarDialogState .dialogButton:focus{
		text-decoration: none !important;
	}

	/* Confirm End Chat Button */
.embeddedServiceSidebar .dialogButton.uiButton.embeddedServiceSidebarButton:not(.uiButton--inverse):hover {
    background-color:	        var(--nf-actionHoverBackgroundColor) !important;
}

	/* Chat body height from bottom  */
	.embeddedServiceSidebar.layout-docked .dockableContainer, .embeddedServiceSidebar.layout-float .dockableContainer{
		bottom: 0px !important;
    	right: 35px !important;
		border-radius: 12px 12px 0px 12px !important;
	}

	.embeddedServiceLiveAgentStateChatInputFooter .chasitorText{
		font-family: var(--nf-OpenSans-Regular) !important;
	}

	/* MOBILE */
	@media only screen and (max-width: 767px) {

		button.uiButton.helpButtonEnabled,
		button.sidebarHeader.minimizedContainer.embeddedServiceSidebarMinimizedDefaultUI {
			width: 35px !important;
			min-width: 35px !important;
			height: 35px !important;
			border-radius: 17.5px !important;
			background-color: var(--nf-cta-backgroundColor) !important;
			border: 1px;
			bottom: 35px;
			right: 35px;
			box-shadow: 0 0 12px 0 rgb(0 0 0 / 25%) !important;
			font-size: 14px !important;
			padding: 0px 0px !important;
		}

		.embeddedServiceHelpButton .helpButton .helpButtonDisabled .embeddedServiceIcon:before,
		.embeddedServiceHelpButton .helpButton .helpButtonEnabled .embeddedServiceIcon:before,
		.messageContent > span.help > svg.icon {
			display: inline-block !important;
			content: "";
			background-image: var(--mobileCTA-imgUrl) !important;
			background-image: none !important;
			background-position: center;
			background-repeat: no-repeat;
			background-size: cover;
			vertical-align: middle;
			/* margin-left: auto !important; */

			width: 35px !important;
			height: 35px !important;
			margin: 0 0px 0px 0 !important ;
			padding: 6.3px 5.7px 4.9px 5.7px !important;
		}

		.embeddedServiceSidebarMinimizedDefaultUI .content {
			width: 35px !important;
			height: 35px !important;
			margin: 0px 0 0 0px !important;
			font-family: var(--nf-OpenSans-Regular);
			font-size: 14px !important;
			font-weight: 600 !important;
			font-stretch: normal !important;
			font-style: normal;
			line-height: normal;
			letter-spacing: normal;
			text-align: center !important;
			color: var(--white);
			/* padding: 0 0px !important; */
		}

		.embeddedServiceHelpButton .helpButton {
			right: 0;
			bottom: 35px;
			height: 0px;
			width: unset !important;

		}

		.embeddedServiceHelpButton .uiButton .embeddedServiceIcon{
			display: none !important;
		}

		.embeddedServiceHelpButton .uiButton .helpButtonLabel {
			background-image: var(--mobileCTA-imgUrl) !important;
			background-size: cover;
			background-repeat: no-repeat;
		}

		.embeddedServiceHelpButton .uiButton .helpButtonLabel:hover {
			background-image: var(--mobileCTAHover-imgUrl) !important;
			background-size: cover;
			background-repeat: no-repeat;
		}

		.embeddedServiceHelpButton .uiButton .helpButtonLabel .message{
			display: none !important;
		}

		.embeddedServiceSidebarMinimizedDefaultUI.sidebarHeader {
			right: -87px;
			bottom: 132px;
			height: auto;
			padding: 5px 10px;
			border-radius: 10px 10px 0 0;
		}


		/*. embeddedServiceHelpButton .helpButton .uiButton {
			border-radius: 10px 10px 0 0;
		} */
		.embeddedServiceHelpButton .helpButton .uiButton {
			margin: 0;
			padding: 0 0px !important;
			height: 46px;
			box-shadow: 0 0 12px 0 rgb(0 0 0 / 30%);
			border-radius: 23px;
			line-height: 1;
			width: unset;
			min-width: unset;
			right: 35px !important;
			padding: 0;
			aspect-ratio: 1;
			bottom: 35px !important;
		}

		.embeddedServiceHelpButton .embeddedServiceIcon {
			margin-inline: auto;
		}

		.embeddedServiceSidebar .minimizedContainer.sidebarHeader.embeddedServiceSidebarMinimizedDefaultUI {
			width: unset;
			aspect-ratio: 1;
			padding: 0;
			right: 35px;
			bottom: 35px;
			overflow: visible;
		}

		.embeddedServiceSidebar .minimizedContainer.sidebarHeader.embeddedServiceSidebarMinimizedDefaultUI .content {
			padding: 0;
		}

		.embeddedServiceSidebar .minimizedContainer .minimizedText>.message{
			font-size: 0;
		}

		.embeddedServiceSidebar .minimizedContainer.newMessage .minimizedText>.message:first-letter {
			font-size: 14px;
		}

		.embeddedServiceSidebar .minimizedContainer .content {
			background-image: var(--mobileCTA-imgUrl) !important;
			background-size: cover;
			background-repeat: no-repeat;
		}

		.embeddedServiceSidebar .minimizedContainer .content:hover {
			background-image: var(--mobileCTAHover-imgUrl) !important;
			background-size: cover;
			background-repeat: no-repeat;
		}

		.embeddedServiceSidebar .minimizedContainer.newMessage .messageContent {
			height: 100%;
			margin: 0;
			visibility: visible;
		}

		.embeddedServiceSidebar .minimizedContainer.newMessage .messageContent .minimizedText {
			height: 100%;
			background:var(--nf-cta-backgroundColor)!important;
			border-radius:100%;
			width: -webkit-fill-available;
		}

		.embeddedServiceSidebar .minimizedContainer.newMessage .messageContent .minimizedText:hover {
			background:var(--nf-cta-hoverBackgroundColor)!important;
		}

		.embeddedServiceSidebar .minimizedContainer .content .loadingBallContainer.embeddedServiceLoadingBalls {
			min-width: unset;
			width: 100%;
			height: 100%;
			min-height: 100%;
			margin-block: auto;
			background: var(--nf-cta-backgroundColor) !important;
			border-radius: 50% !important;
			align-items: center;
			justify-content: center;
			display: flex;
			margin-bottom: 10px;
			/* margin-right: 22px !important; */
		}

		.embeddedServiceSidebar > .dockableContainer.showDockableContainer{
			bottom: 0;
		}

		/* Mobile make text input 16px so IOS doenst zoom */
		.embeddedServiceLiveAgentStateChatInputFooter .chasitorControls .uiInput {
			font-size: 16px;
			padding-block: 14px;
		}

		.embeddedServiceSidebarMinimizedDefaultUI .minimizedText>.message {
			font-family: var(--nf-OpenSans-Regular) !important;
			font-size: 0px !important;
			margin: 6px !important;
		}

		.embeddedServiceLiveAgentStateChatPlaintextMessageDefaultUI.agent.plaintextContent{
			color: var(--lwc-colorTextDefault,#333333) !important;
			background-color: #fff !important;
			box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08) !important;
			/* max-width: var(--nf-chatMessage-maxWidth, 222px) !important; */
		}

	}
 /*FL*/


/* ----- Chat Start w/ Temporary Banner ----- */
/* Announcement Banner | "Thanks for chatting with us!" */
.embeddedServiceSidebar .headerAnnouncement .text.announcement {
    padding:		10px 10px 10px 10px !important;
    font-family:	var(--nf-mainFontFamily, Helvetica, sans-serif) !important;
    font-size:		12px !important;
}

/* Chat Started Stamp */
.embeddedServiceSidebar .messageArea>.chatSessionStartTime {
    /* margin-left centers the message to the center of the agent message bubble */
    margin-left:	40px !important;
    max-width:		var(--nf-chatMessage-maxWidth) !important;
    padding-left:	var(--nf-chatMessageLineItem-paddingLeft, 18px) !important;
    font-family:	var(--nf-mainFontFamily, Helvetica, sans-serif) !important;
    font-size:		12px !important;
    line-height:	normal !important;
    margin-bottom:	12px !important;
    color:			var(--nf-mainFontColor, #000) !important;
}

/* ----- Transfer Queue ----- */
/* Transfer Queue Heading Text | You're up next! */
.embeddedServiceSidebar .embeddedServiceLiveAgentQueuePosition.queuePositionTransferring .youAreNextMessage.queuePositionCounter {
    margin-top: -9px !important;
    margin-bottom: 16px !important;
}

/* Three Dots */
.embeddedServiceSidebar .queuePositionTransferring .loadingBallContainer>.loadingBall {
    margin: 3px 2.5px !important;

    /* background: #000 !important; */
}

/* Transfer Status | Transferring... */
.embeddedServiceSidebar .embeddedServiceSidebarState .queuePositionContainer .queuePositionMessage p {
    margin-top: 21px !important;
    margin-bottom: 15px !important;
    font-family: var(--nf-mainFontFamily, Helvetica, sans-serif) !important;
    font-size: 18px !important;
}


/* Chat Transfer Marker | Chat started with Codey B */
.embeddedServiceSidebar .chatMessage .eventMessage {
    margin-top: 2px !important;
    font-size: 14px !important;
    color: var(--nf-mainFontColor, #000) !important;
}


/* ----- After Chat Options Base State ----- */
/* After End Chat Background */
.embeddedServiceSidebar .embeddedServiceLiveAgentStateChat .endChatContainer {
    padding-bottom:         20px !important;
    background-color:       var(--nf-loadingScreen-backgroundColor) !important;
}

.embeddedServiceLiveAgentStateChat .endChatContainer:before{
    /* Hide the gradient on top of the message area above the End Chat button group*/
    display: none !important;
}

.embeddedServiceSidebar .endChatContainer>.uiButton.embeddedServiceSidebarButton.uiButton--default:hover {
    background-color:	        var(--nf) !important;
}

/* Confirm End Chat Button */
.embeddedServiceSidebar .dialogButton.uiButton.embeddedServiceSidebarButton:not(.uiButton--inverse):hover {
    background-color:	        var(--nf-actionHoverBackgroundColor) !important;
}

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

.embeddedServiceSidebarButton.uiButton--inverse:not(:disabled):focus,
.embeddedServiceSidebarButton.uiButton--inverse:not(:disabled):hover{
    background-color:           var(--nf-actionHoverColor) !important;
    box-shadow:                 none !important;
    text-decoration:            underline !important;
    color:                      var(--nf-actionHoverBackgroundColor) !important;
}


.embeddedServiceSidebar .dialogState>.dialogTextContainer {
    font-family:	var(--nf-mainFontFamily, Helvetica, sans-serif) !important;
    font-weight:	var(--nf-fontWeight, normal) !important;
    font-stretch:	normal !important;
    font-style:		normal !important;
    letter-spacing:	normal !important;
    text-align:		center !important;
    color:			#000 !important;
}

.embeddedServiceSidebar #dialogTextTitle{
    font-family:	inherit !important;
    font-size:		18px !important;
    font-weight:	var(--nf-fontWeight2, bold) !important;
    font-stretch:	inherit !important;
    font-style:		inherit !important;
    line-height:	1.01 !important;
    letter-spacing:	inherit !important;
    text-align:		inherit !important;
    color:			inherit !important;
}

.embeddedServiceSidebar #dialogTextBody{
    font-family:	inherit !important;
    font-size:		14px !important;
    font-weight:	inherit !important;
    font-stretch:	inherit !important;
    font-style:		inherit !important;
    line-height:	1.27 !important;
    letter-spacing:	inherit !important;
    text-align:		inherit !important;
    color:			inherit !important;
}

/* Minicard */

.embeddedServiceSidebar .embeddedServiceSidebarState .minicard-title-text{
    text-align: center !important;
}

.embeddedServiceSidebar .embeddedServiceSidebarState div[ebcm-einsteinbotminicardcontainer_einsteinbotminicardcontainer].containerDiv{
    border: none !important;
    box-shadow: none !important;
    background-color:	var(--nf-chat-message-background-agent) !important;
    border-radius: 5px 5px 5px 0px !important;
}

/* .minicard-header[ebcm-einsteinBotMiniCard_einsteinBotMiniCard] .minicard-icon[ebcm-einsteinBotMiniCard_einsteinBotMiniCard] .titleIcon[ebcm-einsteinBotMiniCard_einsteinBotMiniCard]{
	background-image:           url(../images/miniCardIcon.svg) !important;
    background-repeat:          no-repeat !important;
} */


.ebcm_content .slds-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: start;
    align-items: center !important;
    width: 222px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 12px;
    padding: 0px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08);
    background-color: var(--white);
}

.embeddedServiceSidebar .embeddedServiceSidebarState .minicard-link,
.embeddedServiceSidebar .embeddedServiceSidebarState .minicard-link:is(:visited, :active, :focus){
    display:                block !important;
    border-radius:          21px !important;
    text-align:             center !important;
    background-color:       var(--nf-mainColor) !important;
    color:                  var(--nf-actionHoverColor) !important;
    padding:                4px 6px !important;
    margin:                 10px 4px 4px 4px !important;
	border:                 1px solid var(--nf-mainColor) !important;
    box-shadow:             var(--nf-boxShadowLight) !important;
}

a.minicard-link:hover{
    color:                  var(--nf-action-color) !important;
    background-color:       var(--nf-actionHoverBackgroundColor) !important;
    text-decoration:        none !important;

}

.embeddedServiceSidebar .chatContent .mini-card{
    margin-left:            40px !important;
    max-width:              var(--nf-chatMessage-maxWidth) !important;
}

.embeddedServiceSidebar .chatContent .mini-card .minicard-header .minicard-action .expandIcon>.expandIconImg {
    filter:                 invert(13%) sepia(65%) saturate(6742%) hue-rotate(293deg) brightness(70%) contrast(107%) !important;
}

.minicard-header .minicard-icon .titleIcon{
    height:                 24px !important;
    width:                  24px !important;
}

.minicard-header .minicard-title{
    font-size:              14px !important;
}

.minicard-icon{
    padding-left:           5px !important;
}

.embeddedServiceLiveAgentStateChat .minicard-description .detailDiv.description {
    font-size:          14px !important;
    color:              #5E5E62 !important;
    font-family:        var(--nf-mainFontFamily) !important;
    letter-spacing:     0px !important;
}

.embeddedServiceLiveAgentStateChat .messageArea:focus{
    border:             none !important;
}
/* Historical Data Minicard */
:is(.minicards_digitalDownload, .minicards_dvd) .minicard-icon .titleIcon {
    display:            none !important;
}

:is(.minicards_digitalDownload, .minicards_dvd) .minicard-icon {
    margin-right:       0px !important;
    padding-left:       8px !important;
}
/* Minicard End */


/* FORM CARD */
.ebcm_content.ebcm_form {
    justify-content:        left !important;
}
    .form-card[ebcm-einsteinBotChatMessage_einsteinBotChatMessage]{
    max-width:              var(--nf-chatMessage-maxWidth) !important;
    margin-left:            40px !important;
}

.ebcm_content .slds-icon {
    width: 32px !important;
    height: 32px !important;
    fill: var(--nf-form-icon-color) !important;
    background: var(--white) !important;
    padding-top: 5px !important;
}

.formcard-container[ebcm-einsteinBotFormCard_einsteinBotFormCard]{
    background-color:       var(--nf-input-body-background) !important;
    border:                 1px solid var(--nf-bot-elements-border) !important;
    border-radius:          8px !important;
    box-shadow:             0px 7px 12px rgba(0, 0, 0, 0.08) !important;
    padding:                5px 15px 5px 15px !important;
}

/* Form card Header */
.formcard-container[ebcm-einsteinBotFormCard_einsteinBotFormCard] h1 {
    /* font-weight:            500 !important; */
    font-size:              16px !important;
}

.ebcm_content .slds-input,
.ebcm_content .slds-input:is(:focus, :active),
.ebcm_content .slds-input:required:focus,
.ebcm_content .slds-textarea:is(:active, :focus){
    border:                 0.7px solid #CBCCD0 !important;
    box-shadow:             none !important;
}

/* Form card picklist */
.formcard-container[ebcm-einsteinBotFormCard_einsteinBotFormCard] select.slds-input.pselect {
    appearance:                 none !important;
    background-image:           url(../images/downarrow.svg) !important;
    background-repeat:          no-repeat !important;
    background-position-x:      96% !important;
    background-position-y:      11px !important;
    padding-right:              1.75rem !important;
    display: inline-block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}


/* Form card Action Button */
.form-action-container[ebcm-einsteinBotAction_einsteinBotAction] .action.action-button[ebcm-einsteinBotAction_einsteinBotAction]{
    background-color:       var(--nf-mainColor) !important;
    color:                  var(--nf-action-color) !important;
    box-shadow:             var(--nf-boxShadowLight) !important;
    border-radius:          23.5px !important;
    width:                  100% !important;
    border:                 1px solid var(--nf-mainColor) !important;
}

.form-action-container[ebcm-einsteinBotAction_einsteinBotAction] .action.action-button[ebcm-einsteinBotAction_einsteinBotAction]:is(:hover, :focus){
    background-color:       var(--nf-actionHoverBackgroundColor) !important;
    border:                 1px solid var(--nf-actionHoverBackgroundColor) !important;
}

.form-action-container[ebcm-einsteinBotAction_einsteinBotAction] {
    margin-top:             0px !important;
}

.form-action-container[ebcm-einsteinBotAction_einsteinBotAction] .action.action-button.action-disabled[ebcm-einsteinBotAction_einsteinBotAction] {
    background-color: rgb(196, 193, 193) !important;
    border: 1px solid rgb(196, 193, 193) !important;
    color: grey !important;
}

/* Action Link */
.form-action-container[ebcm-einsteinBotAction_einsteinBotAction] .action.action-link[ebcm-einsteinBotAction_einsteinBotAction],
.form-action-container[ebcm-einsteinBotAction_einsteinBotAction] .action.action-link:not(.action-disabled)[ebcm-einsteinBotAction_einsteinBotAction]:is(:hover, :focus, :active) {
    color:                  var(--nf-linkColor) !important;
    text-decoration:        underline !important;
}

.form-action-container[ebcm-einsteinBotAction_einsteinBotAction] .action.action-link.action-disabled[ebcm-einsteinBotAction_einsteinBotAction]:is(:hover, :focus, :active) {
    text-decoration:        underline !important;
}

/* Input Error Message */
.embeddedServiceSidebar .forminput-container .slds-input.form-picklist-error,
.ebcm_content.ebcm_form .slds-form-element.slds-has-error .slds-form-element__control :is(.slds-input, .slds-textarea) {
    border:                 0.7px solid var(--nf-error-border-color) !important;
}
.embeddedServiceSidebar .forminput-container .picklist-error,
.ebcm_content .slds-form-element__help, .ebcm_content .slds-form-element__helper {
    color:                  var(--nf-error-color) !important;
    font-weight:            400 !important;
    margin-top:             5px !important;
    font-size:              11px !important;
}
.embeddedServiceSidebar .forminput-container .picklist-error:before,
.ebcm_content .slds-form-element__help:before,
.ebcm_content .slds-form-element__helper:before {
    display:                inline-block !important;
    content:                "" !important;
    background:             url(../images/Subtract.svg) left no-repeat !important;
    padding:                5px 10px 5px 5px !important;
    vertical-align:         middle !important;
}

/* Inputbox  */
.embeddedServiceSidebar .forminput-container .forminput-field-container .plabel,
.embeddedServiceSidebar .forminput-container .forminput-field-container .required-symbol{
    padding-bottom:         0px !important;
}

/* Loading spinner color change */
.embeddedServiceSidebar .spinner{
    color:                  var(--nf-mainColor) !important;
}

.embeddedServiceSidebar .formcard-container .slds-form-element {
    padding:                5px 0px !important;
}

.embeddedServiceSidebar .slds-form-element__label .slds-required{
    color:                  var(--nf-error-color) !important;
}

.ebcm_content.ebcm_form .form-input.slds-form-element .slds-form-element__label {
    max-width:              100% !important;
    font-size:              13px !important;
}
.formcard-container .slds-media p {
    font-size:              10px !important;
}

.ebcm-output.form-input {
    text-align:             center !important;
    cursor:                 pointer !important;
    color:                  var(--nf-mainColor) !important;
}

.ebcm-modal-container {
    padding:                0px !important;
}
.ebcm-modal-container .ebcm_modal-body {
    font-size:              12px !important;
    padding:                0px 14px 10px 14px !important;
    text-align:             left !important;
}

.ebcm-modal-container .ebcm_modal-footer {
    display:                flex !important;
    width:                  100% !important;
    align-items:            center !important;
    justify-content:        center !important;
    text-align:             center !important;
    padding:                5px 0px 15px 0px !important;
    border:                 none !important;
    background:             var(--nf-input-body-background) !important;
}

c-einstein-bot-action{
    width:                  45% !important;
}

.ebcm_modal.formcard__modal_container .ebcm_modal-content{
    padding-left:           40px !important;
}

.ebcm-modal-container .ebcm_modal-footer .form-action-container {
    padding-right:          5px !important;
    padding-left:           5px !important;
}
.ebcm-modal-container .ebcm_modal-footer .form-action-container .action-button {
    font-size:              10px !important;
    padding:                5px !important;
}

.ebcm-modal-container .ebcm_modal-footer .form-action-container .action-button.formcard__modal_close {
    background-color:       var(--nf-error-color) !important;
    border:                 1px solid var(--nf-error-color) !important;
}
.ebcm-modal-container .ebcm_modal-footer .form-action-container .action-button.formcard__modal_close:is(:hover, :focus) {
    background-color:       var(--nf-error-color-hover) !important;
    border:                 1px solid var(--nf-error-color-hover) !important;
}

.ebcm_modal.formcard__modal_container .ebcm_modal-backdrop{
    margin-left:            52px !important;
    padding-bottom:         22px !important;
    width:                  237px !important;
    height:                 92.5% !important;
    border-radius:          8px !important;
}
.ebcm_modal-header {
    border:                 none !important;
}
.ebcm_modal-header .slds-modal__close {
    top:                    0px !important;
    right:                  0px !important;
}
.ebcm_modal-header .slds-modal__close .slds-button_icon,
.ebcm_modal-header .slds-modal__close .slds-button_icon:is(:hover,:focus,:active,:active:focus,:active:hover){
    border:                 none !important;
    color:                  #1B1B1E !important;
    background-color:       var(--nf-input-body-background) !important;
    box-shadow:             none !important;
}

@media (min-width: 48em) {
    .ebcm_content .ebcm-modal-container {
        margin:             -8px auto !important;
    }
}
/* FORM CARD end */

/*Header font family*/
.default-header[c-pSEdAssistChatHeader_pSEdAssistChatHeader] {
	font-family: var(--nf-mainFontFamily, OpenSans-Regular) !important;
}

/* Transfer Status | Transferring... */
.embeddedServiceSidebar .embeddedServiceSidebarState .queuePositionContainer .queuePositionMessage p {
    margin-top: 21px !important;
    margin-bottom: 15px !important;
    font-family: var(--nf-mainFontFamily, Helvetica, sans-serif) !important;
    font-size: 18px !important;
}


/* Chat Transfer Marker | Chat started with Codey B */
.embeddedServiceSidebar .chatMessage .eventMessage {
    margin-top: 2px !important;
    font-size: 14px !important;
    color: var(--nf-mainFontColor, #000) !important;
}


/* ----- After Chat Options Base State ----- */
/* After End Chat Background */
.embeddedServiceSidebar .embeddedServiceLiveAgentStateChat .endChatContainer {
    padding-bottom:         20px !important;
    background-color:       var(--nf-loadingScreen-backgroundColor) !important;
}

.embeddedServiceLiveAgentStateChat .endChatContainer:before{
    /* Hide the gradient on top of the message area above the End Chat button group*/
    display: none !important;
}

.embeddedServiceSidebar .endChatContainer>.uiButton.embeddedServiceSidebarButton.uiButton--default:hover {
    background-color:	        var(--nf-actionHoverBackgroundColor) !important;
}

/* Confirm End Chat Button */
.embeddedServiceSidebar .dialogButton.uiButton.embeddedServiceSidebarButton:not(.uiButton--inverse):hover {
    background-color:	        var(--nf-actionHoverBackgroundColor) !important;
}

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

.embeddedServiceSidebarButton.uiButton--inverse:not(:disabled):focus,
.embeddedServiceSidebarButton.uiButton--inverse:not(:disabled):hover{
    background-color:           var(--nf-actionHoverColor) !important;
    box-shadow:                 none !important;
    text-decoration:            underline !important;
    color:                      var(--nf-actionHoverBackgroundColor) !important;
}

/* ----- End of Chat Confirmation ----- */
/* End Chat Background */
/* .embeddedServiceSidebar .sidebarBody .activeFeature>.featureBody:not(.embeddedServiceLiveAgentSidebarFeature)>.stateBody>.dialogState {
    background-color:	var(--nf-primaryBackground) !important;
} */

/* End Chat Prompt */
.embeddedServiceSidebar .dialogState>.dialogTextContainer {
    font-family:	var(--nf-mainFontFamily, Helvetica, sans-serif) !important;
    font-weight:	var(--nf-fontWeight, normal) !important;
    font-stretch:	normal !important;
    font-style:		normal !important;
    letter-spacing:	normal !important;
    text-align:		center !important;
    color:			#000 !important;
}

.embeddedServiceSidebar #dialogTextTitle{
    font-family:	inherit !important;
    font-size:		18px !important;
    font-weight:	var(--nf-fontWeight2, bold) !important;
    font-stretch:	inherit !important;
    font-style:		inherit !important;
    line-height:	1.01 !important;
    letter-spacing:	inherit !important;
    text-align:		inherit !important;
    color:			inherit !important;
}

.embeddedServiceSidebar #dialogTextBody{
    font-family:	inherit !important;
    font-size:		14px !important;
    font-weight:	inherit !important;
    font-stretch:	inherit !important;
    font-style:		inherit !important;
    line-height:	1.27 !important;
    letter-spacing:	inherit !important;
    text-align:		inherit !important;
    color:			inherit !important;
}


/* Embedded Service CTA */
.forceCommunityEmbeddedServiceHelpButton .flatButton .helpButtonLabel{
    align-self: center !important;
    overflow-x: visible !important;
}

.embeddedServiceIcon.x-small svg{
    width: 35px !important;
    height: 32px !important;
    margin-right: -27px !important;
}

.forceCommunityEmbeddedServiceHelpButton .help svg {
    display: block !important;
    height: 32px !important;
    background: var(--cta-imgUrl);
}
.embeddedServiceIcon.x-small svg path{
    d: path('');
}

.embeddedServiceHelpButton .embeddedServiceIcon::before{
    background: var(--cta-imgUrl);
    color: transparent !important;
    background-size: 32px !important;
    margin-left: 0px !important;
    padding-top: 0px !important;
    padding-bottom: 6px !important;
    padding-left: 14px !important;
}

.embeddedServiceSidebarMinimizedDefaultUI.newMessage, .embeddedServiceSidebarMinimizedDefaultUI.idleTimeout{
    background-color: var(--nf-cta-hoverBackgroundColor) !important;
}

.avatar.iconAvatar.agentInitial.agentIconColor0 {
    display: block !important;
    background-color: white !important;
    color: transparent !important;
    background-image: url(--cta-imgUrl);
    margin: 4px 4px 4px 0px !important;
}
.avatar.iconAvatar.agentInitial.agentIconColor1 {
    display: block !important;
    background-color: white !important;
    color: transparent !important;
    background-image: url(--cta-imgUrl);
    margin: 2px 2px 3px -2px !important;
}

.embeddedServiceLiveAgentStateChatAvatar.isCommunitiesContext .agentIconColor0, .embeddedServiceLiveAgentStateChatAvatar.isCommunitiesContext .agentIconColor1, .embeddedServiceLiveAgentStateChatAvatar.isCommunitiesContext .agentIconColor2, .embeddedServiceLiveAgentStateChatAvatar.isCommunitiesContext .agentIconColor3, .embeddedServiceLiveAgentStateChatAvatar.isCommunitiesContext .agentIconColor4, .embeddedServiceLiveAgentStateChatAvatar.isCommunitiesContext .agentIconColor5, .embeddedServiceLiveAgentStateChatAvatar.isCommunitiesContext .agentIconColor6 {
	background-image: url(--cta-imgUrl) !important;
	color: transparent;
}

/* File Selector */

.embeddedServiceSidebar .slds-file-selector__body .slds-file-selector__button {
    padding-left:           5px !important;
    padding-right:          8px !important;
    color:                  var(--nf-mainColor) !important;
}

.embeddedServiceSidebar .slds-file-selector__body .slds-file-selector__text {
    margin-right:           8px !important;
}

.slds-file-selector__input[disabled]~.slds-file-selector__body>.slds-file-selector__button {
    color: var(--slds-g-color-neutral-base-30, var(--lwc-colorTextButtonBrandDisabled,rgb(255, 255, 255))) !important;
}
@media (max-width: 480px){
    .embeddedServiceSidebar .slds-file-selector,
    .embeddedServiceSidebar .slds-file-selector .slds-file-selector__dropzone,
    .embeddedServiceSidebar .slds-file-selector .slds-file-selector__dropzone slot,
    .embeddedServiceSidebar .slds-file-selector .slds-file-selector__dropzone slot .slds-file-selector__button{
        width:              100% !important;
    }

}

.embeddedServiceLiveAgentStateChatInputFooter .embeddedServiceLiveAgentStateChatAction.Upload svg, .embeddedServiceLiveAgentStateChatInputFooter .embeddedServiceLiveAgentStateChatAction.Remove svg{
	fill : var(--nf-form-icon-color) !important;
}

.embeddedServiceLiveAgentStateChatInputFooter .embeddedServiceLiveAgentStateChatAction.Upload svg, .embeddedServiceLiveAgentStateChatInputFooter .embeddedServiceLiveAgentStateChatAction.Remove svg:hover,
.embeddedServiceLiveAgentStateChatInputFooter .embeddedServiceLiveAgentStateChatAction.Upload svg, .embeddedServiceLiveAgentStateChatInputFooter .embeddedServiceLiveAgentStateChatAction.Remove svg:focus{
	fill : var(--nf-form-icon-color) !important;
}

.embeddedServiceLiveAgentStateChatBubble.chasitor .chatContent {
    background: var(--nf-primaryBackground) !important;
    color: var(--lwc-colorTextInverse,#FFFFFF);
    margin-left: auto;
}

/*Header timeout */
.timeout[c-pSEdAssistChatHeader_pSEdAssistChatHeader] {
    background-color: var(--nf-cta-hoverBackgroundColor) !important;
    border-top: solid var(--nf-cta-hoverBackgroundColor) 1px !important;
    padding-top: 3px;
	color: var(--white) !important;
}


[c-pSEdAssistChatHeader_pSEdAssistChatHeader-host] {
	width: 100%;
	max-width: 100%;
	background-color: var(--nf-cta-hoverBackgroundColor) !important;
	text-align: initial;
}

/*Mini card Bullets*/
.embeddedServiceSidebarFeature ul, .embeddedServiceSidebarFeature li{
    list-style: unset !important;
}

.miniCardBullets{
	list-style-type: disc !important;
	display: list-item !important;
}

.detailDiv[ebcm-einsteinBotMiniCard_einsteinBotMiniCard] .detail[ebcm-einsteinBotMiniCard_einsteinBotMiniCard]{
	padding-left: 30px !important;
}

/*Header Buttons*/
.headerButtons[c-pSEdAssistChatHeader_pSEdAssistChatHeader] {
    padding-top: 10px;
    fill: white !important;
}

.headerButtons{
    padding-top: 10px;
    fill: white !important;
}

/*Order Detail Carousel card*/
.slideshow-container[ebcm-einsteinBotComplexCarousel_einsteinBotComplexCarousel] {
    border: 1px solid black;
    border-radius: 3px;
    height: fit-content !important;
    min-height: 200px;
    max-height: fit-content !important;
    min-width: 200px;
    margin: 10px;
    padding: 5px;
    box-shadow: 0px 2px 15px 4px;
    font-size: 14px !important;
}

.slide-navigation[ebcm-einsteinBotComplexCarousel_einsteinBotComplexCarousel] {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: space-around;
    justify-content: center;
    align-items: center;
    max-width: 160px !important;
    margin: auto;
}