[Summary view] [Print] [Text view]

   1  /* Include margin and padding in the width calculation of input and textarea. */
   2  input,
   3  select,
   4  textarea,
   5  button {
   6      box-sizing: border-box;
   7      font-family: inherit;
   8      font-size: inherit;
   9      font-weight: inherit;
  10  }
  11  
  12  textarea,
  13  input {
  14      font-size: 14px;
  15  }
  16  
  17  textarea {
  18      overflow: auto;
  19      padding: 8px 12px;
  20      /* inherits font size 14px */
  21      line-height: 1.42857143; /* 20px */
  22      resize: vertical;
  23  }
  24  
  25  input,
  26  select {
  27      margin: 0 1px;
  28  }
  29  
  30  textarea.code {
  31      padding: 8px 12px;
  32  }
  33  
  34  input[type="text"],
  35  input[type="password"],
  36  input[type="color"],
  37  input[type="date"],
  38  input[type="datetime"],
  39  input[type="datetime-local"],
  40  input[type="email"],
  41  input[type="month"],
  42  input[type="number"],
  43  input[type="search"],
  44  input[type="tel"],
  45  input[type="time"],
  46  input[type="url"],
  47  input[type="week"],
  48  select,
  49  textarea {
  50      box-shadow: 0 0 0 transparent;
  51      border-radius: 2px;
  52      border: 1px solid #949494;
  53      background-color: #fff;
  54      color: #1e1e1e;
  55  }
  56  
  57  input[type="text"],
  58  input[type="password"],
  59  input[type="date"],
  60  input[type="datetime"],
  61  input[type="datetime-local"],
  62  input[type="email"],
  63  input[type="month"],
  64  input[type="number"],
  65  input[type="search"],
  66  input[type="tel"],
  67  input[type="time"],
  68  input[type="url"],
  69  input[type="week"] {
  70      padding: 0 12px;
  71      /* inherits font size 14px */
  72      min-height: 40px;
  73  }
  74  
  75  select {
  76      padding: 0 24px 0 12px;
  77      /* inherits font size 14px */
  78      line-height: 2.71428571; /* 38px for 40px min-height */
  79      min-height: 40px;
  80  }
  81  
  82  ::-webkit-datetime-edit {
  83      /* inherits font size 14px */
  84      line-height: 1.85714286; /* 26px */
  85  }
  86  
  87  input[type="text"]:focus,
  88  input[type="password"]:focus,
  89  input[type="color"]:focus,
  90  input[type="date"]:focus,
  91  input[type="datetime"]:focus,
  92  input[type="datetime-local"]:focus,
  93  input[type="email"]:focus,
  94  input[type="month"]:focus,
  95  input[type="number"]:focus,
  96  input[type="search"]:focus,
  97  input[type="tel"]:focus,
  98  input[type="time"]:focus,
  99  input[type="url"]:focus,
 100  input[type="week"]:focus,
 101  select:focus,
 102  textarea:focus {
 103      border-color: var(--wp-admin-theme-color);
 104      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
 105      /* Only visible in Windows High Contrast mode */
 106      outline: 2px solid transparent;
 107  }
 108  
 109  /* Checkbox and radio use outset focus style */
 110  input[type="checkbox"]:focus,
 111  input[type="radio"]:focus {
 112      border-color: #1e1e1e;
 113      box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp-admin-theme-color);
 114      /* Only visible in Windows High Contrast mode */
 115      outline: 2px solid transparent;
 116  }
 117  
 118  /* rtl:ignore */
 119  .ltr,
 120  input[type="password"],
 121  input[type="email"],
 122  input[type="url"] {
 123      direction: ltr;
 124  }
 125  
 126  input[type="checkbox"],
 127  input[type="radio"] {
 128      border: 1px solid #1e1e1e;
 129      border-radius: 2px;
 130      background: #fff;
 131      color: #1e1e1e;
 132      clear: none;
 133      cursor: pointer;
 134      display: inline-block;
 135      line-height: 0;
 136      height: 1rem;
 137      margin: -0.25rem 0.25rem 0 0;
 138      outline: 0;
 139      padding: 0 !important;
 140      text-align: center;
 141      vertical-align: middle;
 142      width: 1rem;
 143      min-width: 1rem;
 144      -webkit-appearance: none;
 145      box-shadow: none;
 146      transition: .05s border-color ease-in-out;
 147  }
 148  
 149  input[type="radio"]:checked + label:before {
 150      color: #949494;
 151  }
 152  
 153  .wp-core-ui input[type="reset"]:hover,
 154  .wp-core-ui input[type="reset"]:active {
 155      color: #135e96;
 156  }
 157  
 158  td > input[type="checkbox"],
 159  .wp-admin p input[type="checkbox"],
 160  .wp-admin p input[type="radio"] {
 161      margin-top: 0;
 162  }
 163  
 164  .wp-admin p label input[type="checkbox"] {
 165      margin-top: -4px;
 166  }
 167  
 168  .wp-admin p label input[type="radio"] {
 169      margin-top: -2px;
 170  }
 171  
 172  input[type="radio"] {
 173      display: inline-flex;
 174      border-radius: 50%;
 175      margin-right: 0.25rem;
 176      align-items: center;
 177      justify-content: center;
 178  }
 179  
 180  input[type="checkbox"]:checked::before,
 181  input[type="radio"]:checked::before {
 182      float: left;
 183      display: inline-block;
 184      vertical-align: middle;
 185      width: 1rem;
 186      -webkit-font-smoothing: antialiased;
 187      -moz-osx-font-smoothing: grayscale;
 188  }
 189  
 190  input[type="checkbox"]:checked::before {
 191      /* Use the "Yes" SVG Dashicon */
 192      content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E");
 193      content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E") / '';
 194      margin: -0.1875rem 0 0 -0.25rem;
 195      height: 1.3125rem;
 196      width: 1.3125rem;
 197  }
 198  
 199  input[type="checkbox"]:checked {
 200      background: var(--wp-admin-theme-color);
 201      border-color: var(--wp-admin-theme-color);
 202  }
 203  
 204  input[type="radio"]:checked {
 205      background: var(--wp-admin-theme-color);
 206      border-color: var(--wp-admin-theme-color);
 207  }
 208  
 209  input[type="radio"]:checked::before {
 210      content: "";
 211      border-radius: 50%;
 212      width: 0.5rem; /* 8px */
 213      height: 0.5rem; /* 8px */
 214      margin: auto;
 215      background-color: #fff;
 216      /* Only visible in Windows High Contrast mode */
 217      outline: 4px solid transparent;
 218  }
 219  
 220  @-moz-document url-prefix() {
 221      input[type="checkbox"],
 222      input[type="radio"],
 223      .form-table input.tog {
 224          margin-bottom: -1px;
 225      }
 226  }
 227  
 228  /* Search */
 229  input[type="search"] {
 230      -webkit-appearance: textfield;
 231  }
 232  
 233  input[type="search"]::-webkit-search-decoration {
 234      display: none;
 235  }
 236  
 237  input[type="search"]::-webkit-search-cancel-button {
 238      cursor: pointer;
 239  }
 240  
 241  .wp-admin input[type="file"] {
 242      padding: 3px 0;
 243      cursor: pointer;
 244  }
 245  
 246  input.readonly,
 247  input[readonly],
 248  textarea.readonly,
 249  textarea[readonly] {
 250      background-color: #f0f0f0;
 251  }
 252  
 253  ::-webkit-input-placeholder {
 254      color: #757575;
 255  }
 256  
 257  ::-moz-placeholder {
 258      color: #757575;
 259  }
 260  
 261  .form-invalid .form-required,
 262  .form-invalid .form-required:focus,
 263  .form-invalid.form-required input,
 264  .form-invalid.form-required input:focus,
 265  .form-invalid.form-required select,
 266  .form-invalid.form-required select:focus {
 267      border-color: #d63638 !important;
 268      box-shadow: 0 0 2px rgba(214, 54, 56, 0.8);
 269  }
 270  
 271  .form-table .form-required.form-invalid td:after {
 272      content: "\f534";
 273      content: "\f534" / '';
 274      font: normal 20px/1 dashicons;
 275      color: #d63638;
 276      margin-left: -25px;
 277      vertical-align: middle;
 278  }
 279  
 280  /* Adjust error indicator for password layout */
 281  .form-table .form-required.user-pass1-wrap.form-invalid td:after {
 282      content: "";
 283  }
 284  
 285  .form-table .form-required.user-pass1-wrap.form-invalid .password-input-wrapper:after {
 286      content: "\f534";
 287      content: "\f534" / '';
 288      font: normal 20px/1 dashicons;
 289      color: #d63638;
 290      margin: 0 6px 0 -29px;
 291      vertical-align: middle;
 292  }
 293  
 294  .form-input-tip {
 295      color: #646970;
 296  }
 297  
 298  input:disabled,
 299  input.disabled,
 300  select:disabled,
 301  select.disabled,
 302  textarea:disabled,
 303  textarea.disabled {
 304      background: #f0f0f0;
 305      border-color: #cccccc;
 306      box-shadow: none;
 307      color: #949494;
 308  }
 309  
 310  input[type="file"]:disabled,
 311  input[type="file"].disabled,
 312  input[type="file"][aria-disabled="true"],
 313  input[type="range"]:disabled,
 314  input[type="range"].disabled,
 315  input[type="range"][aria-disabled="true"] {
 316      background: none;
 317      box-shadow: none;
 318      cursor: default;
 319  }
 320  
 321  input[type="checkbox"]:disabled,
 322  input[type="checkbox"].disabled,
 323  input[type="checkbox"][aria-disabled="true"],
 324  input[type="radio"]:disabled,
 325  input[type="radio"].disabled,
 326  input[type="radio"][aria-disabled="true"],
 327  input[type="checkbox"]:disabled:checked:before,
 328  input[type="checkbox"].disabled:checked:before,
 329  input[type="radio"]:disabled:checked:before,
 330  input[type="radio"].disabled:checked:before {
 331      opacity: 0.7;
 332      cursor: default;
 333  }
 334  
 335  /*------------------------------------------------------------------------------
 336    2.0 - Forms
 337  ------------------------------------------------------------------------------*/
 338  
 339  /* Select styles are based on the default button in buttons.css */
 340  .wp-core-ui select {
 341      font-size: 14px;
 342      line-height: 2.71428571; /* 38px for 40px min-height */
 343      color: #1e1e1e;
 344      border-color: #949494;
 345      box-shadow: none;
 346      border-radius: 2px;
 347      padding: 0 24px 0 12px;
 348      min-height: 40px;
 349      max-width: 25rem;
 350      -webkit-appearance: none;
 351      /* The SVG is arrow-down-alt2 from Dashicons. */
 352      background: #fff url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%231e1e1e%22%2F%3E%3C%2Fsvg%3E') no-repeat right 8px top 55%;
 353      background-size: 16px 16px;
 354      cursor: pointer;
 355      vertical-align: middle;
 356  }
 357  
 358  .wp-core-ui select:hover {
 359      color: #1e1e1e;
 360      border-color: #1e1e1e;
 361  }
 362  
 363  .wp-core-ui select:focus {
 364      border-color: var(--wp-admin-theme-color);
 365      color: #1e1e1e;
 366      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
 367  }
 368  
 369  .wp-core-ui select:active {
 370      border-color: #949494;
 371      box-shadow: none;
 372  }
 373  
 374  .wp-core-ui select.disabled,
 375  .wp-core-ui select:disabled {
 376      color: #a7aaad;
 377      border-color: #dcdcde;
 378      background-color: #f6f7f7;
 379      /* The SVG is arrow-down-alt2 from Dashicons. */
 380      background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M5%206l5%205%205-5%202%201-7%207-7-7%202-1z%22%20fill%3D%22%23a0a5aa%22%2F%3E%3C%2Fsvg%3E');
 381      box-shadow: none;
 382      text-shadow: 0 1px 0 #fff;
 383      cursor: default;
 384      transform: none;
 385  }
 386  
 387  .wp-core-ui select[aria-disabled="true"] {
 388      cursor: default;
 389  }
 390  
 391  /* Reset Firefox inner outline that appears on :focus. */
 392  /* This ruleset overrides the color change on :focus thus needs to be after select:focus. */
 393  .wp-core-ui select:-moz-focusring {
 394      color: transparent;
 395      text-shadow: 0 0 0 #0a4b78;
 396  }
 397  
 398  /* Remove background focus style from IE11 while keeping focus style available on option elements. */
 399  .wp-core-ui select::-ms-value {
 400      background: transparent;
 401      color: #50575e;
 402  }
 403  
 404  .wp-core-ui select:hover::-ms-value {
 405      color: #1e1e1e;
 406  }
 407  
 408  .wp-core-ui select:focus::-ms-value {
 409      color: #0a4b78;
 410  }
 411  
 412  .wp-core-ui select.disabled::-ms-value,
 413  .wp-core-ui select:disabled::-ms-value {
 414      color: #a7aaad;
 415  }
 416  
 417  /* Hide the native down arrow for select element on IE. */
 418  .wp-core-ui select::-ms-expand {
 419      display: none;
 420  }
 421  
 422  .wp-admin .button-cancel {
 423      display: inline-block;
 424      min-height: 28px;
 425      padding: 0 5px;
 426      line-height: 2;
 427  }
 428  
 429  .meta-box-sortables select {
 430      max-width: 100%;
 431  }
 432  
 433  .meta-box-sortables input {
 434      vertical-align: middle;
 435  }
 436  
 437  .misc-pub-post-status select {
 438      margin-top: 0;
 439  }
 440  
 441  .wp-core-ui select[multiple] {
 442      height: auto;
 443      padding-right: 8px;
 444      background: #fff;
 445  }
 446  
 447  .submit {
 448      padding: 1.5em 0;
 449      margin: 5px 0;
 450      border-bottom-left-radius: 3px;
 451      border-bottom-right-radius: 3px;
 452      border: none;
 453  }
 454  
 455  form p.submit a.cancel:hover {
 456      text-decoration: none;
 457  }
 458  
 459  p.submit {
 460      text-align: left;
 461      max-width: 100%;
 462      margin-top: 20px;
 463      padding-top: 10px;
 464  }
 465  
 466  .textright p.submit {
 467      border: none;
 468      text-align: right;
 469  }
 470  
 471  table.form-table + p.submit,
 472  table.form-table + input + p.submit,
 473  table.form-table + input + input + p.submit {
 474      border-top: none;
 475      padding-top: 0;
 476  }
 477  
 478  #minor-publishing-actions input,
 479  #major-publishing-actions input,
 480  #minor-publishing-actions .preview {
 481      text-align: center;
 482  }
 483  
 484  textarea.all-options,
 485  input.all-options {
 486      width: 250px;
 487  }
 488  
 489  input.large-text,
 490  textarea.large-text {
 491      width: 99%;
 492  }
 493  
 494  .regular-text {
 495      width: 25em;
 496  }
 497  
 498  input.small-text {
 499      width: 50px;
 500      padding: 0 8px;
 501  }
 502  
 503  label input.small-text {
 504      margin-top: -4px;
 505  }
 506  
 507  input[type="number"].small-text {
 508      width: 65px;
 509      padding-right: 4px;
 510  }
 511  
 512  input.tiny-text {
 513      width: 35px;
 514  }
 515  
 516  input[type="number"].tiny-text {
 517      width: 45px;
 518      padding-right: 0;
 519  }
 520  
 521  #doaction,
 522  #doaction2,
 523  #post-query-submit {
 524      margin: 0 8px 0 0;
 525      min-height: 32px;
 526      line-height: 2.30769231; /* 30px for 32px height with 13px font */
 527      padding: 0 12px;
 528  }
 529  
 530  /* @since 5.7.0 secondary bulk action controls require JS. */
 531  .no-js label[for="bulk-action-selector-bottom"],
 532  .no-js select#bulk-action-selector-bottom,
 533  .no-js input#doaction2,
 534  .no-js label[for="new_role2"],
 535  .no-js select#new_role2,
 536  .no-js input#changeit2 {
 537      display: none;
 538  }
 539  
 540  .wp-core-ui .tablenav input[type="text"],
 541  .wp-core-ui .tablenav input[type="password"],
 542  .wp-core-ui .tablenav input[type="date"],
 543  .wp-core-ui .tablenav input[type="datetime"],
 544  .wp-core-ui .tablenav input[type="datetime-local"],
 545  .wp-core-ui .tablenav input[type="email"],
 546  .wp-core-ui .tablenav input[type="month"],
 547  .wp-core-ui .tablenav input[type="number"],
 548  .wp-core-ui .tablenav input[type="search"],
 549  .wp-core-ui .tablenav input[type="tel"],
 550  .wp-core-ui .tablenav input[type="time"],
 551  .wp-core-ui .tablenav input[type="url"],
 552  .wp-core-ui .tablenav input[type="week"],
 553  .wp-core-ui .tablenav select {
 554      padding: 0 12px;
 555      /* inherits font size 14px */
 556      line-height: 2.14285714; /* 30px for 32px height with 14px font */
 557      min-height: 32px;
 558  }
 559  
 560  .wp-core-ui .tablenav select {
 561      float: left;
 562      margin-right: 6px;
 563      max-width: 12.5rem;
 564      padding: 0 24px 0 8px;
 565  }
 566  
 567  .wp-core-ui .tablenav .button {
 568      min-height: 32px;
 569      line-height: 2.30769231; /* 30px for 32px height with 13px font */
 570      padding: 0 12px;
 571  }
 572  
 573  #timezone_string option {
 574      margin-left: 1em;
 575  }
 576  
 577  .wp-core-ui .button.wp-hide-pw > .dashicons,
 578  .wp-core-ui .button.wp-cancel-pw > .dashicons {
 579      width: 1.25rem;
 580      height: 1.25rem;
 581      font-size: 20px;
 582      line-height: 1;
 583      vertical-align: middle;
 584  }
 585  
 586  .button.wp-hide-pw.user-new-password-toggle {
 587      display: inline-flex;
 588      align-items: center;
 589      column-gap: 4px;
 590  }
 591  
 592  .wp-cancel-pw .dashicons-no {
 593      display: none;
 594  }
 595  
 596  label,
 597  #your-profile label + a {
 598      vertical-align: middle;
 599  }
 600  
 601  fieldset label,
 602  #your-profile label + a {
 603      vertical-align: middle;
 604  }
 605  
 606  .options-media-php [for*="_size_"] {
 607      min-width: 10em;
 608      vertical-align: baseline;
 609  }
 610  
 611  .options-media-php .small-text[name*="_size_"] {
 612      margin: 0 0 1em;
 613  }
 614  
 615  .wp-generate-pw {
 616      margin-top: 1em;
 617      position: relative;
 618  }
 619  
 620  .wp-pwd button {
 621      height: min-content;
 622  }
 623  
 624  .wp-pwd {
 625      margin-top: 1em;
 626      position: relative;
 627  }
 628  
 629  .mailserver-pass-wrap .wp-pwd {
 630      display: inline-block;
 631      margin-top: 0;
 632  }
 633  
 634  /* rtl:ignore */
 635  #mailserver_pass {
 636      padding-right: 2.5rem;
 637  }
 638  
 639  /* rtl:ignore */
 640  .mailserver-pass-wrap .button.wp-hide-pw {
 641      background: transparent;
 642      border: 1px solid transparent;
 643      box-shadow: none;
 644      font-size: 14px;
 645      line-height: 2;
 646      width: 2.5rem;
 647      min-width: 40px;
 648      margin: 0;
 649      padding: 0 9px;
 650      position: absolute;
 651      right: 0;
 652      top: 0;
 653  }
 654  
 655  .mailserver-pass-wrap .button.wp-hide-pw:hover {
 656      background: transparent;
 657      border-color: transparent;
 658  }
 659  
 660  .mailserver-pass-wrap .button.wp-hide-pw:focus {
 661      background: transparent;
 662      border-color: var(--wp-admin-theme-color);
 663      border-radius: 2px;
 664      box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
 665      /* Only visible in Windows High Contrast mode */
 666      outline: 2px solid transparent;
 667  }
 668  
 669  .mailserver-pass-wrap .button.wp-hide-pw:active {
 670      background: transparent;
 671      box-shadow: none;
 672      transform: none;
 673  }
 674  
 675  #misc-publishing-actions label {
 676      vertical-align: baseline;
 677  }
 678  
 679  #pass-strength-result {
 680      background-color: #f0f0f0;
 681      border: 1px solid #cccccc;
 682      border-radius: 2px;
 683      color: #1e1e1e;
 684      margin: -1px 1px 5px;
 685      padding: 3px 5px;
 686      text-align: center;
 687      width: 25em;
 688      box-sizing: border-box;
 689      opacity: 0;
 690  }
 691  
 692  #pass-strength-result.short {
 693      background-color: #ffabaf;
 694      border-color: #e65054;
 695      opacity: 1;
 696  }
 697  
 698  #pass-strength-result.bad {
 699      background-color: #facfd2;
 700      border-color: #f86368;
 701      opacity: 1;
 702  }
 703  
 704  #pass-strength-result.good {
 705      background-color: #f5e6ab;
 706      border-color: #f0c33c;
 707      opacity: 1;
 708  }
 709  
 710  #pass-strength-result.strong {
 711      background-color: #b8e6bf;
 712      border-color: #68de7c;
 713      opacity: 1;
 714  }
 715  
 716  .password-input-wrapper {
 717      display: inline-block;
 718  }
 719  
 720  .password-input-wrapper input {
 721      font-family: Consolas, Monaco, monospace;
 722  }
 723  
 724  #pass1.short, #pass1-text.short {
 725      border-color: #e65054;
 726  }
 727  
 728  #pass1.bad, #pass1-text.bad {
 729      border-color: #f86368;
 730  }
 731  
 732  #pass1.good, #pass1-text.good {
 733      border-color: #f0c33c;
 734  }
 735  
 736  #pass1.strong, #pass1-text.strong {
 737      border-color: #68de7c;
 738  }
 739  
 740  #pass1:focus,
 741  #pass1-text:focus {
 742      box-shadow: 0 0 0 0.5px var(--wp-admin-theme-color);
 743      /* Only visible in Windows High Contrast mode */
 744      outline: 2px solid transparent;
 745  }
 746  
 747  .pw-weak {
 748      display: none;
 749  }
 750  
 751  .indicator-hint {
 752      padding-top: 8px;
 753  }
 754  
 755  .wp-pwd [type="text"],
 756  .wp-pwd [type="password"] {
 757      margin-bottom: 0;
 758      /* Same height as the buttons */
 759      min-height: 40px;
 760  }
 761  
 762  /* Hide the Edge "reveal password" native button */
 763  .wp-pwd input::-ms-reveal {
 764      display: none;
 765  }
 766  
 767  #pass1-text,
 768  .show-password #pass1 {
 769      display: none;
 770  }
 771  
 772  #pass1-text::-ms-clear {
 773      display: none;
 774  }
 775  
 776  .show-password #pass1-text {
 777      display: inline-block;
 778  }
 779  
 780  /* Caps lock warning */
 781  .wp-pwd .caps-warning {
 782      display: none;
 783      position: relative;
 784      background: #fcf9e8;
 785      border: 1px solid #f0c33c;
 786      color: #1d2327;
 787      padding: 6px 10px;
 788      top: -8px;
 789  }
 790  
 791  .profile-php .wp-pwd .caps-warning {
 792      padding: 3px 5px;
 793      top: -4px;
 794      border-radius: 2px;
 795  }
 796  
 797  .wp-pwd .caps-icon {
 798      display: inline-flex;
 799      justify-content: center;
 800      width: 20px;
 801      height: 20px;
 802      margin-right: 5px;
 803      vertical-align: middle;
 804  }
 805  
 806  .wp-pwd .caps-warning-text {
 807      vertical-align: middle;
 808  }
 809  /* Caps lock warning */
 810  
 811  p.search-box {
 812      display: flex;
 813      flex-wrap: wrap;
 814      align-items: center;
 815      column-gap: 0.5rem;
 816      position: relative;
 817      float: right;
 818      margin: 11px 0;
 819  }
 820  
 821  p.search-box input[type="search"],
 822  p.search-box input[type="text"] {
 823      min-height: 32px;
 824      padding: 0 8px;
 825  }
 826  
 827  p.search-box .button {
 828      min-height: 32px;
 829      line-height: 2.30769231; /* 30px for 32px height with 13px font */
 830      padding: 0 12px;
 831  }
 832  
 833  .network-admin.themes-php p.search-box {
 834      clear: left;
 835  }
 836  
 837  .tablenav .search-plugins input[name="s"] {
 838      float: left;
 839      margin: 0 4px 0 0;
 840  }
 841  
 842  .tagsdiv .newtag {
 843      margin: 0;
 844  }
 845  
 846  .js.plugins-php .search-box .wp-filter-search {
 847      margin: 0;
 848      width: 280px;
 849  }
 850  
 851  input[type="text"].ui-autocomplete-loading,
 852  input[type="email"].ui-autocomplete-loading {
 853      background-image: url(../images/loading.gif);
 854      background-repeat: no-repeat;
 855      background-position: right 5px center;
 856      visibility: visible;
 857  }
 858  
 859  input.ui-autocomplete-input.open {
 860      border-bottom-color: transparent;
 861  }
 862  
 863  ul#add-to-blog-users {
 864      margin: 0 0 0 14px;
 865  }
 866  
 867  .ui-autocomplete {
 868      padding: 0;
 869      margin: 0;
 870      list-style: none;
 871      position: absolute;
 872      z-index: 10000;
 873      border: 1px solid #4f94d4;
 874      box-shadow: 0 1px 2px rgba(79, 148, 212, 0.8);
 875      background-color: #fff;
 876  }
 877  
 878  .ui-autocomplete li {
 879      margin-bottom: 0;
 880      padding: 4px 10px;
 881      white-space: nowrap;
 882      text-align: left;
 883      cursor: pointer;
 884  }
 885  
 886  /* Colors for the wplink toolbar autocomplete. */
 887  .ui-autocomplete .ui-state-focus {
 888      background-color: #dcdcde;
 889  }
 890  
 891  /* Colors for the tags autocomplete. */
 892  .wp-tags-autocomplete .ui-state-focus,
 893  .wp-tags-autocomplete [aria-selected="true"] {
 894      background-color: var(--wp-admin-theme-color);
 895      color: #fff;
 896      /* Only visible in Windows High Contrast mode */
 897      outline: 2px solid transparent;
 898  }
 899  
 900  /*------------------------------------------------------------------------------
 901    15.0 - Comments Screen
 902  ------------------------------------------------------------------------------*/
 903  
 904  .form-table {
 905      border-collapse: collapse;
 906      margin-top: 0.5em;
 907      width: 100%;
 908      clear: both;
 909  }
 910  
 911  .form-table,
 912  .form-table td,
 913  .form-table th,
 914  .form-table td p {
 915      font-size: 14px;
 916  }
 917  
 918  .form-table td {
 919      margin-bottom: 9px;
 920      padding: 15px 10px;
 921      line-height: 1.3;
 922      vertical-align: middle;
 923  }
 924  
 925  .form-table th,
 926  .form-wrap label {
 927      color: #1d2327;
 928      font-weight: 400;
 929      text-shadow: none;
 930      vertical-align: baseline;
 931  }
 932  
 933  .form-table th {
 934      vertical-align: top;
 935      text-align: left;
 936      padding: 20px 10px 20px 0;
 937      width: 200px;
 938      line-height: 1.3;
 939      font-weight: 600;
 940  }
 941  
 942  .form-table th.th-full, /* Not used by core. Back-compat for pre-4.8 */
 943  .form-table .td-full {
 944      width: auto;
 945      padding: 20px 10px 20px 0;
 946      font-weight: 400;
 947  }
 948  
 949  .form-table td p {
 950      margin-top: 4px;
 951      margin-bottom: 0;
 952  }
 953  
 954  .form-table .date-time-doc {
 955      margin-top: 1em;
 956  }
 957  
 958  .form-table p.timezone-info {
 959      margin: 1em 0;
 960      display: flex;
 961      flex-direction: column;
 962  }
 963  
 964  #local-time {
 965      margin-top: 0.5em;
 966  }
 967  
 968  .form-table td fieldset label {
 969      margin: 0.35em 0 0.5em !important;
 970      display: inline-block;
 971  }
 972  
 973  .form-table td fieldset p label {
 974      margin-top: 0 !important;
 975  }
 976  
 977  .form-table td fieldset label,
 978  .form-table td fieldset p,
 979  .form-table td fieldset li {
 980      line-height: 1.4;
 981  }
 982  
 983  .form-table .pre {
 984      padding: 8px;
 985      margin: 0;
 986  }
 987  
 988  table.form-table td .updated {
 989      font-size: 13px;
 990  }
 991  
 992  table.form-table td .updated p {
 993      font-size: 13px;
 994      margin: 0.3em 0;
 995  }
 996  
 997  /*------------------------------------------------------------------------------
 998    18.0 - Users
 999  ------------------------------------------------------------------------------*/
1000  
1001  #profile-page .form-table textarea {
1002      width: 500px;
1003      margin-bottom: 6px;
1004  }
1005  
1006  #profile-page .form-table #rich_editing {
1007      margin-right: 5px
1008  }
1009  
1010  #your-profile legend {
1011      font-size: 22px;
1012  }
1013  
1014  #display_name {
1015      width: 15em;
1016  }
1017  
1018  #adduser .form-field input,
1019  #createuser .form-field input {
1020      width: 25em;
1021  }
1022  
1023  .color-option {
1024      display: inline-block;
1025      width: 24%;
1026      padding: 5px 15px 15px;
1027      box-sizing: border-box;
1028      margin-bottom: 3px;
1029  }
1030  
1031  .color-option:hover,
1032  .color-option.selected {
1033      background: #dcdcde;
1034  }
1035  
1036  .color-palette {
1037      display: table;
1038      width: 100%;
1039      border-spacing: 0;
1040      border-collapse: collapse;
1041  }
1042  .color-palette .color-palette-shade,
1043  .color-palette td {
1044      display: table-cell;
1045      height: 20px;
1046      padding: 0;
1047      border: none;
1048  }
1049  
1050  .color-option {
1051      cursor: pointer;
1052  }
1053  
1054  .create-application-password .form-field {
1055      max-width: 25em;
1056  }
1057  
1058  .create-application-password label {
1059      font-weight: 600;
1060  }
1061  
1062  .create-application-password p.submit {
1063      margin-bottom: 0;
1064      padding-bottom: 0;
1065      display: block;
1066  }
1067  
1068  #application-passwords-section .notice {
1069      margin-top: 20px;
1070      margin-bottom: 0;
1071      word-wrap: break-word;
1072  }
1073  
1074  .application-password-display input.code {
1075      margin-bottom: 6px;
1076      width: 100%;
1077      max-width: 20em;
1078  }
1079  
1080  .auth-app-card.card {
1081      max-width: 768px;
1082  }
1083  
1084  .authorize-application-php .form-wrap p {
1085      display: block;
1086  }
1087  
1088  /*------------------------------------------------------------------------------
1089    19.0 - Tools
1090  ------------------------------------------------------------------------------*/
1091  
1092  .tool-box .title {
1093      margin: 8px 0;
1094      font-size: 18px;
1095      font-weight: 400;
1096      line-height: 24px;
1097  }
1098  
1099  .label-responsive {
1100      vertical-align: middle;
1101  }
1102  
1103  #export-filters p {
1104      margin: 0 0 1em;
1105  }
1106  
1107  #export-filters p.submit {
1108      margin: 7px 0 5px;
1109  }
1110  
1111  /* Card styles */
1112  
1113  .card {
1114      position: relative;
1115      margin-top: 20px;
1116      padding: 16px 24px;
1117      min-width: 255px;
1118      max-width: 520px;
1119      border: 1px solid rgb(0, 0, 0, 0.1);
1120      border-radius: 8px;
1121      background: #ffffff;
1122      box-sizing: border-box;
1123  }
1124  
1125  /* Press this styles */
1126  
1127  .pressthis h4 {
1128      margin: 2em 0 1em;
1129  }
1130  
1131  .pressthis textarea {
1132      width: 100%;
1133      font-size: 1em;
1134  }
1135  
1136  #pressthis-code-wrap {
1137      overflow: auto;
1138  }
1139  
1140  .pressthis-bookmarklet-wrapper {
1141      margin: 20px 0 8px;
1142      vertical-align: top;
1143      position: relative;
1144      z-index: 1;
1145  }
1146  
1147  .pressthis-bookmarklet,
1148  .pressthis-bookmarklet:hover,
1149  .pressthis-bookmarklet:focus,
1150  .pressthis-bookmarklet:active {
1151      display: inline-block;
1152      position: relative;
1153      cursor: move;
1154      color: #2c3338;
1155      background: #dcdcde;
1156      border-radius: 5px;
1157      border: 1px solid #c3c4c7;
1158      font-style: normal;
1159      line-height: 16px;
1160      font-size: 14px;
1161      text-decoration: none;
1162  }
1163  
1164  .pressthis-bookmarklet:active {
1165      outline: none;
1166  }
1167  
1168  .pressthis-bookmarklet:after {
1169      content: "";
1170      width: 70%;
1171      height: 55%;
1172      z-index: -1;
1173      position: absolute;
1174      right: 10px;
1175      bottom: 9px;
1176      background: transparent;
1177      transform: skew(20deg) rotate(6deg);
1178      box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
1179  }
1180  
1181  .pressthis-bookmarklet:hover:after {
1182      transform: skew(20deg) rotate(9deg);
1183      box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
1184  }
1185  
1186  .pressthis-bookmarklet span {
1187      display: inline-block;
1188      margin: 0;
1189      padding: 0 12px 8px 9px;
1190  }
1191  
1192  .pressthis-bookmarklet span:before {
1193      color: #787c82;
1194      font: normal 20px/1 dashicons;
1195      content: "\f157";
1196      content: "\f157" / '';
1197      position: relative;
1198      display: inline-block;
1199      top: 4px;
1200      margin-right: 4px;
1201  }
1202  
1203  .pressthis-js-toggle {
1204      margin-left: 10px;
1205      padding: 0;
1206      height: auto;
1207      vertical-align: top;
1208  }
1209  
1210  /* to override the button class being applied */
1211  .pressthis-js-toggle.button.button {
1212      margin-left: 10px;
1213      padding: 0;
1214      height: auto;
1215      vertical-align: top;
1216  }
1217  
1218  .pressthis-js-toggle .dashicons {
1219      margin: 5px 8px 6px 7px;
1220      color: #50575e;
1221  }
1222  
1223  /*------------------------------------------------------------------------------
1224    20.0 - Settings
1225  ------------------------------------------------------------------------------*/
1226  
1227  .timezone-info code {
1228      white-space: nowrap;
1229  }
1230  
1231  .defaultavatarpicker .avatar {
1232      margin: 2px 0;
1233      vertical-align: middle;
1234  }
1235  
1236  .options-general-php .date-time-text {
1237      display: inline-block;
1238      min-width: 10em;
1239  }
1240  
1241  .options-general-php input.small-text {
1242      width: 56px;
1243      margin: -2px 0;
1244      min-height: 32px;
1245  }
1246  
1247  .options-general-php .spinner {
1248      float: none;
1249      margin: -3px 3px 0;
1250  }
1251  
1252  .settings-php .language-install-spinner,
1253  .options-general-php .language-install-spinner,
1254  .user-edit-php .language-install-spinner,
1255  .profile-php .language-install-spinner {
1256      display: inline-block;
1257      float: none;
1258      margin: -3px 5px 0;
1259      vertical-align: middle;
1260  }
1261  
1262  .form-table.permalink-structure .available-structure-tags {
1263      margin-top: 8px;
1264  }
1265  
1266  .form-table.permalink-structure .available-structure-tags ul {
1267      display: flex;
1268      flex-wrap: wrap;
1269      margin: 8px 0 0;
1270  }
1271  
1272  .form-table.permalink-structure .available-structure-tags li {
1273      margin: 6px 5px 0 0;
1274  }
1275  
1276  .form-table.permalink-structure .available-structure-tags li:last-child {
1277      margin-right: 0;
1278  }
1279  
1280  .form-table.permalink-structure .structure-selection .row {
1281      margin-bottom: 16px;
1282  }
1283  
1284  .form-table.permalink-structure .structure-selection .row > div {
1285      max-width: calc(100% - 24px);
1286      display: inline-flex;
1287      flex-direction: column;
1288  }
1289  
1290  .form-table.permalink-structure .structure-selection .row label {
1291      font-weight: 600;
1292  }
1293  
1294  .form-table.permalink-structure .structure-selection .row p {
1295      margin-top: 0;
1296  }
1297  
1298  .permalink-structure-optional-description code {
1299      display: inline-block;
1300  }
1301  
1302  /*------------------------------------------------------------------------------
1303    21.0 - Network Admin
1304  ------------------------------------------------------------------------------*/
1305  
1306  .setup-php textarea {
1307      max-width: 100%;
1308  }
1309  
1310  .form-field #site-address {
1311      max-width: 25em;
1312  }
1313  
1314  .form-field #domain {
1315      max-width: 22em;
1316  }
1317  
1318  .form-field #site-title,
1319  .form-field #admin-email,
1320  .form-field #path,
1321  .form-field #blog_registered,
1322  .form-field #blog_last_updated {
1323      max-width: 25em;
1324  }
1325  
1326  .form-field #path {
1327      margin-bottom: 5px;
1328  }
1329  
1330  #search-users,
1331  #search-sites {
1332      max-width: 60%;
1333  }
1334  
1335  .configuration-rules-label {
1336      font-weight: 600;
1337      margin-bottom: 4px;
1338  }
1339  
1340  /*------------------------------------------------------------------------------
1341     Credentials check dialog for Install and Updates
1342  ------------------------------------------------------------------------------*/
1343  
1344  .request-filesystem-credentials-dialog {
1345      display: none;
1346      /* The customizer uses visibility: hidden on the body for full-overlays. */
1347      visibility: visible;
1348  }
1349  
1350  .request-filesystem-credentials-dialog .notification-dialog {
1351      top: 10%;
1352      max-height: 85%;
1353  }
1354  
1355  .request-filesystem-credentials-dialog-content {
1356      margin: 25px;
1357  }
1358  
1359  #request-filesystem-credentials-title {
1360      font-size: 1.3em;
1361      margin: 1em 0;
1362  }
1363  
1364  .request-filesystem-credentials-form legend {
1365      font-size: 1em;
1366      padding: 1.33em 0;
1367      font-weight: 600;
1368  }
1369  
1370  .request-filesystem-credentials-form input[type="text"],
1371  .request-filesystem-credentials-form input[type="password"] {
1372      display: block;
1373  }
1374  
1375  .request-filesystem-credentials-dialog input[type="text"],
1376  .request-filesystem-credentials-dialog input[type="password"] {
1377      width: 100%;
1378  }
1379  
1380  .request-filesystem-credentials-form .field-title {
1381      font-weight: 600;
1382  }
1383  
1384  .request-filesystem-credentials-dialog label[for="hostname"],
1385  .request-filesystem-credentials-dialog label[for="public_key"],
1386  .request-filesystem-credentials-dialog label[for="private_key"] {
1387      display: block;
1388      margin-bottom: 1em;
1389  }
1390  
1391  .request-filesystem-credentials-dialog .ftp-username,
1392  .request-filesystem-credentials-dialog .ftp-password {
1393      float: left;
1394      width: 48%;
1395  }
1396  
1397  .request-filesystem-credentials-dialog .ftp-password {
1398      margin-left: 4%;
1399  }
1400  
1401  .request-filesystem-credentials-dialog .request-filesystem-credentials-action-buttons {
1402      text-align: right;
1403  }
1404  
1405  .request-filesystem-credentials-dialog label[for="ftp"] {
1406      margin-right: 10px;
1407  }
1408  
1409  .request-filesystem-credentials-dialog #auth-keys-desc {
1410      margin-bottom: 0;
1411  }
1412  
1413  #request-filesystem-credentials-dialog .button:not(:last-child) {
1414      margin-right: 10px;
1415  }
1416  
1417  #request-filesystem-credentials-form .cancel-button {
1418      display: none;
1419  }
1420  
1421  #request-filesystem-credentials-dialog .cancel-button {
1422      display: inline;
1423  }
1424  
1425  .request-filesystem-credentials-dialog .ftp-username,
1426  .request-filesystem-credentials-dialog .ftp-password {
1427      float: none;
1428      width: auto;
1429  }
1430  
1431  .request-filesystem-credentials-dialog .ftp-username {
1432      margin-bottom: 1em;
1433  }
1434  
1435  .request-filesystem-credentials-dialog .ftp-password {
1436      margin: 0;
1437  }
1438  
1439  .request-filesystem-credentials-dialog .ftp-password em {
1440      color: #757575;
1441  }
1442  
1443  .request-filesystem-credentials-dialog label {
1444      display: block;
1445      line-height: 1.5;
1446      margin-bottom: 1em;
1447  }
1448  
1449  .request-filesystem-credentials-form legend {
1450      padding-bottom: 0;
1451  }
1452  
1453  .request-filesystem-credentials-form #ssh-keys legend {
1454      font-size: 1.3em;
1455  }
1456  
1457  .request-filesystem-credentials-form .notice {
1458      margin: 0 0 20px;
1459      clear: both;
1460  }
1461  
1462  /*------------------------------------------------------------------------------
1463     Privacy Policy settings screen
1464  ------------------------------------------------------------------------------*/
1465  .tools-privacy-policy-page form {
1466      margin-bottom: 1.3em;
1467  }
1468  
1469  .tools-privacy-policy-page input.button {
1470      margin: 0 1px 0 6px;
1471  }
1472  
1473  .tools-privacy-policy-page select {
1474      margin: 0 1px 0.5em 6px;
1475  }
1476  
1477  .tools-privacy-edit {
1478      margin: 1.5em 0;
1479  }
1480  
1481  .tools-privacy-policy-page span {
1482      line-height: 2;
1483  }
1484  
1485  .privacy_requests .column-email {
1486      width: 40%;
1487  }
1488  
1489  .privacy_requests .column-type {
1490      text-align: center;
1491  }
1492  
1493  .privacy_requests thead td:first-child,
1494  .privacy_requests tfoot td:first-child {
1495      border-left: 4px solid #fff;
1496  }
1497  
1498  .privacy_requests tbody th {
1499      border-left: 4px solid #fff;
1500      background: #fff;
1501      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
1502  }
1503  
1504  .privacy_requests .row-actions {
1505      color: #787c82;
1506  }
1507  
1508  .privacy_requests .row-actions.processing {
1509      position: static;
1510  }
1511  
1512  .privacy_requests tbody .has-request-results th {
1513      box-shadow: none;
1514  }
1515  
1516  .privacy_requests tbody .request-results th .notice {
1517      margin: 0 0 5px;
1518  }
1519  
1520  .privacy_requests tbody td {
1521      background: #fff;
1522      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
1523  }
1524  
1525  .privacy_requests tbody .has-request-results td {
1526      box-shadow: none;
1527  }
1528  
1529  .privacy_requests .next_steps .button {
1530      word-wrap: break-word;
1531      white-space: normal;
1532  }
1533  
1534  .privacy_requests .status-request-confirmed th,
1535  .privacy_requests .status-request-confirmed td {
1536      background-color: #fff;
1537      border-left-color: #72aee6;
1538  }
1539  
1540  .privacy_requests .status-request-failed th,
1541  .privacy_requests .status-request-failed td {
1542      background-color: #f6f7f7;
1543      border-left-color: #d63638;
1544  }
1545  
1546  .privacy_requests .export_personal_data_failed a {
1547      vertical-align: baseline;
1548  }
1549  
1550  .status-label {
1551      font-weight: 600;
1552  }
1553  
1554  .status-label.status-request-pending {
1555      font-weight: 400;
1556      font-style: italic;
1557      color: #646970;
1558  }
1559  
1560  .status-label.status-request-failed {
1561      color: #d63638;
1562      font-weight: 600;
1563  }
1564  
1565  .privacy_requests .status-date {
1566      display: block;
1567      font-weight: 400;
1568  }
1569  
1570  .wp-privacy-request-form {
1571      clear: both;
1572  }
1573  
1574  .wp-privacy-request-form-field {
1575      margin: 1.5em 0;
1576  }
1577  
1578  .wp-privacy-request-form input {
1579      margin: 0;
1580  }
1581  
1582  /* =Media Queries
1583  -------------------------------------------------------------- */
1584  
1585  @media screen and (max-width: 782px) {
1586      /* Input Elements */
1587      textarea {
1588          -webkit-appearance: none;
1589      }
1590  
1591      input[type="text"],
1592      input[type="password"],
1593      input[type="date"],
1594      input[type="datetime"],
1595      input[type="datetime-local"],
1596      input[type="email"],
1597      input[type="month"],
1598      input[type="number"],
1599      input[type="search"],
1600      input[type="tel"],
1601      input[type="time"],
1602      input[type="url"],
1603      input[type="week"] {
1604          -webkit-appearance: none;
1605          padding: 0 12px;
1606          min-height: 40px;
1607      }
1608  
1609      ::-webkit-datetime-edit {
1610          line-height: 1.875; /* 30px */
1611      }
1612  
1613      input[type="checkbox"],
1614      .widefat th input[type="checkbox"],
1615      .widefat thead td input[type="checkbox"],
1616      .widefat tfoot td input[type="checkbox"] {
1617          -webkit-appearance: none;
1618      }
1619  
1620      .widefat th input[type="checkbox"],
1621      .widefat thead td input[type="checkbox"],
1622      .widefat tfoot td input[type="checkbox"] {
1623          margin-bottom: 8px;
1624      }
1625  
1626      input[type="checkbox"]:checked:before,
1627      .widefat th input[type="checkbox"]:before,
1628      .widefat thead td input[type="checkbox"]:before,
1629      .widefat tfoot td input[type="checkbox"]:before {
1630          width: 1.875rem;
1631          height: 1.875rem;
1632          margin: -0.1875rem -0.3125rem;
1633      }
1634  
1635      input[type="radio"],
1636      input[type="checkbox"] {
1637          height: 1.5625rem;
1638          width: 1.5625rem;
1639      }
1640  
1641      .wp-admin p input[type="checkbox"],
1642      .wp-admin p input[type="radio"] {
1643          margin-top: -0.1875rem;
1644      }
1645  
1646      input[type="radio"]:checked:before {
1647          vertical-align: middle;
1648          width: 0.5625rem;
1649          height: 0.5625rem;
1650          margin: 0.4375rem;
1651          line-height: 0.76190476;
1652      }
1653  
1654      .wp-core-ui select,
1655      .wp-admin .form-table select {
1656          min-height: 40px;
1657          font-size: 16px;
1658          line-height: 2.5; /* 40px for 16px font */
1659          padding: 0 24px 0 12px;
1660      }
1661  
1662      .wp-admin .button-cancel {
1663          margin-bottom: 0;
1664          padding: 2px 0;
1665          font-size: 14px;
1666          vertical-align: middle;
1667      }
1668  
1669      #adduser .form-field input,
1670      #createuser .form-field input {
1671          width: 100%;
1672      }
1673  
1674      .form-table {
1675          box-sizing: border-box;
1676      }
1677  
1678      .form-table th,
1679      .form-table td,
1680      .label-responsive {
1681          display: block;
1682          width: auto;
1683          vertical-align: middle;
1684      }
1685  
1686      .label-responsive {
1687          margin: 0.5em 0;
1688      }
1689  
1690      .export-filters li {
1691          margin-bottom: 0;
1692      }
1693  
1694      .form-table .color-palette .color-palette-shade,
1695      .form-table .color-palette td {
1696          display: table-cell;
1697          width: 15px;
1698          height: 30px;
1699          padding: 0;
1700      }
1701  
1702      .form-table .color-palette {
1703          margin-right: 10px;
1704      }
1705  
1706      textarea,
1707      input {
1708          font-size: 16px;
1709      }
1710  
1711      .form-table td input[type="text"],
1712      .form-table td input[type="email"],
1713      .form-table td input[type="password"],
1714      .form-table td select,
1715      .form-table td textarea,
1716      .form-table span.description,
1717      #profile-page .form-table textarea {
1718          width: 100%;
1719          display: block;
1720          max-width: none;
1721          box-sizing: border-box;
1722      }
1723  
1724      .form-table .form-required.form-invalid td:after {
1725          float: right;
1726          margin: -30px 3px 0 0;
1727      }
1728  
1729      input[type="text"].small-text,
1730      input[type="search"].small-text,
1731      input[type="password"].small-text,
1732      input[type="number"].small-text,
1733      input[type="number"].small-text,
1734      .form-table input[type="text"].small-text {
1735          width: auto;
1736          max-width: 4.375em; /* 70px, enough for 4 digits to fit comfortably */
1737          display: inline;
1738          padding: 3px 6px;
1739          margin: 0 3px;
1740      }
1741  
1742      .form-table .regular-text ~ input[type="text"].small-text {
1743          margin-top: 5px;
1744      }
1745  
1746      #pass-strength-result {
1747          width: 100%;
1748          box-sizing: border-box;
1749          padding: 8px;
1750      }
1751  
1752      .profile-php .wp-pwd .caps-warning {
1753          padding: 8px;
1754      }
1755  
1756      .password-input-wrapper {
1757          display: block;
1758      }
1759  
1760      p.search-box {
1761          float: none;
1762          width: 100%;
1763          margin-bottom: 20px;
1764          display: flex;
1765      }
1766  
1767      p.search-box input[name="s"] {
1768          width: 100%;
1769          float: none;
1770          margin-bottom: 10px;
1771          vertical-align: middle;
1772      }
1773      .js.plugins-php .search-box .wp-filter-search {
1774          width: 100%;
1775          margin-bottom: 0;
1776      }
1777  
1778      p.search-box input[type="submit"] {
1779          margin-bottom: 10px;
1780      }
1781  
1782      .form-table span.description {
1783          display: inline;
1784          padding: 4px 0 0;
1785          line-height: 1.4;
1786          font-size: 14px;
1787      }
1788  
1789      .form-table th {
1790          padding: 10px 0 0;
1791          border-bottom: 0;
1792      }
1793  
1794      .form-table td {
1795          margin-bottom: 0;
1796          padding: 4px 0 6px;
1797      }
1798  
1799      .form-table.permalink-structure td code {
1800          display: inline-block;
1801      }
1802  
1803      .form-table.permalink-structure .structure-selection {
1804          margin-top: 8px;
1805      }
1806  
1807      .form-table.permalink-structure .structure-selection .row > div {
1808          max-width: calc(100% - 36px);
1809          width: 100%;
1810      }
1811  
1812      .form-table.permalink-structure td input[type="text"] {
1813          margin-top: 4px;
1814      }
1815  
1816      .permalink-structure-has-blog-prefix {
1817          display: flex;
1818          align-items: center;
1819      }
1820  
1821      .form-table input.regular-text {
1822          width: 100%;
1823      }
1824  
1825      .form-table label {
1826          font-size: 14px;
1827      }
1828  
1829      .form-table td > label:first-child {
1830          display: inline-block;
1831          margin-top: 0.35em;
1832      }
1833  
1834      .background-position-control .button-group > label {
1835          font-size: 0;
1836      }
1837  
1838      .form-table fieldset label {
1839          display: block;
1840      }
1841  
1842      .form-field #domain {
1843          max-width: none;
1844      }
1845  
1846      /* New Password */
1847      .wp-pwd {
1848          position: relative;
1849      }
1850  
1851      /* Needs higher specificity than normal input type text and password. */
1852      #profile-page .form-table #pass1 {
1853          padding-right: 90px;
1854      }
1855  
1856      .wp-pwd button.button {
1857          background: transparent;
1858          border: 1px solid transparent;
1859          box-shadow: none;
1860          line-height: 2;
1861          margin: 0;
1862          padding: 5px 9px;
1863          position: absolute;
1864          right: 0;
1865          top: 0;
1866          width: 2.375rem;
1867          height: 2.375rem;
1868          min-width: 40px;
1869          min-height: 40px;
1870      }
1871  
1872      .wp-pwd button.wp-hide-pw {
1873          right: 2.5rem;
1874      }
1875  
1876      body.user-new-php .wp-pwd button.wp-hide-pw {
1877          right: 0;
1878      }
1879  
1880      .wp-pwd button.button:hover,
1881      .wp-pwd button.button:focus {
1882          background: transparent;
1883      }
1884  
1885      .wp-pwd button.button:active {
1886          background: transparent;
1887          box-shadow: none;
1888          transform: none;
1889      }
1890  
1891      .wp-pwd .button .text {
1892          display: none;
1893      }
1894  
1895      .wp-pwd [type="text"],
1896      .wp-pwd [type="password"] {
1897          line-height: 2;
1898          padding-right: 5rem;
1899      }
1900  
1901      body.user-new-php .wp-pwd [type="text"],
1902      body.user-new-php .wp-pwd [type="password"] {
1903          padding-right: 2.5rem;
1904      }
1905  
1906      .wp-cancel-pw .dashicons-no {
1907          display: inline-block;
1908      }
1909  
1910      .mailserver-pass-wrap .wp-pwd {
1911          display: block;
1912      }
1913  
1914      /* rtl:ignore */
1915      #mailserver_pass {
1916          padding-left: 10px;
1917      }
1918  
1919      .options-general-php input[type="text"].small-text {
1920          max-width: 6.25em;
1921          margin: 0;
1922      }
1923  
1924      /* Privacy Policy settings screen */
1925      .tools-privacy-policy-page form.wp-create-privacy-page {
1926          margin-bottom: 1em;
1927      }
1928  
1929      .tools-privacy-policy-page input#set-page,
1930      .tools-privacy-policy-page select {
1931          margin: 10px 0 0;
1932      }
1933  
1934      .tools-privacy-policy-page .wp-create-privacy-page span {
1935          display: block;
1936          margin-bottom: 1em;
1937      }
1938  
1939      .tools-privacy-policy-page .wp-create-privacy-page .button {
1940          margin-left: 0;
1941      }
1942  
1943      .wp-list-table.privacy_requests tr:not(.inline-edit-row):not(.no-items) td.column-primary:not(.check-column) {
1944          display: table-cell;
1945      }
1946  
1947      .wp-list-table.privacy_requests.widefat th input,
1948      .wp-list-table.privacy_requests.widefat thead td input {
1949          margin-left: 5px;
1950      }
1951  
1952      .wp-privacy-request-form-field input[type="text"] {
1953          width: 100%;
1954          margin-bottom: 10px;
1955          vertical-align: middle;
1956      }
1957  
1958      .regular-text {
1959          max-width: 100%;
1960      }
1961  }
1962  
1963  @media only screen and (max-width: 768px) {
1964      .form-field input[type="text"],
1965      .form-field input[type="email"],
1966      .form-field input[type="password"],
1967      .form-field select,
1968      .form-field textarea {
1969          width: 99%;
1970      }
1971  
1972      .form-wrap .form-field {
1973          padding: 0;
1974      }
1975  }
1976  
1977  @media only screen and (max-height: 480px), screen and (max-width: 450px) {
1978      /* Request Credentials / File Editor Warning */
1979      .request-filesystem-credentials-dialog .notification-dialog,
1980      .file-editor-warning .notification-dialog {
1981          width: 100%;
1982          height: 100%;
1983          max-height: 100%;
1984          position: fixed;
1985          top: 0;
1986          margin: 0;
1987          left: 0;
1988      }
1989  }
1990  
1991  /* Smartphone */
1992  @media screen and (max-width: 600px) {
1993      /* Color Picker Options */
1994      .color-option {
1995          width: 49%;
1996      }
1997  }
1998  
1999  @media only screen and (max-width: 320px) {
2000      .options-general-php .date-time-text.date-time-custom-text {
2001          min-width: 0;
2002          margin-right: 0.5em;
2003      }
2004  }
2005  
2006  @keyframes rotation {
2007      0% {
2008          transform: rotate(0deg);
2009      }
2010      100% {
2011          transform: rotate(359deg);
2012      }
2013  }