@import '../vendor/fonts/Cormorant-v21/Cormorant.css';
@import '../vendor/fonts/NotoSans/NotoSans.css';
@import 'toggleable-list.css';
@import 'modals.css';
@import 'diff.css';
@import 'shared.css';

:root {
    --error-text-color: #a80000;
}

.mobile-only {
    display: none;
}

@media screen and (max-width: 480px) {
    .hide-on-mobile,
    .w3-bar .w3-bar-item.hide-on-mobile {
        display: none;
    }
    .mobile-only,
    .no-hide-logo-banner .logo-banner {
        display: block;
    }
}

/* These have different breakpoints than .hide-on-mobile and .mobile-only.
 * .hideOnMobileInline is also shown as display: inline; while .hide-on-mobile
 * is shown as display: block; */
.hideOnMobileInline {
    display: none;
}

/******************************************************************************/
/* Resets
/******************************************************************************/

a:link,
a:visited {
    color: #003333;
    text-decoration: underline;
}

html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow-x: auto !important;
}
*,
*:before,
*:after {
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
    box-sizing: inherit;
}

html,
body {
    background-color: #fffcf4; /* match page-layout */
    font-family: 'Noto Sans', Verdana, Arial, sans-serif;
    font-size: 13pt;
    line-height: 1.6;
    font-feature-settings: 'salt';
}

img {
    max-width: 100%;
}

table {
    font-size: inherit;
}

table.white-bg {
    background-color: #ffcc66;
    border-width: 1px;
    border-style: outset;
    text-align: center;
}
table.white-bg td {
    background-color: white;
    border-width: 1px;
    border-style: inset;
}

table.pad10 td {
    padding: 10px;
}

/*!
 * Tweaked version of Bootstrap tables
 * Copyright 2011-2018 The Bootstrap Authors
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1rem;
    background-color: transparent;
    border-collapse: collapse;
    background-color: white;
}
.table > * > td,
.table > * > * > td,
.table > * > th,
.table > * > * > th {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid burlywood;
}
.table > thead > th {
    vertical-align: bottom;
    border-bottom: 2px solid burlywood;
}
.table-sm td,
.table-sm th {
    padding: 0.3rem;
}
.table-bordered {
    border: 1px solid burlywood;
}
.table-bordered > * > td,
.table-bordered > * > * > td,
.table-bordered > * > th,
.table-bordered > * > * > th,
.table-innerborder > * > td,
.table-innerborder > * > * > td,
.table-innerborder > * > th,
.table-innerborder > * > * > th {
    border: 1px solid burlywood;
}
.table-innerborder > *:last-child > td,
.table-innerborder > tbody > *:last-child > td,
.table-innerborder > *:last-child > th,
.table-innerborder > tbody > *:last-child > th {
    border-bottom: 0;
}
.table-innerborder > *:first-child > td,
.table-innerborder > thead > *:first-child > td,
.table-innerborder > *:first-child > th,
.table-innerborder > thead > *:first-child > th {
    border-top: 0;
}
.table-innerborder > *:first-child > td,
.table-innerborder > * > * > td:first-child,
.table-innerborder > *:first-child > th,
.table-innerborder > * > * > th:first-child {
    border-left: 0;
}
.table-innerborder > *:last-child > td,
.table-innerborder > * > * > td:last-child,
.table-innerborder > *:last-child > th,
.table-innerborder > * > * > th:last-child {
    border-right: 0;
}
.table-bordered thead td,
.table-bordered thead th {
    border-bottom-width: 2px;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}
.table > * > th,
.table > * > * > th {
    background-color: #fffcf4;
    border-color: burlywood;
}
/*! End of Bootstrap-ish tables */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Cormorant', serif;
    font-feature-settings: unset;
}

h1 {
    font-size: 2.75rem;
    line-height: 1;
}

h2 {
    font-size: 2.25rem;
    line-height: 1;
}

h3 {
    font-size: 1.75rem;
    line-height: 1;
}

h4 {
    font-size: 1.25rem;
    line-height: 1;
}

.announcement-header {
    text-align: center;
    font-family: 'Cormorant', serif;
    font-size: 2rem;
    font-weight: bold;
    display: block;
    padding: 0 0 0.5rem 0;
    font-feature-settings: unset;
}

/*#009688!*/
.fedco-green,
.w3-hover-fedco-green:hover {
    color: #fff !important;
    background-color: #146d16 !important;
}

.fedco-pale-green {
    background-color: #d1e4d4;
}

.text-dark-gray {
    color: #333;
}

@media print {
    .print-text-dark-gray {
        color: #333;
        /* By default, gray text becomes black when printed. This requests the
         * browser to retain the color (requires Firefox 97 or later). */
        print-color-adjust: exact;
    }
}

#innercontent a {
    color: #004800;
    font-weight: 600;
}

/******************************************************************************/
/* Utilities
/******************************************************************************/

.d-none,
.fa.d-none {
    display: none;
}
div.inline,
.dib,
.d-inline-block {
    display: inline-block;
}
/* .d-block: compatible with Bootstrap; remove if Bootstrap is later used
 * instead */
.d-block,
.w3-btn.d-block,
.w3-btn.block,
.w3-modal.d-block {
    display: block;
}
.d-flex,
.w3-bar .w3-bar-item.d-flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.flexible-space {
    margin-left: auto;
    max-width: 0;
}

button.unstyled-button {
    background: none;
    border: none;
    padding: 0;
}

.centered,
div.AuthorizeNetSeal.centered {
    margin-left: auto;
    margin-right: auto;
}

.w-100,
.w3-bar .w3-bar-item.w-100 {
    width: 100%;
}

.text-wrap,
.w3-btn.text-wrap {
    white-space: unset;
}
.no-text-wrap {
    white-space: nowrap;
}
.no-paragraph-margins {
    margin: 0;
}
.no-paragraph-margin-top {
    margin-top: 0;
}
.paragraph-margin-small {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.smaller,
.text-smaller {
    font-size: smaller;
}
.text-larger {
    font-size: larger;
}
.font-weight-bold {
    font-weight: bold;
}
.font-weight-normal,
.abbreviations.font-weight-normal {
    font-weight: normal;
}
.monospace {
    font-family: monospace;
}
.strike {
    text-decoration: line-through;
}
.text-decoration-none,
a.text-decoration-none {
    text-decoration: none;
}

.btn-link {
    background-color: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

/* HACK: Work around the address validation "Use address as entered" link being
 * white on some iOS versions (GitLab issue #1570 — it looks okay on iOS 13.4,
 * but not on iOS 16.5). */
button.btn-link {
    color: inherit;
}

.p5 {
    padding: 5px;
}
.pl5 {
    padding-left: 5px;
}
.pr5 {
    padding-right: 5px;
}

.c-dark-blue,
a.c-dark-blue {
    color: darkblue;
}
.c-teal {
    color: #009688;
}
.c-red {
    color: red;
}

.b {
    border-style: solid;
}
.b1 {
    border-width: 1px;
}
.b0 {
    border-width: 0px;
}
.bb1 {
    border-bottom-width: 1px;
}

.b\:rad5 {
    border-radius: 5px;
}
.b\:rad10 {
    border-radius: 10px;
}
.b\:rad20 {
    border-radius: 20px;
}

.b\:orange {
    border-color: orangered;
}

ul.no-bullet,
ul.header-dash {
    list-style-type: none;
}
ul.header-dash li:before {
    content: '- ';
}
ul.header-dash {
    padding-left: 0;
}
ul.ul-no-padding {
    padding: 0;
}

.text-centered {
    text-align: center;
}

@media print {
    .print-hidden {
        display: none;
    }
}

@media print {
    .print-footer {
        position: fixed;
        bottom: 0;
    }
}

/******************************************************************************/
/* Layout
/******************************************************************************/

.page-layout {
    background-color: #fffcf4;
    border: 0;
    padding: 0;
    border-collapse: collapse;
    margin-left: auto;
    margin-right: auto;
}

#main-body:not(.main-body-in-branch) {
    margin-top: 0;
}

#main-body.main-body-in-branch {
}

.logo-banner {
    height: 120px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#page-header {
    height: 120px;
}

#page-header img {
    height: 118px;
    float: left;
}

#header-cart,
#header-ordering-unavailable {
    background-color: #fffcf4;
}

#header-cart {
    z-index: 16;
}

#header-ordering-unavailable {
    font-size: 1rem;
}

#header-cart.w3-top,
#header-ordering-unavailable.w3-top {
    position: sticky;
}

#header-cart > header a {
    padding: 8px 12px;
}

#header-cart #logo-home {
    padding-top: 0.625rem;
    padding-bottom: 0.625rem;
    height: 100%;
}

#header-cart > header a.w3-button {
    text-decoration: none;
}

#header-cart .view-cart-link,
#login-text,
#header-cart .w3-opennav,
#header-cart .login-button {
    max-height: 3.9rem;
    display: flex;
    align-items: center;
}

#top-nav #login-text {
    display: none;
}

#login-text > .fa-sign-out {
    margin-left: 0.5rem;
}

#cart-poe-expanded-name {
    display: none;
}

.ribbon-container .ordering-not-available-message-wrap {
    padding-left: 1rem;
    display: flex;
}

.branch-general-ordering-unavailable .ordering-not-available-message {
    flex-grow: 1;
}

.w3-bar.branch-general-ordering-unavailable .w3-opennav {
    padding: 0;
}

#footer {
    vertical-align: top;
}

#division-ribbon {
    background: #a52a2a; /*#EBDD94;*/
    vertical-align: middle;
    font-size: 0.9em;
    color: #ebdd94;
}

#division-ribbon a {
    color: white;
}

#division-ribbon-container {
    padding-left: 20px;
    padding-right: 20px;
}

.ribbon-container .ordering-not-available-message a {
    color: #fff8c2;
}

.ribbon-container div:not(.d-none) {
    display: inline-block;
}

.ribbon-container > a,
.ribbon-container > span,
.ribbon-container > div:not(.ordering-not-available-message-wrap) {
    flex-shrink: 0;
    min-width: min-content;
}

.ribbon-container > a,
.ribbon-container > span {
    min-width: min-content;
}

.ribbon-container > .login-button {
    margin-left: auto;
}

.ribbon-container .ordering-not-available-message {
    text-align: center;
    padding-left: 1rem;
    padding-right: 1rem;
    display: block;
}

noscript > p {
    margin: 1.5rem 2rem;
    padding: 0.5rem;
    background-color: #f8d7da;
}

noscript > p.macro-index-noscript-notice {
    margin: 1.5rem 2rem 0 2rem;
}

.paragraph-card {
    padding: 0.5rem;
    margin: 1rem;
    padding: 0.75rem;
}

.paragraph-card .large-announcement {
    font-size: 1.5rem;
    font-family: 'Cormorant', serif;
    font-weight: bold;
    padding: 1rem 0;
    font-feature-settings: unset;
}

p.paragraph-card,
.paragraph-card > p {
    text-indent: 1rem;
}

p.paragraph-card,
.paragraph-card.no-text-indent > p {
    text-indent: 0;
}

.paragraph-card.paragraph-card-no-top-margin {
    margin-top: 0;
}

.paragraph-card.paragraph-card-vertical-padding {
    padding: 2rem 0;
}

.paragraph-card.paragraph-card-bottom-margin-only {
    margin: 0 0 1rem 0;
}

.paragraph-card.paragraph-card-compact > p:not(.text-larger) {
    margin: 0;
}

.paragraph-card.paragraph-card-compact > p.text-larger {
    margin: 0.5rem 0;
}

.card-border,
.contact-card {
    border: 0.1rem dashed burlywood;
    box-shadow: 0 0.08rem 0.1rem #e7c380;
}

.card-white,
.paragraph-card {
    background-color: white;
}

.card-sandy,
.contact-card {
    background-color: #fffcf4;
}

.card-error {
    /* Card to display Laravel validation errors, for instance. The background
     * color is the same as .w3-pale-red */
    background-color: #ffdddd;
}

.contact-card {
    padding: 1rem;
    margin: 1rem 3rem;
    border-radius: 0.2rem;
}

.contact-card ul li:not(:last-of-type) {
    padding-bottom: 0.3rem;
}

.contact-social-media a:not(:last-of-type) {
    padding-bottom: 0.7rem;
}

.contact-card p,
.contact-card ul {
    line-height: 1.7em;
}

div:not(:first-of-type) > .contact-card {
    margin-top: 0;
}

body > a[href='#content'] {
    transition-property:
        left, width, height, opacity, border-color, background-color;
    transition-duration: 0s, 0s, 0s, 0.15s, 0.2s, 0.2s;
    transition-delay: 2.15s, 2.15s, 2.15s, 2s, 0s, 0s;
    z-index: 101;
    width: 50%;
    height: auto;
    min-height: 3.92rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row-reverse; /* put the arrow on the right */
    background-clip: padding-box;
    font-size: 1.25rem;
    padding: 0.5rem 1rem;
    border: 0.6rem solid rgba(255, 255, 255, 0.65);
    background-color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    opacity: 0.1;
    box-shadow: 0 0 0.5rem white;
    margin-top: 0;
    /* Hidden offscreen, but still accessible through tab-stops or for screen
     * readers. See
     * https://webaim.org/techniques/css/invisiblecontent/. This is a bit
     * different from Tailwind's `.sr-only` approach. */
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

body > a[href='#content']::before {
    padding: 0 1rem;
}

body > a[href='#content']:focus {
    /* "Skip to main content" link: show when focused */
    transition-duration: 0s, 0s, 0s, 0s, 0.2s, 0.2s;
    transition-delay: 0s, 0s, 0s, 0s, 0s, 0s;
    left: 15%;
    opacity: 1;
    border-color: rgba(255, 255, 255, 0.75);
    background-color: white;
    max-width: 85%;
    width: 85%;
    height: fit-content;
}

body > a[href='#content']:hover {
    border-color: rgba(255, 255, 255, 0.85);
}

.extralarge {
    font-size: 3rem;
}

@media screen and (max-width: 480px) {
    .extralarge {
        font-size: 2rem;
    }
}

ul.left-sidebar {
    display: list-item;
    list-style: none;
    padding-left: 15px;
    margin-top: 3px;
}

ul.left-sidebar-padded {
    padding-top: 10px;
}
ul.left-sidebar-padded li {
    padding-bottom: 5px;
}

.demoAcc {
    padding-top: 1px;
}

div.left-sidebar-order {
    width: 150px;
    text-align: center;
    color: #003300;
    font-size: large;
    margin-left: auto;
    margin-right: auto;
}

.left-sidebar-logo {
    margin-bottom: 5px;
}

span.reset-filters {
    text-decoration: underline;
    cursor: pointer;
}

td#main-column {
    width: 550px;
    vertical-align: top;
}

#not-logged-in {
    text-align: center;
    padding-bottom: 1rem;
}

#view-order-errors {
    color: #004800;
}

#innercontent {
    padding: 10px 0 10px 0;
    min-width: 100%;
}

.w3-container.checkout-container {
    padding: calc(0.01em + 10px) 16px;
    overflow: hidden;
}

#innercontent img,
.w3-container.checkout-container img {
    padding: 5px;
}

.introtable {
    width: 100%;
    max-width: 100%;
    color: white;
    /*text-align: center;*/
    font-family: sans-serif;
    font-size: x-large;
    font-weight: bold;
    /*  margin-top: 10px;
  margin-left: 2px;*/
}

a.cat-name {
    text-decoration: none;
    color: white;
}

.cat-name {
    font-family: 'Cormorant', serif;
    margin: 0;
    font-weight: 600;
    font-feature-settings: unset;
}

/* Hide form input placeholder text when clicked, rather than only when text
 * has been entered */
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
} /* FF 4-18 */
input:focus::-moz-placeholder {
    color: transparent;
} /* FF 19+ */
input:focus:-ms-input-placeholder {
    color: transparent;
} /* IE 10+ */

.search-header {
    display: flex;
    font-size: 0.8rem;
    line-height: 1rem;
}

.search-header {
    flex-wrap: wrap;
}

.search-header > :not(form) {
    padding: 0.6rem 1.2rem;
}

.search-header > a {
    text-decoration: none;
}

#index-text {
    cursor: pointer;
    /* remove button element styling */
    border: none;
    background: unset;
}

@media screen and (max-width: 480px) {
    /* When the Home and Index links are hidden, lay out the remaining elements
     * to fill the whole bar */
    .search-header > form {
        margin-left: 0;
        width: 100%;
    }
    .search-header > form > input[type='search'] {
        padding: 0.6rem;
    }
    .search-header > form > input[type='submit'] {
        width: 20%;
    }
}

#bread-crumbs {
    list-style: none;
    margin: 1rem 0 1rem 0;
    padding: 0;
}

#bread-crumbs > li {
    display: inline;
}

#bread-crumbs > li:not(:first-of-type)::before {
    content: '›';
    margin-right: 0.25rem;
    margin-left: 0.25rem;
    font-style: normal;
}

#bread-crumbs a {
    text-decoration: none;
    font-weight: normal;
    color: #003333;
}

.item-results-navigation {
    padding-top: 0.5rem;
}

.search-results-nav {
    width: 100%;
    text-align: center;
    padding-top: 20px;
}

.search-results-nav:first-child {
    padding-top: 7px;
}

.search-results-nav-cell {
    width: 15%;
}

.search-results {
    width: 100%;
    border: 0;
    /*text-align: center;*/
    padding: 0;
    border-spacing: 2px;
}

.search-result-column.w3-container {
    text-align: left;
    vertical-align: top;
    padding: 20px 0;
}

.search-result-subcat {
    font-weight: normal;
    font-style: italic;
}

.search-result-item {
    flex-direction: row;
}

.search-result-item header {
    flex-basis: 40%;
}

.search-result-item > .w3-container {
    flex-basis: 60%;
}

.search-result-item .name {
    font-family: 'Cormorant', serif;
    font-weight: bold;
    font-size: 1.25rem;
    line-height: 1;
    font-feature-settings: unset;
    margin-bottom: 0.5rem;
    display: inline-block;
}

.search-result-item span.category {
}
.search-result-item span.hidden {
    display: none;
}
.search-result-item span.description {
    font-size: 0.85rem;
}

.search-result-item input[name='quan'] {
    width: 8rem;
}

.search-result-item img {
    border: none;
}

.qtip:not(.fedco-discount-popup) {
    max-width: 600px !important;
}
.qtip select {
    padding: 5px 10px;
    /*width: 50%;*/
    font-size: larger;
}
.qtip input {
    padding: 5px 10px;
    font-size: larger;
    margin-left: 10px;
}
.qtip a {
    margin-left: 25px;
    font-weight: bold;
}
.qtip div.popup-layout > div:not(.price-popup) {
    width: 50%;
    display: inline-block;
}
.qtip div.popup-layout > div.price-popup {
    text-align: center;
    display: block;
    width: 100%;
}

.qtip span.close-popup {
    text-decoration: underline;
    cursor: pointer;
}

.qtip div.popup-layout > div:first-child {
    float: left;
}
.qtip div.popup-layout > div:first-child img {
    width: 98%;
}

.qtip .fedco-discount-popup {
    max-width: 250px;
}

.qtip.qtip-light,
.catalog-desc {
    line-height: 1.6;
}

.desc_code {
    border-bottom: 2px dotted #a52a2a;
}

@media print {
    .order-table > div.order-header,
    .order-table > div[id^='orderitem'] {
        /* Prevent cart rows getting stacked on top of one another when there
         * are multiple pages of cart contents */
        display: flex;
    }

    .order-table[name='totals'] {
        display: flex;
    }

    .order-table[name='totals'],
    .order-table[name='totals'] > div {
        flex-direction: column;
    }

    /* extra specificity on header and footer to overpower w3.css */
    #header-cart ~ header,
    div.w3-bar.fedco-green,
    .cart-buttons,
    main ~ footer {
        display: none;
    }
}

.order-table div.has-comment div {
    border: none;
}

.order-table:first-of-type div:first-child div {
    color: black;
}

.order-table:not(.checkout-review-form) a:not(.tw-btn) {
    text-align: left;
    color: #a52a2a;
}

@media screen {
    .read-more {
        font-size: smaller;
        text-decoration: underline;
        font-style: italic;
        cursor: pointer;
    }
    .read-more-text {
        font-size: smaller;
        padding: 0.5em;
        background-color: white;
        border: 1px solid brown;
        border-radius: 5px;
    }
}

.signin-table label,
.signin-table p {
    /* visually group controls with their associated labels on mobile */
    margin-top: 1.2rem;
}

.signin-table label {
    text-align: left;
}

.signin-table p,
.signin-table li {
    text-align: left;
}

/*table.signin-table tr.signin-input-row > td:nth-child(1) {}*/
table.signin-table tr.signin-input-row > td:nth-child(2) {
    text-align: right;
}
table.signin-table tr.signin-input-row > td:nth-child(3) {
    text-align: left;
}

.signin-table .signin-instructions {
    margin: 0;
    padding: 0.25rem 1.25rem;
}

.signin-table .signin-instructions:last-of-type {
    padding-bottom: 0.5rem;
}

.checkout-shipping-form label.error,
.checkout-billing-form label.error,
.checkout-billing-form .below-input-message {
    width: 100%;
    display: block;
    text-align: left;
    margin-left: auto;
}

.checkout-shipping-form label.error,
.checkout-billing-form label.error {
    color: var(--error-text-color);
    margin-top: 0;
}

.checkout-shipping-form label.error,
.checkout-billing-form .signin-card-multi-row label.error {
    margin-left: 0;
    width: auto;
}

.signin-card-multi-row,
.signin-card-multi-field-wrap,
.signin-card-multi-input-row {
    display: flex;
}

.signin-card-multi-row {
    flex-direction: column;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

.signin-card-multi-field-wrap {
    width: 100%;
    flex-direction: column;
    padding-top: 0.5rem;
}

.signin-card-multi-input-row {
    flex-direction: column;
}

.signin-card-multi-input-row > label,
.signin-card-multi-input-row > select,
.signin-card-multi-input-row > input {
    margin: 0;
    margin-top: 0.5rem;
    padding: 0;
}

.signin-card-multi-input-row > input {
    width: 100%;
}

.signin-card-multi-input-row > label {
    min-width: max-content; /* avoid line-wrapping */
    padding-right: 0.4rem;
}

#signin-payment-form-required-message,
#signin-payment-form-charge-instructions {
    margin-top: 1rem;
}

.payment-method-cc p.signin-note {
    padding: 0 1rem;
}

.required-field:not(.optional):before {
    content: '*';
    color: #a80000;
    display: inline-block;
    padding-right: 3px;
    vertical-align: middle;
}

#signin-gift-certificates-and-coupons {
    display: flex;
    justify-content: space-evenly;
}

#add_gift_cert,
#add_coupon {
    text-align: left;
}

.sortable {
    width: 100%;
    border: 1px #d6b984 /*#FFCC66*/ solid;
    text-align: left;
    border-collapse: collapse;
    background: white;
}

table.sortable
    th:not(.sorttable_sorted):not(.sorttable_nosort):not(
        .sorttable_sorted_reverse
    ):after {
    content: ' \25B4\25BE';
}

.sortable td,
.sortable th {
    /*border: 1px #A52A2A solid;
  background: white;*/
    border: none;
    padding: 4px;
}

.sortable th {
    font-weight: bold;
    background: #a52a2a;
    color: white;
    text-align: center;
}

.sortable td {
    vertical-align: top;
}

.sortable tr {
    border-bottom: #d6b984 solid 1px;
}

.sortable:first-of-type {
    margin-top: 5px;
}
.sortable:last-of-type {
    margin-bottom: 5px;
}

col.grey {
    background-color: #f1f1f1;
}

.smalltable,
.densetable,
.statustable {
    width: 100%;
    border: 1px #d6b984 /*#FFCC66*/ solid;
    text-align: left;
    border-collapse: collapse;
    background: white;
    margin-left: auto;
    margin-right: auto;
}

.smalltable td,
.smalltable th,
.densetable td,
.densetable th {
    /*border: 1px #A52A2A solid;
  background: white;*/
    border: none;
    padding: 4px;
}

.statustable td,
.statustable th {
    border: 1px #a52a2a solid;
    background: white;
    text-align: center;
}

.smalltable th {
    font-weight: bold;
    background: #a52a2a;
    color: white;
    text-align: center;
}

.densetable th {
    font-weight: normal;
    background: #a52a2a;
    color: white;
    text-align: center;
}

.smalltable td,
.densetable td {
    vertical-align: top;
}
.smalltable td div {
    text-align: center;
}

.smalltable tr,
.densetable tr {
    border-bottom: #d6b984 solid 1px;
}

/*.smalltable a, .smalltable a.link, .smalltable a.visited { color: white;}*/

.smalltable:first-of-type,
.densetable:first-of-type {
    margin-top: 5px;
}
.smalltable:last-of-type,
.densetable:last-of-type {
    margin-bottom: 5px;
}

.smalltable caption {
    font-weight: bold;
    color: #009900;
}

.smalltable caption span {
    color: darkslategray;
}

.smalltable caption span a,
.smalltable caption span a.link,
.smalltable caption span a.visited {
    color: darkslategray;
}

.check span,
.check2 span {
    display: none;
}

.check:after {
    content: '\2713';
}
.check2:after {
    content: '\2713\2713';
}

#pollinator-table tr > td:first-child + td + td + td {
    border-right: #d6b984 solid 1px;
}
#pollinator-table tr > td:first-child + td + td + td + td {
    border-right: #d6b984 solid 1px;
}
#pollinator-table tr > td:first-child + td + td + td + td + td {
    border-right: #d6b984 solid 1px;
}
#pollinator-table tr > td:first-child + td + td + td + td + td + td {
    border-right: #d6b984 solid 1px;
}
#pollinator-table tr > td:first-child + td + td + td + td + td + td + td {
    border-right: #d6b984 solid 1px;
}
span.hide1 {
    display: none;
}
#appletable tr > td:first-child + td {
    border-right: #d6b984 solid 1px;
}
#appletable tr > td:first-child + td + td + td + td + td + td + td + td {
    border-right: #d6b984 solid 1px;
}

#appletable tr > th:first-child + th {
    border-right: #d6b984 solid 1px;
}
#appletable tr > th:first-child + th + th + th + th + th + th + th + th {
    border-right: #d6b984 solid 1px;
}

#cctable td,
#cctable th {
    border-right: #d6b984 solid 1px;
}

#cctable tr > td:first-child + td,
#cctable tr > td:first-child + td + td + td,
#cctable tr > td:first-child + td + td + td + td + td + td,
#cctable tr > th:first-child + th,
#cctable tr > th:first-child + th + th + th,
#cctable tr > th:first-child + th + th + th + th + th + th {
    border-right: #d6b984 solid 3px;
}

.ccrop span {
    display: none;
}
.ccrop:after {
    content: '\2713\0020';
}

#herbs_table tr > td:first-child + td {
    font-style: italic;
}
#flower_table tr > td:first-child + td + td {
    font-style: italic;
}
.footnotes dl {
    padding: 0.5em;
}
.footnotes dt {
    float: left;
    clear: left;
    width: 100px;
    text-align: right;
    font-weight: bold;
}
.footnotes dt:after {
    content: ':';
}
.footnotes dd {
    margin: 0 0 0 110px;
    padding: 0 0 0.5em 0;
}

.addl-info-header {
    text-align: center;
    margin-bottom: 0.25em;
}

.addl-info-header a {
    color: inherit;
}

.addl-info-text {
    text-align: left;
    /*display: none;*/
    margin: 1em;
    padding: 0.5em;
    border: 1px solid brown;
    border-radius: 5px;
}

.addl-info-text h3:first-of-type {
    margin-top: 0;
}
.addl-info-text h3 {
    text-align: center;
}

.addl-info {
    background-color: #ebdd94;
    border-radius: 5px;
    border: 1px solid black;
    line-height: 1.5;
    white-space: nowrap;
    font-weight: bold;
    margin: 0.25em 1em;
    padding: 0 0.5em;
    display: inline-block;
}

.addl-info a {
    text-decoration: none;
}

[class$='-group-coord-ship-message'] {
    display: none;
}

.checkout-info-pane .error,
#checkoutErrorSendingConfirmationEmail,
#checkoutErrorLoadingFinishedOrder {
    color: var(--error-text-color);
    font-weight: bold;
    font-style: normal;
}

[name$='[canAccommodateFullSizedTruck]'][value='0']:checked + .error {
    display: block;
}

.cartContentsError {
    text-align: center;
    padding-left: 50px;
    padding-right: 50px;
    border: solid red 5px;
    color: black;
}

.cartContentsError > div:first-of-type {
    color: var(--error-text-color);
}

/* Since the browser will retain the removal of the previously removed
 * "disabled" state from a form control when refreshing the page, even if the
 * cart contents have been changed (in another browser window, for instance),
 * use this class to avoid the validation not being enforced while the page is
 * loading. */
.awaitingCartContentsValidation {
    pointer-events: none;
    opacity: 0.3;
}

.checkout-info-pane .coupon_code {
    font-weight: bold;
}

/*.checkout-item-cell-note-left {
  text-align:left;
  font-size:smaller;
  float:left;
}

.checkout-item-cell-note-right {
  font-size: smaller;
  font-style: italic;
  text-align: right;
}*/

.checkout-item-cell-note-left {
    text-align: left;
    font-size: smaller;
}

.checkout-item-cell-note-right {
    font-size: smaller;
    font-style: italic;
    text-align: left;
}

.depot-hidden-element {
    display: none;
}

.pickup-hidden-element {
    display: none;
}

a.purchased-gift-certificate {
    font-weight: bold;
    font-size: larger;
}

a.purchased-gift-certificate-print-button {
    margin-left: 1rem;
    background-color: orangered;
    text-decoration: none;
}

.w3-btn.orange-link-button {
    background-color: orangered;
    text-decoration: none;
    border-color: #fff;
    color: #fff;
    border-radius: 0.6rem;
}

.ordering-not-available-message .orange-link-button {
    padding: 0.5rem;
}

#form_remove_from_cart {
    /* Invisible form used to remove items from the cart on the checkout
   * view-order page. While it only contains hidden inputs, setting
   * display:none just in case (to avoid it showing up if all forms are later
   * styled, or in case a screen reader would announce it, etc.) */
    display: none;
}

.og-eco,
.abbreviations {
    font-weight: bold;
    /* font-style: italic; */
}

.og-eco,
.abbreviations,
.abbreviations-light {
    border-bottom: 2px dotted #a52a2a;
}

.og-eco-no-tooltip {
    font-weight: bold;
}

/******************************************************************************/
/* Groups Page
/******************************************************************************/

p.group-instruction:first-letter {
    font-size: larger;
    font-weight: bold;
}

.group-coordinator-update-error {
    color: var(--error-text-color);
    font-style: italic;
}

/******************************************************************************/
/* Front Page
/******************************************************************************/

/* for testing the front page */
/*div { border: 1px dotted blue; }*/

.listNone {
    list-style-position: outside;
    list-style-image: none;
    list-style-type: none;
}

/* sub levels link hover */

ul.col {
    display: block;
    width: 100px;
    border-right: 1px dotted #333333;
    float: left;
    /* margin: 0 12px 0 0; */
    overflow: hidden;
    list-style: none outside none;
    padding: 0 0 0 12px;
    font-size: smaller;
    /* position: absolute; */
}

.dotted {
    border-left: 1px dotted #333333;
}

.cat_download {
    clear: both;
    border-bottom: 1px solid #ffcc66;
    padding: 5px 0 5px 0;
    overflow: auto;
}

.cat_download div {
    margin: 0 0 0 150px;
}

.cat_download img {
    float: left;
}

.cat_download span {
    font-weight: bold;
    color: #009900;
    font-size: larger;
}

.popup {
    background-color: #fffcf4;
    padding: 10px;
}

.list-div div {
    width: 250px;
    float: left;
    display: block;
}

.list-div ul {
    list-style: none;
    padding-left: 5px;
}

img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.division-menu-parent,
#index-visual-slides {
    text-decoration: none;
}

ol li {
    margin: 10px 0;
}

ul.horizontal-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

ul.horizontal-list li {
    padding: 0 1em 0 0;
    display: inline;
}

@-webkit-keyframes zoom {
    from {
        -webkit-transform: scale(0);
    }
    to {
        -webkit-transform: scale(1);
    }
}

@keyframes zoom {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
    .modal-content {
        width: 100%;
    }
}

.orderline,
.order-header div {
    float: left;
}

.orderline {
    padding: 8px;
}

div#right-pane > div {
    text-align: right;
    width: 100%;
}

div#right-pane > div::after {
    content: ' ';
    clear: both;
    display: block;
}

div#right-pane > div > div {
    text-align: right;
    float: left;
}

.left {
    text-align: right;
    float: left;
    width: 70%;
    margin-bottom: 0.5rem;
}

.right {
    text-align: right;
    float: left;
    width: 30%;
    padding-left: 0.1rem;
    margin-bottom: 0.5rem;
}

@media screen and (min-width: 750px) and (max-width: 999px) {
    .checkout-view-form .left {
        width: 60%;
    }
    .checkout-view-form .right {
        width: 40%;
    }
}

.left-mobile {
    width: 30%;
    float: left;
}

.checkout-shipping-form :is(.left, .right, .left-mobile) {
    width: 50%;
}

.group-mobile-left {
    width: 60%;
    float: left;
    padding: 8px;
    text-align: left;
}

.group-mobile-right {
    width: 40%;
    padding: 8px;
    display: flex;
    flex-direction: column;
    justify-content: right;
    align-items: flex-end;
}

.group-part-line,
.group-part-email,
.group-part-phone {
    font-size: smaller;
    font-style: italic;
}

.group-part-total {
    color: #a52a2a;
}

.group-part-comments {
    clear: both;
    padding: 8px;
}

@media screen {
    .orderitem-linenum {
        display: none;
        width: 100%;
    }
}

@media print {
    .orderitem-quan button {
        display: none;
    }
}

@media screen {
    .orderitem-itemnum {
        width: 100%;
    }
}

.orderitem-price div:after {
    content: ' each';
}
.gift-cert-price div:after {
    content: '';
}

.gift-cert-price div:before {
    content: 'enter value of at least $10: ';
}

.orderitem-delete {
    float: right;
}
@media print {
    .orderitem-delete {
        display: none;
    }
}

.orderitem-name {
    width: 65%;
    float: left;
}
@media print {
    .orderitem-name {
        width: 40%;
    }
}
.order-header {
    display: none;
}
.order-header-group {
    display: none;
}

.review-mail-address,
.review-po-number,
.review-po-detail,
.review-fundraiser-details,
.review-customer-code {
    width: 100%;
    float: left;
    border-bottom: 1px #a52a2a dotted;
    padding: 8px;
}

.review-depot-dates {
    color: black;
}

.review-label {
    font-weight: bold;
}

.review-email,
#gift_cert_info_cell {
    clear: both;
    border-bottom: 1px #a52a2a dotted;
    padding: 8px;
}

a.w3-bar-item:link,
#big-index a:link {
    text-decoration: none;
}

#right-pane > div {
    padding-top: 8px;
    padding-bottom: 8px;
}

.smalltable .cell {
    float: left;
    border: none;
    padding: 4px;
}

.smalltable .row {
    overflow: auto;
    width: 100%;
}

.smalltable .tableheader {
    font-weight: bold;
    background: #a52a2a;
    color: white;
    text-align: center;
    border: none;
    padding: 4px;
}

.smalltable .cell {
    vertical-align: top;
}
.smalltable .cell div {
    text-align: center;
}

.smalltable .row {
    border-bottom: #d6b984 solid 1px;
}

div.smalltable a,
div.smalltable a.link,
div.smalltable a.visited {
    color: #a52a2a;
}

.smalltable .itemno {
    text-align: center;
    font-weight: bold;
}
.FormUnit--spin {
    display: inline-block;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.FormUnit-quantity {
    background: none;
    border: none;
    height: 1.5rem;
}
.FormUnit-quantity--add {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    order: 3;
    height: 42px;
    width: 30px;
    color: #146d16;
    font-weight: bold;
    font-size: 16px;
}
.FormUnit-quantity--remove {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    order: 1;
    height: 42px;
    width: 30px;
    color: #146d16;
    font-weight: bold;
    font-size: 16px;
}

.FormUnit-field--spin,
/* .pricecell makes the second rule here only affect the item page */
.pricecell .name-your-price input {
    /*padding: 0.275rem;*/
    width: 42px;
    height: 42px;
    font-size: 16px;
    margin: auto;
}

.log-in-to-order.tw-btn {
    display: block;
    padding: 0.5rem 4rem;
}

.product-page {
    display: flex;
    flex-wrap: nowrap;
}
.product-page .FormUnit-quantity--add {
    order: 3;
}

.quantity,
.pricecell .name-your-price input {
    border: 1px solid lightgray;
}

.product-page .extra-container {
    flex-basis: auto;
    order: 2;
}

.image-modal-thumbnail {
    cursor: zoom-in;
}

button:disabled {
    opacity: 0.5;
}

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

.extra-container {
    order: 3;
    padding: 0.275rem;
}

.group-part {
    border-top: 1px #a52a2a dotted;
    overflow: auto;
}

#divswitch {
    z-index: 20;
}

.slideshow-caption {
    position: absolute;
    bottom: 15%;
}

#quick-content {
    display: none;
}

.shoppingbasket:not(.text-center) {
    text-align: left;
}
.shoppingbasket {
    position: relative;
    font-family: 'Noto Sans', sans-serif;
    font-style: italic;
    margin-left: 0.5rem;
}
.basketitems:not(.d-none) {
    display: inline-block;
}
.basketitems {
    color: black;
    font-size: x-small;
    background-color: lightsalmon;
    border: 1px solid darkred;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(-50%, -90%);
    -moz-transform: translate(-50%, -90%);
    transform: translate(-50%, -90%);
    border-radius: 1000px;
    min-width: 1.25rem;
    padding-left: 0.325rem;
    padding-right: 0.325rem;
}

.macroIndexAnnouncements h2 {
    color: #146d16;
    font-size: 1.25rem;
}

.macroIndexAnnouncements summary {
    /* Prevent w3.css from hiding the triangle */
    display: list-item;
    font-weight: bold;
}

.macroIndexAnnouncements details[open].details-desktop > summary {
    /* hide the triangle on desktop */
    display: block;
}

.search-grid {
    display: grid;
    grid-template-columns: 1;
    grid-gap: 10px;
}

/* ---- grid-item ---- */

.grid-item {
    background-size: cover;
    aspect-ratio: 1;
}

.grid-item > a > div {
    width: 100%;
}

.grid-item > a::after,
#splash #branch-banner a::after,
#hero a::after {
    content: ' ';
    display: block;
    height: 100%;
    width: 100%;
}

#trees-vd,
#bulbs-vd {
    border-bottom: 2px dotted;
}

.missing-image-filler {
    opacity: 30%;
    padding: 15%;
}

.search-results-image {
    position: relative;
    height: 100%;
    width: 100%;
}

.search-results-image > a > img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.search-results-image img.missing-image-filler {
    height: unset;
    width: unset;
}

.search-results-text h2 {
    border-bottom: 1px solid black;
}

.product-description .og-eco-overlay-badge {
    display: flex;
    align-items: center;
}

.search-result-category {
    font-size: 1.125rem;
    line-height: 1;
    width: 100%;
    font-family: 'Cormorant', serif;
    font-weight: 500;
    font-feature-settings: unset;
}

.search-result-category-ogs {
    color: #333;
    font-size: 1rem;
    line-height: 1;
    font-style: italic;
    width: 100%;
    text-transform: uppercase;
    font-family: 'Noto Sans', Verdana, Arial, sans-serif;
    font-feature-settings: 'salt';
}

.search-result-category-ogs + hr {
    display: none;
}

.search-results-text {
    padding: 10px 0;
}

.search-results-text .status {
    font-style: italic;
}

#quickViewAddModalError {
    padding: 1rem 0;
}

.name-your-price {
    display: inline-flex;
    align-items: center;
}

.quick-view-modal .name-your-price {
    display: flex;
}

.name-your-price .nyp-wrap {
    display: inline-block;
    position: relative;
}

.name-your-price .nyp-text {
    min-width: max-content;
    margin-right: 0.5rem;
}

.name-your-price .nyp-symbol {
    position: absolute;
    left: 0.5rem;
    top: 50%;
    transform: translate(0, -50%);
    line-height: 100%;
}

.name-your-price input {
    padding-left: 1.1rem;
    min-width: 6rem;
    max-width: 10rem;
    display: inline-block;
}

div.info-box {
    margin: 10px;
}

#ogs-ship-table,
#mt-ship-table {
    display: none;
}

.group-part-line-medium {
    display: none;
    padding: 10px;
}

.group-spacer {
    display: none;
}

.icing {
    display: none;
}

a.anchor {
    display: block;
    position: relative;
    top: -54px;
    visibility: hidden;
    z-index: -20;
}

.product-name {
    font-weight: bold;
    display: block;
    font-family: 'Cormorant', serif;
    font-size: 2rem;
    line-height: 1.25;
    color: #000;
    text-align: left;
    margin: 0;
    width: 100%;
    font-feature-settings: unset;
}

.product-name-quick-view {
    display: none;
}

.product-description {
    margin-top: 0.1rem;
}

form.priceline label.error {
    font-size: 1rem;
    color: var(--error-text-color);
    padding: 0 1rem;
    text-align: right;
    grid-area: error;
}

#name-your-price-amount-error {
    display: block;
}

.backorder-warning {
    font-style: italic;
    padding-left: 0.5rem;
    font-size: 1rem;
    color: var(--error-text-color);
}

.priceline label.backorder-warning {
    padding: 0 1rem;
    text-align: right;
    grid-area: error;
}

#header-logout {
    display: none;
}

.cart-buttons input,
.cart-buttons a,
.cart-buttons button {
    margin-bottom: 4px;
}

#quick-table input {
    border: 1px solid lightgrey;
}

.other-carts {
    display: none;
    margin: 0 auto;
    text-align: center;
}

.thank-you-for-your-order-panel .other-carts {
    /* Always show the other-carts panel on the order-placed page, rather than
     * hiding it behind a link on mobile like elsewhere */
    display: block;
}

.other-carts:not(.other-carts-no-top-margin) {
    margin-top: 1rem;
}

.other-carts-inner {
    display: inline;
}

.other-carts-inner > a.tw-btn {
    display: inline-flex;
    align-items: center;
    text-decoration-line: none;
    margin-bottom: 4px;
}

.other-carts-inner .basketitems {
    font-size: 1.05rem;
    left: 60%;
}

.other-carts-inner .shoppingbasket {
    /* The shopping cart icon container is slightly wider than its contents, so
     * this prevents it making the button padding look unbalanced. */
    margin-right: -0.4rem;
}

.other-carts-inner .fa-shopping-cart {
    font-size: 1.4rem;
    line-height: 16px;
}

#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index: 2;
}
#return-to-top i {
    color: #fff;
    margin: 0;
    position: relative;
    left: 16px;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#return-to-top:hover {
    background: rgba(0, 0, 0, 0.9);
}
#return-to-top:hover i {
    color: #fff;
    top: 5px;
}

footer a:link,
footer a:visited {
    text-decoration: none;
    color: #146d16;
}

footer a:hover {
    text-decoration: underline;
}

footer h2 {
    text-transform: uppercase;
    text-align: left;
    font-size: 1.5rem;
    line-height: 1.25;
}

footer li {
    margin-top: 0.5rem;
}

footer ul {
    display: list-item;
    list-style: none;
    margin: 0;
    padding: 0;
}

#footer-icon-facebook,
#footer-icon-instagram {
    color: black;
}

#footer-header {
    font-style: italic;
    font-family: 'Cormorant', serif;
    font-size: 1.5rem;
    font-feature-settings: unset;
    font-color: black;
}

#pest-form input {
    max-width: 200px;
}

.search-filter-container h4 {
    text-align: left;
}

.map-responsive {
    overflow: hidden;
    padding-bottom: 56.25%;
    position: relative;
    height: 0;
}
.map-responsive iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

.fundraiser-customer-login-error,
.seed-rack-customer-login-error {
    color: var(--error-text-color);
    padding: 0.5rem;
}

/* Session flash notifications */

.alert-container {
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 0;
    bottom: 2rem;
    left: 2rem;
    margin-right: 2rem;
    z-index: 5;
    transition: margin-right 0.3s;
}

.style-example .alert-container {
    position: unset;
    margin-right: 0;
    margin-top: 0;
}

.alert-container.move-aside-for-scroll-to-top {
    margin-right: 6.75rem;
}

/* Specify .alert-container to select only alerts in public pages */
.alert-container > .alert {
    align-self: flex-end;
    display: flex;
    opacity: 0;
    width: 100%;
    text-align: center;
    border-left: 0.15rem solid #004800;
    border-right: 0.15rem solid #004800;
    cursor: pointer;
    transition:
        opacity 0.3s,
        transform 0.3s;
}

.alert-container > .alert.close-slowly {
    transition:
        opacity 2s,
        transform 2.5s;
}

.alert-container > .alert::before {
    /* Technique from https://css-tricks.com/snippets/css/multiple-borders/ */
    content: ' ';
    position: absolute;
    z-index: -1;
    top: -0.15rem;
    right: -0.15rem;
    bottom: -0.15rem;
    left: -0.15rem;
    border-left: 0.15rem solid white;
    border-right: 0.15rem solid white;
    opacity: 0;
    transition:
        opacity 0.3s,
        transform 0.3s;
}

.alert-container > .alert-pop:not(.alert-shown),
.alert-container > .alert-pop:not(.alert-shown)::before {
    transform: scale(1.1);
}

.alert-container > .alert-shown,
.alert-container > .alert-shown::before {
    transition:
        opacity 0.2s,
        transform 0.2s;
}

.alert-container > .alert-show,
.alert-container > .alert-show::before {
    opacity: 1;
}

.alert-container > .alert-hide,
.alert-container > .alert-hide::before {
    transform: scale(0.8) translateY(0.25rem);
    opacity: 0;
}

.alert-container > .alert:first-of-type {
    border-top: 0.15rem solid #004800;
}

.alert-container > .alert:not(:first-of-type) {
    border-top: 0.15rem dotted #004800;
}

.alert-container > .alert:last-of-type {
    border-bottom: 0.15rem solid #004800;
}

.alert-container > .alert:first-of-type::before {
    border-top: 0.15rem solid white;
}

.alert-container > .alert:last-of-type::before {
    border-bottom: 0.15rem solid white;
}

.alert-container > .alert-success {
    background-color: #d4edda;
}

.alert-container > .alert-warning {
    background-color: #fff3cd;
}

.alert-container > .alert-error {
    background-color: #f8d7da;
}

.alert-container > .alert .alert-icon {
    width: 3.75rem;
    min-width: 3.75rem;
    min-height: 3.75rem;
}

.alert-close {
    width: 2.25rem;
    min-width: 2.25rem;
    min-height: 3.75rem;
    padding-right: 0.75rem;
    transition: all 0.2s;
}

.alert-container > .alert:hover .alert-close {
    color: #444;
    transform: scale(1.3);
}

.alert-container > .alert-success .alert-icon {
    color: white;
    background-color: #146d16;
}

.alert-container > .alert-warning .alert-icon {
    color: white;
    background-color: #7e6a1b;
}

.alert-container > .alert-error .alert-icon {
    color: white;
    background-color: #7e1b1b;
}

.alert-inner {
    flex-grow: 1;
    padding: 0.5rem;
}

/*
 * The extra specificity on .alert-icon and .alert-close is to take priority
 * over the 'display' property from font-awesome, which was causing issues with
 * the layout.
 */
.alert-container > .alert .alert-icon,
.alert-container > .alert .alert-close,
.alert-inner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination-enclosure {
    text-align: center;
}
.pagination {
    display: inline-block;
    list-style-type: none;
}
.pagination li {
    color: black;
    float: left;
}
.page-link,
a.page-link {
    text-decoration: none;
    padding: 8px 16px;
}
.pagination li.active > .page-link {
    background-color: #d1e4d4;
}
.pagination a:hover:not(.active) {
    background-color: #ddd;
}

.ordered-from-Fedco-before-question {
    max-width: 30rem;
    margin: 0 auto;
    border: none;
}

.ordered-from-Fedco-before-question > legend {
    width: 100%;
}

.ordered-from-Fedco-before-question > label:nth-of-type(2) {
    margin-left: 1rem;
}

.address-validation {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding-bottom: 1rem;
    flex-direction: column;
    align-items: center;
}

.address-validation > button {
    width: max-content;
    margin: 1rem;
    max-width: calc(100vw - 3rem);
    overflow: unset;
}

.address-validation > button {
    width: auto;
}

.address-validation .diff-wrapper .none {
    cursor: unset;
}

.continue-editing-wrap {
    width: 100%;
    margin: 1rem auto 2rem auto;
    text-align: center;
}

.address-validation-continue-editing.w3-btn strong {
    font-weight: normal;
}

.address-validation-buttons {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
}

.address-validation-buttons > form:first-of-type {
    margin-right: 0.25rem;
}

.address-validation-buttons > form:last-of-type {
    margin-left: 0.25rem;
}

.address-validation
    > .address-validation-suggestion:nth-of-type(1)
    .diff-wrapper.diff.diff-html
    .change
    td {
    background: white;
}

.address-validation
    > .address-validation-suggestion:nth-of-type(1)
    tr
    > td:nth-of-type(2),
.address-validation
    > .address-validation-suggestion:nth-of-type(1)
    tr
    > th:nth-of-type(2) {
    display: none;
}

.address-validation
    > .address-validation-suggestion:nth-of-type(2)
    tr
    > td:nth-of-type(1),
.address-validation
    > .address-validation-suggestion:nth-of-type(2)
    tr
    > th:nth-of-type(1) {
    display: none;
}

.validation-modal-no-suggestions .diff-wrapper.diff.diff-html .change del {
    background: white;
    font-weight: normal;
}

.diff-wrapper.diff {
    font-family: 'Noto Sans', Verdana, Arial, sans-serif;
    font-feature-settings: 'salt';
}

/* For the "Design System" page */
.style-example > td > pre {
    overflow: auto;
    max-height: 8rem;
    white-space: pre-line;
    margin: 0;
}

.style-example > td {
    padding: 0.25rem 0.5rem;
}

.design-system-colors .style-example > td:first-of-type {
    padding: 0;
}

dl.definition dt:before {
    content: '';
    display: block;
}
dl.definition dt {
    font-weight: bold;
}
dl.definition dt::after {
    content: ':';
}
dl.definition dt,
dl.definition dd {
    display: inline;
}
dl.definition dd {
    margin: 0.5em;
}

/******************************************************************************/
/* Image Styles
/******************************************************************************/

img.general-illustration {
    width: 100%;
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
}

/******************************************************************************/
/*
/******************************************************************************/

p.sub-p {
    margin-top: 0;
    margin-bottom: 0;
    text-indent: 18px;
}

p.close-p {
    margin-top: 0.5rem;
    padding-top: 0;
}

h4.close-header {
    margin-bottom: 0;
    padding-bottom: 0;
}

hr.section-break {
    border: 2px solid #deb887;
    border-radius: 1px;
}

h2.close-header,
h3.close-header,
h4.close-header {
    margin-bottom: 0;
}

p.close-p {
    margin-top: 0;
}

p.sub-p {
    margin-top: 0;
    margin-bottom: 0;
    text-indent: 18px;
}

em.latin,
em.news-item-date {
    font-size: 1.25rem;
}

ul.close-ul {
    margin-top: 0;
}