/* =====media query small laptop and big tablets======== */
@media  screen and (max-width:1200px) {
    .container{
        width: 96%;
    }
    main .container{
        grid-template-columns:5rem auto 30vw ;
        gap: 1rem;
    }
    .left{
        width: 5rem;
        z-index: 5;
    }
    main .container .left .profile{
        display: none;
    }
    .sidebar h3{
        display: none;
    }

    .left .btn{
        display: none;
    }
    .customize-theme .card{
        width: 80vw;
    }

    .register .container {
        width: 70%;
      }
    
      .register .container form {
        width: 90%;
      }
     
}

/* media query small phones and tablet */
@media screen and (max-width:992px) {
    body{
        width: 100%;
    }
    nav .search-bar{
        display: none;
    }
    
    main .container{
        grid-template-columns: 0 auto 5rem;
        gap:0;
    }

    main .container .left {
        
        
        position: fixed;
        z-index: 20;
        bottom: 0;
    top: inherit;
        right: 0;
        width: 100%;
        
   
    }
    main .container .left .sidebar{
    display: flex;
    justify-content: space-around;
    height: 100%;
    border-radius: 0;
    }

    main .container .left .sidebar .menu-item{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    main .container .left .sidebar .menu-item span i{
margin:0;
padding: 1rem;
    }
    .left .sidebar .active::before{
        height: 0.3rem;
        width: 100%;
        top: 0;
    }

    /* =====notification popup */
    .left .notification-popup{
        position: absolute;
        left: 0;
        top: -23rem;
        left: 1rem;
        width: 20rem;
    }

    .left .notification-popup::before{
        position: absolute;
bottom: -0.6rem;
left: calc(20rem - 10rem);
display: block;
    }

    

    main .container .middle{
        grid-column: 1/3;
    }
    main .container .right{
        position: absolute;
        left: 2rem;
        background: rgba(255,255,255,0.6);
        top: 0;
        width: 100%;
        z-index: 5;
        display:none;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 80vh;
        border-radius: var(--card-border-radius);

    
    }
    .right .bx.bx-x{
        display: block;
        font-size: 2rem;
        color: var(--primary-color);
    }
    main .container .right .messages{
        width: 80%;
        padding: 4px;
        height: 80%;
        
    }
    main .container .right .friend-requests{
        width: 80%;
        display: none;
    }
    .right .messages .message {
        margin-bottom: 2rem;
    }
    .right .messages .message:first-child {
        margin-top: 2rem;
    }
    /* theme */
.customize-theme{
    width: 100%;
    height: 100%;
}
    .customize-theme .card{
        width: 92%;
    }

  #logo{
    max-width: 90px;
  }
  #loading-page h1 {
    font-size: 2rem;
  }

  
  .register .container {
    width: 90%;
  } 

  .register .container form {
    width: 100%;
  }
  .chatroom{
    width: 100%;
    height: 100%;
}
}