1.que.ddimageortext .qtext {
2    margin-bottom: 0.5em;
3    display: block;
4}
5
6.que.ddimageortext div.ddarea,
7form.mform fieldset#id_previewareaheader div.ddarea {
8    text-align: center;
9}
10
11.que.ddimageortext div.droparea,
12form.mform fieldset#id_previewareaheader div.ddarea {
13    position: relative;
14}
15
16.que.ddimageortext div.droparea {
17    display: inline-block;
18}
19
20.que.ddimageortext div.droparea .draghome {
21    position: absolute;
22    cursor: move;
23    white-space: nowrap;
24}
25
26.que.ddimageortext div.droparea .dropzones {
27    position: absolute;
28    top: 0;
29    /*rtl:ignore*/
30    left: 0;
31}
32
33.que.ddimageortext .dropbackground,
34form.mform fieldset#id_previewareaheader .dropbackground {
35    border: 1px solid #000;
36    margin: 0 auto;
37}
38
39form.mform fieldset#id_previewareaheader .dropbackground {
40    max-width: none;
41}
42
43.que.ddimageortext .dropbackground.img-responsive.img-fluid {
44    width: 100%;
45}
46
47.que.ddimageortext .dropzone {
48    display: none;
49    position: absolute;
50    opacity: 0.5;
51    border: 1px solid black;
52}
53
54.que.ddimageortext .dropzone.active {
55    display: block;
56}
57
58.que.ddimageortext .dropzone:focus,
59.que.ddimageortext .droparea .draghome:focus,
60.que.ddimageortext .dropzone.valid-drag-over-drop,
61.que.ddimageortext .draghome.placed.valid-drag-over-drop {
62    border-color: #0a0;
63    box-shadow: 0 0 5px 5px rgba(255, 255, 150, 1);
64    outline: 0;
65}
66
67.que.ddimageortext .draghome,
68.que.ddimageortext .drag,
69form.mform fieldset#id_previewareaheader .droppreview {
70    border: 1px solid black;
71    display: inline-block;
72    font: 13px/1.231 arial, helvetica, clean, sans-serif;
73}
74
75.que.ddimageortext .draghomes .draghome {
76    vertical-align: top;
77    margin: 5px;
78    height: auto;
79    width: auto;
80    cursor: move;
81}
82
83.que.ddimageortext .draghomes.readonly .draghome,
84.que.ddimageortext .droparea.readonly .draghome {
85    cursor: auto;
86}
87
88.que.ddimageortext .draghomes .draghome.dragplaceholder {
89    display: none;
90}
91
92.que.ddimageortext .draghomes .draghome.dragplaceholder.active {
93    visibility: hidden;
94    display: inline-block;
95}
96
97.que.ddimageortext .dragitems,
98form.mform fieldset#id_previewareaheader .dragitems {
99    height: 0;
100}
101
102.que.ddimageortext .drag,
103form.mform fieldset#id_previewareaheader .droppreview {
104    position: absolute;
105    cursor: move;
106    white-space: nowrap;
107}
108
109.que.ddimageortext .dragitems.readonly .drag {
110    cursor: auto;
111}
112
113form.mform fieldset#id_previewareaheader .drag.beingdragged,
114.que.ddimageortext .drag.beingdragged,
115.que.ddimageortext .draghomes .draghome.beingdragged,
116.que.ddimageortext .droparea .draghome.beingdragged {
117    box-shadow: 3px 3px 4px #000;
118}
119
120.que.ddimageortext .draghomes .draghome.beingdragged,
121.que.ddimageortext .droparea .draghome.beingdragged {
122    position: absolute;
123}
124
125.que.ddimageortext .group1,
126form.mform fieldset#id_previewareaheader .group1 {
127    background-color: #fff;
128}
129
130.que.ddimageortext .group2,
131form.mform fieldset#id_previewareaheader .group2 {
132    background-color: #b0c4de;
133    border-radius: 10px 0 0 0;
134}
135
136.que.ddimageortext .group3,
137form.mform fieldset#id_previewareaheader .group3 {
138    background-color: #dcdcdc;
139    border-radius: 0 10px 0 0;
140}
141
142.que.ddimageortext .group4,
143form.mform fieldset#id_previewareaheader .group4 {
144    background-color: #d8bfd8;
145    border-radius: 0 0 10px 0;
146}
147
148.que.ddimageortext .group5,
149form.mform fieldset#id_previewareaheader .group5 {
150    background-color: #87cefa;
151    border-radius: 0 0 0 10px;
152}
153
154.que.ddimageortext .group6,
155form.mform fieldset#id_previewareaheader .group6 {
156    background-color: #daa520;
157    border-radius: 0 10px 10px 0;
158}
159
160.que.ddimageortext .group7,
161form.mform fieldset#id_previewareaheader .group7 {
162    background-color: #ffd700;
163    border-radius: 10px 0 0 10px;
164}
165
166.que.ddimageortext .group8,
167form.mform fieldset#id_previewareaheader .group8 {
168    background-color: #f0e68c;
169    border-radius: 10px 10px 10px 10px;
170}
171
172/* Editing form. Style repeated elements*/
173/*Top*/
174body#page-question-type-ddimageortext div[id^=fgroup_id_][id*=drags_] {
175    background: #eee;
176    margin-top: 0;
177    margin-bottom: 0;
178    padding-bottom: 5px;
179    padding-top: 5px;
180    border: 1px solid #bbb;
181    border-bottom: 0;
182}
183
184body#page-question-type-ddimageortext div[id^=fgroup_id_][id*=drags_] .fgrouplabel label {
185    font-weight: bold;
186}
187/* Middle */
188body#page-question-type-ddimageortext div[id^=fitem_id_][id*=dragitem_] {
189    background: #eee;
190    margin-bottom: 0;
191    margin-top: 0;
192    padding-bottom: 5px;
193    padding-top: 5px;
194    border: 1px solid #bbb;
195    border-top: 0;
196    border-bottom: 0;
197}
198/* Bottom */
199body#page-question-type-ddimageortext div[id^=fitem_id_][id*=draglabel_] {
200    background: #eee;
201    margin-bottom: 2em;
202    margin-top: 0;
203    padding-bottom: 5px;
204    padding-top: 5px;
205    border: 1px solid #bbb;
206    border-top: 0;
207}
208