<!doctype html>

<html>

    <head>

    	<meta charset="utf-8">

		<meta content=" width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name='viewport'>



        <title>Facebook Style Popup Design</title>

        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

        <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

        <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

         <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>

         <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>

         <script src="https://cdn.jsdelivr.net/npm/@shopify/draggable@1.0.0-beta.2/lib/draggable.min.js"></script>

        



        <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

        <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

        <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> -->

         <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> -->

         <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script> -->

         <script src="https://draggabilly.desandro.com/draggabilly.pkgd.js"></script>

         

        <style type="text/css">

        	html {

			  position: relative;

			  margin: 0;

			  padding: 0;

			  height: 100vh;

			  width: 100vw;

			  overflow: hidden;

			  -webkit-font-smoothing: subpixel-antialiased;

			  -moz-osx-font-smoothing: subpixel-antialiased;

			}

			html body {

			  position: relative;

			  height: 100vh;

			  width: 100vw;

			  margin: 0;

			  padding: 0;

			  font-size: 0;

			  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", "Helvetica Neue", sans-serif;

			  line-height: 1.5;

			  overflow: hidden;

			  -webkit-transition: none;

			  -moz-transition: none;

			  -o-transition: none;

			  transition: none;

			}

			html #app {

			  position: relative;

			  display: -webkit-flex;

			  display: -webkit-box;

			  display: -moz-box;

			  display: flex;

			  height: 100vh;

			  width: 100vw;

			  flex-flow: row wrap;

			  font-size: 0;

			  overflow: auto;

			  z-index: 1;

			  justify-content: center;

			}

			* {

			  margin: 0;

			  padding: 0;

			  font-family: inherit;

			  background: none;

			  border: none;

			  -webkit-box-sizing: border-box;

			  -moz-box-sizing: border-box;

			  -o-box-sizing: border-box;

			  box-sizing: border-box;

			  -webkit-transition: all cubic-bezier(0.22, 0.61, 0.36, 1) 200ms;

			  -moz-transition: all cubic-bezier(0.22, 0.61, 0.36, 1) 200ms;

			  -o-transition: all cubic-bezier(0.22, 0.61, 0.36, 1) 200ms;

			  transition: all cubic-bezier(0.22, 0.61, 0.36, 1) 200ms;

			}

			.grid {

			  display: -webkit-flex;

			  display: -webkit-box;

			  display: -moz-box;

			  display: flex;

			  flex-flow: row wrap;

			  justify-content: flex-start;

			  align-items: center;

			}

			.grid.cards > *,

			.grid.spacebetween > * {

			  margin: 1rem;

			}

			.grid.row-wrap {

			  flex-flow: row wrap;

			}

			.grid.row-nowarp {

			  flex-flow: row nowrap;

			}

			.grid.column-wrap {

			  flex-flow: column wrap;

			}

			.grid.column-nowrap {

			  flex-flow: column nowrap;

			}

			.grid.reverse-row-wrap {

			  flex-flow: row wrap;

			}

			.grid.reverse-row-nowarp {

			  flex-flow: row nowrap;

			}

			.grid.reverse-column-wrap {

			  flex-flow: column wrap;

			}

			.grid.reverse-column-nowrap {

			  flex-flow: column nowrap;

			}

			.grid.adapt {

			  flex-grow: 1;

			}

			.grid.adapt-items > * {

			  flex-grow: 1;

			}

			.grid.decrease {

			  flex-shrink: 1;

			}

			.grid.decrease-items > * {

			  flex-shrink: 1;

			}

			.grid.dont-adapt {

			  flex-grow: 0;

			}

			.grid.dont-adapt-items > * {

			  flex-grow: 0;

			}

			.grid.dont-decrease {

			  flex-shrink: 0;

			}

			.grid.dont-decrease-items > * {

			  flex-shrink: 0;

			}

			.grid.flex-start-content {

			  justify-content: flex-start;

			  align-content: flex-start;

			  align-items: flex-start;

			}

			.grid.flex-start-content-self {

			  justify-content: flex-start;

			  align-content: flex-start;

			  align-self: flex-start;

			}

			.grid.center-content {

			  justify-content: center;

			  align-content: center;

			  align-items: center;

			}

			.grid.center-content-self {

			  justify-content: center;

			  align-content: center;

			  align-items: center;

			}

			.grid.stretch-items {

			  align-items: stretch;

			}

			.single > *,

			.single {

			  flex: 1 0 100%;

			}

			.halfs > *,

			.half {

			  flex-basis: calc(100% / 2);

			}

			.thirds > *,

			.third {

			  flex-basis: calc(100% / 3);

			}

			.fourths > *,

			.fourth {

			  flex-basis: calc(100% / 4);

			}

			.fifths > *,

			.fifth {

			  flex-basis: calc(100% / 5);

			}

			.sixths > *,

			.sixth {

			  flex-basis: calc(100% / 6);

			}

			.sevenths > *,

			.seventh {

			  flex-basis: calc(100% / 7);

			}

			.eigths > *,

			.eigth {

			  flex-basis: calc(100% / 8);

			}

			.disable-marker {

			  -webkit-touch-callout: none;

			  -webkit-user-select: none;

			  -khtml-user-select: none;

			  -moz-user-select: none;

			  -ms-user-select: none;

			  user-select: none;

			}

			span,

			input,

			button,

			a,

			q,

			p,

			b,

			pre,

			code,

			i,

			textarea,

			h1,

			h2,

			h3,

			h4,

			h5,

			h6 {

			  font-weight: 400;

			}

			span,

			input,

			button,

			a,

			q,

			p,

			b,

			pre,

			code,

			i,

			textarea,

			label {

			  font-size: 1rem;

			}

			span,

			input,

			q,

			p,

			b,

			pre,

			code,

			i,

			label {

			  -webkit-transition: none;

			  -moz-transition: none;

			  -o-transition: none;

			  transition: none;

			}

			h1,

			h2,

			h3,

			h4,

			h5,

			h6 {

			  text-align: center;

			}

			h1 {

			  font-size: 3rem;

			}

			h2 {

			  font-size: 2rem;

			}

			h3 {

			  font-size: 1.75rem;

			}

			h4 {

			  font-size: 1.5rem;

			}

			h5 {

			  font-size: 1.25rem;

			}

			h6 {

			  font-size: 1.15rem;

			}

			.subtitle {

			  position: relative;

			  color: rgba(0,0,0,0.25);

			  line-height: 1;

			}

			.subtitle-h1 {

			  font-size: 2.1rem;

			  top: -0.21rem;

			}

			.subtitle-h2 {

			  font-size: 1.2rem;

			  top: -0.12rem;

			}

			.subtitle-h3 {

			  font-size: 0.875rem;

			  top: -0.0875rem;

			}

			.subtitle-h4 {

			  font-size: 0.6rem;

			  top: -0.06rem;

			}

			.subtitle-h5 {

			  font-size: 0.5rem;

			  top: -0.05rem;

			}

			.subtitle-h6 {

			  font-size: 0.46rem;

			  top: -0.046rem;

			}

			hr {

			  width: calc(100% - 2rem);

			  margin: 2rem 1rem;

			  border: none;

			  border-bottom: solid 1px;

			}

			.card,

			.cards > * {

			  padding: 1rem;

			  flex: 0 0 auto;

			  box-shadow: 0 0.1rem 1rem rgba(0,0,0,0.1), 0 0 0.5rem rgba(0,0,0,0.1);

			  z-index: 2;

			  overflow: auto;

			  border-radius: 0.2rem;

			  background-color: #fff;

			}

			.card.hoverable:hover {

			  transform: scale(1.03);

			  box-shadow: 0 0.25rem 2rem rgba(0,0,0,0.25), 0 0.1rem 0.5rem rgba(0,0,0,0.15);

			  z-index: 3;

			}

			.card.clickable {

			  cursor: pointer;

			}

			.card.clickable:hover {

			  transform: scale(1.03);

			  box-shadow: 0 0.25rem 2rem rgba(0,0,0,0.25), 0 0.1rem 0.5rem rgba(0,0,0,0.15);

			  z-index: 3;

			}

			.card.clickable:active,

			.card.clickable:focus {

			  transform: scale(1.06);

			  box-shadow: 0 0.4rem 3rem rgba(0,0,0,0.35), 0 0.1rem 0.5rem rgba(0,0,0,0.2);

			  z-index: 3;

			}

			.cards.hoverable > *:hover {

			  transform: scale(1.03);

			  box-shadow: 0 0.25rem 2rem rgba(0,0,0,0.25), 0 0.1rem 0.5rem rgba(0,0,0,0.15);

			  z-index: 3;

			}

			.cards.clickable > * {

			  cursor: pointer;

			}

			.cards.clickable > *:hover {

			  transform: scale(1.03);

			  box-shadow: 0 0.25rem 2rem rgba(0,0,0,0.25), 0 0.1rem 0.5rem rgba(0,0,0,0.15);

			  z-index: 3;

			}

			.cards.clickable > *:active,

			.cards.clickable > *:focus {

			  transform: scale(1.06);

			  box-shadow: 0 0.4rem 3rem rgba(0,0,0,0.35), 0 0.1rem 0.5rem rgba(0,0,0,0.2);

			  z-index: 3;

			}

			.cards.fixed-height > * {

			  position: relative;

			  overflow: auto;

			}

			/*.cards.halfs > *,

			.cards .half {

			  flex-basis: calc(100% / 2 - 2rem);

			}

			.cards.thirds > *,

			.cards .third {

			  flex-basis: calc(100% / 3 - 2rem);

			}

			.cards.fourths > *,

			.cards .fourth {

			  flex-basis: calc(100% / 4 - 2rem);

			}

			.cards.fifths > *,

			.cards .fifth {

			  flex-basis: calc(100% / 5 - 2rem);

			}

			.cards.sixths > *,

			.cards .sixth {

			  flex-basis: calc(100% / 6 - 2rem);

			}

			.cards.sevenths > *,

			.cards .seventh {

			  flex-basis: calc(100% / 7 - 2rem);

			}

			.cards.eigths > *,

			.cards .eigth {

			  flex-basis: calc(100% / 8 - 2rem);

			}*/

			.topic {

			  position: relative;

			  display: -webkit-flex;

			  display: -webkit-box;

			  display: -moz-box;

			  display: flex;

			  margin: 1rem;

			  flex-flow: row wrap;

			  justify-content: center;

			  align-content: center;

			  align-items: center;

			  text-align: center;

			}

			.topic > * {

			  flex: 1 0 100%;

			}

			.topic h3 {

			  font-weight: 100;

			  text-transform: uppercase;

			}

			.checkpoint {

			  display: -webkit-flex;

			  display: -webkit-box;

			  display: -moz-box;

			  display: flex;

			  margin: 1rem;

			  flex: 1 1 100%;

			  justify-content: center;

			  align-content: center;

			  align-items: center;

			}

			.checkpoint:before,

			.checkpoint:after {

			  content: '';

			  margin: 0 1rem;

			  flex: 1 1 auto;

			  border-bottom: solid 0.1rem;

			}

			.weekly-todos {

			  flex-flow: row nowrap;

			  flex: 1 1 100%;

			}

			.weekly-todos > * {

			  height: 100%;

			  flex: 1 0 calc(100% / 7 - 2rem);

			}

			.weekly-todos > * > * {

			  margin: 0.5rem !important;

			  flex: 1 1 auto;

			}

			.sortable-animation > * {

			  transform: translate3d(0, 0, 0);

			}

			.sortableCards-move {

			  -webkit-transition: transform cubic-bezier(0.22, 0.61, 0.36, 1) 500ms;

			  -moz-transition: transform cubic-bezier(0.22, 0.61, 0.36, 1) 500ms;

			  -o-transition: transform cubic-bezier(0.22, 0.61, 0.36, 1) 500ms;

			  transition: transform cubic-bezier(0.22, 0.61, 0.36, 1) 500ms;

			  background-color: #f00;

			}

			.sortableCards-enter,

			.sortableCards-leave-to {

			  transition: 5s;

			  opacity: 0;

			}

			.draggable-source--is-dragging {

			  opacity: 0.3;

			}

			.draggable-container--over {

			  animation: draggablePulseBg cubic-bezier(0.22, 0.61, 0.36, 1) 1500ms infinite;

			}

			.draggable-mirror {

			  position: absolute;

			  padding: 1rem;

			  background-color: #fff;

			  -webkit-transition: all 0ms;

			  -moz-transition: all 0ms;

			  -o-transition: all 0ms;

			  transition: all 0ms;

			  overflow: auto;

			  box-shadow: 0 0.4rem 3rem rgba(0,0,0,0.35), 0 0.1rem 0.5rem rgba(0,0,0,0.2);

			  border-radius: 0.2rem;

			  z-index: 10;

			  cursor: move;

			  -webkit-transition: top 0ms left 0ms;

			  -moz-transition: top 0ms left 0ms;

			  -o-transition: top 0ms left 0ms;

			  transition: top 0ms left 0ms;

			}

			.draggable-source--placed {

			  animation: placedItem cubic-bezier(0.22, 0.61, 0.36, 1) 0.5s;

			}

			.sortableCards-enter-active,

			.sortableCards-leave-to {

			  opacity: 0;

			}

			.sortableCards-leave-active {

			  position: absolute;

			}

			@-moz-keyframes draggablePulseBg {

			  0% {

			    background-color: transparent;

			    outline: solid 0.1rem transparent;

			  }

			  35% {

			    background-color: rgba(0,0,0,0.05);

			    outline: solid 0.1rem rgba(0,0,0,0.1);

			  }

			  100% {

			    background-color: transparent;

			    outline: solid 0.1rem transparent;

			  }

			}

			@-webkit-keyframes draggablePulseBg {

			  0% {

			    background-color: transparent;

			    outline: solid 0.1rem transparent;

			  }

			  35% {

			    background-color: rgba(0,0,0,0.05);

			    outline: solid 0.1rem rgba(0,0,0,0.1);

			  }

			  100% {

			    background-color: transparent;

			    outline: solid 0.1rem transparent;

			  }

			}

			@-o-keyframes draggablePulseBg {

			  0% {

			    background-color: transparent;

			    outline: solid 0.1rem transparent;

			  }

			  35% {

			    background-color: rgba(0,0,0,0.05);

			    outline: solid 0.1rem rgba(0,0,0,0.1);

			  }

			  100% {

			    background-color: transparent;

			    outline: solid 0.1rem transparent;

			  }

			}

			@keyframes draggablePulseBg {

			  0% {

			    background-color: transparent;

			    outline: solid 0.1rem transparent;

			  }

			  35% {

			    background-color: rgba(0,0,0,0.05);

			    outline: solid 0.1rem rgba(0,0,0,0.1);

			  }

			  100% {

			    background-color: transparent;

			    outline: solid 0.1rem transparent;

			  }

			}

			@-moz-keyframes placedItem {

			  from {

			    transform: scale(1.065);

			    box-shadow: 0 0.25rem 2rem rgba(0,0,0,0.25), 0 0.1rem 0.5rem rgba(0,0,0,0.15);

			  }

			  to {

			    transform: scale(1);

			    box-shadow: 0 0.4rem 3rem rgba(0,0,0,0.35), 0 0.1rem 0.5rem rgba(0,0,0,0.2);

			  }

			}

			@-webkit-keyframes placedItem {

			  from {

			    transform: scale(1.065);

			    box-shadow: 0 0.25rem 2rem rgba(0,0,0,0.25), 0 0.1rem 0.5rem rgba(0,0,0,0.15);

			  }

			  to {

			    transform: scale(1);

			    box-shadow: 0 0.4rem 3rem rgba(0,0,0,0.35), 0 0.1rem 0.5rem rgba(0,0,0,0.2);

			  }

			}

			@-o-keyframes placedItem {

			  from {

			    transform: scale(1.065);

			    box-shadow: 0 0.25rem 2rem rgba(0,0,0,0.25), 0 0.1rem 0.5rem rgba(0,0,0,0.15);

			  }

			  to {

			    transform: scale(1);

			    box-shadow: 0 0.4rem 3rem rgba(0,0,0,0.35), 0 0.1rem 0.5rem rgba(0,0,0,0.2);

			  }

			}

			@keyframes placedItem {

			  from {

			    transform: scale(1.065);

			    box-shadow: 0 0.25rem 2rem rgba(0,0,0,0.25), 0 0.1rem 0.5rem rgba(0,0,0,0.15);

			  }

			  to {

			    transform: scale(1);

			    box-shadow: 0 0.4rem 3rem rgba(0,0,0,0.35), 0 0.1rem 0.5rem rgba(0,0,0,0.2);

			  }

			}







































			.left{

        		float: left;

        	}



        	.right{

        		float: right;

        	}



        	.clear:after{

        		clear: both;

        		content: '';

        		display: block;

        	}

        	html, body {

			  background: #f1f1f1;

			  margin: 0;

			  overflow: hidden;

			}



			.pdLR5{

				padding-left: 5px;

				padding-right: 5px;

			}



			.chat_container {

			  margin: auto;

			  position: relative;

			  width: 100vw;

			  height: 100vh;

			}

			.chat_container .chat {

			  position: absolute;

			  width: 100%;

			  height: calc(100% - 80px);

			  bottom: 0;

			  margin: auto;

			  left: 0;

			  right: 0;

			  background: white;

			  border-radius: 10px;

			  -webkit-transform: scale(0);

			          transform: scale(0);

			  box-shadow: 0 5px 60px 10px rgba(0, 0, 0, 0.12);

			  /*display: none;*/

			}

			/*.chat_container .chat::after {

			  content: '';

			  display: block;

			  position: absolute;

			  width: 0;

			  height: 0;

			  border-left: 15px solid rgba(0, 0, 0, 0);

			  border-bottom: 15px solid white ;

			  border-top: 15px solid rgba(0, 0, 0, 0);

			  border-right: 15px solid rgba(0, 0, 0, 0);

			  right: 20px;

			  top: -28px;

			}*/

			.chat_container .chat .textbox {

			  position: absolute;

			  width: 100%;

			  height: 50px;

			  box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.07);

			  bottom: 0;

			}

			.chat_container .chat .textbox .input {

			  width: 82%;

			  height: 35px;

			  display: block;

			  position: relative;

			  float: left;

			  margin-left: 10px;

			  border: none;

			  padding: 3px;

			  border-bottom: 2px solid rgba(0, 0, 0, 0.15);

			}

			.chat_container .chat .textbox .send {

			  position: absolute;

			  bottom: 0;

			  right: 0;

			  width: 50px;

			  height: 50px;

			  text-align: center;

			  line-height: 50px;

			  font-size: 40px;

			  color: #1E88E5;

			}



			.out-group-bubble{

				display: flex; 

				justify-content: flex-end;

			}



			.group-bubble{

				position: fixed;

				width: 65px;

			  	height: 65px;

				top: 50%;

				left: 0px;

				display: flex; 

				justify-content: flex-end;

			}



			.bubble {

			  width: 100%;

			  height: 100%;

			  border-radius: 50%;

			  /*position: absolute;*/

			  /*box-shadow: 0 0px 20px rgba(0, 0, 0, 0.19), 0 0px 6px rgba(0, 0, 0, 0.23);*/

			  background: white;

			  background-size: cover;

			  border: 2px solid transparent;

			  cursor: pointer;

			}



			.group-bubble-chat{

				display: none;

			}



			/*.bubble:hover {

			  transition: all 0.3s;

			  -webkit-transform: scale(1.1);

			          transform: scale(1.1);

			}*/



			.bubble__span {

			  position: absolute;

			  left: 70px;

			  background: #333;

			  border-radius: 10px;

			  padding: 5px;

			  color: white;

			  font-family: 'Roboto';

			  opacity: 0;

			}

			.group-bubble-chat:active,

			.bubble:active {

			  /*-webkit-transform: scale(1.2);

			          transform: scale(1.2);

			  transition: all 0.3s;*/

			}



			.chat-thread {

			  padding: 20px;

			  margin: 10px;

			  list-style: none;

			  overflow-x: hidden;

			}

			.chat-thread li {

			  position: relative;

			  clear: both;

			  display: inline-block;

			  padding: 10px 20px 10px 15px;

			  margin-bottom: 10px;

			  font-family: 'Roboto';

			  font: 14px;

			  border-radius: 25px;

			}

			.chat-thread .message-mit {

			  background: #1E88E5;

			  float: right;

			  color: white;

			}

			.chat-thread .message-dest {

			  background: #CFD8DC;

			  float: left;

			}

			.chat-thread .loading .material-icons {

			  color: rgba(200, 200, 200, 0.8);

			  font-size: 8px;

			  padding: 1px;

			  margin-bottom: 5px;

			}

			.chat-thread .loading .material-icons:nth-child(1) {

			  -webkit-animation: writing 1.2s infinite alternate;

			          animation: writing 1.2s infinite alternate;

			}

			.chat-thread .loading .material-icons:nth-child(2) {

			  -webkit-animation: writing 1.2s infinite 0.2s alternate;

			          animation: writing 1.2s infinite 0.2s alternate;

			}

			.chat-thread .loading .material-icons:nth-child(3) {

			  -webkit-animation: writing 1.2s infinite 0.3s  alternate;

			          animation: writing 1.2s infinite 0.3s  alternate;

			}



			/*.bouncein {

			  -webkit-animation: bounce 0.4s ease-out forwards 0.2s;

			          animation: bounce 0.4s ease-out forwards 0.2s;

			}



			.bounceout {

			  animation: bounce 0.25s ease-out forwards reverse;

			}*/



			@-webkit-keyframes bounce {

			  0% {

			    -webkit-transform: scale(0);

			            transform: scale(0);

			  }

			  60% {

			    -webkit-transform: scale(1.1);

			            transform: scale(1.1);

			  }

			  100% {

			    -webkit-transform: scale(1);

			            transform: scale(1);

			  }

			}



			@keyframes bounce {

			  0% {

			    -webkit-transform: scale(0);

			            transform: scale(0);

			  }

			  60% {

			    -webkit-transform: scale(1.1);

			            transform: scale(1.1);

			  }

			  100% {

			    -webkit-transform: scale(1);

			            transform: scale(1);

			  }

			}

			@-webkit-keyframes writing {

			  0% {

			    -webkit-transform: translateY(0px);

			            transform: translateY(0px);

			  }

			  50% {

			    -webkit-transform: translateY(5px);

			            transform: translateY(5px);

			  }

			  100% {

			    -webkit-transform: translateY(-5px);

			            transform: translateY(-5px);

			  }

			}

			@keyframes writing {

			  0% {

			    -webkit-transform: translateY(0px);

			            transform: translateY(0px);

			  }

			  50% {

			    -webkit-transform: translateY(5px);

			            transform: translateY(5px);

			  }

			  100% {

			    -webkit-transform: translateY(-5px);

			            transform: translateY(-5px);

			  }

			}



			.clicktoggle{

				display: block!important;

				animation: bounce 0.4s ease-out forwards 0.2s;

			}

			.haschoose{

				border: 2px solid black;

			}



			.haschoose::after {

			    content: '';

			    display: block;

			    width: 0;

			    height: 0;

			    border-left: 15px solid rgba(0, 0, 0, 0);

			    border-bottom: 15px solid rgba(0, 0, 0, 0);

			    border-top: 15px solid black;

			    border-right: 15px solid rgba(0, 0, 0, 0);

			    text-align: center;

			    margin: 0px auto 0;

			}



			.bubble-sub{

				width: 65px;

				height: 65px;

				position: fixed;

				z-index: 1;

				order: 0;

			}



			.bubble-sub figure{

				height: 100%;

			    width: 100%;

			    overflow: hidden;

			    margin: auto;

			    border-radius: 50%;

			    display: flex;

			    justify-content: center;

			}



			.position_unset{

				position: unset;

			}



			.position_fixed{

				position: fixed;

			}



			.none{

				display: none !important;

			}



			.z-index9{

				z-index: 9;

			}



			.order1{

				order: 1;

			}



        </style>

    </head>

    <body>

	    <div id="app">

			 <div class="out_chat_container">

	    	

	    	<div class="chat_container" style="background: red; padding: 0; ">	

	    		<div class="">

					<transition-group tag="div" name="sortableCards" class="grid single fourths flex-start-content disable-marker cards clickable" swappable>

						<div v-for="(card, index) in 3" :key="index" swapItem>

							

							<div class="bubble-sub">

						  		<div class="bubble"  style="background: yellow">

						  			<figure>

						  				<img src="images/img.jpg" style="display: block; height: 120%; width: 220%;">

						  			</figure>

						  		</div>

						  	</div>

							

						</div>

					</transition-group>

				</div>

				<div class="out-group-bubble">

					<div class="group-bubble">



					  	<div class="bubble-sub group-bubble-chat pdLR5" style="order: 0;">

					  		<div class="bubble"  style="background: blue">

					  			<figure>

					  				<img src="images/img.jpg" style="display: block; height: 120%; width: 220%;">

					  			</figure>

					  		</div>

					  	</div>



					  	<div class="bubble-sub">

					  		<div class="bubble">

					  			<figure>

					  				<img src="images/img.jpg" style="display: block; height: 120%; width: 220%;">

					  			</figure>

					  		</div>

					  	</div>



					  	<div class="bubble-sub">

					  		<div class="bubble" style="background: gray">

					  			<figure>

					  				<img src="images/img.jpg" style="display: block; height: 120%; width: 220%;">

					  			</figure>

					  		</div>

					  	</div>



					  	<div class="bubble-sub" >

					  		<div class="bubble" style="background: black">

					  			<figure>

					  				<img src="images/img.jpg" style="display: block; height: 120%; width: 220%;">

					  			</figure>

					  		</div>

					  	</div>



					  	<div class="bubble-sub">

					  		<div class="bubble"  style="background: yellow">

					  			<figure>

					  				<img src="images/img.jpg" style="display: block; height: 120%; width: 220%;">

					  			</figure>

					  		</div>

					  	</div>

					  	

					</div>

				</div>



				<div class="chat">

				    <ul class="chat-thread">

				      <li class="message-mit">Hi Codepen 1!</li>

				      <li class="message-dest">Hi, what are you going to do today?</li>

				      <li class="message-mit loading"><i class="material-icons">lens</i><i class="material-icons">lens</i><i class="material-icons">lens</i></li>

				    </ul>

				    <div class="textbox">

				    	<input class="input" type="text">

				    	<span class="send"><i class="material-icons">send</i></span>

				    </div>

			  	</div>

			</div>

	    </div>



			<!-- <h2 class="checkpoint">Swappable</h2>

			<div class="grid single flex-start-content halfs">

				<transition-group tag="div"

				name="sortableCards"

				class="grid single fourths flex-start-content disable-marker cards clickable sortable-animation" swappable>

					<div v-for="(card, index) in 3" :key="index" swapItem>

						<h3>{{ index+1 }}</h3>



					</div>

				</transition-group>

			</div> -->



		</div>



    </body>

    <script>

    	

		let myVue = new Vue({

			el: '#app',

			data: {

				coloredCards: [

					'rgb(0,175,100)',

					'rgb(0,175,125)',

					'rgb(0,175,150)',

					'rgb(0,175,175)',

					'rgb(0,175,200)',

					'rgb(0,175,225)',

					'rgb(0,175,250)',

				],

				weeklyTodos: {

					"monday": [{

						todo: 'Clean bedroom',

						color: '#ef9a9a',

					},{

						todo: 'clean living room',

						color: '#f48fb1',

					}],

					"tuesday": [{

						todo: 'Clean kitchen',

						color: '#ce93d8',

					},{

						todo: 'Take out trash',

						color: '#90caf9',

					},{

						todo: 'Try out cake recipe',

						color: '#80deea',

					}],

					"wednesday": [

					],

					"thursday": [{

						todo: 'Get done homework',

						color: '#80cbc4',

					}],

					"friday": [{

						todo: 'Learn for maths',

						color: '#a5d6a7',

					},{

						todo: 'Learn for chemistry',

						color: '#c5e1a5',

					}],

					"saturday": [{

						todo: 'Do this',

						color: '#e6ee9c',

					},{

						todo: 'Do that',

						color: '#ffe082',

					},{

						todo: 'Do whatever you said',

						color: '#ffcc80',

					}],

					"sunday": [{

						todo: 'Do nothing!',

						color: '#ffab91',

					}],

				}

			}

		})



		const swappable = new Draggable.Swappable(

			document.querySelectorAll('[swappable]'), {

				draggable: '[swapItem]',

				delay: 0,

			}

		)

		swappable.on('drag:start', () => {

			console.log('drag:start')

		})

		swappable.on('swappable:swapped', () => {

			console.log('drag:swapped')

		})

		swappable.on('drag:stop', () => {

			console.log('drag:stop')

		})

		swappable.on('drag:move', () => {

			console.log('drag:move')

		});





/////////////////////////////////////////////////////////////////////////





		$(".chat_container .group-bubble").draggable();



		$('.bubble-sub .bubble.active').draggable();

		 

		$("div.chat_container").on('click', 'div.bubble', function() {

			

		   	var sumChatHead = $('.chat_container .group-bubble .bubble').length;



			if($(this).hasClass('haschoose')){

				$('.bubble-sub').removeClass('order1');



				$('.group-bubble').removeClass('position_unset').css('width', 65);

				$('.group-bubble .bubble-sub').removeClass('position_unset').removeClass('pdLR5');

				



				$(this).closest('.out-group-bubble').siblings('.chat').removeClass('clicktoggle');	



				// $(this).closest('.group-bubble').find('.group-bubble-chat').css('display','block').find('bubble').removeClass('right').removeClass('position_unset');

				$(this).closest('.group-bubble').find('.group-bubble-chat').css('display','none')



				$(this).removeClass('haschoose');

				// $('.bubble-sub').find('.bubble').removeClass(a'active');



				$(this).closest('.bubble-sub').addClass('order1');



			}else{

				$('.bubble').removeClass('haschoose');

				$('.bubble-sub').removeClass('z-index9');



				$('.group-bubble').addClass('position_unset').css('width', sumChatHead * 75);

				$('.group-bubble .bubble-sub').addClass('position_unset').addClass('pdLR5');

				



				$(this).closest('.out-group-bubble').siblings('.chat').addClass('clicktoggle');



				$(this).closest('.group-bubble').find('.group-bubble-chat').css('display','block');

				// $(this).closest('.group-bubble').find('.group-bubble-chat').css('display','block').find('bubble').addClass('right').addClass('position_unset');



				// $('.bubble-sub').find('.bubble').addClass('active');

				$(this).closest('.bubble-sub').addClass('z-index9');

				$(this).addClass('haschoose');

			}

			

		});



		var isMoving = false;

		var isdragging = false;

		var chatMode = false;





		$(".group-bubble").mousedown(function(){

		  isdragging = false;

		});



		$(".group-bubble").mousemove(function(){

		  isdragging = true;

		  $(this).css("transition", "all 0s");

		});



		$(".group-bubble").mouseup(function(e){

		  e.preventDefault();

		  var lastY = window.event.clientY;

		  var lastX = window.event.clientX;

		  var swidth = $( window ).width();

		  

		  if(isdragging){

		    

		    if(chatMode){

		      chatMode = false;

		    }

		    

		    if(lastX > (swidth/2)){

		      $(this).css("top", lastY).css("left", (swidth-65) + "px").css("transition", "all 0.4s");

		    }else{

		      $(this).css("top", lastY).css("left", "0px").css("transition", "all 0.4s");

		    }

		  }

		});



    </script>

</html>



<!-- https://codepen.io/DanielSharkov/pen/bayXwW -->