From a8fe8415e022c20fc7e42957c179d84f41fa70c8 Mon Sep 17 00:00:00 2001
From: Srevin Saju <srevin03@gmail.com>
Date: Mon, 6 Apr 2020 21:23:02 +0300
Subject: [PATCH] Update django template links

---
 sugaroid/web/websugaroid/templates/app.html | 1575 +++++++++----------
 1 file changed, 787 insertions(+), 788 deletions(-)
diff --git a/sugaroid/web/websugaroid/templates/app.html b/sugaroid/web/websugaroid/templates/app.html
index 29d5e03e..e85d9d95 100644
--- a/sugaroid/web/websugaroid/templates/app.html
+++ b/sugaroid/web/websugaroid/templates/app.html
@@ -1,806 +1,801 @@
-<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
-<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
-<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <!------ Include the above in your HEAD tag ---------->
 
-<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
-<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
-<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
+<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
+<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
+<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
 <!------ Include the above in your HEAD tag ---------->
 
 
 <!DOCTYPE html><html class=''>
-<head><!--script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script-->
-    <!--script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/emilcarlsson/pen/ZOQZaV?limit=all&page=74&q=contact+" /-->
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,300' rel='stylesheet' type='text/css'>
-
-<script src="https://use.typekit.net/hoy3lrg.js"></script>
-<script>try{Typekit.load({ async: true });}catch(e){}</script>
-	<script >
-	function Hello() {
-		var container = document.getElementById("cpp");
-		container.scrollTop = container.scrollHeight;
-		//$('body.frame.messages').animate({scrollTop: document.scrollHeight},"fast");
-		// window.scrollTo(0,document.querySelector(".cpp").scrollHeight);
-		// $(".messages").animate({scrollTop: $(document).height() - (9 * 10 * 10 * 10 * 10000 * 10000)}, "fast");
-	}
-
-	function makeSearch() {
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,300' rel='stylesheet' type='text/css'>
 
+	<script src="https://use.typekit.net/hoy3lrg.js"></script>
+	<script>try{Typekit.load({ async: true });}catch(e){}</script>
+	<script>
+		document.getElementById("cokies").style.display = "none";
+		function Hello() {
+			var container = document.getElementById("cpp");
+			container.scrollTop = container.scrollHeight;
+			//$('body.frame.messages').animate({scrollTop: document.scrollHeight},"fast");
+			// window.scrollTo(0,document.querySelector(".cpp").scrollHeight);
+			// $(".messages").animate({scrollTop: $(document).height() - (9 * 10 * 10 * 10 * 10000 * 10000)}, "fast");
+		}
+		function makeSearch() {
 		  document.getElementById('sugaroidLogo').src = 'https://raw.githubusercontent.com/srevinsaju/sugaroid/master/sugaroid/gui/ui/sugaroid_thinking3.gif';
 		  return false;
-}
-
-function myFunction() {
-  var x = document.getElementById("cookies");
-  if (x.style.display === "none") {
-    x.style.display = "block";
-  } else {
-    x.style.display = "none";
-  }
-}
-
-function getCookie(name) {
-    var dc = document.cookie;
-    var prefix = name + "=";
-    var begin = dc.indexOf("; " + prefix);
-    if (begin == -1) {
-        begin = dc.indexOf(prefix);
-        if (begin != 0) return null;
-    }
-    else
-    {
-        begin += 2;
-        var end = document.cookie.indexOf(";", begin);
-        if (end == -1) {
-        end = dc.length;
-        }
-    }
-    // because unescape has been deprecated, replaced with decodeURI
-    //return unescape(dc.substring(begin + prefix.length, end));
-    return decodeURI(dc.substring(begin + prefix.length, end));
-}
-
-function setCookie(name,value,days) {
-    var expires = "";
-    if (days) {
-        var date = new Date();
-        date.setTime(date.getTime() + (days*24*60*60*1000));
-        expires = "; expires=" + date.toUTCString();
-    }
-    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
-}
-
-function doSomething() {
-    var myCookie = getCookie("some");
-
-    if (myCookie == null) {
-        setCookie('some', 'True', 1);
-    }
-    else {
-        myFunction();
-
-    }
-}
-
+		}
+		function myFunction() {
+		  var x = document.getElementById("cookies");
+			var y = document.getElementById("cokies");
+		  if (x.style.display === "none") {
+		    x.style.display = "block";
+		  } else {
+				y.style.display = "block";
+		    x.style.display = "none";
+		  }
+		}
+		function myFFunction() {
+		  var x = document.getElementById("cokies");
+		  if (x.style.display === "none") {
+		    x.style.display = "block";
+		  } else {
+		    x.style.display = "none";
+		  }
+		}
+		function getCookie(name) {
+		    var dc = document.cookie;
+		    var prefix = name + "=";
+		    var begin = dc.indexOf("; " + prefix);
+		    if (begin == -1) {
+		        begin = dc.indexOf(prefix);
+		        if (begin != 0) return null;
+		    }
+		    else
+		    {
+		        begin += 2;
+		        var end = document.cookie.indexOf(";", begin);
+		        if (end == -1) {
+		        end = dc.length;
+		        }
+		    }
+		    // because unescape has been deprecated, replaced with decodeURI
+		    //return unescape(dc.substring(begin + prefix.length, end));
+		    return decodeURI(dc.substring(begin + prefix.length, end));
+		}
+		function setCookie(name,value,days) {
+		    var expires = "";
+		    if (days) {
+		        var date = new Date();
+		        date.setTime(date.getTime() + (days*24*60*60*1000));
+		        expires = "; expires=" + date.toUTCString();
+		    }
+		    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
+		}
+		function doSomething() {
+		    var myCookie = getCookie("some");
 
-</script>
+		    if (myCookie == null) {
+		        setCookie('some', 'True', 1);
+		    }
+		    else {
+		        myFunction();
+		    }
+		}
+	</script>
 <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
 	<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css'>
 <style class="cp-pen-styles">
 
 	body {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 100vh;
-  background: #27ae60;
-  font-family: "proxima-nova", "Source Sans Pro", sans-serif;
-  font-size: 1em;
-  letter-spacing: 0.1px;
-  color: #32465a;
-  text-rendering: optimizeLegibility;
-  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
-  -webkit-font-smoothing: antialiased;
-}
-
-
-.cookie-alert {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    border-radius: 10px;
-    background: #4A414D;
-    color: #fff;
-    padding: 10px 15px;
-    width: 280px;
-    z-index: 100;
-}
-
-.cookie-alert a {
-    display: block;
-    text-align: center;
-    padding: 5px 10px;
-    margin: 8px auto 0 auto;
-    border-radius: 10px;
-    background: transparent;
-    border: 2px solid #C4AFAF;
-    color: #C4AFAF;
-    transition: all .3s ease;
-    text-decoration: none;
-}
-
-.cookie-alert a:hover {
-    background: #C4AFAF;
-    color: #2f2f2f;
-}
-
-@media only screen and (max-width:480px) {
-    .cookie-alert {
-        text-align: center;
-        left: 0;
-        right: 0;
-        ;
-        margin: 0 auto;
-        max-width: 700px;
-        padding: 10px 30px;
-    }
-}
-
-#frame {
-  width: 95%;
-  min-width: 360px;
-  max-width: 1000px;
-  height: 92vh;
-  min-height: 300px;
-  max-height: 720px;
-  background: #E6EAEA;
-}
-@media screen and (max-width: 360px) {
-  #frame {
-    width: 100%;
-    height: 100vh;
-  }
-}
-#frame #sidepanel {
-  float: left;
-  min-width: 280px;
-  max-width: 340px;
-  width: 40%;
-  height: 100%;
-  background: #2c3e50;
-  color: #f5f5f5;
-  overflow: hidden;
-  position: relative;
-}
-@media screen and (max-width: 735px) {
-  #frame #sidepanel {
-    width: 58px;
-    min-width: 58px;
-  }
-}
-#frame #sidepanel #profile {
-  width: 80%;
-  margin: 25px auto;
-}
-@media screen and (max-width: 735px) {
-  #frame #sidepanel #profile {
-    width: 100%;
-    margin: 0 auto;
-    padding: 5px 0 0 0;
-    background: #32465a;
-  }
-}
-#frame #sidepanel #profile.expanded .wrap {
-  height: 210px;
-  line-height: initial;
-}
-#frame #sidepanel #profile.expanded .wrap p {
-  margin-top: 20px;
-}
-#frame #sidepanel #profile.expanded .wrap i.expand-button {
-  -moz-transform: scaleY(-1);
-  -o-transform: scaleY(-1);
-  -webkit-transform: scaleY(-1);
-  transform: scaleY(-1);
-  filter: FlipH;
-  -ms-filter: "FlipH";
-}
-#frame #sidepanel #profile .wrap {
-  height: 60px;
-  line-height: 60px;
-  overflow: hidden;
-  -moz-transition: 0.3s height ease;
-  -o-transition: 0.3s height ease;
-  -webkit-transition: 0.3s height ease;
-  transition: 0.3s height ease;
-}
-@media screen and (max-width: 735px) {
-  #frame #sidepanel #profile .wrap {
-    height: 55px;
-  }
-}
-#frame #sidepanel #profile .wrap img {
-  width: 50px;
-  border-radius: 50%;
-  padding: 3px;
-  border: 2px solid #e74c3c;
-  height: auto;
-  float: left;
-  cursor: pointer;
-  -moz-transition: 0.3s border ease;
-  -o-transition: 0.3s border ease;
-  -webkit-transition: 0.3s border ease;
-  transition: 0.3s border ease;
-}
-@media screen and (max-width: 735px) {
-  #frame #sidepanel #profile .wrap img {
-    width: 40px;
-    margin-left: 4px;
-  }
-}
-#frame #sidepanel #profile .wrap img.online {
-  border: 2px solid #2ecc71;
-}
-#frame #sidepanel #profile .wrap img.away {
-  border: 2px solid #f1c40f;
-}
-#frame #sidepanel #profile .wrap img.busy {
-  border: 2px solid #e74c3c;
-}
-#frame #sidepanel #profile .wrap img.offline {
-  border: 2px solid #95a5a6;
-}
-#frame #sidepanel #profile .wrap p {
-  float: left;
-  margin-left: 15px;
-}
-@media screen and (max-width: 735px) {
-  #frame #sidepanel #profile .wrap p {
-    display: none;
-  }
-}
-#frame #sidepanel #profile .wrap i.expand-button {
-  float: right;
-  margin-top: 23px;
-  font-size: 0.8em;
-  cursor: pointer;
-  color: #435f7a;
-}
-@media screen and (max-width: 735px) {
-  #frame #sidepanel #profile .wrap i.expand-button {
-    display: none;
-  }
-}
-#frame #sidepanel #profile .wrap #status-options {
-  position: absolute;
-  opacity: 0;
-  visibility: hidden;
-  width: 150px;
-  margin: 70px 0 0 0;
-  border-radius: 6px;
-  z-index: 99;
-  line-height: initial;
-  background: #435f7a;
-  -moz-transition: 0.3s all ease;
-  -o-transition: 0.3s all ease;
-  -webkit-transition: 0.3s all ease;
-  transition: 0.3s all ease;
-}
-@media screen and (max-width: 735px) {
-  #frame #sidepanel #profile .wrap #status-options {
-    width: 58px;
-    margin-top: 57px;
-  }
-}
-#frame #sidepanel #profile .wrap #status-options.active {
-  opacity: 1;
-  visibility: visible;
-  margin: 75px 0 0 0;
-}
-@media screen and (max-width: 735px) {
-  #frame #sidepanel #profile .wrap #status-options.active {
-    margin-top: 62px;
-  }
-}
-#frame #sidepanel #profile .wrap #status-options:before {
-  content: '';
-  position: absolute;
-  width: 0;
-  height: 0;
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 8px solid #435f7a;
-  margin: -8px 0 0 24px;
-}
-@media screen and (max-width: 735px) {
-  #frame #sidepanel #profile .wrap #status-options:before {
-    margin-left: 23px;
-  }
-}
-#frame #sidepanel #profile .wrap #status-options ul {
-  overflow: hidden;
-  border-radius: 6px;
-}
-#frame #sidepanel #profile .wrap #status-options ul li {
-  padding: 15px 0 30px 18px;
-  display: block;
-  cursor: pointer;
-}
-@media screen and (max-width: 735px) {
-  #frame #sidepanel #profile .wrap #status-options ul li {
-    padding: 15px 0 35px 22px;
-  }
-}
-#frame #sidepanel #profile .wrap #status-options ul li:hover {
-  background: #496886;
-}
-#frame #sidepanel #profile .wrap #status-options ul li span.status-circle {
-  position: absolute;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  margin: 5px 0 0 0;
-}
-@media screen and (max-width: 735px) {
-  #frame #sidepanel #profile .wrap #status-options ul li span.status-circle {
-    width: 14px;
-    height: 14px;
-  }
-}
-#frame #sidepanel #profile .wrap #status-options ul li span.status-circle:before {
-  content: '';
-  position: absolute;
-  width: 14px;
-  height: 14px;
-  margin: -3px 0 0 -3px;
-  background: transparent;
-  border-radius: 50%;
-  z-index: 0;
-}
-@media screen and (max-width: 735px) {
-  #frame #sidepanel #profile .wrap #status-options ul li span.status-circle:before {
-    height: 18px;
-    width: 18px;
-  }
-}
-#frame #sidepanel #profile .wrap #status-options ul li p {
-  padding-left: 12px;
-}
-@media screen and (max-width: 735px) {
-  #frame #sidepanel #profile .wrap #status-options ul li p {
-    display: none;
-  }
-}
-#frame #sidepanel #profile .wrap #status-options ul li#status-online span.status-circle {
-  background: #2ecc71;
-}
-#frame #sidepanel #profile .wrap #status-options ul li#status-online.active span.status-circle:before {
-  border: 1px solid #2ecc71;
-}
-#frame #sidepanel #profile .wrap #status-options ul li#status-away span.status-circle {
-  background: #f1c40f;
-}
-#frame #sidepanel #profile .wrap #status-options ul li#status-away.active span.status-circle:before {
-  border: 1px solid #f1c40f;
-}
-#frame #sidepanel #profile .wrap #status-options ul li#status-busy span.status-circle {
-  background: #e74c3c;
-}
-#frame #sidepanel #profile .wrap #status-options ul li#status-busy.active span.status-circle:before {
-  border: 1px solid #e74c3c;
-}
-#frame #sidepanel #profile .wrap #status-options ul li#status-offline span.status-circle {
-  background: #95a5a6;
-}
-#frame #sidepanel #profile .wrap #status-options ul li#status-offline.active span.status-circle:before {
-  border: 1px solid #95a5a6;
-}
-#frame #sidepanel #profile .wrap #expanded {
-  padding: 100px 0 0 0;
-  display: block;
-  line-height: initial !important;
-}
-#frame #sidepanel #profile .wrap #expanded label {
-  float: left;
-  clear: both;
-  margin: 0 8px 5px 0;
-  padding: 5px 0;
-}
-#frame #sidepanel #profile .wrap #expanded input {
-  border: none;
-  margin-bottom: 6px;
-  background: #32465a;
-  border-radius: 3px;
-  color: #f5f5f5;
-  padding: 7px;
-  width: calc(100% - 43px);
-}
-#frame #sidepanel #profile .wrap #expanded input:focus {
-  outline: none;
-  background: #435f7a;
-}
-#frame #sidepanel #search {
-  border-top: 1px solid #32465a;
-  border-bottom: 1px solid #32465a;
-  font-weight: 300;
-}
-@media screen and (max-width: 735px) {
-  #frame #sidepanel #search {
-    display: none;
-  }
-}
-#frame #sidepanel #search label {
-  position: absolute;
-  margin: 10px 0 0 20px;
-}
-#frame #sidepanel #search input {
-  font-family: "proxima-nova",  "Source Sans Pro", sans-serif;
-  padding: 10px 0 10px 46px;
-  width: calc(100% - 25px);
-  border: none;
-  background: #32465a;
-  color: #f5f5f5;
-}
-#frame #sidepanel #search input:focus {
-  outline: none;
-  background: #435f7a;
-}
-#frame #sidepanel #search input::-webkit-input-placeholder {
-  color: #f5f5f5;
-}
-#frame #sidepanel #search input::-moz-placeholder {
-  color: #f5f5f5;
-}
-#frame #sidepanel #search input:-ms-input-placeholder {
-  color: #f5f5f5;
-}
-#frame #sidepanel #search input:-moz-placeholder {
-  color: #f5f5f5;
-}
-#frame #sidepanel #contacts {
-  height: calc(100% - 177px);
-  overflow-y: scroll;
-  overflow-x: hidden;
-}
-@media screen and (max-width: 735px) {
-  #frame #sidepanel #contacts {
-    height: calc(100% - 149px);
-    overflow-y: scroll;
-    overflow-x: hidden;
-  }
-  #frame #sidepanel #contacts::-webkit-scrollbar {
-    display: none;
-  }
-}
-#frame #sidepanel #contacts.expanded {
-  height: calc(100% - 334px);
-}
-#frame #sidepanel #contacts::-webkit-scrollbar {
-  width: 8px;
-  background: #2c3e50;
-}
-#frame #sidepanel #contacts::-webkit-scrollbar-thumb {
-  background-color: #243140;
-}
-#frame #sidepanel #contacts ul li.contact {
-  position: relative;
-  padding: 10px 0 15px 0;
-  font-size: 0.9em;
-  cursor: pointer;
-}
-@media screen and (max-width: 735px) {
-  #frame #sidepanel #contacts ul li.contact {
-    padding: 6px 0 46px 8px;
-  }
-}
-#frame #sidepanel #contacts ul li.contact:hover {
-  background: #32465a;
-}
-#frame #sidepanel #contacts ul li.contact.active {
-  background: #32465a;
-  border-right: 5px solid #435f7a;
-}
-#frame #sidepanel #contacts ul li.contact.active span.contact-status {
-  border: 2px solid #32465a !important;
-}
-#frame #sidepanel #contacts ul li.contact .wrap {
-  width: 88%;
-  margin: 0 auto;
-  position: relative;
-}
-@media screen and (max-width: 735px) {
-  #frame #sidepanel #contacts ul li.contact .wrap {
-    width: 100%;
-  }
-}
-#frame #sidepanel #contacts ul li.contact .wrap span {
-  position: absolute;
-  left: 0;
-  margin: -2px 0 0 -2px;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  border: 2px solid #2c3e50;
-  background: #95a5a6;
-}
-#frame #sidepanel #contacts ul li.contact .wrap span.online {
-  background: #2ecc71;
-}
-#frame #sidepanel #contacts ul li.contact .wrap span.away {
-  background: #f1c40f;
-}
-#frame #sidepanel #contacts ul li.contact .wrap span.busy {
-  background: #e74c3c;
-}
-#frame #sidepanel #contacts ul li.contact .wrap img {
-  width: 40px;
-  border-radius: 50%;
-  float: left;
-  margin-right: 10px;
-}
-@media screen and (max-width: 735px) {
-  #frame #sidepanel #contacts ul li.contact .wrap img {
-    margin-right: 0px;
-  }
-}
-#frame #sidepanel #contacts ul li.contact .wrap .meta {
-  padding: 5px 0 0 0;
-}
-@media screen and (max-width: 735px) {
-  #frame #sidepanel #contacts ul li.contact .wrap .meta {
-    display: none;
-  }
-}
-#frame #sidepanel #contacts ul li.contact .wrap .meta .name {
-  font-weight: 600;
-}
-#frame #sidepanel #contacts ul li.contact .wrap .meta .preview {
-  margin: 5px 0 0 0;
-  padding: 0 0 1px;
-  font-weight: 400;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -moz-transition: 1s all ease;
-  -o-transition: 1s all ease;
-  -webkit-transition: 1s all ease;
-  transition: 1s all ease;
-}
-#frame #sidepanel #contacts ul li.contact .wrap .meta .preview span {
-  position: initial;
-  border-radius: initial;
-  background: none;
-  border: none;
-  padding: 0 2px 0 0;
-  margin: 0 0 0 1px;
-  opacity: .5;
-}
-#frame #sidepanel #bottom-bar {
-  position: absolute;
-  width: 100%;
-  bottom: 0;
-}
-#frame #sidepanel #bottom-bar button {
-  float: left;
-  border: none;
-  width: 50%;
-  padding: 10px 0;
-  background: #32465a;
-  color: #f5f5f5;
-  cursor: pointer;
-  font-size: 0.85em;
-  font-family: "proxima-nova",  "Source Sans Pro", sans-serif;
-}
-@media screen and (max-width: 735px) {
-  #frame #sidepanel #bottom-bar button {
-    float: none;
-    width: 100%;
-    padding: 15px 0;
-  }
-}
-#frame #sidepanel #bottom-bar button:focus {
-  outline: none;
-}
-#frame #sidepanel #bottom-bar button:nth-child(1) {
-  border-right: 1px solid #2c3e50;
-}
-@media screen and (max-width: 735px) {
-  #frame #sidepanel #bottom-bar button:nth-child(1) {
-    border-right: none;
-    border-bottom: 1px solid #2c3e50;
-  }
-}
-#frame #sidepanel #bottom-bar button:hover {
-  background: #435f7a;
-}
-#frame #sidepanel #bottom-bar button i {
-  margin-right: 3px;
-  font-size: 1em;
-}
-@media screen and (max-width: 735px) {
-  #frame #sidepanel #bottom-bar button i {
-    font-size: 1.3em;
-  }
-}
-@media screen and (max-width: 735px) {
-  #frame #sidepanel #bottom-bar button span {
-    display: none;
-  }
-}
-#frame .content {
-  float: right;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-}
-@media screen and (max-width: 735px) {
-  #frame .content {
-    width: 100%;
-    min-width: 300px !important;
-  }
-}
-@media screen and (min-width: 900px) {
-  #frame .content {
-    width: 100%;
-  }
-}
-#frame .content .contact-profile {
-  width: 100%;
-  height: 20vh;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		min-height: 100vh;
+		background: #ffcb00;
+		font-family: "proxima-nova", "Source Sans Pro", sans-serif;
+		font-size: 1em;
+		letter-spacing: 0.1px;
+		color: #32465a;
+		text-rendering: optimizeLegibility;
+		text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
+		-webkit-font-smoothing: antialiased;
+	}
+	.cookie-alert {
+	    position: fixed;
+	    bottom: 20px;
+	    right: 20px;
+	    border-radius: 10px;
+	    background: #4A414D;
+	    color: #fff;
+	    padding: 10px 15px;
+	    width: 280px;
+	    z-index: 100;
+	}
+	.cookie-alert a {
+	    display: block;
+	    text-align: center;
+	    padding: 5px 10px;
+	    margin: 8px auto 0 auto;
+	    border-radius: 10px;
+	    background: transparent;
+	    border: 2px solid #C4AFAF;
+	    color: #C4AFAF;
+	    transition: all .3s ease;
+	    text-decoration: none;
+	}
+	.cookie-alert a:hover {
+	    background: #C4AFAF;
+	    color: #2f2f2f;
+	}
+	@media only screen and (max-width:480px) {
+	    .cookie-alert {
+	        text-align: center;
+	        left: 0;
+	        right: 0;
+	        ;
+	        margin: 0 auto;
+	        max-width: 700px;
+	        padding: 10px 30px;
+	    }
+	}
+	#frame {
+	  width: 95%;
+	  min-width: 360px;
+	  max-width: 1000px;
+	  height: 92vh;
+	  min-height: 300px;
+	  max-height: 720px;
+	  background: #E6EAEA;
+	}
+	@media screen and (max-width: 360px) {
+	  #frame {
+	    width: 100%;
+	    height: 100vh;
+	  }
+	}
+	#frame #sidepanel {
+	  float: left;
+	  min-width: 280px;
+	  max-width: 340px;
+	  width: 40%;
+	  height: 100%;
+	  background: #2c3e50;
+	  color: #f5f5f5;
+	  overflow: hidden;
+	  position: relative;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame #sidepanel {
+	    width: 58px;
+	    min-width: 58px;
+	  }
+	}
+	#frame #sidepanel #profile {
+	  width: 80%;
+	  margin: 25px auto;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame #sidepanel #profile {
+	    width: 100%;
+	    margin: 0 auto;
+	    padding: 5px 0 0 0;
+	    background: #32465a;
+	  }
+	}
+	#frame #sidepanel #profile.expanded .wrap {
+	  height: 210px;
+	  line-height: initial;
+	}
+	#frame #sidepanel #profile.expanded .wrap p {
+	  margin-top: 20px;
+	}
+	#frame #sidepanel #profile.expanded .wrap i.expand-button {
+	  -moz-transform: scaleY(-1);
+	  -o-transform: scaleY(-1);
+	  -webkit-transform: scaleY(-1);
+	  transform: scaleY(-1);
+	  filter: FlipH;
+	  -ms-filter: "FlipH";
+	}
+	#frame #sidepanel #profile .wrap {
+	  height: 60px;
+	  line-height: 60px;
+	  overflow: hidden;
+	  -moz-transition: 0.3s height ease;
+	  -o-transition: 0.3s height ease;
+	  -webkit-transition: 0.3s height ease;
+	  transition: 0.3s height ease;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame #sidepanel #profile .wrap {
+	    height: 55px;
+	  }
+	}
+	#frame #sidepanel #profile .wrap img {
+	  width: 50px;
+	  border-radius: 50%;
+	  padding: 3px;
+	  border: 2px solid #e74c3c;
+	  height: auto;
+	  float: left;
+	  cursor: pointer;
+	  -moz-transition: 0.3s border ease;
+	  -o-transition: 0.3s border ease;
+	  -webkit-transition: 0.3s border ease;
+	  transition: 0.3s border ease;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame #sidepanel #profile .wrap img {
+	    width: 40px;
+	    margin-left: 4px;
+	  }
+	}
+	#frame #sidepanel #profile .wrap img.online {
+	  border: 2px solid #2ecc71;
+	}
+	#frame #sidepanel #profile .wrap img.away {
+	  border: 2px solid #f1c40f;
+	}
+	#frame #sidepanel #profile .wrap img.busy {
+	  border: 2px solid #e74c3c;
+	}
+	#frame #sidepanel #profile .wrap img.offline {
+	  border: 2px solid #95a5a6;
+	}
+	#frame #sidepanel #profile .wrap p {
+	  float: left;
+	  margin-left: 15px;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame #sidepanel #profile .wrap p {
+	    display: none;
+	  }
+	}
+	#frame #sidepanel #profile .wrap i.expand-button {
+	  float: right;
+	  margin-top: 23px;
+	  font-size: 0.8em;
+	  cursor: pointer;
+	  color: #435f7a;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame #sidepanel #profile .wrap i.expand-button {
+	    display: none;
+	  }
+	}
+	#frame #sidepanel #profile .wrap #status-options {
+	  position: absolute;
+	  opacity: 0;
+	  visibility: hidden;
+	  width: 150px;
+	  margin: 70px 0 0 0;
+	  border-radius: 6px;
+	  z-index: 99;
+	  line-height: initial;
+	  background: #435f7a;
+	  -moz-transition: 0.3s all ease;
+	  -o-transition: 0.3s all ease;
+	  -webkit-transition: 0.3s all ease;
+	  transition: 0.3s all ease;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame #sidepanel #profile .wrap #status-options {
+	    width: 58px;
+	    margin-top: 57px;
+	  }
+	}
+	#frame #sidepanel #profile .wrap #status-options.active {
+	  opacity: 1;
+	  visibility: visible;
+	  margin: 75px 0 0 0;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame #sidepanel #profile .wrap #status-options.active {
+	    margin-top: 62px;
+	  }
+	}
+	#frame #sidepanel #profile .wrap #status-options:before {
+	  content: '';
+	  position: absolute;
+	  width: 0;
+	  height: 0;
+	  border-left: 6px solid transparent;
+	  border-right: 6px solid transparent;
+	  border-bottom: 8px solid #435f7a;
+	  margin: -8px 0 0 24px;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame #sidepanel #profile .wrap #status-options:before {
+	    margin-left: 23px;
+	  }
+	}
+	#frame #sidepanel #profile .wrap #status-options ul {
+	  overflow: hidden;
+	  border-radius: 6px;
+	}
+	#frame #sidepanel #profile .wrap #status-options ul li {
+	  padding: 15px 0 30px 18px;
+	  display: block;
+	  cursor: pointer;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame #sidepanel #profile .wrap #status-options ul li {
+	    padding: 15px 0 35px 22px;
+	  }
+	}
+	#frame #sidepanel #profile .wrap #status-options ul li:hover {
+	  background: #496886;
+	}
+	#frame #sidepanel #profile .wrap #status-options ul li span.status-circle {
+	  position: absolute;
+	  width: 10px;
+	  height: 10px;
+	  border-radius: 50%;
+	  margin: 5px 0 0 0;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame #sidepanel #profile .wrap #status-options ul li span.status-circle {
+	    width: 14px;
+	    height: 14px;
+	  }
+	}
+	#frame #sidepanel #profile .wrap #status-options ul li span.status-circle:before {
+	  content: '';
+	  position: absolute;
+	  width: 14px;
+	  height: 14px;
+	  margin: -3px 0 0 -3px;
+	  background: transparent;
+	  border-radius: 50%;
+	  z-index: 0;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame #sidepanel #profile .wrap #status-options ul li span.status-circle:before {
+	    height: 18px;
+	    width: 18px;
+	  }
+	}
+	#frame #sidepanel #profile .wrap #status-options ul li p {
+	  padding-left: 12px;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame #sidepanel #profile .wrap #status-options ul li p {
+	    display: none;
+	  }
+	}
+	#frame #sidepanel #profile .wrap #status-options ul li#status-online span.status-circle {
+	  background: #2ecc71;
+	}
+	#frame #sidepanel #profile .wrap #status-options ul li#status-online.active span.status-circle:before {
+	  border: 1px solid #2ecc71;
+	}
+	#frame #sidepanel #profile .wrap #status-options ul li#status-away span.status-circle {
+	  background: #f1c40f;
+	}
+	#frame #sidepanel #profile .wrap #status-options ul li#status-away.active span.status-circle:before {
+	  border: 1px solid #f1c40f;
+	}
+	#frame #sidepanel #profile .wrap #status-options ul li#status-busy span.status-circle {
+	  background: #e74c3c;
+	}
+	#frame #sidepanel #profile .wrap #status-options ul li#status-busy.active span.status-circle:before {
+	  border: 1px solid #e74c3c;
+	}
+	#frame #sidepanel #profile .wrap #status-options ul li#status-offline span.status-circle {
+	  background: #95a5a6;
+	}
+	#frame #sidepanel #profile .wrap #status-options ul li#status-offline.active span.status-circle:before {
+	  border: 1px solid #95a5a6;
+	}
+	#frame #sidepanel #profile .wrap #expanded {
+	  padding: 100px 0 0 0;
+	  display: block;
+	  line-height: initial !important;
+	}
+	#frame #sidepanel #profile .wrap #expanded label {
+	  float: left;
+	  clear: both;
+	  margin: 0 8px 5px 0;
+	  padding: 5px 0;
+	}
+	#frame #sidepanel #profile .wrap #expanded input {
+	  border: none;
+	  margin-bottom: 6px;
+	  background: #32465a;
+	  border-radius: 3px;
+	  color: #f5f5f5;
+	  padding: 7px;
+	  width: calc(100% - 43px);
+	}
+	#frame #sidepanel #profile .wrap #expanded input:focus {
+	  outline: none;
+	  background: #435f7a;
+	}
+	#frame #sidepanel #search {
+	  border-top: 1px solid #32465a;
+	  border-bottom: 1px solid #32465a;
+	  font-weight: 300;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame #sidepanel #search {
+	    display: none;
+	  }
+	}
+	#frame #sidepanel #search label {
+	  position: absolute;
+	  margin: 10px 0 0 20px;
+	}
+	#frame #sidepanel #search input {
+	  font-family: "proxima-nova",  "Source Sans Pro", sans-serif;
+	  padding: 10px 0 10px 46px;
+	  width: calc(100% - 25px);
+	  border: none;
+	  background: #32465a;
+	  color: #f5f5f5;
+	}
+	#frame #sidepanel #search input:focus {
+	  outline: none;
+	  background: #435f7a;
+	}
+	#frame #sidepanel #search input::-webkit-input-placeholder {
+	  color: #f5f5f5;
+	}
+	#frame #sidepanel #search input::-moz-placeholder {
+	  color: #f5f5f5;
+	}
+	#frame #sidepanel #search input:-ms-input-placeholder {
+	  color: #f5f5f5;
+	}
+	#frame #sidepanel #search input:-moz-placeholder {
+	  color: #f5f5f5;
+	}
+	#frame #sidepanel #contacts {
+	  height: calc(100% - 177px);
+	  overflow-y: scroll;
+	  overflow-x: hidden;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame #sidepanel #contacts {
+	    height: calc(100% - 149px);
+	    overflow-y: scroll;
+	    overflow-x: hidden;
+	  }
+	  #frame #sidepanel #contacts::-webkit-scrollbar {
+	    display: none;
+	  }
+	}
+	#frame #sidepanel #contacts.expanded {
+	  height: calc(100% - 334px);
+	}
+	#frame #sidepanel #contacts::-webkit-scrollbar {
+	  width: 8px;
+	  background: #2c3e50;
+	}
+	#frame #sidepanel #contacts::-webkit-scrollbar-thumb {
+	  background-color: #243140;
+	}
+	#frame #sidepanel #contacts ul li.contact {
+	  position: relative;
+	  padding: 10px 0 15px 0;
+	  font-size: 0.9em;
+	  cursor: pointer;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame #sidepanel #contacts ul li.contact {
+	    padding: 6px 0 46px 8px;
+	  }
+	}
+	#frame #sidepanel #contacts ul li.contact:hover {
+	  background: #32465a;
+	}
+	#frame #sidepanel #contacts ul li.contact.active {
+	  background: #32465a;
+	  border-right: 5px solid #435f7a;
+	}
+	#frame #sidepanel #contacts ul li.contact.active span.contact-status {
+	  border: 2px solid #32465a !important;
+	}
+	#frame #sidepanel #contacts ul li.contact .wrap {
+	  width: 88%;
+	  margin: 0 auto;
+	  position: relative;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame #sidepanel #contacts ul li.contact .wrap {
+	    width: 100%;
+	  }
+	}
+	#frame #sidepanel #contacts ul li.contact .wrap span {
+	  position: absolute;
+	  left: 0;
+	  margin: -2px 0 0 -2px;
+	  width: 10px;
+	  height: 10px;
+	  border-radius: 50%;
+	  border: 2px solid #2c3e50;
+	  background: #95a5a6;
+	}
+	#frame #sidepanel #contacts ul li.contact .wrap span.online {
+	  background: #2ecc71;
+	}
+	#frame #sidepanel #contacts ul li.contact .wrap span.away {
+	  background: #f1c40f;
+	}
+	#frame #sidepanel #contacts ul li.contact .wrap span.busy {
+	  background: #e74c3c;
+	}
+	#frame #sidepanel #contacts ul li.contact .wrap img {
+	  width: 40px;
+	  border-radius: 50%;
+	  float: left;
+	  margin-right: 10px;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame #sidepanel #contacts ul li.contact .wrap img {
+	    margin-right: 0px;
+	  }
+	}
+	#frame #sidepanel #contacts ul li.contact .wrap .meta {
+	  padding: 5px 0 0 0;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame #sidepanel #contacts ul li.contact .wrap .meta {
+	    display: none;
+	  }
+	}
+	#frame #sidepanel #contacts ul li.contact .wrap .meta .name {
+	  font-weight: 600;
+	}
+	#frame #sidepanel #contacts ul li.contact .wrap .meta .preview {
+	  margin: 5px 0 0 0;
+	  padding: 0 0 1px;
+	  font-weight: 400;
+	  white-space: nowrap;
+	  overflow: hidden;
+	  text-overflow: ellipsis;
+	  -moz-transition: 1s all ease;
+	  -o-transition: 1s all ease;
+	  -webkit-transition: 1s all ease;
+	  transition: 1s all ease;
+	}
+	#frame #sidepanel #contacts ul li.contact .wrap .meta .preview span {
+	  position: initial;
+	  border-radius: initial;
+	  background: none;
+	  border: none;
+	  padding: 0 2px 0 0;
+	  margin: 0 0 0 1px;
+	  opacity: .5;
+	}
+	#frame #sidepanel #bottom-bar {
+	  position: absolute;
+	  width: 100%;
+	  bottom: 0;
+	}
+	#frame #sidepanel #bottom-bar button {
+	  float: left;
+	  border: none;
+	  width: 50%;
+	  padding: 10px 0;
+	  background: #32465a;
+	  color: #f5f5f5;
+	  cursor: pointer;
+	  font-size: 0.85em;
+	  font-family: "proxima-nova",  "Source Sans Pro", sans-serif;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame #sidepanel #bottom-bar button {
+	    float: none;
+	    width: 100%;
+	    padding: 15px 0;
+	  }
+	}
+	#frame #sidepanel #bottom-bar button:focus {
+	  outline: none;
+	}
+	#frame #sidepanel #bottom-bar button:nth-child(1) {
+	  border-right: 1px solid #2c3e50;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame #sidepanel #bottom-bar button:nth-child(1) {
+	    border-right: none;
+	    border-bottom: 1px solid #2c3e50;
+	  }
+	}
+	#frame #sidepanel #bottom-bar button:hover {
+	  background: #435f7a;
+	}
+	#frame #sidepanel #bottom-bar button i {
+	  margin-right: 3px;
+	  font-size: 1em;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame #sidepanel #bottom-bar button i {
+	    font-size: 1.3em;
+	  }
+	}
+	@media screen and (max-width: 735px) {
+	  #frame #sidepanel #bottom-bar button span {
+	    display: none;
+	  }
+	}
+	#frame .content {
+	  float: right;
+	  width: 100%;
+	  height: 100%;
+	  overflow: hidden;
+	  position: relative;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame .content {
+	    width: 100%;
+	    min-width: 300px !important;
+	  }
+	}
+	@media screen and (min-width: 900px) {
+	  #frame .content {
+	    width: 100%;
+	  }
+	}
+	#frame .content .contact-profile {
+	  width: 100%;
+	  height: 20vh;
 
-  background: #f5f5f5;
-}
-#frame .content .contact-profile img {
-  width: 20vh;
-  border-radius: 50%;
-  float: left;
-  margin-left: calc(50% - 10vh);
-	margin-right: calc(50% - 10vh);
-}
-#frame .content .contact-profile p {
-  float: left;
-}
-#frame .content .contact-profile .social-media {
-  float: right;
-}
-#frame .content .contact-profile .social-media i {
-  margin-left: 14px;
-  cursor: pointer;
-}
-#frame .content .contact-profile .social-media i:nth-last-child(1) {
-  margin-right: 20px;
-}
-#frame .content .contact-profile .social-media i:hover {
-  color: #435f7a;
-}
-#frame .content .messages {
-  height: 68%;
-  overflow-y: scroll;
-  overflow-x: hidden;
-}
-@media screen and (max-width: 735px) {
-  #frame .content .messages {
-    max-height: calc(100% - 105px);
-  }
-}
-#frame .content .messages::-webkit-scrollbar {
-  width: 8px;
-  background: transparent;
-}
-#frame .content .messages::-webkit-scrollbar-thumb {
-  background-color: rgba(0, 0, 0, 0.3);
-}
-#frame .content .messages ul li {
-  display: inline-block;
-  clear: both;
-  float: left;
-  margin: 15px 15px 5px 15px;
-  width: calc(100% - 25px);
-  font-size: 0.9em;
-}
-#frame .content .messages ul li:nth-last-child(1) {
-  margin-bottom: 20px;
-}
-#frame .content .messages ul li.sent img {
-  margin: 6px 8px 0 0;
-}
-#frame .content .messages ul li.sent p {
-  background: #435f7a;
-  color: #f5f5f5;
-}
-#frame .content .messages ul li.replies img {
-  float: right;
-  margin: 6px 0 0 8px;
-}
-#frame .content .messages ul li.replies p {
-  background: #f5f5f5;
-  float: right;
-}
-#frame .content .messages ul li img {
-  width: 22px;
-  border-radius: 50%;
-  float: left;
-}
-#frame .content .messages ul li p {
-  display: inline-block;
-  padding: 10px 15px;
-  border-radius: 20px;
-  max-width: 205px;
-  line-height: 130%;
-}
-@media screen and (min-width: 735px) {
-  #frame .content .messages ul li p {
-    max-width: 300px;
-  }
-}
-#frame .content .message-input {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  z-index: 99;
-}
-#frame .content .message-input .wrap {
-  position: relative;
-}
-#frame .content .message-input .wrap input {
-  font-family: "proxima-nova",  "Source Sans Pro", sans-serif;
-  float: left;
-  border: none;
-  width: calc(100% - 50px);
-  padding: 11px 32px 10px 8px;
-  font-size: 1em;
-  color: #32465a;
-}
-@media screen and (max-width: 735px) {
-  #frame .content .message-input .wrap input {
-    padding: 15px 32px 16px 8px;
-  }
-}
-#frame .content .message-input .wrap input:focus {
-  outline: none;
-}
-#frame .content .message-input .wrap .attachment {
-  position: absolute;
-  right: 60px;
-  z-index: 4;
-  margin-top: 10px;
-  font-size: 1.1em;
-  color: #435f7a;
-  opacity: .5;
-  cursor: pointer;
-}
-@media screen and (max-width: 735px) {
-  #frame .content .message-input .wrap .attachment {
-    margin-top: 17px;
-    right: 65px;
-  }
-}
-#frame .content .message-input .wrap .attachment:hover {
-  opacity: 1;
-}
-#frame .content .message-input .wrap button {
-  float: right;
-  border: none;
-  width: 50px;
-  padding: 0 0;
-  cursor: pointer;
-  background: #ff004b;
-  color: #f5f5f5;
-}
-@media screen and (max-width: 735px) {
-  #frame .content .message-input .wrap button {
-    padding: 0 0;
-  }
-}
-#frame .content .message-input .wrap button:hover {
-  background: #435f7a;
-}
-#frame .content .message-input .wrap button:focus {
-	outline: none;
-}
+	  background: #f5f5f5;
+	}
+	#frame .content .contact-profile img {
+	  width: 20vh;
+	  border-radius: 50%;
+	  float: left;
+	  margin-left: calc(50% - 10vh);
+		margin-right: calc(50% - 10vh);
+	}
+	#frame .content .contact-profile p {
+	  float: left;
+	}
+	#frame .content .contact-profile .social-media {
+	  float: right;
+	}
+	#frame .content .contact-profile .social-media i {
+	  margin-left: 14px;
+	  cursor: pointer;
+	}
+	#frame .content .contact-profile .social-media i:nth-last-child(1) {
+	  margin-right: 20px;
+	}
+	#frame .content .contact-profile .social-media i:hover {
+	  color: #435f7a;
+	}
+	#frame .content .messages {
+	  height: 68%;
+	  overflow-y: scroll;
+	  overflow-x: hidden;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame .content .messages {
+	    max-height: calc(100% - 105px);
+	  }
+	}
+	#frame .content .messages::-webkit-scrollbar {
+	  width: 8px;
+	  background: transparent;
+	}
+	#frame .content .messages::-webkit-scrollbar-thumb {
+	  background-color: rgba(0, 0, 0, 0.3);
+	}
+	#frame .content .messages ul li {
+	  display: inline-block;
+	  clear: both;
+	  float: left;
+	  margin: 15px 15px 5px 15px;
+	  width: calc(100% - 25px);
+	  font-size: 0.9em;
+	}
+	#frame .content .messages ul li:nth-last-child(1) {
+	  margin-bottom: 20px;
+	}
+	#frame .content .messages ul li.sent img {
+	  margin: 6px 8px 0 0;
+	}
+	#frame .content .messages ul li.sent p {
+	  background: #435f7a;
+	  color: #f5f5f5;
+	}
+	#frame .content .messages ul li.replies img {
+	  float: right;
+	  margin: 6px 0 0 8px;
+	}
+	#frame .content .messages ul li.replies p {
+	  background: #f5f5f5;
+	  float: right;
+	}
+	#frame .content .messages ul li img {
+	  width: 22px;
+	  border-radius: 50%;
+	  float: left;
+	}
+	#frame .content .messages ul li p {
+	  display: inline-block;
+	  padding: 10px 15px;
+	  border-radius: 20px;
+	  max-width: 205px;
+	  line-height: 130%;
+	}
+	@media screen and (min-width: 735px) {
+	  #frame .content .messages ul li p {
+	    max-width: 300px;
+	  }
+	}
+	#frame .content .message-input {
+	  position: absolute;
+	  bottom: 0;
+	  width: 100%;
+	  z-index: 99;
+	}
+	#frame .content .message-input .wrap {
+	  position: relative;
+	}
+	#frame .content .message-input .wrap input {
+	  font-family: "proxima-nova",  "Source Sans Pro", sans-serif;
+	  float: left;
+	  border: none;
+	  width: calc(100% - 50px);
+	  padding: 11px 32px 10px 8px;
+	  font-size: 1em;
+	  color: #32465a;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame .content .message-input .wrap input {
+	    padding: 15px 32px 16px 8px;
+	  }
+	}
+	#frame .content .message-input .wrap input:focus {
+	  outline: none;
+	}
+	#frame .content .message-input .wrap .attachment {
+	  position: absolute;
+	  right: 60px;
+	  z-index: 4;
+	  margin-top: 10px;
+	  font-size: 1.1em;
+	  color: #435f7a;
+	  opacity: .5;
+	  cursor: pointer;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame .content .message-input .wrap .attachment {
+	    margin-top: 17px;
+	    right: 65px;
+	  }
+	}
+	#frame .content .message-input .wrap .attachment:hover {
+	  opacity: 1;
+	}
+	#frame .content .message-input .wrap button {
+	  float: right;
+	  border: none;
+	  width: 50px;
+	  padding: 0 0;
+	  cursor: pointer;
+	  background: #ff004b;
+	  color: #f5f5f5;
+	}
+	@media screen and (max-width: 735px) {
+	  #frame .content .message-input .wrap button {
+	    padding: 0 0;
+	  }
+	}
+	#frame .content .message-input .wrap button:hover {
+	  background: #435f7a;
+	}
+	#frame .content .message-input .wrap button:focus {
+		outline: none;
+	}
 
 
 
@@ -812,6 +807,10 @@
 	Thank you<br />
     <a href="#"  onclick="myFunction();">Its my pleasure</a>
 </div>
+<div id="cokies" class="cookie-alert" style="display: none">
+     Feels like responses are slow? Sugaroid's servers are hosted on Microsoft Azure. You can help me out through contributions for open source and free development<br />
+    <a href="https://patreon.com/srevinsaju" target="_blank">Become my Patreon</a>
+</div>
 <div id="frame">
 
 	<div id="djan" class="content">
@@ -849,4 +848,4 @@
 <script>Hello();</script>
 <script>doSomething();</script>
 </body>
-</html>
\ No newline at end of file
+</html>
