.material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
        }
        .flat-input {
            border: none;
            border-bottom: 1px solid #CFCFCF;
            border-radius: 0;
            background-color: transparent;
            padding: 8px 0;
            transition: border-color 0.3s ease;
        }
        .flat-input:focus {
            outline: none;
            box-shadow: none;
            border-bottom-color: #B70F5E;
        }
        .date-circle {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            border: 1px solid transparent;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .date-circle:hover {
            background-color: #F2F2F2;
            border-color: #CFCFCF;
            color: #2F3131;
            box-shadow: 0 0 0 1px #CFCFCF;
        }
        .date-circle.selected {
            background-color: #F6D1E5;
            color: #B70F5E;
            border: 2px solid #B70F5E !important;
            box-shadow: 0 0 0 2px rgba(183, 15, 94, 0.24);
        }
        .time-slot {
            padding: 8px 16px;
            border: 1px solid #CFCFCF;
            cursor: pointer;
            transition: all 0.2s ease;
            text-align: center;
        }
        .time-slot:hover {
            background-color: #F2F2F2;
            border-color: #B70F5E;
            color: #2F3131;
            box-shadow: inset 0 0 0 1px #B70F5E;
        }
        .time-slot.selected {
            background-color: #B70F5E;
            color: #ffffff;
            border: 2px solid #B70F5E !important;
            box-shadow: 0 0 0 2px rgba(183, 15, 94, 0.24), inset 0 0 0 1px #B70F5E;
        }