default-stylesheet/default.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* bidi */

:has-dir-attr {
  unicode-bidi: isolate;
}
:dir-attr-rtl {
  direction: rtl;
}
:dir-attr-ltr {
  direction: ltr;
}

:dir-attr-like-auto:dir(ltr) { direction: ltr; }
:dir-attr-like-auto:dir(rtl) { direction: rtl; }

/* To ensure http://www.w3.org/TR/REC-html40/struct/dirlang.html#style-bidi:
 *
 * "When a block element that does not have a dir attribute is transformed to
 * the style of an inline element by a style sheet, the resulting presentation
 * should be equivalent, in terms of bidirectional formatting, to the
 * formatting obtained by explicitly adding a dir attribute (assigned the
 * inherited value) to the transformed element."
 *
 * and the rules in http://dev.w3.org/html5/spec/rendering.html#rendering
 */

address,
article,
aside,
blockquote,
body,
caption,
center,
col,
colgroup,
dd,
dir,
div,
dl,
dt,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
hr,
html,
legend,
li,
listing,
main,
marquee,
menu,
nav,
noframes,
ol,
p,
plaintext,
pre,
section,
summary,
table,
tbody,
td,
tfoot,
th,
thead,
tr,
ul,
xmp {
  unicode-bidi: isolate;
}

bdi, output {
  unicode-bidi: isolate;
}
/* We need the "bdo:has-dir-attr" bit because "bdo" has lower
   specificity than the ":has-dir-attr" selector above. */
bdo, bdo:has-dir-attr {
  unicode-bidi: isolate-override;
}
textarea:dir-attr-like-auto,
pre:dir-attr-like-auto {
    unicode-bidi: plaintext;
}

/* blocks */

article,
aside,
details,
div,
dt,
figcaption,
footer,
form,
header,
hgroup,
html,
main,
nav,
section,
summary {
  display: block;
}

body {
  display: block;
  margin: 8px;
}

p, dl, multicol {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

dd {
  display: block;
  margin-inline-start: 40px;
}

blockquote, figure {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 40px;
  margin-inline-end: 40px;
}

address {
  display: block;
  font-style: italic;
}

center {
  display: block;
  text-align: center;
}

blockquote[type=cite] {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0;
  margin-inline-end: 0;
  padding-inline-start: 1em;
  border-inline-start: solid;
  border-color: blue;
  border-width: thin;
}

span[_moz_quote=true] {
  color: blue;
}

pre[_moz_quote=true] {
  color: blue;
}

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin-block-start: .67em;
  margin-block-end: .67em;
}

h2,
:matches(article, aside, nav, section)
h1 {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  margin-block-start: .83em;
  margin-block-end: .83em;
}

h3,
:matches(article, aside, nav, section)
:matches(article, aside, nav, section)
h1 {
  display: block;
  font-size: 1.17em;
  font-weight: bold;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

h4,
:matches(article, aside, nav, section)
:matches(article, aside, nav, section)
:matches(article, aside, nav, section)
h1 {
  display: block;
  font-size: 1.00em;
  font-weight: bold;
  margin-block-start: 1.33em;
  margin-block-end: 1.33em;
}

h5,
:matches(article, aside, nav, section)
:matches(article, aside, nav, section)
:matches(article, aside, nav, section)
:matches(article, aside, nav, section)
h1 {
  display: block;
  font-size: 0.83em;
  font-weight: bold;
  margin-block-start: 1.67em;
  margin-block-end: 1.67em;
}

h6,
:matches(article, aside, nav, section)
:matches(article, aside, nav, section)
:matches(article, aside, nav, section)
:matches(article, aside, nav, section)
:matches(article, aside, nav, section)
h1 {
  display: block;
  font-size: 0.67em;
  font-weight: bold;
  margin-block-start: 2.33em;
  margin-block-end: 2.33em;
}

listing {
  display: block;
  font-family: fixed;
  font-size: medium;
  white-space: pre;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

xmp, pre, plaintext {
  display: block;
  font-family: fixed;
  white-space: pre;
  margin-block-start: 1em;
  margin-block-end: 1em;
}

/* tables */

table {
  display: table;
  border-spacing: 2px;
  border-collapse: separate;
  /* XXXldb do we want this if we're border-collapse:collapse ? */
  box-sizing: border-box;
  text-indent: 0;
}

table[align="left"] {
  float: left;
}

table[align="right"] {
  float: right;
  text-align: start;
}


/* border collapse rules */

  /* Set hidden if we have 'frame' or 'rules' attribute.
     Set it on all sides when we do so there's more consistency
     in what authors should expect */

  /* Put this first so 'border' and 'frame' rules can override it. */
table[rules] { 
  border-width: thin;
  border-style: hidden;
}

  /* 'border' before 'frame' so 'frame' overrides
      A border with a given value should, of course, pass that value
      as the border-width in pixels -> attr mapping */

  /* :table-border-nonzero is like [border]:not([border="0"]) except it
     also checks for other zero-like values according to HTML attribute
     parsing rules */
table:table-border-nonzero { 
  border-width: thin;
  border-style: outset;
}

table[frame] {
  border: thin hidden;
}

/* specificity must beat table:table-border-nonzero rule above */
table[frame="void"]   { border-style: hidden; }
table[frame="above"]  { border-style: outset hidden hidden hidden; }
table[frame="below"]  { border-style: hidden hidden outset hidden; }
table[frame="lhs"]    { border-style: hidden hidden hidden outset; }
table[frame="rhs"]    { border-style: hidden outset hidden hidden; }
table[frame="hsides"] { border-style: outset hidden; }
table[frame="vsides"] { border-style: hidden outset; }
table[frame="box"],
table[frame="border"] { border-style: outset; }

 
/* Internal Table Borders */

  /* 'border' cell borders first */

table:table-border-nonzero > * > tr > td,
table:table-border-nonzero > * > tr > th,
table:table-border-nonzero > * > td,
table:table-border-nonzero > * > th,
table:table-border-nonzero > td,
table:table-border-nonzero > th
{
  border-width: thin;
  border-style: inset;
}

/* collapse only if rules are really specified */
table[rules]:not([rules="none"]):not([rules=""]) {
  border-collapse: collapse;
}

/* only specified rules override 'border' settings  
  (increased specificity to achieve this) */
table[rules]:not([rules=""])> tr > td,
table[rules]:not([rules=""])> * > tr > td,
table[rules]:not([rules=""])> tr > th,
table[rules]:not([rules=""])> * > tr > th,
table[rules]:not([rules=""])> td,
table[rules]:not([rules=""])> th
{
  border-width: thin;
  border-style: none;
}


table[rules][rules="none"]  > tr > td,
table[rules][rules="none"] > * > tr > td,
table[rules][rules="none"] > tr > th,
table[rules][rules="none"] > * > tr > th,
table[rules][rules="none"] > td,
table[rules][rules="none"] > th
{
  border-width: thin;
  border-style: none;
}

table[rules][rules="all"] > tr > td,
table[rules][rules="all"] > * > tr > td,
table[rules][rules="all"] > tr > th,
table[rules][rules="all"] > * > tr > th,
table[rules][rules="all"] > td,
table[rules][rules="all"] > th 
{
  border-width: thin;
  border-style: solid;
}

table[rules][rules="rows"] > tr,
table[rules][rules="rows"] > * > tr {
  border-block-start-width: thin;
  border-block-end-width: thin;
  border-block-start-style: solid;
  border-block-end-style: solid;
}


table[rules][rules="cols"] > tr > td,
table[rules][rules="cols"] > * > tr > td,
table[rules][rules="cols"] > tr > th,
table[rules][rules="cols"] > * > tr > th {
  border-inline-start-width: thin;
  border-inline-end-width: thin;
  border-inline-start-style: solid;
  border-inline-end-style: solid;
}

table[rules][rules="groups"] > colgroup {
  border-inline-start-width: thin;
  border-inline-end-width: thin;
  border-inline-start-style: solid;
  border-inline-end-style: solid;
}
table[rules][rules="groups"] > tfoot,
table[rules][rules="groups"] > thead,
table[rules][rules="groups"] > tbody {
  border-block-start-width: thin;
  border-block-end-width: thin;
  border-block-start-style: solid;
  border-block-start-style: solid;
}
  
  
/* caption inherits from table not table-outer */  
caption {
  display: table-caption;
  text-align: center;
}

table[align="center"] > caption {
  margin-inline-start: auto;
  margin-inline-end: auto;
}

table[align="center"] > caption[align="left"]:dir(ltr) {
  margin-inline-end: 0;
}
table[align="center"] > caption[align="left"]:dir(rtl) {
  margin-inline-start: 0;
}

table[align="center"] > caption[align="right"]:dir(ltr) {
  margin-inline-start: 0;
}
table[align="center"] > caption[align="right"]:dir(rtl) {
  margin-inline-end: 0;
}

tr {
  display: table-row;
  vertical-align: inherit;
}

col {
  display: table-column;
}

colgroup {
  display: table-column-group;
}

tbody {
  display: table-row-group;
  vertical-align: middle;
}

thead {
  display: table-header-group;
  vertical-align: middle;
}

tfoot {
  display: table-footer-group;
  vertical-align: middle;
}

/* for XHTML tables without tbody */
table > tr {
  vertical-align: middle;
}

td { 
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit; 
  padding: 1px;
}

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  padding: 1px;
}

tr > form:is-html, tbody > form:is-html,
thead > form:is-html, tfoot > form:is-html,
table > form:is-html {
  /* Important: don't show these forms in HTML */
  display: none !important;
}

table[bordercolor] > tbody,
table[bordercolor] > thead,
table[bordercolor] > tfoot,
table[bordercolor] > col,
table[bordercolor] > colgroup,
table[bordercolor] > tr,
table[bordercolor] > * > tr,
table[bordercolor]  > tr > td,
table[bordercolor] > * > tr > td,
table[bordercolor]  > tr > th,
table[bordercolor] > * > tr > th {
  border-color: inherit;
}

/* inlines */

q:before {
  content: open-quote;
}

q:after {
  content: close-quote;
}

b, strong {
  font-weight: bolder;
}

i, cite, em, var, dfn {
  font-style: italic;
}

tt, code, kbd, samp {
  font-family: fixed;
}

u, ins {
  text-decoration: underline;
}

s, strike, del {
  text-decoration: line-through;
}

big {
  font-size: larger;
}

small {
  font-size: smaller;
}

sub {
  vertical-align: sub;
  font-size: smaller;
  line-height: normal;
}

sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

nobr {
  white-space: nowrap;
}

mark {
  background: yellow;
  color: black;
}

/* titles */
abbr[title], acronym[title] {
  text-decoration: dotted underline;
}

/* lists */

ul, menu, dir {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 40px;
}

menu[type="context"] {
  display: none !important;
}

ol {
  display: block;
  list-style-type: decimal;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 40px;
}

li {
  display: list-item;
  text-align: match-parent;
}

/* nested lists have no top/bottom margins */
:matches(ul, ol, dir, menu, dl) ul,
:matches(ul, ol, dir, menu, dl) ol,
:matches(ul, ol, dir, menu, dl) dir,
:matches(ul, ol, dir, menu, dl) menu,
:matches(ul, ol, dir, menu, dl) dl {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* 2 deep unordered lists use a circle */
:matches(ol, ul, menu, dir) ul,
:matches(ol, ul, menu, dir) menu,
:matches(ol, ul, menu, dir) dir {
  list-style-type: circle;
}

/* 3 deep (or more) unordered lists use a square */
:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) ul,
:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) menu,
:matches(ol, ul, menu, dir) :matches(ol, ul, menu, dir) dir {
  list-style-type: square;
}


/* leafs */

/* <hr> noshade and color attributes are handled completely by
 * the nsHTMLHRElement attribute mapping code
 */
hr {
  display: block;
  border: 1px inset;
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
  margin-inline-start: auto;
  margin-inline-end: auto;
  color: gray;
  float-edge: margin-box;
  box-sizing: content-box;
}

hr[size="1"] {
  border-style: solid none none none;
}

img:broken::before, input:broken::before,
img:user-disabled::before, input:user-disabled::before,
img:loading::before, input:loading::before {
  content: alt-content !important;
  unicode-bidi: isolate;
}

object:matches(:broken,:user-disabled) > *|* {
  /*
    Inherit in the object's alignment so that if we aren't aligned explicitly
    we'll end up in the right place vertically.  See bug 36997.  Note that this
    is not !important because we _might_ be aligned explicitly.
  */
  vertical-align: inherit;
}

img:suppressed, input:suppressed, object:suppressed,
embed:suppressed {
  /*
    Set visibility too in case the page changes display.  Note that we _may_
    want to just set visibility and not display, in general, if we find that
    display:none breaks too many layouts.  And if we decide we really do want
    people to be able to right-click blocked images, etc, we need to set
    neither one, and hack the painting code.... :(
   */
  display: none !important;
  visibility: hidden !important;
}

img[usemap], object[usemap] {
  color: blue;
}

frameset {
  display: block ! important;
  overflow: hidden-unscrollable;
  position: static ! important;
  float: none ! important;
  border: none ! important;
}

link { 
  display: none;
}

frame {
  border-radius: 0 ! important;
}

iframe {
  border: 2px inset;
}

noframes {
  display: none;
}

spacer {
  position: static ! important;
  float: none ! important;
}

canvas {
  user-select: none;
}

/* focusable content: anything w/ tabindex >=0 is focusable, but we
   skip drawing a focus outline on a few things that handle it
   themselves. */
:focusring:not(input):not(button):not(select):not(textarea):not(iframe):not(frame):not(body):not(html) {
  /* Don't specify the outline-color, we should always use initial value. */
   outline: 1px dotted;
}

/* hidden elements */
base, basefont, datalist, head, meta, script, style, title,
noembed, param, template {
   display: none;
}

area {
  /* Don't give it frames other than its imageframe */
  display: none ! important;
}

iframe:fullscreen {
  /* iframes in full-screen mode don't show a border. */
  border: none !important;
  padding: 0 !important;
}

/* media elements */
video > xul|videocontrols, audio > xul|videocontrols {
  display: flex;
  box-orient: vertical;
}

video:not([controls]) > xul|videocontrols,
audio:not([controls]) > xul|videocontrols {
  visibility: hidden;
  binding: none;
}

video {
  object-fit: contain;
}

video > img:native-anonymous {
  /* Video poster images should render with the video element's "object-fit" &
     "object-position" properties */
  object-fit: inherit !important;
  object-position: inherit !important;
}

audio:not([controls]) {
  display: none;
}

audio[controls] {
  /* This ensures that intrinsic sizing can reliably shrinkwrap our
      controls (which are also always horizontal) and produce a
      reasonable intrinsic size from them. */
  writing-mode: horizontal-tb !important;
}

*|*::html-canvas-content {
  display: block !important;
  /* we want to be an absolute and fixed container */
  transform: translate(0) !important;
}

video > .caption-box {
  width: 100%;
  height: 100%;
  position: relative;
}

/* ::cue default settings */
::cue {
  color: rgba(255, 255, 255, 1);
  white-space: pre-line;
  background-color: rgba(0, 0, 0, 0.8);
  font: var(--cue-font-size) sans-serif;
}

/* datetime elements */

input[type="time"] > xul|datetimebox {
  display: flex;
}

input[type="date"] > xul|datetimebox {
  display: flex;
}

/* details & summary */
details > summary:first-of-type,
details > summary:native-anonymous {
  display: list-item;
  list-style: disclosure-closed inside;
}

details[open] > summary:first-of-type,
details[open] > summary:native-anonymous {
  list-style-type: disclosure-open;
}

details > summary:first-of-type > *|* {
  /* Cancel "list-style-position: inside" inherited from summary. */
  list-style-position: initial;
}

/* <dialog> element styles */

dialog {
  position: absolute;
  offset-inline-start: 0;
  offset-inline-end: 0;
  color: black;
  margin: auto;
  border-width: initial;
  border-style: solid;
  border-color: initial;
  border-image: initial;
  padding: 1em;
  background: white;
  width: fit-content;
}

dialog:not([open]) {
  display: none;
}

/* emulation of non-standard HTML <marquee> tag */
marquee {
  inline-size: available;
  display: inline-block;
  vertical-align: text-bottom;
  text-align: start;
}

marquee[direction="up"], marquee[direction="down"] {
  block-size: 200px;
}

/* PRINT ONLY rules follow */
@media print {

  marquee { binding: none; }

}

/* Ruby */

ruby {
  display: ruby;
}
rb {
  display: ruby-base;
  white-space: nowrap;
}
rp {
  display: none;
}
rt {
  display: ruby-text;
}
rtc {
  display: ruby-text-container;
}
rtc, rt {
  white-space: nowrap;
  font-size: 50%;
  moz-min-font-size-ratio: 50%;
  line-height: 1;
}
rtc, rt {
  text-emphasis: none;
}
rtc:lang(zh), rt:lang(zh) {
  ruby-align: center;
}
rtc:lang(zh-TW), rt:lang(zh-TW) {
  font-size: 30%; /* bopomofo */
  moz-min-font-size-ratio: 30%;
}
rtc > rt {
  font-size: inherit;
}
ruby, rb, rt, rtc {
  unicode-bidi: isolate;
}




/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  control-character-visibility: visible;
}

/* Make text go with the rules of dir=auto, but allow it to be overriden if 'Switch Text Direction' is triggered */
html:not([dir]) pre { /* Not a UA sheet, so doesn't use :has-dir-attr */
  unicode-bidi: plaintext;
}


/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@namespace parsererror url(http://www.mozilla.org/newlayout/xml/parsererror.xml);
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* magic -- some of these rules are important to keep pages from overriding
            them
*/

/* Tables */

*|*::table {
  display: table;
  box-sizing: border-box; /* XXX do we really want this? */
}

*|*::inline-table {
  display: inline-table;
  box-sizing: border-box; /* XXX do we really want this? */
}

*|*::table-wrapper {
  /* The inherited properties here need to be safe to have on both the
   * table and the table wrapper, generally because code ignores them
   * for the table. */
  display: inherit; /* table or inline-table */
  top-layer: inherit;
  margin: inherit;
  float: inherit;
  clear: inherit;
  position: inherit;
  top: inherit;
  right: inherit;
  bottom: inherit;
  left: inherit;
  z-index: inherit;
  page-break-before: inherit;
  page-break-after: inherit;
  page-break-inside: inherit;
  vertical-align: inherit; /* needed for inline-table */
  line-height: inherit; /* needed for vertical-align on inline-table */
  /* Bug 722777 */
  transform: inherit;
  transform-origin: inherit;
  /* Bug 724750 */
  backface-visibility: inherit;
  clip: inherit;
  /* When the table wrapper is a Flex/Grid item we need these: */
  align-self: inherit;
  justify-self: inherit;
  grid-column-start: inherit;
  grid-column-end: inherit;
  grid-row-start: inherit;
  grid-row-end: inherit;
  order: inherit;
}

*|*::table-row {
  display: table-row;
}

/* The ::table-column pseudo-element is for extra columns at the end
   of a table. */
*|*::table-column {
  display: table-column;
  /* Make sure anonymous columns don't interfere with hit testing.  Basically,
   * they should pretend as much as possible to not exist (since in the spec
   * they do not exist).
   *
   * Please make sure to not reintroduce
   * https://bugzilla.mozilla.org/show_bug.cgi?id=1403293 if you change this
   * bit!
   */
  visibility: hidden;
}

*|*::table-column-group {
  display: table-column-group;
  /* Make sure anonymous colgroups don't interfere with hit testing.  Basically,
   * they should pretend as much as possible to not exist (since in the spec
   * they do not exist).
   *
   * Please make sure to not reintroduce
   * https://bugzilla.mozilla.org/show_bug.cgi?id=1403293 if you change this
   * bit!
   */
  visibility: hidden;
}

*|*::table-row-group {
  display: table-row-group;
}

*|*::table-cell {
  display: table-cell;
  white-space: inherit;
}

/* Ruby */
*|*::ruby {
  display: ruby;
  unicode-bidi: isolate;
}
*|*::ruby-base {
  display: ruby-base;
  unicode-bidi: isolate;
}
*|*::ruby-text {
  display: ruby-text;
  unicode-bidi: isolate;
}
*|*::ruby-base-container {
  display: ruby-base-container;
  unicode-bidi: isolate;
}
*|*::ruby-text-container {
  display: ruby-text-container;
  unicode-bidi: isolate;
}

/* Lists */

*|*::list-bullet, *|*::list-number {
  display: inline;
  vertical-align: baseline;
  font-variant-numeric: tabular-nums;
  /* Prevent the element from being selected when clicking on the marker. */
  user-select: none;
}

/* SVG documents don't always load this file but they do have links.
 * If you change the link rules, consider carefully whether to make
 * the same changes to svg.css.
 */

/* Links */

*|*:any-link {
  cursor: pointer;
  text-decoration: underline;
}

*|*:visited {
  color: rgb(85, 26, 139);
  color: -moz-visitedhyperlinktext;
  color: -webkit-link;
}

*|*:link {
  color: rgb(0, 0, 238);
  color: -moz-hyperlinktext;
  color: -webkit-link;
}

*|*:any-link:focusring {
  /* Don't specify the outline-color, we should always use initial value. */
  outline: 1px dotted;
}

/* Miscellaneous */

*|*::cell-content {
  display: block;
  unicode-bidi: inherit;
  text-overflow: inherit;
  overflow-clip-box: inherit;
}

*|*::block-inside-inline-wrapper {
  display: block;
  /* we currently inherit from the inline that is split */
  position: inherit; /* static or relative or sticky */
  outline: inherit;
  outline-offset: inherit;
  clip-path: inherit;
  filter: inherit;
  mask: inherit;
  opacity: inherit;
  text-decoration: inherit;
  box-ordinal-group: inherit;
  overflow-clip-box: inherit;
  unicode-bidi: inherit;
  text-overflow: inherit;
  /* The properties below here don't apply if our position is static,
     and we do want them to have an effect if it's not, so it's fine
     to always inherit them. */
  top: inherit;
  left: inherit;
  bottom: inherit;
  right: inherit;
  z-index: inherit;
}

*|*::xul-anonymous-block {
  display: block;
  box-ordinal-group: inherit;
  text-overflow: inherit;
  overflow-clip-box: inherit;
}

*|*::scrolled-content, *|*::scrolled-canvas,
*|*::scrolled-page-sequence {
  /* e.g., text inputs, select boxes */
  padding: inherit;
  /* The display doesn't affect the kind of frame constructed here.  This just
     affects auto-width sizing of the block we create. */
  display: block;
  /* make unicode-bidi inherit, otherwise it has no effect on text inputs and
     blocks with overflow: scroll; */
  unicode-bidi: inherit;
  text-overflow: inherit;
  /* Please keep the Multicol/Flex/Grid/Align sections below in sync with
     ::fieldset-content/::button-content in forms.css */
  /* Multicol container */
  column-count: inherit;
  column-width: inherit;
  column-gap: inherit;
  column-rule: inherit;
  column-fill: inherit;
  /* Flex container */
  flex-direction: inherit;
  flex-wrap: inherit;
  /* -webkit-box container (aliased from -webkit versions to -moz versions) */
  box-orient: inherit;
  box-direction: inherit;
  box-pack: inherit;
  box-align: inherit;
  /* Grid container */
  grid-auto-columns: inherit;
  grid-auto-rows: inherit;
  grid-auto-flow: inherit;
  grid-column-gap: inherit;
  grid-row-gap: inherit;
  grid-template-areas: inherit;
  grid-template-columns: inherit;
  grid-template-rows: inherit;
  /* CSS Align */
  align-content: inherit;
  align-items: inherit;
  justify-content: inherit;
  justify-items: inherit;
  /* Do not change these. nsCSSFrameConstructor depends on them to create a good
     frame tree. */
  overflow-clip-box: inherit;
}

*|*::viewport, *|*::viewport-scroll, *|*::canvas, *|*::scrolled-canvas {
  display: block;
  background-color: inherit;
}

*|*::viewport-scroll {
  overflow: auto;
}

*|*::column-content {
  /* the column boxes inside a column-flowed block */
  /* make unicode-bidi inherit, otherwise it has no effect on column boxes */
  unicode-bidi: inherit;
  text-overflow: inherit;
  /* inherit the outer frame's display, otherwise we turn into an inline */
  display: inherit;
  /* Carry through our parent's height so that %-height children get
  their heights set */
  height: 100%;
}

*|*::anonymous-flex-item,
*|*::anonymous-grid-item {
  /* Anonymous blocks that wrap contiguous runs of text
   * inside of a flex or grid container. */
  display: block;
}

*|*::page-sequence, *|*::scrolled-page-sequence {
  /* Collection of pages in print/print preview. Visual styles may only appear
   * in print preview. */
  display: block;
  background: linear-gradient(#606060, #8a8a8a) fixed;
  height: 100%;
}

*|*::page {
  /* Individual page in print/print preview. Visual styles may only appear
   * in print preview. */
  display: block;
  background: white;
  box-shadow: 5px 5px 8px #202020;
  box-decoration-break: clone;
  margin: 0.125in 0.25in;
}

*|*::pagecontent {
  display: block;
  margin: auto;
}

*|*::pagebreak {
  display: block;
}

/* Printing */

@media print {

  * {
    cursor: default !important;
  }

}

*|*:fullscreen:not(:root) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  max-height: none !important;
  box-sizing: border-box !important;
  object-fit: contain;
  transform: none !important;
}

/* Selectors here should match the check in
 * nsViewportFrame.cpp:ShouldInTopLayerForFullscreen() */
*|*:fullscreen:not(:root):not(:browser-frame) {
  top-layer: top !important;
}

*|*::backdrop {
  top-layer: top !important;
  display: block;
  position: fixed;
  top: 0; left: 0;
  right: 0; bottom: 0;
}

*|*:full-screen:not(:root)::backdrop {
  background: black;
}

/* XML parse error reporting */

parsererror|parsererror {
  display: block;
  font-family: sans-serif;
  font-weight: bold;
  white-space: pre;
  margin: 1em;
  padding: 1em;
  border-width: thin;
  border-style: inset;
  border-color: red;
  font-size: 14pt;
  background-color: lightyellow;
  color: black;
}

parsererror|sourcetext {
  display: block;
  white-space: pre;
  font-family: fixed;
  margin-top: 2em;
  margin-bottom: 1em;
  color: red;
  font-weight: bold;
  font-size: 12pt;
}

div:native-anonymous.moz-accessiblecaret {
  /* Add transition effect to make caret size changing smoother. */
  transition-duration: 250ms;
  transition-property: width, height, margin-left;
}

div:native-anonymous.moz-accessiblecaret,
div:native-anonymous.moz-accessiblecaret > #text-overlay,
div:native-anonymous.moz-accessiblecaret > #image,
div:native-anonymous.moz-accessiblecaret > #bar {
  position: absolute;
  z-index: 2147483647;
}

div:native-anonymous.moz-accessiblecaret > #text-overlay,
div:native-anonymous.moz-accessiblecaret > #image {
  top: 0;
  width: 100%;

  /* Override this property in moz-custom-content-container to make dummy touch
   * listener work. */
  pointer-events: auto;
}

div:native-anonymous.moz-accessiblecaret > #image {
  background-position: center top;
  background-size: 100%;
  background-repeat: no-repeat;
  background-origin: content-box;
  height: 100%;
}

div:native-anonymous.moz-accessiblecaret > #bar {
  margin-left: 49%;
  background-color: #008aa0;
}

div:native-anonymous.moz-accessiblecaret.no-bar > #bar {
  display: none;
}

div:native-anonymous.moz-accessiblecaret.left > #text-overlay,
div:native-anonymous.moz-accessiblecaret.left > #image {
  margin-left: -39%;
}

div:native-anonymous.moz-accessiblecaret.right > #text-overlay,
div:native-anonymous.moz-accessiblecaret.right > #image {
  margin-left: 41%;
}

div:native-anonymous.moz-accessiblecaret.none {
  display: none;
}

/* Custom content container in the CanvasFrame, positioned on top of everything
   everything else, not reacting to pointer events. */
div:native-anonymous.moz-custom-content-container {
  pointer-events: none;
  top-layer: top;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Shadow DOM v1
 * https://drafts.csswg.org/css-scoping/#slots-in-shadow-tree */
slot {
  display: contents;
}


/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/**
  Styles for old GFX form widgets
 **/


@namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */
@namespace xul url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

*|*::fieldset-content {
  display: block; /* nsRuleNode::ComputeDisplayData overrules this in some cases */
  unicode-bidi: inherit;
  text-overflow: inherit;
  overflow: inherit;
  overflow-clip-box: inherit;
  /* Need to inherit border-radius too, so when the fieldset has rounded
     borders we don't leak out the corners for hit-testing purposes. */
  border-radius: inherit;
  padding: inherit;
  block-size: 100%; /* Need this so percentage block-sizes of kids work right */
  /* Please keep the Multicol/Flex/Grid/Align sections below in sync with
     ::scrolled-content in ua.css and ::button-content below. */
  /* Multicol container */
  column-count: inherit;
  column-width: inherit;
  column-gap: inherit;
  column-rule: inherit;
  column-fill: inherit;
  /* Flex container */
  flex-direction: inherit;
  flex-wrap: inherit;
  /* -webkit-box container (aliased from -webkit versions to -moz versions) */
  box-orient: inherit;
  box-direction: inherit;
  box-pack: inherit;
  box-align: inherit;
  /* Grid container */
  grid-auto-columns: inherit;
  grid-auto-rows: inherit;
  grid-auto-flow: inherit;
  grid-column-gap: inherit;
  grid-row-gap: inherit;
  grid-template-areas: inherit;
  grid-template-columns: inherit;
  grid-template-rows: inherit;
  /* CSS Align */
  align-content: inherit;
  align-items: inherit;
  justify-content: inherit;
  justify-items: inherit;
}

/* miscellaneous form elements */

fieldset > legend {
  padding-inline-start: 2px;
  padding-inline-end: 2px;
  inline-size: fit-content;
}

legend {
  display: block;
}

fieldset {
  display: block;
  margin-inline-start: 2px;
  margin-inline-end: 2px;
  padding-block-start: 0.35em;
  padding-block-end: 0.75em;
  padding-inline-start: 0.625em;
  padding-inline-end: 0.625em;
  border: 2px groove ThreeDLightShadow;
  min-width: min-content;
}

label {
  cursor: default;
}

/* default inputs, text inputs, and selects */

/* Note: Values in nsNativeTheme IsWidgetStyled function
   need to match textfield background/border values here */

input {
  appearance: textfield;
  /* The sum of border and padding on block-start and block-end
     must be the same here, for buttons, and for <select> (including its
     internal padding magic) */
  padding: 1px;
  border: 2px inset rgb(227, 227, 227);
  background-color: transparent;
  color: rgb(0, 0, 0);
  font: field;
  text-rendering: optimizeLegibility;
  line-height: normal;
  text-align: start;
  text-transform: none;
  word-spacing: normal;
  letter-spacing: normal;
  cursor: text;
  text-indent: 0;
  user-select: text;
  text-shadow: none;
  overflow-clip-box: padding-box content-box;
}

input > .anonymous-div,
input::placeholder {
  word-wrap: normal !important;
  /* Make the line-height equal to the available height */
  line-height: block-height;
}

textarea {
  margin-block-start: 1px;
  margin-block-end: 1px;
  border: 2px inset ThreeDLightShadow;
  /* The 1px inline padding is for parity with Win/IE */
  padding-inline-start: 1px;
  padding-inline-end: 1px;
  background-color: transparent;
  color: rgb(0, 0, 0);
  font: medium fixed;
  text-rendering: optimizeLegibility;
  text-align: start;
  text-transform: none;
  word-spacing: normal;
  letter-spacing: normal;
  vertical-align: text-bottom;
  cursor: text;
  resize: both;
  appearance: textfield-multiline;
  text-indent: 0;
  user-select: text;
  text-shadow: none;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-clip-box: content-box;
}

textarea > scrollbar {
  cursor: default;
}

textarea > .anonymous-div,
input > .anonymous-div,
input::placeholder,
textarea::placeholder,
input > .preview-div
textarea > .preview-div {
  overflow: auto;
  border: 0px !important;
  padding: inherit !important;
  margin: 0px;
  text-decoration: inherit;
  text-decoration-color: inherit;
  text-decoration-style: inherit;
  display: inline-block;
  ime-mode: inherit;
  resize: inherit;
  control-character-visibility: visible;
  overflow-clip-box: inherit;
}

input > .anonymous-div,
input::placeholder,
input > .preview-div {
  white-space: pre;
}

input > .anonymous-div.wrap {
  white-space: pre-wrap;
}
textarea > .anonymous-div.inherit-overflow,
input > .anonymous-div.inherit-overflow {
  overflow: inherit;
}
textarea > .anonymous-div.inherit-scroll-behavior,
input > .anonymous-div.inherit-scroll-behavior {
  scroll-behavior: inherit;
  overscroll-behavior: inherit;
}

input::placeholder,
textarea::placeholder,
input > .preview-div,
textarea > .preview-div {
  /*
   * Changing display to inline can leads to broken behaviour and will assert.
   */
  display: inline-block !important;

  /*
   * Changing resize would display a broken behaviour and will assert.
   */
  resize: none !important;

  overflow: hidden !important;

  /*
   * The placeholder or preview should be ignored by pointer otherwise, we might have some
   * unexpected behavior like the resize handle not being selectable.
   */
  pointer-events: none !important;
}

input::placeholder,
textarea::placeholder {
  opacity: 0.54;
}

textarea::placeholder,
textarea > .preview-div {
  white-space: pre-wrap !important;
}

input:read-write,
textarea:read-write {
  user-modify: read-write !important;
}

select {
  margin: 0;
  border-color: rgb(227, 227, 227);
  background-color: Combobox;
  color: ComboboxText;
  font: list;
  /*
   * Note that the "UA !important" tests in
   * layout/style/test/test_animations.html depend on this rule, because
   * they need some UA !important rule to test.  If this changes, use a
   * different one there.
   */
  line-height: normal !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  text-align: start;
  cursor: default;
  box-sizing: border-box;
  user-select: none;
  appearance: menulist;
  border-width: 2px;
  border-style: inset;
  text-indent: 0;
  overflow: hidden-unscrollable;
  text-shadow: none;
  /* No text-decoration reaching inside, by default */
  display: inline-block;
  page-break-inside: avoid;
  overflow-clip-box: padding-box !important; /* bug 992447 */
}

/* Need the "select[size][multiple]" selector to override the settings on
   'select[size="1"]', eg if one has <select size="1" multiple> */

select[size],
select[multiple],
select[size][multiple] {
  /* Different alignment and padding for listbox vs combobox */
  background-color: transparent;
  color: rgb(0, 0, 0);
  vertical-align: text-bottom;
  padding-block-start: 1px;
  padding-block-end: 1px;
  padding-inline-start: 0;
  padding-inline-end: 0;
  appearance: listbox;
}

select[size="0"],
select[size="1"] {
  /* Except this is not a listbox */
  background-color: Combobox;
  color: ComboboxText;
  vertical-align: baseline;
  padding: 0;
  appearance: menulist;
}

select > button {
  inline-size: 12px;
  white-space: nowrap;
  position: static !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  appearance: menulist-button;

  /* Make sure to size correctly if the combobox has a non-auto height. */
  block-size: 100% ! important;
  box-sizing: border-box ! important;

  /*
    Make sure to align properly with the display frame.  Note that we
    want the baseline of the combobox to match the baseline of the
    display frame, so the dropmarker is what gets the vertical-align.
  */
  vertical-align: top !important;
}

select:empty {
  inline-size: 2.5em;
}

*|*::display-comboboxcontrol-frame {
  overflow: hidden-unscrollable;
  /* This block-start/end padding plus the combobox block-start/end border need to
     add up to the block-start/end borderpadding of text inputs and buttons */
  padding-block-start: 1px;
  padding-block-end: 1px;
  padding-inline-start: 4px;
  padding-inline-end: 0;
  color: inherit;
  white-space: nowrap;
  text-align: inherit;
  user-select: none;
  /* Make sure to size correctly if the combobox has a non-auto block-size. */
  block-size: 100% ! important;
  box-sizing: border-box ! important;
  line-height: block-height;
}

option {
  display: block;
  float: none !important;
  position: static !important;
  min-block-size: 1em;
  line-height: normal !important;
  user-select: none;
  text-indent: 0;
  white-space: nowrap !important;
  word-wrap: normal !important;
  text-align: match-parent;
}

select > option {
  padding-block-start : 0;
  padding-block-end: 0;
  padding-inline-start: 3px;
  padding-inline-end: 5px;
}

option:checked {
  background-color: html-cellhighlight !important;
  color: html-cellhighlighttext !important;
}

select:focus > option:checked,
select:focus > optgroup > option:checked {
  background-color: Highlight ! important;
  color: HighlightText ! important;
}

optgroup {
  display: block;
  float: none !important;
  position: static !important;
  font: list;
  line-height: normal !important;
  font-style: italic;
  font-weight: bold;
  font-size: inherit;
  user-select: none;
  text-indent: 0;
  white-space: nowrap !important;
  word-wrap: normal !important;
}

optgroup > option {
  padding-inline-start: 20px;
  font-style: normal;
  font-weight: normal;
}

optgroup:before {
  display: block;
  content: attr(label);
}

*|*::dropdown-list {
  z-index: 2147483647;
  background-color: inherit;
  user-select: none;
  position: static !important;
  float: none !important;

  /*
   * We can't change the padding here, because that would affect our
   * intrinsic inline-size, since we scroll.  But at the same time, we want
   * to make sure that our inline-start border+padding matches the inline-start
   * border+padding of a combobox so that our scrollbar will line up
   * with the dropmarker.  So set our inline-start border to 2px.
   */
  border: 1px outset black !important;
  border-inline-start-width: 2px ! important;
}

input:disabled,
textarea:disabled,
option:disabled,
optgroup:disabled,
select:disabled:disabled /* Need the pseudo-class twice to have the specificity
                            be at least the same as select[size][multiple] above */
{
  color: GrayText;
  background-color: ThreeDLightShadow;
  cursor: inherit;
}

input:disabled,
textarea:disabled {
  cursor: default;
}

option:disabled,
optgroup:disabled {
  background-color: transparent;
}

/* hidden inputs */
input[type="hidden"] {
  appearance: none;
  display: none !important;
  padding: 0;
  border: 0;
  cursor: auto;
  user-focus: ignore;
  binding: none;
}

/* image buttons */
input[type="image"] {
  appearance: none;
  padding: 0;
  border: none;
  background-color: transparent;
  font-family: sans-serif;
  font-size: small;
  cursor: pointer;
  binding: none;
}

input[type="image"]:disabled {
  cursor: inherit;
}

input[type="image"]:focusring {
  /* Don't specify the outline-color, we should always use initial value. */
  outline: 1px dotted;
}

/* file selector */
input[type="file"] {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  overflow-clip-box: padding-box;
  color: inherit;

  /* Revert rules which apply on all inputs. */
  appearance: none;
  binding: none;
  cursor: default;

  border: none;
  background-color: transparent;
  padding: 0;
}

input[type="file"] > xul|label {
  min-inline-size: 12em;
  padding-inline-start: 5px;
  text-align: match-parent;

  color: inherit;
  font-size: inherit;
  letter-spacing: inherit;

  /*
   * Force the text to have LTR directionality. Otherwise filenames containing
   * RTL characters will be reordered with chaotic results.
   */
  direction: ltr !important;
}

/* button part of file selector */
input[type="file"] > button[type="button"] {
  block-size: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  cursor: inherit;
}

/* colored part of the color selector button */
input[type="color"]::color-swatch {
  width: 100%;
  height: 100%;
  min-width: 3px;
  min-height: 3px;
  margin-inline-start: auto;
  margin-inline-end: auto;
  box-sizing: border-box;
  border: 1px solid grey;
  display: block;
}

/* Try to make RTL <input type='file'> look nicer. */
/* TODO: find a better solution than forcing direction: ltr on all file
   input labels and remove this override -- bug 1161482 */
input[type="file"]:dir(rtl) > xul|label {
  padding-inline-start: 0px;
  padding-inline-end: 5px;
}

/* radio buttons */
input[type="radio"] {
  display: inline-block;
  appearance: radio;
  margin-block-start: 3px;
  margin-block-end: 0px;
  margin-inline-start: 5px;
  margin-inline-end: 3px;
}

/* check boxes */
input[type="checkbox"] {
  display: inline-block;
  appearance: checkbox;
  margin-block-start: 3px;
  margin-block-end: 3px;
  margin-inline-start: 4px;
  margin-inline-end: 3px;
}

/* common features of radio buttons and check boxes */

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  cursor: default;
  /* unset some values from the general 'input' rule above: */
  padding: unset;
  binding: unset;
  border: unset;
  background-color: unset;
  color: unset;
}

input[type="radio"]:disabled,
input[type="radio"]:disabled:active,
input[type="radio"]:disabled:hover,
input[type="radio"]:disabled:hover:active,
input[type="checkbox"]:disabled,
input[type="checkbox"]:disabled:active,
input[type="checkbox"]:disabled:hover,
input[type="checkbox"]:disabled:hover:active {
  cursor: inherit;
}

input[type="search"] {
  box-sizing: border-box;
}

/* buttons */

/* Note: Values in nsNativeTheme IsWidgetStyled function
   need to match button background/border values here */

/* Non text-related properties for buttons: these ones are shared with
   input[type="color"] */
button,
input[type="color"],
input[type="reset"],
input[type="button"],
input[type="submit"] {
  appearance: button;
  /* The sum of border and padding on block-start and block-end
     must be the same here, for text inputs, and for <select>.
     Note focus-inner padding does not affect button size. */
  padding-block-start: 0px;
  padding-inline-end: 8px;
  padding-block-end: 0px;
  padding-inline-start: 8px;
  border: 2px outset ThreeDLightShadow;
  background-color: ButtonFace;
  cursor: default;
  box-sizing: border-box;
  user-select: none;
  binding: none;
}

/* Text-related properties for buttons: these ones are not shared with
   input[type="color"] */
button,
input[type="reset"],
input[type="button"],
input[type="submit"] {
  color: ButtonText;
  font: button;
  line-height: normal;
  white-space: pre;
  text-align: center;
  text-shadow: none;
  overflow-clip-box: padding-box;
}

input[type="color"] {
  inline-size: 64px;
  block-size: 23px;
}

button {
  /* Buttons should lay out like "normal" html, mostly */
  white-space: inherit;
  text-indent: 0;
  /* But no text-decoration reaching inside, by default */
  display: inline-block;
}

*|*::button-content {
  display: block;
  /* Please keep the Multicol/Flex/Grid/Align sections below in sync with
     ::scrolled-content in ua.css and ::fieldset-content above. */
  /* Multicol container */
  column-count: inherit;
  column-width: inherit;
  column-gap: inherit;
  column-rule: inherit;
  column-fill: inherit;
  /* Flex container */
  flex-direction: inherit;
  flex-wrap: inherit;
  /* -webkit-box container (aliased from -webkit versions to -moz versions) */
  box-orient: inherit;
  box-direction: inherit;
  box-pack: inherit;
  box-align: inherit;
  /* Grid container */
  grid-auto-columns: inherit;
  grid-auto-rows: inherit;
  grid-auto-flow: inherit;
  grid-column-gap: inherit;
  grid-row-gap: inherit;
  grid-template-areas: inherit;
  grid-template-columns: inherit;
  grid-template-rows: inherit;
  /* CSS Align */
  align-content: inherit;
  align-items: inherit;
  justify-content: inherit;
  justify-items: inherit;
}

button:hover,
input[type="color"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  background-color: buttonhoverface;
}

button:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  color: buttonhovertext;
}

button:active:hover,
input[type="color"]:active:hover,
input[type="reset"]:active:hover,
input[type="button"]:active:hover,
input[type="submit"]:active:hover {
  border-style: inset;
  background-color: ButtonFace;
}

button:active:hover,
input[type="reset"]:active:hover,
input[type="button"]:active:hover,
input[type="submit"]:active:hover {
  color: ButtonText;
}

button::focus-inner,
input[type="color"]::focus-inner,
input[type="reset"]::focus-inner,
input[type="button"]::focus-inner,
input[type="submit"]::focus-inner,
input[type="file"] > button[type="button"]::focus-inner {
  /* Note this padding only affects the focus-inner ring, not the button itself */
  padding-block-start: 0px;
  padding-inline-end: 2px;
  padding-block-end: 0px;
  padding-inline-start: 2px;
  border: 1px dotted transparent;
}

button:focusring::focus-inner,
input[type="color"]:focusring::focus-inner,
input[type="reset"]:focusring::focus-inner,
input[type="button"]:focusring::focus-inner,
input[type="submit"]:focusring::focus-inner,
input[type="file"] > button[type="button"]:focusring::focus-inner {
  border-color: ButtonText;
}

button:disabled:active, button:disabled,
input[type="color"]:disabled:active,
input[type="color"]:disabled,
input[type="reset"]:disabled:active,
input[type="reset"]:disabled,
input[type="button"]:disabled:active,
input[type="button"]:disabled,
select:disabled > button,
select:disabled > button,
input[type="submit"]:disabled:active,
input[type="submit"]:disabled {
  /* The sum of border and padding on block-start and block-end
     must be the same here and for text inputs */
  padding-block-start: 0px;
  padding-inline-end: 8px;
  padding-block-end: 0px;
  padding-inline-start: 8px;
  border: 2px outset ThreeDLightShadow;
  cursor: inherit;
}

button:disabled:active, button:disabled,
input[type="reset"]:disabled:active,
input[type="reset"]:disabled,
input[type="button"]:disabled:active,
input[type="button"]:disabled,
select:disabled > button,
select:disabled > button,
input[type="submit"]:disabled:active,
input[type="submit"]:disabled {
  color: GrayText;
}

 /*
  * Make form controls inherit 'unicode-bidi' transparently as required by
  *  their various anonymous descendants and pseudo-elements:
  *
  * <textarea> and <input type="text">:
  *  inherit into the XULScroll frame with class 'anonymous-div' which is a
  *  child of the text control.
  *
  * Buttons (either <button>, <input type="submit">, <input type="button">
  *          or <input type="reset">)
  *  inherit into the ':button-content' pseudo-element.
  *
  * <select>:
  *  inherit into the ':display-comboboxcontrol-frame' pseudo-element and
  *  the <optgroup>'s ':before' pseudo-element, which is where the label of
  *  the <optgroup> gets displayed. The <option>s don't use anonymous boxes,
  *  so they need no special rules.
  */
textarea > .anonymous-div,
input > .anonymous-div,
input::placeholder,
textarea::placeholder,
*|*::button-content,
*|*::display-comboboxcontrol-frame,
optgroup:before {
  unicode-bidi: inherit;
  text-overflow: inherit;
}

/**
 * Set default style for invalid elements.
 */
:not(output):ui-invalid {
  box-shadow: 0 0 1.5px 1px red;
}

:not(output):ui-invalid:focusring {
  box-shadow: 0 0 2px 2px rgba(255,0,0,0.4);
}

output:ui-invalid {
  color: red;
}

@media print {
  input, textarea, select, button {
    user-input: none !important;
  }

  input[type="file"] { height: 2em; }
}

progress {
  appearance: progressbar;
  display: inline-block;
  vertical-align: -0.2em;

  /* Default style in case of there is appearance: none; */
  border: 1px solid ThreeDShadow;
  border-right-color: ThreeDHighlight;
  border-bottom-color: ThreeDHighlight;
  /* #e6e6e6 is a light gray. */
  background-color: #e6e6e6;
}

::progress-bar {
  /* Prevent styling that would change the type of frame we construct. */
  display: inline-block ! important;
  float: none ! important;
  position: static ! important;
  overflow: visible ! important;
  box-sizing: border-box ! important;

  appearance: progresschunk;
  height: 100%;
  width: 100%;

  /* Default style in case of there is appearance: none; */
  background-color: #0064b4; /* blue */
}

meter {
  appearance: meterbar;
  display: inline-block;
  vertical-align: -0.2em;

  background: linear-gradient(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%);
}

::meter-bar {
  /* Block styles that would change the type of frame we construct. */
  display: inline-block ! important;
  float: none ! important;
  position: static ! important;
  overflow: visible ! important;

  appearance: meterchunk;
  height: 100%;
  width: 100%;
}

:meter-optimum::meter-bar {
  /* green. */
  background: linear-gradient(#ad7, #ad7, #cea 20%, #7a3 45%, #7a3 55%);
}
:meter-sub-optimum::meter-bar {
  /* orange. */
  background: linear-gradient(#fe7, #fe7, #ffc 20%, #db3 45%, #db3 55%);
}
:meter-sub-sub-optimum::meter-bar {
  /* red. */
  background: linear-gradient(#f77, #f77, #fcc 20%, #d44 45%, #d44 55%);
}

input[type=range] {
  appearance: range;
  display: inline-block;
  inline-size: 12em;
  block-size: 1.3em;
  margin-inline-start: 0.7em;
  margin-inline-end: 0.7em;
  margin-block-start: 0;
  margin-block-end: 0;
  /* Override some rules that apply on all input types: */
  cursor: default;
  background: none;
  border: none;
  binding: none; /* we don't want any of platformHTMLBindings.xml#inputFields */
  /* Prevent nsFrame::HandlePress setting mouse capture to this element. */
  user-select: none ! important;
}

input[type=range][orient=block] {
  inline-size: 1.3em;
  block-size: 12em;
  margin-inline-start: 0;
  margin-inline-end: 0;
  margin-block-start: 0.7em;
  margin-block-end: 0.7em;
}

input[type=range][orient=horizontal] {
  width: 12em;
  height: 1.3em;
  margin: 0 0.7em;
}

input[type=range][orient=vertical] {
  width: 1.3em;
  height: 12em;
  margin: 0.7em 0;
}

/**
 * Ideally we'd also require :focusring here, but that doesn't currently
 * work. Instead we only use the focus-outer border style if
 * NS_EVENT_STATE_FOCUSRING is set (the check is in
 * nsRangeFrame::BuildDisplayList).
 */
input[type=range]::focus-outer {
  border: 1px dotted black;
}

/**
 * Layout handles positioning of this pseudo-element specially (so that content
 * authors can concentrate on styling the thumb without worrying about the
 * logic to position it). Specifically the 'margin', 'top' and 'left'
 * properties are ignored.
 *
 * If content authors want to have a vertical range, they will also need to
 * set the width/height of this pseudo-element.
 */
input[type=range]::range-track {
  /* Prevent styling that would change the type of frame we construct. */
  display: inline-block !important;
  float: none !important;
  position: static !important;
  border: none;
  background-color: #999;
  inline-size: 100%;
  block-size: 0.2em;
  /* Prevent nsFrame::HandlePress setting mouse capture to this element. */
  user-select: none ! important;
}

input[type=range][orient=block]::range-track {
  inline-size: 0.2em;
  block-size: 100%;
}

input[type=range][orient=horizontal]::range-track {
  width: 100%;
  height: 0.2em;
}

input[type=range][orient=vertical]::range-track {
  width: 0.2em;
  height: 100%;
}

/**
 * Layout handles positioning of this pseudo-element specially (so that content
 * authors can concentrate on styling this pseudo-element without worrying
 * about the logic to position it). Specifically the 'margin', 'top' and 'left'
 * properties are ignored. Additionally, if the range is horizontal, the width
 * property is ignored, and if the range range is vertical, the height property
 * is ignored.
 */
input[type=range]::range-progress {
  /* Prevent styling that would change the type of frame we construct. */
  display: inline-block !important;
  float: none !important;
  position: static !important;
  /* Since one of width/height will be ignored, this just sets the "other"
     dimension.
   */
  width: 0.2em;
  height: 0.2em;
  /* Prevent nsFrame::HandlePress setting mouse capture to this element. */
  user-select: none ! important;
}

/**
 * Layout handles positioning of this pseudo-element specially (so that content
 * authors can concentrate on styling the thumb without worrying about the
 * logic to position it). Specifically the 'margin', 'top' and 'left'
 * properties are ignored.
 */
input[type=range]::range-thumb {
  /* Native theming is atomic for range. Set appearance on the range
   * to get rid of it. The thumb's appearance is fixed.
   */
  appearance: range-thumb !important;
  /* Prevent styling that would change the type of frame we construct. */
  display: inline-block !important;
  float: none !important;
  position: static !important;
  width: 1em;
  height: 1em;
  border: 0.1em solid #999;
  border-radius: 0.5em;
  background-color: #F0F0F0;
  /* Prevent nsFrame::HandlePress setting mouse capture to this element. */
  user-select: none ! important;
}

/* As a temporary workaround until bug 677302 the rule for input[type=number]
 * has moved to number-control.css
 */

input[type=number]::number-wrapper {
  /* Prevent styling that would change the type of frame we construct. */
  display: flex;
  float: none !important;
  position: static !important;
  block-size: 100%;
}

input[type=number]::number-text {
  display: block; /* Flex items must be block-level. Normally we do fixup in
                     the style system to ensure this, but that fixup is disabled
                     inside of form controls. So, we hardcode display here. */
  appearance: none;
  /* work around autofocus bug 939248 on initial load */
  user-modify: read-write;
  /* This pseudo-element is also an 'input' element (nested inside and
   * distinct from the <input type=number> element) so we need to prevent the
   * explicit setting of 'text-align' by the general CSS rule for 'input'
   * above. We want to inherit its value from its <input type=number>
   * ancestor, not have that general CSS rule reset it.
   */
  text-align: inherit;
  flex: 1;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  margin: 0;
}

input[type=number]::number-spin-box {
  writing-mode: horizontal-tb;
  display: flex;
  flex-direction: column;
  /* If the spin-box has auto height, it ends up enlarging the default height
   * of the control, so we limit it to 1em here. The height doesn't affect
   * the rendering of the spinner-buttons; it's only for layout purposes.
   *
   * This is a temporary hack until we implement better positioning for the
   * spin-box in vertical mode; it works OK at default size but less well
   * if the font-size is made substantially larger or smaller. (Bug 1175074.)
   */
  max-height: 1em;
  align-self: center;
  justify-content: center;
}

input[type=number]::number-spin-up {
  writing-mode: horizontal-tb;
  appearance: spinner-upbutton;
  display: block; /* bug 926670 */
  flex: none;
  cursor: default;
  /* Style for when native theming is off: */
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="5"><path d="M1,4 L3,0 5,4" fill="dimgrey"/></svg>');
  background-repeat: no-repeat;
  background-position: center bottom;
  border: 1px solid darkgray;
  border-bottom: none;
  /* [JK] I think the border-*-*-radius properties here can remain physical,
     as we probably don't want to turn the spinner sideways in vertical writing mode */
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

input[type=number]::number-spin-down {
  writing-mode: horizontal-tb;
  appearance: spinner-downbutton;
  display: block; /* bug 926670 */
  flex: none;
  cursor: default;
  /* Style for when native theming is off: */
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="5"><path d="M1,1 L3,5 5,1" fill="dimgrey"/></svg>');
  background-repeat: no-repeat;
  background-position: center top;
  border: 1px solid darkgray;
  border-top: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

input[type="number"] > div > div > div:hover {
  /* give some indication of hover state for the up/down buttons */
  background-color: lightblue;
}

input[type="date"],
input[type="time"] {
  overflow: hidden !important;
  font-family: fixed;
}

:autofill, :autofill-preview {
  filter: grayscale(21%) brightness(88%) contrast(161%) invert(10%) sepia(40%) saturate(206%);
}
:autofill-preview {
  color: GrayText;
}