:root {
        --font-sans: -apple-system, BlinkMacSystemFont, "Open Sans", Helvetica, Arial, sans-serif;
        --font-serif: Georgia, Times, Times New Roman, serif;
        --font-serif-2: "Playfair Display", Times, Times New Roman, serif;
        --grey: #666;
        --grey2: #999;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
        --bm-h: 750px;
        --h-h: 100px; 
}
    }
    :root::-webkit-scrollbar {display: none; /* WebKit browsers */   } 

    /* body {margin: 0; height: 100%; overflow: hidden} */

    body {background-color: #1e1e1e; overflow-x: hidden}

    .flex {display: flex;}
    
    /* HEADER */
    .header-menu-container {
        display: flex;
        width: calc(100vw - 2em);
        flex-direction: row;
        gap: 1em;
        font-family: var(--font-sans);
        margin: 1em;
        align-items: center;
        
    }

    .header-menu-container ul li a {
        padding: 1em !important;;
        color: var(--grey2) !important;;
        background-color: transparent;
        border: none;
        transition: background-color 0.3s ease;
        border-radius: 0.75em;
        font-size: 1em;
    }

    .header-menu-container ul li:first-of-type {margin-left: 0em}

    .header-menu-container ul li a:hover { background-color: #ffffff15; transition: background-color 0.3s ease; color: #ddd;}

    .header-links {display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0;}

.menu-item {
    position: relative;
    display: flex;
}

.secondary-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #1e1e1e;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(-10px);
    z-index: 1000;
    list-style: none;
    padding: 0.5em 0;
    margin: 0;
    width: max-content;
    border-radius: 1em;
}

.secondary-menu li {
    margin: 0;
}

.secondary-menu a {
    display: block;
    padding: 0.5em 1em;
    color: #fff;
    text-decoration: none;
}

.secondary-menu a:hover {
    background-color: #333;
}

.menu-item:hover .secondary-menu,
.menu-item.active .secondary-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
    .header-menu-container .switch {
        justify-content: flex-end;
        padding: 1em;
        font-size: 1em;
        border-radius: 0.75em;
        background-color: #ffffff15;
        border: none;
        color: #ddd;
        align-items: center;
         display: flex;
        gap: 0.5em;
        max-height: 56px;
        transition: background-color 0.5s ease-in-out;
        margin-left: auto;
        position: relative;
    }

    .header-menu-container .switch:hover { cursor: pointer}
    .switch-container {margin-left: auto;   margin-right: 2em;  border-radius: 0.75em;   transition: 0.5s ease;   display: inline-flex; animation: fadeIn 1s ease-in-out backwards; position: relative;}
    .switch-container:hover {margin-left: auto; box-shadow: 0 4px 8px 0 #e1a87a50, 0 6px 20px 0 #e1a87a50;}

    #case-view {border: 0.5px solid transparent}

    .new-counter {
        font-weight: bold;
        background-color: #fff3;
        padding: 5px 10px;
        border-radius: 50%;
        color: #ddd;
        letter-spacing: 1px;
        display: none;
        animation: fadeIn 0.5s ease-in-out backwards;
    }

    #button-error {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-7.5deg);
        padding: 5px 10px;
        color: #eee;
        font-size: 16px;
        font-weight: bold;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.65);
        text-align: center;
        width: max-content;
        border-radius: 0.5em;
        background-color: #822;
        animation: fade-in 0.3s ease backwards;
        transition: all 0.3s ease;
        opacity: 0.9;
    }

    .cases-error {pointer-events: none;} .switch-container:has(.cases-error):hover {box-shadow: none !important}

    /* MAIN */

    .main-container {
        display: flex;
        justify-content: flex-start;
        align-items: stretch;
        align-content: stretch;
        row-gap: 0.5em;
        column-gap: 0.75em;
        grid-auto-flow: column;
        margin: 1em ;
        transform-origin: top left;
        scale: 0.9;
        flex-wrap: wrap;
        width: 110vw;
    }

    .column-container {
        display:flex; flex-direction: column; row-gap: 1em;
    }

    .bubble {
        display: flex;
        flex-direction: column;
        padding: clamp(1.03125rem, 0.9rem + 0.6675vw, 1.5rem) clamp(1.375rem, 1.2rem + 0.89vw, 2rem);
        background: #303136;
        border-radius: 10px;
        transition: opacity 0.5s ease-out;
        font-family: var(--font-sans);
        font-size: 16.5px;
        color: #babbc2;
        width: 230px;
        height: max-content;
        animation: fadeIn 1s ease-in-out backwards;
        box-shadow: -3px 1px 15px rgba(30, 30, 30, 0.67), -2px 1px 15px rgba(30, 30, 30, 0.40);
        z-index: 5;
        position: relative;
    }
   
     .bubble div:not(:last-of-type, .content-2, .desktop, .no-margin) {margin-bottom: 1em}
    .bubble div:not(:last-child, .content-2, .no-line, .desktop, .s-bubble) {margin-bottom: 0.75em; border-bottom: solid 1px #ffffff33; padding-bottom: 0.75em}

    .bubble a:not(:has(> svg), .content-2) {background-color: #ffffff15; padding: 5px 10px; border-radius: 5px;  display: block; width: fit-content; color: CurrentColor}
    .bubble a:has(> svg) {margin: 3px;}
    .bubble a {transition: opacity 0.3s ease-out}
    .bubble a:hover {opacity: 0.75; transition: opacity 0.3s ease-out}
    .bubble b {margin: 0.25em 0 0.75em 0; display: block;}

    /* SECONDARY BUBBLE */
    .s-bubble {
        display: none;
        flex-direction: column;
        padding: clamp(1.03125rem, 0.9rem + 0.6675vw, 1.5rem) clamp(1.375rem, 1.2rem + 0.89vw, 2rem);
        background: inherit;
        border-radius: 10px;
        transition: opacity 0.5s ease-out;
        font-family: var(--font-sans);
        font-size: 16.5px;
        color: inherit;
        width: 230px;
        height: max-content;
        animation: fadeIn 0.5s ease-in backwards;
        box-shadow: -3px 1px 15px rgba(30, 30, 30, 0.67), -2px 1px 15px rgba(30, 30, 30, 0.40);
        z-index: 6;
        position: absolute;
    }
    .bubble:hover {z-index: 10}
    .bubble:hover .s-bubble { display: flex;}
    .s-bubble.left {right: 105%; top: 0;}
    .s-bubble.right {left: 105%; top: 0;}

    /* COLORS */
   .yellow {background-color: #3a3026; color: #c7b8a9}
    .red {background-color: #502525; color: #e6afad; width: 300px;}
    .green {background-color: #263a30; color: #afc7ba}
    .blue {background-color: #2c333f; color: #b5becd}
    .purple {background-color: #30263a; color: #baaec7}
    .grey {background-color: #303136; color: #babbc2}
    .orange {background-color: #663a1f; color: #ffc9ab}
    .blue-2 {background-color: #29345d; color: #c6d4ff}
    .green-2 {background-color: #004645; color: #a1e5e3}
    .purple-2 {background-color: #402f39; color: #cfb9c5}
    .red-2 {background-color: #382524; color: #d3b9b8; width: 300px;}
    .cyan {background-color: #1f3a46; color: #99d8ff;}
    .lime {background-color: #3a4426; color: #c7d4a9;}
    .indigo {background-color: #282c4a; color: #b0b8d4;}
    .violet {background-color: #3a2646; color: #d6b9ff;}
    .plum {background-color: #462a46; color: #e3b1e8;}
    .moss {background-color: #2f4630; color: #c0d8b1;}
    .brown-dark {background-color: #2f2623; color: #b9a8a5;} 

    /* TITLES */
    header, body, footer {font-family: var(--font-sans); transform-origin: top left;}
    h1 {font-family: var(--font-sans); color: #ddd; margin: 0.25em 0;}
    h2, h3 {font-family: var(--font-serif-2)}
    h3 {font-size: 40px; margin: 0 0 0.5em 0; line-height: 1;} /* 16.5px */

    a {color: #e1a87a; text-decoration: none;}

    /* FIXED */
    .a-logo {  position: fixed; right: 0; bottom: 0; filter: invert(1); transition: scale 0.3s ease-in-out, opacity 0.3s ease-in-out; animation: fadeIn 1s ease-in-out backwards; z-index: 20}
    .a-logo:hover {scale: 1.15; transition: 0.3s ease-in-out}

    /* SNALL CORRECTIONS */
    .content-2 > a:only-child, .content-2 > div:only-child { margin-bottom: 10px} /* margin-top: 10px; */

    /* FOOTER */
    #footer-tools {display: inline-flex; position: fixed; bottom: 0.5em; right: 110px; flex-direction: row; padding: 0.25em 1em; text-decoration: none; gap: 1em; z-index: 20} 
    #footer-tools a {color: var(--grey); font-size: 0.8em; animation: fadeIn 1s ease-in-out backwards; cursor: pointer;}
    #footer-tools a:hover {color: #999; transition: opacity 0.3s ease}
    .footer-fade {background: linear-gradient(to top, #1e1e1e, transparent);   bottom: 0;   right: 0;   position: fixed;   width: 100vw;   height: 120px;   z-index: 10; pointer-events: none; max-height: 7.5vh;} /* width: 270px; and top left*/
    #made-by {display:none}

    #about {margin-left: 1em; color: #ddd; transform-origin: bottom left; position: absolute; top: calc(var(--h-h) + var(--bm-h) + 3em); z-index: 0; animation: fadeIn 1s ease-in-out backwards;}

    /* RSS */
    .rss-feed {
        display: none;
        flex-direction: column; 
        flex-wrap: wrap;
        gap: 0.5em;
        list-style-type: none;
        color: #aaa;
        margin-left: 1em;
        animation: fadeIn 0.6s cubic-bezier(0.25, 1, 0.5, 1) backwards;
        transform-origin: top left;
    }

    .rss-feed-container {display: flex; flex-direction: column;}

    .rss-item { display: flex; flex-direction: row; justify-content: space-between; padding: 10px; align-items: center;}

     .rss-feed .j, .rss-feed .o {margin: 0 2em;}

    .rss-feed .full-text {font-size: 0.75em; max-width: 950px;  width: calc(100vw - 535px); padding: 10px 0; margin: 0;}
    .rss-feed .rss-item .details {width: 175px}
    .rss-feed .rss-item .type {width: 140px}
    .rss-feed .rss-item:has(.o) {border-left: 1px solid #aaaaaa75;}
    .rss-feed .rss-item:has(.j) {border-left: 1px solid #aaaaaa;}

    .article, .date, .case-number {margin-left: 1.5em;}
    .date {width: max-content; display: block;}
    .article {background-color: #2c333f; color: #b5becd; padding: 5px 10px; border-radius: 5px; display: inline-block; margin: 5px 0px;}

    .rss-feed .rss-item {width: max-content; transition: opacity 0.3s ease, background-color 0.3s ease, border-radius 0.5s ease; border-radius: 0 1em 1em 0;}
    .rss-feed .rss-item:hover {transition: opacity 0.3s ease, background-color 0.3s ease, border-radius 0.3s ease; background-color: #ffffff15; cursor: pointer; border-radius: 0.75em}
    .new {background-color: #263a3080; color: #afc7ba}  .new:hover {background-color: #263a30 !important; color: #afc7ba !important}
    .last-week {background-color: #3a302680; color: #c7b8a9;} .last-week:hover {background-color: #3a3026 !important}

    .timestamp { color: var(--grey);   margin: 1em;   font-size: 80%;}

    /* ANIMATION */
    @keyframes fadeIn {from {opacity: 0;}to {opacity: 1;}}
    @keyframes fadeOut {from {opacity: 1;}to {opacity: 0;}}
    @keyframes slideDown { from { transform: translateY(-100px)} to { transform: translateY(0)} }
    .fade-out { animation: fadeOut 0.75s forwards;}
    .fade-in { animation: fadeIn 0.75s forwards;}
    .remove-animation {animation: none !important}
    
    .column-container:first-of-type .bubble:nth-of-type(2), .column-container:nth-of-type(2) .bubble:first-of-type{animation-delay: 0.05s}
    .column-container:first-of-type .bubble:nth-of-type(3), .column-container:first-of-type .bubble:nth-of-type(4), .column-container:nth-of-type(2) .bubble:nth-of-type(2), .column-container:nth-of-type(3) .bubble:first-of-type{animation-delay: 0.1s}
    .column-container:nth-of-type(2) .bubble:nth-of-type(3), .column-container:nth-of-type(3) .bubble:nth-of-type(3), .column-container:nth-of-type(2) .bubble:nth-of-type(4){animation-delay: 0.15s}
    .column-container:nth-of-type(3) .bubble:nth-of-type(2), .column-container:nth-of-type(4) .bubble:first-of-type, .column-container:nth-of-type(3) .bubble:nth-of-type(3){animation-delay: 0.2s}
    .column-container:nth-of-type(4) .bubble:nth-of-type(2), .column-container:nth-of-type(5) .bubble:first-of-type, .column-container:nth-of-type(4) .bubble:nth-of-type(3) {animation-delay: 0.25s}
    .column-container:nth-of-type(5) .bubble:nth-of-type(2), .column-container:nth-of-type(5) .bubble:nth-of-type(3) {animation-delay: 0.3s}
    .a-logo, #footer-tools a, .switch-container {animation-delay: 0.35s}

/* OPTION 2 
    .column-container:first-of-type .bubble:nth-of-type(1), .column-container:nth-of-type(2) .bubble:first-of-type, .column-container:nth-of-type(3) .bubble:first-of-type, .column-container:nth-of-type(4) .bubble:first-of-type, .column-container:nth-of-type(5) .bubble:first-of-type {animation-delay: 0.3s}
    .column-container:nth-of-type(3) .bubble:first-of-type, .column-container:nth-of-type(4) .bubble:first-of-type, .column-container:nth-of-type(5) .bubble:first-of-type {transition: opacity 1s ease; animation-delay: 0.375s}
    .column-container:first-of-type .bubble:nth-of-type(2), .column-container:nth-of-type(2) .bubble:nth-of-type(2),.column-container:nth-of-type(3) .bubble:nth-of-type(2), .column-container:nth-of-type(4) .bubble:nth-of-type(2), .column-container:nth-of-type(5) .bubble:nth-of-type(2) {animation-delay: 0.45s}
        .column-container:first-of-type .bubble:nth-of-type(3), .column-container:nth-of-type(2) .bubble:nth-of-type(3), .column-container:nth-of-type(3) .bubble:nth-of-type(3), .column-container:nth-of-type(4) .bubble:nth-of-type(3), .column-container:nth-of-type(5) .bubble:nth-of-type(3) {animation-delay: 0.6s}
    .a-logo, #footer-tools a, .switch-container {animation-delay: 0.7s}
*/


    .header-menu-container h1 {animation: fadeIn 1s ease-in-out backwards;}
    .header-links > * {animation: slideDown 1s cubic-bezier(0.16, 1, 0.3, 1) backwards, fadeIn 1s cubic-bezier(0.65, 0, 0.35, 1)}
    .header-links .menu-item:nth-of-type(1) {animation-delay: 0.05s} 
    .header-links .menu-item:nth-of-type(2) {animation-delay: 0.1s} 
    .header-links .menu-item:nth-of-type(3) {animation-delay: 0.15s} 
    .header-links .menu-item:nth-of-type(4) {animation-delay: 0.2s} 
    .header-links .menu-item:nth-of-type(5) {animation-delay: 0.25s} 
    .header-links .menu-item:nth-of-type(6) {animation-delay: 0.3s} 
    .header-links .menu-item:nth-of-type(7) {animation-delay: 0.35s} 
    .header-links .menu-item:nth-of-type(8) {animation-delay: 0.4s} 

    .loading-container {display: none}

    .loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-block;
    border-top: 3px solid #FFF;
    border-right: 3px solid transparent;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    }

    /* Link effect */

    .link-effect a {cursor: pointer;  position: relative; white-space: nowrap; text-decoration: none !important;}
    .link-effect a::before, .link-effect a::after { position: absolute; width: 100%; height: 1px; background: currentColor; top: 100%; left: 0; pointer-events: none;}
    .link-effect a::before {content: '';}
    .link-effect a::before {transform-origin: 100% 50%; transform: scale3d(0, 1, 1); transition: transform 0.3s;}
    .link-effect a:hover::before { transform-origin: 0% 50%; transform: scale3d(1, 1, 1);}

    /* DISCLAIMER */
    .modal {display: none; position: fixed; z-index: 30; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.7); animation: fadeIn 1s cubic-bezier(0,1.5,1,1.5) backwards;}
    .modal-content {background-color: #2b2b2b; margin: 15% auto; padding: 20px 40px;  width: 80%;max-width: 500px; position: relative; text-align: left; color: #ddd; border-radius: 0.75em;} 
    .close {color: #aaa; float: right; font-size: 28px;font-weight: bold;position: absolute;right: 10px; top: 10px; cursor: pointer; transition: opacity 0.3s ease;}  
    .close:hover, .close:focus { opacity: 0.5; transition: opacity 0.3s ease; text-decoration: none;cursor: pointer; }

    


    /* SCREEN */
    .mobile {display: none}
    @media only screen and (max-width: 699px){ .bubble {width: calc(100vw - 5em); padding: clamp(1.375rem, 1.2rem + 0.89vw, 2rem); } .main-container {flex-direction: column;} .s-bubble {display: none !important}}
    @media only screen and (min-width: 1200px) and (max-width: 1316px){ .main-container {scale: 0.77; width: 130vw; overflow-y: hidden;} }   
    @media only screen and (min-width: 1617px){ .main-container, .rss-feed, header {transform: scale(1.1); .rss-feed {transform:(1.1)}} }
    @media only screen and (min-width: 1862px){ .main-container, .rss-feed, header {transform: scale(1.27); overflow-y: hidden;} .main-container {column-gap: 0.5em;} .column-container {row-gap: 0.5em;}}
    @media only screen and (min-width: 2205px){ .main-container, .rss-feed, header {transform: scale(1.51); overflow-y: hidden;} .main-container {column-gap: 0.5em;} .column-container {row-gap: 0.5em;}}
    @media only screen and (min-width: 2940px){ .main-container, .rss-feed, header {transform: scale(2.02); overflow-y: hidden;} .main-container {column-gap: 0.5em;} .column-container {row-gap: 0.5em;} .a-logo {transform-origin: bottom right; transform: scale(1.7);} }
    
    @media only screen and (min-width: 1862px){ .bubble {font-size: small} h3 {font-size: xx-large} }

    @media only screen and (max-width: 699px){
        .mobile {display: flex; flex-direction: column; gap: 0.5em;}
        .desktop {display: none}
        html {overflow-x: hidden; max-width: 100vw;}
        body:not(h1, h2, h3) {font-size: clamp(18px,1.125rem,34px); overflow-x: hidden}
        .header-menu-container > h1 {text-align: center}
        .main-container {scale: 1; row-gap: 1em; width: 100vw; margin: 0.5em; margin-bottom: calc(2em + var(--h-h));}
        .header-menu-container { width: unset; flex-wrap: wrap; justify-content: center; gap: 0.5em}
        .header-menu-container a:first-of-type {margin-left: 0em;}
        .header-links {margin: 0 0 0 -2em;}
        .header-links > * {animation: none}
        .header-menu-container .switch, .switch-container {justify-content: center; width: calc(100vw - 2em); margin-left: 2em !important; margin-right: 2em; box-shadow: none !important}
        #offences > div {margin-left: 0em !important;}
       /* .column-container:first-of-type .bubble:nth-of-type(3) {margin-bottom: -0.75em} */
       .footer-fade {background: linear-gradient(to top, #1e1e1e, transparent); width: 100vw; height: 100px;}
       /* RSS-mobile */
       .rss-item {flex-direction: column; align-items: flex-start;}
       .rss-feed {margin-top: 1em; margin-left: 0.5em;}
       .rss-feed .rss-item:has(.j) {border-left: none; border-top: 1px solid #aaaaaa;}
       .rss-feed .rss-item:has(.o) {border-left: none; border-top: 1px solid #aaaaaa75;}
       .rss-item .type {width: 140px; margin: 1em 0 0 -2em; font-weight: bold;}
       .rss-item .full-text {width: calc(100vw - 4em);}
       .rss-item .details {margin: 0 0 1em -1.5em;}
       .rss-item .articles {display: flex; flex-direction: row; gap: 0.5em; flex-wrap: wrap; width: calc(100vw - 2em); margin: 5px 0px;}
       #about {font-size: 0.9em; margin: 1em 1em 4em 1em; max-width: 80%; height: 350px; padding-bottom: 2em;} /* top: calc(var(--h-h) + var(--bm-h) + 3em); */
       #about p:not(last-of-type) {margin: 1em 0 !important}
       #about p:last-of-type {opacity: 0.5}
       #disc-cont {animation-delay: 0s !important; height: 90vh; height: 100dvh; overflow-y: scroll; scale: 0.85; overflow-y: scroll;}
       #disc-head:not(p), #disc-foot:not(div) {text-align: center;}
       #confirm-disc {align-self: center;}
       #disc-foot {display: flex;flex-direction: column;gap: 0.75em;}
       #disc-body > small {margin: 0em 0 0.6em;}
       .timestamp {margin: 1em 0 4em 1em; width: 70%;}}
       }

    @media only screen and (min-width: 400px) and (max-width: 699px){ #made-by {display: inline-block} }

    /* FONTS */
    @font-face {
font-family:'Open Sans';
font-weight:400;
font-style:normal;
font-display:swap;
src:url(https://arad.se/storage/fonts_cache/Open-Sans/400-normal/400-normal.woff2) format('woff2'),
url(https://arad.se/storage/fonts_cache/Open-Sans/400-normal/400-normal.woff) format('woff'),
url(https://arad.se/storage/fonts_cache/Open-Sans/400-normal/400-normal.ttf) format('truetype')
}
@font-face {
font-family:'Open Sans';
font-weight:600;
font-style:normal;
font-display:swap;
src:url(https://arad.se/storage/fonts_cache/Open-Sans/600-normal/600-normal.woff2) format('woff2'),
url(https://arad.se/storage/fonts_cache/Open-Sans/600-normal/600-normal.woff) format('woff'),
url(https://arad.se/storage/fonts_cache/Open-Sans/600-normal/600-normal.ttf) format('truetype')
}
@font-face {
font-family:'Open Sans';
font-weight:700;
font-style:normal;
font-display:swap;
src:url(https://arad.se/storage/fonts_cache/Open-Sans/700-normal/700-normal.woff2) format('woff2'),
url(https://arad.se/storage/fonts_cache/Open-Sans/700-normal/700-normal.woff) format('woff'),
url(https://arad.se/storage/fonts_cache/Open-Sans/700-normal/700-normal.ttf) format('truetype')
}
@font-face {
font-family:'Playfair Display';
font-weight:400;
font-style:normal;
font-display:swap;
src:url(https://arad.se/storage/fonts_cache/Playfair-Display/400-normal/400-normal.woff2) format('woff2'),
url(https://arad.se/storage/fonts_cache/Playfair-Display/400-normal/400-normal.woff) format('woff'),
url(https://arad.se/storage/fonts_cache/Playfair-Display/400-normal/400-normal.ttf) format('truetype')
}
@font-face {
font-family:'Playfair Display';
font-weight:500;
font-style:normal;
font-display:swap;
src:url(https://arad.se/storage/fonts_cache/Playfair-Display/500-normal/500-normal.woff2) format('woff2'),
url(https://arad.se/storage/fonts_cache/Playfair-Display/500-normal/500-normal.woff) format('woff'),
url(https://arad.se/storage/fonts_cache/Playfair-Display/500-normal/500-normal.ttf) format('truetype')
}
@font-face {
font-family:'Playfair Display';
font-weight:600;
font-style:normal;
font-display:swap;
src:url(https://arad.se/storage/fonts_cache/Playfair-Display/600-normal/600-normal.woff2) format('woff2'),
url(https://arad.se/storage/fonts_cache/Playfair-Display/600-normal/600-normal.woff) format('woff'),
url(https://arad.se/storage/fonts_cache/Playfair-Display/600-normal/600-normal.ttf) format('truetype')
}
@font-face {
font-family:'Playfair Display';
font-weight:700;
font-style:normal;
font-display:swap;
src:url(https://arad.se/storage/fonts_cache/Playfair-Display/700-normal/700-normal.woff2) format('woff2'),
url(https://arad.se/storage/fonts_cache/Playfair-Display/700-normal/700-normal.woff) format('woff'),
url(https://arad.se/storage/fonts_cache/Playfair-Display/700-normal/700-normal.ttf) format('truetype')
}

/* 
*
*      COLLAPSIBLE
*
*/

.collapsible-2 {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  font-weight: bold;
  font-family: 'Lato', sans-serif;
  text-decoration: none;
  background-color: transparent;
  padding: 4px 8px;
  color: CurrentColor;
  margin: 1em 0 0 -1.25em;
  line-height: 1.25;
}

.collapsible-2:before {
  content: "\25C0\FE0E";
  transform: rotate(180deg);
  color: var(--grey01);
  font-weight: bold;
  float: left;
  margin-right: 0.6em;
  border-radius: 50%;
  padding: 0.7rem;
  background-color: transparent;
  border: none;
  height: 0.7rem;
  width: 0.7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1em;
  transition: transform 0.2s ease-out;
  margin-top: -1px;
  scale: 0.7;
}

.active-2:before {
  transform: rotate(270deg);
  transition: transform 0.2s ease-out;
}

.content-2 {
  padding-left: 2.5em;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: transparent;
  color: var(--grey01);
  margin: 0 0 0 -2.25em;
}

.collapsible-2.active-2 + .content-2:not(:has(a)) {
	margin-bottom: 1em;
} 

.content-2 > p:last-child {
	margin-bottom: 0;
}

.content-2 > p {
	margin: 0 0 1em;
}

.collapsible-2 ~ p {
	margin: 0.75em 0 1.5em;
}

.collapsible-2 ~ .collapsible-2 {
    margin-top: 0;
}

/*--------------------------------------------------------------
# 1-2-3-List
--------------------------------------------------------------*/

.list {
   list-style: none;
   counter-reset: circle-counter;
	padding-inline-start: .5rem;
	margin-block-start: 1em !important;
	margin-block-end: 1em;
	margin-inline-start: 0px;
	margin-inline-end: 0px;
    gap: 0.25em;
}

.list > li {
    counter-increment: circle-counter;
	margin-bottom: 0.5rem; 
	padding-inline-start: 1.5rem;
	position: relative;
	max-width: 70ch;
	text-align: match-parent;
	padding-left: 2.25rem;
	margin-left: 0.25rem;
}

.list > li:before {
    content: counter(circle-counter);
    background-color: #dddddd20;
    display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 1.5rem;
	height: 1.5rem;
	position: absolute;
	inset: 0 0 0 0;
	border-radius: 50%;
	font-size: .9em;
    /* margin-top: 0.15rem;	*/
    }
.list > li:last-child {
        margin-bottom: 0;
}

/*--------------------------------------------------------------
# Consent-wall
--------------------------------------------------------------*/

.consent-wall {
    display: flex;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
animation: fadeIn 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1s 1 normal none running;
  animation-fill-mode: backwards !important;

}

.consent-wall-modal {
    background-color: #2b2b2b;
    border-radius: 10px;
    animation-delay: 1s;
    max-width: 585px;
    height: auto;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    margin: 0.75rem;
    transition: 0.3s;
	animation: slide-up 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1s 1 normal none running;
	animation-fill-mode: backwards !important;
	font-family: var(--font-sans);
max-height: 525px;
overflow-y: hidden;
flex-direction: column;
}

@media only screen and (min-width: 400px) and (max-width: 650px) {
.consent-wall-modal {margin: 1rem;}
}

@media only screen and (max-width: 650px) {
.consent-wall-modal, .consent-wall {animation: FadeIn 1s cubic-bezier(0.645, 0.045, 0.355, 1) 0s 1 normal none running; animation-fill-mode: backwards;}
}

@media only screen and (max-height: 700px) and (max-width: 400px) {
.consent-wall-modal {margin: 0; width: 100%; display: flex; flex-direction: column; overflow: scroll;}
.consent-wall-header {margin-bottom: 2rem; }
}

.consent-wall-header {
    font-size: 29px; /*  1.75em; 29px */
    margin-bottom: 0.5rem;
    color: #ddd !important;
   margin-top: 0.5em !important;
	font-family: var(--font-sans);
  text-align: center !important;
  padding: 30px 40px 0 40px;
}

.wall-message {
 /* overflow-y: scroll; */
  /* height: 100%; */
  padding: 0 60px 30px 60px;
    display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: left;
line-height: 1.2;
font-family: var(--font-sans);
font-size: 0.9em;
color: #ddd;
}

.wall-message p, .wall-grey {
    font-size: 1rem;
    color: #959595 !important;
    line-height: 1.5;
   font-family: -apple-system, BlinkMacSystemFont, "Open Sans", Helvetica, Arial, sans-serif;
  justify-content: flex-start;
}

.wall-intro {
  margin: 1em 0 1.25em 0;
}

.red-line-container {
	position: relative;
}

.red-line {
  position: absolute;
  top: 10px;
  right: 0px;
  width: 100%;
  height: 3px;
  background-color: red;
  transform-origin: top right;
  animation: crossOut 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
  rotate: -12deg;
  /*! border: 2px solid red; */
  border-radius: 1em;
  animation-delay: 1.75s !important;
  animation-fill-mode: backwards;
}

@keyframes crossOut {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}

/* Icons */

.wall-message span {
  display: flex;
  align-items: center;
  flex-direction: row;
  padding: 0.33rem 0;
}

.pen-icon, .computer-icon {
	font-family: var(--font-sans);
	font-size: 14.85px;
	line-height: 1.35;
	color: #ddd;
}

.pen-icon:before {
content: "";
display: inline-flex;
align-items: center;
width: 2em;
height: 24px;
margin: -2px 1em 0 0;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.2635 2.29289C20.873 1.90237 20.2398 1.90237 19.8493 2.29289L18.9769 3.16525C17.8618 2.63254 16.4857 2.82801 15.5621 3.75165L4.95549 14.3582L10.6123 20.0151L21.2189 9.4085C22.1426 8.48486 22.338 7.1088 21.8053 5.99367L22.6777 5.12132C23.0682 4.7308 23.0682 4.09763 22.6777 3.70711L21.2635 2.29289ZM16.9955 10.8035L10.6123 17.1867L7.78392 14.3582L14.1671 7.9751L16.9955 10.8035ZM18.8138 8.98525L19.8047 7.99429C20.1953 7.60376 20.1953 6.9706 19.8047 6.58007L18.3905 5.16586C18 4.77534 17.3668 4.77534 16.9763 5.16586L15.9853 6.15683L18.8138 8.98525Z' fill='%23ddd' /%3E%3Cpath d='M2 22.9502L4.12171 15.1717L9.77817 20.8289L2 22.9502Z' fill='%23ddd' /%3E%3C/svg%3E");
background-repeat: no-repeat;
overflow: visible;
}

.computer-icon:before {
content: "";
display: inline-flex;
align-items: center;
width: 2em;
height: 24px;
margin: -2px 1em 0 0;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 17H4C2.34315 17 1 15.6569 1 14V6C1 4.34315 2.34315 3 4 3H20C21.6569 3 23 4.34315 23 6V14C23 15.6569 21.6569 17 20 17H13V19H16C16.5523 19 17 19.4477 17 20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20C7 19.4477 7.44772 19 8 19H11V17ZM4 5H20C20.5523 5 21 5.44772 21 6V14C21 14.5523 20.5523 15 20 15H4C3.44772 15 3 14.5523 3 14V6C3 5.44772 3.44772 5 4 5Z' fill='%23eee' /%3E%3C/svg%3E");
background-repeat: no-repeat;
}

.external-icon:before {
content: "";
display: inline-block;
vertical-align: middle;
width: 24px;
height: 24px;
 margin: -5px 2px 0 0;
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.6396 7.02527H12.0181V5.02527H19.0181V12.0253H17.0181V8.47528L12.1042 13.3892L10.6899 11.975L15.6396 7.02527Z' fill='%23e1a87a' stroke='%23000000' stroke-width='0.5' /%3E%3Cpath d='M10.9819 6.97473H4.98193V18.9747H16.9819V12.9747H14.9819V16.9747H6.98193V8.97473H10.9819V6.97473Z' fill='%23e1a87a' stroke='%23000000' stroke-width='0.5' /%3E%3C/svg%3E");
background-repeat: no-repeat;
}

.scale-symbol {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke-width='1.25' width='24' height='24' color='%23fffcf2'%3E%3Cdefs%3E%3Cstyle%3E.cls-6375f1aeb67f094e4896c9dd-1,.cls-6375f1aeb67f094e4896c9dd-2%7Bfill:none;stroke:currentColor;stroke-miterlimit:10;%7D.cls-6375f1aeb67f094e4896c9dd-1%7Bstroke-linecap:square;%7D%3C/style%3E%3C/defs%3E%3Cg id='balance'%3E%3Cpath class='cls-6375f1aeb67f094e4896c9dd-1' d='M1.46,12.94H8.17a0,0,0,0,1,0,0v.73a3.11,3.11,0,0,1-3.11,3.11h-.5a3.11,3.11,0,0,1-3.11-3.11v-.73A0,0,0,0,1,1.46,12.94Z'%3E%3C/path%3E%3Cpath class='cls-6375f1aeb67f094e4896c9dd-2' d='M.5,5.27H5.92a3.18,3.18,0,0,0,2.29-1h0a3.24,3.24,0,0,1,2.29-1h3a3.27,3.27,0,0,1,2.31,1h0a3.27,3.27,0,0,0,2.32,1H23.5'%3E%3C/path%3E%3Cline class='cls-6375f1aeb67f094e4896c9dd-2' x1='12' y1='0.48' x2='12' y2='22.52'%3E%3C/line%3E%3Cline class='cls-6375f1aeb67f094e4896c9dd-2' x1='17.75' y1='22.52' x2='6.25' y2='22.52'%3E%3C/line%3E%3Cpolygon class='cls-6375f1aeb67f094e4896c9dd-1' points='5.29 5.27 4.33 5.27 1.46 11.98 1.46 12.94 8.17 12.94 8.17 11.98 5.29 5.27'%3E%3C/polygon%3E%3Cpath class='cls-6375f1aeb67f094e4896c9dd-1' d='M15.83,12.94h6.71a0,0,0,0,1,0,0v.73a3.11,3.11,0,0,1-3.11,3.11h-.5a3.11,3.11,0,0,1-3.11-3.11v-.73a0,0,0,0,1,0,0Z'%3E%3C/path%3E%3Cpolygon class='cls-6375f1aeb67f094e4896c9dd-1' points='19.67 5.27 18.71 5.27 15.83 11.98 15.83 12.94 22.54 12.94 22.54 11.98 19.67 5.27'%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E");
	display: inline-flex;
  position: relative;
  line-height: normal;
  vertical-align: middle;
  margin-right: 30px;
  margin-top: -5px;
	scale: 1.5;
	opacity: 0.5;
	padding-left: 0.5rem;
}
.jurist {padding: clamp(1em, 1rem + 0.79vw, 1rem) !important;display: flex;flex-direction: row; transition: 0.5s ease-out;}

.x:before {
  content: "";
  display: inline-flex;
  align-items: center;
  width: 2em;
  height: 24px;
  margin: -2px 1em 0 0;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M6.2253 4.81108C5.83477 4.42056 5.20161 4.42056 4.81108 4.81108C4.42056 5.20161 4.42056 5.83477 4.81108 6.2253L10.5858 12L4.81114 17.7747C4.42062 18.1652 4.42062 18.7984 4.81114 19.1889C5.20167 19.5794 5.83483 19.5794 6.22535 19.1889L12 13.4142L17.7747 19.1889C18.1652 19.5794 18.7984 19.5794 19.1889 19.1889C19.5794 18.7984 19.5794 18.1652 19.1889 17.7747L13.4142 12L19.189 6.2253C19.5795 5.83477 19.5795 5.20161 19.189 4.81108C18.7985 4.42056 18.1653 4.42056 17.7748 4.81108L12 10.5858L6.2253 4.81108Z' fill='red' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
}


/* Bottom */

.wall-bottom {
  background-color: #222;
  padding: 20px 40px;
}

.wall-buttons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 0.5em;
}

@media only screen and (max-width: 500px){
  .wall-buttons {flex-direction: column;}
  .wall-button {margin-bottom: 1em; margin-right: 0px !important;}
  .wall-message span {flex-wrap: wrap;}
  .cookie-text {margin-top: 0.8em !important; font-size: 0.8rem !important; margin-bottom: 0; line-height: 1.4 !important;} 
  .wall-grey {margin-left: 0em !important;}
  .pen-icon > span {padding-left: 0 !important;}
  .pen-icon:before {width: 2em !important;}
	.wall-message {padding: 0 40px 20px 40px;}
	.consent-wall-modal {max-height: 95vh}
	.wall-bottom {padding: 10px 40px 10px 40px;}
	.wall-button-no {margin-bottom: 0;}
	.consent-wall-header {margin-top: 0.2em !important;}
	.computer-icon:before, .pen-icon:before {margin: -2px 0.5em 0 0;}
  /* .wall-intro {margin: 20px 0 0 0;} */
}
	
.wall-button {
    font-size: 12px;
    border-radius: 5px;
    background-color: #b3d4fc;
    color: #000;
    text-transform: uppercase;
    font-weight: bold;
	line-height: 20px;
    text-shadow: none;
    border: none;
    width: 100%;
    max-width: 255px;
  
  align-items: center;
  border-bottom: 0;
  cursor: pointer;
   display: table-cell;
    white-space: nowrap;
  justify-content: center;
  padding: 1em 2em;
  transition: .3s ease;
}

.wall-button-yes:hover, .wall-button-no:hover {
  /* filter: brightness(75%); */
  background-color: #e1a87a;
  transition: .3s ease;
}

.wall-button:active {
	  background-color: #e1a87a;
}

.wall-button-yes {
    background-color: #a29790; /* #e1a87a; */
    margin-right: 15px;
}

.wall-button-no {
    background-color: #a29790; /* #2b2b2b */
	color: #000; /* #999 */
	border: none;
} 

.cookie-text {
font-size: 0.8rem;
color: #777 !important;
margin-top: 1rem;
margin-bottom: 0;
line-height: 1.4;
}

@keyframes slide-up {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes glow {
    0% {
        box-shadow: 0 0 10px #e1a87a50;
    }
    50% {
        box-shadow: 0 0 15px #e1a87a;
    }
    100% {
        box-shadow: 0 0 10px #e1a87a50;
    }
}

@keyframes glow-text {
    0% {
        box-shadow: 0 0 10px #e1a87a00;
        background-color:  #e1a87a00;
    }
    50% {
        box-shadow: 0 0 15px #e1a87a50;
        background-color:#e1a87a25;
        border-radius: 1em;
    }
    100% {
        box-shadow: 0 0 10px #e1a87a00;
        background-color:  #e1a87a00;
    }
}

/*--------------------------------------------------------------
# Disclaimer-wall
--------------------------------------------------------------*/

#disc-cont {display: flex;flex-direction: column;align-items: flex-start;color: var(--grey2);width: 25%;margin: auto; background-color: #2b2b2b; height: fit-content; padding: 2em; border-radius: 1em; min-width: 350px; max-width: 500px; animation: slide-up 1s cubic-bezier(0.645, 0.045, 0.355, 1) 1.15s 1 normal backwards running;}
#disc-head {margin: 0em 0 0.5em;}
.disc-title {font-family: var(--font-sans);color: #ddd;font-size: 40px;font-weight: bold; display: inline-block; margin: 0 0 0.2em;}
#disc-body {margin-bottom: 0.5em}
#disc-body > small {color: var(--grey); margin: 0em 0 1.5em; display: inline-block;}

#accept-tracking, #decline-tracking {animation: glow 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;}
#disc-foot div:first-child {animation: glow-text 2s cubic-bezier(0.65, 0, 0.35, 1) 0.25s infinite;}
#disc-foot button {animation: glow 2s cubic-bezier(0.65, 0, 0.35, 1) 0.5s infinite;}