.overridden-hint-wrapper {
    // font-style: italic; // @DO - comment out
    font-size: 13px; // @DO - add

    .lead-text {
        &:before {
            color: #eb5202;
            content: '\e623';
            font-family: "Admin Icons";
            display: inline-block;
            margin-right: 0.5em;
        }
    }

    .override-scope {
        cursor: pointer;
        line-height: 18px; // line-height: 40px; //improve touch experience - @DO - okay with just desktop
        position: relative;
        padding-left: 2.5rem; // padding-right: 4rem; //prevent arrow from overlapping text // @DO

        &:before {
            font-family: "Admin Icons";
            font-style: normal;
            content: '\e616';
            font-size: 1.8rem;
            position: absolute;
            left: 0; // right: 1.3rem;// @DO
        }

        &.open {
            border-bottom: none; //remove native accordion border so following .override-value can have it

            &:before {
                content: '\e615'; //set icon to close arrow
            }
        }
    }

    .override-value {
        &.visible {
            display: block;
        }

        span.override-value-hint-label {
            display: block;
            margin-bottom: 1rem;
        }

        //move native accordion left whitespace from margin to padding
        margin-left: 0;
        padding-left: 40px;
    }
}