1/* --- Dashboard Layout --- */
  2
  3.home-widgets-container {
  4    margin-left: -7px;
  5    margin-right: -7px;
  6}
  7
  8.home-widgets-container:after {
  9  content: '';
 10  display: block;
 11  clear: both;
 12}
 13
 14.dashboard-panel-sizer,
 15.dashboard-panel-item {
 16  width: 33.3%;
 17  padding-left: 7px;
 18  padding-right: 7px;
 19}
 20
 21.dashboard-panel-item {
 22  float: left;
 23}
 24
 25.dashboard-panel-item-columns-2 {
 26    width: 66.6%;
 27}
 28.dashboard-panel-item-columns-3 {
 29    width: 100%;
 30}
 31
 32.dashboard-panel-item .panel {
 33    border: 0;
 34    margin-bottom: 14px;
 35}
 36.dashboard-panel-item .panel-heading {
 37    cursor: move;
 38    margin: 0;
 39    padding: 10px 15px;
 40    background-color: #fff;
 41    border: 0;
 42}
 43.dashboard-panel-item .panel-heading .panel-title {
 44    cursor: move;
 45    color: #275f96;
 46    font-size: 13px;
 47    font-weight: 600;
 48}
 49.dashboard-panel-item .panel-body {
 50    padding: 0;
 51    border-top: 1px solid #eee;
 52    overflow: hidden;
 53}
 54.dashboard-panel-item .panel-body.panel-loading {
 55    opacity: 0.4;
 56}
 57.dashboard-panel-item .widget-content-padded {
 58    padding: 20px;
 59    max-height: 300px;
 60    overflow: auto;
 61}
 62
 63.dashboard-panel-item .widget-tools {
 64    float: right;
 65    margin: -3px -3px 0 0;
 66}
 67.dashboard-panel-item .widget-tools a {
 68    color: #ccc;
 69}
 70.dashboard-panel-item .widget-tools i {
 71    padding: 0 3px;
 72}
 73.dashboard-panel-item .widget-tools i:hover {
 74    color: #888;
 75}
 76
 77.widget-settings {
 78    margin-top: -41px;
 79    cursor: pointer;
 80}
 81.widget-settings .btn {
 82    padding: 2px 5px;
 83    font-size: 1.6em;
 84    line-height: 1em;
 85    color: #bbb;
 86}
 87.widget-settings .btn:active,
 88.widget-settings .btn:focus,
 89.widget-settings .btn:hover {
 90    color: #666;
 91    outline: none;
 92}
 93
 94.widget-settings .dropdown-menu {
 95    margin: 0 -5px 0 0;
 96    padding: 5px 0;
 97    width: 200px;
 98    font-size: 0.95em;
 99    background-color: #fff;
100    color: #444;
101}
102.widget-settings li {
103    margin: 0;
104    padding: 0;
105    border-bottom: 1px solid #fff;
106}
107.widget-settings li.active {
108    background-color: #f8f8f8;
109}
110.widget-settings h4 {
111    padding: 0 7px 3px 7px;
112    font-size: 1.2em;
113    text-align: center;
114}
115.widget-settings .checkbox-inline {
116    display: block;
117    padding: 3px 12px;
118}
119.widget-settings  .icheckbox_flat-blue {
120    margin-right: 2px;
121}
122
123/* --- Text Colors --- */
124
125.color-blue {
126    color: #6ecacc;
127}
128.color-grey {
129    color: #959595;
130}
131.color-purple {
132    color: #af5dd5;
133}
134.color-green {
135    color: #5dc560;
136}
137.color-orange {
138    color: #eaae53;
139}
140.color-pink {
141    color: #ea5395;
142}
143.color-cyan {
144    color: #63cfd2;
145}
146
147/* --- Icon Stats --- */
148
149.icon-stats {
150    padding: 20px;
151    font-size: 0.9em;
152}
153.icon-stats a,
154.icon-stats a:hover,
155.icon-stats a:active {
156    color: inherit;
157    text-decoration: none;
158}
159.icon-stats .item {
160    clear: both;
161}
162.icon-stats .icon-holder {
163    float: left;
164    font-size: 36px;
165}
166.icon-stats .data {
167    margin-left: 50px;
168}
169.icon-stats .data div {
170    white-space: nowrap;
171    overflow: hidden;
172}
173.icon-stats .number {
174    font-size: 20px;
175}
176.icon-stats .unit {
177    font-size: 15px;
178    color: #888;
179}
180
181/* --- Activity Widget --- */
182
183.widget-activity .widget-content-padded {
184    padding: 10px 20px;
185    font-size: 0.9em;
186}
187.widget-activity .feed-element {
188    padding: 10px 0;
189    border-bottom: 1px solid #eee;
190}
191.widget-activity .feed-element:last-child {
192    border: 0;
193}
194
195/* --- Automation Widget --- */
196
197.widget-automation {
198    font-weight: 300;
199}
200.widget-automation .col-sm-6 {
201    padding-top: 10px;
202    padding-bottom: 10px;
203    border-bottom: 1px solid #eee;
204}
205.widget-automation .mini-chart {
206    margin-top: 5px;
207    text-align: center;
208}
209.widget-automation h4 {
210    margin: 0;
211}
212.widget-automation h4 .title-text {
213    display: block;
214    margin-top: 2px;
215    font-size: 13px;
216    color: #a2a6af;
217    font-weight: 300;
218    text-align: center;
219}
220.widget-automation p {
221    margin: 0;
222    font-size: 1.6em;
223    font-weight: 400;
224    text-align: center;
225}
226.widget-automation .text-footer {
227    text-align: left;
228    font-size: 12px;
229    margin: 5px 10px;
230    color: #999;
231}
232
233/* --- Badges --- */
234
235.home-status-badge-row {
236    margin-left: -7px;
237    margin-right: -7px;
238    margin-bottom: 10px;
239}
240.home-status-badge-row div[class^="col-sm-"] {
241    padding-left: 7px;
242    padding-right: 7px;
243}
244.health-status-block .icon a,
245.health-status-block .icon a:hover,
246.health-status-block .detail a,
247.health-status-block .detail a:hover {
248    display: block;
249    color: #fff;
250    text-decoration: none;
251}
252.status-badge-green {
253    background-color: #5dc560;
254}
255.status-badge-green .icon {
256    background-color: #49a94d;
257}
258.status-badge-orange {
259    background-color: #eaae53;
260}
261.status-badge-orange .icon {
262    background-color: #d28818;
263}
264.status-badge-pink {
265    background-color: #ea5395;
266}
267.status-badge-pink .icon {
268    background-color: #d61a6c;
269}
270.status-badge-cyan {
271    background-color: #8dd5d9;
272}
273.status-badge-cyan .icon {
274    background-color: #68b1b5;
275}
276
277/* --- Billing Widget --- */
278
279.widget-billing .row,
280.widget-stripe .row {
281    margin: 0;
282}
283.widget-billing .bordered-right,
284.widget-stripe .bordered-right {
285    border-right: 1px solid #eee;
286}
287.widget-billing .bordered-top,
288.widget-stripe .bordered-top {
289    border-top: 1px solid #eee;
290}
291.widget-billing .item,
292.widget-stripe .item {
293    padding: 13px 0;
294    white-space: nowrap;
295    overflow: hidden;
296}
297.widget-billing .item .data,
298.widget-stripe .item .data {
299    display: block;
300    font-size: 1.8em;
301}
302.widget-billing .item .note,
303.widget-stripe .item .note {
304    font-size: 0.9em;
305    color: #a2a6af;
306}
307
308.widget-billing .error,
309.widget-stripe .error {
310    margin: 5px 0;
311    font-size: 0.9em;
312    color: #a2a6af;
313}
314
315@media only screen and (max-width: 767px) {
316    .widget-billing .bordered-right,
317    .widget-billing .bordered-top,
318    .widget-stripe .bordered-right,
319    .widget-stripe .bordered-top {
320        border-right: 0;
321        border-top: 0;
322    }
323    .widget-billing .col-sm-6,
324    .widget-stripe .col-sm-6 {
325        border-bottom: 1px solid #eee;
326    }
327    .widget-billing .col-sm-6:last-child,
328    .widget-stripe .col-sm-6:last-child {
329        border: 0;
330    }
331}
332
333/* --- Health Widget --- */
334
335.widget-health .progress {
336    margin-top: 7px;
337}
338.widget-health .item .icon-holder {
339    margin-top: -8px;
340    font-size: 42px;
341}
342
343/* --- Network Status Widget --- */
344
345.widget-networkstatus .item {
346    padding-top: 15px;
347    padding-bottom: 15px;
348    position: relative;
349    border-bottom: 1px solid #f3f3f3;
350    overflow: hidden;
351}
352.widget-networkstatus .item:first-child {
353    padding-top: 0;
354}
355.widget-networkstatus .item:last-child {
356    border: 0;
357    padding-bottom: 0;
358}
359.widget-networkstatus .name {
360    font-size: 16px;
361    float: left;
362    width: 30%;
363    color: #616670;
364    vertical-align: middle;
365}
366.widget-networkstatus .note {
367    font-size: 12px;
368    color: #a2a6af;
369}
370.widget-networkstatus .name .data,
371.widget-networkstatus .name .note {
372    max-width: 200px;
373    white-space: nowrap;
374    overflow: hidden;
375    text-overflow: ellipsis;
376}
377.widget-networkstatus .stats {
378    float: left;
379    width: 70%;
380    overflow: hidden;
381}
382.widget-networkstatus .status,
383.widget-networkstatus .uptime,
384.widget-networkstatus .load {
385    float: left;
386    display: inline-block;
387    padding: 0 15px;
388    width: 33.33%;
389}
390
391/* --- Overview Widget --- */
392
393.btn-period-chooser {
394    float: right;
395}
396.btn-period-chooser .btn {
397    padding: 3px 10px;
398    color: #999;
399}
400.btn-period-chooser .btn.active {
401    color: #444;
402    font-weight: 600;
403    box-shadow: none;
404    border-color: #ccc;
405}
406.btn-period-chooser .btn:focus,
407.btn-period-chooser .btn:active:focus,
408.btn-period-chooser .btn.active:focus,
409.btn-period-chooser .btn.focus,
410.btn-period-chooser .btn:active.focus,
411.btn-period-chooser .btn.active.focus {
412  outline: none;
413}
414.btn-period-chooser .btn:active,
415.btn-period-chooser .btn.active {
416  background-image: none;
417  outline: 0;
418  -webkit-box-shadow: none;
419          box-shadow: none;
420}
421
422/* --- Staff Widget --- */
423
424.widget-staff-container {
425    padding: 10px 0;
426}
427.widget-staff-container .staff {
428    padding: 10px 20px;
429    width: 25%;
430    min-width: 130px;
431    float: left;
432    text-align: center;
433    white-space: nowrap;
434    overflow: hidden;
435    text-overflow: ellipsis;
436}
437.widget-staff-container .staff img {
438    padding-bottom: 4px;
439}
440.widget-staff-container .staff .name {
441    font-size: 0.9em;
442    font-weight: bold;
443}
444.widget-staff-container .staff .note {
445    font-size: 0.85em;
446    color: #a2a6af;
447}
448
449/* --- Support Widget --- */
450
451.widget-support .tickets-list {
452    margin:0 20px 12px;
453    font-size: 0.9em;
454}
455.widget-support .tickets-list .ticket {
456    padding: 5px 8px;
457    white-space: nowrap;
458    overflow: hidden;
459    text-overflow: ellipsis;
460}
461.widget-support .tickets-list .ticket:nth-child(even) {
462    background-color: #f8f8f8;
463}
464
465.widget-support .footer {
466    margin: 20px 0 0 0;
467    padding: 6px 12px 3px 12px;
468    border-top: 1px solid #eee;
469    text-align: center;
470    font-size: 12px;
471    margin: 5px 10px;
472    color: #999;
473}
474.widget-support .footer a {
475    text-decoration: underline;
476    padding: 0 6px;
477}
478
479/* --- Client Activity Widget --- */
480
481.widget-clientactivity .clients-list {
482    margin:0 20px 20px 20px;
483    font-size: 0.9em;
484    max-height: 150px;
485    overflow: auto;
486}
487.widget-clientactivity .client {
488    padding: 5px 8px;
489    white-space: nowrap;
490    overflow: hidden;
491    text-overflow: ellipsis;
492}
493.widget-clientactivity .client:nth-child(even) {
494    background-color: #f8f8f8;
495}
496.widget-clientactivity .last-login {
497    float: right;
498    color: #959595;
499    font-size: 0.9em;
500}
501.widget-clientactivity .ip-address {
502    display: block;
503    font-style: italic;
504    color: #63cfd2;
505    font-size: 0.9em;
506}
507
508/* --- MarketConnect Widget --- */
509
510.widget-marketconnect h4 {
511    margin: 0 0 2px 0;
512    font-size: 16px;
513    color: #455;
514}
515.widget-marketconnect .selling-status {
516    margin: 10px 0 7px;
517    padding: 2px;
518    text-align: center;
519    font-size: 0.85em;
520    color: #666;
521    white-space: nowrap;
522    overflow: auto;
523}
524.widget-marketconnect .selling-status .service {
525    display: inline-block;
526    margin: 10px 0;
527    width: 120px;
528    min-width: 90px;
529    max-width: 200px;
530}
531@media (min-width: 1650px) {
532    .widget-marketconnect .selling-status .service {
533        width: 25%;
534    }
535}
536.widget-marketconnect .selling-status img {
537    display: block;
538    margin: 5px auto;
539    max-height: 50px;
540}
541.widget-marketconnect .selling-status span.title {
542    display: block;
543    margin: 0 0 5px 0;
544}
545.widget-marketconnect .selling-status span.label {
546    padding: 2px 8px;
547    font-size: 0.7em;
548}
549.widget-marketconnect .selling-status .not-selling img {
550    opacity: 0.3;
551}
552.widget-marketconnect .selling-status .not-selling .title {
553    color: #ccc;
554}
555.widget-marketconnect .btn-manage {
556    margin: -2px 5px 0 0;
557    padding: 2px 24px;
558    font-size: 12px;
559    border-radius: 3px;
560}
561.widget-marketconnect .btn-deposit,
562.widget-marketconnect .btn-promo {
563    padding: 2px 10px;
564    color: #444;
565    font-size: 12px;
566    border-radius: 3px;
567}
568.widget-marketconnect .btn-promo {
569    margin-top: 3px;
570}
571.widget-marketconnect .balance-wrapper {
572    margin: 5px 0 0 0;
573    padding: 15px 10px 0 10px;
574    border-top: 1px solid #ddd;
575}
576.widget-marketconnect .promo-wrapper {
577    text-align: center;
578    color: #666;
579}
580.widget-marketconnect .balance-wrapper small {
581    display: block;
582    font-size: 0.75em;
583}
584
585/* Packery */
586.packery-drop-placeholder {
587    outline: 3px dashed #999;
588    outline-offset: -6px;
589    /* transition position changing */
590    -webkit-transition: -webkit-transform 0.2s;
591    transition: transform 0.2s;
592}
593
594@media (max-width: 950px) {
595    .dashboard-panel-sizer,
596    .dashboard-panel-item {
597        width: 100%;
598        padding-left: 7px;
599        padding-right: 7px;
600    }
601    .dashboard-panel-item-columns-2 {
602        width: 100%;
603    }
604    .dashboard-panel-item-columns-3 {
605        width: 100%;
606    }
607}
608