@media only screen and (max-width: 768px) {
  input[type="date"],
  input[type="datetime-local"] {
    display: block;
    width: 100%;
    padding: 10px 10px 10px 40px; /* Adjust padding to account for the icon */
    font-size: 16px;
    box-sizing: border-box;
    position: relative;
    background: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
  }

  input[type="date"]::after,
  input[type="datetime-local"]::after {
    content: '';
    background: url('data:image/svg+xml;utf8,<svg fill="%236c757d" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M19 4h-1V2h-2v2H8V2H6v2H5C3.9 4 3 4.9 3 6v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z"/></svg>') no-repeat;
    background-size: 20px;
    width: 20px;
    height: 20px;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
  }
}