:root { --color-img-diameter: 30px; }
html,
body { margin: 0; -webkit-overflow-scrolling: touch !important; overflow: auto !important; width: 100%; height: 100%; background-color: #F8F8F8; }
.configurator-view { }
.configurator-node { margin-left: 0px; padding: 2px 0px; }
.configurator-node .configurator-node { margin-left: 15px; }
.configurator-node-label { display: flex; flex-direction: row; }
.configurator-node-label-text { color: #444; }
.action-selected .configurator-node-label-text { color: #000; }
[data-action-type] > .configurator-node-label-text { color: #444; }
.node-menu,
.node-checked,
.node-unchecked { margin-right: 5px; }
.node-checked { color: rgb(90, 190, 100, 0.9); }
.node-menu,
.node-unchecked { color: rgb(200, 200, 200); }
.configurator-node-label > .node-checked { display: none; }
.configurator-node-label > .node-unchecked { display: block; }
.action-selected > .node-unchecked { display: none; }
.action-selected > .node-checked { display: block; }
.header { background-color: rgb(246, 246, 246); position: fixed; height: 45px; margin: 0px; inset: 0px 0px auto; width: auto; }
.top-panel { display: flex; align-items: center; width: 100%; height: 45px; background-color: #F6F6F6; border-bottom: solid 1px #CCCCCC; }
.top-panel-logo { width: 85px; }
.top-panel-logo > img { height: 30px; margin-left: 5px; margin-top: 5px; }
.top-panel-title { width: 100%; padding-top: 3px; font-family: Montserrat; color: #555555; font-size: 20px; font-weight: 300; text-align: center; text-transform: uppercase; vertical-align: middle; }
.configurator-main { display: flex; margin-top: 45px; }
.configurator-viewer { height: calc(100vh - 54px); width: calc(100vh - 54px); background: linear-gradient(to bottom, #FFFFFF, #FCFCFC 50%, #E7E7E7 80%, #E4E4E4 100%); }
.configurator-panel { width: calc(100vw - 100vh + 46px); max-height: calc(100vh - 54px); overflow-y: auto; padding-left: 5px; padding-top: 5px; border-left: solid 1px #CCCCCC; }
.configurator-container { padding-left: 5px; padding-bottom: 5px; }
.configurator-show-after-init { display: none; }
.configurator-container-label { font-size: 20px; text-transform: uppercase; }
.configurator-container-items { padding-left: 5px; }
.configurator-container-items.items-flex-row { display: flex; flex-direction: row; flex-wrap: wrap; align-content: flex-start; justify-content: space-around; align-items: flex-start; margin: 10px 0; }
.configurator-container-items.items-flex-start { justify-content: flex-start; }
.configurator-item { }
.item-button { border: solid 1px #CCC; border-radius: 5px; margin: 5px; padding: 5px 10px; background-color: rgb(200, 200, 200); }
.item-button.action-selected { border: solid 2px rgb(200, 0, 0); padding: 4px 8px; }
.item-button-round { outline: 2px solid white; border: 3px solid rgb(200, 0, 0, 0); }
.item-button-color-img { height: var(--color-img-diameter); min-width: var(--color-img-diameter); aspect-ratio: 1; background-color: rgb(200, 200, 200); border-radius: 85px; -webkit-box-shadow: 0px 7px 22px -6px rgba(0, 0, 0, 0.42); box-shadow: 0px 7px 22px -6px rgba(0, 0, 0, 0.42); display: inline-block;
background-size: 110%; background-position: center; margin: 5px; background-color: rgb(128, 128, 128); }
.item-button-round.action-selected { outline: 2px solid rgb(200, 0, 0); border: 3px solid white; }
.configurator-item-label { font-size: 20px; }
.configurator-item-containers { padding-left: 5px; }
.action-init { display: none; }
[data-action-path] { cursor: pointer; width: fit-content; }
[data-action-path='ALL'] { display: none; }
.action-selected { text-decoration: underline; }
.configurator-tree .action-selected { text-decoration: none; }
.action-level-1 { font-size: 20px; text-transform: uppercase; }
.action-level-2 { font-size: 18px; }
.action-level-3 { font-size: 16px; }
.debug-info { font-family: monospace; font-size: 12px; display: none; }