diff --git a/assets/css/style.css b/assets/css/style.css
index 6f507ca6f..20375868f 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -408,36 +408,38 @@ a.header-anchor::before {
   content: "#";
 }
 
-.accordion-header .show {
+.accordion .accordion-header .show {
   display: block;
 }
-.accordion-header .hide {
+.accordion .accordion-header .hide {
   display: none;
 }
-.accordion-header[aria-expanded=true] .show {
+.accordion .accordion-header[aria-expanded=true] .show {
   display: none;
 }
-.accordion-header[aria-expanded=true] .hide {
+.accordion .accordion-header[aria-expanded=true] .hide {
   display: block;
 }
-.accordion-header:hover {
+.accordion .accordion-header:hover {
   background-color: #fbf2ea;
 }
-
-.accordion-body table {
+.accordion .accordion-body {
+  padding: 0;
+}
+.accordion .accordion-body table {
   border: 1px solid rgba(153, 153, 153, 0.5);
   border-radius: 0.25rem;
 }
-.accordion-body table th {
+.accordion .accordion-body table th {
   font-size: 0.875rem;
 }
-.accordion-body table tbody {
+.accordion .accordion-body table tbody {
   font-size: 0.875rem;
 }
-.accordion-body table tbody tr:nth-child(odd) {
+.accordion .accordion-body table tbody tr:nth-child(odd) {
   background-color: #F9F8F6;
 }
-.accordion-body table tbody tr:hover {
+.accordion .accordion-body table tbody tr:hover {
   background-color: #fbf2ea;
   transition: 0.5s;
 }
diff --git a/assets/css/style.css.map b/assets/css/style.css.map
index 16836cb54..8767bcb18 100644
--- a/assets/css/style.css.map
+++ b/assets/css/style.css.map
@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../_sass/card.scss","../../_sass/colors.scss","../../_sass/code-view.scss","../../_sass/front-page.scss","../../_sass/breakpoints.scss","../../_sass/fonts.scss","../../_sass/heading.scss","../../_sass/accordion-table.scss","../../_sass/paragraph-highlight.scss","../../_sass/sidebar.scss","../../_sass/title-header.scss","../../_sass/tabs.scss","../../_sass/swedbank-pay-design-guide-theme.scss","../../_sass/variables.scss"],"names":[],"mappings":"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","sourcesContent":[".cards-icon {\n    svg {\n        fill: $brown;\n        max-width: 24px;\n    }\n}\n","$yellow: #fdc129;\n$soft-yellow: #fff3d5;\n$light-turquoise: #ebf8f2;\n$apricot: #fbf2ea;\n$pink: #efb7b6;\n$brand-info: #4572c0;\n$brand-info-light: #e8eff9;\n$brand-success: #51971b;\n$brand-success-light: #f2f7eb;\n$turquoise: #31a3ae;\n$soft-turquoise: #98d0d6;\n$turquoise-link: #257886;\n$brown: #2f2424;\n$dark-brown: #493c3b;\n$medium-brown: #72605e;\n$soft-brown: #a38b80;\n$white: #fff;\n$card-pink: #c5569a;\n$soft-card-pink: #d698c8;\n$background-gray: #ebE7E2;\n$background-front-page: #fefcfa;\n$code-green: #9c6;\n$black: #222;\n","@import 'colors.scss';\n\n.code-view {\n    .code-view-table {\n        .code-view-code {\n\n            .nc,\n            .nf {\n                color: $code-green;\n            }\n        }\n    }\n}\n","@import 'colors.scss';\n@import 'fonts.scss';\n@import 'breakpoints.scss';\n\n$front-page-padding: 0 4rem;\n$front-page-max-width: $breakpoint-lg;\n\n@mixin row-cards {\n    >[class*='col-'] {\n        display: flex;\n    }\n}\n\n@mixin front-page-cards ($color) {\n    margin-bottom: 4rem;\n\n    .row {\n        @include row-cards();\n\n        &>:first-child {\n            &:before {\n                content: \"\";\n                position: absolute;\n                bottom: 0;\n                left: -0.5rem;\n                width: 3.5rem;\n                height: 2.5rem;\n                background-color: $color;\n                background-image: radial-gradient($color 20%, $background-front-page 20%);\n                background-position: 0 0;\n                background-size: 0.45rem 0.5rem;\n            }\n        }\n\n        &>:last-child {\n            &:before {\n                content: \"\";\n                position: absolute;\n                top: 1rem;\n                right: -0.25rem;\n                width: 3.5rem;\n                height: 2.5rem;\n                background-color: $color;\n                background-image: radial-gradient($color 20%, $background-front-page 20%);\n                background-position: 0 0;\n                background-size: 0.45rem 0.5rem;\n            }\n        }\n    }\n}\n\n.front-page {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    #github {\n        top: 2.5rem;\n        path {\n            fill: $black;\n        }\n    }\n    \n    .front-page-top {\n        position: relative;\n        margin: 0 4rem;\n        max-width: $front-page-max-width;\n        background-color: none;\n        z-index: 0;\n        border-radius: 1rem;\n\n        .front-page-hero {\n            position: relative;\n            margin-bottom: 1.5rem;\n            z-index: 1;\n            padding: 1.5rem;\n\n            h3 {\n                color: $brown;\n                font-family: $font_headline;\n                margin-bottom: 2rem;\n                font-size: 2.5rem;\n                line-height: 3.5rem;\n                \n\n            }\n\n            p {\n                color: $brown;\n                font-size: 1.125rem;\n            }\n            \n            a {\n                color: #43d0dd;\n            }\n\n            .front-page-hero-name {\n                font-family: $font_mono;\n                font-weight: bold;\n                font-size: 2.5rem;\n                color: $yellow;\n                margin-bottom: 1rem;\n\n\n                span {\n                    color: $white;\n                }\n            }\n\n            .front-page-hero-jumbo {\n                    color: $brown;\n                    font-family: $font_headline;\n                    margin-bottom: 2rem;\n                    font-size: 3.5rem;\n                }\n            \n            .front-page-hero-lean {\n                font-family: $font_mono;\n            }\n            \n\n        }\n\n        .front-page-intro-cards {\n            h2 {\n                color: $brown;\n                padding: 1.5rem;\n                padding-bottom: 0;\n\n                .header-anchor {\n                    display: none;\n                }\n            }\n\n            .row {\n                @include row-cards();\n            }\n        }\n\n        @media screen and (min-width: $breakpoint-xxl) {\n            margin-bottom: 8rem;\n            \n            .front-page-intro-cards {\n                left: 0;\n                width: 100%;\n            }\n        }\n    }\n    .front-page-container {\n        max-width: $front-page-max-width;\n        margin: $front-page-padding;\n        position: relative;\n\n        @media screen and (max-width: $breakpoint-md) {\n            margin: 0;\n        }\n\n        .front-page-merchants {\n            margin-bottom: 3.75rem;\n\n            .merchants-container {\n                display: flex;\n                flex-wrap: wrap;\n\n                .merchant-link {\n                    display: flex;\n                    align-items: center;\n                    height: 2rem;\n                    margin: 0.25rem 2rem 1rem 0;\n                }\n            }\n        }\n\n\n        .front-page-cards-sdk {\n            @include front-page-cards($turquoise);\n        }\n\n        .front-page-cards-module {\n            @include front-page-cards($card-pink);\n        }\n\n\n        .front-page-release-notes {\n            margin-bottom: 4rem;\n\n            .release-notes-container {\n                margin-top: 2.5rem;\n\n                .row {\n                    border-bottom: 1px solid $background-gray;\n                    margin-bottom: 2rem;\n                    padding-bottom: 1rem;\n\n                    .release-notes-date {\n                        color: $medium-brown;\n                    }\n\n                }\n            }\n        }\n\n        .front-page-cards-extra {\n            @include front-page-cards($yellow);\n        }\n\n        .front-page-contact {\n            display: none; // Not currently in use\n            // display: flex;\n\n            .front-page-contact-content {\n                background-color: $dark-brown;\n                width: 100%;\n                min-height: 13.5rem;\n                padding: 3.5rem 4rem;\n\n                h2 {\n                    color: $white;\n                    margin-bottom: 1.5rem;\n\n\n                    .header-anchor {\n                        display: none;\n                    }\n                }\n\n                p {\n                    color: $white;\n                }\n\n                .btn {\n                    width: 18rem;\n                    justify-content: center;\n                    margin: 1rem 0;\n\n                    &:focus,\n                    &:focus,\n                    &:hover {\n                        color: $medium-brown;\n                    }\n                }\n            }\n\n        }\n    }\n\n    .front-page-demoshop {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        padding: $front-page-padding;\n        padding-top: 4rem;\n        margin-bottom: 4rem;\n        width: 100%;\n        height: 22.5rem;\n        background-color: $dark-brown;\n        text-decoration: none;\n        border-radius: 1rem;\n\n        &:after {\n            display: none;\n            content: none;\n        }\n\n        .front-page-demoshop-text {\n            display: flex;\n            flex-direction: column;\n            margin-bottom: 2rem;\n            max-width: $front-page-max-width;\n            width: 100%;\n\n            .h2 {\n                color: $white;\n            }\n\n            .demoshop-text-description {\n                color: $white;\n                width: 40%;\n                min-height: 4.5rem;\n                font-size: 1rem;\n\n            }\n            \n        }\n\n        @media screen and (max-width: $breakpoint-md) {\n            padding-top: 3rem;\n            height: 18rem;\n\n            .front-page-demoshop-text {\n                .demoshop-text-description {\n                    width: 100%;\n                    min-height: 2.25rem;\n                }\n            }\n\n        }\n\n        .front-page-demoshop-link {\n            display: flex;\n            position: relative;\n            color: $white;\n            text-decoration: none;\n            background-color: $medium-brown;\n            align-items: center;\n            height: 4.625rem;\n            border-radius: 2px;\n            box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);\n            max-width: $front-page-max-width;\n            width: 100%;\n            cursor: pointer;\n\n            a::after{\n                content: '';\n            }\n            \n            &:hover,\n            &:focus {\n                background-color: $white;\n                color: $brown;\n            \n                .h3 {\n                    color: $brown;\n                }\n            }\n\n            .demoshop-link-img {\n                display: flex;\n                align-items: center;\n                position: absolute;\n                bottom: -1rem;\n                right: 3%;\n                pointer-events: none;\n\n                .demoshop-link-img-web {\n                    width: 26.5rem;\n                    height: 15.125rem;\n                    border-radius: 2px;\n                    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);\n                }\n\n                .demoshop-link-img-mobile {\n                    height: 15.125rem;\n                    border-radius: 2px;\n                    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);\n                    margin-right: 1rem;\n                }\n            }\n\n            .h3 {\n                color: $white;\n                padding-right: 1rem;\n                padding-left: 1.5rem;\n                margin: 0;\n            }\n        }\n\n        @media screen and (min-width: $breakpoint-xxl) {\n            .front-page-demoshop-text {\n                margin-bottom: 1rem;\n            }\n\n            .front-page-demoshop-link {\n                .demoshop-link-img {\n                    bottom: -2rem;\n                }\n            }\n        }\n    }\n\n\n}\n","$breakpoint-sm: 576px;\n$breakpoint-md: 768px;\n$breakpoint-lg: 992px;\n$breakpoint-xl: 1200px;\n$breakpoint-xxl: 1600px;\n","$font_headline: \"Swedbank Headline\", \"Arial\", sans-serif;\n$font_mono: \"Akkurat Mono\", monospace;\n$font_body: \"Arial\", sans-serif;\n","@import 'colors.scss';\n\n.heading-line {\n    position: relative;\n\n    &:after {\n        content: \"\";\n        position: absolute;\n        bottom: -0.75rem;\n        left: 0;\n        width: 4rem;\n        height: 4px;\n        background-color: $yellow;\n        border-radius: 0.625rem;\n    }\n\n    &.heading-line-white {\n        &:after {\n            background-color: $white;\n        }\n    }\n\n    &.heading-line-green {\n        &:after {\n            background-color: $brand-success;\n        }\n    }\n\n    &.heading-line-sdk {\n        &:after {\n            background-color: $turquoise;\n        }\n    }\n\n    &.heading-line-module {\n        &:after {\n            background-color: $card-pink;\n        }\n    }\n\n    &.heading-line-long {\n        &:after {\n            width: 7rem;\n        }\n    }\n\n    &.heading-line-indent {\n        &:after {\n            left: 1.5rem;\n        }\n    }\n}\n\n\nh1>a.header-anchor,\nh2>a.header-anchor,\nh3>a.header-anchor,\nh4>a.header-anchor,\nh5>a.header-anchor,\nh6>a.header-anchor {\n    color: #ebf8f2;\n    text-decoration: none;\n}\n\nh1:hover>a.header-anchor,\nh2:hover>a.header-anchor,\nh3:hover>a.header-anchor,\nh4:hover>a.header-anchor,\nh5:hover>a.header-anchor,\nh6:hover>a.header-anchor {\n    color: #8acdc3;\n}\n\nh1>a.header-anchor:hover,\nh2>a.header-anchor:hover,\nh3>a.header-anchor:hover,\nh4>a.header-anchor:hover,\nh5>a.header-anchor:hover,\nh6>a.header-anchor:hover {\n    color: #257886;\n}\n\na.header-anchor::before {\n    content: '#';\n}\n","@import 'colors.scss';\n\n.accordion-header{\n        .show {\n            display: block;\n        }\n\n        .hide {\n            display: none;\n        }\n\n        &[aria-expanded=\"true\"] {\n            .show {\n                display: none;\n            }\n\n            .hide {\n                display: block;\n            }\n        }\n\n        &:hover {\n                background-color: $apricot;\n        }\n}\n\n.accordion-body {\n\n    table {\n        border: 1px solid rgba(153, 153, 153, 0.5);\n        border-radius: 0.25rem;\n\n        th {\n            font-size: 0.875rem;\n        }\n\n        tbody {\n            font-size: 0.875rem;\n\n            tr:nth-child(odd) {\n                background-color: #F9F8F6;\n            }\n\n            tr {\n                &:hover {\n                    background-color: $apricot;\n                    transition: .5s;\n                }\n            }\n        }\n    }\n}\n","@import 'colors.scss';\n\n.paragraph-highlight {\n    margin: 2rem 0;\n    padding: 0.25rem 0;\n    padding-left: 1.5rem;\n    border-left: 2px solid $yellow;\n}\n",".sidebar {\n    &.dg-sidebar {\n        &.visible {\n            @media screen and (max-width: $breakpoint-lg) {\n                display: block;\n                position: absolute;\n                margin-top: 80px;\n            }\n        }\n    }\n\n    @media screen and (max-width: $breakpoint-lg) {\n        display: none;\n    }\n\n    &.topbar-open {\n        display: block;\n    }\n\n    .sidebar-main-nav {\n        @media screen and (max-width: $breakpoint-lg) {\n            border-top: #ffffff;\n\n            &:before {\n                background-color: #ffffff;\n            }\n        }\n\n        .sidebar-logo {\n            @media screen and (max-width: $breakpoint-lg) {\n                display: none;\n            }\n        }\n\n        .main-nav-ul {\n            margin-top: 0;\n            height: calc(100vh - 120px);\n            padding: 0 1rem;\n        }\n    }\n}\n\n#dg-sidebar {\n    &.sidebar {\n        .nav-ul {\n            list-style: none;\n            overflow: hidden;\n            padding: 0;\n            top: auto;\n            position: relative;\n            transition: none;\n        }\n    }\n\n    .main-nav-ul {\n        a {\n            &.disabled {\n                ~nav {\n                    display: none;\n                }\n            }\n        }\n\n        .leaf {\n            &.active {\n                >a {\n                    &:hover {\n                        &:after {\n                            content: none;\n                        }\n                    }\n                }\n            }\n        }\n    }\n}\n","@import 'colors.scss';\n\n.title-header {\n    display: flex;\n    justify-content: center;\n    background-color: $dark-brown;\n\n    .title-header-container {\n        width: 100%;\n        padding: 3rem 1rem;\n\n        h1,\n        h4,\n        p {\n            color: $white;\n        }\n\n        h1 {\n            margin-top: 0;\n        }\n\n        p {\n            font-size: 1.125rem;\n        }\n\n        .title-header-estimated-read {\n            color: $yellow;\n            display: flex;\n            margin-bottom: 0.75rem;\n\n            i {\n                margin-right: 0.5rem;\n            }\n        }\n        a {\n            color: #43d0dd;\n\n            ::after {\n                content: url(../img/external-url-dark-bg.svg);\n            }\n        }\n    }\n\n\n\n}\n\n.title-header-checkout-v3 {\n    display: flex;\n    justify-content: center;\n\n    #github {\n        path {\n            fill: $black;\n        }\n    }\n\n    .title-header-container {\n        width: 100%;\n        padding: 3rem 1rem;\n        padding-bottom: 0;\n\n        h1,\n        h4,\n        p {\n            color: $brown;\n\n            strong {\n                font-size: 1.25rem;\n            }\n        }\n\n        h1 {\n            margin-top: 0;\n            color: $brown;\n        }\n\n        h4 {\n            margin-bottom: 1rem;\n        }\n\n        p {\n            font-size: 1.125rem;\n        }\n\n        .title-header-estimated-read {\n            color: $yellow;\n            display: flex;\n            margin-bottom: 0.75rem;\n\n            i {\n                margin-right: 0.5rem;\n            }\n        }\n        a {\n            color: #43d0dd;\n\n            ::after {\n                content: url(../img/external-url-dark-bg.svg);\n            }\n        }\n\n\n    }\n\n\n\n}\n",".tabs {\n    margin: 2rem 0 3.75rem;\n\n    li {\n        cursor: pointer;\n    }\n}\n\n.tab-intro {\n    padding-bottom: 3rem;\n}\n","@import 'colors.scss';\n@import 'fonts.scss';\n@import 'variables.scss';\n@import 'breakpoints.scss';\n\n@import 'card.scss';\n@import 'code-view.scss';\n@import 'front-page.scss';\n@import 'heading.scss';\n@import 'accordion-table.scss';\n@import 'paragraph-highlight.scss';\n@import 'sidebar.scss';\n@import 'title-header.scss';\n@import 'tabs.scss';\n\n$bg: #f5f2f0;\n$darkened-bg: darken($bg, 10%);\n\nimg {\n    max-width: 100%;\n}\n\nbody {\n    font-size: 1.125rem;\n}\n\n.table {\n    th,\n    td {\n        >.material-icons {\n            float: none;\n        }\n    }\n}\n\n.jumbotron {\n    /* TODO: Make .jumbotron @extend .slab. */\n    font-family: Roboto, sans-serif;\n    font-size: 21px;\n    font-weight: 1;\n    min-height: 1rem;\n    padding: 3rem;\n    margin-bottom: 1rem;\n    border-radius: 4px;\n    background-color: #ebe7e2;\n\n    strong {\n        font-weight: bold;\n    }\n\n    p:last-of-type {\n        margin-bottom: 0;\n    }\n}\n\n// a[href ^='//']:not([href *='{{ site.url }}']):after,\n// a[href ^='http://']:not([href *='{{ site.url }}']):after,\n// a[href ^='https://']:not([href *='{{ site.url }}']):after {\n//     content: url('../img/external-url.svg');\n//     margin-left: .3rem;\n//     display: inline-block;\n//     width: .8rem;\n//     background-repeat: none;\n//     color: #257886;\n\n//     &.front-page-demoshop {\n//         display: none;\n//     }\n// }\n\n#designguide .designguide-header .topbar-info a {\n    margin-left: 5px;\n    color: rgba(34, 34, 34, .75);\n    fill: rgba(34, 34, 34, .75);\n    border: none\n}\n\n#designguide .designguide-header .topbar-info a:after {\n    content: none;\n    display: inline;\n}\n\n#designguide .designguide-header .topbar-info a svg {\n    overflow: visible;\n    width: 2rem;\n    height: 2rem;\n    display: inline-block;\n    vertical-align: top;\n}\n\n#designguide .designguide-header .topbar-info a:hover {\n    color: rgba(0, 0, 0, .75);\n    fill: rgba(0, 0, 0, .75)\n}\n\n.iterator {\n    margin: 2rem 0;\n}\n\n.iterator a.btn {\n    justify-content: center;\n    width: 49%;\n    min-width: 8rem;\n}\n\n.iterator a.btn[rel='prev']:before {\n    content: '❮';\n    position: absolute;\n    left: 1rem;\n}\n\n.iterator a.btn[rel='next']:after {\n    content: '❯';\n    position: absolute;\n    right: 1rem;\n}\n\n#designguide {\n    .dg-sidebar {\n        border-right: 1px solid $background-gray;\n\n        @media screen and (max-width: $breakpoint-lg) {\n            position: fixed;\n        }\n\n        .main-nav-ul {\n            border-bottom: 1px solid $background-gray;\n\n            .sidebar-secondary-nav {\n                overflow-y: auto;\n            }\n        }\n    }\n}\n\n.documentation {\n    @media screen and (max-width: $breakpoint-lg) {\n        overflow-y: auto;\n    }\n\n    > div {\n        &.row {\n            margin-right: 0;\n        }\n    }\n\n    .doc-container {\n        max-width: 100%;\n\n        h2 {\n            font-size: 1.75rem\n        }\n    }\n\n    code[data-processed='true'].language-mermaid {\n        background: none;\n        border: none;\n        padding: 0px\n    }\n\n    .highlighter-rouge {\n        margin-bottom: 1rem;\n\n        code {\n            padding: 0;\n            background-color: none;\n            border: none;\n            font-size: 1rem;\n        }\n\n        pre.highlight {\n            background-color: #f5f2f0;\n            margin: 0;\n        }\n\n        .rouge-table {\n            position: relative;\n\n            &,\n            tbody,\n            tr {\n                display: block;\n            }\n\n            pre {\n                font-family: 'Akkurat Mono', monospace;\n            }\n\n            .rouge-gutter {\n                text-align: right;\n                padding: 0 .7rem;\n                position: absolute;\n                left: 0;\n                top: 0;\n                background-color: #f5f2f0;\n                border-right: 1px solid #e1d7d1;\n            }\n\n            .rouge-code {\n                padding-left: 50px;\n                display: block;\n                overflow-x: auto;\n            }\n        }\n    }\n\n    .no-padding {\n        padding: 0;\n        padding-bottom: 5rem;\n    }\n\n    .normal-padding {\n        padding: 1rem 1rem 5rem;\n    }\n\n    .max-width {\n        max-width: $max-width;\n    }\n\n    .max-width-card-overview {\n        max-width: 880px;\n    }\n\n    .row.card-list > div {\n        display: flex;\n        align-self: stretch;\n    }\n\n    .language-mermaid {\n        $apricot: #fbf2ea;\n        $pink: #efb7b6;\n        $brand-info-light: #e8eff9;\n        $brand-success-light: #f2f7eb;\n        $darker-apricot: darken($apricot, 10%);\n        $black: #222;\n        $brown: #2f2424;\n\n        svg {\n            width: 100% !important;\n            height: 100%;\n        }\n\n        rect.actor {\n            fill: $apricot !important;\n            stroke: $darker-apricot !important;\n        }\n\n        .activation0,\n        .activation1,\n        .activation2 {\n            fill: $brand-success-light !important;\n            stroke: darken($brand-success-light, 10%) !important;\n        }\n\n        text.actor {\n            font-family: Arial, sans-serif !important;\n            font-size: 1rem !important;\n        }\n\n        .actor-line {\n            stroke: $apricot !important;\n            stroke-width: 4 !important;\n        }\n\n        .messageLine0 {\n            stroke-width: 2 !important;\n            stroke-dasharray: \"2 2\";\n            marker-end: \"url(#arrowhead)\";\n            stroke: $black !important;\n        }\n\n        .messageLine1 {\n            stroke-width: 1.5;\n            stroke-dasharray: \"2 2\";\n            stroke: $brown !important;\n        }\n\n        #arrowhead {\n            fill: $brown !important;\n        }\n\n        .messageText {\n            fill: $black !important;\n            stroke: none;\n            font-family: Arial, sans-serif !important;\n            font-size: 1rem !important;\n        }\n\n        .labelBox {\n            stroke: $pink !important;\n            fill: $pink !important;\n        }\n\n        .labelText {\n            fill: $black !important;\n            stroke: none;\n            font-family: Arial, sans-serif !important;\n        }\n\n        .loopText {\n            fill: $black !important;\n            stroke: none;\n            font-family: Arial, sans-serif !important;\n            font-size: 1rem !important;\n        }\n\n        .loopLine {\n            stroke-width: 2;\n            stroke-dasharray: \"2 2\";\n            marker-end: \"url(#arrowhead)\";\n            stroke: $pink !important;\n        }\n\n        .note {\n            stroke: darken($brand-info-light, 20%) !important;\n            fill: $brand-info-light !important;\n        }\n\n        .noteText {\n            fill: $black !important;\n            stroke: none;\n            font-family: Arial, sans-serif !important;\n            font-size: 1rem !important;\n        }\n    }\n\n    .plantuml {\n        text-align: center;\n    }\n\n    .table {\n        .field-level {\n            &::before {\n                font-family: $font_mono;\n                color: $yellow;\n                content: '╰─╼';\n            }\n\n            code {\n                border: 1px solid $yellow;\n                border-radius: 8px;\n            }\n        }\n\n        .field-level-0::before {\n            content: '';\n        }\n\n        .field-level-2 {\n            margin-left: 2rem;\n        }\n\n        .field-level-3 {\n            margin-left: 4rem;\n        }\n\n        .field-level-4 {\n            margin-left: 6rem;\n        }\n\n        .field-level-5 {\n            margin-left: 8rem;\n        }\n\n        .field-level-6 {\n            margin-left: 10rem;\n        }\n    }\n\n    #github {\n        opacity: .5;\n        position: absolute;\n        right: 4rem;\n        top: 2rem;\n        transition: opacity .3s;\n\n        @media screen and (max-width: $breakpoint-lg) {\n            top: 6rem;\n        }\n\n    }\n\n    a#github:after {\n        display: none;\n    }\n\n    a#github:hover {\n        opacity: 1;\n    }\n}\n\n#overlay {\n    @media screen and (max-width: $breakpoint-lg) {\n        position: fixed; /* Sit on top of the page content */\n        display: none; /* Hidden by default */\n        width: 100%; /* Full width (cover the whole page) */\n        height: 100%; /* Full height (cover the whole page) */\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background-color: rgba(0,0,0,0.5); /* Black background with opacity */\n        z-index: 3; /* Specify a stack order in case you're using a different order for other elements */\n    }\n}\n\n.search-box {\n    position: absolute;\n    right: 8rem;\n    top: 1.5rem;\n    z-index: 2;\n\n\n    .search-input {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n    }\n\n    #search-btn {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n        height: 56px;\n    }\n\n    @media screen and (max-width: $breakpoint-lg) {\n        position: fixed;\n        right: 1rem;\n        top: 1rem;\n        z-index: 401;\n\n        #tipue_search_input {\n            display: none;\n        }\n\n        #search-btn {\n            border-top-left-radius: 8px;\n            border-top-left-radius: var(--border-radius);\n            border-bottom-left-radius: 8px;\n            border-bottom-left-radius: var(--border-radius);\n        }\n    }\n}\n\n.topbar-logo {\n    @media screen and (max-width: $breakpoint-sm) {\n        display: block;\n        position: absolute;\n    }\n}\n","$max-width: 880px;\n"],"file":"style.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../_sass/card.scss","../../_sass/colors.scss","../../_sass/code-view.scss","../../_sass/front-page.scss","../../_sass/breakpoints.scss","../../_sass/fonts.scss","../../_sass/heading.scss","../../_sass/accordion-table.scss","../../_sass/paragraph-highlight.scss","../../_sass/sidebar.scss","../../_sass/title-header.scss","../../_sass/tabs.scss","../../_sass/swedbank-pay-design-guide-theme.scss","../../_sass/variables.scss"],"names":[],"mappings":"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","sourcesContent":[".cards-icon {\n    svg {\n        fill: $brown;\n        max-width: 24px;\n    }\n}\n","$yellow: #fdc129;\n$soft-yellow: #fff3d5;\n$light-turquoise: #ebf8f2;\n$apricot: #fbf2ea;\n$pink: #efb7b6;\n$brand-info: #4572c0;\n$brand-info-light: #e8eff9;\n$brand-success: #51971b;\n$brand-success-light: #f2f7eb;\n$turquoise: #31a3ae;\n$soft-turquoise: #98d0d6;\n$turquoise-link: #257886;\n$brown: #2f2424;\n$dark-brown: #493c3b;\n$medium-brown: #72605e;\n$soft-brown: #a38b80;\n$white: #fff;\n$card-pink: #c5569a;\n$soft-card-pink: #d698c8;\n$background-gray: #ebE7E2;\n$background-front-page: #fefcfa;\n$code-green: #9c6;\n$black: #222;\n","@import 'colors.scss';\n\n.code-view {\n    .code-view-table {\n        .code-view-code {\n\n            .nc,\n            .nf {\n                color: $code-green;\n            }\n        }\n    }\n}\n","@import 'colors.scss';\n@import 'fonts.scss';\n@import 'breakpoints.scss';\n\n$front-page-padding: 0 4rem;\n$front-page-max-width: $breakpoint-lg;\n\n@mixin row-cards {\n    >[class*='col-'] {\n        display: flex;\n    }\n}\n\n@mixin front-page-cards ($color) {\n    margin-bottom: 4rem;\n\n    .row {\n        @include row-cards();\n\n        &>:first-child {\n            &:before {\n                content: \"\";\n                position: absolute;\n                bottom: 0;\n                left: -0.5rem;\n                width: 3.5rem;\n                height: 2.5rem;\n                background-color: $color;\n                background-image: radial-gradient($color 20%, $background-front-page 20%);\n                background-position: 0 0;\n                background-size: 0.45rem 0.5rem;\n            }\n        }\n\n        &>:last-child {\n            &:before {\n                content: \"\";\n                position: absolute;\n                top: 1rem;\n                right: -0.25rem;\n                width: 3.5rem;\n                height: 2.5rem;\n                background-color: $color;\n                background-image: radial-gradient($color 20%, $background-front-page 20%);\n                background-position: 0 0;\n                background-size: 0.45rem 0.5rem;\n            }\n        }\n    }\n}\n\n.front-page {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n\n    #github {\n        top: 2.5rem;\n        path {\n            fill: $black;\n        }\n    }\n    \n    .front-page-top {\n        position: relative;\n        margin: 0 4rem;\n        max-width: $front-page-max-width;\n        background-color: none;\n        z-index: 0;\n        border-radius: 1rem;\n\n        .front-page-hero {\n            position: relative;\n            margin-bottom: 1.5rem;\n            z-index: 1;\n            padding: 1.5rem;\n\n            h3 {\n                color: $brown;\n                font-family: $font_headline;\n                margin-bottom: 2rem;\n                font-size: 2.5rem;\n                line-height: 3.5rem;\n                \n\n            }\n\n            p {\n                color: $brown;\n                font-size: 1.125rem;\n            }\n            \n            a {\n                color: #43d0dd;\n            }\n\n            .front-page-hero-name {\n                font-family: $font_mono;\n                font-weight: bold;\n                font-size: 2.5rem;\n                color: $yellow;\n                margin-bottom: 1rem;\n\n\n                span {\n                    color: $white;\n                }\n            }\n\n            .front-page-hero-jumbo {\n                    color: $brown;\n                    font-family: $font_headline;\n                    margin-bottom: 2rem;\n                    font-size: 3.5rem;\n                }\n            \n            .front-page-hero-lean {\n                font-family: $font_mono;\n            }\n            \n\n        }\n\n        .front-page-intro-cards {\n            h2 {\n                color: $brown;\n                padding: 1.5rem;\n                padding-bottom: 0;\n\n                .header-anchor {\n                    display: none;\n                }\n            }\n\n            .row {\n                @include row-cards();\n            }\n        }\n\n        @media screen and (min-width: $breakpoint-xxl) {\n            margin-bottom: 8rem;\n            \n            .front-page-intro-cards {\n                left: 0;\n                width: 100%;\n            }\n        }\n    }\n    .front-page-container {\n        max-width: $front-page-max-width;\n        margin: $front-page-padding;\n        position: relative;\n\n        @media screen and (max-width: $breakpoint-md) {\n            margin: 0;\n        }\n\n        .front-page-merchants {\n            margin-bottom: 3.75rem;\n\n            .merchants-container {\n                display: flex;\n                flex-wrap: wrap;\n\n                .merchant-link {\n                    display: flex;\n                    align-items: center;\n                    height: 2rem;\n                    margin: 0.25rem 2rem 1rem 0;\n                }\n            }\n        }\n\n\n        .front-page-cards-sdk {\n            @include front-page-cards($turquoise);\n        }\n\n        .front-page-cards-module {\n            @include front-page-cards($card-pink);\n        }\n\n\n        .front-page-release-notes {\n            margin-bottom: 4rem;\n\n            .release-notes-container {\n                margin-top: 2.5rem;\n\n                .row {\n                    border-bottom: 1px solid $background-gray;\n                    margin-bottom: 2rem;\n                    padding-bottom: 1rem;\n\n                    .release-notes-date {\n                        color: $medium-brown;\n                    }\n\n                }\n            }\n        }\n\n        .front-page-cards-extra {\n            @include front-page-cards($yellow);\n        }\n\n        .front-page-contact {\n            display: none; // Not currently in use\n            // display: flex;\n\n            .front-page-contact-content {\n                background-color: $dark-brown;\n                width: 100%;\n                min-height: 13.5rem;\n                padding: 3.5rem 4rem;\n\n                h2 {\n                    color: $white;\n                    margin-bottom: 1.5rem;\n\n\n                    .header-anchor {\n                        display: none;\n                    }\n                }\n\n                p {\n                    color: $white;\n                }\n\n                .btn {\n                    width: 18rem;\n                    justify-content: center;\n                    margin: 1rem 0;\n\n                    &:focus,\n                    &:focus,\n                    &:hover {\n                        color: $medium-brown;\n                    }\n                }\n            }\n\n        }\n    }\n\n    .front-page-demoshop {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        padding: $front-page-padding;\n        padding-top: 4rem;\n        margin-bottom: 4rem;\n        width: 100%;\n        height: 22.5rem;\n        background-color: $dark-brown;\n        text-decoration: none;\n        border-radius: 1rem;\n\n        &:after {\n            display: none;\n            content: none;\n        }\n\n        .front-page-demoshop-text {\n            display: flex;\n            flex-direction: column;\n            margin-bottom: 2rem;\n            max-width: $front-page-max-width;\n            width: 100%;\n\n            .h2 {\n                color: $white;\n            }\n\n            .demoshop-text-description {\n                color: $white;\n                width: 40%;\n                min-height: 4.5rem;\n                font-size: 1rem;\n\n            }\n            \n        }\n\n        @media screen and (max-width: $breakpoint-md) {\n            padding-top: 3rem;\n            height: 18rem;\n\n            .front-page-demoshop-text {\n                .demoshop-text-description {\n                    width: 100%;\n                    min-height: 2.25rem;\n                }\n            }\n\n        }\n\n        .front-page-demoshop-link {\n            display: flex;\n            position: relative;\n            color: $white;\n            text-decoration: none;\n            background-color: $medium-brown;\n            align-items: center;\n            height: 4.625rem;\n            border-radius: 2px;\n            box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);\n            max-width: $front-page-max-width;\n            width: 100%;\n            cursor: pointer;\n\n            a::after{\n                content: '';\n            }\n            \n            &:hover,\n            &:focus {\n                background-color: $white;\n                color: $brown;\n            \n                .h3 {\n                    color: $brown;\n                }\n            }\n\n            .demoshop-link-img {\n                display: flex;\n                align-items: center;\n                position: absolute;\n                bottom: -1rem;\n                right: 3%;\n                pointer-events: none;\n\n                .demoshop-link-img-web {\n                    width: 26.5rem;\n                    height: 15.125rem;\n                    border-radius: 2px;\n                    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);\n                }\n\n                .demoshop-link-img-mobile {\n                    height: 15.125rem;\n                    border-radius: 2px;\n                    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);\n                    margin-right: 1rem;\n                }\n            }\n\n            .h3 {\n                color: $white;\n                padding-right: 1rem;\n                padding-left: 1.5rem;\n                margin: 0;\n            }\n        }\n\n        @media screen and (min-width: $breakpoint-xxl) {\n            .front-page-demoshop-text {\n                margin-bottom: 1rem;\n            }\n\n            .front-page-demoshop-link {\n                .demoshop-link-img {\n                    bottom: -2rem;\n                }\n            }\n        }\n    }\n\n\n}\n","$breakpoint-sm: 576px;\n$breakpoint-md: 768px;\n$breakpoint-lg: 992px;\n$breakpoint-xl: 1200px;\n$breakpoint-xxl: 1600px;\n","$font_headline: \"Swedbank Headline\", \"Arial\", sans-serif;\n$font_mono: \"Akkurat Mono\", monospace;\n$font_body: \"Arial\", sans-serif;\n","@import 'colors.scss';\n\n.heading-line {\n    position: relative;\n\n    &:after {\n        content: \"\";\n        position: absolute;\n        bottom: -0.75rem;\n        left: 0;\n        width: 4rem;\n        height: 4px;\n        background-color: $yellow;\n        border-radius: 0.625rem;\n    }\n\n    &.heading-line-white {\n        &:after {\n            background-color: $white;\n        }\n    }\n\n    &.heading-line-green {\n        &:after {\n            background-color: $brand-success;\n        }\n    }\n\n    &.heading-line-sdk {\n        &:after {\n            background-color: $turquoise;\n        }\n    }\n\n    &.heading-line-module {\n        &:after {\n            background-color: $card-pink;\n        }\n    }\n\n    &.heading-line-long {\n        &:after {\n            width: 7rem;\n        }\n    }\n\n    &.heading-line-indent {\n        &:after {\n            left: 1.5rem;\n        }\n    }\n}\n\n\nh1>a.header-anchor,\nh2>a.header-anchor,\nh3>a.header-anchor,\nh4>a.header-anchor,\nh5>a.header-anchor,\nh6>a.header-anchor {\n    color: #ebf8f2;\n    text-decoration: none;\n}\n\nh1:hover>a.header-anchor,\nh2:hover>a.header-anchor,\nh3:hover>a.header-anchor,\nh4:hover>a.header-anchor,\nh5:hover>a.header-anchor,\nh6:hover>a.header-anchor {\n    color: #8acdc3;\n}\n\nh1>a.header-anchor:hover,\nh2>a.header-anchor:hover,\nh3>a.header-anchor:hover,\nh4>a.header-anchor:hover,\nh5>a.header-anchor:hover,\nh6>a.header-anchor:hover {\n    color: #257886;\n}\n\na.header-anchor::before {\n    content: '#';\n}\n","@import 'colors.scss';\n\n.accordion {\n\n    .accordion-header {\n        .show {\n            display: block;\n        }\n\n        .hide {\n            display: none;\n        }\n\n        &[aria-expanded=\"true\"] {\n            .show {\n                display: none;\n            }\n\n            .hide {\n                display: block;\n            }\n        }\n\n        &:hover {\n            background-color: $apricot;\n        }\n    }\n\n    .accordion-body {\n        padding: 0;\n\n        table {\n            border: 1px solid rgba(153, 153, 153, 0.5);\n            border-radius: 0.25rem;\n\n            th {\n                font-size: 0.875rem;\n            }\n\n            tbody {\n                font-size: 0.875rem;\n\n                tr:nth-child(odd) {\n                    background-color: #F9F8F6;\n                }\n\n                tr {\n                    &:hover {\n                        background-color: $apricot;\n                        transition: .5s;\n                    }\n                }\n            }\n        }\n    }\n}","@import 'colors.scss';\n\n.paragraph-highlight {\n    margin: 2rem 0;\n    padding: 0.25rem 0;\n    padding-left: 1.5rem;\n    border-left: 2px solid $yellow;\n}\n",".sidebar {\n    &.dg-sidebar {\n        &.visible {\n            @media screen and (max-width: $breakpoint-lg) {\n                display: block;\n                position: absolute;\n                margin-top: 80px;\n            }\n        }\n    }\n\n    @media screen and (max-width: $breakpoint-lg) {\n        display: none;\n    }\n\n    &.topbar-open {\n        display: block;\n    }\n\n    .sidebar-main-nav {\n        @media screen and (max-width: $breakpoint-lg) {\n            border-top: #ffffff;\n\n            &:before {\n                background-color: #ffffff;\n            }\n        }\n\n        .sidebar-logo {\n            @media screen and (max-width: $breakpoint-lg) {\n                display: none;\n            }\n        }\n\n        .main-nav-ul {\n            margin-top: 0;\n            height: calc(100vh - 120px);\n            padding: 0 1rem;\n        }\n    }\n}\n\n#dg-sidebar {\n    &.sidebar {\n        .nav-ul {\n            list-style: none;\n            overflow: hidden;\n            padding: 0;\n            top: auto;\n            position: relative;\n            transition: none;\n        }\n    }\n\n    .main-nav-ul {\n        a {\n            &.disabled {\n                ~nav {\n                    display: none;\n                }\n            }\n        }\n\n        .leaf {\n            &.active {\n                >a {\n                    &:hover {\n                        &:after {\n                            content: none;\n                        }\n                    }\n                }\n            }\n        }\n    }\n}\n","@import 'colors.scss';\n\n.title-header {\n    display: flex;\n    justify-content: center;\n    background-color: $dark-brown;\n\n    .title-header-container {\n        width: 100%;\n        padding: 3rem 1rem;\n\n        h1,\n        h4,\n        p {\n            color: $white;\n        }\n\n        h1 {\n            margin-top: 0;\n        }\n\n        p {\n            font-size: 1.125rem;\n        }\n\n        .title-header-estimated-read {\n            color: $yellow;\n            display: flex;\n            margin-bottom: 0.75rem;\n\n            i {\n                margin-right: 0.5rem;\n            }\n        }\n        a {\n            color: #43d0dd;\n\n            ::after {\n                content: url(../img/external-url-dark-bg.svg);\n            }\n        }\n    }\n\n\n\n}\n\n.title-header-checkout-v3 {\n    display: flex;\n    justify-content: center;\n\n    #github {\n        path {\n            fill: $black;\n        }\n    }\n\n    .title-header-container {\n        width: 100%;\n        padding: 3rem 1rem;\n        padding-bottom: 0;\n\n        h1,\n        h4,\n        p {\n            color: $brown;\n\n            strong {\n                font-size: 1.25rem;\n            }\n        }\n\n        h1 {\n            margin-top: 0;\n            color: $brown;\n        }\n\n        h4 {\n            margin-bottom: 1rem;\n        }\n\n        p {\n            font-size: 1.125rem;\n        }\n\n        .title-header-estimated-read {\n            color: $yellow;\n            display: flex;\n            margin-bottom: 0.75rem;\n\n            i {\n                margin-right: 0.5rem;\n            }\n        }\n        a {\n            color: #43d0dd;\n\n            ::after {\n                content: url(../img/external-url-dark-bg.svg);\n            }\n        }\n\n\n    }\n\n\n\n}\n",".tabs {\n    margin: 2rem 0 3.75rem;\n\n    li {\n        cursor: pointer;\n    }\n}\n\n.tab-intro {\n    padding-bottom: 3rem;\n}\n","@import 'colors.scss';\n@import 'fonts.scss';\n@import 'variables.scss';\n@import 'breakpoints.scss';\n\n@import 'card.scss';\n@import 'code-view.scss';\n@import 'front-page.scss';\n@import 'heading.scss';\n@import 'accordion-table.scss';\n@import 'paragraph-highlight.scss';\n@import 'sidebar.scss';\n@import 'title-header.scss';\n@import 'tabs.scss';\n\n$bg: #f5f2f0;\n$darkened-bg: darken($bg, 10%);\n\nimg {\n    max-width: 100%;\n}\n\nbody {\n    font-size: 1.125rem;\n}\n\n.table {\n    th,\n    td {\n        >.material-icons {\n            float: none;\n        }\n    }\n}\n\n.jumbotron {\n    /* TODO: Make .jumbotron @extend .slab. */\n    font-family: Roboto, sans-serif;\n    font-size: 21px;\n    font-weight: 1;\n    min-height: 1rem;\n    padding: 3rem;\n    margin-bottom: 1rem;\n    border-radius: 4px;\n    background-color: #ebe7e2;\n\n    strong {\n        font-weight: bold;\n    }\n\n    p:last-of-type {\n        margin-bottom: 0;\n    }\n}\n\n// a[href ^='//']:not([href *='{{ site.url }}']):after,\n// a[href ^='http://']:not([href *='{{ site.url }}']):after,\n// a[href ^='https://']:not([href *='{{ site.url }}']):after {\n//     content: url('../img/external-url.svg');\n//     margin-left: .3rem;\n//     display: inline-block;\n//     width: .8rem;\n//     background-repeat: none;\n//     color: #257886;\n\n//     &.front-page-demoshop {\n//         display: none;\n//     }\n// }\n\n#designguide .designguide-header .topbar-info a {\n    margin-left: 5px;\n    color: rgba(34, 34, 34, .75);\n    fill: rgba(34, 34, 34, .75);\n    border: none\n}\n\n#designguide .designguide-header .topbar-info a:after {\n    content: none;\n    display: inline;\n}\n\n#designguide .designguide-header .topbar-info a svg {\n    overflow: visible;\n    width: 2rem;\n    height: 2rem;\n    display: inline-block;\n    vertical-align: top;\n}\n\n#designguide .designguide-header .topbar-info a:hover {\n    color: rgba(0, 0, 0, .75);\n    fill: rgba(0, 0, 0, .75)\n}\n\n.iterator {\n    margin: 2rem 0;\n}\n\n.iterator a.btn {\n    justify-content: center;\n    width: 49%;\n    min-width: 8rem;\n}\n\n.iterator a.btn[rel='prev']:before {\n    content: '❮';\n    position: absolute;\n    left: 1rem;\n}\n\n.iterator a.btn[rel='next']:after {\n    content: '❯';\n    position: absolute;\n    right: 1rem;\n}\n\n#designguide {\n    .dg-sidebar {\n        border-right: 1px solid $background-gray;\n\n        @media screen and (max-width: $breakpoint-lg) {\n            position: fixed;\n        }\n\n        .main-nav-ul {\n            border-bottom: 1px solid $background-gray;\n\n            .sidebar-secondary-nav {\n                overflow-y: auto;\n            }\n        }\n    }\n}\n\n.documentation {\n    @media screen and (max-width: $breakpoint-lg) {\n        overflow-y: auto;\n    }\n\n    > div {\n        &.row {\n            margin-right: 0;\n        }\n    }\n\n    .doc-container {\n        max-width: 100%;\n\n        h2 {\n            font-size: 1.75rem\n        }\n    }\n\n    code[data-processed='true'].language-mermaid {\n        background: none;\n        border: none;\n        padding: 0px\n    }\n\n    .highlighter-rouge {\n        margin-bottom: 1rem;\n\n        code {\n            padding: 0;\n            background-color: none;\n            border: none;\n            font-size: 1rem;\n        }\n\n        pre.highlight {\n            background-color: #f5f2f0;\n            margin: 0;\n        }\n\n        .rouge-table {\n            position: relative;\n\n            &,\n            tbody,\n            tr {\n                display: block;\n            }\n\n            pre {\n                font-family: 'Akkurat Mono', monospace;\n            }\n\n            .rouge-gutter {\n                text-align: right;\n                padding: 0 .7rem;\n                position: absolute;\n                left: 0;\n                top: 0;\n                background-color: #f5f2f0;\n                border-right: 1px solid #e1d7d1;\n            }\n\n            .rouge-code {\n                padding-left: 50px;\n                display: block;\n                overflow-x: auto;\n            }\n        }\n    }\n\n    .no-padding {\n        padding: 0;\n        padding-bottom: 5rem;\n    }\n\n    .normal-padding {\n        padding: 1rem 1rem 5rem;\n    }\n\n    .max-width {\n        max-width: $max-width;\n    }\n\n    .max-width-card-overview {\n        max-width: 880px;\n    }\n\n    .row.card-list > div {\n        display: flex;\n        align-self: stretch;\n    }\n\n    .language-mermaid {\n        $apricot: #fbf2ea;\n        $pink: #efb7b6;\n        $brand-info-light: #e8eff9;\n        $brand-success-light: #f2f7eb;\n        $darker-apricot: darken($apricot, 10%);\n        $black: #222;\n        $brown: #2f2424;\n\n        svg {\n            width: 100% !important;\n            height: 100%;\n        }\n\n        rect.actor {\n            fill: $apricot !important;\n            stroke: $darker-apricot !important;\n        }\n\n        .activation0,\n        .activation1,\n        .activation2 {\n            fill: $brand-success-light !important;\n            stroke: darken($brand-success-light, 10%) !important;\n        }\n\n        text.actor {\n            font-family: Arial, sans-serif !important;\n            font-size: 1rem !important;\n        }\n\n        .actor-line {\n            stroke: $apricot !important;\n            stroke-width: 4 !important;\n        }\n\n        .messageLine0 {\n            stroke-width: 2 !important;\n            stroke-dasharray: \"2 2\";\n            marker-end: \"url(#arrowhead)\";\n            stroke: $black !important;\n        }\n\n        .messageLine1 {\n            stroke-width: 1.5;\n            stroke-dasharray: \"2 2\";\n            stroke: $brown !important;\n        }\n\n        #arrowhead {\n            fill: $brown !important;\n        }\n\n        .messageText {\n            fill: $black !important;\n            stroke: none;\n            font-family: Arial, sans-serif !important;\n            font-size: 1rem !important;\n        }\n\n        .labelBox {\n            stroke: $pink !important;\n            fill: $pink !important;\n        }\n\n        .labelText {\n            fill: $black !important;\n            stroke: none;\n            font-family: Arial, sans-serif !important;\n        }\n\n        .loopText {\n            fill: $black !important;\n            stroke: none;\n            font-family: Arial, sans-serif !important;\n            font-size: 1rem !important;\n        }\n\n        .loopLine {\n            stroke-width: 2;\n            stroke-dasharray: \"2 2\";\n            marker-end: \"url(#arrowhead)\";\n            stroke: $pink !important;\n        }\n\n        .note {\n            stroke: darken($brand-info-light, 20%) !important;\n            fill: $brand-info-light !important;\n        }\n\n        .noteText {\n            fill: $black !important;\n            stroke: none;\n            font-family: Arial, sans-serif !important;\n            font-size: 1rem !important;\n        }\n    }\n\n    .plantuml {\n        text-align: center;\n    }\n\n    .table {\n        .field-level {\n            &::before {\n                font-family: $font_mono;\n                color: $yellow;\n                content: '╰─╼';\n            }\n\n            code {\n                border: 1px solid $yellow;\n                border-radius: 8px;\n            }\n        }\n\n        .field-level-0::before {\n            content: '';\n        }\n\n        .field-level-2 {\n            margin-left: 2rem;\n        }\n\n        .field-level-3 {\n            margin-left: 4rem;\n        }\n\n        .field-level-4 {\n            margin-left: 6rem;\n        }\n\n        .field-level-5 {\n            margin-left: 8rem;\n        }\n\n        .field-level-6 {\n            margin-left: 10rem;\n        }\n    }\n\n    #github {\n        opacity: .5;\n        position: absolute;\n        right: 4rem;\n        top: 2rem;\n        transition: opacity .3s;\n\n        @media screen and (max-width: $breakpoint-lg) {\n            top: 6rem;\n        }\n\n    }\n\n    a#github:after {\n        display: none;\n    }\n\n    a#github:hover {\n        opacity: 1;\n    }\n}\n\n#overlay {\n    @media screen and (max-width: $breakpoint-lg) {\n        position: fixed; /* Sit on top of the page content */\n        display: none; /* Hidden by default */\n        width: 100%; /* Full width (cover the whole page) */\n        height: 100%; /* Full height (cover the whole page) */\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        background-color: rgba(0,0,0,0.5); /* Black background with opacity */\n        z-index: 3; /* Specify a stack order in case you're using a different order for other elements */\n    }\n}\n\n.search-box {\n    position: absolute;\n    right: 8rem;\n    top: 1.5rem;\n    z-index: 2;\n\n\n    .search-input {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n    }\n\n    #search-btn {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n        height: 56px;\n    }\n\n    @media screen and (max-width: $breakpoint-lg) {\n        position: fixed;\n        right: 1rem;\n        top: 1rem;\n        z-index: 401;\n\n        #tipue_search_input {\n            display: none;\n        }\n\n        #search-btn {\n            border-top-left-radius: 8px;\n            border-top-left-radius: var(--border-radius);\n            border-bottom-left-radius: 8px;\n            border-bottom-left-radius: var(--border-radius);\n        }\n    }\n}\n\n.topbar-logo {\n    @media screen and (max-width: $breakpoint-sm) {\n        display: block;\n        position: absolute;\n    }\n}\n","$max-width: 880px;\n"],"file":"style.css"}
\ No newline at end of file