/* Button used to open the chat form - fixed at the bottom of the page */
		.open-button {
			background-color: #555;
			color: white;
			padding: 16px 20px;
			border: none;
			cursor: pointer;
			opacity: 0.8;
			position: fixed;
			bottom: 23px;
			right: 28px;
			width: 280px;
			display: none;
		}

		/* The popup chat - hidden by default */
		.chat-popup {
			/* display: none; */
			position: fixed;
			bottom: 75px;
			right: 15px;
			/* border: 3px solid #f1f1f1; */
			z-index: 9;
		}

		/* Add styles to the form container */
		.form-container {
            max-height: 500px;
			max-width: 300px;
			padding: 10px;
			/* background-color: white; */
			background-color: #36393f;

            display: flex;
            flex-direction: column;
            
		}

		/* Full-width textarea */
		.messages {
			width: 100%;
			padding: 15px;
			margin: 5px 0 22px 0;
			border: none;
			/* background: #f1f1f1; */
			background: #36393f;
			resize: none;
			/* min-height: 200px; */
            max-height: 370px;
            flex-grow: 1;
            overflow: auto;
			display: flex;
			flex-direction: column;
			
		}

          .message {
            display: flex;
            flex-direction: column-reverse;
          }
          .mine {
            align-items: flex-end;
          }
          .theirs {
            align-items: flex-start;
          }
          .message__name {
            padding-top: 10px;
            cursor: pointer; 
          }
          .message__bubble {
            padding: 15px;
            border-radius: 5px;
            word-break: break-word;  /* this will break long words e.g. urls */   
            box-shadow: rgba(156, 172, 172, 0.4) 0px 8px 8px;
          }
          .theirs .message__bubble {
            background: #6363bf;
            color: white;
          }
          .mine .message__bubble {
            background: #aea;
          }

          .footer {
            line-height: 76px;
            border-top: 1px solid rgba(156, 172, 172, 0.2);
            display: flex;
            flex-shrink: 0;
          }
          input {
            height: 76px;
            border: none;
            flex-grow: 1;
            padding: 0 15px;
            font-size: 16px;
            background: transparent;
            color:#777;
            z-index: 10;
			
          }

		/* When the textarea gets focus, do something */
		/* .form-container textarea:focus {
			background-color: #ddd;
			outline: none;
		} */

		/* Set a style for the submit/send button */
		/* .form-container .btn {
			background-color: #04AA6D;
			color: white;
			padding: 16px 20px;
			border: none;
			cursor: pointer;
			width: 100%;
			margin-bottom: 10px;
			opacity: 0.8;
		} */

		/* Add a red background color to the cancel button */
		.cancel {
			background-color: red;
			color: white;
			padding: 16px 20px;
			border: none;
			cursor: pointer;
			opacity: 0.8;
			position: fixed;
			bottom: 23px;
			right: 28px;
			width: 280px;
            display: none;
		}

		/* Add some hover effects to buttons */
		.form-container .btn:hover,
		.open-button:hover {
			opacity: 1;
		}