/*
 * Copyright 2020 salesforce.com, inc.
 * All Rights Reserved
 * Company Confidential
 */
:root {
	--eswIconFillColor: #FFF;
	--eswIconFontSize: 16px;
	--eswButtonBottom: 25px;
	--eswButtonRight: 30px
}

.embeddedMessagingFrame {
	height: 0;
	width: 0;
	position: fixed;
	background: transparent;
	border: none;
	outline: none;
	border-radius: 8px 8px 0 0;
	box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2)
}

.embedded-messaging-inline {
	height: 100%;
	width: 100%
}

.embeddedMessagingFrameInline {
	position: relative;
	height: 100%;
	width: 100%
}

.embedded-messaging>.embeddedMessagingFrame[class~="isMinimized"] {
	bottom: var(--eswButtonBottom, 25px);
	right: var(--eswButtonRight, 30px);
	margin: 0;
	height: 62px;
	width: 62px;
	box-shadow: none;
	display: inline-block;
	visibility: visible;
	border-radius: 50%
}

.embedded-messaging>.embeddedMessagingFrame[class~="isMinimized"][dir~="rtl"] {
	right: 0;
	left: var(--eswButtonRight, 30px)
}

.embedded-messaging>.embeddedMessagingFrame[class~="isMinimized"][dir~="rtl"][class~="eswExperienceSite"] {
	right: calc(100vw - 7em)
}

.embedded-service~.embedded-messaging>.embeddedMessagingFrame[class~="isMinimized"] {
	bottom: 22px;
	right: 27px
}

.embedded-messaging>.embeddedMessagingFrame[class~="hasMinimizedNotification"]:not(.isMaximized) {
	height: 215px;
	width: 206px;
	border-radius: 0
}

.embeddedMessagingFrame,
.embeddedMessagingConversationButtonWrapper {
	z-index: 999
}

.embeddedMessagingPreventScrolling {
	overflow: hidden;
	position: fixed;
	width: 100%;
	height: 100%
}

.embeddedMessagingConversationButtonWrapper {
	display: block;
	position: fixed;
	background: transparent;
	box-shadow: none;
	overflow: visible;
	font-family: sans-serif;
	top: 0;
	left: 0
}

.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton {
	position: fixed;
	bottom: var(--eswButtonBottom, 25px);
	right: var(--eswButtonRight, 30px);
	width: 56px;
	height: 56px;
	outline: 0;
	border: none;
	border-radius: 50%;
	box-shadow: none;
	text-align: center;
	overflow: hidden;
	pointer-events: all;
	cursor: pointer;
	display: block;
	line-height: normal;
	padding: 0;
	margin: 0;
	font-size: var(--eswIconFontSize, 16px);
	box-sizing: border-box
}

.embeddedMessagingGRecaptchaBanner .grecaptcha-badge {
	bottom: min(calc(var(--eswButtonBottom, 25px) + 75px), 100vh - 125px) !important
}

.embeddedMessagingGRecaptchaBanner .grecaptcha-badge[class~="isMaximized"] {
	bottom: min(calc(var(--eswHeight, 480px) + 25px), 100vh - 125px) !important
}

.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton[dir~="rtl"] {
	right: 0;
	left: var(--eswButtonRight, 30px);
	transform: scaleX(-1)
}

.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton[dir~="rtl"][class~="eswExperienceSite"] {
	right: calc(100vw - 7em)
}

.embeddedMessagingConversationButton {
	background: var(--eswButtonColor, #2E2E2E)
}

.embeddedMessagingConversationButton:focus {
	outline: 2px solid var(--eswButtonColor, #2E2E2E);
	outline-offset: 2px
}

.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton:not(.no-hover):hover {
	outline: 0;
	background: var(--eswButtonHoverColor, #181818);
	transition-timing-function: ease-in-out;
	transition: all 0.2s
}

.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton:active:after {
	transform: scale(0, 0);
	opacity: 0.3;
	transition: 0s
}

.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton[class~="embeddedMessagingConversationButtonLoading"] {
	pointer-events: none;
	cursor: none
}

.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton[class~="embeddedMessagingConversationButtonLoaded"] {
	box-shadow: none
}

.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton div[class="embeddedMessagingIconContainer"] {
	display: inline-block;
	vertical-align: middle;
	max-width: 100%;
	max-height: 100%
}

.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton div[class="embeddedMessagingIconContainer"]>svg.embeddedMessagingIconChat {
	width: 100%;
	height: 100%;
	max-height: 30px;
	max-width: 30px;
	fill: var(--eswIconFillColor);
	transform: scale(1) translate(0px, 1.5px);
	overflow: visible
}

.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton div[class="embeddedMessagingIconContainer"]>img.embeddedMessagingIconChat {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: contain
}

.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton div[class="embeddedMessagingIconContainer"]>svg.embeddedMessagingIconMinimize {
	width: 100%;
	height: 100%;
	max-height: 30px;
	max-width: 30px;
	fill: var(--eswIconFillColor);
	transform: scale(1.5) translate(7px, 8px);
	overflow: visible
}

.embeddedMessagingConversationButtonWrapper .embeddedMessagingConversationButton div[class="embeddedMessagingIconContainer"]>svg.embeddedMessagingIconError {
	width: 100%;
	height: 100%;
	max-height: 32px;
	max-width: 32px;
	fill: var(--eswIconFillColor);
	transform: scale(3.35) translate(10.8px, 10.9px);
	overflow: visible
}

.embeddedMessagingIconProgressIndicator {
	position: relative;
	width: 25px;
	height: 25px
}

.embeddedMessagingIconOuterArc {
	position: absolute;
	top: 0;
	left: 0;
	animation-name: clockwise;
	animation-duration: 2.5s;
	transform-box: fill-box;
	animation-iteration-count: infinite;
	transform-origin: center;
	display: inline-block;
	animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 0.7);
	height: 25px;
	width: 25px;
	fill: var(--eswIconFillColor, #FFF)
}

.embeddedMessagingIconInnerArc {
	position: absolute;
	top: 5.8px;
	left: 12.2px;
	animation-name: anti-clockwise;
	animation-duration: 2.5s;
	transform-box: fill-box;
	animation-iteration-count: infinite;
	transform-origin: 0.5px 6.7px;
	display: inline-block;
	animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 0.7);
	height: 14px;
	width: 14px;
	fill: var(--eswIconFillColor, #FFF)
}

@keyframes clockwise {
	0% {
		transform: rotate(0deg)
	}

	100% {
		transform: rotate(360deg)
	}
}

@keyframes anti-clockwise {
	0% {
		transform: rotate(360deg)
	}

	100% {
		transform: rotate(0deg)
	}
}

.embeddedMessagingFilePreviewFrame {
	position: fixed;
	z-index: 99999999999;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	background: transparent;
	display: none
}

.embeddedMessagingFilePreviewFrame[class~="show"] {
	display: block
}

.embeddedMessagingSiteContextFrame {
	display: none
}

.embeddedMessagingMinimizedNotification {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	max-width: 302px;
	width: auto;
	min-height: 53px;
	height: auto;
	border-radius: 8px;
	background: var(--eswNotificationBackgroundColor, #2e2e2e);
	box-shadow: none;
	position: fixed;
	bottom: 102px;
	right: 30px;
	pointer-events: all;
	cursor: default;
	text-decoration: none;
	overflow: visible
}

.embeddedMessagingMinimizedNotification[dir~="rtl"] {
	right: auto;
	left: var(--eswButtonRight, 30px)
}

.embeddedMessagingMinimizedNotification::-moz-focus-inner,
.embeddedMessagingMinimizedNotificationDismissButton::-moz-focus-inner {
	border: 0;
	outline: 0;
	outline-style: none;
	-moz-outline-style: none
}

.embeddedMessagingMinimizedNotificationTextWrapper {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	justify-content: flex-start;
	max-width: 245px;
	width: auto;
	padding: 10px 0 10px 10px
}

.embeddedMessagingMinimizedNotificationTextWrapper[dir~="rtl"] {
	padding: 10px 10px 10px 0
}

.embeddedMessagingMinimizedNotificationTextWrapper>.embeddedMessagingMinimizedNotificationText {
	color: var(--eswNotificationTextColor, #fff);
	font-family: "Segoe UI";
	font-size: 13px;
	font-style: normal;
	font-weight: 400;
	line-height: 20px;
	white-space: normal;
	text-align: left
}

.embeddedMessagingMinimizedNotificationTextWrapper>.embeddedMessagingMinimizedNotificationText[dir~="rtl"] {
	text-align: right
}

.embeddedMessagingMinimizedNotificationDismissButton {
	width: 36px;
	padding: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 10px;
	background-color: var(--eswNotificationBackgroundColor, #2e2e2e);
	border: none;
	box-shadow: none;
	outline: none;
	cursor: pointer;
	margin: 4px;
	border-radius: 4px
}

.embeddedMessagingMinimizedNotificationDismissButton:focus {
	outline: 2px solid var(--eswNotificationButtonColor, #AEAEAE);
	outline-offset: -4px
}

.embeddedMessagingMinimizedNotificationDismissButton:hover {
	background-color: var(--eswNotificationButtonHoverColor, #181818)
}

.embeddedMessagingMinimizedNotificationDismissButton svg {
	width: 16px;
	height: 16px;
	fill: var(--eswNotificationButtonColor, #AEAEAE)
}

.slds-assistive-text {
	position: absolute !important;
	margin: -1px !important;
	border: 0 !important;
	padding: 0 !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	text-transform: none !important;
	white-space: nowrap !important
}

.embeddedMessagingLiveRegion {
	position: absolute;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px)
}

@keyframes embeddedmessaging-loading-circle-fade-delay {

	0%,
	39%,
	100% {
		opacity: 0
	}

	40% {
		opacity: 1
	}
}

@media only screen and (min-width:15em) and (max-width:47.9375em) {
	.embedded-messaging>.embeddedMessagingFrame[class~="isMaximized"] {
		bottom: 0;
		right: 0;
		margin: 16px;
		width: var(--eswWidth, 320px);
		height: var(--eswHeight, 480px);
		height: 100vh;
		width: 100vw;
		max-height: calc(100vh - 9em);
		max-width: calc(100vw - 2em);
		min-width: 80px;
		min-height: 120px;
		display: inline-block;
		visibility: visible
	}

	.embedded-messaging>.embeddedMessagingFrame[class~="isMaximized"][class~="eswExperienceSite"] {
		max-height: calc(100vh - 11em)
	}

	.embedded-messaging>.embeddedMessagingFrame[class~="isMaximized"][class~="eswMobilePublisher"] {
		max-height: calc(100vh - 6em)
	}

	.embedded-messaging>.embeddedMessagingFrame[class~="isMaximized"][class~="eswIsDesktop"] {
		max-height: calc(100vh - 2em)
	}

	#embeddedMessagingModalOverlay[class~="isMaximized"]~div.embeddedMessagingConversationButtonWrapper {
		display: none
	}

	.embedded-messaging>#embeddedMessagingModalOverlay {
		display: none
	}

	.embedded-messaging>#embeddedMessagingModalOverlay.isMaximized {
		background-color: rgba(51, 51, 51, 0.48);
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		pointer-events: none;
		cursor: none;
		overflow: hidden;
		-webkit-transition: opacity 400ms ease-in;
		-moz-transition: opacity 400ms ease-in;
		transition: opacity 400ms ease-in
	}

	.embeddedMessagingPreventScrolling {
		overflow: hidden;
		cursor: none
	}
}

@media only screen and (min-width:48em) {
	.embedded-messaging>.embeddedMessagingFrame[class~="isMaximized"] {
		bottom: 0;
		right: 30px;
		margin: 0;
		display: inline-block;
		visibility: visible;
		max-height: calc(100vh - 9em);
		max-width: calc(100vw - 9em);
		min-width: 80px;
		min-height: 120px;
		width: var(--eswWidth, 320px);
		height: var(--eswHeight, 480px)
	}

	.embedded-messaging>.embeddedMessagingFrame[class~="isMaximized"][dir~="rtl"] {
		right: 0;
		left: 30px
	}

	.embedded-messaging>.embeddedMessagingFrame[class~="isMaximized"][dir~="rtl"][class~="eswExperienceSite"] {
		right: calc(100vw - 29em)
	}

	#embeddedMessagingModalOverlay[class~="isMaximized"]~div.embeddedMessagingConversationButtonWrapper {
		display: block
	}

	.embedded-messaging>#esw-modaloverlay,
	.embedded-messaging>#esw-modaloverlay.isMaximized {
		display: none
	}

	.embeddedMessagingPreventScrolling {
		pointer-events: auto;
		cursor: auto
	}
}

@media only screen and (min-width:23.125em) and (max-width:51em) and (-webkit-device-pixel-ratio:3) and (orientation:landscape) {
	.embedded-messaging>.embeddedMessagingFrame[class~="isMaximized"] {
		bottom: 0;
		right: 0;
		margin: 16px;
		max-height: calc(100vh - 7em);
		max-width: calc(100vw - 2em);
		min-width: 80px;
		min-height: 120px;
		width: var(--eswWidth, 100vw);
		height: var(--eswHeight, 100vh);
		display: inline-block;
		visibility: visible
	}

	.embedded-messaging>.embeddedMessagingFrame[class~="isMaximized"][class~="eswExperienceSite"] {
		max-height: calc(100vh - 9em)
	}

	.embedded-messaging>.embeddedMessagingFrame[class~="isMaximized"][class~="eswMobilePublisher"] {
		max-height: calc(100vh - 4em)
	}

	#embeddedMessagingModalOverlay[class~="isMaximized"]~div.embeddedMessagingConversationButtonWrapper {
		display: none
	}

	.embedded-messaging>#embeddedMessagingModalOverlay {
		display: none
	}

	.embedded-messaging>#embeddedMessagingModalOverlay.isMaximized {
		background-color: rgba(51, 51, 51, 0.48);
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		pointer-events: none;
		cursor: none;
		overflow: hidden;
		-webkit-transition: opacity 400ms ease-in;
		-moz-transition: opacity 400ms ease-in;
		transition: opacity 400ms ease-in
	}

	.embeddedMessagingPreventScrolling {
		overflow: hidden;
		cursor: none
	}
}
.buttonhand:hover {
		color: #fff;
	}

	.button-bordered-secondary {
		color: #fff;
	}

	.button-bordered-secondary:hover {
		color: black;
	}
	.texta:hover{
		color: #fff;
	}
	.tablist {
		display: inline-block; 
	}
	.content-block{
		display: none !important;
		border-top: 10px solid transparent;
		margin-top: -10px;
		z-index: 1;
	}
	.content-block1{
		display: none !important;
		border-top: 10px solid transparent;
		margin-top: -10px;
		z-index: 1;
	}
	.content-block2{
		display: none !important;
		border-top: 10px solid transparent;
		margin-top: -10px;
		z-index: 1;
	}
	.content-block3{
		display: none !important;
		border-top: 10px solid transparent;
		margin-top: -10px;
		z-index: 1;
	}
	.content-block4{
		display: none !important;
		border-top: 10px solid transparent;
		margin-top: -10px;
		z-index: 1;
	}
	.content-block5{
		display: none !important;
		border-top: 10px solid transparent;
		margin-top: -10px;
		z-index: 1;
	}
	.tablist:hover  .content-block{
		display: flex !important;
		align-items: center;
		justify-content: center;
		/* text-align: center; */
	}
	.tablist:hover  .content-block1{
		display: flex !important;
		align-items: center;
		justify-content: center;
	}
	.tablist:hover  .content-block2{
		display: flex !important;
		align-items: center;
		justify-content: center;
	}
	.tablist:hover  .content-block3{
		display: flex !important;
		align-items: center;
		justify-content: center;
	}
	.tablist:hover  .content-block4{
		display: flex !important;
		align-items: center;
		justify-content: center;
	}
	.tablist:hover  .content-block5{
		display: flex !important;
		align-items: center;
		justify-content: center;
	}
	.stx-megamenu__container{
		display: flex;
	}
	.stx-megamenu__submenu-container{
		display: flex;
	}
	.stx-main--megamenu__inner_iconlinks{
		margin-right: 20px;
	}