PluginProbe
WebTotem Security / 2.1.8
WebTotem Security v2.1.8
3.0.1 3.0.0 trunk 1.0 1.1 1.2 1.3 1.3.1 1.3.2 1.3.3 2.0 2.1 2.1.1 2.1.2 2.1.3 2.1.4 2.1.5 2.1.6 2.1.7 2.1.8 2.1.9 2.2.1 2.2.2 2.2.3 2.2.4 All 109 releases
wt-security / htdocs / css / main.css

main.css in WebTotem Security 2.1.8, at htdocs/css/main.css

2,878 lines 58.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 @charset "UTF-8";
2 .wtotem_body *,
3 .wtotem_body *:after,
4 .wtotem_body *:before {
5 margin: 0;
6 padding: 0;
7 outline: none;
8 box-sizing: border-box;
9 }
10
11 .wtotem_body {
12 line-height: 24px;
13 font-family: "Inter", sans-serif;
14 font-size: 14px;
15 color: #5e6977;
16 font-weight: 400;
17 }
18
19 .wtotem_body ol,
20 .wtotem_body ul {
21 list-style: none;
22 }
23
24 .wtotem_body a {
25 text-decoration: none;
26 }
27
28 .wtotem_body a:hover {
29 text-decoration: none;
30 }
31
32 .wtotem_body h1,
33 .wtotem_body h2,
34 .wtotem_body h3,
35 .wtotem_body h4,
36 .wtotem_body h5 {
37 color: #5e6977;
38 font-weight: 700;
39 }
40
41 .wtotem_container {
42 max-width: 1020px;
43 margin: 0 auto;
44 }
45
46 .wtotem_title-info__title {
47 font-size: 14px;
48 text-transform: uppercase;
49 }
50
51 .wtotem_title-info__info {
52 background: url("../img/info-gray.svg") no-repeat center center/cover;
53 display: inline-block;
54 vertical-align: middle;
55 width: 17px;
56 height: 17px;
57 margin-top: -2px;
58 }
59
60 .title {
61 font-size: 24px;
62 font-weight: 700;
63 }
64
65 .section-header-mb {
66 margin-bottom: 25px;
67 }
68
69 .arrow-right {
70 color: #3d50df;
71 cursor: pointer;
72 display: flex;
73 align-items: center;
74 }
75 .arrow-right:after {
76 content: "";
77 border: solid #3d50df;
78 border-width: 0 1px 1px 0;
79 display: inline-block;
80 padding: 3px;
81 transform: rotate(-45deg);
82 -webkit-transform: rotate(-45deg);
83 margin-left: 10px;
84 }
85
86 .wtotem_print {
87 display: flex;
88 align-items: center;
89 cursor: pointer;
90 }
91 .wtotem_print__img {
92 display: block;
93 width: 17px;
94 height: 17px;
95 margin-right: 10px;
96 background: url("../img/print.svg") no-repeat center center/cover;
97 }
98 .wtotem_print__label {
99 color: #86939e;
100 }
101
102 .wt_card {
103 box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
104 border-radius: 4px;
105 background: #fff;
106 }
107
108 /* 576-768px sm Small */
109 @media screen and (max-width: 768px) {
110 .section-header-mb {
111 margin-bottom: 20px;
112 }
113 .arrow-right:after {
114 margin-left: 5px;
115 }
116 }
117
118 .wtotem_header {
119 position: relative;
120 z-index: 4;
121 width: 100%;
122 top: 0;
123 left: 0;
124 }
125 .wtotem_header__body {
126 display: flex;
127 justify-content: space-between;
128 align-items: center;
129 }
130 .wtotem_header:before {
131 content: "";
132 position: absolute;
133 top: 0;
134 left: 0;
135 width: 100%;
136 height: 100%;
137 background: #fff;
138 z-index: 2;
139 }
140
141 .wtotem_version {
142 position: relative;
143 z-index: 100;
144 display: flex;
145 align-items: center;
146 }
147 .wtotem_version__count {
148 width: 28px;
149 height: 18px;
150 display: flex;
151 justify-content: center;
152 align-items: center;
153 font-size: 10px;
154 font-weight: 500;
155 border: 1px solid #3d50df;
156 border-radius: 4px;
157 margin-left: 8px;
158 }
159
160 .wtotem_logo {
161 width: 113px;
162 height: 24px;
163 background: url("../img/logo.svg") no-repeat center center/cover;
164 }
165
166 .wtotem_nav {
167 position: relative;
168 z-index: 3;
169 height: 70px;
170 }
171 .wtotem_nav__menu {
172 display: flex;
173 height: 100%;
174 }
175 .wtotem_nav__link {
176 position: relative;
177 display: flex;
178 align-items: center;
179 height: 100%;
180 font-size: 14px;
181 color: #5e6977;
182 font-weight: 500;
183 padding: 0 16px;
184 }
185 .wtotem_nav__link_active {
186 color: #3d50df;
187 }
188 .wtotem_nav__link_active:before {
189 content: "";
190 position: absolute;
191 bottom: 0;
192 right: 0;
193 left: 0;
194 background: #3d50df;
195 height: 3px;
196 }
197
198 .wtotem_chart__wrapper {
199 display: flex;
200 }
201
202 .wtotem_filter__wrapper {
203 display: flex;
204 justify-content: flex-end;
205 }
206
207 .wtotem_chart__calendars {
208 display: flex;
209 background: #f3f5f6;
210 border-radius: 5px;
211 align-items: center;
212 padding: 10px 8px;
213 margin-right: 7px;
214 }
215
216 .wtotem_calendar-icon {
217 background: url(../img/shape.svg) no-repeat center center / cover;
218 display: block;
219 width: 14px;
220 height: 14px;
221 margin-right: 3px;
222 }
223
224 input.wtotem_calendar {
225 background: transparent;
226 border: none;
227 color: #5e6977;
228 width: 125px;
229 cursor: pointer;
230 text-align: center;
231 }
232
233 input.wtotem_calendar:focus{
234 border: none;
235 box-shadow: none;
236 outline: 0;
237 }
238
239
240 .wtotem_calendar-connect {
241 margin: 0 3px;
242 }
243
244 .numInputWrapper span {
245 opacity: 1;
246 right: 2.5px;
247 }
248
249 .numInputWrapper span.arrowUp {
250 top: 15%;
251 }
252
253 .numInputWrapper span.arrowDown {
254 top: 35%;
255 }
256
257 .flatpickr-calendar {
258 font-family: "Inter", sans-serif;
259 width: 225px;
260 padding: 5px;
261 border: 2px solid #e1e8ee;
262 box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
263 border-radius: 5px;
264 margin-top: 10px;
265 /*top: 382px !important;*/
266 }
267
268 .flatpickr-calendar.arrowTop:before {
269 border: 5px solid transparent;
270 border-bottom: 5px solid #e1e8ee;
271 top: -12px;
272 }
273
274 .flatpickr-calendar.arrowTop:after {
275 border: 5px solid transparent;
276 border-bottom: 5px solid #e1e8ee;
277 top: -12px;
278 }
279
280 .dayContainer {
281 justify-content: flex-start;
282 width: 225px;
283 min-width: 225px;
284 max-width: 225px;
285 align-items: center;
286 }
287
288 .flatpickr-days {
289 width: 225px;
290 }
291
292 .flatpickr-weekdays {
293 display: none;
294 }
295
296 .flatpickr-day {
297 border-radius: 0;
298 font-size: 12px;
299 max-width: 29px;
300 font-weight: 500;
301 color: #5e6977;
302 margin-bottom: 12px;
303 line-height: 5px;
304 height: 20px;
305 display: flex;
306 align-items: center;
307 justify-content: center;
308 }
309
310 .flatpickr-day:nth-last-child(-n + 7) {
311 margin-bottom: 0;
312 }
313
314 .flatpickr-day.today,
315 .flatpickr-day.today.inRange {
316 color: #393939;
317 }
318
319 .flatpickr-day.today.selected {
320 color: #fff;
321 }
322
323 .flatpickr-day.inRange,
324 .flatpickr-day.today.inRange {
325 background: #e1e8ee;
326 box-shadow: none;
327 margin-top: 0;
328 }
329
330 .flatpickr-day.selected,
331 .flatpickr-day.endRange,
332 .flatpickr-day.startRange {
333 background: #3d50df;
334 border-radius: 5px 5px 5px 5px !important;
335 }
336
337 .flatpickr-day.selected,
338 .flatpickr-day.startRange,
339 .flatpickr-day.endRange,
340 .flatpickr-day.selected.inRange,
341 .flatpickr-day.startRange.inRange,
342 .flatpickr-day.endRange.inRange,
343 .flatpickr-day.selected:focus,
344 .flatpickr-day.startRange:focus,
345 .flatpickr-day.endRange:focus,
346 .flatpickr-day.selected:hover,
347 .flatpickr-day.startRange:hover,
348 .flatpickr-day.endRange:hover,
349 .flatpickr-day.selected.prevMonthDay,
350 .flatpickr-day.startRange.prevMonthDay,
351 .flatpickr-day.endRange.prevMonthDay,
352 .flatpickr-day.selected.nextMonthDay,
353 .flatpickr-day.startRange.nextMonthDay,
354 .flatpickr-day.endRange.nextMonthDay {
355 background: #3d50df;
356 border-radius: 5px 5px 5px 5px !important;
357 height: 24px;
358 }
359
360 .flatpickr-months .flatpickr-prev-month,
361 .flatpickr-months .flatpickr-next-month {
362 display: none;
363 }
364
365 .flatpickr-current-month .flatpickr-monthDropdown-months {
366 width: 93px;
367 height: 31px;
368 padding: 6px 10px 7px;
369 border: 1.6px solid #e1e8ee;
370 border-radius: 2px;
371 }
372
373 .flatpickr-monthDropdown-months,
374 .flatpickr-current-month input.cur-year {
375 width: 93px;
376 height: 31px;
377 padding: 6px 10px 7px;
378 border: 1.6px solid #e1e8ee;
379 border-radius: 2px;
380 }
381
382 .flatpickr-current-month .numInputWrapper {
383 width: 93px;
384 }
385
386 .numInputWrapper span {
387 border: none;
388 }
389
390 .numInputWrapper span:hover {
391 background: transparent;
392 }
393
394 .flatpickr-current-month .numInputWrapper span.arrowDown:after,
395 .flatpickr-current-month .numInputWrapper span.arrowUp:after {
396 border-top-color: rgba(134, 147, 158, 1);
397 border-bottom-color: rgba(134, 147, 158, 1);
398 }
399
400 .flatpickr-month {
401 text-align-last: left;
402 margin-bottom: 13px;
403 position: relative;
404 }
405
406 .flatpickr-month:after {
407 content: "";
408 display: block;
409 border: 4px solid transparent;
410 border-top: 4px solid #86939e;
411 position: absolute;
412 right: 60%;
413 top: 43%;
414 }
415
416 .flatpickr-current-month {
417 left: 0;
418 width: 205px;
419 padding: 0;
420 display: flex;
421 align-items: center;
422 justify-content: space-between;
423 }
424
425 .flatpickr-monthDropdown-months,
426 .flatpickr-current-month input.cur-year {
427 -webkit-appearance: none !important;
428 -moz-appearance: none !important;
429 appearance: none !important;
430 color: #5e6977 !important;
431 font-size: 12px !important;
432 }
433
434 .flatpickr-current-month .numInputWrapper {
435 }
436
437 /* 576-768px sm Small */
438 @media screen and (max-width: 768px) {
439 body.lock {
440 overflow: hidden;
441 }
442 .wtotem_version {
443 position: relative;
444 z-index: 3;
445 }
446 .wtotem_header__body {
447 height: 65px;
448 }
449 .wtotem_nav {
450 position: fixed;
451 top: -100%;
452 left: 0;
453 width: 100%;
454 height: 100%;
455 background: #f3f5f6;
456 display: block;
457 padding-top: 65px;
458 transition: all 0.3s ease-in-out;
459 overflow: auto;
460 z-index: 1;
461 }
462 .wtotem_nav__menu {
463 display: block;
464 }
465 .wtotem_nav__item {
466 border-bottom: 1px solid #eceff4;
467 }
468 .wtotem_nav__link {
469 height: auto;
470 display: block;
471 color: #1d293f;
472 font-size: 24px;
473 padding: 22px 0;
474 width: 540px;
475 margin: 0 auto;
476 }
477 .wtotem_nav__link_active {
478 color: #3d50df;
479 }
480 .wtotem_nav__link_active:before {
481 display: none;
482 }
483 .wtotem_nav.active {
484 top: 0;
485 }
486 .wtotem_burger {
487 position: relative;
488 width: 23px;
489 height: 18px;
490 display: flex;
491 align-items: center;
492 justify-content: flex-end;
493 cursor: pointer;
494 z-index: 3;
495 }
496 .wtotem_burger:before,
497 .wtotem_burger__middle-line,
498 .wtotem_burger:after {
499 content: "";
500 background: #3d50df;
501 height: 2px;
502 display: block;
503 right: 0;
504 border-radius: 100px;
505 transition: all 0.3s ease-in-out;
506 }
507 .wtotem_burger:before {
508 position: absolute;
509 width: 23px;
510 top: 0;
511 }
512 .wtotem_burger__middle-line {
513 width: 18px;
514 }
515 .wtotem_burger:after {
516 position: absolute;
517 width: 14px;
518 bottom: 0;
519 }
520 .wtotem_burger.active .wtotem_burger__middle-line {
521 transform: scale(0);
522 }
523 .wtotem_burger.active:before {
524 transform: rotate(45deg);
525 top: 8px;
526 }
527 .wtotem_burger.active:after {
528 transform: rotate(-45deg);
529 width: 100%;
530 bottom: 8px;
531 }
532 }
533
534 /* 320-576px Extra small */
535 @media screen and (max-width: 576px) {
536 .wtotem_nav__link {
537 width: 345px;
538 margin: 0 auto;
539 }
540 }
541
542 /* 320-375px Extra small */
543 @media screen and (max-width: 375px) {
544 .wtotem_nav__link {
545 padding-left: 10px;
546 }
547 }
548
549 @media screen and (max-width: 768px) {
550 .wtotem_theme—dark .wtotem_nav {
551 background: #191919;
552 }
553 .wtotem_theme—dark .wtotem_nav__item {
554 border-bottom: 1px solid #3c3c3d;
555 }
556 }
557
558 .wtotem_footer {
559 padding-top: 18px;
560 padding-bottom: 20px;
561 background: #f3f5f6;
562 }
563 .wtotem_footer__first {
564 display: flex;
565 justify-content: space-between;
566 align-items: center;
567 margin-bottom: 21px;
568 }
569 .wtotem_footer__caption {
570 display: flex;
571 align-items: center;
572 }
573 .wtotem_footer__logo {
574 margin-right: 12px;
575 background: url("../img/logo-blue.svg") no-repeat center center/cover;
576 width: 20px;
577 height: 32px;
578 }
579 .wtotem_footer__text {
580 font-size: 12px;
581 color: #5e6977;
582 line-height: 12px;
583 font-weight: 500;
584 }
585 .wtotem_footer__contacts {
586 width: 200px;
587 display: flex;
588 justify-content: space-between;
589 }
590 .wtotem_footer__link {
591 font-weight: 500;
592 }
593 .wtotem_footer__line {
594 height: 1px;
595 background: #e1e8ee;
596 margin-bottom: 26px;
597 }
598 .wtotem_footer__bottom {
599 display: flex;
600 justify-content: space-between;
601 align-items: center;
602 }
603 .wtotem_footer__left {
604 display: flex;
605 justify-content: space-between;
606 align-items: center;
607 width: 255px;
608 }
609 .wtotem_footer__text {
610 font-size: 12px;
611 font-weight: 500;
612 color: #5e6977;
613 }
614 .wtotem_footer__store {
615 margin-bottom: -5px;
616 }
617 .wtotem_footer__app-store {
618 width: 19px;
619 height: 19px;
620 background: url("../img/app-store.svg") no-repeat center center/cover;
621 }
622 .wtotem_footer__play-store {
623 width: 17px;
624 height: 19px;
625 background: url("../img/play-store.svg") no-repeat center center/cover;
626 }
627 .wtotem_footer__soc-link {
628 margin-right: 20px;
629 }
630 .wtotem_footer__soc-link:last-child {
631 margin-right: 0;
632 }
633 .wtotem_footer__payment {
634 width: 166px;
635 display: flex;
636 justify-content: space-between;
637 align-items: center;
638 }
639
640 /* 576-768px sm Small */
641 @media screen and (max-width: 768px) {
642 .wtotem_footer__store,
643 .wtotem_footer__soc,
644 .wtotem_footer__payment,
645 .wtotem_footer__line {
646 display: none;
647 }
648 .wtotem_footer__caption,
649 .wtotem_footer__left,
650 .wtotem_footer__text {
651 margin: 0 auto;
652 }
653 .wtotem_footer__caption {
654 flex-direction: column;
655 }
656 .wtotem_footer__logo {
657 margin-bottom: 18px;
658 }
659 }
660
661 /* 320-576px Extra small */
662 .wtotem_content {
663 padding-top: 37px;
664 padding-bottom: 20px;
665 background: #f3f5f6;
666 }
667
668 .wtotem_first {
669 margin-bottom: 37px;
670 display: flex;
671 justify-content: space-between;
672 }
673
674 .wtotem_overall {
675 padding: 21px 8px 30px 24px;
676 width: 49%;
677 }
678 .wtotem_overall__title .wtotem_title-info__title {
679 text-transform: none;
680 font-size: 18px;
681 }
682 .wtotem_overall__body {
683 display: flex;
684 justify-content: space-between;
685 align-items: center;
686 margin-top: 21px;
687 }
688 .wtotem_overall__inner {
689 display: flex;
690 align-items: center;
691 }
692 .wtotem_overall__rectangle {
693 width: 74px;
694 height: 50px;
695 background: #d56c6a;
696 color: #fff;
697 font-size: 32px;
698 font-weight: 700;
699 display: flex;
700 align-items: center;
701 justify-content: center;
702 margin-right: 10px;
703 }
704 .wtotem_overall__figures {
705 color: #d56c6a;
706 font-size: 42px;
707 font-weight: 700;
708 }
709 .wtotem_overall__text {
710 font-size: 16px;
711 color: #86939e;
712 width: 267px;
713 }
714
715 .wtotem_info {
716 display: flex;
717 width: 49%;
718 }
719 .wtotem_info__item {
720 padding: 23px 29px;
721 }
722 .wtotem_info__item:first-child {
723 border-right: 1px solid #f3f5f6;
724 }
725 .wtotem_info__block {
726 margin-bottom: 10px;
727 }
728 .wtotem_info__subtitle {
729 font-size: 14px;
730 color: #86939e;
731 margin-bottom: 3px;
732 }
733 .wtotem_info__info {
734 font-size: 14px;
735 color: #5e6977;
736 }
737 .wtotem_info__scoring {
738 height: 51px;
739 display: flex;
740 align-items: center;
741 justify-content: center;
742 }
743
744 /* 992-1100px lg Large */
745 @media screen and (max-width: 1100px) {
746 .wtotem_overall {
747 width: 49%;
748 }
749 .wtotem_overall__body {
750 flex-direction: column;
751 align-items: flex-start;
752 }
753 .wtotem_overall__inner {
754 margin-bottom: 15px;
755 }
756 .wtotem_overall__text {
757 width: 100%;
758 }
759 .wtotem_info {
760 width: 49%;
761 }
762 }
763
764 /* 768-992px md Medium */
765 @media screen and (max-width: 992px) {
766 .wtotem_info {
767 align-items: center;
768 }
769 .wtotem_info__item {
770 padding: 13px 20px;
771 }
772 }
773
774 /* 576-768px sm Small */
775 @media screen and (max-width: 768px) {
776 .wtotem_first {
777 flex-direction: column;
778 margin-bottom: 20px;
779 }
780 .wtotem_overall {
781 width: 100%;
782 margin-bottom: 10px;
783 }
784 .wtotem_info {
785 width: 100%;
786 }
787 .wtotem_info__item {
788 width: 100%;
789 }
790 .wtotem_info__scoring {
791 justify-content: flex-start;
792 }
793 }
794
795 /* 320-576px Extra small */
796 @media screen and (max-width: 576px) {
797 .wtotem_overall {
798 padding-left: 22px;
799 padding-right: 22px;
800 }
801 .wtotem_info {
802 width: 100%;
803 flex-direction: column;
804 padding: 13px 22px 13px 22px;
805 }
806 .wtotem_info__item {
807 width: 100%;
808 padding: 0;
809 }
810 .wtotem_info__item:first-child {
811 border-right: none;
812 }
813 .wtotem_info__block {
814 margin-bottom: 20px;
815 }
816 .wtotem_info__scoring {
817 justify-content: flex-start;
818 height: auto;
819 }
820 }
821
822 .wtotem_firewall {
823 margin-bottom: 20px;
824 }
825 .wtotem_firewall__first {
826 display: flex;
827 justify-content: space-between;
828 }
829 .wtotem_firewall__stats {
830 display: flex;
831 align-items: center;
832 }
833 .wtotem_firewall__icon {
834 display: block;
835 width: 14px;
836 height: 14px;
837 margin-right: 10px;
838 background: url("../img/shape.svg") no-repeat center center/cover;
839 }
840 .wtotem_firewall__text {
841 color: #86939e;
842 }
843 .wtotem_firewall__block {
844 display: flex;
845 justify-content: space-between;
846 }
847
848 .wtotem_numbers {
849 width: 49%;
850 display: flex;
851 justify-content: space-between;
852 align-items: center;
853 }
854 .wtotem_numbers__item {
855 text-align: center;
856 width: 33.3333333333%;
857 height: 100%;
858 display: flex;
859 flex-direction: column;
860 justify-content: center;
861 border-right: 1px solid #f3f5f6;
862 }
863 .wtotem_numbers__item:last-child {
864 border-right: none;
865 }
866 .wtotem_numbers__title {
867 line-height: 18px;
868 color: #86939e;
869 margin-bottom: 15px;
870 }
871 .wtotem_numbers__figures {
872 color: #1d293f;
873 font-size: 32px;
874 font-weight: 700;
875 }
876
877 .wtotem_from {
878 width: 49%;
879 display: flex;
880 align-items: center;
881 padding: 17px 23px;
882 }
883 .wtotem_from__arrow-right {
884 margin-left: auto;
885 border: solid #5e6977;
886 border-width: 0 1.5px 1.5px 0;
887 display: inline-block;
888 padding: 6px;
889 transform: rotate(-45deg);
890 -webkit-transform: rotate(-45deg);
891 }
892 .wtotem_from__svg-wrap {
893 position: relative;
894 display: flex;
895 align-items: center;
896 }
897 .wtotem_from__svg-wrap:after {
898 content: "";
899 position: absolute;
900 top: 0;
901 left: 0;
902 z-index: 2;
903 width: 69.5px;
904 height: 69.5px;
905 border-radius: 100%;
906 border: 13.3px solid #f3f5f6;
907 margin-top: 1px;
908 }
909 .wtotem_from__progress {
910 position: relative;
911 z-index: 3;
912 width: 71px;
913 height: 71px;
914 }
915 .wtotem_from__circle {
916 stroke-width: 15px;
917 stroke: #3d50df;
918 fill: transparent;
919 transform-origin: center;
920 transform: rotate(-90deg);
921 transition: stroke-dashoffset 0.3s;
922 stroke-dashoffset: 0;
923 }
924 .wtotem_from__percent {
925 position: absolute;
926 display: block;
927 width: 33px;
928 top: 33%;
929 left: 29%;
930 font-weight: 700;
931 font-size: 12px;
932 text-align: center;
933 }
934 .wtotem_from__info {
935 margin-left: 18px;
936 }
937 .wtotem_from__title {
938 color: #86939e;
939 margin-bottom: 9px;
940 }
941 .wtotem_from__country {
942 font-size: 18px;
943 color: #1d293f;
944 line-height: 18px;
945 }
946 .wtotem_from__country span {
947 color: #3d50df;
948 }
949
950 /* 992-1100px lg Large */
951 @media screen and (max-width: 1100px) {
952 .wtotem_numbers,
953 .wtotem_from {
954 width: 49%;
955 }
956 }
957
958 /* 768-992px md Medium */
959 /* 576-768px sm Small */
960 @media screen and (max-width: 768px) {
961 .wtotem_firewall__block {
962 flex-direction: column;
963 }
964 .wtotem_numbers,
965 .wtotem_from {
966 width: 100%;
967 }
968 .wtotem_numbers {
969 height: 104px;
970 margin-bottom: 10px;
971 }
972 .wtotem_from__country {
973 font-size: 14px;
974 }
975 }
976
977 /* 320-576px Extra small */
978 @media screen and (max-width: 576px) {
979 .wtotem_numbers {
980 display: flex;
981 flex-wrap: wrap;
982 width: 345px;
983 height: 217px;
984 }
985 .wtotem_numbers__item {
986 width: 172.5px;
987 height: 108.5px;
988 }
989 .wtotem_numbers__item:last-child {
990 border-right: 1px solid #f3f5f6;
991 }
992 }
993
994 /* 320-375px Extra small */
995 @media screen and (max-width: 374px) {
996 .wtotem_numbers {
997 width: 300px;
998 }
999 .wtotem_numbers__item {
1000 width: 150px;
1001 }
1002 }
1003
1004 .wtotem_chart {
1005 background: #fff;
1006 padding: 13px 0 19px 0;
1007 }
1008
1009 .wtotem_chart-first {
1010 display: flex;
1011 justify-content: space-between;
1012 align-items: center;
1013 padding: 0 26px;
1014 }
1015 .wtotem_chart-first__left {
1016 display: flex;
1017 align-items: center;
1018 }
1019 .wtotem_chart-first__all {
1020 color: #3d50df;
1021 margin-right: 10px;
1022 }
1023 .wtotem_chart-first__hack {
1024 margin-right: 15px;
1025 display: flex;
1026 align-items: center;
1027 }
1028 .wtotem_chart-first__hack p {
1029 color: #86939e;
1030 }
1031 .wtotem_chart-first__hack span {
1032 display: block;
1033 width: 7px;
1034 height: 7px;
1035 border-radius: 100px;
1036 margin-right: 7px;
1037 }
1038 .wtotem_chart-first__hack_attack span {
1039 background: #d56c6a;
1040 }
1041 .wtotem_chart-first__hack_blocked span {
1042 background: #bace3d;
1043 }
1044 .wtotem_chart-first__right {
1045 display: flex;
1046 background: #f3f5f6;
1047 /*width: 202px;*/
1048 height: 45px;
1049 align-items: center;
1050 justify-content: space-between;
1051 padding: 0 6px;
1052 border-radius: 5px;
1053 }
1054 .wtotem_chart-first__btn {
1055 display: flex;
1056 justify-content: center;
1057 align-items: center;
1058 width: 65px;
1059 height: 31px;
1060 border-radius: 4px;
1061 color: #5e6977;
1062 cursor: pointer;
1063 }
1064 .wtotem_chart-first__btn_active {
1065 background: #fff;
1066 color: #3d50df;
1067 }
1068
1069 .wtotem_chart {
1070 margin-bottom: 30px;
1071 }
1072 .wtotem_chart__diagram {
1073 height: 251px;
1074 }
1075 .wtotem_chart__line {
1076 width: 100%;
1077 height: 1px;
1078 background: #f3f5f6;
1079 margin-bottom: 16px;
1080 }
1081 .wtotem_chart__last {
1082 display: flex;
1083 justify-content: space-between;
1084 align-items: center;
1085 padding: 0 26px;
1086 }
1087 .wtotem_chart__text {
1088 font-weight: 500;
1089 }
1090 .wtotem_chart__text a {
1091 color: #3d50df;
1092 }
1093 .wtotem_chart__btn {
1094 background: none;
1095 border: 1px solid #3d50df;
1096 border-radius: 4px;
1097 display: block;
1098 width: 136px;
1099 display: flex;
1100 align-items: center;
1101 justify-content: center;
1102 padding: 7px 5px;
1103 color: #3d50df;
1104 cursor: pointer;
1105 }
1106
1107 .wtotem_data {
1108 padding: 0 26px;
1109 }
1110 .wtotem_data__thead {
1111 margin-bottom: 15px;
1112 }
1113 .wtotem_data__tr {
1114 display: flex;
1115 justify-content: space-between;
1116 }
1117 .wtotem_data__th {
1118 color: #5e6977;
1119 font-weight: 500;
1120 font-size: 12px;
1121 }
1122 .wtotem_data__th:last-child {
1123 text-align: right;
1124 }
1125 .wtotem_data__td {
1126 font-size: 12px;
1127 font-weight: 500;
1128 color: #86939e;
1129 margin-bottom: 20px;
1130 }
1131 .wtotem_data__td_blocked:before {
1132 content: "";
1133 width: 4px;
1134 height: 4px;
1135 border-radius: 100px;
1136 background: #bace3d;
1137 display: block;
1138 }
1139 .wtotem_data__td_banned:before {
1140 content: "";
1141 width: 4px;
1142 height: 4px;
1143 border-radius: 100px;
1144 background: #d56c6a;
1145 display: block;
1146 }
1147 .wtotem_data__td:first-child {
1148 display: flex;
1149 align-items: center;
1150 }
1151 .wtotem_data__td:nth-child(2) {
1152 display: flex;
1153 align-items: center;
1154 }
1155 .wtotem_data__td:last-child {
1156 text-align: right;
1157 color: #d56c6a;
1158 }
1159 .wtotem_data__ip {
1160 margin-left: 10px;
1161 }
1162 .wtotem_data__img {
1163 width: 23px;
1164 height: 13px;
1165 margin-right: 6px;
1166 }
1167 .wtotem_data__flag {
1168 display: block;
1169 width: 100%;
1170 }
1171 .wtotem_data_width_1 {
1172 width: 13%;
1173 }
1174 .wtotem_data_width_2 {
1175 width: 10%;
1176 }
1177 .wtotem_data_width_3 {
1178 width: 14%;
1179 }
1180 .wtotem_data_width_4 {
1181 width: 24%;
1182 }
1183 .wtotem_data_width_5 {
1184 width: 29%;
1185 }
1186 .wtotem_data_width_6 {
1187 width: 11%;
1188 }
1189
1190 /* 768-992px md Medium */
1191 @media screen and (max-width: 992px) {
1192 .wtotem_data__th:nth-last-child(-n + 3),
1193 .wtotem_data__td:nth-last-child(-n + 3) {
1194 display: none;
1195 }
1196 .wtotem_data__th,
1197 .wtotem_data__td {
1198 width: 32%;
1199 }
1200 .wtotem_data__th:nth-child(3),
1201 .wtotem_data__td:nth-child(3) {
1202 width: 36%;
1203 }
1204 }
1205
1206 /* 576-768px sm Small */
1207 /* 320-576px Extra small */
1208 @media screen and (max-width: 576px) {
1209 .wtotem_data {
1210 padding: 0 16px;
1211 }
1212 .wtotem_chart-first {
1213 flex-direction: column;
1214 align-items: flex-start;
1215 }
1216 .wtotem_chart-first__left {
1217 margin-bottom: 20px;
1218 }
1219 .wtotem_chart-first__right {
1220 width: 100%;
1221 }
1222 }
1223
1224 /* 320-375px Extra small */
1225 @media screen and (max-width: 375px) {
1226 .wtotem_data__th,
1227 .wtotem_data__td {
1228 width: 33% !important;
1229 }
1230 .wtotem_data__ip {
1231 margin-left: 5px;
1232 }
1233 }
1234
1235 .wtotem_antivirus {
1236 margin-bottom: 30px;
1237 }
1238 .wtotem_antivirus__first {
1239 display: flex;
1240 justify-content: space-between;
1241 align-items: center;
1242 }
1243 .wtotem_antivirus__block {
1244 display: flex;
1245 justify-content: space-between;
1246 align-items: center;
1247 width: 100%;
1248 background: #fff;
1249 border-radius: 4px;
1250 }
1251 .wtotem_antivirus__item {
1252 width: 25%;
1253 height: 100.5px;
1254 text-align: center;
1255 display: flex;
1256 align-items: center;
1257 justify-content: center;
1258 flex-direction: column;
1259 border-right: 1px solid #f3f5f6;
1260 }
1261 .wtotem_antivirus__item:last-child {
1262 border-right: none;
1263 }
1264 .wtotem_antivirus__figures {
1265 font-size: 32px;
1266 font-weight: 700;
1267 margin-bottom: 18px;
1268 }
1269 .wtotem_antivirus__figures_green {
1270 color: #bace3d;
1271 }
1272 .wtotem_antivirus__figures_yellow {
1273 color: #e9cf73;
1274 }
1275 .wtotem_antivirus__figures_orange {
1276 color: #d56c6a;
1277 }
1278 .wtotem_antivirus__figures_black {
1279 color: #1d293f;
1280 }
1281 .wtotem_antivirus__title {
1282 color: #86939e;
1283 line-height: 18px;
1284 }
1285
1286 /* 320-576px Extra small */
1287 @media screen and (max-width: 576px) {
1288 .wtotem_antivirus__block {
1289 flex-wrap: wrap;
1290 }
1291 .wtotem_antivirus__item {
1292 width: 172.5px;
1293 border-bottom: 1px solid #f3f5f6;
1294 }
1295 .wtotem_antivirus__item:last-child {
1296 border-right: none;
1297 border-bottom: none;
1298 }
1299 .wtotem_antivirus__item:nth-child(2) {
1300 border-right: none;
1301 }
1302 .wtotem_antivirus__item:nth-child(3) {
1303 border-bottom: none;
1304 }
1305 }
1306
1307 /* 320-375px */
1308 @media screen and (max-width: 375px) {
1309 .wtotem_antivirus__item {
1310 width: 150px;
1311 }
1312 }
1313
1314 .wtotem_monitoring {
1315 margin-bottom: 30px;
1316 }
1317
1318 .wtotem_table__row {
1319 display: flex;
1320 width: 100%;
1321 }
1322
1323 .wtotem_table__col {
1324 width: 33.3333333333%;
1325 border-right: 1px solid #f3f5f6;
1326 border-bottom: 1px solid #f3f5f6;
1327 }
1328 .wtotem_table__col:last-child {
1329 border-right: none;
1330 }
1331
1332 .wtotem_table__th,
1333 .wtotem_table__td,
1334 .wtotem_table__info {
1335 padding: 15px 15px;
1336 }
1337
1338 .wtotem_table__th,
1339 .wtotem_table__td {
1340 border-bottom: 1px solid #f3f5f6;
1341 }
1342
1343 .wtotem_table__td {
1344 display: flex;
1345 justify-content: space-between;
1346 align-items: center;
1347 height: 64px;
1348 }
1349
1350 .wtotem_table__item {
1351 height: 110px;
1352 display: flex;
1353 align-items: center;
1354 justify-content: center;
1355 }
1356
1357 .wtotem_table__expired {
1358 color: #d56c6a;
1359 }
1360
1361 .wtotem_table__solve {
1362 color: #3d50df;
1363 }
1364
1365 .wtotem_table__info {
1366 height: 55px;
1367 display: flex;
1368 justify-content: space-between;
1369 }
1370
1371 .wtotem_table__subject {
1372 font-size: 14px;
1373 text-transform: uppercase;
1374 }
1375
1376 .wtotem_table__status {
1377 text-transform: uppercase;
1378 }
1379 .wtotem_table__status_green {
1380 color: #4bc374;
1381 }
1382 .wtotem_table__status_yellow {
1383 color: #dcb320;
1384 text-transform: none;
1385 }
1386
1387 .wtotem_table__text {
1388 color: #86939e;
1389 font-weight: 500;
1390 }
1391
1392 .wtotem_table__perfomance {
1393 font-weight: 500;
1394 color: #5e6977;
1395 }
1396 .wtotem_table__perfomance span {
1397 color: #3d50df;
1398 }
1399
1400 .wtotem_table__wrap {
1401 width: 30px;
1402 height: 30px;
1403 }
1404 .wtotem_table__wrap_big {
1405 width: 56px;
1406 height: 56px;
1407 }
1408
1409 .wtotem_table__img {
1410 width: 100%;
1411 display: block;
1412 }
1413
1414 .wtotem_table__link {
1415 display: flex;
1416 justify-content: space-between;
1417 align-items: center;
1418 padding: 13px 16px;
1419 }
1420 .wtotem_table__link:after {
1421 content: "";
1422 border: solid #5e6977;
1423 border-width: 0 1.5px 1.5px 0;
1424 display: inline-block;
1425 padding: 4px;
1426 transform: rotate(-45deg);
1427 -webkit-transform: rotate(-45deg);
1428 }
1429
1430 .wtotem_table__right_progress-wrap {
1431 width: 167px;
1432 margin-top: -21px;
1433 }
1434
1435 .wtotem_table__stick-progress {
1436 position: relative;
1437 background: #3d50df;
1438 width: 96px;
1439 height: 7px;
1440 border-radius: 100px;
1441 }
1442 .wtotem_table__stick-progress:after {
1443 content: "";
1444 position: absolute;
1445 top: 0;
1446 left: 0;
1447 width: 167px;
1448 height: 7px;
1449 opacity: 0.1;
1450 border-radius: 100px;
1451 background: #5e6977;
1452 }
1453
1454 .wtotem_table__initial-value {
1455 font-size: 10px;
1456 font-weight: 500;
1457 color: #5e6977;
1458 }
1459
1460 .wtotem_table__message {
1461 position: absolute;
1462 top: -20px;
1463 right: -12px;
1464 z-index: 50;
1465 width: 30px;
1466 height: 15px;
1467 border-radius: 2px;
1468 background: #3d50df;
1469 font-size: 10px;
1470 font-weight: 500;
1471 text-align: center;
1472 color: #fff;
1473 display: flex;
1474 justify-content: center;
1475 align-items: center;
1476 }
1477
1478 .wtotem_table__triangle {
1479 position: absolute;
1480 z-index: -1;
1481 top: 55%;
1482 left: 40%;
1483 width: 8.5px;
1484 height: 8.5px;
1485 display: block;
1486 border-radius: 1px;
1487 transform: rotate(45deg);
1488 background: #3d50df;
1489 margin: 0 auto;
1490 }
1491
1492 /* 992-1100px lg Large */
1493 /* 768-992px md Medium */
1494 @media screen and (max-width: 992px) {
1495 .wtotem_table__row {
1496 flex-direction: column;
1497 }
1498 .wtotem_table__col {
1499 width: 100%;
1500 border-right: none !important;
1501 }
1502 }
1503
1504 /* 576-768px sm Small */
1505 /* 320-576px Extra small */
1506 /* 320-375px Extra small */
1507 @media screen and (max-width: 375px) {
1508 .wtotem_table__perfomance_long {
1509 width: 210px;
1510 }
1511 .wtotem_chart-first {
1512 padding: 0 16px;
1513 }
1514 }
1515
1516 .wtotem_map__first {
1517 display: flex;
1518 justify-content: space-between;
1519 }
1520
1521 .wtotem_state {
1522 border-radius: 4px;
1523 }
1524
1525 .wtotem_state {
1526 background: #fff;
1527 padding: 13px 0 26px 0;
1528 }
1529 .wtotem_state__select-wrapper {
1530 position: relative;
1531 margin-bottom: 15px;
1532 width: 190px;
1533 cursor: pointer;
1534 }
1535 .wtotem_state__select-wrapper:after {
1536 content: "";
1537 position: absolute;
1538 top: 45%;
1539 right: 0;
1540 border-style: solid;
1541 border-width: 5px 5px 0 5px;
1542 border-color: #86939e transparent transparent transparent;
1543 border-radius: 50px;
1544 }
1545 .wtotem_state__select {
1546 display: block;
1547 margin-left: 18px;
1548 width: 100%;
1549 padding: 8px 12px 8px 12px;
1550 color: #86939e;
1551 font-size: 14px;
1552 font-weight: 400;
1553 -webkit-appearance: none;
1554 appearance: none;
1555 background-color: #f3f5f6;
1556 background-image: none;
1557 border-radius: 4px;
1558 border: none;
1559 font-family: inherit;
1560 cursor: pointer;
1561 }
1562 .wtotem_state__option {
1563 border: none;
1564 }
1565 .wtotem_state__line {
1566 background: #f3f5f6;
1567 height: 1px;
1568 margin-bottom: 20px;
1569 }
1570 .wtotem_state__last {
1571 display: flex;
1572 align-items: center;
1573 justify-content: space-between;
1574 padding: 0 18px;
1575 }
1576 .wtotem_state__text {
1577 color: #5e6977;
1578 font-weight: 500;
1579 }
1580 .wtotem_state__text a {
1581 color: #3d50df;
1582 }
1583
1584 .wtotem_file-table {
1585 color: #86939e;
1586 }
1587 .wtotem_file-table__tr {
1588 display: flex;
1589 margin-bottom: 15px;
1590 padding: 0 18px;
1591 }
1592 .wtotem_file-table__th {
1593 color: #5e6977;
1594 width: 12.5%;
1595 font-weight: 500;
1596 font-size: 12px;
1597 }
1598 .wtotem_file-table__th:first-child {
1599 width: 50%;
1600 }
1601 .wtotem_file-table__td {
1602 font-size: 12px;
1603 width: 12.5%;
1604 font-weight: 500;
1605 }
1606 .wtotem_file-table__td:first-child {
1607 width: 50%;
1608 }
1609 .wtotem_file-table__td_normal {
1610 color: #5e6977;
1611 }
1612 .wtotem_file-table__td_critical {
1613 color: #d56c6a;
1614 }
1615 .wtotem_file-table__td_changed {
1616 color: #caae4b;
1617 }
1618
1619 .wtotem_pagination {
1620 display: flex;
1621 }
1622 .wtotem_pagination__number {
1623 color: #99a6b1;
1624 font-weight: 500;
1625 margin-right: 30px;
1626 display: flex;
1627 align-items: center;
1628 }
1629 .wtotem_pagination__number:hover {
1630 color: #5e6977;
1631 }
1632 .wtotem_pagination__number_active {
1633 width: 46px;
1634 height: 46px;
1635 background: #f1f3f5;
1636 color: #5e6977;
1637 margin-right: 13px;
1638 border-radius: 100px;
1639 display: flex;
1640 justify-content: center;
1641 align-items: center;
1642 }
1643 .wtotem_pagination__number_etc {
1644 margin-right: 22px;
1645 }
1646 .wtotem_pagination__arrow {
1647 width: 19px;
1648 height: 12px;
1649 display: block;
1650 cursor: pointer;
1651 }
1652
1653 /* 992-1100px lg Large */
1654 /* 768-992px md Medium */
1655 @media screen and (max-width: 992px) {
1656 .wtotem_state {
1657 overflow: hidden;
1658 }
1659 .wtotem_file-table__td,
1660 .wtotem_file-table__th {
1661 display: none;
1662 }
1663 .wtotem_file-table__td:first-child,
1664 .wtotem_file-table__th:first-child {
1665 display: block;
1666 width: 100%;
1667 }
1668 }
1669
1670 /* 576-768px sm Small */
1671 /* 375-576px Extra small */
1672 @media screen and (max-width: 576px) {
1673 .wtotem_state__text {
1674 display: none;
1675 }
1676 .wtotem_pagination {
1677 margin: 0 auto;
1678 }
1679 .wtotem_pagination__number {
1680 margin-right: 18px;
1681 }
1682 .wtotem_pagination__number_active {
1683 margin-right: 13px;
1684 }
1685 }
1686
1687 /* 320-375px Extra small */
1688 .wtotem_welcome-wrapper {
1689 background: #f3f5f6;
1690 }
1691 .wtotem_welcome-wrapper__head-height {
1692 display: flex;
1693 align-items: center;
1694 justify-content: center;
1695 height: calc(100vh - 135px);
1696 min-height: 596px;
1697 }
1698 .wtotem_welcome-wrapper__footer-height {
1699 display: flex;
1700 justify-content: center;
1701 height: 135px;
1702 }
1703
1704 .wtotem_modal {
1705 text-align: center;
1706 }
1707 .wtotem_modal__subject {
1708 font-size: 24px;
1709 line-height: 18px;
1710 margin-bottom: 24px;
1711 }
1712 .wtotem_modal__window {
1713 background: #fff;
1714 padding: 23px 0 35px 0;
1715 width: 360px;
1716 margin: 0 auto;
1717 margin-bottom: 24px;
1718 }
1719 .wtotem_modal__title {
1720 font-size: 18px;
1721 margin-bottom: 5px;
1722 }
1723 .wtotem_modal__text {
1724 font-size: 10px;
1725 margin-bottom: 8px;
1726 }
1727 .wtotem_modal__block {
1728 margin-bottom: 50px;
1729 }
1730 .wtotem_modal__block:after {
1731 content: "";
1732 display: block;
1733 height: 1px;
1734 width: 100%;
1735 background: #e1e8ee;
1736 margin-top: -40px;
1737 }
1738 .wtotem_modal__logo {
1739 margin: 0 auto;
1740 }
1741 .wtotem_modal__wrap {
1742 width: 300px;
1743 display: flex;
1744 align-items: center;
1745 margin: 0 auto;
1746 margin-bottom: 18px;
1747 }
1748 .wtotem_modal__api-key {
1749 width: 100%;
1750 padding: 13px 30px 13px 15px;
1751 border: 2px solid #e1e8ee;
1752 border-radius: 2px;
1753 }
1754 .wtotem_modal__api-key[type="text"]::-webkit-input-placeholder {
1755 font-weight: 500;
1756 font-size: 14px;
1757 line-height: 14px;
1758 color: #5e6977;
1759 }
1760 .wtotem_modal__api-key[type="text"]:-ms-input-placeholder {
1761 font-weight: 500;
1762 font-size: 14px;
1763 line-height: 14px;
1764 color: #5e6977;
1765 }
1766 .wtotem_modal__api-key[type="text"]::-ms-input-placeholder {
1767 font-weight: 500;
1768 font-size: 14px;
1769 line-height: 14px;
1770 color: #5e6977;
1771 }
1772 .wtotem_modal__api-key[type="text"]::placeholder {
1773 font-weight: 500;
1774 font-size: 14px;
1775 line-height: 14px;
1776 color: #5e6977;
1777 }
1778 .wtotem_modal__info {
1779 margin-left: -30px;
1780 }
1781 .wtotem_modal__btn {
1782 background: #4bc374;
1783 font-weight: 700;
1784 font-size: 14px;
1785 line-height: 16px;
1786 text-transform: uppercase;
1787 width: 300px;
1788 padding: 16px 0;
1789 border: none;
1790 color: #fff;
1791 }
1792 .wtotem_modal__desc {
1793 font-size: 12px;
1794 font-weight: 500;
1795 line-height: 16px;
1796 max-width: 274px;
1797 margin: 0 auto;
1798 color: #5e6977;
1799 }
1800 .wtotem_modal__cabinet {
1801 color: #3d50df;
1802 }
1803
1804 .wtotem_welcome-bottom {
1805 text-align: center;
1806 }
1807 .wtotem_welcome-bottom__logo {
1808 margin-bottom: 26px;
1809 }
1810 .wtotem_welcome-bottom__label {
1811 margin-bottom: 20px;
1812 }
1813 .wtotem_welcome-bottom__block {
1814 width: 54px;
1815 display: flex;
1816 justify-content: space-between;
1817 margin: 0 auto;
1818 }
1819
1820 /* 375-576px Extra small */
1821 /* 320-375px Extra small */
1822 @media screen and (max-width: 375px) {
1823 .wtotem_modal__window {
1824 width: 345px;
1825 }
1826 }
1827
1828 /* 320-375px Extra small */
1829 @media screen and (max-width: 355px) {
1830 .wtotem_modal__window {
1831 width: 320px;
1832 }
1833 .wtotem_modal__wrap,
1834 .wtotem_modal__btn {
1835 width: 85%;
1836 }
1837 }
1838
1839 @media screen and (max-width: 330px) {
1840 .wtotem_modal__window {
1841 width: 305px;
1842 }
1843 }
1844
1845 .wtotem_item {
1846 margin-bottom: 23px;
1847 }
1848
1849 .wtotem_holder {
1850 display: flex;
1851 justify-content: space-between;
1852 }
1853 .wtotem_holder__content {
1854 width: 70%;
1855 }
1856 .wtotem_holder__sidebar {
1857 width: 27.8431372549%;
1858 }
1859
1860 .wtotem_option {
1861 margin-bottom: 12px;
1862 padding: 28px 24px 24px 24px;
1863 display: flex;
1864 align-items: center;
1865 justify-content: space-between;
1866 width: 100%;
1867 }
1868 .wtotem_option:last-child {
1869 margin-bottom: 0;
1870 }
1871 .wtotem_option__title {
1872 margin-bottom: 7px;
1873 color: #1d293f;
1874 font-size: 14px;
1875 font-weight: 500;
1876 }
1877 .wtotem_option__text {
1878 width: 495px;
1879 font-size: 12px;
1880 color: #5e6977;
1881 line-height: 16px;
1882 }
1883
1884 .wtotem_control {
1885 padding: 16px 22px 24px 22px;
1886 }
1887 .wtotem_control__title {
1888 color: #1d293f;
1889 font-size: 14px;
1890 font-weight: 500;
1891 margin-bottom: 18px;
1892 }
1893 .wtotem_control__block {
1894 padding: 12px 8px;
1895 display: flex;
1896 align-items: center;
1897 background: #f3f5f6;
1898 border-radius: 5px;
1899 margin-bottom: 12px;
1900 width: 100%;
1901 }
1902 .wtotem_control__block_switch {
1903 justify-content: space-between;
1904 align-items: center;
1905 }
1906 .wtotem_control__circle {
1907 margin-right: 4px;
1908 width: 16px;
1909 height: 16px;
1910 border-radius: 100px;
1911 display: flex;
1912 align-items: center;
1913 justify-content: center;
1914 background: #4bc374;
1915 }
1916 .wtotem_control__circle img {
1917 width: 7px;
1918 height: 7px;
1919 }
1920 .wtotem_control__name {
1921 color: #5e6977;
1922 }
1923 .wtotem_control__trash {
1924 width: 15px;
1925 height: 15px;
1926 background: url("../img/trash.svg") no-repeat center center/cover;
1927 margin-left: auto;
1928 cursor: pointer;
1929 }
1930 .wtotem_control__btn {
1931 color: #fff;
1932 display: block;
1933 width: 100%;
1934 height: 42px;
1935 display: flex;
1936 align-items: center;
1937 justify-content: center;
1938 background: #4bc374;
1939 border-radius: 5px;
1940 transition: all 0.2s ease-in-out;
1941 border: none;
1942 cursor: pointer;
1943 }
1944 .wtotem_control__btn:hover {
1945 transition: all 0.2s ease-in-out;
1946 background: #f3f5f6;
1947 color: #5e6977;
1948 }
1949 .wtotem_control__label {
1950 position: relative;
1951 width: 41px;
1952 height: 23px;
1953 border-radius: 100px;
1954 background: #1f2323;
1955 padding: 4px 7px;
1956 display: flex;
1957 justify-content: space-between;
1958 align-items: center;
1959 cursor: pointer;
1960 }
1961 .wtotem_control__label:before,
1962 .wtotem_control__label:after {
1963 content: "";
1964 display: block;
1965 position: relative;
1966 z-index: 2;
1967 }
1968 .wtotem_control__label:before {
1969 width: 8px;
1970 height: 8px;
1971 background: url("../img/checkbox-sun.svg") no-repeat center center/cover;
1972 }
1973 .wtotem_control__label:after {
1974 width: 6px;
1975 height: 6px;
1976 background: url("../img/checkbox-moon.svg") no-repeat center center/cover;
1977 }
1978 .wtotem_control__switched-circle {
1979 position: absolute;
1980 left: 4px;
1981 width: 15px;
1982 height: 15px;
1983 background: #fff;
1984 border-radius: 100px;
1985 display: block;
1986 z-index: 1;
1987 transition: all 0.3s ease-in-out;
1988 }
1989 .wtotem_control__input {
1990 display: none;
1991 }
1992 .wtotem_control__input:checked + label {
1993 background: #fff;
1994 }
1995 .wtotem_control__input:checked + label span {
1996 left: 23px;
1997 background: #3d50df;
1998 }
1999
2000 .onoff__input {
2001 display: none;
2002 }
2003
2004 .onoff__label {
2005 position: relative;
2006 display: flex;
2007 align-items: center;
2008 width: 43px;
2009 height: 23px;
2010 border-radius: 100px;
2011 padding: 4px;
2012 background: #f4f4f4;
2013 overflow: hidden;
2014 cursor: pointer;
2015 }
2016 .onoff__label:before,
2017 .onoff__label:after {
2018 position: absolute;
2019 font-weight: 500;
2020 font-size: 9px;
2021 transition: all 0.3s ease-in-out;
2022 }
2023 .onoff__label:before {
2024 content: "ON";
2025 color: #3d50df;
2026 left: -100%;
2027 }
2028 .onoff__label:after {
2029 content: "OFF";
2030 color: #979797;
2031 right: 4px;
2032 }
2033
2034 .onoff__circle {
2035 position: absolute;
2036 left: 4px;
2037 width: 15px;
2038 height: 15px;
2039 border-radius: 100px;
2040 background: #c4c4c4;
2041 transition: all 0.3s ease-in-out;
2042 }
2043
2044 .onoff__input:checked + label .onoff__circle {
2045 background: #3d50df;
2046 left: 22px;
2047 }
2048
2049 .onoff__input:checked + label:before {
2050 left: 4px;
2051 }
2052
2053 .onoff__input:checked + label:after {
2054 right: -100%;
2055 }
2056
2057 /* 992-1100px lg Large */
2058 @media screen and (max-width: 1100px) {
2059 .wtotem_option__text {
2060 width: 95%;
2061 }
2062 }
2063
2064 /* 768-992px md Medium */
2065 @media screen and (max-width: 992px) {
2066 .wtotem_holder {
2067 flex-direction: column;
2068 }
2069 .wtotem_holder__content {
2070 width: 100%;
2071 margin-bottom: 30px;
2072 }
2073 .wtotem_holder__sidebar {
2074 width: 100%;
2075 }
2076 }
2077
2078 /* 576-768px sm Small */
2079 /* 375-576px Extra small */
2080 @media screen and (max-width: 576px) {
2081 .wtotem_holder__content {
2082 margin-bottom: 20px;
2083 }
2084 }
2085
2086 /* 320-375px Extra small */
2087 .wtotem_offer {
2088 display: flex;
2089 justify-content: space-between;
2090 align-items: center;
2091 padding: 40px 56px 37px 40px;
2092 margin-bottom: 110px;
2093 }
2094 .wtotem_offer__title {
2095 margin-bottom: 22px;
2096 font-size: 24px;
2097 color: #1d293f;
2098 font-weight: 500;
2099 }
2100 .wtotem_offer__text {
2101 width: 601px;
2102 margin-bottom: 22px;
2103 font-size: 16px;
2104 color: #5e6977;
2105 line-height: 24px;
2106 }
2107 .wtotem_offer__btn {
2108 color: #fff;
2109 background: #3d50df;
2110 border-radius: 5px;
2111 width: 151px;
2112 height: 42px;
2113 display: flex;
2114 align-items: center;
2115 justify-content: center;
2116 border: none;
2117 cursor: pointer;
2118 }
2119
2120 /* 992-1100px lg Large */
2121 /* 768-992px md Medium */
2122 @media screen and (max-width: 992px) {
2123 .wtotem_offer__title {
2124 line-height: 32px;
2125 margin-bottom: 20px;
2126 }
2127 .wtotem_offer__text {
2128 width: 100%;
2129 }
2130 }
2131
2132 /* 576-768px sm Small */
2133 @media screen and (max-width: 768px) {
2134 .wtotem_offer {
2135 padding: 20px;
2136 }
2137 .wtotem_offer__img {
2138 display: none;
2139 }
2140 }
2141
2142 /* 375-576px Extra small */
2143 /* 320-375px Extra small */
2144 .wtotem_ready {
2145 background: #e5e5e5;
2146 }
2147
2148 .wtotem_unit__first {
2149 display: flex;
2150 justify-content: space-between;
2151 }
2152
2153 .wtotem_unit__wrapper {
2154 display: flex;
2155 justify-content: space-between;
2156 background: #fff;
2157 }
2158
2159 .wtotem_unit__block {
2160 display: flex;
2161 justify-content: space-between;
2162 align-items: center;
2163 width: 100%;
2164 padding: 30px 30px;
2165 border-right: 1px solid #f3f5f6;
2166 }
2167
2168 .wtotem_unit__contain {
2169 display: flex;
2170 justify-content: space-between;
2171 align-items: center;
2172 }
2173
2174 .wtotem_unit__circle {
2175 margin-right: 16px;
2176 width: 45px;
2177 height: 45px;
2178 border-radius: 100px;
2179 display: flex;
2180 align-items: center;
2181 justify-content: center;
2182 }
2183 /*.wtotem_unit__circle_loading {*/
2184 /*background: #f3f5f6;*/
2185 /*}*/
2186 .wtotem_unit__circle_success {
2187 background: #4bc374;
2188 }
2189 .wtotem_unit__circle_error {
2190 background: #ee3f3f;
2191 position: relative;
2192 }
2193 .wtotem_unit__circle_error:before {
2194 content: "";
2195 position: absolute;
2196 width: 19px;
2197 height: 3px;
2198 background: #fff;
2199 border-radius: 1px;
2200 display: block;
2201 transform: rotate(45deg);
2202 }
2203 .wtotem_unit__circle_error:after {
2204 content: "";
2205 position: absolute;
2206 width: 19px;
2207 height: 3px;
2208 background: #fff;
2209 border-radius: 1px;
2210 display: block;
2211 transform: rotate(-45deg);
2212 }
2213
2214 .wtotem_unit__img_spinner {
2215 animation: 1s linear 0s normal none infinite running rot;
2216 -webkit-animation: 1s linear 0s normal none infinite running rot;
2217 }
2218
2219 @keyframes rot {
2220 0% {
2221 transform: rotate(0deg);
2222 }
2223 100% {
2224 transform: rotate(360deg);
2225 }
2226 }
2227
2228 @-webkit-keyframes rot {
2229 0% {
2230 transform: rotate(0deg);
2231 }
2232 100% {
2233 transform: rotate(360deg);
2234 }
2235 }
2236
2237 .wtotem_unit__expectation {
2238 font-size: 16px;
2239 font-weight: 500;
2240 }
2241 .wtotem_unit__expectation_loading {
2242 color: #7c8087;
2243 }
2244 .wtotem_unit__expectation_success {
2245 color: #bace3d;
2246 }
2247 .wtotem_unit__expectation_error {
2248 color: #d56c6a;
2249 }
2250
2251 .wtotem_unit__repeat {
2252 color: #3d50df;
2253 cursor: pointer;
2254 }
2255
2256 .wtotem_layout {
2257 background: #e5e5e5;
2258 }
2259
2260 .wtotem_alert {
2261 padding: 17px 22px;
2262 display: flex;
2263 justify-content: space-between;
2264 align-items: center;
2265 background: #fff;
2266 border-radius: 4px;
2267 margin-bottom: 30px;
2268 }
2269 .wtotem_alert__desc {
2270 display: flex;
2271 align-items: center;
2272 }
2273 .wtotem_alert__img {
2274 margin-right: 5px;
2275 display: flex;
2276 align-items: center;
2277 justify-content: center;
2278 }
2279 .wtotem_alert__img_cross {
2280 width: 16px;
2281 height: 16px;
2282 border-radius: 100px;
2283 display: flex;
2284 align-items: center;
2285 justify-content: center;
2286 background: #ee3f3f;
2287 }
2288 .wtotem_alert__img_cross:before {
2289 content: "";
2290 position: absolute;
2291 display: block;
2292 width: 8px;
2293 height: 1.3px;
2294 border-radius: 1px;
2295 transform: rotate(45deg);
2296 background: #fff;
2297 }
2298 .wtotem_alert__img_cross:after {
2299 content: "";
2300 position: absolute;
2301 display: block;
2302 width: 8px;
2303 height: 1.3px;
2304 border-radius: 1px;
2305 transform: rotate(-45deg);
2306 background: #fff;
2307 }
2308 .wtotem_alert__title {
2309 font-size: 12px;
2310 text-transform: uppercase;
2311 }
2312 .wtotem_alert__title_yellow {
2313 color: #f5c451;
2314 }
2315 .wtotem_alert__title_green {
2316 color: #4bc374;
2317 }
2318 .wtotem_alert__title_red {
2319 color: #ee3f3f;
2320 }
2321 .wtotem_alert__text {
2322 color: #1d293f;
2323 font-size: 12px;
2324 }
2325 .wtotem_alert__close {
2326 position: relative;
2327 width: 10px;
2328 height: 10px;
2329 display: flex;
2330 justify-self: center;
2331 align-items: center;
2332 cursor: pointer;
2333 }
2334 .wtotem_alert__close:before {
2335 content: "";
2336 position: absolute;
2337 display: block;
2338 width: 10px;
2339 height: 2px;
2340 border-radius: 1px;
2341 transform: rotate(45deg);
2342 background: #000;
2343 }
2344 .wtotem_alert__close:after {
2345 content: "";
2346 position: absolute;
2347 display: block;
2348 width: 10px;
2349 height: 2px;
2350 border-radius: 1px;
2351 transform: rotate(-45deg);
2352 background: #000;
2353 }
2354
2355 /* 576-768px sm Small */
2356 @media screen and (max-width: 768px) {
2357 .wtotem_alert {
2358 margin-bottom: 20px;
2359 }
2360 }
2361
2362 /* 320-576px Extra small */
2363 .line-chart .axis line {
2364 stroke: #f0f0f0;
2365 }
2366
2367 .line-chart .axis path {
2368 stroke: #f0f0f0;
2369 }
2370
2371 .line-chart .axis text {
2372 fill: #5e6977;
2373 }
2374
2375 .line-chart .grid line {
2376 stroke: #f0f0f0;
2377 }
2378
2379 .line-chart .listening-rect {
2380 fill: transparent;
2381 }
2382
2383 .line-chart__tooltip {
2384 opacity: 0;
2385 position: absolute;
2386 top: -25px;
2387 left: -17px;
2388 padding: 0.2em 0.5em;
2389 background: #1d293f;
2390 text-align: center;
2391 line-height: 1.4em;
2392 font-size: 0.9em;
2393 z-index: 10;
2394 transition: all 0.1s ease-out;
2395 pointer-events: none;
2396 color: #fff;
2397 font-family: Inter, Gilroy, Helvetica, sans-serif;
2398 border-radius: 2px;
2399 min-width: 28px;
2400 }
2401
2402 .line-chart__tooltip:before {
2403 content: "";
2404 position: absolute;
2405 bottom: 0;
2406 left: 50%;
2407 width: 12px;
2408 height: 12px;
2409 background: #1d293f;
2410 border-top-color: transparent;
2411 border-left-color: transparent;
2412 transform: translate(-50%, 50%) rotate(45deg);
2413 transform-origin: center center;
2414 z-index: 10;
2415 }
2416
2417 .line-chart {
2418 position: relative;
2419 }
2420
2421 .wtotem_theme—dark .wt_card,
2422 .wtotem_theme—dark .wt_card:before,
2423 .wtotem_theme—dark .wtotem_chart-first__btn_active {
2424 background: #282828;
2425 }
2426
2427 .wtotem_theme—dark .wtotem_content,
2428 .wtotem_theme—dark .wtotem_footer,
2429 .wtotem_theme—dark .wtotem_chart-first__right,
2430 .wtotem_theme—dark .wtotem_control__block,
2431 .wtotem_theme—dark .wtotem_state__select,
2432 .wtotem_theme—dark .wtotem_unit__circle_loading {
2433 background: #191919;
2434 }
2435
2436 .wtotem_theme—dark .wtotem_version__count {
2437 border: 1px solid #f3f5f6;
2438 }
2439
2440 .wtotem_theme—dark .wtotem_logo {
2441 background: url("../img/dr-logo.svg") no-repeat center center/cover;
2442 }
2443
2444 .wtotem_theme—dark .wtotem_nav__link,
2445 .wtotem_theme—dark .wtotem_nav__link_active,
2446 .wtotem_theme—dark .wtotem_version__count,
2447 .wtotem_theme—dark .title,
2448 .wtotem_theme—dark .wtotem_title-info__title,
2449 .wtotem_theme—dark .wtotem_overall__text,
2450 .wtotem_theme—dark .wtotem_info__subtitle,
2451 .wtotem_theme—dark .wtotem_info__info,
2452 .wtotem_theme—dark .wtotem_numbers__figures,
2453 .wtotem_theme—dark .wtotem_from__country,
2454 .wtotem_theme—dark .wtotem_from__country span,
2455 .wtotem_theme—dark .wtotem_data__th,
2456 .wtotem_theme—dark .wtotem_antivirus__title,
2457 .wtotem_theme—dark .wtotem_table__title,
2458 .wtotem_theme—dark .wtotem_table__subject,
2459 .wtotem_theme—dark .wtotem_table__text,
2460 .wtotem_theme—dark .wtotem_table__perfomance,
2461 .wtotem_theme—dark .wtotem_footer__text,
2462 .wtotem_theme—dark .wtotem_footer__text,
2463 .wtotem_theme—dark .wtotem_chart__btn,
2464 .wtotem_theme—dark .wtotem_antivirus__item:last-child div,
2465 .wtotem_theme—dark .wtotem_from__percent,
2466 .wtotem_theme—dark .wtotem_chart-first__all,
2467 .wtotem_theme—dark .wtotem_chart-first__hack p,
2468 .wtotem_theme—dark .wtotem_chart-first__btn_active,
2469 .wtotem_theme—dark .wtotem_chart__text,
2470 .wtotem_theme—dark .wtotem_table__initial-value,
2471 .wtotem_theme—dark .arrow-right,
2472 .wtotem_theme—dark .wtotem_print__label,
2473 .wtotem_theme—dark .wtotem_state__text,
2474 .wtotem_theme—dark .wtotem_pagination__number,
2475 .wtotem_theme—dark .wtotem_data__td,
2476 .wtotem_theme—dark .wtotem_file-table__th,
2477 .wtotem_theme—dark .wtotem_file-table,
2478 .wtotem_theme—dark .wtotem_option__title,
2479 .wtotem_theme—dark .wtotem_option__text,
2480 .wtotem_theme—dark .wtotem_control__title,
2481 .wtotem_theme—dark .wtotem_control__name,
2482 .wtotem_theme—dark .onoff__label:after,
2483 .wtotem_theme—dark .onoff__label:before,
2484 .wtotem_theme—dark .wtotem_offer__title,
2485 .wtotem_theme—dark .wtotem_offer__text,
2486 .wtotem_theme—dark .wtotem_unit__expectation_loading,
2487 .wtotem_theme—dark .wtotem_alert__text {
2488 color: #f3f5f6;
2489 }
2490
2491 .wtotem_theme—dark .wtotem_data__ip {
2492 color: #86939e;
2493 }
2494
2495 .wtotem_theme—dark .wtotem_chart__btn {
2496 border: 1px solid #f3f5f6;
2497 }
2498
2499 .wtotem_theme—dark .wtotem_title-info__info {
2500 background: url("../img/dr-info.svg") no-repeat center center/cover;
2501 }
2502
2503 .wtotem_theme—dark .wtotem_nav__link_active {
2504 color: #3d50df;
2505 }
2506
2507 .wtotem_theme—dark .wtotem_info__item:first-child,
2508 .wtotem_theme—dark .wtotem_numbers__item,
2509 .wtotem_theme—dark .wtotem_antivirus__item,
2510 .wtotem_theme—dark .wtotem_unit__block {
2511 border-right: 1px solid #3c3c3d;
2512 }
2513
2514 .wtotem_theme—dark .wtotem_antivirus__item:last-child {
2515 border-right: none;
2516 }
2517
2518 .wtotem_theme—dark .wtotem_numbers__item:last-child {
2519 border-right: none;
2520 }
2521
2522 .wtotem_theme—dark .wtotem_table__col {
2523 border-right: 1px solid #3c3c3d;
2524 border-bottom: 1px solid #3c3c3d;
2525 }
2526
2527 .wtotem_theme—dark .wtotem_table__col:last-child {
2528 border-right: none;
2529 }
2530
2531 .wtotem_theme—dark .wtotem_chart__line {
2532 background: #3c3c3d;
2533 }
2534
2535 .wtotem_theme—dark .wtotem_table__th,
2536 .wtotem_theme—dark .wtotem_table__td {
2537 border-bottom: 1px solid #3c3c3d;
2538 }
2539
2540 .wtotem_theme—dark .wtotem_table__link:after {
2541 content: "";
2542 border: solid #fff;
2543 border-width: 0 1.5px 1.5px 0;
2544 transform: rotate(-45deg);
2545 -webkit-transform: rotate(-45deg);
2546 }
2547
2548 .wtotem_theme—dark .arrow-right:after {
2549 content: "";
2550 border: solid #f3f5f6;
2551 border-width: 0 1px 1px 0;
2552 transform: rotate(-45deg);
2553 -webkit-transform: rotate(-45deg);
2554 margin-left: 10px;
2555 }
2556
2557 .wtotem_theme—dark .wtotem_footer__line,
2558 .wtotem_theme—dark .wtotem_state__line {
2559 background: #2d2e2e;
2560 }
2561
2562 .wtotem_theme—dark .wtotem_footer__app-store {
2563 width: 19px;
2564 height: 19px;
2565 background: url("../img/dr-app-store.svg") no-repeat center center/cover;
2566 }
2567
2568 .wtotem_theme—dark .wtotem_footer__play-store {
2569 width: 17px;
2570 height: 19px;
2571 background: url("../img/dr-play-store.svg") no-repeat center center/cover;
2572 }
2573
2574 .wtotem_theme—dark .wtotem_footer__logo {
2575 background: url("../img/dr-logo-footer.svg") no-repeat center center/cover;
2576 }
2577
2578 .wtotem_theme—dark .line-chart__tooltip,
2579 .wtotem_theme—dark .line-chart__tooltip::before {
2580 background: #3d50df;
2581 }
2582
2583 .wtotem_theme—dark .wtotem_firewall__icon {
2584 background: url("../img/dr-shape.svg") no-repeat center center/cover;
2585 }
2586
2587 .wtotem_theme—dark .wtotem_pagination__number_active {
2588 background: #5a5c5e;
2589 }
2590
2591 .wtotem_pagination__number:hover {
2592 color: #5e6977;
2593 transition: all 0.2s ease;
2594 }
2595
2596 .wtotem_theme—dark .onoff__label {
2597 background: #686868;
2598 }
2599
2600 .wtotem_theme—dark .wtotem_print__img {
2601 background: url("../img/dr-print.svg") no-repeat center center/cover;
2602 }
2603
2604 .wtotem_theme—dark .wtotem_control__trash {
2605 background: url("../img/dr-trash.svg") no-repeat center center/cover;
2606 }
2607
2608 .wtotem_theme—dark .onoff__input:checked + label .onoff__circle {
2609 background: #4bc374;
2610 }
2611
2612 .wtotem_theme—dark .onoff__circle {
2613 background: #ec6d62;
2614 }
2615
2616 .wtotem_theme—dark .wtotem_alert__close:before,
2617 .wtotem_theme—dark .wtotem_alert__close:after {
2618 background: #dadada;
2619 }
2620
2621 .wtotem_info__item .arrow-right {
2622 color: #3d50df;
2623 }
2624 .wtotem_info__item .arrow-right:after {
2625 content: "";
2626 border: solid #3d50df;
2627 border-width: 0 1px 1px 0;
2628 transform: rotate(-45deg);
2629 -webkit-transform: rotate(-45deg);
2630 margin-left: 10px;
2631 }
2632
2633 /* 320-576px Extra small */
2634 @media screen and (max-width: 576px) {
2635 .wtotem_theme—dark .wtotem_info__item:first-child {
2636 border-right: none;
2637 }
2638 .wtotem_theme—dark .wtotem_antivirus__item {
2639 border-bottom: 1px solid #3c3c3d;
2640 }
2641 .wtotem_theme—dark .wtotem_numbers__item:last-child {
2642 border-right: 1px solid #3c3c3d;
2643 }
2644 .wtotem_theme—dark .wtotem_numbers__item:nth-child(2) {
2645 border-right: none;
2646 }
2647 .wtotem_theme—dark .wtotem_antivirus__item:last-child {
2648 border-right: none;
2649 border-bottom: none;
2650 }
2651 .wtotem_theme—dark .wtotem_antivirus__item:nth-child(2) {
2652 border-right: none;
2653 }
2654 .wtotem_theme—dark .wtotem_antivirus__item:nth-child(3) {
2655 border-bottom: none;
2656 }
2657 }
2658
2659 /* 992-1100px lg Large */
2660 @media screen and (max-width: 1100px) {
2661 .wtotem_container {
2662 max-width: 960px;
2663 }
2664 }
2665
2666 /* 768-992px md Medium */
2667 @media screen and (max-width: 992px) {
2668 .wtotem_container {
2669 max-width: 720px;
2670 }
2671 }
2672
2673 /* 576-768px sm Small */
2674 @media screen and (max-width: 768px) {
2675 .wtotem_container {
2676 max-width: 540px;
2677 }
2678 .wtotem_content {
2679 padding-top: 19px;
2680 }
2681 }
2682
2683 /* 375-576px Extra small */
2684 @media screen and (max-width: 576px) {
2685 .wtotem_container {
2686 max-width: 345px;
2687 }
2688 }
2689
2690 /* 320-375px Extra small */
2691 @media screen and (max-width: 374px) {
2692 .wtotem_container {
2693 max-width: auto;
2694 padding: 0 10px;
2695 }
2696 }
2697
2698 /* 992-1100px lg Large */
2699 /* 768-992px md Medium */
2700 /* 576-768px sm Small */
2701 /* 375-576px Extra small */
2702 /* 320-375px Extra small */
2703
2704 /*# sourceMappingURL=main.css.map */
2705
2706 /*tlite */
2707 .tlite {
2708 background: #111;
2709 color: #fff;
2710 font-family: sans-serif;
2711 font-size: 0.8rem;
2712 font-weight: normal;
2713 text-decoration: none;
2714 text-align: left;
2715 padding: 0.6em 0.75rem;
2716 border-radius: 4px;
2717 position: absolute;
2718 opacity: 0;
2719 visibility: hidden;
2720 transition: opacity 0.4s;
2721 max-width: 350px;
2722 box-shadow: 0 0.5rem 1rem -0.5rem #000;
2723 z-index: 1000;
2724 -webkit-backface-visibility: hidden;
2725 }
2726 .tlite-table td,
2727 .tlite-table th {
2728 position: relative;
2729 }
2730 .tlite-visible {
2731 visibility: visible;
2732 opacity: 0.9;
2733 }
2734 .tlite::before {
2735 content: " ";
2736 display: block;
2737 background: inherit;
2738 width: 10px;
2739 height: 10px;
2740 position: absolute;
2741 transform: rotate(45deg);
2742 }
2743 .tlite-n::before {
2744 top: -3px;
2745 left: 50%;
2746 margin-left: -5px;
2747 }
2748 .tlite-nw::before {
2749 top: -3px;
2750 left: 10px;
2751 }
2752 .tlite-ne::before {
2753 top: -3px;
2754 right: 10px;
2755 }
2756 .tlite-s::before {
2757 bottom: -3px;
2758 left: 50%;
2759 margin-left: -5px;
2760 }
2761 .tlite-se::before {
2762 bottom: -3px;
2763 right: 10px;
2764 }
2765 .tlite-sw::before {
2766 bottom: -3px;
2767 left: 10px;
2768 }
2769 .tlite-w::before {
2770 left: -3px;
2771 top: 50%;
2772 margin-top: -5px;
2773 }
2774 .tlite-e::before {
2775 right: -3px;
2776 top: 50%;
2777 margin-top: -5px;
2778 }
2779 .is--status--ok {
2780 color: #4bc374;
2781 fill: #4bc374;
2782 }
2783 .is--status--error {
2784 color: #ee3f3f;
2785 fill: #ee3f3f;
2786 }
2787 .is--status--pending {
2788 color: #3d50df;
2789 fill: #3d50df;
2790 }
2791 .is--status--warning {
2792 color: #f5bf4f;
2793 fill: #f5bf4f;
2794 }
2795 .wtsec_score_red {
2796 color: #d56c6a;
2797 }
2798 .wtsec_score_orange {
2799 color: #c2b00e;
2800 }
2801 .wtsec_score_green {
2802 color: #7eb40c;
2803 }
2804 .wtsec_score_bg_red {
2805 background: #d56c6a;
2806 color: #fff;
2807 }
2808 .wtsec_score_bg_orange {
2809 background: #c2b00e;
2810 color: #fff;
2811 }
2812 .wtsec_score_bg_green {
2813 background: #7eb40c;
2814 color: #fff;
2815 }
2816 #wtotem_alert {
2817 margin-top: 20px;
2818 }
2819
2820 .ml-2 {
2821 margin-left: 20px;
2822 }
2823
2824 .wt-flex {
2825 display: flex;
2826 }
2827
2828 .wt-flex-middle {
2829 align-items: center;
2830 }
2831
2832 .wt-margin-right-10 {
2833 margin-right: 10px;
2834 }
2835 .break-word {
2836 overflow-wrap: break-word;
2837 word-wrap: break-word;
2838 }
2839
2840 select.wtotem_state__select {
2841 display: block;
2842 margin-left: 18px;
2843 width: 100%;
2844 padding: 8px 12px 8px 12px;
2845 color: #86939e;
2846 font-size: 14px;
2847 font-weight: 400;
2848 -webkit-appearance: none;
2849 appearance: none;
2850 background-color: #f3f5f6;
2851 background-image: none;
2852 border-radius: 4px;
2853 border: none;
2854 font-family: inherit;
2855 cursor: pointer;
2856 }
2857
2858 .wtotem_unit {
2859 margin-bottom: 30px;
2860 }
2861
2862 .wtotem_table__text {
2863 margin-left: 15px;
2864 }
2865 .wt-margin-20{
2866 margin: 20px;
2867 }
2868 .wt-margin-bottom-15{
2869 margin-bottom: 15px;
2870 }
2871 .wtotem_av_filters_wrapper{
2872 justify-content: space-between;
2873 display: flex;
2874 }
2875
2876 .wt_flag{
2877 width: 24px;
2878 }