\n \n Some text next to a icon\n
\n*/\n.icon-text-aligner {\n display: flex;\n align-items: center; }\n .icon-text-aligner > *:nth-child(2) {\n margin-left: var(--space-xs); }\n .icon-text-aligner .icon {\n flex-shrink: 0;\n color: inherit; }\n\n/*╔══════════════════════════════════════════════════╗\n ║ Input ║\n ╚══════════════════════════════════════════════════╝*/\n:root {\n --input-former-max-width: 18px;\n --input-max-space-x: var(--space-md-fixed); }\n\n[contenteditable],\ninput,\nselect,\ntextarea {\n min-height: 2.35rem;\n padding: 0.4rem 0.8rem;\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n border: 1px solid var(--input-border);\n border-radius: var(--border-radius);\n color: var(--input-color);\n font-family: \"Karla\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n font-size: var(--text-sm);\n line-height: 1.2;\n vertical-align: middle;\n background-clip: padding-box; }\n [contenteditable]:hover,\n input:hover,\n select:hover,\n textarea:hover {\n border-color: var(--input-hover-border); }\n [contenteditable]:focus,\n input:focus,\n select:focus,\n textarea:focus {\n border-color: var(--input-focus-border);\n outline: 0;\n box-shadow: 0 0 1px 3px var(--input-focus-shadow); }\n [contenteditable] + label,\n input + label,\n select + label,\n textarea + label {\n user-select: none; }\n\n.input-group .input-group-text {\n border-radius: var(--border-radius);\n border-color: var(--input-border);\n background-color: var(--shade-1); }\n\n[type=\"search\"] {\n -webkit-appearance: none;\n margin-top: 0; }\n\n[type=\"email\"] {\n -webkit-appearance: none;\n margin-top: 0; }\n\n[type=\"radio\"]:checked, [type=\"radio\"]:not(:checked),\n[type=\"checkbox\"]:checked,\n[type=\"checkbox\"]:not(:checked) {\n position: absolute;\n left: -9999px; }\n\n[type=\"radio\"]:checked + label,\n[type=\"radio\"]:not(:checked) + label,\n[type=\"checkbox\"]:checked + label,\n[type=\"checkbox\"]:not(:checked) + label {\n display: inline-block;\n position: relative;\n margin-right: var(--input-max-space-x);\n padding-left: 1.65em;\n line-height: 1.2;\n cursor: pointer; }\n\n[type=\"radio\"]:not(:checked) + label::before,\n[type=\"radio\"]:checked + label::before,\n[type=\"checkbox\"]:not(:checked) + label::before,\n[type=\"checkbox\"]:checked + label::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: var(--input-former-max-width);\n height: var(--input-former-max-width);\n border: 1px solid var(--input-border); }\n\n[type=\"radio\"]:not(:checked) + label::after,\n[type=\"radio\"]:checked + label::after,\n[type=\"checkbox\"]:not(:checked) + label::after,\n[type=\"checkbox\"]:checked + label::after {\n position: absolute;\n transition: all 0.2s ease; }\n\n[type=\"radio\"]:checked:active + label::before,\n[type=\"radio\"]:not(:checked):active + label::before,\n[type=\"radio\"]:checked:focus + label::before,\n[type=\"radio\"]:not(:checked):focus + label::before,\n[type=\"checkbox\"]:checked:active + label::before,\n[type=\"checkbox\"]:not(:checked):active + label::before,\n[type=\"checkbox\"]:checked:focus + label::before,\n[type=\"checkbox\"]:not(:checked):focus + label::before {\n border-color: var(--input-focus-border);\n box-shadow: 0 0 1px 3px var(--input-focus-shadow); }\n\n[type=\"radio\"]:not(:checked) + label::after,\n[type=\"checkbox\"]:not(:checked) + label::after {\n transform: scale(0);\n opacity: 0; }\n\n[type=\"radio\"]:checked + label::after,\n[type=\"checkbox\"]:checked + label::after {\n transform: scale(1);\n opacity: 1; }\n\n[type=\"radio\"] + label:hover::before,\n[type=\"checkbox\"] + label:hover::before {\n border-color: var(--input-hover-border); }\n\n[type=\"radio\"]:checked + label::before,\n[type=\"radio\"]:not(:checked) + label::before {\n border-radius: 100%; }\n\n[type=\"radio\"]:checked + label::after,\n[type=\"radio\"]:not(:checked) + label::after {\n content: \"\";\n top: 4px;\n left: 4px;\n width: 10px;\n height: 10px;\n border-radius: 100%;\n background-color: var(--color-primary); }\n\n[type=\"radio\"]:disabled:not(:checked) + label::before,\n[type=\"radio\"]:disabled:checked + label::before {\n border-color: var(--input-disabled-border); }\n\n[type=\"radio\"]:disabled:checked + label::after {\n background-color: var(--input-disabled-background); }\n\n[type=\"radio\"]:disabled + label {\n color: var(--input-disabled-color); }\n\n[type=\"checkbox\"]:not(:checked) + label::before,\n[type=\"checkbox\"]:checked + label::before {\n border-radius: var(--border-radius); }\n\n[type=\"checkbox\"]:not(:checked) + label::after,\n[type=\"checkbox\"]:checked + label::after {\n content: \"\\2713\\0020\";\n left: 0;\n width: var(--input-former-max-width);\n color: var(--color-primary);\n line-height: var(--input-former-max-width);\n text-align: center; }\n\n[type=\"checkbox\"]:disabled:not(:checked) + label::before,\n[type=\"checkbox\"]:disabled:checked + label::before {\n border-color: var(--input-disabled-border);\n box-shadow: none; }\n\n[type=\"checkbox\"]:disabled:checked + label::after,\n[type=\"checkbox\"]:disabled + label {\n color: var(--input-disabled-color); }\n\n/*╔══════════════════════════════════════════════════╗\n ║ Link ║\n ╚══════════════════════════════════════════════════╝*/\n.btn--link, a:not(.btn) {\n outline: none;\n background-color: transparent;\n color: var(--color-link);\n text-decoration-line: underline;\n text-decoration-style: dotted;\n -webkit-text-decoration-skip: objects; }\n .btn--link:hover, a:hover:not(.btn) {\n color: var(--color-link-visited);\n text-decoration-style: solid; }\n .btn--link:active, a:active:not(.btn), .btn--link:visited, a:visited:not(.btn) {\n color: var(--color-link-visited); }\n\n[unit=\"additive\"] a:not(.btn) {\n color: var(--color-additive); }\n [unit=\"additive\"] a:not(.btn) > * {\n color: inherit !important; }\n [unit=\"additive\"] a:not(.btn):hover, [unit=\"additive\"] a:not(.btn):active, [unit=\"additive\"] a:not(.btn):visited {\n color: var(--color-additive-state); }\n\n[unit=\"software\"] a:not(.btn) {\n color: var(--color-software); }\n [unit=\"software\"] a:not(.btn) > * {\n color: inherit !important; }\n [unit=\"software\"] a:not(.btn):hover, [unit=\"software\"] a:not(.btn):active, [unit=\"software\"] a:not(.btn):visited {\n color: var(--color-software-state); }\n\n[unit=\"it-service\"] a:not(.btn) {\n color: var(--color-it-service); }\n [unit=\"it-service\"] a:not(.btn) > * {\n color: inherit !important; }\n [unit=\"it-service\"] a:not(.btn):hover, [unit=\"it-service\"] a:not(.btn):active, [unit=\"it-service\"] a:not(.btn):visited {\n color: var(--color-it-service-state); }\n\n[unit=\"messtechnik\"] a:not(.btn) {\n color: var(--color-messtechnik); }\n [unit=\"messtechnik\"] a:not(.btn) > * {\n color: inherit !important; }\n [unit=\"messtechnik\"] a:not(.btn):hover, [unit=\"messtechnik\"] a:not(.btn):active, [unit=\"messtechnik\"] a:not(.btn):visited {\n color: var(--color-messtechnik-state); }\n\n[unit=\"academy\"] a:not(.btn) {\n color: var(--color-academy); }\n [unit=\"academy\"] a:not(.btn) > * {\n color: inherit !important; }\n [unit=\"academy\"] a:not(.btn):hover, [unit=\"academy\"] a:not(.btn):active, [unit=\"academy\"] a:not(.btn):visited {\n color: var(--color-academy-state); }\n\n[unit=\"solutions\"] a:not(.btn) {\n color: var(--color-solutions); }\n [unit=\"solutions\"] a:not(.btn) > * {\n color: inherit !important; }\n [unit=\"solutions\"] a:not(.btn):hover, [unit=\"solutions\"] a:not(.btn):active, [unit=\"solutions\"] a:not(.btn):visited {\n color: var(--color-solutions-state); }\n\n[unit=\"chemie\"] a:not(.btn) {\n color: var(--color-chemie); }\n [unit=\"chemie\"] a:not(.btn) > * {\n color: inherit !important; }\n [unit=\"chemie\"] a:not(.btn):hover, [unit=\"chemie\"] a:not(.btn):active, [unit=\"chemie\"] a:not(.btn):visited {\n color: var(--color-chemie-state); }\n\n/*╔══════════════════════════════════════════════════╗\n ║ List ║\n ╚══════════════════════════════════════════════════╝*/\nol,\nul {\n padding-left: 2em; }\n ol li,\n ul li {\n position: relative; }\n ol li::before,\n ul li::before {\n display: block;\n position: absolute;\n left: calc(-2em + -5px);\n width: 2em;\n color: var(--color-primary-light);\n font-size: inherit;\n text-align: right;\n opacity: 0.8; }\n ol.inline > li,\n ul.inline > li {\n display: inline-block; }\n ol.inline > li:not(:last-child),\n ul.inline > li:not(:last-child) {\n margin-right: 0.5em; }\n\nul {\n list-style-type: none; }\n ul.hash li::before {\n content: \"#\"; }\n ul.custom li::before {\n content: \"☛\"; }\n ul li::before {\n left: calc(-2em + -8px);\n content: \"•\"; }\n\nol {\n counter-reset: ListCounter;\n list-style-type: none; }\n ol li::before {\n content: counters(ListCounter, \".\") \".\";\n counter-increment: ListCounter; }\n\nol.reset,\nul.reset, ol.inline,\nul.inline, .nav-tabs {\n padding: 0;\n list-style-type: none; }\n ol.reset li::before, ul.reset li::before, ol.inline li::before, ul.inline li::before, .nav-tabs li::before {\n display: none; }\n\n/*╔══════════════════════════════════════════════════╗\n ║ Meter ║\n ╚══════════════════════════════════════════════════╝*/\n/*{html}\n\n \n Some text next to a icon\n
\n*/\n\n.icon-text-aligner {\n display: flex;\n align-items: center;\n\n > *:nth-child(2) {\n margin-left: var(--space-xs);\n }\n\n .icon {\n flex-shrink: 0;\n color: inherit;\n }\n}\n","/*╔══════════════════════════════════════════════════╗\n ║ Input ║\n ╚══════════════════════════════════════════════════╝*/\n\n:root {\n --input-former-max-width: 18px;\n --input-max-space-x: var(--space-md-fixed);\n}\n\n[contenteditable],\ninput,\nselect,\ntextarea {\n min-height: 2.35rem;\n padding: 0.4rem 0.8rem;\n transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n border: 1px solid var(--input-border);\n border-radius: var(--border-radius);\n color: var(--input-color);\n font-family: $font-primary;\n font-size: var(--text-sm);\n line-height: 1.2;\n vertical-align: middle;\n background-clip: padding-box;\n\n &:hover {\n border-color: var(--input-hover-border);\n }\n\n &:focus {\n border-color: var(--input-focus-border);\n outline: 0;\n box-shadow: 0 0 1px 3px var(--input-focus-shadow);\n }\n\n & + label {\n user-select: none;\n }\n}\n\n// ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄\n// Input-Group\n\n.input-group {\n .input-group-text {\n border-radius: var(--border-radius);\n border-color: var(--input-border);\n background-color: var(--shade-1);\n }\n}\n\n// ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄\n// Email\n\n[type=\"search\"] {\n -webkit-appearance: none;\n margin-top: 0;\n}\n\n// ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄\n// Search\n\n[type=\"email\"] {\n -webkit-appearance: none;\n margin-top: 0;\n}\n\n// ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄\n// Radio & Checkbox\n\n[type=\"radio\"],\n[type=\"checkbox\"] {\n &:checked,\n &:not(:checked) {\n position: absolute;\n left: -9999px;\n }\n\n &:checked + label,\n &:not(:checked) + label {\n display: inline-block;\n position: relative;\n margin-right: var(--input-max-space-x);\n padding-left: 1.65em;\n line-height: 1.2;\n cursor: pointer;\n }\n\n // aspect\n &:not(:checked) + label::before,\n &:checked + label::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: var(--input-former-max-width);\n height: var(--input-former-max-width);\n border: 1px solid var(--input-border);\n }\n\n // marked aspect\n &:not(:checked) + label::after,\n &:checked + label::after {\n position: absolute;\n transition: all 0.2s ease;\n }\n\n // accessibility\n &:checked:active + label::before,\n &:not(:checked):active + label::before,\n &:checked:focus + label::before,\n &:not(:checked):focus + label::before {\n border-color: var(--input-focus-border);\n box-shadow: 0 0 1px 3px var(--input-focus-shadow);\n }\n\n // marked aspect changes\n &:not(:checked) + label::after {\n transform: scale(0);\n opacity: 0;\n }\n\n &:checked + label::after {\n transform: scale(1);\n opacity: 1;\n }\n\n // hover style\n & + label:hover::before {\n border-color: var(--input-hover-border);\n }\n}\n\n// ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄\n// Radio\n\n[type=\"radio\"] {\n // aspect\n &:checked + label::before,\n &:not(:checked) + label::before {\n border-radius: 100%;\n }\n\n // marked aspect\n &:checked + label::after,\n &:not(:checked) + label::after {\n content: \"\";\n top: 4px;\n left: 4px;\n width: 10px;\n height: 10px;\n border-radius: 100%;\n background-color: var(--color-primary);\n }\n\n // disabled\n &:disabled:not(:checked) + label::before,\n &:disabled:checked + label::before {\n border-color: var(--input-disabled-border);\n }\n\n &:disabled:checked + label::after {\n background-color: var(--input-disabled-background);\n }\n\n &:disabled + label {\n color: var(--input-disabled-color);\n }\n}\n\n// ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄\n// Checkbox\n\n[type=\"checkbox\"] {\n // aspect\n &:not(:checked) + label::before,\n &:checked + label::before {\n border-radius: var(--border-radius);\n }\n\n // marked aspect\n &:not(:checked) + label::after,\n &:checked + label::after {\n content: \"\\2713\\0020\";\n left: 0;\n width: var(--input-former-max-width);\n color: var(--color-primary);\n line-height: var(--input-former-max-width);\n text-align: center;\n }\n\n // disabled\n &:disabled:not(:checked) + label::before,\n &:disabled:checked + label::before {\n border-color: var(--input-disabled-border);\n box-shadow: none;\n }\n\n &:disabled:checked + label::after,\n &:disabled + label {\n color: var(--input-disabled-color);\n }\n}\n","/*╔══════════════════════════════════════════════════╗\n ║ Link ║\n ╚══════════════════════════════════════════════════╝*/\n\na:not(.btn) {\n @extend %link;\n}\n\n// ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄\n// Link style\n\n%link {\n outline: none;\n\n background-color: transparent; // Remove the gray background on active links in IE 10.\n\n color: var(--color-link);\n\n text-decoration-line: underline;\n text-decoration-style: dotted;\n -webkit-text-decoration-skip: objects; // Remove gaps in links underline in iOS 8+ and Safari 8+.\n\n // &:focus:not(:active) {\n // outline: 1px solid var(--color-accent);\n // }\n\n &:hover {\n color: var(--color-link-visited);\n\n text-decoration-style: solid;\n }\n\n &:active,\n &:visited {\n color: var(--color-link-visited);\n }\n}\n\n// ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄\n// Link style for each business unit\n\n@each $unit, $color in $units {\n [unit=\"#{$unit}\"] {\n a:not(.btn) {\n color: nth($color, 1);\n\n > * {\n color: inherit !important;\n }\n\n &:hover,\n &:active,\n &:visited {\n color: nth($color, 2);\n }\n }\n }\n}\n","/*╔══════════════════════════════════════════════════╗\n ║ List ║\n ╚══════════════════════════════════════════════════╝*/\n\nol,\nul {\n padding-left: 2em;\n\n li {\n position: relative;\n\n &::before {\n display: block;\n position: absolute;\n left: calc(-2em + -5px);\n\n width: 2em;\n\n color: var(--color-primary-light);\n\n font-size: inherit;\n text-align: right;\n opacity: 0.8;\n }\n }\n\n &.reset {\n @extend %list-reset;\n }\n\n &.inline {\n @extend %list-reset;\n\n > li {\n display: inline-block;\n\n &:not(:last-child) {\n margin-right: 0.5em;\n }\n }\n }\n}\n\n// ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄\n// Normal list\n\nul {\n list-style-type: none;\n\n &.hash li::before {\n content: \"#\";\n }\n\n &.custom li::before {\n content: \"☛\";\n }\n\n li::before {\n left: calc(-2em + -8px);\n // opacity: .6;\n // line-height: 2;\n // font-size: calc(var(--text-base-size) - 0px);\n content: \"•\";\n }\n}\n\n// ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄\n// Counted list\n\nol {\n counter-reset: ListCounter;\n\n list-style-type: none;\n\n li::before {\n content: counters(ListCounter, \".\") \".\";\n\n counter-increment: ListCounter;\n }\n}\n\n// ┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄\n// List style\n\n%list-reset {\n padding: 0;\n\n list-style-type: none;\n\n li::before {\n display: none;\n }\n}\n","/*╔══════════════════════════════════════════════════╗\n ║ Meter ║\n ╚══════════════════════════════════════════════════╝*/\n\n/*{html}\n