/** SASS File base for color scheme generation **/
/* used to set the background of the entire page */
.customPageBackground {
background-color: #F6F6F6;
color: #22262D;
}

.customPageBackground #shop-message #hangers path {
fill: #22262D;
}

.SprdContent a {
color: #E2122F;
}

/* used to set custom styles for the header */
.customHeader {
color: #F6F6F6;
background-color: #22262D;
}

.customHeader h1 {
color: #BBBBBB;
}

.customHeader .sprd-promo-header .sprd-promo-expander {
background-color: #22262D;
border-bottom: 1px solid #898989;
color: #F6F6F6;
}

.customHeader .sprd-promo-header .sprd-promo-box {
background-color: #F6F6F6;
color: #22262D;
}

.customHeader .sprd-promo-header .sprd-promo-box .customButton {
background-color: #E2122F;
color: #F6F6F6;
}

.SprdMain .sprd-overlay.sprd-dialog .sprd-Wrapper.sprd-content {
background-color: #F6F6F6;
color: #22262D;
}

.SprdMain .sprd-Footer .sprd-LanguageSwitcher {
background-color: #F6F6F6;
border-color: #E2122F;
color: #22262D;
}

.SprdMain .sprd-Footer .sprd-LanguageSwitcher a:hover {
color: #E2122F;
}

/*global footer, area with imprint and legal stuff at the bottom of every page*/
.customFooter {
color: #F6F6F6;
background-color: #22262D;
}

/*watch out that the color selector items are affected (eps. if you set background image)*/
.customHighlight {
border-color: #E2122F;
color: #E2122F;
}

.customHighlightText.default {
color: #F6F6F6;
}

.customHighlightText.primary {
color: #E2122F;
}

.customHighlightText.secondary {
color: #22262D;
}

.customLink {
cursor: pointer;
}

.customLink.default {
color: #F6F6F6;
}

.customLink.primary {
color: #E2122F;
}

.customLink.secondary {
color: #22262D;
}

.customLink:hover {
text-decoration: underline;
}

/*basket & wishlist count indicator */
.customCounter {
color: #F6F6F6;
background-color: #E2122F;
}

/* change the style of the notification messages */
.customNotification {
background-color: #E2122F;
border-color: #E2122F;
color: #F6F6F6;
}

.customNotification:before {
background-color: #E2122F;
}

.customNotification.sprd-error {
background-color: #E2122F;
border-color: #E2122F;
color: #F6F6F6;
}

.customNotification.sprd-error:before {
background-color: #E2122F;
}

.SprdMain .SprdHeader.sprd-basket-notification .sprd-basket:after {
border-bottom-color: #BBBBBB;
}

/* here you can adjust the styles of the headlines for example in the basket and wishlist */
.customHeadline {
color: #22262D;
}

/* selector elements, right now color and size selector */
.customSelector .sprd-item {
color: #22262D;
border-color: #22262D !important;
}

.customSelector .sprd-item:hover, .customSelector .sprd-item.sprd-active {
color: #E2122F !important;
background-color: #F6F6F6;
}

.customSelector.sprd-color .sprd-item:hover, .customSelector.sprd-color .sprd-item.sprd-active {
border: 1px solid #E2122F !important;
}

.SprdMain .sprd-Filter.sprd-colorAndSize .sprd-button.sprd-active {
background-color: #F6F6F6;
}

.SprdMain .sprd-Filter.sprd-colorAndSize .sprd-open.sprd-Selector {
background-color: #F6F6F6;
}

@media screen and (max-width: 999px) and (min-width: 768px) {
.SprdMain .sprd-DetailBox.sprd-buying-info .sprd-size.sprd-Selector.sprd-dropdown {
border: 1px solid #22262D;
}
}

/* hover effects for the department filter on non-mobile screens */
.customFilterItem, .customSubfilterItem {
color: #F6F6F6;
}

/* items in the desktop department filter which are hovered with the mouse */
html:not(.touch) .customSubfilterItem:hover {
background-color: #E2122F;
color: #F6F6F6;
}

.SprdMain #sidebarDesignFilter .sprd-Item.sprd-active > .sprd-Label {
color: #E2122F;
}

/*mobile filters*/
.customMobileFilterButton .sprd-subline {
color: #E2122F;
}

.customMobileFilterButton.sprd-active {
-webkit-box-shadow: 0 10px 0 0 #E2122F;
box-shadow: 0 10px 0 0 #E2122F;
}

.customFilterButton.sprd-active {
border-color: #E2122F;
background-color: transparent;
}

.customFilterButton.sprd-active .sprd-Label {
background-color: #E2122F;
}

.customFilterText.sprd-active {
color: #E2122F;
}

.SprdMain .customHeader .sprd-departmentFilter .sprd-menu.sprd-active .sprd-label, .SprdMain .customHeader .sprd-departmentFilter .sprd-menu .sprd-item.sprd-active {
color: #E2122F;
}

.SprdMain .customHeader .sprd-departmentFilter .sprd-menu.sprd-open {
box-shadow: inset 0 -4px 0 0 #E2122F;
}

.SprdMain .customHeader .sprd-rightPanel .sprd-item.sprd-active, .SprdMain .customHeader .sprd-rightPanel .sprd-item.sprd-open {
border-bottom-color: #E2122F;
}

.SprdMain .customHeader .sprd-rightPanel .sprd-item.sprd-active .sprd-caret, .SprdMain .customHeader .sprd-rightPanel .sprd-item.sprd-open .sprd-caret {
color: #E2122F;
}

.SprdMain .customHeader .customFilterItem.sprd-active {
color: #E2122F;
box-shadow: inset 0 -3px 0 0 #E2122F;
}

/* styles the different button types */
.customButton, .SprdMain .sprd-social-sharing {
background-color: #F6F6F6;
color: #FEFEFE;
}

.customButton.sprd-default {
font-weight: 600;
background-color: #F6F6F6;
color: #22262D;
}

.customButton.sprd-primary {
/*primary button, e.g. buy button*/
background-color: #E2122F;
color: #F6F6F6;
border: 1px solid #ca102a;
}

.customButton.sprd-secondary {
/*secondary button, e.g. add to basket in wishlist*/
background-color: #22262D;
color: #F6F6F6;
border-color: #22262D;
}

html:not(.touch) .sprd-button.sprd-customButton.sprd-default:hover, html:not(.touch) .sprd-button.sprd-customButton.sprd-default:active {
background-color: #F6F6F6;
color: #E2122F;
}

html:not(.touch) .sprd-button.sprd-customButton.sprd-primary:hover {
background-color: #ed203d;
}

html:not(.touch) .sprd-button.sprd-customButton.sprd-primary:active {
background-color: #E2122F;
color: #F6F6F6;
border: 1px solid #ca102a;
}

html:not(.touch) .sprd-button.sprd-customButton.sprd-secondary:hover {
background-color: #BBBBBB;
color: #F6F6F6;
border-color: #BBBBBB;
}

html:not(.touch) .sprd-button.sprd-customButton.sprd-secondary:active {
background-color: #22262D;
color: #F6F6F6;
border-color: #22262D;
}

html:not(.touch) .customFilterButton:hover {
background-color: #E2122F;
border-color: #E2122F;
color: #F6F6F6;
}

/*filer bar for mobile device, dropdowns from header on desktop*/
@media (max-width: 767px) {
.sprd-departmentFilter .customFilter, .sprd-filterBar > .sprd-item > .customFilter {
border: 1px solid #22262D !important;
background-color: #22262D;
color: #22262D;
}
.SprdMain .sprd-filterBar {
background-color: #22262D;
color: #F6F6F6;
}
}

.customFilter {
background-color: #22262D;
}

.customFilter .sprd-departmentFilter, .customFilter .sprd-departmentFilter * {
background-color: #22262D;
color: #22262D;
border-color: #22262D !important;
}

/* change trusted footer panel */
.SprdMain .sprd-Footer .sprd-trustedFooter {
background-color: #BBBBBB;
color: #22262D;
}

.SprdMain .sprd-pt-size-table table tr.sprd-even {
background-color: rgba(187, 187, 187, 0.1);
}

/* virtual product carousel department */
.customDepartmentFilter .sprd-Wrapper.sprd-items .sprd-Button.sprd-department.sprd-active {
color: #E2122F;
}

/* DropDown hover */
html:not(.touch) .customButton.sprd-default:hover .sprd-Wrapper.sprd-Item {
background-color: #F6F6F6;
}

.sprd-bg-m1 {
background-color: #22262D !important;
}

.sprd-c-m1 {
color: #22262D !important;
}

.sprd-bc-m1 {
border-color: #22262D !important;
}

.sprd-f-m1 {
fill: #22262D !important;
}

.sprd-hbg-m1:hover {
background-color: #4e5157 !important;
}

.sprd-hbc-m1:hover {
border-color: #4e5157 !important;
}

.sprd-bg-m2 {
background-color: #E2122F !important;
}

.sprd-c-m2 {
color: #E2122F !important;
}

.sprd-bc-m2 {
border-color: #E2122F !important;
}

.sprd-f-m2 {
fill: #E2122F !important;
}

.sprd-hbg-m2:hover {
background-color: #e84159 !important;
}

.sprd-hbc-m2:hover {
border-color: #e84159 !important;
}

.sprd-bg-m3 {
background-color: #F6F6F6 !important;
}

.sprd-c-m3 {
color: #F6F6F6 !important;
}

.sprd-bc-m3 {
border-color: #F6F6F6 !important;
}

.sprd-f-m3 {
fill: #F6F6F6 !important;
}

.sprd-hbg-m3:hover {
background-color: #c5c5c5 !important;
}

.sprd-hbc-m3:hover {
border-color: #c5c5c5 !important;
}

.sprd-bg-s1 {
background-color: #BBBBBB !important;
}

.sprd-c-s1 {
color: #BBBBBB !important;
}

.sprd-bc-s1 {
border-color: #BBBBBB !important;
}

.sprd-f-s1 {
fill: #BBBBBB !important;
}

.sprd-hbg-s1:hover {
background-color: #c9c9c9 !important;
}

.sprd-hbc-s1:hover {
border-color: #c9c9c9 !important;
}

.sprd-bg-s2 {
background-color: #22262D !important;
}

.sprd-c-s2 {
color: #22262D !important;
}

.sprd-bc-s2 {
border-color: #22262D !important;
}

.sprd-f-s2 {
fill: #22262D !important;
}

.sprd-hbg-s2:hover {
background-color: #4e5157 !important;
}

.sprd-hbc-s2:hover {
border-color: #4e5157 !important;
}

.sprd-bg-s3 {
background-color: #F6F6F6 !important;
}

.sprd-c-s3 {
color: #F6F6F6 !important;
}

.sprd-bc-s3 {
border-color: #F6F6F6 !important;
}

.sprd-f-s3 {
fill: #F6F6F6 !important;
}

.sprd-hbg-s3:hover {
background-color: #c5c5c5 !important;
}

.sprd-hbc-s3:hover {
border-color: #c5c5c5 !important;
}

.sprd-btn-primary {
background-color: #E2122F !important;
border: 1px solid #E2122F !important;
color: #F6F6F6 !important;
}

.sprd-btn-primary:hover {
background-color: #e84159 !important;
border-color: #e84159 !important;
}

.sprd-btn-secondary {
background-color: #F6F6F6 !important;
border: 1px solid #22262D !important;
color: #22262D !important;
}

.sprd-btn-secondary:hover {
border: 1px solid #E2122F !important;
color: #E2122F !important;
}

.sprd-back-to-top:hover {
background-color: #22262D !important;
border-color: #F6F6F6 !important;
fill: #F6F6F6 !important;
}