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