html { scroll-behavior: smooth; }

/** {*/
    /*font-family: "Outfit";*/
/*}*/

.russo, .nav-link, h1, h2, h3, h4, h5 {
    /*font-family: "Russo One", serif;*/
    /*font-weight: 400;*/
    /*font-style: normal;*/
}

/*.outfit {*/
/*    font-family: "Outfit";*/
/*}*/

header {
    -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.25);
}

.page-wrapper {
    padding-top: 8rem;
}
@media (min-width: 768px) {
    .page-wrapper {
        padding-top: 5rem;
    }
}
.scroll-down-btn {
    display: inline-block;
    text-decoration: none;
}
.scroll-down-btn p {
    margin-top: 1.25rem;
    color: white;
    font-size: .875rem;
    font-weight: 500;
    letter-spacing: .375rem;
    text-indent: .375rem;
    animation: colorText 5s ease-out infinite, nudgeText 5s ease-out infinite;
}
.mouse {
    background: #2c333e linear-gradient(transparent 0%, transparent 50%, white 50%, white 100%);
    position: relative;
    width: 38px;
    height: 65px;
    margin: 0 auto;
    border-radius: 6rem;
    background-size: 100% 200%;
    animation: colorSlide 5s linear infinite, nudgeMouse 5s ease-out infinite;
}
.mouse:before, .mouse:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}
.mouse:before {
    width: 34px;
    height: 61px;
    background-color: #121519;
    border-radius: 6rem;
}
.mouse:after {
    background-color: white;
    width: .375rem;
    height: .375rem;
    border-radius: 100%;
    animation: trackBallSlide 5s linear infinite;
}
@keyframes colorSlide {
    0% { background-position: 0% 100%; }
    20% { background-position: 0% 0%; }
    21% { background-color: #2c333e; }
    29.99% {
        background-color: white;
        background-position: 0% 0%;
    }
    30% {
        background-color: #2c333e;
        background-position: 0% 100%;
    }
    50% { background-position: 0% 0%; }
    51% { background-color: #2c333e; }
    59% {
        background-color: white;
        background-position: 0% 0%;
    }
    60% {
        background-color: #2c333e;
        background-position: 0% 100%;
    }
    80% { background-position: 0% 0%; }
    81% { background-color: #2c333e; }
    90%, 100% {
        background-color: white;
    }
}
@keyframes trackBallSlide {
    0% {
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }
    6% {
        opacity: 1;
        transform: scale(0.9) translateY(5px);
    }
    14% {
        opacity: 0;
        transform: scale(0.4) translateY(40px);
    }
    15%, 19% {
        opacity: 0;
        transform: scale(0.4) translateY(-20px);
    }
    28%, 29.99% {
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }
    30% {
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }
    36% {
        opacity: 1;
        transform: scale(0.9) translateY(5px);
    }
    44% {
        opacity: 0;
        transform: scale(0.4) translateY(40px);
    }
    45%, 49% {
        opacity: 0;
        transform: scale(0.4) translateY(-20px);
    }
    58%, 59.99% {
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }
    60% {
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }
    66% {
        opacity: 1;
        transform: scale(0.9) translateY(5px);
    }
    74% {
        opacity: 0;
        transform: scale(0.4) translateY(40px);
    }
    75%, 79% {
        opacity: 0;
        transform: scale(0.4) translateY(-20px);
    }
    88%, 100% {
        opacity: 1;
        transform: scale(1) translateY(-20px);
    }
}
@keyframes nudgeMouse {
    0%, 30%, 60%, 90% { transform: translateY(0); }
    20%, 50%, 80% { transform: translateY(8px); }
}
@keyframes nudgeText {
    0%, 30%, 60%, 90% { transform: translateY(0); }
    20%, 50%, 80% { transform: translateY(2px); }
}
@keyframes colorText {
    21%, 51%, 81% { color: #2c333e; }
    30%, 60%, 90% { color: white; }
}

.page-loading {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: all .4s .2s ease-in-out;
    transition: all .4s .2s ease-in-out;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    z-index: 9999;
}
.dark-mode .page-loading {
    background-color: #121519;
}
.page-loading.active {
    opacity: 1;
    visibility: visible;
}
.page-loading-inner {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: opacity .2s ease-in-out;
    transition: opacity .2s ease-in-out;
    opacity: 0;
}
.page-loading.active > .page-loading-inner {
    opacity: 1;
}
.page-loading-inner > span {
    display: block;
    /*font-family: 'Inter', sans-serif;*/
    font-size: 1rem;
    font-weight: normal;
    color: #6f788b;
}
.dark-mode .page-loading-inner > span {
    color: #fff;
    opacity: .6;
}
.page-spinner {
    display: inline-block;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: .75rem;
    vertical-align: text-bottom;
    background-color: #d7dde2;
    border-radius: 50%;
    opacity: 0;
    -webkit-animation: spinner .75s linear infinite;
    animation: spinner .75s linear infinite;
}
.dark-mode .page-spinner {
    background-color: rgba(255,255,255,.25);
}
@-webkit-keyframes spinner {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    50% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes spinner {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    50% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}

#navbarNav ul li a:not(.btn) {
    font-size: 1.2em;
}
#navbar-logo {
    /*height: 50px;*/
    /*width: 200px;*/
    max-height: 30px;
}
#navbar-logo-beeldmerk {
    /*height: 50px;*/
    /*width: 200px;*/
    height: 30px;
}
#navbar-search-group {
    padding-top: 0rem;
    padding-bottom: 0rem;
    margin-top: 0.3rem;
}
#navbar-search-group .btn {
    --ar-btn-size: 2rem;
    margin-top: 0.2rem;
}

.hidden {
    display:none !important;
}

#search-loader {
    background: none;
    display: none;
}

#search-suggestions-error,
#search-suggestions-empty {
    display: none;
}

.footer-nav-link:hover {
    color: rgba(255, 255, 255, 0.5);
}

.shopping-cart-preview-item {
    transform-origin: top;
    transition: transform 400ms ease-in-out;
}
.shopping-cart-preview-item.removed {
    transform: scaleY(0);
}

.amount-counter {
    min-width: 100px;
    max-width: 170px;
}
.amount-counter .form-control {
    width: auto;
}

.amount-counter *.disabled {
    border: 0;
    opacity: 0.5;
}

.empty-element, .loading-element, .error-element {
    display: flex;
    flex-direction: column;
    min-height: 300px;
    align-items: center;
    justify-content: center;
}

.btn-loader {
    display: none;
}
.btn.loading .btn-loader {
    display: block;
}
.btn.loading .btn-text {
    display: none;
}

#dashboard-sidebar-nav .nav-link.active {
    pointer-events: all;
    cursor: pointer;
}

/*.search-products-form .search-products-reset-btn, .search-products-form .search-products-loader {*/
/*    display: none;*/
/*}*/

.search-results-image-placeholder-wrapper {
    display: block;
    width: 100px;
    height: 100px;
    position: relative;
}
.search-results-image-placeholder-wrapper.small {
    width: 75px;
    height: 75px;
}
.search-results-image-placeholder-wrapper img {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
}
.product-amount-input {
    min-width: 50px;
}
.cursor-pointer {
    cursor: pointer;
}

.form-input-icon {
    top: 25px !important;
}

.product-image-wrapper {
    position: relative;
    height: 300px;
}
.product-grid-image {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
    max-width: 90%;
    max-height: 90%;
}

.fw-600 {
    font-weight: 600;
}

.stock-badge {
    position: absolute;
    top: 0; left: 0;
}

.pulsing-badge {
    display: inline-block;
    border-radius: 50%;
    color: #fff;
    position: relative;
    width: 25px;
    height: 25px;
    text-align: center;
    font-size: 15px;
}
.pulsing-badge-lg {
    width: 37px;
    height: 37px;
    font-size: 20px;
}
.bg-orange {
    background-color: #f39c12;
}
.text-orange {
    color: #f39c12;
}

.bg-purple {
    background-color: #8e44ad;
}
.text-purple {
    color: #8e44ad;
}

.pulsing-badge::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation: pulse 1s ease infinite;
    border-radius: 50%;
    border-width: 4px;
    border-style: double;
}
.pulsing-badge.bg-success::before {
    border-color: var(--ar-success);
}
.pulsing-badge.bg-orange::before {
    border-color: #f39c12;
}
.pulsing-badge.bg-danger::before {
    border-color: var(--ar-danger);
}


@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    60% {
        transform: scale(1.3);
        opacity: 0.4;
    }
    100% {
        transform: scale(1.4);
        opacity: 0;
    }
}

.action-ribbon, .ordered-before-ribbon {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    z-index: 2;
}
.action-ribbon.small {
    font-size: 12px;
}
.action-ribbon.large {
    font-size: 28px;
}
.action-ribbon:hover, .ordered-before-ribbonHover {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
}
.action-ribbon, .ordered-before-ribbon {
    --f: .5em; /* control the folded part */

    position: absolute;
    top: 0;
    right: 0;
    line-height: 1.8;
    padding-inline: 1lh;
    padding-bottom: var(--f);
    border-image: conic-gradient(var(--ar-danger) 0 0) 51%/var(--f);
    clip-path: polygon(
            100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
    transform: translate(calc((1 - cos(45deg))*100%), -100%) rotate(45deg);
    transform-origin: 0% 100%;
    background-color: var(--ar-danger); /* the main color  */
}

.ordered-before-ribbon {
    background-color: #f39c12;
    border-image: conic-gradient(#f39c12 0 0) 51%/var(--f);
    font-size: 10px;
    transform: translate(calc((1 - cos(25deg))*100%), -100%) rotate(25deg);
}

/* HTML: <div class="ribbon">Your text content</div> */
.action-ribbon.left, .ordered-before-ribbon.left {
    left: 0;
    right: auto;
    clip-path: polygon(
            100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
    transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
    transform-origin: 100% 100%;
}

#navbar-search-form {
    /*width: 375px;*/
}

#search-modal-input {
    transition: all 300ms ease-in-out;
}
#search-modal-input:focus {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-color: var(--ar-border-width) solid var(--ar-gray-400) !important;
}
#navbar-search-suggestions-dropdown-menu {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}
#navbar-search-suggestions-dropdown:hover > #navbar-search-suggestions-dropdown-menu {
    display: block;
}

#navbar-search-suggestions-dropdown {
    /*display: none;*/
    position: absolute;
    top: 45px; left: 0;
    width: 100%;
    max-height: 0;
    /*min-height: 300px;*/
    /*height: 0;*/
    background: #fff;

    transition: all 0.4s ease-in-out;
    overflow: hidden;
    padding: 1rem !important;

    border-bottom-left-radius: var(--ar-border-radius-sm);
    border-bottom-right-radius: var(--ar-border-radius-sm);
    box-shadow: var(--ar-dropdown-box-shadow);
    border: var(--ar-border-width) solid var(--ar-gray-700);
    border-top: none;

    visibility: hidden;
}
#navbar-search-suggestions-dropdown.open {
    visibility: visible;
    max-height: 800px;
}

.navbar-toggler-icon, .navbar-toggler-icon:before, .navbar-toggler-icon:after {
    background-color:  var(--ar-primary);
}

.navbar-badge {
    min-width: 50px;
}

.sidebar-badge {
    min-width: 60px;
}

#search-suggestions-history-list a {
    text-transform: capitalize;
}

.product-grid-item-btn {
    --ar-btn-size: 1.75rem !important;
    font-size: 0.6rem !important;
}

#toast-container {
    position: fixed !important;
    right: 1rem; bottom: 1rem;
}

.bootstrap-select>.dropdown-toggle.bs-placeholder {
    color: var(--ar-gray-500);
}
.bootstrap-select>.dropdown-toggle {
    border: var(--ar-border-width) solid var(--ar-gray-400);
    font-weight: 400;
    padding-left: 1rem;
}
.was-validated .bootstrap-select select:invalid+.dropdown-toggle {
    border-color: #ed5050;
}
.was-validated .bootstrap-select select:valid+.dropdown-toggle {
    border-color: #3fca90;
}
.was-validated .bootstrap-select:has(select:invalid) ~ .invalid-tooltip {
    display: table;
}

.text-right {
    text-align: right;
}

.product-index-image-wrapper {
    width: 275px;
    max-width: 100%;
    height: 275px;
    max-height: 100%;
    position: relative;
}

.product-index-image {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    margin: auto;
    max-width: 80%;
    max-height: 80%;
}