body {
    margin: 0;
    transition-property: opacity;
    opacity: 0;
    background: var(--md-sys-color-background);
}

.mdj-no-select
{
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */      
}

:root
{
    --md-icon-font: 'Material Symbols Sharp';
    --mdj-transition-duration: 500ms;
}

md-icon[filled] 
{
    font-variation-settings: 'FILL' 1;
}

.mdj-nav-bottom {
    position: fixed;
    left: 0;
    bottom: env(keyboard-inset-height, 0px);
}

.mdj-nav-top {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
    --md-navigation-bar-container-height: 3.5rem;
    --_container-color: var(--md-sys-color-primary);
    --_color: var(--md-sys-color-on-primary);
}

.mdj-nav-relative
{
    position: relative;
}

.mdj-transition {
    transition-duration: var(--mdj-transition-duration, 500ms);
    transition-timing-function: cubic-bezier(0.14, 0, 0, 1);
    transition-delay: 0s;
}

.mdj-opacity-full {
    opacity: 1;
}

.mdj-opacity-zero {
    opacity: 0;
}

.mdj-page {
    z-index: -1;
    position: absolute;
    opacity: 0;
    overflow-y: hidden;
    min-width: 100%;
    max-width: 100%;
    min-height: calc(100vh - var(--md-navigation-bar-container-height, 80px));
    max-height: calc(100vh - var(--md-navigation-bar-container-height, 80px));
    background: var(--md-sys-color-background);
    transition-property: opacity;
}

.mdj-page-show
{
    z-index: unset;
    opacity: 1;
}

.mdj-no-scroll
{
    overflow: hidden;
}

.mdj-pop-page
{
    height: 0;
    min-height: 0;
    max-height: 0;
    top: calc(100% - 2rem);
    transition-property: opacity, top;
}

.mdj-pop-page-show
{
    z-index: unset;
    min-height: calc(100vh - var(--md-navigation-bar-container-height, 80px));
    max-height: calc(100vh - var(--md-navigation-bar-container-height, 80px));
    height: unset;
    opacity: 1;
    top: 4.45rem;
}

.mdj-text-centered
{
    text-align: center;
}

.mdj-text-field-rounded {
    --_rounded-ends: 2rem;
    --_container-shape-start-start: var(--_rounded-ends);
    --_container-shape-end-start: var(--_rounded-ends);
    --_container-shape-start-end: var(--_rounded-ends);
    --_container-shape-end-end: var(--_rounded-ends);
}

.mdj-text-field-square {
    --_rounded-ends: 0;
    --_container-shape-start-start: var(--_rounded-ends);
    --_container-shape-end-start: var(--_rounded-ends);
    --_container-shape-start-end: var(--_rounded-ends);
    --_container-shape-end-end: var(--_rounded-ends);
}

.mdj-no-outline
{
    --_hover-active-indicator-height: 0;
    --_active-indicator-height: 0;
    --_focus-active-indicator-height: 0;
    --_disabled-active-indicator-height: 0;
}

.mdj-transition-transform
{
    transition-property: transform;
}

.mdj-transition-padding
{
    transition-property: padding;
}

.mdj-rotate-down
{
    transform: rotate(-90deg);
}

.mdj-rotate-carrot-up
{
    transform: rotate(180deg);
}

.mdj-spyglass-down
{
    transform: rotate(-135deg);
}

.mdj-spyglass-up
{
    transform: rotate(-360deg);
}

.mdj-button-icon-fix
{
    margin-top: -.5rem;
}

.mdj-no-display
{
    display: none !important;
}

.mdj-hidden
{
    visibility: hidden !important;
}

.mdj-bottom-sheet
{
    position: fixed;
    top: 100vh;
    z-index: 3;
    transition-property: top;
    --md-navigation-bar-container-height: 7rem;
    --_container-shape: 1rem 1rem 0 0;
    --_container-color: var(--md-sys-color-surface);
}

.mdj-bottom-sheet-show
{
    top: calc(100vh - var(--_container-height));
    transform: translateY(var(--bottom-sheet-move, 0px));
}

.mdj-bottom-sheet-tab
{
    padding-top: 1rem;
}

.mdj-bottom-sheet-tab-left
{
    border-start-start-radius: 1rem;
}

.mdj-bottom-sheet-tab-right
{
    border-start-end-radius: 1rem;
}

.mdj-no-pointer
{
    pointer-events: none;
}

.mdj-snackbar
{
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    border-radius: .25rem;
    position: fixed;
    width: calc(100% - 1rem);
    max-width: 40rem;
    bottom: 8rem;
    z-index: 99;
    height: 3.5rem;
    background-color: var(--md-sys-color-inverse-surface);
    font-size: 1rem;
    font-family: Roboto;
    font-weight: 400;
    display: none;
    box-shadow: 0 8px 10px -5px rgba(0,0,0,.2),0 16px 24px 2px rgba(0,0,0,.14),0 6px 30px 5px rgba(0,0,0,.12);
    transform: scaleY(0);
    transition-property: transform;
}

.mdj-snack-label
{
    margin-left: 1.5rem;
    align-self: center;
    flex-grow: 4;
    color: var(--md-sys-color-inverse-on-surface);
    opacity: .75;
}

.mdj-snack-action
{
    align-self: center;
    text-align: end;
    padding-right: 1.5rem;
    padding-left: 1.5rem;
    color: var(--md-sys-color-inverse-primary);
}

.mdj-card
{
    position: relative;
    --md-elevation-level: 1;
    border-radius: 1rem;
    background-color: var(--md-sys-color-surface-variant);
}

.mdj-card-content
{
    padding: 1rem;
    display: grid;
    grid-template-columns: auto 20%;
    align-items: center;
}

.mdj-left-nav-button
{
    left: 0;
    position: relative;
    background: transparent;
    margin-top: auto;
    margin-bottom: auto;
    top: 0;
    bottom: 0;
    max-width: 4rem;
}

.mdj-nav-bar-title
{
    background: transparent;
    max-height: var(--md-navigation-bar-container-height);
    --_inactive-label-text-color: var(--md-sys-color-on-primary);
    --_label-text-size: 1.25rem;
    margin-top: -0.75rem;
    margin-left: -2rem;
    pointer-events: none;
}

.mdj-no-active-color
{
    --_active-indicator-color: transparent !important;
}

.mdj-tab-page
{
    left: 100%;
    height: calc(100vh - 9rem);
    width: calc(100% - 1rem);
    position: absolute;
    transition-property: left;
    transition-duration: .5s !important;
    padding: .5rem;
    overflow-y: auto;
}

.mdj-tab-page-left
{
    left: -100%;
}

.mdj-tab-page-right
{
    left: 100%;
}

.mdj-on-primary-icon
{
    color: var(--md-sys-color-on-primary);
}

.mdj-on-surface-icon
{
    color: var(--md-sys-color-on-surface);
}

.mdj-bottom-pad
{
    min-height: 4rem;
}

.mdj-expand-button-up
{
    transform: rotate(180deg);
}


.mdj-load-shine
{
    background-image: linear-gradient(to right, rgba(0, 0, 0,.4) 0%, rgba(0, 0, 0, .1) 20%, rgba(0, 0, 0, .2), rgba(0, 0, 0, .4));
    background-repeat: repeat;
    background-size: 4rem 2rem;
    position: relative;
    animation-duration: 1s;
    animation-fill-mode: unset;
    animation-iteration-count: infinite;
    animation-name: placeholderShimmer;
    animation-timing-function: linear
}

.mdj-font-bold
{
    font-weight: bolder !important;
}

.mjd-justify-center
{
    justify-self: center !important;
}

.mdj-text-center
{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.mdj-force-middle
{
    left: 50%;
    transform: translateX(-50%);
}

.mdj-disabled
{
    pointer-events: none;
    filter: grayscale(100%);
    opacity: .75;
}

.mdj-dialog
{
    --md-dialog-container-color: var(--md-sys-color-surface-variant);
}

.mdj-text-field
{
    --_container-color: var(--md-sys-color-surface);
}

.mdj-input-up
{
    position: fixed;
    top: 0;
    left: 0;
    padding-bottom: 200rem  !important;
    z-index: 999;
    opacity: 1;
    background: var(--md-sys-color-background);
}