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