@import url(//fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Sharp|Material+Icons+Round|Material+Icons+Two+Tone);


/* MDC shape */
@media (max-width: 839px) {
  :root {
    --mdc-shape-small: 12px;
    --mdc-shape-medium: 26px;
    --mdc-shape-large: 36px;
  }
}


/* MDC typography */
:root {
  --mdc-typography-subtitle1-font-size: 1.225rem; /* 1.125rem */
  --mdc-typography-subtitle2-font-size: 0.975rem;
  --mdc-typography-body1-font-size: 1.125rem;
  --mdc-typography-body2-font-size: 0.925rem;
  --mdc-typography-button-font-size: 1rem;
  --mdc-typography-button-letter-spacing: 1;
  --mdc-typography-button-text-transform: normal;
  --mdc-typography-caption-font-size: 0.875rem;
}
.mode-dark:root {
  --mdc-typography-headline1-font-weight: 100;
  --mdc-typography-headline2-font-weight: 100;
  --mdc-typography-headline3-font-weight: 300;
  --mdc-typography-headline5-font-weight: 300;
  --mdc-typography-headline6-font-weight: 400;
  /*--mdc-typography-subtitle1-font-weight: 300;*/
  --mdc-typography-subtitle2-font-weight: 400;
  --mdc-typography-body1-font-weight: 300;
  --mdc-typography-body2-font-weight: 300;
  --mdc-typography-caption-font-weight: 300;
  --mdc-typography-button-font-weight: 400;
  --mdc-typography-overline-font-weight: 400;
}


/* MDC theme */
:root {
  --mdc-theme-background: #f7f7f7; /*#f2f2f2;*/
  --mdc-theme-surface: #ffffff; /*#fcfcfc;*/
  --mdc-theme-primary: #0781fb; /*#0381fe;*/
  --mdc-theme-primary-dark: #4298fc; /*#4298fc #0072de #038cfc - user icon from bex phone*/
  --mdc-theme-secondary: #52cee2; /*#3e91ff;*/
  --mdc-theme-success: #44d37f;
  --mdc-theme-warning: #fdc12b;
  --mdc-theme-error: #fe6d6a;
  --mdc-theme-dark-on-surface: #2d2d2d;
  --mdc-theme-text-primary-on-background: #222222;
  --mdc-theme-text-secondary-on-background: #797979; /*#5c5c5c;*/
  --mdc-theme-text-icon-on-background: #424242;
  --mdc-theme-text-hint-on-background: #979797;
  --mdc-theme-text-disabled-on-background: rgba(0, 0, 0, 0.24);
}
.mode-dark:root {
  --mdc-theme-background: #080808;
  --mdc-theme-surface: #161719; /*#252525;*/
  --mdc-theme-primary: #0381fe;
  --mdc-theme-primary-dark: #3e91ff;
  --mdc-theme-secondary: #3e91ff;
  --mdc-theme-on-primary: #fff;
  --mdc-theme-on-secondary: #fff;
  --mdc-theme-on-surface: #e2e2e2;
  --mdc-theme-on-error: #fff;
  --mdc-theme-text-primary-on-background: #fefefe; /*#fafafa;*/
  --mdc-theme-text-secondary-on-background: #ffffffaa;
  --mdc-theme-text-icon-on-background: #ededed;
  --mdc-theme-text-hint-on-background: #979797;
  --mdc-theme-text-disabled-on-background: rgba(255, 255, 255, 0.18);
}


/* MDC color */
:root {
  --mdc-color-text--blue: #1967d2;
  --mdc-color-blocks--blue: #cce2f2; /*#e8f0fe*/
  --mdc-color-text--red: #c5221f;
  --mdc-color-blocks--red: #fce8e6;
  --mdc-color-text--green: #137333;
  --mdc-color-blocks--green: #e6f4ea;
  --mdc-color-text--yellow: #b05a00;
  --mdc-color-blocks--yellow: #fef7e0;
}
.mode-dark:root {
  --mdc-color-text--blue: #8ab4f8;
  --mdc-color-blocks--blue: #1d3c5b; /*rgba(138,180,248,.24)*/
  --mdc-color-text--red: #f28b82;
  --mdc-color-blocks--red: rgba(242,139,130,.24);
  --mdc-color-text--green: #81c995;
  --mdc-color-blocks--green: rgba(129,201,149,.24);
  --mdc-color-text--yellow: #fdd663;
  --mdc-color-blocks--yellow: rgba(253,214,99,.24);
}


/* MDC ripple */
:root {
  --mdc-ripple-color: #707070;
  --mdc-ripple-hover-opacity: .024;
  --mdc-ripple-press-opacity: .048;
  --mdc-ripple-focus-opacity: .024;
}
.mode-dark:root {
  --mdc-ripple-color: #e2e2e2;
}


/* MDC components */
.mode-dark:root {
  --mdc-checkbox-unchecked-color: rgba(255, 255, 255, 0.54);
  --mdc-placeholder-color: color: rgba(255, 255, 255, 0.87);
  --mdc-text-field-color: color: rgba(255, 255, 255, 0.87);
}


/* MDC Switch */
:root {
  --mdc-switch-track-width: 40px;
  --mdc-switch-track-height: 20px;
  --mdc-switch-track-shape: 10px;
  --mdc-switch-handle-width: 24px;
  --mdc-switch-handle-height: 24px;
  --mdc-switch-handle-shape: 12px;
  --mdc-switch-handle-surface-color: var(--mdc-theme-surface, #fff);
  --mdc-switch-selected-handle-color: #fff;
  --mdc-switch-selected-hover-handle-color: #fff;
  --mdc-switch-selected-focus-handle-color:  #fff;
  --mdc-switch-selected-pressed-handle-color: #fff;
  --mdc-switch-unselected-handle-color: #fff;
  --mdc-switch-unselected-hover-handle-color: #fff;
  --mdc-switch-unselected-focus-handle-color:  #fff;
  --mdc-switch-unselected-pressed-handle-color: #fff;
  --mdc-switch-selected-track-color: var(--mdc-theme-primary, #d7bbff);
  --mdc-switch-selected-hover-track-color: var(--mdc-theme-primary, #d7bbff);
  --mdc-switch-selected-focus-track-color: var(--mdc-theme-primary, #d7bbff);
  --mdc-switch-selected-pressed-track-color: var(--mdc-theme-primary, #d7bbff);
  --mdc-switch-unselected-track-color: transparent;/*var(--mdc-theme-surface, #e0e0e0);*/
  --mdc-switch-unselected-hover-track-color: transparent;/*var(--mdc-theme-surface, #e0e0e0);*/
  --mdc-switch-unselected-focus-track-color: transparent;/*var(--mdc-theme-surface, #e0e0e0);*/
  --mdc-switch-unselected-pressed-track-color: transparent;/*var(--mdc-theme-surface, #e0e0e0);*/
}

/* UI3 Switch */
.ui3-list .mdc-switch__track::before,
.ui3-list .mdc-switch__handle::before, 
.ui3-list .mdc-switch__handle::after {border-color: #9e9e9e}
/*.ui3-list .mdc-switch__track::after,*/
.ui3-list .mdc-switch--selected .mdc-switch__handle::before, 
.ui3-list .mdc-switch--selected .mdc-switch__handle::after {border-color: var(--mdc-theme-primary, #2c74ad)}
.ui3-list .mdc-switch--selected .mdc-switch__icon--on, 
.ui3-list .mdc-switch--unselected .mdc-switch__icon--off { opacity: 0 } /* hide icon */
.ui3-list .mdc-list-item--with-leading-switch.mdc-list-item--with-two-lines.mdc-list-item--with-overflow .mdc-list-item__primary-text {margin-bottom: -16px;}
.ui3-list .mdc-list-item--with-trailing-switch .mdc-list-item__end {
  padding-left: 16px;
  margin-left: 0;
  margin-right: 0;
  padding-right: 24px;
}

.ui3-list .mdc-list-item--with-divider .mdc-list-item__end {border-left: 1px solid var(--mdc-theme-text-disabled-on-background);}
.ui3-list .mdc-list-item--with-trailing-switch.mdc-list-item--with-separator .mdc-list-item__end {padding-top: 20px;}


/* UI3 Header */
:root {
  --ui3-header-phone: 39.67vh;
  --ui3-header-tablet: 18.78vh;
  --ui3-header-desktop: 18.78vh;
  /*--ui3-header-phone: 39.7vh;
  --ui3-header-tablet: 18.8vh;
  --ui3-header-desktop: 18.8vh;*/
}


/* UI3 Theme */
:root {
  /* Status */
  --ui3-theme-success: #55ac51; /*#a4df8b;*/
  --ui3-theme-online: #67d9c3;
  --ui3-theme-notify: #ec6d1c;
  --ui3-theme-warning: #fdc12b;
  --ui3-theme-error: #f84757; /*#ff6e6b;*/

  /* UI 4.0 */
  --ui3-theme-battery: #85dc90;
  --ui3-theme-storage: #4cc2c7;
  --ui3-theme-memory: #2990d2;

  /* Settings */
  --ui3-theme-connections: #54a4fc;
  
  --ui3-theme-sounds: #8c84f3;
  --ui3-theme-notifications: #f37f72;
  
  --ui3-theme-display: #9cd229;
  --ui3-theme-wallpaper: #e87093;
  --ui3-theme-themes: #c07ae0;
  --ui3-theme-home-screen: #29b9d8;
  --ui3-theme-lock-screen: #2ea99a;

  --ui3-theme-security: #7781fc;
  --ui3-theme-privacy: #7ca1ec;
  --ui3-theme-location: #69bf61;
  
  --ui3-theme-accounts-backup: #4671e5;
  --ui3-theme-google: #4789f9;

  --ui3-theme-advanced-features: #fdb94a;

  --ui3-theme-digital-wellbeing: #6baa63;
  --ui3-theme-device-care: #06ac97;
  --ui3-theme-apps: #6daaee;
  
  --ui3-theme-management: #5b7c96;
  --ui3-theme-accessibility: #309556;
  
  --ui3-theme-software-update: #7a80ee;
  --ui3-theme-tips: #fca83f;
  --ui3-theme-about-phone: #8a8a8a;
  --ui3-theme-developer: #8b8b8b;

  /* Storage */
  --ui3-theme-images: #f47e72;
  --ui3-theme-videos: #c898f1;
  --ui3-theme-audio: #8bb0fc;
  --ui3-theme-documents: #ccb080;
  --ui3-theme-installation-files: #a8d638;
  --ui3-theme-compressed-files: #fda025;
  --ui3-theme-apps: #54afb7;
  --ui3-theme-system: #4473aa;
  --ui3-theme-other: #8baabc;
  --ui3-theme-trash: #878996;
}
.mode-dark:root {
  --ui3-theme-notify: #fa6c39;
}


/* OS Theme */
:root {
  --os-theme-debian: #d70a53;
  --os-theme-ubuntu: #dd4814;
}



/*html {scroll-behavior: smooth}*/

/* stops overflow right while opening/closing dialogs */
/*body {overflow-x: hidden !important;}*/
/*.mdc-dialog--closing {overflow: hidden !important;}*/

/* dialog screen lock */
body.mdc-dialog-scroll-unlock {overflow-y: auto}
/*
body.mdc-dialog-scroll-lock {overflow: auto}
body.mdc-dialog-scroll--lock {overflow: hidden}
body.mdc-dialog-scroll--unlock {overflow: auto}
*/





/* ui3 hide header on scroll */
.ui3-header-hidden .one-top-app-bar {
   top: 0;
   height: auto;
}
.ui3-header-hidden .one-top-app-bar .mdc-top-app-bar__row:first-child {
   display: none;
}
/*.ui3-header-hidden .one-top-app-bar .mdc-top-app-bar__row:first-child {height: 0;overflow: hidden;}*/





/* Webkit Scrollbars */
@media (width: 500px) {
  ::-webkit-scrollbar {width: 0}
}
@media (min-width: 501px) {
  ::-webkit-scrollbar-track {background-color: transparent}
  ::-webkit-scrollbar {
    width: 9px;
    height: 9px;
  }
  ::-webkit-scrollbar-thumb {
    background-color: rgba(90,90,90,.32); /*#cccccc*/
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-background-clip: content-box;
    background-clip: content-box;
  }
  ::-webkit-scrollbar-corner {
    background-color: transparent;
  }
  .mode-dark ::-webkit-scrollbar-thumb {background-color: #313235}
}


/* ::placeholder needs to be wrapped because IE11 will drop other selectors using the same color */
@media all {
  .mode-dark .mdc-text-field__input::placeholder {
    color: rgba(255, 255, 255, 0.64) !important;
    color: var(--mdc-theme-text-hint-on-background, rgba(255, 255, 255, 0.38)) !important;
  }
}


/* Webkit Autofill */
input:-webkit-autofill { 
  -webkit-text-fill-color: #fff;
  -webkit-text-fill-color: var(--mdc-theme-text-primary-on-background, #fff);
  -webkit-background-clip: text;
  background-clip: text;
}


/* SVG */
svg.iconify {
  width: 90%;
  height: 90%;
  padding: 5%;
}


/* Squircle */
svg.defs {
  position: absolute;
  width: 0;
  height: 0;
}
.squircle {
  clip-path: url(#squircle);
  transition: 109ms all cubic-bezier(0.4, 0, 0.2, 1);
}



.mdc-theme--success {
    color: #55ac51 !important;
    color: var(--mdc-theme-success, #55ac51) !important;
}
.mdc-theme--warning {
    color: #fdc12b !important;
    color: var(--mdc-theme-warning, #fdc12b) !important;
}


.ui3-theme--notify {
    color: #fa6c39 !important;
    color: var(--ui3-theme-notify, #fa6c39) !important;
}



.mdc-color-blocks--blue {
  box-shadow: none;
  color: var(--mdc-color-text--blue);
  background-color: var(--mdc-color-blocks--blue) !important;
}

.mdc-color-blocks--red {
  box-shadow: none;
  color: var(--mdc-color-text--red);
  background-color: var(--mdc-color-blocks--red) !important;
}

.mdc-color-blocks--green {
  box-shadow: none;
  color: var(--mdc-color-text--green);
  background-color: var(--mdc-color-blocks--green) !important;
}

.mdc-color-blocks--yellow {
  box-shadow: none;
  color: var(--mdc-color-text--yellow);
  background-color: var(--mdc-color-blocks--yellow) !important;
}




.fs-larger {
  font-size: 1.125rem;
  line-height: 1.5rem;
}
.fs-xlarge {
  font-size: 2.475rem;
  line-height: 2.825rem;
}



/* MDC Drawer Modal */
/*.mdc-drawer--modal {border-radius: 0 4px 4px 0}*/
.mdc-drawer {z-index: 9}
.mdc-drawer-scrim {z-index: 8}




/*
 *
 * MDC Dialog
 *
 * default:     standard size - scale in center;
 * data-sheet:  bottom on mobile - slide in up, side on desktop - slide in left;
 * over-scroll: scrolls dialog off screen - inherit;
 * full-screen: full-screen on all devices - slide in up;
 *
 */


/* change scrolling to dialog not body *
.mdc-dialog.mdc-dialog--full-screen {position: absolute;}
.mdc-dialog.mdc-dialog--full-screen .mdc-dialog__container {align-items: flex-start;}
*/


/*.mdc-dialog .mdc-dialog__scrim {background-color: rgba(0,0,0,.48);}*/



/* mdc-dialog--data-sheet */
.mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__surface {
  padding: 8px;
  overflow-y: initial;
}



/* MDC Dialog Data Sheet */
/*
.mdc-dialog__title .mdc-icon-button[data-mdc-dialog-action="close"] {
  float: right;
  margin-top: 10px;
  margin-right: -12px;
}
*/
.mdc-dialog.mdc-dialog--data-sheet.mdc-dialog--scrollable .mdc-dialog__title {border-bottom: 1px solid rgba(0,0,0,0)}
.mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__surface {
  max-height: calc(100vh - var(--ui3-header-phone, 39.67vh));
  padding: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__surface {
  min-width: 100%;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0px 8px 10px -5px rgb(0 0 0 / 20%), 0px 16px 24px 2px rgb(0 0 0 / 14%), 0px 6px 30px 5px rgb(0 0 0 / 12%);

  /*border-left-width: 1px;
  border-left-style: solid;*/
}




/*.mdc-dialog .mdc-dialog__content {padding: 12px 24px 20px;}*/
.mdc-dialog__content {
  display: flex;
  flex-direction: column;
}


.mdc-dialog.mdc-dialog--data-sheet.mdc-dialog--over-scroll .mdc-dialog__content {max-height: 100vh;}

.mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__content {padding: 0;}


/* MDC Dialog Over Scroll */
.mdc-dialog.mdc-dialog--over-scroll .mdc-dialog__container {
    overflow: auto;
    pointer-events: all;
}
.mdc-dialog.mdc-dialog--over-scroll .mdc-dialog__surface {
  /*max-height: 50%;*/
  padding: 0;
  overflow: initial;
}
.mdc-dialog.mdc-dialog--over-scroll .mdc-dialog__content {
    max-height: 100%;
    overflow: initial;
}



/* MDC Dialog Full Screen */
.mdc-dialog.mdc-dialog--full-screen {
  position: relative;
  /*min-height: 100vh; /* fix glitch */
}
.mdc-dialog.mdc-dialog--full-screen .mdc-dialog__container {
   align-items: flex-start;
   width: 100%;
   /*-webkit-transform: translateY(var(--ui3-header-phone, 39.67vh));
   transform: translateY(var(--ui3-header-phone, 39.67vh));*/
   -webkit-transform: translateY(var(--ui3-header-tablet, 18.78vh));
   transform: translateY(var(--ui3-header-tablet, 18.78vh));
}
.mdc-dialog.mdc-dialog--full-screen.mdc-dialog--open .mdc-dialog__container {
  -webkit-transform: none;
  transform: none;
}
.mdc-dialog.mdc-dialog--full-screen .mdc-dialog__surface {
  min-width: 100%;
  padding: 0;
  background-color: #fff;
  background-color: var(--mdc-theme-background, #fff);
  border-radius: 0;
  overflow: initial;
  box-shadow: none;
  box-shadow: 0px 8px 10px -5px rgb(0 0 0 / 20%), 0px 16px 24px 2px rgb(0 0 0 / 14%), 0px 6px 30px 5px rgb(0 0 0 / 12%);
}


@media (max-width: 839px) {
  
  /* mdc-dialog--data-sheet */
  .mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__container {
    align-items: flex-end;
    padding: 16px;
  }
  .mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__container {
    -webkit-transform: translateY(var(--ui3-header-tablet, 18.78vh));
    transform: translateY(var(--ui3-header-tablet, 18.78vh));
  }
  .mdc-dialog.mdc-dialog--data-sheet.mdc-dialog--open .mdc-dialog__container {
    -webkit-transform: none;
    transform: none;
  }


  .mdc-dialog.mdc-dialog--over-scroll .mdc-dialog__container,
  .mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__container,
  .mdc-dialog.mdc-dialog--full-screen .mdc-dialog__container {
    padding: 0;
    width: 100%;
    /*-webkit-transform: translateY(var(--ui3-header-tablet, 18.78vh));
    transform: translateY(var(--ui3-header-tablet, 18.78vh));*/
  }
  .mdc-dialog.mdc-dialog--over-scroll.mdc-dialog--open .mdc-dialog__container,
  .mdc-dialog.mdc-dialog--data-sheet.mdc-dialog--open .mdc-dialog__container,
  .mdc-dialog.mdc-dialog--full-screen.mdc-dialog--open .mdc-dialog__container {
    -webkit-transform: none;
    transform: none;
  }
  .mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__surface {
    border-top-width: 1px;
    border-top-style: solid;
  }
}

@media (max-width: 599px) {
  .mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__container,
  .mdc-dialog.mdc-dialog--over-scroll .mdc-dialog__container {width: 100%;}
  .mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__surface {min-width: 100%;}
  .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__container {
    -webkit-transform: translateX(var(--ui3-header-mobile, 39.7vh));
    transform: translateX(var(--ui3-header-mobile, 39.7vh));
  }
  .mdc-dialog.mdc-dialog--fullscreen.mdc-dialog--open .mdc-dialog__container {
    -webkit-transform: none;
    transform: none;
  }
}




/* MDC Dialog Side-sheet */
@media (min-width: 840px) {
  .mdc-dialog.mdc-dialog--data-sheet {
    position: fixed;
    justify-content: flex-end;
    left: initial;
    right: 0;
    box-shadow: 0px 8px 10px -5px rgb(0 0 0 / 20%), 0px 16px 24px 2px rgb(0 0 0 / 14%), 0px 6px 30px 5px rgb(0 0 0 / 12%);
  }
  .mdc-dialog--data-sheet .mdc-dialog__container {
    -webkit-transform: translateX(40vw);
    transform: translateX(40vw);
  }
  .mdc-dialog--data-sheet.mdc-dialog--open .mdc-dialog__container {
    -webkit-transform: none;
    transform: none;
  }
  .mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__surface {min-height: 100%;}
}


/* MDC Dialog Side-sheet width from TagManager */
/*@media (min-width: 480px) {.mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__container {width: 87vw;}}
@media (min-width: 582px) {.mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__container {width: 89vw;}}
@media (min-width: 640px) {.mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__container {width: 90vw;}}
@media (min-width: 712px) {.mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__container {width: 91vw;}}*/
@media (min-width: 800px) {.mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__container {width: 92vw;}}
@media (min-width: 914px) {.mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__container {width: 93vw;}}
@media (min-width: 1035px) {.mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__container {width: 92vw;}}
@media (min-width: 1104px) {.mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__container {width: 91vw;}}
@media (min-width: 1172px) {.mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__container {width: 90vw;}}
@media (min-width: 1244px) {.mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__container {width: 89vw;}}
@media (min-width: 1312px) {.mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__container {width: 88vw;}}
@media (min-width: 1450px) {.mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__container {width: 86vw;}}
@media (min-width: 1560px) {.mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__container {width: 84vw;}}
@media (min-width: 1728px) {.mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__container {width: 82vw;}}
@media (min-width: 1868px) {.mdc-dialog.mdc-dialog--data-sheet .mdc-dialog__container {width: 80vw;}}





/* MDC Top App Bar Section */
/*.mdc-top-app-bar {z-index: 9}*/

/*@media (min-width: 600px) {
  .mdc-top-app-bar__row {padding: 0 5%;}
}
@media (min-width: 1450px) {
  .mdc-top-app-bar__row {padding: 0 12.5%;}
}*/


/* Nav Scroll Content */
.mdc-dialog--full-screen .nav-scroll-content {
  position: relative;
  width: 100%;
  margin: 0 auto;
  min-height: calc(100vh - 56px);
}


.mdc-dialog--full-screen .nav-scroll-content::before,
.mdc-dialog--full-screen .nav-scroll-content::after {
  position: fixed; /*sticky;*/
  display: flex;
  width: 100%;
  height: 24px;
  background: transparent;
  pointer-events: none;
  content: '';
}
.mdc-dialog--full-screen .nav-scroll-content::before {
  top: 56px;
  margin-bottom: -24px;
  border-radius: 24px 24px 0 0;
  /*box-shadow: 0 -12px 0 12px var(--mdc-theme-background, #fff);*/
  box-shadow: 0 -64px 0 64px var(--mdc-theme-background, #fff); /* fix for small landscape */
  z-index: 3;
}
.mdc-dialog--full-screen .nav-scroll-content::after {
  bottom: 0;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 12px 0 12px var(--mdc-theme-background, #fff);
}



/* MDC Grid */
.mdc-layout-grid {
  padding-left: 0;
  padding-right: 0;
}


/* TabBar */
.content {display: none;}
.content.content--active {display: block;}

/*
@media (max-width: 839px) {
  .mdc-tab {height: 48px;}
  .mdc-tab .mdc-tab__icon {display: none;}
}
*/

/* bottom tab bar */
.mdc-tab {
    height: 56px;
}
.mdc-dialog--full-screen .nav-scroll-content.nav-scroll-content--with-tab-bar {
  min-height: calc(100vh - 112px);
  margin-bottom: 56px;
}
.mdc-dialog--full-screen .nav-scroll-content.nav-scroll-content--with-tab-bar::after {bottom: 56px;}

.mdc-dialog--full-screen .mdc-tab-bar {
  position: fixed;
  bottom: 0;
  z-index: 1;
  background: var(--mdc-theme-background, #f7f7f7);
  box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px 0px rgb(0 0 0 / 14%), 0px 1px 10px 0px rgb(0 0 0 / 12%);
}
@media (max-width: 599px) {
  .mdc-dialog--full-screen .mdc-tab-bar {box-shadow: none;}
  /*.mdc-dialog--full-screen .nav-scroll-content.nav-scroll-content--with-tab-bar {
    min-height: calc(100vh - 88px);
    margin-bottom: 24px;
  }*/
}
/*
@media (max-width: 839px) {
  .mdc-dialog--full-screen .content.nav-scroll-content {margin-bottom: 56px;}
  .mdc-dialog--full-screen .content.nav-scroll-content::after {bottom: 48px;}
}
*/




@media (min-width: 599px) {
  .mdc-dialog--full-screen .nav-scroll-content {
    width: 90%;
    max-width: 1040px;
    min-height: calc(100vh - 64px);
  }
  .mdc-dialog--full-screen .nav-scroll-content::before {top: 64px}
  .mdc-dialog--full-screen .nav-scroll-content::after {display: none}
}
@media (min-width: 840px) {
  .mdc-dialog--full-screen .nav-scroll-content::before {display: none}
}
@media (min-width: 1450px) {
  .mdc-dialog--full-screen .nav-scroll-content {width: 75%}
  .mdc-dialog.mdc-dialog--fullscreen .mdc-dialog__surface {width: calc(70vw - 100px);}
}







/* MDC Top App Bar */
.one-top-app-bar {
  position: sticky;
  top: calc(64px - var(--ui3-header-tablet, 18.78vh));
  height: var(--ui3-header-tablet, 18.78vh);
  color: rgba(0, 0, 0, 0.87);
  color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
  background-color: #fff;
  background-color: var(--mdc-theme-background, #fff);
}
/*.one-top-app-bar .mdc-top-app-bar__row:first-child {
  flex-grow: 1;
  height: 0;
}*/
.one-top-app-bar .mdc-top-app-bar__row:first-child {
   height: calc(var(--ui3-header-tablet, 18.78vh) - 64px);
   /*min-height: 100px;*/
}

@media (max-width: 599px) {
  .one-top-app-bar {
    top: calc(56px - var(--ui3-header-phone, 39.67vh));
    /*height: var(--ui3-header-phone, 39.67vh);*/
    height: 100%;
    justify-content: flex-start;
  }
  .one-top-app-bar .mdc-top-app-bar__row:first-child {height: calc(var(--ui3-header-phone, 39.67vh) - 56px);}
}
@media (max-width: 839px) {
  .one-top-app-bar {
    box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 20%), 0px 0px 0px 0px rgb(0 0 0 / 14%), 0px 0px 0px 0px rgb(0 0 0 / 12%);
  }
}




/* top app bar --title */
.one-top-app-bar--title {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  max-width: 90%;
  margin: auto;
  z-index: 1;
  opacity: 0;
}
/*.mdc-dialog:not(.ui3-header-hidden) .one-top-app-bar--title {opacity: 1;}*/

.one-top-app-bar--title .title--box {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  word-break: break-word;
}



@media (max-width: 599px) {
  .one-top-app-bar--title {flex-direction: column}
  .one-top-app-bar--title .title--box {
    margin-top: 8px;
  }
}

@media (min-width: 600px) {
  .one-top-app-bar--title .title--box {margin-left: 20px;}
  .one-top-app-bar--primaryText,
  .one-top-app-bar--secondaryText {line-height: 1}
}



/* top app bar __title */
.one-top-app-bar .mdc-top-app-bar__title {
  padding-left: 4px;
  /*opacity: 0;*/
}
/*.mdc-dialog.ui3-header-hidden .mdc-top-app-bar__title,
.mdc-top-app-bar.mdc-top-app-bar--fixed-scrolled .mdc-top-app-bar__title {opacity: 1;}*/






/* App Bar Nav Icons */
.mdc-top-app-bar .mdc-top-app-bar__action-item, .mdc-top-app-bar .mdc-top-app-bar__navigation-icon {
  color: #424242;
  color: var(--mdc-theme-text-icon-on-background, #424242);
}


/* Navigation Icon */
.navigation-icon-button {
  text-align: center;
}
.navigation-icon-button .mdc-button {
  min-width: auto;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 24%;
}



/* Account Settings */
.mdc-top-app-bar button[aria-label="Account settings"] {
  font-size: 32px;
  padding: 8px;
}






/* Hero Button */
.hero-button {
  display: flex;
  width: auto;
  margin: auto;
}
.hero-button--icon {font-size: 40px}
.hero-button--small {
  height: 36px;
}
.hero-button--medium {
  min-width: 60%;
  height: 40px;
}
.hero-button--large {
  min-width: 60%;
  height: 48px;
  font-size: 1.125rem;
}





/* icon graphic */
.icon-graphic {
  display: flex;
  align-self: center;
  align-items: center;
  min-width: 32px;
  height: 32px;
  border-radius: 24%;
  z-index: 0; /* 1 covers ripple */
}
.icon-graphic--small {
  min-width: 24px;
  height: 24px;
}
.icon-graphic--s40 {
  min-width: 40px;
  height: 40px;
}
.icon-graphic--s48 {
  min-width: 48px;
  height: 48px;
}
.icon-graphic--s56 {
  min-width: 56px;
  height: 56px;
}
.icon-graphic--s64 {
  min-width: 64px;
  height: 64px;
}



/* adaptive icons */
.adaptive-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #fff;
  color: var(--mdc-theme-text-primary-on-dark, #fff);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /*border-radius: 24%;*/
  border-radius: inherit;
}
/*.adaptive-icon::before {
  background-size: 108px 108px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #fff;
  background-color: var(--mdc-theme-background, #fff);
  content: '';
}*/

.adaptive-icon.squircle {border-radius: 0;}

.adaptive-icon.adaptive-icon--legacy {
  width: 68.75%;
  height: 68.75%;
  background-size: contain;
  margin: 15.625%;
  border-radius: 24%;
  background-color: #fff;
  background-color: var(--mdc-theme-surface, #fff);
}
.adaptive-icon.adaptive-icon--legacy::before {
  box-shadow: 0px 0px 2px -1px rgb(0 0 0 / 12%), 0px 1px 1px 0px rgb(0 0 0 / 14%), 0px 0px 0px 0px rgb(0 0 0 / 20%);
  width: 145.5%;
  height: 145.5%;
  margin: -22.75%;
  border-radius: 40%;
  background-color: inherit;
  content: '';
  z-index: -1;
}


/* extra background on icon needs fixed */
.mode-dark .adaptive-icon.adaptive-icon--legacy {
  /*background-color: var(--mdc-theme-dark-on-surface, #2d2d2d);*/
  background-color: #3c3c3c;
  /*background-color: rgb(63 63 63 / 32%);*/
}
.mode-dark .adaptive-icon.adaptive-icon--legacy::before {
  background-color: inherit;/*rgba(63, 63, 63, 0.32);/*#616161 #3c3c3c*/
  box-shadow: none;
  /*box-shadow: 0px 0px 2px -1px rgb(63 63 63 / 24%), 0px 1px 1px 0px rgb(63 63 63 / 28%), 0px 0px 0px 0px rgb(63 63 63 / 40%);*/
}



.adaptive-icon.adaptive-icon--s20 i {font-size: 20px; max-width: 20px; overflow: hidden;}
.adaptive-icon.adaptive-icon--small i {font-size: 32px; max-width: 32px; overflow: hidden;}
.adaptive-icon.adaptive-icon--medium i {font-size: 40px; max-width: 40px; overflow: hidden;}
.adaptive-icon.adaptive-icon--large i {font-size: 48px; max-width: 48px; overflow: hidden;}

.adaptive-icon.adaptive-image--small {background-size: 36px;}
.adaptive-icon.adaptive-image--medium {background-size: 48px;}
.adaptive-icon.adaptive-image--large {background-size: 72px;}
.adaptive-icon.adaptive-image--default {background-size: 108px;}

.adaptive-icon.adaptive-image--oversize {
  background-size: 222px;
  background-position: center -64px;
}
.adaptive-icon.adaptive-image--oversize-medium {
  background-size: 220px;
  background-position: center -64px;
}
.adaptive-icon.adaptive-image--oversize-large {
  background-size: 256px;
  background-position: center -72px;
}



/* mdc buttons */
.mdc-button {border-radius: var(--mdc-shape-medium, 26px);}

.mdc-button .mdc-button__ripple::before,
.mdc-button .mdc-button__ripple::after,
.mdc-button--unelevated .mdc-button__ripple::before,
.mdc-button--unelevated .mdc-button__ripple::after,
.mdc-top-app-bar .mdc-top-app-bar__action-item::before,
.mdc-top-app-bar .mdc-top-app-bar__action-item::after,
.mdc-top-app-bar .mdc-top-app-bar__navigation-icon::before,
.mdc-top-app-bar .mdc-top-app-bar__navigation-icon::after {
  background-color: #aaa;
  /*background-color: var(--mdc-ripple-color, var(--mdc-theme-on-light, #fff));*/
}

.mdc-button.mdc-button--medium-icon .mdc-button__icon {
  width: 24px;
  height: 24px;
  font-size: 24px;
}
.mdc-button.mdc-button--large-icon .mdc-button__icon {
  width: 36px;
  height: 36px;
  font-size: 35px;
}
.mdc-button.mdc-theme--background {
  background-color: #fff !important;
  background-color: var(--mdc-theme-background, #fff) !important;
}
.mode-dark .mdc-button.mdc-theme--background {background-color: #3f3f3f !important;}
.mdc-button.mdc-theme--surface {
  background-color: #fff !important;
  background-color: var(--mdc-theme-surface, #fff) !important;
}
.mode-dark .mdc-button.mdc-theme--surface {background-color: #252525 !important;}






/* mdc menu */
.mdc-menu .mdc-list {padding: 0;}
.mdc-menu .mdc-list .mdc-list-item {min-height: 48px;}
.mode-dark .mdc-menu .mdc-list {color: rgba(255, 255, 255, 0.87)}




/* MDC Tab Bar */
.mode-dark .mdc-tab__icon {color: rgba(255, 255, 255, 0.54)}
.mode-dark .mdc-tab .mdc-tab__text-label {color: rgba(255, 255, 255, 0.6)}
.mode-dark .mdc-tab--active .mdc-tab__icon,
.mode-dark .mdc-tab--active .mdc-tab__text-label {
  color: #6200ee;
  color: var(--mdc-theme-primary, #6200ee);
}





/* hero header */
.hero-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;  
  padding: 24px;
}
.hero-content--with-vertical-linear-progress {
   padding-top: 0;
    padding-bottom: 0;
    padding-right: 96px;
    min-height: 360px;
    margin-top: -64px;
}





/* mdc-card */
.mdc-card {
  box-shadow: 0px 0px 1px 0px rgb(0 0 0 / 12%), 0px 0px 0px 0px rgb(0 0 0 / 14%), 0px 0px 0px 0px rgb(0 0 0 / 20%);
  transition: 219ms border-radius cubic-bezier(0.4, 0, 0.2, 1);
}
.mode-dark .mdc-card {box-shadow: none}
.mdc-card--outlined {
  border-color: rgba(190,190,190,.24);
}
.mode-dark .mdc-card--outlined {
  border-color: #33333d;
  border-color: var(--mdc-theme-surface, #33333d);
}
.mdc-card--transparent {background: rgba(255,255,255,.5);}
.card--padded {
  width: 100%;
  padding: 1rem 2rem;
}





.mdc-card.mdc-card--rounded {
  border-radius: 4px;
  border-radius: var(--mdc-shape-medium, 4px);
}





/**
 *
 * UI3 Lists
 *
**/

.mdc-card.mdc-list,
.mdc-card .mdc-list {padding: 0;}
/*.mdc-list .mdc-list-item.mdc-card:first-child {padding-top: 8px;}
.mdc-list .mdc-list-item.mdc-card:last-child {padding-bottom: 8px;}*/


/* expandable */
.ui3-list--expandable {
   transition: max-height .4s ease-in;
   max-height: 4000px;
   overflow: hidden;
}
.ui3-list--expanded {
   transition: max-height .4s ease-out;
   max-height: 0;
}



/* UI3 List Group */
/*.ui3-list-group .mdc-list {padding: 0;}*/
.ui3-list-group .mdc-list-group__subheader {margin: 16px 24px 16px;}

/* MDC List Item */
.ui3-list .mdc-list-item {
  padding-left: 24px;
  padding-right: 24px;
  transition: 219ms margin cubic-bezier(0.4, 0, 0.2, 1);
}
.ui3-list .mdc-list-item--with-leading-icon.mdc-list-item {padding-left: 16px;}
.ui3-list .mdc-list-item--with-leading-switch.mdc-list-item {padding-left: 4px;}
.ui3-list .mdc-list-item--with-leading-avatar.mdc-list-item {padding-left: 4px;}
.ui3-list .mdc-list-item--with-leading-image.mdc-list-item {padding-left: 0;}

.ui3-list .mdc-list-item--with-trailing-icon.mdc-list-item {padding-right: 16px;}
.ui3-list .mdc-list-item--with-trailing-avatar.mdc-list-item {padding-right: 20px;}
.ui3-list .mdc-list-item--with-trailing-switch.mdc-list-item {padding-right: 4px;}

.ui3-list .material-icons {vertical-align: text-bottom;}
/*.ui3-list .mdc-list-item__primary-text {font-size: 1.125rem;}*/

.ui3-list .mdc-list-item--with-half-line {min-height: 40px}
.ui3-list .mdc-list-item--with-one-line {min-height: 60px}
.ui3-list .mdc-list-item--with-one-line.mdc-list-item--with-leading-icon {min-height: 64px}
.ui3-list .mdc-list-item--with-one-line.mdc-list-item--with-leading-avatar {min-height: 72px}

/*.ui3-list .mdc-list-item.mdc-list-item--with-one-line .mdc-list-item__end {
  display: flex;
  align-self: inherit;
}*/

.ui3-list .mdc-list-item--with-one-line.mdc-list-item--with-leading-icon .mdc-list-item__start {
  margin-left: 8px;
  margin-right: 20px;
}


.ui3-list .mdc-list-item .mdc-list-item__content {padding-right: 8px;}


/* MDC List Item Start */
.ui3-list .mdc-list-item--with-leading-meta.mdc-list-item {padding-left: 16px;}
.ui3-list .mdc-list-item--with-leading-icon .mdc-list-item__start {margin-right: 24px;}


.ui3-list .mdc-list-item--with-trailing-meta.mdc-list-item {padding-right: 8px;}
.ui3-list .mdc-list-item--with-trailing-meta .mdc-list-item__end {
  display: flex;
  align-items: center;

  padding-left: 24px;
  margin-left: 0;
  margin-right: 16px;
}
.ui3-list .mdc-list-item--with-trailing-icon .mdc-list-item__end {
  color: #979797;
  color: var(--mdc-theme-text-hint-on-background, #979797);
}


/* UI3 List Item with Overflow */
.ui3-list .mdc-list-item.mdc-list-item--with-overflow {
  /*height: auto;*/
  height: 100%;
  min-height: 64px;
  /*padding-bottom: 16px; /* 12px */
  box-sizing: border-box;
}
.ui3-list .mdc-list-item.mdc-list-item--with-overflow .mdc-list-item__content,
.ui3-list .mdc-list-item.mdc-list-item--with-overflow .mdc-list-item__primary-text,
.ui3-list .mdc-list-item.mdc-list-item--with-overflow .mdc-list-item__secondary-text {
  white-space: initial;
  word-break: break-word;
}
.ui3-list .mdc-list-item--with-overflow .mdc-list-item__content {padding-bottom: 16px;}




/* UI3 List Item with Avatar */
.ui3-list .mdc-list-item--with-leading-avatar .mdc-list-item__start {z-index: 1;}
.ui3-list .mdc-list-item--with-leading-avatar.mdc-list-item--with-leading-avatar--medium .mdc-list-item__start {
  width: 36px;
  height: 36px;
  padding: 2px;
}
.ui3-list .mdc-list-item--with-leading-avatar--small .mdc-list-item__start {
  width: 32px;
  height: 32px;
  padding: 4px;
}
.ui3-list .mdc-list-item--with-leading-avatar--small .adaptive-icon.squircle i {font-size: 22px;}


/*.ui3-list .mdc-list-item--with-leading-avatar--small.mdc-list-item--with-overflow .mdc-list-item__start {margin-top: 17px;} /* should be 16px but squirlce shape is not right */


/* dual action list item */
/*.list-item--dual-action .mdc-list-item__meta {
  padding-left: 15px;
  border-left: 1px solid rgba(127,127,127,.12);
  align-self: center;
  display: flex;
}*/



/* MDC List In MDC Card */
.mdc-list-item.mdc-card {flex-direction: row}

.mdc-card .mdc-list .mdc-list-item.mdc-card:not(.mdc-list-item--with-spacer):first-child,
.mdc-card .mdc-list .mdc-list-item.mdc-card {
  box-shadow: none;
  background: none;
}

.mdc-card .mdc-list .mdc-list-item.mdc-card:first-child {
  border-radius: 0;
}


.mdc-list-item__graphic {
  display: flex;
  margin-right: 20px;
  align-self: center;
}
.mdc-list--avatar-list .mdc-list-item__graphic {
  width: 36px;
  height: 36px;
}



/* UI3 List Item Separator */
/*.ui3-list .mdc-list-item.mdc-list-item--with-trailing-meta.mdc-list-item--with-separator {padding-bottom: 8px;}*/
/*.ui3-list .mdc-list-item.mdc-list-item--with-separator .mdc-list-item__end {margin-top: 8px;}*/

/*.ui3-list .mdc-list-item.mdc-list-item--with-one-line.mdc-list-item--with-overflow.mdc-list-item--with-separator {padding-top: 16px;}*/
.ui3-list .mdc-list-item.mdc-list-item--with-trailing-icon.mdc-list-item--with-divider .mdc-list-item__end {
  padding-left: 16px;
  margin-left: 0;
  margin-right: 0;
  padding-right: 8px;
}
.ui3-list .mdc-list-item.mdc-list-item--with-overflow.mdc-list-item--with-trailing-image.mdc-list-item--with-separator .mdc-list-item__end {
  padding-top: 16px;
  padding-left: 16px;
  margin-left: 0;
}


.ui3-list .mdc-list-item.mdc-list-item--with-separator .mdc-list-item__content,
.ui3-list .mdc-list-item.mdc-list-item--with-separator .mdc-list-item__end {border-bottom: 1px solid rgba(127,127,127,.2);}

.ui3-list .mdc-list-item.mdc-list-item--with-separator:last-child .mdc-list-item__content,
.ui3-list .mdc-list-item.mdc-list-item--with-separator:last-child .mdc-list-item__end {border-bottom: 1px solid transparent}

/*.ui3-list .mdc-list-item.mdc-list-item--with-separator .mdc-list-item__content {
  display: flex;
  flex-direction: column;
  align-self: stretch;
  justify-content: center;
}*/

.ui3-list .mdc-list-item.mdc-list-item--with-one-line.mdc-list-item--with-separator .mdc-list-item__content,
.ui3-list .mdc-list-item.mdc-list-item--with-separator .mdc-list-item__end {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;  
}


.ui3-list .mdc-list-item--with-separator .mdc-list-item--with-trailing-meta .mdc-list-item__end {
  padding-left: 24px;
  margin-left: 0;
}



/* MDCListItem */
/*.ui3-list .mdc-list-item.mdc-list-item--with-three-lines {min-height: 92px;}*/
/*.ui3-list .mdc-list-item--with-three-lines .mdc-list-item__start {align-self: center}*/
.ui3-list .mdc-list-item--with-two-lines .mdc-list-item__primary-text::before, .ui3-list .mdc-list-item--with-three-lines .mdc-list-item__primary-text::before {height: 32px;}
.ui3-list .mdc-list-item--with-two-lines .mdc-list-item__primary-text::after, .ui3-list .mdc-list-item--with-three-lines .mdc-list-item__primary-text::after {vertical-align: -22px;}

.ui3-list .mdc-list-item.mdc-list-item--with-two-lines {min-height: 76px;}


/* MDC List Divider */
.mdc-list-divider {
  margin: 0 20px;
  background-color: rgba(127,127,127,.12);
  background-clip: border-box;
}


/* MDC Progress Divider */
.progress-divider {display: inline-flex;}
.progress-divider span {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}






/* MDC List Item Card Corners etc... */
.mdc-image-list__item.mdc-card,
.mdc-list .mdc-list-item.mdc-card {
  border-radius: 0;
  box-shadow: 0px 1px 1px 0px rgb(0 0 0 / 12%), 0px 0px 0px 0px rgb(0 0 0 / 14%), 0px 0px 0px 0px rgb(0 0 0 / 20%);
  /*z-index: 0;*/ /* breaks mdclist serparators */
}

.mdc-image-list__item.mdc-card {
  border-radius: 4px;
  border-radius: var(--mdc-shape-medium, 4px);
}
.mdc-list-item.mdc-card.mdc-list-item--with-spacer {
  border-radius: 4px;
  border-radius: var(--mdc-shape-medium, 4px);
  margin-bottom: 16px;
}


.mdc-list.mdc-card .mdc-list-item:not(.mdc-list-item--with-spacer):first-child,
.mdc-list .mdc-list-item.mdc-card:not(.mdc-list-item--with-spacer):first-child {
  border-top-left-radius: 4px;
  border-top-left-radius: var(--mdc-shape-medium, 4px);
  border-top-right-radius: 4px;
  border-top-right-radius: var(--mdc-shape-medium, 4px);
  box-shadow: 0px 0px 1px 0px rgb(0 0 0 / 12%), 0px 0px 0px 0px rgb(0 0 0 / 14%), 0px 0px 0px 0px rgb(0 0 0 / 20%);
}
.mdc-list.mdc-card .mdc-list-item:not(.mdc-list-item--with-spacer):last-child,
.mdc-list .mdc-list-item.mdc-card:not(.mdc-list-item--with-spacer):last-child {
  border-bottom-left-radius: 4px;
  border-bottom-left-radius: var(--mdc-shape-medium, 4px);
  border-bottom-right-radius: 4px;
  border-bottom-right-radius: var(--mdc-shape-medium, 4px);
  box-shadow: 0px 1px 1px -1px rgb(0 0 0 / 12%), 0px 0px 0px 0px rgb(0 0 0 / 14%), 0px 0px 0px 0px rgb(0 0 0 / 20%);
}


/* .mdc-list-group.mdc-card */
.mdc-list-group.mdc-card .mdc-list .mdc-list-item:not(.mdc-list-item--with-spacer):last-child {
  border-bottom-left-radius: 4px;
  border-bottom-left-radius: var(--mdc-shape-medium, 4px);
  border-bottom-right-radius: 4px;
  border-bottom-right-radius: var(--mdc-shape-medium, 4px);
}




/* MDC Select */
.mdc-select .mdc-list-item__text {line-height: 50px}
.mdc-select:not(.mdc-select--disabled) .mdc-floating-label,
.mdc-select:not(.mdc-select--disabled) .mdc-select__selected-text {
  color: rgba(0, 0, 0, 0.6);
  color: var(--mdc-theme-text-hint-on-background, rgba(0, 0, 0, 0.6));  
}
.mdc-select:not(.mdc-select--disabled) .mdc-select__dropdown-icon {fill: var(--mdc-theme-text-hint-on-background, rgba(0, 0, 0, 0.54));}
.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label {
  color: #0381fe;
  color: var(--mdc-theme-primary, #0381fe);
}
.mdc-select--filled:not(.mdc-select--disabled) .mdc-select__anchor {background-color: inherit;}
.mdc-select--filled .mdc-select__anchor {border-radius: var(--mdc-shape-small);}





/* MDC Text Field */

/* search box */
.mdc-top-app-bar__section .form {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.mdc-top-app-bar__section .form-textfield {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.mdc-text-field.search-field {
  align-items: center;
  padding-left: 4px;
  width: 100%;
}

.mdc-text-field.mdc-text-field--filled {padding: 0;}
.mdc-text-field.mdc-text-field--filled.mdc-text-field--no-label {padding: 0 16px;}


.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
  color: #fff;
  color: var(--mdc-theme-text-primary-on-background, #fff);  
}




/* mdc-text-field--outlined */
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading, .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch, .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
  border-color: var(--mdc-theme-text-disabled-on-background, rgba(0, 0, 0, 0.38));
}
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading, .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch, .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
  border-color: var(--mdc-theme-text-primary-on-background, rgba(0, 0, 0, 0.87));
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled),
.mdc-text-field--filled:not(.mdc-text-field--disabled) {
  display: flex;
  background-color: #fff;
  background-color: var(--mdc-theme-surface, #fff);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.mdc-text-field.mdc-text-field--no-label {
  border-radius: 4px;
  border-radius: var(--mdc-shape-small);
}


.mdc-text-field--filled::before {height: 44px;}
.mdc-text-field--filled .mdc-floating-label {left: 0;}


.mdc-floating-label--required::after {
  margin-left: 5px;
  color: var(--mdc-theme-error);
}


.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
  color: #fff;
  color: var(--mdc-theme-text-hint-on-background, #fff);
}
.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
  color: #fff;
  color: var(--mdc-theme-text-hint-on-background, #fff);
}

/*
.mdc-text-field__icon--trailing {
  font-size: 22px;
  padding: 10px 4px;
}
*/

/*
.mdc-text-field__icon {align-self: flex-end;}
.mdc-text-field--no-label .mdc-text-field__icon {align-self: center;}
*/

/* MDC Text Field Ripple */
.mdc-text-field--filled .mdc-text-field__ripple::before, 
.mdc-text-field--filled .mdc-text-field__ripple::after {background-color: transparent;}

.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before {opacity: .67;}
.mode-dark .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before {border-bottom-color: rgba(190,190,190,.24);}


/* MDC Form Text Field *
.mdc-text-field .mdc-text-field__input {
  caret-color: #fff;
  caret-color: var(--mdc-theme-text-primary-on-background, #fff);
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading, 
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch, 
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
  border-color: rgba(0, 0, 0, 0.12);
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading, 
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch, 
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
  border-color: rgba(0, 0, 0, 0.24);
}

.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--leading {
  color: #fff;
  color: var(--mdc-theme-text-secondary-on-background, #fff);
}

/*.mdc-text-field--filled:not(.mdc-text-field--disabled) {background-color: inherit;}*
.mdc-text-field--filled:not(.mdc-text-field--disabled) {background-color: var(--mdc-theme-surface);}



/* success *
.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing {
  color: #1eb980;
  color: var(--mdc-theme-success, #1eb980);
}
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing {
  color: #b00020;
  color: var(--mdc-theme-error, #b00020);
  display: none;
}






/*
 *
 * MDC Linear Progress
 *
 */

.mdc-linear-progress--wrapper {display: flex;}
.mdc-list-item__end .mdc-linear-progress--wrapper {
  width: 60px;
  margin-left: auto;
}

/* override for coloring */
.mdc-linear-progress__bar-inner {border-color: inherit;}


/* vertical */
.mdc-linear-progress--wrapper.mdc-linear-progress--vertical {
  position: absolute;
  right: -48px;
  width: 180px;
  transform: rotate(270deg);
  border-radius: 12px;
  overflow: hidden;
}
.mdc-linear-progress--wrapper.mdc-linear-progress--vertical .mdc-linear-progress {
  height: 24px;
  border-radius: 12px;
  width: 100%;
}
.mdc-linear-progress--wrapper.mdc-linear-progress--vertical .mdc-linear-progress .mdc-linear-progress__bar-inner {border-top: 24px solid;}

/* indeterminate */
.mdc-linear-progress--indeterminate {transform: scaleX(-1)} /* .mdc-linear-progress--reversed */
.mdc-linear-progress--indeterminate .mdc-linear-progress__bar .mdc-linear-progress__bar-inner {
  color: transparent;
  outline: 16px solid rgba(160, 160, 160, 0.24);
}

/* small */
.mdc-linear-progress--width-8 {
  height: 8px;
  border-radius: 4px;
}
.mdc-linear-progress--width-8 .mdc-linear-progress__bar-inner {
  border-top-width: 8px;
  border-radius: 4px;
}

/* 10 */
.mdc-linear-progress--width-10 {
  height: 10px;
  border-radius: 5px;
}
.mdc-linear-progress--width-10 .mdc-linear-progress__bar-inner {
  border-top-width: 10px;
  border-radius: 5px;
}

/* medium */
.mdc-linear-progress--width-12 {
  height: 12px;
  border-radius: 6px;
}
.mdc-linear-progress--width-12 .mdc-linear-progress__bar-inner {
  border-top-width: 12px;
  /*border-radius: 6px;*/
}

/* large */
.mdc-linear-progress--width-24 {
  height: 24px;
  border-radius: 12px;
}
.mdc-linear-progress--width-24 .mdc-linear-progress__bar-inner {
  border-top-width: 24px;
  border-radius: 12px 0 0 12px;
}

/* x-large */
.mdc-linear-progress--width-32 {
  height: 32px;
  border-radius: 16px;
}
.mdc-linear-progress--width-32 .mdc-linear-progress__bar-inner {
  border-top-width: 32px;
  border-radius: 16px 0 0 16px;
}


/* mini progress bar */
.mdc-linear-progress--length-20 {
  width: 20px;
  margin-left: auto;
  margin-top: 8px;
}



/* multi bar spacing */
.mdc-linear-progress+.mdc-linear-progress {margin-left: 6px}
.mdc-linear-progress--margin-8 .mdc-linear-progress+.mdc-linear-progress {margin-left: 8px}
.mdc-linear-progress--margin-16 .mdc-linear-progress+.mdc-linear-progress {margin-left: 16px}

/* multi bar activate */
.mdc-linear-progress--wrapper.mdc-linear-progress--status-0 .mdc-linear-progress:nth-child(1) .mdc-linear-progress__bar.mdc-linear-progress__primary-bar {transform: scaleX(1) !important;}
.mdc-linear-progress--wrapper.mdc-linear-progress--status-1 .mdc-linear-progress:nth-child(2) .mdc-linear-progress__bar.mdc-linear-progress__primary-bar {transform: scaleX(1) !important;}
.mdc-linear-progress--wrapper.mdc-linear-progress--status-2 .mdc-linear-progress:nth-child(3) .mdc-linear-progress__bar.mdc-linear-progress__primary-bar {transform: scaleX(1) !important;}
/*
.mdc-linear-progress--wrapper.mdc-linear-progress--status-0 .mdc-linear-progress:nth-child(1) .mdc-linear-progress__bar.mdc-linear-progress__primary-bar {transform: scaleX(1) !important;}
.mdc-linear-progress--wrapper.mdc-linear-progress--status-0 .mdc-linear-progress:nth-child(2) .mdc-linear-progress__bar.mdc-linear-progress__primary-bar {transform: scaleX(0) !important;}
.mdc-linear-progress--wrapper.mdc-linear-progress--status-0 .mdc-linear-progress:nth-child(3) .mdc-linear-progress__bar.mdc-linear-progress__primary-bar {transform: scaleX(0) !important;}

.mdc-linear-progress--wrapper.mdc-linear-progress--status-1 .mdc-linear-progress:nth-child(1) .mdc-linear-progress__bar.mdc-linear-progress__primary-bar {transform: scaleX(0) !important;}
.mdc-linear-progress--wrapper.mdc-linear-progress--status-1 .mdc-linear-progress:nth-child(2) .mdc-linear-progress__bar.mdc-linear-progress__primary-bar {transform: scaleX(1) !important;}
.mdc-linear-progress--wrapper.mdc-linear-progress--status-1 .mdc-linear-progress:nth-child(3) .mdc-linear-progress__bar.mdc-linear-progress__primary-bar {transform: scaleX(0) !important;}

.mdc-linear-progress--wrapper.mdc-linear-progress--status-2 .mdc-linear-progress:nth-child(1) .mdc-linear-progress__bar.mdc-linear-progress__primary-bar {transform: scaleX(0) !important;}
.mdc-linear-progress--wrapper.mdc-linear-progress--status-2 .mdc-linear-progress:nth-child(2) .mdc-linear-progress__bar.mdc-linear-progress__primary-bar {transform: scaleX(0) !important;}
.mdc-linear-progress--wrapper.mdc-linear-progress--status-2 .mdc-linear-progress:nth-child(3) .mdc-linear-progress__bar.mdc-linear-progress__primary-bar {transform: scaleX(1) !important;}
*/


/* buffering */
.mdc-card .mdc-linear-progress__buffer-bar {
  background-color: #f7f7f7;
  background-color: var(--mdc-theme-background, #f7f7f7);
}

/* dark theme */
/*.mode-dark .mdc-linear-progress__buffer-bar {background-color: rgba(162, 162, 162, 0.54)}*/
.mode-dark .mdc-linear-progress__buffer-bar {background-color: #3f3f3f}
.mode-dark .mdc-linear-progress--width-24 .mdc-linear-progress__buffer-bar {background-color: #3c3c3c}
.mode-dark .mdc-card .mdc-linear-progress--width-24 .mdc-linear-progress__buffer-bar {background-color: #616161}

/* */
.mode-dark .mdc-radio .mdc-radio__native-control:enabled:not(:checked)+.mdc-radio__background .mdc-radio__outer-circle {border-color: rgba(255, 255, 255, 0.54)}




/* radio */
.mdc-radio .mdc-radio__native-control:enabled:checked+.mdc-radio__background .mdc-radio__outer-circle,
.mdc-radio .mdc-radio__native-control:enabled+.mdc-radio__background .mdc-radio__inner-circle {
    border-color: #018786;
    border-color: var(--mdc-theme-primary, #018786);
}
.mdc-radio .mdc-radio__background::before {
    background-color: #018786;
    background-color: var(--mdc-theme-primary, #018786);
}
.mdc-list-item--with-leading-radio .mdc-list-item__start {
    margin-left: -8px;
    margin-right: 12px;
}
.mdc-list-item--with-leading-radio.mdc-list-item--with-two-lines .mdc-list-item__start {
  align-self: center;
  margin-top: 0;
}




/* circular progress */
.mdc-circular-progress {
  display: flex;
  margin: auto;
  width: 48px;
  height: 48px;
  overflow: hidden;
}
.mdc-circular-progress.mdc-circular-progress--56px {
  width: 56px;
  height: 56px;
}
.mdc-circular-progress.mdc-circular-progress--rounded {stroke-linecap: round;}

.mdc-circular-progress.mdc-circular-progress--absolute {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.mdc-circular-progress.mdc-circular-progress--fixed {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
}
.mdc-circular-progress.mdc-circular-progress--large {
  width: 256px;
  height: 256px;
  stroke-linecap: round;
}
.mdc-circular-progress.mdc-circular-progress--medium {
  width: 92px;
  height: 92px;
  stroke-linecap: round;
}
.mdc-circular-progress.mdc-circular-progress--small {
  width: 24px;
  height: 24px;
}

.mdc-circular-progress.mdc-circular-progress--ghost-spinner .mdc-circular-progress__determinate-track,
.mdc-circular-progress.mdc-circular-progress--ghost-spinner .mdc-circular-progress__indeterminate-container .mdc-circular-progress__indeterminate-circle-graphic circle,
.mdc-circular-progress.mdc-circular-progress--large .mdc-circular-progress__determinate-track,
.mdc-circular-progress.mdc-circular-progress--large .mdc-circular-progress__indeterminate-container .mdc-circular-progress__indeterminate-circle-graphic circle
  {
    stroke: #e6e6e6;
  }
.mdc-card .mdc-circular-progress.mdc-circular-progress--ghost-spinner .mdc-circular-progress__determinate-track,
.mdc-card .mdc-circular-progress.mdc-circular-progress--ghost-spinner .mdc-circular-progress__indeterminate-container .mdc-circular-progress__indeterminate-circle-graphic circle,
.mdc-card .mdc-circular-progress.mdc-circular-progress--large .mdc-circular-progress__determinate-track,
.mdc-card .mdc-circular-progress.mdc-circular-progress--large .mdc-circular-progress__indeterminate-container .mdc-circular-progress__indeterminate-circle-graphic circle
  {
    stroke: #f7f7f7;
    stroke: var(--mdc-theme-background, #f7f7f7);
  }

.mdc-circular-progress.mdc-circular-progress--w1 .mdc-circular-progress__determinate-track,
.mdc-circular-progress.mdc-circular-progress--w1 .mdc-circular-progress__determinate-circle,
.mdc-circular-progress.mdc-circular-progress--w1 .mdc-circular-progress__indeterminate-container .mdc-circular-progress__indeterminate-circle-graphic circle
  {stroke-width: 1}

.mdc-circular-progress.mdc-circular-progress--w2 .mdc-circular-progress__determinate-track,
.mdc-circular-progress.mdc-circular-progress--w2 .mdc-circular-progress__determinate-circle,
.mdc-circular-progress.mdc-circular-progress--w2 .mdc-circular-progress__indeterminate-container .mdc-circular-progress__indeterminate-circle-graphic circle
  {stroke-width: 2}

.mdc-circular-progress.mdc-circular-progress--w3 .mdc-circular-progress__determinate-track,
.mdc-circular-progress.mdc-circular-progress--w3 .mdc-circular-progress__determinate-circle,
.mdc-circular-progress.mdc-circular-progress--w3 .mdc-circular-progress__indeterminate-container .mdc-circular-progress__indeterminate-circle-graphic circle
  {stroke-width: 3}

.mdc-circular-progress.mdc-circular-progress--w5 .mdc-circular-progress__determinate-track,
.mdc-circular-progress.mdc-circular-progress--w5 .mdc-circular-progress__determinate-circle,
.mdc-circular-progress.mdc-circular-progress--w5 .mdc-circular-progress__indeterminate-container .mdc-circular-progress__indeterminate-circle-graphic circle
  {stroke-width: 5}

.mdc-circular-progress.mdc-circular-progress--w10 .mdc-circular-progress__determinate-track,
.mdc-circular-progress.mdc-circular-progress--w10 .mdc-circular-progress__determinate-circle,
.mdc-circular-progress.mdc-circular-progress--w10 .mdc-circular-progress__indeterminate-container .mdc-circular-progress__indeterminate-circle-graphic circle
  {stroke-width: 10}


.mode-dark .mdc-circular-progress.mdc-circular-progress--ghost-spinner .mdc-circular-progress__determinate-track,
.mode-dark .mdc-circular-progress.mdc-circular-progress--ghost-spinner .mdc-circular-progress__indeterminate-container .mdc-circular-progress__indeterminate-circle-graphic circle,
.mode-dark .mdc-circular-progress.mdc-circular-progress--large .mdc-circular-progress__determinate-track,
.mode-dark .mdc-circular-progress.mdc-circular-progress--large .mdc-circular-progress__indeterminate-container .mdc-circular-progress__indeterminate-circle-graphic circle
  {stroke: #3f3f3f}



.mode-dark .mdc-dialog .mdc-dialog__content {color: rgba(255,255,255,.6)}








/* MDC Snackbar */
.mdc-snackbar__surface {
  border-radius: 4px;
  border-radius: var(--mdc-shape-small, 4px);
}
.mode-dark .mdc-snackbar__surface {background-color: #fff}
.mdc-color-blocks--yellow .mdc-snackbar__label {color: inherit;}
.mode-dark .mdc-snackbar__label {
  color: rgba(0, 0, 0, 0.87);
  font-weight: 500;
}

@media (min-width: 840px) {
  .mdc-snackbar {justify-content: flex-start}
}








/* PrismJS 1.23.0
https://prismjs.com/download.html#themes=prism-solarizedlight&languages=markup+css+clike+javascript */
/*
 Solarized Color Schemes originally by Ethan Schoonover
 http://ethanschoonover.com/solarized

 Ported for PrismJS by Hector Matos
 Website: https://krakendev.io
 Twitter Handle: https://twitter.com/allonsykraken)
*/

/*
SOLARIZED HEX
--------- -------
base03    #002b36
base02    #073642
base01    #586e75
base00    #657b83
base0     #839496
base1     #93a1a1
base2     #eee8d5
base3     #fdf6e3
yellow    #b58900
orange    #cb4b16
red       #dc322f
magenta   #d33682
violet    #6c71c4
blue      #268bd2
cyan      #2aa198
green     #859900
*/

/* overflow code */
pre {
  flex-grow: 1;
  padding: 16px 24px;
  margin: 8px;
  overflow: auto;
}

code[class*="language-"] {
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  color: #657b83;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
}


.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #a5aab5;
}

.token.punctuation {
  color: #586e75; /* base01 */
}

.token.namespace {
  opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: #268bd2; /* blue */
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.url,
.token.inserted {
  color: #2aa198; /* cyan */
}

.token.entity {
  color: #657b83; /* base00 */
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #859900; /* green */
}

.token.function,
.token.class-name {
  color: #b58900; /* yellow */
}

.token.regex,
.token.important,
.token.variable {
  color: #222222; /* dark */
}

.token.important,
.token.bold {
  font-weight: bold;
}
.token.italic {
  font-style: italic;
}

.token.entity {
  cursor: help;
}





/* other option *
.token.tag,.token.keyword {
    color: #26648e
}

.token.tag {
    color: #1d406e
}

.token.value,.token.string,.token.number,.token.attr-value,.token.boolean,.token.regex {
    color: #14af83
}

.token.function,.token.attr-name {
    color: #2e90ae
}

.token.punctuation,.token.operator {
    color: #669
}

.token.comment {
    color: #569
}
*/



/* PrismJS 1.23.0
https://prismjs.com/download.html#themes=prism-okaidia&languages=markup+css+clike+javascript */
/**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */

.mode-dark code[class*="language-"],
.mode-dark pre[class*="language-"] {
  color: #ffffffaa;
}

.mode-dark :not(pre) > code[class*="language-"],
.mode-dark pre[class*="language-"] {
  /*background: #272822;*/
}

/* Inline code */
.mode-dark :not(pre) > code[class*="language-"] {
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
}

.mode-dark .token.comment,
.mode-dark .token.prolog,
.mode-dark .token.doctype,
.mode-dark .token.cdata {
  color: #8292a2;
}

.mode-dark .token.punctuation {
  color: #f8f8f2;
}

.mode-dark .token.namespace {
  opacity: .7;
}

.mode-dark .token.property,
.mode-dark .token.tag,
.mode-dark .token.constant,
.mode-dark .token.symbol,
.mode-dark .token.deleted {
  color: #f92672;
}

.mode-dark .token.boolean,
.mode-dark .token.number {
  color: #ae81ff;
}

.mode-dark .token.selector,
.mode-dark .token.attr-name,
.mode-dark .token.string,
.mode-dark .token.char,
.mode-dark .token.builtin,
.mode-dark .token.inserted {
  color: #a6e22e;
}

.mode-dark .token.operator,
.mode-dark .token.entity,
.mode-dark .token.url,
.mode-dark .language-css .token.string,
.mode-dark .style .token.string,
.mode-dark .token.variable {
  color: #f8f8f2;
}

.mode-dark .token.atrule,
.mode-dark .token.attr-value,
.mode-dark .token.function,
.mode-dark .token.class-name {
  color: #e6db74;
}

.mode-dark .token.keyword {
  color: #66d9ef;
}

.mode-dark .token.regex,
.mode-dark .token.important {
  color: #fd971f;
}




























/* CSS Utils */
:focus {outline:none}
.hidden {display:none}
.break-all {
  white-space: initial;
  word-break: break-all;
}
.break-word {
  white-space: initial;
  overflow: initial;
  text-overflow: initial;
  word-break: break-word;
  line-height: 1;
}
.overflow-hidden {overflow: hidden}
.overflow-ellipsis {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.round {border-radius: 999px !important}
.rounded {border-radius: 8px}

.rotate90 {transform: rotate(90deg);}
.rotate180 {transform: rotate(180deg);}
.rotate270 {transform: rotate(270deg);}


.float-left {float: left}
.float-right {float: right}


.w-24px {width: 24px !important}

.w-auto {width: auto}
.h-auto {height: auto}

.w-20 {width: 20%}
.w-25 {width: 25%}
.w-33 {width: 33%}
.w-50 {width: 50%}
.w-67 {width: 67%}
.w-100 {width: 100%}
.h-100 {height: 100%}

.text-lowercase {text-transform: lowercase}
.text-uppercase {text-transform: uppercase}
.text-capitalize {text-transform: capitalize}
.text-initial {text-transform: initial}
.text-left {text-align: left !important}
.text-right {text-align: right !important}
.text-center {text-align: center !important}
.font-bold {font-weight: bold !important}

.lh-1 {line-height:1}

.fw-100 {font-weight:100}
.fw-300 {font-weight:300}
.fw-400 {font-weight:400}
.fw-500 {font-weight:500}
.fw-600 {font-weight:600}
.fw-700 {font-weight:700}
.fw-900 {font-weight:900}

.fs-16 {font-size: 16px;}
.fs-18 {font-size: 18px;}
.fs-20 {font-size: 20px;}


.m--4, .mx--4, .ml--4 {margin-left: -4px !important}
.m--4, .mx--4, .mr--4 {margin-right: -4px !important}
.m--4, .my--4, .mt--4 {margin-top: -4px !important}
.m--4, .my--4, .mb--4 {margin-bottom: -4px !important}
.m--8, .mx--8, .ml--8 {margin-left: -8px !important}
.m--8, .mx--8, .mr--8 {margin-right: -8px !important}
.m--8, .my--8, .mt--8 {margin-top: -8px !important}
.m--8, .my--8, .mb--8 {margin-bottom: -8px !important}


.m-auto, .mx-auto, .ml-auto {margin-left: auto !important}
.m-auto, .mx-auto, .mr-auto {margin-right: auto !important}
.m-0, .mx-0, .ml-0 {margin-left: 0 !important}
.m-0, .mx-0, .mr-0 {margin-right: 0 !important}
.m-2, .mx-2, .ml-2 {margin-left: 2px !important}
.m-2, .mx-2, .mr-2 {margin-right: 2px !important}
.m-4, .mx-4, .ml-4 {margin-left: 4px}
.m-4, .mx-4, .mr-4 {margin-right: 4px}
.m-8, .mx-8, .ml-8 {margin-left: 8px}
.m-8, .mx-8, .mr-8 {margin-right: 8px}
.m-12, .mx-12, .ml-12 {margin-left: 12px}
.m-12, .mx-12, .mr-12 {margin-right: 12px}
.m-16, .mx-16, .ml-16 {margin-left: 16px}
.m-16, .mx-16, .mr-16 {margin-right: 16px}
.m-20, .mx-20, .ml-20 {margin-left: 20px}
.m-20, .mx-20, .mr-20 {margin-right: 20px}
.m-24, .mx-24, .ml-24 {margin-left: 24px}
.m-24, .mx-24, .mr-24 {margin-right: 24px}
.m-32, .mx-32, .ml-32 {margin-left: 32px}
.m-32, .mx-32, .mr-32 {margin-right: 32px}

.m-auto, .my-auto, .mt-auto {margin-top: auto !important}
.m-auto, .my-auto, .mb-auto {margin-bottom: auto !important}
.m-0, .my-0, .mt-0 {margin-top: 0 !important}
.m-0, .my-0, .mb-0 {margin-bottom: 0 !important}
.m-4, .my-4, .mt-4 {margin-top: 4px}
.m-4, .my-4, .mb-4 {margin-bottom: 4px}
.m-8, .my-8, .mt-8 {margin-top: 8px}
.m-8, .my-8, .mb-8 {margin-bottom: 8px}
.m-12, .my-12, .mt-12 {margin-top: 12px}
.m-12, .my-12, .mb-12 {margin-bottom: 12px}
.m-16, .my-16, .mt-16 {margin-top: 16px}
.m-16, .my-16, .mb-16 {margin-bottom: 16px}
.m-20, .my-20, .mt-20 {margin-top: 20px}
.m-20, .my-20, .mb-20 {margin-bottom: 20px}
.m-24, .my-24, .mt-24 {margin-top: 24px}
.m-24, .my-24, .mb-24 {margin-bottom: 24px}
.m-32, .my-32, .mt-32 {margin-top: 32px}
.m-32, .my-32, .mb-32 {margin-bottom: 32px}
.m-64, .my-64, .mt-64 {margin-top: 64px}
.m-64, .my-64, .mb-64 {margin-bottom: 64px}

.mb-8vh {margin-bottom: 8vh;}

.p-0, .px-0, .pl-0 {padding-left: 0 !important}
.p-0, .px-0, .pr-0 {padding-right: 0 !important}
.p-4, .px-4, .pl-4 {padding-left: 4px}
.p-4, .px-4, .pr-4 {padding-right: 4px}
.p-8, .px-8, .pl-8 {padding-left: 8px}
.p-8, .px-8, .pr-8 {padding-right: 8px}
.p-12, .px-12, .pl-12 {padding-left: 12px}
.p-12, .px-12, .pr-12 {padding-right: 12px}
.p-16, .px-16, .pl-16 {padding-left: 16px}
.p-16, .px-16, .pr-16 {padding-right: 16px}
.p-20, .px-20, .pl-20 {padding-left: 20px}
.p-20, .px-20, .pr-20 {padding-right: 20px}
.p-24, .px-24, .pl-24 {padding-left: 24px}
.p-24, .px-24, .pr-24 {padding-right: 24px}
.p-32, .px-32, .pl-32 {padding-left: 32px}
.p-32, .px-32, .pr-32 {padding-right: 32px}
.p-40, .px-40, .pl-40 {padding-left: 40px}
.p-40, .px-40, .pr-40 {padding-right: 40px}
.p-48, .px-48, .pl-48 {padding-left: 48px}
.p-48, .px-48, .pr-48 {padding-right: 48px}

.p-0, .py-0, .pt-0 {padding-top: 0 !important}
.p-0, .py-0, .pb-0 {padding-bottom: 0 !important}
.p-4, .py-4, .pt-4 {padding-top: 4px}
.p-4, .py-4, .pb-4 {padding-bottom: 4px}
.p-8, .py-8, .pt-8 {padding-top: 8px !important}
.p-8, .py-8, .pb-8 {padding-bottom: 8px !important}
.p-12, .py-12, .pt-12 {padding-top: 12px}
.p-12, .py-12, .pb-12 {padding-bottom: 12px}
.p-16, .py-16, .pt-16 {padding-top: 16px}
.p-16, .py-16, .pb-16 {padding-bottom: 16px}
.p-20, .py-20, .pt-20 {padding-top: 20px}
.p-20, .py-20, .pb-20 {padding-bottom: 20px}
.p-24, .py-24, .pt-24 {padding-top: 24px}
.p-24, .py-24, .pb-24 {padding-bottom: 24px}
.p-32, .py-32, .pt-32 {padding-top: 32px}
.p-32, .py-32, .pb-32 {padding-bottom: 32px}
.p-40, .py-40, .pt-40 {padding-top: 40px}
.p-40, .py-40, .pb-40 {padding-bottom: 40px}
.p-48, .py-48, .pt-48 {padding-top: 48px}
.p-48, .py-48, .pb-48 {padding-bottom: 48px}





.d-inline-block {display: inline-block;}
.d-block {display: block;}
.d-contents {display: contents;}
.d-flex {display: flex}
.flex-direction-row {flex-direction: row}
.flex-direction-column {flex-direction: column}
.flex-grow-1 {flex-grow: 1;}
.align-self-start {align-self: start}
.align-self-center {align-self: center}
.align-self-end {align-self: end}
.align-items-start {align-items: start}
.align-items-center {align-items: center}
.align-items-end {align-items: end}
.justify-content-center {justify-content: center}
.justify-content-flex-start {justify-content: flex-start}
.justify-content-flex-end {justify-content: flex-end}

.justify-content-space-around {justify-content: space-around;}
.justify-content-space-between {justify-content: space-between;}
.justify-content-space-evenly {justify-content: space-evenly;}

@media (max-width: 839px) {
  .flex-direction-row--tablet {flex-direction: row}
  .flex-direction-column--tablet {flex-direction: column}
}
@media (max-width: 592px) {
  .flex-direction-row--phone {flex-direction: row}
  .flex-direction-column--phone {flex-direction: column}
}


.position-relative {position: relative}
.absolute-center {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.absolute-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
}


.b-1 {
  border: 1px solid;
  border-color: rgba(127,127,127,.12);
  box-sizing: border-box;
}
.bl-1 {border-left: 1px solid var(--mdc-theme-text-icon-on-background, #fff);}


.z-0 {z-index: 0;}







/* fixes */
:not(.mdc-list-item--disabled).mdc-list-item,
.mdc-button {will-change: unset;}
.mdc-button .mdc-button__ripple,
.mdc-button--unelevated .mdc-button__ripple {border-radius: inherit}