1.bjs-container { 2 --bjs-font-family: Arial, sans-serif; 3 4 --color-grey-225-10-15: hsl(225, 10%, 15%); 5 --color-grey-225-10-35: hsl(225, 10%, 35%); 6 --color-grey-225-10-55: hsl(225, 10%, 55%); 7 --color-grey-225-10-75: hsl(225, 10%, 75%); 8 --color-grey-225-10-80: hsl(225, 10%, 80%); 9 --color-grey-225-10-85: hsl(225, 10%, 85%); 10 --color-grey-225-10-90: hsl(225, 10%, 90%); 11 --color-grey-225-10-95: hsl(225, 10%, 95%); 12 --color-grey-225-10-97: hsl(225, 10%, 97%); 13 14 --color-blue-205-100-45: hsl(205, 100%, 45%); 15 --color-blue-205-100-45-opacity-30: hsla(205, 100%, 45%, 30%); 16 --color-blue-205-100-50: hsl(205, 100%, 50%); 17 --color-blue-205-100-95: hsl(205, 100%, 95%); 18 19 --color-green-150-86-44: hsl(150, 86%, 44%); 20 21 --color-red-360-100-40: hsl(360, 100%, 40%); 22 --color-red-360-100-45: hsl(360, 100%, 45%); 23 --color-red-360-100-92: hsl(360, 100%, 92%); 24 --color-red-360-100-97: hsl(360, 100%, 97%); 25 26 --color-white: hsl(0, 0%, 100%); 27 --color-black: hsl(0, 0%, 0%); 28 --color-black-opacity-05: hsla(0, 0%, 0%, 5%); 29 --color-black-opacity-10: hsla(0, 0%, 0%, 10%); 30 31 --breadcrumbs-font-family: var(--bjs-font-family); 32 --breadcrumbs-item-color: var(--color-blue-205-100-50); 33 --breadcrumbs-arrow-color: var(--color-black); 34 --drilldown-fill-color: var(--color-white); 35 --drilldown-background-color: var(--color-blue-205-100-50); 36} 37 38.bjs-breadcrumbs { 39 position: absolute; 40 display: none; 41 flex-wrap: wrap; 42 align-items: center; 43 top: 30px; 44 left: 30px; 45 padding: 0px; 46 margin: 0px; 47 font-family: var(--breadcrumbs-font-family); 48 font-size: 16px; 49 line-height: normal; 50} 51 52.bjs-breadcrumbs-shown .bjs-breadcrumbs { 53 display: flex; 54} 55 56.djs-palette-shown .bjs-breadcrumbs { 57 left: 90px; 58} 59 60.djs-palette-shown.djs-palette-two-column .bjs-breadcrumbs { 61 left: 140px; 62} 63 64.bjs-breadcrumbs li { 65 display: inline-flex; 66 padding-bottom: 5px; 67} 68 69.bjs-breadcrumbs li a { 70 cursor: pointer; 71 color: var(--breadcrumbs-item-color); 72} 73 74.bjs-breadcrumbs li:last-of-type a { 75 color: inherit; 76 cursor: default; 77} 78 79.bjs-breadcrumbs li:not(:first-child)::before { 80 content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" /><path d="M0 0h24v24H0z" fill="none" /></svg>'); 81 padding: 0 8px; 82 color: var(--breadcrumbs-arrow-color); 83 height: 1em; 84} 85 86.bjs-breadcrumbs .bjs-crumb { 87 display: inline-block; 88 max-width: 200px; 89 overflow: hidden; 90 text-overflow: ellipsis; 91 white-space: nowrap; 92} 93 94.bjs-drilldown { 95 width: 20px; 96 height: 20px; 97 98 padding: 0px; 99 margin-left: -20px; 100 101 cursor: pointer; 102 border: none; 103 border-radius: 2px; 104 outline: none; 105 106 fill: var(--drilldown-fill-color); 107 background-color: var(--drilldown-background-color); 108} 109 110.bjs-drilldown-empty { 111 display: none; 112} 113 114.selected .bjs-drilldown-empty { 115 display: inherit; 116} 117 118[data-popup="align-elements"] .djs-popup-results { 119 display: flex; 120} 121 122[data-popup="align-elements"] .djs-popup-body [data-group] + [data-group] { 123 border-left: 1px solid var(--popup-border-color); 124} 125 126[data-popup="align-elements"] [data-group="align"] { 127 display: grid; 128 grid-template-columns: repeat(3, 1fr); 129} 130 131[data-popup="align-elements"] .djs-popup-body .entry { 132 padding: 6px 8px; 133} 134 135[data-popup="align-elements"] .djs-popup-body .entry:not(:first-child) { 136 margin-top: 0; 137} 138 139[data-popup="align-elements"] .djs-popup-entry-icon { 140 display: block; 141 margin: 0; 142 height: 20px; 143 width: 20px; 144} 145