.header{
    width: calc(100% - 270px);
    height: 70px;
    margin-left: 270px;
    box-shadow: 0 0 7px #ccc;
    background: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    z-index: 1000;
  }
  .header div.search-bar-div{
    display: flex;
    flex-direction: row;
  }
  .header form span:first-child i{
    font-size: 25px;
  }
  .header span .search{
    min-width: 210px;
  }
  .header span .search:focus{
    min-width: 250px;
  }
  .header form{
    box-shadow: none;
    width: max-content;
    position: absolute;
    right: 0;
    text-align: right;
  }
  .header form input:focus{
    min-width: 170px;
    box-shadow: none;
  }
  .header .search-btn{
    width: auto;
    height: 40px;
  }
  .not-btn, .user-btn{
    margin: 0 2.5px;
  }
  .user-btn img{
    width: 30px;
    height: 30px;
    margin-left: 10px;
    border: 2px solid rgb(36, 190, 236, 0.8);
    padding: 1px;
    border-radius: 50%;
  }
  .header span.btn-white:hover,
  .header button.btn-white:hover{
    background: rgb(245, 246, 247) !important; 
  }
  /* .not-btn:ac{
    
  } */
  .not-btn i{
    font-size: 20px;
    opacity: 0.9;
    -webkit-font-smoothing: subpixel-antialiased;
  }

  @media only screen and (max-width: 800px){
    .search, .search-btn{
      visibility: hidden;
    }
    #form{
      display: none;
    }
      .nav-content{
        margin-left: -12.5px;
      }
      .toast-wrapper, .toast-container{
        max-width: 300px;
        min-width: 300px;
      }
    }
    /* ------------*/

    .toast-wrapper{
      display: none;
        position: absolute;
        background: white;
        width: 370px;
        max-height: 350px;
        top: 100%;
        right: 20px;
        z-index: 9999;  
        overflow: auto;
        overflow-x: hidden;
        box-shadow: 0 0 10px #ccc;
        border-radius: 5px;
      }
      .toast-container{
        padding: 0 15px;
        width: 100%;
        border-radius: 5px;
        background: rgb(255, 255, 255);
      }
      .notification{
        width: 100%;
        padding: 15px;
        background: white;
        box-shadow: 0 0 5px #ccc;
        position: sticky;
        z-index: 10000;
        top: 0;
        margin-bottom: 10px;
        border-radius: 5px 5px 0 0;
      }
      
      .close-not, .not-time{
      position: absolute;
      right: 5px;
      }

      .close-not{
        font-size: 20px;
      }
      .close-not{
        font-size: 22px;
        top: 10px;
        right: 10px;
      }

      .nav-scroll{
        max-height: 50vh;
        overflow: auto;
      }