.material-symbols-rounded,
.app-material-icon {
    font-family: 'Material Symbols Rounded';
    font-weight: 400;
    font-style: normal;
    font-size: var(--icon-size, 20px);
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-feature-settings: 'liga';
    font-variation-settings: 'FILL' var(--icon-fill, 0), 'wght' var(--icon-weight, 400), 'GRAD' 0, 'opsz' var(--icon-opsz, 24);
    width: var(--icon-box-size, var(--icon-size, 20px));
    height: var(--icon-box-size, var(--icon-size, 20px));
    min-width: var(--icon-box-size, var(--icon-size, 20px));
    color: var(--icon-color, currentColor);
    flex: 0 0 auto;
    overflow: hidden;
    vertical-align: middle;
}

.side-icon,
.notification-icon,
.settings-hub-icon,
.field-icon,
.password-toggle,
.pwd-toggle,
.icon-btn,
.icon-only,
.service-input-icon,
.floating-whatsapp-icon,
.floating-live-chat-icon,
.floating-translate-icon {
    --icon-size: 20px;
    --icon-box-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--icon-color, currentColor);
    flex: 0 0 auto;
}

.side-icon {
    --icon-size: 19px;
    --icon-box-size: 20px;
}

.notification-icon {
    --icon-size: 21px;
    --icon-box-size: 22px;
}

.side-link.active .side-icon,
.side-link.active .app-material-icon,
.icon-only.is-active,
.icon-only.is-active .app-material-icon {
    --icon-fill: 1;
    --icon-weight: 500;
}

.side-toggle-arrow {
    --icon-size: 18px;
    --icon-box-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease;
}

.side-toggle[aria-expanded="true"] .side-toggle-arrow,
.side-toggle.active .side-toggle-arrow {
    transform: rotate(180deg);
}

button .app-material-icon,
.btn .app-material-icon,
a .app-material-icon {
    pointer-events: none;
}

@media (max-width: 640px) {
    .side-icon {
        --icon-size: 20px;
        --icon-box-size: 22px;
    }

    .notification-icon {
        --icon-size: 22px;
        --icon-box-size: 24px;
    }
}
svg.app-material-icon {
    font-family: inherit;
    display: block;
    width: var(--icon-box-size, var(--icon-size, 20px));
    height: var(--icon-box-size, var(--icon-size, 20px));
    min-width: var(--icon-box-size, var(--icon-size, 20px));
    overflow: visible;
}