/* .date-group { margin-bottom: 20px; border: 1px solid #ddd; padding: 15px; border-radius: 5px; } */
        /* .date-group h3 { margin-top: 0; color: #333; } */
        .input-row {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }

        label {
            display: block;
            margin-bottom: 10px;
            font-size: 0.8em;
            color: #dddddd;
        }

        /* input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; } */
        #result {
            margin-top: 20px;
            padding: 15px;
            border-radius: 4px;
            font-size: 1.1em;
        }

        .note {
            color: #666;
            font-size: 0.9em;
            margin-top: 5px;
        }

        button {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background: #45a049;
        }

        .date-group {
            width: fit-content;
            margin-left: auto;
            margin-right: auto;
            padding: 10px;
        }

        .input-field {
            border: 1px solid var(--border-color);
            padding: 5px;
            text-align: center;
            border-radius: 4px;
            width: 8rem;
        }

        input[type="text"] {
            text-align: center;
            font-size: 2.5rem;
            border: none !important;
            background: none !important;
        }

        input[type=text]:focus {
            background-color: none !important;
            border-color: none !important;
            box-shadow: none !important;
        }


        input::placeholder {
            color: #5f5e5e;
            /* Light gray color */
            opacity: 1;
            /* Firefox reduces opacity by default */
            font-size: 2rem;
        }

        /* For older browsers */
        input::-webkit-input-placeholder {
            /* Chrome/Opera/Safari */
            color: #999;
        }

        input::-moz-placeholder {
            /* Firefox 19+ */
            color: #999;
            opacity: 1;
        }

        input:-ms-input-placeholder {
            /* IE 10+ */
            color: #999;
        }

        input:focus::placeholder {
            color: transparent;
            /* Hide placeholder on focus */
        }