UNPKG

19.5 kBCSSView Raw
1/**
2 * @author Dustin Utecht
3 * https://github.com/wenzhixin/bootstrap-table/
4 */
5/* stylelint-disable annotation-no-unknown, max-line-length */
6/* stylelint-enable annotation-no-unknown, max-line-length */
7.bootstrap-table .fixed-table-toolbar::after {
8 content: "";
9 display: block;
10 clear: both;
11}
12
13.bootstrap-table .fixed-table-toolbar .bs-bars,
14.bootstrap-table .fixed-table-toolbar .search,
15.bootstrap-table .fixed-table-toolbar .columns {
16 position: relative;
17 margin-top: 10px;
18 margin-bottom: 10px;
19}
20
21.bootstrap-table .fixed-table-toolbar .columns .btn-group > .btn-group {
22 display: inline-block;
23 margin-left: -1px !important;
24}
25
26.bootstrap-table .fixed-table-toolbar .columns .btn-group > .btn-group > .btn {
27 border-radius: 0;
28}
29
30.bootstrap-table .fixed-table-toolbar .columns .btn-group > .btn-group:first-child > .btn {
31 border-top-left-radius: 4px;
32 border-bottom-left-radius: 4px;
33}
34
35.bootstrap-table .fixed-table-toolbar .columns .btn-group > .btn-group:last-child > .btn {
36 border-top-right-radius: 4px;
37 border-bottom-right-radius: 4px;
38}
39
40.bootstrap-table .fixed-table-toolbar .columns .dropdown-menu {
41 text-align: left;
42 max-height: 300px;
43 overflow: auto;
44 -ms-overflow-style: scrollbar;
45 z-index: 1001;
46}
47
48.bootstrap-table .fixed-table-toolbar .columns label {
49 display: block;
50 padding: 3px 20px;
51 clear: both;
52 font-weight: normal;
53 line-height: 1.4286;
54}
55
56.bootstrap-table .fixed-table-toolbar .columns-left {
57 margin-right: 5px;
58}
59
60.bootstrap-table .fixed-table-toolbar .columns-right {
61 margin-left: 5px;
62}
63
64.bootstrap-table .fixed-table-toolbar .pull-right .dropdown-menu {
65 right: 0;
66 left: auto;
67}
68
69.bootstrap-table .fixed-table-container {
70 position: relative;
71 clear: both;
72}
73
74.bootstrap-table .fixed-table-container .table {
75 width: 100%;
76 margin-bottom: 0 !important;
77}
78
79.bootstrap-table .fixed-table-container .table th,
80.bootstrap-table .fixed-table-container .table td {
81 vertical-align: middle;
82 box-sizing: border-box;
83}
84
85.bootstrap-table .fixed-table-container .table thead th {
86 vertical-align: bottom;
87 padding: 0;
88 margin: 0;
89}
90
91.bootstrap-table .fixed-table-container .table thead th:focus {
92 outline: 0 solid transparent;
93}
94
95.bootstrap-table .fixed-table-container .table thead th.detail {
96 width: 30px;
97}
98
99.bootstrap-table .fixed-table-container .table thead th .th-inner {
100 padding: 0.75rem;
101 vertical-align: bottom;
102 overflow: hidden;
103 text-overflow: ellipsis;
104 white-space: nowrap;
105}
106
107.bootstrap-table .fixed-table-container .table thead th .sortable {
108 cursor: pointer;
109 background-position: right;
110 background-repeat: no-repeat;
111 padding-right: 30px !important;
112}
113
114.bootstrap-table .fixed-table-container .table thead th .sortable.sortable-center {
115 padding-left: 20px !important;
116 padding-right: 20px !important;
117}
118
119.bootstrap-table .fixed-table-container .table thead th .both {
120 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAQAAADYWf5HAAAAkElEQVQoz7X QMQ5AQBCF4dWQSJxC5wwax1Cq1e7BAdxD5SL+Tq/QCM1oNiJidwox0355mXnG/DrEtIQ6azioNZQxI0ykPhTQIwhCR+BmBYtlK7kLJYwWCcJA9M4qdrZrd8pPjZWPtOqdRQy320YSV17OatFC4euts6z39GYMKRPCTKY9UnPQ6P+GtMRfGtPnBCiqhAeJPmkqAAAAAElFTkSuQmCC");
121}
122
123.bootstrap-table .fixed-table-container .table thead th .asc {
124 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZ0lEQVQ4y2NgGLKgquEuFxBPAGI2ahhWCsS/gDibUoO0gPgxEP8H4ttArEyuQYxAPBdqEAxPBImTY5gjEL9DM+wTENuQahAvEO9DMwiGdwAxOymGJQLxTyD+jgWDxCMZRsEoGAVoAADeemwtPcZI2wAAAABJRU5ErkJggg==");
125}
126
127.bootstrap-table .fixed-table-container .table thead th .desc {
128 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAZUlEQVQ4y2NgGAWjYBSggaqGu5FA/BOIv2PBIPFEUgxjB+IdQPwfC94HxLykus4GiD+hGfQOiB3J8SojEE9EM2wuSJzcsFMG4ttQgx4DsRalkZENxL+AuJQaMcsGxBOAmGvopk8AVz1sLZgg0bsAAAAASUVORK5CYII= ");
129}
130
131.bootstrap-table .fixed-table-container .table tbody tr.selected td {
132 background-color: #fafafa;
133}
134
135.bootstrap-table .fixed-table-container .table tbody tr.no-records-found td {
136 text-align: center;
137}
138
139.bootstrap-table .fixed-table-container .table tbody tr .card-view {
140 display: flex;
141}
142
143.bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-title {
144 font-weight: bold;
145 display: inline-block;
146 min-width: 30%;
147 width: auto !important;
148 text-align: left !important;
149}
150
151.bootstrap-table .fixed-table-container .table tbody tr .card-view .card-view-value {
152 width: 100% !important;
153 text-align: left !important;
154}
155
156.bootstrap-table .fixed-table-container .table .bs-checkbox {
157 text-align: center;
158}
159
160.bootstrap-table .fixed-table-container .table .bs-checkbox label {
161 margin-bottom: 0;
162}
163
164.bootstrap-table .fixed-table-container .table .bs-checkbox label input[type="radio"],
165.bootstrap-table .fixed-table-container .table .bs-checkbox label input[type="checkbox"] {
166 margin: 0 auto !important;
167}
168
169.bootstrap-table .fixed-table-container .table.table-sm .th-inner {
170 padding: 0.3rem;
171}
172
173.bootstrap-table .fixed-table-container.fixed-height:not(.has-footer) {
174 border-bottom: 1px solid #dbdbdb;
175}
176
177.bootstrap-table .fixed-table-container.fixed-height.has-card-view {
178 border-top: 1px solid #dbdbdb;
179 border-bottom: 1px solid #dbdbdb;
180}
181
182.bootstrap-table .fixed-table-container.fixed-height .fixed-table-border {
183 border-left: 1px solid #dbdbdb;
184 border-right: 1px solid #dbdbdb;
185}
186
187.bootstrap-table .fixed-table-container.fixed-height .table thead th {
188 border-bottom: 1px solid #dbdbdb;
189}
190
191.bootstrap-table .fixed-table-container.fixed-height .table-dark thead th {
192 border-bottom: 1px solid #32383e;
193}
194
195.bootstrap-table .fixed-table-container .fixed-table-header {
196 overflow: hidden;
197}
198
199.bootstrap-table .fixed-table-container .fixed-table-body {
200 overflow-x: auto;
201 overflow-y: auto;
202 height: 100%;
203}
204
205.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading {
206 align-items: center;
207 background: #fff;
208 display: flex;
209 justify-content: center;
210 position: absolute;
211 bottom: 0;
212 width: 100%;
213 max-width: 100%;
214 z-index: 1000;
215 transition: visibility 0s, opacity 0.15s ease-in-out;
216 opacity: 0;
217 visibility: hidden;
218}
219
220.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading.open {
221 visibility: visible;
222 opacity: 1;
223}
224
225.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap {
226 align-items: baseline;
227 display: flex;
228 justify-content: center;
229}
230
231.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .loading-text {
232 margin-right: 6px;
233}
234
235.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-wrap {
236 align-items: center;
237 display: flex;
238 justify-content: center;
239}
240
241.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-dot,
242.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-wrap::after,
243.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-wrap::before {
244 content: "";
245 animation-duration: 1.5s;
246 animation-iteration-count: infinite;
247 animation-name: loading;
248 background: #363636;
249 border-radius: 50%;
250 display: block;
251 height: 5px;
252 margin: 0 4px;
253 opacity: 0;
254 width: 5px;
255}
256
257.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-dot {
258 animation-delay: 0.3s;
259}
260
261.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading .loading-wrap .animation-wrap::after {
262 animation-delay: 0.6s;
263}
264
265.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading.table-dark {
266 background: #363636;
267}
268
269.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading.table-dark .animation-dot,
270.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading.table-dark .animation-wrap::after,
271.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading.table-dark .animation-wrap::before {
272 background: #fff;
273}
274
275.bootstrap-table .fixed-table-container .fixed-table-footer {
276 overflow: hidden;
277}
278
279.bootstrap-table .fixed-table-pagination::after {
280 content: "";
281 display: block;
282 clear: both;
283}
284
285.bootstrap-table .fixed-table-pagination > .pagination-detail,
286.bootstrap-table .fixed-table-pagination > .pagination {
287 margin-top: 10px;
288 margin-bottom: 10px;
289}
290
291.bootstrap-table .fixed-table-pagination > .pagination-detail .pagination-info {
292 line-height: 34px;
293 margin-right: 5px;
294}
295
296.bootstrap-table .fixed-table-pagination > .pagination-detail .page-list {
297 display: inline-block;
298}
299
300.bootstrap-table .fixed-table-pagination > .pagination-detail .page-list .btn-group {
301 position: relative;
302 display: inline-block;
303 vertical-align: middle;
304}
305
306.bootstrap-table .fixed-table-pagination > .pagination-detail .page-list .btn-group .dropdown-menu {
307 margin-bottom: 0;
308}
309
310.bootstrap-table .fixed-table-pagination > .pagination ul.pagination {
311 margin: 0;
312}
313
314.bootstrap-table .fixed-table-pagination > .pagination ul.pagination li.page-intermediate a {
315 color: #c8c8c8;
316}
317
318.bootstrap-table .fixed-table-pagination > .pagination ul.pagination li.page-intermediate a::before {
319 content: "\2B05";
320}
321
322.bootstrap-table .fixed-table-pagination > .pagination ul.pagination li.page-intermediate a::after {
323 content: "\27A1";
324}
325
326.bootstrap-table .fixed-table-pagination > .pagination ul.pagination li.disabled a {
327 pointer-events: none;
328 cursor: default;
329}
330
331.bootstrap-table.fullscreen {
332 position: fixed;
333 top: 0;
334 left: 0;
335 z-index: 1050;
336 width: 100% !important;
337 background: #fff;
338 height: calc(100vh);
339 overflow-y: scroll;
340}
341
342.bootstrap-table.bootstrap4 .pagination-lg .page-link, .bootstrap-table.bootstrap5 .pagination-lg .page-link {
343 padding: 0.5rem 1rem;
344}
345
346.bootstrap-table.bootstrap5 .float-left {
347 float: left;
348}
349
350.bootstrap-table.bootstrap5 .float-right {
351 float: right;
352}
353
354/* calculate scrollbar width */
355div.fixed-table-scroll-inner {
356 width: 100%;
357 height: 200px;
358}
359
360div.fixed-table-scroll-outer {
361 top: 0;
362 left: 0;
363 visibility: hidden;
364 width: 200px;
365 height: 150px;
366 overflow: hidden;
367}
368
369@keyframes loading {
370 0% {
371 opacity: 0;
372 }
373 50% {
374 opacity: 1;
375 }
376 100% {
377 opacity: 0;
378 }
379}
380
381@font-face {
382 font-family: bootstrap-table;
383 src: url("fonts/bootstrap-table.eot?gmdfsp");
384 src: url("fonts/bootstrap-table.eot") format("embedded-opentype"), url("fonts/bootstrap-table.ttf") format("truetype"), url("fonts/bootstrap-table.woff") format("woff"), url("fonts/bootstrap-table.svg") format("svg");
385 font-weight: normal;
386 font-style: normal;
387 font-display: block;
388}
389
390[class^="icon-"],
391[class*=" icon-"] {
392 /* use !important to prevent issues with browser extensions that change fonts */
393 font-family: bootstrap-table, sans-serif !important;
394 speak: none;
395 font-style: normal;
396 font-weight: normal;
397 font-variant: normal;
398 text-transform: none;
399 line-height: 1;
400 /* Better Font Rendering =========== */
401 -webkit-font-smoothing: antialiased;
402 -moz-osx-font-smoothing: grayscale;
403}
404
405.icon-arrow-down-circle::before {
406 content: "\e907";
407}
408
409.icon-arrow-up-circle::before {
410 content: "\e908";
411}
412
413.icon-chevron-left::before {
414 content: "\e900";
415}
416
417.icon-chevron-right::before {
418 content: "\e901";
419}
420
421.icon-clock::before {
422 content: "\e90c";
423}
424
425.icon-copy::before {
426 content: "\e909";
427}
428
429.icon-download::before {
430 content: "\e90d";
431}
432
433.icon-list::before {
434 content: "\e902";
435}
436
437.icon-maximize::before {
438 content: "\1f5ce";
439}
440
441.icon-minus::before {
442 content: "\e90f";
443}
444
445.icon-move::before {
446 content: "\e903";
447}
448
449.icon-plus::before {
450 content: "\e90e";
451}
452
453.icon-printer::before {
454 content: "\e90b";
455}
456
457.icon-refresh-cw::before {
458 content: "\e904";
459}
460
461.icon-search::before {
462 content: "\e90a";
463}
464
465.icon-toggle-right::before {
466 content: "\e905";
467}
468
469.icon-trash-2::before {
470 content: "\e906";
471}
472
473.icon-sort-amount-asc::before {
474 content: "\ea4c";
475}
476
477.bootstrap-table * {
478 box-sizing: border-box;
479}
480
481.bootstrap-table input.form-control,
482.bootstrap-table select.form-control,
483.bootstrap-table .btn {
484 border-radius: 4px;
485 background-color: #fff;
486 border: 1px solid #ccc;
487 padding: 9px 12px;
488}
489
490.bootstrap-table select.form-control {
491 height: 35px;
492}
493
494.bootstrap-table .btn {
495 outline: none;
496 cursor: pointer;
497}
498
499.bootstrap-table .btn.active {
500 background-color: #ebebeb;
501}
502
503.bootstrap-table .btn:focus, .bootstrap-table .btn:hover {
504 background-color: whitesmoke;
505}
506
507.bootstrap-table .caret {
508 display: inline-block;
509 width: 0;
510 height: 0;
511 margin-left: 2px;
512 vertical-align: middle;
513 border-top: 4px dashed;
514 border-top: 4px solid;
515 border-right: 4px solid transparent;
516 border-left: 4px solid transparent;
517}
518
519.bootstrap-table .detail-icon {
520 text-decoration: none;
521 color: #3679e4;
522}
523
524.bootstrap-table .detail-icon:hover {
525 color: #154a9f;
526}
527
528.bootstrap-table .fixed-table-toolbar .columns,
529.bootstrap-table .fixed-table-toolbar .columns .btn-group {
530 display: inline-block;
531}
532
533.bootstrap-table .fixed-table-toolbar .columns > .btn:not(:first-child):not(:last-child),
534.bootstrap-table .fixed-table-toolbar .columns > .btn:not(:first-child):not(:last-child) > .btn,
535.bootstrap-table .fixed-table-toolbar .columns > .btn-group:not(:first-child):not(:last-child),
536.bootstrap-table .fixed-table-toolbar .columns > .btn-group:not(:first-child):not(:last-child) > .btn {
537 border-radius: 0;
538}
539
540.bootstrap-table .fixed-table-toolbar .columns > .btn:not(:last-child):not(.dropdown-toggle),
541.bootstrap-table .fixed-table-toolbar .columns > .btn:not(:last-child) > .btn,
542.bootstrap-table .fixed-table-toolbar .columns > .btn-group:not(:last-child):not(.dropdown-toggle),
543.bootstrap-table .fixed-table-toolbar .columns > .btn-group:not(:last-child) > .btn {
544 border-top-right-radius: 0;
545 border-bottom-right-radius: 0;
546 border-right: none;
547}
548
549.bootstrap-table .fixed-table-toolbar .columns > .btn:not(:first-child):not(.dropdown-toggle),
550.bootstrap-table .fixed-table-toolbar .columns > .btn:not(:first-child) > .btn,
551.bootstrap-table .fixed-table-toolbar .columns > .btn-group:not(:first-child):not(.dropdown-toggle),
552.bootstrap-table .fixed-table-toolbar .columns > .btn-group:not(:first-child) > .btn {
553 border-top-left-radius: 0;
554 border-bottom-left-radius: 0;
555}
556
557.bootstrap-table .fixed-table-toolbar .columns label {
558 padding: 5px 12px;
559}
560
561.bootstrap-table .fixed-table-toolbar .columns input[type="checkbox"] {
562 vertical-align: middle;
563}
564
565.bootstrap-table .fixed-table-toolbar .columns .dropdown-divider {
566 border-bottom: 1px solid #dbdbdb;
567}
568
569.bootstrap-table .fixed-table-toolbar .search .input-group .search-input {
570 border-top-right-radius: 0;
571 border-bottom-right-radius: 0;
572 border-right: none;
573}
574
575.bootstrap-table .fixed-table-toolbar .search .input-group button[name="search"],
576.bootstrap-table .fixed-table-toolbar .search .input-group button[name="clearSearch"] {
577 border-top-left-radius: 0;
578 border-bottom-left-radius: 0;
579}
580
581.bootstrap-table .fixed-table-toolbar .search .input-group button[name="search"]:not(:last-child),
582.bootstrap-table .fixed-table-toolbar .search .input-group button[name="clearSearch"]:not(:last-child) {
583 border-top-right-radius: 0;
584 border-bottom-right-radius: 0;
585 border-right: none;
586}
587
588.bootstrap-table .open.dropdown-menu {
589 display: block;
590}
591
592.bootstrap-table .dropdown-menu-up .dropdown-menu {
593 top: auto;
594 bottom: 100%;
595}
596
597.bootstrap-table .dropdown-menu {
598 display: none;
599 background-color: #fff;
600 position: absolute;
601 right: 0;
602 min-width: 120px;
603 margin-top: 2px;
604 border: 1px solid #ccc;
605 border-radius: 4px;
606 box-shadow: 0 3px 12px rgba(0, 0, 0, 0.175);
607}
608
609.bootstrap-table .dropdown-menu .dropdown-item {
610 color: #363636;
611 text-decoration: none;
612 display: block;
613 padding: 5px 12px;
614 white-space: nowrap;
615}
616
617.bootstrap-table .dropdown-menu .dropdown-item:hover {
618 background-color: whitesmoke;
619}
620
621.bootstrap-table .dropdown-menu .dropdown-item.active {
622 background-color: #3679e4;
623 color: #fff;
624}
625
626.bootstrap-table .dropdown-menu .dropdown-item.active:hover {
627 background-color: #1b5fcc;
628}
629
630.bootstrap-table .columns-left .dropdown-menu {
631 left: 0;
632 right: auto;
633}
634
635.bootstrap-table .pagination-detail {
636 float: left;
637}
638
639.bootstrap-table .pagination-detail .dropdown-item {
640 min-width: 45px;
641 text-align: center;
642}
643
644.bootstrap-table table {
645 border-collapse: collapse;
646}
647
648.bootstrap-table table th {
649 text-align: inherit;
650}
651
652.bootstrap-table table.table-bordered thead tr th,
653.bootstrap-table table.table-bordered tbody tr td {
654 border: 1px solid #dbdbdb;
655}
656
657.bootstrap-table table.table-bordered tbody tr td {
658 padding: 0.75rem;
659}
660
661.bootstrap-table table.table-hover tbody tr:hover {
662 background: #fafafa;
663}
664
665.bootstrap-table .float-left {
666 float: left;
667}
668
669.bootstrap-table .float-right {
670 float: right;
671}
672
673.bootstrap-table .pagination {
674 padding: 0;
675 align-items: center;
676 display: flex;
677 justify-content: center;
678 text-align: center;
679 list-style: none;
680}
681
682.bootstrap-table .pagination .page-item {
683 border: 1px solid #dbdbdb;
684 background-color: #fff;
685 border-radius: 4px;
686 margin: 2px;
687 padding: 5px 2px;
688}
689
690.bootstrap-table .pagination .page-item:hover {
691 background-color: whitesmoke;
692}
693
694.bootstrap-table .pagination .page-item .page-link {
695 padding: 6px 12px;
696 line-height: 1.4286;
697 color: #363636;
698 text-decoration: none;
699 outline: none;
700}
701
702.bootstrap-table .pagination .page-item.active {
703 background-color: #3679e4;
704 border: 1px solid #206ae1;
705}
706
707.bootstrap-table .pagination .page-item.active .page-link {
708 color: #fff;
709}
710
711.bootstrap-table .pagination .page-item.active:hover {
712 background-color: #1b5fcc;
713}
714
715.bootstrap-table .pagination .btn-group {
716 display: inline-block;
717}
718
719.bootstrap-table .pagination .btn-group .btn:not(:first-child):not(:last-child),
720.bootstrap-table .pagination .btn-group input:not(:first-child):not(:last-child) {
721 border-radius: 0;
722}
723
724.bootstrap-table .pagination .btn-group .btn:first-child:not(:last-child):not(.dropdown-toggle),
725.bootstrap-table .pagination .btn-group input:first-child:not(:last-child):not(.dropdown-toggle) {
726 border-top-right-radius: 0;
727 border-bottom-right-radius: 0;
728}
729
730.bootstrap-table .pagination .btn-group .btn:last-child:not(:first-child),
731.bootstrap-table .pagination .btn-group input:last-child:not(:first-child) {
732 border-top-left-radius: 0;
733 border-bottom-left-radius: 0;
734}
735
736.bootstrap-table .pagination .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child {
737 border-top-left-radius: 0;
738 border-bottom-left-radius: 0;
739}
740
741.bootstrap-table .filter-control {
742 display: flex;
743}
744
745.bootstrap-table .page-jump-to input,
746.bootstrap-table .page-jump-to .btn {
747 padding: 8px 12px;
748}
749
750.modal {
751 position: fixed;
752 display: none;
753 top: 0;
754 left: 0;
755 bottom: 0;
756 right: 0;
757}
758
759.modal.show {
760 display: flex;
761}
762
763.modal .btn {
764 border-radius: 4px;
765 background-color: #fff;
766 border: 1px solid #ccc;
767 padding: 6px 12px;
768 outline: none;
769 cursor: pointer;
770}
771
772.modal .btn.active {
773 border-color: black;
774}
775
776.modal .modal-background {
777 position: fixed;
778 top: 0;
779 left: 0;
780 bottom: 0;
781 right: 0;
782 z-index: 998;
783 background-color: rgba(10, 10, 10, 0.86);
784}
785
786.modal .modal-content {
787 position: relative;
788 width: 600px;
789 margin: 30px auto;
790 z-index: 999;
791}
792
793.modal .modal-content .box {
794 background-color: #fff;
795 border-radius: 6px;
796 display: block;
797 padding: 1.25rem;
798}