[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  }
 526  
 527  /* @since 5.7.0 secondary bulk action controls require JS. */
 528  .no-js label[for="bulk-action-selector-bottom"],
 529  .no-js select#bulk-action-selector-bottom,
 530  .no-js input#doaction2,
 531  .no-js label[for="new_role2"],
 532  .no-js select#new_role2,
 533  .no-js input#changeit2 {
 534      display: none;
 535  }
 536  
 537  .wp-core-ui .tablenav input[type="text"],
 538  .wp-core-ui .tablenav input[type="password"],
 539  .wp-core-ui .tablenav input[type="date"],
 540  .wp-core-ui .tablenav input[type="datetime"],
 541  .wp-core-ui .tablenav input[type="datetime-local"],
 542  .wp-core-ui .tablenav input[type="email"],
 543  .wp-core-ui .tablenav input[type="month"],
 544  .wp-core-ui .tablenav input[type="number"],
 545  .wp-core-ui .tablenav input[type="search"],
 546  .wp-core-ui .tablenav input[type="tel"],
 547  .wp-core-ui .tablenav input[type="time"],
 548  .wp-core-ui .tablenav input[type="url"],
 549  .wp-core-ui .tablenav input[type="week"],
 550  .wp-core-ui .tablenav select {
 551      padding: 0 12px;
 552      /* inherits font size 14px */
 553      line-height: 2.14285714; /* 30px for 32px height with 14px font */
 554      min-height: 32px;
 555  }
 556  
 557  .wp-core-ui .tablenav select {
 558      float: left;
 559      margin-right: 6px;
 560      max-width: 12.5rem;
 561      padding: 0 24px 0 8px;
 562  }
 563  
 564  .wp-core-ui .tablenav .button {
 565      min-height: 32px;
 566      line-height: 2.30769231; /* 30px for 32px height with 13px font */
 567      padding: 0 12px;
 568  }
 569  
 570  #timezone_string option {
 571      margin-left: 1em;
 572  }
 573  
 574  .wp-core-ui .button.wp-hide-pw > .dashicons,
 575  .wp-core-ui .button.wp-cancel-pw > .dashicons {
 576      width: 1.25rem;
 577      height: 1.25rem;
 578      font-size: 20px;
 579      line-height: 1;
 580      vertical-align: middle;
 581  }
 582  
 583  .button.wp-hide-pw.user-new-password-toggle {
 584      display: inline-flex;
 585      align-items: center;
 586      column-gap: 4px;
 587  }
 588  
 589  .wp-cancel-pw .dashicons-no {
 590      display: none;
 591  }
 592  
 593  label,
 594  #your-profile label + a {
 595      vertical-align: middle;
 596  }
 597  
 598  fieldset label,
 599  #your-profile label + a {
 600      vertical-align: middle;
 601  }
 602  
 603  .options-media-php [for*="_size_"] {
 604      min-width: 10em;
 605      vertical-align: baseline;
 606  }
 607  
 608  .options-media-php .small-text[name*="_size_"] {
 609      margin: 0 0 1em;
 610  }
 611  
 612  .wp-generate-pw {
 613      margin-top: 1em;
 614      position: relative;
 615  }
 616  
 617  .wp-pwd button {
 618      height: min-content;
 619  }
 620  
 621  .wp-pwd {
 622      margin-top: 1em;
 623      position: relative;
 624  }
 625  
 626  .mailserver-pass-wrap .wp-pwd {
 627      display: inline-block;
 628      margin-top: 0;
 629  }
 630  
 631  /* rtl:ignore */
 632  #mailserver_pass {
 633      padding-right: 2.5rem;
 634  }
 635  
 636  /* rtl:ignore */
 637  .mailserver-pass-wrap .button.wp-hide-pw {
 638      background: transparent;
 639      border: 1px solid transparent;
 640      box-shadow: none;
 641      font-size: 14px;
 642      line-height: 2;
 643      width: 2.5rem;
 644      min-width: 40px;
 645      margin: 0;
 646      padding: 0 9px;
 647      position: absolute;
 648      right: 0;
 649      top: 0;
 650  }
 651  
 652  .mailserver-pass-wrap .button.wp-hide-pw:hover {
 653      background: transparent;
 654      border-color: transparent;
 655  }
 656  
 657  .mailserver-pass-wrap .button.wp-hide-pw:focus {
 658      background: transparent;
 659      border-color: var(--wp-admin-theme-color);
 660      border-radius: 2px;
 661      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
 662      /* Only visible in Windows High Contrast mode */
 663      outline: 2px solid transparent;
 664  }
 665  
 666  .mailserver-pass-wrap .button.wp-hide-pw:active {
 667      background: transparent;
 668      box-shadow: none;
 669      transform: none;
 670  }
 671  
 672  #misc-publishing-actions label {
 673      vertical-align: baseline;
 674  }
 675  
 676  #pass-strength-result {
 677      background-color: #f0f0f0;
 678      border: 1px solid #cccccc;
 679      border-radius: 2px;
 680      color: #1e1e1e;
 681      margin: -1px 1px 5px;
 682      padding: 3px 5px;
 683      text-align: center;
 684      width: 25em;
 685      box-sizing: border-box;
 686      opacity: 0;
 687  }
 688  
 689  #pass-strength-result.short {
 690      background-color: #ffabaf;
 691      border-color: #e65054;
 692      opacity: 1;
 693  }
 694  
 695  #pass-strength-result.bad {
 696      background-color: #facfd2;
 697      border-color: #f86368;
 698      opacity: 1;
 699  }
 700  
 701  #pass-strength-result.good {
 702      background-color: #f5e6ab;
 703      border-color: #f0c33c;
 704      opacity: 1;
 705  }
 706  
 707  #pass-strength-result.strong {
 708      background-color: #b8e6bf;
 709      border-color: #68de7c;
 710      opacity: 1;
 711  }
 712  
 713  .password-input-wrapper {
 714      display: inline-block;
 715  }
 716  
 717  .password-input-wrapper input {
 718      font-family: Consolas, Monaco, monospace;
 719  }
 720  
 721  #pass1.short, #pass1-text.short {
 722      border-color: #e65054;
 723  }
 724  
 725  #pass1.bad, #pass1-text.bad {
 726      border-color: #f86368;
 727  }
 728  
 729  #pass1.good, #pass1-text.good {
 730      border-color: #f0c33c;
 731  }
 732  
 733  #pass1.strong, #pass1-text.strong {
 734      border-color: #68de7c;
 735  }
 736  
 737  #pass1:focus,
 738  #pass1-text:focus {
 739      box-shadow: 0 0 0 var(--wp-admin-border-width-focus, 1.5px) var(--wp-admin-theme-color);
 740      border-color: var(--wp-admin-theme-color, #3858e9);
 741      /* Only visible in Windows High Contrast mode */
 742      outline: 2px solid transparent;
 743  }
 744  
 745  .pw-weak {
 746      display: none;
 747  }
 748  
 749  .indicator-hint {
 750      padding-top: 8px;
 751  }
 752  
 753  .wp-pwd [type="text"],
 754  .wp-pwd [type="password"] {
 755      margin-bottom: 0;
 756      /* Same height as the buttons */
 757      min-height: 40px;
 758  }
 759  
 760  /* Hide the Edge "reveal password" native button */
 761  .wp-pwd input::-ms-reveal {
 762      display: none;
 763  }
 764  
 765  #pass1-text,
 766  .show-password #pass1 {
 767      display: none;
 768  }
 769  
 770  #pass1-text::-ms-clear {
 771      display: none;
 772  }
 773  
 774  .show-password #pass1-text {
 775      display: inline-block;
 776  }
 777  
 778  /* Caps lock warning */
 779  .wp-pwd .caps-warning {
 780      display: none;
 781      position: relative;
 782      background: #fcf9e8;
 783      border: 1px solid #f0c33c;
 784      color: #1d2327;
 785      padding: 6px 10px;
 786      top: -8px;
 787  }
 788  
 789  .profile-php .wp-pwd .caps-warning {
 790      padding: 3px 5px;
 791      top: -4px;
 792      border-radius: 2px;
 793  }
 794  
 795  .wp-pwd .caps-icon {
 796      display: inline-flex;
 797      justify-content: center;
 798      width: 20px;
 799      height: 20px;
 800      margin-right: 5px;
 801      vertical-align: middle;
 802  }
 803  
 804  .wp-pwd .caps-warning-text {
 805      vertical-align: middle;
 806  }
 807  /* Caps lock warning */
 808  
 809  p.search-box {
 810      display: flex;
 811      flex-wrap: wrap;
 812      align-items: center;
 813      column-gap: 0.5rem;
 814      position: relative;
 815      float: right;
 816      margin: 11px 0;
 817  }
 818  
 819  p.search-box input[type="search"],
 820  p.search-box input[type="text"] {
 821      min-height: 32px;
 822      padding: 0 8px;
 823  }
 824  
 825  p.search-box .button {
 826      min-height: 32px;
 827      line-height: 2.30769231; /* 30px for 32px height with 13px font */
 828      padding: 0 12px;
 829  }
 830  
 831  .network-admin.themes-php p.search-box {
 832      clear: left;
 833  }
 834  
 835  .tablenav .search-plugins input[name="s"] {
 836      float: left;
 837      margin: 0 4px 0 0;
 838  }
 839  
 840  .tagsdiv .newtag {
 841      margin: 0;
 842  }
 843  
 844  .js.plugins-php .search-box .wp-filter-search {
 845      margin: 0;
 846      width: 280px;
 847  }
 848  
 849  input[type="text"].ui-autocomplete-loading,
 850  input[type="email"].ui-autocomplete-loading {
 851      background-image: url(../images/loading.gif);
 852      background-repeat: no-repeat;
 853      background-position: right 5px center;
 854      visibility: visible;
 855  }
 856  
 857  input.ui-autocomplete-input.open {
 858      border-bottom-color: transparent;
 859  }
 860  
 861  ul#add-to-blog-users {
 862      margin: 0 0 0 14px;
 863  }
 864  
 865  .ui-autocomplete {
 866      padding: 0;
 867      margin: 0;
 868      list-style: none;
 869      position: absolute;
 870      z-index: 10000;
 871      border: 1px solid #4f94d4;
 872      box-shadow: 0 1px 2px rgba(79, 148, 212, 0.8);
 873      background-color: #fff;
 874  }
 875  
 876  .ui-autocomplete li {
 877      margin-bottom: 0;
 878      padding: 4px 10px;
 879      white-space: nowrap;
 880      text-align: left;
 881      cursor: pointer;
 882  }
 883  
 884  /* Colors for the wplink toolbar autocomplete. */
 885  .ui-autocomplete .ui-state-focus {
 886      background-color: #dcdcde;
 887  }
 888  
 889  /* Colors for the tags autocomplete. */
 890  .wp-tags-autocomplete .ui-state-focus,
 891  .wp-tags-autocomplete [aria-selected="true"] {
 892      background-color: var(--wp-admin-theme-color);
 893      color: #fff;
 894      /* Only visible in Windows High Contrast mode */
 895      outline: 2px solid transparent;
 896  }
 897  
 898  /*------------------------------------------------------------------------------
 899    15.0 - Comments Screen
 900  ------------------------------------------------------------------------------*/
 901  
 902  .form-table {
 903      border-collapse: collapse;
 904      margin-top: 0.5em;
 905      width: 100%;
 906      clear: both;
 907  }
 908  
 909  .form-table,
 910  .form-table td,
 911  .form-table th,
 912  .form-table td p {
 913      font-size: 14px;
 914  }
 915  
 916  .form-table td {
 917      margin-bottom: 9px;
 918      padding: 15px 10px;
 919      line-height: 1.3;
 920      vertical-align: middle;
 921  }
 922  
 923  .form-table th,
 924  .form-wrap label {
 925      color: #1d2327;
 926      font-weight: 400;
 927      text-shadow: none;
 928      vertical-align: baseline;
 929  }
 930  
 931  .form-table th {
 932      vertical-align: top;
 933      text-align: left;
 934      padding: 20px 10px 20px 0;
 935      width: 200px;
 936      line-height: 1.3;
 937      font-weight: 600;
 938  }
 939  
 940  .form-table th.th-full, /* Not used by core. Back-compat for pre-4.8 */
 941  .form-table .td-full {
 942      width: auto;
 943      padding: 20px 10px 20px 0;
 944      font-weight: 400;
 945  }
 946  
 947  .form-table td p {
 948      margin-top: 4px;
 949      margin-bottom: 0;
 950  }
 951  
 952  .form-table .date-time-doc {
 953      margin-top: 1em;
 954  }
 955  
 956  .form-table p.timezone-info {
 957      margin: 1em 0;
 958      display: flex;
 959      flex-direction: column;
 960  }
 961  
 962  #local-time {
 963      margin-top: 0.5em;
 964  }
 965  
 966  .form-table td fieldset label {
 967      margin: 0.35em 0 0.5em !important;
 968      display: inline-block;
 969  }
 970  
 971  .form-table td fieldset p label {
 972      margin-top: 0 !important;
 973  }
 974  
 975  .form-table td fieldset label,
 976  .form-table td fieldset p,
 977  .form-table td fieldset li {
 978      line-height: 1.4;
 979  }
 980  
 981  .form-table .pre {
 982      padding: 8px;
 983      margin: 0;
 984  }
 985  
 986  table.form-table td .updated {
 987      font-size: 13px;
 988  }
 989  
 990  table.form-table td .updated p {
 991      font-size: 13px;
 992      margin: 0.3em 0;
 993  }
 994  
 995  /*------------------------------------------------------------------------------
 996    18.0 - Users
 997  ------------------------------------------------------------------------------*/
 998  
 999  #profile-page .form-table textarea {
1000      width: 500px;
1001      margin-bottom: 6px;
1002  }
1003  
1004  #profile-page .form-table #rich_editing {
1005      margin-right: 5px
1006  }
1007  
1008  #your-profile legend {
1009      font-size: 22px;
1010  }
1011  
1012  #display_name {
1013      width: 15em;
1014  }
1015  
1016  #adduser .form-field input,
1017  #createuser .form-field input {
1018      width: 25em;
1019  }
1020  
1021  .color-option {
1022      display: inline-block;
1023      width: 24%;
1024      padding: 5px 15px 15px;
1025      box-sizing: border-box;
1026      margin-bottom: 3px;
1027  }
1028  
1029  .color-option:hover,
1030  .color-option.selected {
1031      background: #dcdcde;
1032  }
1033  
1034  .color-palette {
1035      display: table;
1036      width: 100%;
1037      border-spacing: 0;
1038      border-collapse: collapse;
1039  }
1040  .color-palette .color-palette-shade,
1041  .color-palette td {
1042      display: table-cell;
1043      height: 20px;
1044      padding: 0;
1045      border: none;
1046  }
1047  
1048  .color-option {
1049      cursor: pointer;
1050  }
1051  
1052  .create-application-password .form-field {
1053      max-width: 25em;
1054  }
1055  
1056  .create-application-password label {
1057      font-weight: 600;
1058  }
1059  
1060  .create-application-password p.submit {
1061      margin-bottom: 0;
1062      padding-bottom: 0;
1063      display: block;
1064  }
1065  
1066  #application-passwords-section .notice {
1067      margin-top: 20px;
1068      margin-bottom: 0;
1069      word-wrap: break-word;
1070  }
1071  
1072  .application-password-display input.code {
1073      margin-bottom: 6px;
1074      width: 100%;
1075      max-width: 20em;
1076  }
1077  
1078  .auth-app-card.card {
1079      max-width: 768px;
1080  }
1081  
1082  .authorize-application-php .form-wrap p {
1083      display: block;
1084  }
1085  
1086  /*------------------------------------------------------------------------------
1087    19.0 - Tools
1088  ------------------------------------------------------------------------------*/
1089  
1090  .tool-box .title {
1091      margin: 8px 0;
1092      font-size: 18px;
1093      font-weight: 400;
1094      line-height: 24px;
1095  }
1096  
1097  .label-responsive {
1098      vertical-align: middle;
1099  }
1100  
1101  #export-filters p {
1102      margin: 0 0 1em;
1103  }
1104  
1105  #export-filters p.submit {
1106      margin: 7px 0 5px;
1107  }
1108  
1109  /* Card styles */
1110  
1111  .card {
1112      position: relative;
1113      margin-top: 20px;
1114      padding: 16px 24px;
1115      min-width: 255px;
1116      max-width: 520px;
1117      border: 1px solid rgb(0, 0, 0, 0.1);
1118      border-radius: 8px;
1119      background: #ffffff;
1120      box-sizing: border-box;
1121  }
1122  
1123  /* Press this styles */
1124  
1125  .pressthis h4 {
1126      margin: 2em 0 1em;
1127  }
1128  
1129  .pressthis textarea {
1130      width: 100%;
1131      font-size: 1em;
1132  }
1133  
1134  #pressthis-code-wrap {
1135      overflow: auto;
1136  }
1137  
1138  .pressthis-bookmarklet-wrapper {
1139      margin: 20px 0 8px;
1140      vertical-align: top;
1141      position: relative;
1142      z-index: 1;
1143  }
1144  
1145  .pressthis-bookmarklet,
1146  .pressthis-bookmarklet:hover,
1147  .pressthis-bookmarklet:focus,
1148  .pressthis-bookmarklet:active {
1149      display: inline-block;
1150      position: relative;
1151      cursor: move;
1152      color: #2c3338;
1153      background: #dcdcde;
1154      border-radius: 5px;
1155      border: 1px solid #c3c4c7;
1156      font-style: normal;
1157      line-height: 16px;
1158      font-size: 14px;
1159      text-decoration: none;
1160  }
1161  
1162  .pressthis-bookmarklet:active {
1163      outline: none;
1164  }
1165  
1166  .pressthis-bookmarklet:after {
1167      content: "";
1168      width: 70%;
1169      height: 55%;
1170      z-index: -1;
1171      position: absolute;
1172      right: 10px;
1173      bottom: 9px;
1174      background: transparent;
1175      transform: skew(20deg) rotate(6deg);
1176      box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
1177  }
1178  
1179  .pressthis-bookmarklet:hover:after {
1180      transform: skew(20deg) rotate(9deg);
1181      box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
1182  }
1183  
1184  .pressthis-bookmarklet span {
1185      display: inline-block;
1186      margin: 0;
1187      padding: 0 12px 8px 9px;
1188  }
1189  
1190  .pressthis-bookmarklet span:before {
1191      color: #787c82;
1192      font: normal 20px/1 dashicons;
1193      content: "\f157";
1194      content: "\f157" / '';
1195      position: relative;
1196      display: inline-block;
1197      top: 4px;
1198      margin-right: 4px;
1199  }
1200  
1201  .pressthis-js-toggle {
1202      margin-left: 10px;
1203      padding: 0;
1204      height: auto;
1205      vertical-align: top;
1206  }
1207  
1208  /* to override the button class being applied */
1209  .pressthis-js-toggle.button.button {
1210      margin-left: 10px;
1211      padding: 0;
1212      height: auto;
1213      vertical-align: top;
1214  }
1215  
1216  .pressthis-js-toggle .dashicons {
1217      margin: 5px 8px 6px 7px;
1218      color: #50575e;
1219  }
1220  
1221  /*------------------------------------------------------------------------------
1222    20.0 - Settings
1223  ------------------------------------------------------------------------------*/
1224  
1225  .timezone-info code {
1226      white-space: nowrap;
1227  }
1228  
1229  .defaultavatarpicker .avatar {
1230      margin: 2px 0;
1231      vertical-align: middle;
1232  }
1233  
1234  .options-general-php .date-time-text {
1235      display: inline-block;
1236      min-width: 10em;
1237  }
1238  
1239  .options-general-php input.small-text {
1240      width: 56px;
1241      margin: -2px 0;
1242      min-height: 32px;
1243  }
1244  
1245  .options-general-php .spinner {
1246      float: none;
1247      margin: -3px 3px 0;
1248  }
1249  
1250  .settings-php .language-install-spinner,
1251  .options-general-php .language-install-spinner,
1252  .user-edit-php .language-install-spinner,
1253  .profile-php .language-install-spinner {
1254      display: inline-block;
1255      float: none;
1256      margin: -3px 5px 0;
1257      vertical-align: middle;
1258  }
1259  
1260  .form-table.permalink-structure .available-structure-tags {
1261      margin-top: 8px;
1262  }
1263  
1264  .form-table.permalink-structure .available-structure-tags ul {
1265      display: flex;
1266      flex-wrap: wrap;
1267      margin: 8px 0 0;
1268  }
1269  
1270  .form-table.permalink-structure .available-structure-tags li {
1271      margin: 6px 5px 0 0;
1272  }
1273  
1274  .form-table.permalink-structure .available-structure-tags li:last-child {
1275      margin-right: 0;
1276  }
1277  
1278  .form-table.permalink-structure .structure-selection .row {
1279      margin-bottom: 16px;
1280  }
1281  
1282  .form-table.permalink-structure .structure-selection .row > div {
1283      max-width: calc(100% - 24px);
1284      display: inline-flex;
1285      flex-direction: column;
1286  }
1287  
1288  .form-table.permalink-structure .structure-selection .row label {
1289      font-weight: 600;
1290  }
1291  
1292  .form-table.permalink-structure .structure-selection .row p {
1293      margin-top: 0;
1294  }
1295  
1296  .permalink-structure-optional-description code {
1297      display: inline-block;
1298  }
1299  
1300  /*------------------------------------------------------------------------------
1301    21.0 - Network Admin
1302  ------------------------------------------------------------------------------*/
1303  
1304  .setup-php textarea {
1305      max-width: 100%;
1306  }
1307  
1308  .form-field #site-address {
1309      max-width: 25em;
1310  }
1311  
1312  .form-field #domain {
1313      max-width: 22em;
1314  }
1315  
1316  .form-field #site-title,
1317  .form-field #admin-email,
1318  .form-field #path,
1319  .form-field #blog_registered,
1320  .form-field #blog_last_updated {
1321      max-width: 25em;
1322  }
1323  
1324  .form-field #path {
1325      margin-bottom: 5px;
1326  }
1327  
1328  #search-users,
1329  #search-sites {
1330      max-width: 60%;
1331  }
1332  
1333  .configuration-rules-label {
1334      font-weight: 600;
1335      margin-bottom: 4px;
1336  }
1337  
1338  /*------------------------------------------------------------------------------
1339     Credentials check dialog for Install and Updates
1340  ------------------------------------------------------------------------------*/
1341  
1342  .request-filesystem-credentials-dialog {
1343      display: none;
1344      /* The customizer uses visibility: hidden on the body for full-overlays. */
1345      visibility: visible;
1346  }
1347  
1348  .request-filesystem-credentials-dialog .notification-dialog {
1349      top: 10%;
1350      max-height: 85%;
1351  }
1352  
1353  .request-filesystem-credentials-dialog-content {
1354      margin: 25px;
1355  }
1356  
1357  #request-filesystem-credentials-title {
1358      font-size: 1.3em;
1359      margin: 1em 0;
1360  }
1361  
1362  .request-filesystem-credentials-form legend {
1363      font-size: 1em;
1364      padding: 1.33em 0;
1365      font-weight: 600;
1366  }
1367  
1368  .request-filesystem-credentials-form input[type="text"],
1369  .request-filesystem-credentials-form input[type="password"] {
1370      display: block;
1371  }
1372  
1373  .request-filesystem-credentials-dialog input[type="text"],
1374  .request-filesystem-credentials-dialog input[type="password"] {
1375      width: 100%;
1376  }
1377  
1378  .request-filesystem-credentials-form .field-title {
1379      font-weight: 600;
1380  }
1381  
1382  .request-filesystem-credentials-dialog label[for="hostname"],
1383  .request-filesystem-credentials-dialog label[for="public_key"],
1384  .request-filesystem-credentials-dialog label[for="private_key"] {
1385      display: block;
1386      margin-bottom: 1em;
1387  }
1388  
1389  .request-filesystem-credentials-dialog .ftp-username,
1390  .request-filesystem-credentials-dialog .ftp-password {
1391      float: left;
1392      width: 48%;
1393  }
1394  
1395  .request-filesystem-credentials-dialog .ftp-password {
1396      margin-left: 4%;
1397  }
1398  
1399  .request-filesystem-credentials-dialog .request-filesystem-credentials-action-buttons {
1400      text-align: right;
1401  }
1402  
1403  .request-filesystem-credentials-dialog label[for="ftp"] {
1404      margin-right: 10px;
1405  }
1406  
1407  .request-filesystem-credentials-dialog #auth-keys-desc {
1408      margin-bottom: 0;
1409  }
1410  
1411  #request-filesystem-credentials-dialog .button:not(:last-child) {
1412      margin-right: 10px;
1413  }
1414  
1415  #request-filesystem-credentials-form .cancel-button {
1416      display: none;
1417  }
1418  
1419  #request-filesystem-credentials-dialog .cancel-button {
1420      display: inline;
1421  }
1422  
1423  .request-filesystem-credentials-dialog .ftp-username,
1424  .request-filesystem-credentials-dialog .ftp-password {
1425      float: none;
1426      width: auto;
1427  }
1428  
1429  .request-filesystem-credentials-dialog .ftp-username {
1430      margin-bottom: 1em;
1431  }
1432  
1433  .request-filesystem-credentials-dialog .ftp-password {
1434      margin: 0;
1435  }
1436  
1437  .request-filesystem-credentials-dialog .ftp-password em {
1438      color: #757575;
1439  }
1440  
1441  .request-filesystem-credentials-dialog label {
1442      display: block;
1443      line-height: 1.5;
1444      margin-bottom: 1em;
1445  }
1446  
1447  .request-filesystem-credentials-form legend {
1448      padding-bottom: 0;
1449  }
1450  
1451  .request-filesystem-credentials-form #ssh-keys legend {
1452      font-size: 1.3em;
1453  }
1454  
1455  .request-filesystem-credentials-form .notice {
1456      margin: 0 0 20px;
1457      clear: both;
1458  }
1459  
1460  /*------------------------------------------------------------------------------
1461     Privacy Policy settings screen
1462  ------------------------------------------------------------------------------*/
1463  .tools-privacy-policy-page form {
1464      margin-bottom: 1.3em;
1465  }
1466  
1467  .tools-privacy-policy-page input.button {
1468      margin: 0 1px 0 6px;
1469  }
1470  
1471  .tools-privacy-policy-page select {
1472      margin: 0 1px 0.5em 6px;
1473  }
1474  
1475  .tools-privacy-edit {
1476      margin: 1.5em 0;
1477  }
1478  
1479  .tools-privacy-policy-page span {
1480      line-height: 2;
1481  }
1482  
1483  .privacy_requests .column-email {
1484      width: 40%;
1485  }
1486  
1487  .privacy_requests .column-type {
1488      text-align: center;
1489  }
1490  
1491  .privacy_requests thead td:first-child,
1492  .privacy_requests tfoot td:first-child {
1493      border-left: 4px solid #fff;
1494  }
1495  
1496  .privacy_requests tbody td.check-column {
1497      border-left: 4px solid #fff;
1498      background: #fff;
1499      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
1500  }
1501  
1502  .privacy_requests .row-actions {
1503      color: #787c82;
1504  }
1505  
1506  .privacy_requests .row-actions.processing {
1507      position: static;
1508  }
1509  
1510  .privacy_requests tbody .has-request-results th {
1511      box-shadow: none;
1512  }
1513  
1514  .privacy_requests tbody .request-results th .notice {
1515      margin: 0 0 5px;
1516  }
1517  
1518  .privacy_requests tbody td:not(.check-column),
1519  .privacy_requests tbody th {
1520      background: #fff;
1521      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
1522  }
1523  
1524  .privacy_requests tbody .has-request-results td {
1525      box-shadow: none;
1526  }
1527  
1528  .privacy_requests .next_steps .button {
1529      word-wrap: break-word;
1530      white-space: normal;
1531  }
1532  
1533  .privacy_requests tr.status-request-confirmed td.check-column {
1534      background-color: #fff;
1535      border-left-color: #3858e9;
1536  }
1537  
1538  .privacy_requests tr.status-request-failed td.check-column {
1539      background-color: #f6f7f7;
1540      border-left-color: #cc1818;
1541  }
1542  
1543  .privacy_requests .export_personal_data_failed a {
1544      vertical-align: baseline;
1545  }
1546  
1547  .status-label {
1548      font-weight: 600;
1549  }
1550  
1551  .status-label.status-request-pending {
1552      font-weight: 400;
1553      font-style: italic;
1554      color: #646970;
1555  }
1556  
1557  .status-label.status-request-failed {
1558      color: #d63638;
1559      font-weight: 600;
1560  }
1561  
1562  .privacy_requests .status-date {
1563      display: block;
1564      font-weight: 400;
1565  }
1566  
1567  .wp-privacy-request-form {
1568      clear: both;
1569  }
1570  
1571  .wp-privacy-request-form-field {
1572      margin: 1.5em 0;
1573  }
1574  
1575  .wp-privacy-request-form input[type="text"] {
1576      margin: 0;
1577  }
1578  
1579  /* =Media Queries
1580  -------------------------------------------------------------- */
1581  
1582  @media screen and (max-width: 782px) {
1583      /* Input Elements */
1584      textarea {
1585          -webkit-appearance: none;
1586      }
1587  
1588      input[type="text"],
1589      input[type="password"],
1590      input[type="date"],
1591      input[type="datetime"],
1592      input[type="datetime-local"],
1593      input[type="email"],
1594      input[type="month"],
1595      input[type="number"],
1596      input[type="search"],
1597      input[type="tel"],
1598      input[type="time"],
1599      input[type="url"],
1600      input[type="week"] {
1601          -webkit-appearance: none;
1602          padding: 0 12px;
1603          min-height: 40px;
1604      }
1605  
1606      ::-webkit-datetime-edit {
1607          line-height: 1.875; /* 30px */
1608      }
1609  
1610      input[type="checkbox"],
1611      .widefat th input[type="checkbox"],
1612      .widefat thead td input[type="checkbox"],
1613      .widefat tfoot td input[type="checkbox"] {
1614          -webkit-appearance: none;
1615      }
1616  
1617      .widefat th input[type="checkbox"],
1618      .widefat thead td input[type="checkbox"],
1619      .widefat tfoot td input[type="checkbox"] {
1620          margin-bottom: 8px;
1621      }
1622  
1623      input[type="checkbox"]:checked:before,
1624      .widefat th input[type="checkbox"]:before,
1625      .widefat thead td input[type="checkbox"]:before,
1626      .widefat tfoot td input[type="checkbox"]:before {
1627          width: 1.875rem;
1628          height: 1.875rem;
1629          margin: -0.1875rem -0.3125rem;
1630      }
1631  
1632      input[type="radio"],
1633      input[type="checkbox"] {
1634          height: 1.5625rem;
1635          width: 1.5625rem;
1636      }
1637  
1638      .wp-admin p input[type="checkbox"],
1639      .wp-admin p input[type="radio"] {
1640          margin-top: -0.1875rem;
1641      }
1642  
1643      input[type="radio"]:checked:before {
1644          vertical-align: middle;
1645          width: 0.5625rem;
1646          height: 0.5625rem;
1647          margin: 0.4375rem;
1648          line-height: 0.76190476;
1649      }
1650  
1651      .wp-core-ui select,
1652      .wp-admin .form-table select {
1653          min-height: 40px;
1654          font-size: 16px;
1655          line-height: 2.5; /* 40px for 16px font */
1656          padding: 0 24px 0 12px;
1657      }
1658  
1659      .wp-admin .button-cancel {
1660          margin-bottom: 0;
1661          padding: 2px 0;
1662          font-size: 14px;
1663          vertical-align: middle;
1664      }
1665  
1666      #adduser .form-field input,
1667      #createuser .form-field input {
1668          width: 100%;
1669      }
1670  
1671      .form-table {
1672          box-sizing: border-box;
1673      }
1674  
1675      .form-table th,
1676      .form-table td,
1677      .label-responsive {
1678          display: block;
1679          width: auto;
1680          vertical-align: middle;
1681      }
1682  
1683      .label-responsive {
1684          margin: 0.5em 0;
1685      }
1686  
1687      .export-filters li {
1688          margin-bottom: 0;
1689      }
1690  
1691      .form-table .color-palette .color-palette-shade,
1692      .form-table .color-palette td {
1693          display: table-cell;
1694          width: 15px;
1695          height: 30px;
1696          padding: 0;
1697      }
1698  
1699      .form-table .color-palette {
1700          margin-right: 10px;
1701      }
1702  
1703      textarea,
1704      input {
1705          font-size: 16px;
1706      }
1707  
1708      .form-table td input[type="text"],
1709      .form-table td input[type="email"],
1710      .form-table td input[type="password"],
1711      .form-table td select,
1712      .form-table td textarea,
1713      .form-table span.description,
1714      #profile-page .form-table textarea {
1715          width: 100%;
1716          display: block;
1717          max-width: none;
1718          box-sizing: border-box;
1719      }
1720  
1721      .form-table .form-required.form-invalid td:after {
1722          float: right;
1723          margin: -30px 3px 0 0;
1724      }
1725  
1726      input[type="text"].small-text,
1727      input[type="search"].small-text,
1728      input[type="password"].small-text,
1729      input[type="number"].small-text,
1730      input[type="number"].small-text,
1731      .form-table input[type="text"].small-text {
1732          width: auto;
1733          max-width: 4.375em; /* 70px, enough for 4 digits to fit comfortably */
1734          display: inline;
1735          padding: 3px 6px;
1736          margin: 0 3px;
1737      }
1738  
1739      .form-table .regular-text ~ input[type="text"].small-text {
1740          margin-top: 5px;
1741      }
1742  
1743      #pass-strength-result {
1744          width: 100%;
1745          box-sizing: border-box;
1746          padding: 8px;
1747      }
1748  
1749      .profile-php .wp-pwd .caps-warning {
1750          padding: 8px;
1751      }
1752  
1753      .password-input-wrapper {
1754          display: block;
1755      }
1756  
1757      .wp-core-ui .tablenav input[type="text"],
1758      .wp-core-ui .tablenav input[type="password"],
1759      .wp-core-ui .tablenav input[type="date"],
1760      .wp-core-ui .tablenav input[type="datetime"],
1761      .wp-core-ui .tablenav input[type="datetime-local"],
1762      .wp-core-ui .tablenav input[type="email"],
1763      .wp-core-ui .tablenav input[type="month"],
1764      .wp-core-ui .tablenav input[type="number"],
1765      .wp-core-ui .tablenav input[type="search"],
1766      .wp-core-ui .tablenav input[type="tel"],
1767      .wp-core-ui .tablenav input[type="time"],
1768      .wp-core-ui .tablenav input[type="url"],
1769      .wp-core-ui .tablenav input[type="week"],
1770      .wp-core-ui .tablenav select {
1771          min-height: 40px;
1772      }
1773  
1774      .wp-core-ui .tablenav .button {
1775          min-height: 40px;
1776          line-height: 2.71428571;
1777          padding: 0 14px;
1778      }
1779  
1780      p.search-box {
1781          float: none;
1782          width: 100%;
1783          margin-bottom: 20px;
1784          display: flex;
1785      }
1786  
1787      p.search-box input[name="s"] {
1788          width: 100%;
1789          float: none;
1790          margin-bottom: 10px;
1791          vertical-align: middle;
1792      }
1793      .js.plugins-php .search-box .wp-filter-search {
1794          width: 100%;
1795          margin-bottom: 0;
1796      }
1797  
1798      p.search-box input[type="search"],
1799      p.search-box input[type="text"] {
1800          min-height: 40px;
1801          padding: 0 12px;
1802      }
1803  
1804      p.search-box input[type="submit"].button {
1805          margin-bottom: 10px;
1806      }
1807  
1808      .form-table span.description {
1809          display: inline;
1810          padding: 4px 0 0;
1811          line-height: 1.4;
1812          font-size: 14px;
1813      }
1814  
1815      .form-table th {
1816          padding: 10px 0 0;
1817          border-bottom: 0;
1818      }
1819  
1820      .form-table td {
1821          margin-bottom: 0;
1822          padding: 4px 0 6px;
1823      }
1824  
1825      .form-table.permalink-structure td code {
1826          display: inline-block;
1827      }
1828  
1829      .form-table.permalink-structure .structure-selection {
1830          margin-top: 8px;
1831      }
1832  
1833      .form-table.permalink-structure .structure-selection .row > div {
1834          max-width: calc(100% - 36px);
1835          width: 100%;
1836      }
1837  
1838      .form-table.permalink-structure td input[type="text"] {
1839          margin-top: 4px;
1840      }
1841  
1842      .permalink-structure-has-blog-prefix {
1843          display: flex;
1844          align-items: center;
1845      }
1846  
1847      .form-table input.regular-text {
1848          width: 100%;
1849      }
1850  
1851      .form-table label {
1852          font-size: 14px;
1853      }
1854  
1855      .form-table td > label:first-child {
1856          display: inline-block;
1857          margin-top: 0.35em;
1858      }
1859  
1860      .background-position-control .button-group > label {
1861          font-size: 0;
1862      }
1863  
1864      .form-table fieldset label {
1865          display: block;
1866      }
1867  
1868      .form-field #domain {
1869          max-width: none;
1870      }
1871  
1872      /* New Password */
1873      .wp-pwd {
1874          position: relative;
1875      }
1876  
1877      /* Needs higher specificity than normal input type text and password. */
1878      #profile-page .form-table #pass1 {
1879          padding-right: 90px;
1880      }
1881  
1882      .wp-pwd button.button {
1883          background: transparent;
1884          border: 1px solid transparent;
1885          box-shadow: none;
1886          line-height: 2;
1887          margin: 0;
1888          padding: 5px 9px;
1889          position: absolute;
1890          right: 0;
1891          top: 0;
1892          width: 2.375rem;
1893          height: 2.375rem;
1894          min-width: 40px;
1895          min-height: 40px;
1896      }
1897  
1898      .wp-pwd button.wp-hide-pw {
1899          right: 2.5rem;
1900      }
1901  
1902      body.user-new-php .wp-pwd button.wp-hide-pw {
1903          right: 0;
1904      }
1905  
1906      .wp-pwd button.button:hover,
1907      .wp-pwd button.button:focus {
1908          background: transparent;
1909      }
1910  
1911      .wp-pwd button.button:active {
1912          background: transparent;
1913          box-shadow: none;
1914          transform: none;
1915      }
1916  
1917      .wp-pwd .button .text {
1918          display: none;
1919      }
1920  
1921      .wp-pwd [type="text"],
1922      .wp-pwd [type="password"] {
1923          line-height: 2;
1924          padding-right: 5rem;
1925      }
1926  
1927      body.user-new-php .wp-pwd [type="text"],
1928      body.user-new-php .wp-pwd [type="password"] {
1929          padding-right: 2.5rem;
1930      }
1931  
1932      .wp-cancel-pw .dashicons-no {
1933          display: inline-block;
1934      }
1935  
1936      .mailserver-pass-wrap .wp-pwd {
1937          display: block;
1938      }
1939  
1940      /* rtl:ignore */
1941      #mailserver_pass {
1942          padding-left: 10px;
1943      }
1944  
1945      .options-general-php input[type="text"].small-text {
1946          max-width: 6.25em;
1947          margin: 0;
1948          min-height: 40px;
1949      }
1950  
1951      /* Privacy Policy settings screen */
1952      .tools-privacy-policy-page form.wp-create-privacy-page {
1953          margin-bottom: 1em;
1954      }
1955  
1956      .tools-privacy-policy-page input#set-page,
1957      .tools-privacy-policy-page select {
1958          margin: 10px 0 0;
1959      }
1960  
1961      .tools-privacy-policy-page .wp-create-privacy-page span {
1962          display: block;
1963          margin-bottom: 1em;
1964      }
1965  
1966      .tools-privacy-policy-page .wp-create-privacy-page .button {
1967          margin-left: 0;
1968      }
1969  
1970      .wp-list-table.privacy_requests tr:not(.inline-edit-row):not(.no-items) td.column-primary:not(.check-column),
1971      .wp-list-table.privacy_requests tr:not(.inline-edit-row):not(.no-items) th.column-primary:not(.check-column) {
1972          display: table-cell;
1973      }
1974  
1975      .wp-privacy-request-form-field input[type="text"] {
1976          width: 100%;
1977          margin-bottom: 10px;
1978          vertical-align: middle;
1979      }
1980  
1981      .regular-text {
1982          max-width: 100%;
1983      }
1984  }
1985  
1986  @media only screen and (max-width: 768px) {
1987      .form-field input[type="text"],
1988      .form-field input[type="email"],
1989      .form-field input[type="password"],
1990      .form-field select,
1991      .form-field textarea {
1992          width: 99%;
1993      }
1994  
1995      .form-wrap .form-field {
1996          padding: 0;
1997      }
1998  }
1999  
2000  @media only screen and (max-height: 480px), screen and (max-width: 450px) {
2001      /* Request Credentials / File Editor Warning */
2002      .request-filesystem-credentials-dialog .notification-dialog,
2003      .file-editor-warning .notification-dialog {
2004          width: 100%;
2005          height: 100%;
2006          max-height: 100%;
2007          position: fixed;
2008          top: 0;
2009          margin: 0;
2010          left: 0;
2011      }
2012  }
2013  
2014  /* Smartphone */
2015  @media screen and (max-width: 600px) {
2016      /* Color Picker Options */
2017      .color-option {
2018          width: 49%;
2019      }
2020  }
2021  
2022  @media only screen and (max-width: 320px) {
2023      .options-general-php .date-time-text.date-time-custom-text {
2024          min-width: 0;
2025          margin-right: 0.5em;
2026      }
2027  }
2028  
2029  @keyframes rotation {
2030      0% {
2031          transform: rotate(0deg);
2032      }
2033      100% {
2034          transform: rotate(359deg);
2035      }
2036  }