1/* Color definitions */
2.dmn-js-parent {
3  --color-grey-225-10-15: hsl(225, 10%, 15%);
4  --color-grey-225-10-35: hsl(225, 10%, 35%);
5  --color-grey-225-10-55: hsl(225, 10%, 55%);
6  --color-grey-225-10-75: hsl(225, 10%, 75%);
7  --color-grey-225-10-80: hsl(225, 10%, 80%);
8  --color-grey-225-10-85: hsl(225, 10%, 85%);
9  --color-grey-225-10-90: hsl(225, 10%, 90%);
10  --color-grey-225-10-95: hsl(225, 10%, 95%);
11  --color-grey-225-10-97: hsl(225, 10%, 97%);
12  --color-blue-205-100-45: hsl(205, 100%, 45%);
13  --color-blue-205-100-45-opacity-30: hsla(205, 100%, 45%, 30%);
14  --color-blue-205-100-50: hsl(205, 100%, 50%);
15  --color-blue-205-100-80: hsl(205, 100%, 80%);
16  --color-blue-205-100-95: hsl(205, 100%, 95%);
17  --color-green-150-86-44: hsl(150, 86%, 44%);
18  --color-red-360-100-40: hsl(360, 100%, 40%);
19  --color-red-360-100-45: hsl(360, 100%, 45%);
20  --color-red-360-100-92: hsl(360, 100%, 92%);
21  --color-red-360-100-97: hsl(360, 100%, 97%);
22  --color-white: hsl(0, 0%, 100%);
23  --color-black: hsl(0, 0%, 0%);
24  --color-black-opacity-10: hsla(0, 0%, 0%, 10%);
25  --color-black-opacity-20: hsla(0, 0%, 0%, 20%);
26  --hint-button-color: var(--color-blue-205-100-50);
27  --hint-button-hover-color: var(--color-blue-205-100-45);
28  --hint-invalid-color: var(--color-red-360-100-45);
29  --separator-color: var(--color-grey-225-10-75);
30  --input-border-color: var(--color-grey-225-10-75);
31  --input-color: var(--color-grey-225-10-15);
32  --input-focus-border-color: var(--color-blue-205-100-50);
33  --input-focus-box-shadow-color: var(--color-blue-205-100-80);
34  --input-focus-box-shadow-inset-color: var(--color-grey-225-10-75);
35  --input-focus-invalid-border-color: var(--color-red-360-100-45);
36  --input-focus-invalid-box-shadow-color: var(--color-red-360-100-92);
37  --input-invalid-border-color: var(--color-red-360-100-45);
38  --input-invalid-color: var(--color-red-360-100-45);
39  --select-option-selected-color: var(--color-blue-205-100-45);
40  --select-option-hover-background-color: var(--color-black-opacity-10);
41  --select-options-background-color: var(--color-white);
42  --select-options-border-color: var(--color-grey-225-10-75);
43  --select-options-box-shadow-color: var(--color-black-opacity-10);
44  --select-options-color: var(--color-grey-225-10-15);
45}
46
47.dms-list-component .items {
48  margin: 0;
49  padding: 0;
50  list-style: none;
51  line-height: 1.7em;
52}
53
54.dms-list-component .items .item .remove {
55  float: right;
56}
57
58.dms-fill-row {
59  display: flex;
60  flex-direction: row;
61  align-items: center;
62}
63
64.dms-fill-row > * {
65  flex: 0 0 auto;
66}
67
68.dms-fill-row > :last-child {
69  flex: 1 1 auto;
70}
71
72.dms-label {
73  font-weight: bold;
74  white-space: nowrap;
75  margin-right: 5px;
76}
77
78.dms-hrule {
79  border: 0;
80  border-top: dotted 1px var(--separator-color);
81  margin: 10px auto;
82}
83
84.dms-heading {
85  margin: 12px 0 8px;
86  font-weight: bold;
87}
88
89.dms-hint {
90  font-size: 12px;
91  margin-top: 5px;
92  color: var(--hint-color);
93}
94
95.dms-hint button {
96  color: var(--hint-button-color);
97  text-decoration: none;
98  display: inline;
99  border: none;
100  padding: 0;
101  margin: 0;
102  cursor: pointer;
103  font: inherit;
104  background: none;
105}
106
107.dms-hint button:hover {
108  color: var(--hint-button-hover-color);
109}
110
111.dms-validation-warning {
112  color: var(--hint-invalid-color);
113}
114
115h3.dms-heading {
116  font-size: 16px;
117}
118
119h4.dms-heading {
120  font-size: 14px;
121}
122
123.dms-input,
124.dms-select {
125  outline: none;
126  padding: 3px 6px;
127  border: 1px solid var(--input-border-color);
128  background: none;
129  font-size: 14px;
130  font-family: inherit;
131  color: var(--input-color);
132  min-height: 26px;
133}
134
135.dms-input {
136  min-height: 26px;
137  white-space: pre-wrap;
138}
139
140.dms-select {
141  height: 26px;
142}
143
144.dms-input-select .dms-input {
145  padding-right: 24px;
146}
147
148.dms-input:focus,
149.dms-select:focus {
150  border: solid 1px var(--input-focus-border-color);
151  box-shadow: 0 0 0 2px var(--input-focus-box-shadow-color), 0 0 0 1px var(--input-focus-box-shadow-inset-color) inset;
152}
153
154.dms-input.invalid,
155.dms-select.invalid {
156  border-color: var(--input-invalid-border-color);
157  color: var(--input-invalid-color);
158}
159
160.dms-select.invalid:focus,
161.dms-input.invalid:focus {
162  border: solid 1px var(--input-focus-invalid-border-color);
163  box-shadow: 0 0 0 2px var(--input-focus-invalid-box-shadow-color), 0 0 0 1px var(--input-focus-box-shadow-inset-color) inset;
164}
165
166.dms-validated-input.dms-block .dms-input,
167.dms-block {
168  display: block;
169  width: 100%;
170}
171
172.dms-script-input {
173  height: 150px;
174  white-space: pre-wrap;
175  overflow: auto;
176}
177
178.dms-input-select {
179  display: inline-block;
180  position: relative;
181  min-width: 128px;
182}
183
184.dms-input-select .dms-input-select-icon {
185  position: absolute;
186  right: 6px;
187  top: 50%;
188  transform: translateY(-50%);
189}
190
191.dms-input-select .options {
192  background: var(--select-options-background-color);
193}
194
195.dms-select-options {
196  position: absolute;
197  background-color: var(--select-options-background-color);
198  border: solid 1px var(--select-options-border-color);
199  border-radius: 2px;
200  font-size: 14px;
201  color: var(--select-options-color);
202  box-shadow: 1px 1px 1px 1px var(--select-options-box-shadow-color);
203  z-index: 20;
204  cursor: pointer;
205  overflow: auto;
206}
207
208.dms-select-options .option {
209  padding: 4px 9px 4px 9px;
210}
211
212.dms-select-options .option.active {
213  color: var(--select-option-selected-color);
214}
215
216.dms-select-options .option:focus,
217.dms-select-options .option:hover {
218  background-color: var(--select-option-hover-background-color);
219}
220
221.dmn-js-parent .content-editable--with-placeholder::before {
222  content: attr(data-placeholder);
223  position: absolute;
224  opacity: 0.5;
225}
226