/*
general
*/
*{
   padding: 0;
   margin: 0;
   transition: all 250ms;
}
body{
   background-color: rgb(228, 228, 228);
   line-height: 1.4;
}
textarea{
   width: 300px;
   height: 100px;
}
.chatbot{
   max-width: 1000px;
   margin: 0 auto;
   background-color: white;
   padding: 60px;
   height: 100%;
}
.textbubbel, .textbubbel-a, .textbubbel-a_block, #test{
   transition:all 250ms;

}
.textbubbel{
   border: 1px solid #d4e3e8;
   padding: 12px 15px;
    border-radius: 10px;
   max-width: 50%;
   display: inline-block;
   border-top-left-radius: 0px;
   position: relative;
   margin-left: 40px;
}
.textbubbel::before{
   background:url('https://namenproject.antwerpenherdenkt.be/images/antwerpenbot_logo.svg');
   background-size: 30px 30px;
   background-position: center center;
   background-repeat:no-repeat;
   content: " ";
   display: block;
   height: 30px;
   position: absolute;
   left:-40px; 
   top:1px;
   width: 30px;
   z-index: 2;
}
.textbubbel a{
   color: #083D47;
}
.intro .textbubbel{
   margin-bottom: 10px;
}
.textbubbel-a_block{
   width: 100%;
   text-align: right;
}
.textbubbel-a{
   padding: 12px 15px;
   border: 1px solid #d4e3e8;
   border-radius: 10px;
   display: inline-block;
   margin-left: auto;
   margin-right: 0;
   position: relative;
   margin-bottom: 12px;
   max-width: 400px;
   border-top-right-radius: 0px;
   background-color: #1c4d54;
   color: white;
}
.textbubbel-a a{
   color: white;
}
.field{
   border: 1px solid #d4e3e8;
   background-color: white;
   color: #1c4d54;
}
.clickable{
   cursor: pointer;
}
a.clickable {
   text-decoration: none;
}
input.textbubbel-a{
   width: 100%;
   max-width: 300px;
}

/*
utitlity
*/
.disableclick{
   pointer-events: none;
}
.disableclick.textbubbel-a{
   background-color: #edf2f5;
   color: black;
}
.remove{
   display: none;
}
.error_bot_message{
   margin: 0;
   padding: 0;
   color: red;
   margin-bottom: -10px;
}

.arrowsendbg{
   background-image: url('https://namenproject.antwerpenherdenkt.be/images/send-white.svg');
   background-size: 16px;
   background-position: right 14px top 15px;
   background-repeat: no-repeat;
   padding-right: 30px;
   background-color: #083D47;
   cursor: pointer;
}

/*
responsive
*/
@media only screen and (max-width: 600px) {
   .textbubbel, .textbubbel-a{
      max-width: 80%;
   }
   .chatbot{
      padding: 60px 0px;
   }
}