@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

@import url('http://fonts.googleapis.com/css?family=Lato:100,300,400|Raleway:100,300,400,500,600,700|Open+Sans:100,300,400,500,600');


.chatballon {
  display: none;
  font-size: 14px;
  border-radius: 12px; 
  border: 1px solid #fff;
  max-width: 300px;
  }

  .chatall ::-webkit-scrollbar-track {
    background-color: white;
  }
  .chatall ::-webkit-scrollbar {
    width: 8px;
  }

  
  .chattitle {
    background: radial-gradient(
      100% 70% at 0% 0%,
      rgba(255, 255, 255, 0.425) 0%,
      rgba(255, 255, 255, 0.103) 80%
    );
    background-color: rgb(79, 62, 104);
    opacity: 0.9;
  color: white; 
  padding: 14px; 
  border-radius: 12px 12px 0px 0px;
  text-align: center;
  }

.chatmessage {
padding: 16px 12px;
background-color: white;
overflow-y: scroll;
height: 100%;
display: flex;
justify-content: space-between;
flex-direction: column;
max-height: 300px;
}

#mCSB_1_container{
 position: relative;
 top: 0px !important; 
}

.chatmessage .question {
  background: radial-gradient(
    100% 70% at 0% 0%,
    rgba(255, 255, 255, 0.425) 0%,
    rgba(255, 255, 255, 0.103) 80%
  );
  background-color: rgb(79, 62, 104);
  color: white;
  margin-bottom: 5px;
  box-sizing: border-box;
	border-radius: 1.125rem 1.125rem 0 1.125rem;		
  clear: both;
  float: right;
  text-align: right;
  padding: 8px;

}

.chatmessage .ans {
  margin-bottom: 5px;
	border-radius: 1.125rem 1.125rem 1.125rem 0;		
  box-sizing: border-box;
  background: radial-gradient(
    100% 70% at 0% 0%,
    rgba(255, 255, 255, 0.425) 0%,
    rgba(255, 255, 255, 0.103) 80%
  );
  background-color: #664499;
  clear: both;
  float: left;
  padding: 8px;
  color: white;
  text-align: left;

}

.chatinput .message-box{
display: flex;
flex-direction: row;
padding: 8px;

}

.chatinput {
background-color: white;
border-radius: 0px 0px 12px 12px;
bottom: 0;
}



.chatinput input {
width: 75%;
border-radius: 10px;
margin: 1px 1px 0px 10px;
padding:8px;
font-family: "Raleway", Arial, sans-serif;
font-weight: 300;
font-size: 13px;
background-color: #efefef;
border: 1px solid #d4d4d4;
display: flex;
flex-direction: row;
}

.chatbutton {
background-color: #4f3e68; 
border-radius: 20px; 
padding: 10px 15px; 
cursor: pointer; 
color: #fff;
width: 200px;
margin-top: 10px;
margin-bottom: 10px;
text-align: center;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

.discordButton
{
  position: fixed; 
  z-index: 9999999999999999999; 
  bottom: 0; 
  left: 10px;
  font-family: "Raleway", Arial, sans-serif;
  font-weight: 300;
  font-size: 15px;
  border-radius: 50%;
    
}
.chatall {
position: fixed; 
z-index: 9999999999999999999; 
bottom: 0; 
right: 10px;
font-family: "Raleway", Arial, sans-serif;
font-weight: 300;
font-size: 15px;
}

.chatsendbutton {
  color: #4f3e68; 
  cursor: pointer;
  border: none;
  margin-left: 8px;
  font-size: 1.5rem;
}


.kapat {
position: absolute;
right: 8px;
top: 6px;
font-size: 13px;
border: 1px solid #fff;
border-radius: 99px;
padding: 2px 5px 2px 5px;
color: white;
font-size: 10px;
z-index: 10;
cursor: pointer;
}

@media screen and (max-width:500px) {
  .mobile-chat{
    display: none;
  }
  .chatbutton{
    width: auto;
  }
}