themes/luci-theme-openwrt-2020/htdocs/luci-static/openwrt2020/cascade.css

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