:root {
    /*colors*/
    --main-color: #005596;
    --main-color-darken: #004686;
    --secondary-color: #e59911;
    --secondary-color-lighten: #ffb32c;
    --secondary-color-darken: #de910a;
    --tertiary-color-1: #f6f7f8;
    --tertiary-color-2: #ccc;
    --tertiary-color-3: #999;
    --tertiary-color-4: #333;
    --tertiary-color-5: #767676;
    --dark-text-color: #333;
    --light-text-color: #fff;
    --link-color: #005596;
    /* fonts */
    --main-font: 'Open Sans', sans-serif;
    --secondary-font: 'Corda-Medium', serif;
    --main-font-size: 1.6rem;
    --main-font-weight: 400;
    --main-line-height: 1.6;
    /* form elements */
    --element-border-radius: 5px;
    --element-border: 1px solid var(--tertiary-color-2);
    --element-width: 100%;
    --element-height: auto;
    --element-font-size: var(--main-font-size);
    --element-font-weight: 600;
    --element-padding: 1.3rem 0;
    --element-text-indent: 1.3rem;
    --element-text-align: left;
    --input-display: block;
    /* buttons */
    --btn-padding: 1.3rem 3rem;
    --btn-margin: 2rem 0;
    --btn-height: auto;
    --btn-width: 100%;
    --btn-text-transform: none;
    --btn-font-weight: 700;
    --btn-font-size: 2rem;
    --btn-background: var(--main-color);
    --btn-background-darken: var(--main-color-darken);
    --btn-border: 2px solid var(--btn-background);
    --btn-color: var(--light-text-color);
    --btn-letter-spacing: 0;
    --btn-text-align: center;
    --btn-display: block;
    --main-action-color: #ffb32c;
    --main-action-color-darker: #de910a;
    /* effects */
    --transition: all 0.3s ease;
    --box-shadow: 1px 4px 6px -2px rgba(0,0,0,.3);
    /* gradient */
    --radial-gradient-background: radial-gradient(ellipse at center,var(--main-color) 0%,var(--main-color-darker) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

/*#region Category Colors ******************************************************************************************************************************************************************************/

html.green {
    --main-color: #425C29;
    --main-color-darken: #3B5518;
}

html.red {
    --main-color: #771C23;
    --main-color-darken: #67141A;
}

html.brown {
    --main-color: #3E261D;
    --main-color-darken: #39190E;
}

html.clearanceRed {
    --main-color: #A90000;
    --main-color-darken: #920000;
}

html.orange {
    --main-color: #944402;
    --main-color-darken: #843700;
}

html.purple {
    --main-color: #5B374F;
    --main-color-darken: #4C2B41;
}

html.tan {
    --main-color: #917B66;
    --main-color-darken: #7F6148;
}

html.teal {
    --main-color: #1B7B7C;
    --main-color-darken: #136B6B;
}

html.BlueDanube{
    --main-color: #2e586f;
    --main-color-darken: #23475d;
}

/*#endregion*/

/*#region Buttons ******************************************************************************************************************************************************************************/

/* primary button */
.button-1,
.homePageBanner button,
.product-box-add-to-cart-button {
    --btn-background: var(--main-color);
    --btn-border: 2px solid var(--main-color);
    --btn-color: var(--light-text-color);
}

    .button-1:hover,
    .homePageBanner button:hover,
    .product-box-add-to-cart-button:hover {
        --btn-background: var(--main-color-darken);
        --btn-border: 2px solid var(--main-color-darken);
    }

/* secondary button */
.button-2,
input.button-2,
input[type='button'].reversed,
input[type='submit'].reversed,
.darkBackground a.button {
    --btn-background: var(--light-text-color);
    --btn-border: 2px solid var(--main-color);
    --btn-color: var(--main-color);
    --btn-font-size: 1.8rem;
    --btn-padding: 1.1rem 1.8rem;
}

    .button-2:hover,
    input.button-2:hover,
    input[type='button'].reversed:hover,
    input[type='submit'].reversed:hover {
        --btn-background: var(--main-color);
        --btn-color: var(--light-text-color);
        --btn-border: 2px solid var(--main-color);
    }

/* checkout button */
.button.checkout-button,
.button.confirm-order-next-step-button,
#confirm-order-buttons-container .confirm-order-next-step-button,
.totalsWrapper .totals .confirm-order-next-step-button,
.totalsWrapper .totals .checkout-button {
    --btn-background: var(--secondary-color);
    --btn-color: var(--light-text-color);
    --btn-border: 2px solid var(--secondary-color);
}
    .button.checkout-button:hover,
    .button.checkout-button:focus,
    .button.confirm-order-next-step-button:hover,
    .button.confirm-order-next-step-button:focus,
    #confirm-order-buttons-container .confirm-order-next-step-button:hover,
    #confirm-order-buttons-container .confirm-order-next-step-button:focus,
    .totalsWrapper .totals .confirm-order-next-step-button:hover,
    .totalsWrapper .totals .confirm-order-next-step-button:focus,
    .totalsWrapper .totals .checkout-button:hover,
    .totalsWrapper .totals .checkout-button:focus {
        --btn-background: var(--secondary-color-darken);
        --btn-color: var(--light-text-color);
        --btn-border: 2px solid var(--secondary-color-darken);
    }

/* small button */
input[type='button'].small, input[type='submit'].small, input[type='button'].button-2.small, a.button.small, button.small {
    --btn-padding: 0 3rem;
    --btn-height: 40px;
    --btn-width: auto;
    --btn-font-size: 1.4rem;
    --btn-font-weight: 600
}
/* disabled buttons */
input[type='button'][disabled], input[type='submit'][disabled] {
    --btn-background: var(--tertiary-color-2) !important;
    --btn-border: 2px solid var(--tertiary-color-2) !important;
}

/* product list buy button */
.product-item .buttons input[type='button'] {
    --btn-margin: 0;
    --btn-padding: 0;
    --btn-background: var(--main-action-color) url('/Themes/Cokesbury/Content/images/add_to_cart_icon.svg') 9px 9px no-repeat;
    --btn-border: 3px solid var(--light-text-color) !important;
    --element-border-radius: 50%;
    --btn-height: 46px;
    --btn-width: 46px;
    --btn-color: transparent;
    --btn-font-size: 0;
    z-index: 98;
    transition: all .3s ease;
    min-width: unset
}
    .product-item .buttons input[type='button']:focus,
    .product-item .buttons input[type='button']:active,
    .product-item .buttons input[type='button']:hover {
        --btn-background: var(--main-action-color-darker) url('/Themes/Cokesbury/Content/images/add_to_cart_icon.svg') 9px 9px no-repeat;
        -webkit-box-shadow: var(--box-shadow--box-shadow);
        -moz-box-shadow: var(--box-shadow--box-shadow);
        box-shadow: var(--box-shadow--box-shadow);
        transition: all .3s ease
    }

.product-item .buttons input.nopAjaxCartProductListAddToCartButton:disabled {
    --btn-background: var(--tertiary-color-2) !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important
}

/* category banner button */
.categoryBanner a.button {
    --btn-width: auto;
}
/*#endregion*/
/*#region form elements ******************************************************************************************************************************************************************************/
textarea:focus,
select:focus,
input[type='text']:focus,
input[type='search']:focus,
input[type='number']:focus,
input[type='email']:focus,
input[type='date']:focus,
input[type='tel']:focus,
input[type='password']:focus {
    --element-border: 1px solid var(--tertiary-color-3);
}
.CategoryFiltersWrapper select,
.k-dropdown.small,
.k-multiselect.small,
input.small,
textarea.small,
select.small,
input[type='text'].small,
input[type='tel'].small,
input[type='number'].small,
input[type='email'].small,
input[type='date'].small,
input[type='password'].small {
    --element-height: 40px;
    --element-font-size: 1.4rem;
    --element-padding: 0 6rem 0 1.5rem;
}

input.qty-input {
    --element-width: 60px;
    --element-text-align: center;
    --element-text-indent: 0;
}

/*#endregion*/



/*#region section ******************************************************************************************************************************************************************************/

/*#endregion*/