/* ver:0018 */
/* ver:0023 */
/* ver:0028 */
/* ver:0030 */
/* ver:0031 */
/* ver:0053 */
/* ver:0064 */
/* ver:0066 */
/* ver:0089 */

@import url('https://fonts.googleapis.com/css?family=Assistant&display=swap');

body { margin: 0px; direction: ltr; }
body.rtl { direction : rtl; }

body { background: #ffffff; }
#background-header { background: #baccfb; position: fixed; left: 0px; right: 0px; top: 0px; height: 103px; }
#layout { 
	box-shadow: 0 0 18px 0 rgba(118, 124, 141, 0.18);
	border-radius: 3px;
	position: fixed; top: 41px; bottom: 41px; 
	left:0px;
	right:0px;
	max-width:480px;
	margin:0px auto; 
	border: 2px solid #bfc2ce;
	background-color: #eaeef6;
	}
	
@media all and (-ms-high-contrast:none) {
     .some-element { color: green } /* IE10 */
     *::-ms-backdrop, .some-element { color: red } /* IE11 */
	#layout { width: 480px; } 
}	
	
#layout-header { white-space: nowrap; direction: ltr; background: #cdd7f1; padding: 10px 0px 10px 0px; font-size: 0px; height: 60px; box-sizing: border-box; position: absolute; top:0px; left: 0px; right: 0px; }
#layout-header .profile-image { background-color: rgba(255,255,255,0.1); box-shadow: 0 2px 1px rgba(0,0,0,.13); vertical-align: middle; display: inline-block; width: 40px; height: 40px; margin: 0px 16px 0px 16px; background-position: center center; background-size: cover; border-radius: 50%; }
#layout-header .profile-name { font-family: Assistant; color: #1f1f1f; vertical-align: middle; display: inline-block; font-size: 16px; }	

#layout-header .menu { display: none; position: absolute; right: 0px; bottom: 0px; top: 0px; width: 59px; }
#layout-header .menu.active { display: block; }
#layout-header .menu > .icon { background: url(../template/menu.normal.png) center center no-repeat; cursor: pointer; color: rgba(0,0,0,0.15); font-size: 36px; font-weight: normal; line-height: 59px; font-family: FontAwesome; text-align: center; position: absolute; left: 0px; top: 0px; bottom: 0px; right: 0px;  }
#layout-header .menu > .icon:hover { background: url(../template/menu.hover.png) center center no-repeat;  }
/*#layout-header .menu > .icon:before { content: "\f0c9";   }*/
/*#layout-header .menu > .icon:hover { background: rgba(0,0,0,0.05);   }*/
#layout-header .menu > .items { display: none; position: absolute; background: white; right: 0px; top: 60px; z-index: 100; box-shadow: 0 1px 1px 0 rgba(0,0,0,.06), 0 2px 5px 0 rgba(0,0,0,.2); }
#layout-header .menu.open > .items { display: block; }
#layout-header .menu > .items > .item { font-weight: bold; color: rgba(0,0,0,0.45); cursor: pointer; line-height: 40px; padding: 0px 15px 0px 15px; font-family: Assistant; font-size: 16px; white-space: nowrap; }
#layout-header .menu > .items > .item:hover { background: rgba(0,0,0,0.05); }

#layout-footer { height: 114px; box-sizing: border-box; padding: 10px; position: absolute; bottom:0px; left: 0px; right: 0px;  }
#layout-footer input { color: #676767; font-size: 16px; font-family: Assistant; border-radius: 3px; padding: 0px 15px 0px 15px; width: 100%; height: 52px; box-sizing: border-box; display: block; outline: none; -webkit-backdrop-filter: blur(50px); backdrop-filter: blur(50px); box-shadow: 0 0 8px 0 #4c78ec; border: solid 1px #83a4f8; background-color: #ffffff; }
#layout-footer input:hover { box-shadow: 0 0 8px 0 #4c78ec; border: solid 1px #426fe4;  }
#layout-footer input:focus { color: black; box-shadow: 0 0 8px 0 #4c78ec; border: solid 2px #426fe4;  } 
#layout-body { overflow: auto; position: absolute; left: 0px; right: 0px; top: 60px; bottom: 94px; padding: 20px;  }
#layout-credit { position: absolute;bottom:0px;left:0px;right:0px;text-align:center; font-family:Assistant;font-size:11px;color:rgba(0,0,0,0.45); line-height:49px; }

#layout-footer .foot-input { position: absolute; top:10px;height:42px; }
body.rtl #layout-footer .foot-input { left:85px; right:25px; }
body.ltr #layout-footer .foot-input { right:85px; left:25px; }
body.rtl #layout-footer input { padding-right: 42px; }
body.ltr #layout-footer input { padding-left: 42px; }

#layout-footer .button { position: absolute; top: 12px; cursor: pointer; display: block; width: 48px; height: 48px; background: url(../template/send.normal.png) center center no-repeat; }
#layout-footer .button:hover { background: url(../template/send.hover.png) center center no-repeat; }
body.rtl #layout-footer .button { left: 20px; transform: ScaleX(-1); }
body.ltr #layout-footer .button { right: 20px; }

#layout-footer .upload { cursor: pointer; text-align: center; overflow: hidden; box-sizing: border-box; cursor: pointer; position: absolute; width: 42px; height: 42px;  }
body.rtl #layout-footer .upload { right: 25px;  }
body.ltr #layout-footer .upload { left: 25px;  }
#layout-footer .upload .icon { cursor: pointer; display: inline-block; background: url(../template/attachment.normal.png) center center no-repeat; height: 27px; width: 27px; box-sizing: border-box; margin-top: 12px; }
#layout-footer .upload:hover .icon { background: url(../template/attachment.hover.png) center center no-repeat;  }

#layout-footer .upload input { cursor: pointer; opacity: 0.001; position: absolute; top: 0px; left: 0px; display: block; width: 100%; height: 100%; }
#layout-footer .upload .progress { display: none; color: #4A5C8E; font-size: 13px; line-height: 47px; text-align: center; }


/* *********************** */

@media all and (max-width: 500px){

	#background-header { display: none; }
	#layout { box-shadow: none; position: fixed; top: 0px; bottom: 0px; left:0px;right:0px;max-width:100%; }
	
	}	

/* *********************** */

#layout-body .buttons { margin-top: 20px; font-size: 0px; text-align: center; display: block;  }
#layout-body .button { font-family: Assistant; box-shadow: 0 1px 0.5px rgba(0,0,0,.13); cursor: default; margin: 2.5px; box-sizing: border-box; background: #ff7e00; color: #ffffff; display: inline-block; border-radius: 3px; padding: 5px 8px 5px 8px; font-size: 16px; }
#layout-body .button:hover { box-shadow: 0 1px 5.5px rgba(0,0,0,.53); }

#layout-body .user { 	position: relative; text-align: right; display: block; margin-bottom: 10px;  }
#layout-body .user span { text-align: initial; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); font-family: Assistant; max-width: 75%; box-sizing: border-box; background: #C8D6FB; color: #262626; display: inline-block; border-radius: 8px; padding: 10px 10px 10px 10px; font-size: 15px; }
#layout-body .user:before { right: -7.5px; top: 6px; position: absolute; color: #C8D6FB; font-size: 24px; content: "\f0da"; font-family: FontAwesome; }
#layout-body .user span {
	/* These are technically the same, but use both */
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	/* This is the dangerous one in WebKit, as it breaks things wherever */
	word-break: break-all;
	/* Instead use this non-standard one: */
	word-break: break-word;
	/* Adds a hyphen where the word breaks, if supported (No Blink) */
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;	
	}
	
@media all and (-ms-high-contrast:none) {
     .some-element { color: green } /* IE10 */
     *::-ms-backdrop, .some-element { color: red } /* IE11 */
	#layout-body .user span {
		-ms-word-break: normal;
		word-break: normal;
		}
}		
	
#layout-body .user span a { text-decoration: underline; color: #039be5; }
#layout-body .user span img { max-width: 100%; }

#layout-body .bot { 	position: relative; text-align: left; display: block; margin-bottom: 10px;  }
#layout-body .bot > span { text-align: initial; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); font-family: Assistant; max-width: 75%; box-sizing: border-box; background: #ffffff; color: #262626; display: inline-block; border-radius: 8px; padding: 10px 10px 10px 10px; font-size: 15px; }
#layout-body .bot:before { left: -6.5px; top: 6px; position: absolute; color: #ffffff; font-size: 24px; content: "\f0d9"; font-family: FontAwesome; }

#layout-body .bot > span {
	/* These are technically the same, but use both */
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	/* This is the dangerous one in WebKit, as it breaks things wherever */
	word-break: break-all;
	/* Instead use this non-standard one: */
	word-break: break-word;
	/* Adds a hyphen where the word breaks, if supported (No Blink) */
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;	
	}
	
@media all and (-ms-high-contrast:none) {
     .some-element { color: green } /* IE10 */
     *::-ms-backdrop, .some-element { color: red } /* IE11 */
	#layout-body .bot > span {
		-ms-word-break: normal;
		word-break: normal;
		}
}	
	
#layout-body .bot > span a { text-decoration: underline; color: #039be5; }
#layout-body .bot > span img { max-width: 100%; }
		
/* *********************** */
	
#layout-body .items  { font-family: Assistant; direction: ltr; position: relative; display: block; padding: 0px 10px 0px 10px; max-width: 300px; margin: 0px auto; }
#layout-body .items .slides { background: #C8D6FB; overflow: hidden; white-space: nowrap; font-size: 0px; border-radius: 5px; display: block; margin-bottom: 10px; }
#layout-body .items .slides .item { display: inline-block; white-space: normal; vertical-align: top; width: 100%; overflow: hidden; }
body.rtl #layout-body .items .slides .item { direction: rtl; }
#layout-body .items .slides .item.item-link { cursor: pointer; }
#layout-body .items .slides .item.item-link:hover {  }
#layout-body .items .slides .item .image {display: block; padding-bottom: 75%; background-position: center center; background-repeat: no-repeat; background-size: cover; }
#layout-body .items .slides .item .texts { display: block; padding: 5px; }
#layout-body .items .slides .item .texts .title { display: block; font-size: 14px; font-weight: bold; color: rgba(0,0,0,0.75); }
#layout-body .items .slides .item .texts .subtitle { display: block; font-size: 14px; color: rgba(0,0,0,0.75); }
#layout-body .items .slides .item .options { display: block; padding:2px; }
#layout-body .items .slides .item .options:empty { display: none; }
#layout-body .items .slides .item .options .option { cursor: pointer; font-size: 14px; color: rgba(0,0,0,0.75); font-weight: bold; text-align: center; padding: 5px; display: block; background: rgba(255,255,255,0.75); margin-bottom: 2px; }
#layout-body .items .slides .item .options .option:last-child { margin-bottom: 0px; border-radius: 0px 0px 5px 5px; }
#layout-body .items .slides .item .options .option:hover { background: #B0C5FB;  }
#layout-body .items .next  { background: rgba(0,0,0,0.05); cursor: pointer; position: absolute; left: -7px; width: 16px; top: 0px; bottom: 0px; }
#layout-body .items .next .icon { color: rgba(0,0,0,0.55); display: block; font-size: 16px; font-family: FontAwesome; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin-top: -8px; margin-left: -8px; line-height: 16px; text-align: center; }
#layout-body .items .next .icon:before { content: "\f0a8"; }
#layout-body .items .next:hover  .icon { color: rgba(0,0,0,0.85); }
#layout-body .items .prev  { background: rgba(0,0,0,0.05); cursor: pointer; position: absolute; right: -7px; width: 16px; top: 0px; bottom: 0px; }
#layout-body .items .prev .icon { color: rgba(0,0,0,0.55); display: block; font-size: 16px; font-family: FontAwesome; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin-top: -8px; margin-left: -8px; line-height: 16px; text-align: center; }
#layout-body .items .prev .icon:before { content: "\f0a9"; }
#layout-body .items .prev:hover  .icon { color: rgba(0,0,0,0.85); }

@keyframes blink {
    /**
     * At the start of the animation the dot
     * has an opacity of .2
     */
    0% {
      opacity: .2;
    }
    /**
     * At 20% the dot is fully visible and
     * then fades out slowly
     */
    20% {
      opacity: 1;
    }
    /**
     * Until it reaches an opacity of .2 and
     * the animation can start again
     */
    100% {
      opacity: .2;
    }
}

.typing-content span {
    /**
     * Use the blink animation, which is defined above
     */
    animation-name: blink;
    /**
     * The animation should take 1.4 seconds
     */
    animation-duration: 1.4s;
    /**
     * It will repeat itself forever
     */
    animation-iteration-count: infinite;
    /**
     * This makes sure that the starting style (opacity: .2)
     * of the animation is applied before the animation starts.
     * Otherwise we would see a short flash or would have
     * to set the default styling of the dots to the same
     * as the animation. Same applies for the ending styles.
     */
    animation-fill-mode: both;
}

.typing-content span:nth-child(2) {
    /**
     * Starts the animation of the third dot
     * with a delay of .2s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .2s;
}

.typing-content span:nth-child(3) {
    /**
     * Starts the animation of the third dot
     * with a delay of .4s, otherwise all dots
     * would animate at the same time
     */
    animation-delay: .4s;
}

#layout-body .bot.typing:before { display: none; }
#layout-body .bot.typing > span { background: transparent; box-shadow: none; }
#layout-body .bot.typing > .typing-content  { font-size: 12px; color: #888888; }
#layout-body .bot.typing > .typing-content span { font-weight: bold; }

created { display: block; padding: 0px 7px 0px 7px; color: #888888; font-family: Assistant; font-size: 11px; position: relative; top: -7px; }
created.by-bot { text-align: left;  }
body.rtl created date { padding-right: 5px; }
body.ltr created date { padding-left: 5px; }
created { display: none; }