#screen > #desktop > #programBar > #telegram > .tel{
    height: 500px;
    width: 900px;
    position: relative;
    top: -340px;
    left: 250px;
    border-radius: 10px;
    visibility: visible;
    /* transition: 0.1s;         */
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    visibility: hidden;
}

#screen > #desktop > #programBar > #telegram > .sel4{
    visibility: visible;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar1{
    height: 5%;
    width: 100%;
    background-color: rgb(237, 233, 240);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    justify-content: right;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar1 > div{
    width: 40px;
    height: 100%;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar1 > div:hover:not(.close){
    background-color: rgb(215, 207, 223);
}

#screen > #desktop > #programBar > #telegram > .tel > .bar1 > .close:hover{
    background: url(../images/close1.png) no-repeat 50%;
    background-size: 50%;
    background-color: red;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar1 > .close{
    background: url(../images/close.png) no-repeat 50%;
    background-size: 50%;
    border-top-right-radius: 10px;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar1 > .minimize{
    background: url(../images/minimize.png) no-repeat 50%;
    background-size: 50%;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar1 > .small{
    background: url(../images/rectangle.png) no-repeat 50%;
    background-size: 50%;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar2{
    height: 95%;
    width: 10%;
    background-color: rgb(156, 142, 167);
    border-bottom-left-radius: 10px;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar2 > .menu{
    height: 40px;
    width: 40px;
    position: relative;
    top: 10px;
    left: 10px;
    background: url(../images/menu.png) no-repeat 50%;
    background-size: contain;
    cursor: pointer;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar2 > .menu > .holder{
    height: 450px;
    width: 300px;
    background-color: rgb(108, 95, 117);
    z-index: 1;
    position: absolute;
    top: -23%;
    left: -10px;
    visibility: hidden;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar2 > .menu > .sell{
    visibility: visible;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar2 > .menu > .holder > .image{
    height: 30%;
    width: 50%;
    border: 1px solid #ccc;
    border-radius: 50%;
    margin-left: 70px;
    background: url(../images/ahmad.jpg) no-repeat 50%;
    background-size: cover;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar2 > .menu > .holder > .name{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    height: 20px;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar2 > .menu > .holder > .number{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    height: 20px;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar2 > .menu > .holder > div:not(.image, .number, .name){
    height: 8%;
    border: 1px solid rgb(91, 80, 99);
    font-size: 20px;
    display: flex;
    align-items: center;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar2 > .menu > .holder > div:not(.image, .number, .name):hover{
    background-color: rgb(91, 80, 99);
}

#screen > #desktop > #programBar > #telegram > .tel > .bar2 > .menu > .holder > .profile{
    background: url(../images/profile.png) no-repeat 2%;
    background-size: 10%;
    text-indent: 40px;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar2 > .menu > .holder > .newGroup{
    background: url(../images/group.png) no-repeat 2%;
    background-size: 10%;
    text-indent: 40px;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar2 > .menu > .holder > .newChanell{
    background: url(../images/speaker.png) no-repeat 2%;
    background-size: 10%;
    text-indent: 40px;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar2 > .menu > .holder > .contacts{
    background: url(../images/contact.png) no-repeat 2%;
    background-size: 10%;
    text-indent: 40px;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar2 > .menu > .holder > .calls{
    background: url(../images/call.png) no-repeat 2%;
    background-size: 10%;
    text-indent: 40px;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar2 > .menu > .holder > .savedMessages{
    background: url(../images/saved\ message.png) no-repeat 2%;
    background-size: 10%;
    text-indent: 40px;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar2 > .menu > .holder > .setting{
    background: url(../images/setting.png) no-repeat 2%;
    background-size: 10%;
    text-indent: 40px;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar3{
    height:95%;
    width: 30%;
    background-color: rgb(177, 165, 185);
    z-index: 0;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar3 > .search{
    height: 9%;
    width: 80%;
    position: relative;
    top: 10px;
    left: 20px;
    margin-bottom: 20px;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar3 > .search > input{
    height: 85%;
    width: 100%;   
    border-radius: 50px;
    border: 0 none;
    text-indent: 10px;
    background-color: rgb(237, 233, 240);
}

#screen > #desktop > #programBar > #telegram > .tel > .bar3 > .holder{
    height: 85%;
    width: 99%;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar3 > .holder > div{
    height: 20%;
    width: 99.8%;
    border-top: 1px solid rgb(237, 233, 240);
    background-color: rgb(125, 113, 136);
    display: flex;
    justify-content: left;
    gap: 10px;
    cursor: pointer;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar3 > .holder > div:hover{
    background-color: rgb(100, 91, 109);
}

#screen > #desktop > #programBar > #telegram > .tel > .bar3 > .holder > div > .image{
    height: 60px;
    width: 60px;
    border-radius: 50%;
    border: 1px solid #ccc;
    position: relative;
    top: 10px;
    left: 5px;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar3 > .holder > div > .name{
    height: 60px;
    width: 180px;
    position: relative;
    top: 10px;
    left: 5px;
    display: flex;
    align-items: start;
    font-size: 20px;
    color: rgb(237, 233, 240);
}

#screen > #desktop > #programBar > #telegram > .tel > .bar3 > .holder > .p1 > .image{
    background: url(../images/saved.png) no-repeat 50%;
    background-size: 80%;
    background-color: blueviolet;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar3 > .holder > .p2 > .image{
    background: url(../images/a.png) no-repeat 50%;
    background-size: 70%;
    background-color: cadetblue;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar3 > .holder > .p3 > .image{
    background: url(../images/m.png) no-repeat 50%;
    background-size: 70%;
    background-color: aquamarine;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar3 > .holder > .p4 > .image{
    background: url(../images/r.png) no-repeat 50%;
    background-size: 70%;
    background-color: aqua;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar3 > .holder > .p5 > .image{
    background: url(../images/a.png) no-repeat 50%;
    background-size: 70%;
    background-color: cadetblue;
}


#screen > #desktop > #programBar > #telegram > .tel > .bar4{
    height: 95%;
    width: 60%;
    background-color: rgb(73, 66, 78);
    border-bottom-right-radius: 10px;
}

#screen > #desktop > #programBar > #telegram > .tel > .bar4 > .holder{
    height: 30px;
    width: 300px;
    background-color: rgb(228, 223, 231);
    border-radius: 50px;
    margin: auto;
    margin-top: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}