/* Top Bar - All Pages */
#top-bar {
  content: "";
}
/* Gives Social Links in top bar some spacing */
.social a {
  margin-right: 1rem; 
}

/* Navigation Bar - All Pages */
#nav-bar {
  content: "";
}
/* Sets see thru affect and keeps all fonts uppercase */
.navbar {
  opacity: 0.9;
  text-transform: uppercase;
  background-color: #064a00; 
}
/* Sets the site logo size */
.logo {
  width: 50px; 
}
.cart-collapse {
  display:none;
}

/* Footer - All Pages */
#main-footer {
  content: "Main Footer";
  background-color: #064a00;
  opacity: 0.9;
}

/* Alerts - Index Page */
#message {
  content: "Message";
}

/* Showcase - Index Page */
/* Sets up the main visual for the home page */
#showcase {
  background-image: url(../img/showcase_bars_large.jpg);
  background-position: top center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
  min-height: 50vh;
  color: #fff;
  padding: 2rem; 
}
/* Creates a nice opaque overlay effect */
#showcase .overlay {
  content: '';
  position: relative;
  background: rgba(51, 51, 51, 0.8); 
}
/* Creates a nice button effect to link the Collection */
.showcase-button-group  a {
  background-color: white;
  color: black;
  border: 2px solid green;
  border-radius: 8px;
  padding: 8px 8px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
.showcase-button-group  a:hover {
  transition-duration: 0.4s;
  cursor: pointer;
  background: rgba(51, 51, 51, 0.8);
  color: white;
  opacity: 0.5;
}

/* Soap Characteristic Points - Index Page */
#char-pnts {
  padding: 2rem;
  background-color: rgba(182,233,166,1.0);
}

/* Listings Carousel - Index Page */
/*  */
#listings_carousel {
  padding: 2rem;
  background-color: rgba(152,215,245,1.0);
}
.btn-secondary {
  color: #fff !important; 
}
.listing-body {
  height: 200px;
}
.carousel-inner {
  position: relative;
}
#listings_carousel .carousel_overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0.2;
  background-color: rgba(51, 51, 51, 1.0); 
}
.carousel-indicators .active {
  height: 5px;
  background-color: #064a00;
}
.carousel-indicators li {
  height: 5px;
  background-color: rgba(2, 29, 0, 0.4);
}

/* Recipe Overlays - Index Page */
#recipe_listings {
  padding: 2rem;
  background-color: rgba(182,233,166,1.0);
}
/* container for overlay */
.recipe_column {
  position: relative;
  padding-left: 5px;
  padding-right: 5px;
}

/* content for overlay will be a boostrap card */
/* .card */

.recipe_card_overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0.2;
  transition: .5s ease;
  background-color: rgba(51, 51, 51, 0.8);
}

.recipe_column:hover .recipe_card_overlay {
  opacity: 0.9;
}

/* Services - Index Page */
/* Creates a nice parallax effect for the Services Section*/
#services {
  background-image: url(../img/building.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  min-height: 50vh;
  position: relative;
  overflow: hidden;
  padding: 2rem; 
}
/* Creates a nice green overlay for the services Section */
#services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    min-height: 100%;
    width: 100%;
    background: rgba(32, 134, 107, 0.8); 
}

/* Showcase - Collection_SoapBot_Store_Dashboard Pages */
/*  */
#showcase-inner {
  background-image: url(../img/building.jpg);
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  position: relative;
  overflow: hidden;
  min-height: 200px; 
}
#showcase-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    min-height: 100%;
    width: 100%;
    background: rgba(32, 134, 107, 0.8); 
}

/* Breadcrumb - Collection_SoapBot_Store_Dashboard Pages */
/*  */
.breadcrumb-button-group a, .breadcrumb-button-group button {
  background-color: green;
  border-color: green;
  border-radius: 0.25rem;
  background-color: white;
  color: black;
  border: 2px solid green;
  padding: 8px 8px;
  text-align: center;
  text-decoration: none;
}

.breadcrumb-button-group  a:hover, .breadcrumb-button-group button:hover {
  background: rgba(51, 51, 51, 0.8);
  color: white;
}
/* .text-secondary i {
  color: #064a00;
} */
.text-secondary-bar {
  color: #064a00;
}
.hr-char-pnts {
  border-top: 2px solid green;
  width: 80%;
}

/* Search Model - Collection Page */
#searchModal {
content: "";
}

/* Bars - Collection Page */
.card-button-group a {
display: block;
width: 100%;
border-radius: 0.25rem;
background-color: white;
color: black;
border: 2px solid green;
padding: 8px 8px;
text-align: center;
text-decoration: none;
}
.card-button-group  a:hover {
background: rgba(51, 51, 51, 0.8);
color: white;
}
.pagination-button  a:link {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
}
.pagination-button  a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
}
.pagination-button  a:hover {
background: rgba(51, 51, 51, 0.8);
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
}

.pagination-button a:not([href]):not([tabindex]) {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none; 
}

.pagination-button-active {
background: rgba(51, 51, 51, 0.8) !important;
color: white;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
}
.pagination-button a {
display: block;
width: 100%;
border-radius: 0.25rem;
}



/* Introductory Video - About Page */
#introductory-video {
background-color: #064a00;
background-size: cover;
position: relative;
min-height: 650px;
color: #fff;
padding-top: 6rem;
}
#videoSizeSmall {
display: none;
}
/* Work - About Page */
#work {
background-color: #064a00;
background-size: cover;
position: relative;
color: #fff;
padding: 2rem;
}

/* Bar - Bar Page */
.back-button-group a {
border-radius: 0.25rem;
background-color: white;
color: black;
border: 2px solid green;
padding: 8px 8px;
text-align: center;
text-decoration: none;
}
.back-button-group  a:hover {
background: rgba(51, 51, 51, 0.8);
color: white;
}
.inquiry-button-group {
width: 100%;
border-radius: 0.25rem;
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
}
.inquiry-button-group:hover {
background: rgba(51, 51, 51, 0.8);
color: white;
}

.list-group-item:nth-child(even) {
background-color: rgba(32, 134, 107, 0.5);
}


/* Store Page - Checkout Page */
.box-element {
box-shadow:hsl(0, 0%, 80%) 0 0 16px;
background-color: #fff;
border-radius: 4px;
padding: 10px;
}
.product {
border-radius: 0 0 4px 4px;
}
/* Image Thumbnails - Product Page */
.thumbnail {
width: 100%;
height: 200px;
-webkit-box-shadow: -1px -3px 5px -2px rgba(214,214,214,1);
-moz-box-shadow: -1px -3px 5px -2px rgba(214,214,214,1);
box-shadow: -1px -3px 5px -2px rgba(214,214,214,1);
}
.bg-dark {
background-color: #4f868c!important;
}

/* Cart Summary - Cart Page */
.cart-button-group a {
border-radius: 0.25rem;
background-color: white;
color: black;
border: 2px solid green;
padding: 8px 8px;
text-align: center;
text-decoration: none;
margin:5px;
display: inline-block;
}
.cart-button-group  a:hover {
background: rgba(51, 51, 51, 0.8);
color: white;
}
#cart-icon {
width:25px;
display: inline-block;
margin-left: 15px;
}
.cart-row {
display: flex;
align-items: flex-stretch;
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #ececec;

}
#cart-total {
display: block;
text-align: center;
color:#fff;
background-color: red;
width: 20px;
height: 25px;
border-radius: 50%;
font-size: 14px;
}

.update-cart-button {
border: none;
color: white;
padding: 8px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
background-color: white; 
color: black; 
border: 2px solid green;
border-radius: 0.25rem;
width: 100%;
}

.update-cart-button:hover {
background-color: rgba(51, 51, 51, 0.8);
color: white;
}
.update-cart-button:disabled {
background-color: white;
color: rgb(168, 11, 11);
}

.delete-cart-button-group {
border-radius: 0.25rem;
background-color: white;
color: black;
border: 2px solid green;
padding: 8px 8px;
text-align: center;
text-decoration: none;
margin:5px;
}
.delete-cart-button-group:hover {
background: rgba(51, 51, 51, 0.8);
color: white;
}

#itemQty:disabled {
background-color: white;
}
.item-quantity {
width:fit-content;
}

/* Shipping Information - Checkout Page*/
#checkout .box-element p {
font-weight: bold;
}

#checkout .box-element {
background-color: rgba(32, 134, 107, 0.5);
margin-bottom: 1rem;
}

/* Order Summary - Checkout Page */
#checkout .col-sm-2, .col-sm-4 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.order-summary-item {
margin-bottom: 1.5rem;
}
.order-summary-item-list {
margin-bottom: 1.5rem;
align-items: center;
}
.delete-checkout-button-group {
border-radius: 0.25rem;
background-color: white;
color: black;
border: 2px solid green;
padding: 8px 8px;
text-align: center;
text-decoration: none;
margin:5px;
font-size: 0.5rem;
}
.delete-checkout-button-group:hover {
background: rgba(51, 51, 51, 0.8);
color: white;
}

/* Acount Menu - Accounts Page */
#account-menu-block li {
border: none;
color: white;
padding: 8px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
background-color: white; 
color: black; 
border: 2px solid green;
border-radius: 0.25rem;
width: 100%;
}
#account-menu-block li:hover {
background: rgba(51, 51, 51, 0.8);
color: white;
}
.order-list {
border-top: 0;
border-right: 0;
border-left: 0;
border-radius: 0;
position: relative;
display:block;
padding: 0.5rem 1.25rem;
margin-bottom: -1px;
/* border: 1px solid rgb(0,0,0,0.125); */
}
.recent-address p {
margin-bottom: 0.25rem;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.edit-address-button-group {
border-radius: 0.25rem;
background-color: white;
color: black;
border: 2px solid green;
padding: 8px 8px;
text-align: center;
text-decoration: none;
margin:5px;
width: 100%;
}
.edit-address-button-group:hover {
background: rgba(51, 51, 51, 0.8);
color: white;
}
#dashboard-address-edit .modal-content {
background-color:rgba(32, 134, 107, 1);
}

/* Miscellaneous Styling */
img {
width: 100%; 
}
.hidden {
display: none!important;
}
.col-lg-4, .col-lg-6, .col-lg-8, .col-lg-12 {
margin-top: 10px;
}

/*=======================
Form Page
========================*/

.formPage .formWrapper {
list-style: none;
background: var(--color-white);
padding: 3.5rem 5rem;
border: 2px solid var(--color-light);
border-radius: 0.7rem;
}

.formPage .formWrapper__subject {
font-size: 2.8rem;
color: var(--color-sub);
margin-bottom: 1rem;
margin-top: 2rem;
}

.content-box {
width: 95%;
max-width: 85rem;
margin: 0 auto;
}


/* Media Queries */
@media (max-width: 991px) {
#recipe_overlays .container {
position: relative;
}
#showcase {
padding-top: 4rem; 
}
#showcase h1 {
  font-size: 40px; 
}
.hide-md-down {
display: none; 
} 
}

@media (max-width: 768px) {
#recipe_overlays .container {
position: relative;
}
#showcase {
padding: 0.5rem; 
}
#showcase h1 {
font-size: 40px; 
}
#showcase .container {
  padding-right: 0px;
  padding-left: 0px;  
}
#top-bar {
text-align: center; 
}
#top-bar .social {
  text-align: center !important; 
} 
#showcase {
  background-image: url(../img/showcase_bars_small.jpg);
}
}

@media (max-width: 576px) {
#recipe_overlays .container {
position: relative;
}
#showcase h1 {
font-size: 30px; 
}
#showcase-inner h1 {
font-size: 40px; 
}
#videoSizeNormal {
display: none;
}
#videoSizeSmall {
display: block;
}
#introductory-video {
min-height:auto;
}
#cart-summary-product .row {
padding: 0px 0px 0px 0px !important;
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
#cart-summary-cart-top .row {
padding: 0px 0px 0px 0px !important;
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
#cart-summary-cart-bottom .row {
padding: 0px 0px 0px 0px !important;
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
#cart-summary-checkout .row {
padding: 0px 0px 0px 0px !important;
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
}

/* #cart-items .cart-product-name-group {
flex: 0 0 100%;
max-width: 100%;
text-align: center;
padding-right: 15px !important; 
} */
#listings .container {
padding-left: 8px;
padding-right: 8px;
}
#listings .card-body {
padding: 0.5rem;
}
/* #listings .col-6 {
padding: 0.5rem;
} */
.lead {
font-size: 0.75rem;
padding-right: 8px;
padding-left: 8px;
}
.display-3 {
font-size: 3.5rem;
font-weight: 300;
line-height: 1.2;
}
.display-4 {
font-size: 2.5rem;
font-weight: 300;
line-height: 1.2;
}
.bar-creator {
background-color: rgba(32, 134, 107, 0.5);;
}
.qty-available {
text-align: left !important;
}
.cart-button-group a {
float:none;
margin: 0px;
padding-left: 4px;
padding-right: 4px;
display: block;
width:100%;
}
#cart-summary-product .order-1 {
order: 1;
margin-top: 10px;
flex: 0 0 50%;
padding-left: 4px;
padding-right: 4px;
}
/* Checkout Button */
#cart-summary-product .order-4 {
order: 2;
margin-top: 10px;
flex: 0 0 50%;
padding-left: 4px;
padding-right: 4px;
}
/* Continue Shopping Button */
#cart-summary-cart-top .order-1 {
order: 1;
margin-top: 10px;
flex: 0 0 50%;
padding-left: 4px;
padding-right: 4px;
}
/* Cart: Items Count */
#cart-summary-cart-top .order-2 {
  order: 3;
  margin-top: 10px;
  flex: 0 0 50%;
  padding-left: 4px;
  padding-right: 4px;
  text-align: left !important;
}
/* Cart: Subtotal */
#cart-summary-cart-top .order-3 {
  order: 4;
  margin-top: 10px;
  flex: 0 0 50%;
  padding-left: 4px;
  padding-right: 4px;
}
/* Checkout Button */
#cart-summary-cart-top .order-4 {
order: 2;
margin-top: 10px;
flex: 0 0 50%;
padding-left: 4px;
padding-right: 4px;
}
#cart-summary-cart-bottom .order-1 {
order: 1;
margin-top: 10px;
flex: 0 0 50%;
padding-left: 4px;
padding-right: 4px;
}
/* Cart: Items Count */
#cart-summary-cart-bottom .order-2 {
  order: 3;
  margin-top: 10px;
  flex: 0 0 50%;
  padding-left: 4px;
  padding-right: 4px;
  text-align: left !important;
}
/* Cart: Subtotal */
#cart-summary-cart-bottom .order-3 {
  order: 4;
  margin-top: 10px;
  flex: 0 0 50%;
  padding-left: 4px;
  padding-right: 4px;
}
/* Checkout Button */
#cart-summary-cart-bottom .order-4 {
order: 2;
margin-top: 10px;
flex: 0 0 50%;
padding-left: 4px;
padding-right: 4px;
}
#cart-summary-checkout .order-1 {
order: 1;
margin-top: 10px;
flex: 0 0 50%;
padding-left: 4px;
padding-right: 4px;
}
#cart-summary-checkout .order-4 {
order: 2;
margin-top: 10px;
flex: 0 0 50%;
padding-left: 4px;
padding-right: 4px;
}
#cart-items .order-2 {
justify-content: start !important;
margin-bottom: 1rem;
}
#cart-items .order-2 p {
margin-bottom: 0px !important;
text-align:left !important;
width: 120px;
}
#cart-items .order-2 select {
margin-bottom: 0px !important;
}
#cart-items .order-3 {
justify-content: start !important;
margin-bottom: 1rem;
}
#cart-items .order-3 p {
margin-bottom: 0px !important;
text-align:left !important;
width: 120px;
}
#cart-items .order-4 {
justify-content: start !important;
margin-bottom: 1rem;
}
#cart-items .order-4 p {
margin-bottom: 0px !important;
text-align:left !important;
align-self: flex-end;
width: 120px;
}
#checkout .order-1 {
order: 2;
margin-top: 10px;
padding-left: 4px;
padding-right: 4px;
}
/* Cart: Items Count */
#checkout .order-2 {
  order: 1;
  margin-top: 10px;
  padding-left: 4px;
  padding-right: 4px;
  text-align: left !important;
}
.modal-dialog .back-button-group {
content: "";
font-size: 0.5rem;
}
.modal-dialog .modal-name {
font-size: 0.75rem;
}
.cart-collapse {
display:block;
}
#account-menu-block .nav {
display: flex !important;
flex-direction: row !important;
justify-content: space-around;
width:fit-content;
margin:auto
} 
#account-menu-block li {
width:auto;
padding: 4px;
}
#account-menu-block .nav-link {
padding: 0px;
}
#account-menu-block, #account-data-block {
font-size: 0.75rem;
}
.table th, .table td {
padding: 0.25rem;
}
.order-list {
padding: 0;
}
}