/*
.########.##.....##.########.##.....##.########
....##....##.....##.##.......###...###.##......
....##....##.....##.##.......####.####.##......
....##....#########.######...##.###.##.######..
....##....##.....##.##.......##.....##.##......
....##....##.....##.##.......##.....##.##......
....##....##.....##.########.##.....##.########
*/

:root {
    /* Global */
    --mr-theme-hint: dark; /* global theme hint: light or dark */

    /* Global font stroke and color modifier */
    --mr-global-text-appearance-normal: 0px rgba(255, 255, 255, 0.3);
    --mr-global-text-appearance-inverted: 0px rgba(0, 0, 0, 0.3);
    --mr-global-enhanced-text-appearance-normal: 1px rgba(255, 255, 255, 0.3);
    --mr-global-enhanced-text-appearance-inverted: 1px rgba(0, 0, 0, 0.8);

    /* Base colors */ 
    --mdc-theme-background: #18191B; /* The theme background color */
    --mdc-theme-background-semi-transparent: rgba(51, 51, 51, 0.8); /* The theme semi-transparent background color */
    --mdc-theme-background-secondary: rgba(51, 51, 51, 1.0); /* The theme secondary background color */
    --mdc-theme-inverse-background: #CCCCCC; /* The theme background color for inverted icons */
    --mdc-theme-color: #CCCCCC; /* The theme normal text color */
    --mdc-theme-error: #ef5a5a; /* The theme error color */
    --mdc-theme-success: #8cad47; /* The theme success color */
    --mdc-theme-primary: #777777; /* The theme primary color */
    --mdc-theme-secondary: #333333; /* The theme secondary color */
    --mdc-theme-surface: #262626; /* The theme surface color */
    --mdc-theme-link: dodgerblue; /* The theme link color */
    --mdc-theme-warning: #e8c10d; /* The theme warning color */

    --mdc-theme-on-error: #fff; /* Primary text on top of a theme error color background */
    --mdc-theme-on-success: #262626; /* rimary text on top of a theme success color background */
    --mdc-theme-on-primary: #fff; /* Primary text on top of a theme primary color background */
    --mdc-theme-on-secondary: #fff; /* Primary text on top of a theme secondary color background */
    --mdc-theme-on-surface: #fff; /* Primary text on top of a theme surface color background */

    --mdc-theme-text-disabled-on-background: rgba(255, 255, 255, 0.38); /* Disabled text on top of the theme background color */
    --mdc-theme-text-hint-on-background: rgba(255, 255, 255, 0.24); /* Hint text on top of the theme background color */
    --mdc-theme-text-icon-on-background: rgba(255, 255, 255, 0.9); /* Icons on top of the theme background color */
    --mdc-theme-text-primary-on-background: rgba(255, 255, 255, 0.87); /* Primary text on top of the theme background color */
    --mdc-theme-text-secondary-on-background: rgba(255, 255, 255, 0.54); /* Secondary text on top of the theme background color */

    --mdc-theme-text-disabled-on-light: rgba(0, 0, 0, 0.38); /* Disabled text on top of a light-colored background. */
    --mdc-theme-text-hint-on-light: rgba(0, 0, 0, 0.38); /* Hint text on top of a light-colored background. */
    --mdc-theme-text-icon-on-light: #212529; /* Icon on top of a light-colored background. */
    --mdc-theme-text-primary-on-light: rgba(0, 0, 0, 0.87); /* Primary text on top of a light-colored background. */
    --mdc-theme-text-secondary-on-light: rgba(0, 0, 0, 0.54); /* Secondary text on top of a light-colored background. */

    --mdc-theme-text-disabled-on-dark: rgba(255, 255, 255, 0.5); /* Disabled text on top of a dark-colored background. */
    --mdc-theme-text-hint-on-dark: rgba(255, 255, 255, 0.5); /* Hint text on top of a dark-colored background. */
    --mdc-theme-text-icon-on-dark: rgba(255, 255, 255, 0.5); /* Icon on top of a dark-colored background. */
    --mdc-theme-text-primary-on-dark: white; /* Primary text on top of a dark-colored background. */
    --mdc-theme-text-secondary-on-dark: rgba(255, 255, 255, 0.7); /* Secondary text on top of a dark-colored background. */

    /* Typography: GENERAL */
    --mdc-typography-font-family: 'Lato';

    /* Typography: HEADLINE 1 */
    /*--mdc-typography-headline1-font-family:*/
    --mdc-typography-headline1-font-size: 32px;
    --mdc-typography-headline1-font-weight: bold;
    /*--mdc-typography-headline1-letter-spacing:*/
    /*--mdc-typography-headline1-line-height:*/
    /*--mdc-typography-headline1-text-decoration:*/
    /*--mdc-typography-headline1-text-transform:*/

    /* Typography: HEADLINE 2 */
    /*--mdc-typography-headline2-font-family:*/
    --mdc-typography-headline2-font-size: 24px;
    --mdc-typography-headline2-font-weight: bold;
    /*--mdc-typography-headline2-letter-spacing:*/
    /*--mdc-typography-headline2-line-height:*/
    /*--mdc-typography-headline2-text-decoration:*/
    /*--mdc-typography-headline2-text-transform:*/

    /* Typography: HEADLINE 3 */
    /*--mdc-typography-headline3-font-family:*/
    --mdc-typography-headline3-font-size: 22px;
    /*--mdc-typography-headline3-font-weight:*/
    /*--mdc-typography-headline3-letter-spacing:*/
    /*--mdc-typography-headline3-line-height:*/
    /*--mdc-typography-headline3-text-decoration:*/
    /*--mdc-typography-headline3-text-transform:*/

    /* Typography: HEADLINE 4 */
    /*--mdc-typography-headline4-font-family:*/
    --mdc-typography-headline4-font-size: 20px;
    /*--mdc-typography-headline4-font-weight:*/
    /*--mdc-typography-headline4-letter-spacing:*/
    /*--mdc-typography-headline4-line-height:*/
    /*--mdc-typography-headline4-text-decoration:*/
    /*--mdc-typography-headline4-text-transform:*/

    /* Typography: HEADLINE 5 */
    /*--mdc-typography-headline5-font-family:*/
    --mdc-typography-headline5-font-size: 18px;
    /*--mdc-typography-headline5-font-weight:*/
    /*--mdc-typography-headline5-letter-spacing:*/
    /*--mdc-typography-headline5-line-height:*/
    /*--mdc-typography-headline5-text-decoration:*/
    /*--mdc-typography-headline5-text-transform:*/

    /* Typography: HEADLINE 6 */
    /*--mdc-typography-headline6-font-family:*/
    --mdc-typography-headline6-font-size: 15px;
    /*--mdc-typography-headline6-font-weight:*/
    /*--mdc-typography-headline6-letter-spacing:*/
    /*--mdc-typography-headline6-line-height:*/
    /*--mdc-typography-headline6-text-decoration:*/
    /*--mdc-typography-headline6-text-transform:*/
    
    /* Typography: SUBTITLE 1 */
    /* Affects Material UI Text Fields & Selects */
    /*--mdc-typography-subtitle1-font-family:*/
    --mdc-typography-subtitle1-font-size: 16px;
    /*--mdc-typography-subtitle1-font-weight:*/
    /*--mdc-typography-subtitle1-letter-spacing:*/
    /*--mdc-typography-subtitle1-line-height:*/
    /*--mdc-typography-subtitle1-text-decoration:*/
    /*--mdc-typography-subtitle1-text-transform:*/

    /* Typography: SUBTITLE 1 */
    /*--mdc-typography-subtitle2-font-family:*/
    --mdc-typography-subtitle2-font-size: 14px;
    /*--mdc-typography-subtitle2-font-weight:*/
    /*--mdc-typography-subtitle2-letter-spacing:*/
    /*--mdc-typography-subtitle2-line-height:*/
    /*--mdc-typography-subtitle2-text-decoration:*/
    /*--mdc-typography-subtitle2-text-transform:*/
    
    /* Typography: BODY 1 */
    /* Affects Material UI Data Table Header Row */
    /*--mdc-typography-body1-font-family:*/
    --mdc-typography-body1-font-size: 14px;
    /*--mdc-typography-body1-font-weight:*/
    /*--mdc-typography-body1-letter-spacing:*/
    /*--mdc-typography-body1-line-height:*/
    /*--mdc-typography-body1-text-decoration:*/
    /*--mdc-typography-body1-text-transform:*/

    /* Typography: BODY 2 */
    /* Affects Material UI Form Labels & Data Table Body + Pagination */
    /*--mdc-typography-body2-font-family:*/
    --mdc-typography-body2-font-size: 13px;
    /*--mdc-typography-body2-font-weight:*/
    /*--mdc-typography-body2-letter-spacing:*/
    /*--mdc-typography-body2-line-height:*/
    /*--mdc-typography-body2-text-decoration:*/
    /*--mdc-typography-body2-text-transform:*/
    
    /* Typography: CAPTION */
    /*--mdc-typography-caption-font-family:*/
    --mdc-typography-caption-font-size: 13px;
    /*--mdc-typography-caption-font-weight:*/
    /*--mdc-typography-caption-letter-spacing:*/
    /*--mdc-typography-caption-line-height:*/
    /*--mdc-typography-caption-text-decoration:*/
    /*--mdc-typography-caption-text-transform:*/

    --mdc-typography-caption-font-size: 13px;

    /* Typography: BUTTON */
    /* Affects Material UI Button Text */
    /*--mdc-typography-button-font-family:*/
    --mdc-typography-button-font-size: 15px;
    /*--mdc-typography-button-font-weight:*/
    --mdc-typography-button-letter-spacing: normal;
    /*--mdc-typography-button-line-height:*/
    /*--mdc-typography-button-text-decoration:*/
    --mdc-typography-button-text-transform: capitalize;

    /* Typography: OVERLINE */
    /*--mdc-typography-overline-font-family:*/
    --mdc-typography-overline-font-size: 13px;
    /*--mdc-typography-overline-font-weight:*/
    /*--mdc-typography-overline-letter-spacing:*/
    /*--mdc-typography-overline-line-height:*/
    /*--mdc-typography-overline-text-decoration:*/
    /*--mdc-typography-overline-text-transform:*/

    /* CHECKBOX */
    --mdc-checkbox-checked-color:#888;
    /*--mdc-checkbox-disabled-color:*/
    --mdc-checkbox-ink-color:#fff;
    /*--mdc-checkbox-ripple-size:*/
    /*--mdc-checkbox-touch-target-size:*/
    --mdc-checkbox-unchecked-color:#777;

    /* DIALOG */
    --mdc-dialog-z-index: 105;

    /* ELEVATION */
    /*--mdc-elevation-overlay-color:*/
    /*--mdc-elevation-overlay-opacity:*/

    /* LAYOUT GRID */
    /*--mdc-layout-grid-column-width-desktop:*/
    /*--mdc-layout-grid-column-width-phone:*/
    /*--mdc-layout-grid-column-width-tablet:*/
    /*--mdc-layout-grid-gutter-desktop:*/
    /*--mdc-layout-grid-gutter-phone:*/
    /*--mdc-layout-grid-gutter-tablet:*/
    /*--mdc-layout-grid-margin-desktop:*/
    /*--mdc-layout-grid-margin-phone:*/
    /*--mdc-layout-grid-margin-tablet:*/

    /* LINEAR PROGRESS */
    /*--mdc-linear-progress-primary-full-neg:*/
    /*--mdc-linear-progress-primary-full:*/
    /*--mdc-linear-progress-primary-half-neg:*/
    /*--mdc-linear-progress-primary-half:*/
    /*--mdc-linear-progress-secondary-full-neg:*/
    /*--mdc-linear-progress-secondary-full:*/
    /*--mdc-linear-progress-secondary-half-neg:*/
    /*--mdc-linear-progress-secondary-half:*/
    /*--mdc-linear-progress-secondary-quarter-neg:*/
    /*--mdc-linear-progress-secondary-quarter:*/

    /* MENU */
    /*--mdc-menu-max-height:*/
    /*--mdc-menu-max-width:*/
    /*--mdc-menu-min-width:*/

    /* RIPPLE */
    /*--mdc-ripple-activated-opacity:*/
    /*--mdc-ripple-color:*/
    /*--mdc-ripple-fg-opacity:*/
    /*--mdc-ripple-fg-scale:*/
    /*--mdc-ripple-fg-size:*/
    /*--mdc-ripple-fg-translate-end:*/
    /*--mdc-ripple-fg-translate-start:*/
    /*--mdc-ripple-focus-opacity:*/
    /*--mdc-ripple-hover-opacity:*/
    /*--mdc-ripple-left:*/
    /*--mdc-ripple-press-opacity:*/
    /*--mdc-ripple-selected-opacity:*/
    /*--mdc-ripple-top:*/
    /*--mdc-ripple-z-index:*/

    /* SEGMENTED BUTTON */
    --mdc-segmented-button-outline-color: #fff;
    --mdc-segmented-button-selected-container-fill-color: #ddd;
    --mdc-segmented-button-selected-ink-color: #000;
    --mdc-segmented-button-unselected-container-fill-color: #444;
    --mdc-segmented-button-unselected-ink-color: #ddd;

    /* SHAPE */
    /*--mdc-shape-large:*/
    /*--mdc-shape-medium:*/
    /*--mdc-shape-small:*/

    /* TOOLTIP */
    /*--mdc-tooltip-word-break:*/

    /* LEGACY TWEAKS */
    --bootstrap-list-item-font-size: 600;
    --mr-btn-font-size: 500;
    --mr-grey-background: #888888;
}

.mr-invertible-icon {
    filter: invert(100%);
}

.mr-invertible-button-icon {
    filter: invert(70%) brightness( 1.2 );
}