.Following-header .following-mobile-header .add-friend-following img{    width: 2em;}
  .following-page{overflow-y: auto;}
  .following-page-mainbody{overflow-y: scroll;!important;}
  .following-page-mainbody .user-list-heading-b-s-s-s{border-top: none!important}
  .following-page-body-cc{height: 100vh;overflow-y: scroll;}
  .following-page .color-grey{color: #686868}
  .mg-auto{margin: auto;}
  .Computer-view-button-add{width: 100%;
      height: 3.4rem;
      background: #fff;
      z-index: 17;
      border: 1px solid #22A7DE;
      box-shadow: 0px 4px 10px -7px #030303b3;
      position: relative;}
  .Computer-view-button-add img{width: 2rem}
  .Follow-btn{    background: transparent;
      padding: 2px 20px;
      color: #22A7DE;    border: 1px solid;}
      .more-btn button{background: transparent;color: #22A7DE}
      .more-btn{background: #f2f2f2;
      height: 5rem;
      line-height: 5rem;}

  @media only screen and (min-width: 768px){
    .mobile-btn{display: none}
    .suggestion-page .twPc-avatarImg{    height: 72px;
        width: 72px!important;}

    .heading-suggestion-2{    margin-bottom: 2rem!important;
        padding: 1.5em!important;font-size: 1.5rem;
        color: #686868;}

    .header-2-mobile-view{display: none;}
  }
  /*Mobile media query */

  @media only screen and (max-width: 768px){
    .padding-mobile-none{padding: 0px!important}
      .following-page .following-page-body-cc .user-list-heading-b-s-s-s .media .media-right{    margin: 0px!important;}
    .following-page .following-page-body-cc .user-list-heading-b-s-s-s{padding: 10px 0px!important;}
      .following-page  .Following-header .following-mobile-header .media-right{margin-right: 0px!important}
    .Following-header{background: #fff;
      padding: 5px 0px!important;
      box-shadow: 0px 1px 3px #0000004d;
      z-index: 1111111;
      position: relative;}
    .user-name-details-suggestion .media span{color: #686868;
      font-size: 10px!important;
      letter-spacing: 0.05em;}
    .user-name-details-suggestion p {
      color: #686868;
      margin-bottom: 0px!important;
      font-size: 12px;
      letter-spacing: 0.06em;
  }
    .bottom-section-heading{margin-top: 1rem}
    .bottom-section-heading h5{font-size: 16px; margin: 0px}

      .bottom-section-heading p{margin-bottom: 0px;color:#686868!important;}
    .user-name-details-suggestion h3 {
      font-size: 16px!important;
      margin: 0px;
  }
    .suggestion-page .twPc-bg{height: 5rem!important;}
    .suggestion-page .twPc-div{height: 12rem!important;overflow: hidden;}
  .user-name-details-suggestion{    padding-top: 2rem;}

    .suggestion-page .twPc-avatarImg {height: 50px!important;
      width: 50px!important;}
      .suggestion-page .twPc-button{    margin: -25px -10px 0!important;}
    .main-suggestion-list{margin-bottom: 0px}
    .main-suggestion-list li .col-md-6 .media .media-right{margin: 10px 0px 0px;}
    .following-page .color-grey {
        color: #686868;
        font-size: 14px;
    }
    .bio-discription p{margin: 0px}
    .Personal-image{margin: 0px 1rem 0px 0px!important}
    .Personal-image img{width: 50px!important;height: 50px!important;object-fit: contain;}
    .heading-top-mobile{    padding: 15px 15px 0px;}
    .heading-top-mobile p{margin-bottom: 0px}
    .heading-top-mobile h5  {font-size: 16px;
      margin: 0px}
    .following-mobile-header{padding: 5px 0px;}
    .following-mobile-header .media-body{margin: auto;}
    .following-mobile-header .media-body h5{margin-bottom: 0px;
      font-size: 16px;
      letter-spacing: 0.06em;}
      .padding-no-mobile{padding: 0px!important}
    .suggestion-view{padding: 0px!important}
    ::-webkit-scrollbar{width: 0px!important;}
    .header-2-mobile-view {
      display: block;
      position: sticky;
      top: 0;
      z-index: 1;
      background: #fff;
      box-shadow: -1px 0px 9px -5px #000;
      padding: 5px 0px;
  }

    header{display: none!important;}
    .header-2{    padding:0px!important;}
    .bottom-list-follow{    padding: 0px 0rem!important ;}

    .Following-header .following-mobile-header .add-friend-following img {
      width: 25px;
  }
    .Computer-view-button-add{display: none}
    .following-page .user-list-folow-button {
      padding: 4px 10px!important;
  font-size: .7rem;
    }
  .following-page  .bio-discription{    font-size: 12px!important;
      line-height: 1.4em!important;}
  .following-page footer {
      display: block!important;}
  .suggestion-page .user-list-heading-b-s-s-s{    padding: 0px 0px!important;}
  .suggestion-page .user-list-heading-b-s-s-s .col-md-6{padding-top: .8rem;
      padding-bottom: .8rem;
      border-bottom: 1px solid lightgrey;}
      .heading-suggestion-2 {
      margin-bottom: 0rem!important;
          padding: 10px 15px!important;
      font-size: 16px;
      color: #686868;
      font-weight: bold;
  }
  .People-slide .suggestion-cards{padding-right: 0px!important}
  }

  .suggestion-view .user-list-heading-b-s-s-s{border-bottom: none!important}

  .main-flowing-Followers-parent{    width: 25%!important;    margin: auto;}
  /*computer view media query*/
  @media only screen and (min-width: 768px){
    .right-side-body li{list-style: none;float: left;width: 50%;    padding: 1rem 0px;}
    .edit-prodile-icon{width: 30px;
      position: absolute;
      left: 50%;
  transform: translate(20px, 10px);
  }

  .main-profile-details{   height: 100%;
      background: #fff;
      margin: 0px auto;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .profile-container-main{background: #fff;
      margin: 2em auto;
      max-width: 80%!important;}
  .main-profile-details .profile-boady-parent-ss{border-bottom: 1px solid #f2f2f2;
      padding: 10px;
      border-radius: 5px;}
    .right-menu-list-main .media{float: right!important;}
    .profile-container-main .right-side-body{    max-width: 80%;margin: auto;}

  .profile-boady-parent-ss{text-align: center;}
  .main-flowing-Followers-parent{padding: 0px!important}
  .suggestion-view{width: 80%!important;margin: 2rem auto;}
  .suggestion-page .following-page-body-cc{overflow-y: hidden!important;height: auto!important}
  .suggestion-page .user-list-heading-b-s-s-s .col-md-6 .media{    border-bottom: 1px solid lightgrey;height: 100%;}
  .suggestion-page .user-list-heading-b-s-s-s .col-md-6{padding: 0px 2rem;}
  .suggestion-page .user-list-heading-b-s-s-s{ padding: 0px 0px!important;}
  .suggestion-page .user-list-heading-b-s-s-s .Personal-image {
    width: 70px!important;
    height: auto;
    border-radius: 50%;line-height: 70px}
  .suggestion-view .heading{    padding: 2em 0px 0px;
      text-align: center;
      border-bottom: 1px solid #e1e1e1;}
  .following-page-body-cc{padding: 0rem!important}
  }

  button:focus{outline: none!important}


  .suggestion-page .twPc-div {
    position: relative;
      background: #fff none repeat scroll 0 0;
      border: 1px solid #e1e8ed;
      border-radius: 6px;
      height: 15rem;
      max-width: 100%;
  }
  .suggestion-page .twPc-bg {
      background-image: url("https://pbs.twimg.com/profile_banners/50988711/1384539792/600x200");
          background: #22a7de;
      background-position: 0 50%;
      background-size: 100% auto;
      border-bottom: 1px solid #e1e8ed;
      border-radius: 4px 4px 0 0;
      height: 7rem;
      width: 100%;
  }
  .suggestion-page .twPc-block {
      display: block !important;
  }
  .suggestion-page .twPc-button {
      margin: -35px -10px 0;
      text-align: right;
      width: 100%;
  }
  .suggestion-page .following-page-body-cc {
      height: auto;
      overflow-x: hidden;
      overflow-y: hidden!important;

  }
  .user-name-details-suggestion{    clear: both;}
  .user-name-details-suggestion h3{font-size: 1.4em}
  .user-name-details-suggestion p{color: #686868;margin-bottom: 0px!important}
  .user-name-details-suggestion .media span{color: #686868;font-size: smaller}

  .suggestion-page .twPc-avatarLink {
      background-color: #fff;
      border-radius: 50%;
      display: inline-block !important;
      float: left;
    margin: -0.5em 8px 0 8px;
      max-width: 100%;
      padding: 1px;
      vertical-align: bottom;
  }
  .suggestion-page .twPc-avatarImg {

      border: 2px solid #fff;
      border-radius: 50%;
      box-sizing: border-box;
      color: #fff;

  }
  .suggestion-page .twPc-divUser {
      margin: 5px 0 0;
  }
  .suggestion-page .twPc-divName {
      font-size: 18px;
      font-weight: 700;
      line-height: 21px;
  }
  .suggestion-page .twPc-divName a {
      color: inherit !important;
  }
  .suggestion-page .twPc-divStats {
      margin-left: 11px;
      padding: 10px 0;
  }
  .suggestion-page .twPc-Arrange {
      box-sizing: border-box;
      display: table;
      margin: 0;
      min-width: 100%;
      padding: 0;
      table-layout: auto;
  }
  .suggestion-page ul.twPc-Arrange {
      list-style: outside none none;
      margin: 0;
      padding: 0;
  }
  .suggestion-page .twPc-ArrangeSizeFit {
      display: table-cell;
      padding: 0;
      vertical-align: top;
  }
  .suggestion-page .twPc-ArrangeSizeFit a:hover {
      text-decoration: none;
  }
  .suggestion-page .twPc-StatValue {
      display: block;
      font-size: 18px;
      font-weight: 500;
      transition: color 0.15s ease-in-out 0s;
  }
  .suggestion-page .twPc-StatLabel {
      color: #8899a6;
      font-size: 10px;
      letter-spacing: 0.02em;
      overflow: hidden;
      text-transform: uppercase;
      transition: color 0.15s ease-in-out 0s;
  }
  .suggestion-sldier-follow-button{    display: inline-block;
      color: #22a7de !important;
      border: 1px solid;
      padding: 0px 15px;
      border-radius: 20px;
      position: absolute;
      right: 1rem;
      top: 50%;transition: .5s ease}
  .suggestion-sldier-follow-button:hover, .Follow-btn:hover{
    color: #fff !important;
    background: #22A7DE;
  }

  .following:hover{background: transparent;color: #22A7DE!important}
  .following{background: #22A7DE;
      padding: 2px 20px;
      color: #fff;
      border-radius: 15px 15px 15px 15px;}

  .following-btn,.Follow-btn{transition: .5s ease;cursor: pointer;}
  .following-btn:hover{background: transparent;color: #22A7DE;
      border: 1px solid;}
  .Personal-image img{border-radius: 50%;height: 70px;
      border: 1px solid lightgrey;
      width: 70px; object-fit: contain;}
  button{cursor: pointer;}
  .bottom-tags-line{margin: auto;
      margin-right: .5rem;}
      .Personal-image {
      width: auto!important;
  }
  .first-personal-edite li:last-child{border-bottom: none!important}
  .person-main-suggestion-list li:last-child .media{border-bottom: none!important}
  .People-slide .item,.twPc-div{cursor: pointer;transition: .5s ease}
  .People-slide .item:hover .twPc-div{    box-shadow: 0px 1px 13px -5px #00000075;}
  .People-slide .owl-stage-outer{    padding: 10px 0px;}
  .more, .moreless{    color: #22a7de!important;}


  button .msg-follow,
  button .msg-following,
  button .msg-unfollow{
    display: none;
  }

  button .msg-follow{
    display: inline;
  }

  button.following .msg-follow{
    display: none;
  }

  button.following .msg-following{
    display: inline;
  }

  button.following:not(.wait):hover .msg-following{
    display: none;
  }

  button.following:not(.wait):hover .msg-unfollow{
    display: inline;
  }

  .user-list-heading-b-s-s-s .col-md-6 .media-body {margin-right: .5em!important}
  .more-btn button:hover a{color: #fff!important;}
  .more-btn button:hover{
    background:#22a7de;
    color: #fff!important;
  }
  .more-btn button a{color: #22a7de!important}
  .more-btn button{
    border: 1px solid #22a7de;
      width: 8rem;
      line-height: 2em;
      border-radius: 5px;
      color: #22a7de!important;
      text-decoration: none;}


  /*New css updated */

  .profile-details-list{    overflow: auto;
      display: block;
      justify-content: space-between;}

      .profile-details-list .left-menu-list-main .media{    border-bottom: 1px solid #f2f2f2;width: 100%}

      .right-side-body li{padding: 1rem 40px;}



      @media only screen and (min-width: 768px) {
        .suggestion-page .user-list-heading-b-s-s-s .col-md-6 .media{padding: 1rem 0px}
        .following-page .Following-header{display: none;}
          .Preference-add-c-view{    width: 60%!important;padding: 0px!important;    border: 1px solid lightgray;
                                     border-radius: 5px;
                                     margin: 30px auto;}
          .search-bar-set ul{margin:0px!important;}
          .fixed-button-user{top: 70%!important}
          .add-btn-compter{color: #fff;
                           background: #22a7de;
                           text-align: center;
                           padding: 15px;    font-size: 1.4em;}
          .add-btn-compter a{color: #fff!important}
          .Vegan-main-body-iner{padding: 0px!important;}
          .Vegan-main-body{    width: 60%!important;    margin: 30px auto!important;}
          .prefrences-list-main-body{width: 60%!important;
                                     left: 50%;
                                     transform: translateX(-50%);
                                     padding: 0px 0px!important;
                                     border: 1px solid lightgrey;
                                     margin: 30px 0px;}
          .create-list-header{display: none;}

          .user-privet-btn{
              border-bottom: 1px solid lightgrey
          }

          .save-button-pp {
              display: flex;justify-content: center;align-items: center;
          }

          .save-button-pp .save-button{
              width: 50%;
              background: #38b0e1;
              color: #fff;
              text-align: center;
              padding: 15px 20px;
              border-radius: 5px;
              font-size: 1.2em;
          }
          .create-your {
              padding: 30px 0px!important;
          }
          .save-button-pp .save-button a{color: #fff!important}

          .save-button-pp{padding: 30px}

          .create-your .box-border-view{    width: 60%;    box-shadow: none;
                                            border: 1px solid lightgrey;}

      }

      .suggestion-cards:hover{box-shadow: 0px 1px 3px #00000033;}

      @media only screen and (min-width: 768px) {
        /*first page padding correction*/
  .Userprefrence1-page .left-side-Own-preference .media{  padding: 0px 2rem 0px 1rem;}
  .Userprefrence1-page .left-side-personal-section .media{padding: 0px 2rem 0px 1rem;}
  .Userprefrence1-page    .followed-preference-list  ul{padding: 0px 2rem 0px 1rem}
  .Userprefrence1-page   .left-side-body .left-body-ss{height: 100%;}

  .Userprefrence1-page  .left-side-Own-preference .left-side-Own-preference .col-md-12 .media, .Userprefrence1-page  .followed-preference-heading .media{padding: 0px 1rem 0px 2rem;}
        .Userprefrence1-page .left-body-ss .mobile-show-create-list-header{padding: 0px 2rem;}
        /*first page padding correction close*/
        /*second  page padding correction*/
  .vegan-user-page .left-side-body .left-body-ss .mobile-show-create-list-header .top-header-panel{padding-left: 1rem}
  .vegan-user-page .left-side-user-section {
      padding: 1rem!important;
  }
  .vegan-user-page .update-time-and-date .media{padding-left: 1rem}
  .vegan-user-page .left-side-body .left-body-ss .vegan-items ul {    padding: 0px 1rem;}
    /*second  page padding correction close*/
    /*third-page padding correction */

    .Discover-new-lists .mobile-show-create-list-header .top-header-panel {padding: 1rem;}

    .Discover-new-lists-left-side .rightside-body ul{padding: 0px 1rem}
    /*third-page padding correction  close*/

  .body-second-page-prefrences{ height: 100%;  max-width: 84%!important;margin: 2rem auto;}
  .show-mobile{display: none;}

  }

  .followed-border-icon{}

      @media only screen and (max-width: 768px) {
  .show-mobile{display: block;}
      }


  /*user prefrence left side css*/
  .left-body-ss{background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 2px 2px #00000024;
  border-radius: 4px;}
  .left-body-ss .mobile-show-create-list-header{padding: 0px 15px;
      border-bottom: 1px solid #f2f2f2;height: 4rem;
      display: flex;
      align-items: center;}
      .left-body-ss .mobile-show-create-list-header .media-right button{background: #22a7de;
      color: #fff;
      border-radius: 17px;
      width: 140px;
      height: 33px;
      border: none;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;}
      .left-side-personal-section, .followed-preference-heading {    border-bottom: 1px solid #f2f2f2;
      padding: .5rem 0px;    }
      .left-side-Own-preference{    border-bottom: 1px solid #f2f2f2;
      padding: 1rem 0px;}
      .left-side-Own-preference .col-md-12 .media .media-left{    margin-right: 1rem;}
      .left-side-Own-preference .col-md-12 .media .media-body h4{    font-size: 16px;
      margin: 0px;}
          .left-side-Own-preference .col-md-12 .media .media-body  span{    font-size: 12px;
      color: #686868;}
          .left-side-personal-section .media .media-body h4,.followed-preference-heading  .media .media-body h4{    margin: 0px;
      font-size: 16px;
      letter-spacing: 1.2px;}
      .left-body-ss .mobile-show-create-list-header .user-id{    margin-bottom: 0rem;
      font-size: 12px;
      letter-spacing: 1.8px;
      color: #686868;}
      .left-body-ss .top-header-panel .media-body h5{font-size: 16px;
      font-weight: bold;
      margin: 0px;}
  .left-body-ss .mobile-show-create-list-header .col-md-12{padding: 0px!important}

  .followed-preference-list ul li .bottom-section{    display: flex;
      padding: 0px;
      align-items: center;}
    .followed-preference-list ul li .bottom-section  .user-profile-name h6{ margin: 0px; font-size: 12px;color: #000;}
    .followed-preference-list ul li .bottom-section .bottom-leftisde-user-img{margin-right: .5rem}
      .followed-preference-list ul li .bottom-section  .user-profile-name{margin-right: .5rem}
      .followed-preference-list ul li .bottom-section .user-profile-name-id span{    font-size: 12px;
      color: #686868;}
  .edit-btn{font-size: 14px }
  .followed-preference-heading  .media{padding: 0px 15px}
  .followed-preference-list ul{list-style: none;padding: 0px;margin: 0px;    margin-bottom: 2rem;}
  .followed-preference-list ul li .media-left img{width: 51px;
  height: 51px;background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 1px 3px #00000033;
  border-radius: 4px;object-fit: contain;}
  .followed-preference-list ul li .media-body h5 {margin: 0px;margin: 0px;
      font-size: 16px;
      font-weight: bold;}
      .followed-preference-list{    padding-bottom: 1rem; }

      .followed-preference-list ul li{    padding: 1rem 0px;
      border-bottom: 1px solid #f2f2f2;cursor: pointer;}
      .right-side-section .rightsde-content{  height: 100%; background: #FFFFFF 0% 0% no-repeat padding-box;
      box-shadow: 0px 2px 2px #00000024;
      border-radius: 4px;}
    .right-side-section .right-side-header{padding: 0px 15px;
      border-bottom: 1px solid #f2f2f2;
      height: 4rem;
      display: flex;
      align-items: center;flex-direction: column;justify-content: center;}

        .right-side-section .right-side-header h5{width: 100%;
      font-size: 16px;
      font-weight: bold;
      margin: 0px;
  }

        .right-side-section .right-side-header p{width: 100%;    margin-bottom: 0rem;
      font-size: 12px;
      letter-spacing: 1.8px;
      color: #686868;}


      /*button change css*/

      button .msg-follow,
      button .msg-following,
      button .msg-unfollow{
        display: none;
      }

      button .msg-follow{
        display: inline;
      }

      button.following .msg-follow{
        display: none;
      }

      button.following .msg-following{
        display: inline;
      }

      button.following:not(.wait):hover .msg-following{
        display: none;
      }
      .media .button-side button.following:not(.wait):hover, .media .button-side-right button.following:not(.wait):hover{background: red!important;border: red;color: #fff!important}
      button.following:not(.wait):hover .msg-unfollow{
        display: inline;
      }
      .Follow-btn{border-radius: 15px 15px 15px 15px;}
      /*button change css close*/

      body{background: #f2f2f2}
      .right-side-section .rightside-body ul{margin: 0px}
          .right-side-section .rightside-body ul li{border-bottom: 1px solid #f2f2f2;    padding: 10px 15px;}

              .right-side-section .rightside-body ul li .media-body h5{font-size: 16px;margin: 0px;font-weight: bolder;}
                        .right-side-section .rightside-body{padding: 0px!important}
                      .right-side-section .rightside-body ul li .media-body  .discription{padding: 0px!important}
                      .right-side-section .rightside-body ul li .media-body  .discription p{    margin: 0px;
      font-size: 12px;
      color: #686868;}


  .right-side-section .rightside-body ul li .media-body  .create-subs-rules .col-md-12{padding: 0px!important;justify-content: start;
      display: flex;
      align-items: center;}
    .right-side-section .rightside-body ul li .media-body  .create-subs-rules .col-md-12 p{margin-bottom: 0px;font-size: 14px;}
      .right-side-section .rightside-body ul li .media-body  .create-subs-rules  .col-md-12 .left-side-heading{margin-right: .5em}
          .right-side-section .rightside-body ul li .media-body  .create-subs-rules  .col-md-12 .right-side-heading p{    font-weight: bolder;}
            .right-side-section .rightside-body ul li .button-side{    position: absolute;
      right: 10px;}
      .right-side-section .rightside-body ul li .button-side button{width: auto;
      height: 25px;
      text-align: center;
      padding: 5px 10px;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;}
          .right-side-section .rightside-body ul li .center-media-body {padding-right: 5rem;}

          .right-side-section .rightside-body ul li .media-left img  {    width: 51px;
      height: 51px;
      background: #FFFFFF 0% 0% no-repeat padding-box;
      box-shadow: 0px 1px 3px #00000033;
      border-radius: 4px;
      object-fit: contain;}
      .rightside-body-footer{    width: 100%;
          padding: 1rem 0px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;}
          .rightside-body-footer a{color: #22A7DE!important}

          .bottom-leftisde-user-img img{width: 17px;height: 17px;border-radius: 50%}
          #create-list-popup .modal-dialog{    max-width: 60%;}
                #create-list-popup .modal-dialog .modal-content{background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
    border-radius: 8px;}
  #create-list-popup .modal-body{padding: 0px!important;padding: 0px!important;
      height: 25rem;
      overflow-y: auto;}
  #create-list-popup .modal-body .image-div-head{padding: 0px!important;position: relative;}
  #create-list-popup .modal-body .image-div-head .image-body img{height: 175px;width: 100%;object-fit: cover;}
  #create-list-popup .modal-body .image-div-head .camera-icon{    position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);}
      #create-list-popup .modal-header .col-md-12{padding: 0px!important}
          #create-list-popup .modal-header .col-md-12 .media .media-left button{background: transparent;
      border: none;
      font-size: 30px;
      padding: 0px;}
      #create-list-popup .modal-header .col-md-12 .media .media-body h5{    font-weight: bolder;
      letter-spacing: 2px;
      font-size: 24px;
      margin: 0px;}

          #create-list-popup .modal-header{box-shadow: 0px 3px 6px #00000029;
  border-radius: 0px 0px 8px 8px;}

    #create-list-popup .modal-footer{box-shadow: 0px -3px 6px #00000029;
  border-radius: 0px 0px 8px 8px;    padding: 10px 15px;}

  #create-list-popup .modal-footer .btn-primary{width: 90px;
      height: 45px;background: #22A7DE 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 6px;}
  #create-list-popup .bottom-form-fields{padding-top: 1rem;
      padding-bottom: 1rem;}
        /*user prefrence left side css*/

        /*toogle button*/

        $lightGrey: #E9E9EB;
        $grey: #6E6E6E;
        $white: #FFFFFF;
        $blue: #22A7DE;
    #create-list-popup .switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
  }

    #create-list-popup .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }

    #create-list-popup .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: $grey;
    transition: .4s;
  }

    #create-list-popup .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
  }

    #create-list-popup input:checked + .slider {
    background-color: $blue;
  }

    #create-list-popup input:focus + .slider {
    outline: none;
  }

    #create-list-popup input:checked + .slider:before {
    transform: translateX(26px);
  }

    #create-list-popup .slider.round {
    border-radius: 34px;
  }

    #create-list-popup .slider.round:before {
    border-radius: 50%;
  }
    /*toogle button close*/

    /*border-bottom effect*/
    .effect-1
    {border: 0; padding: 7px 0; border-bottom: 1px solid #ccc;border-radius: 0px;}

    .effect-1 ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
    .effect-1:focus ~ .focus-border{width: 100%; transition: 0.4s;}
    :focus{outline: none}
    /*border-bottom effect close*/
  .form-input-div{position: relative;}
  #create-list-popup .form-control:focus {box-shadow: none!important;border-color: transparent!important;}

  #create-list-popup  .bottom-form-fields .form-group label{margin-bottom: 0px;color: #686868;    font-size: 16px;}
  #create-list-popup  .bottom-btn-toggle .media-body h4{    margin: 0px;
      font-size: 18px;
      font-weight: bolder;
      letter-spacing: .06em;
  }
  #create-list-popup  .bottom-btn-toggle .media-body p{    margin: 0px;
      font-size: 12px;
      color: #686868;}
  #create-list-popup  .bottom-btn-toggle{margin: 0px;
      padding: 1rem 0px;
      border-top: 1px solid #f2f2f2;
      border-bottom: 1px solid #f2f2f2;}
    .name-and-discription-div  {    padding: 1rem 0px;}
      .name-and-discription-div   .form-group {margin-bottom: 2rem;}

      #create-list-popup{background-color: #3C3C4349;}
      /*Vegan page css start*/
  .vegan-user-page .back-arow i{color: #22A7DE!important}
  .vegan-user-page .top-header-panel .media .media-left a{color: #22A7DE!important}
  .vegan-user-page .left-side-cover-image .col-md-12 {padding: 0px!important}
  .vegan-user-page .left-side-cover-image .col-md-12 img{height: 195px;object-fit: cover;width: 100%}
  .vegan-user-page .left-side-user-section .media .media-body span{    color: #686868;
      font-size: 14px;
  }
  .vegan-user-page .left-side-user-section .media .media-body h4{font-size: 20px;color: #000!important;font-weight: bolder;   margin: 0px 0px .2rem;}
  .vegan-user-page .left-side-user-section .media .media-body p {font-size: 16px;color: #686868}
  .vegan-user-page .left-side-user-section{    padding: 1rem 0px;}
  .vegan-user-page .left-side-user-section .bottom-section{    display: flex;
      align-items: center;
      justify-content: start;}
      .vegan-user-page .left-side-user-section .bottom-section .bottom-leftisde-user-img img{width: 25px;height: 25px}

        .vegan-user-page .left-side-user-section .bottom-section .user-profile-name h6{margin: 0px;
      margin-left: 0rem;
      color: #000;
      font-weight: 600;    font-size: 14px; }
      .vegan-user-page .left-side-user-section .bottom-section .user-profile-name-id{margin-left: 0.5em;
      color: #686868;
      font-size: 14px;}
        .vegan-user-page .item-and-follower{    display: flex;    padding-top: .3rem;}
          .vegan-user-page .item-and-follower .items {margin-right: 1rem}
        .vegan-user-page .update-time-and-date  {    font-size: 12px;border-bottom: 1px solid #f2f2f2;
      padding-bottom: 1rem;
      color: #686868;}

          .vegan-user-page   #definations-list ul li{border-bottom: 1px solid #f2f2f2}
          .vegan-user-page   #definations-list ul li .media .media-left img{width: 51px;
  height: 51px;background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 1px 3px #00000033;
  border-radius: 50%;
  opacity: 1;object-fit: contain;}
        .vegan-user-page .vegan-items ul .product-list{border-bottom: 1px solid #f2f2f2;    padding: 10px 0px;}

          .vegan-user-page .vegan-items ul .product-list .normal-list{padding: 0px 15px}
        .vegan-user-page .vegan-items {padding-bottom: 1rem ;padding-left: 0px;padding-right: 0px}
        .vegan-user-page .hide-section {padding: 0px!important}
        .vegan-user-page .main-product-img img{background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 1px 3px #00000033;
  border-radius: 4px;width: 51px;
  height: 51px;}

  .vegan-user-page #definations-list{    margin-top: 2rem;}
  .vegan-user-page #definations-list .definations-list-list{padding: 10px 15px;}

  .vegan-user-page #definations-list .definations-list-list .media-body h5{margin: 0px}
  .vegan-user-page .definatios-link-btn{color: #22A7DE!important;cursor: pointer;}
  .vegan-user-page .right-side-section .rightsde-content{height: auto!important;}
  .vegan-user-page  .vegan-items ul li h5{margin: 0px;
      font-size: 16px;
      color: #686868;}

    .vegan-user-page   .hide-section{display: none;}

      .vegan-user-page .vegan-items ul .product-list.active  .hide-section.show{display: block!important;transition: .5s ease; animation: height-animate 1s   }
  #definations-list ul li, .rightside-body-footer{transition: .5s ease;cursor: pointer;}
  #definations-list ul li:hover, #definations-list ul li.active, .rightside-body-footer:hover{background: #22A7DE0D}


      @keyframes height-animate {
  0%{
  opacity: 0;
  }
  100%{
    opacity: 1;
  }
      }

      .vegan-user-page .vegan-items ul .product-list.active .definatios-link-btn.roate .fa-chevron-down{transform: rotate(
  180deg
  );}

  .definatios-link-btn .fa-chevron-down{transition: .5s ease}
  .defination-list-popup{     padding-right: 0px!important;
      overflow: hidden!important;}
  .defination-list-popup .modal-dialog{    max-width: 50%;}
  .defination-list-popup .modal-dialog .modal-header{background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;}
  .defination-list-popup .modal-dialog .modal-header .product-image-on-heading{display: flex;
      align-items: center;
      justify-content: center;}
      .defination-list-popup .modal-dialog .modal-header .product-image-on-heading img{margin-right: .5rem;
      background: #FFFFFF 0% 0% no-repeat padding-box;
      box-shadow: 0px 1px 3px #00000033;
      border-radius: 4px;
      width: 45px;
      height: 45px;
      object-fit: contain;
  }
    .defination-list-popup .modal-dialog .modal-header .product-image-on-heading h5{letter-spacing: 0.42px;
  color: #000000;font-size: 20px}

  .defination-list-popup .modal-dialog .modal-header .close-button-modal{    background: transparent;
      border: none;
      font-size: 30px;}

      /*RANGE */



    .defination-list-popup .popup-range {
    position: relative;
    width: 100%;
    height: 2px;
    }

    .defination-list-popup .popup-range input {
    width: 100%;
    position: absolute;
    top: 2px;
    height: 0;
    -webkit-appearance: none;
    }

    .defination-list-popup .popup-range input::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 30px;
  height: 30px;background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 8px #00000026;
  border: 0.5px solid #0000000A;
  margin: -17px 0 -17px 0px;

      border-radius: 50%;
      background: #fff;
      cursor: pointer;
      border: 0 !important;
    }

  .defination-list-popup   .popup-range input::-moz-range-thumb {
    width: 34px;
  height: 34px;background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 8px #00000026;
  border: 0.5px solid #0000000A;
  margin: -17px 0 -17px 0px;

      border-radius: 50%;
      background: #fff;
      cursor: pointer;
      border: 0 !important;
    }

    .defination-list-popup .popup-range input::-ms-thumb {
      width: 34px;
    height: 34px;background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 8px #00000026;
  border: 0.5px solid #0000000A;
     margin: -17px 0 -17px 0px;
     border-radius: 50%;
     background: #fff;
     cursor: pointer;
     border: 0 !important;
    }


    .defination-list-popup .popup-range input::-webkit-slider-runnable-track {
      width: 100%;
      height: 2px;
      cursor: pointer;
      background: transparent;
    }

    .defination-list-popup .popup-range input::-moz-range-track {
     width: 100%;
     height: 2px;
     cursor: pointer;
     background: transparent;
    }

    .defination-list-popup .popup-range input::-ms-track {
     width: 100%;
     height: 2px;
     cursor: pointer;
     background: transparent;
    }

    .popup-range {
      background: linear-gradient(to right, #007AFF 0%, #007AFF 50%, red 50%, red 100%);
  }

    .defination-list-popup .popup-range input:focus {
      background: none;
      outline: none;
    }

    .defination-list-popup .popup-range input::-ms-track {
      width: 100%;
      cursor: pointer;
      background: transparent;
      border-color: transparent;
      color: transparent;
    }



    .popup-range-labels {
    margin: 0px 0px!important;
    padding: 0;
    list-style: none;
    display: flex;
      justify-content: space-between;
    }
    .popup-range-labels li {
      position: relative;
      float: left;
      width: auto;
      text-align: initial;
      color: #686868;
      font-size: 12px;
      cursor: pointer;padding-top: 15px!important;padding-bottom: 20px!important;transition: .5s ease;
      width: 20%;
      height: 60px;
    }

    .Range-section ul .No{text-align: center;
      padding-right: 0rem;}
        .Range-section ul .Neutral{text-align: center;}
          .Range-section ul .Yes {    text-align: center;
      padding-left: 0rem;}
            .Range-section ul .Extremely-yes{text-align: right;}

    .popup-range-labels .active {
      color: #000;
      padding-bottom: 12.5px!important;
    padding-top: 25px!important;
        font-size: 13px;
    }

    .popup-range-labels .selected::before {
      background: #37adbf;
    }

    .popup-range-labels .active.selected::before {
      display: none;
    }


    .Range-section{padding: 2rem 0px 3rem!important;}
    .Range-section ul{list-style: none;padding: 0px;margin: 0px}

    .defination-list-popup .modal-body .amount-specific{padding: 0px;
      display: flex;
      justify-content: space-between;}

        .defination-list-popup .modal-body .amount-specific  h4{margin-bottom: 0px;font-size: 16px;color: #686868}

          .defination-list-popup .modal-body .top-head-image-title{padding: 2rem 0px 2rem;}
          .defination-list-popup .modal-body .defination-popup-body{max-width: 70%;
      margin: auto;}
          .defination-list-popup .modal-body .defination-popup-body .top-head-image-title .media .media-body h4 {    font-size: 18px;
      padding-left: .4em;
      margin: 0px;}
  .defination-list-popup .top-head-image-title .media .media-left .image-div{position: relative;}
  .defination-list-popup .top-head-image-title .media .media-left .image-div .icon-change-img{position: absolute;
      top: 0px;
      right: -10px;
      width: 20px;
      height: 20px;}
        .defination-list-popup .top-head-image-title .media .media-left .image-div .product-image-popup{box-shadow: 0px 1px 3px #00000033;height: 50px; width: 50px; border-radius: 50%;position: relative;object-fit: contain;}
        .Nothing-bottom-section{padding: 0px!important}
        .Nothing-bottom-section .text h4{font-size: 14px;
      color: #686868;}
    /*Vegan page css close*/


      /*Discover new lists css*/

  .color-blue{color: #22A7DE!important  }
  .Discover-new-lists .rightside-body{    padding-top: 1rem;
      padding-bottom: 1rem;height: 100vh;
      overflow-y: auto;}

    .Discover-new-lists .rightside-body  ul li{       border-bottom: 1px solid #f2f2f2;padding: 1rem 0px;}

      .Discover-new-lists .rightside-body  ul li .media .media-body .center-media-body .discription{padding: 0px!important}

          .Discover-new-lists .rightside-body ul li .media-left img {
      width: 51px;
      height: 51px;
      background: #FFFFFF 0% 0% no-repeat padding-box;
      box-shadow: 0px 1px 3px #00000033;
      border-radius: 4px;
      object-fit: contain;
  }


    .Discover-new-lists .rightside-body ul li .media-body h5 {
      font-size: 16px;
      margin: 0px;
      font-weight: bolder;
  }

    .Discover-new-lists .rightside-body ul li .media-body .discription p {
      margin: 0px;
      font-size: 12px;
      color: #686868;
  }

  .Discover-new-lists .rightside-body ul li .media-body .create-subs-rules .col-md-12 {
      padding: 0px!important;
      justify-content: start;
      display: flex;
      align-items: center;}
      .Discover-new-lists .rightside-body ul li .media-body .create-subs-rules .col-md-12 p {
      margin-bottom: 0px;
      font-size: 14px;
  }

  .Discover-new-lists .rightside-body ul li .media-body .create-subs-rules .col-md-12 .left-side-heading {
      margin-right: .5em;
  }

  .Discover-new-lists .rightside-body ul li .media-body .create-subs-rules .col-md-12 .right-side-heading p {
      font-weight: bolder;
  }


  .Discover-new-lists .rightside-body ul li .media-left{margin-right: 1rem}

  .Discover-new-lists-right-side .rightsde-content .image-div-head{text-align: center;    padding: 3rem 3rem 0px;}
  .Discover-new-lists-right-side .rightsde-content {height: auto!important;}

  .Discover-new-lists-right-side .rightsde-content .heading-text{    padding: 1rem 15px}
  .Discover-new-lists-right-side .rightsde-content .heading-text h5{text-align: center;
      font-size: 20px;
      color: #000;
      font-weight: bolder;}
      .Discover-new-lists-right-side .rightsde-conten .heading-text p{font-size: 14px;}
      /*Discover new lists css close*/

  .defination-list-popup .modal-content{box-shadow: 3px 3px 10px #00000029;    border-radius: 8px!important; border: none}

  @media only screen and (max-width: 768px){
      .Userprefrence1-page  .mobile-btn{position: absolute;
    bottom: 4rem;
    z-index: 999;
    right: 15px;
    background: #22a7de;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    border: none;
    padding: 0px;}

      .Userprefrence1-page .mobile-show-create-list-header .media .media-right .color-blue{font-size: 12px}

    .hide-mobile{display: none!important;}
    .Userprefrence1-page .left-side-body{padding: 0px!important;height: 100%;}
      .Userprefrence1-page {    height: 100vh;}
      .Userprefrence1-page .row{    height: 100%;}
        .Userprefrence1-page .left-side-body .left-body-ss{height: 100%;overflow-y: auto;}
        .left-body-ss .mobile-show-create-list-header{height: 8%;
    position: sticky;
    top: 0px;
    z-index: 111;
    background: #fff;}
        .left-body-ss .mobile-show-create-list-header .media-right button{border-radius: 50%;
    width: 45px;
    height: 45px;
    position: fixed;
    right: 10px;
    bottom: 8rem;
    z-index: 111;}

   #create-list-popup .modal-dialog {
    max-width: 100%;
    margin: 0px;
    height: 100%;
}
#create-list-popup .modal-header{    padding: 10px 15px;}
#create-list-popup .modal-header .col-md-12 .media .media-body h5{font-size: 18px;}

#create-list-popup .form-input-div{top: 5px;}
#create-list-popup .name-and-discription-div {
    padding: 1rem 0px 0px;
}
#create-list-popup .modal-dialog .modal-content{background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: none;
    border-radius: 0px;
    height: 100%;
    border: none;}
    .Discover-new-lists .Discover-new-lists-left-side{padding: 0px!important}
      .Discover-new-lists  .left-body-ss{height: 100vh;overflow: auto;}
      .Discover-new-lists-right-side{display: none;}
      .button-side{    position: absolute;
    right: 10px;}

        .button-side .Follow-btn{    font-size: 15px;padding: 2px 8px;}

        .vegan-user-page .left-side-body{padding: 0px!important}
          .vegan-user-page .right-side-section{display: none;}

              .vegan-user-page  .left-body-ss{    height: 100vh;overflow: auto;}
              .vegan-user-page .left-side-cover-image .col-md-12 img{    height: 150px;}
              .defination-list-popup .modal-dialog {
                height: 100%;
                  min-height: 100%;
                  padding-top: 50%;max-width: 100%;margin: 0px;
}
.defination-list-popup .modal-content{border: none;
    border-radius: 15px 15px 0px 0px!important;
    height: 100%;}
    .defination-list-popup .modal-body .defination-popup-body {
        max-width: 100%;}

        .popup-range-labels{font-size: 10px;}
        .popup-range-labels .active{    font-size: 10px;}
        .defination-list-popup .modal-dialog .modal-header{    height: 15%;
    padding: 10px 0px;background: #F5F5F5;display: flex;
    align-items: center;}
    .popup-range-labels li{font-size: 10px;}
      .defination-list-popup .modal-dialog .modal-body{height: 70%;
    overflow-y: auto}
    .defination-list-popup .modal-dialog .modal-header .product-image-on-heading{    justify-content: start;}
    .defination-list-popup .modal-dialog .modal-header .media{flex-direction: row-reverse;}

    .defination-list-popup .modal-dialog .modal-footer{height: 13%;
    padding: 0px;    display: flex;
    align-items: center}
  .defination-list-popup .modal-dialog .modal-footer{display: flex;
    align-items: center;
    justify-content: center;}
  .defination-list-popup .modal-dialog .modal-footer button{width: 77%;
    height: 65%;}
    .defination-list-popup .modal-body .top-head-image-title {
    padding: 1rem 0px 1rem;
}
.defination-list-popup .modal-dialog .modal-header .product-image-on-heading img{width: 40px;
    height: 40px;}
    .defination-list-popup .modal-dialog .modal-header .product-image-on-heading h5{font-size: 14px;
    padding-left: .5rem;}
.defination-list-popup .modal-dialog .modal-header{box-shadow: none}

.defination-list-popup .modal-dialog .modal-header .close-button-modal{    background: #A3A3A3;
    border: none;
    font-size: 20px;
    height: 25px;
    width: 25px;
    display: flex;
    align-items: center;
    border-radius: 50%;
    color: whitesmoke;
    justify-content: center;}
    .defination-list-popup .modal-dialog .modal-header .media .media-left{margin-right: 0px!important}
  }