/* eXeLearning Style Designer Compatible Style */
body{padding:0;text-align:center}
#simu {top: 150px; height: 30px; width: 30px; position: fixed; right: 1px; z-index: 1000;}
#ebook {top: 195px; height: 30px; width: 30px; position: fixed; right: 1px; z-index: 1000;}
#keychat {top: 240px; height: 30px; width: 30px; position: fixed; right: 1px; z-index: 1000;}
#conn {top: 285px; height: 30px; width: 30px; position: fixed; right: 1px; z-index: 1000;}
.search{position:fixed; top:330px; right:1px; font-size:small; text-transform:lowercase; color:#3399FF;}
#goTop {background: url(gotop3.png) no-repeat;bottom: 5px;cursor: pointer;display: none;height: 30px;position: fixed;right: 1px;width: 30px;overflow: hidden;z-index: 9999;}
.lost {display: none;}
#content{width:100%;margin:0 auto;text-align:left;position:relative;border-style:solid;border-width:0}
#main-wrapper{padding-bottom:1.5em;width:100%;*width:auto}
/* * is for IE6 and IE7 */#main{padding:20px 40px 30px 320px;height:auto!important;height:200px;min-height:200px;*padding-left:0}
.no-nav #main-wrapper{width:99%}
.no-nav #main{padding:20px 20px 0 20px}
#header,#emptyHeader{border-top-width:0;border-right-width:0;border-left-width:0}
#headerContent{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-height:1.1em}
#nodeDecoration{background:none;padding:30px 0 0 0;border:none;margin:20px 0;height:auto;min-height:0}
#nodeTitle{font-weight:300}
.iDevice_wrapper{margin-top:-10px}
/* Menú */#siteNav{position:fixed;width:280px;float:left;margin-right:40px;z-index: 9999;}
#siteNav ul,#siteNav li{margin:0;padding:0;list-style:none;line-height:1.1em}
#siteNav .other-section{display:none}
#siteNav a{display:block;padding:5px 5px 5px 10px;border-width:0 0 1px 0;border-style:solid}
#siteNav .active{font-weight:bold;text-decoration:none}
#siteNav ul ul a{padding-left:20px;font-size:.95em}
#siteNav ul ul ul a{padding-left:30px}
#siteNav ul ul ul ul a{padding-left:40px}
#siteNav .daddy span{display:none}
/* IE6 */* html #siteNav a{display:inline-block;width:250px}
* html #siteNav ul ul a{width:235px}
* html #siteNav ul ul ul a{width:190px}
* html #main{padding:20px 20px 0 0}
#siteFooter{padding:0px 0px 0px 0px;border-right:1px;line-height:0.8em}
/* Pagination */.pagination{text-align:right;border-top:1px solid;font-size:.95em;padding:20px 0}
.pagination .sep{display:none}
.pagination a{display:inline-block;padding:5px 10px;border-radius:5px;margin-left:20px}
.pagination a:hover,.pagination a:focus{text-decoration:none}
#topPagination{position:absolute;top:-10px;right:20px; display:none;}
#topPagination .pagination{border:none}
#bottomPagination{clear:both;display:none;}
#bottomPagination a{margin:0 20px 0 0}
.page-counter{padding:5px 0;display:inline-block}
/* Autoclear */#content{overflow:auto}
/* Hide/Show/Skip navigation */#nav-toggler{margin:0;position:fixed;top:95px;right:1px;font-size:.95em}
#nav-toggler a,#skipNav a{padding:5px 10px;border-radius:5px}
#nav-toggler a{display:block}
#nav-toggler a:hover{text-decoration:none}
#skipNav{z-index:100px;padding-top:15px;text-align:center}
/* Search bar */#exe-client-search-text{border-top-left-radius:5px;border-bottom-left-radius:5px}
#exe-client-search-submit{border-top-right-radius:5px;border-bottom-right-radius:5px}
@media screen and (max-width: 980px) {	.exe-web-site #content{width:100%;border:0;box-shadow:none}
	#main{padding:20px 30px 0 280px}
	#siteNav{width:250px;margin-right:30px}
}
@media all and (max-width: 700px) {	#headerContent{font-size:.7em;white-space:normal;padding-bottom:.5em}
	#siteNav{float:none;width:100%;padding:0}
	#siteNav{line-height:1.5em;margin-bottom:15px}
	#main-wrapper{width:100%;float:none}
    	#main,.no-nav #main{padding:10px 20px 0 20px}
    	#content .exe-col{float:none;width:100%;padding:0}
	#bottomPagination{text-align:center;height:15px;position:relative}
	#bottomPagination .prev{position:absolute;left:20px;height:15px}
	#bottomPagination .next{position:absolute;right:0;height:35px}
	#siteNav{border-top:1px solid}
}
@media print{	#siteNav,#nav-toggler,.noprt,.toggle-idevice{display:none}
	body #main,body.no-nav #main{padding:20px 0}
	body #content{background:#FFF}
	#headerContent{white-space:normal;text-overflow:normal;font-weight:bold}
}
/* eXeLearning Style Designer */
#content{
/*pageWidth*/
width:100%;
/*wrapperShadowColor*/
box-shadow:0 0 15px 0 #ffffff;
/*pageAlign*/
margin:0;
/*contentBGColor*/
background-color:#f9fcf9;
}
#exe-client-search-text{
/*searchBarBGColor*/
background:#f9fcf9;
/*searchBarTextColor*/
color:#666666;border-color:#4c4c4c;
}
#exe-client-search-submit{
/*searchBarButtonBGColor*/
background:#4c4c4c;border-color:#4c4c4c;
/*searchBarButtonTextColor*/
color:#ffffff;
}
/*useNavigationIcons*/
/*blackNavigationIcons*/
.pagination a span{
position:absolute;overflow:hidden;clip:rect(0,0,0,0);height:0;
}
.pagination a,.pagination a:hover,.pagination a:focus{
display:block;position:absolute;right:52px;width:32px;height:32px;padding:0;background:url(_style_icons_black.png) no-repeat 0 0;
}
.pagination .next,.pagination .next:hover,.pagination .next:focus{
right:0;background-position:-50px 0;
}
.pagination .print-page,.pagination .print-page:hover,.pagination .print-page:focus{
right:104px;background-position:-200px 0;
}
#topPagination{
width:50%;min-width:400px;
}
#bottomPagination{
height:72px;position:relative;overflow:hidden
}
#bottomPagination a{
top:20px;right:72px;margin:0;
}
#bottomPagination .next{
right:20px;
}
#nav-toggler a span{
position:absolute;overflow:hidden;clip:rect(0,0,0,0);height:0;
}
#nav-toggler a{
display:block;width:32px;height:32px;padding:0;background:url(_style_icons_black.png) no-repeat -100px 0;
}
#nav-toggler a:hover{
background:url(_style_icons_black.png) no-repeat -100px 0;
}
#nav-toggler .show-nav{
background-position:-150px 0;
}
#nav-toggler .show-nav:hover{
background-position:-150px 0;
}
.pagination a,#nav-toggler a{
filter:alpha(opacity=70);opacity:.7;
}
.pagination a:hover,.pagination a:focus,#nav-toggler a:hover{
filter:alpha(opacity=100);opacity:1;
}
.pagination .page-counter{
position:absolute;line-height:32px;padding:0;right:156px;
}
#bottomPagination .page-counter{
right:104px;
}
@media all and (max-width: 700px){
#nav-toggler{
height:32px;
}
#nav-toggler a{
padding:0;width:32px;position:absolute;left:50%
}
#siteNav{
border-top:1px solid #ddd;
}
.pagination .page-counter{
width:300px;left:50%;right:auto;margin-left:-150px
}
}
@media all and (max-width: 400px){
.pagination .page-counter{
overflow:hidden;clip:rect(0,0,0,0);height:0;
}
}
body{
text-align:left;
/*bodyBGColor*/
background-color:#ffffff;
}
#siteNav,.pagination a,#skipNav,#nav-toggler{
/*navFontSize*/
font-size:90%;
}
#siteNav,#siteNav a{
/*navBGColor*/
background-color:#e5e5e5;
/*navAColor*/
color:#05592d;
/*navBorderColor*/
border-color:#44b57b;
}
@media screen and (min-width: 701px) and (max-width: 1015px){
#siteNav,#siteNav ul{
background-color:#e5e5e5;border-color:#44b57b;
}
#siteNav li{
background-color:#e5e5e5;
}
}
#siteNav a:hover,#siteNav a:focus,#siteNav a.active{
/*navHoverBGColor*/
background-color:#44b57b;
/*navAHoverColor*/
color:#ffffff;
}
@media screen and (min-width: 701px) and (max-width: 1015px){
#siteNav li:hover,#siteNav li.sfhover{
background-color:#44b57b;
}
}
.pagination{
border-color:#018f77;
}
#bottomPagination .page-counter{
color:#hite;/;
}
#bottomPagination{
background-color:#e5e5e5;
}
/* eXeLearning Style Designer (custom CSS) */

#siteNav{display: block; overflow-y:scroll;z-index:9999; height: 400px;}
#siteNav::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

#siteNav::-webkit-scrollbar
{
	width: 5px;  
	background-color: #F5F5F5;
}

#siteNav::-webkit-scrollbar-thumb
{
	background-color: #1c8e53;
}


/* Add Animation */
@-webkit-keyframes animatetop {
  from {right:-300px; opacity:0} 
  to {right: 0; opacity:1}
}

@keyframes animatetop {
  from {right:-300px; opacity:0}
  to {right: 0; opacity:1}
}

/* The Close Button */
.close {
  color: black;
  float: right;
  font-size: 28px;
  font-weight: bold;
  text-decoration: none;
}

span {
	padding-right: 2px;
	padding-left: 2px;
}

.pop-up {
  display:none;
  background: #efefef;
  position:fixed;
  right:38px;
  bottom:0;  
  width:400px;
  max-width: 85vw;
  max-height:100vh;
  border-radius:5px;  
/*   box-shadow: 0px 5px 35px 9px #464a92; */
  box-shadow: 0px 5px 35px 9px #ccc;
  -webkit-animation-name: slideIn; /* Fade in the background */
  -webkit-animation-duration: 0.5s;
  animation-name: slideIn;
  animation-duration: 0.5s
}

.pop-up1 {
  display:none;
  background: #efefef;
  position:fixed;
  right:40px;
  top:250px;  
  width:400px;
  max-width: 85vw;
  max-height:100vh;
  border-radius:5px;  
/*   box-shadow: 0px 5px 35px 9px #464a92; */
  box-shadow: 0px 5px 35px 9px #ccc;
  -webkit-animation-name: slideIn; /* Fade in the background */
  -webkit-animation-duration: 0.5s;
  animation-name: slideIn;
  animation-duration: 0.5s
}

.pop-up-toggle,.pop-up-toggle1 {
  float:right;
  margin-right:5px;
  cursor:pointer;
}
.pop-up-toggle:hover,
.pop-up-toggle:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
.pop-up-toggle1:hover,
.pop-up-toggle1:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.pop-up-header {
  background: #1c8e53;
  height:50px;
  border-top-left-radius:5px;
  border-top-right-radius:5px; 
  color:white;
  text-align:center;
  font-size:20px;
  padding-top:15px;
  -webkit-animation-name: slideIn; /* Fade in the background */
  -webkit-animation-duration: 0.5s;
  animation-name: slideIn;
  animation-duration: 0.5s
}
.pop-up-body {
  position: relative;
  height:370px;  
  height:auto;
  border:1px solid #ccc;  
  overflow: hidden;
  text-indent:10px;
  text-align:left;
  -webkit-animation-name: slideIn; /* Fade in the background */
  -webkit-animation-duration: 0.5s;
  animation-name: slideIn;
  animation-duration: 0.5s
}

/* Add Animation */
@-webkit-keyframes slideIn {
  from {bottom: -300px; opacity: 0} 
  to {bottom: 0; opacity: 1}
}

@keyframes slideIn {
  from {bottom: -300px; opacity: 0}
  to {bottom: 0; opacity: 1}
}

.chat-logs {  
  display: flex;
  flex-direction: column;
  padding:15px; margin: 5px;
  height:300px;
  overflow-y:scroll;
}

.chat-logs::before{
	content: "Xin chào! Đây là hệ thống trả lời tự động các khái niệm có trong giáo trình. Mọi thông tin chi tiết xin liên hệ Bộ môn ..., Khoa ..., email: ...";
	font-family:Helvetica;
	font-size: 16px;
    	font-weight: normal;
    	clear: both;
	border:2px solid #1c8e53;
	border-radius: 10px 10px 10px 10px;
	padding: 5px 5px 5px 5px;
	width: 90%;}

.chat-logs::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
}

.chat-logs::-webkit-scrollbar
{
	width: 5px;  
	background-color: #F5F5F5;
}

.chat-logs::-webkit-scrollbar-thumb
{
	background-color: #1c8e53;
}

@media only screen and (max-width: 500px) {
   .chat-logs {
        height:40vh;
    }
}

#chat-input {
  background: #f4f7f9;
  width:95%; 
  position:relative;
  height:20px;  
  padding-top:10px;
  padding-right:10px;
  padding-bottom:10px;
  padding-left:10px;
  border:none;
  resize:none;
  outline:none;
  border:1px solid #ccc;
  color:#1c8e53;
  border-top:none;
  border-bottom-left-radius:10px;
  border-top-left-radius:10px;
  overflow:hidden;  
}
.chat-input > form {
    margin-bottom: 0;
}
#chat-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #808080;
}
#chat-input::-moz-placeholder { /* Firefox 19+ */
  color: #808080;
}
#chat-input:-ms-input-placeholder { /* IE 10+ */
  color: #808080;
}
#chat-input:-moz-placeholder { /* Firefox 18- */
  color: #808080;
}

#bot {
	margin-right: auto;
}

#user {
	margin-left: auto;
}

.userText{
	font-family: "Times New Roman", Times, serif;
	font-size: 18px;
    font-weight: normal;
    clear: both;
    width: 80%;
    background-color: #1c8e53;
    border-radius: 10px 10px 10px 10px;
    padding: 5px 5px 5px 5px;
	color: white;
}

.bot1 {
	font-family: Consolas, 'Courier New', Menlo, source-code-pro, Monaco,  
	monospace;
	border:2px solid #1c8e53;
	border-radius: 10px 10px 10px 10px;
	width: 70%;
}

.avatar {
	height: 30px;
	border-radius: 50%;
}

.response {
        display: flex;
	align-items: left;
	margin: 1%;
}


/* Mobile */

@media only screen and (max-width: 980px) {
  .container {
		flex-direction: column; 
		justify-content: flex-start;
	}
	.chat {
		width: 75vw;
		margin: 10vw;
	}
}

.chip {
  display: inline-block;
  padding: 0 25px;
  height: 50px;
  font-size: 20px;
  line-height: 50px;
  border-radius: 25px;
  background-color: #018f77;
  color: white;
}
.chip a {color: white;}

.chip img {
  float: left;
  margin: 0 10px 0 -25px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
}

.td {font-size: 20px; color: #1c8e53; font-weight: bold;}
.tk {font-size: 18px; color: red; font-weight: bold;}
.cc {font-size: 18px; color: red; font-weight: bold;}
.cc::before {
    display: inline-block;
    width: 45px;
    height: 45px;
    content: "";
    background: url("conc.png") no-repeat 0 0;
    background-size: 75%;
    vertical-align: middle;
}

.skill {font-size: 18px; color: red; font-weight: bold;}
.skill::before {
    display: inline-block;
    width: 45px;
    height: 45px;
    content: "";
    background: url("skill.png") no-repeat 0 0;
    background-size: 75%;
    vertical-align: middle;
}

.bt {font-size: 18px; color: red; font-weight: bold;}
.bt::before {
    display: inline-block;
    width: 45px;
    height: 45px;
    content: "";
    background: url("homework.png") no-repeat 0 0;
    background-size: 75%;
    vertical-align: middle;
}

.cy {font-size: 18px; color: red; font-weight: bold;}
.cy::before {
    display: inline-block;
    width: 45px;
    height: 45px;
    content: "";
    background: url("note.png") no-repeat 0 0;
    background-size: 75%;
    vertical-align: middle;
}
.kl {
  text-align: justify;
  display: inline-block;
  padding: 0 15px;
  font-size: 18px;
  width: 97%;
  border-radius: 10px;
  border: 2px solid #ff0000;
  background-color: #faeccd;
}

.kl::before {
    display: inline-block;
    width: 45px;
    height: 45px;
    content: "";
    background: url("idea.png") no-repeat 0 0;
    background-size: 75%;
    vertical-align: middle;
}


.md {
  text-align: justify;
  display: inline-block;
  padding: 0 15px;
  font-size: 18px;
  width: 97%;
  border-radius: 10px;
  border: 2px solid #1c8e53;}

.md::before {
    display: inline-block;
    width: 45px;
    height: 45px;
    content: "";
    background: url("md.png") no-repeat 0 0;
    background-size: 75%;
    vertical-align: middle;
}


.tm {
  display: inline-block;
  padding: 0 15px 0 0;
  font-size: 18px;
  border-radius: 10px;
  background-color: #1c8e53;
  color: white;
  font-weight: bold;
}

.pagination .print-page{
display:none;
}