/* Floating input group */
.input-group {
  position: relative;
  width: 220px;
}

/* Input field */
.input {
  width: 100%;
  border: 1.5px solid #9e9e9e;
  border-radius: 1rem;
  background: none;
  padding: 1rem;
  font-size: 1rem;
  color: #000;
}

/* Floating label */
.user-label {
  position: absolute;
  left: 16px;
  top: 50%;
  color: #777;
  pointer-events: none;
  transform: translateY(-50%);
  transition: 0.2s ease;
  background: #fff;
  padding: 0 6px;
}

/* Focus & valid state */
.input:focus,
.input:not(:placeholder-shown) {
  border-color: #1a73e8;
  outline: none;
}

.input:focus ~ .user-label,
.input:not(:placeholder-shown) ~ .user-label {
  top: 0;
  transform: translateY(-50%) scale(0.85);
  color: #1a73e8;
}

/* Form layout */
.date-form {
  display: flex;
  gap: 1rem;
  align-items: center;
}

/* Button */
.btn {
  padding: 0.8rem 1.4rem;
  border-radius: 1rem;
  border: none;
  background: #1a73e8;
  color: white;
  cursor: pointer;
}

.btn:hover {
  background: #1557b0;
}

    button {
        padding: 1rem;
        border: none;
        background: lightblue;
        border-radius: 0.5rem;
        margin: 1rem;
        box-shadow: 0px 4px 4px 0px #071125cc;
    }

    table thead{
      background:#80a2ff !important;
    }
    table thead th{
      background:#80a2ff !important;
    }
    
    th,td{
        text-align: center;
        font-size: large;
        padding: 0.6rem;

    }



/* Mobile responsiveness */
    @media (max-width: 768px) {
        .date-form {
        flex-direction: column;
        gap: 1rem;
    }

        .input-group {
            width: 100%;
    }
     table,
    th,
    td {
        font-size: 2.8vw;
    }

    table,
    th,
    td {
        
        font-size: 2.rem;
        text-align: center;
        padding: 1px;
    }
  }