Subversion Repositories Integrator Subversion

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
106 espaco 1 
/* Common */
2 
/* Headers */
3 
/* Contents */
4 
/* Forms */
5 
/* List Items */
6 
/* Messages */
7 
/* Horizontal Menu */
8 
/* Predefined Colors */
9 
/* open-sans-300 - latin */
10 
@font-face {
11 
  font-family: 'Open Sans';
12 
  font-style: normal;
13 
  font-weight: 300;
14 
  src: url("#{resource['poseidon-layout:fonts/open-sans-v13-latin-300.eot']}");
15 
  /* IE9 Compat Modes */
16 
  src: local("Open Sans Light"), local("OpenSans-Light"), url("#{resource['poseidon-layout:fonts/open-sans-v13-latin-300.eot']}?#iefix") format("embedded-opentype"), url("#{resource['poseidon-layout:fonts/open-sans-v13-latin-300.woff2']}") format("woff2"), url("#{resource['poseidon-layout:fonts/open-sans-v13-latin-300.woff']}") format("woff"), url("#{resource['poseidon-layout:fonts/open-sans-v13-latin-300.ttf']}") format("truetype"), url("#{resource['poseidon-layout:fonts/open-sans-v13-latin-300.svg']}#OpenSans") format("svg");
17 
  /* Legacy iOS */ }
18 
/* open-sans-regular - latin */
19 
@font-face {
20 
  font-family: 'Open Sans';
21 
  font-style: normal;
22 
  font-weight: 400;
23 
  src: url("#{resource['poseidon-layout:fonts/open-sans-v13-latin-regular.eot']}");
24 
  /* IE9 Compat Modes */
25 
  src: local("Open Sans"), local("OpenSans"), url("#{resource['poseidon-layout:fonts/open-sans-v13-latin-regular.eot']}#iefix") format("embedded-opentype"), url("#{resource['poseidon-layout:fonts/open-sans-v13-latin-regular.woff2']}") format("woff2"), url("#{resource['poseidon-layout:fonts/open-sans-v13-latin-regular.woff']}") format("woff"), url("#{resource['poseidon-layout:fonts/open-sans-v13-latin-regular.ttf']}") format("truetype"), url("#{resource['poseidon-layout:fonts/open-sans-v13-latin-regular.svg']}#OpenSans") format("svg");
26 
  /* Legacy iOS */ }
27 
/* open-sans-700 - latin */
28 
@font-face {
29 
  font-family: 'Open Sans';
30 
  font-style: normal;
31 
  font-weight: 700;
32 
  src: url("#{resource['poseidon-layout:fonts/open-sans-v13-latin-700.eot']}");
33 
  /* IE9 Compat Modes */
34 
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url("#{resource['poseidon-layout:fonts/open-sans-v13-latin-700.eot']}#iefix") format("embedded-opentype"), url("#{resource['poseidon-layout:fonts/open-sans-v13-latin-700.woff2']}") format("woff2"), url("#{resource['poseidon-layout:fonts/open-sans-v13-latin-700.woff']}") format("woff"), url("#{resource['poseidon-layout:fonts/open-sans-v13-latin-700.ttf']}") format("truetype"), url("#{resource['poseidon-layout:fonts/open-sans-v13-latin-700.svg']}#OpenSans") format("svg");
35 
  /* Legacy iOS */ }
36 
/* Utils */
37 
.clearfix:after {
38 
  content: " ";
39 
  display: block;
40 
  clear: both; }
41 
 
42 
.card {
43 
  -moz-border-radius: 2px;
44 
  -webkit-border-radius: 2px;
45 
  border-radius: 2px;
46 
  background: #ffffff;
47 
  padding: 16px;
48 
  box-sizing: border-box;
49 
  margin-bottom: 16px; }
50 
  .card.card-w-title {
51 
    padding-bottom: 32px; }
52 
  .card h1 {
53 
    font-size: 24px;
54 
    font-weight: 400;
55 
    margin: 24px 0; }
56 
    .card h1:first-child {
57 
      margin-top: 16px; }
58 
  .card h2 {
59 
    font-size: 22px;
60 
    font-weight: 400; }
61 
  .card h3 {
62 
    font-size: 20px;
63 
    font-weight: 400; }
64 
  .card h4 {
65 
    font-size: 18px;
66 
    font-weight: 400; }
67 
 
68 
.nopad {
69 
  padding: 0; }
70 
  .nopad .ui-panel-content {
71 
    padding: 0; }
72 
 
73 
@-webkit-keyframes fadeInDown {
74 
  from {
75 
    opacity: 0;
76 
    -webkit-transform: translate3d(0, -20px, 0);
77 
    transform: translate3d(0, -20px, 0); }
78 
  to {
79 
    opacity: 1;
80 
    -webkit-transform: none;
81 
    transform: none; } }
82 
@keyframes fadeInDown {
83 
  from {
84 
    opacity: 0;
85 
    transform: translate3d(0, -20px, 0); }
86 
  to {
87 
    opacity: 1;
88 
    transform: none; } }
89 
@-webkit-keyframes fadeOutUp {
90 
  from {
91 
    opacity: 1; }
92 
  to {
93 
    opacity: 0;
94 
    -webkit-transform: translate3d(0, -20px, 0);
95 
    transform: translate3d(0, -20px, 0); } }
96 
@keyframes fadeOutUp {
97 
  from {
98 
    opacity: 1; }
99 
  to {
100 
    opacity: 0;
101 
    -webkit-transform: translate3d(0, -20px, 0);
102 
    transform: translate3d(0, -20px, 0); } }
103 
.ui-shadow-1 {
104 
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
105 
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
106 
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); }
107 
 
108 
.ui-shadow-2 {
109 
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
110 
  -moz-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
111 
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); }
112 
 
113 
.ui-shadow-3 {
114 
  -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
115 
  -moz-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
116 
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); }
117 
 
118 
.ui-shadow-4 {
119 
  -webkit-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
120 
  -moz-box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
121 
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22); }
122 
 
123 
.ui-shadow-5 {
124 
  -webkit-box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
125 
  -moz-box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
126 
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22); }
127 
 
128 
.ui-g.form-group > div {
129 
  padding: 8px; }
130 
 
131 
.ui-panelgrid.form-group .ui-panelgrid-cell {
132 
  padding: 8px; }
133 
.ui-panelgrid.ui-panelgrid-blank .ui-grid-responsive .ui-grid-row {
134 
  border: 0 none; }
135 
 
136 
.ui-selectoneradio.form-group .ui-grid-row > div, .ui-selectmanycheckbox.form-group .ui-grid-row > div {
137 
  padding: 8px; }
138 
 
139 
.dashboard .card {
140 
  height: 100%; }
141 
.dashboard .overview-box {
142 
  padding: 0 !important;
143 
  text-align: center;
144 
  overflow: hidden;
145 
  margin-bottom: 0px !important; }
146 
  .dashboard .overview-box i {
147 
    font-size: 48px;
148 
    margin-top: 20px;
149 
    color: #ffffff; }
150 
  .dashboard .overview-box .overview-box-name {
151 
    font-size: 20px;
152 
    display: inline-block;
153 
    width: 100%;
154 
    margin: 4px 0 10px 0;
155 
    color: #ffffff; }
156 
  .dashboard .overview-box .overview-box-count {
157 
    color: #ffffff;
158 
    font-size: 36px; }
159 
  .dashboard .overview-box > div:last-child {
160 
    text-align: left; }
161 
  .dashboard .overview-box.overview-box-1 {
162 
    background-color: #00acac; }
163 
  .dashboard .overview-box.overview-box-2 {
164 
    background-color: #2f8ee5; }
165 
  .dashboard .overview-box.overview-box-3 {
166 
    background-color: #6c76af; }
167 
  .dashboard .overview-box.overview-box-4 {
168 
    background-color: #efa64c; }
169 
.dashboard .task-list {
170 
  overflow: hidden; }
171 
  .dashboard .task-list > .ui-panel {
172 
    min-height: 340px; }
173 
  .dashboard .task-list .ui-panel-content {
174 
    padding: 10px 0 !important; }
175 
  .dashboard .task-list ul {
176 
    list-style-type: none;
177 
    margin: 0;
178 
    padding: 0; }
179 
    .dashboard .task-list ul li {
180 
      padding: 8px 16px;
181 
      border-bottom: 1px solid #c9cdd2; }
182 
      .dashboard .task-list ul li:first-child {
183 
        margin-top: 10px; }
184 
    .dashboard .task-list ul .ui-chkbox {
185 
      vertical-align: middle;
186 
      margin-right: 5px; }
187 
    .dashboard .task-list ul .task-name {
188 
      vertical-align: middle; }
189 
    .dashboard .task-list ul i {
190 
      color: #778087;
191 
      float: right;
192 
      font-size: 16px;
193 
      margin-top: 5px; }
194 
.dashboard .contact-form {
195 
  overflow: hidden; }
196 
  .dashboard .contact-form .ui-panel {
197 
    min-height: 340px; }
198 
  .dashboard .contact-form .ui-g-12 {
199 
    padding: 16px 10px; }
200 
  .dashboard .contact-form .ui-button {
201 
    margin-top: 20px; }
202 
.dashboard .contacts {
203 
  overflow: hidden; }
204 
  .dashboard .contacts > .ui-panel {
205 
    min-height: 340px; }
206 
  .dashboard .contacts .ui-panel-content {
207 
    padding: 15px 0 10px 0 !important; }
208 
  .dashboard .contacts ul {
209 
    list-style-type: none;
210 
    padding: 0;
211 
    margin: 0; }
212 
    .dashboard .contacts ul li {
213 
      border-bottom: 1px solid #c9cdd2; }
214 
      .dashboard .contacts ul li a {
215 
        padding: 9px;
216 
        width: 100%;
217 
        box-sizing: border-box;
218 
        text-decoration: none;
219 
        position: relative;
220 
        display: block;
221 
        -moz-border-radius: 2px;
222 
        -webkit-border-radius: 2px;
223 
        border-radius: 2px;
224 
        -moz-transition: background-color 0.2s;
225 
        -o-transition: background-color 0.2s;
226 
        -webkit-transition: background-color 0.2s;
227 
        transition: background-color 0.2s; }
228 
        .dashboard .contacts ul li a .name {
229 
          position: absolute;
230 
          right: 10px;
231 
          top: 10px;
232 
          font-size: 18px;
233 
          color: #5f666c; }
234 
        .dashboard .contacts ul li a .email {
235 
          position: absolute;
236 
          right: 10px;
237 
          top: 30px;
238 
          font-size: 14px;
239 
          color: #778087; }
240 
        .dashboard .contacts ul li a:hover {
241 
          cursor: pointer;
242 
          background-color: #f0f3f5; }
243 
      .dashboard .contacts ul li:last-child {
244 
        border: 0; }
245 
.dashboard .activity-list {
246 
  list-style-type: none;
247 
  padding: 0;
248 
  margin: 0; }
249 
  .dashboard .activity-list li {
250 
    border-bottom: 1px solid #c9cdd2;
251 
    padding: 15px 0 9px 9px; }
252 
    .dashboard .activity-list li .count {
253 
      font-size: 24px;
254 
      color: #ffffff;
255 
      background-color: #03A9F4;
256 
      font-weight: bold;
257 
      width: 60px;
258 
      padding: 5px;
259 
      -moz-border-radius: 2px;
260 
      -webkit-border-radius: 2px;
261 
      border-radius: 2px; }
262 
    .dashboard .activity-list li:first-child {
263 
      border-top: 1px solid #c9cdd2; }
264 
    .dashboard .activity-list li:last-child {
265 
      border: 0; }
266 
    .dashboard .activity-list li .ui-g-6:first-child {
267 
      font-size: 18px;
268 
      padding-left: 0; }
269 
    .dashboard .activity-list li .ui-g-6:last-child {
270 
      text-align: right;
271 
      color: #778087; }
272 
.dashboard .timeline {
273 
  height: 100%;
274 
  box-sizing: border-box; }
275 
  .dashboard .timeline > .ui-g .ui-g-3 {
276 
    font-size: 14px;
277 
    position: relative;
278 
    border-right: 1px solid #bdbdbd; }
279 
    .dashboard .timeline > .ui-g .ui-g-3 i {
280 
      background-color: #ffffff;
281 
      font-size: 24px;
282 
      position: absolute;
283 
      top: 6px;
284 
      right: -12px; }
285 
  .dashboard .timeline > .ui-g .ui-g-9 {
286 
    padding-left: 1.5em; }
287 
    .dashboard .timeline > .ui-g .ui-g-9 .event-text {
288 
      color: #778087;
289 
      font-size: 14px;
290 
      display: block;
291 
      padding-bottom: 20px; }
292 
    .dashboard .timeline > .ui-g .ui-g-9 .event-content img {
293 
      width: 100%; }
294 
 
295 
.login-body .login-panel {
296 
  height: 100%;
297 
  width: 350px;
298 
  position: absolute;
299 
  right: 0;
300 
  top: 0;
301 
  padding: 100px 50px;
302 
  -webkit-box-shadow: 0 5px 7px 5px rgba(0, 0, 0, 0.1);
303 
  -moz-box-shadow: 0 5px 7px 5px rgba(0, 0, 0, 0.1);
304 
  box-shadow: 0 5px 7px 5px rgba(0, 0, 0, 0.1);
305 
  box-sizing: border-box;
306 
  background-color: #ffffff;
307 
  overflow: auto; }
308 
  .login-body .login-panel .ui-g-12 {
309 
    padding: 16px 0;
310 
    text-align: center; }
311 
    .login-body .login-panel .ui-g-12.logo-container img {
312 
      margin-bottom: 20px; }
313 
    .login-body .login-panel .ui-g-12.chkbox-container {
314 
      text-align: left; }
315 
      .login-body .login-panel .ui-g-12.chkbox-container .ui-outputlabel {
316 
        display: inline-block;
317 
        vertical-align: middle;
318 
        margin-left: 8px; }
319 
    .login-body .login-panel .ui-g-12.button-container button {
320 
      margin-bottom: 20px; }
321 
 
322 
@media (min-width: 641px) {
323 
  .login-body {
324 
    background: url("#{resource['poseidon-layout:images/login/login-background.png']}") top left no-repeat;
325 
    background-size: cover; } }
326 
@media (max-width: 640px) {
327 
  .login-body {
328 
    background: none; }
329 
    .login-body .login-panel {
330 
      width: 100%; } }
331 
body.exception-body .exception-top {
332 
  height: 30%;
333 
  position: relative; }
334 
  body.exception-body .exception-top img {
335 
    width: 100px;
336 
    display: block;
337 
    position: absolute;
338 
    bottom: 30px;
339 
    left: 50%;
340 
    margin-left: -50px; }
341 
body.exception-body .exception-bottom {
342 
  height: 70%; }
343 
  body.exception-body .exception-bottom .exception-wrapper {
344 
    margin: 0 auto;
345 
    width: 500px;
346 
    padding: 50px;
347 
    text-align: center;
348 
    box-sizing: border-box; }
349 
    body.exception-body .exception-bottom .exception-wrapper .exception-summary {
350 
      display: block;
351 
      color: #ffffff;
352 
      font-size: 36px;
353 
      font-weight: bold;
354 
      margin-bottom: 20px; }
355 
    body.exception-body .exception-bottom .exception-wrapper .exception-detail {
356 
      display: block;
357 
      color: #ffffff;
358 
      margin-bottom: 50px; }
359 
    body.exception-body .exception-bottom .exception-wrapper button {
360 
      width: 75%;
361 
      display: block;
362 
      margin: 0 auto 100px auto; }
363 
    body.exception-body .exception-bottom .exception-wrapper .logo-icon {
364 
      width: 56px;
365 
      display: block;
366 
      margin: 0 auto 20px auto; }
367 
    body.exception-body .exception-bottom .exception-wrapper .exception-footer {
368 
      color: #ffffff; }
369 
body.exception-body.error-page {
370 
  background-color: #ce5051; }
371 
  body.exception-body.error-page .exception-top {
372 
    background-color: #f0f3f5; }
373 
body.exception-body.access-page {
374 
  background-color: #ce5051; }
375 
  body.exception-body.access-page .exception-top {
376 
    background-color: #f0f3f5; }
377 
body.exception-body.notfound-page {
378 
  background-color: #2d353c; }
379 
  body.exception-body.notfound-page .exception-top {
380 
    background-color: #f0f3f5; }
381 
 
382 
@media (max-width: 640px) {
383 
  body.exception-body .exception-bottom .exception-wrapper {
384 
    width: 100%; } }
385 
.landing-wrapper #header {
386 
  width: 100%;
387 
  min-height: 500px;
388 
  background: url("#{resource['poseidon-layout:images/landing/landing-bg.png']}") top left no-repeat #f7f7f7;
389 
  background-size: cover; }
390 
  .landing-wrapper #header .header-top {
391 
    width: 960px;
392 
    margin: 0 auto;
393 
    padding: 30px 0px; }
394 
    .landing-wrapper #header .header-top .logo {
395 
      display: inline-block;
396 
      vertical-align: middle;
397 
      width: 175px;
398 
      height: 49px;
399 
      background: url("#{resource['poseidon-layout:images/logo-white.png']}") top left no-repeat;
400 
      background-size: 175px 49px; }
401 
    .landing-wrapper #header .header-top #menu {
402 
      float: right;
403 
      list-style: none;
404 
      margin: 20px 20px 0 0;
405 
      padding: 0; }
406 
      .landing-wrapper #header .header-top #menu li {
407 
        float: left;
408 
        display: block;
409 
        margin-left: 30px; }
410 
        .landing-wrapper #header .header-top #menu li a {
411 
          padding: 3px 7px;
412 
          color: #ffffff;
413 
          -moz-transition: background-color 0.3s;
414 
          -o-transition: background-color 0.3s;
415 
          -webkit-transition: background-color 0.3s;
416 
          transition: background-color 0.3s;
417 
          -moz-border-radius: 2px;
418 
          -webkit-border-radius: 2px;
419 
          border-radius: 2px; }
420 
          .landing-wrapper #header .header-top #menu li a:hover {
421 
            color: #00acac;
422 
            background-color: #f0f3f5; }
423 
        .landing-wrapper #header .header-top #menu li i {
424 
          display: none; }
425 
      .landing-wrapper #header .header-top #menu.lmenu-active {
426 
        display: block; }
427 
    .landing-wrapper #header .header-top #menu-button {
428 
      float: right;
429 
      font-size: 36px;
430 
      color: #ffffff;
431 
      display: none; }
432 
  .landing-wrapper #header .header-content {
433 
    width: 960px;
434 
    margin: 0 auto; }
435 
    .landing-wrapper #header .header-content h1 {
436 
      margin: 80px 0 0 0;
437 
      font-weight: 400;
438 
      font-size: 24px;
439 
      color: #ffffff; }
440 
    .landing-wrapper #header .header-content h2 {
441 
      margin: 10px 0 40px 0;
442 
      font-weight: 300;
443 
      font-size: 20px;
444 
      color: #ffffff; }
445 
    .landing-wrapper #header .header-content button .ui-button-text {
446 
      padding: 10px 20px; }
447 
.landing-wrapper #features {
448 
  width: 960px;
449 
  margin: 0 auto;
450 
  padding: 100px 0px;
451 
  text-align: center; }
452 
  .landing-wrapper #features p {
453 
    color: #778087; }
454 
  .landing-wrapper #features .ui-g-12 {
455 
    padding: 2em .5em; }
456 
  .landing-wrapper #features .feature-icon {
457 
    text-align: center;
458 
    box-sizing: border-box;
459 
    height: 100px; }
460 
    .landing-wrapper #features .feature-icon img {
461 
      text-align: center;
462 
      width: 100px; }
463 
.landing-wrapper #promotion {
464 
  width: 100%;
465 
  background: url("#{resource['poseidon-layout:images/landing/landing-overlay-1.png']}") 775px 370px no-repeat #2d353c;
466 
  background-size: 400px auto;
467 
  min-height: 500px; }
468 
  .landing-wrapper #promotion .promotion-content {
469 
    width: 960px;
470 
    margin: 0 auto;
471 
    padding: 50px 0 0 0;
472 
    text-align: center;
473 
    overflow: hidden; }
474 
    .landing-wrapper #promotion .promotion-content h2 {
475 
      font-size: 24px;
476 
      color: #ffffff; }
477 
    .landing-wrapper #promotion .promotion-content p {
478 
      color: #ffffff; }
479 
    .landing-wrapper #promotion .promotion-content img {
480 
      margin-top: 50px;
481 
      display: inline-block;
482 
      height: 350px;
483 
      position: relative;
484 
      top: 25px; }
485 
.landing-wrapper #pricing {
486 
  width: 100%;
487 
  background: url("#{resource['poseidon-layout:images/landing/landing-overlay-2.png']}") 0px 300px no-repeat #ffffff;
488 
  background-size: 600px auto;
489 
  min-height: 400px; }
490 
  .landing-wrapper #pricing .pricing-content {
491 
    width: 960px;
492 
    margin: 0 auto;
493 
    padding: 75px 0;
494 
    text-align: center;
495 
    overflow: hidden; }
496 
    .landing-wrapper #pricing .pricing-content div.ui-g-12 {
497 
      padding: 1em; }
498 
    .landing-wrapper #pricing .pricing-content .pricing-box {
499 
      color: #ffffff; }
500 
      .landing-wrapper #pricing .pricing-content .pricing-box .pricing-header {
501 
        margin: 0 auto;
502 
        max-width: 200px;
503 
        font-size: 20px;
504 
        padding: 75px 0 75px 0px;
505 
        box-sizing: border-box;
506 
        margin-bottom: -100px;
507 
        -moz-border-radius: 50%;
508 
        -webkit-border-radius: 50%;
509 
        border-radius: 50%; }
510 
        .landing-wrapper #pricing .pricing-content .pricing-box .pricing-header .pricing-name, .landing-wrapper #pricing .pricing-content .pricing-box .pricing-header .price {
511 
          display: inline-block;
512 
          width: 100%;
513 
          position: relative;
514 
          top: -40px; }
515 
        .landing-wrapper #pricing .pricing-content .pricing-box .pricing-header .price {
516 
          font-weight: 300; }
517 
      .landing-wrapper #pricing .pricing-content .pricing-box .pricing-features {
518 
        text-align: left;
519 
        padding: 30px 20px;
520 
        min-height: 305px;
521 
        box-sizing: border-box;
522 
        -moz-border-radius: 2px;
523 
        -webkit-border-radius: 2px;
524 
        border-radius: 2px; }
525 
        .landing-wrapper #pricing .pricing-content .pricing-box .pricing-features ul {
526 
          list-style: none;
527 
          padding: 0;
528 
          margin: 0; }
529 
          .landing-wrapper #pricing .pricing-content .pricing-box .pricing-features ul li {
530 
            padding: 8px 14px; }
531 
            .landing-wrapper #pricing .pricing-content .pricing-box .pricing-features ul li i {
532 
              margin-right: 8px;
533 
              font-size: 18px; }
534 
      .landing-wrapper #pricing .pricing-content .pricing-box .pricing-buy {
535 
        padding: 20px 0; }
536 
      .landing-wrapper #pricing .pricing-content .pricing-box.pricing-basic > div {
537 
        background-color: #2dcece; }
538 
      .landing-wrapper #pricing .pricing-content .pricing-box.pricing-standard > div {
539 
        background-color: #2f8ee5; }
540 
      .landing-wrapper #pricing .pricing-content .pricing-box.pricing-pro > div {
541 
        background-color: #6c76af; }
542 
.landing-wrapper #video {
543 
  background-color: #f7f7f7;
544 
  min-width: 400px; }
545 
  .landing-wrapper #video .video-content {
546 
    width: 960px;
547 
    margin: 0 auto;
548 
    padding: 50px 0px 75px 0px;
549 
    text-align: center; }
550 
    .landing-wrapper #video .video-content h2 {
551 
      font-weight: 400; }
552 
    .landing-wrapper #video .video-content p {
553 
      color: #778087; }
554 
.landing-wrapper #footer {
555 
  width: 100%;
556 
  background-color: #00acac;
557 
  color: #ffffff;
558 
  padding: 50px 0; }
559 
  .landing-wrapper #footer .footer-content {
560 
    width: 960px;
561 
    margin: 0 auto; }
562 
    .landing-wrapper #footer .footer-content .footer-left img {
563 
      float: left;
564 
      margin-right: 10px; }
565 
    .landing-wrapper #footer .footer-content .footer-left span {
566 
      margin-top: 4px;
567 
      display: block;
568 
      font-weight: 400; }
569 
    .landing-wrapper #footer .footer-content .footer-right {
570 
      text-align: right;
571 
      font-size: 24px; }
572 
      .landing-wrapper #footer .footer-content .footer-right i {
573 
        margin-right: 14px;
574 
        -moz-transition: color 0.3s;
575 
        -o-transition: color 0.3s;
576 
        -webkit-transition: color 0.3s;
577 
        transition: color 0.3s; }
578 
        .landing-wrapper #footer .footer-content .footer-right i:hover {
579 
          color: #000000; }
580 
 
581 
@media (max-width: 1024px) {
582 
  .landing-wrapper #header .header-top {
583 
    padding: 30px;
584 
    width: 100%;
585 
    box-sizing: border-box; }
586 
    .landing-wrapper #header .header-top #menu-button {
587 
      display: inline-block; }
588 
    .landing-wrapper #header .header-top #menu {
589 
      z-index: 100;
590 
      position: absolute;
591 
      top: 86px;
592 
      right: 30px;
593 
      float: none;
594 
      display: none;
595 
      margin: 0;
596 
      padding: 0;
597 
      width: 225px;
598 
      list-style: none;
599 
      background-color: #ffffff;
600 
      -webkit-animation-duration: .5s;
601 
      -moz-animation-duration: .5s;
602 
      animation-duration: .5s;
603 
      -webkit-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
604 
      -moz-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
605 
      box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15); }
606 
      .landing-wrapper #header .header-top #menu li {
607 
        float: none;
608 
        margin-left: 0; }
609 
        .landing-wrapper #header .header-top #menu li a {
610 
          font-size: 16px;
611 
          display: block;
612 
          padding: 8px 14px;
613 
          color: #5f666c;
614 
          width: 100%;
615 
          box-sizing: border-box;
616 
          overflow: hidden;
617 
          -moz-transition: background-color 0.3s;
618 
          -o-transition: background-color 0.3s;
619 
          -webkit-transition: background-color 0.3s;
620 
          transition: background-color 0.3s; }
621 
          .landing-wrapper #header .header-top #menu li a:hover {
622 
            background-color: #f0f3f5; }
623 
  .landing-wrapper #header .header-content {
624 
    width: 100%;
625 
    padding: 0px 30px 60px 30px;
626 
    box-sizing: border-box; }
627 
    .landing-wrapper #header .header-content h1 {
628 
      font-weight: 400; }
629 
  .landing-wrapper #features, .landing-wrapper #promotion, .landing-wrapper #pricing, .landing-wrapper #video, .landing-wrapper #footer .footer-content {
630 
    width: 100%;
631 
    padding-right: 30px;
632 
    padding-left: 30px;
633 
    box-sizing: border-box; }
634 
  .landing-wrapper #promotion .promotion-content {
635 
    width: 100%; }
636 
  .landing-wrapper #pricing .pricing-content {
637 
    width: 100%; }
638 
    .landing-wrapper #pricing .pricing-content button {
639 
      width: 90%; }
640 
  .landing-wrapper #video .video-content {
641 
    width: 100%; }
642 
    .landing-wrapper #video .video-content .video-container iframe {
643 
      width: 350px;
644 
      height: 220px; }
645 
  .landing-wrapper #footer .footer-content .footer-right {
646 
    text-align: left; } }
647 
html {
648 
  height: 100%; }
649 
 
650 
body {
651 
  font-family: "Open Sans","Helvetica Neue",sans-serif;
652 
  font-size: 14px;
653 
  color: #5f666c;
654 
  -webkit-font-smoothing: antialiased;
655 
  padding: 0;
656 
  margin: 0;
657 
  height: 100%; }
658 
  body.main-body {
659 
    background-color: #D9E0E7; }
660 
  body a {
661 
    color: #6c76af;
662 
    text-decoration: none; }
663 
    body a:hover {
664 
      color: #7d85b8; }
665 
 
666 
.layout-mask {
667 
  position: fixed;
668 
  width: 100%;
669 
  height: 100%;
670 
  background-color: #424242;
671 
  opacity: 0.7;
672 
  filter: alpha(opacity=70);
673 
  top: 0;
674 
  left: 0;
675 
  z-index: 999999997; }
676 
 
677 
.layout-wrapper .topbar {
678 
  position: fixed;
679 
  z-index: 100;
680 
  width: 100%;
681 
  height: 75px;
682 
  background-color: #ffffff;
683 
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); }
684 
  .layout-wrapper .topbar .logo {
685 
    display: inline-block;
686 
    vertical-align: middle;
687 
    width: 175px;
688 
    height: 49px;
689 
    background: url("#{resource['poseidon-layout:images/logo-white.png']}") top left no-repeat;
690 
    background-size: 175px 49px; }
691 
  .layout-wrapper .topbar .topbar-left {
692 
    box-sizing: border-box;
693 
    padding: 12px 20px 0px 35px;
694 
    height: 75px;
695 
    width: 250px;
696 
    background-color: #6c76af;
697 
    float: left;
698 
    -moz-transition: background-color 0.3s;
699 
    -o-transition: background-color 0.3s;
700 
    -webkit-transition: background-color 0.3s;
701 
    transition: background-color 0.3s; }
702 
  .layout-wrapper .topbar .topbar-right {
703 
    padding: 15px 20px 15px 270px; }
704 
    .layout-wrapper .topbar .topbar-right #menu-button {
705 
      display: inline-block;
706 
      vertical-align: middle;
707 
      height: 36px;
708 
      margin-right: 10px;
709 
      position: relative;
710 
      top: 3px;
711 
      color: #5f666c;
712 
      -moz-transition: all 0.3s;
713 
      -o-transition: all 0.3s;
714 
      -webkit-transition: all 0.3s;
715 
      transition: all 0.3s; }
716 
      .layout-wrapper .topbar .topbar-right #menu-button:hover {
717 
        -webkit-transform: scale(1.2);
718 
        -moz-transform: scale(1.2);
719 
        -o-transform: scale(1.2);
720 
        -ms-transform: scale(1.2);
721 
        transform: scale(1.2); }
722 
      .layout-wrapper .topbar .topbar-right #menu-button i {
723 
        -moz-transition: all 0.3s;
724 
        -o-transition: all 0.3s;
725 
        -webkit-transition: all 0.3s;
726 
        transition: all 0.3s;
727 
        font-size: 36px; }
728 
    .layout-wrapper .topbar .topbar-right #topbar-menu-button {
729 
      display: none;
730 
      float: right;
731 
      color: #5f666c;
732 
      vertical-align: middle;
733 
      height: 36px;
734 
      margin: 5px 5px 0 0;
735 
      -moz-transition: all 0.3s;
736 
      -o-transition: all 0.3s;
737 
      -webkit-transition: all 0.3s;
738 
      transition: all 0.3s; }
739 
      .layout-wrapper .topbar .topbar-right #topbar-menu-button i {
740 
        font-size: 36px; }
741 
.layout-wrapper .layout-menu-container {
742 
  overflow: auto;
743 
  position: fixed;
744 
  width: 250px;
745 
  z-index: 99;
746 
  top: 75px;
747 
  height: 100%;
748 
  background-color: #2d353c;
749 
  -moz-transition: margin-left 0.3s;
750 
  -o-transition: margin-left 0.3s;
751 
  -webkit-transition: margin-left 0.3s;
752 
  transition: margin-left 0.3s; }
753 
  .layout-wrapper .layout-menu-container > .nano > .nano-content.menu-scroll-content {
754 
    display: block;
755 
    height: 100%;
756 
    position: relative;
757 
    overflow: scroll;
758 
    overflow-x: hidden; }
759 
  .layout-wrapper .layout-menu-container > .nano > .nano-content > ul:last-child {
760 
    margin-top: 16px;
761 
    padding-bottom: 120px; }
762 
  .layout-wrapper .layout-menu-container > .nano .nano-pane .nano-slider {
763 
    background-color: #aaaaaa;
764 
    opacity: 0.3;
765 
    filter: alpha(opacity=30); }
766 
  .layout-wrapper .layout-menu-container .search-input {
767 
    padding: 32px 16px 8px 16px;
768 
    text-align: center;
769 
    position: relative; }
770 
    .layout-wrapper .layout-menu-container .search-input input {
771 
      padding: 10px 30px 10px 15px;
772 
      background-color: #42494f;
773 
      border: 1px solid #75787b;
774 
      -moz-border-radius: 2px;
775 
      -webkit-border-radius: 2px;
776 
      border-radius: 2px;
777 
      font-size: 14px;
778 
      color: #f0f3f5;
779 
      box-sizing: border-box;
780 
      width: 100%;
781 
      -moz-transition: border-color 0.3s;
782 
      -o-transition: border-color 0.3s;
783 
      -webkit-transition: border-color 0.3s;
784 
      transition: border-color 0.3s; }
785 
      .layout-wrapper .layout-menu-container .search-input input::-webkit-input-placeholder {
786 
        color: #a8acb1; }
787 
      .layout-wrapper .layout-menu-container .search-input input:-moz-placeholder {
788 
        color: #a8acb1; }
789 
      .layout-wrapper .layout-menu-container .search-input input::-moz-placeholder {
790 
        color: #a8acb1; }
791 
      .layout-wrapper .layout-menu-container .search-input input:-ms-input-placeholder {
792 
        color: #a8acb1; }
793 
      .layout-wrapper .layout-menu-container .search-input input:focus {
794 
        outline: 0 none;
795 
        border: 1px solid #6c76af;
796 
        -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
797 
        -moz-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
798 
        box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2); }
799 
    .layout-wrapper .layout-menu-container .search-input .fa-search {
800 
      position: absolute;
801 
      right: 24px;
802 
      top: 40px;
803 
      font-size: 22px;
804 
      color: #a8acb1; }
805 
  .layout-wrapper .layout-menu-container .layout-menu-footer {
806 
    width: 100%;
807 
    box-sizing: border-box;
808 
    padding: 8px 14px 120px;
809 
    color: #a8acb1;
810 
    margin-top: 20px;
811 
    font-size: 12px; }
812 
    .layout-wrapper .layout-menu-container .layout-menu-footer .layout-menu-footer-title {
813 
      width: 100%;
814 
      font-size: 14px;
815 
      display: block;
816 
      border-bottom: 1px solid #86898d; }
817 
    .layout-wrapper .layout-menu-container .layout-menu-footer .ui-progressbar {
818 
      height: 5px;
819 
      border: 0 none;
820 
      margin: 16px 0 4px 0; }
821 
.layout-wrapper.menu-layout-overlay .layout-menu-container {
822 
  margin-left: -250px; }
823 
.layout-wrapper.menu-layout-overlay .layout-main {
824 
  margin-left: 0px; }
825 
.layout-wrapper.menu-layout-overlay.layout-menu-overlay-active .layout-menu-container {
826 
  z-index: 999999999;
827 
  margin-left: 0px; }
828 
.layout-wrapper.menu-layout-overlay.layout-menu-overlay-active .topbar .topbar-left {
829 
  background-color: #6c76af; }
830 
  .layout-wrapper.menu-layout-overlay.layout-menu-overlay-active .topbar .topbar-left .logo {
831 
    background-image: url("#{resource['poseidon-layout:images/logo-white.png']}"); }
832 
.layout-wrapper.menu-layout-overlay .topbar {
833 
  z-index: 999999998; }
834 
  .layout-wrapper.menu-layout-overlay .topbar .topbar-left {
835 
    background-color: #f0f3f5; }
836 
    .layout-wrapper.menu-layout-overlay .topbar .topbar-left .logo {
837 
      background-image: url("#{resource['poseidon-layout:images/logo-black.png']}"); }
838 
  .layout-wrapper.menu-layout-overlay .topbar .topbar-right #menu-button i {
839 
    -webkit-transform: rotate(180deg);
840 
    -moz-transform: rotate(180deg);
841 
    -o-transform: rotate(180deg);
842 
    -ms-transform: rotate(180deg);
843 
    transform: rotate(180deg); }
844 
  .layout-wrapper.menu-layout-overlay .topbar .topbar-right #menu-button.menu-button-rotate i {
845 
    -webkit-transform: rotate(0deg);
846 
    -moz-transform: rotate(0deg);
847 
    -o-transform: rotate(0deg);
848 
    -ms-transform: rotate(0deg);
849 
    transform: rotate(0deg); }
850 
.layout-wrapper .layout-main {
851 
  padding: 75px 0 15px 0;
852 
  -moz-transition: margin-left 0.3s;
853 
  -o-transition: margin-left 0.3s;
854 
  -webkit-transition: margin-left 0.3s;
855 
  transition: margin-left 0.3s; }
856 
  .layout-wrapper .layout-main .route-bar {
857 
    padding: 5px 20px 5px 25px;
858 
    background-color: #f0f3f5; }
859 
    .layout-wrapper .layout-main .route-bar .fa {
860 
      margin-right: 2px; }
861 
  .layout-wrapper .layout-main .layout-main-content {
862 
    padding: 15px; }
863 
.layout-wrapper .layout-menu {
864 
  margin: 0;
865 
  padding: 0;
866 
  list-style: none; }
867 
  .layout-wrapper .layout-menu li a {
868 
    display: block;
869 
    padding: 8px 16px;
870 
    color: #a8acb1;
871 
    width: 100%;
872 
    line-height: 14px;
873 
    box-sizing: border-box;
874 
    -moz-transition: background-color 0.3s;
875 
    -o-transition: background-color 0.3s;
876 
    -webkit-transition: background-color 0.3s;
877 
    transition: background-color 0.3s;
878 
    overflow: hidden; }
879 
    .layout-wrapper .layout-menu li a i {
880 
      color: #a8acb1; }
881 
    .layout-wrapper .layout-menu li a i:first-child {
882 
      display: inline-block;
883 
      vertical-align: middle;
884 
      margin-right: 12px;
885 
      font-size: 18px; }
886 
    .layout-wrapper .layout-menu li a i:last-child {
887 
      float: right;
888 
      font-size: 20px;
889 
      margin-top: 2px;
890 
      margin-right: -3px;
891 
      -moz-transition: transform 0.3s;
892 
      -o-transition: transform 0.3s;
893 
      -webkit-transition: transform 0.3s;
894 
      transition: transform 0.3s; }
895 
    .layout-wrapper .layout-menu li a span {
896 
      display: inline-block;
897 
      vertical-align: middle; }
898 
    .layout-wrapper .layout-menu li a:hover {
899 
      background-color: #444d56; }
900 
  .layout-wrapper .layout-menu li.active-menuitem > a {
901 
    color: #6c76af; }
902 
    .layout-wrapper .layout-menu li.active-menuitem > a i {
903 
      color: #6c76af; }
904 
      .layout-wrapper .layout-menu li.active-menuitem > a i:last-child {
905 
        -webkit-transform: rotate(-180deg);
906 
        -moz-transform: rotate(-180deg);
907 
        -o-transform: rotate(-180deg);
908 
        -ms-transform: rotate(-180deg);
909 
        transform: rotate(-180deg); }
910 
  .layout-wrapper .layout-menu li ul {
911 
    background-color: #1a2229;
912 
    display: none;
913 
    padding: 0 0 0 20px;
914 
    margin: 0;
915 
    list-style: none; }
916 
  .layout-wrapper .layout-menu > li.active-menuitem > a {
917 
    background-color: #6c76af;
918 
    color: #ffffff; }
919 
    .layout-wrapper .layout-menu > li.active-menuitem > a i {
920 
      color: #ffffff; }
921 
      .layout-wrapper .layout-menu > li.active-menuitem > a i:last-child {
922 
        -webkit-transform: rotate(-180deg);
923 
        -moz-transform: rotate(-180deg);
924 
        -o-transform: rotate(-180deg);
925 
        -ms-transform: rotate(-180deg);
926 
        transform: rotate(-180deg); }
927 
.layout-wrapper .footer {
928 
  padding: .5em; }
929 
  .layout-wrapper .footer .footer-text-left {
930 
    float: left; }
931 
  .layout-wrapper .footer .footer-text-right {
932 
    color: #778087;
933 
    float: right; }
934 
    .layout-wrapper .footer .footer-text-right span {
935 
      vertical-align: middle;
936 
      display: inline-block; }
937 
.layout-wrapper #right-sidebar-button-open {
938 
  float: right;
939 
  color: #5f666c;
940 
  font-size: 24px;
941 
  line-height: 24px;
942 
  margin-top: -2px;
943 
  width: 20px;
944 
  -moz-transition: all 0.3s;
945 
  -o-transition: all 0.3s;
946 
  -webkit-transition: all 0.3s;
947 
  transition: all 0.3s; }
948 
  .layout-wrapper #right-sidebar-button-open:hover {
949 
    -webkit-transform: scale(1.2);
950 
    -moz-transform: scale(1.2);
951 
    -o-transform: scale(1.2);
952 
    -ms-transform: scale(1.2);
953 
    transform: scale(1.2); }
954 
.layout-wrapper .right-sidebar {
955 
  position: fixed;
956 
  right: -250px;
957 
  width: 250px;
958 
  top: 75px;
959 
  z-index: 999999999;
960 
  -moz-transition: right 0.3s;
961 
  -o-transition: right 0.3s;
962 
  -webkit-transition: right 0.3s;
963 
  transition: right 0.3s;
964 
  background-color: #f0f3f5;
965 
  height: 100%;
966 
  box-sizing: border-box;
967 
  -moz-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
968 
  -webkit-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
969 
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
970 
  overflow: auto; }
971 
  .layout-wrapper .right-sidebar .right-sidebar-header {
972 
    padding: 8px 14px;
973 
    font-weight: bold;
974 
    background-color: #c9cdd2;
975 
    color: #5f666c; }
976 
    .layout-wrapper .right-sidebar .right-sidebar-header i, .layout-wrapper .right-sidebar .right-sidebar-header span {
977 
      vertical-align: middle;
978 
      display: inline-block; }
979 
    .layout-wrapper .right-sidebar .right-sidebar-header #right-sidebar-button-close {
980 
      float: right;
981 
      color: #5f666c;
982 
      font-size: 24px;
983 
      width: 20px;
984 
      line-height: 24px;
985 
      color: #ffffff;
986 
      margin: -4px 0 0 0;
987 
      color: #5f666c;
988 
      -moz-transition: all 0.3s;
989 
      -o-transition: all 0.3s;
990 
      -webkit-transition: all 0.3s;
991 
      transition: all 0.3s; }
992 
      .layout-wrapper .right-sidebar .right-sidebar-header #right-sidebar-button-close:hover {
993 
        -webkit-transform: scale(1.2);
994 
        -moz-transform: scale(1.2);
995 
        -o-transform: scale(1.2);
996 
        -ms-transform: scale(1.2);
997 
        transform: scale(1.2); }
998 
  .layout-wrapper .right-sidebar.right-sidebar-active {
999 
    right: 0px; }
1000 
  .layout-wrapper .right-sidebar .ui-accordion {
1001 
    padding-bottom: 140px; }
1002 
    .layout-wrapper .right-sidebar .ui-accordion .ui-accordion-content {
1003 
      padding: 0; }
1004 
  .layout-wrapper .right-sidebar .contact-list {
1005 
    list-style-type: none;
1006 
    padding: 0;
1007 
    margin: 0; }
1008 
    .layout-wrapper .right-sidebar .contact-list li {
1009 
      border-bottom: 1px solid #c9cdd2; }
1010 
      .layout-wrapper .right-sidebar .contact-list li a {
1011 
        padding: 9px;
1012 
        width: 100%;
1013 
        box-sizing: border-box;
1014 
        text-decoration: none;
1015 
        position: relative;
1016 
        display: block;
1017 
        -moz-border-radius: 2px;
1018 
        -webkit-border-radius: 2px;
1019 
        border-radius: 2px;
1020 
        -moz-transition: background-color 0.2s;
1021 
        -o-transition: background-color 0.2s;
1022 
        -webkit-transition: background-color 0.2s;
1023 
        transition: background-color 0.2s; }
1024 
        .layout-wrapper .right-sidebar .contact-list li a .name {
1025 
          position: absolute;
1026 
          right: 10px;
1027 
          top: 10px;
1028 
          font-size: 16px;
1029 
          color: #5f666c; }
1030 
        .layout-wrapper .right-sidebar .contact-list li a .email {
1031 
          position: absolute;
1032 
          right: 10px;
1033 
          top: 30px;
1034 
          font-size: 12px;
1035 
          color: #778087; }
1036 
        .layout-wrapper .right-sidebar .contact-list li a:hover {
1037 
          cursor: pointer;
1038 
          background-color: #f0f3f5; }
1039 
      .layout-wrapper .right-sidebar .contact-list li:last-child {
1040 
        border: 0; }
1041 
  .layout-wrapper .right-sidebar .note-list {
1042 
    list-style-type: none;
1043 
    margin: 0;
1044 
    padding: 0; }
1045 
    .layout-wrapper .right-sidebar .note-list li {
1046 
      padding: 8px 16px;
1047 
      border-bottom: 1px solid #c9cdd2; }
1048 
      .layout-wrapper .right-sidebar .note-list li:first-child {
1049 
        margin-top: 10px; }
1050 
    .layout-wrapper .right-sidebar .note-list .ui-chkbox {
1051 
      vertical-align: middle;
1052 
      margin-right: 5px; }
1053 
    .layout-wrapper .right-sidebar .note-list .task-name {
1054 
      vertical-align: middle; }
1055 
    .layout-wrapper .right-sidebar .note-list i {
1056 
      color: #778087;
1057 
      float: right;
1058 
      font-size: 16px;
1059 
      margin-top: 5px; }
1060 
  .layout-wrapper .right-sidebar .contact-form {
1061 
    padding: 8px 14px; }
1062 
  .layout-wrapper .right-sidebar > .nano > .nano-content.sidebar-scroll-content {
1063 
    display: block;
1064 
    height: 100%;
1065 
    overflow-x: hidden;
1066 
    overflow-y: scroll;
1067 
    position: relative; }
1068 
  .layout-wrapper .right-sidebar > .nano > .nano-pane .nano-slider {
1069 
    background-color: #aaaaaa;
1070 
    opacity: 0.4; }
1071 
 
1072 
.ajax-loader {
1073 
  font-size: 32px;
1074 
  color: #6c76af; }
1075 
 
1076 
@media (min-width: 1025px) {
1077 
  .layout-wrapper .topbar-items {
1078 
    float: right;
1079 
    margin: 0;
1080 
    padding: 5px 0 0 0;
1081 
    list-style-type: none; }
1082 
    .layout-wrapper .topbar-items > li {
1083 
      float: right;
1084 
      position: relative;
1085 
      margin-left: 25px; }
1086 
      .layout-wrapper .topbar-items > li > a {
1087 
        position: relative;
1088 
        display: block;
1089 
        color: #5f666c; }
1090 
        .layout-wrapper .topbar-items > li > a .topbar-item-name {
1091 
          display: none; }
1092 
        .layout-wrapper .topbar-items > li > a .topbar-badge {
1093 
          position: absolute;
1094 
          right: -5px;
1095 
          top: -5px;
1096 
          background-color: #6c76af;
1097 
          color: #ffffff;
1098 
          -moz-border-radius: 50%;
1099 
          -webkit-border-radius: 50%;
1100 
          border-radius: 50%;
1101 
          padding: 2px 4px;
1102 
          display: block;
1103 
          font-size: 12px;
1104 
          line-height: 12px; }
1105 
      .layout-wrapper .topbar-items > li .topbar-icon {
1106 
        font-size: 36px;
1107 
        -moz-transition: color 0.3s;
1108 
        -o-transition: color 0.3s;
1109 
        -webkit-transition: color 0.3s;
1110 
        transition: color 0.3s; }
1111 
        .layout-wrapper .topbar-items > li .topbar-icon:hover {
1112 
          color: #6c76af; }
1113 
      .layout-wrapper .topbar-items > li.profile-item .profile-image {
1114 
        width: 36px;
1115 
        height: 36px;
1116 
        background: url("#{resource['poseidon-layout:images/avatar.png']}") top left no-repeat;
1117 
        background-size: 36px 36px; }
1118 
      .layout-wrapper .topbar-items > li > ul {
1119 
        position: absolute;
1120 
        top: 57px;
1121 
        right: 5px;
1122 
        display: none;
1123 
        width: 250px;
1124 
        background-color: #ffffff;
1125 
        -webkit-animation-duration: .5s;
1126 
        -moz-animation-duration: .5s;
1127 
        animation-duration: .5s;
1128 
        list-style-type: none;
1129 
        margin: 0;
1130 
        padding: 8px 0;
1131 
        -webkit-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
1132 
        -moz-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
1133 
        box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15); }
1134 
        .layout-wrapper .topbar-items > li > ul a {
1135 
          padding: 8px 16px;
1136 
          display: block;
1137 
          width: 100%;
1138 
          box-sizing: border-box;
1139 
          color: #5f666c; }
1140 
          .layout-wrapper .topbar-items > li > ul a .fa {
1141 
            margin-right: 8px; }
1142 
          .layout-wrapper .topbar-items > li > ul a:hover {
1143 
            background-color: #f0f3f5;
1144 
            -moz-transition: background-color 0.3s;
1145 
            -o-transition: background-color 0.3s;
1146 
            -webkit-transition: background-color 0.3s;
1147 
            transition: background-color 0.3s; }
1148 
      .layout-wrapper .topbar-items > li.active-top-menu > ul {
1149 
        display: block; }
1150 
      .layout-wrapper .topbar-items > li .topbar-message img {
1151 
        display: inline-block;
1152 
        vertical-align: middle;
1153 
        margin-right: 8px; }
1154 
  .layout-wrapper.menu-layout-static .layout-menu-container {
1155 
    margin-left: 0; }
1156 
  .layout-wrapper.menu-layout-static .layout-main {
1157 
    margin-left: 250px; }
1158 
  .layout-wrapper.menu-layout-static.layout-menu-static-inactive .topbar .topbar-left {
1159 
    background-color: #f0f3f5; }
1160 
    .layout-wrapper.menu-layout-static.layout-menu-static-inactive .topbar .topbar-left .logo {
1161 
      background-image: url("#{resource['poseidon-layout:images/logo-black.png']}"); }
1162 
  .layout-wrapper.menu-layout-static.layout-menu-static-inactive .topbar .topbar-right #menu-button.menu-button-rotate i {
1163 
    -webkit-transform: rotate(180deg);
1164 
    -moz-transform: rotate(180deg);
1165 
    -o-transform: rotate(180deg);
1166 
    -ms-transform: rotate(180deg);
1167 
    transform: rotate(180deg); }
1168 
  .layout-wrapper.menu-layout-static.layout-menu-static-inactive .layout-menu-container {
1169 
    margin-left: -250px; }
1170 
  .layout-wrapper.menu-layout-static.layout-menu-static-inactive .layout-main {
1171 
    margin-left: 0px; }
1172 
  .layout-wrapper.menu-layout-static .layout-mask {
1173 
    display: none; }
1174 
  .layout-wrapper.menu-layout-horizontal .topbar {
1175 
    box-shadow: none;
1176 
    -webkit-box-shadow: none;
1177 
    -moz-box-shadow: none; }
1178 
    .layout-wrapper.menu-layout-horizontal .topbar .topbar-left {
1179 
      box-shadow: none;
1180 
      -webkit-box-shadow: none;
1181 
      -moz-box-shadow: none;
1182 
      background-color: #ffffff; }
1183 
      .layout-wrapper.menu-layout-horizontal .topbar .topbar-left .logo {
1184 
        background-image: url("#{resource['poseidon-layout:images/logo-black.png']}"); }
1185 
    .layout-wrapper.menu-layout-horizontal .topbar .topbar-right #menu-button {
1186 
      display: none; }
1187 
  .layout-wrapper.menu-layout-horizontal .layout-menu-container {
1188 
    overflow: visible;
1189 
    position: fixed;
1190 
    width: 100%;
1191 
    top: 75px;
1192 
    height: auto;
1193 
    padding-left: 18px;
1194 
    background-color: #f0f3f5;
1195 
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
1196 
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
1197 
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.3); }
1198 
    .layout-wrapper.menu-layout-horizontal .layout-menu-container > .nano {
1199 
      overflow: visible; }
1200 
      .layout-wrapper.menu-layout-horizontal .layout-menu-container > .nano .nano-content.menu-scroll-content {
1201 
        display: inherit;
1202 
        height: auto;
1203 
        position: static;
1204 
        overflow: visible;
1205 
        overflow-x: visible; }
1206 
      .layout-wrapper.menu-layout-horizontal .layout-menu-container > .nano .nano-content ul:last-child {
1207 
        margin-top: 0px;
1208 
        padding-bottom: 0px; }
1209 
      .layout-wrapper.menu-layout-horizontal .layout-menu-container > .nano .nano-pane {
1210 
        display: none !important; }
1211 
    .layout-wrapper.menu-layout-horizontal .layout-menu-container .search-input {
1212 
      display: none; }
1213 
    .layout-wrapper.menu-layout-horizontal .layout-menu-container .layout-menu > li {
1214 
      float: left;
1215 
      position: relative; }
1216 
      .layout-wrapper.menu-layout-horizontal .layout-menu-container .layout-menu > li > a {
1217 
        text-align: center;
1218 
        color: #5f666c; }
1219 
        .layout-wrapper.menu-layout-horizontal .layout-menu-container .layout-menu > li > a i:first-child {
1220 
          color: #5f666c;
1221 
          width: 100%;
1222 
          margin: 4px 0; }
1223 
        .layout-wrapper.menu-layout-horizontal .layout-menu-container .layout-menu > li > a i:last-child {
1224 
          display: none; }
1225 
        .layout-wrapper.menu-layout-horizontal .layout-menu-container .layout-menu > li > a:hover {
1226 
          background-color: #c9cdd2; }
1227 
      .layout-wrapper.menu-layout-horizontal .layout-menu-container .layout-menu > li > ul {
1228 
        z-index: 100;
1229 
        position: absolute;
1230 
        top: 56px;
1231 
        left: 0px;
1232 
        display: none;
1233 
        width: 250px;
1234 
        padding: 0;
1235 
        background-color: #f0f3f5;
1236 
        -webkit-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
1237 
        -moz-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
1238 
        box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15); }
1239 
        .layout-wrapper.menu-layout-horizontal .layout-menu-container .layout-menu > li > ul li a {
1240 
          color: #5f666c;
1241 
          padding: 10px 16px; }
1242 
          .layout-wrapper.menu-layout-horizontal .layout-menu-container .layout-menu > li > ul li a i {
1243 
            color: #5f666c; }
1244 
          .layout-wrapper.menu-layout-horizontal .layout-menu-container .layout-menu > li > ul li a:hover {
1245 
            background-color: #c9cdd2; }
1246 
        .layout-wrapper.menu-layout-horizontal .layout-menu-container .layout-menu > li > ul li ul {
1247 
          padding: 0 0 0 20px;
1248 
          position: static;
1249 
          background-color: #f0f3f5; }
1250 
        .layout-wrapper.menu-layout-horizontal .layout-menu-container .layout-menu > li > ul li.active-menuitem > a {
1251 
          color: #6c76af;
1252 
          background-color: #e8e8e8; }
1253 
      .layout-wrapper.menu-layout-horizontal .layout-menu-container .layout-menu > li.active-menuitem > a {
1254 
        background-color: #6c76af;
1255 
        color: #ffffff; }
1256 
        .layout-wrapper.menu-layout-horizontal .layout-menu-container .layout-menu > li.active-menuitem > a i {
1257 
          color: #ffffff; }
1258 
    .layout-wrapper.menu-layout-horizontal .layout-menu-container .layout-menu-footer {
1259 
      display: none; }
1260 
  .layout-wrapper.menu-layout-horizontal .layout-main {
1261 
    padding-top: 130px;
1262 
    margin-left: 0px; }
1263 
    .layout-wrapper.menu-layout-horizontal .layout-main .route-bar {
1264 
      background-color: #f0f3f5; }
1265 
  .layout-wrapper.menu-layout-horizontal .layout-mask {
1266 
    display: none; } }
1267 
@media (max-width: 1024px) {
1268 
  .layout-wrapper.menu-layout-static .topbar .topbar-left {
1269 
    background-color: #f0f3f5; }
1270 
    .layout-wrapper.menu-layout-static .topbar .topbar-left .logo {
1271 
      background-image: url("#{resource['poseidon-layout:images/logo-black.png']}"); }
1272 
  .layout-wrapper.menu-layout-static .topbar .topbar-right #menu-button i {
1273 
    -webkit-transform: rotate(180deg);
1274 
    -moz-transform: rotate(180deg);
1275 
    -o-transform: rotate(180deg);
1276 
    -ms-transform: rotate(180deg);
1277 
    transform: rotate(180deg); }
1278 
  .layout-wrapper.menu-layout-static .layout-menu-container {
1279 
    margin-left: -265px; }
1280 
  .layout-wrapper.menu-layout-static .layout-main {
1281 
    margin-left: 0px; }
1282 
  .layout-wrapper.menu-layout-static.layout-menu-static-active .layout-menu-container {
1283 
    margin-left: 0;
1284 
    z-index: 999999999; }
1285 
  .layout-wrapper.menu-layout-static.layout-menu-static-active .topbar {
1286 
    z-index: 999999998; }
1287 
    .layout-wrapper.menu-layout-static.layout-menu-static-active .topbar .topbar-right #menu-button i {
1288 
      -webkit-transform: rotate(0);
1289 
      -moz-transform: rotate(0);
1290 
      -o-transform: rotate(0);
1291 
      -ms-transform: rotate(0);
1292 
      transform: rotate(0); }
1293 
  .layout-wrapper.menu-layout-static.layout-menu-static-active .layout-main {
1294 
    margin-left: 0; }
1295 
  .layout-wrapper .topbar .topbar-right #topbar-menu-button {
1296 
    display: block; }
1297 
  .layout-wrapper .topbar .topbar-right .topbar-items {
1298 
    position: absolute;
1299 
    top: 77px;
1300 
    right: 15px;
1301 
    width: 275px;
1302 
    -webkit-animation-duration: .5s;
1303 
    -moz-animation-duration: .5s;
1304 
    animation-duration: .5s;
1305 
    display: none;
1306 
    background-color: #ffffff;
1307 
    list-style-type: none;
1308 
    margin: 0;
1309 
    padding: 8px 0;
1310 
    -webkit-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
1311 
    -moz-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15);
1312 
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.15); }
1313 
    .layout-wrapper .topbar .topbar-right .topbar-items > li > a {
1314 
      width: 100%;
1315 
      display: block;
1316 
      box-sizing: border-box;
1317 
      padding: 8px 16px;
1318 
      color: #5f666c;
1319 
      position: relative; }
1320 
      .layout-wrapper .topbar .topbar-right .topbar-items > li > a i {
1321 
        display: inline-block;
1322 
        vertical-align: middle;
1323 
        margin-right: 8px;
1324 
        font-size: 24px; }
1325 
      .layout-wrapper .topbar .topbar-right .topbar-items > li > a:hover {
1326 
        background-color: #f0f3f5; }
1327 
      .layout-wrapper .topbar .topbar-right .topbar-items > li > a .topbar-item-name {
1328 
        display: inline-block;
1329 
        vertical-align: middle; }
1330 
      .layout-wrapper .topbar .topbar-right .topbar-items > li > a .topbar-badge {
1331 
        position: absolute;
1332 
        left: 30px;
1333 
        top: 10px;
1334 
        background-color: orange;
1335 
        color: yellow;
1336 
        -moz-border-radius: 50%;
1337 
        -webkit-border-radius: 50%;
1338 
        border-radius: 50%;
1339 
        padding: 2px 4px;
1340 
        display: block;
1341 
        font-size: 12px;
1342 
        line-height: 12px; }
1343 
    .layout-wrapper .topbar .topbar-right .topbar-items > li > ul {
1344 
      display: none;
1345 
      list-style-type: none;
1346 
      padding: 0 0 0 20px;
1347 
      margin: 0; }
1348 
      .layout-wrapper .topbar .topbar-right .topbar-items > li > ul li a {
1349 
        padding: 8px 16px 8px 24px;
1350 
        display: block;
1351 
        width: 100%;
1352 
        box-sizing: border-box;
1353 
        color: #5f666c; }
1354 
        .layout-wrapper .topbar .topbar-right .topbar-items > li > ul li a span, .layout-wrapper .topbar .topbar-right .topbar-items > li > ul li a img, .layout-wrapper .topbar .topbar-right .topbar-items > li > ul li a .fa {
1355 
          display: inline-block;
1356 
          vertical-align: middle; }
1357 
        .layout-wrapper .topbar .topbar-right .topbar-items > li > ul li a img {
1358 
          width: 1.28571429em;
1359 
          margin-right: 8px; }
1360 
        .layout-wrapper .topbar .topbar-right .topbar-items > li > ul li a .fa {
1361 
          margin-right: 8px; }
1362 
        .layout-wrapper .topbar .topbar-right .topbar-items > li > ul li a:hover {
1363 
          background-color: #f0f3f5;
1364 
          -moz-transition: background-color 0.3s;
1365 
          -o-transition: background-color 0.3s;
1366 
          -webkit-transition: background-color 0.3s;
1367 
          transition: background-color 0.3s; }
1368 
    .layout-wrapper .topbar .topbar-right .topbar-items > li.active-top-menu > a {
1369 
      background-color: #6c76af;
1370 
      color: #ffffff; }
1371 
    .layout-wrapper .topbar .topbar-right .topbar-items > li.active-top-menu > ul {
1372 
      display: block; }
1373 
    .layout-wrapper .topbar .topbar-right .topbar-items > li.profile-item .profile-image {
1374 
      display: inline-block;
1375 
      vertical-align: middle;
1376 
      width: 24px;
1377 
      height: 24px;
1378 
      background: url("#{resource['poseidon-layout:images/avatar.png']}") top left no-repeat;
1379 
      background-size: 24px 24px;
1380 
      margin-right: 8px;
1381 
      margin-left: 4px; }
1382 
    .layout-wrapper .topbar .topbar-right .topbar-items > li.profile-item span {
1383 
      vertical-align: middle;
1384 
      display: inline-block; }
1385 
    .layout-wrapper .topbar .topbar-right .topbar-items.topbar-items-visible {
1386 
      display: block; } }
1387 
@media (max-width: 640px) {
1388 
  .layout-wrapper.menu-layout-static .topbar .topbar-left,
1389 
  .layout-wrapper.menu-layout-overlay .topbar .topbar-left,
1390 
  .layout-wrapper.menu-layout-overlay.layout-menu-overlay-active .topbar .topbar-left {
1391 
    float: none;
1392 
    margin: 0 auto;
1393 
    background-color: #ffffff; }
1394 
    .layout-wrapper.menu-layout-static .topbar .topbar-left .logo,
1395 
    .layout-wrapper.menu-layout-overlay .topbar .topbar-left .logo,
1396 
    .layout-wrapper.menu-layout-overlay.layout-menu-overlay-active .topbar .topbar-left .logo {
1397 
      background-image: url("#{resource['poseidon-layout:images/logo-black.png']}"); }
1398 
  .layout-wrapper.menu-layout-static .topbar .topbar-right,
1399 
  .layout-wrapper.menu-layout-overlay .topbar .topbar-right,
1400 
  .layout-wrapper.menu-layout-overlay.layout-menu-overlay-active .topbar .topbar-right {
1401 
    position: relative;
1402 
    top: -75px;
1403 
    padding: 15px 20px 15px 25px; }
1404 
    .layout-wrapper.menu-layout-static .topbar .topbar-right #menu-button,
1405 
    .layout-wrapper.menu-layout-overlay .topbar .topbar-right #menu-button,
1406 
    .layout-wrapper.menu-layout-overlay.layout-menu-overlay-active .topbar .topbar-right #menu-button {
1407 
      font-size: 44px; }
1408 
      .layout-wrapper.menu-layout-static .topbar .topbar-right #menu-button i,
1409 
      .layout-wrapper.menu-layout-overlay .topbar .topbar-right #menu-button i,
1410 
      .layout-wrapper.menu-layout-overlay.layout-menu-overlay-active .topbar .topbar-right #menu-button i {
1411 
        vertical-align: top; } }