@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap');
  
    mark.a0 {
      color: black;
      padding: 2px;
      background: greenyellow;
    }

    /*mark.a1 {
      color: black;
      padding: 5px;
      background: cyan;
    }

    mark.a2 {
      color: black;
      padding: 5px;
      background: red;
    }

    mark.a3 {
      color: white;
      padding: 5px;
      background: green;
    }

    mark.a4 {
      color: black;
      padding: 5px;
      background: pink;
    }*/


      .search-box {
          position: absolute;
          height: 40px;
          width: 40px;
          z-index: 4;
          //margin-left: 1%;
          //left: 2%;
          float: right;
      }

          .search-box i {
              position: absolute;
              height: 100%;
              width: 100%;
              line-height: 40px;
              text-align: center;
              font-size: 22px;
              color: #fff;
              font-weight: 600;
              cursor: pointer;
              transition: all 0.3s ease;
              margin-left:12px;
              height:100%;
              //width:35px;
            background-color:rgb(12, 138, 12);
            border-radius:10px;
          }

          .search-box .input-box {
              position: absolute;
              right: calc(100% - 40px);
              /*margin-right: -150px;*/
              /*float: right;*/
              z-index: 100;
              top: 80px;
              height: 70px;
              width: 300px;
              background: #3E8DA8;
              border-radius: 6px;
              opacity: 0;
              display: none;
              pointer-events: none;
              transition: all 0.4s ease;
          }

          .search-box .result-box {
              position: absolute;
              right: calc(100% - 230px);
              /*margin-right: -150px;*/
              /*float: right;*/
              z-index: 115;
              top: 120px;
              height: 150px;
              width: 800px;
              min-height: 120px;
              padding: 10px;
               height: fit-content;
               max-height: 350px;
              background: #3E8DA8;
              border-radius: 6px;
              opacity: 0;
              display: none;
              pointer-events: none;
              transition: all 0.4s ease;
          }
      .showInput .search-box .result-box {
          top: 135px;
        /*  opacity: 0;
          display: none;*/
          pointer-events: auto;
/*          //background: #0ee688;*/
          background:lightgray;
      }

      .search-box .result-box ul {
/*          position: absolute;*/
          /*top: 30%;
    left: 50%;
    border-radius: 4px;
    transform: translate(-50%, -50%);*/
          // height: 35px;
          width: auto;
          margin-top: 0px;
            min-height: 120px;
               height: fit-content;
               max-height: 325px;
          overflow-y: scroll;
         overflow-x: hidden;
          /*  outline: none;
    padding: 0 15px;*/
          font-size: 16px;
          border: none;
      }

          .search-box .result-box ul li {
              width: 98%;
              background-color: white;
              //text-align: center;
              margin-bottom: 10px;
              font-size: 15px;
              padding: 10px;
              border-radius: 5px;
          }

              .search-box .result-box ul li a {
                  display: inline-block;
                  padding: 0px;
                  line-height: 20px;
              }

                  .search-box .result-box ul li a:after {
                      content: "";
                      padding-left: 0px;
                  }

      .showInput .search-box .input-box {
          top: 60px;
          opacity: 1;
          display: inline-block;
          pointer-events: auto;
          background: #3E8DA8;
      }

      .search-box .input-box::before {
          content: '';
          position: absolute;
          height: 20px;
          width: 20px;
          background: #3E8DA8;
          right: 10px;
          top: -6px;
          transform: rotate(45deg);
      }

      .search-box .input-box input {
          position: absolute;
          top: 40%;
          left: 50%;
          border-radius: 4px;
          transform: translate(-50%, -50%);
          height: 35px;
          width: 280px;
          outline: none;
          padding: 0 15px;
          font-size: 16px;
          border: none;
      }
 #SearchResultul{
        max-height: 325px;
          overflow-y: scroll;
         overflow-x: hidden;
      }
 #SearchResultul::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
  background-color: #f5f5f5;
  border-radius: 10px;
}

 #SearchResultul::-webkit-scrollbar {
  width: 5px;
  background-color: #f5f5f5;
}

 #SearchResultul::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #fff;
  background-color:#3E8DA8;
}