package/luci/themes/luci-theme-openwrt/htdocs/luci-static/openwrt.org/cascade.css

   1 @charset "utf-8";
   2
   3 .lang_he {
   4         direction: RTL;
   5         unicode-bidi: embed;
   6 }
   7
   8 @media all {
   9
  10 html {
  11         min-height: 100%;
  12         height: auto;
  13         position:relative;
  14 }
  15
  16 body {
  17         color: #ffffff;
  18         background-color: #4a6b7c;
  19         background-position: bottom center;
  20         background-repeat: repeat-x;
  21         font-family: Arial, Verdana, sans-serif;
  22         font-size: 13px;
  23         padding-bottom: 1.5em;
  24 }
  25
  26 * {
  27         margin: 0;
  28         padding: 0;
  29         box-sizing: border-box;
  30 }
  31
  32 .table { display: table; width: 100%; position: relative; border-collapse: collapse; }
  33 .tr { display: table-row; }
  34 .thead { display: table-header-group; }
  35 .tbody { display: table-row-group; }
  36 .tfoot { display: table-footer-group; }
  37 .td, .th { display: table-cell; vertical-align: middle; }
  38 .th { font-weight: bold; }
  39
  40 .table[width="33%"], .th[width="33%"], .td[width="33%"] { width: 33%; }
  41 .table[width="100%"], .th[width="100%"], .td[width="100%"] { width: 100%; }
  42
  43 .col-1 { flex: 1 1 30px !important; -webkit-flex: 1 1 30px !important; }
  44 .col-2 { flex: 2 2 60px !important; -webkit-flex: 2 2 60px !important; }
  45 .col-3 { flex: 3 3 90px !important; -webkit-flex: 3 3 90px !important; }
  46 .col-4 { flex: 4 4 120px !important; -webkit-flex: 4 4 120px !important; }
  47 .col-5 { flex: 5 5 150px !important; -webkit-flex: 5 5 150px !important; }
  48 .col-6 { flex: 6 6 180px !important; -webkit-flex: 6 6 180px !important; }
  49 .col-7 { flex: 7 7 210px !important; -webkit-flex: 7 7 210px !important; }
  50 .col-8 { flex: 8 8 240px !important; -webkit-flex: 8 8 240px !important; }
  51 .col-9 { flex: 9 9 270px !important; -webkit-flex: 9 9 270px !important; }
  52 .col-10 { flex: 10 10 300px !important; -webkit-flex: 10 10 300px !important; }
  53
  54 .tr.placeholder {
  55         height: 3.5em;
  56 }
  57
  58 .tr.placeholder > .td {
  59         position: absolute;
  60         left: 0;
  61         right: 0;
  62         bottom: 0;
  63         text-align: center;
  64         line-height: 3em;
  65 }
  66
  67 .nowrap {
  68         white-space: nowrap;
  69 }
  70
  71 a img {
  72         border: none;
  73         text-decoration: none;
  74 }
  75
  76 #maincontainer {
  77         display: flex;
  78 }
  79
  80 #maincontent {
  81         flex-basis: 100%;
  82 }
  83
  84 #mainmenu {
  85         max-width: 200px;
  86         background: #f5f5f5;
  87         border: 1px solid #444;
  88         border-width: 0 0 1px 1px;
  89         font-size: 15px;
  90         padding-bottom: 1em;
  91 }
  92
  93 #mainmenu ul {
  94         display: block;
  95         margin: 0;
  96         padding: 0;
  97 }
  98
  99 #mainmenu ul li {
 100         display: block;
 101         white-space: nowrap;
 102 }
 103
 104 #mainmenu ul li > a {
 105         display: block;
 106         color: #444;
 107         padding: .4em .5em;
 108         text-decoration: none;
 109 }
 110
 111 #mainmenu ul li.selected > a {
 112         background: #fff;
 113         color: #37c;
 114         border: 1px dotted #444;
 115         border-width: 1px 0;
 116 }
 117
 118 #mainmenu ul li.selected:first-child > a {
 119         border-top: none;
 120 }
 121
 122 #mainmenu ul li li > a {
 123         font-size: 85%;
 124         padding-left: 1.5em;
 125 }
 126
 127 #mainmenu ul li > ul {
 128         flex-basis: 100%;
 129         max-height: 0;
 130         visibility: hidden;
 131         transition: max-height .15s;
 132 }
 133
 134 #mainmenu ul:not(.active) li.selected > ul,
 135 #mainmenu ul li.active > ul {
 136         max-height: 1000px;
 137         visibility: visible;
 138         transition: max-height .25s;
 139 }
 140
 141 #mainmenu ul li.mainmenu-item-logout {
 142         margin-top: 15%;
 143 }
 144
 145 #tabmenu {
 146         padding: 0;
 147         margin: -.5em -.5em .5em -.5em;
 148         background: #bbb;
 149 }
 150
 151 #tabmenu ul {
 152         border-color: #444;
 153         padding-top: .5em;
 154         flex-wrap: wrap;
 155         background: repeating-linear-gradient(#f5f5f5, #bbb 2.4em, #f5f5f5 2.4em, #bbb);
 156         line-height: 1em;
 157 }
 158
 159 #tabmenu ul li {
 160         border-color: #444;
 161 }
 162
 163 #tabmenu ul li.cbi-tab {
 164         background: #f5f5f5;
 165 }
 166
 167 abbr,
 168 acronym {
 169         font-style: normal;
 170         font-variant: normal;
 171 }
 172
 173 abbr[title],
 174 acronym[title] {
 175         border-bottom: 1px dotted;
 176         cursor: help;
 177 }
 178
 179 a:link abbr[title],
 180 a:visited abbr[title],
 181 a:link acronym[title],
 182 a:visited acronym[title] {
 183         cursor: pointer;
 184 }
 185
 186 code {
 187         font-family: monospace;
 188         white-space: pre;
 189 }
 190
 191 hr {
 192         margin: .5em 0;
 193         padding: 0;
 194         border: 1px solid #444;
 195         border-width: 0 0 1px 0;
 196 }
 197
 198 #maincontent ul {
 199         margin-left: 2em;
 200 }
 201
 202 #modal_overlay {
 203         position: fixed;
 204         top: 0;
 205         bottom: 0;
 206         left: -10000px;
 207         right: 10000px;
 208         background: rgba(0, 0, 0, 0.7);
 209         z-index: 900;
 210         overflow-y: scroll;
 211         -webkit-overflow-scrolling: touch;
 212         transition: opacity .125s ease-in;
 213         opacity: 0;
 214         visibility: hidden;
 215 }
 216
 217 .modal {
 218         width: 90%;
 219         margin: 5em auto !important;
 220         display: flex;
 221         flex-wrap: wrap;
 222         min-height: 32px;
 223         max-width: 600px;
 224         align-items: center;
 225         border-radius: 3px;
 226         background: #f5f5f5;
 227         border: 1px solid #000;
 228         padding: .5em .5em .25em .5em !important;
 229         max-height: 2400px;
 230         min-width: 270px;
 231         color: #444;
 232 }
 233
 234 .modal > * {
 235         flex-basis: 100%;
 236         line-height: normal;
 237         margin-bottom: .5em;
 238 }
 239
 240 .modal > pre,
 241 .modal > textarea {
 242         white-space: pre-wrap;
 243         overflow: auto;
 244 }
 245
 246 body.modal-overlay-active {
 247         overflow: hidden;
 248 }
 249
 250 body.modal-overlay-active #modal_overlay {
 251         left: 0;
 252         right: 0;
 253         opacity: 1;
 254         visibility: visible;
 255 }
 256
 257 .warning {
 258         color: red;
 259         background-color: white;
 260         font-weight: bold;
 261 }
 262
 263 .clear {
 264         clear: both;
 265 }
 266
 267 .skiplink,
 268 .navigation,
 269 .hidden {
 270         position: absolute;
 271         left: -1000px;
 272         top: -1000px;
 273         width: 0px;
 274         height: 0px;
 275         overflow: hidden;
 276         display: inline;
 277 }
 278
 279 .error {
 280         color: #ff0000;
 281         background-color: white;
 282 }
 283
 284 .alert-message {
 285         font-weight: normal;
 286         padding: .5em;
 287         border-radius: 3px;
 288         border: 1px solid #a22;
 289         margin: 0 0 .5em 0;
 290 }
 291
 292 .label {
 293         padding: 1px 2px;
 294         font-size: 10px;
 295         color: #fff;
 296         text-transform: uppercase;
 297         white-space: nowrap;
 298         background-color: #aaa;
 299         border-radius: 3px;
 300 }
 301
 302 .alert-message, .cbi-tooltip.error, .label.error {
 303         border-color: #a22;
 304         background: #fee;
 305         color: #a22;
 306 }
 307
 308 .alert-message.notice, .cbi-tooltip.notice, .label.notice {
 309         border-color: #15a;
 310         background: #e6f6ff;
 311         color: #15a;
 312 }
 313
 314 .alert-message.warning, .cbi-tooltip.warning, .label.warning {
 315         border-color: #ed5;
 316         background: #fe9;
 317         color: #650;
 318 }
 319
 320 div.hostinfo {
 321         float: left;
 322         margin: 0;
 323         padding: 0;
 324         width: auto;
 325         padding: 0.5em;
 326 }
 327
 328 .lang_he div.hostinfo {
 329         float: right;
 330 }
 331
 332 #xhr_poll_status {
 333         cursor: pointer;
 334 }
 335
 336 #xhr_poll_status #xhr_poll_status_off {
 337         font-weight: bold;
 338         color: #FF0000;
 339 }
 340
 341 #xhr_poll_status #xhr_poll_status_on {
 342         font-weight: bold;
 343         color: #00FF00;
 344 }
 345
 346 #menubar {
 347         position: relative;
 348         width: 100%;
 349         background: #000000;
 350         color: #ffffff;
 351 }
 352
 353 #menubar .warning {
 354         color: red;
 355         background-color: #557788;
 356 }
 357
 358 html #menubar a:link,
 359 html #menubar a:visited {
 360         position: relative;
 361         display: block;
 362         padding: 0.5em;
 363         background: #000000;
 364         color: #ffffff;
 365         text-decoration: none;
 366 }
 367
 368
 369 html #menubar a:link:hover,
 370 html #menubar a:visited:hover,
 371 html #menubar a:link:active,
 372 html #menubar a:visited:active,
 373 #menubar a:link:focus,
 374 #menubar a:visited:focus {
 375         background: #000000;
 376         color: #ffff00;
 377         font-weight: bold;
 378 }
 379
 380 html #menubar a:link.active,
 381 html #menubar a:visited.active,
 382 html #menubar a:link.preactive,
 383 html #menubar a:visited.preactive {
 384         background: #000000;
 385         color: #ffff00;
 386         font-weight: bold;
 387 }
 388
 389 html #menubar a:link.warning,
 390 html #menubar a:visited.warning {
 391         background: #000000;
 392         color: red;
 393         font-weight: bold;
 394 }
 395
 396 #modemenu {
 397         width: auto;
 398         background: #000000;
 399         color: #ffffff;
 400         list-style: none;
 401         margin-right: 1px;
 402         margin-left: 2em;
 403         float: right;
 404 }
 405
 406 #modemenu li {
 407         float: right;
 408         list-style: none;
 409 }
 410
 411 #savemenu {
 412         float: right;
 413 }
 414
 415 .lang_he #savemenu {
 416         float: left;
 417 }
 418
 419 .lang_de #submenu_admin_uci {
 420         width: 12em;
 421 }
 422
 423 .lang_ru #submenu_admin_uci {
 424         width: 11.5em;
 425 }
 426
 427 textarea#syslog {
 428         width: 98%;
 429         min-height: 500px;
 430         border: 3px solid #cccccc;
 431         padding: 5px;
 432         font-family: monospace;
 433 }
 434
 435 #maincontainer {
 436         clear: both;
 437         width: 96%;
 438         margin: 0 auto;
 439         height:100%;
 440 }
 441
 442 #maincontent {
 443         padding: 0.5em;
 444         background: #f5f5f5;
 445         color: #000000;
 446         border-width: 0 1px 1px 1px;
 447         border-style: solid;
 448         border-color: #444444;
 449 }
 450
 451 #applyreboot-section {
 452         margin: 2rem;
 453         line-height: 300%;
 454 }
 455
 456 .lang_he #maincontent {
 457         direction: rtl;
 458 }
 459
 460 h2, h3, h4, h5, legend {
 461         font-size: 150%;
 462         font-family: Trebuchet MS, Verdana, sans-serif;
 463         font-weight: bold;
 464         margin: .25em 0 .5em 0;
 465         border-bottom: 1px solid;
 466         padding-bottom: 4px;
 467         display: block;
 468         width: 100%;
 469 }
 470
 471 h3, legend {
 472         font-size: 125%;
 473 }
 474
 475 h4 {
 476         font-size: 112%;
 477 }
 478
 479 h5 {
 480         font-size: 105%;
 481 }
 482
 483 fieldset { border: none; }
 484 fieldset > legend { float: left; }
 485 fieldset > legend + * { clear: both; }
 486
 487 p {
 488         margin-bottom: .5em;
 489 }
 490
 491 .cbi-section {
 492         margin: 0 0 .5em 0;
 493 }
 494
 495 .cbi-section > h3,
 496 .cbi-section > legend {
 497         margin-top: .5em;
 498 }
 499
 500 .cbi-section-descr {
 501         margin-bottom: 0.5em;
 502         font-size: 95%;
 503 }
 504
 505 .cbi-section-descr:empty {
 506         display: none;
 507 }
 508
 509 .cbi-title-ref {
 510         color: #37c;
 511 }
 512
 513 .cbi-title-ref::after {
 514         content: "➙";
 515 }
 516
 517 ul.cbi-apply {
 518         font-size: 90%;
 519 }
 520
 521 input:-webkit-input-placeholder {
 522         color: #AAAAAA;
 523 }
 524
 525 input:-moz-placeholder {
 526         color: #AAAAAA;
 527 }
 528
 529 input:-ms-input-placeholder {
 530         color: #AAAAAA;
 531 }
 532
 533 input[type=submit],
 534 input[type=reset],
 535 input[type=image],
 536 input[type=button] {
 537         cursor: pointer;
 538 }
 539
 540 select,
 541 input,
 542 textarea {
 543         background: #eeeeee;
 544         color: #000000;
 545         border-width: 1px;
 546         border-color: #000000;
 547 }
 548
 549 input[type=image] {
 550         border: none;
 551 }
 552
 553 input:focus,
 554 input:not(.btn):not(.cbi-button):hover,
 555 select:focus,
 556 select:hover {
 557         background-color: #ffffff;
 558         color: #000000;
 559 }
 560
 561 input[type=text],
 562 input[type=password] {
 563         padding: .25em;
 564 }
 565
 566 select,
 567 input[type=text],
 568 input[type=password],
 569 .cbi-dropdown {
 570         width: 20em;
 571         height: 22px;
 572         font-family: inherit;
 573         font-size: inherit;
 574 }
 575
 576 select[multiple] {
 577         height: auto;
 578 }
 579
 580 input[type=radio],
 581 input[type=checkbox],
 582 [data-dynlist] > input + img,
 583 input.cbi-input-password + img {
 584         vertical-align: middle;
 585 }
 586
 587 label > input[type="checkbox"],
 588 label > input[type="radio"] {
 589         vertical-align: bottom;
 590         margin: 0;
 591 }
 592
 593 .td select,
 594 .td .cbi-dropdown,
 595 .td input[type=text],
 596 .cbi-dynlist > .add-item > .cbi-dropdown {
 597         width: 100%;
 598 }
 599
 600 .td input.cbi-input-password {
 601         width: calc(100% - 20px);
 602 }
 603
 604 img.cbi-image-button {
 605         cursor: pointer;
 606         margin: 0 2px;
 607         vertical-align: middle;
 608 }
 609
 610 .btn, .cbi-button, .item::after {
 611         padding: 0 .5em;
 612         border-radius: 3px;
 613         border: 1px solid #aaa;
 614         text-decoration: none;
 615         color: #000;
 616         display: inline-block;
 617         font-size: inherit;
 618         -webkit-appearance: none;
 619         background: #fff;
 620         text-align: center;
 621         font-weight: bold;
 622         line-height: 12px;
 623         height: 22px;
 624         line-height: 20px;
 625         box-sizing: border-box;
 626         cursor: pointer;
 627 }
 628
 629 .btn:hover, .cbi-button:hover, .item:hover::after {
 630         box-shadow: 0 0 3px #37c;
 631 }
 632
 633 .btn[disabled],
 634 .btn[disabled]:hover,
 635 .cbi-button[disabled],
 636 .cbi-button[disabled]:hover {
 637         opacity: .6;
 638         cursor: default;
 639         pointer-events: none;
 640 }
 641
 642 .cbi-button-positive,
 643 .cbi-button-fieldadd,
 644 .cbi-button-add,
 645 .cbi-button-save {
 646         border-color: #595;
 647         color: #595;
 648 }
 649
 650 .cbi-button-neutral,
 651 .cbi-button-reset,
 652 .cbi-button-download,
 653 .cbi-button-find,
 654 .cbi-button-link,
 655 .cbi-button-up,
 656 .cbi-button-down {
 657         border-color: #444;
 658         color: #444;
 659 }
 660
 661 .cbi-button-action,
 662 .cbi-button-apply,
 663 .cbi-button-reload,
 664 .cbi-button-edit {
 665         border-color: #37c;
 666         color: #37c;
 667 }
 668
 669 .cbi-button-negative,
 670 .cbi-section-remove .cbi-button,
 671 .cbi-button-remove {
 672         border-color: #a22;
 673         color: #a22;
 674 }
 675
 676 .cbi-button-action.important,
 677 .cbi-page-actions .cbi-button-apply,
 678 .cbi-section-actions .cbi-button-edit {
 679         color: #fff;
 680         background: #37c;
 681 }
 682
 683 .cbi-button-positive.important,
 684 .cbi-page-actions .cbi-button-save {
 685         color: #fff;
 686         background: #595;
 687 }
 688
 689 .cbi-button-negative.important {
 690         color: #fff;
 691         background: #a22;
 692 }
 693
 694 .cbi-page-actions .cbi-button-apply + .cbi-button-save {
 695         background: #fff;
 696         color: #595;
 697 }
 698
 699 .cbi-input-invalid:not([open]) {
 700         color: #FF0000 !important;
 701         border-color: #FF0000;
 702 }
 703
 704 table td, table th {
 705         color: #000000;
 706 }
 707
 708 .table .td, .table .th {
 709         color: #000000;
 710         padding: .25em;
 711 }
 712
 713 .table.smalltext {
 714         background: #f5f5f5;
 715         color: #000000;
 716         border-top: 1px solid #666666;
 717         border-right: 1px solid #666666;
 718         border-bottom: 1px solid #666666;
 719         font-size: 90%;
 720         width: 80%;
 721         margin-left: auto;
 722         margin-right: auto;
 723         border-collapse: collapse;
 724 }
 725
 726 .table.smalltext .tr:hover .td {
 727         background-color: #bbddee;
 728         color: #000000;
 729 }
 730
 731 .table.smalltext .tr .th {
 732         padding: 0 0.25em;
 733         border-left: 1px solid #666666;
 734         text-align: left;
 735 }
 736
 737 .table.smalltext .tr .td {
 738         padding: 0 0.25em;
 739         border-top: 1px solid #666666;
 740         border-left: 1px solid #666666;
 741 }
 742
 743 .cbi-rowstyle-1 {
 744         background-color: #eeeeff;
 745         color: #000000;
 746 }
 747
 748 .cbi-rowstyle-2 {
 749         color: #000000;
 750 }
 751
 752 .cbi-value {
 753         clear: left;
 754         vertical-align: middle;
 755         padding: 0.25em 0.6em;
 756         border-bottom: 1px dotted #bbbbbb;
 757 }
 758
 759 .cbi-value:hover {
 760         background: #f8f8f8;
 761         color: #000000;
 762 }
 763
 764 .cbi-value-title {
 765         float: left;
 766         width: 40%;
 767         line-height: 1.8em;
 768 }
 769
 770 .cbi-value-field {
 771         width: 58%;
 772         margin-left: 40%;
 773         padding: 0.25em 0;
 774 }
 775
 776 .td.cbi-value-field {
 777         width: auto;
 778         margin-left: 0;
 779         align-self: center;
 780         vertical-align: middle;
 781 }
 782
 783 .cbi-value-description {
 784         background-image: url(/luci-static/resources/cbi/help.gif);
 785         background-position: .25em .25em;
 786         background-repeat: no-repeat;
 787         margin: .25em 0 0 0;
 788         padding: .25em .25em .25em 1.75em;
 789 }
 790
 791 .cbi-section-create {
 792         padding: 0 0 .25em 0;
 793         margin: -3px;
 794         display: inline-flex;
 795         align-items: center;
 796 }
 797
 798 .cbi-section-create > * {
 799         margin: 3px;
 800         flex: 1 1 auto;
 801 }
 802
 803 .cbi-section-create > * > input {
 804         width: 100%;
 805 }
 806
 807 .cbi-section-remove > .cbi-button {
 808         margin-bottom: -1px;
 809         border-radius: 3px 3px 0 0;
 810 }
 811
 812 .cbi-section-node + .cbi-section-create {
 813         padding-top: 0;
 814 }
 815
 816 div.cbi-map-descr {
 817         margin-bottom: 1em;
 818 }
 819
 820 div.cbi-optionals {
 821         padding: 0.25em;
 822         border-bottom: 1px dotted #bbbbbb;
 823 }
 824
 825 .cbi-section-node {
 826         clear: both;
 827         padding-bottom: 0;
 828         position: relative;
 829         border: 1px dotted #555;
 830         background: #fff;
 831         margin-bottom: .5em;
 832 }
 833
 834 .cbi-section-node-tabbed {
 835         border-top: none;
 836         margin-top: -.5em;
 837 }
 838
 839 .cbi-section-node .cbi-value:last-child,
 840 .cbi-section-node .cbi-optionals:last-child {
 841         border-bottom: none;
 842 }
 843
 844 .table.cbi-section-table {
 845         width: 100%;
 846         font-size: 95%;
 847         border: 1px dotted #444;
 848         background: #fff;
 849         margin: 0 0 .5em 0;
 850 }
 851
 852 .cbi-section-node > .table.cbi-section-table {
 853         border: none;
 854         margin: 0;
 855 }
 856
 857 .tr.cbi-section-table-descr .th {
 858         font-weight: normal;
 859         font-size: 90%;
 860         vertical-align: top;
 861 }
 862
 863 .td.cbi-section-table-optionals {
 864         text-align: left !important;
 865         padding-top: 1em;
 866 }
 867
 868 .th.cbi-section-actions,
 869 .td.cbi-section-actions {
 870         align-self: center;
 871         vertical-align: middle;
 872 }
 873
 874 .th.cbi-section-actions > *,
 875 .td.cbi-section-actions > * {
 876         display: flex;
 877         justify-content: flex-end;
 878         flex-direction: row;
 879         flex: 1 1 150px;
 880         margin: auto -1px auto auto;
 881 }
 882
 883 .td.cbi-section-actions > * > *,
 884 .td.cbi-section-actions > * > form > * {
 885         flex: 1 1 4em;
 886         margin: 0 1px;
 887 }
 888
 889 .td.cbi-section-actions > * > form {
 890         display: flex;
 891         margin: 0;
 892 }
 893
 894 .cbi-page-actions {
 895         display: flex;
 896         justify-content: flex-end;
 897         margin: -3px;
 898 }
 899
 900 .cbi-page-actions > form {
 901         display: flex;
 902 }
 903
 904 .cbi-page-actions > * {
 905         flex: 0 1 auto;
 906         margin: 3px;
 907 }
 908
 909 .cbi-page-actions > form > * {
 910         flex: 1;
 911         margin: 0 3px 0 0;
 912 }
 913
 914 .cbi-page-actions > .cbi-button-save,
 915 .cbi-page-actions > .cbi-button-apply,
 916 .cbi-page-actions > form[method="post"] {
 917         margin-left: auto;
 918 }
 919
 920 *::-ms-backdrop,
 921 .cbi-page-actions > .cbi-button-save,
 922 .cbi-page-actions > .cbi-button-apply,
 923 .cbi-page-actions > form[method="post"] {
 924         margin-left: 50%;
 925 }
 926
 927 .cbi-page-actions > .cbi-button-apply + .cbi-button-save,
 928 .cbi-page-actions > .cbi-button-save + form[method="post"],
 929 .cbi-page-actions > form[method="post"] + form[method="post"] {
 930         margin-left: 3px;
 931 }
 932
 933 .th[data-type="button"], .td[data-type="button"],
 934 .th[data-type="fvalue"], .td[data-type="fvalue"] {
 935         flex: 1 1 2em;
 936         text-align: center;
 937 }
 938
 939 #cbi-network-switch_vlan .th,
 940 #cbi-network-switch_vlan .td {
 941         flex-basis: 12%;
 942 }
 943
 944 .td[data-title]::before {
 945         content: attr(data-title) ":\20";
 946         font-weight: bold;
 947         text-align: left;
 948         display: none;
 949         padding: 1px 0;
 950         white-space: nowrap;
 951 }
 952
 953 .td[data-description]::after {
 954         content: attr(data-description);
 955         font-size: 90%;
 956         text-align: left;
 957         display: none;
 958         background: url(/luci-static/resources/cbi/help.gif) left top no-repeat;
 959         padding: .125em 0 .125em 18px;
 960         margin: .125em 0;
 961 }
 962
 963 .tr.placeholder .td[data-title]::before,
 964 .tr.placeholder .td[data-description]::after {
 965         display: none;
 966 }
 967
 968 .tr[data-title]::before,
 969 .tr.cbi-section-table-titles.named::before {
 970         content: attr(data-title) "\20";
 971         font-weight: bold;
 972         text-align: left;
 973         display: table-cell;
 974         align-self: center;
 975         flex: 1 1 5%;
 976         padding: .25em;
 977         white-space: normal;
 978         word-wrap: break-word;
 979         vertical-align: middle;
 980 }
 981
 982 .cbi-value-helpicon img {
 983         vertical-align: bottom;
 984 }
 985
 986 .td.cbi-value-error {
 987         border-color: red;
 988 }
 989
 990 .cbi-value-error input,
 991 .cbi-value-error select {
 992         color: red;
 993         background-color: #ffcccc;
 994 }
 995
 996 .cbi-section-error {
 997         color: red;
 998         background-color: white;
 999         font-size: 95%;
1000         border: 1px dotted red;
1001         margin: 3px;
1002         padding: 3px;
1003 }
1004
1005 .cbi-value-field var {
1006         color: #2222FF;
1007 }
1008
1009 ul.cbi-tabmenu {
1010         list-style-type: none;
1011         display: flex;
1012         margin: 0 0 .5em 0 !important;
1013         padding: 0 0 0 5px;
1014         border-bottom: 1px solid #bbb;
1015 }
1016
1017 ul.cbi-tabmenu li {
1018         display: inline-flex;
1019         margin: 0 5px -1px 0;
1020         flex: 0 1 auto;
1021         border: 1px solid #bbb;
1022         border-bottom: none;
1023         border-radius: 3px 3px 0 0;
1024         background: linear-gradient(#ddd 90%, #aaa 100%);
1025         color: #888;
1026         overflow: hidden;
1027         text-overflow: ellipsis;
1028         word-wrap: break-word;
1029 }
1030
1031 ul.cbi-tabmenu li a,
1032 ul.cbi-tabmenu li a:hover {
1033         text-decoration: none;
1034         color: inherit;
1035         padding: 5px;
1036         flex: 1 1 auto;
1037         width: 100%;
1038         height: 100%;
1039         outline: none;
1040 }
1041
1042 ul.cbi-tabmenu li.cbi-tab {
1043         color: #000;
1044         background: #f5f5f5;
1045 }
1046
1047 ul.cbi-tabmenu li.cbi-tab-disabled[data-errors]::after {
1048         content: attr(data-errors);
1049         background: #c43c35;
1050         color: #fff;
1051         min-width: 12px;
1052         line-height: 14px;
1053         border-radius: 8px;
1054         text-align: center;
1055         margin: 4px 5px 4px 0;
1056         padding: 1px 2px;
1057         word-wrap: normal;
1058         flex: 1 0 auto;
1059 }
1060
1061 .cbi-section ul.cbi-tabmenu li.cbi-tab {
1062         background: #fff;
1063 }
1064
1065 .cbi-tab-descr {
1066         background-image: url(/luci-static/resources/cbi/help.gif);
1067         background-position: .25em 50%;
1068         background-repeat: no-repeat;
1069         border-bottom: 1px solid #ccc;
1070         margin: 0 .25em .25em .25em;
1071         padding: .5em .5em .5em 2em;
1072 }
1073
1074 [data-tab-title] {
1075         height: 0;
1076         opacity: 0;
1077         overflow: hidden;
1078 }
1079
1080 [data-tab-active="true"] {
1081         opacity: 1;
1082         height: auto;
1083         overflow: visible;
1084         transition: opacity .25s ease-in;
1085 }
1086
1087
1088 .cbi-dropdown {
1089         border: 1px inset #000;
1090         display: inline-flex;
1091         cursor: pointer;
1092         background: #eee;
1093         position: relative;
1094         padding: 0;
1095         color: #000;
1096         min-width: 20em;
1097         max-width: 100%;
1098 }
1099
1100 .cbi-dropdown:hover {
1101         background: #fff;
1102 }
1103
1104 .cbi-dropdown:focus,
1105 .cbi-dynlist > .item:focus {
1106         outline: 2px solid #4b6e9b;
1107 }
1108
1109 .cbi-dropdown > ul {
1110         margin: 0 !important;
1111         padding: 0;
1112         list-style: none;
1113         overflow-x: hidden;
1114         overflow-y: auto;
1115         display: flex;
1116         width: 100%;
1117 }
1118
1119 .cbi-dropdown > ul.preview {
1120         display: none;
1121 }
1122
1123 .cbi-dropdown > .open {
1124         border: 2px outset #eee;
1125         flex-basis: 15px;
1126 }
1127
1128 .cbi-dropdown > .open,
1129 .cbi-dropdown > .more {
1130         flex-grow: 0;
1131         flex-shrink: 0;
1132         display: flex;
1133         flex-direction: column;
1134         justify-content: center;
1135         text-align: center;
1136         padding: 0 .25em;
1137 }
1138
1139 .cbi-dropdown > .more,
1140 .cbi-dropdown > ul > li[placeholder] {
1141         color: #777;
1142         font-weight: bold;
1143         text-shadow: 1px 1px 0px #fff;
1144         display: none;
1145         min-height: 22px;
1146 }
1147
1148 .cbi-dropdown > ul > li {
1149         display: none;
1150         padding: .25em;
1151         white-space: nowrap;
1152         overflow: hidden;
1153         text-overflow: ellipsis;
1154         flex-shrink: 1;
1155         flex-grow: 1;
1156         align-items: center;
1157         align-self: center;
1158         min-height: 22px;
1159 }
1160
1161 .cbi-dropdown > ul > li .hide-open { display: initial; }
1162 .cbi-dropdown > ul > li .hide-close { display: none; }
1163
1164 .cbi-dropdown > ul > li[display]:not([display="0"]) {
1165         border-left: 1px solid #ccc;
1166 }
1167
1168 .cbi-dropdown[empty] > ul {
1169         max-width: 1px;
1170 }
1171
1172 .cbi-dropdown > ul > li > form {
1173         display: none;
1174         margin: 0;
1175         padding: 0;
1176         pointer-events: none;
1177 }
1178
1179 .cbi-dropdown > ul > li img {
1180         vertical-align: middle;
1181         margin-right: .25em;
1182 }
1183
1184 .cbi-dropdown > ul > li > form > input[type="checkbox"] {
1185         margin: 0;
1186 }
1187
1188 .cbi-dropdown[open] {
1189         position: relative;
1190 }
1191
1192 .cbi-dropdown[open] > ul.dropdown {
1193         display: block;
1194         background: #f6f6f5;
1195         border: 1px solid #918e8c;
1196         box-shadow: 0 0 4px #918e8c;
1197         position: absolute;
1198         z-index: 1100;
1199         max-width: none;
1200         min-width: 100%;
1201         width: auto;
1202         transition: max-height .125s ease-in;
1203 }
1204
1205 .cbi-dropdown > ul > li[display],
1206 .cbi-dropdown[open] > ul.preview,
1207 .cbi-dropdown[open] > ul.dropdown > li,
1208 .cbi-dropdown[multiple] > ul > li > label,
1209 .cbi-dropdown[multiple][open] > ul.dropdown > li,
1210 .cbi-dropdown[multiple][more] > .more,
1211 .cbi-dropdown[multiple][empty] > .more {
1212         flex-grow: 1;
1213         display: flex;
1214         align-items: center;
1215 }
1216
1217 .cbi-dropdown[empty] > ul > li,
1218 .cbi-dropdown[multiple][open] > ul.dropdown > li > form {
1219         display: block;
1220 }
1221
1222 .cbi-dropdown[open] > ul.dropdown > li .hide-open { display: none; }
1223 .cbi-dropdown[open] > ul.dropdown > li .hide-close { display: initial; }
1224
1225 .cbi-dropdown[open] > ul.dropdown > li {
1226         border-bottom: 1px solid #ccc;
1227 }
1228
1229 .cbi-dropdown[open] > ul.dropdown > li[selected] {
1230         background: #b0d0f0;
1231 }
1232
1233 .cbi-dropdown[open] > ul.dropdown > li.focus {
1234         background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%);
1235 }
1236
1237 .cbi-dropdown[open] > ul.dropdown > li:last-child {
1238         margin-bottom: 0;
1239         border-bottom: none;
1240 }
1241
1242 .cbi-dropdown[open] > ul.dropdown > li[unselectable] {
1243         opacity: 0.7;
1244 }
1245
1246 .cbi-dropdown[open] > ul.dropdown > li > input.create-item-input:first-child:last-child {
1247         width: 100%;
1248 }
1249
1250 .cbi-dropdown[disabled] {
1251         pointer-events: none;
1252         opacity: .6;
1253 }
1254
1255 .cbi-dynlist {
1256         height: auto;
1257         min-height: 30px;
1258         min-width: 210px;
1259         max-width: 100%;
1260         width: auto;
1261         display: inline-flex;
1262         flex-direction: column;
1263 }
1264
1265 .cbi-dynlist > .item {
1266         margin-bottom: 4px;
1267         background: #eee;
1268         padding: 2px 2em 2px 4px;
1269         border: 1px outset #000;
1270         border-radius: 3px;
1271         position: relative;
1272         pointer-events: none;
1273         overflow: hidden;
1274         text-overflow: ellipsis;
1275         white-space: nowrap;
1276 }
1277
1278 .cbi-dynlist > .item::after {
1279         content: "×";
1280         position: absolute;
1281         display: inline-flex;
1282         align-items: center;
1283         top: -1px;
1284         right: -1px;
1285         bottom: -1px;
1286         padding: 0 6px;
1287         border: 1px outset #000;
1288         background: #fff;
1289         border-radius: 0 3px 3px 0;
1290         font-weight: bold;
1291         color: #c44;
1292         pointer-events: auto;
1293         height: auto;
1294 }
1295
1296 .cbi-dynlist > .add-item {
1297         display: flex;
1298 }
1299
1300 .cbi-dynlist > .add-item > input {
1301         flex: 1 1 auto;
1302 }
1303
1304 input[type="text"] + .cbi-button,
1305 input[type="password"] + .cbi-button,
1306 select + .cbi-button {
1307         border-radius: 0 3px 3px 0;
1308         border: 1px outset #000;
1309         margin: 0 0 0 -2px;
1310         padding: 0 6px;
1311         vertical-align: top;
1312         display: inline-block;
1313         height: 22px;
1314         font-size: 12px;
1315         line-height: 20px;
1316 }
1317
1318 .cbi-tooltip-container {
1319         cursor: help;
1320 }
1321
1322 .cbi-tooltip {
1323         position: absolute;
1324         z-index: 1000;
1325         left: -1000px;
1326         border-radius: 3px;
1327         background: #fff;
1328         padding: 2px 5px;
1329         white-space: pre;
1330         opacity: 0;
1331         transition: opacity .25s ease-out;
1332         pointer-events: none;
1333         box-shadow: 0 0 2px #444;
1334         color: #444;
1335 }
1336
1337 .cbi-tooltip-container:hover .cbi-tooltip {
1338         left: auto;
1339         opacity: 1;
1340         transition: opacity .25s ease-in;
1341         white-space: normal;
1342 }
1343
1344 .cbi-progressbar {
1345         background: #ddd;
1346         border: 1px solid #bbb;
1347         border-radius: 3px;
1348         position: relative;
1349         min-width: 170px;
1350         height: 20px;
1351         margin: 4px 0;
1352         line-height: 20px;
1353 }
1354
1355 .cbi-progressbar > div {
1356         background: #90c0e0;
1357         height: 100%;
1358         transition: width .25s ease-in;
1359         width: 0%;
1360 }
1361
1362 .cbi-progressbar::after {
1363         position: absolute;
1364         bottom: 0;
1365         top: 0;
1366         right: 0;
1367         left: 0;
1368         text-align: center;
1369         text-shadow: 0 0 2px #fff;
1370         content: attr(title);
1371         white-space: pre;
1372         overflow: hidden;
1373         text-overflow: ellipsis;
1374 }
1375
1376
1377 .zonebadge .cbi-tooltip {
1378         padding: 1px;
1379         background: inherit;
1380         margin: -1.6em 0 0 -5px;
1381 }
1382
1383
1384 .zone-forwards {
1385         display: flex;
1386         flex-wrap: wrap;
1387 }
1388
1389 .zone-forwards > * {
1390         flex: 1 1 45%;
1391         padding: 1px;
1392 }
1393
1394 .zone-forwards > span {
1395         flex-basis: 10%;
1396         text-align: center;
1397 }
1398
1399 .zone-forwards .zone-src,
1400 .zone-forwards .zone-dest {
1401         display: flex;
1402         flex-direction: column;
1403 }
1404
1405
1406 .left, .left::before, .left::after { text-align: left !important; }
1407 .right, .right::before, .right::after { text-align: right !important; }
1408 .center, .center::before, .center::after { text-align: center !important; }
1409
1410 .top, .top::before, .top::after { vertical-align: top !important; }
1411 .middle, .middle::before, .middle::after { vertical-align: middle !important; }
1412 .bottom, .bottom::before, .bottom::after { vertical-align: bottom !important; }
1413
1414 .td.top { align-self: flex-start; vertical-align: top; }
1415 .td.middle { align-self: center; vertical-align: middle; }
1416 .td.bottom { align-self: flex-end; vertical-align: bottom; }
1417
1418 .luci {
1419         position: absolute;
1420         bottom: 0;
1421         left: 1em;
1422         height: 1.5em;
1423         font-size: 80%;
1424         margin-bottom: 0;
1425 }
1426
1427 .luci a:link,
1428 .luci a:visited {
1429         background-color: transparent;
1430         color: #666666;
1431         text-decoration: none;
1432         font-size: 70%;
1433 }
1434
1435 .inline {
1436         display: inline;
1437 }
1438
1439 .error500 {
1440         white-space: normal;
1441         border: 1px dotted #ff0000;
1442         background-color: #ffffff;
1443         color: #000000;
1444         padding: 0.5em;
1445 }
1446
1447
1448 .ifacebadge, .ifacebox {
1449         display: inline-flex;
1450         align-content: center;
1451         border: 1px solid #ccc;
1452         border-radius: 3px;
1453         padding: 2px;
1454         background: #fff;
1455 }
1456
1457 .ifacebox-head {
1458         background: #eee;
1459 }
1460
1461 .ifacebox-head.active {
1462         background: #90c0e0;
1463 }
1464
1465 .ifacebadge, .zonebadge {
1466         align-items: center;
1467 }
1468
1469 .ifacebadge > * {
1470         align-self: center;
1471 }
1472
1473 .ifacebadge > img,
1474 .ifacebadge > em {
1475         margin-right: 5px;
1476         display: inline-block;
1477         height: 16px;
1478 }
1479
1480 .ifacebadge-active {
1481         border-color: #000000;
1482         font-weight: bold;
1483 }
1484
1485 .ifacebox {
1486         flex-direction: column;
1487         margin: 0;
1488         padding: 0;
1489         min-width: 100px;
1490         text-align: center;
1491 }
1492
1493 .ifacebox > * {
1494         padding: 2px;
1495 }
1496
1497 .td > .ifacebadge,
1498 .td > .zonebadge {
1499         margin: 0;
1500         vertical-align: top;
1501 }
1502
1503 .network-status-table {
1504         display: flex;
1505         flex-wrap: wrap;
1506         margin: -.25em -.25em .25em -.25em;
1507 }
1508
1509 .network-status-table .ifacebox {
1510         margin: .25em;
1511         font-size: 90%;
1512         flex-grow: 1;
1513 }
1514
1515 .network-status-table .ifacebox-body {
1516         display: flex;
1517         flex-direction: column;
1518         flex: 1 0 auto;
1519         padding: .5em;
1520 }
1521
1522 .network-status-table .ifacebox-body > span {
1523         flex: 10 10 auto;
1524 }
1525
1526 .network-status-table .ifacebox-body > div {
1527         display: flex;
1528         flex-wrap: wrap;
1529 }
1530
1531 .ifacebadge.large,
1532 .network-status-table .ifacebox-body .ifacebadge {
1533         flex: 1;
1534         -webkit-flex: 1 1 auto;
1535         padding: .5em;
1536         min-width: 220px;
1537         white-space: nowrap;
1538 }
1539
1540 .network-status-table .ifacebox-body .ifacebadge {
1541         margin: .5em 0 0 0;
1542 }
1543
1544 #dsl_status_table .ifacebox-body span > strong {
1545         display: inline-block;
1546         min-width: 35%;
1547 }
1548
1549
1550 .zonebadge {
1551         padding: 2px;
1552         display: inline-block;
1553         white-space: nowrap;
1554         border-radius: 3px;
1555 }
1556
1557 .zonebadge > em,
1558 .zonebadge > strong {
1559         margin: 3px;
1560 }
1561
1562 .zonebadge input {
1563         width: 6em;
1564         height: 1.5em;
1565 }
1566
1567 .zonebadge .ifacebadge,
1568 .cbi-dropdown .ifacebadge {
1569         margin: 1px;
1570 }
1571
1572 .zonebadge .ifacebadge img,
1573 .zonebadge .ifacebadge em,
1574 .cbi-dropdown .ifacebadge img,
1575 .cbi-dropdown .ifacebadge em {
1576         margin: 0 1px;
1577 }
1578
1579 .zonebadge-empty {
1580         border: 1px dashed #AAAAAA;
1581         color: #AAAAAA;
1582         font-style: italic;
1583         font-size: smaller;
1584 }
1585
1586
1587 .uci-change-list {
1588         font-family: monospace;
1589         white-space: pre;
1590 }
1591
1592 .uci-change-list del,
1593 .uci-change-list ins,
1594 .uci-change-list var,
1595 .uci-change-legend-label del,
1596 .uci-change-legend-label ins,
1597 .uci-change-legend-label var {
1598         text-decoration: none;
1599         font-style: normal;
1600         border: 1px solid #ccc;
1601         background: #eee;
1602         padding: 2px;
1603         display: block;
1604         line-height: 15px;
1605         margin-bottom: 1px;
1606 }
1607
1608 .uci-change-list ins,
1609 .uci-change-legend-label ins {
1610         border-color: #0f0;
1611         background: #cfc;
1612 }
1613
1614 .uci-change-list del,
1615 .uci-change-legend-label del {
1616         border-color: #f00;
1617         background: #fcc;
1618 }
1619
1620 .uci-change-list var,
1621 .uci-change-legend-label var {
1622         border-color: #ccc;
1623         background: #eee;
1624 }
1625
1626 .uci-change-list var ins,
1627 .uci-change-list var del {
1628         display: inline-block;
1629         border: none;
1630         width: 100%;
1631         padding: 0;
1632 }
1633
1634 .uci-change-legend {
1635         padding: 5px;
1636 }
1637
1638 .uci-change-legend-label {
1639         width: 150px;
1640         float: left;
1641         font-size: 80%;
1642 }
1643
1644 .uci-change-legend-label>ins,
1645 .uci-change-legend-label>del,
1646 .uci-change-legend-label>var {
1647         float: left;
1648         margin-right: 4px;
1649         width: 12px;
1650         height: 12px;
1651         display: block;
1652         position: relative;
1653 }
1654
1655 .uci-change-legend-label var ins,
1656 .uci-change-legend-label var del {
1657         border: none;
1658         position: absolute;
1659         top: 1px;
1660         left: 1px;
1661         right: 1px;
1662         bottom: 1px;
1663 }
1664
1665
1666 @keyframes flash {
1667         0% { opacity: 1; }
1668         50% { opacity: .5; }
1669         100% { opacity: 1; }
1670 }
1671
1672 .flash {
1673         animation: flash .35s;
1674 }
1675
1676 .spinning {
1677         position: relative;
1678         padding-left: 32px !important;
1679 }
1680
1681 .spinning::before {
1682         position: absolute;
1683         top: 0;
1684         left: 0;
1685         bottom: 0;
1686         width: 32px;
1687         content: " ";
1688         background: url(../resources/icons/loading.gif) no-repeat center;
1689         background-size: 16px;
1690 }
1691
1692 }
1693
1694 @media screen and (max-width: 992px) {
1695         body {
1696                 -webkit-text-size-adjust: 100%;
1697         }
1698
1699         #maincontainer {
1700                 flex-direction: column;
1701                 width: 100%;
1702         }
1703
1704         #maincontent {
1705                 width: 96%;
1706                 margin: auto;
1707                 flex-basis: auto;
1708         }
1709
1710         #mainmenu {
1711                 border: none;
1712                 border-radius: 0;
1713                 max-width: none;
1714                 background: #000;
1715                 box-shadow: 0 0 2px #444;
1716                 padding: 0;
1717                 border-top: 1px solid #444;
1718                 position: relative;
1719         }
1720
1721         #mainmenu ul > li.selected > a {
1722                 background: #444;
1723                 color: #fff;
1724                 border-top: none;
1725         }
1726
1727         #mainmenu ul > li.selected:not(.active) > ul {
1728                 max-height: 0;
1729                 visibility: hidden;
1730         }
1731
1732         #mainmenu ul > li > a {
1733                 flex: 1 1 auto;
1734                 color: #fff;
1735                 border: 1px solid #444;
1736                 border-width: 0 0 1px 1px;
1737         }
1738
1739         #mainmenu ul.l1 {
1740                 display: flex;
1741                 flex-direction: row;
1742                 flex-wrap: wrap;
1743                 position: relative;
1744                 margin-left: -1px;
1745                 width: 100%;
1746         }
1747
1748         #mainmenu ul.l1 > li {
1749                 display: inline-flex;
1750                 flex: 1 1 auto;
1751                 position: relative;
1752                 height: 2em;
1753         }
1754
1755         #mainmenu ul.l1 ul.l2 {
1756                 position: absolute;
1757                 top: 2em;
1758                 right: 0;
1759                 z-index: 1000;
1760                 background: #000;
1761                 box-shadow: 0 0 2px #444;
1762                 min-width: 120px;
1763                 display: block;
1764         }
1765
1766         #mainmenu ul.l1 ul.l2.align-left {
1767                 right: auto;
1768                 left: 0;
1769         }
1770
1771         #mainmenu ul.l2 > li {
1772                 display: block;
1773         }
1774
1775         #mainmenu ul.l2 > li > a {
1776                 padding: .5em;
1777         }
1778
1779         #mainmenu ul li.mainmenu-item-logout {
1780                 margin-top: 0;
1781                 margin-left: auto;
1782         }
1783
1784         #mainmenu ul li.mainmenu-item-logout::before {
1785                 content: "\0a";
1786                 flex: 10;
1787                 border: 1px solid #444;
1788                 border-width: 0 0 1px 1px;
1789         }
1790
1791         .table {
1792                 display: flex;
1793                 flex-direction: column;
1794                 width: 100%;
1795         }
1796
1797         .tr {
1798                 display: flex;
1799                 flex-direction: row;
1800                 flex-wrap: wrap;
1801                 align-items: flex-end;
1802         }
1803
1804         .th, .td {
1805                 flex: 2 2 25%;
1806                 align-self: flex-start;
1807                 overflow: hidden;
1808                 text-overflow: ellipsis;
1809                 word-wrap: break-word;
1810                 display: inline-block;
1811         }
1812
1813         .td.cbi-dropdown-open {
1814                 overflow: visible;
1815         }
1816
1817         .td select {
1818                 word-wrap: normal;
1819         }
1820
1821         .td[data-type="button"],
1822         .td[data-type="fvalue"] {
1823                 flex: 1 1 12.5%;
1824                 text-align: left;
1825         }
1826
1827         .td.cbi-value-field {
1828                 align-self: flex-start;
1829         }
1830
1831         .td.cbi-value-field .cbi-button {
1832                 width: 100%;
1833         }
1834
1835         .table.cbi-section-table {
1836                 border: none;
1837                 background: none;
1838                 margin: 0;
1839         }
1840
1841         .tr.table-titles,
1842         .cbi-section-table-titles,
1843         .cbi-section-table-descr {
1844                 display: none;
1845         }
1846
1847         .cbi-section-table-row {
1848                 display: flex;
1849                 flex-direction: row;
1850                 flex-wrap: wrap;
1851                 border: 1px dotted #444;
1852                 margin: 0 0 .5em 0;
1853                 background: #fff;
1854         }
1855
1856         .cbi-section-table-row:hover {
1857                 border: 1px solid #4a6b7c;
1858         }
1859
1860         .cbi-section-table + .cbi-section-create {
1861                 padding-top: 0;
1862         }
1863
1864         .tr[data-title]::before {
1865                 display: block;
1866                 flex: 1 1 100%;
1867                 background: #eef;
1868         }
1869
1870         .td[data-title]::before,
1871         .td[data-description]::after {
1872                 display: block;
1873         }
1874
1875         .td[data-title] ~ .td.cbi-section-actions {
1876                 align-self: flex-start;
1877         }
1878
1879         .td[data-title] ~ .td.cbi-section-actions::before {
1880                 display: block;
1881                 content: "\a0";
1882         }
1883
1884         .hide-sm,
1885         .hide-xs {
1886                 display: none;
1887         }
1888
1889         #dsl_status_table .ifacebox-body > span > strong {
1890                 min-width: 50%;
1891         }
1892 }
1893
1894 @media screen and (max-width: 480px) {
1895         body {
1896                 font-size: 16px;
1897         }
1898
1899         input, textarea, select, .cbi-button, .cbi-dropdown {
1900                 font-size: 16px !important;
1901                 line-height: 30px;
1902         }
1903
1904         select, input[type="text"], input[type="password"] {
1905                 width: 100%;
1906                 height: 30px;
1907                 border-radius: 3px;
1908         }
1909
1910         input[type="text"] + .cbi-button,
1911         input[type="password"] + .cbi-button,
1912         select + .cbi-button {
1913                 height: 30px;
1914                 line-height: 30px;
1915                 margin-left: -5px;
1916                 min-width: 30px;
1917         }
1918
1919         input.cbi-input-password,
1920         [data-dynlist] > .add-item > input {
1921                 width: calc(100% - 25px);
1922         }
1923
1924         .label {
1925                 font-size: 14px;
1926         }
1927
1928         .cbi-dynlist,
1929         .cbi-dropdown {
1930                 min-width: 100%;
1931                 height: auto;
1932                 display: flex;
1933         }
1934
1935         .cbi-dropdown > .more,
1936         .cbi-dropdown > ul > li,
1937         .cbi-dropdown > ul > li[placeholder] {
1938                 min-height: 30px;
1939         }
1940
1941         .btn, .cbi-button {
1942                 font-size: 16px !important;
1943                 line-height: 30px;
1944                 height: 30px;
1945                 overflow: hidden;
1946                 text-overflow: ellipsis;
1947         }
1948
1949         #maincontent {
1950                 padding: .25em;
1951         }
1952
1953         #tabmenu {
1954                 margin: -.25em -.25em 1em -.25em;
1955         }
1956
1957         .th, .td {
1958                 flex: 2 2 50%;
1959         }
1960
1961         .td.cbi-value-field {
1962                 flex-basis: 100%;
1963         }
1964
1965         .td.cbi-value-field[data-type="dvalue"] {
1966                 flex-basis: 50%;
1967         }
1968
1969         .td.cbi-value-field[data-type="button"],
1970         .td.cbi-value-field[data-type="fvalue"] {
1971                 flex-basis: 25%;
1972                 text-align: left;
1973         }
1974
1975         .cbi-value-title {
1976                 float: none;
1977                 font-weight: bold;
1978         }
1979
1980         .cbi-value-field {
1981                 width: 100%;
1982                 margin: 0;
1983         }
1984
1985         .cbi-value-description {
1986                 margin-top: 5px;
1987                 display: block;
1988         }
1989
1990         .cbi-section-create {
1991                 margin-bottom: 1em;
1992         }
1993
1994         .cbi-page-actions {
1995                 flex-wrap: wrap;
1996                 margin: -2px;
1997         }
1998
1999         .cbi-page-actions > .cbi-button-link {
2000                 flex-basis: 100%;
2001                 margin-right: 2px;
2002         }
2003
2004         .cbi-page-actions > * {
2005                 flex: 1 1 auto;
2006                 margin: 2px;
2007         }
2008
2009         ul.cbi-tabmenu {
2010                 padding: 0 3px;
2011         }
2012
2013         .hide-xs {
2014                 display: none;
2015         }
2016
2017         #cbi-network .td[id] > strong {
2018                 display: block;
2019         }
2020
2021         #cbi-network-switch_vlan .td.cbi-section-actions {
2022                 flex-basis: 100%;
2023         }
2024
2025         #dsl_status_table .ifacebox-body > span > strong {
2026                 display: block;
2027                 width: 100%;
2028                 margin-top: .5em;
2029         }
2030
2031         #cbi-firewall-rule .td[data-type="fvalue"],
2032         #cbi-firewall-redirect .td[data-type="fvalue"] {
2033                 display: none;
2034         }
2035 }