.button-home-small:before,
.button-home-medium:before,
.button-home-large:before {
    font-family:'Font Awesome 5 Free';
    content:'\f015';
}

.color-sample-row {
    border-radius: 0.5rem;
    margin: 0.25rem;
    padding: 0.25rem;
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
}

.color-sample-tile {
    padding: 8px;
    width: 200px;
    height: 80px;
}
.color-sample-double-tile{
    padding: 8px;
    width: 405px;
    height: 80px;
}

.color-sample-variant-row{
    display: flex;
    flex-direction: row;
    padding: 8px 20px;
}
.color-sample-variant-tile {
    width: 60px;
    height: 40px;
    padding: 4px;
}
.color-sample-tile,
.color-sample-variant-tile {
    display: flex;
    flex-direction: row;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

.palette-tile {
    visibility: hidden;
    width: 20px;
    height: 24px;
    border-radius: 50%;
}
.palette-tile:before{
     opacity: 0.4;
     content: '\f0c5' !important;
     font-family: 'Font Awesome 5 Free';
}
.palette-tile:hover:before{
     opacity: 1;
}
.color-sample-tile:hover .palette-tile,
.color-sample-variant-tile:hover .palette-tile{
    visibility: visible;
}


.primary {
    background-color: var(--md-sys-color-primary);
}

.primary-text {
    color: var(--md-sys-color-primary);
}

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

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

.primary-container {
    background-color: var(--md-sys-color-primary-container);
}

.primary-container-text {
    color: var(--md-sys-color-primary-container);
}

.on-primary-container {
    background-color: var(--md-sys-color-on-primary-container);
}

.on-primary-container-text {
    color: var(--md-sys-color-on-primary-container);
}

.secondary {
    background-color: var(--md-sys-color-secondary);
}

.secondary-text {
    color: var(--md-sys-color-secondary);
}

.on-secondary {
    background-color: var(--md-sys-color-on-secondary);
}

.on-secondary-text {
    color: var(--md-sys-color-on-secondary);
}

.secondary-container {
    background-color: var(--md-sys-color-secondary-container);
}

.secondary-container-text {
    color: var(--md-sys-color-secondary-container);
}

.on-secondary-container {
    background-color: var(--md-sys-color-on-secondary-container);
}

.on-secondary-container-text {
    color: var(--md-sys-color-on-secondary-container);
}

.tertiary {
    background-color: var(--md-sys-color-tertiary);
}

.tertiary-text {
    color: var(--md-sys-color-tertiary);
}

.on-tertiary {
    background-color: var(--md-sys-color-on-tertiary);
}

.on-tertiary-text {
    color: var(--md-sys-color-on-tertiary);
}

.tertiary-container {
    background-color: var(--md-sys-color-tertiary-container);
}

.tertiary-container-text {
    color: var(--md-sys-color-tertiary-container);
}

.on-tertiary-container {
    background-color: var(--md-sys-color-on-tertiary-container);
}

.on-tertiary-container-text {
    color: var(--md-sys-color-on-tertiary-container);
}

.error {
    background-color: var(--md-sys-color-error);
}

.error-text {
    color: var(--md-sys-color-error);
}

.error-container {
    background-color: var(--md-sys-color-error-container);
}

.error-container-text {
    color: var(--md-sys-color-error-container);
}

.on-error {
    background-color: var(--md-sys-color-on-error);
}

.on-error-text {
    color: var(--md-sys-color-on-error);
}

.on-error-container {
    background-color: var(--md-sys-color-on-error-container);
}

.on-error-container-text {
    color: var(--md-sys-color-on-error-container);
}

.background {
    background-color: var(--md-sys-color-background);
}

.background-text {
    color: var(--md-sys-color-background);
}

.on-background {
    background-color: var(--md-sys-color-on-background);
}

.on-background-text {
    color: var(--md-sys-color-on-background);
}

.surface {
    background-color: var(--md-sys-color-surface);
}

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

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

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

.surface-variant {
    background-color: var(--md-sys-color-surface-variant);
}

.surface-variant-text {
    color: var(--md-sys-color-surface-variant);
}

.on-surface-variant {
    background-color: var(--md-sys-color-on-surface-variant);
}

.on-surface-variant-text {
    color: var(--md-sys-color-on-surface-variant);
}

.outline {
    background-color: var(--md-sys-color-outline);
}

.outline-text {
    color: var(--md-sys-color-outline);
}

.inverse-on-surface {
    background-color: var(--md-sys-color-inverse-on-surface);
}

.inverse-on-surface-text {
    color: var(--md-sys-color-inverse-on-surface);
}

.inverse-surface {
    background-color: var(--md-sys-color-inverse-surface);
}

.inverse-surface-text {
    color: var(--md-sys-color-inverse-surface);
}

.inverse-primary {
    background-color: var(--md-sys-color-inverse-primary);
}

.inverse-primary-text {
    color: var(--md-sys-color-inverse-primary);
}

.shadow {
    background-color: var(--md-sys-color-shadow);
}

.shadow-text {
    color: var(--md-sys-color-shadow);
}

.surface-tint {
    background-color: var(--md-sys-color-surface-tint);
}

.surface-tint-text {
    color: var(--md-sys-color-surface-tint);
}

.outline-variant {
    background-color: var(--md-sys-color-outline-variant);
}

.outline-variant-text {
    color: var(--md-sys-color-outline-variant);
}

.scrim {
    background-color: var(--md-sys-color-scrim);
}

.scrim-text {
    color: var(--md-sys-color-scrim);
}

/* primary */
.md-ctx-palette-primary0{
    background-color: var(--md-ctx-palette-primary0);
}
.md-ctx-palette-primary5{
    background-color: var(--md-ctx-palette-primary5);
}
.md-ctx-palette-primary10{
    background-color: var(--md-ctx-palette-primary10);
}
.md-ctx-palette-primary20{
    background-color: var(--md-ctx-palette-primary20);
}
.md-ctx-palette-primary25{
    background-color: var(--md-ctx-palette-primary25);
}
.md-ctx-palette-primary30{
    background-color: var(--md-ctx-palette-primary30);
}
.md-ctx-palette-primary35{
    background-color: var(--md-ctx-palette-primary35);
}
.md-ctx-palette-primary40{
    background-color: var(--md-ctx-palette-primary40);
}
.md-ctx-palette-primary50{
    background-color: var(--md-ctx-palette-primary50);
}
.md-ctx-palette-primary60{
    background-color: var(--md-ctx-palette-primary60);
}
.md-ctx-palette-primary70{
    background-color: var(--md-ctx-palette-primary70);
}
.md-ctx-palette-primary80{
    background-color: var(--md-ctx-palette-primary80);
}
.md-ctx-palette-primary90{
    background-color: var(--md-ctx-palette-primary90);
}
.md-ctx-palette-primary95{
    background-color: var(--md-ctx-palette-primary95);
}
.md-ctx-palette-primary98{
    background-color: var(--md-ctx-palette-primary98);
}
.md-ctx-palette-primary99{
    background-color: var(--md-ctx-palette-primary99);
}
.md-ctx-palette-primary100{
    background-color: var(--md-ctx-palette-primary100);
}


/* secondary */
.md-ctx-palette-secondary0{
    background-color: var(--md-ctx-palette-secondary0);
}
.md-ctx-palette-secondary5{
    background-color: var(--md-ctx-palette-secondary5);
}
.md-ctx-palette-secondary10{
    background-color: var(--md-ctx-palette-secondary10);
}
.md-ctx-palette-secondary20{
    background-color: var(--md-ctx-palette-secondary20);
}
.md-ctx-palette-secondary25{
    background-color: var(--md-ctx-palette-secondary25);
}
.md-ctx-palette-secondary30{
    background-color: var(--md-ctx-palette-secondary30);
}
.md-ctx-palette-secondary35{
    background-color: var(--md-ctx-palette-secondary35);
}
.md-ctx-palette-secondary40{
    background-color: var(--md-ctx-palette-secondary40);
}
.md-ctx-palette-secondary50{
    background-color: var(--md-ctx-palette-secondary50);
}
.md-ctx-palette-secondary60{
    background-color: var(--md-ctx-palette-secondary60);
}
.md-ctx-palette-secondary70{
    background-color: var(--md-ctx-palette-secondary70);
}
.md-ctx-palette-secondary80{
    background-color: var(--md-ctx-palette-secondary80);
}
.md-ctx-palette-secondary90{
    background-color: var(--md-ctx-palette-secondary90);
}
.md-ctx-palette-secondary95{
    background-color: var(--md-ctx-palette-secondary95);
}
.md-ctx-palette-secondary98{
    background-color: var(--md-ctx-palette-secondary98);
}
.md-ctx-palette-secondary99{
    background-color: var(--md-ctx-palette-secondary99);
}
.md-ctx-palette-secondary100{
    background-color: var(--md-ctx-palette-secondary100);
}


/* tertiary */
.md-ctx-palette-tertiary0{
    background-color: var(--md-ctx-palette-tertiary0);
}
.md-ctx-palette-tertiary5{
    background-color: var(--md-ctx-palette-tertiary5);
}
.md-ctx-palette-tertiary10{
    background-color: var(--md-ctx-palette-tertiary10);
}
.md-ctx-palette-tertiary20{
    background-color: var(--md-ctx-palette-tertiary20);
}
.md-ctx-palette-tertiary25{
    background-color: var(--md-ctx-palette-tertiary25);
}
.md-ctx-palette-tertiary30{
    background-color: var(--md-ctx-palette-tertiary30);
}
.md-ctx-palette-tertiary35{
    background-color: var(--md-ctx-palette-tertiary35);
}
.md-ctx-palette-tertiary40{
    background-color: var(--md-ctx-palette-tertiary40);
}
.md-ctx-palette-tertiary50{
    background-color: var(--md-ctx-palette-tertiary50);
}
.md-ctx-palette-tertiary60{
    background-color: var(--md-ctx-palette-tertiary60);
}
.md-ctx-palette-tertiary70{
    background-color: var(--md-ctx-palette-tertiary70);
}
.md-ctx-palette-tertiary80{
    background-color: var(--md-ctx-palette-tertiary80);
}
.md-ctx-palette-tertiary90{
    background-color: var(--md-ctx-palette-tertiary90);
}
.md-ctx-palette-tertiary95{
    background-color: var(--md-ctx-palette-tertiary95);
}
.md-ctx-palette-tertiary98{
    background-color: var(--md-ctx-palette-tertiary98);
}
.md-ctx-palette-tertiary99{
    background-color: var(--md-ctx-palette-tertiary99);
}
.md-ctx-palette-tertiary100{
    background-color: var(--md-ctx-palette-tertiary100);
}


/* error */
.md-ctx-palette-error0{
    background-color: var(--md-ctx-palette-error0);
}
.md-ctx-palette-error5{
    background-color: var(--md-ctx-palette-error5);
}
.md-ctx-palette-error10{
    background-color: var(--md-ctx-palette-error10);
}
.md-ctx-palette-error20{
    background-color: var(--md-ctx-palette-error20);
}
.md-ctx-palette-error25{
    background-color: var(--md-ctx-palette-error25);
}
.md-ctx-palette-error30{
    background-color: var(--md-ctx-palette-error30);
}
.md-ctx-palette-error35{
    background-color: var(--md-ctx-palette-error35);
}
.md-ctx-palette-error40{
    background-color: var(--md-ctx-palette-error40);
}
.md-ctx-palette-error50{
    background-color: var(--md-ctx-palette-error50);
}
.md-ctx-palette-error60{
    background-color: var(--md-ctx-palette-error60);
}
.md-ctx-palette-error70{
    background-color: var(--md-ctx-palette-error70);
}
.md-ctx-palette-error80{
    background-color: var(--md-ctx-palette-error80);
}
.md-ctx-palette-error90{
    background-color: var(--md-ctx-palette-error90);
}
.md-ctx-palette-error95{
    background-color: var(--md-ctx-palette-error95);
}
.md-ctx-palette-error98{
    background-color: var(--md-ctx-palette-error98);
}
.md-ctx-palette-error99{
    background-color: var(--md-ctx-palette-error99);
}
.md-ctx-palette-error100{
    background-color: var(--md-ctx-palette-error100);
}


/* neutral */
.md-ctx-palette-neutral0{
    background-color: var(--md-ctx-palette-neutral0);
}
.md-ctx-palette-neutral5{
    background-color: var(--md-ctx-palette-neutral5);
}
.md-ctx-palette-neutral10{
    background-color: var(--md-ctx-palette-neutral10);
}
.md-ctx-palette-neutral20{
    background-color: var(--md-ctx-palette-neutral20);
}
.md-ctx-palette-neutral25{
    background-color: var(--md-ctx-palette-neutral25);
}
.md-ctx-palette-neutral30{
    background-color: var(--md-ctx-palette-neutral30);
}
.md-ctx-palette-neutral35{
    background-color: var(--md-ctx-palette-neutral35);
}
.md-ctx-palette-neutral40{
    background-color: var(--md-ctx-palette-neutral40);
}
.md-ctx-palette-neutral50{
    background-color: var(--md-ctx-palette-neutral50);
}
.md-ctx-palette-neutral60{
    background-color: var(--md-ctx-palette-neutral60);
}
.md-ctx-palette-neutral70{
    background-color: var(--md-ctx-palette-neutral70);
}
.md-ctx-palette-neutral80{
    background-color: var(--md-ctx-palette-neutral80);
}
.md-ctx-palette-neutral90{
    background-color: var(--md-ctx-palette-neutral90);
}
.md-ctx-palette-neutral95{
    background-color: var(--md-ctx-palette-neutral95);
}
.md-ctx-palette-neutral98{
    background-color: var(--md-ctx-palette-neutral98);
}
.md-ctx-palette-neutral99{
    background-color: var(--md-ctx-palette-neutral99);
}
.md-ctx-palette-neutral100{
    background-color: var(--md-ctx-palette-neutral100);
}


/* neutral-variant */
.md-ctx-palette-neutral-variant0{
    background-color: var(--md-ctx-palette-neutral-variant0);
}
.md-ctx-palette-neutral-variant5{
    background-color: var(--md-ctx-palette-neutral-variant5);
}
.md-ctx-palette-neutral-variant10{
    background-color: var(--md-ctx-palette-neutral-variant10);
}
.md-ctx-palette-neutral-variant20{
    background-color: var(--md-ctx-palette-neutral-variant20);
}
.md-ctx-palette-neutral-variant25{
    background-color: var(--md-ctx-palette-neutral-variant25);
}
.md-ctx-palette-neutral-variant30{
    background-color: var(--md-ctx-palette-neutral-variant30);
}
.md-ctx-palette-neutral-variant35{
    background-color: var(--md-ctx-palette-neutral-variant35);
}
.md-ctx-palette-neutral-variant40{
    background-color: var(--md-ctx-palette-neutral-variant40);
}
.md-ctx-palette-neutral-variant50{
    background-color: var(--md-ctx-palette-neutral-variant50);
}
.md-ctx-palette-neutral-variant60{
    background-color: var(--md-ctx-palette-neutral-variant60);
}
.md-ctx-palette-neutral-variant70{
    background-color: var(--md-ctx-palette-neutral-variant70);
}
.md-ctx-palette-neutral-variant80{
    background-color: var(--md-ctx-palette-neutral-variant80);
}
.md-ctx-palette-neutral-variant90{
    background-color: var(--md-ctx-palette-neutral-variant90);
}
.md-ctx-palette-neutral-variant95{
    background-color: var(--md-ctx-palette-neutral-variant95);
}
.md-ctx-palette-neutral-variant98{
    background-color: var(--md-ctx-palette-neutral-variant98);
}
.md-ctx-palette-neutral-variant99{
    background-color: var(--md-ctx-palette-neutral-variant99);
}
.md-ctx-palette-neutral-variant100{
    background-color: var(--md-ctx-palette-neutral-variant100);
}


/* success */
.md-ctx-palette-success0{
    background-color: var(--md-ctx-palette-success0);
}
.md-ctx-palette-success5{
    background-color: var(--md-ctx-palette-success5);
}
.md-ctx-palette-success10{
    background-color: var(--md-ctx-palette-success10);
}
.md-ctx-palette-success20{
    background-color: var(--md-ctx-palette-success20);
}
.md-ctx-palette-success25{
    background-color: var(--md-ctx-palette-success25);
}
.md-ctx-palette-success30{
    background-color: var(--md-ctx-palette-success30);
}
.md-ctx-palette-success35{
    background-color: var(--md-ctx-palette-success35);
}
.md-ctx-palette-success40{
    background-color: var(--md-ctx-palette-success40);
}
.md-ctx-palette-success50{
    background-color: var(--md-ctx-palette-success50);
}
.md-ctx-palette-success60{
    background-color: var(--md-ctx-palette-success60);
}
.md-ctx-palette-success70{
    background-color: var(--md-ctx-palette-success70);
}
.md-ctx-palette-success80{
    background-color: var(--md-ctx-palette-success80);
}
.md-ctx-palette-success90{
    background-color: var(--md-ctx-palette-success90);
}
.md-ctx-palette-success95{
    background-color: var(--md-ctx-palette-success95);
}
.md-ctx-palette-success98{
    background-color: var(--md-ctx-palette-success98);
}
.md-ctx-palette-success99{
    background-color: var(--md-ctx-palette-success99);
}
.md-ctx-palette-success100{
    background-color: var(--md-ctx-palette-success100);
}


/* warning */
.md-ctx-palette-warning0{
    background-color: var(--md-ctx-palette-warning0);
}
.md-ctx-palette-warning5{
    background-color: var(--md-ctx-palette-warning5);
}
.md-ctx-palette-warning10{
    background-color: var(--md-ctx-palette-warning10);
}
.md-ctx-palette-warning20{
    background-color: var(--md-ctx-palette-warning20);
}
.md-ctx-palette-warning25{
    background-color: var(--md-ctx-palette-warning25);
}
.md-ctx-palette-warning30{
    background-color: var(--md-ctx-palette-warning30);
}
.md-ctx-palette-warning35{
    background-color: var(--md-ctx-palette-warning35);
}
.md-ctx-palette-warning40{
    background-color: var(--md-ctx-palette-warning40);
}
.md-ctx-palette-warning50{
    background-color: var(--md-ctx-palette-warning50);
}
.md-ctx-palette-warning60{
    background-color: var(--md-ctx-palette-warning60);
}
.md-ctx-palette-warning70{
    background-color: var(--md-ctx-palette-warning70);
}
.md-ctx-palette-warning80{
    background-color: var(--md-ctx-palette-warning80);
}
.md-ctx-palette-warning90{
    background-color: var(--md-ctx-palette-warning90);
}
.md-ctx-palette-warning95{
    background-color: var(--md-ctx-palette-warning95);
}
.md-ctx-palette-warning98{
    background-color: var(--md-ctx-palette-warning98);
}
.md-ctx-palette-warning99{
    background-color: var(--md-ctx-palette-warning99);
}
.md-ctx-palette-warning100{
    background-color: var(--md-ctx-palette-warning100);
}


/* purple */
.md-ctx-palette-purple0{
    background-color: var(--md-ctx-palette-purple0);
}
.md-ctx-palette-purple5{
    background-color: var(--md-ctx-palette-purple5);
}
.md-ctx-palette-purple10{
    background-color: var(--md-ctx-palette-purple10);
}
.md-ctx-palette-purple20{
    background-color: var(--md-ctx-palette-purple20);
}
.md-ctx-palette-purple25{
    background-color: var(--md-ctx-palette-purple25);
}
.md-ctx-palette-purple30{
    background-color: var(--md-ctx-palette-purple30);
}
.md-ctx-palette-purple35{
    background-color: var(--md-ctx-palette-purple35);
}
.md-ctx-palette-purple40{
    background-color: var(--md-ctx-palette-purple40);
}
.md-ctx-palette-purple50{
    background-color: var(--md-ctx-palette-purple50);
}
.md-ctx-palette-purple60{
    background-color: var(--md-ctx-palette-purple60);
}
.md-ctx-palette-purple70{
    background-color: var(--md-ctx-palette-purple70);
}
.md-ctx-palette-purple80{
    background-color: var(--md-ctx-palette-purple80);
}
.md-ctx-palette-purple90{
    background-color: var(--md-ctx-palette-purple90);
}
.md-ctx-palette-purple95{
    background-color: var(--md-ctx-palette-purple95);
}
.md-ctx-palette-purple98{
    background-color: var(--md-ctx-palette-purple98);
}
.md-ctx-palette-purple99{
    background-color: var(--md-ctx-palette-purple99);
}
.md-ctx-palette-purple100{
    background-color: var(--md-ctx-palette-purple100);
}


/* blue */
.md-ctx-palette-blue0{
    background-color: var(--md-ctx-palette-blue0);
}
.md-ctx-palette-blue5{
    background-color: var(--md-ctx-palette-blue5);
}
.md-ctx-palette-blue10{
    background-color: var(--md-ctx-palette-blue10);
}
.md-ctx-palette-blue20{
    background-color: var(--md-ctx-palette-blue20);
}
.md-ctx-palette-blue25{
    background-color: var(--md-ctx-palette-blue25);
}
.md-ctx-palette-blue30{
    background-color: var(--md-ctx-palette-blue30);
}
.md-ctx-palette-blue35{
    background-color: var(--md-ctx-palette-blue35);
}
.md-ctx-palette-blue40{
    background-color: var(--md-ctx-palette-blue40);
}
.md-ctx-palette-blue50{
    background-color: var(--md-ctx-palette-blue50);
}
.md-ctx-palette-blue60{
    background-color: var(--md-ctx-palette-blue60);
}
.md-ctx-palette-blue70{
    background-color: var(--md-ctx-palette-blue70);
}
.md-ctx-palette-blue80{
    background-color: var(--md-ctx-palette-blue80);
}
.md-ctx-palette-blue90{
    background-color: var(--md-ctx-palette-blue90);
}
.md-ctx-palette-blue95{
    background-color: var(--md-ctx-palette-blue95);
}
.md-ctx-palette-blue98{
    background-color: var(--md-ctx-palette-blue98);
}
.md-ctx-palette-blue99{
    background-color: var(--md-ctx-palette-blue99);
}
.md-ctx-palette-blue100{
    background-color: var(--md-ctx-palette-blue100);
}