:root {
    --page-background: #fdfdfd;
    --footer-background: #002408;

    --secondary-color: hsl(from var(--button-background) h s calc(l - 15));
    /*#336200;*/ /*my choice, over Ana's #55744b; same hue as 5ca709, but darker */
    --required-color:#5a7647 ;
    /* per Ana may 2025 "I changed my mind, I’ll use 5ca709 for the tables, 5a7647 for the borders" */

    --body-font: 'Source Sans 3', sans-serif;
    --body-size: 1rem;
    --home-body-size: 1.375rem;
    --body-color: #101010;

    --page-title-font: 'lora', sans-serif;
    --page-title-size: 2.375rem;

    --heading-font: 'DM Sans', sans-serif;
    --heading-size: 2rem;

    --subheading-size: 1.375rem;

    --button-font: 'DM Sans', sans-serif;
    --button-size: .875rem;
    --filter-button-size: 1.25rem;
    --button-color:  var(--body-color);
    --button-background:  hsl(88, 90%, 35%);/* #5ca709; */

    --link-font: 'DM Sans', sans-serif;
    --link-size: inherit;
    --link-color: var(--secondary-color); /*#336200; /*my choice, over Ana's #5a7647; same hue as 5ca709, but different luminosity */

    --menu-font: 'DM Sans', sans-serif;
    --menu-size: 1rem;
    --menu-color: var(--body-color);
    --menu-selected-color: var(--link-color);

    --table-header-color: var(--page-background);
    --table-header-background: var(--secondary-color);

    --footer-heading-font: 'DM Sans', sans-serif;
    --footer-heading-size: 1rem;
    --footer-color: #fdfdfd;
    --footer-link-color: #ccc;
    --footer-body-font: 'Source Sans 3', sans-serif;
    --footer-body-size: .85rem;

    --dark-grey-i-guess: #7f7f7f;
    --ana-secondary-grey: #e8e8e8;

    /* have not heard from Ana about this, so I'm guessing */
    --status-color:  #083F63;
    --alert-color: #dc3545;


}

/* layout, margins, padding 
------------------------------------------------ */
body, html {
    box-sizing: border-box;
}

body{
    margin:0;
    padding:0;
}

#header {
    /*margin-bottom:20px;*/
}

#footer {
    /*margin-top:20px;*/
    padding: 20px 0;
}

p, ul:not(.navbar-nav), ol, ul {
    max-width:55em;
    margin-left:auto;
    margin-right:auto;
}
article.resource{
    margin-bottom:2rem;
}
#staff p {
    line-height:1.2;
}


.staff-email {
    display:block;
    margin-bottom:50px;
}
.department {
    margin-bottom:50px;
}

table#contact-icons {
    margin-top:40px;
}
#contact-icons td {
    padding: 30px 0;
    vertical-align: top;

    i.bi {
        width:50px;
        display:inline-block;
    }
    i.bi:before {
        font-size: 1.5rem;
    }
    i.bi-geo-alt {
        margin-top:5px
    }
}


/* forms */
label  {
    display:block;
    /*width:90%;*/
    padding-top:5px;
}
label.inline, .form-control.inline{
    width:auto;
    display:inline-block;
}
label.wide, input.wide,#contact-form input {
    min-width:220px;
    width:90%;
}
.required label:before,
.form-label.required:before {
    content:'*';
    font-size:1.3em;
    font-weight:bold;
}
input:required, textarea:required, select:required {
    border: 2px solid var(--required-color);
}

.aside {
    display:inline-block;
    margin:0 5px;
}

.form-msg {
    padding-left:25px;
    color:var(--secondary-color);
    font-variant:all-petite-caps;
}

/* 
Ana: Can we make the asterisks on the Form smaller?  
Me: How much smaller? 
Ana: Maybe 1-2 font sizes
Me: makes it 10% smaller
two months later
Ana: Asterisks (*) need to be a smaller size.
Now i am using  content '*' instead of the icon
*/
/*.bi-asterisk::before {
font-size:.7em;
vertical-align: baseline;
}*/

input[type="text"],input[type="password"], textarea, select {
    width:400px;
    max-width:90%;
}
select.pagesize, select.reorder {
    width:auto;
}
input {
    margin:0 3px;
}

#contact-form input, #contact-form textarea {
    width:90%;
}

input {
    max-width:90%;
}

input[type="checkbox"] {
    width:20px;
    height:20px;
}



/* form in a table */
input.flats, input.eaches, input.retail, input.sku {
    max-width: 100px;
}

/*hide at first because listPayments does not always need it
it is the only template with the id right now*/
#payment_filters, #btn-return {
    display:none;
}

.sortable, .sorted {
    cursor: pointer;
}

.ASC.sorted:after  {
    content:'\25b2';
    color:gold;
}
.DESC.sorted:after {
    content:'\25bc';
    color:gold;
}


/*printable invoice/credit memo
======================================================*/
table.invoice-header {
    margin:20px 0;
    th, td {
        border:1px solid black;
    }
}

table.invoice-details {
    margin:20px 0;
    th {
        border-bottom:1px solid black;
    }
    td {
        border-bottom:1px solid gray;
    }
}
table.invoice_summary {
    margin:20px 0;
    tr.border-top {
        border-top:1px solid black;
    }
}




/* font sizes and families 
------------------------------------------------ */
body{
    font-family: var(--body-font);
    font-size: var(--body-size);
}

body .home {
    font-size: var(--home-body-size);
}
#mainmenu a {
    font-family: var(--menu-font);
    font-size: var(--menu-size);
}

.staff-name {
    font-size: var(--home-body-size);
}
#footer {
    font-family: var(--footer-body-font);
    font-size: var(--footer-body-size);

    .heading {
        font-family:var(--footer-heading-font);
        font-size: var(--footer-heading-size);
        text-transform: uppercase;
        color:#fff;
    }
    .copyright {
        font-family: var(--footer-heading-font);
        font-size: var(--footer-body-size);
    }
}

.page_title, .heading, .subheading {
    text-align:center;
    font-weight:bold;
}
.page_title {
    font-family:  var(--page-title-font);
    font-size: var(--page-title-size);
}
.heading {
    font-family: var(--heading-font);
    font-size: var(--heading-size);
}
.subheading {
    font-family: var(--heading-font);
    font-size:var(--subheading-size);
}


a {
    font-family: var(--link-font);
}

.accordion-button {
    font-family: var(--button-font);
    font-size: var(--filter-button-size);
}


#filter-accordion input.trigger {
    margin-right:10px;
}

.aside, .hint {
    font-style:italic;
    font-size:.9em;
}

/* buttons in the body text */
.btn {
    /*padding: 1rem 5rem;*/
    font-size: var(--button-size);
    font-family: var(--button-font);
    border-radius: 3.125rem;
    margin:1px;

    min-width: 250px;
    padding: 10px;

    background: var(--button-background);
    color: var(--body-color);
    border-color:var(--button-background);
    cursor:pointer;
}

.btn:hover {
    background: #fdfdfd;/* var(--body-background);*/
    color: var(--button-background);
    border-color:var(--button-background);
    text-decoration:none;
}

/* action buttons in the lists */
/*
.action .btn, #draft-key .btn {
padding:1px 15px;
border-radius:15px;
margin-top:3px;
background:transparent;
color:var(--secondary-color);
}

#draft-key .btn {
padding: 0 0 4px 15px;
}
.action .btn:hover {
color:var(--footer-background);
}
#draft-key .btn:hover {
cursor:default;
}
*/
/* not buttons any more 
.action .btn, #draft-key .btn {
padding:1px 8px;
background:transparent;
color:var(--secondary-color);
min-width:10px;
}
.action .btn:hover {
color: var(--footer-background);
}
*/
/* FAQ */

.question {
    font-weight:bold;
    margin-bottom:0;
}
.question, .answer {
    line-height:1.2;
}
.answer {
    margin-bottom:30px;
}
/* colors, borders, backgrounds
------------------------------------------------ */
body  {
    background: var(--page-background);
    color: var(--body-color);
}

#header {
    border-bottom:4px solid var(--button-background);
}

a {
    text-decoration:none;
}

.bordered {
    border:1px solid #232323;
}
#mainmenu {
    a {
        background:transparent;
        color: var(--menu-color);
    }
    a:hover,  a:active,
        a.dropdown-item.active,
        .dropdown-toggle.active {
        color:  var(--menu-selected-color);
        background-image:none;
        background-color:transparent;

    }
}
#join-the-team {
    background:url(../updates/website_photos/Employment/employment_web.jpg) center center;
}
#footer {
    background: var(--footer-background);
    color: var(--footer-color);
}
#footer a {
    color: var(--footer-link-color);
}
#footer a:hover {
    color:var(--footer-color);
    text-decoration: underline;
}
.page_title, .heading, .subheading {
    color: var(--body-color);
}

a, a:active {
    color: var(--link-color);
    font-weight:bold;
}
/*.subheading a {
font-weight:normal;
}*/
.navbar-nav {
    margin-right:30px;
}

.navbar-nav a {
    font-weight:normal;
}
li.pdficon  a {
    font-size:smaller !important;
}

a:hover {
    color: var(--footer-background);
    text-decoration: underline;
}


.accordion-button {
    background:transparent;
}

.accordion-button:not(.collapsed) {
    color: var(--table-header-color);
    background: var(--table-header-background);
}
.accordion-button:focus {
    box-shadow:none;
}
#filter-accordion .accordion-button:after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-down-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M1.553 6.776a.5.5 0 0 1 .67-.223L8 9.44l5.776-2.888a.5.5 0 1 1 .448.894l-6 3a.5.5 0 0 1-.448 0l-6-3a.5.5 0 0 1-.223-.67'/%3E%3C/svg%3E");
}

.text-status {
    color: var(--status-color);
}

.text-alert, .error {
    color: var(--alert-color);
}


.reverse {
    background: var(--body-color);
    color: var(--page-background);
}

.alert-custom-success{
    background-color: var(--status-color);
    color:#fff;
}
.alert-custom-warning {
    background-color:var(--alert-color);
    color:#000;
}
/* have not heard from Ana about this, so I'm winging it */

.afterDiscount {
    color: var(--status-color);
}
th.afterDiscount {
    color:var(--status-color);
    background:#ddd;
}
.afterMarkup {
    color: var(--alert-color);
}
th.afterMarkup {
    color: var(--alert-color);
    background:#ddd;
}
.afterRounding{
    color: var(--dark-grey-i-guess);
}
th.afterRounding {
    color: var(--dark-grey-i-guess);
    background:#ddd;
}

#POW {
    background-color: var(--ana-secondary-grey);
}
/* forms */

input:optional {
    border:1px solid #ccc;
}
input[type="text"]:read-only,
input[type="email"]:read-only {
    background:transparent;
    color: var(--dark-grey-i-guess);
}
input.warning {
    border-color:  var(--alert-color);
}

/* magical and important things 
------------------------------------------------ */
.standard .dev {
    display:none;
}
.special .dev {
    color:purple;
    padding:5px;
    line-height:1.5;
    font-size:1.1em;
}

img {
    max-width:100%;
}

.hide {
    display:none!important;
}

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

.aligncenter {
    text-align:center;
}
.alignright {
    text-align:right;
}
.floatright {
    float:right;
}
.bold {
    font-weight:bold;
}
.em {
    font-style:italic;
}

hr{
    width:80%;
    margin:1rem auto;
    background-color: var(--dark-grey-i-guess);
    opacity:1;
    height:2px;
}
.spacer {
    margin-top:40px;
    margin-bottom: 40px;
}
/* per-page
------------------------------------------------ */
/* home 
--------------------------------------- */
/*.jumbotron {
margin:50px 0;
}*/

/*homepage slideshow uses owl carousel */
.slide-title {
    display:block;
    text-align:center;
}
/*.owl-carousel .owl-nav button {
margin:10px;
}
.owl-carousel .owl-nav button .bi:before {
color: rgba(12,12,12,.5);
background: #fdfdfd;
font-size:2em;
}
.owl-item {
border:1px solid var(--secondary-color);
}*/


.owl-prev {
    /*    width: 15px;
    height: 100px;*/
    position: absolute;
    top: 40%;
    left: 10px;
    display: block !important;
}

.owl-next {
    /*    width: 15px;
    height: 100px;*/
    position: absolute;
    top: 40%;
    right: 20px;
    display: block !important;
    /*    border:0px solid black;*/
}
/*.owl-prev i, .owl-next i {transform : scale(1,6); color: #ccc;}*/



/* plant details  uses bootstrap carousel */
.detail-row .carousel {
    margin:0 auto;
}
.carousel-control-next-icon,
.carousel-control-prev-icon {
    background-color: rgba(200,200,200,.7);
    color:white !important;
}
.carousel-control-next-icon:hover,
.carousel-control-prev-icon:hover {
    background-color: rgba(0,0,0,1);
}
.carousel {
    max-width:800px;
    margin:-20px auto -20px auto;
}
.carousel-indicators [data-bs-target] {
    border-radius: 50%;
    height: 15px;
    width: 15px;
}




/* add/edit user 
--------------------------------------- */
#staff-levels, #customer-levels {
    display:none;
}

.permissions-row {
    display:inline-block;
    border-bottom:1px dotted gray;

    .boxes-label {
        width:75px;
        display:inline-block;
        font-weight:bold;
    }
    input {
        margin-right:5px;
    }

    label {
        display:inline-block;
        cursor:pointer;
        margin-left:10px;
        padding:0 4px;
    }
    label:hover {
        background:#ddd;
    }
    label.disabled:hover {
        background:transparent;
        cursor:default;
    }
}

label.disabled, input.disabled,
span.inactive {
    color:gray;
}
/* catalog/avail pages 
--------------------------------------- */
/* content filters in sidebar */

.accordion-item p.accordion-header {
    margin-top:0;
}

@media screen and (min-width: 992px) {
    #frmPlantFilters {
        position:sticky;
        top:0;
    }
}
#frmPlantFilters {
    .ui-accordion-content, .accordion-button {
        padding:5px 5px 5px 15px;
    }
}

/*layout filters across top */
#layout-filter-container {
    width:100%;
    display:flex;
    justify-content:space-between;
    .filter-title {
        font-weight:bold;
        display:block;
        text-align:center;
    }
    .stay-together {
        display:block;
    }
}

@media(min-width:768px) {
    #layout-filter-container .filter-title {
        display:inline;
        text-align:left;
    }
    #layout-filter-container .stay-together {
        display:inline;
    }
}

div#showHide, div#pagesize, div#summed, div#orderBy {
    display:inline-block;
    padding:20px 0;
}

.removefilter {
    border:1px solid gray;
    border-radius:10px;
    padding:4px;
    margin:4px;
    display:inline-block;
    cursor:pointer;
}
.removefilter:hover {
    background:#ddd;
}
.pagenum-wrapper {
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.pagenum-wrapper div {
    box-sizing: border-box;
    padding:5px;

}
.pagenum {
    margin-bottom: 1rem;
    ;
}

.letters span, .pagenum span {
    cursor: pointer;
    display:inline-block;
    padding:1px 3px;
    font-size:1.2em;
}

.letters span:hover, .pagenum span:hover {
    background: var(--secondary-color);
    color:#fff;
}

.pagenum span.currentpage, .letters span.currentletter {
    font-weight:bold;
    background: var(--secondary-color);
    color:#fff;
}

.pagenum span.disabled,.pagenum span.disabled:hover  {
    cursor: default;
    color:gray;
    background:transparent;
}

/* avail page 
--------------------------------------- */
div.slidey{
    display:none;
    border:1px solid var(--dark-grey-i-guess);
    padding:10px;
    margin:10px 0;
}
.slidey-open, .slidey-close {
    cursor:pointer;
}
.slidey-open {
    text-decoration:underline;
    color: var(--secondary-color);
}
/* catalog page 
--------------------------------------- */
#plant_cards {
    display:flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap:30px;
}
#plant_cards .card {
    flex: 1 0 100%;
    box-sizing: border-box;
    margin: 1rem .25em;
    padding:5px;
    max-width:200px;
    min-width:200px;

    img {
        width:180px;
        height:auto;
    }
    .front {
        text-align:center;
    }
    .front:hover {
        cursor:pointer;
    }
}

@media screen and (min-width: 36em) {
    .card {
        flex: 0 1 calc(50% - 1em);
    }
}

@media screen and (min-width: 50em) {
    .card {
        flex: 0 1 calc(33% - 1em);
    }
}

@media screen and (min-width: 75em) {
    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

@media screen and (min-width: 90em) {
    .card {
        flex: 0 1 calc(20% - 1em);
    }
}

/* drafts list 
--------------------------------------- */
#table_intro {
    width:100%;
    padding:10px;
    margin:20px 0;
    overflow:auto;
}

#order-btn {
    margin: 0;
}
#draft-key {
    float:none;
    border:2px solid var(--dark-grey-i-guess);
    text-align:left;
    padding:5px;
    margin:30px 5px 5px 5px;
}

@media(min-width:1184px) {
    #draft-key {
        float:right;
        border:2px solid var(--dark-grey-i-guess);
        text-align:left;
        padding:5px;
        margin:5px;
    }
}
#draft-key .key {
    margin:10px 15px;
    display:inline-block;
}

/* our team 
--------------------------------------- */
.staff_photo {
    width:250px;
    height:250px;
}


/* tables
--------------------------------------- */
/* colors per ana */
.header-row {
    background: var(--table-header-background);
    color: var(--table-header-color);
}

.header-row .hover {
    cursor:pointer;
}
.detail .header-row {
    background: transparent;
    color: var(--body-color);
    border-bottom: 1px solid var(--body-color);
}
.data-row {
    border-bottom:1px dotted #aaa;
}

.data-row:hover, .data-row.selected {
    background: #ddd;
}

.data-row.changed {
    background:#FFFFE9;
}
td.list_price {
    color: var(--dark-grey-i-guess);
}

/* layout per Michael 1/24/25 */
th, td {
    text-align:center; /* i cannot stand it */
    text-align:left;
    padding:10px 10px;
}
td.action {
    padding:1px 6px;
}
/* other stuff i have left off for now */
/*th.flats, th.sales_incr, th.eaches, th.retail, th.sku {
min-width:110px;
}
input.flats, input.eaches, input.retail, input.sku {
max-width:80px;
}*/

div.lookuptable {
    width:auto;
    display:inline-block;
}

table.list, table.onhand, table.detail {
    max-width:100%;
    width:100%;
    /* per ana */
    white-space: nowrap;
    /* but that is terrible */
    white-space:wrap;
    word-wrap:break-word;
    word-break:break-word;


}
table.onhand tr.data-row.priority{
    color:gray;
}
td.photo {
    min-width:100px;
}
@media (min-width:960px) {
    /* staff only, stack botanical/common/notes */
    body.staff div.availability {
        th.botanical_name, th.common_name, th.notes,
        td.botanical_name, td.common_name, td.notes {
            display:inline;
            margin:0;
            padding:0
        }
        th.notes:before, th.common_name:before,
            td.notes:before, td.common_name:before {
            display:block;
            content:"";
        }
        td.notes {
            font-style:italic;
        }
    }
}
@media (max-width:959px){
    table.list:not(.detail) {
        border-top:30px solid var(--secondary-color);
    }

    table.list:not(.detail)>tbody>tr.data-row {
        border-bottom:3px solid var(--secondary-color);
    }

    table.list>tbody>tr.header-row {
        /*display:none;*/
    }
    table.list>tbody>tr.header-row th {
        display:inline;
    }
    table.list:not(.detail)>tbody>tr.data-row td:not(.hide) {
        text-align:left;
        width:100%;
        display:block;
        clear:both;
    }
    table.list:not(.detail)>tbody>tr.data-row td:not(.hide):before {
        content: attr(data-header);
        float: left;
        width: 45%;
        font-variant:all-petite-caps;
    }

    /*


    table.list .header-row .hover {
    display:inline-block;
    padding:0 10px;
    }

    table:not(#queued_payments) tr.data-row,
    table:not(#queued_payments) td {
    table.list tr.data-row, table.list td {
    display:block;
    clear:both;
    overflow:auto;
    }}

    table.list tr.data-row {
    margin:15px 0;
    border:1px solid var(--secondary-color);
    border-radius:5px;
    }



    table.list td.action {
    display:inline-block;
    margin:0 5px;
    text-align:center;
    width:40px;
    }

    .slidey table {
    width:90%;
    margin:0 auto;
    table-layout:fixed;
    white-space:wrap;
    }
    .slidey table td, .slidey table th {
    display:table-cell;
    }
    .slidey table tr.data-row {
    display:table-row;
    border:0;
    }*/



}

/* close button on auth.net popup */

#AcceptUIContainer html body accept-main div button.close.topright span  {
    color:red;
    text-shadow:0;
    filter:alpha(opacity=100)!important;
    opacity:1!important;
}