#color_select_panel .mdl-color--primary {background-color: rgb($color-primary) !important;}
#color_select_panel .mdl-color--primary-contrast {background-color: rgb($color-primary-contrast) !important;}
#color_select_panel .mdl-color--primary-dark {background-color: rgb($color-primary-dark) !important;}
#color_select_panel .mdl-color--accent {background-color: rgb($color-accent) !important;}
#color_select_panel .mdl-color--accent-contrast {background-color: rgb($color-accent-contrast) !important;}
#color_select_panel .mdl-color-text--primary {color: rgb($color-primary) !important;}
#color_select_panel .mdl-color-text--primary-contrast {color: rgb($color-primary-contrast) !important;}
#color_select_panel .mdl-color-text--primary-dark {color: rgb($color-primary-dark) !important;}
#color_select_panel .mdl-color-text--accent {color: rgb($color-accent) !important;}
#color_select_panel .mdl-color-text--accent-contrast {color: rgb($color-accent-contrast) !important;}
#color_select_panel .mdl-badge[data-badge]:after {content: attr(data-badge);display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;-webkit-align-content: center;-ms-flex-line-pack: center;align-content: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;position: absolute;top: -11px;right: -24px;font-family: "Roboto", "Helvetica", "Arial", sans-serif;font-weight: 600;font-size: 12px;width: 22px;height: 22px;border-radius: 50%;background: rgb($color-accent);color: rgb($color-accent-contrast);}
#color_select_panel .mdl-button .mdl-badge[data-badge]:after {top: -10px;right: -5px;}
#color_select_panel .mdl-badge.mdl-badge--no-background[data-badge]:after {color: rgb($color-accent);background: rgba($color-accent-contrast, 0.2);box-shadow: 0 0 1px gray;}
#color_select_panel .mdl-button--raised.mdl-button--colored {background: rgb($color-primary);color: rgb($color-primary-contrast);}
#color_select_panel .mdl-button--raised.mdl-button--colored:hover {background-color: rgb($color-primary);}
#color_select_panel .mdl-button--raised.mdl-button--colored:active {background-color: rgb($color-primary);}
#color_select_panel .mdl-button--raised.mdl-button--colored:focus:not(:active) {background-color: rgb($color-primary);}
#color_select_panel .mdl-button--raised.mdl-button--colored .mdl-ripple {background: rgb($color-primary-contrast);}
#color_select_panel .mdl-button--fab.mdl-button--colored {background: rgb($color-accent);color: rgb($color-accent-contrast);}
#color_select_panel .mdl-button--fab.mdl-button--colored:hover {background-color: rgb($color-accent);}
#color_select_panel .mdl-button--fab.mdl-button--colored:focus:not(:active) {background-color: rgb($color-accent);}
#color_select_panel .mdl-button--fab.mdl-button--colored:active {background-color: rgb($color-accent);}
#color_select_panel .mdl-button--fab.mdl-button--colored .mdl-ripple {background: rgb($color-accent-contrast);}
#color_select_panel .mdl-button--primary.mdl-button--primary {color: rgb($color-primary);}
#color_select_panel .mdl-button--primary.mdl-button--primary .mdl-ripple {background: rgb($color-primary-contrast);}
#color_select_panel .mdl-button--primary.mdl-button--primary.mdl-button--raised, .mdl-button--primary.mdl-button--primary.mdl-button--fab {color: rgb($color-primary-contrast);background-color: rgb($color-primary);}
#color_select_panel .mdl-button--accent.mdl-button--accent {color: rgb($color-accent);}
#color_select_panel .mdl-button--accent.mdl-button--accent .mdl-ripple {background: rgb($color-accent-contrast);}
#color_select_panel .mdl-button--accent.mdl-button--accent.mdl-button--raised, .mdl-button--accent.mdl-button--accent.mdl-button--fab {color: rgb($color-accent-contrast);background-color: rgb($color-accent);}
#color_select_panel .mdl-card__media {background-color: rgb($color-accent);background-repeat: repeat;background-position: 50% 50%;background-size: cover;background-origin: padding-box;background-attachment: scroll;box-sizing: border-box;}
#color_select_panel .mdl-checkbox.is-checked .mdl-checkbox__box-outline {border: 2px solid rgb($color-primary)}
#color_select_panel .mdl-checkbox.is-focused.is-checked .mdl-checkbox__focus-helper {box-shadow: 0 0 0px 8px rgba($color-primary, 0.26);background-color: rgba($color-primary, 0.26)}
#color_select_panel .mdl-checkbox__ripple-container .mdl-ripple {background: rgb($color-primary)}
#color_select_panel .mdl-layout__header-row .mdl-navigation__link {display: block;color: rgb($color-primary-contrast);line-height: 64px;padding: 0 24px;}
#color_select_panel .mdl-layout__tab-bar {height: 96px;margin: 0;width: calc(100% - 112px);padding: 0 0 0 56px;display: -webkit-flex;display: -ms-flexbox;display: flex;background-color: rgb($color-primary);overflow-y: hidden;overflow-x: scroll;}
#color_select_panel .mdl-layout__tab-bar-button {display: inline-block;position: absolute;top: 0;height: 48px;width: 56px;z-index: 4;text-align: center;background-color: rgb($color-primary);color: transparent;cursor: pointer;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
#color_select_panel .mdl-layout__tab-bar-button.is-active {color: rgb($color-primary-contrast);}
#color_select_panel .mdl-layout__tab {margin: 0;border: none;padding: 0 24px 0 24px;float: left;position: relative;display: block;-webkit-flex-grow: 0;-ms-flex-positive: 0;flex-grow: 0;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;text-decoration: none;height: 48px;line-height: 48px;text-align: center;font-weight: 500;font-size: 14px;text-transform: uppercase;color: rgba($color-primary-contrast, 0.6);overflow: hidden;}
#color_select_panel .mdl-layout.is-upgraded .mdl-layout__tab.is-active {color: rgb($color-primary-contrast);}
#color_select_panel .mdl-layout.is-upgraded .mdl-layout__tab.is-active::after {height: 2px;width: 100%;display: block;content: " ";bottom: 0;left: 0;position: absolute;background: rgb($color-accent);-webkit-animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0.01s alternate forwards;animation: border-expand 0.2s cubic-bezier(0.4, 0, 0.4, 1) 0.01s alternate forwards;transition: all 1s cubic-bezier(0.4, 0, 1, 1);}
#color_select_panel .mdl-layout__tab .mdl-layout__tab-ripple-container .mdl-ripple {background-color: rgb($color-primary-contrast);}
#color_select_panel .mdl-layout__header {display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-webkit-justify-content: flex-start;-ms-flex-pack: start;justify-content: flex-start;box-sizing: border-box;-webkit-flex-shrink: 0;-ms-flex-negative: 0;flex-shrink: 0;width: 100%;margin: 0;padding: 0;border: none;min-height: 64px;max-height: 1000px;z-index: 3;background-color: rgb($color-primary);color: rgb($color-primary-contrast);box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);transition-duration: 0.2s;transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);transition-property: max-height, box-shadow;}