body{
            margin:0px;
            padding: 0px;
            background-color: #f3bedc;
        }

        .Smart-header{
            width:100%;
            background-color:#cc0679;
            display: inline-block;
            padding:10px 10px 10px 10px;
            position: fixed;
            box-shadow: 1px 1px 1px 1px rgba(0, 0,0,0.3);
            z-index: 1000;
            
        }
        .display-user-notifications{
            display: inline-block;
            position: fixed;
            right:0px;
            width:200px;
            margin-top:43px;
            background-color: white;
            padding:10px 10px 10px 10px;
            box-shadow: 1px 1px 1px 1px black;
            z-index: 100;
            border-top:solid;
            border-color:#cc0679;
            overflow: hidden;
            
            border-bottom: solid;
            border-bottom-width: 4px;
            border-bottom-color: #cc0679;
            height: auto;
            max-height: 500px;
            overflow-y: auto;
              display: none;
        }
        .Smart-header img, .Smart-header svg,.search-div svg{
            width:30px;
            height: 30px;
            fill: white;
        }
        .logo-header {
            float: left;
            width:auto;
        }
      
        .auth-menu-header{
            float: right;
            width:50%;
            
        }

        .display-user-notifications svg{
            width:30px;
            height: 30px;
            fill: white;
        }
        .auth-menu-field-container{
            width:auto;
            float: left;
            margin-left:8%;
            display: inline-block;
        }
        .notify-count-display-con{
            position: absolute;
        }
        
        .auth-menu-label-con,.auth-menu-svg{
            float: left;
        }
        .client-name{
            position: relative;
            top:4px;
            padding:2px 2px 2px 2px;
            color:white;
        }
        .main-notification-con{
            display: inline-block;
            width:90%;
            border:solid;
            border-width: 1px;
            margin-bottom: 2px;
            overflow: hidden;
            padding:4px 4px 4px 4px;
            color:black;
            border-radius: 10px;
            -webkit-border-radius: 10px;
             box-shadow: 1px 1px 1px 1px #e5b4d1;
               box-shadow: 1px 1px 1px 1px #e5b4d1;
           -webkit-box-shadow: 1px 1px 1px 1px #e5b4d1;
           -ms-box-shadow: 1px 1px 1px 1px #e5b4d1;
           -o-box-shadow: 1px 1px 1px 1px #e5b4d1;
         
        }
        .main-notification-con:hover{
           box-shadow: 1px 1px 4px 1px #d76baa;
           -webkit-box-shadow: 1px 1px 4px 1px #d76baa;
           -ms-box-shadow: 1px 1px 4px 1px #d76baa;
           -o-box-shadow: 1px 1px 4px 1px #cc85ae;
        }
        .notification-con{
            display: inline-block;
            width:100%; 
        }
        .nofy-img-con{
            float: left;
        }
       
        .nofy-name-con{
            margin-left:10px;
            text-align: center;
            padding:2px 2px 2px 2px;
            font-weight: bolder;
        }
        .notication-action-word{
            font-weight:bold;
        }
        .account-sub{
            position: fixed;
            background-color: white;
            padding:5px 5px 5px 5px;
            margin-top:30px;
            margin-left:20px;
                box-shadow: 1px 1px 4px 1px #d76baa;
           -webkit-box-shadow: 1px 1px 4px 1px #d76baa;
           -ms-box-shadow: 1px 1px 4px 1px #d76baa;
           -o-box-shadow: 1px 1px 4px 1px #cc85ae;
           border-radius: 10px;
           -webkit-border-radius: 10px;
           -ms-border-radius: 10px;
           -o-border-radius: 10px;
           display: none;
         
        }
         .account-sub div{
            padding:4px 4px 4px 4px;
            width:100%;
            text-align: center;
         }
         .account-sub div a{
            color: #cc0679;
            
            text-decoration: none;
         }
         .notify-count-display-con{
            background-color: white;
            padding:2px 2px 2px 2px;
            min-width: 20px;
            text-align: center;
            margin-left:13px;
            border-radius: 100%;
            cursor: pointer;
         }
         .search-div{
            float: left;
            margin-left:20px;
            width:40%;
            display: inline-block;
            
            
         }
         .search-div input{
            padding:6px 6px 6px 6px;
            box-sizing: border-box;
            width:100%;
            outline: none;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
            border:none;
            color:rgba(0, 0,0,0.6)
         }
         .searchbutton img{
            fill: #cc0679;
         }
         .search-div{
            display: inline-block;
         }
          .searchbutton{
            float: left;
          }
          .input-search{
            float: left;
            width:80%;

          }
         .searchbutton button{
            background-color: transparent;
            border:none;
            position: relative;
            
         }
         .searchbutton button svg{
            width:30px;
            fill:purple;
            border-color: white;
            stroke: white;
         }

         @media screen and (min-width:150px) and (max-width:450px){
        .main-notification-con{
            display: inline-block;
            margin-left:5%;
         
        }

            .display-user-notifications{
            display: none;
            width:100%;
        }
        .Smart-header img, .Smart-header svg,.search-div svg{
            width:20px;
            height: 20px;
            fill: white;
        }
        .logo-header {
            float: left;
            width:auto;
        }
      
        .auth-menu-header{
            float: right;
            width:50%;
        }
       
        .display-user-notifications svg{
            width:20px;
            height: 20px;
            fill: white;
        }
        .auth-menu-field-container{
            width:auto;
            float: left;
            display: inline-block;
            margin-left:2%;
        }
        .notify-count-display-con{
            position: absolute;
        }
        
        .auth-menu-label-con,.auth-menu-svg{
            float: left;
            width:auto;
            margin-left:10px;
        }
        .client-name{
            display: none;
        }
   
        .main-notification-con:hover{
           box-shadow: 1px 1px 4px 1px #d76baa;
           -webkit-box-shadow: 1px 1px 4px 1px #d76baa;
           -ms-box-shadow: 1px 1px 4px 1px #d76baa;
           -o-box-shadow: 1px 1px 4px 1px #cc85ae;
        }
        .display-user-notifications{
            margin-top: 35px;
        }
        .notification-con{
        
            display: inline-block;
            width:100%; 
        }
        .nofy-img-con{
            float: left;
        }
      
       
        .nofy-name-con{
            margin-left:10px;
            
            text-align: center;
          
            padding:2px 2px 2px 2px;
            border-end-end-radius:10px ;
            -webkit-border-end-end-radius:10px ;
            -ms-border-end-end-radius:10px ;
            -o-border-end-end-radius:10px ;
        }
        .notication-action-word{
            font-weight:bold;
        }
        .user-account-mobile{
            margin-left:1px;
        }
        .account-sub{
            margin-top:20px;
            margin-left:-70px;
         
        }
    
         .notify-count-display-con{
            font-size: 10px;
            min-width: 10px;
            margin-left:15px;
            border-radius: 100%;
            cursor: pointer;
         }
         .search-div{
            float: left;
            margin-left:20px;
            width:30%;
            display: inline-block;
            background-color: white;
            
            
         }
         .search-div input{
            padding:6px 6px 6px 6px;
            box-sizing: border-box;
            width:80%;
            outline: none;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
            border:none;
            color:rgba(0, 0,0,0.6)
         }
         .searchbutton img{
            fill: #cc0679;
         }
         .search-div{
            display: inline-block;
         }
          .searchbutton{
            float: left;
          }
          .input-search{
            float: left;
            width:50%;

          }
         .searchbutton button{
            background-color: transparent;
            border:none;
            position: relative;
            width:auto;
            
         }
         .searchbutton button svg{
            width:30px;
            fill:purple;
            border-color: white;
            stroke:rgb(203, 35, 97);
         }
         }


         
         @media screen and (min-width:450px) and (max-width:900px){
        .main-notification-con{
            display: inline-block;
            margin-left:5%;
         
        }

            .display-user-notifications{
            display: none;
            width:50%;
        }
        .Smart-header img, .Smart-header svg,.search-div svg{
            width:25px;
            height: 25px;
            fill: white;
        }
        .logo-header {
            float: left;
            width:auto;
        }
      
        .auth-menu-header{
            float: right;
            width:50%;
        }
       
        .display-user-notifications svg{
            width:20px;
            height: 20px;
            fill: white;
        }
        .auth-menu-field-container{
            width:auto;
            float: left;
            margin-left:3%;
            display: inline-block;
          
        }
        .notify-count-display-con{
            position: absolute;
        }
        
        .auth-menu-label-con,.auth-menu-svg{
            float: left;
            width:auto;
            margin-left:10px;
        }
        .client-name{
            display: none;
        }
   
        .main-notification-con:hover{
           box-shadow: 1px 1px 4px 1px #d76baa;
           -webkit-box-shadow: 1px 1px 4px 1px #d76baa;
           -ms-box-shadow: 1px 1px 4px 1px #d76baa;
           -o-box-shadow: 1px 1px 4px 1px #cc85ae;
        }
        .display-user-notifications{
            margin-top: 40px;
        }
        .notification-con{
        
            display: inline-block;
            width:100%; 
        }
        .nofy-img-con{
            float: left;
        }
        .nofy-img-con img{
            border:solid;
            border-color:#d41685;
            border-radius: 100%;
        }
        .nofy-name-con{
            margin-left:10px;
            text-align: center;
           
            padding:2px 2px 2px 2px;
            border-end-end-radius:10px ;
            -webkit-border-end-end-radius:10px ;
            -ms-border-end-end-radius:10px ;
            -o-border-end-end-radius:10px ;
        }
        .notication-action-word{
            font-weight:bold;
        }
        .user-account-mobile{
            margin-left:1px;
        }
        .account-sub{
            margin-top:25px;
            margin-left:-40px;
         
        }
    
         .notify-count-display-con{
            font-size: 10px;
            min-width: 10px;
            margin-left:20px;
            border-radius: 100%;
            cursor: pointer;
         }
         .search-div{
            float: left;
            margin-left:20px;
            width:38%;   
         }
         .search-div input{
            padding:6px 6px 6px 6px;
            box-sizing: border-box;
            width:100%;
            outline: none;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
            border:none;
            color:rgba(0, 0,0,0.6)
         }
         .searchbutton img{
            fill: #cc0679;
         }
         .search-div{
            display: inline-block;
         }
          .searchbutton{
            float: left;
          }
          .input-search{
            float: left;
            width:65%;

          }
     
      
         }