/* Header */
.navbar-brand img {max-height: 48px;}
.dropdown .link-text {padding-left: 0.25em;}
.dropdown:hover .dropdown-menu {display: block; margin-top: 0;}
.cart-badge {font-size: 0.6rem;}


/* Home Page */

.card-top-icon {
  position: absolute;
  top: -25px;
  border-radius: 80px;
  padding: 10px;
  min-width: 55px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  max-width: 70px;
  padding: 10px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
  font-size: 20pt;
}

.hover-primary:hover {background-color:#456149 !important; color:#FFF; cursor:default; transition: 500ms;}
.asso-slider .owl-item .views-field.views-field-field-media-image img {box-shadow: 0px 0px 5px rgba(0,0,0,0.25); margin: 5px; border-radius: 1rem;}
.asso-slider .views-element-container {text-align: center;}


/* About Page */
.top-cover-page .breadcrumb {--bs-breadcrumb-divider-color: #FFF;}
.top-cover-page .breadcrumb .breadcrumb-item a {color: white;}

.back-hr {
    position: relative;
    top: 48px;
    line-height: 10px;
    border-top: 3px solid #db8724;
    z-index: -100;
    opacity:1;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #db8724;
}

.nav-pills .nav-link {
    background: white;
    color: black;
    font-weight: 500;
}
.line-item-secondary-sm {
    /* padding-left: 15px; */
    padding-inline: 15px;
    position: relative;
}
.line-item-secondary-sm:before {
    content: " ";
    background: #db8724;
    height: 3px;
    width: 15px;
    position: absolute;
    top: 50%;
    left: 0;
}
.line-item-secondary-sm:after {
    content: " ";
    background: #db8724;
    height: 3px;
    width: 15px;
    position: absolute;
    top: 50%;
    right: 0;
}


/* Shop Page */

.shop-page .bef-exposed-form .form--inline > .form-item, .bef-exposed-form .form--inline .js-form-wrapper > .form-item {width:100%;}
.shop-page .fieldgroup {margin-top:0; margin-bottom:0; overflow:hidden;}
.shop-page .fieldset-legend {display:none;}
/* Product Page */

#ProductPhotoscarousel .carousel-indicators {height:100px;}
#ProductPhotoscarousel .carousel-indicators button {height:100px; width:100px;}
.product--rendered-attribute__selected ~ label.option {color: #FFF; font-weight:700;}
.product--rendered-attribute ~ label.option {cursor: pointer;}
.field.field--name-name.field--type-string.field--label-hidden.field__item {color: #000;}
.physical-product__variations .product--rendered-attribute__selected ~ label.option {border:none;}
.product--rendered-attribute label.option {cursor: pointer}
.field.field--name-field-color-value.field--type-color-field-type.field--label-hidden.field__item {text-align: center;}

#ProductPhotoscarousel .carousel-inner .carousel-item img {width: 100% !important; display:block;}
#ProductPhotoscarousel .carousel-control-prev {height: 60vh;}
#ProductPhotoscarousel .carousel-control-next {height: 60vh;}


/* Donation Page */

.donation-tile {min-height: 325px;}
.donation-tile .donation__icon {margin-top: 25px;}
.donation-tile label {display: none;}
.donation-tile .field-suffix {display: none;}
.donation-tile .text-muted {display: none;}

.donation-tile .form-control {
    text-align: center;
    background: transparent;
    border: none;
    box-shadow: unset;
    color: #FFF;
    font-size: 25px;
    font-weight: 500;
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
    pointer-events: none;
}

.c-donation {min-height: 125px;}
.c-donation .form-control {margin-left: unset; margin-right: unset;}
.donation-custom .donation-tile .form-control {pointer-events: all; color: #0095da; background-color: #FFF; margin-top: 20px; margin-bottom: 20px;}

.donation-tile h2 {font-size: 55px; margin-top: 40px;}
.donation-tile h3 {font-size: 20px;}
.donation-tile h5 {font-size: 25px; margin-bottom: -15px;}
.donation-tile .btn-primary {background: #FFF linear-gradient(180deg, #fff, #eee) repeat-x; color: #456149; font-weight: 700;}
.donation-tile .btn-primary:hover {}
.donation-tile .field-suffix {display:none;}
.donation-tile .description {display:none;}

/* Dashboard */

/* Site Wide */
.splide__play, .splide__pause, .splide__arrows {display:none;}
button.splide__toggle.is-active {display:none;}

.tons::after {content: "Tons"; font-size:small; padding:5px;}
.lacks::after {content: "Lacks"; font-size:small; padding:5px;}
.ltr::after {content: "Ltr"; font-size:small; padding:5px;}
.nos::after {content: "Nos"; font-size:small; padding:5px;}
.pls::after {content: "+"; font-size:smaller; padding:5px;}
.dropdown-header {cursor: default;}

.section-top-icon-wrap {
 	position: absolute;
    top: 0px;
    border-radius: 80px;
    /* padding: 50px; */
    min-width: 150px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 150px;
    font-size: 11pt;
    background: #059f1b;
    min-height: 150px;
}

.section-top-icon {
	position: absolute;
    top: 45px;
    left: 60px;
    margin-right: auto;
    font-size: 20pt;
}

.section-top-text {
	position: absolute;
    top: 85px;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    font-size: 10pt;
    max-width: 100px;
    width: max-content;
    text-align: center;
}

.line-item-green-lg {
   	position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* position: absolute; */
    left: 0;
    right: 0;
}
.line-item-green-lg:before {
    content: " ";
    background: #059f1b;
    height: 5px;
    width: 100%;
    position: absolute;
    top: 50%;
    left: 60%;
}
.line-item-green-lg:after {
    content: " ";
    background: #059f1b;
    height: 5px;
    width: 100%;
    position: absolute;
    top: 50%;
    right: 60%;
}



.info-card {
    position: relative;
    padding-top: 20px;
    margin-bottom: 20px;
    padding-top: 45px;
}

.pop-top-center-lg {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: -65px;
}

.my-lg {
    margin-top: 35px;
    margin-bottom: 35px;
}

.pt-lg {
    padding-top: 75px;
}

.jumbo-icon {font-size: 120px;}
.mid-icon {font-size: 60px;}
.sml-icon {font-size: 35px;}

#summary {
  font-size: 14px;
  line-height: 1.5;
}
#summary p.collapse:not(.show) {
    height: 240px !important;
    overflow: hidden;
	font-size: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;  
}
#summary p.collapsing {
    min-height: 42px !important;
}
#summary a.collapsed:after  {
    content: '+ Read More';
}
#summary a:not(.collapsed):after {
    content: '- Read Less';
}
#summary p {font-size: 1rem;}


.form--inline {
    display: inline-block;
}
.card-button {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    width: 100%;
    background-color: #456149;
    color: #fff;
    border-radius: 0 0 8px 8px;
  	position: absolute;
    bottom: 0;
  	left: 0;
}

.card-bottom-text {
    display: flex;
    justify-content: flex-start;
    padding: 5px 0;
    width: 100%;
    color: #fff;
    border-radius: 0 0 8px 8px;
    position: absolute;
    bottom: 0;
}


.webform-options-display-buttons-description.description {
    margin-left: unset;
}

.webform-options-display-buttons-title {
    font-weight: bolder;
}


/* Forms */

.bg-volunteer {background-image: url(../../../../sites/default/files/images/volunteer-back.webp);}
.bg-dtdc {background-image: url(../../../../sites/default/files/images/dtdc-back.webp);}
.bg-clothes {background-image: url(../../../../sites/default/files/images/clothes-back.webp);}
.bg-compost {background-image: url(../../../../sites/default/files/images/compost-back.webp);}
.webform-submission-form .webform-submission-information.card {display: none;}

/* Footer */



/* for Mobile */
@media screen and (max-width: 480px) { 
  
  
  .top-cover-pt {padding-top:0px;}
  .top-cover-text-pt {padding-top:0px;}

}


/* for Desktop */
@media screen and (min-width:   480px) { 
  
  .top-cover-bg-img {max-height:400px;}
  .top-cover-pt {padding-top:50px;}
  .top-cover-text-pt {padding-top:30px;}
  #ProductPhotoscarousel  {max-width: 75%;}
}


/* Global Styles */


:root {
  --bs-primary: #456149;
  --bs-link-color: #456149;
}
/*.bg-primary { background-color: #456149 !important; } 
/*.bg-primary {rgba(69,97,73, var(--bs-bg-opacity)) !important;}*/

.bg-primary {rgb(69,97,73) !important;}
.btn-primary { background-color: #456149 !important; border-color: #456149 !important; }

.messages {
  border: 1px solid;
  border-color: #c9e1bd;
  border-radius: 0.75em;
  box-shadow: 0px 0px 5px color(srgb 0 0 0 / 0.05);
  background-image: unset;
  padding: 15px 20px 15px 15px;
}