header.subnav__header {
    background: #fff;
    padding: 0.2rem 0 0;
    z-index: 1;
}

nav {
    display: block;
}

.flex {
    display: flex;
}

.subnav__primary {
    padding: 0.25em 0;
    margin-top: 0.25em;
    margin-bottom: 0.35em;
    display: flex;
    position: relative;
    scroll-snap-type: x;
    scroll-padding: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
	-webkit-overflow-scrolling: touch; /* Mjuk scrollning för iOS */
	scroll-padding-right: 50%; /* Justera detta värde om det behövs */
}

.last-subnav-item {
    margin-right: 50%; /* Justera detta värde baserat på objektets faktiska bredd */
}

.subnav__tags li:first-child {
    padding-left: 14px;
}

.subnav-item {
	white-space: nowrap;
    display: flex;
    margin-right: 9px;
    padding-left: 3px;
}

.subnav-item .nav-item-link {
    padding: 6px 12px;
}

.subnav .nav-item-link {
    color: #d8e5f3;
    text-shadow: none;
    font-weight: 700;
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: 1px;
    text-underline-offset: 1px;
    border-radius: 11px;
    font-size: 1rem;
    background-color: #1f2a36;
    transition: .2s border ease-in-out,.2s box-shadow ease-in-out;
    border: 1px solid #1f2a36;
}

.subnav a, .subnav button {
    display: flex;
    align-items: center;
    text-decoration: none;
}
.button-group {
    display: flex;
    align-items: center;
    justify-content: start;
}

.custom-subnav-button-group {
    display: flex;
    align-items: center;
    justify-content: start;
}

.custom-subnav-button-wrapper {
    display: flex;
    gap: 10px; /* space between buttons */
}

ul.subnav__primary.subnav__tags.flex {
    margin: 0;
}
.subnav .nav-item-link:hover {
    color: #1f2a36;
    text-shadow: none;
    font-weight: 700;
    border-radius: 11px;
    background-color: #d8e5f3;
	border: 1px solid #1f2a36;
}


/* 4. Rullning med knappar: Stil för knapparna */
.subnav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.2);
    padding: 10px 15px;
    cursor: pointer;
    z-index: 10;
    display: none; /* göm som standard, visas med JS om det behövs */
}

.subnav-button.left {
    left: 0;
}

.subnav-button.right {
    right: 0;
}


/* Scroll-bar*/
/* Stil för webbläsare baserade på Webkit (t.ex. Chrome, Safari) */
.subnav__primary::-webkit-scrollbar {
    width: 42px; /* Bredd på scrollbaren */
	height:10px;
}


.subnav__primary::-webkit-scrollbar-track {
    background: #d8e5f3;/* Bakgrundsfärg för scrollbaren */
}

.subnav__primary::-webkit-scrollbar-thumb {
    background: #4074a2;  /* Färg på själva scroll-handtaget */
}

.subnav__primary::-webkit-scrollbar-thumb:hover {
    background: #1f2a36; /* Färg på scroll-handtaget när muspekaren är över */
}

/* Stil för Firefox */
.subnav__primary {
    scrollbar-width: thin; /* Gör scrollbaren tunnare */
    scrollbar-color: #4074a2 ; /* Först färgen på scroll-handtaget, sedan bakgrundsfärgen */
}

/* */

.subnav::after {
    content: '';
    position: absolute;
    right: 0px;
    top: 0;
    bottom: 0;
    width:60px;
    background: linear-gradient(to right, transparent, #ffffff);
    pointer-events: none; /* make sure this gradient does not interfere with clicks */
}