:root {
    --mainmenugo: #2B2E44;
    --mainmenugohover: #3c405e;
    --textmenugo: #000000;
    --bgmenugo: #ffffff;
    --xmenugo: #ffffff;

    --maindiginode: #F67A37;
    --maindiginodetext: #8B3101;
    --maindiginodefade: #FFA271;
    --maindiginodehover: #FE965E;
    --maindiginodebutton: #FEC7AA;
    --textdiginode: #000000;
    --bgdiginode: #ffffff;
    --xdiginode: #ffffff;

    --maindigitalen: #E8F6F3;
    --maindigitalenhover: #d6efe9;
    --headercolordigitalen: #0C3431;
    --colorbardigitalen: #b1e1d6;
    --textdigitalen: #000000;
    --bgdigitalen: #ffffff;
    --xdigitalen: #ffffff;

}

@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-VariableFont_wght.ttf");
}

@font-face {
    font-family: "Open Sans";
    src: url("fonts/OpenSans-VariableFont_wdth.ttf");
}

a { 
    color: unset;
    font-family: unset;
    text-decoration: unset;
}

a:focus {
    outline-offset: 2px;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Open Sans";
    font-size: 16px;

    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.bmenugo {
    color: var(--textmenugo);
    background: var(--bgmenugo);

    & .topbar {
        color: var(--textmenugo);

        & .linkbar {
            & .contact {
                background: var(--mainmenugo);
                color: var(--xmenugo);
            }
            & .contact:hover {
                background: var(--mainmenugohover);
            }
        }
    }

    & .infobar {
        background: var(--mainmenugo);
        color: var(--xmenugo);
    }

    & .datalayer {
        padding-left: 32px;
        padding-right: 32px;
        & .infoblock {
            & .header {
                & .top {
                    color: var(--mainmenugo);
                }
            }
        }
        & .buttonbar {
            & .split {
                & .button {
                    background: var(--mainmenugo);
                    color: var(--xmenugo);
                }
                & .button:hover {
                    background: var(--mainmenugohover);
                }
            }
        }
    }

    & .bottombar {
        background: var(--mainmenugo);
        color: var(--xmenugo);
    }
}

.bdiginode {
    color: var(--textdiginode);
    background: var(--bgdiginode);

    & .topbar {
        color: var(--textdiginode);

        & .linkbar {
            & .contact {
                background: var(--maindiginode);
                color: var(--textdiginode);
            }
            & .contact:hover {
                background: var(--maindiginodehover);
            }

            & .active {
                border-bottom-color: var(--maindiginodetext) !important;
            }
        }
    }

    & .infobar {
        background: var(--maindiginode);
        background-image: linear-gradient(var(--maindiginodefade), var(--maindiginode));
        color: var(--textdiginode);

        & .logo, .logodos {
            filter: unset !important;
        }
    }

    & .datalayer {
        padding-left: 32px;
        padding-right: 32px;
        & .infoblock {
            & .header {
                & .top {
                    color: var(--maindiginodetext);
                }
            }
        }
        & .buttonbar {
            & .split {
                & .button {
                    background: var(--maindiginodebutton);
                    color: var(--textdiginode);
                }
                & .button:hover {
                    background: var(--maindiginodehover);
                }
            }
        }
    }

    & .bottombar {
        background: var(--maindiginode);
        color: var(--textdiginode);

        & .bottombarwrapper {
            & .grid {
                & .applist {
                    & a {
                        filter: unset !important;
                    }

                    & a:hover {
                        outline-color: var(--textdiginode);
                    }
                }
            }
        }

    }
}

.bdigitalen {
    color: var(--textdigitalen);
    background: var(--bgdigitalen);

    & .topbar {
        color: var(--textdigitalen);

        & .linkbar {
            & .contact {
                background: var(--maindigitalen);
                color: var(--textdigitalen);
                /* border: 2px solid var(--maindigitalenhover); */
            }
            & .contact:hover {
                background: var(--maindigitalenhover);
            }

            & .active {
                border-bottom-color: var(--headercolordigitalen) !important;
            }
        }
    }

    & .infobar {
        background: var(--maindigitalen);
        background-image: linear-gradient(var(--maindigitalenfade), var(--maindigitalen));
        color: var(--textdigitalen);

        & .logo, .logodos {
            filter: unset !important;
        }
    }

    & .datalayer {
        padding-left: 32px;
        padding-right: 32px;
        & .infoblock {
            & .header {
                & .top {
                    color: var(--headercolordigitalen);
                }
            }
        }
        & .buttonbar {
            & .split {
                & .button {
                    background: var(--maindigitalen);
                    color: var(--textdigitalen);
                    /* border: 2px solid var(--maindigitalenhover); */
                }
                & .button:hover {
                    background: var(--maindigitalenhover);
                }
            }
        }
    }

    & .bottombar {
        background: var(--maindigitalen);
        color: var(--textdigitalen);

        & .bottombarwrapper {
            & .grid {
                & .applist {
                    & a {
                        filter: unset !important;
                    }

                    & a:hover {
                        outline-color: var(--textdigitalen);
                    }
                }
            }
        }

    }
}

@media only screen and (max-width: 449px) {
    
    .topbar .topbarwrapper {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 8px !important;
    }
    
    .topbar .topbarwrapper .logo {
        margin-left: 24px !important;
    }

    .topbar .topbarwrapper .linkbar {
        flex-direction: column !important;
        align-items: flex-start !important;
        margin-left: 24px !important;
    }

    .topbar .topbarwrapper .linkbar .link {
        margin-right: 0;
        /* margin-bottom: 6px; */
    }

    .topbar .topbarwrapper .linkbar .contact {
        margin-top: 8px !important;
        /* margin-bottom: 6px; */
    }

    .topbar .topbarwrapper .linkbar .separator {
        display: none;
    }
}

@media only screen and (max-width: 654px) {
    .topbar {
        & .topbarwrapper {
            flex-direction: column;
            align-items: flex-start; /* eller center om du vill centrera */
            gap: 12px; /* valfritt mellanrum mellan logga och länkbar */
            padding: 0 16px;

            & .linkbar {
                justify-content: flex-start;
                flex-wrap: wrap; /* så att länkar radbryts vid behov */
            }
        }
    }
}

.topbar {
    width: 100%;
    background-color: white; /* eller annan färg om du vill */
    padding-top: 16px;
    padding-bottom: 16px;
    font-family: Montserrat;

    & .topbarwrapper {
        max-width: 1024px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 16px; /* valfri sid-padding */

        & .logo:hover {
            text-decoration: underline;
        }

        & .logo {
            text-transform: uppercase;
            font-weight: 600;
            margin-left: 32px;
        }

        & .logo:before {
            content: ' ';
            margin-bottom: -6px;

            background-image: url(icons/app-indicator.svg); 
            position: relative;
            display: inline-block;
            width: 24px !important;
            height: 24px;
            background-size: 24px 24px !important;
            margin-right: 8px;
        }

        & .linkbar {
            display: flex;
            justify-content: space-between; /* logga till vänster, länkar till höger */
            align-items: center;           /* vertikal centrering */
            margin-right: 4px;
            font-size: 16px;
            
            & .separator {
                width: 1px;
                height: 16px;
                border-right: 2px solid #000;
                margin-right: 12px;
            }

            & .link:hover {
                border-bottom: 2px solid #000;
                margin-bottom: -2px;
            }

            & .link {
                font-weight: 500;
                margin-right: 12px;
            }

            & .contact:hover {
                border-bottom: unset;
                margin-bottom: unset;
            }

            & .contact {
                padding: 4px 8px;
                border-radius: 4px;
            }

            & .active {
                margin-bottom: -2px;
                border-bottom: 2px solid #000;
                font-weight: 600;
            }
        }
    }
}


@media only screen and (max-width: 300px) {
    .infobar .infobarwrapper .logo, .infobar .infobarwrapper .logodos, .infobar .infobarwrapper .logotres {
        display: none !important;
    }

    .infobar .infobarwrapper .textblock .title, .infobar .infobarwrapper .textblock .info {
        margin-left: 18px !important;
    }

    .bdigitalen .infobar .infobarwrapper .textblock {
        margin-left: 10px !important;
        word-break: break-all;
    }
}

@media only screen and (max-width: 600px) {
    .bdigitalen .infobar .infobarwrapper .logodos {
        display: none !important;
    }

    .bdigitalen .infobar .infobarwrapper .textblock .title, .infobar .infobarwrapper .textblock .info {
        /* margin-left: 18px !important; */
    }

}

@media only screen and (max-width: 449px) {

    .bdiginode .topbar {
        /* padding-bottom: 0px !important; */
    }

    .bdiginode .datalayer .infoblock:first-child {
        /* margin-top: 24px !important; */
    }

    .infobar.duo .infobarwrapper{
        /* display: none; */
       flex-direction: column !important;
       gap: 32px !important;
    }

    .infobar .infobarwrapper {
        padding: 32px 0px !important;
    }

    .infobar .infobarwrapper .logo, .infobar .infobarwrapper .logodos, .infobar .infobarwrapper .logotres {
        width: 64px !important;
        height: 64px !important;
        background-size: 64px 64px !important;
    }

    .infobar .infobarwrapper .textblock {
        margin-left: 12px !important;
        padding-top: 8px !important;
    }

    .infobar .infobarwrapper .textblock .title {
        font-size: 24px !important;
    }

    .infobar .infobarwrapper .textblock .info {
        font-size: 16px !important;
    }
}

@media only screen and (max-width: 654px) {
    .infobar .infobarwrapper {
        padding: 32px 0px !important;
    }
    
    .infobar .infobarwrapper .textblock .title {
            font-size: 24px !important;
        }

    .infobar .infobarwrapper .logo, .infobar .infobarwrapper .logodos, .infobar .infobarwrapper .logotres {
        width: 64px !important;
        height: 64px !important;
        background-size: 64px 64px !important;
    }
}

.infobar.duo {
    min-width: 100% !important;
    max-width: 100% !important;
    /* padding: 32px 16px; */

    & .infobarwrapper {

        display: flex;
        justify-content: space-between; /* eller space-evenly */
        /* gap: 64px; */
        width: 100% !important;
        max-width: 1000px;
        margin: 0 auto;

        & .item {
            flex: 1 1 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }
    }

}

.infobar {
    min-width: 100%;
    max-width: 100%;
    font-family: Montserrat;
    text-transform: uppercase;

    & .infobarwrapper {
        position: relative;
        padding: 64px 0px;
        display: flex;
        justify-content: space-between;
        
        width: fit-content;
        margin-left: auto;
        margin-right: auto;

        
        & .logo {
            display: block;
            content: ' ';
            
            background-image: url(icons/distribute-vertical.svg); 
            position: relative;
            width: 118px;
            height: 118px;
            background-size: 118px 118px;
            filter: brightness(0) invert(1);
            margin-left: auto;
            margin-right: auto;
        }

        & .logodos {
            display: block;
            content: ' ';
            
            background-image: url(icons/filter.svg); 
            position: relative;
            width: 118px;
            height: 118px;
            background-size: 118px 118px;
            filter: brightness(0) invert(1);
            margin-left: auto;
            margin-right: auto;
            scale: 1.6;
        }

        & .logotres {
            display: block;
            content: ' ';
            
            background-image: url(icons/app-indicator.svg); 
            position: relative;
            width: 118px;
            height: 118px;
            background-size: 118px 118px;
            /* filter: brightness(0) invert(1); */
            margin-left: auto;
            margin-right: auto;
            scale: 1;
        }

        & .textblock {
            margin-left: 24px;
            padding-top: 18px;

            & .title {
                font-size: 48px;
                font-weight: 500;
            }

            & .info {
                font-size: 20px;
                padding-left: 2px;
            }
        }
    }
}


@media only screen and (max-width: 756px) {
    .datalayer .infoblock .buttonbar {
        flex-direction: column;
        align-items: flex-start;
        /* gap: 16px; */
    }

    .datalayer .infoblock .buttonbar:has(.right) .left {
        padding-bottom: 16px;
        border-bottom: 1px dashed black;
    }

    .datalayer .infoblock .buttonbar .right {
        padding-top: 10px;
    }

    .datalayer .infoblock .buttonbar .right .link {
        margin-right: 8px !important;
    }

    .datalayer .infoblock .buttonbar .right .google {
        padding-left: 0px !important;
    }

    .datalayer .infoblock .buttonbar .split .separatorbutton {
                    display: block !important;
                    width: 2px !important;
                    height: 36px !important;
                    border-right: 2px solid #000 !important;
                    margin-right: 12px !important;
    }
}

@media only screen and (max-width: 736px) {
    .datalayer .infoblock .textblock .company .item .textholder .smallx {
        display: none;
    }
}

@media only screen and (max-width: 654px) {
    & .datalayer .contact-form {
        width: 80vw;
        min-width: unset !important;
        max-width: unset !important;
        margin: 0px !important;
        padding: 0px !important;
        border: unset !important;
        margin-top: 24px !important;
        margin-bottom: 24px !important;

        & input, textarea {
            width: 80% !important;
        }
    }
}

@media only screen and (max-width: 600px) {
    .datalayer .infoblock .header .iconwrapper {
            display: none !important;
        }
}

@media only screen and (max-width: 449px) {

    .datalayer {
        padding-right: 16px !important;
        min-width: unset !important;
    }

    .datalayer .infoblock .header .top {
        font-size: 32px !important;
    }

    .datalayer .infoblock .header .info {
        font-size: 20px !important;
    }

    .datalayer .infoblock .buttonbar .split {
        flex-direction: column !important;
        align-items: flex-start !important;    /* 🔹 vänsterjustering */
        margin-left: 16px !important;          /* 🔹 margin från vänsterkanten */
        width: auto !important;
        gap: 8px !important;                   /* 🔹 luft mellan knappar/länkar */
        margin-left: 0px !important;
    }

    .datalayer .infoblock .buttonbar .split .separatorbutton {
        display: none !important;
    }

    .datalayer .infoblock .buttonbar .right .apple {
        padding-left: 0px !important;
        padding-top: 0px !important;
    }

    .datalayer .infoblock ul {
        padding-left: 16px !important;
    }

    .datalayer .infoblock ul li .head {
        display: block !important;
        font-weight: 600 !important;
    }

    .datalayer .infoblock .textblock .company {
            margin-left: 0px !important;
        }

    .datalayer .infoblock .textblock .company .item {
        flex: unset !important;
        /* background: var(--maindiginodebutton); */
        border: 2px solid var(--maindiginodefade);
        border-top-width: 4px;
        border-radius: 4px;
        padding: 16px;
        width: 100%;
    }

    .datalayer .infoblock .textblock .company .item .img {
        display: none;
    }
}


.datalayer {
    min-width: 300px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    flex: 1;
    
    & .infoblock {
        margin-top: 48px;
        margin-bottom: 64px;

        & .header {
            position: relative;
            border-bottom: 2px solid #000;
            padding-bottom: 4px;
            margin-bottom: 16px;
            
            & .top {
                font-family: Montserrat;
                font-size: 40px;
                font-weight: 500;
            }

            & .top.side, .info.side {
                display: inline-block;
            }

            & .info {
                font-family: Montserrat;
                font-size: 28px;
                font-weight: 400;
            }

            & .iconwrapper {
                position: absolute;
                bottom: 11px;
                right: 0px;
                /* background: lightgrey; */

                & .laptop {
                    display: inline-block;
                    content: ' ';
                    bottom: -11px;

                    background-image: url(icons/laptop.svg); 
                    position: relative;
                    display: inline-block;
                    width: 54px !important;
                    height: 54px;
                    background-size: 54px 54px !important;
                    filter: invert(13%) sepia(7%) saturate(4069%) hue-rotate(196deg) brightness(94%) contrast(84%);
                }

                & .mobile {
                    display: inline-block;
                    content: ' ';
                    bottom: -5px;

                    background-image: url(icons/phone.svg); 
                    position: relative;
                    display: inline-block;
                    width: 28px !important;
                    height: 28px;
                    background-size: 28px 28px !important;
                    filter: invert(13%) sepia(7%) saturate(4069%) hue-rotate(196deg) brightness(94%) contrast(84%);
                }
            }
        }
        
        & .textblock {
            margin-bottom: 16px;

            & .toptext.bold {
                font-weight: 500;
            }

            & .toptext {

            }

            & .bottomtext {
                font-style: italic;
            }

            & .bottomtextflat {
                
            }

            & .company {
                display: flex;
                flex-wrap: wrap;         /* 🔹 Tillåter radbrytning */
                gap: 32px;               /* 🔹 Luft mellan korten */
                justify-content: space-between;
                margin-left: 24px;
                margin-top: 36px;

                & .item {
                    flex: 1 1 300px;         /* 🔹 Växer, krymper, minsta bredd 300px */
                    max-width: 400px;        /* 🔹 Stoppar vid maxbredd */
                    display: flex;
                    flex-direction: row;
                    gap: 16px;
                    /* padding-bottom: 16px; */
                    align-items: flex-start;

                    & .img {
                        flex-shrink: 0;

                        & .imgitem {
                            width: 80px;
                            height: 80px;
                            border-radius: 50%;
                            background: var(--maindiginodebutton);
                        }
                    }

                    & .textholder {
                        display: flex;
                        flex-direction: column;
                        gap: 2px;

                        & .title {
                            font-size: 14px;
                            font-family: "Open Sans";
                        }

                        & .name {
                            font-size: 18px;
                            font-weight: 500;
                        }

                        & .tel:hover, .mail:hover {
                            text-decoration: underline;
                        }

                        & .tel, .mail {
                            color: var(--maindiginodetext);
                            word-break: break-all;
                        }



                        & .icons {
                            display: flex;
                            gap: 8px;
                            margin-top: 6px;

                            & a:hover {
                                outline: 1px dashed black;
                                outline-offset: 4px;
                            }

                            & a {
                                position: relative;
                                display: inline-block;
                                width: 24px !important;
                                height: 24px;
                                background-size: 24px 24px !important;
                                margin-right: 6px;
                            }
                        }

                        & .Linkedin {
                            background-image: url(icons/linkedin.svg); 
                        }

                        & .Facebook {
                            background-image: url(icons/facebook.svg); 
                        }

                        & .Instagram {
                            background-image: url(icons/instagram.svg); 
                        }

                    }
                }
            }
        }

        & .infotextbar.digi {
            margin-top: 24px;
            border-left: 6px solid var(--colorbardigitalen);
        }

        & .infotextbar {
            padding: 8px 2px;
            margin-bottom: 20px;
            border-left: 4px solid var(--maindiginode);
            padding-left: 24px;

            /* & .colorblock {
                width: 4px;
                background: var(--maindiginode);
                height: auto;
                align-self: stretch;
                margin-right: 16px;
            } */

            & .main {
                display: inline-block;
                font-weight: 500;
                height: 100%;
                /* margin-right: 4px; */
            }
            & .extra {
                display: inline-block;
            }
        }

        & .buttonbar {
            width: 100%;
            display: flex;
            justify-content: space-between;

            & .split {
                display: flex;
                justify-content: center;
                align-items: center;

                & .button:hover {
                    text-decoration: underline;
                }

                & .button {
                    padding: 8px 12px;
                    border-radius: 4px;
                    margin-right: 12px;
                }

                & .link {
                    padding: 8px 12px;
                    border-radius: 4px;
                    margin-right: 12px;
                    /* background: lightgray; */
                    display: inline-block;
                    vertical-align: bottom;
                }

                & .separatorbutton {
                    width: 2px;
                    height: 100%;
                    border-right: 2px solid #000;
                    margin-right: 12px;
                }

                & .google:hover, .apple:hover {
                    text-decoration: underline;
                }

                & .google:before {
                    content: ' ';
                    margin-bottom: -5px;

                    background-image: url(icons/google-play.svg); 
                    position: relative;
                    display: inline-block;
                    width: 24px !important;
                    height: 24px;
                    background-size: 24px 24px !important;
                    margin-right: 4px;
                }
                
                & .apple:before {
                    content: ' ';
                    margin-bottom: -5px;

                    background-image: url(icons/apple.svg); 
                    position: relative;
                    display: inline-block;
                    width: 24px !important;
                    height: 24px;
                    background-size: 24px 24px !important;
                    margin-right: 4px;
                }
            }

        }

        & .ulheader {
            font-weight: 500;
            /* font-size: 18px; */
            margin-top: 20px;
            margin-bottom: -10px;
        }

        & ul {
                & li {
                    margin-bottom: 12px;
                    
                    & .head {
                        display: inline-block;
                        font-weight: 500;
                        
                    }
                }
            }
        
        & ul.line {
            list-style-type: '→ ';
            list-style-position: inside;
            padding-left: 16px;
        }
    }

    & .contact-form {
        min-width: 500px;
        max-width: 500px;
        /* max-width: 600px; */
        margin: 36px auto;
        /* margin-top: 36px; */
        padding: 24px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-family: 'Segoe UI', sans-serif;
        background-color: #fff;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);

        & label {
            display: block;
            margin-bottom: 6px;
            font-weight: 600;
            color: #333;
        }

        & input, textarea {
            width: 95%;
            padding: 10px 12px;
            margin-bottom: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-family: inherit;
            font-size: 15px;
            transition: border-color 0.3s;
        }

        & textarea {
            height: 200px;
            resize: vertical;
        }

        & input:focus, textarea:focus {
            border-color: #f47c3c; /* t.ex. orange highlight */
            outline: none;
        }

        & button {
            background-color: #d85f1f;
            color: white;
            border: none;
            padding: 12px 20px;
            font-size: 16px;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        & button:hover {
            background-color: #f47c3c;
        }

        & #form-response {
            margin-top: 16px;
            font-weight: 500;
        }
    }
}

@media only screen and (max-width: 449px) {

    .bottombar {
        width: 100% !important;
    }
    
    .bottombar .bottombarwrapper {
        flex-direction: column !important;        
        /* align-items: flex-start !important;        */
        gap: 24px !important;                     
        padding: 0 16px !important;
        width: auto !important;
    }

    .bottombar .bottombarwrapper .grid {
        min-width: 100px !important;
        max-width: 90% !important;
        width: unset !important;
        text-align: left !important;
        padding-left: 16px !important;
        padding-right: 0px !important;
        padding-bottom: 16px;
        border-bottom: 1px solid white;
    }

    .bottombar .bottombarwrapper .grid:last-child {
        border-bottom: unset;
    }
}

.bottombar {
    max-width: 100%;
    min-width: 100%;
    padding-top: 32px;
    padding-bottom: 32px;

    font-size: 15px;

    & .bottombarwrapper {

        max-width: 1024px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: stretch; /* 🔑 Detta gör att alla grid får samma höjd */

        & .grid {
            
             & .link:hover {
                text-decoration: underline;
             }

            & .link {
                display: block;
            }
            
            & .active {
                font-weight: 700;
            }

            & .line {
                display: block;
            }

            & .applist {
                & .text {
                    display: inline-block;
                    font-weight: 500;
                    margin-top: 16px;
                }

                & .apple:hover, .google:hover, .linkedin:hover {
                    outline-offset: 4px;
                    outline: 1px dashed white;
                    /* cursor: pointer; */

                }

                & .apple {
                    content: ' ';
                    margin-bottom: -5px;
                    margin-left: 4px;

                    background-image: url(icons/apple.svg); 
                    position: relative;
                    display: inline-block;
                    width: 21px !important;
                    height: 21px;
                    background-size: 21px 21px !important;
                    margin-right: 4px;
                    filter: brightness(0) invert(1);
                }
                
                & .google {
                    content: ' ';
                    margin-bottom: -5px;
                    margin-left: 4px;

                    background-image: url(icons/google-play.svg); 
                    position: relative;
                    display: inline-block;
                    width: 21px !important;
                    height: 21px;
                    background-size: 21px 21px !important;
                    margin-right: 4px;
                    filter: brightness(0) invert(1);
                }

                & .linkedin {
                    content: ' ';
                    margin-bottom: -5px;
                    margin-left: 4px;

                    background-image: url(icons/linkedin.svg); 
                    position: relative;
                    display: inline-block;
                    width: 21px !important;
                    height: 21px;
                    background-size: 21px 21px !important;
                    margin-right: 4px;
                    filter: brightness(0) invert(1);
                }

                & .separator {
                    width: 2px;
                        height: 100%;
                        border-right: 2px solid #fff;
                        margin-right: 12px;
                }
            }
        }

        & .left {
            padding-left: 24px;
            padding-right: 8px;
        }

        & .middle {
            /* border-left: 1px solid #fff;
            border-right: 1px solid #fff; */
            padding-left: 36px;
            padding-right: 36px;
            width: 25%;
            text-align: center;
        }

        & .right {
            padding-left: 8px;
            padding-right: 24px;
        }
    }
}