/*
    Variables 

    :root {
            --color-primary: @brandCss.PrimaryColor;
            --color-secondary: @brandCss.SecondaryColor;
            --color-tertiary: @brandCss.PrimaryColor; 
            --table-header: @brandCss.TableHeader;
            --table-header-text-light: @brandCss.TableHeaderTextLight;
            --table-header-text-dark: @brandCss.TableHeaderTextDark;
            --table-row-on: @brandCss.TableRowOn;
            --table-row-off: @brandCss.TableRowOff;
            --bg-dark: @brandCss.BgDark;
            --bg-text-dark: @brandCss.BgTextDark;
            --bg-light: @brandCss.BgLight;
            --bg-text-light: @brandCss.BgTextLight;
            --body-text: @brandCss.BodyText;
            --hyperlink-text: @brandCss.HyperlinkText;
            --menu-bg-on: @brandCss.MenuBgOn;
            --menu-bg-off: @brandCss.MenuBgOff;
            --menu-text-on: @brandCss.MenuTextOn;
            --menu-text-off: @brandCss.MenuTextOff;
            --action-button-on: @brandCss.ActionButtonOn;
            --action-button-off: @brandCss.ActionButtonOff;
            --action-button-text-on: @brandCss.ActionButtonTextOn;
            --action-button-text-off: @brandCss.ActionButtonTextOff;
            @*********************************************************@
            @*
                Colors with opacity (hex)

                HEX values
                https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4

            *@
            @*********************************************************@
            --color-primary-op-10: @(brandCss.PrimaryColor + "1a"); 
            --color-primary-op-40: @(brandCss.PrimaryColor + "40"); 
            --color-primary-op-50: @(brandCss.PrimaryColor + "80"); 
            --color-primary-op-75: @(brandCss.PrimaryColor + "BF"); 
        }
*/

/* ******************************** */
/* Draw-Tite Styling Used as Base   */
/* ******************************** */

/* DRAW-TITE Primary Color: #2F6FA6  || rgba(47, 111, 166, 1) */
/* DRAW-TITE Secondary Color: #2F6FA6 */
/* DRAW-TITE Tertiary Color: #2F6FA6 */

.color-primary {
    color: var(--color-primary);
}

.color-secondary {
    color: var(--color-secondary);
}

.color-tertiary {
    color: var(--color-primary);
}

/* ------------------------------ */
/* text colors HEX */
/* ------------------------------ */

a,
ul.default > li > a
.subtitle,
.faq-question:hover,
.faq-question.element-active,
.cart-dropdown .dropdown-toggle::before,
.card.card-warranty .card-title {
    color: var(--color-primary);
}

.text-primary {
   color: var(--color-primary) !important;
}

/* ------------------------------ */
/* background colors HEX */
/* ------------------------------ */
.megamenu .product-name {
    color: var(--action-button-text) !important;
    background-color: var(--action-button) !important;
}

    .bg-primary,
    .megamenu .product-image:hover + .product-name,
    .megamenu .product-name:hover,
    .single-qty-wrapper .product-single-qty .btn.btn-outline:hover.btn-down-icon::after,
    .single-qty-wrapper .product-single-qty .btn.btn-outline:hover.btn-up-icon::before,
    .single-qty-wrapper .product-single-qty .btn.btn-outline:hover.btn-up-icon::after,
    .single-qty-wrapper .product-single-qty .btn.btn-outline:focus.btn-down-icon::after,
    .single-qty-wrapper .product-single-qty .btn.btn-outline:focus.btn-up-icon::before,
    .single-qty-wrapper .product-single-qty .btn.btn-outline:focus.btn-up-icon::after,
    .card.card-warranty div.warranty-img,
    .form-control-checkbox input:checked ~ .checkbox {
        color: var(--action-button-text-hover) !important;
        background-color: var(--action-button-hover) !important;
    }

.menu > li:hover > a,
.menu > li.show > a,
.menu > li.active > a {
    background-color: var(--menu-bg-hover) !important;
	color: #ffffff !important;
	margin-top: 1px; 
}

.bg-primary-10 {
    background-color: var(--color-primary-op-10);
}

.bg-primary-25 {
    background-color: var(--color-primary-op-25);
}

.bg-primary-50 {
    background-color: var(--color-primary-op-50);
}

/* ------------------------------ */
/* background colors RGBA */
/* ------------------------------ */
.faq-question:hover {
    background-color: rgba(47, 111, 166, 0.15);
}

.faq-question.element-active {
    background-color: rgba(47, 111, 166, 0.1);
}

/* ------------------------------ */
/* specific controls */
/* ------------------------------ */

.image-bottom-border {
    border-bottom: 3px solid var(--color-primary);
}

.registration-progress-bar li.active::before, .registration-progress-bar li.active > span::before {
    background-color: var(--color-primary) !important;
}

/* ------------------------------ */
/* bootstrap overrides */
/* ------------------------------ */

.home-slide-content .btn {
    border-radius: 0;
    border: none;
}

.btn-primary {
    color: var(--action-button-text);
	border-color: var(--action-button-text);
    background-color: var(--action-button);
}

    .btn-primary:hover, .btn-primary:focus, .btn-primary.focus {
        color: var(--action-button-text-hover);
		border-color: var(--action-button-text);
        background-color: var(--action-button-hover);
    }

    .btn-primary.disabled, .btn-primary:disabled {
        background-color: var(--color-primary-op-50:);
		border-color: var(--action-button-text);
    }