/*
 * The default style sheet used to render HTML.
 *
 * Copyright (C) 2000 Lars Knoll (knoll@kde.org)
 * Copyright (C) 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011 Apple Inc. All rights reserved.
 *
 * This library is free software; you can redistribute it and/or
 * modify it under the terms of the GNU Library General Public
 * License as published by the Free Software Foundation; either
 * version 2 of the License, or (at your option) any later version.
 *
 * This library is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
 * Library General Public License for more details.
 *
 * You should have received a copy of the GNU Library General Public License
 * along with this library; see the file COPYING.LIB.  If not, write to
 * the Free Software Foundation, Inc., 51 Franklin Street, Fifth Floor,
 * Boston, MA 02110-1301, USA.
 *
 */

/*
* As of now, this is a pure port from Blink. As such, it contains many
* nonstandard CSS features. As we port HTML elements to custom elements, we
* should in each case audit the CSS used to make sure only standard or
* standards-track CSS is used. Any gaps in CSS's functionality need to be
* catalogued, just like other gaps in web platform functionality.
*/

custom-html {
    display: block
}

/* children of the <head> element all have display:none */
custom-head {
    display: none
}

custom-meta {
    display: none
}

custom-title {
    display: none
}

custom-link {
    display: none
}

custom-style {
    display: none
}

custom-script {
    display: none
}

/* generic block-level elements */

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

custom-body:-webkit-full-page-media {
    background-color: rgb(0, 0, 0)
}

custom-p {
    display: block;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1__qem;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
}

custom-layer {
    display: block
}

custom-article, custom-aside, custom-footer, custom-header, custom-hgroup, custom-main, custom-nav, custom-section {
    display: block
}

custom-marquee {
    display: inline-block;
}

custom-address {
    display: block
}

custom-figcaption {
    display: block
}

custom-figure {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 40px;
    -webkit-margin-end: 40px;
}

custom-q {
    display: inline
}

custom-q:before {
    content: open-quote;
}

custom-q:after {
    content: close-quote;
}

custom-center {
    display: block;
    /* special centering to be able to emulate the html4/netscape behaviour */
    text-align: -webkit-center
}

custom-map {
    display: inline
}

custom-video {
    object-fit: contain;
}

/* heading elements */

custom-h1 {
    display: block;
    font-size: 2em;
    -webkit-margin-before: 0.67__qem;
    -webkit-margin-after: 0.67em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
}

:-webkit-any(custom-article,custom-aside,custom-nav,custom-section) custom-h1 {
    font-size: 1.5em;
    -webkit-margin-before: 0.83__qem;
    -webkit-margin-after: 0.83em;
}

:-webkit-any(custom-article,custom-aside,custom-nav,custom-section) :-webkit-any(custom-article,custom-aside,custom-nav,custom-section) custom-h1 {
    font-size: 1.17em;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
}

:-webkit-any(custom-article,custom-aside,custom-nav,custom-section) :-webkit-any(custom-article,custom-aside,custom-nav,custom-section) :-webkit-any(custom-article,custom-aside,custom-nav,custom-section) custom-h1 {
    font-size: 1.00em;
    -webkit-margin-before: 1.33__qem;
    -webkit-margin-after: 1.33em;
}

:-webkit-any(custom-article,custom-aside,custom-nav,custom-section) :-webkit-any(custom-article,custom-aside,custom-nav,custom-section) :-webkit-any(custom-article,custom-aside,custom-nav,custom-section) :-webkit-any(custom-article,custom-aside,custom-nav,custom-section) custom-h1 {
    font-size: .83em;
    -webkit-margin-before: 1.67__qem;
    -webkit-margin-after: 1.67em;
}

:-webkit-any(custom-article,custom-aside,custom-nav,custom-section) :-webkit-any(custom-article,custom-aside,custom-nav,custom-section) :-webkit-any(custom-article,custom-aside,custom-nav,custom-section) :-webkit-any(custom-article,custom-aside,custom-nav,custom-section) :-webkit-any(custom-article,custom-aside,custom-nav,custom-section) custom-h1 {
    font-size: .67em;
    -webkit-margin-before: 2.33__qem;
    -webkit-margin-after: 2.33em;
}

custom-h2 {
    display: block;
    font-size: 1.5em;
    -webkit-margin-before: 0.83__qem;
    -webkit-margin-after: 0.83em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
}

custom-h3 {
    display: block;
    font-size: 1.17em;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
}

custom-h4 {
    display: block;
    -webkit-margin-before: 1.33__qem;
    -webkit-margin-after: 1.33em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
}

custom-h5 {
    display: block;
    font-size: .83em;
    -webkit-margin-before: 1.67__qem;
    -webkit-margin-after: 1.67em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
}

custom-h6 {
    display: block;
    font-size: .67em;
    -webkit-margin-before: 2.33__qem;
    -webkit-margin-after: 2.33em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    font-weight: bold
}

/* tables */

custom-table {
    display: table;
    border-collapse: separate;
    border-spacing: 2px;
    border-color: gray
}

custom-thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit
}

custom-tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit
}

custom-tfoot {
    display: table-footer-group;
    vertical-align: middle;
    border-color: inherit
}

/* for tables without table section elements (can happen with XHTML or dynamically created tables) */
custom-table > custom-tr {
    vertical-align: middle;
}

custom-col {
    display: table-column
}

custom-colgroup {
    display: table-column-group
}

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

custom-td, custom-th {
    display: table-cell;
    vertical-align: inherit
}

custom-th {
    font-weight: bold
}

custom-caption {
    display: table-caption;
    text-align: -webkit-center
}

/* lists */

custom-ul, custom-menu, custom-dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 40px
}

custom-ol {
    display: block;
    list-style-type: decimal;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    -webkit-padding-start: 40px
}

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

custom-ul custom-ul, custom-ol custom-ul {
    list-style-type: circle
}

custom-ol custom-ol custom-ul, custom-ol custom-ul custom-ul, custom-ul custom-ol custom-ul, custom-ul custom-ul custom-ul {
    list-style-type: square
}

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

custom-dl {
    display: block;
    -webkit-margin-before: 1__qem;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
}

custom-dt {
    display: block
}

custom-ol custom-ul, custom-ul custom-ol, custom-ul custom-ul, custom-ol custom-ol {
    -webkit-margin-before: 0;
    -webkit-margin-after: 0
}

/* form elements */

custom-form {
    display: block;
    margin-top: 0__qem;
}

custom-label {
    cursor: default;
}

custom-legend {
    display: block;
    -webkit-padding-start: 2px;
    -webkit-padding-end: 2px;
    border: none
}

custom-fieldset {
    display: block;
    -webkit-margin-start: 2px;
    -webkit-margin-end: 2px;
    -webkit-padding-before: 0.35em;
    -webkit-padding-start: 0.75em;
    -webkit-padding-end: 0.75em;
    -webkit-padding-after: 0.625em;
    border: 2px groove ThreeDFace;
    min-width: -webkit-min-content;
}

custom-button {
    -webkit-appearance: button;
}

/* Form controls don't go vertical. */
custom-input, custom-textarea, custom-keygen, custom-select, custom-button, custom-meter, custom-progress {
    -webkit-writing-mode: horizontal-tb !important;
}

custom-input, custom-textarea, custom-keygen, custom-select, custom-button {
    margin: 0__qem;
    font: -webkit-small-control;
    color: initial;
    letter-spacing: normal;
    word-spacing: normal;
    line-height: normal;
    text-transform: none;
    text-indent: 0;
    text-shadow: none;
    display: inline-block;
    text-align: start;
}

custom-input[type="hidden"] {
    display: none
}

custom-input, custom-input[type="password"], custom-input[type="search"] {
    -webkit-appearance: textfield;
    padding: 1px;
    background-color: white;
    border: 2px inset;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    cursor: auto;
}

custom-input[type="search"] {
    -webkit-appearance: searchfield;
    box-sizing: border-box;
}

custom-input::-webkit-textfield-decoration-container {
    display: flex;
    align-items: center;
    -webkit-user-modify: read-only !important;
    content: none !important;
}

custom-input[type="search"]::-webkit-textfield-decoration-container {
    direction: ltr;
}

custom-input::-webkit-clear-button {
    -webkit-appearance: searchfield-cancel-button;
    display: inline-block;
    flex: none;
    -webkit-user-modify: read-only !important;
    -webkit-margin-start: 2px;
    opacity: 0;
    pionter-events: none;
}

custom-input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-clear-button {
    opacity: 1;
    pointer-events: auto;
}

custom-input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
    display: block;
    flex: none;
    -webkit-user-modify: read-only !important;
    -webkit-margin-start: 1px;
    opacity: 0;
    pointer-events: none;
}

custom-input[type="search"]:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-search-cancel-button {
    opacity: 1;
    pointer-events: auto;
}

custom-input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: searchfield-decoration;
    display: block;
    flex: none;
    -webkit-user-modify: read-only !important;
    -webkit-align-self: flex-start;
    margin: auto 0;
}

custom-input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: searchfield-results-decoration;
    display: block;
    flex: none;
    -webkit-user-modify: read-only !important;
    -webkit-align-self: flex-start;
    margin: auto 0;
}

custom-input[type="date"],
custom-input[type="datetime-local"],
custom-input[type="month"],
custom-input[type="time"],
custom-input[type="week"] {
    align-items: center;
    display: -webkit-inline-flex;
    font-family: monospace;
    overflow: hidden;
    padding: 0;
    -webkit-padding-start: 1px;
}

custom-input::-webkit-datetime-edit {
    flex: 1;
    -webkit-user-modify: read-only !important;
    display: inline-block;
    overflow: hidden;
}

custom-input::-webkit-datetime-edit-fields-wrapper {
    -webkit-user-modify: read-only !important;
    display: inline-block;
    padding: 1px 0;
    white-space: pre;
}

/* If you update padding, border, or margin in the following ruleset, update
   DateTimeFieldElement::maximumWidth too. */
custom-input::-webkit-datetime-edit-ampm-field,
custom-input::-webkit-datetime-edit-day-field,
custom-input::-webkit-datetime-edit-hour-field,
custom-input::-webkit-datetime-edit-millisecond-field,
custom-input::-webkit-datetime-edit-minute-field,
custom-input::-webkit-datetime-edit-month-field,
custom-input::-webkit-datetime-edit-second-field,
custom-input::-webkit-datetime-edit-week-field,
custom-input::-webkit-datetime-edit-year-field {
    -webkit-user-modify: read-only !important;
    border: none;
    display: inline;
    font: inherit !important;
    padding: 1px;
}

/* Remove focus ring from fields and use highlight color */
custom-input::-webkit-datetime-edit-ampm-field:focus,
custom-input::-webkit-datetime-edit-day-field:focus,
custom-input::-webkit-datetime-edit-hour-field:focus,
custom-input::-webkit-datetime-edit-millisecond-field:focus,
custom-input::-webkit-datetime-edit-minute-field:focus,
custom-input::-webkit-datetime-edit-month-field:focus,
custom-input::-webkit-datetime-edit-second-field:focus,
custom-input::-webkit-datetime-edit-week-field:focus,
custom-input::-webkit-datetime-edit-year-field:focus {
    background-color: highlight;
    color: highlighttext;
    outline: none;
}

custom-input::-webkit-datetime-edit-year-field[disabled],
custom-input::-webkit-datetime-edit-month-field[disabled],
custom-input::-webkit-datetime-edit-week-field[disabled],
custom-input::-webkit-datetime-edit-day-field[disabled],
custom-input::-webkit-datetime-edit-ampm-field[disabled],
custom-input::-webkit-datetime-edit-hour-field[disabled],
custom-input::-webkit-datetime-edit-millisecond-field[disabled],
custom-input::-webkit-datetime-edit-minute-field[disabled],
custom-input::-webkit-datetime-edit-second-field[disabled] {
    color: GrayText;
}

/* If you update padding, border, or margin in the following ruleset, update
   DateTimeEditElement::customStyelForRenderer too. */
custom-input::-webkit-datetime-edit-text {
    -webkit-user-modify: read-only !important;
    display: inline;
    font: inherit !important;
}

custom-input[type="date"]::-webkit-inner-spin-button,
custom-input[type="datetime"]::-webkit-inner-spin-button,
custom-input[type="datetime-local"]::-webkit-inner-spin-button,
custom-input[type="month"]::-webkit-inner-spin-button,
custom-input[type="time"]::-webkit-inner-spin-button,
custom-input[type="week"]::-webkit-inner-spin-button {
    display: inline-block;
    position: static;
    -webkit-margin-start: 2px;
}

custom-input::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button;
    display: block;
    position: relative;
    cursor: default;
    /* This height property is ignored for input type "number" and others which
     * use RenderTextControlSingleLine as renderer which sets height of spin
     * button in layout(). */
    height: 1.5em;
    vertical-align: top;
    flex: none;
    -webkit-user-select: none;
    -webkit-user-modify: read-only !important;
    opacity: 0;
    pointer-events: none;
}

custom-input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-inner-spin-button {
    opacity: 1;
    pointer-events: auto;
}

custom-keygen, custom-select {
    border-radius: 5px;
}

custom-keygen::-webkit-keygen-select {
    margin: 0px;
}

custom-textarea {
    -webkit-appearance: textarea;
    background-color: white;
    border: 1px solid;
    -webkit-rtl-ordering: logical;
    -webkit-user-select: text;
    flex-direction: column;
    resize: auto;
    cursor: auto;
    padding: 2px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

::-webkit-input-placeholder {
    -webkit-text-security: none;
    color: darkGray;
    display: block !important;
    pointer-events: none !important;
}

custom-input::-webkit-input-placeholder {
    white-space: pre;
    word-wrap: normal;
    overflow: hidden;
    -webkit-user-modify: read-only !important;
}

custom-input[type="password"] {
    -webkit-text-security: disc !important;
}

custom-input[type="hidden"], custom-input[type="image"], custom-input[type="file"] {
    -webkit-appearance: initial;
    padding: initial;
    background-color: initial;
    border: initial;
}

custom-input[type="file"] {
    align-items: baseline;
    color: inherit;
    text-align: start !important;
}

custom-input:-webkit-autofill, custom-textarea:-webkit-autofill, custom-select:-webkit-autofill {
    background-color: #FAFFBD !important;
    background-image:none !important;
    color: #000000 !important;
}

custom-input[type="radio"], custom-input[type="checkbox"] {
    margin: 3px 0.5ex;
    padding: initial;
    background-color: initial;
    border: initial;
}

custom-input[type="button"], custom-input[type="submit"], custom-input[type="reset"] {
    -webkit-appearance: push-button;
    -webkit-user-select: none;
    white-space: pre
}

custom-input[type="file"]::-webkit-file-upload-button {
    -webkit-appearance: push-button;
    -webkit-user-modify: read-only !important;
    white-space: nowrap;
    margin: 0;
    font-size: inherit;
}

custom-input[type="button"], custom-input[type="submit"], custom-input[type="reset"], custom-input[type="file"]::-webkit-file-upload-button, custom-button {
    align-items: flex-start;
    text-align: center;
    cursor: default;
    color: ButtonText;
    padding: 2px 6px 3px 6px;
    border: 2px outset ButtonFace;
    background-color: ButtonFace;
    box-sizing: border-box
}

custom-input[type="range"] {
    -webkit-appearance: slider-horizontal;
    padding: initial;
    border: initial;
    margin: 2px;
    color: #909090;
}

custom-input[type="range"]::-webkit-slider-container, custom-input[type="range"]::-webkit-media-slider-container {
    flex: 1;
    box-sizing: border-box;
    -webkit-user-modify: read-only !important;
    display: flex;
    -webkit-align-contents: center;
}

custom-input[type="range"]::-webkit-slider-runnable-track {
    flex: 1;
    -webkit-align-self: center;

    box-sizing: border-box;
    -webkit-user-modify: read-only !important;
    display: block;
}

custom-input[type="range"]::-webkit-slider-thumb, custom-input[type="range"]::-webkit-media-slider-thumb {
    -webkit-appearance: sliderthumb-horizontal;
    box-sizing: border-box;
    -webkit-user-modify: read-only !important;
    display: block;
}

custom-input[type="button"]:disabled, custom-input[type="submit"]:disabled, custom-input[type="reset"]:disabled,
custom-input[type="file"]:disabled::-webkit-file-upload-button, custom-button:disabled,
custom-select:disabled, custom-keygen:disabled, custom-optgroup:disabled, custom-option:disabled,
custom-select[disabled]>custom-option {
    color: GrayText
}

custom-input[type="button"]:active, custom-input[type="submit"]:active, custom-input[type="reset"]:active, custom-input[type="file"]:active::-webkit-file-upload-button, custom-button:active {
    border-style: inset
}

custom-input[type="button"]:active:disabled, custom-input[type="submit"]:active:disabled, custom-input[type="reset"]:active:disabled, custom-input[type="file"]:active:disabled::-webkit-file-upload-button, custom-button:active:disabled {
    border-style: outset
}

custom-datalist {
    display: none
}

custom-area, custom-param {
    display: none
}

custom-input[type="checkbox"] {
    -webkit-appearance: checkbox;
    box-sizing: border-box;
}

custom-input[type="radio"] {
    -webkit-appearance: radio;
    box-sizing: border-box;
}

custom-input[type="color"] {
    -webkit-appearance: square-button;
    width: 44px;
    height: 23px;
    background-color: ButtonFace;
    /* Same as native_theme_base. */
    border: 1px #a9a9a9 solid;
    padding: 1px 2px;
}

custom-input[type="color"]::-webkit-color-swatch-wrapper {
    display:flex;
    padding: 4px 2px;
    box-sizing: border-box;
    -webkit-user-modify: read-only !important;
    width: 100%;
    height: 100%
}

custom-input[type="color"]::-webkit-color-swatch {
    background-color: #000000;
    border: 1px solid #777777;
    flex: 1;
    -webkit-user-modify: read-only !important;
}

custom-input[type="color"][list] {
    -webkit-appearance: menulist;
    width: 88px;
    height: 23px
}

custom-input[type="color"][list]::-webkit-color-swatch-wrapper {
    padding-left: 8px;
    padding-right: 24px;
}

custom-input[type="color"][list]::-webkit-color-swatch {
    border-color: #000000;
}

custom-input::-webkit-calendar-picker-indicator {
    display: inline-block;
    width: 0.66em;
    height: 0.66em;
    padding: 0.17em 0.34em;
    -webkit-user-modify: read-only !important;
    opacity: 0;
    pointer-events: none;
}

custom-input::-webkit-calendar-picker-indicator:hover {
    background-color: #eee;
}

custom-input:enabled:read-write:-webkit-any(:focus,:hover)::-webkit-calendar-picker-indicator {
    opacity: 1;
    pointer-events: auto;
}

custom-input[type="date"]:disabled::-webkit-clear-button,
custom-input[type="date"]:disabled::-webkit-inner-spin-button,
custom-input[type="datetime-local"]:disabled::-webkit-clear-button,
custom-input[type="datetime-local"]:disabled::-webkit-inner-spin-button,
custom-input[type="month"]:disabled::-webkit-clear-button,
custom-input[type="month"]:disabled::-webkit-inner-spin-button,
custom-input[type="week"]:disabled::-webkit-clear-button,
custom-input[type="week"]:disabled::-webkit-inner-spin-button,
custom-input:disabled::-webkit-calendar-picker-indicator,
custom-input[type="date"][readonly]::-webkit-clear-button,
custom-input[type="date"][readonly]::-webkit-inner-spin-button,
custom-input[type="datetime-local"][readonly]::-webkit-clear-button,
custom-input[type="datetime-local"][readonly]::-webkit-inner-spin-button,
custom-input[type="month"][readonly]::-webkit-clear-button,
custom-input[type="month"][readonly]::-webkit-inner-spin-button,
custom-input[type="week"][readonly]::-webkit-clear-button,
custom-input[type="week"][readonly]::-webkit-inner-spin-button,
custom-input[readonly]::-webkit-calendar-picker-indicator {
    visibility: hidden;
}

custom-select {
    -webkit-appearance: menulist;
    box-sizing: border-box;
    align-items: center;
    border: 1px solid;
    white-space: pre;
    -webkit-rtl-ordering: logical;
    color: black;
    background-color: white;
    cursor: default;
}

custom-select[size],
custom-select[multiple],
custom-select[size][multiple] {
    -webkit-appearance: listbox;
    align-items: flex-start;
    border: 1px inset gray;
    border-radius: initial;
    white-space: initial;
}

custom-select[size="0"],
custom-select[size="1"] {
    -webkit-appearance: menulist;
    align-items: center;
    border: 1px solid;
    border-radius: 5px;
    white-space: pre;
}

custom-optgroup {
    font-weight: bolder;
}

custom-option {
    font-weight: normal;
}

custom-output {
    display: inline;
}

/* meter */

custom-meter {
    -webkit-appearance: meter;
    box-sizing: border-box;
    display: inline-block;
    height: 1em;
    width: 5em;
    vertical-align: -0.2em;
}

custom-meter::-webkit-meter-inner-element {
    -webkit-appearance: inherit;
    box-sizing: inherit;
    -webkit-user-modify: read-only !important;
    height: 100%;
    width: 100%;
}

custom-meter::-webkit-meter-bar {
    background: linear-gradient(to bottom, #ddd, #eee 20%, #ccc 45%, #ccc 55%, #ddd);
    height: 100%;
    width: 100%;
    -webkit-user-modify: read-only !important;
    box-sizing: border-box;
}

custom-meter::-webkit-meter-optimum-value {
    background: linear-gradient(to bottom, #ad7, #cea 20%, #7a3 45%, #7a3 55%, #ad7);
    height: 100%;
    -webkit-user-modify: read-only !important;
    box-sizing: border-box;
}

custom-meter::-webkit-meter-suboptimum-value {
    background: linear-gradient(to bottom, #fe7, #ffc 20%, #db3 45%, #db3 55%, #fe7);
    height: 100%;
    -webkit-user-modify: read-only !important;
    box-sizing: border-box;
}

custom-meter::-webkit-meter-even-less-good-value {
    background: linear-gradient(to bottom, #f77, #fcc 20%, #d44 45%, #d44 55%, #f77);
    height: 100%;
    -webkit-user-modify: read-only !important;
    box-sizing: border-box;
}

/* progress */

custom-progress {
    -webkit-appearance: progress-bar;
    box-sizing: border-box;
    display: inline-block;
    height: 1em;
    width: 10em;
    vertical-align: -0.2em;
}

custom-progress::-webkit-progress-inner-element {
    -webkit-appearance: inherit;
    box-sizing: inherit;
    -webkit-user-modify: read-only;
    height: 100%;
    width: 100%;
}

custom-progress::-webkit-progress-bar {
    background-color: gray;
    height: 100%;
    width: 100%;
    -webkit-user-modify: read-only !important;
    box-sizing: border-box;
}

custom-progress::-webkit-progress-value {
    background-color: green;
    height: 100%;
    width: 50%; /* should be removed later */
    -webkit-user-modify: read-only !important;
    box-sizing: border-box;
}

/* inline elements */

custom-u, custom-ins {
    text-decoration: underline
}

custom-strong, custom-b {
    font-weight: bold
}

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

custom-tt, custom-code, custom-kbd, custom-samp {
    font-family: monospace
}

custom-pre, custom-xmp, custom-plaintext, custom-listing {
    display: block;
    font-family: monospace;
    white-space: pre;
    margin: 1__qem 0
}

custom-mark {
    background-color: yellow;
    color: black
}

custom-big {
    font-size: larger
}

custom-small {
    font-size: smaller
}

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

custom-sub {
    vertical-align: sub;
    font-size: smaller
}

custom-sup {
    vertical-align: super;
    font-size: smaller
}

custom-nobr {
    white-space: nowrap
}

/* states */

:focus {
    outline: auto 5px -webkit-focus-ring-color
}

/* Read-only text fields do not show a focus ring but do still receive focus */
custom-html:focus, custom-body:focus, custom-input[readonly]:focus {
    outline: none
}

custom-applet:focus, custom-embed:focus, custom-iframe:focus, custom-object:focus {
    outline: none
}

custom-input:focus, custom-textarea:focus, custom-keygen:focus, custom-select:focus {
    outline-offset: -2px
}

custom-input[type="button"]:focus,
custom-input[type="checkbox"]:focus,
custom-input[type="file"]:focus,
custom-input[type="hidden"]:focus,
custom-input[type="image"]:focus,
custom-input[type="radio"]:focus,
custom-input[type="reset"]:focus,
custom-input[type="search"]:focus,
custom-input[type="submit"]:focus,
custom-input[type="file"]:focus::-webkit-file-upload-button {
    outline-offset: 0
}

/* HTML5 ruby elements */

custom-ruby, custom-rt {
    text-indent: 0; /* blocks used for ruby rendering should not trigger this */
}

custom-rt {
    line-height: normal;
    -webkit-text-emphasis: none;
}

custom-ruby > custom-rt {
    display: block;
    font-size: 50%;
    text-align: start;
}

custom-ruby > custom-rp {
    display: none;
}

/* other elements */

custom-noframes {
    display: none
}

custom-frameset, custom-frame {
    display: block
}

custom-frameset {
    border-color: inherit
}

custom-iframe {
    border: 2px inset
}

custom-details {
    display: block
}

custom-summary {
    display: block
}

custom-summary::-webkit-details-marker {
    display: inline-block;
    width: 0.66em;
    height: 0.66em;
    margin-right: 0.4em;
}

custom-template {
    display: none
}

custom-bdi, custom-output {
    unicode-bidi: -webkit-isolate;
}

custom-bdo {
    unicode-bidi: bidi-override;
}

custom-textarea[dir=auto] {
    unicode-bidi: -webkit-plaintext;
}
