/*!
 * The Bronson adaptation for the Bluelabel Design
 * @version v13.0.1
 * @link https://bronson.vwfs.tools
 * @author Volkswagen Financial Services AG
 * @license LicenseRef-VWFS-Standard-License
 * Copyright ©2023 Volkswagen Financial Services AG. All rights reserved.
 */
.o-layout > *:not(.o-layout__item) {
    position: relative;
    outline: 1px solid red
}

.o-layout > *:not(.o-layout__item)::after {
    padding: 2px;
    position: absolute;
    bottom: 100%;
    left: 0;
    background-color: rgba(255, 0, 0, .8);
    color: #fff;
    outline: 1px solid red;
    font-size: 12px;
    font-family: monospace;
    content: "ERROR: " ".o-layout needs .o-layout__item as a direct child element. Wrap every other component inside .o-layout__item."
}

*:not(.o-layout) > .o-layout__item {
    position: relative;
    outline: 1px solid red
}

*:not(.o-layout) > .o-layout__item::after {
    padding: 2px;
    position: absolute;
    bottom: 100%;
    left: 0;
    background-color: rgba(255, 0, 0, .8);
    color: #fff;
    outline: 1px solid red;
    font-size: 12px;
    font-family: monospace;
    content: "ERROR: " ".o-layout__item needs .o-layout as a direct wrapper."
}

.o-layout[class*=c-], .o-layout__item[class*=c-] {
    position: relative;
    outline: 1px solid red
}

.o-layout[class*=c-]::after, .o-layout__item[class*=c-]::after {
    padding: 2px;
    position: absolute;
    bottom: 100%;
    left: 0;
    background-color: rgba(255, 255, 0, .8);
    color: #000;
    outline: 1px solid red;
    font-size: 12px;
    font-family: monospace;
    content: "WARNING: " "Do not mix layout classes with custom components. Rather try to nest your components within a .o-layout__item instead."
}

[class=" o-layout__item u-1/1"], [class=" o-layout__item  u-1/1"], [class="o-layout__item u-1/1 "], [class="o-layout__item  u-1/1 "], [class=" o-layout__item u-1/1 "], [class=" o-layout__item  u-1/1 "], [class="o-layout__item u-1/1"], [class="o-layout__item  u-1/1"] {
    position: relative;
    outline: 1px solid red
}

[class=" o-layout__item u-1/1"]::after, [class=" o-layout__item  u-1/1"]::after, [class="o-layout__item u-1/1 "]::after, [class="o-layout__item  u-1/1 "]::after, [class=" o-layout__item u-1/1 "]::after, [class=" o-layout__item  u-1/1 "]::after, [class="o-layout__item u-1/1"]::after, [class="o-layout__item  u-1/1"]::after {
    padding: 2px;
    position: absolute;
    bottom: 100%;
    left: 0;
    background-color: rgba(255, 255, 0, .8);
    color: #000;
    outline: 1px solid red;
    font-size: 12px;
    font-family: monospace;
    content: "WARNING: " "This row is always full-width so you don't need a .o-layout > .o-layout__item combination together with .u-1/1 at all. If you have control over your HTML here, get rid of those .o-layout/.o-layout__item classes surrounding this element in order to tidy up your markup."
}

.plyr__control > svg {
    outline: none !important
}

.c-icon--\[control-profile\] {
    position: relative;
    outline: 1px solid red
}

.c-icon--\[control-profile\]::after {
    padding: 2px;
    position: absolute;
    bottom: 100%;
    left: 0;
    background-color: rgba(255, 255, 0, .8);
    color: #000;
    outline: 1px solid red;
    font-size: 12px;
    font-family: monospace;
    content: "WARNING: " "The `.c-icon--[control-profile]` class is deprecated. Replace it with any other icon you find in the icon overview page."
}

.c-icon--\[control-search\] {
    position: relative;
    outline: 1px solid red
}

.c-icon--\[control-search\]::after {
    padding: 2px;
    position: absolute;
    bottom: 100%;
    left: 0;
    background-color: rgba(255, 255, 0, .8);
    color: #000;
    outline: 1px solid red;
    font-size: 12px;
    font-family: monospace;
    content: "WARNING: " "The `.c-icon--[control-search]` class is now renamed to `.c-icon--[semantic-search]`. Replace every instance of `.c-icon--[control-search]` with the new class name."
}

.c-icon--\[control-close\] {
    position: relative;
    outline: 1px solid red
}

.c-icon--\[control-close\]::after {
    padding: 2px;
    position: absolute;
    bottom: 100%;
    left: 0;
    background-color: rgba(255, 255, 0, .8);
    color: #000;
    outline: 1px solid red;
    font-size: 12px;
    font-family: monospace;
    content: "WARNING: " "The `.c-icon--[control-close]` class is now renamed to `.c-icon--[semantic-close]`. Replace every instance of `.c-icon--[control-close]` with the new class name."
}

.c-icon--\[control-back\] {
    position: relative;
    outline: 1px solid red
}

.c-icon--\[control-back\]::after {
    padding: 2px;
    position: absolute;
    bottom: 100%;
    left: 0;
    background-color: rgba(255, 255, 0, .8);
    color: #000;
    outline: 1px solid red;
    font-size: 12px;
    font-family: monospace;
    content: "WARNING: " "The `.c-icon--[control-back]` class is now renamed to `.c-icon--[semantic-back]`. Replace every instance of `.c-icon--[control-back]` with the new class name."
}

.c-icon--\[control-forward\] {
    position: relative;
    outline: 1px solid red
}

.c-icon--\[control-forward\]::after {
    padding: 2px;
    position: absolute;
    bottom: 100%;
    left: 0;
    background-color: rgba(255, 255, 0, .8);
    color: #000;
    outline: 1px solid red;
    font-size: 12px;
    font-family: monospace;
    content: "WARNING: " "The `.c-icon--[control-forward]` class is now renamed to `.c-icon--[semantic-forward]`. Replace every instance of `.c-icon--[control-forward]` with the new class name."
}

.c-icon--\[control-expand\] {
    position: relative;
    outline: 1px solid red
}

.c-icon--\[control-expand\]::after {
    padding: 2px;
    position: absolute;
    bottom: 100%;
    left: 0;
    background-color: rgba(255, 255, 0, .8);
    color: #000;
    outline: 1px solid red;
    font-size: 12px;
    font-family: monospace;
    content: "WARNING: " "The `.c-icon--[control-expand]` class is now renamed to `.c-icon--[semantic-expand]`. Replace every instance of `.c-icon--[control-expand]` with the new class name."
}

.c-icon--\[control-collapse\] {
    position: relative;
    outline: 1px solid red
}

.c-icon--\[control-collapse\]::after {
    padding: 2px;
    position: absolute;
    bottom: 100%;
    left: 0;
    background-color: rgba(255, 255, 0, .8);
    color: #000;
    outline: 1px solid red;
    font-size: 12px;
    font-family: monospace;
    content: "WARNING: " "The `.c-icon--[control-collapse]` class is now renamed to `.c-icon--[semantic-collapse]`. Replace every instance of `.c-icon--[control-collapse]` with the new class name."
}