:root {

    --red-base: #F44336;
    --red-lighten-5: #FFEBEE;
    --red-lighten-4: #FFCDD2;
    --red-lighten-3: #EF9A9A;
    --red-lighten-2: #E57373;
    --red-lighten-1: #EF5350;
    --red-darken-1: #E53935;
    --red-darken-2: #D32F2F;
    --red-darken-3: #C62828;
    --red-darken-4: #B71C1C;
    --red-accent-1: #FF8A80;
    --red-accent-2: #FF5252;
    --red-accent-3: #FF1744;
    --red-accent-4: #D50000;

    --pink-base: #e91e63;
    --pink-lighten-5: #fce4ec;
    --pink-lighten-4: #f8bbd0;
    --pink-lighten-3: #f48fb1;
    --pink-lighten-2: #f06292;
    --pink-lighten-1: #ec407a;
    --pink-darken-1: #d81b60;
    --pink-darken-2: #c2185b;
    --pink-darken-3: #ad1457;
    --pink-darken-4: #880e4f;
    --pink-accent-1: #ff80ab;
    --pink-accent-2: #ff4081;
    --pink-accent-3: #f50057;
    --pink-accent-4: #c51162;

    --purple-base: #9c27b0;
    --purple-lighten-5: #f3e5f5;
    --purple-lighten-4: #e1bee7;
    --purple-lighten-3: #ce93d8;
    --purple-lighten-2: #ba68c8;
    --purple-lighten-1: #ab47bc;
    --purple-darken-1: #8e24aa;
    --purple-darken-2: #7b1fa2;
    --purple-darken-3: #6a1b9a;
    --purple-darken-4: #4a148c;
    --purple-accent-1: #ea80fc;
    --purple-accent-2: #e040fb;
    --purple-accent-3: #d500f9;
    --purple-accent-4: #aa00ff;

    --indigo-base: #3f51b5;
    --indigo-lighten-5: #e8eaf6;
    --indigo-lighten-4: #c5cae9;
    --indigo-lighten-3: #9fa8da;
    --indigo-lighten-2: #7986cb;
    --indigo-lighten-1: #5c6bc0;
    --indigo-darken-1: #3949ab;
    --indigo-darken-2: #303f9f;
    --indigo-darken-3: #283593;
    --indigo-darken-4: #1a237e;
    --indigo-accent-1: #8c9eff;
    --indigo-accent-2: #536dfe;
    --indigo-accent-3: #3d5afe;
    --indigo-accent-4: #304ffe;

    --blue-base: #2196F3;
    --blue-lighten-5: #E3F2FD;
    --blue-lighten-4: #BBDEFB;
    --blue-lighten-3: #90CAF9;
    --blue-lighten-2: #64B5F6;
    --blue-lighten-1: #42A5F5;
    --blue-darken-1: #1E88E5;
    --blue-darken-2: #1976D2;
    --blue-darken-3: #1565C0;
    --blue-darken-4: #0D47A1;
    --blue-accent-1: #82B1FF;
    --blue-accent-2: #448AFF;
    --blue-accent-3: #2979FF;
    --blue-accent-4: #2962FF;

    --green-base: #4CAF50;
    --green-lighten-5: #E8F5E9;
    --green-lighten-4: #C8E6C9;
    --green-lighten-3: #A5D6A7;
    --green-lighten-2: #81C784;
    --green-lighten-1: #66BB6A;
    --green-darken-1: #43A047;
    --green-darken-2: #388E3C;
    --green-darken-3: #2E7D32;
    --green-darken-4: #1B5E20;
    --green-accent-1: #B9F6CA;
    --green-accent-2: #69F0AE;
    --green-accent-3: #00E676;
    --green-accent-4: #00C853;

    --orange-base: #ff9800;
    --orange-lighten-5: #fff3e0;
    --orange-lighten-4: #ffe0b2;
    --orange-lighten-3: #ffcc80;
    --orange-lighten-2: #ffb74d;
    --orange-lighten-1: #ffa726;
    --orange-darken-1: #fb8c00;
    --orange-darken-2: #f57c00;
    --orange-darken-3: #ef6c00;
    --orange-darken-4: #e65100;
    --orange-accent-1: #ffd180;
    --orange-accent-2: #ffab40;
    --orange-accent-3: #ff9100;
    --orange-accent-4: #ff6d00;

    --deep-purple-base: #673ab7;
    --deep-purple-lighten-5: #ede7f6;
    --deep-purple-lighten-4: #d1c4e9;
    --deep-purple-lighten-3: #b39ddb;
    --deep-purple-lighten-2: #9575cd;
    --deep-purple-lighten-1: #7e57c2;
    --deep-purple-darken-1: #5e35b1;
    --deep-purple-darken-2: #512da8;
    --deep-purple-darken-3: #4527a0;
    --deep-purple-darken-4: #311b92;
    --deep-purple-accent-1: #b388ff;
    --deep-purple-accent-2: #7c4dff;
    --deep-purple-accent-3: #651fff;
    --deep-purple-accent-4: #6200ea;

    --light-blue-base: #03a9f4;
    --light-blue-lighten-5: #e1f5fe;
    --light-blue-lighten-4: #b3e5fc;
    --light-blue-lighten-3: #81d4fa;
    --light-blue-lighten-2: #4fc3f7;
    --light-blue-lighten-1: #29b6f6;
    --light-blue-darken-1: #039be5;
    --light-blue-darken-2: #0288d1;
    --light-blue-darken-3: #0277bd;
    --light-blue-darken-4: #01579b;
    --light-blue-accent-1: #80d8ff;
    --light-blue-accent-2: #40c4ff;
    --light-blue-accent-3: #00b0ff;
    --light-blue-accent-4: #0091ea;

    --cyan-base: #00bcd4;
    --cyan-lighten-5: #e0f7fa;
    --cyan-lighten-4: #b2ebf2;
    --cyan-lighten-3: #80deea;
    --cyan-lighten-2: #4dd0e1;
    --cyan-lighten-1: #26c6da;
    --cyan-darken-1: #00acc1;
    --cyan-darken-2: #0097a7;
    --cyan-darken-3: #00838f;
    --cyan-darken-4: #006064;
    --cyan-accent-1: #84ffff;
    --cyan-accent-2: #18ffff;
    --cyan-accent-3: #00e5ff;
    --cyan-accent-4: #00b8d4;

    --teal-base: #009688;
    --teal-lighten-5: #e0f2f1;
    --teal-lighten-4: #b2dfdb;
    --teal-lighten-3: #80cbc4;
    --teal-lighten-2: #4db6ac;
    --teal-lighten-1: #26a69a;
    --teal-darken-1: #00897b;
    --teal-darken-2: #00796b;
    --teal-darken-3: #00695c;
    --teal-darken-4: #004d40;
    --teal-accent-1: #a7ffeb;
    --teal-accent-2: #64ffda;
    --teal-accent-3: #1de9b6;
    --teal-accent-4: #00bfa5;


    --light-green-base: #8bc34a;
    --light-green-lighten-5: #f1f8e9;
    --light-green-lighten-4: #dcedc8;
    --light-green-lighten-3: #c5e1a5;
    --light-green-lighten-2: #aed581;
    --light-green-lighten-1: #9ccc65;
    --light-green-darken-1: #7cb342;
    --light-green-darken-2: #689f38;
    --light-green-darken-3: #558b2f;
    --light-green-darken-4: #33691e;
    --light-green-accent-1: #ccff90;
    --light-green-accent-2: #b2ff59;
    --light-green-accent-3: #76ff03;
    --light-green-accent-4: #64dd17;

    --lime-base: #cddc39;
    --lime-lighten-5: #f9fbe7;
    --lime-lighten-4: #f0f4c3;
    --lime-lighten-3: #e6ee9c;
    --lime-lighten-2: #dce775;
    --lime-lighten-1: #d4e157;
    --lime-darken-1: #c0ca33;
    --lime-darken-2: #afb42b;
    --lime-darken-3: #9e9d24;
    --lime-darken-4: #827717;
    --lime-accent-1: #f4ff81;
    --lime-accent-2: #eeff41;
    --lime-accent-3: #c6ff00;
    --lime-accent-4: #aeea00;

    --yellow-base: #ffeb3b;
    --yellow-lighten-5: #fffde7;
    --yellow-lighten-4: #fff9c4;
    --yellow-lighten-3: #fff59d;
    --yellow-lighten-2: #fff176;
    --yellow-lighten-1: #ffee58;
    --yellow-darken-1: #fdd835;
    --yellow-darken-2: #fbc02d;
    --yellow-darken-3: #f9a825;
    --yellow-darken-4: #f57f17;
    --yellow-accent-1: #ffff8d;
    --yellow-accent-2: #ffff00;
    --yellow-accent-3: #ffea00;
    --yellow-accent-4: #ffd600;

    --amber-base: #ffc107;
    --amber-lighten-5: #fff8e1;
    --amber-lighten-4: #ffecb3;
    --amber-lighten-3: #ffe082;
    --amber-lighten-2: #ffd54f;
    --amber-lighten-1: #ffca28;
    --amber-darken-1: #ffb300;
    --amber-darken-2: #ffa000;
    --amber-darken-3: #ff8f00;
    --amber-darken-4: #ff6f00;
    --amber-accent-1: #ffe57f;
    --amber-accent-2: #ffd740;
    --amber-accent-3: #ffc400;
    --amber-accent-4: #ffab00;

    --deep-orange-base: #ff5722;
    --deep-orange-lighten-5: #fbe9e7;
    --deep-orange-lighten-4: #ffccbc;
    --deep-orange-lighten-3: #ffab91;
    --deep-orange-lighten-2: #ff8a65;
    --deep-orange-lighten-1: #ff7043;
    --deep-orange-darken-1: #f4511e;
    --deep-orange-darken-2: #e64a19;
    --deep-orange-darken-3: #d84315;
    --deep-orange-darken-4: #bf360c;
    --deep-orange-accent-1: #ff9e80;
    --deep-orange-accent-2: #ff6e40;
    --deep-orange-accent-3: #ff3d00;
    --deep-orange-accent-4: #dd2c00;

    --brown-base: #795548;
    --brown-lighten-5: #efebe9;
    --brown-lighten-4: #d7ccc8;
    --brown-lighten-3: #bcaaa4;
    --brown-lighten-2: #a1887f;
    --brown-lighten-1: #8d6e63;
    --brown-darken-1: #6d4c41;
    --brown-darken-2: #5d4037;
    --brown-darken-3: #4e342e;
    --brown-darken-4: #3e2723;

    --blue-grey-base: #607d8b;
    --blue-grey-lighten-5: #eceff1;
    --blue-grey-lighten-4: #cfd8dc;
    --blue-grey-lighten-3: #b0bec5;
    --blue-grey-lighten-2: #90a4ae;
    --blue-grey-lighten-1: #78909c;
    --blue-grey-darken-1: #546e7a;
    --blue-grey-darken-2: #455a64;
    --blue-grey-darken-3: #37474f;
    --blue-grey-darken-4: #263238;

    --grey-base: #9e9e9e;
    --grey-lighten-5: #fafafa;
    --grey-lighten-4: #f5f5f5;
    --grey-lighten-3: #eeeeee;
    --grey-lighten-2: #e0e0e0;
    --grey-lighten-1: #bdbdbd;
    --grey-darken-1: #757575;
    --grey-darken-2: #616161;
    --grey-darken-3: #424242;
    --grey-darken-4: #212121;

    --ligthen-1-font: #fff;
    /*--menu-bg-color: var(--pallete-100);*/
    /*--header-bg-color: var(--pallete-800);*/
    /*--menu-font-color: var(--pallete);*/
    /*--header-font-color: var(--pallete);*/

    --primary: var(--blue-grey-darken-4);  /* 38, 50, 56 */
    --primary-low-opacity: rgba(38, 50, 56, 0.12);
    --primary-variant: var(--blue-grey-darken-4);

    --secondary: var(--blue-grey-darken-4);
    --secondary-variant: var(--blue-grey-darken-4);

    --background: var(--grey-darken-3);
    --surface: var(--grey-darken-2);

    --error: #B00020;

    --on-primary: #FFF;
    --on-secondary: #000;
    --on-secondary-high-opacity: rgba(0, 0, 0, 0.6);;
    --on-background: #FFF;
    --on-surface: #FFF;
    --on-error: #FFF;
    --on-disabled: #aaa;

    --app-f-1: var(--ligthen-1-font);
    --app-f-2: var(--ligthen-1-font);

    font-size: 0.5em;

    --action-bar-height: 5.6rem;

    --list-icon-size: 4rem;
    --list-item-height: 4.5rem;
    --grid-icon-size: 4.5rem;
    --grid-item-size: 9rem;
}
body {
    margin: 0;
    font-family: Roboto, "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-size: 1.4rem;
    -webkit-font-smoothing: antialiased;
    height: 100vh;
    background-color: var(--background);
    color: var(--on-background);
}
@media (min-width: 361px) {
    :root { font-size: 0.7em; }
}

@media (min-width: 550px) {
    :root { font-size: 0.8em; }
}
/*
@font-face {
    font-family: 'Pacifico';
    font-style: normal;
    font-weight: 400;
    src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
    font-display: swap;
}*/

output { display: block; margin-top: var(--action-bar-height); }



/* LIST STYLE */
.list {

}
.list .item.add-item {
    display: block;
    text-align: right;
    background: unset!important;
}
.list .item.add-item .material-icons {
    /*background: var(--surface);*/
    font-size: 3.5rem;
    margin-top: 1.0rem;
}
.list .item {
    display: grid;
    grid-template-columns: var(--list-item-height) auto calc(var(--list-item-height)*1.5) repeat(3, var(--list-item-height));
    grid-gap: 0.5rem 1rem;
    align-items: center;
    height: var(--list-item-height);
    background: var(--surface)!important;
    margin-bottom: 0.8rem;
    /*text-align: left;*/
}
.list .item .item-date.hide { visibility: hidden; }
.list .item .badge,
.list .item .item-icon,
.list .item .item-name {
    display: inline;
    text-align: left;
}
.list .item .item-icon { width: var(--list-icon-size); }

/* Item selected (active/inactive) */
.list .item.active {
    background: var(--primary)!important;
}

/* GRID STYLE */

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--grid-item-size), 1fr));
    grid-gap: 0.8rem;
    background-color: var(--surface);
    padding: 1.2rem;
    margin: 1rem 0;
}
.grid .item {
    box-sizing: border-box;

    height: var(--grid-item-size);
    background-color: var(--blue-grey-darken-4);

    text-align: center;

    font-size: 1.5rem;
    font-weight: 600;
    padding: 0.5rem;
    position: relative; left: 0; top: 0;
}
.grid .item .item-icon {
    width: var(--grid-icon-size);
    background: unset!important;
    margin-top: 1rem;
}
.grid .item.add-item .material-icons { transform: translateY(10%); }
.grid .item .item-date.hide { display: none; }
.grid .item .badge { display: none; }
.grid .item .badge.more:before {content: "x";}
.grid .item .badge.more {
    display: inline;
    position: absolute; top: 0.2rem; right: 0.4rem;
    font-size: 2.0rem;
}


.grid .item .edit, .grid .item .remove {
    display: none;
    height: calc(var(--grid-item-size) / 2);
    width: 100%;
}


/* Item selected (active/inactive) */
.grid .item.active {
    background: linear-gradient(to bottom, var(--blue-darken-4) 0%, var(--blue-darken-4) 50%, var(--red-darken-4) 50%, var(--red-darken-4) 100%)!important;
}
.grid .item.active .item-icon,
.grid .item.active .item-name,
.grid .item.active .item-date,
.grid .item.active .badge {
    display: none;
}
.grid .item.active .edit, .grid .item.active .remove {
    display: block;
}







/* COMMON STYLE*/
.grid .item, .list .item {
    border:  none;
    padding: 0;
    width: 100%;

    color: var(--ligthen-1-font);
    font-size: 1.5rem;
    font-weight: 600;
}
.item .edit,
.item .remove {
    box-sizing: border-box;
    background: transparent;
    border: 0;
    border-radius: unset;
    margin: 0;
    padding: 0;
}
.add-item .material-icons { font-size: 7.5rem; }

.item-name {
    white-space: nowrap;overflow: hidden;
    margin: 0;
}
.item-date {
    margin: 0; font-size: 1rem;
}


.item-small { font-size: 1.2rem; }

img.item-add { height: 7.5rem; }

.material-icons {
    font-size: 3.2rem;
    color: var(--app-f-1);
}


app-home {
    position: fixed; top: 0; left: 0; z-index: 10000;
    margin: 0; border: 0;
    text-align: center;
    width: 100%; height: 100vh; display: block;
    background: var(--background);
    color: var(--on-background);
}

button.material-btn {
    background: var(--primary);
    color: var(--on-primary);
    border: 0;
    padding: 1.5rem;
    font-size: 2rem;
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

}

freezer-panel {
    /*background-color: var(--background);*/
    display: grid;
    grid-template-columns: 2.3rem auto;
}

.freezer-label-container {
    margin-top: 1rem;
    margin-bottom: 1rem;
    overflow: hidden;
}
.freezer-label {
    margin-top: 0.5rem;
    text-transform: uppercase;
    color: var(--app-f-1);
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: top right;
    font-size: 2rem;
    font-weight: bolder;
    text-align: right;
    width: 100rem;
}
input, textarea {
    border: 0.1rem solid darkgray;
    border-radius: 0.3rem;
    font-size: 1.5rem;
    margin: 0.5rem;
    padding: 0.5rem;
}



button:focus, input:focus, textarea:focus {outline:0;}


button.pure {border: none;background-color: unset;}
/*
button.edit { color: cornflowerblue;}
button.delete { color: red;}
*/

.material-list {
    padding-left: 0;
}
.material-list a { display: block;}
.material-list.text-only a , .material-list.text-only button {
    height: 4.8rem;
    padding: 1.2rem 1.6rem 1.2rem 1.6rem;
}
.material-list a , .material-list button {
    text-decoration: none;
    text-align: left;

    box-sizing: border-box;
    height: 5.6rem;
    width: 100%;


    padding: 0;
    background: var(--background);
    color: var(--on-background);

    border-bottom: 0.1rem solid var(--surface);
}

.material-list * .list-text {
    display: inline-block;
    margin: 1.2rem 1.6rem 1.2rem 1.6rem;
    vertical-align: top;
    line-height: calc(5.6rem - (2 * 1.2rem));
    font-size: 1.6rem;
}

.material-list * .material-icons {
    margin: 0.8rem 0 0.8rem 0.8rem;
    font-size: 4.0rem;
    border-radius: 50%;
    background: var(--on-secondary-high-opacity);
}

.material-list * .list-img-round {
    margin: 0.8rem 0 0.8rem 0.8rem;
    width: 4.0rem;
    height: 4.0rem;
    object-fit: cover;
    clip-path: circle(2.0rem at center);
}

img.banner-image { width: 100vw; max-height: 20vh; object-fit: cover; }
ul { padding-left: 0; }
ul li {list-style-type: none; margin-left: 0;}

home-list ul li {
    padding: 0.7rem; font-size:1.5rem;  color: var(--app-f-1);
    background-color: var(--surface);
    border-bottom: 0.2rem solid var(--background);
}
home-list ul li a { color: var(--app-f-1); }

recipe-list ul li {
    padding: 0.7rem; font-size:1.5rem;  color: var(--app-f-1);
    background-color: var(--surface);
    border-bottom: 0.2rem solid var(--background);
}
recipe-list ul li a { color: var(--app-f-1); }

.recipe-name { margin: 0.5rem 1rem; }
.recipe-description { white-space: pre-line; margin: 0.5rem 1rem; }
.recipe-ingredients { margin: 0.5rem 1rem;}
.recipe-ingredients li { list-style-type: disc; margin-left: 2rem; }

weekplan-list ul li {
    padding: 0.7rem; font-size:1.5rem;  color: var(--app-f-1);
    background-color: var(--surface);
    border-bottom: 0.2rem solid var(--background);
}
weekplan-list ul li a { color: var(--app-f-1); }

recipe-edit ul li {
    padding: 0 0.7rem; font-size:1.5rem;  color: var(--app-f-1);
    background-color: var(--surface);
    border-bottom: 0.2rem solid var(--background);

    display: grid;
    grid-template-columns: 4rem 6rem auto repeat(4, 3rem);
    grid-gap: 0.5rem 1rem;
    align-items: center;
}
recipe-edit ul li .edit {
    font-size: 3.5rem;
    color: var(--app-f-1);
}
recipe-edit ul li a { color: var(--app-f-1); }


weekplan-edit ul li {
    padding: 0.7rem; font-size:1.5rem;  color: var(--app-f-1);
    background-color: var(--surface);
    border-bottom: 0.2rem solid var(--background);
}
weekplan-edit ul li a { color: var(--app-f-1); }
weekplan-edit h3 { margin: 0; padding: 1rem 0.5rem; background-color: var(--primary); }

ul.settings-list li {
    display: grid;
    grid-template-columns: 3fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
}

ul.settings-list li p { margin: 0.5rem; font-size:1.5rem; color: var(--app-f-1); }
ul.settings-list li button {
    border: none;
    background-color: #00000000; color: var(--app-f-1);
}
ul.settings-list li button i { font-size: 3rem;}

.configure-grid {
    display: grid;
    grid-gap: 0.8rem;
    grid-template-columns: 1fr 1fr;
    justify-items: end;
    align-items: center;
    font-size: 2rem;
}

.configure-grid button {
    justify-self: stretch;
    height: 4rem;
    background: var(--primary);
    color: var(--app-f-1);
    border: none;
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: 0.2rem;
}




.filter { margin: 1rem 0.5rem;}
button.filter-btn { border:  none; margin: 1rem; padding: 1rem; font-size: 1.5rem;}
button.filter-btn i {font-size: 1.5rem; }
button.settings-btn i {
    font-size: 3.5rem;
}
button.settings-btn {
    border: none;
    background-color: unset;
    color: var(--app-f-1);
    margin: 1rem;
}

.grid-2 {display: grid;grid-template-columns: auto 1fr; justify-items: end;}

/* Modal
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.wrapper {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #222c;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
    transition: visibility 0s linear .25s,opacity .25s 0s,transform .25s;
    z-index: 1;
}
.visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: visibility 0s linear 0s,opacity .25s 0s,transform .25s;
}
.modal {
    padding: 1rem 1rem 0.5rem 1rem;
    background-color: var(--surface);
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 0.5rem;
    min-width: 8rem;
    max-height: 90vh;
    overflow-y: auto;
}

.modal > h3, .modal > h2 { margin-top: 0; margin-bottom: 0.7rem;}

.modal > button { color: #555; }

/*.modal.list * h3, .modal.list * h2 { margin-bottom: 0.7rem; }*/
.modal ul { padding-left: 0; margin: 0;}
.modal * li { display: block; border-top: 0.1rem solid darkgrey;}
.modal * li:first-of-type { border-top: none;  }
.modal-list-btn { border: none; color: var(--app-f-1); background-color: var(--surface); width: 100%; min-height: 4rem;  }
.modal-list-btn:hover { color: var(--app-f-1); }


.modal.modal-grid {
    width: 80vw;
    min-height: 30vh;
    background-color: var(--surface);
}

.modal.modal-grid ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
    grid-gap: 0.8rem;
}
.modal.modal-grid ul li {
    width: 100%;
    min-height: 4.8rem;
    border-top: none;
}
.modal.modal-grid ul li button {
    border: none; width: 100%;
}
.modal-icon {
    background-color: var(--primary); padding: 0.5rem;
}

.modal.modal-grid ul li button p {
    margin: 0.5rem 0.5rem;
}

.bring-icon {
    height: 6rem;
    background-color: #EE524E;
}
.bring-icon img {
    max-width: 4rem;
    max-height: 3rem;
}


/* COLOR
===============
 */


.lighten-5 { color: #000; }
.lighten-4 { color: #000; }
.lighten-3 { color: #000; }
.lighten-2 { color: #000; }
.lighten-1 { color: #000; }
.darken-1  { color: #fff; }
.darken-2  { color: #fff; }
.darken-3  { color: #fff; }
.darken-4  { color: #fff; }

button.dot { height: 4rem!important; width: 4rem!important; border-radius: 2rem!important; color: transparent; }
button.dot:hover { color: transparent; }
.cat-red, button.cat-red { background-color: var(--red-darken-4);}
.cat-pink, button.cat-pink { background-color: var(--pink-darken-4);}
.cat-purple, button.cat-purple { background-color: var(--purple-darken-4);}
.cat-deep-purple, button.cat-deep-purple { background-color: var(--deep-purple-darken-4);}
.cat-indigo, button.cat-indigo { background-color: var(--indigo-darken-4);}
.cat-blue, button.cat-blue { background-color: var(--blue-darken-4);}
.cat-light-blue, button.cat-light-blue { background-color: var(--light-blue-darken-4);}
.cat-cyan, button.cat-cyan { background-color: var(--cyan-darken-4);}
.cat-teal, button.cat-teal { background-color: var(--teal-darken-4);}
.cat-green, button.cat-green { background-color: var(--green-darken-4);}
.cat-light-green, button.cat-light-green { background-color: var(--light-green-darken-4);}
.cat-lime, button.cat-lime { background-color: var(--lime-darken-4);}
.cat-yellow, button.cat-yellow { background-color: var(--yellow-darken-4);}
.cat-orange, button.cat-orange { background-color: var(--orange-darken-4);}
.cat-amber, button.cat-amber { background-color: var(--amber-darken-4);}
.cat-deep-orange, button.cat-deep-orange { background-color: var(--deep-orange-darken-4);}
.cat-brown, button.cat-brown { background-color: var(--brown-darken-4);}
.cat-blue-grey, button.cat-blue-grey { background-color: var(--blue-grey-darken-4);}
.cat-grey, button.cat-grey { background-color: var(--grey-darken-4);}