@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap');


/* ==========================================================
   RUFFUS – ABLAUF
========================================================== */

.rp-process {
    position: relative;

    width: 100%;

    overflow: clip;

    isolation: isolate;

    background-color: #090909;

    background-image:
        var(
            --rp-background,
            url("https://ruffus.my-webdesigner-kunden.de/wp-content/uploads/2026/10/unnamed-7.webp")
        );

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    color: #ffffff;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


.rp-process *,
.rp-process *::before,
.rp-process *::after {
    box-sizing: border-box;
}


/* ==========================================================
   DUNKLES OVERLAY
========================================================== */

.rp-process::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.94) 0%,
            rgba(0,0,0,.89) 47%,
            rgba(0,0,0,.82) 100%
        );

    pointer-events: none;
}


/* ==========================================================
   GELBES DETAIL
========================================================== */

.rp-process::after {
    content: "";

    position: absolute;

    right: -160px;
    bottom: -170px;

    width: 410px;
    height: 410px;

    background: #FEEE02;

    opacity: .05;

    transform:
        rotate(24deg);

    pointer-events: none;

    z-index: 1;
}


/* ==========================================================
   INNER
========================================================== */

.rp-process-inner {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1320px;

    margin:
        0
        auto;

    padding:
        95px
        25px
        100px;

    display: grid;

    grid-template-columns:
        .76fr
        1.24fr;

    gap: 80px;

    align-items: start;
}


/* ==========================================================
   LINKS / STICKY
========================================================== */

.rp-process-intro {
    position: sticky;

    top: 105px;

    align-self: start;

    width: 100%;

    height: max-content;

    z-index: 5;
}


/* ==========================================================
   KICKER
========================================================== */

.rp-process-kicker {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

    color: #ffffff;

    font-size: 13px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: .8px;

    text-transform: uppercase;
}


.rp-process-kicker::before {
    content: "";

    width: 40px;
    height: 5px;

    flex:
        0
        0
        40px;

    background: #FEEE02;

    transform-origin:
        left center;
}


/* ==========================================================
   TITLE
========================================================== */

.rp-process-title {
    max-width: 500px;

    margin:
        0
        0
        26px;

    color: #ffffff;

    font-size:
        clamp(
            40px,
            4vw,
            55px
        );

    line-height: 1.03;

    letter-spacing:
        -1.8px;

    font-weight: 750;
}


/* ==========================================================
   MARKER
========================================================== */

.rp-process-mark {
    position: relative;

    display: inline-block;

    white-space: nowrap;

    z-index: 1;

    padding:
        .02em
        .13em
        .08em;

    margin-left:
        -.05em;

    color:
        #090909 !important;

    font-family:
        "UnifrakturCook",
        serif !important;

    font-size: 1.05em;

    line-height: .92;

    letter-spacing: 0;

    font-weight:
        700 !important;
}


.rp-process-mark::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 8%;
    bottom: 0;

    background: #FEEE02;

    z-index: -1;

    transform:
        skewX(-4deg)
        scaleX(1);

    transform-origin:
        left center;
}


.rp-process-mark::after {
    content: "";

    position: absolute;

    left: -5px;
    right: 7px;

    bottom: -2px;

    height: 6px;

    background: #FEEE02;

    z-index: -1;

    transform:
        skewX(8deg);
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.rp-process-description {
    max-width: 455px;

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            .72
        );

    font-size: 17px;

    line-height: 1.7;
}


.rp-process-description p {
    margin: 0;
}


.rp-process-description strong {
    color: #ffffff;

    font-weight: 700;
}


/* ==========================================================
   INFOBOX
========================================================== */

.rp-process-note {
    position: relative;

    margin-top: 30px;

    padding:
        20px
        20px
        20px
        24px;

    display: grid;

    grid-template-columns:
        48px
        1fr;

    gap: 15px;

    background: #ffffff;

    color: #090909;

    border:
        1px solid
        #ffffff;
}


.rp-process-note::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 7px;
    height: 100%;

    background: #FEEE02;
}


.rp-process-note-icon {
    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #090909;

    color: #FEEE02;

    font-size: 17px;
}


.rp-process-note-icon i,
.rp-process-note-icon svg {
    color: #FEEE02;

    fill: #FEEE02;
}


.rp-process-note strong {
    display: block;

    margin:
        2px
        0
        5px;

    color: #090909;

    font-size: 15px;

    line-height: 1.25;

    font-weight: 700;
}


.rp-process-note span {
    display: block;

    color:
        rgba(
            9,
            9,
            9,
            .70
        );

    font-size: 13px;

    line-height: 1.5;
}


/* ==========================================================
   BUTTON
========================================================== */

.rp-process-button {
    min-height: 55px;

    margin-top: 18px;

    padding:
        0
        25px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 11px;

    background: #FEEE02;

    border:
        2px solid
        #FEEE02;

    color:
        #090909 !important;

    text-decoration:
        none !important;

    font-size: 15px;

    line-height: 1;

    font-weight: 700;

    transition:
        transform .2s ease,
        background .2s ease,
        color .2s ease,
        border-color .2s ease;
}


.rp-process-button i {
    transition:
        transform .2s ease;
}


.rp-process-button:hover {
    transform:
        translateY(-2px);

    background: #ffffff;

    border-color: #ffffff;

    color:
        #090909 !important;
}


.rp-process-button:hover i {
    transform:
        translateX(4px);
}


/* ==========================================================
   STEPS
========================================================== */

.rp-process-steps {
    position: relative;

    margin: 0;

    padding: 0;

    list-style: none;
}


/* Verbindungslinie */

.rp-process-steps::before {
    content: "";

    position: absolute;

    top: 62px;
    bottom: 62px;

    left: 31px;

    width: 2px;

    background:
        linear-gradient(
            to bottom,
            #FEEE02,
            rgba(254,238,2,.20),
            #FEEE02
        );

    z-index: 0;
}


.rp-process-step {
    position: relative;

    z-index: 2;

    margin-bottom: 16px;
}


.rp-process-step:last-child {
    margin-bottom: 0;
}


/* ==========================================================
   CARD
========================================================== */

.rp-process-card {
    position: relative;

    min-height: 158px;

    display: grid;

    grid-template-columns:
        76px
        1fr;

    gap: 25px;

    align-items: center;

    padding:
        27px
        105px
        27px
        25px;

    background: #111111;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .14
        );

    color: #ffffff;

    overflow: hidden;

    transition:
        transform .28s
        cubic-bezier(.2,.75,.3,1),
        background .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}


/* Balken links */

.rp-process-card::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    left: 0;

    width: 7px;

    background: #FEEE02;

    transition:
        width .28s ease;
}


/* Linie unten */

.rp-process-card::after {
    content: "";

    position: absolute;

    left: 7px;
    bottom: 0;

    width: 80px;
    height: 5px;

    background: #FEEE02;

    transition:
        width .35s
        cubic-bezier(.22,.8,.28,1);
}


/* ==========================================================
   CARD HOVER
========================================================== */

.rp-process-card:hover {
    transform:
        translateX(7px);

    background: #161616;

    border-color:
        rgba(
            254,
            238,
            2,
            .55
        );

    box-shadow:
        14px
        14px
        0
        rgba(
            254,
            238,
            2,
            .08
        );
}


.rp-process-card:hover::before {
    width: 10px;
}


.rp-process-card:hover::after {
    width: 145px;
}


/* ==========================================================
   NUMMER
========================================================== */

.rp-process-card-number {
    position: absolute;

    top: 0;
    right: 0;

    width: 80px;
    height: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #FEEE02;

    color: #090909;

    font-size: 15px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: 1px;

    z-index: 3;
}


.rp-process-card-number::before {
    content: "";

    position: absolute;

    top: 0;
    left: -26px;

    width: 27px;
    height: 58px;

    background: #FEEE02;

    clip-path:
        polygon(
            100% 0,
            100% 100%,
            0 72%
        );
}


/* ==========================================================
   ICON
========================================================== */

.rp-process-icon {
    position: relative;

    width: 62px;
    height: 62px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #FEEE02;

    color: #090909;

    font-size: 20px;

    z-index: 2;

    box-shadow:
        7px
        7px
        0
        rgba(
            255,
            255,
            255,
            .08
        );

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.rp-process-icon i,
.rp-process-icon svg {
    color: #090909;

    fill: #090909;
}


.rp-process-card:hover
.rp-process-icon {
    transform:
        translateY(-3px);

    box-shadow:
        7px
        10px
        0
        rgba(
            255,
            255,
            255,
            .08
        );
}


/* ==========================================================
   CONTENT
========================================================== */

.rp-process-card-content {
    position: relative;

    min-width: 0;
}


.rp-process-card-content::after {
    content:
        attr(data-step);

    position: absolute;

    right: 25px;
    bottom: -18px;

    color:
        rgba(
            255,
            255,
            255,
            .035
        );

    font-size: 110px;

    line-height: 1;

    font-weight: 900;

    letter-spacing: -8px;

    pointer-events: none;
}


.rp-process-meta {
    margin-bottom: 8px;

    color: #FEEE02;

    font-size: 11px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}


.rp-process-card h3 {
    position: relative;

    z-index: 2;

    margin:
        0
        0
        9px;

    color: #ffffff;

    font-size: 25px;

    line-height: 1.18;

    letter-spacing:
        -.5px;

    font-weight: 700;
}


.rp-process-card p {
    position: relative;

    z-index: 2;

    max-width: 620px;

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            .66
        );

    font-size: 15px;

    line-height: 1.62;
}


/* ==========================================================
   STATUS
========================================================== */

.rp-process-status {
    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 14px;

    padding:
        7px
        10px;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            .17
        );

    color: #ffffff;

    font-size: 11px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: .25px;

    text-transform: uppercase;
}


.rp-process-status i {
    width: 17px;
    height: 17px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    background: #FEEE02;

    color: #090909;

    font-size: 8px;
}


/* ==========================================================
   ABWECHSELNDE SCHRITTE
========================================================== */

.rp-process-step:nth-child(even)
.rp-process-card {
    background: #171717;
}


.rp-process-step:nth-child(even)
.rp-process-icon {
    background: #ffffff;

    color: #090909;
}


.rp-process-step:nth-child(even)
.rp-process-card-number {
    background: #ffffff;

    color: #090909;
}


.rp-process-step:nth-child(even)
.rp-process-card-number::before {
    background: #ffffff;
}


.rp-process-step:nth-child(even)
.rp-process-meta {
    color: #ffffff;
}


.rp-process-step:nth-child(even)
.rp-process-status i {
    background: #ffffff;
}


/* ==========================================================
   SCROLL ANIMATION
========================================================== */

.rp-process.rp-js
.rp-process-kicker,

.rp-process.rp-js
.rp-process-title,

.rp-process.rp-js
.rp-process-description,

.rp-process.rp-js
.rp-process-note,

.rp-process.rp-js
.rp-process-button {
    opacity: 0;

    transform:
        translateY(20px);
}


.rp-process.rp-js
.rp-process-kicker {
    transition:
        opacity .65s ease .08s,
        transform .65s
        cubic-bezier(.2,.75,.3,1)
        .08s;
}


.rp-process.rp-js
.rp-process-title {
    transition:
        opacity .7s ease .20s,
        transform .7s
        cubic-bezier(.2,.75,.3,1)
        .20s;
}


.rp-process.rp-js
.rp-process-description {
    transition:
        opacity .7s ease .34s,
        transform .7s
        cubic-bezier(.2,.75,.3,1)
        .34s;
}


.rp-process.rp-js
.rp-process-note {
    transition:
        opacity .7s ease .46s,
        transform .7s
        cubic-bezier(.2,.75,.3,1)
        .46s;
}


.rp-process.rp-js
.rp-process-button {
    transition:
        opacity .7s ease .58s,
        transform .7s
        cubic-bezier(.2,.75,.3,1)
        .58s,
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}


/* KICKER-LINIE */

.rp-process.rp-js
.rp-process-kicker::before {
    transform:
        scaleX(0);

    transition:
        transform
        .65s
        cubic-bezier(.22,.8,.28,1)
        .55s;
}


/* MARKER */

.rp-process.rp-js
.rp-process-mark::before {
    transform:
        skewX(-4deg)
        scaleX(0);

    transition:
        transform
        .78s
        cubic-bezier(.22,.8,.24,1)
        1.05s;
}


.rp-process.rp-js
.rp-process-mark::after {
    transform:
        skewX(8deg)
        scaleX(0);

    transform-origin:
        left center;

    transition:
        transform
        .68s
        cubic-bezier(.22,.8,.24,1)
        1.22s;
}


.rp-process.rp-js
.rp-process-mark {
    color:
        #ffffff !important;

    transition:
        color
        .15s
        ease
        1.28s;
}


/* SCHRITTE */

.rp-process.rp-js
.rp-process-step {
    opacity: 0;

    transform:
        translateX(35px);
}


.rp-process.rp-js
.rp-process-step:nth-child(1) {
    transition:
        opacity .65s ease .18s,
        transform .65s
        cubic-bezier(.2,.75,.3,1)
        .18s;
}


.rp-process.rp-js
.rp-process-step:nth-child(2) {
    transition:
        opacity .65s ease .30s,
        transform .65s
        cubic-bezier(.2,.75,.3,1)
        .30s;
}


.rp-process.rp-js
.rp-process-step:nth-child(3) {
    transition:
        opacity .65s ease .42s,
        transform .65s
        cubic-bezier(.2,.75,.3,1)
        .42s;
}


.rp-process.rp-js
.rp-process-step:nth-child(4) {
    transition:
        opacity .65s ease .54s,
        transform .65s
        cubic-bezier(.2,.75,.3,1)
        .54s;
}


.rp-process.rp-js
.rp-process-step:nth-child(5) {
    transition:
        opacity .65s ease .66s,
        transform .65s
        cubic-bezier(.2,.75,.3,1)
        .66s;
}


/* SICHTBAR */

.rp-process.rp-js.rp-visible
.rp-process-kicker,

.rp-process.rp-js.rp-visible
.rp-process-title,

.rp-process.rp-js.rp-visible
.rp-process-description,

.rp-process.rp-js.rp-visible
.rp-process-note,

.rp-process.rp-js.rp-visible
.rp-process-button,

.rp-process.rp-js.rp-visible
.rp-process-step {
    opacity: 1;

    transform:
        translate3d(
            0,
            0,
            0
        );
}


.rp-process.rp-js.rp-visible
.rp-process-kicker::before {
    transform:
        scaleX(1);
}


.rp-process.rp-js.rp-visible
.rp-process-mark::before {
    transform:
        skewX(-4deg)
        scaleX(1);
}


.rp-process.rp-js.rp-visible
.rp-process-mark::after {
    transform:
        skewX(8deg)
        scaleX(1);
}


.rp-process.rp-js.rp-visible
.rp-process-mark {
    color:
        #090909 !important;
}


.rp-process.rp-js.rp-visible
.rp-process-card:hover {
    transform:
        translateX(7px);
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width:1050px) {

    .rp-process-inner {
        grid-template-columns:
            .9fr
            1.1fr;

        gap:45px;
    }


    .rp-process-title {
        font-size:44px;
    }


    .rp-process-card {
        grid-template-columns:
            62px
            1fr;

        gap:19px;

        padding:
            25px
            90px
            25px
            22px;
    }


    .rp-process-icon {
        width:56px;
        height:56px;
    }


    .rp-process-card h3 {
        font-size:23px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width:800px) {

    .rp-process {
        overflow:hidden;

        background-position:
            center center;
    }


    .rp-process-inner {
        padding:
            70px
            20px
            75px;

        grid-template-columns:
            1fr;

        gap:48px;
    }


    .rp-process-intro {
        position:relative;

        top:auto;

        height:auto;
    }


    .rp-process-description,
    .rp-process-note {
        max-width:650px;
    }

}


/* ==========================================================
   KLEINES MOBILE
========================================================== */

@media (max-width:560px) {

    .rp-process-inner {
        padding:
            60px
            18px
            65px;
    }


    .rp-process-title {
        font-size:37px;

        line-height:1.06;
    }


    .rp-process-mark {
        white-space:normal;

        font-size:1em;

        padding:
            .02em
            .10em
            .07em;
    }


    .rp-process-mark::before {
        top:6%;
    }


    .rp-process-button {
        width:100%;
    }


    .rp-process-steps::before {
        display:none;
    }


    .rp-process-card {
        min-height:auto;

        display:block;

        padding:
            76px
            20px
            24px
            25px;
    }


    .rp-process-card::before {
        width:6px;
    }


    .rp-process-card:hover {
        transform:none;

        box-shadow:none;
    }


    .rp-process-card-number {
        width:67px;
        height:48px;

        font-size:13px;
    }


    .rp-process-card-number::before {
        left:-21px;

        width:22px;
        height:48px;
    }


    .rp-process-icon {
        width:50px;
        height:50px;

        margin-bottom:18px;

        font-size:17px;

        box-shadow:
            6px
            6px
            0
            rgba(255,255,255,.08);
    }


    .rp-process-card h3 {
        font-size:22px;
    }


    .rp-process-card p {
        font-size:14px;

        line-height:1.6;
    }


    .rp-process-card-content::after {
        right:5px;

        bottom:-12px;

        font-size:75px;
    }


    .rp-process.rp-js.rp-visible
    .rp-process-card:hover {
        transform:none;
    }

}


/* ==========================================================
   ELEMENTOR EDITOR
========================================================== */

.elementor-editor-active
.rp-process
.rp-process-kicker,

.elementor-editor-active
.rp-process
.rp-process-title,

.elementor-editor-active
.rp-process
.rp-process-description,

.elementor-editor-active
.rp-process
.rp-process-note,

.elementor-editor-active
.rp-process
.rp-process-button,

.elementor-editor-active
.rp-process
.rp-process-step {
    opacity:1 !important;

    transform:none !important;
}


.elementor-editor-active
.rp-process-mark {
    color:
        #090909 !important;
}


.elementor-editor-active
.rp-process-mark::before {
    transform:
        skewX(-4deg)
        scaleX(1) !important;
}


.elementor-editor-active
.rp-process-mark::after {
    transform:
        skewX(8deg)
        scaleX(1) !important;
}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion:reduce) {

    .rp-process-mark {
        color:
            #090909 !important;
    }


    .rp-process-mark::before {
        transform:
            skewX(-4deg)
            scaleX(1) !important;
    }


    .rp-process-mark::after {
        transform:
            skewX(8deg)
            scaleX(1) !important;
    }


    .rp-process-card,
    .rp-process-icon {
        transition:
            none !important;
    }

}

/* RUFFUS_ICON_NORMALIZATION_START */

/* ==========================================================
   RUFFUS – ELEMENTOR ICON NORMALISIERUNG
   Elementor kann Icons als <i> oder <svg> ausgeben.
========================================================== */


/* ==========================================================
   LEISTUNGEN
========================================================== */

.rs-icon {
    overflow: hidden !important;
    line-height: 1 !important;
}

.rs-icon > i,
.rs-icon > svg {
    display: block !important;

    width: 20px !important;
    height: 20px !important;

    min-width: 20px !important;
    min-height: 20px !important;

    max-width: 20px !important;
    max-height: 20px !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: 0 0 20px !important;

    font-size: 20px !important;
    line-height: 1 !important;

    color: #FEEE02 !important;
    fill: currentColor !important;

    object-fit: contain !important;

    transform: none !important;
}

.rs-icon > i::before {
    display: block !important;

    width: auto !important;
    height: auto !important;

    margin: 0 !important;

    font-size: inherit !important;
    line-height: 1 !important;
}


/* ==========================================================
   ABLAUF – HAUPTICONS
========================================================== */

.rp-process-icon {
    overflow: hidden !important;
    line-height: 1 !important;
}

.rp-process-icon > i,
.rp-process-icon > svg {
    display: block !important;

    width: 22px !important;
    height: 22px !important;

    min-width: 22px !important;
    min-height: 22px !important;

    max-width: 22px !important;
    max-height: 22px !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: 0 0 22px !important;

    font-size: 22px !important;
    line-height: 1 !important;

    color: #090909 !important;
    fill: currentColor !important;

    object-fit: contain !important;

    transform: none !important;
}

.rp-process-icon > i::before {
    display: block !important;

    margin: 0 !important;

    font-size: inherit !important;
    line-height: 1 !important;
}


/* Weiße Kästen behalten ebenfalls schwarze Icons */

.rp-process-step:nth-child(even)
.rp-process-icon > i,

.rp-process-step:nth-child(even)
.rp-process-icon > svg {
    color: #090909 !important;
    fill: currentColor !important;
}


/* ==========================================================
   ABLAUF – INFOBOX ICON
========================================================== */

.rp-process-note-icon {
    overflow: hidden !important;
    line-height: 1 !important;
}

.rp-process-note-icon > i,
.rp-process-note-icon > svg {
    display: block !important;

    width: 18px !important;
    height: 18px !important;

    min-width: 18px !important;
    min-height: 18px !important;

    max-width: 18px !important;
    max-height: 18px !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: 0 0 18px !important;

    font-size: 18px !important;
    line-height: 1 !important;

    color: #FEEE02 !important;
    fill: currentColor !important;

    object-fit: contain !important;

    transform: none !important;
}


/* ==========================================================
   BEWERTUNGEN – VERTRAUENSPUNKTE
========================================================== */

.rr-context-icon {
    overflow: hidden !important;
    line-height: 1 !important;
}

.rr-context-icon > i,
.rr-context-icon > svg {
    display: block !important;

    width: 17px !important;
    height: 17px !important;

    min-width: 17px !important;
    min-height: 17px !important;

    max-width: 17px !important;
    max-height: 17px !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: 0 0 17px !important;

    font-size: 17px !important;
    line-height: 1 !important;

    color: #090909 !important;
    fill: currentColor !important;

    object-fit: contain !important;

    transform: none !important;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 560px) {

    .rs-icon > i,
    .rs-icon > svg {
        width: 19px !important;
        height: 19px !important;

        min-width: 19px !important;
        min-height: 19px !important;

        max-width: 19px !important;
        max-height: 19px !important;

        flex-basis: 19px !important;

        font-size: 19px !important;
    }


    .rp-process-icon > i,
    .rp-process-icon > svg {
        width: 19px !important;
        height: 19px !important;

        min-width: 19px !important;
        min-height: 19px !important;

        max-width: 19px !important;
        max-height: 19px !important;

        flex-basis: 19px !important;

        font-size: 19px !important;
    }

}

/* RUFFUS_ICON_NORMALIZATION_END */