﻿body.search-active {
    overflow: hidden;
}

.top-nav {
    z-index: 1021;
    padding: 0.5rem 0rem;
}
.navbar-nav-row {
    flex-direction:row;
}
.fill-page {
    height: 300vh;
}

.dropdown-menu.language-selector {
    z-index: 1021;
}

.search-bar {
    display: block;
    position: absolute;
    max-width: 45rem;
    width: 100%;
    top: 5rem;
    left: 50%;
    transform: translate(-50%, 0%);
    transition-property: all;
    transition-duration: 300ms;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    transition-delay: 0s;
    height: 0px;
    overflow: hidden;
}

    .search-bar.search-active {
        height: auto;
    }

.search-btn {
    cursor: pointer;
}

.search-form {
    padding-top: 0.5rem;
}

.search-overlay {
    display: none;
    z-index: -1;
    position: fixed;
    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;
}

    .search-overlay.search-active {
        display: block;
        width: 100%;
        height: 100vh;
        background: #000;
        opacity: 0.3;
        backdrop-filter: blur(20px);
    }

.list-group-item.menu1 {
    hyphens: none !important;
    word-break: unset !important;
}

.card {
    word-break: unset !important;
}

.top-10vh {
    top: 10vh !important;
}

.price-container {
    background: var(--bs-gray-200);
    border-radius: 0.25rem;
	z-index: 10 !important;
}

    .price-container .basket-quantity {
        text-align: right;
    }

.delivery-info-block {
    display: none;
}

.carousel.slide {
	height: 50vh !important;
	min-height: 450px;
}

.product-inventory-dot {
    height: 1rem;
    width: 1rem;
    max-width: 1rem;
    position: relative;
}

    .product-inventory-dot.in-stock::after {
        background: var(--bs-success);
    }

    .product-inventory-dot.remote-stock::after {
        background: var(--bs-warning);
    }

    .product-inventory-dot.out-of-stock::after {
        background: var(--bs-danger);
    }

    .product-inventory-dot::after {
        content: '';
        top: 0.25rem;
        height: 1rem;
        width: 1rem;
        border-radius: 50%;
        background-color: inherit;
        position: absolute;
    }

.btn.btn-outline-dark.has-spinner:active {
    background: var(--bs-success);
    color: #fff;
}

/*.btn.btn-outline-dark.has-spinner:visited {
    background: var(--bs-success);
    color: #fff;
}
*/

.start-33 {
    left:33%;
}
.start-67 {
    left: 67%;
}

.favorite.btn {
    min-height: 2.4rem !important;
}

.full-contain-img {
    object-fit: contain;
    -o-object-fit: contain;
    width: 100%;
    height: 100%;
}

    .full-contain-img.product-img {
        width: 70%;
        height: 70%;
        aspect-ratio: 1 / 1;
    }

.highlight {
    background-color: yellow;
}

.is-favorite, .btn-outline-dark:hover.is-favorite {
    color:gold;
}

.col-lg-2 .card {
    margin-bottom: 15px;
}

.form-inline .form-control.search {
    width:400px;
}

button.has-spinner, .basket-amount {
    white-space:nowrap;
}

.spinner {
  display: inline-block;
  opacity: 0;
  width: 0;

  -webkit-transition: opacity 0.25s, width 0.25s;
  -moz-transition: opacity 0.25s, width 0.25s;
  -o-transition: opacity 0.25s, width 0.25s;
  transition: opacity 0.25s, width 0.25s;
}
.has-spinner .fa{
    margin-left: 5px;
}
.has-spinner .spinner {
   display:none;
}
.has-spinner.active {
  cursor:progress;
}
    .has-spinner.active .hide-spin {
        display: none;
    }

    .has-spinner.active .spinner {
        opacity: 1;
        width: 20px;
        display: initial;
    }

.has-spinner.btn-mini.active .spinner {
    width: 10px;
}

.has-spinner.btn-small.active .spinner {
    width: 13px;
}

.has-spinner.btn.active .spinner {
    width: 16px;
}

.has-spinner.btn-large.active .spinner {
    width: 19px;
}

a.has-spinner {
    text-decoration : none;
}


h1 {
    margin:0;
    padding-bottom:10px;
}

.product-quantity, .basket-quantity {
    max-width:75px;
    text-align:right;
}
.basket-quantity-shipment {
    padding-right:12px;
}
.basket-amount {
    text-align: right;
}

textarea {
    min-height: 100px;
}

p.input-margin {
	margin-bottom: 1.84rem;
}

@media (max-width: 768px) {
	html {
		font-size: 10pt;
	}
}

@media (min-width: 768px) {
    .label-inline .control-static {
        display: inline-block;
    }
}
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 768px) {
  .container {
    max-width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1570px;
    }
}

@media (min-width: 2000px) {
    .container {
        max-width: 1970px;
    }
}

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
div[role="main"] .row {
  margin-left: 0px;
  margin-right: 0px;
}


/*aside[role="menu"] {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
  display: none;
  margin-bottom: 20px;
}*/
@media (min-width: 992px) {
  /*aside[role="menu"] {
    float: left;

    display: block;
  }*/
  /*div[role="main"] {
    width:75%;
}*/

}

/*div[role="main"] {
    width:78%;
    float:left;
}*/

.category-menu {
  display: none;
}
@media (max-width: 992px) {
.category-menu {
  display: block;

}
body {
    padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set widths on the form inputs since otherwise they're 100% wide */
input,
select,
textarea {
    max-width: 280px;
}

/* Carousel */
.carousel-caption {
    z-index: 10 !important;
}

    .carousel-caption p {
        font-size: 20px;
        line-height: 1.4;
    }

@media (min-width: 768px) {
    .carousel-caption {
        z-index: 10 !important;
    }
}
