style1.css

*{
    margin: 0%;
    padding: 0%;
}

body{
    background-color: #F8F8FA;
    width: 100vw;
    height: 100vh;
    display: flex;
    padding-bottom: 30px;
}

.left{
    padding-left: 20px;
    padding-right: 20px;
    width: 15vw;
    height: 120vh;
    background-color: #343549;
}
.nav-head{
    padding-top: 20px;
    font-size: 1.5rem;
    color: white;
    display: flex;
    justify-content: center;
    text-align: center;
}

.nav-s{
    font-size: 0.7rem;
    margin-top: 30px;
    color: #575C62;
}
.nav-item{
    width: 15vw;
    display: flex;
    justify-content: space-between;
    height: 50px;
}
/* .nav-item:first-of-type{
    background-color: #EDECF1;
} */

.nav-list{
    margin-top: 25px;
}
.nav-list div:first-child{
    display: flex;
    width: 10vw;
}
.nav-list span{
    margin-left: 15px;
    color: #575C62;
}

.nav-list i{
    color: #575C62;
}

#noti-box{
    color: white;
    border-radius: 40%;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    height: 1rem;
    width: 1.2rem;
}


/* header starts here */

.right{
    height: 100vh;
    width: 85vw;
}

.header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 8vh;
    background-color: #EDECF1;
}
.head-left{
    display: flex;
    align-items: center;
    height: 30%;
}

.head-left i{
    font-size: 1.3rem;
    margin-left: 20px;
    color: #575C62;
}

.Cre-opt{
    margin-left: 20px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    background-color: white;
    border: none;
    height: 30px;
    width: 80px;
    border-radius: 3px;
}

 select{
    border: none;
    color: #575C62;
}

.head-right select{
    border: none;
    background-color: #EDECF1;
}

.head-right{
display: flex;
align-items: center;
justify-content: space-between;
height: 30%;
width: 40%;
margin-right: 10px;
}
.head-right i{
    color: #575C62;
    font-size: 1.2em;
}

.input-box{
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    background-color: white;
}

.input-box input{
    margin-left: 10px;
    border: none;
}

.input-box i{
    font-size: 1rem;
    padding-right: 10px;
    color: #575C62;
}

.input-box input:focus{
    border: none;
    outline: none;
}

.noti-head{
    position: relative;
}

.noti-head div{
    display: flex;
    text-align: center;
    justify-content: center;
    background-color: #EC4561;
    color: white;
    height: 15px;
    font-size: 0.8rem;
    width: 20px;
    border-radius: 15px;
    position: absolute;
    top:-10px;
    right: -8px;
}

.pro-img{
    height: 35px;
    width: 35px;
    background-size: contain;
    border-radius: 100%;
}

.sec-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    margin-left: 25px;
    margin-right: 25px;
    /* width: 85vw; */
}

#setting-box{
    display: flex;
    justify-content: space-around;
    width: 90px;
    height: 30px;
    align-items: center;
    background-color:  #626ED4;
    border-radius: 3px;
}

#setting-box i{
    font-size: 0.9rem;
    color: white;
}

#setting-box span{
    font-size: 0.9rem;
    color: white;
}

.Dash-head h3,span{
    color: #575C62;
}

.cards{
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.card{
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 150px;
    width: 260px;
    background-color: #626ED4;
    border-radius: 3px;
}

.img-box{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 55px;
    width: 55px;
    background-color: #919aed;
    border-radius: 3px;
}
.img-box img{
height: 40px;
}
.card-top{
    margin-left: 15px;
    display: flex;
}
.card-top-r{
    display: flex;
    justify-content: space-between;
    margin-top: 15px;
}
#small-card{
    margin-left: 15px;
display: flex;
flex-direction: column;
justify-content: space-between;
}

#small-card h5{
color:  #a4abea;
}

#small-card span{
    font-size: 1.7rem;
    color: white;
}


.card-bottom{
    display: flex;
    justify-content: space-between;
    margin-left: 15px;
    margin-bottom: 25px;
    margin-right: 30px;
}

.card-bottom span{
    color: #a4abea;
}

.card-bottom i{
    color: #a4abea;
}

#tag{
    color: white;
    font-size: 0.9rem;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: right;
    padding-right: 5px;
    float: right;
    background-color: #2AA39A;
    height: 25px;
    width: 70px;
    clip-path: polygon(100% 0, 100% 47%, 100% 100%, 0 100%, 26% 42%, 5% 0);
}

.main-div{
    margin-top: 30px;
    margin-left: 20px;
    margin-right: 20px;
    justify-content: space-between;
    display: flex;
}

.t-heading{
    margin-top: 25px;
    margin-left: 15px;
    margin-bottom: 25px;
    color: #575C62;
}

.trasaction{
    height: 55vh;
    width: 53vw;
    background-color: white;
    border-radius: 4px;
    box-shadow: 1px 0px 5px -2px rgba(0,0,0,0.75);
-webkit-box-shadow: 1px 0px 5px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 0px 5px -2px rgba(0,0,0,0.75);
}



table th{
    text-align: left;
}
table{
    padding-left: 15px;
    padding-right: 15px;
}

#tr-cell{
    height: 40px;
}

#tr-data{
    height: 65px;
}

.pro-tbl{
    display: flex;
    align-items: center;
}

.pro-tbl span{
padding-left: 10px;
}
.pro-table{
    margin-top: 8px;
    height: 50px;
    width: 50px;
    background-size: contain;
    border-radius: 500px;
    object-fit: cover;
}
#tbl-btn div{
    text-align: center;
    border-radius: 3px;
    color: rgb(240, 232, 232);
    width: 70px;
    background-color: #2AA39A;
}

#tbl-edit div{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #626ED4;
    height: 30px;
    width: 40px;
    color: rgb(240, 232, 232);
    border-radius: 3px;
}

.trasaction{
    overflow: scroll;
}

.chat{
    height: 55vh; 
    width: 23vw;
    background-color: white;
    border-radius: 4px;
    box-shadow: 1px 0px 5px -2px rgba(0,0,0,0.75);
-webkit-box-shadow: 1px 0px 5px -2px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 0px 5px -2px rgba(0,0,0,0.75);
overflow: scroll;
}

.chat-card{
    padding-top: 10px;
}

.chat-align{
    height: 40vh; 
    width: 22vw;
    overflow: scroll; 
}


.chat-box1{
    padding-left: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    background-color: #E1E4F7;
    height: 60px;
    width: 100px;
    clip-path: polygon(0 0, 96% 0, 100% 4%, 100% 95%, 96% 100%, 14% 100%, 9% 96%, 9% 8%);
}

.chat-box2{
    padding-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    background-color: #EFF0F4;
    height: 60px;
    width: 100px;
    clip-path: polygon(2% 0, 100% 0, 95% 7%, 95% 96%, 92% 100%, 3% 100%, 0 97%, 0 4%);
}

.chat-pro{
    display: flex; 
    flex-direction: column;
    text-align: center;
}
.chat-align{
    margin-left: 10px;
    margin-right: 10px;
}

.chat-card:nth-child(even){
    display: flex;
    justify-content: right;
    align-items: flex-end;

}

.search-chat-box{
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    margin-left: 25px;
    margin-right: 25px;

}
.search-chat-box input{
    padding: 5px;
    width: 200px;
    color: rgb(238, 231, 231);
}
.search-chat-box input{
    margin-left: 10px;
}

.search-chat-box div{
    color: white;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 45px;
    background-color: #2AA39A;
    border-radius: 3px;
}



@media only screen and (max-width: 1196px) {
    .main-div{
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
    .chat{
        height: 60vh;
        margin-top: 30px;
        width: 53vw;
    }
    .chat-align{
        width: 50vw;   
    }

    .left{
        height: 190vh;
    }
    .right{
        height: 190vh;
        width: 85vw;
    }
  }

  @media only screen and (max-width:  1135px) {
    .head-right{
        height: 30%;
        width: 60%;
    }
  }


  @media only screen and (max-width:  938px) {
    .trasaction{
        width: 70vw;
    }
  }
  

  @media only screen and (max-width:  845px) {
    .left{
        display: none;
    }
    .right{
        width: 100vw;
    }
    .header{
        width: 100vw;
    }
  }

  @media only screen and (max-width:  520px) {
    .input-box{
        display: none;
    }
  }