:root{
    --color: #0b6057;
}


body{
    color:#444844;
    font-family: "Roboto", sans-serif;
    
}

h1,h2,h3,h4,h5,h6{
    font-family: "Roboto", sans-serif;
}
.all{min-height: 95vh; max-width: 480px; margin: 0 auto;}
.elipse{white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;} 
.elipse-2{display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.elipse-3{display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.overflow{overflow: hidden;}
a{text-decoration: none;}
.cover{object-fit:cover}
.uppr{text-transform: uppercase;}
.cpt{text-transform: capitalize;}
.padding{padding: 0!important;}
.w3-padding-4{padding-top:4px !important; padding-bottom:4px !important}
.w3-padding-12{padding-top:12px !important; padding-bottom:12px !important}
.w3-padding-8{padding-top:8px !important; padding-bottom:8 !important}
.margin{margin: 0!important;}
.b-100{font-weight: 100;}
.b-200{font-weight: 200;}
.b-300{font-weight: 300;}
.b-400{font-weight: 400;}
.b-500{font-weight: 500;}
.b-600{font-weight: 600;}
.b-700{font-weight: 700;}
.b-800{font-weight: 800;}
.b-900{font-weight: 900;}
.color, .ok{color: #0b6057 !important}
.bg, .bg-hover:hover{background-color: #0b6057 !important; color: #fff;}
.border{border-color: var(--color) !important;}
.bg2{background-color: #c6d8d6;}
.pale, .ok{background-color: #cee9e6;}
.gray{background-color: #f6f6f6 !important;}
.btn{background-color: #891515 !important; color: #fff}
.error{color:#e0255d}
.header{position: sticky; width: 100%; top:0; z-index:99999999}

.ok{
  padding:16px;
  text-align:center;
  font-size: 16px;
  font-weight:500;
  position:relative
}

.ok::after{
  content:"☺ Click the back button on your device";
  display:block;
  text-align:center;
  color:#666;
  font-size:15px;
  position:absolute;
  top:160px;
  left:0;
  width:100%;
  font-weight:400
}


 .ok ~ form{
   display:none !important;
 }
/* LOGIN, REGISTER, CHANGE PASSWORD */

.l-form {
    max-width: 360px;
    margin: 0 auto;
}

.l-header,.stt-h {
    background-color: var(--color);
    background-image: url("https://images2.imgbox.com/8a/a3/bmmcSKdL_o.jpg");
}

.l-icon {
    width: 46px !important;
    padding: 7px 0;
}

.l-form input:focus {
    outline: none;
    border-color: var(--color);
    background-color: #cee9e6 !important;
}

.r-form label {
    font-weight: 600;
    display: block;
    margin-bottom: 8px;
}

.r-form input[type=text],
.r-form input[type=password],
.r-form textarea,
.r-form select,
.r-form input[type=file],
.list input[type=text],
.chpass input[type=password] {
    display: block;
    padding: 8px 16px;
    border-radius: 8px;
    background-color: #fff;
    width: 100%;
    border: none;
    box-shadow: 0 0 10px #ccc;
    color: #666;
    font-weight: 500;
}

.r-form input[type=text]:focus,
.r-form input[type=password]:focus,
.r-form textarea:focus,
.list input[type=text]:focus {
    box-shadow: 0 0 5px var(--color);
    outline: none;
}

.r-form input[type=submit],
.r-form button,
.list input[type=submit],
.chpass input[type=submit] {
    display: block;
    background-color: var(--color);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    width: 100%;
}

.r-img img {
    width: 100px;
    height: 100px;
    padding: 6px;
}

.list ::before{
  content: "Enter the email used to create the account.";
  display:block;
  padding-bottom:16px;
  color: #0b6057;
}

/* PROFILE */
.p-img img {
    padding: 3px;
    width: 100px;
    height: 100px;
}

.p-info span {
    font-weight: 600;
}

.p-info p {
    margin: 0;
    padding: 8px 16px;
    border-radius: 8px;
    background-color: #fff;
    color: #666;
    margin: 8px 0 16px;
    box-shadow: 0 0 10px #ccc;
}

/* LOST PASSWORD */
.menu {
    text-align: center;
    background-color: var(--color);
    padding: 8px 16px;
    font-size: 24px;
    font-weight: 500;
    color: #fff
}

.list,
.chpass {
    padding: 24px 16px;
    color: #444844;
    font-weight: 600;
}

font[color=red] {
    display: block;
    padding: 0 16px;
}

/* CHANGE PASSWORD */
.chpass::before {
    content: "Change Password";
    color: var(--color);
    border-bottom: 1px solid var(--color);
    padding-bottom: 16px;
    text-align: center;
    display: block;
    font-size: 24px;
    margin-bottom: 16px;
}

/* HEADER */

header{
  position: sticky;
  top:0;
  width:100%;
  z-index: 99999;
}

.logo img {
    width: 38px;
    height: 38px;
}

nav a {
    padding: 8px 16px;
    border-bottom: 2px solid var(--color);
}

nav a:hover {
    background-color: #0d665f;
}

nav a.active {
    border-bottom-color: #fff;
    font-weight: 600;
}

/* CHATS */

.chat {
    border-bottom: 1px solid #dadada;
}

.chat:last-child {
    border-bottom: none;
}

.chat:hover {
    background-color: #cee9e6;
    color: var(--color)
}

.chat img {
    width: 45px;
    height: 45px;
}

.c-info {
    padding: 0 12px;
}

.add {
    position: fixed;
    right: 16px;
    bottom: 60px;
    display: inline-block;
    width: 48px;
    height: 48px;
    padding: 12px 0;
}

/* CHAT ROOM */

.con {
    background-image: url("https://images2.imgbox.com/df/4b/zMzcOMP8_o.jpg");
    background-position: center;
    background-size: cover;
    height: 100vh;
    background-attachment: fixed;

}

.con-img img {
    width: 40px;
    height: 40px;
    margin-right: 8px;
}

.con-text p {
    border-radius: 8px 16px 16px 0;
}

.con-text p::after {
    content: "";
    border-left: 12px solid #cee9e6;
    border-bottom: 12px solid transparent;
    display: block;
    width: 12px;
    height: 12px;
    position: absolute;
    left: 0;
    bottom: -8px;
}

.con-time {
    display: inline-block;
    margin-left: 12px;
}

.con-form {
    margin-bottom: 60px;
    border-bottom:1px solid #ddd;
}

.con-form input[type=text]:focus {
    outline: none;
}

.con-text-2 {
    display: inline-block;
}

.con-text-2 p {
    border-radius: 16px 8px 0 16px;
}

.con-text-2 p::after {
    content: "";
    border-right: 12px solid #0b6057;
    border-bottom: 12px solid transparent;
    display: block;
    width: 12px;
    height: 12px;
    position: absolute;
    right: 0;
    bottom: -8px;
}

.con-time-2 {
    display: inline-block;
    margin-right: 12px;
}



/* USERS */
.users img {
    width: 40px;
    height: 40px
}

/* STATUS */

.s-img img {
    width: 44px;
    height: 44px;
    border: 2px solid var(--color);
    padding: 2px;

}

.s-img .no-border{
  border:none;
}

.st-img img {
    height: 64px;
    width: 56px
}

.statu-h {
    position: fixed;
    background-image: linear-gradient(#000, transparent);
}

.statu-h img {
    width: 52px;
    height: 52px;
    border: 2px solid var(--color);
    padding: 3px;
}

.statu-b {
    height: 100vh;
}

.statu-b img {
    height: 100%;
    width: 100%;
}

.statu-t {
    margin-top: 50%;
}

/* SETTINGS */

.stt-h{
    height: 120px;
    margin-bottom: 140px;
}

.stt-h div{
    padding-top: 60px;
}
.sett img{
    width: 120px;
    height: 120px;
    padding: 8px;
}

.menu2 a{
    display: block;
}

.menu2 li:hover{
    background-color: #cee9e6;
    color: var(--color)
}
.menu2 a i{
    color: var(--color);
    width: 30px;
    text-align: center;
}

.menu2 a i.fa-angle-right{
    float: right;
}