/* WEB 2.0 - stbank */
@import url("https://use.typekit.net/caq1usf.css");
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');


/* index
    0. general
    1. variables
    2. breakpoints
    3. typography
    5. misc
*/

/* variables - global */
:root {
  overflow-y: scroll;

        --font_heading: "Arial Nova", sans-serif;
        --font_body: "Arial Nova", sans-serif;

    /* shadows */
        --shadow_box: 0 0 13px 0 rgba(0,0,0,.05),0 0 2px 0 rgba(0,0,0,.05);
        --shadow_box_hover: 0px 1px 13px 0 rgb(0,0,0,.3),0 0 2px 0 rgba(0,0,0,.05);
        --shadow_button: 0 0 13px 0 rgba(0,0,0,.05),0 0 2px 0 rgba(0,0,0,.05);

    /* border radius */
        --small_radius: 4px;
        --border_radius_buttons: 32px;
        --border_radius_cards: 16px;
        --border_radius_container: 32px;
    
    /* :-) */
        --eyes: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 40 40"><g data-name="Group 428" clip-path="url(%23a)"><g fill="none" stroke-linecap="round"><g data-name="Path 257"></g><path data-name="Path 258" d="M14.205 16.288v.018m11.59-.018v.018" stroke="%232d2d2d" stroke-width="5"/></g></g></svg>');
        --face: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 40 40"> <circle cx="20" cy="20" r="18" fill="white" stroke="white" stroke-width="2"/></svg>');
        --mouth:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 40 40"><g data-name="Group 428" clip-path="url(%23a)"><g fill="none" stroke-linecap="round"><path data-name="Path 259" d="M27.061 25.833c-.883 2.093-3.16 4.185-7.061 4.185s-6.178-2.092-7.061-4.185" stroke="%232d2d2d" stroke-linejoin="round" stroke-width="2"/></g></g></svg>');
}



/* Variables  --- Light mode ---  DEFAULT */
   :root[data-applied-mode="light"] {
      color-scheme: light;
      

        --color_white:      #FFFFFF;
        --color_black:      #181717;
        --color_true_black: #000000;

    /* color palette */    
        --color_primary:    #FFDA00;
        --color_secondary:  #32657E;
        --color_tertiary:   #002A3A;
        --color_quaternary: #0097CE;
        --color_quinary:    #71984A;

        --color_key:        #525251;
        --color_bg:         #f5f4f0;
        --color_bg_top:     #f5f4f0;

        --color_warning:    #FAEA96;
        --color_critical:   #FF8674;

        /* gradients */
            /* gradients for primary  */
                --color_primary_75: #FFE340;
                --color_primary_50: #FFEC7F;
                --color_primary_25: #FFF6BF;
                --color_primary_10: #FFFBE5;

            /* gradients for secondary */
                --color_secondary_75: #658B9E;
                --color_secondary_50: #98B1BE;
                --color_secondary_25: #CBD8DE;
                --color_secondary_10: #EAEFF2;

            /* gradients for tertiary */
                --color_tertiary_75: #405F6B;
                --color_tertiary_50: #7F949C;
                --color_tertiary_25: #BFC9CD;
                --color_tertiary_10: #E5E9EB;

            /* gradients for quaternary */
                --color_quaternary_75: #40B1DA;
                --color_quaternary_50: #7FCBE6;
                --color_quaternary_25: #BFE5F3;
                --color_quaternary_10: #E5F4FA;

            /* gradients for quinary */
                --color_quinary_75: #94B277;
                --color_quinary_50: #B7CBA4;
                --color_quinary_25: #DBE5D1; 
                --color_quinary_10: #F0F5EC;


}
/* Variables  --- Dark mode ---  */
   :root[data-applied-mode="dark"] {
      color-scheme: dark;

        --color_white:      #2d2d2d;
        --color_black:      #f5f4f0;
        --color_true_black: #ffffff;

    /* color palette */    
        --color_primary:    #32657E;
        --color_secondary:  #ffda00;
        --color_tertiary:   #002A3A;
        --color_quaternary: #0097CE;
        --color_quinary:    #71984A;

        --color_key:        #f5f4f0;
        --color_bg:         #404040;
        --color_bg_top:     #404040;

        --color_warning:    #FAEA96;
        --color_critical:   #FF8674;

        /* gradients */
            /* gradients for primary  */
                --color_primary_75: #254B5E;
                --color_primary_50: #19323F;
                --color_primary_25: #0C191F;
                --color_primary_10: #050A0D;

            /* gradients for secondary */
                --color_secondary_75: #BFA300;
                --color_secondary_50: #806D00;
                --color_secondary_25: #403700;
                --color_secondary_10: #1A1600;

            /* gradients for tertiary */
                --color_tertiary_75: #001F2B;
                --color_tertiary_50: #00151D;
                --color_tertiary_25: #000A0E;
                --color_tertiary_10: #000406;

            /* gradients for quaternary */
                --color_quaternary_75: #00719A;
                --color_quaternary_50: #004C67;
                --color_quaternary_25: #002634;
                --color_quaternary_10: #000F15;

            /* gradients for quinary */
                --color_quinary_75: #547237;
                --color_quinary_50: #384C25;
                --color_quinary_25: #1C2612; 
                --color_quinary_10: #0B1007;
}






/* breakpoints

    | mobile |     tablet    | desktop |
    | > 640  | 640 <-> 1024  | < 1024  |

    elephant    = 1670px    desktop
    rhino       = 1520px    desktop
    horse       = 1400px    desktop
    lion        = 1100px    desktop
    wolf        = 1024px    tablet
    dog         = 768px     tablet
    cat         = 640px     mobile  ฅ^•ﻌ•^ฅ
    rabbit      = 460px     mobile
    rat         = 360px     mobile 

*/

/* smaller than cat */
    @media (max-width: 640px) {
        html {
            font-size: 14px;
        }
    }
    /* Larger than cat */
    @media (min-width: 640px) {
        html {
            font-size: 18px;
        }
    }

/* typography */
    body {
        font-family: var(--font_body);
        background-color: var(--color_bg);
    }

    a {
        color: var(--color_tertiary);
    }
    a:visited {
        color: var(--color_tertiary);
    }

    p {
        font-size: 1rem!important;
        line-height: 1.25rem!important;
        color: var(--color_key);
        padding: 0px !important;
        margin: 0px !important;
        margin-bottom: 16px !important;
    }

    h1 {
        font-family: var(--font_heading);
        font-weight: 400;
        color: var(--color_secondary);
        font-size: 2.5rem;
        line-height: normal;
        padding: 0px !important;
        margin: 0px !important;
        margin-bottom: 16px !important;
    }

    h2 {
        font-family: var(--font_heading);
        font-weight: 400;
        color: var(--color_secondary);
        font-size: 2rem;
        line-height: normal;
        padding: 0px !important;
        margin: 0px !important;
        margin-bottom: 16px !important;
    }

    h3 {
        font-family: var(--font_heading);
        font-weight: 400;
        color: var(--color_secondary);
        font-size: 1.5rem;
        line-height: normal;
        padding: 0px !important;
        margin: 0px !important;
        margin-bottom: 16px !important;
    }

    h4 {
        font-family: var(--font_body);
        font-weight: 400;
        color: var(--color_secondary);
        font-size: 1.25rem;
        line-height: normal;
        padding: 0px !important;
        margin: 0px !important;
        margin-bottom: 16px !important;
    }


    .btn, .rt-button--brand-1, .rt-button--brand-2, .rt-button--brand-3, .rt-button--brand-4,.rt-button--link-color, .rt-button--link-color-inverted{
        font-size: 1.2rem;
        font-family: var(--font_body);
        font-weight: 400;
        line-height: normal;
        padding: 0px !important;
        margin: 0px !important;
    }

    a.a-arrow-link.a-arrow-link{   /* Fix for arrowlink */ 
        margin-left: 0 !important;
    }


    .a-arrow-link{  
        color: var(--color_tertiary);
    }
    .a-arrow-link:hover{  
        color: var(--color_tertiary_50);
    }

    a.rt-a-arrow-link--small,
    a.rt-a-arrow-link--small:visited,
    .rt-a-arrow-link,
    .rt-a-arrow-link:visited {
        color: var(--color_secondary);
    }
    a.rt-a-arrow-link--small:hover,
    .rt-a-arrow-link:hover{
        color: var(--color_secondary_75);
    }




/* Buttons */ 
    /* Default */ 
        .btn.btn--default.btn--primary,.rt-button--link-color {
            padding: 12px 24px 12px 24px !important;
            min-width: 0;
            width:auto;
            border-radius: var(--border_radius_buttons);
            background: var(--color_tertiary);
        }
            .btn.btn--default.btn--primary:hover,.rt-button--link-color:hover {
                    background: var(--color_tertiary_75);
            }

            .btn.btn--primary.btn--default {
                color: var(--color_white);
            }

    /* Default Secondary */ 
        .btn.btn.btn--secondary.btn--default,.rt-button--link-color-inverted{
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto; 
            border-radius: var(--border_radius_buttons);
            background: var(--color_white);
            border: solid 3px;
            border-color: var(--color_tertiary);
        }
            .btn.btn.btn--secondary.btn--default:hover ,.rt-button--link-color-inverted:hover{
                background: var(--color_tertiary_25);
                color: var(--color_black);
            }


    /* Brand 1 */ 
        .btn.btn--primary.btn--brand-1,.rt-button--brand-1 {
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto; 
            border-radius: var(--border_radius_buttons);
            background: var(--color_primary);
            color: var(--color_key);
        }
            .btn.btn--primary.btn--brand-1:hover ,.rt-button--brand-1:hover{
                    background: var(--color_primary_75);
                    color: var(--color_key);
            }

            .rt-button--brand-1:active {
                font-size: 1.2rem;
            }

    /* Brand 1 Secondary */ 
        .btn.btn.btn--secondary.btn--brand-1, .rt-button--brand-3 {
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto; 
            border-radius: var(--border_radius_buttons);
            background: var(--color_white);
            color: var(--color_key);
            border: solid 3px;
            border-color: var(--color_primary);
        }
            .btn.btn.btn--secondary.btn--brand-1:hover ,.rt-button--brand-3:hover{
                background: var(--color_primary_25);
                color: var(--color_black);
            }


    /* Brand 1 Inverted*/ 
        .btn.btn--primary.btn--brand-1.btn--invert{
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto; 
            border-radius: var(--border_radius_buttons);
            background: var(--color_white);
            color: var(--color_primary);
        }
            .btn.btn--primary.btn--brand-1.btn--invert:hover {
                background: var(--color_primary_25);
                color: var(--color_primary);
            }

    /* Brand 1 Inverted Secondary */ 
        .btn.btn.btn--secondary.btn--brand-1.btn--invert{
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto; 
            border-radius: var(--border_radius_buttons);
            background: var(--color_primary);
            color: var(--color_white);
            border: solid 3px;
            border-color: var(--color_white);
        }
            .btn.btn.btn--secondary.btn--brand-1.btn--invert:hover {
                background: var(--color_primary_75);
                color: var(--color_white);
            }



    /* Brand 2 */ 
        .btn.btn--primary.btn--brand-2 , .rt-button--brand-2 {
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto;
            border-radius: var(--border_radius_buttons);
            background: var(--color_primary);
            color: var(--color_key);
        }
            .btn.btn--primary.btn--brand-2:hover ,.rt-button--brand-2:hover{
                background: var(--color_primary_75);
                color: var(--color_key);
            }
                        /* Brand 2 Rich text */
                        .rt-button--brand-2:active {
                            font-size: 1.2rem;
                        }

    /* Brand 2 Secondary */ 
        .btn.btn.btn--secondary.btn--brand-2, .rt-button--brand-4 {
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto; 
            border-radius: var(--border_radius_buttons);
            background: var(--color_white);
            color: var(--color_key);
            border: solid 3px;
            border-color: var(--color_quaternary);
        }
            .btn.btn.btn--secondary.btn--brand-2:hover ,.rt-button--brand-4:hover{
                background: var(--color_quaternary_25);
                color: var(--color_black);
            }


    /* Brand 2 Inverted*/ 
        .btn.btn--primary.btn--brand-2.btn--invert{
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto; 
            border-radius: var(--border_radius_buttons);
            background: var(--color_key);
            color: var(--color_quaternary);
        }
            .btn.btn--primary.btn--brand-2.btn--invert:hover {
                background: var(--color_black);
                color: var(--color_quaternary);
            }

    /* Brand 2 Inverted Secondary */ 
        .btn.btn.btn--secondary.btn--brand-2.btn--invert{
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto;
            border-radius: var(--border_radius_buttons);
            background: var(--color_quaternary);
            color: var(--color_key);
            border: solid 3px;
            border-color: var(--color_key);
        }
            .btn.btn.btn--secondary.btn--brand-2.btn--invert:hover {
                background: var(--color_quaternary_75);
                color: var(--color_key);
            }
        
/* Stop that funky button transforming */
    .a-arrow-link:active .a-arrow-link__text {
        transform: none;
    }




/* misc */
    /* highlighting text */
    /*
        ::-moz-selection {  background-color: var(--color_primary_75);  }
        ::selection {   background-color: var(--color_primary_75);  }
    */

    /* Sitecore fix for teaser-list with 3 or 4 items */
        .frame.teaser-list.teaser-list--3-items .scLooseFrameZone.scEnabledChrome a.btn.btn--default.btn--primary::after, .frame.teaser-list.teaser-list--4-items .scLooseFrameZone.scEnabledChrome a.btn.btn--default.btn--primary::after {
            display: none;
        }
    


/* breakpoints

    | mobile |     tablet    | desktop |
    | > 640  | 640 <-> 1024  | < 1024  |

    elephant    = 1670px    desktop
    rhino       = 1520px    desktop
    horse       = 1400px    desktop
    lion        = 1100px    desktop
    wolf        = 1024px    tablet
    dog         = 768px     tablet
    cat         = 640px     mobile  ฅ^•ﻌ•^ฅ
    rabbit      = 460px     mobile
    rat         = 360px     mobile 

*/

/* smaller than cat */
    @media (max-width: 640px) {
        html {
            font-size: 14px;
        }
    }
    /* Larger than cat */
    @media (min-width: 640px) {
        html {
            font-size: 18px;
        }
    }

/* typography */
    body {
        font-family: var(--font_body);
        background-color: var(--color_bg);
    }

    a {
        color: var(--color_tertiary);
    }
    a:visited {
        color: var(--color_tertiary);
    }

    p {
        font-size: 1rem!important;
        line-height: 1.25rem!important;
        color: var(--color_key);
        padding: 0px !important;
        margin: 0px !important;
        margin-bottom: 16px !important;
    }

    h1 {
        font-family: var(--font_heading);
        font-weight: 400;
        color: var(--color_secondary);
        font-size: 2.5rem;
        line-height: normal;
        padding: 0px !important;
        margin: 0px !important;
        margin-bottom: 16px !important;
    }

    h2 {
        font-family: var(--font_heading);
        font-weight: 400;
        color: var(--color_secondary);
        font-size: 2rem;
        line-height: normal;
        padding: 0px !important;
        margin: 0px !important;
        margin-bottom: 16px !important;
    }

    h3 {
        font-family: var(--font_heading);
        font-weight: 400;
        color: var(--color_secondary);
        font-size: 1.5rem;
        line-height: normal;
        padding: 0px !important;
        margin: 0px !important;
        margin-bottom: 16px !important;
    }

    h4 {
        font-family: var(--font_body);
        font-weight: 400;
        color: var(--color_secondary);
        font-size: 1.25rem;
        line-height: normal;
        padding: 0px !important;
        margin: 0px !important;
        margin-bottom: 16px !important;
    }


    .btn, .rt-button--brand-1, .rt-button--brand-2, .rt-button--brand-3, .rt-button--brand-4,.rt-button--link-color, .rt-button--link-color-inverted{
        font-size: 1.2rem;
        font-family: var(--font_body);
        font-weight: 400;
        line-height: normal;
        padding: 0px !important;
        margin: 0px !important;
    }

    a.a-arrow-link.a-arrow-link{   /* Fix for arrowlink */ 
        margin-left: 0 !important;
    }


    .a-arrow-link{  
        color: var(--color_tertiary);
    }
    .a-arrow-link:hover{  
        color: var(--color_tertiary_50);
    }

    a.rt-a-arrow-link--small,
    a.rt-a-arrow-link--small:visited,
    .rt-a-arrow-link,
    .rt-a-arrow-link:visited {
        color: var(--color_secondary);
    }
    a.rt-a-arrow-link--small:hover,
    .rt-a-arrow-link:hover{
        color: var(--color_secondary_75);
    }




/* Buttons */ 
    /* Default */ 
        .btn.btn--default.btn--primary,.rt-button--link-color {
            padding: 12px 24px 12px 24px !important;
            min-width: 0;
            width:auto;
            border-radius: var(--border_radius_buttons);
            background: var(--color_tertiary);
        }
            .btn.btn--default.btn--primary:hover,.rt-button--link-color:hover {
                    background: var(--color_tertiary_75);
            }

            .btn.btn--primary.btn--default {
                color: var(--color_white);
            }

    /* Default Secondary */ 
        .btn.btn.btn--secondary.btn--default,.rt-button--link-color-inverted{
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto; 
            border-radius: var(--border_radius_buttons);
            background: var(--color_white);
            border: solid 3px;
            border-color: var(--color_tertiary);
        }
            .btn.btn.btn--secondary.btn--default:hover ,.rt-button--link-color-inverted:hover{
                background: var(--color_tertiary_25);
                color: var(--color_black);
            }


    /* Brand 1 */ 
        .btn.btn--primary.btn--brand-1,.rt-button--brand-1 {
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto; 
            border-radius: var(--border_radius_buttons);
            background: var(--color_primary);
            color: var(--color_key);
        }
            .btn.btn--primary.btn--brand-1:hover ,.rt-button--brand-1:hover{
                    background: var(--color_primary_75);
                    color: var(--color_key);
            }

            .rt-button--brand-1:active {
                font-size: 1.2rem;
            }

    /* Brand 1 Secondary */ 
        .btn.btn.btn--secondary.btn--brand-1, .rt-button--brand-3 {
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto; 
            border-radius: var(--border_radius_buttons);
            background: var(--color_white);
            color: var(--color_key);
            border: solid 3px;
            border-color: var(--color_primary);
        }
            .btn.btn.btn--secondary.btn--brand-1:hover ,.rt-button--brand-3:hover{
                background: var(--color_primary_25);
                color: var(--color_black);
            }


    /* Brand 1 Inverted*/ 
        .btn.btn--primary.btn--brand-1.btn--invert{
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto; 
            border-radius: var(--border_radius_buttons);
            background: var(--color_white);
            color: var(--color_primary);
        }
            .btn.btn--primary.btn--brand-1.btn--invert:hover {
                background: var(--color_primary_25);
                color: var(--color_primary);
            }

    /* Brand 1 Inverted Secondary */ 
        .btn.btn.btn--secondary.btn--brand-1.btn--invert{
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto; 
            border-radius: var(--border_radius_buttons);
            background: var(--color_primary);
            color: var(--color_white);
            border: solid 3px;
            border-color: var(--color_white);
        }
            .btn.btn.btn--secondary.btn--brand-1.btn--invert:hover {
                background: var(--color_primary_75);
                color: var(--color_white);
            }



    /* Brand 2 */ 
        .btn.btn--primary.btn--brand-2 , .rt-button--brand-2 {
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto;
            border-radius: var(--border_radius_buttons);
            background: var(--color_primary);
            color: var(--color_key);
        }
            .btn.btn--primary.btn--brand-2:hover ,.rt-button--brand-2:hover{
                background: var(--color_primary_75);
                color: var(--color_key);
            }
                        /* Brand 2 Rich text */
                        .rt-button--brand-2:active {
                            font-size: 1.2rem;
                        }

    /* Brand 2 Secondary */ 
        .btn.btn.btn--secondary.btn--brand-2, .rt-button--brand-4 {
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto; 
            border-radius: var(--border_radius_buttons);
            background: var(--color_white);
            color: var(--color_key);
            border: solid 3px;
            border-color: var(--color_quaternary);
        }
            .btn.btn.btn--secondary.btn--brand-2:hover ,.rt-button--brand-4:hover{
                background: var(--color_quaternary_25);
                color: var(--color_black);
            }


    /* Brand 2 Inverted*/ 
        .btn.btn--primary.btn--brand-2.btn--invert{
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto; 
            border-radius: var(--border_radius_buttons);
            background: var(--color_key);
            color: var(--color_quaternary);
        }
            .btn.btn--primary.btn--brand-2.btn--invert:hover {
                background: var(--color_black);
                color: var(--color_quaternary);
            }

    /* Brand 2 Inverted Secondary */ 
        .btn.btn.btn--secondary.btn--brand-2.btn--invert{
            padding: 12px 24px 12px 24px !important;
            min-width:200px;
            width:auto;
            border-radius: var(--border_radius_buttons);
            background: var(--color_quaternary);
            color: var(--color_key);
            border: solid 3px;
            border-color: var(--color_key);
        }
            .btn.btn.btn--secondary.btn--brand-2.btn--invert:hover {
                background: var(--color_quaternary_75);
                color: var(--color_key);
            }
        
/* Stop that funky button transforming */
    .a-arrow-link:active .a-arrow-link__text {
        transform: none;
    }




/* misc */
    /* highlighting text */
    /*
        ::-moz-selection {  background-color: var(--color_primary_75);  }
        ::selection {   background-color: var(--color_primary_75);  }
    */

    /* Sitecore fix for teaser-list with 3 or 4 items */
        .frame.teaser-list.teaser-list--3-items .scLooseFrameZone.scEnabledChrome a.btn.btn--default.btn--primary::after, .frame.teaser-list.teaser-list--4-items .scLooseFrameZone.scEnabledChrome a.btn.btn--default.btn--primary::after {
            display: none;
        }
    


/* Darkmode button */


button#theme-toggle{
    border-radius: var(--border_radius_buttons);
    border: solid 4px var(--color_primary);
    background-color: var(--color_secondary);
    box-shadow: var(--shadow_box);
    position: fixed;
    top: 136px;
    right: 16px;
    z-index:10000000000;
}


button#theme-toggle:before, button#theme-toggle:after {
    content: " ";
    font-family: 'Material Symbols Rounded';
    font-weight: 200;
    font-size: 30px;
    color: inherit;

    
}


[data-applied-mode="dark"]{
    button#theme-toggle:before {
        content: "dark_mode";
        margin-left: -15px;
        border-radius: var(--border_radius_buttons);
        background-color: var(--color_primary);
         padding: 3px 10px 6px 10px;
        margin: -1px -1px 2px -7px;
        box-shadow: var(--shadow_box);
    }

    
    button#theme-toggle:after {
        content: "light_mode";
        color: var(--color_white);
        padding: 3px 10px 6px 10px;
        margin: -1px -1px 2px -6px;
    }  
}

[data-applied-mode="light"]{
    button#theme-toggle:before {
        content: "dark_mode";
        margin-left: -15px;
        padding: 3px 10px 6px 10px;
        margin: -1px -6px 2px -1px;
        color: var(--color_white);
    }

    
    button#theme-toggle:after {
        content: "light_mode";
        color: var(--color_black);
        border-radius: var(--border_radius_buttons);
        background-color: var(--color_primary);
        padding: 3px 10px 6px 10px;
        margin: -1px -7px 2px -1px;
        
    }  
}

.dm_test h4 {
    font-family: 'Material Symbols Rounded';
    font-weight: 200;
    font-size: 25px;
    color: var(--color_key);
    margin: 0 2 0 0 !important;
}

.dm_test{
    position: fixed;
    top: 180px;
    right: 29px;
    z-index:10000000000;
    padding: 0;
}

.dm_test .frame__cell-item {
      display:flex;
      flex-direction: row;
      align-items: center;
      width: 81px;
      justify-content: space-evenly;
}


span#mode {
    display:none;
}



/* Darkmode spesific styling */
[data-applied-mode="dark"]{
    
    .superhero h1 {
        color: var(--color_primary) !important;
    }
    
     .superhero .btn {
        background-color: var(--color_primary) !important;
         color: var(--color_black) !important;
    }

    .superhero .teaser-list__text {
      background-image: radial-gradient(
        farthest-corner at 70% 30%,
        #FFEC7F 0%,
        var(--color_secondary) 70%
      );
    }

    .superhero .teaser-list__item{
        background: var(--color_secondary);
    }
    
    .footer-widget-area {
    background-color: var(--color_primary_25);
    }
    .footer-widget__title {
        color: var(--color_black);
    }
    .footer-contact-area {
        background-color: var(--color_white);
    }
    .footer-contact-area__text a {
        color: var(--color_quaternary);
    }
    .footer-contact-area {
        color: var(--color_black);
    }

    .footer-contact-area__byline-text .rt-button--brand-2 {
        background: var(--color_primary_50);
        color: var(--color_black);
    }
    .footer-contact-area__byline-text .rt-button--brand-2 h4 {
        color: var(--color_black);
    }

    .accordion__summary {
    color:var(--color_black);
    background-color: var(--color_white);
    }
    
    .accordion__content {
        background-color: var(--color_white);
    }
    
    .accordion__content {
        background-color: var(--color_white);
    }

    .pris .accordion__summary,
    .pris_w1 .accordion__summary {
        border-bottom: 2px solid  var(--color_tertiary_25);
        background-color:var(--color_bg);
    }
    
    .pris .accordion__content,
    .pris_w1 .accordion__content{
        background-color:var(--color_bg);
    }
    
    .lbcm-interest-repayment-container button {
        background-color:var(--color_white);
    }
    .downpayment-plan-heading,
    .downpayment-plan-monthly {
        color: var(--color_black);
    }


    .produkt.teaser-list--1-item h6,
    .produkt_inverse.teaser-list--1-item h6,
    .two-column-module.brage .two-column-module__content h6 {
        color: var(--color_quaternary);
    }

    .employee-card__employee-job-title {
        color: var(--color_black);
    }

    /*Dette er en veldig stygg fix, legger en overlay på hele modulen for å dempe brightness, brage må lage egen variant for darkmode */
    .w2_brage_1120 {
        overflow:hidden; 
        border-radius:16px;
        height:790px;
    }
    .w2_brage_1120:before {
        content:"";
        height:790px;
        overflow:hidden;
        width:528px;
        position: absolute;
        background-color: #2d2d2d3d;
        pointer-events:none; 
    }

}