.btn {
    white-space : normal;}

/*
this is causing issues with some of the pages
perhaps, if needed, whatever element in the shopping cart
this code was targeting, a new class should be added so that
this css can apply to that and leave the other .card's untouched

.card {
    margin : 5% 0;}
*/

.card-img-top {
    width     : 100%;
    max-width : 250px;}


.word-break-cell {
    word-break:break-all;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance : none;
    -moz-appearance    : none;
    appearance         : none;
    margin             : 0;}

.account-type-button,
.response-button,
.payment-button {
  width            : 50%;
  border           : 1px solid black;
  background-color : #eaeaea;}

.account-type-button:hover,
.response-button:hover,
.payment-button:hover {
    background-color : #d6d4b1;
    color            : black;
    border           : 1px solid black;}
.payment-button.selected
{
    background: linear-gradient(155deg, rgb(39, 178, 188) 0%, rgb(4, 128, 212) 50%, rgb(54, 100, 148) 100%);
}


.account-type-button.selected,
.account-type-button.selected
{
    color: black;
}

.response-button.selected,
.payment-button.selected,
.description-dropdown {
    background-color : #1E2B41;
    color            : white;}

.dropdown-link:hover {
    text-decoration : none;}

.description-dropdown:hover {
    color : #d6d4b1;}

.make-purchase-parent{
    margin-bottom : 15px;}

.quantity-button {
    width       : 15%;
    max-width   : 80px;
    min-width   : 60px;
    text-align  : center;
    font-weight : 700;}

#cart-toggle {
    font-size : 3rem;}

.cart-row {
    margin : 10px;
    border-bottom: 1px solid #eee;
}

.cart-button {
    background-color : transparent !important;
    padding          : 0;}

.cart-button:focus {
    box-shadow : none;}

.cart-button > i {
    font-size : 2rem;}

.cart-button > i.fa-trash-alt {
    font-size : 1.4rem;}

#shopping-cart-contents {
    padding : 15px;
    border  : 2px solid black;}

#shopping-cart-contents-nav {
    padding : 15px;
    border  : 2px solid black;
    position  : absolute;
    top       : 100%;
    right      : 0;
    max-width : 700px;
    z-index: 9999999;}

#shopping-cart {
    position  : absolute;
    top       : 30%;
    left      : 0;
    max-width : 700px;}

#shopping-cart-icon-container {
    display                    : inline-block;
    position                   : relative;
    left                       : 0px;
    top                        : 25%;
    background-color           : #1E2B41;
    color                      : white;
    padding                    : 15px;
    border-bottom-right-radius : 20px;
    border-top-right-radius    : 20px;}

#shopping-cart-icon-container-nav {
    display                    : inline-block;
    position                   : relative;
    left                       : 0px;
    top                        : 25%;
    background-color           : #1E2B41;
    color                      : white;
    padding                    : 15px;
    border-bottom-right-radius : 20px;
    border-top-right-radius    : 20px;}

#shopping-cart-icon-container:hover {
    padding-left : 17px;}

#shopping-cart-icon-container-nav:hover {
    padding-left : 17px;}

#widget-span[data-count]:after {
    position      : absolute;
    right         : 9%;
    top           : 9%;
    content       : attr(data-count);
    font-size     : 0.75rem;
    padding       : 0.6em;
    border-radius : 999px;
    line-height   : 0.75em;
    color         : white;
    background    : rgba(255,0,0,.85);
    text-align    : center;
    min-width     : 2em;
    font-weight   : bold;}

.delete-item {
    font-size : 1.5rem;}

.delete-item:hover,
.delete-item:active {
    color : red;}

.increment-clicked {
    color : green;}

.decrement-clicked {
    color : red;}

.increment-button:hover {
    color : green;}

.decrement-button:hover {
    color : red;}

/*
this is now getting loaded on other pages, and it's wrecking the css.  maybe modify
the css so it doesn't target literally every page
img:not(.logo) {
    width: 100%;}
*/

.cart-row figure img {
    max-width: 100%;
}


.invoice-table {
    width     : 50%;
    max-width : 500px;
    border    : 2px solid black;}

.invoice-table td,
.invoice-table th {
    border : 2px solid black;}

.product-wrap {
    max-width: 800px;
    margin-left: auto ! important;
    margin-right: auto ! important;}

form[data-form="state-select"] {
    max-width:600px;
    margin-left: auto ! important;
    margin-right: auto ! important;
}

@media (max-width: 850px)
{
  .invoice-table {
    width : 80%;}
}

@media (max-width: 991.6px)
{
    #cart-toggle {
        font-size : 2rem;}

    #shopping-cart {
        top:20%;}
}

@media print
{
    footer {
        display: none !important;
    }
}

[data-card="product"] > figure > img {
    max-width:350px;
}