@import url("https://fonts.googleapis.com/css?family=Rubik&display=swap");
:root {
  --color-primary: #fcb61a;
  --color-secondry: #ffffff;
  --color-bubble-agent: #edf0f3;
  --color-bubble-client: #008abb;
  --color-bubble-option: #ffffff;
  --color-bubble-option-selected: #183154;
  --color-border: #000000;
  --text-color: #000000;
  --text-color-light: #ffffff;
  --text-font-size-1: 14px;
  --text-font-size-2: 16px;
  --text-font-size-3: 18px;
  --text-line-height: 1.5;
  --size-max-width: 500px
  --size-height-top-logo: f 80px;
  --size-height-input: 50px;
  --text-font: "Rubik", serif !important;
}

/* Main Divs */

html,
form {
  height: 100%;
  width: 100%;
  direction: ltr;
  box-sizing: border-box;
}

body {
  height: 100%;
  width: 100%;
  font-family: var(--text-font);
  overflow: hidden;
  margin: 0px;
  line-height: var(--text-line-height);
  box-sizing: border-box;
}

.mainArea {
  width: 100%;
  height: 100%;
  text-align: -webkit-center;
  background-image: url("./getFile.aspx?profile=2811&fname=bg2.png&sug=2");
  background-size:cover;
  background-repeat: no-repeat;
  background-position-x: center;
}

.topLogo {
  display: none;
}

.Stage {
  width: 100%;
  max-width: 500px;
  height: calc(100% - 60px);
  overflow: auto;
  padding: 0;
}

.InputArea {
  box-sizing: border-box;
  width: 100%;
  position: absolute;
  bottom: 0;
  max-width: 500px;
  padding-top: 5px;
  padding-bottom: 5px;
  height: 60px;
}

/* Bubbles Lines */

.NewAgentLine,
.NewClientLine,
.NewOptionLine {
  width: 100%;
  margin: 0;
  display: block;
  outline: none;
  border: none;
  position: relative;
}

.NewAgentLine {
  text-align: left;
  text-align: -webkit-left;
}

.NewClientLine {
  text-align: right;
  text-align: -webkit-right;
}

.NewOptionLine {
  text-align: left;
  text-align: -webkit-left;
}

/* Bubbles */

.AgentBubble {
  display: block;
  box-sizing: border-box;
  position: relative;
  border-radius: 0 18px 18px 18px;
  padding: 10px;
  margin: 8px 0 8px 50px;
  background-color: var(--color-bubble-agent);
  color: var(--text-color);
  text-align: right;
  direction: rtl;
  font-size: var(--text-font-size-1);
  font-family: var(--text-font);
  box-shadow: 0 2px 4px -1px rgba(168, 168, 168, 0.4),
    0 6px 39px -16px rgba(26, 83, 164, 0.52);
  min-height: 45px;
  min-width: 180px;
  max-width: 80%;
  width: fit-content;
}

.ClientBubble {
  display: block;
  box-sizing: border-box;
  position: relative;
  border-radius: 10px;
  border-radius: 18px 0 18px 18px;
  padding: 10px;
  margin: 8px 50px 8px 0;
  background: var(--color-bubble-client);
  color: var(--text-color-light);
  text-align: right;
  direction: rtl;
  font-size: var(--text-font-size-1);
  font-family: var(--text-font);
  box-shadow: 0 2px 4px -1px rgba(168, 168, 168, 0.4),
    0 6px 39px -16px rgba(26, 83, 164, 0.52);
  min-height: 45px;
  min-width: 180px;
  max-width: 80%;
  width: fit-content;
}

.OptionBubble {
  display: block;
  box-sizing: border-box;
  position: relative;
  border-radius: 0 18px 18px 18px;
  padding: 10px;
  margin: 8px 0 8px 50px;
  background-color: var(--color-bubble-option);
  color: var(--text-color);
  text-align: right;
  direction: rtl;
  font-size: var(--text-font-size-1);
  font-family: var(--text-font);
  box-shadow: 0 2px 4px -1px rgba(168, 168, 168, 0.4),
    0 6px 39px -16px rgba(26, 83, 164, 0.52);
  min-width: 180px;
  width: 70%;
}

.OptionBubbleSelected {
  color: var(--text-color-light);
  background-color: var(--color-bubble-option-selected);
}

.OptionBubble:hover {
  color: var(--text-color-light);
  background-color: var(--color-bubble-option-selected);
}

/* Icons */

.AgentIcon {
  position: absolute;
  background-image: url("./getFile.aspx?profile=2811&fname=logoregular.png&sug=2");
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-position: top;
  width: 40px;
  height: 40px;
  left: -45px;
  top: 0px;
}

.ClientIcon {
  position: absolute;
  background-image: url("./getFile.aspx?profile=2811&fname=client1.png&sug=2");
  background-size: 25px 25px;
  background-repeat: no-repeat;
  background-position: top;
  width: 40px;
  height: 40px;
  right: -45px;
  top: 0px;
}

/* Texting */

.agentTextingImage {
  background-image: url("./getFile.aspx?profile=2811&fname=typing.gif&sug=2");
  background-repeat: no-repeat;
  background-size: 25px;
  background-position: center;
  width: 30px;
  height: 45px;
  position: relative;
}

.agentTexting {
  box-sizing: border-box;
  position: relative;
  border-radius: 0 18px 18px 18px;
  margin-left: 50px;
  background-color: var(--color-bubble-agent);
  color: var(--text-color);
  text-align: right;
  font-size: var(--text-font-size-1);
  font-family: var(--text-font);
  box-shadow: 0 2px 4px -1px rgba(168, 168, 168, 0.4),
    0 6px 39px -16px rgba(26, 83, 164, 0.52);  height: 45px;
  width: fit-content;
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
}

/* TextBox */

.InputText {
  box-sizing: border-box;
  background-color: #e9ece9;
  font-family: var(--text-font);
  font-size: var(--text-font-size-1);
  width: calc(100% - 20px);
  height: 50px;
  color: var(--text-color);
  outline: none;
  border: none;
  border-radius: 30px;
  padding-left: 70px;
  padding-right: 20px;
  margin-left: 10px;
  margin-right: 10px;
  position:relative;
  bottom:7px;
  border: 1px solid #0089ba;
  border-radius: 25px;
  background-color: #ffffff;
  box-shadow: 0 20px 35px -4px rgba(125, 143, 152, 0.35);
  direction: rtl;
  text-align: right;
}

.InputText::placeholder {
  color: var(--text-font);
}

#sh_sendBtn {
  position: absolute;
  left: 20px;
  top: 10px;
  width: 40px;
  height: 40px;
  background: url(./resources/css/./getFile.aspx?profile=2811&fname=send.png&sug=2), var(--color-primary);
  background-size: 25px;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  cursor: pointer;
  /* Flip */
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

/* Scrollbar */

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-thumb {
  background: #7f7f7f40;
  border: none;
  border-radius: 50px;
}

::-webkit-scrollbar-thumb:hover {
  background: #7f7f7f80;
}

::-webkit-scrollbar-thumb:active {
  background: #7f7f7f80;
}

::-webkit-scrollbar-track {
  background: transparent;
  border: none;
  border-radius: 18px;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

#accessibilityIcon {
  display: none;
}

.screenReaderText {
  display: none;
}

#searchIconIDF {
left=0;
height:42px;
width:42px;
padding-left:20px;
position:absolute;
bottom:13px;
}

.botLoadingGif {
display: none !important;
}

.floatingBackButton
{
	display: block !important;
	position: fixed !important;
	right: 7% !important;
	width: 50px !important;
	height: 50px !important;
	border: none !important;
	cursor: pointer !important;
	text-align: center !important;
	box-shadow: 0 2px 4px -1px rgba(168, 168, 168, 0.4),
    0 6px 39px -16px rgba(26, 83, 164, 0.52) !important;
	background-color: var(--color-bubble-client) !important;
	color: var(--text-color) !important;
	border-radius: 40px !important;
	bottom: 11% !important;	
	display: flex !important;
	justify-content: center;
	align-items: center;
}

.FixedButtonsAreaInner
{
	//margin-top: 16px;
	border: none !important;
	background-image: url("./getFile.aspx?profile=2811&fname=home1.png&sug=2");
	background-size: 22px;
	background-repeat: no-repeat;
	background-position-x: 3px;
	background-position-y: 4px;
	height: 26px;
	width: 22px;
	-webkit-transform: rotate(0) !important;
	margin-top: 0% !important;
}

.LogosDiv {
background:#ffffff;
display:flex;
justify-content:center;
align-items:center;
gap:21px;
padding:5px 13px;
box-shadow: 0 0 24px #ebebeb;
border-bottom: 2px solid #11a2d5;
}

.idfLogo{
width:52px;
}