/* Created by Louis */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{
   /* --top:rgb(32,44,51);
    --view:#0F171F;
    --green:#25907E;
    --headings:#879098;
    --headers:#879098;
    --contact-name:#E0E4E5;
    --green-t:rgb(0,168,132);
    --msg-color:#809098;
    --thumb:rgb(0,168,132);
    --edit-pencil:#fff;
    --edit-pencil-bg:rgb(32,44,51);   */
    
    --top:rgb(0,128,105);
    --view:white;
    --headers:white;
    --headings:rgb(171,213,205);
    --contact-name:#101617;
    --thumb:white;
    --msg-color:rgb(110,126,136);
    --msg-color:#646474;
    --edit-pencil-bg:rgba(230,230,230,0.7);
    --edit-pencil:#222;
    --green-t:rgb(0,168,132);
  
}

html{
  scroll-behavior:smooth;
}

body{
    width:100%;
    height:100vh;
    max-height:100vh;
    font-family:sans-serif;
    background-color:var(--view);
}

#wrapper{
    width:100%;
    height:100%;
    background-color:transparent;
    max-width:450px;
    margin:auto;
}

#more{
    display:inline-block;
    width:25px;
    height:25px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

#mode{
    width:120%;
    height:120%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    opacity:0;
}


header{
    width:100%;
    height:60px;
    background-color:var(--top);
    padding:0 5px 0 15px;
    color:var(--headers);
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

header span{
    display:inline-block;
    margin-left:15px;
}

header span:nth-child(1)
{
    position:absolute;
    left:20px;
    margin-left:0;
    font-size:18px;
    font-weight:500;
}

#headings{
    width:100%;
    height:47.5px;
    background-color:var(--top);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 10px;
    position:sticky;
    top:0;
    z-index:1;
    color:var(--headings);
    
} 

#headings span{
    transform:translateY(15%);
}

#headings span:not(:nth-child(1))
{
    width:22%;
    font-size:14px;
    text-transform:uppercase;
    font-weight:600;
    text-align:center;
}



#headings span:nth-child(1)
{
    font-size:22px;
}

#headings span:nth-child(2)
{
    color:var(--thumb);
}

a,a:hover,a:focus,a:active
{
    text-decoration:none;
    color:inherit;
    -webkit-tap-highlight-color:rgba(255,255,255,0);
}


#view-holder{
    width:100%;
    height:90%;
    background-color:var(--view);
    overflow:scroll;
    display:flex;
    scroll-snap-type:x mandatory;
    transform:rotateX(180deg);
    scroll-behavior:smooth;
}

.view{
    width:100%;
    min-width:100%;
    transform:rotateX(-180deg);
    scroll-snap-align:start;
    overflow:scroll;
    box-shadow:inset 0 1px 2px rgba(150,150,150,.5);
}

#view-holder::-webkit-scrollbar{
    background-color:var(--top);
    height:3px;
    width:100%;
}


#view-holder::-webkit-scrollbar-thumb{
    background-color:var(--thumb);
}

#view-holder::-webkit-scrollbar-track-piece{
      margin-left:52.5px;
}

#view-holder::-webkit-scrollbar:vertical{
    background-color:transparent;
    height:3px;
}


#view-holder::-webkit-scrollbar-thumb:vertical{
    background-color:transparent;
}

#view-holder::-webkit-scrollbar-track-piece:vertical;
{
      background-color:transparent;
}



.box{
    width:100%;
    height:80px;
    position:relative;
}

.box span{
    display:inline-block;
}

.prof{
    width:50px;
    height:50px;
    border-radius:50%;
    background-color:rgba(0,0,0.8);
    position:relative;
    left:15px;
    top:50%;
    transform:translateY(-50%);
    background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRgVNVAyN3qIQWnz4tStdKwCHnOb5eeV65eKw&usqp=CAU');
    background-size:65px;
    background-repeat:no-repeat;
    background-position:50% 50%;
    border:0.01px solid #999;
}


.nm-wrap{
    display:inline-block;
    width:75%;
    height:80%;
   /*background-color:rgba(255,255,255,0.2);*/
    position:absolute;
    top:50%;
    transform:translateY(-45%);
    left:80px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    flex-direction:column;
}

.nm-wrap .name{
    margin-bottom:5px;
    font-size:18px;
    font-weight:500;
    color:var(--contact-name);
    whitespace:no-wrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.msg{
   /* background-color:rgba(0,0,0,0.5);*/
    width:100%;
    white-space:nowrap;
    
}

.msg .msgcont{
    width:92.5%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    color:var(--msg-color);
    font-size:16px;
    letter-spacing:0.15px;
}

.msg .call-ic{
    transform:translateY(0%);
    font-size:18px;
    color:var(--green-t);
    font-weight:200;
}

.call-box:nth-child(2n) .msg .call-ic{
    color:red;
}

.ic-call{
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    font-size:19px;
    color:var(--green-t);
}

.time{
    position:absolute;
    right:15px;
    top:13px;
    font-size:12px;
    color:var(--msg-color);
    font-weight:500;
}





status-box .prof{
    opacity:1;
}

#ur-status .prof::after{
    content:'+';
    width:22px;
    height:22px;
    color:white;
    background-color:var(--green-t);
    border-radius:50%;
    position:absolute;
    right:-.15em;
    bottom:-.15em;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--contact-name);
}

.txt-status{
    color:var(--msg-color);
    font-size:14px;
    font-weight:500;
    margin:10px 15px;
}

.recent .prof{
    border:2px solid var(--green-t);
    width:57.5px;
    height:57.5px;
    background-color:var(--view);
    left:12.5px;
    background-image:none;
}

.status-box .prof::before{
    content:'';
    width:49.5px;
    height:49.5px;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background-color:white;
    border-radius:50%;
    background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRgVNVAyN3qIQWnz4tStdKwCHnOb5eeV65eKw&usqp=CAU');
    background-size:65px;
    background-repeat:no-repeat;
    background-position:50% 50%;
    
}


.viewed .prof{
    border:2px solid gray;
    width:57.5px;
    height:57.5px;
    background-color:var(--view);
    left:12.5px;
    background-image:none;
}

.fixed{
    
    border-radius:50%;
    position:fixed;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 3px 5px rgba(0,0,0,0.35);
}

.fixed:after{
    font-family:'Material icons';
    display:inline-block;
    font-size:22px;
    color:white;
}

.bottom{
    width:53px;
    height:53px;
    background-color:rgb(0,168,132);
    bottom:30px;
    right:20px;
}


#more-chat:after{
 
   content:'chat';
    
}


#more-status{
    visibility:hidden;
}

#more-status:after{
    font-family:'Material icons round';
   content:'camera_alt';
}


#more-call{
    visibility:hidden;
}

#more-call:after{
    content:'add_ic_call';
}

#edit{
    width:45px;
    height:45px;
    background-color:var(--edit-pencil-bg);
    right:24.25px;
    bottom:110px;
    visibility:hidden;
}

#edit:after{
    content:'edit';
    color:var(--edit-pencil);
    font-size:22px;
}