@font-face {
    font-weight: 300;
    font-style: normal;
    font-family: 'Open Sans Custom';
    src: url('/custom/fonts/OpenSans-Light.woff2');
    font-display: swap
}

/* @font-face {
    font-weight: 400;
    font-style: normal;
    font-family: 'Open Sans Custom';
    src: url('/custom/fonts/OpenSans-Regular.woff2');
    font-display: swap
} */

@font-face {
    font-weight: normal;
    font-style: normal;
    font-family: 'Open Sans Custom';
    src: url('/custom/fonts/OpenSans-Regular.woff2');
    font-display: swap
}

@font-face {
    font-weight: normal;
    font-style: italic;
    font-family: 'Open Sans Custom';
    src: url('/custom/fonts/OpenSans-Italic.woff2');
    font-display: swap
}

@font-face {
    font-weight: 600;
    font-style: normal;
    font-family: 'Open Sans Custom';
    src: url('/custom/fonts/OpenSans-Semibold.woff2');
    font-display: swap
}

@font-face {
    font-weight: 600;
    font-style: italic;
    font-family: 'Open Sans Custom';
    src: url('/custom/fonts/OpenSans-SemiboldItalic.woff2');
    font-display: swap
}

@font-face {
    font-weight: 700;
    font-style: normal;
    font-family: 'Open Sans Custom';
    src: url('/custom/fonts/OpenSans-Bold.woff2');
    font-display: swap
}

@font-face {
    font-weight: 700;
    font-style: italic;
    font-family: 'Open Sans Custom';
    src: url('/custom/fonts/OpenSans-BoldItalic.woff2');
    font-display: swap
}

@font-face {
    font-weight: 800;
    font-style: normal;
    font-family: 'Open Sans Custom';
    src: url('/custom/fonts/OpenSans-ExtraBold.woff2');
    font-display: swap;
}

@font-face {
    font-weight: 800;
    font-style: italic;
    font-family: 'Open Sans Custom';
    src: url('/custom/fonts/OpenSans-ExtraBoldItalic.woff2');
    font-display: swap;
}

/*
    main#contents-display #description = introduktion i översiktsguide/kurs
    .tinymce = textguide
    .editor-container .tinymce = textguide i redigeringsläge
    .answer-text = faq-sektion i textguide
    
    font-size: 16px;
    line-height: 1.625; = 26px
*/

:root {
    --line-height-sz1: 1rem;
    --line-height-sz2: 1.25rem;
    --line-height-sz3: 1.5rem;
    --line-height-sz4: 1.75rem;
    --line-height-sz5: 2rem;
    --line-height-sz6: 2.25rem;
    --line-height-sz7: 3.375rem;

    --font-family-default: 'Open Sans Custom', arial, sans-serif;

    --font-sz4--100: 100 1.125rem / var(--line-height-sz4) var(--font-family-default);
    --font-sz5--100: 100 1.375rem / var(--line-height-sz5) var(--font-family-default);
    --font-sz1: 400 .6875rem / var(--line-height-sz1) var(--font-family-default);
    --font-sz2: 400 .8125rem / var(--line-height-sz2) var(--font-family-default);
    --font-sz3: 400 1rem / var(--line-height-sz3) var(--font-family-default);
    --font-sz4: 400 1.125rem / var(--line-height-sz4) var(--font-family-default);
    --font-sz5: 400 1.375rem / var(--line-height-sz5) var(--font-family-default);
    --font-sz6: 400 1.875rem / var(--line-height-sz6) var(--font-family-default);
    --font-sz7: 400 2.8125rem / var(--line-height-sz7) var(--font-family-default);
    --font-sz1--600: 600 .6875rem / var(--line-height-sz1) var(--font-family-default);
    --font-sz2--600: 600 .8125rem / var(--line-height-sz2) var(--font-family-default);
    --font-sz3--600: 600 1rem / var(--line-height-sz3) var(--font-family-default);
    --font-sz4--600: 600 1.125rem / var(--line-height-sz4) var(--font-family-default);
    --font-sz5--600: 600 1.375rem / var(--line-height-sz5) var(--font-family-default);
    --font-sz6--600: 600 1.875rem / var(--line-height-sz6) var(--font-family-default);
    --font-sz7--600: 600 2.8125rem / var(--line-height-sz7) var(--font-family-default);
    --font-sz3--bold: 800 1rem / var(--line-height-sz3) var(--font-family-default);
    --font-sz4--bold: 800 1.125rem / var(--line-height-sz4) var(--font-family-default);
    --font-sz5--bold: 800 1.375rem / var(--line-height-sz5) var(--font-family-default);
    --font-sz6--bold: 800 1.875rem / var(--line-height-sz6) var(--font-family-default);
    --font-sz7--bold: 800 2.8125rem / var(--line-height-sz7) var(--font-family-default);

    --space-line-height: 1.48rem;
    --space-xs: .1875rem;
    --space-s: .375rem;
    --space-sm: .5625rem;
    --space-m: .75rem;
    --space-ml: 1.125rem;
    --space-l: 1.5rem;
    --space-lxl: 2.25rem;
    --space-xl: 3rem;
    --space-xxl: 4.5rem;
}




/* .tinymce {
    background-color: transparent;
    background-image: linear-gradient(0deg, 
      transparent 9%,
      rgba(0, 0, 0, .2) 10%, rgba(0, 0, 0, .2) 12%,
      transparent 13%
    );
    
    height: 100%;
    background-size: 100% 24px;
    line-height: 24px;
} */

main#contents-display #description {
    font-size: 1rem;
}

.tinymce {
    font-size: 16px !important;
}
.tinymce, .faq-item {
    div, section  {
        font-size: unset !important;
    }
    
    a {
        font-family: inherit;
    }
}
.html-widget .tinymce {
    & > *:last-of-type:not(.mce-resizehandle) {
        margin-bottom: revert;
    }
    & > :last-child:not(.mce-resizehandle, .dh-ingress) {
        margin-bottom: 0;
    }
}

/* Nollställ obegripliga(?) regler i htmlwidget.less */
.text-step-content .sections [id^=smartass_toc_link]:before {
    height: 0;
    margin: 0;
}

#TextGuidePlayer .text-content,        /* Textguide player Beta */
#TextGuideEditor .tiptap,                /* Textguide editor Beta */
#CollectionPlayer .page-layout-content, /* Introduktionssida i guidesamling (fungerar inte, laddar inte custom.css) */
.tinymce,                               /* Textguide */
.faq-item {                             /* FAQ-cell */
    * {
        word-spacing: 0 !important;
        letter-spacing: 0 !important; /* Override InfoCaptions css */
    }

    h1, h2, h3, h4, h5, h6 {
        color: inherit !important;
        text-wrap: balance;
    }
    h1 {
        font: var(--font-sz6--bold);
        margin: var(--space-l) 0 var(--space-l) 0;
    }
    h2 {
        font: var(--font-sz5--bold) !important;
    }
    h3 {
        font: var(--font-sz4--bold);
    }
    h4 {
        font: var(--font-sz3--bold);
    }
    h5 {
        font: var(--font-sz3--bold);
    }
    h6 {
        font: var(--font-sz3--bold);
        font-style: italic;
    }

    h2, h3, h4, h5, h6 {
        margin-top: var(--space-l) 0 var(--space-s) 0 !important;
    }
    /* h1:first-child:not(.toc-toggler-title) {
        margin-top: calc(var(--space-xl) - 20px) !important;
    } */

    :where(h2, h3, h4, h5, h6):first-child {
        margin-top: .5em !important;
    }

    h1 + h2 {
        margin-top: var(--space-l) !important;
    }
    
    h2 + h3,
    h3 + h4,
    h4 + h5 {
        margin-top: var(--space-m) !important;
    }
    
    h5 + h6 {
        margin-top: var(--space-m) !important;
    }

    p {
        font: var(--font-sz4) !important;
        margin: 0 0 var(--space-l) 0;
    }
    
    a {
        color: #005799;
    }

    /*h1 + p,
    p.dh-ingress {
        font: var(--font-sz4--100) !important;
        margin: var(--space-s) 0 var(--space-l) 0;
    }*/


    /**
     *  Fix for arrow in faq-section
     */
    button.faq-question {
        .icon {
            transition: transform 0.25s ease-in-out;
        }
        &[aria-expanded="true"] .icon {
            transform: scaleY(-1);
        }
    }
    .question-text {
        p {
            font: var(--font-sz4) !important;
        }
        * {
            margin: 1rem 0 !important;
        }
    }

    ul, ol {
        margin: 0 0 var(--space-l) 2em !important;
        padding: 0 !important;
        font: var(--font-sz4) !important;
        list-style-position: outside !important;
    }
    
    ol > li::marker {
        font-weight: 600;
    }

    li, li ul, li ol, li p {
        font: inherit !important;
        margin: 0 !important;
        padding: 0;
    }
    
    ol > li:not(:last-child), ul > li:not(:last-child) {
        margin-bottom: var(--space-sm) !important;
    }

    li > :is(ul, ol) {
        margin: var(--space-sm) 0 0 2em !important;
    }

    table {
        margin-top: 0;
        margin-bottom: var(--space-l) !important;
    }
    
    table * {
        /* word-spacing: 0.15em;
        letter-spacing: .02em; */
    }

    table.procydoTable {
        th, td {
            font: var(--font-sz2);
        }
    }
    @media screen and (min-width: 600px) {
        table.procydoTable {
            th, td {
                font: var(--font-sz3);
            }
        }
    }

    pre {
        font: 1.125em / var(--space-l) monospace !important;
        margin: 0 0 var(--space-l) 0 !important;
    }

    .image-cell .caption {
        font-style: italic !important;
        margin: var(--space-sm) 0 0 !important;
    }


    /* Styles for old faq element */
    .faq-holder {
        &, & * {
            font: inherit !important;
        }
        
        button {
            padding: 10px 35px;
            
            span {
                font: var(--font-sz4) !important;
                font-weight: normal !important;
            }
        }
        
        button::before {
            flex-shrink: 0;
            width: 1em;
            height: 1.25em;
            padding: 0;
            margin-left: auto;
            content: "";
            background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
            background-repeat: no-repeat;
            background-size: 1em;
            background-position: center center;
            transition: transform 0.25s ease-in-out;
        }

        button.expanded::before {
            transform: scaleY(-1);
        }

        .smartass_faq_answer {
            padding: 0 35px;
            margin: 0;
            font: var(--font-sz4) !important;
            
            :first-child {
                margin-top: 0;
            }
            :last-child {
                margin-bottom: 0;
            }
        }

        &:first-of-type {
            margin-top: var(--space-l) !important;
        }

        &:last-of-type {
            margin-bottom: var(--space-l) !important;
        }
    }

}

/* Big screen adjustments */
@media screen and (min-width: 900px) {
    #TextGuidePlayer .text-content,        /* Textguide Beta */
    #TextGuideEditor .tiptap,
    #CollectionPlayer .page-layout-content,
    .tinymce,
    .question-text,
    .faq-item {
        h1 {
            font: var(--font-sz7--bold);
            margin: var(--space-l) 0 var(--space-l) 0;
        }
        h2 {
            font: var(--font-sz6--bold) !important;
        }
        h3 {
            font: var(--font-sz5--bold);
        }
        h4 {
            font: var(--font-sz4--bold);
        }
        h5 {
            font: var(--font-sz3--bold);
        }
        h6 {
            font: var(--font-sz3--bold);
            font-style: italic;
        }
        h2, h3, h4, h5, h6 {
            margin: var(--space-lxl) 0 var(--space-s) 0 !important;
        }

        p.dh-ingress, h1 + p {
            /*font: var(--font-sz5--100) !important;*/
            /*max-width: 800px;*/
        }
    }
}


/* Automatic ingress */
#TextGuidePlayer .textguide-player .section-container:first-child .column-container:first-child .widget-container:first-child .text-content,
#TextGuideEditor .section-container:nth-child(2) .column-container:nth-child(2) .widget-block:nth-child(2) .tiptap {

    h1:first-child + p:last-child {
        font: var(--font-sz4--100) !important;
        margin: var(--space-s) 0 var(--space-l) 0;
    }

    @media screen and (min-width: 900px) {
        h1:first-child + p:last-child {
            font: var(--font-sz5--100) !important;
        }
    }
    
}





iframe #knowledgeTestPage {
    #questions .question .questionText span.title,
    #questions .answer .option label,
    #questions .freeTextAnswer .answerText,
    #commands button:not(:disabled),
    #messages .failed,
    #messages .passed {
        font: 1.125rem / var(--line-height-sz4) var(--font-family-default) !important;
    }
    #questions {
        .question .questionText span.title {
            font-weight: bold !important;
        }
        .answer {
            /* filter: opacity(80%); */
        }
    }
    &.custom-checkboxes .questionSeparator {
        border-top: none;
        height: 2em;
    }
}





/**
 *  Fix for guides shown as links
 */
.guide-link-container .guide-link {
    .type-icon {
        background-color: #f0f0f0;
        font-size: 26px;
        color: #757575;
        /* padding: 0; */
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        min-height: 54px;
        width: 54px;
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: stretch;
    }

    .guide-link-info {
        width: auto;
        overflow: revert;
        margin: 0 0 0 0;
        display: flex;
        align-items: center;
        flex: 1;
        padding: 7px 16px;
        gap: 16px;
        /*font: var(--font-sz4) !important;*/
        font: 1.125rem / var(--line-height-sz4) var(--font-family-default);

        .guide-link-title {
            /*font-weight: 500;
            font-size: 14px;*/
            font: inherit;
            white-space: revert;
            overflow: revert;
            text-overflow: revert;
            flex: 1;
        }

        .play-icon {
            background-color: #f0f0f0;
            color: #757575;
            border-radius: 100%;
            font-size: inherit;
            padding: 0 0 0 .1em;
            margin: 0;
            width: 1.5em;
            height: 1.5em;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}

/* Fix for outline guides (book) */
#outlineBookPage {
    .tabs-list button {
        font-size: 1rem !important;
    }
    .tabs-list button span {
        font: var(--font-sz4) !important;
    }
    .dynatree-container {
        font-size: 1rem !important;
    }
    span.dynatree-node {
        font-size: 1rem !important;
    }
    .dynatree-node {
        img {
            margin-top: 6px !important;
        }
        a {
            font: var(--font-sz4) !important;
        }
    }
}


/* Fixes for portal pages */

.procydo-portal * {
    word-spacing: 0 !important;
    letter-spacing: 0 !important; /* Override InfoCaptions css */
}
#dh-app div {
    &:first-child {
        font: 800 20px/32px "Open Sans Custom", sans-serif !important;
    }
    &:last-child {
        font: normal 14px/18px "Open Sans Custom", sans-serif !important;
        padding-left: 1px;
    }
}

.search-title-inner {
    h1 {
        margin: 0 !important;
        
        span {
            font: 800 45px / 3.375rem var(--font-family-default) !important;
        }
    }
}
.tile-header-text {
    font: var(--font-sz5--bold) !important;
}

[data-tilename="messageTile"] .message-tile {
    h1 {
        font: var(--font-sz6--bold);
        margin: var(--space-l) 0 var(--space-l) 0 !important;
    }
    h2 {
        font: var(--font-sz5--bold) !important;
    }
    h3 {
        font: var(--font-sz4--bold);
    }
    h4, h5, h6 {
        font: var(--font-sz3--bold);
    }
    h6 {
        font-style: italic;
    }
    h2, h3, h4, h5, h6 {
        margin-top: var(--space-l) 0 var(--space-s) 0 !important;
    }
}

@media screen and (min-width: 900px) {
    [data-tilename="messageTile"] .message-tile {
        h1 {
            font: var(--font-sz7--bold);
            margin: var(--space-l) 0 var(--space-l) 0 !important;
        }
        h2 {
            font: var(--font-sz6--bold) !important;
        }
        h3 {
            font: var(--font-sz5--bold);
        }
        h4 {
            font: var(--font-sz4--bold);
        }
        h5, h6 {
            font: var(--font-sz3--bold);
        }
        h6 {
            font-style: italic;
        }
        h2, h3, h4, h5, h6 {
            margin: var(--space-lxl) 0 var(--space-s) 0 !important;
        }
    }
}


[data-tilename="messageTile"] .message-tile :is(p, li, th, td),
[data-tilename="popularTile"] .guide-title {
    font: 1.125rem / var(--line-height-sz4) var(--font-family-default);
}


.dh-portal-menu li a {
    font: 1.125rem / var(--line-height-sz4) var(--font-family-default);
}



/**
 * Fix formating in predefined formats
 * (Remove formatting in custom.css for full effect)
 */
p:is(.card-success, .card-error, .card-warning) {
    padding: 16px !important;
    border-style: solid;
    border-width: 6px 6px 6px 80px;
    border-radius: 6px;
    background-color: #fff;
}
p:is(.card-success, .card-error, .card-warning)::after {
    left: -55px !important; /* 80/2 + 30/2 = 55 */
    font-size: 20px !important;
}
p.card-success {
    border-color: #d0efd5;
    color: var(--dh-color-black) !important;
}
p.card-success::after {
    background-color: var(--dh-color-green);
    color: var(--dh-color-white);
}
p.card-error {
    border-color: #ffece6;
    color: var(--dh-color-black) !important;
}
p.card-error::after {
    background-color: var(--dh-color-red);
    color: var(--dh-color-white) !important;
}
p.card-warning {
    border-color: #fff6c4;
    color: var(--dh-color-black) !important;
}
p.card-warning::after {
    background-color: var(--dh-color-yellow);
    color: var(--dh-color-black) !important;
}