PluginProbe
Chartify – WordPress Chart Plugin / 3.8.1
Chartify – WordPress Chart Plugin v3.8.1
3.8.1 3.8.0 3.7.9 3.7.8 3.7.7 3.7.6 3.7.5 trunk 1.0.0 3.0.0 3.0.1 3.0.2 3.0.3 3.0.4 3.0.5 3.0.6 3.0.7 3.0.8 3.0.9 3.1.0 3.1.1 3.1.2 3.1.3 3.1.4 3.1.5 All 84 releases
← All changes | admin/css/banner.css +672 -256 trunk → 3.8.1 View file →
@@ -1,256 +1,672 @@
1 -/* ~~ Top Navigation Bar ~~ */
2 -
3 -.ays-notice-banner{
4 - width: calc(100% - 20px);
5 - /* background-color: #0093E9;
6 - background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%); */
7 - background-color: #FFFFFF;
8 - box-shadow: 0px 4px 4px rgb(188 198 216 / 11%);
9 - border-radius: 0px 0px 12px 12px;
10 - background-image: unset;
11 - padding-bottom:10px;
12 - padding-left:10px;
13 -}
14 -
15 -.ays-notice-banner #navigation-container {
16 - width: 100%;
17 - margin: 0 auto;
18 - display: flex;
19 - flex-direction: row;
20 - flex-wrap: nowrap;
21 - justify-content: space-between;
22 - align-items: stretch;
23 - align-content: stretch;
24 - /* padding-top: 20px; */
25 -}
26 -
27 -.ays-notice-banner .navigation-bar {
28 - width: 100%;
29 - text-align:center;
30 -}
31 -/* .ays-notice-banner .navigation-bar a.logo-container{
32 - margin: 0 0 0 20px;
33 -} */
34 -.ays-notice-banner .navigation-bar a.logo-container .logo {
35 - float: left;
36 - width: 80px;
37 -}
38 -.ays-notice-banner .navigation-bar ul {
39 - display: flex;
40 - flex-direction: row;
41 - flex-wrap: nowrap;
42 - justify-content: flex-end;
43 - align-items: flex-end;
44 - align-content: stretch;
45 - padding: 0;
46 - margin: 0 20px 0 0;
47 - max-width: 100%;
48 - min-width: 200px;
49 - width: 100%;
50 -}
51 -
52 -.ays-notice-banner .navigation-bar li {
53 - padding: 0px;
54 - margin-top: 4px;
55 - margin-bottom: 4px;
56 - margin-right: 44px;
57 -}
58 -
59 -/* .ays-notice-banner .navigation-bar li.take_survay a:hover:after {
60 - border-color: #A9FF00;
61 -} */
62 -
63 -.ays-notice-banner .navigation-bar li:last-child {
64 - margin-right: 0;
65 -}
66 -
67 -
68 -.ays-notice-banner .navigation-bar li.take_survay a {
69 - /* color: #A9FF00; */
70 - color: #F98A0C;
71 -}
72 -
73 -.ays-notice-banner .navigation-bar li.take_survay a:hover {
74 - /* color: #C44949; */
75 - color: #F98A0C;
76 -}
77 -
78 -
79 -.ays-notice-banner .navigation-bar li a {
80 - /* color: #fff; */
81 - color: #5561A3;
82 - cursor: pointer;
83 - font-size: 16px;
84 - font-weight: 400;
85 - line-height: 45px;
86 - margin: 0 0 2em;
87 - max-width: 160px;
88 - position: relative;
89 - text-decoration: none;
90 - /* text-transform: uppercase; */
91 - text-decoration: underline;
92 - width: 100%;
93 - letter-spacing: 0;
94 -}
95 -
96 -.ays-notice-banner .navigation-bar li a:after {
97 - -webkit-backface-visibility: hidden;
98 - backface-visibility: hidden;
99 - border: 1px solid rgba(255, 255, 255, 0);
100 - bottom: 0;
101 - content: " ";
102 - display: none;
103 - margin: 0 auto;
104 - position: relative;
105 - transition: all 280ms ease-in-out;
106 - width: 0;
107 -}
108 -
109 -/* .ays-notice-banner .navigation-bar li a:hover:after{
110 - -webkit-backface-visibility: hidden;
111 - backface-visibility: hidden;
112 - border-color: #fff;
113 - transition: width 350ms ease-in-out;
114 - width: 100%;
115 -} */
116 -
117 -.ays-notice-banner .navigation-bar li a:hover{
118 - outline: unset;
119 - box-shadow: unset;
120 - color: #3E477D;
121 -}
122 -
123 -.ays-notice-banner .modile-ddmenu-lg {
124 - display: none;
125 -}
126 -
127 -.ays-notice-banner .modile-ddmenu-sm,
128 -.ays-notice-banner .modile-ddmenu-md {
129 - display: none;
130 - position: relative;
131 - width: 80px;
132 -}
133 -
134 -.ays-notice-banner #menu li a.toggle_ddmenu {
135 - font-size:25px;
136 - /* color:#fff; */
137 - color: #5561A3;
138 - width: 100%;
139 -}
140 -
141 -.ays-notice-banner #menu li a.toggle_ddmenu i.ays_fa{
142 - transition: .1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
143 -}
144 -
145 -.ays-notice-banner li ul.ddmenu {
146 - display: none;
147 - position: absolute;
148 - right: -55px;
149 - top: 50px;
150 - z-index: 10000;
151 - flex-direction: column;
152 - width: fit-content;
153 - min-width: 200px;
154 - text-align: left;
155 - /* background-color: #0093E9; */
156 - /* background-image: linear-gradient(-160deg, #80D0C7 0%, #0093E9 100%); */
157 - background-color: #FFFFFF;
158 - background-image: unset;
159 - box-shadow: 0px 4px 4px rgb(188 198 216 / 11%);
160 -
161 -}
162 -
163 -.ays-notice-banner li ul.ddmenu[data-expanded="true"] {
164 - display: flex;
165 - animation: slideInRight .2s;
166 -}
167 -
168 -.ays-notice-banner li ul.ddmenu li {
169 - padding-left: 20px;
170 -}
171 -
172 -.ays-notice-banner .logo-container {
173 - width:75px;
174 - height:75px;
175 -}
176 -
177 -.ays-notice-banner .logo-container img {
178 - width:100%;
179 - height:100%;
180 - object-fit:contain;
181 -}
182 -
183 -
184 -@media screen and (min-width: 1080px){
185 - .ays-notice-banner .modile-ddmenu-lg {
186 - display: block;
187 - }
188 - .ays-notice-banner .modile-ddmenu-sm {
189 - display: none;
190 - }
191 - .ays-notice-banner .modile-ddmenu-md {
192 - display: none;
193 - }
194 - .ays-notice-banner .modile-ddmenu-xs {
195 - display: none;
196 - }
197 -}
198 -
199 -@media screen and (max-width: 1080px){
200 - .ays-notice-banner .modile-ddmenu-md {
201 - display: block;
202 - }
203 -}
204 -
205 -@media screen and (min-width: 531px) and (max-width: 768px){
206 - .ays-notice-banner .modile-ddmenu-sm {
207 - display: none;
208 - }
209 - .ays-notice-banner .modile-ddmenu-md {
210 - display: block;
211 - }
212 -
213 - div.ays-notice-banner{
214 - width: 100%;
215 - }
216 -
217 -}
218 -@media screen and (max-width: 530px){
219 - .ays-notice-banner .modile-ddmenu-sm {
220 - display: block;
221 - }
222 - .ays-notice-banner .modile-ddmenu-md {
223 - display: none;
224 - }
225 - .ays-notice-banner .modile-ddmenu-xs {
226 - display: none;
227 - }
228 -}
229 -@media screen and (max-width: 530px){
230 - .ays-notice-banner .modile-ddmenu-sm {
231 - display: block;
232 - }
233 - .ays-notice-banner .modile-ddmenu-md {
234 - display: none;
235 - }
236 - .ays-notice-banner .modile-ddmenu-xs {
237 - display: none;
238 - }
239 -}
240 -
241 -div#screen-meta-links .show-settings {
242 - border: unset;
243 -}
244 -
245 -div#screen-meta {
246 - border: unset;
247 - border-bottom: 1px solid #c3c4c770;
248 -}
249 -
250 -.ays-fa-margin-right {
251 - margin-right: 5px;
252 -}
253 -
254 -
255 -
256 -/* ~~ Top Navigation Bar ~~ */
1 +/* ~~ Top Navigation Bar ~~ */
2 +
3 +.ays-notice-banner{
4 + width: calc(100% - 20px);
5 + /* background-color: #0093E9;
6 + background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%); */
7 + background-color: #F8F8F8;
8 + box-shadow: 0px 3px 4px 0px rgb(188 198 216 / 11%);
9 + border-radius: 0px 0px 12px 12px;
10 + background-image: unset;
11 + /* padding-bottom:10px;
12 + padding-left:10px;
13 + padding-top: 15px; */
14 +}
15 +
16 +.ays-notice-banner #navigation-container {
17 + width: 100%;
18 + margin: 33px 0 0 0;
19 + margin: 0 auto;
20 + display: flex;
21 + flex-direction: row;
22 + flex-wrap: nowrap;
23 + justify-content: space-between;
24 + align-items: stretch;
25 + align-content: stretch;
26 + /* padding-top: 20px; */
27 + gap:0;
28 +}
29 +
30 +.ays-notice-banner .navigation-bar {
31 + width: 100%;
32 + text-align:center;
33 +}
34 +
35 +.ays-chart-top-banner-title span.ays-chart-top-banner-main-title {
36 + color: #0f172a;
37 + font-size: 15px;
38 + font-size: 17px;
39 + font-weight: 600;
40 + text-wrap-mode: nowrap;
41 +}
42 +.ays-chart-top-banner-title {
43 + margin-right: 30px;
44 + text-align: left;
45 +}
46 +.ays-chart-logo-container-one-time-text{
47 + margin-top: 5px;
48 + color: #475569;
49 + font-size: 10px !important;
50 + font-weight: 500 !important;
51 + font-style: italic !important;
52 + white-space: nowrap;
53 +}
54 +.ays-chart-top-banner-title span.ays-chart-top-banner-sub-title {
55 + margin-top: 4px;
56 + color: #475569;
57 + font-size: 11px;
58 + font-weight: 500;
59 + letter-spacing: .05em;
60 + text-transform: none;
61 +}
62 +
63 +.ays-chart-upgrade-container div:first-child {
64 + margin-left: 20px;
65 + align-self: center;
66 + display: flex;
67 + flex-direction: column;
68 +}
69 +/* .ays-chart-upgrade-container div:first-child a svg {
70 + width: 8px;
71 + height: 13px;
72 +} */
73 +/* .ays-notice-banner .navigation-bar a.logo-container{
74 + margin: 0 0 0 20px;
75 +} */
76 +.ays-notice-banner .navigation-bar a.logo-container .logo {
77 + float: left;
78 + width: 80px;
79 +}
80 +.ays-notice-banner .navigation-bar ul {
81 + display: flex;
82 + flex-direction: row;
83 + flex-wrap: nowrap;
84 + justify-content: flex-end;
85 + align-items: baseline;
86 + align-content: stretch;
87 + padding: 0;
88 + margin: 0 20px 0 0;
89 + max-width: 100%;
90 + /* min-width: 160px; */
91 + width: 100%;
92 +}
93 +
94 +.ays-notice-banner .navigation-bar li {
95 + padding: 0px;
96 + margin-top: 8px;
97 + margin-bottom: 4px;
98 + margin-right: 44px;
99 +}
100 +
101 +/* .ays-notice-banner .navigation-bar li.take_survay a:hover:after {
102 + border-color: #A9FF00;
103 +} */
104 +
105 +.ays-notice-banner .navigation-bar li:last-child {
106 + margin-right: 0;
107 +}
108 +
109 +
110 +.ays-notice-banner .navigation-bar li.take_survay a {
111 + /* color: #A9FF00; */
112 + color: #F98A0C;
113 +}
114 +
115 +.ays-notice-banner .navigation-bar li.take_survay a:hover {
116 + /* color: #C44949; */
117 + color: #F98A0C;
118 +}
119 +
120 +
121 +.ays-notice-banner .navigation-bar li a {
122 + /* color: #fff; */
123 + color: #5561A3;
124 + cursor: pointer;
125 + font-size: 16px;
126 + font-weight: 400;
127 + line-height: 45px;
128 + margin: 0 0 2em;
129 + max-width: 160px;
130 + position: relative;
131 + text-decoration: none;
132 + /* text-transform: uppercase; */
133 + text-decoration: underline;
134 + width: 100%;
135 + letter-spacing: 0;
136 +}
137 +
138 +.ays-notice-banner .navigation-bar li a:after {
139 + -webkit-backface-visibility: hidden;
140 + backface-visibility: hidden;
141 + border: 1px solid rgba(255, 255, 255, 0);
142 + bottom: 0;
143 + content: " ";
144 + display: none;
145 + margin: 0 auto;
146 + position: relative;
147 + transition: all 280ms ease-in-out;
148 + width: 0;
149 +}
150 +
151 +/* .ays-notice-banner .navigation-bar li a:hover:after{
152 + -webkit-backface-visibility: hidden;
153 + backface-visibility: hidden;
154 + border-color: #fff;
155 + transition: width 350ms ease-in-out;
156 + width: 100%;
157 +} */
158 +
159 +.ays-notice-banner .navigation-bar li a:hover{
160 + outline: unset;
161 + box-shadow: unset;
162 + color: #3E477D;
163 +}
164 +
165 +.ays-notice-banner .modile-ddmenu-lg {
166 + display: none;
167 +}
168 +
169 +.ays-notice-banner .modile-ddmenu-sm,
170 +.ays-notice-banner .modile-ddmenu-md {
171 + display: none;
172 + position: relative;
173 +
174 +}
175 +
176 +.ays-notice-banner #menu li a.toggle_ddmenu {
177 + font-size:25px;
178 + /* color:#fff; */
179 + color: #5561A3;
180 + width: 100%;
181 +}
182 +
183 +.ays-notice-banner #menu li a.toggle_ddmenu i.ays_fa{
184 + transition: .1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
185 +}
186 +
187 +.ays-notice-banner li ul.ddmenu {
188 + display: none;
189 + position: absolute;
190 + right: -55px;
191 + top: 50px;
192 + z-index: 10000;
193 + flex-direction: column;
194 + width: fit-content;
195 + min-width: 200px;
196 + text-align: left;
197 + /* background-color: #0093E9; */
198 + /* background-image: linear-gradient(-160deg, #80D0C7 0%, #0093E9 100%); */
199 + background-color: #FFFFFF;
200 + background-image: unset;
201 + box-shadow: 0px 4px 4px rgb(188 198 216 / 11%);
202 +
203 +}
204 +
205 +.ays-notice-banner li ul.ddmenu[data-expanded="true"] {
206 + display: flex;
207 + animation: slideInRight .2s;
208 +}
209 +
210 +.ays-notice-banner li ul.ddmenu li {
211 + padding-left: 20px;
212 +}
213 +
214 +/* .ays-notice-banner .logo-container {
215 + width:75px;
216 + height:75px;
217 +} */
218 +
219 +.ays-notice-banner .logo-container img {
220 + width:100%;
221 + height:100%;
222 + object-fit:contain;
223 +}
224 +
225 +.ays-navigation-container-logo-upgrade-box {
226 + display: flex;
227 + gap: 25px;
228 + align-items: center;
229 +}
230 +
231 +/* .ays-notice-banner a.ays-btn-upgrade:link, .ays-notice-banner a.ays-btn-upgrade:visited {
232 + padding: 5px 18px;
233 + border: 2px solid #10A37F;
234 + border-radius: 30px;
235 + color: #ffffff;
236 + width: fit-content;
237 + font-weight: 700;
238 + font-size: 14px;
239 + display: inline-block;
240 + display: flex;
241 + text-decoration: none;
242 + justify-content: space-between;
243 + gap: 5px;
244 + transition: .3s;
245 + margin: auto;
246 + margin-top: 6px;
247 + background-color: #10a37f;
248 +} */
249 +
250 +.ays-notice-banner #navigation-container a.ays-btn-upgrade:focus {
251 + outline: none;
252 + box-shadow: none;
253 +}
254 +.ays-notice-banner #navigation-container a.ays-btn-upgrade:hover {
255 + background-color: #0d8165;
256 +}
257 +/* .ays-notice-banner #navigation-container a.ays-btn-upgrade:hover svg path {
258 + transition: 0.3s;
259 + fill: #ffffff !important;
260 +} */
261 +
262 +@media screen and (max-width: 530px) {
263 + .ays-notice-banner #navigation-container a.ays-btn-upgrade {
264 + padding: 5px 10px;
265 + }
266 +}
267 +
268 +@media screen and (min-width: 1080px){
269 + .ays-notice-banner .modile-ddmenu-lg {
270 + display: block;
271 + }
272 + .ays-notice-banner .modile-ddmenu-sm {
273 + display: none;
274 + }
275 + .ays-notice-banner .modile-ddmenu-md {
276 + display: none;
277 + }
278 + .ays-notice-banner .modile-ddmenu-xs {
279 + display: none;
280 + }
281 +}
282 +
283 +@media screen and (max-width: 1080px){
284 + .ays-notice-banner .modile-ddmenu-md {
285 + display: block;
286 + }
287 +}
288 +
289 +@media screen and (min-width: 531px) and (max-width: 768px){
290 + .ays-notice-banner .modile-ddmenu-sm {
291 + display: none;
292 + }
293 + .ays-notice-banner .modile-ddmenu-md {
294 + display: block;
295 + }
296 +
297 + div.ays-notice-banner{
298 + width: 100%;
299 + }
300 +
301 +}
302 +@media screen and (max-width: 530px){
303 + .ays-notice-banner .modile-ddmenu-sm {
304 + display: block;
305 + }
306 + .ays-notice-banner .modile-ddmenu-md {
307 + display: none;
308 + }
309 + .ays-notice-banner .modile-ddmenu-xs {
310 + display: none;
311 + }
312 + .ays-navigation-container-logo-upgrade-box{
313 + gap:5px
314 + }
315 +}
316 +
317 +div#screen-meta-links .show-settings {
318 + border: unset;
319 +}
320 +
321 +div#screen-meta {
322 + border: unset;
323 + border-bottom: 1px solid #c3c4c770;
324 +}
325 +
326 +.ays-fa-margin-right {
327 + margin-right: 5px;
328 +}
329 +
330 +
331 +
332 +/* ~~ Top Navigation Bar ~~ */
333 +/* top banner redesign | Start */
334 +div.ays-notice-banner {
335 + width: calc(100% - 20px);
336 + max-width: 100%;
337 + margin: 30px 0 0 0;
338 + background: #fff;
339 + /* border: 1px solid rgba(203, 213, 225, .8); */
340 + border: unset;
341 + border-radius: 16px;
342 + box-shadow: 0 4px 20px -8px rgba(15, 23, 42, .08);
343 + overflow: visible;
344 +}
345 +
346 +.ays-notice-banner #navigation-container {
347 + min-height: 76px;
348 + padding: 0 20px;
349 + background: #fff;
350 + border-radius: 16px;
351 + align-items: center;
352 + gap: 22px;
353 +}
354 +
355 +.ays-notice-banner .navigation-bar {
356 + text-align: left;
357 +}
358 +
359 +.ays-notice-banner .ays-navigation-container-logo-upgrade-box {
360 + flex: 0 0 auto;
361 + gap: 3px;
362 +}
363 +
364 + .ays-notice-banner .logo-container {
365 + width: 50px;
366 + height: 50px;
367 + margin-left: 0;
368 + flex: 0 0 60px;
369 +}
370 +
371 +.ays-notice-banner .logo-container{
372 + display: flex !important;
373 + width: 100%;
374 + height: 100%;
375 + align-items: center;
376 + justify-content: center;
377 +}
378 +
379 +.ays-notice-banner .logo-container img {
380 + width: 100%;
381 + height: 100%;
382 + object-fit: contain;
383 +}
384 +
385 +.ays-chart-top-banner-title {
386 + display: flex;
387 + flex-direction: column;
388 + justify-content: center;
389 + min-width: 80px;
390 + line-height: 1.1;
391 +}
392 +
393 +.ays-chart-top-banner-title span:first-child {
394 + color: #0f172a;
395 + font-size: 15px;
396 + font-weight: 600;
397 +}
398 +
399 +.ays-chart-top-banner-title span:last-child {
400 + margin-top: 4px;
401 + color: #475569;
402 + font-size: 11px;
403 + font-weight: 500;
404 + letter-spacing: .05em;
405 + text-transform: uppercase;
406 +}
407 +
408 +/* .ays-notice-banner .ays-chart-upgrade-container {
409 + margin-left: 0;
410 + align-self: center;
411 +} */
412 +
413 +.ays-notice-banner .ays-chart-upgrade-container div a {
414 + text-decoration: none;
415 + min-height: 30px;
416 + padding: 5px 12px;
417 + border: 1px solid rgba(4, 120, 87, .2);
418 + border-radius: 999px;
419 + background: #059669;
420 + color: #fff;
421 + font-size: 13px;
422 + font-weight: 700;
423 + box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
424 + transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease;
425 +}
426 +
427 +.ays-notice-banner .ays-chart-upgrade-container div a:hover,
428 +.ays-notice-banner .ays-chart-upgrade-container div a:focus {
429 + background: #047857;
430 + color: #fff;
431 + box-shadow: 0 4px 10px -6px rgba(15, 23, 42, .35);
432 +}
433 +
434 +.ays-notice-banner .ays-chart-upgrade-container div a img {
435 + width: 13px;
436 + height: 13px;
437 +}
438 +
439 +.ays-notice-banner .ays-chart-logo-container-one-time-text {
440 + margin-top: 5px;
441 + color: #475569;
442 + font-size: 11px !important;
443 + font-weight: 500 !important;
444 + white-space: nowrap;
445 +}
446 +
447 +.ays-notice-banner .navigation-bar #menu {
448 + align-items: center;
449 + min-width: 0;
450 + margin: 0;
451 + gap: 0;
452 +}
453 +
454 +.ays-notice-banner .navigation-bar #menu::before {
455 + content: "";
456 + display: block;
457 + width: 1px;
458 + height: 32px;
459 + margin-right: 20px;
460 + background: #e2e8f0;
461 +}
462 +
463 +.ays-notice-banner .navigation-bar li {
464 + margin: 0;
465 + list-style: none;
466 +}
467 +
468 +.ays-notice-banner .navigation-bar li a {
469 + display: inline-flex;
470 + width: auto;
471 + max-width: none;
472 + min-height: 36px;
473 + align-items: center;
474 + padding: 0 15px;
475 + margin: 0;
476 + border-radius: 999px;
477 + color: #475569;
478 + font-size: 13px;
479 + font-weight: 500;
480 + line-height: 1;
481 + text-decoration: none;
482 + text-transform: none;
483 + transition: background-color .15s ease, border-color .15s ease, color .15s ease;
484 +}
485 +.ays-notice-banner .logo-container img.logo {
486 + width: 100%;
487 + height: 100%;
488 + object-fit: contain;
489 + max-height: 75px;
490 + min-width: 50px;
491 +}
492 +.ays-notice-banner .navigation-bar li a:hover,
493 +.ays-notice-banner .navigation-bar li a:focus {
494 + background: #f1f5f9;
495 + color: #0f172a;
496 + outline: none;
497 + box-shadow: none;
498 +}
499 +
500 +.ays-notice-banner .navigation-bar li.take_survay a {
501 + border: 1px solid #fecdd3;
502 + background: #fff1f2;
503 + color: #be123c;
504 + font-weight: 700;
505 +}
506 +
507 +.ays-notice-banner .navigation-bar li.take_survay a:hover,
508 +.ays-notice-banner .navigation-bar li.take_survay a:focus {
509 + border-color: #fda4af;
510 + background: #ffe4e6;
511 + color: #be123c;
512 +}
513 +
514 +.ays-notice-banner .modile-ddmenu-sm,
515 +.ays-notice-banner .modile-ddmenu-md {
516 + width: auto;
517 +}
518 +
519 +.ays-notice-banner #menu li a.toggle_ddmenu {
520 + width: 40px;
521 + min-width: 40px;
522 + min-height: 40px;
523 + justify-content: center;
524 + padding: 0;
525 + color: #475569;
526 + font-size: 18px;
527 +}
528 +
529 +.ays-notice-banner li ul.ddmenu {
530 + top: calc(100% + 12px);
531 + right: 0;
532 + min-width: 220px;
533 + padding: 8px;
534 + border: 1px solid #e2e8f0;
535 + border-radius: 12px;
536 + background: #fff;
537 + box-shadow: 0 18px 40px -24px rgba(15, 23, 42, .45);
538 +}
539 +
540 +.ays-notice-banner li ul.ddmenu li {
541 + width: 100%;
542 + padding-left: 0;
543 +}
544 +
545 +.ays-notice-banner li ul.ddmenu li a {
546 + width: 100%;
547 + justify-content: flex-start;
548 +}
549 +
550 +.ays-notice-banner .ays-chatgp-checklist-open-icon {
551 + position: unset;
552 + flex: 0 0 auto;
553 + margin-left: 4px;
554 +}
555 +
556 +.ays-notice-banner .ays-chatgp-upgrade-container a img {
557 + width: 8px;
558 + height: 13px;
559 +}
560 +@media screen and (min-width: 1321px) {
561 + .ays-notice-banner .modile-ddmenu-lg.modile-ddmenu-lg-custom {
562 + display: block;
563 + }
564 +}
565 +
566 +@media screen and (max-width: 1320px) {
567 + .ays-notice-banner .modile-ddmenu-lg {
568 + display: none;
569 + }
570 +
571 + .ays-notice-banner .modile-ddmenu-md {
572 + display: block;
573 + }
574 +}
575 +
576 +@media screen and (max-width: 1080px) {
577 + div.ays-notice-banner {
578 + width: calc(100% - 24px);
579 + margin-top: 14px;
580 + }
581 +
582 + .ays-notice-banner #navigation-container {
583 + gap: 14px;
584 + padding: 0 14px;
585 + }
586 +
587 + .ays-notice-banner .navigation-bar #menu::before {
588 + margin-right: 10px;
589 + }
590 +}
591 +
592 +@media screen and (max-width: 768px) {
593 + div.ays-notice-banner {
594 + width: calc(100% - 40px);
595 + }
596 +
597 + .ays-notice-banner #navigation-container {
598 + min-height: 72px;
599 + }
600 +
601 + .ays-notice-banner .modile-ddmenu-md {
602 + display: none;
603 + }
604 +
605 + .ays-notice-banner .modile-ddmenu-sm {
606 + display: block;
607 + }
608 +
609 + .ays-notice-banner .navigation-bar #menu {
610 + flex: 0 0 auto;
611 + width: auto !important;
612 + min-width: 40px !important;
613 + margin-left: auto;
614 + }
615 +
616 + .ays-notice-banner .navigation-bar #menu::before {
617 + display: none;
618 + }
619 +
620 + .ays-notice-banner li ul.ddmenu {
621 + right: 0;
622 + }
623 + .ays-chart-top-banner-title {
624 + display: none;
625 + }
626 +}
627 +
628 +@media screen and (max-width: 600px) {
629 + .ays-notice-banner #navigation-container {
630 + flex-wrap: nowrap;
631 + justify-content: space-between;
632 + padding: 12px;
633 + }
634 +
635 + .ays-notice-banner .ays-chart-logo-container-upgrade {
636 + width: auto;
637 + justify-content: flex-start;
638 + gap: 10px;
639 + }
640 +
641 + .ays-notice-banner .navigation-bar #menu {
642 + margin-left: auto;
643 + justify-content: flex-end;
644 + }
645 +
646 + .ays-notice-banner .ays-chart-checklist-open-icon {
647 + position: unset;
648 + }
649 +}
650 +
651 +@media screen and (max-width: 430px) {
652 + .ays-notice-banner .logo-container {
653 + width: 54px;
654 + height: 54px;
655 + flex-basis: 54px;
656 + }
657 +
658 + .ays-chart-top-banner-title {
659 + min-width: 70px;
660 + }
661 +
662 + .ays-chart-top-banner-title span:first-child {
663 + font-size: 14px;
664 + }
665 +
666 + .ays-notice-banner .ays-chart-top-banner-upgrade-container a {
667 + padding: 5px 10px;
668 + font-size: 12px;
669 + }
670 +}
671 +
672 +/* top banner redesign | End */