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