.px-nav-drawer .nav-drawer { width: 100%; height: 100%; position: fixed; pointer-events: none; top: 0; left: 0; overflow: hidden; }

.px-nav-drawer .nav-drawer:before { content: ''; width: 100%; height: 100%; background: var(--px-nav-drawer-background-color, black); opacity: 0; display: block; position: absolute; will-change: opacity; -webkit-transition: opacity 0.233s cubic-bezier(0, 0, 0.21, 1); transition: opacity 0.233s cubic-bezier(0, 0, 0.21, 1); }

.px-nav-drawer .nav-drawer--visible { pointer-events: auto; z-index: 100; }

.px-nav-drawer .nav-drawer--visible:before { opacity: 0.7; }

.px-nav-drawer .nav-drawer__content { background: var(--px-nav-drawer-content-background-color, white); width: 80%; max-width: 304px; height: 100%; overflow: hidden; position: relative; -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28); will-change: transform; -webkit-transform: translateX(-102%); transform: translateX(-102%); }

.px-nav-drawer .nav-drawer__content.nav-drawer--visible { -webkit-transform: translateX(0px); transform: translateX(0px); z-index: auto; }

.px-nav-drawer .nav-drawer__content--animatable { -webkit-transition: -webkit-transform 0.233s cubic-bezier(0, 0, 0.21, 1); transition: -webkit-transform 0.233s cubic-bezier(0, 0, 0.21, 1); transition: transform 0.233s cubic-bezier(0, 0, 0.21, 1); transition: transform 0.233s cubic-bezier(0, 0, 0.21, 1), -webkit-transform 0.233s cubic-bezier(0, 0, 0.21, 1); }

.px-nav-drawer .nav-drawer__header { background: var(--px-nav-drawer-header-background-color, black); background-size: cover; width: 100%; height: 75px; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

.px-nav-drawer .nav-drawer__title { font-size: 16px; line-height: 1; color: white; position: absolute; bottom: 8px; left: 16px; height: 16px; font-weight: 500; }

.px-nav-drawer .nav-drawer__body { padding-top: 8px; }

.px-nav-drawer .nav-drawer__version { position: absolute; bottom: 16px; left: 16px; font-size: 14px; opacity: 0.54; }

.px-nav-drawer .nav-drawer__delete-all, .px-nav-drawer .nav-drawer__delete-memos, .px-nav-drawer .nav-drawer__file-bug-report, .px-nav-drawer .nav-drawer__link { font-size: 14px; outline: none; height: 48px; padding-left: 20px; width: 100%; text-align: left; display: block; border: none; color: rgba(0, 0, 0, 0.87); cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-line-pack: stretch; align-content: stretch; }

.px-nav-drawer .nav-drawer__delete-all span, .px-nav-drawer .nav-drawer__delete-memos span, .px-nav-drawer .nav-drawer__file-bug-report span, .px-nav-drawer .nav-drawer__link span { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }

.px-nav-drawer .nav-drawer__delete-all:hover, .px-nav-drawer .nav-drawer__delete-memos:hover, .px-nav-drawer .nav-drawer__file-bug-report:hover, .px-nav-drawer .nav-drawer__link:hover { background-color: rgba(51, 51, 51, 0.21); }

.px-nav-drawer .nav-drawer__link { line-height: 48px; text-decoration: none; }

.px-nav-drawer .nav-drawer__link:focus { background-color: #eee; outline: 0; }

.px-nav-drawer .nav-drawer__file-bug-report { line-height: 48px; text-decoration: none; }

.px-nav-drawer .nav-drawer__link.active { font-weight: bold; background-color: rgba(0, 0, 0, 0.05); }

.px-nav-drawer--is-visible { background: red; }

.px-nav-drawer--is-visible .nav-drawer { pointer-events: auto; z-index: 100; }

.px-nav-drawer--is-visible .nav-drawer:before { opacity: 0.7; }

.px-nav-drawer--is-visible .nav-drawer__content { -webkit-transform: translateX(0px); transform: translateX(0px); z-index: auto; }

.px-nav-drawer--is-persistent { background: blue; }

.px-nav-drawer--is-persistent .nav-drawer { position: absolute !important; }
