@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap');

body  .container
{
    display: flex;
    width: 100%;
}
.nav
{
    width:21px;
    height: 100vh;
    
    border-right: 1px solid;
    border-color: rgb(231, 220, 220);
    display: flex;
    flex-direction: row;
    padding: 25px;
    overflow: hidden;
    position: fixed;
}

.nav .logo img{

    width: 40px;
    height: 25px;
    margin-top: 8px;
    margin-left: -10px;
    
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}
.nav_icon{
    display: flex;
    margin-left: -71px;
    align-items: center;
}
.nav_icon ul li{
    
    list-style: none;
    margin-bottom: 30px;
    
}
.nav_icon ul li span  {
    font-size: 29px;
    margin-left: -3px;
   
}

.nav_icon ul li span i {
    font-size: 23px;
    margin-left: 3px;
}
.nav .user_icon span{
    font-size: 40px;
    display: flex;
    align-items: baseline;
    margin-top: 89vh;
    margin-left: -37px;
}
.main {
    width: 700px;
    
    display: flex;
    flex-direction: column;
    padding: 0px 178px 0 230px;
    border-right: 1px solid;
    border-color: rgb(231, 220, 220);
   
}
.main .body_nav {
    height: 66px;
    border-bottom: 1px solid;
    border-color: rgb(231, 220, 220);
    width: 790px;
    display: flex;
    justify-content: flex-start;
    
}


.main ul{
    flex-direction: row;
    display: flex; 
    margin-left: -42px;

}

.main ul li {
    display: flex;
    list-style: none;
    margin-right: 25px;
   
}
.main ul li span{
    
    margin-top: 16px;
}

.nav_text{
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    

}
.main .content
{
    width: 113%;
    border-bottom: 1px solid;
    height: 247px;
    display: flex;
    flex-direction: column;
    border-color: rgb(231, 220, 220);
   
    margin-top: 45px;
}
.content .content_head {
    
    height: 43px;
    justify-content: flex-start;
    display: flex;
    color: #292929;


}

.content .content_head li{
    font-family: 'Roboto', sans-serif;
    
    margin-right: 17px;

}

.content .content_head span img 
{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    margin-bottom: 1px;
}
.main .content .content_head ul
{
    flex-direction: row;
    margin-top: -11px;
    display: flex;
    margin-left: -25px;
}
.content .content_head  .date {
    color: rgb(115, 111, 111);
    font-weight: 900;
    
    
}
.star {
    width: 20px;
    height: 20px;
}
.content .content_header
{
    
    display: flex;
    margin-top: -19px;
    width: 75%;
    margin-left: 21px;
    flex-direction: column;

}
.content .content_header h2{

    font-family:sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;

    font-weight: 800;
    color: rgba(41, 41, 41, 1);
    font-size: 22px;

}

.content .content_body{
    
    display: flex;
    margin-top: -25px;
    width: 75%;
    margin-left: 21px;
    flex-direction: column;

}

.content .content_body p{
    
   
    font-weight: 400;
    font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
     color: rgba(41, 41, 41, 1);
}
.content .content_footer .leftside input{
border: none;
border-radius: 11px;
width: 96px;
margin-top: 9px;
height: 27px;
}

.content .content_footer .leftside ul{

    display: flex;
    flex-direction: row;

}
.content .content_footer .leftside li{

    display: flex;
    flex-direction: row;

}
.content .content_footer .leftside li p{
    font-size: 13px;
    font-weight: 400;
    font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
  
    color: rgba(117, 117, 117, 1);
}
 
.content_footer {
    display: flex;
    flex-direction: row;
}
.content_footer .leftside{
    flex-direction: row;
}
.content_footer .rightside{
    flex-direction: row-reverse;
    margin-left: 124px;
}


.content_footer .rightside ul{
    color: #292929;
}
.content_footer .rightside ul li span{
    color: #000000;
    font-weight: bolder;
}
.content .content_img
{
    width: 115px;
    height: 115px;
    overflow: hidden;
    display: flex;
    margin-left: 676px;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;
    margin-top: -201px;
}
.content .content_img img{
    width: 115px;
    height: 115px
}
.side{
    width: 364px;
    display: flex;
    flex-direction: column;
    padding: 0 31px;
    min-height: 200px;

    overflow: auto;
    position: sticky;
}
.side .access 
{
    
    width: 329px;
    height: 40px;
    background-color: black;
    border: none;
    color: rgb(255 255 255);
    border-radius: 23px;
    justify-content: center;
    margin-left: -20px;
    /* z-index: -1; */
    
    
}
.side ul li{
    list-style-type: none;
    margin-top: 31px;

}

.side .Search_input{
    width: 329px;
    height: 40px;
    margin-left: -20px;
    padding-left: 37px;
    border-radius: 23px;
    font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    border: 1px solid;
    border-color:rgba(230, 230, 230, 1);
}

.side span{
    position: absolute;
    
    margin-left: -316px;
    margin-top: 10px;
}
.side .staff_picker {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.side .staff_picker i {
   
        color: green;
        margin-top: 4px;
        font-size: 2.5rem;
        position: absolute;
}
.side .staff_picker h4 {
    margin-left: 36px;
    position: absolute;
    margin-top: 16px;

}
.side .side_staff{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 77px;
   
    margin-top: 5px;


}
.side_staff img {
    width: 20px;
    border-radius: 50%;
}
.side .side_staff h2{
    
    font-size: 16px;
    font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: rgb(46, 45, 45);
    margin: 0;
    font-weight: 800;
    
    margin-top: 6px;

   
}


.side .side_staff h4
{
    font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    margin: 0;
    
    color: rgba(41, 41, 41, 1);
    margin-top: -21px;
    margin-left: 28px;
}

.staff_header {
    margin-left: -14px;
}

.staff_col{
    margin-top: 76px;
}
.side a{
    color: green;
    text-decoration: none;
    font-size: 0.9rem;
}
.reco_header h3{
    font-size: 16px;
    font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: rgba(41, 41, 41, 1);
}
.reco input{
    margin-bottom: 15px;
    height: 30px;
    border: none;
    margin-right: 19px;
    border-radius: 46px;
}
.follow h4{
    font-size: 16px;
    font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: rgba(41, 41, 41, 1);
}
.follow_list img {
    width: 55px;
    border-radius: 50px;
    

}
.follow_list h3{
    font-size: 16px;
    font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 800;
    color: rgba(41, 41, 41, 1);
    margin-top: 2px;
    margin-left: 8px;
}
.follow_list p {
    font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
   
    font-size: 13px;
   color: rgb(117 117 117);
   margin-left: 8px;
    font-weight: 400;
    margin-top: -14px;
    

}
.follow_list{
    display: flex;
    flex-direction: row;
    
}
.follow_list input{
    border-color: rgba(41, 41, 41, 1);
    border: 1px solid;
    height: 34px;
    border-radius: 29px;
    width: 74px;
    margin-top: 17px;
}
.follow a{

    color: green;
    text-decoration: none;
    font-size: 01rem;

}
.read_list{
    font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.read_list h4 {
    font-size: 17px;
    border-color: rgba(41, 41, 41, 1);
}
.read_con span {
    position: absolute;
    margin: 0;
    font-size: 26px;
    margin-left: 52px;
    margin-top: -5px;
    font-weight: bolder;
    color: rgba(117, 117, 117, 1);


}
.read_con .p_2{
    position: absolute;
    margin: 0;
    margin-left: 75px;
    margin-top: -32px;
}
.read_con .p_3{
    margin: 0;
    margin-top: -9px;

}
.read_con p{
    color: rgba(117, 117, 117, 1);
    font-size: 14px;
    font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.side_footer
{
        font-size: 12px;
    margin-top: 25px;
    color: rgba(117, 117, 117, 1);
    margin-right: 62px;
}