/* ==--------------------------== */
/* PBH BOT                    */
/* ==--------------------------== */
/* 18 Julho 2022 */

.mytext{
    border:0;
    padding:10px;
    background: #ffffff;
}
.text{
    width:100%;
    display:flex;
    flex-direction:column;    
}
.text > p:first-of-type {
    width:100%;
    margin-top:0;
    margin-bottom:auto;
    line-height: 16px;
    font-size: 14px;
    font-family: var(--font-medium),Arial,sans-serif;
    color: #333;
    line-height: normal;
}
.text > p:last-of-type {
    width:100%;
    text-align:right;
    color:silver;
    margin-bottom: -5px;
    margin-top:auto;
}
.text > p:last-of-type small {
    color:#666; 
    font-size: 0.70em;
}
.text-l{
    float:left;
    padding:5px;
    background-color: #fff;
    word-wrap: break-word;
    overflow: hidden;
    border-radius: 0 8px 8px 8px;
}  
.text-r{
    /*float:right;*/
    word-wrap: break-word;
    overflow: hidden;    
}

.avatar{
    display:flex;
    justify-content:center;
    align-items:center;    
    padding-right:0;
    background-color: transparent;
}

.img-circle {
    border-radius: 0;
}

.avatarw{
    /*display: none;
    padding-bottom: 10px;*/
    text-align: center; 
    margin: 1px 0px 5px 0px;
}

.macro{
    margin-top: 8px;
    width: 100%;
    border-radius:5px;
    display:flex;
}

.macrow{
    width:100%;
    border-radius:5px;
    padding:8px;
    display: flex;
    color: #333;
    text-align: justify;
    font-family: var(--font-medium),Arial,sans-serif;
    font-size: 14px;
    line-height: normal;
}

.msj-rta{
    float: right;
    background: #ffffff;
    font-family: var(--font-medium),Arial,sans-serif;    
}

.msj-rta-pbh{
    background: #C1E0B7;
    border-radius: 8px 8px 0 8px;
    width: 90%;    
    display: inline-block;
    margin: 10px 0px 0px 0px;
    padding: 5px;
}

.msj{
    float:left;
    background:transparent;
}
.msjw{
    float:left;
    background: #f7f7f7;
}

.frame{
    background:#e9e9e9;
    overflow:auto;
    padding:0;
    position:fixed;
    right: 105px;
    bottom: 0px;
    width: 341px;
    z-index: 999;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border: 2px solid #fff;
    -webkit-box-shadow: 0px -1px 8px 0px rgba(161,161,161,0.7);
    -moz-box-shadow: 0px -1px 8px 0px rgba(161,161,161,0.7);
    box-shadow: 0px -1px 8px 0px rgba(161,161,161,0.7);
}

.panel-heading{
    cursor: pointer;
}

.panel-primary > .panel-heading {
    font-size: 16px;
}

.innerframe{
    height:475px;
}

.innerframe > div:last-of-type{
    position:absolute;
    bottom:5px;
    width:96%;
    display:flex;
    margin-left: 5px;
}

#messages {
    width:100%;
    list-style-type: none;
    padding: 0px 10px 0px 10px !important;
    position:absolute;
    top:50px;
    bottom:50px;
    /*display:flex;*/
    flex-direction: column;
    overflow-y: auto;
    height: 438px;
}
#messagesw {
    width:100%;
    list-style-type: none;
    padding:18px;
    position:absolute;
    top:50px;
    bottom:50px;
    display:flex;
    flex-direction: column;
    overflow-y: initial;
    height: 400px;
}
.msj:before{
    width: 0;
    height: 0;
    content:"";
    top:-5px;
    left:-14px;
    position:relative;
    border-style: solid;
    border-width: 0;
    border-color: transparent whitesmoke transparent transparent;
}
.msj-rta:after{
    /*width: 0;
    height: 0;
    content:"";
    top:-5px;
    left:14px;
    position:relative;
    border-style: solid;
    border-width:  13px 13px 0 0;
    border-color: #ffffff transparent transparent transparent;*/
} 
 
input:focus{
    border-bottom: 1px solid #C1E0B7;
    /*outline: none;*/
}   
   
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #ccc;
}
::-moz-placeholder { /* Firefox 19+ */
    color: #ccc;
}
:-ms-input-placeholder { /* IE 10+ */
    color: #ccc;
}
:-moz-placeholder { /* Firefox 18- */
    color: #ccc;
}

.icon-move-dow {
  /* background-repeat: no-repeat;
    background-size: 100%;
    width: 35px;
    height: 33px;
    position: absolute;
    left: 157px;
    margin-top: 4px;*/
    cursor: move;
    padding: 12px 6px 0px 6px;
}

.button-chat {
  margin-top: 5px;
  margin-bottom: 0px;
  margin-left:auto;
  margin-right:auto;
  width: 100%;
  font-size: 14px !important;
  display: block;
  font-family: DINPro-Medium, Arial, Sans-Serif !important;
}

a.link-chat {
  /*text-decoration: none;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
  border: none;*/
  text-align: center;
  margin-top: 5px;
  margin-bottom: 0px;
  margin-left:auto;
  margin-right:auto;
  width: 8%;
  display: block;
  font-family: DINPro-Medium, Arial, Sans-Serif !important;
  background: #CBDB2A;
  color: #006F3C;
  text-transform: uppercase;
  padding: 5px 5px;  
  border-radius: 8px;
  font-size: 14px;
}

a.link-chat:hover {
    background: #C1E0B7;
    color: #006F3C;
}

.button_enviar{
    padding: 7px 0px 0px 4px;
}

.button_enviar:hover, .Text2Speech:hover{
    cursor: pointer;	
    opacity: 0.8;
}

.assistent {
    position: fixed;
    bottom: 10px;
    right: 10px;
    background-size: 100%;
    z-index: 497;
    cursor: pointer;    
    background-repeat: no-repeat;
    opacity: 1;
	/*display: block !important;
    animation-duration: 0.8s;
    animation-fill-mode: both;
    animation-name: pulse;*/
}

/*@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}*/

#img_close, #img_minimize{
  float: right;
  margin-left: 5px;
  margin-top: 5px;
}

#messages .macrow .textw p{
	font-family: var(--font-medium),Arial,sans-serif;
	color: #333;
	font-size: 14px;
	/* line-height: normal */
}

/*#img_close:hover, #img_minimize:hover{
  background-color: #168942;  
}*/

.chat_hover:hover{
    background:#676470;            
	padding: 10px 1px 10px 0px;
}
	
/* --------------------- */
/* Media queries         */

@media (max-width: 800px) {
    .frame{
		right: 8px;
		width: 83%;
    }
    .innerframe{
		margin-top: 1px;
		padding-top: 1px;
		height:416px;
	}	
    .panel-primary > .panel-heading {
		font-size: 14px;
		padding: 5px;    
    }
    .assistent {
		width: 200px;
    }
    #messages {
		top: 36px;
		height: 380px;
	}
	#img_close, #img_minimize{
		float: right;
		margin-left: 5px;
		margin-top: 2px;
		width: 15px;
	}
	/*.macro {
	    margin-top: 5px;
	    width: 95%;
	    border-radius: 5px;
	    padding: 1px;
	    display: flex;
 	}*/
	#minimizar{	
		bottom: 92px !important;		
	}
	#strong_nome_assist{
		left: 10% !important;
	}
	#main-chat:before {
		top: -3px !important;
    }
}

.link-chat-list:hover{
    display: block;
    background: #C1E0B7;
    color: #006F3C !important;
}

#minimizar{	
    position: fixed;
    bottom: 98px;
    right: 10px;
    z-index: 497;
    cursor: pointer;
	/*
	opacity: 0.9;
    color: #ffffff;
	font-size: 18px;
	font-family: 'FontAwesome';
    content: "\f057";
	background-size: 100%;
	background-repeat: no-repeat;
	float: right;
	*/
}

#minimizar:hover,
#minimizar:focus,
#minimizar:active {
	opacity: 0.9;
}

#mostrar{
    position: fixed;
    bottom: 10px;
    right: 10px;
    background-size: 100%;
    z-index: 2;
    cursor: pointer;    
    background-repeat: no-repeat;
    opacity: 1;
}

.Text2Speech{ 
	padding: 5px 10px 0px 0px;
	opacity: 0.5;
}

#strong_nome_assist{
	position: relative;
	left: 7%;
}

/* The side navigation menu */
.sidenav {
    /*height: 100%;*/ /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    /*top: 0;
    left: 0;*/
    background-color: var(--third-color);
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 42px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    border-bottom-right-radius: 8px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    -webkit-box-shadow: 0px -1px 8px 0px rgba(161,161,161,0.7);
    -moz-box-shadow: 0px -1px 8px 0px rgba(161,161,161,0.7);
    box-shadow: 0px -1px 8px 0px rgba(161,161,161,0.7);
}

/* The navigation menu links */
.sidenav a {
    padding: 0px 0px 5px 8px;
    text-decoration: none;
    color: #ffffff;
    display: block;
    transition: 0.3s;
    width: min-content;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: #C1E0B7;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: -8px;
    /* right: 25px; */
    font-size: 36px;
    /* margin-left: 50px; */
    /* padding-bottom: 8px; */
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */

#main-chat:before {
    /*transition: margin-left .5s;
     position: absolute;
    color: #ffffff;
    height: 0px;
    color: #fff;
    font: normal 28px/55px "responsivenav";
    padding: 3px 0px 0px 7px;*/
    left: 2%;
    top: .1em;
    top: 2px;
    font-family: 'FontAwesome';
    font-size: 25px;
    color: white;
    position: absolute;
    content: "\f0c9";
}

.altocontraste-chat{
	position: relative !important;
	width: 105px !important;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}    
}