[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 0.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 0.5px var(--wp-admin-theme-color);
 740      /* Only visible in Windows High Contrast mode */
 741      outline: 2px solid transparent;
 742  }
 743  
 744  .pw-weak {
 745      display: none;
 746  }
 747  
 748  .indicator-hint {
 749      padding-top: 8px;
 750  }
 751  
 752  .wp-pwd [type="text"],
 753  .wp-pwd [type="password"] {
 754      margin-bottom: 0;
 755      /* Same height as the buttons */
 756      min-height: 40px;
 757  }
 758  
 759  /* Hide the Edge "reveal password" native button */
 760  .wp-pwd input::-ms-reveal {
 761      display: none;
 762  }
 763  
 764  #pass1-text,
 765  .show-password #pass1 {
 766      display: none;
 767  }
 768  
 769  #pass1-text::-ms-clear {
 770      display: none;
 771  }
 772  
 773  .show-password #pass1-text {
 774      display: inline-block;
 775  }
 776  
 777  /* Caps lock warning */
 778  .wp-pwd .caps-warning {
 779      display: none;
 780      position: relative;
 781      background: #fcf9e8;
 782      border: 1px solid #f0c33c;
 783      color: #1d2327;
 784      padding: 6px 10px;
 785      top: -8px;
 786  }
 787  
 788  .profile-php .wp-pwd .caps-warning {
 789      padding: 3px 5px;
 790      top: -4px;
 791      border-radius: 2px;
 792  }
 793  
 794  .wp-pwd .caps-icon {
 795      display: inline-flex;
 796      justify-content: center;
 797      width: 20px;
 798      height: 20px;
 799      margin-right: 5px;
 800      vertical-align: middle;
 801  }
 802  
 803  .wp-pwd .caps-warning-text {
 804      vertical-align: middle;
 805  }
 806  /* Caps lock warning */
 807  
 808  p.search-box {
 809      display: flex;
 810      flex-wrap: wrap;
 811      align-items: center;
 812      column-gap: 0.5rem;
 813      position: relative;
 814      float: right;
 815      margin: 11px 0;
 816  }
 817  
 818  p.search-box input[type="search"],
 819  p.search-box input[type="text"] {
 820      min-height: 32px;
 821      padding: 0 8px;
 822  }
 823  
 824  p.search-box .button {
 825      min-height: 32px;
 826      line-height: 2.30769231; /* 30px for 32px height with 13px font */
 827      padding: 0 12px;
 828  }
 829  
 830  .network-admin.themes-php p.search-box {
 831      clear: left;
 832  }
 833  
 834  .tablenav .search-plugins input[name="s"] {
 835      float: left;
 836      margin: 0 4px 0 0;
 837  }
 838  
 839  .tagsdiv .newtag {
 840      margin: 0;
 841  }
 842  
 843  .js.plugins-php .search-box .wp-filter-search {
 844      margin: 0;
 845      width: 280px;
 846  }
 847  
 848  input[type="text"].ui-autocomplete-loading,
 849  input[type="email"].ui-autocomplete-loading {
 850      background-image: url(../images/loading.gif);
 851      background-repeat: no-repeat;
 852      background-position: right 5px center;
 853      visibility: visible;
 854  }
 855  
 856  input.ui-autocomplete-input.open {
 857      border-bottom-color: transparent;
 858  }
 859  
 860  ul#add-to-blog-users {
 861      margin: 0 0 0 14px;
 862  }
 863  
 864  .ui-autocomplete {
 865      padding: 0;
 866      margin: 0;
 867      list-style: none;
 868      position: absolute;
 869      z-index: 10000;
 870      border: 1px solid #4f94d4;
 871      box-shadow: 0 1px 2px rgba(79, 148, 212, 0.8);
 872      background-color: #fff;
 873  }
 874  
 875  .ui-autocomplete li {
 876      margin-bottom: 0;
 877      padding: 4px 10px;
 878      white-space: nowrap;
 879      text-align: left;
 880      cursor: pointer;
 881  }
 882  
 883  /* Colors for the wplink toolbar autocomplete. */
 884  .ui-autocomplete .ui-state-focus {
 885      background-color: #dcdcde;
 886  }
 887  
 888  /* Colors for the tags autocomplete. */
 889  .wp-tags-autocomplete .ui-state-focus,
 890  .wp-tags-autocomplete [aria-selected="true"] {
 891      background-color: var(--wp-admin-theme-color);
 892      color: #fff;
 893      /* Only visible in Windows High Contrast mode */
 894      outline: 2px solid transparent;
 895  }
 896  
 897  /*------------------------------------------------------------------------------
 898    15.0 - Comments Screen
 899  ------------------------------------------------------------------------------*/
 900  
 901  .form-table {
 902      border-collapse: collapse;
 903      margin-top: 0.5em;
 904      width: 100%;
 905      clear: both;
 906  }
 907  
 908  .form-table,
 909  .form-table td,
 910  .form-table th,
 911  .form-table td p {
 912      font-size: 14px;
 913  }
 914  
 915  .form-table td {
 916      margin-bottom: 9px;
 917      padding: 15px 10px;
 918      line-height: 1.3;
 919      vertical-align: middle;
 920  }
 921  
 922  .form-table th,
 923  .form-wrap label {
 924      color: #1d2327;
 925      font-weight: 400;
 926      text-shadow: none;
 927      vertical-align: baseline;
 928  }
 929  
 930  .form-table th {
 931      vertical-align: top;
 932      text-align: left;
 933      padding: 20px 10px 20px 0;
 934      width: 200px;
 935      line-height: 1.3;
 936      font-weight: 600;
 937  }
 938  
 939  .form-table th.th-full, /* Not used by core. Back-compat for pre-4.8 */
 940  .form-table .td-full {
 941      width: auto;
 942      padding: 20px 10px 20px 0;
 943      font-weight: 400;
 944  }
 945  
 946  .form-table td p {
 947      margin-top: 4px;
 948      margin-bottom: 0;
 949  }
 950  
 951  .form-table .date-time-doc {
 952      margin-top: 1em;
 953  }
 954  
 955  .form-table p.timezone-info {
 956      margin: 1em 0;
 957      display: flex;
 958      flex-direction: column;
 959  }
 960  
 961  #local-time {
 962      margin-top: 0.5em;
 963  }
 964  
 965  .form-table td fieldset label {
 966      margin: 0.35em 0 0.5em !important;
 967      display: inline-block;
 968  }
 969  
 970  .form-table td fieldset p label {
 971      margin-top: 0 !important;
 972  }
 973  
 974  .form-table td fieldset label,
 975  .form-table td fieldset p,
 976  .form-table td fieldset li {
 977      line-height: 1.4;
 978  }
 979  
 980  .form-table .pre {
 981      padding: 8px;
 982      margin: 0;
 983  }
 984  
 985  table.form-table td .updated {
 986      font-size: 13px;
 987  }
 988  
 989  table.form-table td .updated p {
 990      font-size: 13px;
 991      margin: 0.3em 0;
 992  }
 993  
 994  /*------------------------------------------------------------------------------
 995    18.0 - Users
 996  ------------------------------------------------------------------------------*/
 997  
 998  #profile-page .form-table textarea {
 999      width: 500px;
1000      margin-bottom: 6px;
1001  }
1002  
1003  #profile-page .form-table #rich_editing {
1004      margin-right: 5px
1005  }
1006  
1007  #your-profile legend {
1008      font-size: 22px;
1009  }
1010  
1011  #display_name {
1012      width: 15em;
1013  }
1014  
1015  #adduser .form-field input,
1016  #createuser .form-field input {
1017      width: 25em;
1018  }
1019  
1020  .color-option {
1021      display: inline-block;
1022      width: 24%;
1023      padding: 5px 15px 15px;
1024      box-sizing: border-box;
1025      margin-bottom: 3px;
1026  }
1027  
1028  .color-option:hover,
1029  .color-option.selected {
1030      background: #dcdcde;
1031  }
1032  
1033  .color-palette {
1034      display: table;
1035      width: 100%;
1036      border-spacing: 0;
1037      border-collapse: collapse;
1038  }
1039  .color-palette .color-palette-shade,
1040  .color-palette td {
1041      display: table-cell;
1042      height: 20px;
1043      padding: 0;
1044      border: none;
1045  }
1046  
1047  .color-option {
1048      cursor: pointer;
1049  }
1050  
1051  .create-application-password .form-field {
1052      max-width: 25em;
1053  }
1054  
1055  .create-application-password label {
1056      font-weight: 600;
1057  }
1058  
1059  .create-application-password p.submit {
1060      margin-bottom: 0;
1061      padding-bottom: 0;
1062      display: block;
1063  }
1064  
1065  #application-passwords-section .notice {
1066      margin-top: 20px;
1067      margin-bottom: 0;
1068      word-wrap: break-word;
1069  }
1070  
1071  .application-password-display input.code {
1072      margin-bottom: 6px;
1073      width: 100%;
1074      max-width: 20em;
1075  }
1076  
1077  .auth-app-card.card {
1078      max-width: 768px;
1079  }
1080  
1081  .authorize-application-php .form-wrap p {
1082      display: block;
1083  }
1084  
1085  /*------------------------------------------------------------------------------
1086    19.0 - Tools
1087  ------------------------------------------------------------------------------*/
1088  
1089  .tool-box .title {
1090      margin: 8px 0;
1091      font-size: 18px;
1092      font-weight: 400;
1093      line-height: 24px;
1094  }
1095  
1096  .label-responsive {
1097      vertical-align: middle;
1098  }
1099  
1100  #export-filters p {
1101      margin: 0 0 1em;
1102  }
1103  
1104  #export-filters p.submit {
1105      margin: 7px 0 5px;
1106  }
1107  
1108  /* Card styles */
1109  
1110  .card {
1111      position: relative;
1112      margin-top: 20px;
1113      padding: 16px 24px;
1114      min-width: 255px;
1115      max-width: 520px;
1116      border: 1px solid rgb(0, 0, 0, 0.1);
1117      border-radius: 8px;
1118      background: #ffffff;
1119      box-sizing: border-box;
1120  }
1121  
1122  /* Press this styles */
1123  
1124  .pressthis h4 {
1125      margin: 2em 0 1em;
1126  }
1127  
1128  .pressthis textarea {
1129      width: 100%;
1130      font-size: 1em;
1131  }
1132  
1133  #pressthis-code-wrap {
1134      overflow: auto;
1135  }
1136  
1137  .pressthis-bookmarklet-wrapper {
1138      margin: 20px 0 8px;
1139      vertical-align: top;
1140      position: relative;
1141      z-index: 1;
1142  }
1143  
1144  .pressthis-bookmarklet,
1145  .pressthis-bookmarklet:hover,
1146  .pressthis-bookmarklet:focus,
1147  .pressthis-bookmarklet:active {
1148      display: inline-block;
1149      position: relative;
1150      cursor: move;
1151      color: #2c3338;
1152      background: #dcdcde;
1153      border-radius: 5px;
1154      border: 1px solid #c3c4c7;
1155      font-style: normal;
1156      line-height: 16px;
1157      font-size: 14px;
1158      text-decoration: none;
1159  }
1160  
1161  .pressthis-bookmarklet:active {
1162      outline: none;
1163  }
1164  
1165  .pressthis-bookmarklet:after {
1166      content: "";
1167      width: 70%;
1168      height: 55%;
1169      z-index: -1;
1170      position: absolute;
1171      right: 10px;
1172      bottom: 9px;
1173      background: transparent;
1174      transform: skew(20deg) rotate(6deg);
1175      box-shadow: 0 10px 8px rgba(0, 0, 0, 0.6);
1176  }
1177  
1178  .pressthis-bookmarklet:hover:after {
1179      transform: skew(20deg) rotate(9deg);
1180      box-shadow: 0 10px 8px rgba(0, 0, 0, 0.7);
1181  }
1182  
1183  .pressthis-bookmarklet span {
1184      display: inline-block;
1185      margin: 0;
1186      padding: 0 12px 8px 9px;
1187  }
1188  
1189  .pressthis-bookmarklet span:before {
1190      color: #787c82;
1191      font: normal 20px/1 dashicons;
1192      content: "\f157";
1193      content: "\f157" / '';
1194      position: relative;
1195      display: inline-block;
1196      top: 4px;
1197      margin-right: 4px;
1198  }
1199  
1200  .pressthis-js-toggle {
1201      margin-left: 10px;
1202      padding: 0;
1203      height: auto;
1204      vertical-align: top;
1205  }
1206  
1207  /* to override the button class being applied */
1208  .pressthis-js-toggle.button.button {
1209      margin-left: 10px;
1210      padding: 0;
1211      height: auto;
1212      vertical-align: top;
1213  }
1214  
1215  .pressthis-js-toggle .dashicons {
1216      margin: 5px 8px 6px 7px;
1217      color: #50575e;
1218  }
1219  
1220  /*------------------------------------------------------------------------------
1221    20.0 - Settings
1222  ------------------------------------------------------------------------------*/
1223  
1224  .timezone-info code {
1225      white-space: nowrap;
1226  }
1227  
1228  .defaultavatarpicker .avatar {
1229      margin: 2px 0;
1230      vertical-align: middle;
1231  }
1232  
1233  .options-general-php .date-time-text {
1234      display: inline-block;
1235      min-width: 10em;
1236  }
1237  
1238  .options-general-php input.small-text {
1239      width: 56px;
1240      margin: -2px 0;
1241      min-height: 32px;
1242  }
1243  
1244  .options-general-php .spinner {
1245      float: none;
1246      margin: -3px 3px 0;
1247  }
1248  
1249  .settings-php .language-install-spinner,
1250  .options-general-php .language-install-spinner,
1251  .user-edit-php .language-install-spinner,
1252  .profile-php .language-install-spinner {
1253      display: inline-block;
1254      float: none;
1255      margin: -3px 5px 0;
1256      vertical-align: middle;
1257  }
1258  
1259  .form-table.permalink-structure .available-structure-tags {
1260      margin-top: 8px;
1261  }
1262  
1263  .form-table.permalink-structure .available-structure-tags ul {
1264      display: flex;
1265      flex-wrap: wrap;
1266      margin: 8px 0 0;
1267  }
1268  
1269  .form-table.permalink-structure .available-structure-tags li {
1270      margin: 6px 5px 0 0;
1271  }
1272  
1273  .form-table.permalink-structure .available-structure-tags li:last-child {
1274      margin-right: 0;
1275  }
1276  
1277  .form-table.permalink-structure .structure-selection .row {
1278      margin-bottom: 16px;
1279  }
1280  
1281  .form-table.permalink-structure .structure-selection .row > div {
1282      max-width: calc(100% - 24px);
1283      display: inline-flex;
1284      flex-direction: column;
1285  }
1286  
1287  .form-table.permalink-structure .structure-selection .row label {
1288      font-weight: 600;
1289  }
1290  
1291  .form-table.permalink-structure .structure-selection .row p {
1292      margin-top: 0;
1293  }
1294  
1295  .permalink-structure-optional-description code {
1296      display: inline-block;
1297  }
1298  
1299  /*------------------------------------------------------------------------------
1300    21.0 - Network Admin
1301  ------------------------------------------------------------------------------*/
1302  
1303  .setup-php textarea {
1304      max-width: 100%;
1305  }
1306  
1307  .form-field #site-address {
1308      max-width: 25em;
1309  }
1310  
1311  .form-field #domain {
1312      max-width: 22em;
1313  }
1314  
1315  .form-field #site-title,
1316  .form-field #admin-email,
1317  .form-field #path,
1318  .form-field #blog_registered,
1319  .form-field #blog_last_updated {
1320      max-width: 25em;
1321  }
1322  
1323  .form-field #path {
1324      margin-bottom: 5px;
1325  }
1326  
1327  #search-users,
1328  #search-sites {
1329      max-width: 60%;
1330  }
1331  
1332  .configuration-rules-label {
1333      font-weight: 600;
1334      margin-bottom: 4px;
1335  }
1336  
1337  /*------------------------------------------------------------------------------
1338     Credentials check dialog for Install and Updates
1339  ------------------------------------------------------------------------------*/
1340  
1341  .request-filesystem-credentials-dialog {
1342      display: none;
1343      /* The customizer uses visibility: hidden on the body for full-overlays. */
1344      visibility: visible;
1345  }
1346  
1347  .request-filesystem-credentials-dialog .notification-dialog {
1348      top: 10%;
1349      max-height: 85%;
1350  }
1351  
1352  .request-filesystem-credentials-dialog-content {
1353      margin: 25px;
1354  }
1355  
1356  #request-filesystem-credentials-title {
1357      font-size: 1.3em;
1358      margin: 1em 0;
1359  }
1360  
1361  .request-filesystem-credentials-form legend {
1362      font-size: 1em;
1363      padding: 1.33em 0;
1364      font-weight: 600;
1365  }
1366  
1367  .request-filesystem-credentials-form input[type="text"],
1368  .request-filesystem-credentials-form input[type="password"] {
1369      display: block;
1370  }
1371  
1372  .request-filesystem-credentials-dialog input[type="text"],
1373  .request-filesystem-credentials-dialog input[type="password"] {
1374      width: 100%;
1375  }
1376  
1377  .request-filesystem-credentials-form .field-title {
1378      font-weight: 600;
1379  }
1380  
1381  .request-filesystem-credentials-dialog label[for="hostname"],
1382  .request-filesystem-credentials-dialog label[for="public_key"],
1383  .request-filesystem-credentials-dialog label[for="private_key"] {
1384      display: block;
1385      margin-bottom: 1em;
1386  }
1387  
1388  .request-filesystem-credentials-dialog .ftp-username,
1389  .request-filesystem-credentials-dialog .ftp-password {
1390      float: left;
1391      width: 48%;
1392  }
1393  
1394  .request-filesystem-credentials-dialog .ftp-password {
1395      margin-left: 4%;
1396  }
1397  
1398  .request-filesystem-credentials-dialog .request-filesystem-credentials-action-buttons {
1399      text-align: right;
1400  }
1401  
1402  .request-filesystem-credentials-dialog label[for="ftp"] {
1403      margin-right: 10px;
1404  }
1405  
1406  .request-filesystem-credentials-dialog #auth-keys-desc {
1407      margin-bottom: 0;
1408  }
1409  
1410  #request-filesystem-credentials-dialog .button:not(:last-child) {
1411      margin-right: 10px;
1412  }
1413  
1414  #request-filesystem-credentials-form .cancel-button {
1415      display: none;
1416  }
1417  
1418  #request-filesystem-credentials-dialog .cancel-button {
1419      display: inline;
1420  }
1421  
1422  .request-filesystem-credentials-dialog .ftp-username,
1423  .request-filesystem-credentials-dialog .ftp-password {
1424      float: none;
1425      width: auto;
1426  }
1427  
1428  .request-filesystem-credentials-dialog .ftp-username {
1429      margin-bottom: 1em;
1430  }
1431  
1432  .request-filesystem-credentials-dialog .ftp-password {
1433      margin: 0;
1434  }
1435  
1436  .request-filesystem-credentials-dialog .ftp-password em {
1437      color: #757575;
1438  }
1439  
1440  .request-filesystem-credentials-dialog label {
1441      display: block;
1442      line-height: 1.5;
1443      margin-bottom: 1em;
1444  }
1445  
1446  .request-filesystem-credentials-form legend {
1447      padding-bottom: 0;
1448  }
1449  
1450  .request-filesystem-credentials-form #ssh-keys legend {
1451      font-size: 1.3em;
1452  }
1453  
1454  .request-filesystem-credentials-form .notice {
1455      margin: 0 0 20px;
1456      clear: both;
1457  }
1458  
1459  /*------------------------------------------------------------------------------
1460     Privacy Policy settings screen
1461  ------------------------------------------------------------------------------*/
1462  .tools-privacy-policy-page form {
1463      margin-bottom: 1.3em;
1464  }
1465  
1466  .tools-privacy-policy-page input.button {
1467      margin: 0 1px 0 6px;
1468  }
1469  
1470  .tools-privacy-policy-page select {
1471      margin: 0 1px 0.5em 6px;
1472  }
1473  
1474  .tools-privacy-edit {
1475      margin: 1.5em 0;
1476  }
1477  
1478  .tools-privacy-policy-page span {
1479      line-height: 2;
1480  }
1481  
1482  .privacy_requests .column-email {
1483      width: 40%;
1484  }
1485  
1486  .privacy_requests .column-type {
1487      text-align: center;
1488  }
1489  
1490  .privacy_requests thead td:first-child,
1491  .privacy_requests tfoot td:first-child {
1492      border-left: 4px solid #fff;
1493  }
1494  
1495  .privacy_requests tbody th {
1496      border-left: 4px solid #fff;
1497      background: #fff;
1498      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
1499  }
1500  
1501  .privacy_requests .row-actions {
1502      color: #787c82;
1503  }
1504  
1505  .privacy_requests .row-actions.processing {
1506      position: static;
1507  }
1508  
1509  .privacy_requests tbody .has-request-results th {
1510      box-shadow: none;
1511  }
1512  
1513  .privacy_requests tbody .request-results th .notice {
1514      margin: 0 0 5px;
1515  }
1516  
1517  .privacy_requests tbody td {
1518      background: #fff;
1519      box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
1520  }
1521  
1522  .privacy_requests tbody .has-request-results td {
1523      box-shadow: none;
1524  }
1525  
1526  .privacy_requests .next_steps .button {
1527      word-wrap: break-word;
1528      white-space: normal;
1529  }
1530  
1531  .privacy_requests .status-request-confirmed th,
1532  .privacy_requests .status-request-confirmed td {
1533      background-color: #fff;
1534      border-left-color: #72aee6;
1535  }
1536  
1537  .privacy_requests .status-request-failed th,
1538  .privacy_requests .status-request-failed td {
1539      background-color: #f6f7f7;
1540      border-left-color: #d63638;
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 {
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      }
1802  
1803      p.search-box input[type="submit"] {
1804          margin-bottom: 10px;
1805      }
1806  
1807      .form-table span.description {
1808          display: inline;
1809          padding: 4px 0 0;
1810          line-height: 1.4;
1811          font-size: 14px;
1812      }
1813  
1814      .form-table th {
1815          padding: 10px 0 0;
1816          border-bottom: 0;
1817      }
1818  
1819      .form-table td {
1820          margin-bottom: 0;
1821          padding: 4px 0 6px;
1822      }
1823  
1824      .form-table.permalink-structure td code {
1825          display: inline-block;
1826      }
1827  
1828      .form-table.permalink-structure .structure-selection {
1829          margin-top: 8px;
1830      }
1831  
1832      .form-table.permalink-structure .structure-selection .row > div {
1833          max-width: calc(100% - 36px);
1834          width: 100%;
1835      }
1836  
1837      .form-table.permalink-structure td input[type="text"] {
1838          margin-top: 4px;
1839      }
1840  
1841      .permalink-structure-has-blog-prefix {
1842          display: flex;
1843          align-items: center;
1844      }
1845  
1846      .form-table input.regular-text {
1847          width: 100%;
1848      }
1849  
1850      .form-table label {
1851          font-size: 14px;
1852      }
1853  
1854      .form-table td > label:first-child {
1855          display: inline-block;
1856          margin-top: 0.35em;
1857      }
1858  
1859      .background-position-control .button-group > label {
1860          font-size: 0;
1861      }
1862  
1863      .form-table fieldset label {
1864          display: block;
1865      }
1866  
1867      .form-field #domain {
1868          max-width: none;
1869      }
1870  
1871      /* New Password */
1872      .wp-pwd {
1873          position: relative;
1874      }
1875  
1876      /* Needs higher specificity than normal input type text and password. */
1877      #profile-page .form-table #pass1 {
1878          padding-right: 90px;
1879      }
1880  
1881      .wp-pwd button.button {
1882          background: transparent;
1883          border: 1px solid transparent;
1884          box-shadow: none;
1885          line-height: 2;
1886          margin: 0;
1887          padding: 5px 9px;
1888          position: absolute;
1889          right: 0;
1890          top: 0;
1891          width: 2.375rem;
1892          height: 2.375rem;
1893          min-width: 40px;
1894          min-height: 40px;
1895      }
1896  
1897      .wp-pwd button.wp-hide-pw {
1898          right: 2.5rem;
1899      }
1900  
1901      body.user-new-php .wp-pwd button.wp-hide-pw {
1902          right: 0;
1903      }
1904  
1905      .wp-pwd button.button:hover,
1906      .wp-pwd button.button:focus {
1907          background: transparent;
1908      }
1909  
1910      .wp-pwd button.button:active {
1911          background: transparent;
1912          box-shadow: none;
1913          transform: none;
1914      }
1915  
1916      .wp-pwd .button .text {
1917          display: none;
1918      }
1919  
1920      .wp-pwd [type="text"],
1921      .wp-pwd [type="password"] {
1922          line-height: 2;
1923          padding-right: 5rem;
1924      }
1925  
1926      body.user-new-php .wp-pwd [type="text"],
1927      body.user-new-php .wp-pwd [type="password"] {
1928          padding-right: 2.5rem;
1929      }
1930  
1931      .wp-cancel-pw .dashicons-no {
1932          display: inline-block;
1933      }
1934  
1935      .mailserver-pass-wrap .wp-pwd {
1936          display: block;
1937      }
1938  
1939      /* rtl:ignore */
1940      #mailserver_pass {
1941          padding-left: 10px;
1942      }
1943  
1944      .options-general-php input[type="text"].small-text {
1945          max-width: 6.25em;
1946          margin: 0;
1947      }
1948  
1949      /* Privacy Policy settings screen */
1950      .tools-privacy-policy-page form.wp-create-privacy-page {
1951          margin-bottom: 1em;
1952      }
1953  
1954      .tools-privacy-policy-page input#set-page,
1955      .tools-privacy-policy-page select {
1956          margin: 10px 0 0;
1957      }
1958  
1959      .tools-privacy-policy-page .wp-create-privacy-page span {
1960          display: block;
1961          margin-bottom: 1em;
1962      }
1963  
1964      .tools-privacy-policy-page .wp-create-privacy-page .button {
1965          margin-left: 0;
1966      }
1967  
1968      .wp-list-table.privacy_requests tr:not(.inline-edit-row):not(.no-items) td.column-primary:not(.check-column) {
1969          display: table-cell;
1970      }
1971  
1972      .wp-list-table.privacy_requests.widefat th input,
1973      .wp-list-table.privacy_requests.widefat thead td input {
1974          margin-left: 5px;
1975      }
1976  
1977      .wp-privacy-request-form-field input[type="text"] {
1978          width: 100%;
1979          margin-bottom: 10px;
1980          vertical-align: middle;
1981      }
1982  
1983      .regular-text {
1984          max-width: 100%;
1985      }
1986  }
1987  
1988  @media only screen and (max-width: 768px) {
1989      .form-field input[type="text"],
1990      .form-field input[type="email"],
1991      .form-field input[type="password"],
1992      .form-field select,
1993      .form-field textarea {
1994          width: 99%;
1995      }
1996  
1997      .form-wrap .form-field {
1998          padding: 0;
1999      }
2000  }
2001  
2002  @media only screen and (max-height: 480px), screen and (max-width: 450px) {
2003      /* Request Credentials / File Editor Warning */
2004      .request-filesystem-credentials-dialog .notification-dialog,
2005      .file-editor-warning .notification-dialog {
2006          width: 100%;
2007          height: 100%;
2008          max-height: 100%;
2009          position: fixed;
2010          top: 0;
2011          margin: 0;
2012          left: 0;
2013      }
2014  }
2015  
2016  /* Smartphone */
2017  @media screen and (max-width: 600px) {
2018      /* Color Picker Options */
2019      .color-option {
2020          width: 49%;
2021      }
2022  }
2023  
2024  @media only screen and (max-width: 320px) {
2025      .options-general-php .date-time-text.date-time-custom-text {
2026          min-width: 0;
2027          margin-right: 0.5em;
2028      }
2029  }
2030  
2031  @keyframes rotation {
2032      0% {
2033          transform: rotate(0deg);
2034      }
2035      100% {
2036          transform: rotate(359deg);
2037      }
2038  }