PluginProbe
Topic SEO Content Optimization Tool / 1.0.15
Topic SEO Content Optimization Tool v1.0.15
1.0.43 1.0.42 trunk 1.0.0 1.0.1 1.0.10 1.0.11 1.0.12 1.0.13 1.0.14 1.0.15 1.0.16 1.0.17 1.0.18 1.0.19 1.0.2 1.0.20 1.0.21 1.0.22 1.0.23 1.0.24 1.0.25 1.0.3 1.0.31 1.0.32 All 40 releases
topic / classic-editor / classic.css

classic.css in Topic SEO Content Optimization Tool 1.0.15, at classic-editor/classic.css

1,853 lines 44.3 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /* Font Starts */
2 /*@font-face
3 {
4 font-family: Graphik;
5 font-style: normal;
6 font-weight: 500;
7 src: url('./fonts/Graphik500.ttf') format('ttf'),
8 url('./fonts/Graphik500.woff') format('woff'),
9 url('./fonts/Graphik500.otf') format('otf');
10 }*/
11 @font-face
12 {
13 font-family: Graphik;
14 font-style: normal;
15 font-weight: Regular;
16 src: url('./fonts/GraphikRegular.ttf') format('ttf'),
17 url('./fonts/GraphikRegular.woff') format('woff'),
18 url('./fonts/GraphikRegular.otf') format('otf');
19 }
20 @font-face
21 {
22 font-family: Graphik;
23 font-style: normal;
24 font-weight: 500;
25 src: url('./fonts/GraphikMedium.ttf') format('ttf'),
26 url('./fonts/GraphikMedium.woff') format('woff'),
27 url('./fonts/GraphikMedium.otf') format('otf');
28 }
29 @font-face
30 {
31 font-family: Graphik;
32 font-style: italic;
33 font-weight: Medium;
34 src: url('./fonts/GraphikMediumItalic.ttf') format('ttf'),
35 url('./fonts/GraphikMediumItalic.woff') format('woff'),
36 url('./fonts/GraphikMediumItalic.otf') format('otf');
37 }
38 /* Font Ends */
39 body h1, body h2, body h3, body h4, body h5, body h6
40 {
41 font-weight: 500;
42 }
43 #usetopicData strong
44 {
45 font-weight: 500;
46 }
47 #usetopicData {
48 position: fixed;
49 right: 0;
50 width: 372px;
51 top: 0;
52 background: #fff;
53 padding: 32px 0 0px 0;
54 min-height: auto;
55 overflow-y: scroll;
56 height: 98vh;
57 z-index: 9999;
58 display:none;
59 border-left: 1px solid #dedede;
60 overflow-x: hidden;
61 }
62 .usetopicDataShow{
63 display:block!important;
64 }
65 #usetopicData .closeTopicdata{
66 display: flex;
67 justify-content: space-between;
68 align-items: center;
69 padding: 0 16px;
70 height: 48px;
71 border-top: 1px solid #ddd;
72 border-bottom: 1px solid #ddd;
73 width: 100%;
74 background: #fff;
75 position: sticky;
76 top: 0;
77 z-index: 9999;
78 }
79 #usetopicData .closeTopicdata strong {
80 font-size: 0.875rem;
81 font-weight: 500;
82 color: #1e1e1e;
83 }
84
85 #usetopicData .closeTopicdata .close {
86 background: transparent;
87 box-shadow: 0 0 0 0 #fff;
88 border: 0;
89 padding: 0px 13px;
90 cursor:pointer;
91 position: relative;
92 margin-right: 13px;
93 }
94 #usetopicData .closeTopicdata .close .usetopic-tooltip
95 {
96 width: 65px !important;
97 left: -14%;
98 bottom: -30px;
99 }
100 #usetopicData .closeTopicdata .close:hover .usetopic-tooltip
101 {
102 opacity: 1;
103 }
104 #usetopicData .closeTopicdata .close .usetopic-tooltip:after
105 {
106 display: none;
107 }
108
109 #usetopicData .content
110 {
111
112 width: 105%;
113 }
114 #usetopicData .use-topic-top-bar
115 {
116 position: sticky;
117 bottom: 1rem;
118 z-index: 999;
119 background-color: rgb(249, 249, 250);
120 display: flex;
121 padding: 8px 6px 11px;
122 }
123 #usetopicData .use-topic-top-bar p
124 {
125 width: 87%;
126 margin: 0;
127 }
128 #usetopicData .use-topic-top-bar p a
129 {
130 font-size: 19px;
131 text-transform: lowercase;
132 color: #3f4b5b;
133 margin-left: 8px;
134 }
135 #usetopicData .usetopicbriefs .use-topic-top-bar.bottom-briefs-bar p a
136 {
137 margin-left: 19px;
138 }
139 #usetopicData .usetopicbriefs .use-topic-top-bar.bottom-briefs-bar span a
140 {
141 margin-left: 6px;
142 }
143 #usetopicData .use-topic-top-bar span a
144 {
145 font-size: 12px;
146 margin-top: 5px;
147 display: table;
148 }
149
150 #usetopicloginform h5 {
151 text-align: center;
152 font-size: 16px;
153 margin: 10px 0;
154 }
155
156 #usetopicloginform label, #usetopicData #usetopicgetBrieffm label
157 {
158 width: 100%;
159 display: block;
160 font-size: 14px;
161 font-weight: 200;
162 margin: 14px 0 2px;
163 }
164 #usetopicloginform label b, #usetopicData #usetopicgetBrieffm label b
165 {
166 width: 100%;
167 font-size: 12px;
168 font-weight: 300;
169 padding-bottom: 6px;
170 color: #666;
171 }
172 #usetopicloginform input, #usetopicData #usetopicgetBrieffm input
173 {
174 border: none;
175 margin: 0;
176 padding: 5px 10px;
177 box-shadow: 0px 1px 6px #7784945e;
178 width: 100%;
179 font-size: 16px;
180 border-radius: 4px 4px 0 0;
181 animation-name: mui-auto-fill-cancel;
182 letter-spacing: inherit;
183 animation-duration: 10ms;
184 -webkit-tap-highlight-color: transparent;
185 }
186 #usetopicloginform .utopicemail, #usetopicloginform .utopicpass, #usetopicData #usetopicgetBrieffm .lbrief-url
187 {
188 position: relative;
189 height: 48px;
190 }
191 #usetopicloginform .utopicemail:before, #usetopicloginform .utopicpass:before, #usetopicData #usetopicgetBrieffm .lbrief-url:before
192 {
193 left: 0;
194 right: 0;
195 bottom: 6px;
196 content: "\00a0";
197 position: absolute;
198 transition: border-bottom-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
199 border-bottom: 1px solid rgba(0, 0, 0, 0.42);
200 pointer-events: none;
201 }
202 #usetopicloginform .utopicemail:hover::before, #usetopicloginform .utopicpass:hover::before, #usetopicData #usetopicgetBrieffm .lbrief-url:hover::before
203 {
204 border-bottom: 1px solid rgba(0, 0, 0, 0.87);
205 }
206 #usetopicloginform input::placeholder, #usetopicData #usetopicgetBrieffm input::placeholder
207 {
208 color: #ccc;
209 }
210
211 input, select {
212 margin: 0 1px;
213 margin-bottom: 0px;
214 }
215 input, textarea {
216 font-size: 14px;
217 }
218 button, input, select, textarea {
219 box-sizing: border-box;
220 font-family: inherit;
221 font-size: inherit;
222 font-weight: inherit;
223 }
224 body {
225 color: #3c434a;
226 font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
227 font-size: 13px;
228 line-height: 1.4em;
229 }
230 .sign-in-right button, #usetopicData #usetopicgetBrieffm #usetopic-leadb-btn
231 {
232 color: #fff;
233 background-color: #3f4b5b;
234 border: 1px solid #3f4b5b;
235 padding: 4px 10px;
236 box-shadow: 0px 3px 1px -2px rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px rgba(0,0,0,0.12);
237 font-size: 0.8125rem;
238 min-width: 64px;
239 box-sizing: border-box;
240 transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
241 font-family: Graphik, Arial;
242 font-weight: 500;
243 line-height: 1.75;
244 border-radius: 4px;
245 text-transform: uppercase;
246 width: auto;
247 cursor: pointer;
248 margin: 12px auto 0;
249 }
250 .sign-in-right button:hover {
251 box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
252 }
253 #usetopicData #usetopicgetBrieffm
254 {
255 text-align: center;
256 }
257 #usetopicData #usetopicloginform, #usetopicData #usetopicgetBrieffm
258 {
259 width: 58%;
260 margin: 25% auto 0;
261 position: relative;
262 }
263 #usetopicData #usetopicloginform h5, #usetopicData #usetopicgetBrieffm h5
264 {
265 font-size: 1.25rem;
266 font-family: Graphik, Arial;
267 font-weight: 500;
268 line-height: 1.6;
269 color: #3f4b5b;
270 }
271 .sign-in-right {
272 text-align: center;
273 }
274 #usetopicloginform input:hover, #usetopicData #usetopicgetBrieffm input:hover
275 {
276 border-bottom: 1px solid #000 !important;
277
278 }
279 #publishing-action-use-topic #usetopicMain
280 {
281 color: #fff;
282 background-color: #3f4b5b;
283 border: 1px solid #3f4b5b;
284 padding: 8px 10px;
285 box-shadow: 0px 3px 1px -2px
286 rgba(0,0,0,0.2), 0px 2px 2px 0px rgba(0,0,0,0.14), 0px 1px 5px 0px
287 rgba(0,0,0,0.12);
288 font-size: 11px;
289 transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
290 font-family: Graphik, Arial;
291 font-weight: 500;
292 border-radius: 4px;
293 display: table;
294 margin: 10px 0 0 auto;
295 cursor: pointer;
296 }
297 #publishing-action-use-topic #usetopicMain:hover
298 {
299 box-shadow: 0px 2px 4px -1px rgba(0,0,0,0.2), 0px 4px 5px 0px rgba(0,0,0,0.14), 0px 1px 10px 0px rgba(0,0,0,0.12);
300 }
301
302 #major-publishing-actions-use-topic p {
303 float: left;
304 margin: 4px 0;
305 font-weight: 500;
306 }
307 #major-publishing-actions-use-topic{
308 padding: 10px;
309 clear: both;
310 border-top: 1px solid #dcdcde;
311 background: #f6f7f7;
312 display: flex;
313 }
314 #major-publishing-actions-use-topic p {
315 width: 50%;
316 }
317 #major-publishing-actions-use-topic #publishing-action-use-topic
318 {
319 width: 50%;
320 }
321 .use-topic-top-bar p {
322 color: #000;
323 text-decoration: none !important;
324 float: left;
325 width: 80%;
326 font-size: 15px;
327 font-weight: 300;
328 margin: 11px 0;
329 }
330
331 .use-topic-top-bar a {
332 text-decoration: none;
333 }
334 .use-topic-top-bar svg {
335 position: relative;
336 top: 5px;
337 }
338 .usetopic-login-Error{
339 display: none;
340 transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
341 background: rgb(44, 52, 63);
342 padding: 8px;
343 color: #fff;
344 font-weight: 500;
345 border-radius: 4px;
346 text-align: center;
347 }
348 .loadingusetopic
349 {
350 padding: 0;
351 }
352 .loadingusetopic::before
353 {
354 content: "";
355 position: fixed;
356 background: #f9f9f9;
357 height: 100%;
358 width: 100%;
359 animation: crescendo 1.5s alternate infinite ease-in;
360 z-index: 9999;
361 }
362 .loadingusetopic::after {
363 content: "Loading...";
364 position: absolute;
365 top: 50%;
366 left: 50%;
367 transform: translate(-50%,-50%);
368 color: rgb(51, 65, 82);
369 font-size: 17px;
370 z-index: 9999;
371 }
372 .usetopicbriefs .sign-in .usetopic_logout
373 {
374 width: 22%;
375 position: relative;
376 }
377 .usetopicbriefs .sign-in .usetopic_logout button
378 {
379 background: transparent;
380 border: none;
381 display: table;
382 margin-left: auto;
383 margin-top: 21px;
384 width: 41px;
385 height: 39px;
386 overflow: visible;
387 font-size: 1.5rem;
388 text-align: center;
389 transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
390 border-radius: 50%;
391 padding: 8px;
392 }
393 .usetopicbriefs .sign-in .usetopic_logout button:hover
394 {
395 background-color: rgba(0, 0, 0, 0.04);
396 }
397 .usetopicbriefs .sign-in p {
398 color: rgb(133, 159, 189);
399 font-size: 14px;
400 text-align: left;
401 width: 78%;
402 margin: 0;
403 word-break: break-word;
404 padding: 0.7rem 0rem;
405 }
406 .usetopicbriefs .sign-in {
407 display: flex;
408 }
409 .usetopicbriefs .sign-in .MuiSvgIcon-root.MuiSvgIcon-colorPrimary {
410 width: 23px;
411 color: rgb(133, 159, 189) !important;
412 cursor: pointer;
413 }
414 .usetopicbriefs .sign-in path {
415 fill: rgb(133, 159, 189);
416 }
417 .usetopicbriefs h3 {
418 color: #3f4b5b;
419 font-size: 1.25rem;
420 }
421 .search-usetopic .MuiSvgIcon-root.MuiSvgIcon-colorPrimary {
422 position: absolute !important;
423 width: 23px;
424 padding: 10px 0;
425 top: auto !important;
426 left: 36px;
427 color: #3f4b5b;
428 }
429 .usetopicbriefs .search-usetopic path {
430 fill: #3f4b5b;
431 }
432 .usetopicbriefs .search-usetopic input {
433 border-radius: 50px !important;
434 padding: 0.4rem 2rem 0.3rem 38px;
435 box-shadow: 0px 2px 5px 0px #3838382e;
436 border: 0 !important;
437 width: 100%;
438 font-size: 14px;
439 }
440 .usetopicbriefs .kyword-create th {
441 text-align: left;
442 color: #3f4b5b;
443 font-weight: 400;
444 }
445 .usetopicbriefs .kyword-create {
446 float: left;
447 width: 100%;
448 border-collapse: separate;
449 border-spacing: 0 14px;
450 padding-bottom: 69px;
451 }
452 .usetopicbriefs .usetopic_ycb
453 {
454 margin: 45px 4px -5px;
455 }
456 .usetopicbriefs .kyword-create tbody .usetopic-brief-tr
457 {
458 background: #fff;
459 }
460 .usetopicbriefs .kyword-create thead tr
461 {
462 box-shadow: none;
463 height: 35px;
464 cursor: auto;
465 }
466 .usetopicbriefs .kyword-create thead tr th
467 {
468 color: #3f4b5b;
469 font-size: 14px;
470 }
471 .usetopicbriefs .kyword-create tr
472 {
473 box-shadow: 0px 2px 5px 0px #3838382e;
474 border-collapse: separate;
475 border-spacing: 0 15px;
476 height: 43px;
477 cursor: pointer;
478 }
479 .usetopicbriefs .kyword-create tr td:first-child, .usetopicbriefs .kyword-create tr th:first-child
480 {
481 font-size: 14px;
482 color: #3f4b5b;
483 width: 70%;
484 padding-left: 13px;
485 }
486 .usetopicbriefs .kyword-create tr td, .usetopicbriefs .kyword-create tr th
487 {
488 color: grey;
489 font-weight: 400;
490 }
491 @keyframes crescendo {
492 /* 0% {background: #424242;}
493 100% {background: #737373;} */
494 0% {background: #fbfbfb;}
495 100% {background: #f5f5f5;}
496 }
497
498 .brief-detail-header .usetopic_logout
499 {
500 width: 22%;
501 }
502 .brief-detail-header .usetopic_logout button
503 {
504 background: transparent;
505 border: none;
506 border-radius: 50%;
507 display: table;
508 margin-left: auto;
509 margin-top: 21px;
510 width: 40px;
511 height: 37px;
512 padding-top: 4px;
513 }
514 .brief-detail-header .usetopic_logout button:hover
515 {
516 background-color: rgba(0, 0, 0, 0.04);
517 }
518 .brief-detail-header p {
519 color: rgb(133, 159, 189);
520 font-size: 14px;
521 text-align: left;
522 width: 78%;
523 word-break: break-all;
524 }
525 .brief-detail-header {
526 display: flex;
527 }
528 .brief-detail-header .MuiSvgIcon-root.MuiSvgIcon-colorPrimary {
529 width: 23px;
530 color: rgb(113, 113, 113) !important;
531 cursor: pointer;
532 }
533 .brief-detail-header path {
534 fill: rgb(133, 159, 189);
535 }
536 #usetopicData .usetopic-briefdetail .usetopic-tqo .tab {
537 overflow: hidden;
538 border: none;
539 background-color: transparent;
540 }
541 #usetopicData .usetopic-briefdetail .usetopic-tqo .tab ul
542 {
543 display: flex;
544 justify-content: center;
545 margin: 0;
546 }
547 #usetopicData .usetopic-briefdetail .usetopic-tqo .tab ul li
548 {
549 margin-bottom: 0;
550 }
551 #usetopicData .usetopic-briefdetail .usetopic-tqo .tab button {
552 background-color: inherit;
553 float: left;
554 border: none;
555 outline: none;
556 cursor: pointer;
557 padding: 11px;
558 font-size: 0.875rem;
559 width: 100px;
560 box-shadow: none;
561 height: auto;
562 min-height: auto;
563 line-height: 100%;
564 color: #000;
565 border-radius: 0;
566 }
567 #usetopicData .usetopic-briefdetail .usetopic-tqo .tab button.active, .usetopic-briefdetail .usetopic-tqo .tab button.active:hover
568 {
569 background-color: #fff;
570 color: #000;
571 border-color: transparent;
572 box-shadow: none;
573 }
574 #usetopicData .usetopic-briefdetail .usetopic-tqo .tab button:focus
575 {
576 background: #fff;
577 }
578 #usetopicData .usetopic-briefdetail .usetopic-tqo .tab button:hover
579 {
580 background-color: #dcdcde;
581 color: #000;
582 border-color: transparent;
583 box-shadow: none;
584 background: rgba(0, 0, 0, 0.05);
585 background-color: rgba(0, 0, 0, 0.05);
586 }
587
588 /* Change background color of buttons on hover */
589 #usetopicData .usetopic-briefdetail .usetopic-tqo .tab button:hover {
590 background-color: rgba(0, 0, 0, 0.05);
591 }
592
593 /* Create an active/current tablink class */
594 #usetopicData .usetopic-briefdetail .usetopic-tqo .tab button.active {
595 background-color: #fff;
596 font-weight: 500;
597 }
598
599 /* Style the tab content */
600 #usetopicData .usetopic-briefdetail .usetopic-tqo .tabcontent {
601 padding: 1px 35px 1px 15px;
602 background: #fff;
603 }
604 #usetopicData .usetopic-briefdetail .usetopic-tqo .tabcontent h3
605 {
606 font-size: 1.25rem;
607 }
608 #usetopicData .usetopic-briefdetail .usetopic-tqo .usedTopicsAllTopics li
609 {
610 display: flex;
611 padding: 0.3rem 0;
612 cursor: pointer;
613 margin-top: 0.3rem;
614 margin-bottom: 0.3rem;
615 }
616 #usetopicData .usetopic-briefdetail .usetopic-tqo .usedTopicsAllTopics li .usetopic-brief-ct-name
617 {
618 font-weight: 500;
619 color: rgb(62, 75, 91);
620 width: 78%;
621 font-size: 1rem;
622 position: relative;
623 }
624 #usetopicData .usetopic-briefdetail .usetopic-tqo .usedTopicsAllTopics li .usetopic-brief-ct-name p
625 {
626 color: grey;
627 font-size: 0.75rem;
628 margin: 4px 0 0;
629 font-weight: 400;
630 }
631 #usetopicData .usetopic-briefdetail .usetopic-tqo .usedTopicsAllTopics li .usetopic-headingsin-used
632 {
633 padding: 10px 16px 0;
634 border-radius: 50%;
635 position: relative;
636 line-height: 100%;
637 }
638 #usetopicData .usetopic-briefdetail .usetopic-tqo .usedTopicsAllTopics li .usetopic-headingsin-used:hover
639 {
640 background: rgba(0, 0, 0, 0.04);
641 }
642 #usetopicData .usetopic-briefdetail .usetopic-tqo #usetopicquestions h3, #usetopicData .usetopic-briefdetail .usetopic-tqo #usetopicoutlines h3
643 {
644 font-weight: 500;
645 color: rgb(51, 65, 82);
646 font-size: 0.875rem;
647 }
648 #usetopicData .usetopic-briefdetail .usetopic-tqo #usetopicquestions .intro, #usetopicData .usetopic-briefdetail .usetopic-tqo #usetopicoutlines .intro
649 {
650 color: rgb(51, 65, 82);
651 font-size: 0.75rem;
652 }
653 #wpcontent #wpbody #wpbody-content .usetopic-lesswidth
654 {
655 width: 90%;
656 }
657
658 #wpcontent #wpbody #wpbody-content .notice.usetopic-lesswidth{
659 width: 61%;
660 }
661
662 #wpcontent .usetopic-lesswidth{
663 width: 90%;
664 }
665 #wpwrap .usetopicDataShow
666 {
667 font-family: Graphik, Arial !important;
668 }
669 #usetopicData .usetopic-briefdetail .usetopic-alreadyAdded
670 {
671 background-color: rgb(213, 233, 214);
672 margin: 0 -16px !important;
673 padding-left: 16px !important;
674 padding-right: 16px !important;
675 padding-top: 0.5rem !important;
676 padding-bottom: 0.5rem !important;
677 margin-top: 0 !important;
678 margin-bottom: 0 !important;
679 }
680 .usetopicDataShow .usetopicbriefs
681 {
682 background: #f9f9f9;
683 padding: 0 39px 0 23px;
684 }
685 .usedTopicsAllTopics li svg {
686 height: 20px;
687 color: rgba(0, 0, 0, 0.54);
688 width: 1em;
689 }
690 #usetopicData
691 {
692 background: #f9f9f9;
693 }
694 #usetopicData .use-topic-top-bar.bottom-briefs-bar
695 {
696 border-top-color: rgb(234, 234, 233);
697 border-top-style: solid;
698 margin: 0;
699 position: fixed;
700 bottom: 0;
701 width: 28%;
702 }
703 #usetopicData .usetopicbriefs .use-topic-top-bar.bottom-briefs-bar
704 {
705 margin: 0 -24px;
706 }
707 .usetopicDataShow .usetopic-briefdetail
708 {
709 background: #f9f9f9;
710 }
711 .usetopicDataShow .usetopic-briefdetail .brief-detail-header
712 {
713 display: flex;
714 justify-content: center;
715 }
716 .usetopicDataShow .usetopic-briefdetail .brief-detail-header .usetopic_back, .usetopicDataShow .usetopic-briefdetail .brief-detail-header .usetopic_logout
717 {
718 width: 25%;
719 margin: 1px 0 0;
720 position: relative;
721 }
722 .usetopicDataShow .usetopic-briefdetail .brief-detail-header .usetopic_back .MuiSvgIcon-root, .usetopicDataShow .usetopic-briefdetail .brief-detail-header .usetopic_logout .usetopic_logout_btn
723 {
724 color: rgb(133, 159, 189);
725 overflow: visible;
726 font-size: 1.5rem;
727 text-align: center;
728 transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
729 border-radius: 50%;
730 margin: 0 auto;
731 display: table;
732 padding: 8px;
733 }
734 .usetopicDataShow .usetopic-briefdetail .brief-detail-header .usetopic_back .MuiSvgIcon-root:hover, .usetopicDataShow .usetopic-briefdetail .brief-detail-header .usetopic_logout .usetopic_logout_btn:hover
735 {
736 background-color: rgba(0, 0, 0, 0.04);
737 }
738 .usetopicDataShow .usetopic-briefdetail .brief-detail-header .usetopic_logout .usetopic_logout_btn
739 {
740 margin: 0 auto;
741 }
742 .usetopicDataShow .usetopic-briefdetail .brief-detail-header .title
743 {
744 width: 50%;
745 padding: 0.7rem 0rem;
746 font-size: 12px;
747 font-weight: 500;
748 color: rgb(156, 162, 170);
749 text-align: center;
750 }
751 #usetopicData .usetopic-briefdetail .grading
752 {
753 text-align: center;
754 margin-bottom: 21px;
755 }
756 #usetopicData .usetopic-briefdetail .grading p
757 {
758 font-weight: 500;
759 color: rgb(51, 65, 82);
760 font-size: 0.75rem;
761 text-align: center;
762 }
763 #usetopicData .usetopic-briefdetail .grading h3
764 {
765 font-weight: 500;
766 color: rgb(62, 75, 92);
767 margin-bottom: 0.35em;
768 font-size: 2.125rem;
769 margin-top: 0;
770 }
771 #usetopicData .usetopic-briefdetail .grading .usetopic-bdwc
772 {
773 color: rgb(51, 65, 82);
774 font-size: 0.875rem;
775 font-weight: 500;
776 }
777 #usetopicData .usetopic-briefdetail .grading .usetopic-bdwc #usetopic-wordcount
778 {
779 color: #fff;
780 background: rgb(255, 76, 76);
781 opacity: 0.5;
782 height: auto;
783 font-size: 0.8125rem;
784 transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
785 width: auto;
786 display: inline-table;
787 border-radius: 50%;
788 padding: 6px 10px;
789 }
790
791 #usetopicData .usetopic-briefdetail .usetopic-tqo .usetopic-tb {
792 background-color: #91A1A4;
793 color: #ecf0f1;
794 box-shadow: 2px 2px 5px #809093;
795 /* box-shadow: 10px 10px 5px #809093; */
796 height: 50px;
797 width: 300px;
798 font-size: 30px;
799 border-radius: 5px;
800 outline: none;
801 border: 0;
802 overflow: hidden;
803 position: relative;
804 cursor: pointer;
805 }
806 #usetopicData .usetopic-briefdetail .usetopic-tqo .usetopic-tb:hover {
807 opacity: 0.9;
808 }
809
810 #usetopicData .usetopic-briefdetail .usetopic-tqo .hold-mouse {
811 box-shadow: 4px 4px 55px #809093;
812 }
813
814 #usetopicData .usetopic-briefdetail .usetopic-tqo .circle {
815 height: 25px;
816 width: 25px;
817 background-color: rgba(255, 255, 255, 0.3);
818 border-radius: 50%;
819 position: absolute;
820 left: 50%;
821 top: 50%;
822 pointer-events: none;
823 transform: scale(0);
824 /* animation: grow 1s forwards; */
825 }
826
827 @keyframes grow {
828 0% {
829 background-color: rgba(50, 50, 50, 0.5);
830 transform: scale(1);
831 z-index: 2;
832 }
833 100% {
834 background-color: rgba(50, 50, 50, 0.3);
835 transform: scale(30);
836 opacity: 0;
837 z-index: -1;
838 }
839 }
840 #usetopicData .usetopic-briefdetail .usetopic-tqo .grow {
841 animation: grow 1.4s ease-out forwards;
842 }
843 #usetopicData .acc
844 {
845 margin: 0 auto;
846 }
847 #usetopicData .acc__card
848 {
849 position: relative;
850 border-top: 1px solid rgba(0, 0, 0, 0.12);
851 }
852 #usetopicData .acc__title
853 {
854 background: transparent;
855 box-shadow: none;
856 color: rgb(51, 65, 82);
857 cursor: pointer;
858 display: block;
859 padding: 12px 0;
860 position: relative;
861 text-align: left;
862 font-weight: 500;
863 }
864 #usetopicData .acc__title::after {
865 width: 8px;
866 height: 8px;
867 border-right: 2px solid #4a6e78;
868 border-bottom: 2px solid #4a6e78;
869 position: absolute;
870 right: 10px;
871 content: " ";
872 top: 17px;
873 transform: rotate(42deg);
874 transition: all 0.2s ease-in-out;
875 }
876 #usetopicData .acc__title.active::after {
877 transform: rotate(-137deg);
878 transition: all 0.2s ease-in-out;
879 }
880
881 #usetopicData .acc__panel {
882 background: #fff;
883 color: #212121;
884 display: none;
885 margin: 0;
886 padding: 0 0 22px;
887 text-align: left;
888 }
889 #usetopicData .usetopic-related-questions li
890 {
891 padding: 16px 0;
892 border-bottom: 1px solid rgba(0, 0, 0, 0.12);
893 display: flex;
894 flex-wrap: wrap;
895 }
896 #usetopicData .usetopic-related-questions .usetopic-qa
897 {
898 font-size: 12px;
899 color: rgb(62, 75, 91);
900 text-decoration: none;
901 width: 100%;
902 display: block;
903 padding-right: 23px;
904 }
905 #usetopicData .usetopic-related-questions .usetopic-qa-icon
906 {
907 display: table;
908 margin: -15px 12px 0 auto;
909 }
910 #usetopicData .usetopic-related-questions svg
911 {
912 width: 1em;
913 color: rgba(0, 0, 0, 0.54);
914 margin-top: 3px;
915 margin-left: auto;
916 }
917 #usetopicData .usetopic-related-questions.usetopic-gsuggs .usetopic-qa-icon
918 {
919 margin: -20px 12px 0 auto;
920 }
921 #usetopicData .usetopic-single-outline
922 {
923 box-shadow: 0px 2px 5px 0px #3838382e;
924 border-radius: 4px;
925 color: rgba(0, 0, 0, 0.87);
926 transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
927 background-color: #fff;
928 margin-bottom: 20px;
929 }
930 #usetopicData .usetopic-single-outline .uto-header
931 {
932 background-color: rgb(242, 244, 248);
933 padding: 16px;
934 font-size: 0.75rem;
935 }
936 #usetopicData .usetopic-single-outline .uto-body
937 {
938 padding: 16px;
939 }
940 #usetopicData .usetopic-single-outline .uto-body>h3
941 {
942 margin-bottom: 0;
943 }
944 #usetopicData .usetopic-single-outline .uto-body h3
945 {
946 color: rgb(62, 75, 91);
947 font-weight: 500;
948 margin-top: 0.5rem;
949 }
950 #usetopicData .usetopic-single-outline .uto-body h3 img
951 {
952 margin-right: 0.2rem;
953 width: 14px;
954 }
955 #usetopicData .usetopic-single-outline .uto-body h4
956 {
957 font-weight: 500;
958 color: rgb(133, 159, 189);
959 font-size: 0.875rem;
960 }
961 #usetopicData .usetopic-single-outline .uto-body p
962 {
963 font-size: 0.75rem;
964 font-weight: 400;
965 line-height: 1.66;
966 }
967 #usetopicData .usetopic-single-outline .uto-body li p
968 {
969 margin: 10px 0;
970 }
971 #usetopicData .usetopic-single-outline #usetopicoutlines .uto-body h4
972 {
973 margin: 18px 0 0;
974 }
975 #usetopicData .usetopic-single-outline .uto-body ul .H2, #usetopicData .usetopic-single-outline .uto-body ul .H1
976 {
977 font-weight: 500;
978 color: rgb(62, 75, 91);
979 font-size: 0.875rem;
980 line-height: 1.57;
981 margin-bottom: 0;
982 }
983 #usetopicData .usetopic-single-outline .uto-body ul li
984 {
985 margin-top: 12px;
986 }
987 #usetopicData .usetopic-single-outline .uto-body ul .H3, #usetopicData .usetopic-single-outline .uto-body ul .H4
988 {
989 color: rgb(62, 75, 91);
990 margin-left: 1rem;
991 font-size: 0.875rem;
992 line-height: 1.43;
993 margin-bottom: 0;
994 }
995 #usetopicData #usetopicoutlines
996 {
997 padding-bottom: 28px;
998 }
999
1000 /* progress bar */
1001 #usetopicData .usetopic-progress
1002 {
1003 background-color: #d9d9d9;
1004 height: 18px;
1005 width: 66%;
1006 border-radius: 10px;
1007 overflow: hidden;
1008 margin: 25px auto 8px;
1009 }
1010 #usetopicData .progress-bar__inner
1011 {
1012 position: relative;
1013 display: block;
1014 height: 100%;
1015 background-color: #fc6f4a;
1016 animation: run-progress 1s;
1017 border-radius: 8px;
1018 }
1019 @keyframes run-progress {
1020 0% {
1021 width: 0;
1022 }
1023 }
1024
1025 #usetopicData .usetopic-briefdetail .usetopic-tqo
1026 {
1027 padding-bottom: 69px;
1028 }
1029 .usetopicDataShow .usetopic-tooltip
1030 {
1031 background: #3f4b5b;
1032 color: #fff !important;
1033 width: 38px !important;
1034 padding: 3px 7px !important;
1035 font-size: 11px !important;
1036 border-radius: 4px;
1037 transition: 0.4s ease;
1038 opacity: 0;
1039 position: absolute;
1040 left: 50%;
1041 transform: translate(-50%,0);
1042 bottom: -41px;
1043 z-index: 2;
1044 }
1045 .usetopicDataShow .usetopic-tooltip:after
1046 {
1047 background: #3f4b5b;
1048 position: absolute;
1049 width: 7px;
1050 height: 7px;
1051 top: -4px;
1052 left: 50%;
1053 transform: translate(-50%,0) rotate(45deg);
1054 content: "";
1055 opacity: 1;
1056 transition: 0.4s ease;
1057 z-index: 2;
1058 }
1059 #usetopicData .usetopic-briefdetail .usetopic-tqo .usedTopicsAllTopics li .usetopic-tooltip
1060 {
1061 width: 120px !important;
1062 background: #707070;
1063 }
1064 #usetopicData .usetopic-briefdetail .usetopic-tqo .usedTopicsAllTopics li .usetopic-tooltip:after
1065 {
1066 background: #707070;
1067 }
1068 .usetopicDataShow .usetopic-briefdetail .brief-detail-header .usetopic_back svg:hover + .usetopic-tooltip, .usetopicDataShow .usetopic-briefdetail .brief-detail-header .usetopic_back svg:hover + .usetopic-tooltip:after
1069 {
1070 opacity: 1;
1071 }
1072 .usetopicbriefs .sign-in .usetopic_logout button:hover .usetopic-tooltip, .usetopicbriefs .sign-in .usetopic_logout button:hover .usetopic-tooltip:after, .usetopicDataShow .usetopic-briefdetail .brief-detail-header .usetopic_logout .usetopic_logout_btn:hover .usetopic-tooltip, .usetopicDataShow .usetopic-briefdetail .brief-detail-header .usetopic_logout .usetopic_logout_btn:hover .usetopic-tooltip:after
1073 {
1074 opacity: 1;
1075 }
1076 #usetopicData .usetopic-briefdetail .usetopic-tqo .usedTopicsAllTopics li .usetopic-brief-ct-name:hover .usetopic-tooltip, #usetopicData .usetopic-briefdetail .usetopic-tqo .usedTopicsAllTopics li .usetopic-brief-ct-name:hover .usetopic-tooltip:after, #usetopicData .usetopic-briefdetail .usetopic-tqo .usedTopicsAllTopics li .usetopic-headingsin-used svg:hover .usetopic-tooltip, #usetopicData .usetopic-briefdetail .usetopic-tqo .usedTopicsAllTopics li .usetopic-headingsin-used svg:hover .usetopic-tooltip:after
1077 {
1078 opacity: 1;
1079 }
1080 #usetopictopics .usetopic_switch
1081 {
1082 margin: 22px 0 26px;
1083 }
1084 #usetopictopics .usetopic_switch input[type="checkbox"]
1085 {
1086 position: relative;
1087 width: 40px;
1088 height: 14px;
1089 -webkit-appearance: none;
1090 background: #a2a8af;
1091 border-radius: 100px;
1092 outline: none;
1093 border: none;
1094 transition: 0.2s ease;
1095 }
1096 #usetopictopics .usetopic_switch input:focus
1097 {
1098 box-shadow: none;
1099 }
1100 #usetopictopics .usetopic_switch input:checked[type="checkbox"]::before
1101 {
1102 background: #3f4b5a;
1103 }
1104 #usetopictopics .usetopic_switch input[type="checkbox"]::before
1105 {
1106 content: '';
1107 position: absolute;
1108 width: 18px;
1109 height: 18px;
1110 top: -3px;
1111 left: 0;
1112 background: #fff;
1113 border-radius: 50%;
1114 box-shadow: 0px 2px 1px -1px
1115 rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px
1116 rgba(0,0,0,0.12);
1117 transform: scale(1.1);
1118 transition: 0.2s ease;
1119 }
1120 #usetopictopics .usetopic_switch input:checked[type="checkbox"]::before
1121 {
1122 left: 50%;
1123 }
1124 .hide-used-topics .usetopic-alreadyAdded {
1125 display: none !important;
1126 }
1127 #usetopictopics .usetopic_switch input[type="checkbox"]:checked::before
1128 {
1129 margin: 0;
1130 }
1131 .usetopicDataShow .usetopic_logout .usetopic-tooltip
1132 {
1133 left: 69%;
1134 bottom: -32px;
1135 }
1136 .usetopicDataShow .usetopic-briefdetail .usetopic_logout .usetopic-tooltip
1137 {
1138 left: 50%;
1139 bottom: -41px;
1140 }
1141 .usetopicDataShow .usetopic_back .usetopic-tooltip
1142 {
1143 width: 25px !important;
1144 }
1145 #usetopicData .usetopic-briefdetail .usetopic-tqo .usedTopicsAllTopics li .usetopic-headingsin-used:hover .usetopic-tooltip, #usetopicData .usetopic-briefdetail .usetopic-tqo .usedTopicsAllTopics li .usetopic-headingsin-used:hover .usetopic-tooltip:after
1146 {
1147 opacity: 1;
1148 }
1149 .usetopicDataShow .usetopic-brief-ct-name .usetopic-tooltip
1150 {
1151 background: #3f4b5b;
1152 bottom: -30px;
1153 }
1154 #usetopicData .usetopic-briefdetail .usetopic-tqo .usedTopicsAllTopics li .usetopic-headingsin-used .usetopic-tooltip
1155 {
1156 width: 107px !important;
1157 bottom: -29px;
1158 background: #707070;
1159 margin: 0;
1160 }
1161 #usetopicData .usetopic-briefdetail .usetopic-tqo .usedTopicsAllTopics li .usetopic-headingsin-used .usetopic-tooltip:hover
1162 {
1163 background: #707070;
1164 }
1165 #usetopicData .usetopic-keyword-detail-popup
1166 {
1167 background: #fff;
1168 width: 34%;
1169 position: fixed;
1170 top: 0;
1171 bottom: 0;
1172 z-index: 9999999;
1173 padding: 35px 0.5rem 12px 0.5rem;
1174 right: 0;
1175 overflow: scroll;
1176 }
1177 #usetopicData .usetopic-keyword-detail-popup .ut-header
1178 {
1179 position: relative;
1180 text-align: center;
1181 min-height: 60px;
1182 }
1183 #usetopicData .usetopic-keyword-detail-popup .ut-header .usetopic-keyword-back
1184 {
1185 position: absolute;
1186 top: -11px;
1187 left: -8px;
1188 }
1189 #usetopicData .usetopic-keyword-detail-popup .ut-header .usetopic-keyword-back svg
1190 {
1191 color: #3f4b5b;
1192 width: 1em !important;
1193 height: 1em;
1194 display: inline-block;
1195 font-size: 1.5rem;
1196 transform: rotate(180deg);
1197 padding: 10px;
1198 border-radius: 50%;
1199 cursor: pointer;
1200 }
1201 #usetopicData .usetopic-keyword-detail-popup .ut-header .usetopic-keyword-back svg:hover
1202 {
1203 background: rgba(0, 0, 0, 0.04);
1204 }
1205 .usetopicDataShow .ut-header .usetopic-keyword-back svg:hover + .usetopic-tooltip, .usetopicDataShow .ut-header .usetopic-keyword-back svg:hover + .usetopic-tooltip:after
1206 {
1207 opacity: 1;
1208 }
1209 .usetopicDataShow .ut-header .usetopic-keyword-back .usetopic-tooltip
1210 {
1211 width: auto !important;
1212 }
1213 #usetopicData .usetopic-keyword-detail-popup .ut-header h3
1214 {
1215 color: rgb(62, 75, 91);
1216 font-weight: 500;
1217 margin: 0.5rem 2.5rem -6px;
1218 }
1219 #usetopicData .usetopic-keyword-detail-popup .ut-header p
1220 {
1221 color: grey;
1222 font-weight: 500;
1223 font-size: 0.75rem;
1224 }
1225 #usetopicData .usetopic-keyword-detail-popup .usetopic-keyword-header2
1226 {
1227 border: 1px solid rgba(0, 0, 0, 0.12);
1228 border-left: none;
1229 border-right: none;
1230 display: flex;
1231 margin: 0 -0.5rem;
1232 padding: 9px 0 4px;
1233 }
1234 #usetopicData .usetopic-keyword-detail-popup .usetopic-keyword-header2 li
1235 {
1236 list-style: none;
1237 width: calc(100% / 3);
1238 text-align: center;
1239 }
1240 #usetopicData .usetopic-keyword-detail-popup .usetopic-keyword-header2 li p
1241 {
1242 font-size: 0.75rem;
1243 color: rgba(0, 0, 0, 0.87);
1244 margin: 0;
1245 }
1246 #usetopicData .usetopic-keyword-detail-popup .usetopic-keyword-header2 li h4
1247 {
1248 color: rgb(62, 75, 91);
1249 font-style: italic;
1250 font-weight: 500;
1251 font-size: 0.875rem;
1252 margin: 3px 0 0;
1253 }
1254 #usetopicData .usetopic-keyword-detail-popup .usetopic-keyword-headused
1255 {
1256 width: 91.666667%;
1257 }
1258 #usetopicData .usetopic-keyword-detail-popup .usetopic-keyword-headused h2, #usetopicData .usetopic-keyword-detail-popup .usetopic-keyword-sources h2
1259 {
1260 color: rgb(63, 75, 91);
1261 font-weight: 500;
1262 margin-top: 1.5rem;
1263 font-size: 1.25rem;
1264 margin-bottom: 16px;
1265 }
1266 #usetopicData .usetopic-keyword-detail-popup .usetopic-keyword-headused .utk-headused-single h3, #usetopicData .usetopic-keyword-detail-popup .usetopic-keyword-sources .utk-sources-single h3
1267 {
1268 color: rgb(62, 75, 91);
1269 font-weight: 500;
1270 margin-top: 0;
1271 font-size: 1rem;
1272 line-height: 1.4em;
1273 margin-bottom: 2px;
1274 }
1275 #usetopicData .usetopic-keyword-detail-popup .utk-headused-single, #usetopicData .usetopic-keyword-sources .utk-sources-single
1276 {
1277 border-bottom: 1px solid rgba(0, 0, 0, 0.12);
1278 padding: 18px 0.5rem 5px 0.5rem;
1279 }
1280 #usetopicData .usetopic-keyword-detail-popup .utk-headused-single li, #usetopicData .usetopic-keyword-detail-popup .utk-sources-single .utks-desc li
1281 {
1282 color: rgba(0, 0, 0, 0.87);
1283 position: relative;
1284 font-size: 0.875rem;
1285 line-height: 1.43;
1286 padding: 0 1rem 0 1rem;
1287 }
1288 #usetopicData .usetopic-keyword-detail-popup .utk-headused-single li:before, #usetopicData .usetopic-keyword-detail-popup .utk-sources-single .utks-desc li:before
1289 {
1290 background: rgba(0, 0, 0, 0.87);
1291 content: "";
1292 height: 5px;
1293 width: 5px;
1294 border-radius: 50%;
1295 display: inline-table;
1296 margin-right: 12px;
1297 position: relative;
1298 top: -2px;
1299 }
1300
1301 .MuiDrawer-root.MuiDrawer-modal{
1302 z-index: 999999!important;
1303 }
1304
1305 .body-overlay-usetopic::before {
1306 content: " ";
1307 width: 100%;
1308 height: 100%;
1309 position: fixed;
1310 background: rgba(0, 0, 0, 0.5);
1311 z-index: 9999;
1312 }
1313 .body-overlay-usetopic{
1314 overflow: hidden;
1315 }
1316 .usetopic-login-toggle
1317 {
1318 display: table;
1319 margin: 49px auto 0;
1320 font-size: 0.875rem;
1321 position: relative;
1322 }
1323
1324 #usetopicData #usetopic-login-toggle:focus
1325 {
1326 color: #2271b1;
1327 box-shadow: none;
1328 outline: none;
1329 }
1330 #usetopicData #usetopic-login-toggle
1331 {
1332 margin: 62px auto 0;
1333 font-size: 0.875rem;
1334 display: table;
1335 position: relative;
1336 }
1337 #usetopicData #usetopic-login-toggle:after
1338 {
1339 position: absolute;
1340 content: "";
1341 top: -28px;
1342 left: 50%;
1343 transform: translate(-50%,0);
1344 background: #e8e8e8;
1345 width: 65px;
1346 height: 1px;
1347 }
1348 #usetopicData #usetopicloginform .usetopic-login-Error, #usetopicData #usetopicgetBrieffm .usetopic-loadbrief-Error
1349 {
1350 position: absolute;
1351 left: 50%;
1352 transform: translate(-50%,0);
1353 bottom: -69px;
1354 width: 100%;
1355 z-index: 1;
1356 font-size: 12px;
1357 }
1358 #usetopicData #usetopicgetBrieffm .usetopic-loadbrief-Error
1359 {
1360 transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
1361 background: rgb(44, 52, 63);
1362 padding: 8px;
1363 color: #fff;
1364 font-weight: 500;
1365 border-radius: 4px;
1366 display: none;
1367 text-align: center;
1368 }
1369 .loadingusetopicsearch
1370 {
1371 position: fixed;
1372 height: auto;
1373 width: 27%;
1374 z-index: 9999;
1375 color: #3f4b5b;
1376 padding: 91px 0;
1377 text-align: center;
1378 font-size: 17px;
1379 /*animation: crescendo 1.5s alternate infinite ease-in;*/
1380 }
1381 .usetopicbriefs .kyword-create .ro-results-usetopic
1382 {
1383 box-shadow: none;
1384 text-align: center;
1385 cursor: auto;
1386 position: relative;
1387 top: 10px;
1388 }
1389 .smallScreenContent
1390 {
1391 display: none;
1392 }
1393
1394 @media (max-width: 600px)
1395 {
1396 #usetopicData
1397 {
1398 padding-top: 3px !important;
1399 }
1400 }
1401 @media (max-width: 949px)
1402 {
1403 .smallScreenContent
1404 {
1405 display: block;
1406 position: absolute;
1407 top: 50%;
1408 left: 50%;
1409 transform: translate(-50%,-50%);
1410 color:
1411 rgb(51, 65, 82);
1412 font-size: 17px;
1413 z-index: 9999;
1414 width: 90%;
1415 text-align: center;
1416 line-height: 24px;
1417 }
1418 .usetopicDataShow .hidebig
1419 {
1420 display: none;
1421 }
1422 .usetopicDataShow .usetopicbriefs
1423 {
1424 padding: 0 50px 0 26px;
1425 }
1426 .usetopicDataShow .usetopic-briefdetail .brief-detail-header .usetopic_back, .usetopicDataShow .usetopic-briefdetail .brief-detail-header .usetopic_logout
1427 {
1428 width: 20%;
1429 }
1430 #usetopicData
1431 {
1432 width: 100%;
1433 padding-top: 60px;
1434 }
1435 #usetopicData .usetopic-briefdetail .usetopic-tqo .tabcontent
1436 {
1437 padding: 1px 40px 1px 15px;
1438 }
1439 #usetopicData .usetopic-keyword-detail-popup
1440 {
1441 width: 100%;
1442 left: 0;
1443 }
1444 #usetopicData .use-topic-top-bar.bottom-briefs-bar
1445 {
1446 width: 100%;
1447 }
1448 }
1449 @media (min-width: 950px) and (max-width: 960px)
1450 {
1451 #usetopicData
1452 {
1453 width: 395px;
1454 }
1455 #wpcontent #wpbody #wpbody-content .usetopic-lesswidth, #wpcontent .usetopic-lesswidth
1456 {
1457 width: 42%;
1458 }
1459 #wpcontent #wpbody #wpbody-content .notice.usetopic-lesswidth{
1460 width: 52%;
1461 }
1462 .usetopicDataShow .usetopicbriefs
1463 {
1464 padding: 0 2rem 0 1rem;
1465 }
1466 #usetopicData .usetopic-briefdetail .usetopic-tqo #usetopictopics .usedTopicsAllTopics li .usetopic-tooltip
1467 {
1468 width: 122px !important;
1469 }
1470 #usetopicData .usetopicbriefs .use-topic-top-bar.bottom-briefs-bar
1471 {
1472 width: 40%;
1473 margin: 0 -15px;
1474 }
1475 }
1476 @media (min-width: 961px) and (max-width: 1023px)
1477 {
1478 #usetopicData
1479 {
1480 width: 328px;
1481 }
1482 .usetopicDataShow .usetopicbriefs
1483 {
1484 padding: 0 2rem 0 1rem;
1485 }
1486 #usetopicData .usetopic-briefdetail .usetopic-tqo #usetopictopics .usedTopicsAllTopics li .usetopic-tooltip
1487 {
1488 width: 122px !important;
1489 }
1490 #usetopicData .usetopicbriefs .use-topic-top-bar.bottom-briefs-bar
1491 {
1492 width: 31%;
1493 margin: 0 -15px;
1494 }
1495 @media not all and (min-resolution:.001dpcm)
1496 {
1497 @supports (-webkit-appearance:none)
1498 {
1499 #usetopicData .usetopic-keyword-detail-popup
1500 {
1501 width: 315px !important;
1502 }
1503 }
1504 }
1505 @media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
1506 {
1507 @media
1508 {
1509 #usetopicData .usetopic-keyword-detail-popup
1510 {
1511 width: 315px !important;
1512 }
1513 }
1514 }
1515 }
1516 @media (min-width: 1024px) and (max-width: 1279px)
1517 {
1518 #usetopicData
1519 {
1520 /*width: 305px;*/
1521 }
1522 #wpcontent #wpbody #wpbody-content .usetopic-lesswidth, #wpcontent .usetopic-lesswidth
1523 {
1524 /*width: 100%;*/
1525 }
1526 #wpcontent #wpbody #wpbody-content .notice.usetopic-lesswidth{
1527 width: 59%;
1528 }
1529 .usetopicDataShow .usetopicbriefs
1530 {
1531 padding: 0 33px 0 16px;
1532 }
1533 @media not all and (min-resolution:.001dpcm)
1534 {
1535 @supports (-webkit-appearance:none)
1536 {
1537 #usetopicData .usetopic-keyword-detail-popup
1538 {
1539 width: 290px !important;
1540 }
1541 }
1542 }
1543 @media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
1544 {
1545 @media
1546 {
1547 #usetopicData .usetopic-keyword-detail-popup
1548 {
1549 width: 290px !important;
1550 }
1551 }
1552 }
1553 }
1554 @media (min-width: 1437px) and (max-width: 1599px)
1555 {
1556 #usetopicData
1557 {
1558 width: 385px;
1559 }
1560 #usetopicData .use-topic-top-bar.bottom-briefs-bar
1561 {
1562 width: 375px;
1563 }
1564 @media not all and (min-resolution:.001dpcm)
1565 {
1566 @supports (-webkit-appearance:none)
1567 {
1568 #usetopicData .usetopic-keyword-detail-popup
1569 {
1570 width: 370px !important;
1571 }
1572 }
1573 }
1574 @media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
1575 {
1576 @media
1577 {
1578 #usetopicData .usetopic-keyword-detail-popup
1579 {
1580 width: 370px !important;
1581 }
1582 }
1583 }
1584 }
1585 @media (min-width: 1600px) and (max-width: 1844px)
1586 {
1587 #usetopicData
1588 {
1589 width: 402px;
1590 }
1591 #usetopicData .use-topic-top-bar.bottom-briefs-bar
1592 {
1593 width: 390px;
1594 }
1595 @media not all and (min-resolution:.001dpcm)
1596 {
1597 @supports (-webkit-appearance:none)
1598 {
1599 #usetopicData .usetopic-keyword-detail-popup
1600 {
1601 width: 387px !important;
1602 }
1603 }
1604 }
1605 @media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
1606 {
1607 @media
1608 {
1609 #usetopicData .usetopic-keyword-detail-popup
1610 {
1611 width: 387px !important;
1612 }
1613 }
1614 }
1615 }
1616 @media (min-width: 1844px) and (max-width: 2144px)
1617 {
1618 #usetopicData
1619 {
1620 width: 428px;
1621 }
1622 #usetopicData .use-topic-top-bar.bottom-briefs-bar
1623 {
1624 width: 410px;
1625 }
1626 @media not all and (min-resolution:.001dpcm)
1627 {
1628 @supports (-webkit-appearance:none)
1629 {
1630 #usetopicData .usetopic-keyword-detail-popup
1631 {
1632 width: 415px !important;
1633 }
1634 }
1635 }
1636 @media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
1637 {
1638 @media
1639 {
1640 #usetopicData .usetopic-keyword-detail-popup
1641 {
1642 width: 415px !important;
1643 }
1644 }
1645 }
1646 }
1647 @media (min-width: 2145px) and (max-width: 2573px)
1648 {
1649 #usetopicData
1650 {
1651 width: 452px;
1652 }
1653 #usetopicData .use-topic-top-bar.bottom-briefs-bar
1654 {
1655 width: 435px;
1656 }
1657 @media not all and (min-resolution:.001dpcm)
1658 {
1659 @supports (-webkit-appearance:none)
1660 {
1661 #usetopicData .usetopic-keyword-detail-popup
1662 {
1663 width: 437px !important;
1664 }
1665 }
1666 }
1667 @media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
1668 {
1669 @media
1670 {
1671 #usetopicData .usetopic-keyword-detail-popup
1672 {
1673 width: 437px !important;
1674 }
1675 }
1676 }
1677 }
1678 @media (min-width: 2574px) and (max-width: 3217px)
1679 {
1680 #usetopicData
1681 {
1682 width: 497px;
1683 }
1684 #usetopicData .use-topic-top-bar.bottom-briefs-bar
1685 {
1686 width: 480px;
1687 }
1688 @media not all and (min-resolution:.001dpcm)
1689 {
1690 @supports (-webkit-appearance:none)
1691 {
1692 #usetopicData .usetopic-keyword-detail-popup
1693 {
1694 width: 480px !important;
1695 }
1696 }
1697 }
1698 @media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
1699 {
1700 @media
1701 {
1702 #usetopicData .usetopic-keyword-detail-popup
1703 {
1704 width: 480px !important;
1705 }
1706 }
1707 }
1708 }
1709 @media (min-width: 3218px) and (max-width: 4289px)
1710 {
1711 #usetopicData
1712 {
1713 width: 565px;
1714 }
1715 #usetopicData .use-topic-top-bar.bottom-briefs-bar
1716 {
1717 width: 550px;
1718 }
1719 @media not all and (min-resolution:.001dpcm)
1720 {
1721 @supports (-webkit-appearance:none)
1722 {
1723 #usetopicData .usetopic-keyword-detail-popup
1724 {
1725 width: 550px !important;
1726 }
1727 }
1728 }
1729 @media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
1730 {
1731 @media
1732 {
1733 #usetopicData .usetopic-keyword-detail-popup
1734 {
1735 width: 550px !important;
1736 }
1737 }
1738 }
1739 }
1740 @media (min-width: 3852px) and (max-width: 4289px)
1741 {
1742 #usetopicData
1743 {
1744 width: 615px;
1745 }
1746 #usetopicData .use-topic-top-bar.bottom-briefs-bar
1747 {
1748 width: 580px;
1749 }
1750 @media not all and (min-resolution:.001dpcm)
1751 {
1752 @supports (-webkit-appearance:none)
1753 {
1754 #usetopicData .usetopic-keyword-detail-popup
1755 {
1756 width: 600px !important;
1757 }
1758 }
1759 }
1760 @media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
1761 {
1762 @media
1763 {
1764 #usetopicData .usetopic-keyword-detail-popup
1765 {
1766 width: 600px !important;
1767 }
1768 }
1769 }
1770 }
1771 @media (min-width: 4290px) and (max-width: 5135px)
1772 {
1773 #usetopicData
1774 {
1775 width: 665px;
1776 }
1777 #usetopicData .use-topic-top-bar.bottom-briefs-bar
1778 {
1779 width: 650px;
1780 }
1781 @media not all and (min-resolution:.001dpcm)
1782 {
1783 @supports (-webkit-appearance:none)
1784 {
1785 #usetopicData .usetopic-keyword-detail-popup
1786 {
1787 width: 650px !important;
1788 }
1789 }
1790 }
1791 @media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
1792 {
1793 @media
1794 {
1795 #usetopicData .usetopic-keyword-detail-popup
1796 {
1797 width: 650px !important;
1798 }
1799 }
1800 }
1801 }
1802 @media (min-width: 5136px)
1803 {
1804 #usetopicData
1805 {
1806 width: 754px;
1807 }
1808 #usetopicData .use-topic-top-bar.bottom-briefs-bar
1809 {
1810 width: 685px;
1811 }
1812 @media not all and (min-resolution:.001dpcm)
1813 {
1814 @supports (-webkit-appearance:none)
1815 {
1816 #usetopicData .usetopic-keyword-detail-popup
1817 {
1818 width: 738px !important;
1819 }
1820 }
1821 }
1822 @media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
1823 {
1824 @media
1825 {
1826 #usetopicData .usetopic-keyword-detail-popup
1827 {
1828 width: 738px !important;
1829 }
1830 }
1831 }
1832 }
1833 @media not all and (min-resolution:.001dpcm) {
1834 @supports (-webkit-appearance:none)
1835 {
1836 #usetopicData .usetopic-keyword-detail-popup
1837 {
1838 width: 357px;
1839 transition: 0.3s ease;
1840 }
1841 }
1842 }
1843 @media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0)
1844 {
1845 @media
1846 {
1847 #usetopicData .usetopic-keyword-detail-popup
1848 {
1849 width: 357px;
1850 }
1851 }
1852 }
1853