/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {

}

/* Extra extra large devices (extra large desktops, 1400px and up) */
@media (min-width: 1400px) {

}

.minw-215 {
    min-width: 215px;
}

.bg-danger-subtle-hover.collapsed {
    background-color: var(--bs-gray-500) !important;
}

.bg-danger-subtle-hover.collapsed span.text-danger-subtle-hover {
    color: var(--bs-gray-500) !important;
}

.shop.container {
    max-width: 100% !important;
}

.ratio-9x16{
    aspect-ratio: 9/16;
}

.zoom:hover {
    transform: scale(1.05);
}

.z-4 {
    z-index: 4 !important;
}

.accordion-button::after {
    display: none;
}

.hover-tentive:hover {
    filter: grayscale(1);
}

.hover-bg-error:hover {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
}

.hover-text-white:hover {
    color: white !important;
}

.polaroid:hover {
    transform: scale(1.1) !important;
    rotate: 0deg !important;
    transition: all 0.3s ease-in-out;
    box-shadow: var(--bs-box-shadow-lg) !important;
}

#siteNavigation a:hover, .text-danger-subtle-hover:hover:not(.no-hover) {
    color: var(--bs-primary-AAA) !important;
    /* color: #3a5095 !important */
}

.btn:is(.btn-success):hover {
    background-color: #00529b !important;
    color: #FFFFFF !important;
    border-color: #00529b !important;
}

.btn:not(.btn-success):not(.hover-bg-error):hover {
    background-color: #8dc63f !important;
    color: #FFFFFF !important;
    border-color: #8dc63f !important;
}

.cursor-pointer {
    cursor: pointer;
}

.stock-locations-trigger {
    cursor: help;
}

.stock-locations-popover-container {
    max-width: none !important;
}

.stock-locations-popover {
    padding: 0;
    overflow-x: auto;
}


@media all and (display-mode: standalone) {
    #btnInstallApplication, #alertInstalledApplicationNotOpen {
        display: none;
    }
}

@media (min-width: 0) {
    #btnInstallApplication {
        display: none;
    }

    #topNavigationButtons {
        height: 30vh;
        position: relative;
    }

    #topNavigationButtons .logo {
        height: 30vh;
        object-fit: contain;
        position: absolute;
        top: 0;
        transform: translate(-50%, 0);
        -webkit-transform: translate(-50%, 0);
        -moz-transform: translate(-50%, 0);
    }

    #topNavigationButtons .logo.sticky-top {
        position: sticky !important;
    }

    #topNavigationButtons .logo.animate {
        animation-name: homeLogoShrink;
        animation-fill-mode: forwards;
        animation-duration: 3s;
        animation-timing-function: ease-in-out;
    }

    .topGradient {
        background: linear-gradient(to bottom, var(--bs-info-lightest) 0%,  #ffffff 20%,  #ffffff 100%);
        background-size: 100% 250px;
        background-repeat: no-repeat;
    }

    .topGradient.success {
        background: linear-gradient(to bottom, var(--bs-success-lightest) 0%,  #ffffff 20%,  #ffffff 100%);
    }
    
    .topGradient.danger {
        background: linear-gradient(to bottom, var(--bs-danger-lightest) 0%,  #ffffff 20%,  #ffffff 100%);
    }

    .topGradient.primary {
        background: linear-gradient(to bottom, var(--bs-primary-lightest) 0%,  #ffffff 20%,  #ffffff 100%);
    }
    
    .halfGradient.primary {
        background: linear-gradient(to bottom, var(--bs-primary-lightest) 0%,  #ffffff 50%,  #ffffff 100%);
    }

    .bottomFullGradient {
        background: linear-gradient(to top, var(--bs-info-lightest) 0%,  #ffffff 70%,  #ffffff 100%);
    }

    .bottomFullGradient.success {
        background: linear-gradient(to top, var(--bs-success-lightest) 0%,  #ffffff 70%,  #ffffff 100%);
    }

    .bottomFullGradient.primary {
        background: linear-gradient(to top, var(--bs-primary-lightest) 0%,  #ffffff 70%,  #ffffff 100%);
    }

    .topFullGradient {
        background: linear-gradient(to bottom, var(--bs-info-lightest) 0%,  #ffffff 70%,  #ffffff 100%);
    }
    
    #recycle-commitment .topFullGradient {
        background: linear-gradient(to bottom, rgba(232, 241, 250, 0.85) 0%,  rgba(255, 255, 255, 0.85) 70%,  rgba(255, 255, 255, 0.85) 100%);
    }

    .accordionGradient {
        background: linear-gradient(to top, var(--bs-info-lightest) 0%,  #ffffff 70%,  #ffffff 100%);
    }

    #gallery > div {
        animation-fill-mode: forwards;
        animation-name: fadeInFromNone;
        animation-duration: 1s;
    }

    #homepageCards.mobile > .row a:nth-child(1) {
        animation-delay: 2.7s
    }

    main #homepageCards {
    }

    #homepageCards > .row {
        height: 70vh;
    }

    #homepageCards > .row a {
        opacity: 1;
        margin-top: 0;
        /*animation-fill-mode: forwards;*/
        /*animation-name: fadeInFromNone;*/
        /*animation-duration: .5s;*/
    }

    #homepageCards.mobile > .row a:nth-child(1) {
        animation-delay: .7s
    }

    #homepageCards.mobile > .row a:nth-child(2) {
        animation-delay: .9s
    }

    #homepageCards.mobile > .row a:nth-child(3) {
        animation-delay: 1.1s
    }

    #homepageCards.mobile > .row a:nth-child(4) {
        animation-delay: 1.3s
    }

    #homepageCards.desktop > .row a:nth-child(1) {
        animation-delay: .7s
    }

    #homepageCards.desktop > .row a:nth-child(2) {
        animation-delay: .9s
    }

    #homepageCards.desktop > .row a:nth-child(3) {
        animation-delay: 1.1s
    }

    #homepageCards.desktop > .row a:nth-child(4) {
        animation-delay: 1.3s
    }

    #homepageCards .card {
        height: 35vh;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    #homepageCards .card .card-header {
        justify-content: center;
        align-items: center;
        height: 15vh;
    }

    #homepageCards .card-title {
        font-size: clamp(46px, 6vh, 58px)
    }

    #homepageCards .card-image img {
        height: 20vh;
    }
}



/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 376px) {
    .right-vin, .left-vin {
        background: rgba(0,0,0,0.7);
    }

    .ohPoloroidBorder {
        border-width: 6px !important;
    }
}

@media (min-width: 576px) {
    #homepageCards .card {
        height: 70vh;
    }

    #homepageCards .card .card-header {
        height: 20vh;
    }

    #homepageCards .card-image img {
        height: 50vh;
    }


}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .right-vin {
        background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 75%);
    }

    .left-vin {
        background: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 75%);
    }

    .ohPoloroidBorder {
        border-width: 10px !important;
    }
}

.oh-date {
    font-size: 4rem;
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .ohPoloroidBorder {
        border-width: 16px !important;
    }


}

/*X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
}

/*XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
}



.offcanvas-backdrop {
    z-index: 99999;
}

#seasonalColoursTable > * > *:not(:last-child) {
    border-bottom: solid 1px #ccc;
}

.btn-tag:before{
    /*content: '';*/
    position: absolute;
    top: 100%;
    left: 0;
    border-width: 0 12px 12px 0;
    border-color: transparent #8dc63f transparent transparent;
    border-style: solid;
}

.tooltip {
    z-index: 999999999;
}

#productGalleryImage {
    transition: all 0.3s;
}

.product-listing-border {
    border-left: solid 1px rgba(161, 192, 216, 0.2) !important;
    border-right: solid 1px rgba(161, 192, 216, 0.2) !important;
    top: 0;
    bottom: 0;
    left: calc(var(--bs-gutter-x) * 0.5);
    right: calc(var(--bs-gutter-x) * 0.5);
    width: auto;
}

button.bg-success:hover {
    background-color: rgba(var(--bs-primary-rgb), var(--bs-bg-opacity)) !important;
}

.homepage-titles {
    font-size: 6vh;
}

a:has(.homepage-titles):hover .homepage-titles {
    opacity: 0.9;
    cursor: pointer;
}

/* Social Media Slide-out Container */
.social-slideout {
    position: relative;
    display: inline-block;
    overflow: hidden;
    transition: all 0.5s
    ease-in-out;
    width: 39px;
    height: 40px;
    vertical-align: middle;
    margin-left: 5px;
    background-color: #eee;
    border-radius: 50px;
}

.social-slideout:hover {
    width: 205px;
    background-color: #eee;
}

.social-slideout-inner {
    display: flex;
    gap: 0px;
    white-space: nowrap;
    align-items: center;

    /* padding: 3px 0; */
    height: 40px;
}


.social-slideout .fa-stack {
    flex-shrink: 0;
    font-size: 16px;
}

.social-slideout a {
    text-decoration: none;
}

.offcanvas.offcanvas-bottom {
    height: 60vh;
}

body {
    font-family: 'Roboto', sans-serif;
}

#topNavigationButtons .text-success:hover, a.text-success:hover {
    color: #00529B !important;
}

#siteNavigation .h5 {
    font-family: 'Signika', sans-serif;
    font-weight: 600;
}

.text-signika {
    font-family: 'Signika', sans-serif;
}

.text-primary-subtle {
    color: var(--bs-primary-bg-subtle);
}

.text-primary-subtle-hover, a.text-primary-subtle:hover {
    color: var(--bs-primary-bg-subtle-hover) !important;
}

.text-success-subtle-hover, a.text-success-subtle:hover {
    color: var(--bs-success-bg-subtle-hover) !important;
}



.text-info-subtle-hover, a.text-info-subtle:hover {
    color: var(--bs-info-bg-subtle-hover) !important;
}

.text-danger-subtle-hover, a.text-danger-subtle:hover {
    color: var(--bs-danger-bg-subtle-hover) !important;
}

.form-floating > .form-control:focus ~ label::after, .form-floating > .form-control:not(:placeholder-shown) ~ label::after, .form-floating > .form-control-plaintext ~ label::after, .form-floating > .form-select ~ label::after {
    background-color: transparent;
}

*:focus {
    outline: none !important;
    box-shadow: none !important;
}

#siteNavigation .bg-primary-subtle, .bg-special-offer {
    background-color: var(--bs-primary-lightest) !important;
}

#siteNavigation .bg-success-subtle {
    background-color: var(--bs-success-lightest) !important;
}

#siteNavigation .bg-info-subtle {
    background-color: var(--bs-info-lightest) !important;
}



#siteNavigation .bg-danger-subtle {
    background-color: var(--bs-danger-lightest) !important;
}

a {
    text-decoration: none !important;
}

footer a, footer h4 {
    color: var(--bs-gray);
}

.modal-backdrop {
    z-index: 99999999;
}

#homepageCards a * {
    transition: background-color 0.3s ease-in-out;
}

#homepageCards a:hover .bg-primary-subtle {
    background-color: var(--bs-primary-bg-subtle-hover) !important;
}

#siteAdvancedSearch .bg-primary-subtle, #product-listing-container .bg-primary-subtle, .hover-bg-success-subtle:hover {
    background-color: rgba(161, 192, 216, 0.2) !important;
}

#homepageCards a:hover .bg-success-subtle {
    background-color: var(--bs-success-bg-subtle-hover) !important;
}

#homepageCards a:hover .bg-info-subtle {
    background-color: var(--bs-info-bg-subtle-hover) !important;
}

#homepageCards a:hover .bg-danger-subtle {
    background-color: var(--bs-danger-bg-subtle-hover) !important;
}

.productListingTemplate hr {
    border-color: var(--bs-secondary) !important;
}

.bg-blur {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.bg-white-transparent {
    background-color: rgba(255,255,255,0.94);
}

.bg-white-transparent-more {
    background-color: rgba(255,255,255,0.60);
}

.page-link.active, .active > .page-link {
    background-color: var(--bs-green);
    border-color: var(--bs-green);
}

.page-link {
    color: var(--bs-primary-bg-subtle);
}

a.productListingTemplate:hover .text-primary-subtle-hover {
    color: var(--bs-green) !important;
}

.btn.btn-outline-secondary:hover {
    background-color: var(--bs-green) !important;
}

.btn.btn-primary.bg-primary-subtle {
    border: solid 1px var(--bs-primary-bg-subtle);
}

#topNavigationButtons > .fixed-top {
    padding: 2vh 0 0;
    /*height: 15.1vh; xmas logo*/
    height: 10vh;
    min-height: 4vh;
}

.filter-greyscale {
    filter: grayscale(1);
}

@media (min-width: 768px) {
    .fs-md-2 {
        font-size: calc(1.325rem + 0.9vw) !important;
    }
    .fs-md-5 {
        font-size: 1.25rem !important;
    }
}

/** {*/
/*    transition: all .3s;*/
/*}*/

.hueRotate {
    filter: grayscale(100);
}

.hueRotate:hover {
    filter: grayscale(0)
}

.filter-blur {
    filter: blur(2px);
}

.hover-bg-white:hover {
    background-color: white !important;
    transition: all .5s;
}

.hover-bg-success:hover {
    background-color: var(--bs-success) !important;
}

.hover-bg-tertiary-hover:hover {
    background-color: rgb(230, 230, 230) !important;
}

.hover-text-success:hover {
    color: var(--bs-success) !important;
    transition: all .5s;
}

.drag {
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}

.drag:active {
    cursor: grabbing;
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
}

#siteProductInformation .offcanvas-body::-webkit-scrollbar-track, #siteMiniTrolley .offcanvas-body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

#siteProductInformation .offcanvas-body::-webkit-scrollbar, #siteMiniTrolley .offcanvas-body::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}

#MeetTheTeam .offcanvas-body::-webkit-scrollbar-thumb, #siteMiniTrolley .offcanvas-body::-webkit-scrollbar-thumb {
    background-color: var(--bs-primary-bg-subtle-hover);
}

#MeetTheTeam .offcanvas-body::-webkit-scrollbar-track, #siteMiniTrolley .offcanvas-body::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #F5F5F5;
}

#MeetTheTeam .offcanvas-body::-webkit-scrollbar, #siteMiniTrolley .offcanvas-body::-webkit-scrollbar {
    width: 6px;
    background-color: #F5F5F5;
}

#siteProductInformation .offcanvas-body::-webkit-scrollbar-thumb, #siteMiniTrolley .offcanvas-body::-webkit-scrollbar-thumb {
    background-color: var(--bs-danger-bg-subtle-hover);
}

#productGallery::-webkit-scrollbar-track, .calendarWrapper::-webkit-scrollbar-track, .blue-scrollbar::-webkit-scrollbar-track, .green-scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.3);
    background-color: #cccccc;
}

#productGallery::-webkit-scrollbar, .calendarWrapper::-webkit-scrollbar, .blue-scrollbar::-webkit-scrollbar, .green-scrollbar::-webkit-scrollbar {
    width: 1px;
    height: 4px;
    background-color: #F5F5F5;
}

#productGallery:hover::-webkit-scrollbar, .calendarWrapper:hover::-webkit-scrollbar, .blue-scrollbar:hover::-webkit-scrollbar, .green-scrollbar::-webkit-scrollbar {
    height: 15px;
}

#productGallery::-webkit-scrollbar-thumb, .calendarWrapper::-webkit-scrollbar-thumb, .blue-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--bs-primary);
}

.green-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--bs-success);
}


#logoLeaf {
    position: absolute;
    /*height: 13vh; xmas logo*/
    height: 8vh;
    left: 50%;
    transform: translate(-50%, 0);
    transition: transform 0.6s ease-in-out;
}

#logoLeaf.hidden {
    transform: translate(0, -30vh);
}

@keyframes fadeInFromNone {
    0% {
        /*margin-top: -20px;*/
        display: none;
        opacity: 0;
    }

    1% {
        /*margin-top: -20px;*/
        display: block;
        opacity: 0;
    }

    100% {
        /*margin-top: 0px;*/
        display: block;
        opacity: 1;
    }
}


@keyframes homeLogoShrink {
    0% {
        height: 100vh;
        max-width: 90vw;
        display: none;
        opacity: 0;
    }

    1% {
        height: 100vh;
        max-width: 90vw;
    }

    40% {
        height: 100vh;
        max-width: 90vw;
    }

    100% {
        height: 30vh;
        max-width: 90vw;
        display: block;
        opacity: 1;
    }
}

.table-striped-blue > tbody > tr:nth-of-type(odd) > * {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: rgba(161, 192, 216, 0.2);
}

.table-striped-blue.table-hover > tbody > tr:hover > * {
    --bs-table-color-state: var(--bs-table-striped-color);
    --bs-table-bg-state: rgba(161, 192, 216, 0.1) !important;
}