.typing {
	position: relative;
   width: 40px;
   margin: 0px 20px;
   background-color: #eee;
   border: 0px solid #333;
   border-radius: 12px;
   padding: 8px;
   display: flex;
   width: 30px;
   border-radius: 100px;
   padding: 15px;
}
.right .message:before {
   right:-2px;
}
.right .message:after {
   right:-8px;
}
.typing:before, .left .message:before {
   left: -4px;
}
.typing:after, .left .message:after {
   left: -10px;
}
.column2 .message:before, .column2 .message:after {
   /*position: relative;*/
   /*background: linear-gradient(to bottom, #00D0EA 0%, #0085D1 100%);*/
   background-color: rgb(00,170,221);
/*   background-image: linear-gradient(to bottom, #00D0EA 0%, #0085D1 100%);
   background-attachment: fixed;
   background-size: 100vw 100vh;
   background-attachment: fixed;*/
}
.typing:before, .typing:after, .message:before, .message:after {
   content: ' ';
   position: absolute;
   bottom: -4px;
   width: 18px;
   height: 18px;
   background-color: #eee;
   border: 0px solid #333;
   -webkit-border-radius: 12px;
   -moz-border-radius: 12px;
   border-radius: 12px;
}
.typing:after, .message:after {
   width: 8px;
   height: 8px;
   bottom: -10px;
   -webkit-border-radius: 7px;
   -moz-border-radius: 7px;
   border-radius: 7px;
}
@keyframes typing {0%{background-color:#c5c6ca;}50%{background-color:#9e9ea1;}100%{background-color:#c5c6ca;}}
.typing>div {
   width: 8px;
   margin-left:1px;
   height: 8px;
   bottom: -16px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   background-color: #c5c6ca;
   animation: typing 1s infinite;
}
.typing>div:nth-child(1) {animation-delay:0.333s;}
.typing>div:nth-child(2) {animation-delay:0.666s;}
.typing>div:nth-child(3) {animation-delay:0.0s;}
#connector {display:none;}
.bubble {
   position: relative;
    width: 300px;
    text-align: center;
    line-height: 1.4em;
    background-color: #fff;
    border: 8px solid #333;
    border-radius: 30px;
    font-family: sans-serif;
    padding: 20px;
    font-size: large;
    margin-bottom:40px;
 }
 .filler {
   position: relative;
    width: 300px;
   border: 0;margin:0;
 }
 
 .bubble:before,
 .bubble:after {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
 }
 .speech_l {align-self: flex-start;}
 .speech_r {align-self: flex-end;}
 .speech_c  {align-self: center;}
 .speech_l:before {
    left: 30px;
    bottom: -50px;
    border: 25px solid;
    border-color: #333 transparent transparent #333;
 }
 .speech_l:after {
    left: 38px;
    bottom: -30px;
    border: 15px solid;
    border-color: #fff transparent transparent #fff;
 }
 .speech_r:before {
    left: 270px;
    bottom: -50px;
    border: 25px solid;
    border-color: #333 #333 transparent transparent;
 }
 .speech_r:after {
    left: 282px;
    bottom: -30px;
    border: 15px solid;
    border-color: #fff #fff transparent transparent;
 }
 .speech_c:before {
    left: 100px;
    bottom: -50px;
    border: 25px solid;
    border-color: #333 transparent transparent transparent;
 }
 .speech_c:after {
    left: 110px;
    bottom: -30px;
    border: 15px solid;
    border-color: #fff transparent transparent transparent;
 }
 
 #chapter4_cc {
	width:600px;
	font-family: Helvetica, Arial, sans-serif;
	display: flex;
	flex-direction: column;
	position: relative;
	width: 80%;
	max-width: 860px;
	margin: 100px auto;
	padding:0px 0px 100px 100px;
 }
 .c4_parallel {
    display: flex;
    flex-direction: row;
 }
 .chatcontainer {
    font-family: Helvetica, Arial, sans-serif;
    display: flex;
    width:100%;
 }
 .chat {
   width: 300px;
   border: 0;
   display: flex;
   flex-direction: column;
   /*padding: 10px;*/
 }
 
 .messages {
   display: none;
   flex-direction: column;
   /*margin:20px 0px;*/
   width:100%;
 }
 
 .message {
   border-radius: 20px;
   padding: 8px 15px;
   margin-top: 5px;
   margin-bottom: 20px;
   display: inline-block;
   text-align:left;
 }
 
 .column1 {
   align-items: flex-start;
 }
 
 .column1 .message {
   margin-right: 25%;
   background-color: #eee;
   position: relative;
 }
 
 .column2 {
   align-items: flex-end;
 }
 
 .column2 .message {
   color: white;
   margin-left: 25%;
   /*background-image: linear-gradient(to bottom, rgba(00,208,234,1) 0%, rgba(00,133,209,1) 100%);
   background-image: -webkit-linear-gradient(to bottom, rgba(00,208,234,1) 0%, rgba(00,133,209,1) 100%);
   background-size: 100vw 100vh;
   background-attachment: fixed;*/
   background-color: rgb(00,170,221);
   position: relative;
 }