/* 
        =============================
            1. Base CSS
            2. Landing Page CSS
            3. Login Page 
            4. Regestion Page
            5. Home CSS
            6. Message Page CSS
                6.1 Message View Page
            7. My Labels Page
            8. My Lost Page 
            9. My Found Page
        =============================
  */

  /* Base CSS  */
  /* Google Fonts  */
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

  * {
      margin: 0;
      padding: 0;
  }

  a {
      text-decoration: none !important;
      color: #1dbf73;
  }



  .page-title {
      font-size: 31px;
      font-weight: bold;
      color: #313759;
      padding-bottom: 20px;
  }

  body {
      font-family: 'Poppins',
          sans-serif;
  }

  .container {
      max-width: 768px !important;
      padding: 16px !important;
  }

  .mb-150 {
      margin-bottom: 150px !important;
  }

  .form-control {
      color: #8E8F91;
      opacity: 1;
      font-size: 14px;
      font-weight: 300;
  }

  /* Bottom-bar  */
  .nahid {
      position: fixed;
      bottom: 118px;
      width: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: end;
  }

  .dropup .dropdown-toggle::after {
      display: none !important;
  }

  .btn-plus {
      background: #45c98d;
      border: 1px solid #45c98d;
      height: 70px;
      text-align: center;
      margin-right: 10px;
      border-radius: 50px;
      width: 70px;
      color: #1DBF73;
      font-weight: bold;
      font-size: 32px;
      box-shadow: -1px 0px 10px 4px #ededed;
      color: #fff;
  }

  .dropdown-item.active,
  .dropdown-item:active {
      color: #1DBF73;
      background: none !important;
  }


  .bottom {
      text-align: right;
  }

  .dropdown-menu.show {
      display: block;
      box-shadow: 2px 1px 12px -3px;
      padding: 15px;
  }

  /* main css Screen Size 450Px */
  @media screen and (max-width: 450px) {

      /* Landing Page CSS  */
      .landing-wrap {
          width: 90%;
          text-align: center;
          margin: 0 auto;
          position: absolute;
          top: 50%;
          -ms-transform: translateY(-50%);
          transform: translateY(-50%);
      }

      .landing-wrap img {
          padding-bottom: 200px;
          width: 60%;
      }

      .landing-button {
          margin-top: -100px;
      }

      .btn-n {
          padding: 15px 60px;
          margin: 15px 0;
          border: 0;
          border-radius: 5px;
          width: 243px !important;
          font-weight: 600;
      }

      .btn-n.login {
          background: #F0F5FE;
          /*! border: 2px solid #C3C3C5; */
          color: #1DBF73;
          transition: .4s;
          border-radius: 20px;
      }

      .btn-n.login:hover {
          /*! background: #1DBF73; */
          /*! color: #fff; */
          transition: .4s;
          /*! border: 2px solid #1DBF73; */
      }

      .btn-n.busniess {
          background: #1DBF73;
          color: #fff;
          transition: .4s;
          /*! border: 2px solid #1DBF73; */
          border-radius: 50px;
      }

      .btn-n.busniess:hover {
          /*! background: none; */
          /*! color: #1DBF73; */
          transition: .4s;
          /*! border: 2px solid #1DBF73; */
      }

      /* Login Page  */
      .login-wrap {
          /*! text-align: center; */
          margin: 0 auto;
          position: absolute;
          top: 30%;
          -ms-transform: translateY(-50%);
          transform: translateY(-50%);
          width: 90%;
      }

      .input-group-text.password-icon {
          border: 0;
          background: #f0f5fe !important;
          color: #000;
          cursor: pointer;
          font-size: 13px;
      }

      .login-logo {
          padding-top: 300px;
      }

      .login-with h3 {
          font-size: 36px;
          font-weight: 600;
          /*! padding-top: 50px; */
          color: #1DBF73;
          text-align: left;
          line-height: 44px;
          padding-bottom: 30px;
      }

      .reg-with h3 {
          font-size: 36px;
          font-weight: 600;
          /* padding-top: 50px; */
          color: #1DBF73;
          text-align: left;
          line-height: 44px;
          /* padding-bottom: 30px; */
      }

      .signup-with {
          color: #8E8F91;
          font-size: 16px;
          font-weight: normal;
          /*! padding-top: 15px; */
          text-align: center;
      }


      .login-with h5 a {
          color: #1DBF73;
          text-decoration: navajowhite;
      }

      .form-label {
          color: #000000;
          font-size: 14px;
      }

      .login-with-social-media {
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          padding: 30px 50px;
      }

      .login-with h2 {
          font-weight: bold;
          font-size: 20px;
          padding-bottom: 45px;
      }

      .login-form input {
          /*! border-top: 0; */
          /*! border-radius: 0; */
          /*! border-right: 0; */
          /*! border-left: 0; */
          /*! padding-left: 0; */
          padding: 10px;
          /*! width: 82%; */
          /*! margin: 0 auto; */
          background: #F0F5FE;
          border: 0;
      }

      .form-control:focus {
          color: #212529;
          background-color: #f0f5fe;
          /*! border-color: #CED4DA; */
          outline: 0;
          box-shadow: none !important;
      }

      .form-control::placeholder {
          color: #8E8F91;
          opacity: 1;
          font-size: 14px;
          font-weight: 300;
      }

      .form-control.password {
          margin-top: 15px;
      }

      .login-form-bottom {
          display: flex;
          justify-content: space-between;
          margin-top: 45px;
      }

      .login-form-bottom a {
          text-decoration: none;
          color: #1DBF73;
      }

      .form-check-input:checked {
          background-color: #1DBF73;
          border-color: #1DBF73;
      }

      /* Regestion Page */

      .signup-wrap {
          /*! text-align: center; */
          padding: 50px 0;
      }

      .signup-form-bottom p {
          font-size: 12px;
          padding-top: 15px;
          color: #999A9C;
      }

      .signup-form-bottom p a {
          text-decoration: none;
          color: #1DBF73;
      }

      .form-login-btn {
          background: #1DBF73;
          color: #fff;
          text-decoration: none;
          font-weight: 600;
          padding: 15px 0;
          border-radius: 20px;
          border: 1px solid #1DBF73;
          display: block;
          /*! width: 80%; */
          margin: 0 auto;
          margin-top: 42px;
          text-align: center;
          font-size: 20px;
      }

      .alredy-have-account {
          color: #1DBF73;
          font-size: 16px;
          text-decoration: navajowhite;
          padding-top: 30px;
          display: block;
          text-align: center;
      }

      .form-login-btn:hover {
          color: #fff;
      }


      /* Home css  */
      .menu-bg {
          background: #fff;
          border: 1px solid #e3d9d9;
          box-shadow: 3px -1px 16px -9px;
          overflow: hidden;
          position: fixed;
          bottom: 0;
          width: 100%;
      }

      .bottom-menu img {
          width: 30px;
      }

      .bottom-menu ul li {
          list-style: none;
      }

      .bottom-menu {
          /*! background: red !important; */
          /*! border-top: 1px solid red; */
          /*! box-shadow: 3px 2px 2px 0px; */
          background: black;
      }

      .bottom-menu ul li {
          float: left;
          padding: 30px 22px;
          /* background: red; */
      }

      .bottom-menu ul {
          margin: 0;
          padding: 0;
      }

      .dropdown-toggle::after {
          border-top: 0 !important;
      }

      .dropdown-btn {
          background: none;
          border: 0;
      }

      .header-bg {
          /* background: #ededed08; */
          /* border-bottom: 1px solid #ededed; */
          margin-bottom: 6px;
          box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
      }

      .header {
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: space-between;
          /* padding: 30px 15px; */
      }

      .header-search-icon {
          font-size: 25px;
          cursor: pointer;
      }


      .dropdown img {
          width: 40px;
      }

      .dropdown-menu.show {
          margin-top: 15px !important;
          margin-right: 20px !important;
          padding: 22px;
          border-radius: 10px;
      }

      .dropdown-item:hover {
          color: #1DBF73;
      }

      .search {
          padding-top: 20px;
          padding-bottom: 35px;
      }

      .form {
          position: relative
      }

      .form span {
          position: absolute;
          right: 17px;
          top: 13px;
          padding: 2px;
          border-left: 1px solid #d1d5db
      }

      .left-pan {
          padding-left: 7px
      }

      .left-pan i {
          padding-left: 10px
      }

      .form-input {
          height: 55px;
          text-indent: 33px;
          border-radius: 50px;
      }

      .form-input:focus {
          box-shadow: none;
          /* border: none */
      }

      .fa.fa-search {
          color: #d1d5db
      }

      .catagorey-single img {
          /* width: 35px; */
          padding-bottom: 15px;
          padding-top: 11px;
      }

      .catagorey-single {
          text-align: center;
          border-radius: 20px;
          box-shadow: 0px 0px 5px -4px;
          padding: 9px;
          margin: 0 4px;
          width: 33%;
      }

      .catagorey-single p {
          font-size: 13px;
          color: #8E8F91;
      }

      .catagorey {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 35px;
      }

      .catagorey-single h6 {
          font-size: 24px;
          font-weight: bold;
      }


      .coupon-wrap {
          padding: 15px;
          display: flex;
          justify-content: space-evenly;
          align-items: center;
          box-shadow: 1px 1px 5px #F0F5FE;
          border-radius: 10px;
          margin-bottom: 25px;
          border: 1px solid #F0F5FE;
          background: #F0F5FE;
      }

      .coupon-logo {
          border-right: 2px dashed #1DBF73;
          ;
          padding-right: 31px;
          margin-right: 21px;
      }

      .coupon-name {
          font-weight: normal;
          font-size: 15px;
          color: #999A9C;
      }

      .coupon-expire-date {
          font-weight: normal;
          font-size: 12px;
          color: #999A9C;
      }

      .coupon-quentity {
          font-size: 15px;
          font-weight: normal;
          color: #1DBF73;
      }

      .coupon-quentity span {
          font-weight: bold;
          font-size: 32px;
      }

      .coupon-wrap::after {
          content: '';
          position: absolute;
          background: #fbfbfb;
          height: 30px;
          width: 30px;
          left: 0;
          border-radius: 50px;
      }

      .coupon-wrap::before {
          content: '';
          position: absolute;
          background: #fbfbfb;
          height: 30px;
          width: 30px;
          right: 0;
          border-radius: 50px;
      }

      /* Coupon Click  */
      .fas.fa-chevron-left {
          font-size: 30px;
          /* background: #ededed; */
          padding: 7px 20px;
          border-radius: 5px;
          color: #C6D0E4;
      }

      .coupon-click-header {
          display: flex;
          justify-content: space-around;
          padding: 30px;
      }

      .coupon-click-wrap {
          background: #F0F5FE;
          border-radius: 10px;
          margin-bottom: 30px;
      }

      .coupon-click-code {
          text-align: center;
          color: #1DBF73;
          font-weight: bold;
          font-size: 30px;
          padding-bottom: 30px;
      }

      .coupon-click-description {
          text-align: center;
          color: #AEAFB0;
          font-size: 14px;
          padding: 0 50px;
          padding-bottom: 35px;
      }

      .line {
          border-bottom: 2px dashed #999A9C;
          margin: 0 100px;
      }

      .coupon-click-bottom {
          text-align: center;
          padding: 50px;
      }

      .coupon-click-bottom img {
          padding-bottom: 30px;
      }



      .coupon-click-wrap::before {
          content: '';
          position: absolute;
          background: #fff;
          height: 30px;
          width: 30px;
          display: block;
          right: 0;
          border-radius: 50px;
          margin-top: -69%;
      }




      .coupon-click-wrap::after {
          content: '';
          position: absolute;
          background: #fff;
          height: 30px;
          width: 30px;
          left: 0;
          border-radius: 50px;

          margin-top: -61%;
      }








      .product-logo-andtitle {
          display: flex;
          align-items: center;
      }

      .single-product-wrap {
          display: flex;
          align-items: center;
          justify-content: space-between;
          border: 1px solid #ededed;
          border-radius: 10px;
          padding: 10px;
          margin-bottom: 20px;
      }

      .product-logo-andtitle img {
          margin-right: 15px;
      }

      .product-title {
          font-size: 24px;
          font-weight: bold;
          color: #0B0D13;
      }

      .product-dis {
          font-size: 15px;
          color: #999A9C;
          margin-top: -5px;
      }

      .product-price {
          font-size: 15px;
          color: #1DBF73;
      }

      .product-price span {
          font-size: 32px;
          font-weight: bold;
      }



      .product-name {
          font-size: 32px;
          font-weight: bold;
      }

      .product-click-price {
          font-size: 34px;
          color: #1DBF73;
          text-align: center;
          padding-bottom: 20px;
      }

      .product-click-price span {
          font-size: 72px;
          font-weight: bold;
      }

      .product-click-header {
          display: flex;
          justify-content: space-around;
          padding: 30px;
          align-items: center;
      }








      /* my-labels */

      .my-sumbit-form {
          width: 90%;
          margin: 0 auto;
          padding-top: 35px;
      }

      .input-group.mb-3 input {
          /* border-right: 0; */
          padding: 13px;
      }

      .input-group.border-right-0 input {
          border-right: 0;
          padding: 13px;
      }

      .form-select.form-control.mb-3 {
          padding: 13px;
      }

      #formFileMultiple {
          padding: 13px;
          color: #C3C3C5;
      }

      .form-expire {
          color: #8E8F91;
          opacity: 1;
          font-size: 14px;
          font-weight: 300;
          padding-bottom: 7px;
      }

      /* .input-group.mb-3 textarea {
          border-right: 0 !important;
      } */

      .input-group-text {
          color: #1DBF73;
          background: none !important;
      }

      .input-group-text:focus {
          border-color: red !important;
      }

      .form-select:focus {
          border-color: #ced4da;
          outline: 0;
          box-shadow: none;
      }

      option {
          background: #1dbf73;
          color: #fff;
          padding: 50px;
      }

      .form-select {
          color: #C3C3C5;
          border: 1px solid #ced4da;
      }

      .form-login-btn.add-lebels {
          text-align: center;
          width: 100%;
      }

      .border.mb-3.border-radius-3 {
          border-radius: 5px;
      }

      .text-right {
          text-align: right;
          float: right;
      }

      .labels-qr-header {
          padding: 30px;
          align-items: center;
          display: flex;
          justify-content: space-between;
      }

      .labels-logo {
          width: 110px;
      }

      .form-login-btn.add-lebels {
          margin-bottom: 120px;
      }

      .text-center.labels-qr-bottom h6 {
          color: #313759;
          font-weight: bold;
          font-size: 14px;
      }

      .text-center.labels-qr-bottom p {
          color: #313759;
          font-size: 14px;
      }


      .drag-image {
          border: 1px solid #F0F5FE;
          border-radius: 5px;
          font-weight: 400;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          padding: 40px;
          background: #f0f5fe;
      }

      .form-select {
          color: #8E8F91 !important;
      }

      .drag-image.active {
          border: 2px solid #fff
      }

      .drag-image .icon {
          font-size: 30px;
          color: #C3C3C5;
      }

      .drag-image h6 {
          font-size: 20px;
          font-weight: 300;
          color: #C3C3C5;
      }

      .drag-image span {
          font-size: 14px;
          font-weight: 300;
          color: #C3C3C5;
          margin: 10px 0 15px 0
      }

      .drag-image button {
          padding: 10px 25px;
          font-size: 14px;
          font-weight: 300;
          border: none;
          outline: none;
          background: transparent;
          color: #C3C3C5;
          border: 1px solid #C3C3C5;
          border-radius: 5px;
          cursor: pointer;
          transition: all 0.5s;
      }

      .drag-image button:hover {
          background-color: #fff;
          color: red
      }

      .drag-image img {
          height: 100%;
          width: 100%;
          object-fit: cover;
          border-radius: 5px
      }

      .form-check-label {
          color: #C3C3C5;
      }

      .form-check-label a {
          color: #fa3954;
      }



      .form-bg-wrap {
          background: #fff;
          border-radius: 10px;
          /*! padding-top: 30px; */
          padding-bottom: 30px;
          /*! box-shadow: 0px 2px 7px -2px; */
      }

      .bg-grays {
          background: #F0F5FE;
          margin-bottom: 13px;
          border-radius: 11px;
          padding: 6px 12px;
      }

      .menu-active {
          background: #F0F5FE;
          /* border-radius: 15px; */
      }

      .input-group input {
          background: #F0F5FE;
          border: 0;
      }

      .input-group span {
          background: #F0F5FE !important;
          border: 0;
      }

      .input-group textarea {
          background: #F0F5FE;
          border: 0;
      }

      .my-sumbit-form select {
          background: #F0F5FE;
          border: 0;
      }
  }

  @media screen and (max-width: 395px) {
      .bottom-menu ul li {
          float: left;
          padding: 30px 20px;
          /* background: red; */
      }
  }

  @media screen and (max-width: 375px) {
      .bottom-menu ul li {
          float: left;
          padding: 30px 18px;
          /* background: red; */
      }
  }

  @media screen and (max-width: 355px) {
      .bottom-menu ul li {
          float: left;
          padding: 30px 16px;
          /* background: red; */
      }
  }