html {
    --material-size-xs: 1.625rem;
    --material-size-s: 1.875rem;
    --material-size-m: 2.25rem;
    --material-size-l: 2.75rem;
    --material-size-xl: 3.5rem;
    --material-space-xs: 0.25rem;
    --material-space-s: 0.5rem;
    --material-space-m: 1rem;
    --material-space-l: 1.5rem;
    --material-space-xl: 2.5rem;
    --material-border-radius: 3px;
    --lumo-box-shadow-s: var(--material-shadow-elevation-2dp);
    --lumo-border-radius: var(--material-border-radius);
    --lumo-base-color: var(--material-background-color);
    --app-layout-primary-color: var(--material-primary-color);
    --app-layout-primary-text-color: var(--material-primary-text-color);
    --app-layout-space-s: var(--material-space-s);
    --app-layout-section-divider-color: var(--material-divider-color);
    --app-layout-badge-background: var(--material-primary-color);
    --app-layout-background: var(--material-background-color);
    --app-layout-font-size-header: var(--material-font-size-m);
    --app-layout-font-size-menu: var(--material-font-size-m);
    --app-layout-font-size-notifications: var(--material-font-size-m);
    --app-layout-font-size-app-bar: var(--material-font-size-m);
    --app-layout-bar-height: calc(var(--material-size-s) * 2.1);
    --app-layout-bar-background-base-color: var(--material-background-color);
    --app-layout-bar-background-color: transparent;
    --app-layout-bar-font-color: var(--material-body-text-color);
    --app-layout-bar-shadow: var(--lumo-box-shadow-s);
    --app-layout-bar-z-index: 10;
    --app-layout-bar-padding: 0 var(--app-layout-space-s);
    --app-layout-bar-padding-small: 0 0;
    --app-layout-bar-padding-double: 0 0;
    --app-layout-drawer-shadow: var(--material-shadow-elevation-2dp);
    --app-layout-drawer-background-base-color: var(--material-background-color);
    --app-layout-drawer-background-color: transparent;
    --app-layout-drawer-submenu-background-color: rgba(0, 0, 0, 0.04);
    --app-layout-drawer-font-color: var(--material-body-text-color);
    --app-layout-drawer-width: calc(var(--material-size-xl) * 4.6);
    --app-layout-drawer-small-width: calc(var(--app-layout-bar-height) - 1px);
    --app-layout-menu-button-height: calc(var(--material-size-s) * 1.6);
    --app-layout-menu-button-padding: 0 var(--material-space-s);
    --app-layout-menu-button-margin: 0;
    --app-layout-menu-toggle-button-padding: var(--material-space-s);
    --app-layout-menu-padding: var(--app-layout-space-s) 0;
    --app-layout-menu-button-border-radius: 3px;
    --app-layout-menu-header-padding: var(--app-layout-space-s) calc(var(--app-layout-space-s) * 2) 0 calc(var(--app-layout-space-s) * 2);
    --app-layout-app-selected-bg-color: var(--material-secondary-background-color);
    --app-layout-app-color: var(--material-secondary-text-color);
    --app-layout-badge-width: calc(var(--material-size-s) * 0.8);
    --app-layout-badge-height: calc(var(--material-size-s) * 0.8);
    --app-layout-badge-top: 50%;
    --app-layout-badge-right: 0px;
    --app-layout-badge-color: var(--app-layout-bar-font-color);
    --app-layout-badge-small-width: 5px;
    --app-layout-badge-small-height: 5px;
    --app-layout-badge-small-top: 22%;
    --app-layout-badge-small-right: -5px;
    --app-layout-badge-background: var(--material-primary-color);
    --app-layout-badge-font-color: var(--material-primary-contrast-color);
    --app-layout-notification-highlight-color: var(--app-layout-primary-color);
    --app-layout-notification-font-color: var(--material-body-text-color);
    --app-layout-notification-background-base-color: var(--primary-background-color);
    --app-layout-notification-background-color: var(--primary-background-color);
    --app-layout-notification-shadow: var(--material-shadow-elevation-2dp);
    /* Variables of webcomponents */
    --paper-drawer-title-background-color: var(--primary-background-color);
    --paper-drawer-title-color: var(--material-body-text-color);
    --paper-icon-button-ink-color: var(--material-contrast);
    --app-drawer-width: var(--app-layout-drawer-width);
    /* -webkit-tap-highlight-color: transparent; */
    --paper-tabs-selection-bar-color: var(--material-primary-color);
    --paper-tab-ink: var(--material-primary-color);
    --app-bar-height: var(--app-layout-bar-height);
    --app-menu-background-color: transparent;
    --app-menu-selected-bg-color: var(--app-layout-app-selected-bg-color);
    --app-menu-color: var(--app-layout-drawer-font-color);
    --app-layout-app-bar-flex-direction: row;
    --app-layout-app-bar-large-object-display: visible;
    --app-layout-notification-error-color: #ff3d00;
    --app-layout-bar-toggle-icon-right: -4px;
    --app-layout-notification-warning-color: #fdd835;
    /*--iron-overlay-backdrop-background-color: var(--lumo-shade-20pct);*/
}

html[theme~="dark"] .app-layout {
    --app-layout-bar-background-color: var(--material-secondary-background-color);
    --app-layout-bar-font-color: var(--material-body-text-color);
    --app-layout-drawer-background-color: var(--material-secondary-background-color);
    --app-layout-notification-background-color: var(--material-secondary-background-color);
}

body {
    overflow-x: hidden;
}

.app-menu-item {
    box-sizing: border-box;
    height: var(--app-layout-menu-button-height);
    width: 100%;
    position: relative;
    padding: var(--app-layout-menu-button-padding);
    border-radius: var(--app-layout-menu-button-border-radius);
    overflow: hidden;
    --material-primary-text-color: var(--app-layout-app-color);
    line-height: var(--app-layout-menu-button-height);
    cursor: pointer;
    text-decoration: none;
    color: var(--app-layout-app-color, var(--primary-text-color));
    transition: color 0.4s ease-out;
    display: flex;
    flex-direction: row;
    align-items: center;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-size: 14px;
    font-weight: 500;
    min-height: var(--app-layout-menu-button-height);
    white-space: nowrap;
}

iron-collapse-layout[opened] > div > .app-menu-item > .collapse-icon {
    transform: translate(0%, -50%) rotate(180deg) !important;
}

.app-menu-item:hover, .app-menu-item[highlight] {
    color: var(--material-primary-color);
}

.app-menu-item:after {
    content: "";
    width: 100%;
    height: 100%;
    left: 0px;
    background: rgba(0, 0, 0, 0);
    transition: background 0.4s ease-out;
    position: absolute;
    opacity: 0.3;
}

.app-menu-item:hover, .app-menu-item[highlight] {
    /*background: var(--lumo-primary-color-10pct);*/
}

.app-layout-icon-button {
    min-width: var(--app-layout-menu-button-height);
    line-height: 0px !important;
}

.app-layout-icon-button iron-icon {
    margin-right: -4px;
}

.app-menu-item {
    /*color: var(--app-layout-app-color, var(--primary-text-color));*/
}

.app-menu-item:hover,
.app-menu-item[highlight] {
    color: var(--material-primary-color);
}

.app-menu-item .badge {

}

.app-menu-item iron-icon {
    flex-shrink: 0;
}

.app-menu-item span {
    margin-left: 18px;
}