/******** piper.css
    Version 1
    by Jay Davis, 2016
    (c) Phase 3 Media and Communications
    for Sandpiper Client Sites
   
    - Site-wide css goes in this file
    - Css specific to a page goes in that page
********/

/* Reference colors */
:root {
    --body-text: #808285; /* dark gray */
    --main-header-bg: #B3282D; /* P3 dark red */
    --main-header-text: white;
    --main-nav-bg: #e6e7e8; /* light gray */
    --main-nav-text: #808285; /* dark gray */
    --main-nav-bg-hover: #808285; /* dark gray */
    --main-nav-bg-active: #4C4C4C; /* darker gray */
    --main-nav-complement: #222; /* should be visible on main-nav-bg, main-nav-bg-hover, main-nav-bg-active */
    --primary-button-bg: #008d76; /* proMach green */
    --primary-button-text: white;
    --primary-button-bg-dark: #006a51; /* dark orange-maroon */
    --alt-bg: #ebebeb; /* silver */
    --alt-bg-dark: #dbdbdb; /* dark silver */
    --secondary-button-text: #b3282d; /* orange-red */
    --link-text: #001f5f; /* ProMach Blue */
    --link-text-hover: #b3282d; /* orange-maroon */
    --input-bg: #eee; /* light gray */
    --emphasis: #B3282D; /* P3 dark red */
    --headline-text: #808285; /* dark gray */
    --headline-text-lite: #bcbec0; /* medium silver */
    --dark-text: #6d6e71; /* medium darker gray */
    --darker-text: #58595b; /* darker gray */
    --darkest-text: black;
    --col-header-text: #ff4338; /* bright red */
    --primary: #B3282D; /* P3 dark red */
    --secondary: #b5bac4; /* gray */
    --modal-bg: #B3282D; /* P3 dark red */
    --modal-title: #FFFFFF; /* white */
    --modal-text: #FFFFFF; /* white */
    --modal-link: #FFFFFF; /* white */
    --modal-btn-border: #FFFFFF; /* white */
    --search-bar-bg: #FFFFFF; /* white */
    --footer-bg: #bbb; /* medium gray */
    --footer-text: #444; /* dark gray */
    --error-color: #cc0000; /* bright maroon */
    --table-amt-bg: #f1f2f2; /* very light gray */
    --btn-tab-border: #ccc; /* medium gray */
}

/* other variables */
:root {
    --header-height: 110px;
    --nav-width-lg: 85px;
    --nav-width-md: 60px;
    --default-margin-left: 15px;
    --default-margin-right: 15px;
}
/* end variables */ 
/* do not remove above line */

/******** font, base css settings ********/
/* Font-faces Generated by Font Squirrel (https://www.fontsquirrel.com) on September 22, 2016 */
@font-face {
    font-family: 'proxima_nova_regular';
    src: url('../fonts/proximanova-regular-webfont.woff2') format('woff2'),
         url('../fonts/proximanova-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'proxima_nova_semibold';
    src: url('../fonts/proximanova-semibold-webfont.woff2') format('woff2'),
         url('../fonts/proximanova-semibold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* fontello icon set, icons generated by Matt Worsham */
@font-face {
    font-family: 'sandpiperico';
    src: url('../fonts/sandpiperico.woff2?v=0.96') format('woff2'),
         url('../fonts/sandpiperico.woff?v=0.96') format('woff');
    font-weight: normal;
    font-style: normal;
}
.sp-icon {
    font-family: 'sandpiperico';
    font-style: normal;
    font-weight: normal;
    speak: none;

    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */

    /* For safety - reset parent styles, that can break glyph codes*/
    font-variant: normal;
    text-transform: none;

    /* fix buttons height, for twitter bootstrap */
    line-height: 1em;

    /* Animation center compensation - margins should be symmetric */
    /* remove if not needed */
    margin-left: .2em;

    /* You can be more comfortable with increased icons size */
    /* font-size: 120%; */

    /* Font smoothing. That was taken from TWBS */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Uncomment for 3D effect */
    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-label:before { content: '\41'; } /* 'A' */
.icon-edit:before { content: '\42'; } /* 'B' */
.icon-trash:before { content: '\43'; } /* 'C' */
.icon-duplicate:before { content: '\44'; } /* 'D' */
.icon-search:before { content: '\45'; } /* 'E' */
.icon-downsm:before { content: '\46'; } /* 'F' */
.icon-rightsm:before { content: '\47'; } /* 'G' */
.icon-leftsm:before { content: '\48'; } /* 'H' */
.icon-creditcard:before { content: '\49'; } /* 'I' */
.icon-upsm:before { content: '\4a'; } /* 'J' */
.icon-upload:before { content: '\4b'; } /* 'K' */
.icon-leftalt:before { content: '\4c'; } /* 'L' */
.icon-rightalt:before { content: '\4d'; } /* 'M' */
.icon-tiered:before { content: '\4e'; } /* 'N' */
.icon-report:before { content: '\4f'; } /* 'O' */
.icon-question:before { content: '\50'; } /* 'P' */
.icon-reports:before { content: '\51'; } /* 'Q' */
.icon-account:before { content: '\61'; } /* 'a' */
.icon-categories:before { content: '\62'; } /* 'b' */
.icon-contact:before { content: '\63'; } /* 'c' */
.icon-faq:before { content: '\64'; } /* 'd' */
.icon-home:before { content: '\65'; } /* 'e' */
.icon-kits:before { content: '\66'; } /* 'f' */
.icon-links:before { content: '\67'; } /* 'g' */
.icon-logout:before { content: '\68'; } /* 'h' */
.icon-download:before { content: '\69'; } /* 'i' */
.icon-close:before { content: '\6a'; } /* 'j' */
.icon-favorite:before { content: '\6b'; } /* 'k' */
.icon-approved:before { content: '\6c'; } /* 'l' */
.icon-down:before { content: '\6d'; } /* 'm' */
.icon-left:before { content: '\6e'; } /* 'n' */
.icon-minus:before { content: '\6f'; } /* 'o' */
.icon-plus:before { content: '\70'; } /* 'p' */
.icon-right:before { content: '\71'; } /* 'q' */
.icon-up:before { content: '\74'; } /* 't' */
.icon-cart:before { content: '\75'; } /* 'u' */
.icon-warning:before { content: '\76'; } /* 'v' */
.icon-products:before { content: '\77'; } /* 'w' */
.icon-alert:before { content: '\78'; } /* 'x' */
.icon-warningalt:before { content: '\79'; } /* 'y' */
.icon-gear:before { content: '\7a'; } /* 'z' */

.lg-icon {
    font-size: 30px;
    vertical-align: bottom;
}
.md-icon {
    font-size: 22px;
}

html {
    height: 100%;
}
body {
/* 
    max-width: 1600px;
 */
    margin-left: auto;
    margin-right: auto;
	font-family: 'proxima_nova_regular';
	color: var(--body-text);
    min-height: 100%;
    position: relative;
}
b, strong {
    font-family: 'proxima_nova_semibold';
    color: var(--darker-text);
}
.container-fluid {
    padding-left: var(--nav-width-lg);
    padding-right: 0;
}
a {
    color: var(--link-text);
}
a:focus, a:hover, a:active {
    color: var(--link-text-hover);
    text-decoration: none;
}
.container-fluid {
    height: 100%;
}
h1, h2, h3 {
    color: var(--headline-text);
    text-transform: uppercase;
}
h4, h5, h6 {
    color: var(--headline-text-lite);
    text-transform: uppercase;
}
td {
    vertical-align: top;
}
/******** end font, base css settings ********/

/******** header, nav and footer ********/
.header-img {
    float: left;
    margin-top:30px;
    margin-left:40px;
    position: absolute;
    z-index: 1003;
}
.header-img a {
    display: block;
}
#cart-search-container {
    position: absolute;
    bottom: 10%;
    right: 1%;
    width: 100%;

}

/*SEARCH-BAR*/
.search-bar{
    float: right;
    margin: 0;
    padding: 0;
    width:45%;
    max-width: 500px;
    top: 52%;
    right:1%;
    margin-right: 10px;
}
.searchbox{
    position:relative;
    min-width:42px;
    width:0%;
    height:42px;
    float:right;
    overflow:hidden;
    
    -webkit-transition: width 0.3s;
    -moz-transition: width 0.3s;
    -ms-transition: width 0.3s;
    -o-transition: width 0.3s;
    transition: width 0.3s;
}

.searchbox-input{
    top: 0;
    right: 0;
    border: 0;
    outline: 0;
    background-color: var(--search-bar-bg);
    width: 100%;
    height: 42px;
    margin: 0;
    padding: 6px 12px;
    font-size: 18px;
    color: var(--main-nav-text);
}
.searchbox-input::-webkit-input-placeholder {
    color: var(--main-nav-text);
}
.searchbox-input:-moz-placeholder {
    color: var(--main-nav-text);
}
.searchbox-input::-moz-placeholder {
    color: var(--main-nav-text);
}
.searchbox-input:-ms-input-placeholder {
    color: var(--main-nav-text);
}

.searchbox-icon,
.searchbox-submit{
    width: 42px;
    height: 42px;
    display: block;
    position: absolute;
    top: 0;
    font-family: verdana;
    font-size: 20px;
    right: 0;
    padding: 0;
    margin: 0;
    border: 0;
    outline: 0;
    line-height: 36px;
    text-align: center;
    cursor: pointer;
    color: var(--main-header-text);
    background-color: var(--main-header-bg);
    border: 1px solid var(--main-header-text);
}
.searchbox-icon:hover {
    color: var(--main-nav-text);
    background-color: var(--main-nav-bg);
    border: 1px solid var(--main-nav-bg);
}
.searchbox-iconActive {
    color: var(--main-nav-text);
    background-color: var(--main-nav-bg);
    border: 1px solid var(--main-nav-bg);
}

.searchbox-open{
    width: 100%;
}
@media (max-width: 767px) {
    .header-img {
        padding-left: 0;
    }
    .search-bar {
        position: absolute;
        top: -47px;
        transform: none;
        left: auto;
        right: 40px;
    }
    .searchbox{
    min-width: 34px;
    height: 34px;
    }
    .searchbox-input{
    height: 34px;
    font-size: 14px;
    }
    .searchbox-icon,
    .searchbox-submit{
    width: 34px;
    height: 34px;
    font-size: 18px;
    line-height: 28px;
    }
}
/*END OF SEARCH-BAR*/
#main-content {
    min-height: 100vh;
    padding: calc(var(--header-height) + 10px) var(--default-margin-left) 0 var(--default-margin-right);
}
@media (max-width: 767px) {
    #main-content {
        padding: var(--header-height) var(--default-margin-left) 0 var(--default-margin-right);
    }
}
#header {
    background-color: var(--main-header-bg);
    position: absolute;
    width: 100%;
    height: var(--header-height);
    color: var(--main-nav-text);
    z-index: 1002;
}
#main-nav {
    background-color: var(--main-nav-bg);
    text-align: center;
    padding-right: 0;
    padding-left: 0;
    min-height: 100%;
    z-index: 1001;
}
#main-nav a {
    color: var(--main-nav-text);
    /* text-transform: uppercase; */
    width: 100%;
    padding: 7px 0;
}
@media (max-width:991px) {
    #main-nav {
        width: var(--nav-width-md);
    }
    .container-fluid {
        padding-left: var(--nav-width-md);
    }
}
@media (max-width:767px) {
    #main-nav {
        padding-bottom: 0;
        text-align: left;
        min-height: auto;
        width: 100%;
    }
    #main-nav a {
        padding-left: var(--default-margin-left);
    }
    #main-nav .nav-item-icon .sp-icon {
        font-size: 23px;
    }
}
.nav-icon {
    vertical-align: middle;
}
.sp-form-dropdown {
    z-index: 1100;
}
#main-nav .dropdown-menu {
    min-width: 200px;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 0;
    top: 0;
    left: 100%;
    background-color: var(--main-nav-bg-hover);
    transition: transform 1s ease-in-out;
}
.dropdown-menu.limit-scroll {
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}
/* dropdown-menu height relies on cart menu in nav becoming visible as page scrolls down */
/* Note: calc(-px) compensates for 1px border in left menu items */
#main-nav .nav-item:nth-child(2) .dropdown-menu {
    top: 0;
}
#main-nav .nav-item:nth-child(3) .dropdown-menu {
    top: calc(-100% - 1px);
}
#main-nav .nav-item:nth-child(4) .dropdown-menu {
    top: calc(-200% - 2px);
}
#main-nav .nav-item:nth-child(5) .dropdown-menu {
    top: calc(-300% - 3px);
}
#main-nav .nav-item:nth-child(6) .dropdown-menu {
    top: calc(-400% - 4px);
}
#main-nav .nav-item:nth-child(7) .dropdown-menu {
    top: calc(-500% - 5px);
}
#main-nav .nav-item:nth-child(8) .dropdown-menu {
    top: calc(-600% - 6px);
}
#main-nav .nav-item:nth-child(2) .dropdown-menu.scrolled-down {
    top: calc(-100% - 1px);
}
#main-nav .nav-item:nth-child(3) .dropdown-menu.scrolled-down{
    top: calc(-200% - 2px);
}
#main-nav .nav-item:nth-child(4) .dropdown-menu.scrolled-down{
    top: calc(-300% - 3px);
}
#main-nav .nav-item:nth-child(5) .dropdown-menu.scrolled-down{
    top: calc(-400% - 4px);
}
#main-nav .nav-item:nth-child(6) .dropdown-menu.scrolled-down{
    top: calc(-500% - 5px);
}
#main-nav .nav-item:nth-child(7) .dropdown-menu.scrolled-down{
    top: calc(-600% - 6px);
}
#main-nav .nav-item:nth-child(8) .dropdown-menu.scrolled-down{
    top: calc(-700% - 7px);
}
#main-nav .nav-item .dropdown-menu .dropdown-menu {
    top: 0;
}
#main-nav .dropdown-menu li {
    position: relative;
}
#main-nav .dropdown-menu {
    height: calc(100vh - var(--header-height));
    max-height: calc(100vh - var(--header-height));
    overflow-x: hidden;
}
#main-nav .dropdown-menu.scrolled-down {
    height: 100vh;
    max-height: 100vh;
}
#main-nav .nav-item {
    margin-top: 0;
}
#main-nav .nav-item ul {
    padding-left: 0;
}
#main-nav .nav-item ul li {
    list-style: none;
}
#main-nav .nav-item-icon, #main-nav .nav-item-text {
    margin: 0;
    padding-left: 5px;
    padding-right: 5px;
    font-size: 12px;
    line-height: 1;
}
#main-nav .nav-item-icon {
    font-size: 30px;
}
#main-nav .dropdown-item {
    display: block;
    color: var(--main-nav-bg);
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    margin-left: var(--default-margin-left);
    margin-right: 0;
}
/* .dropdown-item-sub only applies to menu_generator.php created menus */
/* 1st level menu */
#main-nav ul.dropdown-menu li a, #main-nav ul.dropdown-menu li a:focus, #main-nav ul.dropdown-menu li a:hover {
    padding-left: var(--default-margin-left);
    margin-left: 0;
    text-decoration: none;
}
#main-nav ul.dropdown-menu li a.generated-menu {
    padding-left: 15%;
}
#main-nav ul.dropdown-menu li a.expand-btn:focus, #main-nav ul.dropdown-menu li a.expand-btn:hover {
    padding-left: 2%;
}
/* 2nd level menu */
#main-nav ul.dropdown-menu ul.dropdown-item-sub li a {
    padding-left: calc(var(--default-margin-left) * 2);
}
#main-nav ul.dropdown-menu ul.dropdown-item-sub li a.generated-menu {
    padding-left: 22.5%;
}
#main-nav ul.dropdown-menu ul.dropdown-item-sub li a.expand-btn {
    padding-left: 0;
}
/* 3rd level menu */
#main-nav ul.dropdown-menu ul.dropdown-item-sub ul.dropdown-item-sub li a {
    padding-left: calc(var(--default-margin-left) * 3);
    font-size: 12.5px;
}
#main-nav ul.dropdown-menu ul.dropdown-item-sub ul.dropdown-item-sub li a.generated-menu {
    padding-left: 30%;
}
#main-nav ul.dropdown-menu ul.dropdown-item-sub ul.dropdown-item-sub li.expand-btn a {
    padding-left: 0;
}
/* 4th level menu not supported (could be added!) */

/* focus, active, hover */
#main-nav li a:focus, #main-nav li a:hover, #main-nav .open > a {
    color: var(--main-nav-bg);
    background-color: var(--main-nav-bg-hover);
}
#main-nav .active > a, #main-nav .dropdown-item.expand-btn.active, #main-nav .active > a:hover {
    background-color: var(--main-nav-bg-active);
    color: var(--main-nav-bg);
}
#main-nav .dropdown-item:focus, #main-nav .dropdown-item:hover {
    background-color: var(--main-nav-bg);
    color: var(--main-nav-text);
}
#main-nav .dropdown-item.active:focus, #main-nav .dropdown-item.active:hover {
    color: var(--main-nav-bg);
}
#main-nav .dropdown-item.expand-btn:focus, #main-nav .dropdown-item.expand-btn:hover {
    background-color: inherit;
    color: inherit;
}
#main-nav .dropdown-item.active {
    background-color: var(--main-nav-bg-active);
}

#main-nav .dropdown-item.expand-btn {
    position: absolute;
    left: 0;
    top: 0;
    padding-left: 2%;
    padding-right: 2%;
    text-align: center;
    width: 15%;
    color: var(--main-nav-complement);
}
#header .cart-icon {
    vertical-align: middle;
    margin: 0 10px;
}
#footer {
    background-color: var(--main-nav-bg);
    height: 40px;
    color: var(--main-nav-text);
}
.navbar-header {
    float: right;
}
.navbar-toggle {
    margin-right: 0;
}
.navbar-toggle .icon-bar {
    background-color: var(--main-header-text);
}
.nav-pos-fixed {
    width: var(--nav-width-lg);
    position: fixed;
    left: 0;
    top: 0;
/* 
    transition: all 0.5s ease-out;
 */
}
.nav-pos-fixed-makeAbsolute {
    position: absolute;
}
.nav-pos-fixed.padded-top {
    padding-top: var(--header-height);
}
.footer {
    position: absolute;
    left:0;
    right:0;
    bottom:-100px;
    z-index: 1002;
    background-color: var(--footer-bg);
    height: 100px;
    color: var(--footer-text);
}
.footer img {
    margin-bottom: 5px;
}
.footer-content {
    margin:15px 15px -5px 0;
    text-align: right;
}
@media (max-width:767px) {
    #main-nav .dropdown-menu {
        top: 100%;
        left: 0;
        width: 100%;
        height: auto;
    }
    .container-fluid {
        padding-left: inherit;
    }
    #main-nav #dropdown-menu-2, #main-nav #dropdown-menu-3 {
        top: 100%;
    }
    #footer-row-main {
        display: none;
    }
}

/******** end header, nav and footer ********/

/******** generic for use on all pages ********/
.piper-page-header {
    text-align: center;
    padding-bottom: 10px;
}
.piper-page-header-category {
    text-align: left;
    padding-left: 1%;
	font-size: 28px;
}
.emphasis-color, .fave, .modal-body p.emphasis-color {
    color: var(--emphasis);
}
.error-msg {
    color: var(--error-color);
}
.main-header-bg-color {
    background-color: var(--main-header-bg);
}
.darker {
    color: var(--darker-text);
}
.darkest {
    color: var(--darkest-text);
}
.alt-bg {
    background-color: var(--alt-bg);
}
.m-r-0-lg {
    margin-right: 0;
}
.m-t-15-lg {
    margin-top: 0;
}
.m-r-15 {
    margin-right: var(--default-margin-right);
}
.m-b-10 {
    margin-bottom: 10px;
}
@media (max-width:991px) {
    .m-r-0-lg {
        margin-right: var(--default-margin-right);
    }
    .m-t-15-lg {
        margin-top: 15px;
    }
    .m-r-15 {
        margin-right: 0;
    }
}
.btn-primary {
    color: var(--primary-button-text);
    background-color: var(--primary-button-bg);
    border-radius: 0;
    text-transform: uppercase;
    min-width: 155px;
    border-color: var(--primary-button-bg);
}
table.qty-amt-btn-widget {
    width: 100%;
    max-width: 300px;
    text-align: center;
}
table.qty-amt-btn-widget td {
    padding: 6px 12px;
}
table.qty-amt-btn-widget td.qty {
    width: 15%;
    background-color: var(--main-nav-bg);
}
table.qty-amt-btn-widget td.amt {
    width: 35%;
    background-color: var(--table-amt-bg);
    color: black;
    font-weight: bold;
}
td.td-btn-primary {
    cursor: pointer;
    background-color: var(--primary-button-bg);
    color: white;
    text-transform: uppercase;
}
td.td-btn-primary a {
    color: white;
    text-decoration: none;
}
td.td-btn-primary.disabled {
    cursor: not-allowed;
    filter: alpha(opacity=65); /* For IE8 and earlier */
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}
.btn-primary:focus, .btn-primary:hover, .btn-primary:active, .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary.focus:active, .btn-primary:active:focus, .btn-primary:active:hover, td.td-btn-primary:focus, td.td-btn-primary:active, td.td-btn-primary:hover, td.td-btn-primary:active:focus, td.td-btn-primary:active:hover {
    background-color: var(--primary-button-bg-dark);
    border-color: var(--primary-button-bg-dark);
}
.btn-primary-reversed {
    color: var(--primary-button-bg);
    background-color: var(--primary-button-text);
    border-radius: 0;
    text-transform: uppercase;
    min-width: 155px;
    margin-top: 10px;
}
.btn-primary-reversed:focus, .btn-primary-reversed:hover, .btn-primary-reversed:active, .btn-primary-reversed.active.focus, .btn-primary-reversed.active:focus, .btn-primary-reversed.active:hover, .btn-primary-reversed.focus:active, .btn-primary-reversed:active:focus, .btn-primary-reversed:active:hover {
    background-color: var(--main-nav-bg-hover);
}

.btn-secondary {
    color: var(--secondary-button-text);
    background-color: var(--alt-bg);
    border: 1px solid var(--secondary-button-text);
    border-radius: 0;
    text-transform: uppercase;
    padding: 3px 12px;
}
.btn-secondary:focus, .btn-secondary:hover, .btn-secondary:active, .btn-secondary.active.focus, .btn-secondary.active:focus, .btn-secondary.active:hover, .btn-secondary.focus:active, .btn-secondary:active:focus, .btn-secondary:active:hover {
    color: var(--secondary-button-text);
    background-color: var(--alt-bg-dark);
}
.btn-tab {
    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
    background-color: white;
    border-color: var(--btn-tab-border);
}
.btn-tab.active, .btn-tab:active {
    color: var(--secondary-button-text);
    background-color: var(--alt-bg-dark);
    box-shadow: none;
}
.btn-xl {
    font-size: 40px;
    color: var(--col-header-text);
    background-color: transparent;
}
.btn-xl:hover {
    color: var(--col-header-text);
}
.table > tbody > tr > td, .table > tbody > tr > th {
    border: 0;
}
.col-header, .sp-table tbody tr th {
    color: var(--col-header-text);
    text-transform: uppercase;
    font-weight: normal;
    padding-bottom: 0;
}
.alert-pad {
    padding: 0 15px;
}
.outer-pad {
    padding: 0 9%;
}
.outer-pad .row .row {
    margin-right: 0;
    margin-left: 0;
}
@media (max-width: 767px) {
    .outer-pad {
        padding: 0;
    }
}
.cart-button {
    float: right;
    padding: 5px 10px;
    border: 1px solid var(--main-header-text);
    border-radius: 0;
    background-color: var(--main-header-bg);
}
@media (max-width: 767px) {
    .cart-button {
        right: var(--default-margin-right);
    }
    .container-fluid > .navbar-collapse, .container-fluid > .navbar-header, .container > .navbar-collapse, .container > .navbar-header {
        margin-right: -7px;
    }
}
a .cart-button {
    color: var(--main-header-text);
}
.cart-button td {
    vertical-align: middle;
}
.cart-button:focus, .cart-button:hover {
    background-color: var(--main-nav-bg);
    color: var(--main-nav-bg-hover);
}
/* modal popup */
.modal {
    top: 50%;
    transform: translateY(-50%);
}
.modal-dialog {
    max-width: 550px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
.modal-content {
    padding: 0 1%;
    text-align: center;
	background-color: var(--modal-bg);
}
.modal-title {
	color: var(--modal-title);
}
.modal-body p {
	color: var(--modal-text);
}
.modal-body a {
	color: var(--modal-link);
}
.modal-header #close-x {
	color: var(--modal-title);
}
.modal-footer #modal-ok {
	border: 1px solid var(--modal-btn-border);
	background-color: var(--modal-bg);
}
.modal-footer #modal-ok:hover {
	background-color: var(--alt-bg);
	color: var(--darker-text);
}
.btn-xl {
    white-space: normal;
    max-width: 250px;
    font-size: 27px;
    padding: 20px 12px;
}
.modal-footer .btn-primary {
    min-width: 100px;
}
.no-padding {
   padding: 0;
}
.padR-except-sm {
    padding-right: 15px;
}
@media (max-width: 923px) {
/* note: Exact breakpoint in testing was 914px, based on when the buttons wrapped */
    .btn-xl {
        margin-left: auto;
        margin-right: auto;
    }
    .small-go-block {
        display: block;
    }
    .modal-open .modal {
        overflow: visible;
    }
}
@media (max-width: 768px) {
    .modal-dialog {
        width: 90%;
    }
    .padR-except-sm {
        padding: 0;
    }
}
/* end modal popup */
/******** end generic for use on all pages ********/

/******** forms ********/
.form-control {
    border-radius: 0;
    background-color: var(--input-bg);
}
.form-control:focus {
    border-color: var(--col-header-text);
}
.control-label {
    color: var(--dark-text);
    text-align: left;
}
::-webkit-input-placeholder {
   text-transform: uppercase;
}
:-moz-placeholder { /* Firefox 18- */
   text-transform: uppercase;  
}
::-moz-placeholder {  /* Firefox 19+ */
   text-transform: uppercase;  
}
:-ms-input-placeholder {  
   text-transform: uppercase;  
}
.sp-input-error {
    border: 1px solid red;
    background-color: wheat;
}
/******** end forms ********/

/******** for specific pages ********/
/* try to include only css variables here, otherwise put in the page! */
.home-welcome-text {
    color: var(--body-text);
}
/* 
#product-detail {
    width: calc(35% - (var(--nav-width-lg) * 0.35));
    padding-top: calc(var(--header-height) + 40px);
}
@media (max-width: 991px) {
    #product-detail {
        width: calc(35% - (var(--nav-width-md) * 0.35));
    }
}
 */
.modifiable-field {
    background-color: var(--main-nav-bg);
}
/******** end for specific pages ********/