@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 100 700;
    src: url('font/MaterialSymbolsOutlined.woff2') format('woff2');
}

:root {
    --md-icon-font: 'Material Symbols Outlined';
    /* Primary brand color (used on focus) */
    --md-sys-color-primary: #0a7a6a; /* example blue */
    --md-filled-text-field-focus-active-indicator-color: var(--md-sys-color-primary);
    --md-outlined-text-field-focus-label-text-color: var(--md-sys-color-primary);
    --md-filled-text-field-focus-label-text-color: var(--md-sys-color-primary);
}



.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    display: inline-block;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

.m3-fullwidth {
    width: 100%;
}

md-icon {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    /* Required for ligature → icon */
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    /* Optional but recommended (variable font tuning) */
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

md-filled-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}