.input-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    position: relative;
  }
  
  .input {
    border-style: none;
    height: 50px;
    width: 50px;
    padding: 10px;
    outline: none;
    border-radius: 50%;
    transition: .5s ease-in-out;
    background-color: #7e4fd4;
    box-shadow: 0px 0px 3px #f3f3f3;
    padding-right: 40px;
    color: #fff;
  }
  
  .input::placeholder,
  .input {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 17px;
  }
  
  .input::placeholder {
    color: #8f8f8f;
  }
  
  .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    outline: none;
    border-style: none;
    border-radius: 50%;
    pointer-events: painted;
    background-color: transparent;
    transition: .2s linear;
  }
  
  .icon:focus ~ .input,
  .input:focus {
    box-shadow: none;
    width: 250px;
    border-radius: 0px;
    background-color: transparent;
    border-bottom: 3px solid #7e4fd4;
    transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
  }
  

.modal-header{
  background: #64DEAD !important;
}
  


.size-popUp{
    height: 80vh;
    overflow-y: auto;
}