@import url(https://fonts.googleapis.com/css?family=Poppins:20);body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}body,html{font-family:"Roboto Condensed",sans-serif;height:auto;min-height:100%;margin:0;padding:0}input:focus{border:1px solid;outline:none}i{cursor:pointer}textarea{font-size:18px}.chat-index{grid-template-columns:.65fr 3fr;border:1px solid #d8d8d8}.chat-index .chat-column-left{border-right:none}.chat-index .chat-column-left .chat-profile{background:#048d84;color:#fff;padding:5px 10px}.chat-index .chat-column-left .chat-profile_content{display:grid;justify-content:center;margin:0 0 25px}.chat-index .chat-column-left .chat-profile_content .avatar-user{width:100px;height:100px;border-radius:50px;overflow:hidden;margin-bottom:10px}.chat-index .chat-column-left .chat-profile_content .avatar-user img{width:100px;height:100px}.chat-index .chat-column-left .chat-profile_content .user-fullname{font-weight:700;text-align:center}.chat-index .chat-column-left .chat-list_search{position:relative}.chat-index .chat-column-left .chat-list_search .search-icon{left:5px;position:absolute;top:10px;font-size:19px;color:#a2a2a2}.chat-index .chat-column-left .chat-list_search input{padding:5px 15px 5px 25px;width:100%;border-radius:4px;box-sizing:border-box;height:35px;border:1px solid #d8d8d8}.chat-index .chat-column-left .chat-list_search .close-icon{right:0;position:absolute;top:10px;font-size:19px;color:#a2a2a2;display:none}.chat-index .chat-column-left .chat-list_rooms{overflow:auto;height:auto}.chat-index .chat-column-left .chat-list_content{border:1px solid #d8d8d8;display:grid;grid-template-columns:65px 1fr;padding:10px}.chat-index .chat-column-left .chat-list_content .avatar{width:50px;height:50px;border-radius:25px;border:1px solid #d8d8d8;overflow:hidden;object-fit:fill}.chat-index .chat-column-left .chat-list_content .avatar img{width:65px;height:65px}.chat-index .chat-column-left .chat-list_content_description_header{display:grid;grid-template-columns:1fr .1fr}.chat-index .chat-column-left .chat-list_content_description_body{display:grid;grid-template-columns:3fr .1fr;grid-column:1/3;grid-row:2;align-items:center}.chat-index .chat-column-left .chat-list_content_description_body_message{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.chat-index .chat-column-left .chat-list_content_description_body_badge{background:#048d84;border-radius:20px;width:25px;text-align:center;color:#fff;padding:3px 0}.chat-index .chat-column-right .chat-info{display:grid;grid-template-columns:5fr 1fr;padding:5px 10px;background:#037971;color:#fff}.chat-index .chat-column-right .chat-info_user_fullname{font-weight:700}.chat-index .chat-column-right .chat-info_user_last_visit{color:hsla(0,0%,100%,.8)}.chat-index .chat-column-right .chat-info_search{display:grid;align-content:center}.chat-index .chat-column-right .chat-info_search_icon{text-align:right}.chat-index .chat-column-right .chat-info_search_icon i{font-size:20px}.chat-index .chat-column-right .chat-message{border-left:1px solid #d8d8d8;overflow:auto;height:93%;width:100%;padding:7px}.chat-index .chat-column-right .chat-message_content{width:50%;padding:5px;margin:10px;border-radius:8px}.chat-index .chat-column-right .chat-message_content.interlocutor-message{float:left;background:#d8d8d8}.chat-index .chat-column-right .chat-message_content.own-message{float:right;border:1px solid #d8d8d8}.chat-index .chat-column-right .chat-message_content_date{text-align:right;font-size:14px;color:#847979}.chat-index .chat-column-right .chat-form{border:1px solid #d8d8d8;align-items:center}.chat-index .chat-column-right .chat-form_form{display:grid;grid-template-columns:.1fr 4fr .1fr;align-items:center}.chat-index .chat-column-right .chat-form_form_attach{justify-content:center;align-items:center;margin:5px}.chat-index .chat-column-right .chat-form_form_attach:hover{color:#048d84}.chat-index .chat-column-right .chat-form_form_message{margin-right:5px}.chat-index .chat-column-right .chat-form_form_message textarea{width:calc(100% - 10px);border:1px solid hsla(0,0%,100%,0);outline:none;font-size:15px;resize:none}.chat-index .chat-column-right .chat-form_form_submit button{background:none;border:1px solid hsla(0,0%,100%,0)}.chat-index .chat-column-right .chat-form_form_submit button:hover{color:#048d84}.link-modal{color:#fff}@media only screen and (max-width:768px){.chat-index .chat-column-left .chat-list_content .avatar{width:50px;height:50px;border-radius:25px;border:1px solid #d8d8d8;overflow:hidden;object-fit:fill;display:none}#socket_id,.logox{display:none}.chat-index .chat-column-left .chat-profile{background:#048d84;color:#fff;padding:5px;font-size:smaller}}.chat-index{display:grid;margin:0;grid-template-columns:.005fr 4fr .8fr .005fr;border:none}.namex{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:top;justify-content:left;padding:10px}.video-index{position:relative;display:block;margin-left:auto;margin-right:auto;width:27vh}.section2{border:1px solid #dadada;max-height:750px;overflow:auto}.room-owner-name{display:flex;flex-wrap:nowrap;padding-left:5px;padding-right:5px;margin:0}#roomId{font-size:16px}#roomId,#roomId:focus{font-weight:700;padding-left:5px;padding-right:5px;margin:0;border-style:none;width:325px;height:24px}#roomId:focus{outline:none}.flex-container-user-online{display:flex;flex-wrap:nowrap;background:linear-gradient(-45deg,#fdbb2d,#b21f1f,#1a2a6c);-webkit-animation:gradientBG 10s ease infinite;animation:gradientBG 10s ease infinite}@-webkit-keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}@keyframes gradient{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.flex-container-user-online>div{padding:5px}.flex-container-user-online>div img{background-color:#f1f1f1;width:50px;margin:5px;text-align:center;line-height:50px;font-size:30px;border-radius:35px 35px;border-color:#a9a9a9 #929292;border-style:solid}.flex-container-user-online>div p{color:#fff;text-align:center;margin-top:-15px;margin-bottom:-5px}.section2>div{padding:5px}.section2>div p{color:#000;font-size:2vh}#confirm{display:flex;justify-content:center;flex-direction:column;color:#696969;background:#fff;position:fixed;width:500px;height:400px;border-radius:2px;margin-top:150px}.padding{padding:20px}.love{display:flex;justify-content:center;align-self:center}.yes{flex-direction:row}#confirm button{border-radius:3px;background-color:tomato;border:1px solid #fff}#confirm button,#confirm button:hover{display:flex;justify-content:center;align-self:center;padding:20px 30px;margin:10px 20px;color:#fff;font-family:Poppins}#confirm button:hover{border-radius:2px;background-color:red;-webkit-animation:none;animation:none;-webkit-transform:scale(1.1);transform:scale(1.1);border:1px solid #fff;transition:background 50ms ease-out,-webkit-transform .15s ease;transition:background 50ms ease-out,transform .15s ease;transition:background 50ms ease-out,transform .15s ease,-webkit-transform .15s ease}#confirm .message{text-align:left;font-family:poppins}#confirm .message,h2{color:#789;padding:10px 20px}h2{margin:0;font-family:Poppins;font-size:25px}@media only screen and (max-width:768px){.flex-container-user-online>div{padding:3px}.flex-container-user-online>div img{background-color:#f1f1f1;width:40px;margin:5px;text-align:center;line-height:40px;font-size:20px;border-radius:35px 35px}.flex-container-user-online>div p,.room-owner-name{display:none}#roomId,#roomId:focus{font-weight:700;padding-left:5px;padding-right:5px;margin:0;border-style:none;width:325px;height:24px}#roomId:focus{outline:none}}*{padding:0;margin:0;box-sizing:border-box}body{overflow:hidden}label{color:#555}::-webkit-input-placeholder{color:#2b817b;opacity:1}:-ms-input-placeholder{color:#2b817b;opacity:1}::placeholder{color:#2b817b;opacity:1}.wave{position:fixed;height:100%;left:0;bottom:0;z-index:-1}.container{width:100vw;height:100vh;display:grid;grid-template-columns:repeat(2,1fr);grid-gap:7rem;padding:0 2rem}.img{display:flex;justify-content:flex-end;align-items:center}.img img{width:500px}.login-container{display:flex;align-items:center;text-align:center}form{width:360px}.avatar{width:100px}form h2{font-size:2.9rem;margin:15px 0;color:#037971}.input-div{position:relative;display:grid;grid-template-columns:7% 93%;margin:25px 0;padding:5px;border-bottom:2px solid #037971}.input-div:after,.input-div:before{content:"";position:absolute;bottom:-2px;width:0;height:2px;background-color:#38d39f;transition:.3s}.input-div:after{right:50%}.input-div:before{left:50%}.input-div.focus .i i{color:#38d39f}.input-div.focus div h5{top:-5px;font-size:15px;color:#38d39f}.input-div.focus:after,.input-div.focus:before{width:50%}.input-div.one{margin-top:0}.input-div.two{margin-bottom:4px}.i{display:flex;justify-content:center;align-items:center}.i i{color:#037971;transition:.3s}.input-div>div{position:relative;height:45px}.input-div>div h5{position:absolute;left:10px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);color:#2b817b;font-size:18px;transition:.3s}.input{position:absolute;width:100%;height:100%;top:0;left:0;border:none;outline:none;background:none;padding:.5rem .7rem;font-size:1.2rem;font-family:"Poppins",sans-serif;color:#555}a{display:block;text-align:right;text-decoration:none;color:#999;font-size:.9rem;transition:.3s}a:hover{color:#037971}.btn{display:block;width:100%;height:50px;border-radius:25px;margin:1rem 0;font-size:1.2rem;outline:none;border:none;background-image:linear-gradient(90deg,#32be8f,#38d39f,#32be8f);cursor:pointer;color:#fff;text-transform:uppercase;font-family:"Poppins",sans-serif;background-size:200%;transition:.5s}.btn:hover{background-position:100%}@media screen and (max-width:1050px){.container{grid-gap:5rem}}@media screen and (max-width:1000px){form{width:290px}form h2{font-size:2.4rem;margin:8px}.img img{width:400px}}@media screen and (max-width:900px){.img{display:none}.container{grid-template-columns:1fr}.wave{display:none}.login-container{justify-content:center}}.list ul:nth-child(odd){background-color:#e9e9e9}.list ul:nth-child(2n){background-color:#fff}@media screen and (min-width:800px){.list{display:table;width:50%;margin-left:25%;margin-right:40%}.list ul{display:table-row}.list ul:first-child li{background-color:#069370;color:#fff}.list ul>li{display:table-cell;padding:.5em 1em}}@media screen and (max-width:799px){.list ul{border:1px solid #ccc;display:block;list-style:none;margin:1em;padding:.5em 1em}.list ul:first-child{display:none}.list ul>li{display:block;padding:.25em 0}.list ul:nth-child(odd)>li+li{border-top:1px solid #ccc}.list ul:nth-child(2n)>li+li{border-top:1px solid #eee}.list ul>li:before{color:#000}.list ul>li:before,.list ul li a{content:attr(data-label);display:inline-block;font-size:75%;font-weight:700;text-transform:capitalize;vertical-align:top;width:20%}.list p{margin:-1em 0 0 50%}}@media screen and (max-width:349px){.list ul>li:before{display:block}.list p{margin:0}}.profile-detail{height:auto;width:50%;margin-left:25%;margin-right:40%}.profile-detail ul>li{padding:10;list-style:none}.join-room-input{padding:10px;width:21em;font-weight:700;color:#037971}.join-room-button{background-color:#069370}.join-room-button,.join-room-button:hover{padding:10px;color:#fff;border-radius:0 50px 50px 0}.join-room-button:hover{background-color:#09bd90}.create-room{float:right}.create-room,.room-owned{font-size:20px;padding:10px}@media screen and (max-width:799px){.profile-detail{height:auto;width:95%;margin:1em}.profile-detail ul>li{display:block;padding:.25em 0}}body{margin:0;padding:0;font-family:"Poppins",sans-serif}header{position:relative;max-width:1200px;margin:20px auto;padding:10px;background:#fff;box-sizing:border-box;border-radius:4px;box-shadow:0 2px 5px rgba(0,0,0,.2)}.logo-pic{border-radius:50px 25px}.logo,.logo-pic{color:#069370}.logo,.logo-pic,.logo:hover{height:60px;font-size:36px;line-height:60px;padding:0 3px;text-align:center;box-sizing:border-box;float:left;font-weight:700;text-decoration:none}.logo:hover{color:#09bd90}nav{float:right}.clearfix{clear:both}nav ul{margin:0;padding:0;display:flex}nav ul li{list-style:none}nav ul li a{display:block;margin:10px 0;padding:10px 20px;text-decoration:none;color:#262626}nav ul li a.active,nav ul li a:hover{background:#069370;color:#fff;transition:.5s}@media(max-width:1200px){header{margin:20px}}@media(max-width:768px){.menu-toggle{display:block;width:40px;height:40px;margin:10px;background:#ccc;float:right;cursor:pointer;text-align:center;font-size:30px;color:#069370}.menu-toggle:before{content:"\f0c9";font-family:fontAwesome;line-height:40px}.menu-toggle.active:before{content:"\f00d"}nav{display:none!important}nav.active{display:block!important;width:100%;float:left}nav.active ul{display:block}nav.active ul li a{margin:0}}