:root {
    --logo-inf: url('https://infoskjermen.no/images/v3/logo/no-prim%C3%A6r-fullfarge.svg');
    --logo-p2m: url('https://pintomind.com/images/v3/logo-p2m.svg');
    --logo: var(--logo-inf);
    --sand-50: #f8f7f4;
    --sand-100: #efede5;
    --sand-200: #ddd9cb;
    --sand-300: #c8bfa9;
    --sand-400: #b1a186;
    --sand-500: #a18d6e;
    --sand-600: #947d62;
    --sand-700: #7b6753;
    --sand-800: #655447;
    --sand-900: #53463b;
    --sand-950: #2c241e;
    --green-50: #f3f6ef;
    --green-100: #e3ebdc;
    --green-200: #cad8be;
    --green-300: #a8c096;
    --green-400: #8aa774;
    --green-500: #799d61;
    --green-600: #536e42;
    --green-700: #425536;
    --green-800: #36462e;
    --green-900: #303d2a;
    --green-950: #172013;
    --yellow-50: #fdf9ed;
    --yellow-100: #f9eccc;
    --yellow-200: #f2d895;
    --yellow-300: #ecbe5d;
    --yellow-400: #e7a738;
    --yellow-500: #df8821;
    --yellow-600: #c5671a;
    --yellow-700: #a44919;
    --yellow-800: #863a1a;
    --yellow-900: #6e3119;
    --yellow-950: #3f1709;
    --red-50: #fcf5f0;
    --red-100: #f8e8dc;
    --red-200: #f1ceb7;
    --red-300: #e7ad8a;
    --red-400: #dd825a;
    --red-500: #d86f49;
    --red-600: #c74d2f;
    --red-700: #a53b29;
    --red-800: #843228;
    --red-900: #6b2b23;
    --red-950: #391311;
    --blue-50:  #F5F8FA;
    --blue-100: #E6F3F9;
    --blue-200: #BAD3DD;
    --blue-300: #76B3CB;
    --blue-400: #239BCB;
    --blue-500: #0081BE;
    --blue-550: #016CA3;
    --blue-600: #19526C;
    --blue-700: #113F55;
    --blue-800: #0A3042;
    --blue-900: #061D33;
    --blue-950: #07304A;
    --white: #ffffff;
    --box-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --box-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --ui-font: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
}

body {
    color: #000000;
    tab-size: 4;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

h1, h2 {
    font-weight: 400;
}

h2 a {
    font-size: 2.25rem;
}

.mainContent {
    display: flex;
    margin-top: 3em;
}

.container-fluid {
    max-width: 1024px;
}

.container-fluid:before, .container-fluid:after {
    content: unset;
} 


#mainNav {
    font-weight: bold;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-underline-offset: 4px;
}

#mainNav .brand span {
    display: inline-block;
    text-indent: -9000px;
    height: 1.775em;
    aspect-ratio: 512/109;
    max-width: 80vh;
    margin-top: 10px;
    background: var(--logo);
    background-size: 100%;
}
    

#mainNav .nav {
    display: block;
}

#sidebar {
    display: none;
}

#mainNav .navbar-inner {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    background-color: var(--sand-50);
    -webkit-box-shadow: none;
    box-shadow: none;
}

#mainNav a {
    border-bottom: transparent 2px solid;
    padding-bottom: 0;
    padding-top: 0;
}

#mainNav a:hover {
}

#mainNav .container-fluid {
    display: block;
    align-items: center;
    justify-content: space-between;
}
#mainNav a.button {
    border: none;
    outline: none;
    background-color: var(--blue-500);
    color: #fff;
    padding: 1em;
    border-radius: 0.25rem;
    font-size: 1.1em;
}

#mainNav .button-container {
    display: none;
    align-items: center;
}

#mainNav .language {
    height: 28px;
    width: 28px;
    margin: 0 0.5em;
}

#mainNav .language:hover {
    outline: 2px solid var(--blue-500);
    outline-offset: 1px;
    border-radius: 50%;
    border: none;
}

#docsSearch {
    background-color: #f8f7f4;
    padding: 7em 0;
    border: none;
}

#docsSearch h1 {
    font-size: 3.75em;
    font-family: var(--ui-font);
}

#searchBar .search-query {
    background: #fff;
    box-shadow: none;
    color: #777;
    border-width: 1px;
    border-color: var(--sand-200);
    border-radius: 0.25rem;
}

#searchBar button {
    background-color: var(--blue-500);
    color: #fff;
    padding: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    text-shadow: none;
}

#searchBar button:hover {
    background-color: var(--blue-500);
    opacity: 1;
}

.collection-category {
    margin-top: 2em;
}
.collection-category h2 {
    font-family: var(--ui-font);
}

.category-list .category {
    line-height: 2;
    background-color: #fff;
    border-radius: 0.5rem;
    position: relative;
    margin-top: 2em;
    padding-top: 2em;
    padding-bottom: 2em;
}

.category-list .category h3 {
    line-height: 2rem;
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: -0.025em;
    margin-top: 1.25em;
}

/* RAD 1 */

#collection-category-848 .category-list .category,
#collection-category-863 .category-list .category {
    background-color: var(--white);
    background-repeat: no-repeat;
    background-position: center 25px;
    background-size: 70%;
    padding-top: 55%;
}


#collection-category-848 .category-list #category-890,
#collection-category-863 .category-list #category-892 {
    background-image: url("https://infoskjermen.no/images/v3/support/spot-team-of-three.svg");
    background-size: 66%;
}
#collection-category-848 .category-list #category-1115,
#collection-category-863 .category-list #category-1117 {
    background-image: url("https://infoskjermen.no/images/v3/support/spot-click-today.svg");
}
#collection-category-848 .category-list #category-942,
#collection-category-863 .category-list #category-969 {
    background-image: url("https://infoskjermen.no/images/v3/support/spot-theme-and-layout.svg");
}
#collection-category-848 .category-list #category-1116,
#collection-category-863 .category-list #category-1118 {
    background-image: url("https://infoskjermen.no/images/v3/support/spot-great-deal.svg");
}
#collection-category-848 .category-list #category-904,
#collection-category-863 .category-list #category-906 {
    background-image: url("https://infoskjermen.no/images/v3/support/spot-what-man.svg");
    background-size: 66%;
}

#collection-category-848 .category-list .category:hover,
#collection-category-863 .category-list .category:hover,
#collection-category-857 .category-list .category:hover,
#collection-category-872 .category-list .category:hover {
    background-color: var(--sand-100)!important;
}

#collection-category-848 .category-list .category h3,
#collection-category-863 .category-list .category h3 {
    margin: 0;
}

#collection-category-848 .category-list .category p,
#collection-category-863 .category-list .category p,
#collection-category-857 .category-list .category p,
#collection-category-872 .category-list .category p {
    padding: 0;
    margin: 0;
}

#collection-category-857 .category-list #category-945,
#collection-category-857 .category-list #category-946,
#collection-category-872 .category-list #category-972,
#collection-category-872 .category-list #category-973 {
    background-repeat: no-repeat;
    background-position: center 25px;
    background-color: var(--white);
    background-size: 50%;
    padding-top: 43%;
}

#collection-category-857 .category-list #category-945,
#collection-category-872 .category-list #category-972 {
    background-image: url("https://infoskjermen.no/images/v3/support/spot-hey-go.svg");
}
#collection-category-857 .category-list #category-946,
#collection-category-872 .category-list #category-973 {
    background-image: url("https://infoskjermen.no/images/v3/support/spot-selfie-man.svg");
}


#collection-category-848 .category-list,
#collection-category-863 .category-list {
    display: grid;
    gap: 4em;
}
#collection-category-848 .category-list .category,
#collection-category-863 .category-list .category  {
    width: 80%;
    justify-content: center;
    display: inline-flex;
    flex-direction: column;
    margin: 0 auto;
    border: none;
    box-shadow: var(--box-shadow-lg);
}

#collection-category-848 .category-list #category-904.category::before,
#collection-category-848 .category-list #category-890.category::before,
#collection-category-848 .category-list #category-942.category::before,

#collection-category-863 .category-list #category-892.category::before,
#collection-category-863 .category-list #category-906.category::before,
#collection-category-863 .category-list #category-969.category::before {
    content: "";
    background-color: var(--sand-200);
    position: absolute;
    top: 0;
    left: -5%;
    right: 5%;
    bottom: 0;
    transform: rotate(-6deg);
    z-index: -1;
    border-radius: 0.5rem;
}
#collection-category-848 .category-list #category-1115.category::before,
#collection-category-848 .category-list #category-1116.category::before,

#collection-category-863 .category-list #category-1117.category::before,
#collection-category-863 .category-list #category-1118.category::before {
    content: "";
    background-color: var(--sand-200);
    position: absolute;
    top: 0;
    left: -5%;
    right: 5%;
    bottom: 0;
    transform: rotate(6deg);
    z-index: -1;
    border-radius: 0.5rem;
}

/* RAD 2 */

#collection-category-860 .category,
#collection-category-875 .category {
    width: auto;
}

#collection-category-860 .category-list,
#collection-category-875 .category-list {
    display: grid;
    gap: 1em;
    grid-template-columns: 1fr;
}

.category-list.two-col {
    display: grid;
    gap: 1em;
    grid-template-columns: 1fr;
}

.category-list.two-col .category {
    width: auto;
}

#collection-category-860 .category-list .category::after,
#collection-category-875 .category-list .category::after {
    content: "";
    background-size: 75%;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--blue-500);
    position: absolute;
    top: 0;
    left: 50%;
    width: 4em;
    height: 4em;
    transform: translate(-50%, -40%);
    border-radius: 0.5rem;
}

/* Oppsett skjerm */
.category-list #category-944.category::after,
.category-list #category-970.category::after { background-image: url("https://infoskjermen.no/images/helpscout/platform-v3/monitor.svg")}
/* Feilsøking */
.category-list #category-1094.category::after,
.category-list #category-971.category::after { background-image: url("https://infoskjermen.no/images/helpscout/platform-v3/bug.svg")}
/* Tizen */
.category-list #category-912.category::after,
.category-list #category-919.category::after { background-image: url("https://infoskjermen.no/images/helpscout/platform-v3/tizen.svg")}
/* Chrome OS */
.category-list #category-913.category::after,
.category-list #category-920.category::after { background-image: url("https://infoskjermen.no/images/helpscout/platform-v3/google-chrome.svg")}
/* Android */
.category-list #category-914.category::after,
.category-list #category-921.category::after { background-image: url("https://infoskjermen.no/images/helpscout/platform-v3/android.svg")}
/* Windows */
.category-list #category-915.category::after,
.category-list #category-922.category::after { background-image: url("https://infoskjermen.no/images/helpscout/platform-v3/windows.svg")}
/* WebOS */
.category-list #category-916.category::after,
.category-list #category-923.category::after { background-image: url("https://infoskjermen.no/images/helpscout/platform-v3/lg.svg")}
/* Linux */
.category-list #category-1178.category::after,
.category-list #category-1179.category::after { background-image: url("https://infoskjermen.no/images/helpscout/platform-v3/raspberry.svg")}
/* Smart Tv */
.category-list #category-918.category::after,
.category-list #category-925.category::after { background-image: url("https://infoskjermen.no/images/helpscout/platform-v3/television.svg")}



/* Articles */

.articleList .icon-article-doc {
    display: none;
}

#main-content {
    background: none !important;
    margin: 0 !important;
    padding-top: 0;
}

#main-content .contentWrapper {
    background: none !important;
    border: none !important;
    margin: 0 !important;
    padding-left: 0;
    padding-top: 32px;
}

#categoryHead h1 {
    font-size: 2.25rem;
}

.articleList a {
    font-size: 1.2em;
    text-decoration: underline;
}

.contentWrapper h1, 
.contentWrapper h2,
.contentWrapper h3 {
    font-weight: 600;
}

#fullArticle .callout {
    background: var(--sand-100);
    border-color: var(--sand-200);
    border-radius: 3px;
}
#fullArticle .callout-green {
    background: var(--green-100);
    border-color: var(--green-400);
    border-radius: 3px;
}
#fullArticle .callout-yellow {
    background: var(--yellow-100);
    border-color: var(--yellow-400);
    border-radius: 3px;
}
#fullArticle .callout-red {
    background: var(--red-100);
    border-color: var(--red-500);
    border-radius: 3px;
}

#fullArticle li>figure, #fullArticle li>p {
    display: block;
}

#fullArticle ol li br:last-of-type {
    display: none;
}

/* Responsive */

@media (min-width: 640px) {
    #collection-category-860 .category-list,
    #collection-category-875 .category-list {
        grid-template-columns: 1fr 1fr;
    }
    #collection-category-860 .category,
    #collection-category-875 .category {
        width: auto;
    }

    #collection-category-848 .category-list .category,
    #collection-category-863 .category-list .category { 
        flex: 1 0 25%;
        min-width: 230px;
        max-width: 300px;
        padding-top: 32%;
    }
    
    #collection-category-848 .category-list,
    #collection-category-863 .category-list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 4em;
        row-gap: 5em;
        padding: 0 2em;
    }

    .category-list.two-col {
        grid-template-columns: 1fr 1fr;
    }
    
    .category-list.two-col .category {
        width: auto;
    }

    #mainNav .brand span {
        height: 3.8rem;
        margin-top: 0px;
    }
}
@media (min-width: 768px) {
    #collection-category-860 .category-list,
    #collection-category-875 .category-list {
        grid-template-columns: 1fr 1fr 1fr;
    }
    #collection-category-860 .category,
    #collection-category-875 .category {
        width: auto;
    }

    #collection-category-848 .category-list .category,
    #collection-category-863 .category-list .category { 
        flex: 1 0 25%;
        min-width: 230px;
        max-width: 300px;
        padding-top: 215px;
    }

    #mainNav .nav {
        display: none;
    }

    #sidebar {
        display: block;
    }

    #mainNav .button-container {
        display: flex;
    }

    #mainNav .container-fluid {
        display: flex;
    }
}