@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
 html {
	 display: grid;
}
 body {
	 display: grid;
}
 .container-chatbox {
	 position: relative;
	 margin: 5% auto;
	 width: 620px;
	 height: 450px;
}
@media screen and (max-width: 767px){
    .container-chatbox{
        width: 200px !important;
        margin: 0;
        margin-left: 10px;
        margin-top: 20px;
    }
    .chatbox {
        left: 65% !important;
        height: 80% !important;
        width: 110% !important;
    }
    .messages{
        width: 60% !important;
    }
    .people{
        width: 80% !important;
        left: -30px !important;
    }
    .people .time{
        right: 0 !important;
    }
    .people .title{
        margin-left: 0 !important;
    }
    .people .preview{
        margin-left: -10px !important;
        font-size: .8em !important;
    }
    .typing .bubble{
        padding: 0 13px 9px 13px !important;
    }
    .chatbox-input::placeholder{
        font-size: 1.2rem/3 !important;
    }
    .profile-chatbox .avatar{
        left: 30px;
    }
    .lower{
        margin-top: 110px !important;
    }
    .typing{
        top: 91% !important;
    }
    .hide-name-mobile{
        display: block !important;
    }
    .hide-name-desktop{
        display: none !important;
    }
    .name2{
        left: 28px !important;
    }
    .bottom-bar{
        bottom: -115px !important;
    }
}

 .messages {
	 position: absolute;
	 background: #f9fbff;
	 opacity: 0.5;
	 width: 30%;
	 height: 70%;
	 top: 2.5%;
	 left: 5%;
	 border-radius: 10px 0 0 10px;
	 box-shadow: -5px 5px 10px rgba(119, 119, 119, .5);
}
/*chat messages */
 .people {
	 position: absolute;
	 list-style-type: none;
	 width: 30.2%;
	 left: -10px;
	 top: 24.7%;
	 line-height: 0.7em;
}
 .people .title {
	 text-transform: uppercase;
	 font-size: 0.7em;
	 margin-left: 14px;
	 letter-spacing: 1px;
	 color: #e3b04b;
	 padding-right: 10px;
}
 .people .time {
	 font-size: 0.3em;
	 color: #e3b04b;
	 position: absolute;
	 right: 10px;
}
 .people .preview {
	 color: #222;
	 margin-left: 14px;
	 font-size: 0.5em;
}
 .person {
	 padding: 12px 0 12px 12px;
	 border-bottom: 1px solid #e3b04b;
	 cursor: pointer;
}
 .person:hover {
	 background: #f9fbff;
	 transition: all 0.3s ease-in-out;
}
 .focus {
	 background: #f9fbff;
}
 .profile-chatbox {
	 position: absolute;
	 left: 16%;
	 top: 7%;
}
 .name2 {
	 position: absolute;
	 top: 50px;
	 left: 12px;
	 text-transform: uppercase;
	 color: #222;
	 font-size: 0.8em;
	 letter-spacing: 2px;
	 font-weight: 500;
}

.hide-name{
    display: none;
}

 .email {
	 color: #f9fbff;
	 font-size: 0.5em;
	 margin-left: -30px;
	 margin-top: 2px;
}
 .chatbox {
	 position: absolute;
	 left: 35%;
	 height: 75%;
	 width: 60%;
	 border-radius: 10px;
	 box-shadow: 5px 5px 15px rgba(119, 119, 119, 0.5);
}
 .top-bar {
	 width: 100%;
	 height: 60px;
	 background: #f9fbff;
	 border-radius: 10px 10px 0 0;
}
 .avatar {
	 width: 35px;
	 height: 35px;
	 background: #e3b04b;
	 border-radius: 50%;
	 position: absolute;
	 top: 11px;
	 left: 15px;
}
 .avatar p {
	 color: #f9fbff;
	 margin: 7px 12px;
}
 .name {
	 position: absolute;
	 top: 22px;
	 text-transform: uppercase;
	 color: #777;
	 font-size: 0.8em;
	 letter-spacing: 2px;
	 font-weight: 500;
	 left: 60px;
}
 .menu {
	 position: absolute;
	 right: 10px;
	 top: 20px;
	 width: 10px;
	 height: 20px;
	 cursor: pointer;
}
 .menu:hover {
	 transform: scale(1.1);
	 transition: all 0.3s ease-in;
}
 .icons {
	 position: absolute;
	 color: #e3b04b;
	 padding: 10px;
	 top: 5px;
	 right: 21px;
	 cursor: pointer;
}
 .icons .fas {
	 padding: 5px;
	 opacity: 0.8;
}
 .icons .fas:hover {
	 transform: scale(1.1);
	 transition: all 0.3s ease-in;
}
 .dots {
	 width: 4px;
	 height: 4px;
	 border-radius: 50%;
	 background-color: #e3b04b;
	 box-shadow: 0px 7px 0px #e3b04b, 0px 14px 0px #e3b04b;
}
 .middle {
	 position: absolute;
	 background: #f9fbff;
	 width: 100%;
	 opacity: 0.85;
	 height: 100%;
}
 .incoming {
	 position: absolute;
	 width: 100%;
	 height: 100%;
	 padding: 20px;
}
 .incoming .bubble {
	 background: #b2b2b2;
	 float: left;
}
 .typing {
	 position: absolute;
	 top: 78%;
	 left: 20px;
}
 .typing .bubble {
	 background: #eaeaea;
	 padding: 8px 13px 9px 13px;
}
 .ellipsis {
	 width: 5px;
	 height: 5px;
	 display: inline-block;
	 background: #b7b7b7;
	 border-radius: 50%;
	 animation: bounce 1.3s linear infinite;
}
 .one {
	 animation-delay: 0.6s;
}
 .two {
	 animation-delay: 0.5s;
}
 .three {
	 animation-delay: 0.8s;
}
 .bubble {
	 position: relative;
	 display: inline-block;
	 margin-bottom: 5px;
	 color: #f9fbff;
	 font-size: 0.7em;
	 padding: 10px 10px 10px 12px;
	 border-radius: 20px;
}
 .lower {
	 margin-top: 100px;
}
 .outgoing {
	 position: absolute;
	 padding: 20px;
	 right: 0;
	 top: 1%;
	 width: 100%;
	 height: 100%;
}
 .outgoing .bubble {
	 background: #e3b04b;
	 float: right;
	 color: #222;
}
 .bottom-bar {
	 position: absolute;
	 width: 100%;
	 height: 55px;
	 bottom: -76px;
	 background: #f9fbff;
	 border-radius: 0 0 10px 10px;
}
 .left {
	 left: 0px;
}
 .chatbox-input {
	 padding: 0 7px 7px 0;
	 width: 74%;
	 left: 5%;
	 position: absolute;
	 border: 0;
	 top: 13px;
	 background: #f9fbff;
	 color: #e3b04b;
}
 .chatbox-input::placeholder {
	 color: #222;
	 font-size: 12px;
}
 .chatbox-input:focus {
	 color: #777;
	 outline: 0;
}
 .chatbox-button {
	 position: absolute;
	 border: 0;
	 font-size: 1em;
	 color: #e3b04b;
	 opacity: 0.8;
	 right: 17px;
	 cursor: pointer;
	 outline: 0;
	 width: 60px;
	 height: 55px;
}
 .chatbox-button:hover {
	 transform: scale(1.1);
	 transition: all 0.3s ease-in-out;
	 color: #79c7c5;
}

 @keyframes bounce {
	 30% {
		 transform: translateY(-2px);
	}
	 60% {
		 transform: translateY(0px);
	}
	 80% {
		 transform: translateY(2px);
	}
	 100% {
		 transform: translateY(0px);
		 opacity: 0.5;
	}
}