:root {
    --bs-breadcrumb-divider: ">";
    --text-size-lg: 16px;
    --text-size-md: 14px;
    --text-size-sm: 12px;
    --border-radius: 1rem;
    --blur-radius: 8px;
}

/* MEDIA */
@media(min-width:2000px) {
    .container {
        max-width: 1600px;
    }
}

html {
    background-color: var(--theme-color-white);
}

body {
    font-family: var(--theme-font) !important;
    background-color: transparent;
}

main {
    background-color: var(--theme-color-white);
}

hr {
    background-color: var(--theme-color-primary-200);
}

.watermark-tires {
    background-position-y: 10em; /* Use em here to avoid the logo sliding down when page stretches */
    background-position-x: -10%;
    background-repeat: no-repeat;
    background-image: url(/img/site/tiremarks-watermark.svg);
}

/* COLORS */

.background-primary {
    background-color: var(--theme-color-primary);
    color: var(--theme-color-white) !important;
}

    .background-primary * {
        color: var(--theme-color-white) !important;
    }

.background-primary-50 {
    background-color: var(--theme-color-primary-50) !important;
}

.background-primary-100 {
    background-color: var(--theme-color-primary-100) !important;
}

.background-primary-dark {
    background-color: var(--theme-color-primary-dark) !important;
}

    .background-primary-dark * {
        color: var(--theme-color-white) !important;
    }

.background-white {
    background-color: var(--theme-color-white) !important;
}

    .background-white * {
        color: var(--theme-color-black);
    }

.theme-color-primary {
    color: var(--theme-color-primary) !important;
}

.theme-color-black {
    color: var(--theme-color-black) !important;
}

.theme-color-primary-600 {
    color: var(--theme-color-primary-600) !important;
}

.theme-color-paragraph {
    color: var(--theme-color-paragraph) !important;
}

    .theme-color-paragraph * {
        color: inherit;
    }

.theme-color-title {
    color: var(--theme-color-title) !important;
}

.theme-color-secondary {
    color: var(--theme-color-secondary) !important;
}

.theme-color-accent {
    color: var(--theme-color-accent) !important;
}

.theme-color-white {
    color: var(--theme-color-white) !important;
}

.theme-color-error {
    color: var(--theme-color-error) !important;
}

.theme-color-success {
    color: var(--theme-color-success) !important;
}


.theme-color-primary {
    color: var(--theme-color-primary) !important;
}

.theme-color-grey {
    color: var(--theme-color-grey) !important;
}

.theme-color-status-Cancelled {
    color: red !important;
}

.theme-color-status-Invoiced {
    color: green !important;
}

.theme-color-status-Sent {
    color: green !important;
}

.color-warehouse-GBG, .color-warehouse-gbg {
    color: var(--theme-color-warehouse-gbg) !important;
}
.color-warehouse-STHLM, .color-warehouse-sthlm {
    color: var(--theme-color-warehouse-sthlm) !important;
}

.color-warehouse-VDB, .color-warehouse-vdb {
    color: var(--theme-color-warehouse-vdb) !important;
}

.color-warehouse-ISB, .color-warehouse-isb {
    color: var(--theme-color-warehouse-isb) !important;
}

/* COLORS END */

/* HEADER */

header {
    background-color: var(--theme-color-white);
}

    header .row {
        padding: 1rem;
    }

    header nav {
    }

        header nav .nav-item {
            padding-left: 0;
            padding-right: 0;
        }

@media (min-width: 1400px) {
    header nav .nav-item {
        padding-left: .5rem;
        padding-right: .5rem;
    }
}



.header-title-logo {
    max-height: 3rem;
    content: var(--theme-primarylogo);
}

header .dropdown {
    color: var(--theme-color-grey) !important;
}

/* HEADER END */

/* FOOTER */

footer {
    background-color: var(--theme-color-primary);
}

    footer .footer-logo {
        max-height: 3rem;
        object-fit: scale-down;
        visibility: hidden;
    }

#footer-primary-logo {
    visibility: visible;
}

#secondary-logo-1 {
    content: var(--theme-secondary-logo-1);
    visibility: var(--theme-secondary-logo-1-visibility);
}

#secondary-logo-2 {
    content: var(--theme-secondary-logo-2);
    visibility: var(--theme-secondary-logo-2-visibility);
}

/* FOOTER END */

/* FONTS */
.text-size-sm {
    font-size: var(--text-size-sm);
}

.text-size-md {
    font-size: var(--text-size-md);
}

.text-size-lg {
    font-size: var(--text-size-lg);
}

/* FONTS END */

/* TABLES */

.grid-table-striped .grid-table-row:nth-of-type(2n+1) {
    background-color: var(--theme-color-primary-50);
}

.grid-table-collapse {
    overflow-x: auto;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--theme-color-primary-50);
}

tbody > tr > td {
    vertical-align: middle;
}

table > tbody > tr > td {
    font-size: var(--text-size-sm);
}

tbody > tr > td {
    vertical-align: middle;
}

td.cell-truncate {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    max-width: 1px;
}

.sortable-column {
    width: 6rem;
}

.sort {
    cursor: pointer;
}

/* TABLES END */


.align-content-vertical {
    display: inline-table;
}

    .align-content-vertical > div {
        display: table-cell;
        vertical-align: middle;
    }


/* BUTTONS */

.btn {
    border-radius: 2rem;
}

.btn-primary {
    border-color: var(--theme-color-primary) !important;
    background-color: var(--theme-color-primary);
    color: var(--theme-color-white) !important;
    box-shadow: 2px 2px 5px var(--theme-color-accent);
}

    .btn-primary:hover {
        background-color: var(--theme-color-primary);
    }

    .btn-primary:active {
        background-color: var(--theme-color-primary);
    }

    .btn-primary:focus {
        box-shadow: 2px 2px 5px var(--theme-color-accent);
        background-color: var(--theme-color-primary);
    }

.btn-secondary {
    border-color: var(--theme-color-primary) !important;
    background-color: var(--theme-color-white);
    color: var(--theme-color-primary) !important;
    box-shadow: 2px 2px 5px var(--theme-color-accent);
}

    .btn-secondary:hover {
        background-color: var(--theme-color-white);
    }

    .btn-secondary:active {
        background-color: var(--theme-color-white);
    }

    .btn-secondary:focus {
        background-color: var(--theme-color-white);
        box-shadow: 2px 2px 5px var(--theme-color-accent);
    }

    .btn-secondary:checked {
        background-color: var(--theme-color-primary);
    }

.btn-borderless.btn-danger {
    color: var(--theme-color-error);
}

    .btn-borderless.btn-danger:hover {
        background-color: inherit !important;
    }

.btn-borderless {
    border: none !important;
    background-color: inherit;
    color: inherit;
}

.btn-shadowless {
    box-shadow: none;
}

.btn-square {
    border-radius: calc(var(--text-size-sm) / 2);
}

.btn-toggle-input {
    display: none;
}

    .btn-toggle-input:checked + .btn-primary {
        background-color: var(--theme-color-secondary) !important;
        color: var(--theme-color-black) !important;
    }

    .btn-toggle-input:checked + .btn-secondary {
        background-color: var(--theme-color-primary) !important;
        color: var(--theme-color-white) !important;
    }

.btn-toggle-label {
    white-space: nowrap;
    font-size: var(--text-size-sm);
}

.btn-addToCart {
    white-space: nowrap;
}

.btn-table-centered {
    display: block;
    margin: auto;
}


.btn-primary:disabled {
    background-color: var(--theme-color-primary-dark);
    color: var(--theme-color-white);
}

.btn-danger {
    border-color: var(--theme-color-primary) !important;
    background-color: var(--theme-color-white);
    color: red;
    box-shadow: 2px 2px 5px var(--theme-color-accent);
}

    .btn-danger:hover {
        background-color: var(--theme-color-white);
    }

    .btn-danger:active {
        background-color: var(--theme-color-white);
    }

    .btn-danger:focus {
        background-color: var(--theme-color-white);
        box-shadow: 2px 2px 5px var(--theme-color-accent);
    }

    .btn-danger:disabled {
        background-color: var(--theme-color-white);
    }
/* BUTTONS END */

.container-rounded {
    border-radius: calc(var(--border-radius) / 2);
}

/* FORMS */

.input-group > .form-control.form-control-rounded, .input-group-text.input-group-text-rounded {
    border-radius: 2rem;
    background-color: inherit !important;
}

.input-group > :not(:last-child) {
    border-right: none;
}

.input-group > :not(:first-child) {
    border-left: none;
}

.input-group-text.input-group-text-primary {
    background-color: var(--theme-color-primary) !important;
    border-color: var(--theme-color-accent) !important;
    color: var(--theme-color-accent) !important;
}

.input-group-text > i {
    color: inherit !important;
}

.form-control {
    border-radius: 0.2rem;
}

    .form-control.form-control-rounded {
        border-radius: 2rem;
    }

    .form-control:active {
        background-color: inherit !important;
    }

    .form-control:focus {
        background-color: inherit !important;
        box-shadow: none;
    }

.form-control-primary {
    border-color: var(--theme-color-accent);
    background-color: inherit;
    color: var(--theme-color-accent);
}

    .form-control-primary::placeholder {
        color: var(--theme-color-accent);
    }

    .form-control-primary:focus {
        border-color: var(--theme-color-accent);
    }

.form-control-secondary {
    border-color: var(--theme-color-primary);
    background-color: inherit;
    color: var(--theme-color-primary);
}

    .form-control-secondary::placeholder {
        color: var(--theme-color-accent);
    }

    .form-control-secondary:focus {
        border-color: var(--theme-color-primary);
    }


select, .form-select {
    -moz-appearance: none !important;
    background: transparent url('data:image/gif;base64,R0lGODlhBgAGAKEDAFVVVX9/f9TU1CgmNyH5BAEKAAMALAAAAAAGAAYAAAIODA4hCDKWxlhNvmCnGwUAOw==') right center no-repeat !important;
    background-position: calc(100% - 5px) center !important;
}


.form-select {
    border-radius: 2rem;
}

    .form-select:active {
        background-color: inherit !important;
        border-color: inherit !important;
    }

    .form-select:focus {
        background-color: inherit !important;
        border-color: inherit !important;
        box-shadow: none;
    }

.form-select-primary {
    border-color: var(--theme-color-accent);
    background-color: inherit;
    color: var(--theme-color-accent);
}

    .form-select-primary::placeholder {
        color: var(--theme-color-accent);
    }

.form-select-secondary {
    border-color: var(--theme-color-primary);
    background-color: inherit;
    color: var(--theme-color-primary);
}

    .form-select-secondary::placeholder {
        color: var(--theme-color-white);
    }

input:required + label::after,
textarea:required + label::after,
select:required + label::after {
    content: " *";
    color: red;
}

label.error {
    color: red !important;
}

/* FORMS END */

/* CUSTOM PAGES */

.custom-page img {
    max-width: 100% !important;
    object-fit: scale-down;
    height: unset !important;
}

/* CUSTOM PAGES END */

.image-content {
    border-radius: var(--border-radius);
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.breadcrumb-item {
    max-width: 15rem;
}

    .breadcrumb-item.active {
        font-weight: bolder;
    }

.scrollbar-left {
    direction: rtl;
}

    .scrollbar-left div {
        direction: ltr;
    }

.overflow-auto::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.overflow-auto::-webkit-scrollbar-track {
    background: var(--theme-color-lightgrey);
}

.overflow-auto::-webkit-scrollbar-thumb:vertical {
    border-radius: 1rem;
    background-color: var(--theme-color-primary);
    background-image: linear-gradient(to top, var(--theme-color-accent) 0%, var(--theme-color-primary) 100%);
}

.overflow-auto::-webkit-scrollbar-thumb:horizontal {
    border-radius: 1rem;
    background-color: var(--theme-color-primary);
    background-image: linear-gradient(to left, var(--theme-color-accent) 0%, var(--theme-color-primary) 100%);
}

.modal-content {
    border-radius: var(--border-radius);
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.breadcrumb-item.active {
    font-weight: bolder;
}

.language-flag-icon {
    width: 24px;
    margin-right: 0.3rem;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu li:hover .sub-menu {
    visibility: visible;
}

.dropdown-menu .nav-link:not(:last-child) {
    border-bottom: 1px solid var(--theme-color-primary);
}

.dropdown-menu .nav-link {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
}

.dropdown-menu.dropdown-menu-wide {
    min-width: 14rem;
}

.cursor-pointer:hover {
    cursor: pointer;
}
/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}


.pagination > li > a, .pagination > li > * {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.pagination > li:first-child > a, .pagination > li:first-child > * {
    border-top-left-radius: 2rem !important;
    border-bottom-left-radius: 2rem !important;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.pagination > li:last-child > a, .pagination > li:last-child > * {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 2rem !important;
    border-bottom-right-radius: 2rem !important;
}

.collapse-toggle {
    cursor: pointer;
}

    .collapse-toggle[aria-expanded="true"] i.collapse-icon {
        transform: rotate(-180deg);
        transition: 0.3s ease;
    }

    .collapse-toggle[aria-expanded="false"] i.collapse-icon {
        transform: rotate(-0deg);
        transition: 0.3s ease;
    }

    .collapse-toggle[aria-expanded="true"] > span.collapse-toggle-show {
        display: none !important;
    }

    .collapse-toggle[aria-expanded="true"] > span.collapse-toggle-hide {
        display: inline !important;
    }

    .collapse-toggle[aria-expanded="false"] > span.collapse-toggle-show {
        display: inline !important;
    }

    .collapse-toggle[aria-expanded="false"] > span.collapse-toggle-hide {
        display: none !important;
    }

.icon-toggle[aria-expanded="true"] > .icon-default {
    display: none;
}

.icon-toggle[aria-expanded="true"] > .icon-alternate {
    display: inline-block;
}

.icon-toggle[aria-expanded="false"] > .icon-default {
    display: inline-block;
}

.icon-toggle[aria-expanded="false"] > .icon-alternate {
    display: none;
}


nav.breadcrumbs {
    padding-left: 1em;
    padding-right: 1em;
    font-size: var(--text-size-sm);
}

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

.card {
    border-radius: 1rem;
}

    .card.card-borderless {
        border: none !important;
        box-shadow: 2px 2px 5px var(--theme-color-accent);
    }

    .card.card-shadowless {
        box-shadow: none !important;
    }


a.hyperlink {
    text-decoration: none;
}

a.email {
    text-decoration: none;
}

a.phone {
    text-decoration: none;
}

.table-striped > tfoot > tr:not(:first-child) {
    border-top: 1px solid var(--theme-color-primary-200);
    font-size: 14px;
}

.cart-count::before {
    content: "(";
}

.cart-count:empty::before {
    content: "";
}

.cart-count::after {
    content: ")";
}

.cart-count:empty::after {
    content: "";
}

.card-image-container {
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    position: relative; /* If you want text inside of it */
}

.card-image {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.card-image-rounded-right {
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    object-fit: cover;
}

.card-border-soft {
    border: none !important;
    border-color: var(--theme-color-lightgrey);
    box-shadow: 3px 3px 8px var(--theme-color-lightgrey);
}

.news-article-body {
    text-overflow: ellipsis;
    word-wrap: break-word;
    overflow: hidden;
    height: 7.5em;
    line-height: 1.5rem;
}

.blur {
    -webkit-filter: blur(var(--blur-radius));
    -moz-filter: blur(var(--blur-radius));
    -o-filter: blur(var(--blur-radius));
    -ms-filter: blur(var(--blur-radius));
    filter: blur(var(--blur-radius));
    user-select: none;
}

    .blur button:disabled, button[disabled] {
        background-color: var(--theme-color-primary);
    }

.modal-position-bottom-right {
    position: absolute;
    bottom: 5vh;
    right: 5vh;
}

.prefix, .suffix {
    vertical-align: middle;
}

.suffix-marginal::before {
    content: "%"
}

.suffix-percentage::before {
    content: "%"
}

.alert.alert-rounded {
    border-radius: 1em;
}

.icon-lg {
    font-size: 1.5em;
}

.icon-xl {
    font-size: 2em;
}

.icon-xxl {
    font-size: 3rem;
}

.error-title {
    color: var(--theme-color-error-title) !important;
}

.darken {
    background-color: rgba(0,0,0,0.05);
}

.tooltip {
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

.tooltip-inner {
    max-width: 100%;
    text-align: left;
}

    .tooltip-inner p {
        margin: 0 0;
    }

#article-body > img {
    max-width: 100% !important;
    object-fit: scale-down;
    height: unset !important;
}

.modal-product-sheet {
    min-height: 80%;
}

.text-center > input {
    margin-left: auto;
    margin-right: auto;
}

.panel-container > .multi-image-panel:nth-of-type(2n+1) {
    flex-direction: row-reverse;
}

#no-news-placeholder {
    height: 8rem;
    width: 100%;
    color: var(--theme-color-accent);
    display: flex;
    justify-content: center;
    align-items: center;
}

.splide__pagination {
    bottom: -1.2rem;
}

.splide__pagination__page {
    background-color: var(--theme-color-accent);
}

    .splide__pagination__page.is-active {
        background-color: var(--theme-color-primary);
    }

.set-row-image {
    max-height: 4em;
}

.tab-button-list {
    border-bottom: none !important;
}

    .tab-button-list > li:not(:last-of-type) {
        border-right: 2px solid var(--theme-color-accent)
    }

.tab-button {
    padding: 0.5rem;
    border-block-end: 2px solid var(--theme-color-accent);
}

    .tab-button, .tab-button > .nav-link {
        color: var(--theme-color-primary);
        background-color: var(--theme-color-white);
        cursor: pointer;
    }

        .tab-button > .nav-link {
            border: none !important;
        }

        .tab-button.active, .tab-button.active > * > i.fa, .tab-button.active > .nav-link {
            color: var(--theme-color-white) !important;
            background-color: var(--theme-color-primary);
            cursor: pointer;
        }

.ui-state-active {
    border-color: var(--theme-color-accent) !important;
    background: var(--theme-color-primary) !important;
}

.ui-slider-horizontal {
    margin-top: 0.5em;
}

.ui-slider-handle {
    border-radius: 1rem;
}

.ui-slider-horizontal > .ui-slider-handle {
    top: -0.45em !important;
}

.ui-slider-range.ui-widget-header {
    background-color: var(--theme-color-accent);
}

.slider-range.ui-slider.ui-slider-horizontal {
    height: 8px;
}

.border-color-accent {
    border-color: var(--theme-color-accent) !important;
}

.product-card-icon {
    width: 2em;
}

.campaign-label, .winter-approved-icon, .inch-label {
    position: absolute;
    top: 1rem;
}

.campaign-label + .winter-approved-icon {
    top: 4rem !important;
}

.winter-approved-icon + .inch-label {
    top: 4rem !important;
}

.campaign-label + .inch-label {
    top: 4rem !important;
}

.campaign-label + .winter-approved-icon + .inch-label {
    top: 7rem !important;
}

.hidden-img-container {
    display: none;
    position: absolute;
}

.img-icon-s:hover + .hidden-img-container {
    display: inline-block;
    z-index: 5;
    position: absolute;
    border: 1px solid black;
    box-shadow: rgba(0,0,0,0.4) 5px 5px 5px;
}

.copy-button {
    background-color: #fff;
    border: 0;
    outline: 0;
    cursor: pointer;
    opacity: 1;
    position: absolute;
    width: 20px;
    height: 15px;
    z-index: 99;
    border-radius: 24px
}

.custom-tooltip {
    display: none;
    margin-left: 25px;
    padding: 2px;
    background-color: var(--theme-color-primary);
    border-radius: 4px;
    color: #fff;
    z-index: 99;
    position: absolute;
    right: 2rem;
}

.custom-border-right {
    border-right: 2px solid var(--theme-color-accent);
}

.custom-border-top {
    border-top: 2px solid var(--theme-color-accent);
}

.custom-border-bottom {
    border-bottom: 2px solid var(--theme-color-accent);
}