/* BASICS */

.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: monospace;
  height: 300px;
  color: black;
  direction: ltr;
}

/* PADDING */

.CodeMirror-lines {
  padding: 4px 0; /* Vertical padding around content */
}
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  padding: 0 4px; /* Horizontal padding of content */
}

.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  background-color: white; /* The little square between H and V scrollbars */
}

/* GUTTER */

.CodeMirror-gutters {
  border-right: 1px solid #ddd;
  background-color: #f7f7f7;
  white-space: nowrap;
}
.CodeMirror-linenumbers {}
.CodeMirror-linenumber {
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right;
  color: #999;
  white-space: nowrap;
}

.CodeMirror-guttermarker { color: black; }
.CodeMirror-guttermarker-subtle { color: #999; }

/* CURSOR */

.CodeMirror-cursor {
  border-left: 1px solid black;
  border-right: none;
  width: 0;
}
/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid silver;
}
.cm-fat-cursor .CodeMirror-cursor {
  width: auto;
  border: 0 !important;
  background: #7e7;
}
.cm-fat-cursor div.CodeMirror-cursors {
  z-index: 1;
}
.cm-fat-cursor .CodeMirror-line::selection,
.cm-fat-cursor .CodeMirror-line > span::selection, 
.cm-fat-cursor .CodeMirror-line > span > span::selection { background: transparent; }
.cm-fat-cursor .CodeMirror-line::-moz-selection,
.cm-fat-cursor .CodeMirror-line > span::-moz-selection,
.cm-fat-cursor .CodeMirror-line > span > span::-moz-selection { background: transparent; }
.cm-fat-cursor { caret-color: transparent; }
@keyframes blink {
  0% {}
  50% { background-color: transparent; }
  100% {}
}

/* Can style cursor different in overwrite (non-insert) mode */
.CodeMirror-overwrite .CodeMirror-cursor {}

.cm-tab { display: inline-block; text-decoration: inherit; }

.CodeMirror-rulers {
  position: absolute;
  left: 0; right: 0; top: -50px; bottom: 0;
  overflow: hidden;
}
.CodeMirror-ruler {
  border-left: 1px solid #ccc;
  top: 0; bottom: 0;
  position: absolute;
}

/* DEFAULT THEME */

.cm-s-default .cm-header {color: blue;}
.cm-s-default .cm-quote {color: #090;}
.cm-negative {color: #d44;}
.cm-positive {color: #292;}
.cm-header, .cm-strong {font-weight: bold;}
.cm-em {font-style: italic;}
.cm-link {text-decoration: underline;}
.cm-strikethrough {text-decoration: line-through;}

.cm-s-default .cm-keyword {color: #708;}
.cm-s-default .cm-atom {color: #219;}
.cm-s-default .cm-number {color: #164;}
.cm-s-default .cm-def {color: #00f;}
.cm-s-default .cm-variable,
.cm-s-default .cm-punctuation,
.cm-s-default .cm-property,
.cm-s-default .cm-operator {}
.cm-s-default .cm-variable-2 {color: #05a;}
.cm-s-default .cm-variable-3, .cm-s-default .cm-type {color: #085;}
.cm-s-default .cm-comment {color: #a50;}
.cm-s-default .cm-string {color: #a11;}
.cm-s-default .cm-string-2 {color: #f50;}
.cm-s-default .cm-meta {color: #555;}
.cm-s-default .cm-qualifier {color: #555;}
.cm-s-default .cm-builtin {color: #30a;}
.cm-s-default .cm-bracket {color: #997;}
.cm-s-default .cm-tag {color: #170;}
.cm-s-default .cm-attribute {color: #00c;}
.cm-s-default .cm-hr {color: #999;}
.cm-s-default .cm-link {color: #00c;}

.cm-s-default .cm-error {color: #f00;}
.cm-invalidchar {color: #f00;}

.CodeMirror-composing { border-bottom: 2px solid; }

/* Default styles for common addons */

div.CodeMirror span.CodeMirror-matchingbracket {color: #0b0;}
div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #a22;}
.CodeMirror-matchingtag { background: rgba(255, 150, 0, .3); }
.CodeMirror-activeline-background {background: #e8f2ff;}

/* STOP */

/* The rest of this file contains styles related to the mechanics of
   the editor. You probably shouldn't touch them. */

.CodeMirror {
  position: relative;
  overflow: hidden;
  background: white;
}

.CodeMirror-scroll {
  overflow: scroll !important; /* Things will break if this is overridden */
  /* 50px is the magic margin used to hide the element's real scrollbars */
  /* See overflow: hidden in .CodeMirror */
  margin-bottom: -50px; margin-right: -50px;
  padding-bottom: 50px;
  height: 100%;
  outline: none; /* Prevent dragging from highlighting the element */
  position: relative;
  z-index: 0;
}
.CodeMirror-sizer {
  position: relative;
  border-right: 50px solid transparent;
}

/* The fake, visible scrollbars. Used to force redraw during scrolling
   before actual scrolling happens, thus preventing shaking and
   flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  position: absolute;
  z-index: 6;
  display: none;
  outline: none;
}
.CodeMirror-vscrollbar {
  right: 0; top: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}
.CodeMirror-hscrollbar {
  bottom: 0; left: 0;
  overflow-y: hidden;
  overflow-x: scroll;
}
.CodeMirror-scrollbar-filler {
  right: 0; bottom: 0;
}
.CodeMirror-gutter-filler {
  left: 0; bottom: 0;
}

.CodeMirror-gutters {
  position: absolute; left: 0; top: 0;
  min-height: 100%;
  z-index: 3;
}
.CodeMirror-gutter {
  white-space: normal;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: -50px;
}
.CodeMirror-gutter-wrapper {
  position: absolute;
  z-index: 4;
  background: none !important;
  border: none !important;
}
.CodeMirror-gutter-background {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 4;
}
.CodeMirror-gutter-elt {
  position: absolute;
  cursor: default;
  z-index: 4;
}
.CodeMirror-gutter-wrapper ::selection { background-color: transparent }
.CodeMirror-gutter-wrapper ::-moz-selection { background-color: transparent }

.CodeMirror-lines {
  cursor: text;
  min-height: 1px; /* prevents collapsing before first draw */
}
.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  /* Reset some styles that the rest of the page might have set */ border-radius: 0;
  border-width: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  white-space: pre;
  word-wrap: normal;
  line-height: inherit;
  color: inherit;
  z-index: 2;
  position: relative;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  font-variant-ligatures: contextual;
}
.CodeMirror-wrap pre.CodeMirror-line,
.CodeMirror-wrap pre.CodeMirror-line-like {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: normal;
}

.CodeMirror-linebackground {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 0;
}

.CodeMirror-linewidget {
  position: relative;
  z-index: 2;
  padding: 0.1px; /* Force widget margins to stay inside of the container */
}

.CodeMirror-widget {}

.CodeMirror-rtl pre { direction: rtl; }

.CodeMirror-code {
  outline: none;
}

/* Force content-box sizing for the elements where we expect it */
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
  box-sizing: content-box;
}

.CodeMirror-measure {
  position: absolute;
  width: 100%;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.CodeMirror-cursor {
  position: absolute;
  pointer-events: none;
}
.CodeMirror-measure pre { position: static; }

div.CodeMirror-cursors {
  visibility: hidden;
  position: relative;
  z-index: 3;
}
div.CodeMirror-dragcursors {
  visibility: visible;
}

.CodeMirror-focused div.CodeMirror-cursors {
  visibility: visible;
}

.CodeMirror-selected { background: #d9d9d9; }
.CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
.CodeMirror-crosshair { cursor: crosshair; }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }

.cm-searching {
  background-color: #ffa;
  background-color: rgba(255, 255, 0, .4);
}

/* Used to force a border model for a node */
.cm-force-border { padding-right: .1px; }

@media print {
  /* Hide the cursor when printing */
  .CodeMirror div.CodeMirror-cursors {
    visibility: hidden;
  }
}

/* See issue #2901 */
.cm-tab-wrap-hack:after { content: ''; }

/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext { background: none; }

/* The lint marker gutter */
.CodeMirror-lint-markers {
  width: 16px;
}

.CodeMirror-lint-tooltip {
  background-color: #ffd;
  border: 1px solid black;
  border-radius: 4px 4px 4px 4px;
  color: black;
  font-family: monospace;
  font-size: 10pt;
  overflow: hidden;
  padding: 2px 5px;
  position: fixed;
  white-space: pre;
  white-space: pre-wrap;
  z-index: 100;
  max-width: 600px;
  opacity: 0;
  transition: opacity .4s;
  -moz-transition: opacity .4s;
  -webkit-transition: opacity .4s;
  -o-transition: opacity .4s;
  -ms-transition: opacity .4s;
}

.CodeMirror-lint-mark {
  background-position: left bottom;
  background-repeat: repeat-x;
}

.CodeMirror-lint-mark-warning {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=");
}

.CodeMirror-lint-mark-error {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==");
}

.CodeMirror-lint-marker {
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  display: inline-block;
  height: 16px;
  width: 16px;
  vertical-align: middle;
  position: relative;
}

.CodeMirror-lint-message {
  padding-left: 18px;
  background-position: top left;
  background-repeat: no-repeat;
}

.CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=");
}

.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII=");
}

.CodeMirror-lint-marker-multiple {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC");
  background-repeat: no-repeat;
  background-position: right bottom;
  width: 100%; height: 100%;
}

.CodeMirror-lint-line-error {
  background-color: rgba(183, 76, 81, 0.08);
}

.CodeMirror-lint-line-warning {
  background-color: rgba(255, 211, 0, 0.1);
}

/*! jQuery UI - v1.14.2 - 2026-01-28
* https://jqueryui.com
* Includes: core.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, draggable.css, resizable.css, progressbar.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
* To view and modify this theme, visit https://jqueryui.com/themeroller/?ffDefault=Arial%2CHelvetica%2Csans-serif&fsDefault=1em&fwDefault=normal&cornerRadius=3px&bgColorHeader=e9e9e9&bgTextureHeader=flat&borderColorHeader=dddddd&fcHeader=333333&iconColorHeader=444444&bgColorContent=ffffff&bgTextureContent=flat&borderColorContent=dddddd&fcContent=333333&iconColorContent=444444&bgColorDefault=f6f6f6&bgTextureDefault=flat&borderColorDefault=c5c5c5&fcDefault=454545&iconColorDefault=777777&bgColorHover=ededed&bgTextureHover=flat&borderColorHover=cccccc&fcHover=2b2b2b&iconColorHover=555555&bgColorActive=007fff&bgTextureActive=flat&borderColorActive=003eff&fcActive=ffffff&iconColorActive=ffffff&bgColorHighlight=fffa90&bgTextureHighlight=flat&borderColorHighlight=dad55e&fcHighlight=777620&iconColorHighlight=777620&bgColorError=fddfdf&bgTextureError=flat&borderColorError=f1a899&fcError=5f3f3f&iconColorError=cc0000&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=666666&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=5px&offsetTopShadow=0px&offsetLeftShadow=0px&cornerRadiusShadow=8px
* Copyright OpenJS Foundation and other contributors; Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
}

.ui-front {
	z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
	cursor: default !important;
	pointer-events: none;
}


/* Icons
----------------------------------*/
.ui-icon {
	display: inline-block;
	vertical-align: middle;
	margin-top: -.25em;
	position: relative;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
}

.ui-widget-icon-block {
	left: 50%;
	margin-left: -8px;
	display: block;
}

/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ui-accordion .ui-accordion-header {
	display: block;
	cursor: pointer;
	position: relative;
	margin: 2px 0 0 0;
	padding: .5em .5em .5em .7em;
	font-size: 100%;
}
.ui-accordion .ui-accordion-content {
	padding: 1em 2.2em;
	border-top: 0;
	overflow: auto;
}
.ui-autocomplete {
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
}
.ui-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
	outline: 0;
}
.ui-menu .ui-menu {
	position: absolute;
}
.ui-menu .ui-menu-item {
	margin: 0;
	cursor: pointer;
}
.ui-menu .ui-menu-item-wrapper {
	position: relative;
	padding: 3px 1em 3px .4em;
}
.ui-menu .ui-menu-divider {
	margin: 5px 0;
	height: 0;
	font-size: 0;
	line-height: 0;
	border-width: 1px 0 0 0;
}
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
	margin: -1px;
}

/* icon support */
.ui-menu-icons {
	position: relative;
}
.ui-menu-icons .ui-menu-item-wrapper {
	padding-left: 2em;
}

/* left-aligned */
.ui-menu .ui-icon {
	position: absolute;
	top: 0;
	bottom: 0;
	left: .2em;
	margin: auto 0;
}

/* right-aligned */
.ui-menu .ui-menu-icon {
	left: auto;
	right: 0;
}
.ui-button {
	padding: .4em 1em;
	display: inline-block;
	position: relative;
	line-height: normal;
	margin-right: .1em;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;
	-webkit-user-select: none;
	user-select: none;
}

.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
	text-decoration: none;
}

/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
	width: 2em;
	box-sizing: border-box;
	text-indent: -9999px;
	white-space: nowrap;
}

/* no icon support for input elements */
input.ui-button.ui-button-icon-only {
	text-indent: 0;
}

/* button icon element(s) */
.ui-button-icon-only .ui-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -8px;
	margin-left: -8px;
}

.ui-button.ui-icon-notext .ui-icon {
	padding: 0;
	width: 2.1em;
	height: 2.1em;
	text-indent: -9999px;
	white-space: nowrap;

}

input.ui-button.ui-icon-notext .ui-icon {
	width: auto;
	height: auto;
	text-indent: 0;
	white-space: normal;
	padding: .4em 1em;
}

/* workarounds */
/* Support: Firefox 5 - 125+ */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
	border: 0;
	padding: 0;
}
.ui-controlgroup {
	vertical-align: middle;
	display: inline-block;
}
.ui-controlgroup > .ui-controlgroup-item {
	float: left;
	margin-left: 0;
	margin-right: 0;
}
.ui-controlgroup > .ui-controlgroup-item:focus,
.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
	z-index: 9999;
}
.ui-controlgroup-vertical > .ui-controlgroup-item {
	display: block;
	float: none;
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;
}
.ui-controlgroup-vertical .ui-controlgroup-item {
	box-sizing: border-box;
}
.ui-controlgroup .ui-controlgroup-label {
	padding: .4em 1em;
}
.ui-controlgroup .ui-controlgroup-label span {
	font-size: 80%;
}
.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
	border-left: none;
}
.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
	border-top: none;
}
.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
	border-right: none;
}
.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
	border-bottom: none;
}

/* Spinner specific style fixes */
.ui-controlgroup-vertical .ui-spinner-input {
	width: calc( 100% - 2.4em );
}
.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
	border-top-style: solid;
}

.ui-checkboxradio-label .ui-icon-background {
	box-shadow: inset 1px 1px 1px #ccc;
	border-radius: .12em;
	border: none;
}
.ui-checkboxradio-radio-label .ui-icon-background {
	width: 16px;
	height: 16px;
	border-radius: 1em;
	overflow: visible;
	border: none;
}
.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
	background-image: none;
	width: 8px;
	height: 8px;
	border-width: 4px;
	border-style: solid;
}
.ui-checkboxradio-disabled {
	pointer-events: none;
}
.ui-datepicker {
	width: 17em;
	padding: .2em .2em 0;
	display: none;
}
.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: .2em 0;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 2px;
	width: 1.8em;
	height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
	left: 2px;
}
.ui-datepicker .ui-datepicker-next {
	right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
	left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
	right: 1px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -8px;
	top: 50%;
	margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
	margin: 0 2.3em;
	line-height: 1.8em;
	text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
	font-size: 1em;
	margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	width: 45%;
}
.ui-datepicker table {
	width: 100%;
	font-size: .9em;
	border-collapse: collapse;
	margin: 0 0 .4em;
}
.ui-datepicker th {
	padding: .7em .3em;
	text-align: center;
	font-weight: bold;
	border: 0;
}
.ui-datepicker td {
	border: 0;
	padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
	display: block;
	padding: .2em;
	text-align: right;
	text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
	background-image: none;
	margin: .7em 0 0 0;
	padding: 0 .2em;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
	float: right;
	margin: .5em .2em .4em;
	cursor: pointer;
	padding: .2em .6em .3em .6em;
	width: auto;
	overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
	float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
	width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
	float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
	width: 95%;
	margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
	width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
	width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
	width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
	border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
	clear: left;
}
.ui-datepicker-row-break {
	clear: both;
	width: 100%;
	font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
	direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
	right: 2px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
	left: 2px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
	right: 1px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
	left: 1px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
	clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
	float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
	float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
	border-right-width: 0;
	border-left-width: 1px;
}

/* Icons */
.ui-datepicker .ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
	left: .5em;
	top: .3em;
}
.ui-dialog {
	position: absolute;
	top: 0;
	left: 0;
	padding: .2em;
	outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
	padding: .4em 1em;
	position: relative;
}
.ui-dialog .ui-dialog-title {
	float: left;
	margin: .1em 0;
	white-space: nowrap;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	right: .3em;
	top: 50%;
	width: 20px;
	margin: -10px 0 0 0;
	padding: 1px;
	height: 20px;
}
.ui-dialog .ui-dialog-content {
	position: relative;
	border: 0;
	padding: .5em 1em;
	background: none;
	overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
	text-align: left;
	border-width: 1px 0 0 0;
	background-image: none;
	margin-top: .5em;
	padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
	margin: .5em .4em .5em 0;
	cursor: pointer;
}
.ui-dialog .ui-resizable-n {
	height: 2px;
	top: 0;
}
.ui-dialog .ui-resizable-e {
	width: 2px;
	right: 0;
}
.ui-dialog .ui-resizable-s {
	height: 2px;
	bottom: 0;
}
.ui-dialog .ui-resizable-w {
	width: 2px;
	left: 0;
}
.ui-dialog .ui-resizable-se,
.ui-dialog .ui-resizable-sw,
.ui-dialog .ui-resizable-ne,
.ui-dialog .ui-resizable-nw {
	width: 7px;
	height: 7px;
}
.ui-dialog .ui-resizable-se {
	right: 0;
	bottom: 0;
}
.ui-dialog .ui-resizable-sw {
	left: 0;
	bottom: 0;
}
.ui-dialog .ui-resizable-ne {
	right: 0;
	top: 0;
}
.ui-dialog .ui-resizable-nw {
	left: 0;
	top: 0;
}
.ui-draggable .ui-dialog-titlebar {
	cursor: move;
}
.ui-draggable-handle {
	touch-action: none;
}
.ui-resizable {
	position: relative;
}
.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
	touch-action: none;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
	display: none;
}
.ui-resizable-n {
	cursor: n-resize;
	height: 7px;
	width: 100%;
	top: -5px;
	left: 0;
}
.ui-resizable-s {
	cursor: s-resize;
	height: 7px;
	width: 100%;
	bottom: -5px;
	left: 0;
}
.ui-resizable-e {
	cursor: e-resize;
	width: 7px;
	right: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-w {
	cursor: w-resize;
	width: 7px;
	left: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-se {
	cursor: se-resize;
	width: 12px;
	height: 12px;
	right: 1px;
	bottom: 1px;
}
.ui-resizable-sw {
	cursor: sw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	bottom: -5px;
}
.ui-resizable-nw {
	cursor: nw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	top: -5px;
}
.ui-resizable-ne {
	cursor: ne-resize;
	width: 9px;
	height: 9px;
	right: -5px;
	top: -5px;
}
.ui-progressbar {
	height: 2em;
	text-align: left;
	overflow: hidden;
}
.ui-progressbar .ui-progressbar-value {
	margin: -1px;
	height: 100%;
}
.ui-progressbar .ui-progressbar-overlay {
	background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
	height: 100%;
	opacity: 0.25;
}
.ui-progressbar-indeterminate .ui-progressbar-value {
	background-image: none;
}
.ui-selectable {
	touch-action: none;
}
.ui-selectable-helper {
	position: absolute;
	z-index: 100;
	border: 1px dotted black;
}
.ui-selectmenu-menu {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.ui-selectmenu-menu .ui-menu {
	overflow: auto;
	overflow-x: hidden;
	padding-bottom: 1px;
}
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
	font-size: 1em;
	font-weight: bold;
	line-height: 1.5;
	padding: 2px 0.4em;
	margin: 0.5em 0 0 0;
	height: auto;
	border: 0;
}
.ui-selectmenu-open {
	display: block;
}
.ui-selectmenu-text {
	display: block;
	margin-right: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-selectmenu-button.ui-button {
	text-align: left;
	white-space: nowrap;
	width: 14em;
}
.ui-selectmenu-icon.ui-icon {
	float: right;
	margin-top: 0;
}
.ui-slider {
	position: relative;
	text-align: left;
}
.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1.2em;
	height: 1.2em;
	cursor: pointer;
	touch-action: none;
}
.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
	background-position: 0 0;
}

.ui-slider-horizontal {
	height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
	top: -.3em;
	margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}

.ui-slider-vertical {
	width: .8em;
	height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
	left: -.3em;
	margin-left: 0;
	margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
	left: 0;
	width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
	bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
	top: 0;
}
.ui-sortable-handle {
	touch-action: none;
}
.ui-spinner {
	position: relative;
	display: inline-block;
	overflow: hidden;
	padding: 0;
	vertical-align: middle;
}
.ui-spinner-input {
	border: none;
	background: none;
	color: inherit;
	padding: .222em 0;
	margin: .2em 0;
	vertical-align: middle;
	margin-left: .4em;
	margin-right: 2em;
}
.ui-spinner-button {
	width: 1.6em;
	height: 50%;
	font-size: .5em;
	padding: 0;
	margin: 0;
	text-align: center;
	position: absolute;
	cursor: default;
	display: block;
	overflow: hidden;
	right: 0;
}
/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
	border-top-style: none;
	border-bottom-style: none;
	border-right-style: none;
}
.ui-spinner-up {
	top: 0;
}
.ui-spinner-down {
	bottom: 0;
}
.ui-tabs {
	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
	padding: .2em;
}
.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 1px .2em 0 0;
	border-bottom-width: 0;
	padding: 0;
	white-space: nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	float: left;
	padding: .5em 1em;
	text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	margin-bottom: -1px;
	padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
	cursor: text;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	border-width: 0;
	padding: 1em 1.4em;
	background: none;
}
.ui-tooltip {
	padding: 8px;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
}
body .ui-tooltip {
	border-width: 2px;
}
/* Component containers
----------------------------------*/
.ui-widget {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 1em;
}
.ui-widget .ui-widget {
	font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: Arial,Helvetica,sans-serif;
	font-size: 1em;
}
.ui-widget.ui-widget-content {
	border: 1px solid #c5c5c5;
}
.ui-widget-content {
	border: 1px solid #dddddd;
	background: #ffffff;
	color: #333333;
}
.ui-widget-content a {
	color: #333333;
}
.ui-widget-header {
	border: 1px solid #dddddd;
	background: #e9e9e9;
	color: #333333;
	font-weight: bold;
}
.ui-widget-header a {
	color: #333333;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,

/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
	border: 1px solid #c5c5c5;
	background: #f6f6f6;
	font-weight: normal;
	color: #454545;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
	color: #454545;
	text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
	border: 1px solid #cccccc;
	background: #ededed;
	font-weight: normal;
	color: #2b2b2b;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
a.ui-button:hover,
a.ui-button:focus {
	color: #2b2b2b;
	text-decoration: none;
}

.ui-visual-focus {
	box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid #003eff;
	background: #007fff;
	font-weight: normal;
	color: #ffffff;
}
.ui-icon-background,
.ui-state-active .ui-icon-background {
	border: #003eff;
	background-color: #ffffff;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	color: #ffffff;
	text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 1px solid #dad55e;
	background: #fffa90;
	color: #777620;
}
.ui-state-checked {
	border: 1px solid #dad55e;
	background: #fffa90;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
	color: #777620;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
	border: 1px solid #f1a899;
	background: #fddfdf;
	color: #5f3f3f;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
	color: #5f3f3f;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
	color: #5f3f3f;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
	font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
	opacity: .7;
	font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
	opacity: .35;
	background-image: none;
}

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	width: 16px;
	height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
	background-image: url("../../lib/css/images/ui-icons_444444_256x240.9ea3688dd14b.png");
}
.ui-widget-header .ui-icon {
	background-image: url("../../lib/css/images/ui-icons_444444_256x240.9ea3688dd14b.png");
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon {
	background-image: url("../../lib/css/images/ui-icons_555555_256x240.f128fc2429c1.png");
}
.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
	background-image: url("../../lib/css/images/ui-icons_ffffff_256x240.3618dcc5eaff.png");
}
.ui-state-highlight .ui-icon,
.ui-button .ui-state-highlight.ui-icon {
	background-image: url("../../lib/css/images/ui-icons_777620_256x240.4fdc8626424a.png");
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
	background-image: url("../../lib/css/images/ui-icons_cc0000_256x240.d786c8f5275d.png");
}
.ui-button .ui-icon {
	background-image: url("../../lib/css/images/ui-icons_777777_256x240.729e0dc348f1.png");
}

/* positioning */
/* Three classes needed to override `.ui-button:hover .ui-icon` */
.ui-icon-blank.ui-icon-blank.ui-icon-blank {
	background-image: none;
}
.ui-icon-caret-1-n { background-position: 0 0; }
.ui-icon-caret-1-ne { background-position: -16px 0; }
.ui-icon-caret-1-e { background-position: -32px 0; }
.ui-icon-caret-1-se { background-position: -48px 0; }
.ui-icon-caret-1-s { background-position: -65px 0; }
.ui-icon-caret-1-sw { background-position: -80px 0; }
.ui-icon-caret-1-w { background-position: -96px 0; }
.ui-icon-caret-1-nw { background-position: -112px 0; }
.ui-icon-caret-2-n-s { background-position: -128px 0; }
.ui-icon-caret-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -65px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -65px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 1px -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-on { background-position: -96px -144px; }
.ui-icon-radio-off { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }


/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 3px;
}

/* Overlays */
.ui-widget-overlay {
	background: #aaaaaa;
	opacity: .3;
}
.ui-widget-shadow {
	box-shadow: 0px 0px 5px #666666;
}

:root:not([data-ink-color-scheme]),
[data-ink-color-scheme=light] {
  --if-high-contrast:  ;
  --if-dark:  ;
  --if-dark-only:  ;
  --if-light: initial;
  color-scheme: light
}
:root[data-ink-color-scheme=dark],
[data-ink-color-scheme=dark] {
  --if-high-contrast:  ;
  --if-dark: initial;
  --if-dark-only: initial;
  --if-light:  ;
  color-scheme: dark light
}
:root[data-ink-color-scheme=high-contrast],
[data-ink-color-scheme=high-contrast] {
  --if-high-contrast: initial;
  --if-dark: initial;
  --if-dark-only:  ;
  --if-light:  ;
  color-scheme: dark light
}
@media (prefers-color-scheme:light) {
  [data-ink-color-scheme=system] {
    --if-dark:  ;
    --if-dark-only:  ;
    --if-high-contrast:  ;
    --if-light: initial;
    color-scheme: light
  }
}
@media (prefers-color-scheme:dark) {
  [data-ink-color-scheme=system] {
    --if-dark: initial;
    --if-dark-only: initial;
    --if-light:  ;
    color-scheme: dark light
  }
}
@media (prefers-contrast:more) {
  [data-ink-color-scheme=system] {
    --if-dark: initial;
    --if-dark-only:  ;
    --if-high-contrast: initial;
    --if-light:  ;
    color-scheme: dark light
  }
}
:root {
  --ink-p-light__black: #000000;
  --ink-p-light__white: #FFFFFF;
  --ink-p-light__grey-100: #F9F9F9;
  --ink-p-light__grey-150: #F3F3F3;
  --ink-p-light__grey-200: #E9E9E9;
  --ink-p-light__grey-300: #D0D0D0;
  --ink-p-light__grey-400: #C0C0C0;
  --ink-p-light__grey-450: #B1AFAF;
  --ink-p-light__grey-500: #999999;
  --ink-p-light__grey-600: #777777;
  --ink-p-light__grey-700: #555555;
  --ink-p-light__grey-800: #444444;
  --ink-p-light__grey-900: #333333;
  --ink-p-light__blue-100: #F2FAFF;
  --ink-p-light__blue-200: #DAEBFF;
  --ink-p-light__blue-300: #D0E6FF;
  --ink-p-light__blue-400: #B0D0FF;
  --ink-p-light__blue-500: #88B9FF;
  --ink-p-light__blue-600: #4A90E2;
  --ink-p-light__blue-700: #0174E8;
  --ink-p-light__blue-800: #124BBD;
  --ink-p-light__blue-900: #102640;
  --ink-p-light__brown-100: #FEE7D4;
  --ink-p-light__brown-200: #F2CDB4;
  --ink-p-light__brown-300: #DCAC8E;
  --ink-p-light__brown-400: #C88E6B;
  --ink-p-light__brown-500: #A9704F;
  --ink-p-light__brown-600: #895A40;
  --ink-p-light__brown-700: #6B450F;
  --ink-p-light__brown-800: #57370B;
  --ink-p-light__brown-900: #4B320F;
  --ink-p-light__cool-grey-100: #F8F9FB;
  --ink-p-light__cool-grey-200: #E4E9EF;
  --ink-p-light__cool-grey-300: #C4CFDC;
  --ink-p-light__cool-grey-400: #B0BFD0;
  --ink-p-light__cool-grey-500: #8097B3;
  --ink-p-light__cool-grey-600: #597595;
  --ink-p-light__cool-grey-700: #40546A;
  --ink-p-light__cool-grey-800: #334355;
  --ink-p-light__cool-grey-900: #263240;
  --ink-p-light__cyan-100: #F1FDFF;
  --ink-p-light__cyan-200: #C8F8FF;
  --ink-p-light__cyan-300: #8DF0FF;
  --ink-p-light__cyan-400: #49E2FA;
  --ink-p-light__cyan-500: #03BCD9;
  --ink-p-light__cyan-600: #0194AB;
  --ink-p-light__cyan-700: #036F80;
  --ink-p-light__cyan-800: #004A55;
  --ink-p-light__cyan-900: #013239;
  --ink-p-light__green-100: #EDFBDD;
  --ink-p-light__green-200: #D1F5A9;
  --ink-p-light__green-300: #93EE6F;
  --ink-p-light__green-400: #65E62D;
  --ink-p-light__green-500: #49BB18;
  --ink-p-light__green-600: #479623;
  --ink-p-light__green-700: #357915;
  --ink-p-light__green-800: #226611;
  --ink-p-light__green-900: #0D570D;
  --ink-p-light__mustard-100: #FCF9E9;
  --ink-p-light__mustard-200: #F1E9BE;
  --ink-p-light__mustard-300: #E5DA9A;
  --ink-p-light__mustard-400: #E0CF7B;
  --ink-p-light__mustard-500: #D0BD30;
  --ink-p-light__mustard-600: #BCA626;
  --ink-p-light__mustard-700: #9D8B06;
  --ink-p-light__mustard-800: #7A7012;
  --ink-p-light__mustard-900: #575022;
  --ink-p-light__red-100: #FFE0E5;
  --ink-p-light__red-200: #F6A8A8;
  --ink-p-light__red-300: #F06C6C;
  --ink-p-light__red-400: #EA3939;
  --ink-p-light__red-500: #DE1717;
  --ink-p-light__red-600: #C10E0E;
  --ink-p-light__red-700: #A31111;
  --ink-p-light__red-800: #7E0D0D;
  --ink-p-light__red-900: #610A0A;
  --ink-p-light__yellow-100: #FFFBE9;
  --ink-p-light__yellow-200: #FFF7CD;
  --ink-p-light__yellow-300: #FFF4B0;
  --ink-p-light__yellow-400: #FFEF72;
  --ink-p-light__yellow-500: #FFEB35;
  --ink-p-light__yellow-600: #F9E000;
  --ink-p-light__yellow-700: #F0D800;
  --ink-p-light__yellow-800: #D3BE00;
  --ink-p-light__yellow-900: #AD9C00;
  --ink-p-dark__black: #000000;
  --ink-p-dark__white: #FFFFFF;
  --ink-p-dark__grey-100: #333333;
  --ink-p-dark__grey-150: #4C4C4C;
  --ink-p-dark__grey-200: #444444;
  --ink-p-dark__grey-300: #555555;
  --ink-p-dark__grey-400: #777777;
  --ink-p-dark__grey-450: #999999;
  --ink-p-dark__grey-500: #B1AFAF;
  --ink-p-dark__grey-600: #C0C0C0;
  --ink-p-dark__grey-700: #D0D0D0;
  --ink-p-dark__grey-800: #E9E9E9;
  --ink-p-dark__grey-900: #F9F9F9;
  --ink-p-dark__blue-100: #102640;
  --ink-p-dark__blue-200: #124BBD;
  --ink-p-dark__blue-300: #2378DB;
  --ink-p-dark__blue-400: #4A90E2;
  --ink-p-dark__blue-500: #88B9FF;
  --ink-p-dark__blue-600: #B0D0FF;
  --ink-p-dark__blue-700: #D0E6FF;
  --ink-p-dark__blue-800: #DAEBFF;
  --ink-p-dark__blue-900: #F2FAFF;
  --ink-p-dark__brown-100: #4B320F;
  --ink-p-dark__brown-200: #57370B;
  --ink-p-dark__brown-300: #6B450F;
  --ink-p-dark__brown-400: #895A40;
  --ink-p-dark__brown-500: #A9704F;
  --ink-p-dark__brown-600: #C88E6B;
  --ink-p-dark__brown-700: #DCAC8E;
  --ink-p-dark__brown-800: #F2CDB4;
  --ink-p-dark__brown-900: #FEE7D4;
  --ink-p-dark__cool-grey-100: #263240;
  --ink-p-dark__cool-grey-200: #334355;
  --ink-p-dark__cool-grey-300: #40546A;
  --ink-p-dark__cool-grey-400: #597595;
  --ink-p-dark__cool-grey-500: #8097B3;
  --ink-p-dark__cool-grey-600: #B0BFD0;
  --ink-p-dark__cool-grey-700: #C4CFDC;
  --ink-p-dark__cool-grey-800: #E4E9EF;
  --ink-p-dark__cool-grey-900: #F8F9FB;
  --ink-p-dark__cyan-100: #013239;
  --ink-p-dark__cyan-200: #004A55;
  --ink-p-dark__cyan-300: #036F80;
  --ink-p-dark__cyan-400: #0194AB;
  --ink-p-dark__cyan-500: #03BCD9;
  --ink-p-dark__cyan-600: #49E2FA;
  --ink-p-dark__cyan-700: #8DF0FF;
  --ink-p-dark__cyan-800: #C8F8FF;
  --ink-p-dark__cyan-900: #F1FDFF;
  --ink-p-dark__green-100: #0D570D;
  --ink-p-dark__green-200: #226611;
  --ink-p-dark__green-300: #357915;
  --ink-p-dark__green-400: #479623;
  --ink-p-dark__green-500: #49BB18;
  --ink-p-dark__green-600: #65E62D;
  --ink-p-dark__green-700: #93EE6F;
  --ink-p-dark__green-800: #D1F5A9;
  --ink-p-dark__green-900: #EDFBDD;
  --ink-p-dark__mustard-100: #575022;
  --ink-p-dark__mustard-200: #7A7012;
  --ink-p-dark__mustard-300: #9D8B06;
  --ink-p-dark__mustard-400: #BCA626;
  --ink-p-dark__mustard-500: #D0BD30;
  --ink-p-dark__mustard-600: #E0CF7B;
  --ink-p-dark__mustard-700: #E5DA9A;
  --ink-p-dark__mustard-800: #F1E9BE;
  --ink-p-dark__mustard-900: #FCF9E9;
  --ink-p-dark__red-100: #610A0A;
  --ink-p-dark__red-200: #7E0D0D;
  --ink-p-dark__red-300: #A31111;
  --ink-p-dark__red-400: #C10E0E;
  --ink-p-dark__red-500: #DE1717;
  --ink-p-dark__red-600: #EA3939;
  --ink-p-dark__red-700: #F06C6C;
  --ink-p-dark__red-800: #F6A8A8;
  --ink-p-dark__red-900: #FFE0E5;
  --ink-p-dark__yellow-100: #AD9C00;
  --ink-p-dark__yellow-200: #D3BE00;
  --ink-p-dark__yellow-300: #F0D800;
  --ink-p-dark__yellow-400: #F9E000;
  --ink-p-dark__yellow-500: #FFEB35;
  --ink-p-dark__yellow-600: #FFEF72;
  --ink-p-dark__yellow-700: #FFF4B0;
  --ink-p-dark__yellow-800: #FFF7CD;
  --ink-p-dark__yellow-900: #FFFBE9;
  --ink-c-data-table-border-color: var(--if-dark, var(--ink-p-container-border-color)) var(--if-light, var(--ink-p-container-border-color));
  --ink-c-data-table-border: var(--ink-u-border-thin) var(--ink-c-data-table-border-color) solid;
  --ink-c-data-table-cell-padding-vert: var(--ink-u-spacing-s);
  --ink-c-data-table-cell-padding-horiz: var(--ink-u-spacing-sm);
  --ink-c-data-table-cell-padding: var(--ink-c-data-table-cell-padding-vert) var(--ink-c-data-table-cell-padding-horiz);
  --ink-c-data-table-header-bg: var(--ink-p-header-bg);
  --ink-c-data-table-header-fg: var(--ink-p-header-fg);
  --ink-c-data-table-header-hover-fg: var(--ink-p-link-fg);
  --ink-c-data-table-body-bg: var(--if-dark, #161616) var(--if-light, white);
  --ink-c-data-table-body-fg: var(--if-dark, var(--ink-p-grey-900)) var(--if-light, var(--ink-p-fg));
  --ink-c-data-table-row-border-color: var(--if-dark, rgba(255, 255, 255, 0.08)) var(--if-light, rgba(0, 0, 0, 0.08));
  --ink-c-data-table-row-border: var(--ink-u-border-thin) var(--ink-c-data-table-row-border-color) solid;
  --ink-c-data-table-row-bg: transparent;
  --ink-c-data-table-row-alt-bg: var(--if-dark, rgba(255, 255, 255, 0.02)) var(--if-light, rgba(0, 0, 0, 0.01));
  --ink-c-data-table-unsort-icon: var(--ink-i-close)
}
:root .ink-i-add {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-add);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-arrow-left {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-arrow-left);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-arrow-left-first {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-arrow-left-first);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-arrow-right {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-arrow-right);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-arrow-right-first {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-arrow-right-first);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-check {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-check);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-circle-arrow-right {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-circle-arrow-right);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-clock {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-clock);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-close {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-close);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-copy {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-copy);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-delete-item {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-delete-item);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-dot {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-dot);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-dropdown {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-dropdown);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-error {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-error);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-help {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-help);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-info {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-info);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-mobile-menu {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-mobile-menu);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-refresh {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-refresh);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-search {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-search);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-settings {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-settings);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-sort-ascending {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-sort-ascending);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-sort-descending {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-sort-descending);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-success {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-success);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-unsort {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-unsort);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-user {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-user);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-vcs-commit {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-vcs-commit);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-warning {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-warning);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-zoom-in {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-zoom-in);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root .ink-i-zoom-out {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-zoom-out);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
:root,
[data-ink-color-scheme] {
  --ink-p-black: var(--if-dark, var(--ink-p-dark__black)) var(--if-light, var(--ink-p-light__black));
  --ink-p-white: var(--if-dark, var(--ink-p-dark__white)) var(--if-light, var(--ink-p-light__white));
  --ink-p-grey-100: var(--if-dark, var(--ink-p-dark__grey-100)) var(--if-light, var(--ink-p-light__grey-100));
  --ink-p-grey-150: var(--if-dark, var(--ink-p-dark__grey-150)) var(--if-light, var(--ink-p-light__grey-150));
  --ink-p-grey-200: var(--if-dark, var(--ink-p-dark__grey-200)) var(--if-light, var(--ink-p-light__grey-200));
  --ink-p-grey-300: var(--if-dark, var(--ink-p-dark__grey-300)) var(--if-light, var(--ink-p-light__grey-300));
  --ink-p-grey-400: var(--if-dark, var(--ink-p-dark__grey-400)) var(--if-light, var(--ink-p-light__grey-400));
  --ink-p-grey-450: var(--if-dark, var(--ink-p-dark__grey-450)) var(--if-light, var(--ink-p-light__grey-450));
  --ink-p-grey-500: var(--if-dark, var(--ink-p-dark__grey-500)) var(--if-light, var(--ink-p-light__grey-500));
  --ink-p-grey-600: var(--if-dark, var(--ink-p-dark__grey-600)) var(--if-light, var(--ink-p-light__grey-600));
  --ink-p-grey-700: var(--if-dark, var(--ink-p-dark__grey-700)) var(--if-light, var(--ink-p-light__grey-700));
  --ink-p-grey-800: var(--if-dark, var(--ink-p-dark__grey-800)) var(--if-light, var(--ink-p-light__grey-800));
  --ink-p-grey-900: var(--if-dark, var(--ink-p-dark__grey-900)) var(--if-light, var(--ink-p-light__grey-900));
  --ink-p-blue-100: var(--if-dark, var(--ink-p-dark__blue-100)) var(--if-light, var(--ink-p-light__blue-100));
  --ink-p-blue-200: var(--if-dark, var(--ink-p-dark__blue-200)) var(--if-light, var(--ink-p-light__blue-200));
  --ink-p-blue-300: var(--if-dark, var(--ink-p-dark__blue-300)) var(--if-light, var(--ink-p-light__blue-300));
  --ink-p-blue-400: var(--if-dark, var(--ink-p-dark__blue-400)) var(--if-light, var(--ink-p-light__blue-400));
  --ink-p-blue-500: var(--if-dark, var(--ink-p-dark__blue-500)) var(--if-light, var(--ink-p-light__blue-500));
  --ink-p-blue-600: var(--if-dark, var(--ink-p-dark__blue-600)) var(--if-light, var(--ink-p-light__blue-600));
  --ink-p-blue-700: var(--if-dark, var(--ink-p-dark__blue-700)) var(--if-light, var(--ink-p-light__blue-700));
  --ink-p-blue-800: var(--if-dark, var(--ink-p-dark__blue-800)) var(--if-light, var(--ink-p-light__blue-800));
  --ink-p-blue-900: var(--if-dark, var(--ink-p-dark__blue-900)) var(--if-light, var(--ink-p-light__blue-900));
  --ink-p-brown-100: var(--if-dark, var(--ink-p-dark__brown-100)) var(--if-light, var(--ink-p-light__brown-100));
  --ink-p-brown-200: var(--if-dark, var(--ink-p-dark__brown-200)) var(--if-light, var(--ink-p-light__brown-200));
  --ink-p-brown-300: var(--if-dark, var(--ink-p-dark__brown-300)) var(--if-light, var(--ink-p-light__brown-300));
  --ink-p-brown-400: var(--if-dark, var(--ink-p-dark__brown-400)) var(--if-light, var(--ink-p-light__brown-400));
  --ink-p-brown-500: var(--if-dark, var(--ink-p-dark__brown-500)) var(--if-light, var(--ink-p-light__brown-500));
  --ink-p-brown-600: var(--if-dark, var(--ink-p-dark__brown-600)) var(--if-light, var(--ink-p-light__brown-600));
  --ink-p-brown-700: var(--if-dark, var(--ink-p-dark__brown-700)) var(--if-light, var(--ink-p-light__brown-700));
  --ink-p-brown-800: var(--if-dark, var(--ink-p-dark__brown-800)) var(--if-light, var(--ink-p-light__brown-800));
  --ink-p-brown-900: var(--if-dark, var(--ink-p-dark__brown-900)) var(--if-light, var(--ink-p-light__brown-900));
  --ink-p-cool-grey-100: var(--if-dark, var(--ink-p-dark__cool-grey-100)) var(--if-light, var(--ink-p-light__cool-grey-100));
  --ink-p-cool-grey-200: var(--if-dark, var(--ink-p-dark__cool-grey-200)) var(--if-light, var(--ink-p-light__cool-grey-200));
  --ink-p-cool-grey-300: var(--if-dark, var(--ink-p-dark__cool-grey-300)) var(--if-light, var(--ink-p-light__cool-grey-300));
  --ink-p-cool-grey-400: var(--if-dark, var(--ink-p-dark__cool-grey-400)) var(--if-light, var(--ink-p-light__cool-grey-400));
  --ink-p-cool-grey-500: var(--if-dark, var(--ink-p-dark__cool-grey-500)) var(--if-light, var(--ink-p-light__cool-grey-500));
  --ink-p-cool-grey-600: var(--if-dark, var(--ink-p-dark__cool-grey-600)) var(--if-light, var(--ink-p-light__cool-grey-600));
  --ink-p-cool-grey-700: var(--if-dark, var(--ink-p-dark__cool-grey-700)) var(--if-light, var(--ink-p-light__cool-grey-700));
  --ink-p-cool-grey-800: var(--if-dark, var(--ink-p-dark__cool-grey-800)) var(--if-light, var(--ink-p-light__cool-grey-800));
  --ink-p-cool-grey-900: var(--if-dark, var(--ink-p-dark__cool-grey-900)) var(--if-light, var(--ink-p-light__cool-grey-900));
  --ink-p-cyan-100: var(--if-dark, var(--ink-p-dark__cyan-100)) var(--if-light, var(--ink-p-light__cyan-100));
  --ink-p-cyan-200: var(--if-dark, var(--ink-p-dark__cyan-200)) var(--if-light, var(--ink-p-light__cyan-200));
  --ink-p-cyan-300: var(--if-dark, var(--ink-p-dark__cyan-300)) var(--if-light, var(--ink-p-light__cyan-300));
  --ink-p-cyan-400: var(--if-dark, var(--ink-p-dark__cyan-400)) var(--if-light, var(--ink-p-light__cyan-400));
  --ink-p-cyan-500: var(--if-dark, var(--ink-p-dark__cyan-500)) var(--if-light, var(--ink-p-light__cyan-500));
  --ink-p-cyan-600: var(--if-dark, var(--ink-p-dark__cyan-600)) var(--if-light, var(--ink-p-light__cyan-600));
  --ink-p-cyan-700: var(--if-dark, var(--ink-p-dark__cyan-700)) var(--if-light, var(--ink-p-light__cyan-700));
  --ink-p-cyan-800: var(--if-dark, var(--ink-p-dark__cyan-800)) var(--if-light, var(--ink-p-light__cyan-800));
  --ink-p-cyan-900: var(--if-dark, var(--ink-p-dark__cyan-900)) var(--if-light, var(--ink-p-light__cyan-900));
  --ink-p-green-100: var(--if-dark, var(--ink-p-dark__green-100)) var(--if-light, var(--ink-p-light__green-100));
  --ink-p-green-200: var(--if-dark, var(--ink-p-dark__green-200)) var(--if-light, var(--ink-p-light__green-200));
  --ink-p-green-300: var(--if-dark, var(--ink-p-dark__green-300)) var(--if-light, var(--ink-p-light__green-300));
  --ink-p-green-400: var(--if-dark, var(--ink-p-dark__green-400)) var(--if-light, var(--ink-p-light__green-400));
  --ink-p-green-500: var(--if-dark, var(--ink-p-dark__green-500)) var(--if-light, var(--ink-p-light__green-500));
  --ink-p-green-600: var(--if-dark, var(--ink-p-dark__green-600)) var(--if-light, var(--ink-p-light__green-600));
  --ink-p-green-700: var(--if-dark, var(--ink-p-dark__green-700)) var(--if-light, var(--ink-p-light__green-700));
  --ink-p-green-800: var(--if-dark, var(--ink-p-dark__green-800)) var(--if-light, var(--ink-p-light__green-800));
  --ink-p-green-900: var(--if-dark, var(--ink-p-dark__green-900)) var(--if-light, var(--ink-p-light__green-900));
  --ink-p-mustard-100: var(--if-dark, var(--ink-p-dark__mustard-100)) var(--if-light, var(--ink-p-light__mustard-100));
  --ink-p-mustard-200: var(--if-dark, var(--ink-p-dark__mustard-200)) var(--if-light, var(--ink-p-light__mustard-200));
  --ink-p-mustard-300: var(--if-dark, var(--ink-p-dark__mustard-300)) var(--if-light, var(--ink-p-light__mustard-300));
  --ink-p-mustard-400: var(--if-dark, var(--ink-p-dark__mustard-400)) var(--if-light, var(--ink-p-light__mustard-400));
  --ink-p-mustard-500: var(--if-dark, var(--ink-p-dark__mustard-500)) var(--if-light, var(--ink-p-light__mustard-500));
  --ink-p-mustard-600: var(--if-dark, var(--ink-p-dark__mustard-600)) var(--if-light, var(--ink-p-light__mustard-600));
  --ink-p-mustard-700: var(--if-dark, var(--ink-p-dark__mustard-700)) var(--if-light, var(--ink-p-light__mustard-700));
  --ink-p-mustard-800: var(--if-dark, var(--ink-p-dark__mustard-800)) var(--if-light, var(--ink-p-light__mustard-800));
  --ink-p-mustard-900: var(--if-dark, var(--ink-p-dark__mustard-900)) var(--if-light, var(--ink-p-light__mustard-900));
  --ink-p-red-100: var(--if-dark, var(--ink-p-dark__red-100)) var(--if-light, var(--ink-p-light__red-100));
  --ink-p-red-200: var(--if-dark, var(--ink-p-dark__red-200)) var(--if-light, var(--ink-p-light__red-200));
  --ink-p-red-300: var(--if-dark, var(--ink-p-dark__red-300)) var(--if-light, var(--ink-p-light__red-300));
  --ink-p-red-400: var(--if-dark, var(--ink-p-dark__red-400)) var(--if-light, var(--ink-p-light__red-400));
  --ink-p-red-500: var(--if-dark, var(--ink-p-dark__red-500)) var(--if-light, var(--ink-p-light__red-500));
  --ink-p-red-600: var(--if-dark, var(--ink-p-dark__red-600)) var(--if-light, var(--ink-p-light__red-600));
  --ink-p-red-700: var(--if-dark, var(--ink-p-dark__red-700)) var(--if-light, var(--ink-p-light__red-700));
  --ink-p-red-800: var(--if-dark, var(--ink-p-dark__red-800)) var(--if-light, var(--ink-p-light__red-800));
  --ink-p-red-900: var(--if-dark, var(--ink-p-dark__red-900)) var(--if-light, var(--ink-p-light__red-900));
  --ink-p-yellow-100: var(--if-dark, var(--ink-p-dark__yellow-100)) var(--if-light, var(--ink-p-light__yellow-100));
  --ink-p-yellow-200: var(--if-dark, var(--ink-p-dark__yellow-200)) var(--if-light, var(--ink-p-light__yellow-200));
  --ink-p-yellow-300: var(--if-dark, var(--ink-p-dark__yellow-300)) var(--if-light, var(--ink-p-light__yellow-300));
  --ink-p-yellow-400: var(--if-dark, var(--ink-p-dark__yellow-400)) var(--if-light, var(--ink-p-light__yellow-400));
  --ink-p-yellow-500: var(--if-dark, var(--ink-p-dark__yellow-500)) var(--if-light, var(--ink-p-light__yellow-500));
  --ink-p-yellow-600: var(--if-dark, var(--ink-p-dark__yellow-600)) var(--if-light, var(--ink-p-light__yellow-600));
  --ink-p-yellow-700: var(--if-dark, var(--ink-p-dark__yellow-700)) var(--if-light, var(--ink-p-light__yellow-700));
  --ink-p-yellow-800: var(--if-dark, var(--ink-p-dark__yellow-800)) var(--if-light, var(--ink-p-light__yellow-800));
  --ink-p-yellow-900: var(--if-dark, var(--ink-p-dark__yellow-900)) var(--if-light, var(--ink-p-light__yellow-900));
  --ink-p-surface-bg: var(--if-dark, #313338) var(--if-light, var(--ink-p-grey-100));
  --ink-p-surface-bright-bg: var(--if-dark, #313338) var(--if-light, var(--ink-p-white));
  --ink-p-surface-dim-bg: var(--if-dark, #313338) var(--if-light, var(--ink-p-grey-200));
  --ink-p-surface-fg: var(--ink-p-fg);
  --ink-p-surface-fg-weak: var(--ink-p-fg-weak);
  --ink-p-container-bg: var(--if-dark, #282828) var(--if-light, var(--ink-p-grey-100));
  --ink-p-container-active-bg: var(--if-dark, rgba(255, 255, 255, 0.12)) var(--if-light, rgba(0, 0, 0, 0.12));
  --ink-p-container-hover-bg: var(--if-dark, rgba(255, 255, 255, 0.05)) var(--if-light, rgba(0, 0, 0, 0.05));
  --ink-p-container-fg: var(--ink-p-surface-fg);
  --ink-p-container-fg-weak: var(--ink-p-surface-fg-weak);
  --ink-p-container-border-color: var(--if-dark, rgba(255, 255, 255, 0.2)) var(--if-light, rgba(0, 0, 0, 0.3));
  --ink-p-container-border-color-strong: var(--if-dark, rgba(255, 255, 255, 0.4)) var(--if-light, rgba(0, 0, 0, 0.4));
  --ink-p-container-border-color-weak: var(--if-dark, rgba(255, 255, 255, 0.1)) var(--if-light, rgba(0, 0, 0, 0.2));
  --ink-p-accent-primary-bg: var(--if-dark, var(--ink-p-blue-300)) var(--if-light, var(--ink-p-blue-700));
  --ink-p-accent-secondary-bg: var(--if-dark, var(--ink-p-blue-400)) var(--if-light, var(--ink-p-blue-600));
  --ink-p-accent-tertiary-bg: var(--if-dark, var(--ink-p-blue-500)) var(--if-light, var(--ink-p-blue-500));
  --ink-p-accent-success-bg: var(--ink-p-light__green-200);
  --ink-p-accent-error-bg: var(--ink-p-light__red-100);
  --ink-p-accent-warning-bg: var(--ink-p-light__yellow-300);
  --ink-p-accent-info-bg: var(--ink-p-light__blue-200);
  --ink-p-accent-highlight-bg: var(--ink-p-light__yellow-200);
  --ink-p-accent-primary-fg: var(--ink-p-fg-on-dark);
  --ink-p-accent-secondary-fg: var(--ink-p-fg-on-dark);
  --ink-p-accent-tertiary-fg: var(--ink-p-fg-on-light);
  --ink-p-accent-success-fg: var(--ink-p-fg-on-light);
  --ink-p-accent-error-fg: var(--ink-p-fg-on-light);
  --ink-p-accent-warning-fg: var(--ink-p-fg-on-light);
  --ink-p-accent-info-fg: var(--ink-p-fg-on-light);
  --ink-p-accent-highlight-fg: var(--ink-p-fg-on-light);
  --ink-p-accent-success-fg-on-container: var(--ink-p-green-800);
  --ink-p-accent-error-fg-on-container: var(--if-dark, var(--ink-p-red-800)) var(--if-light, var(--ink-p-red-600));
  --ink-p-accent-highlight-fg-on-container: var(--if-dark, var(--ink-p-yellow-500)) var(--if-light, var(--ink-p-brown-800));
  --ink-p-accent-primary-border-color: var(--ink-p-container-border-color);
  --ink-p-accent-secondary-border-color: var(--ink-p-container-border-color);
  --ink-p-accent-tertiary-border-color: var(--ink-p-container-border-color);
  --ink-p-accent-success-border-color: var(--ink-p-container-border-color);
  --ink-p-accent-error-border-color: rgba(0, 0, 0, 0.2);
  --ink-p-accent-warning-border-color: rgba(0, 0, 0, 0.2);
  --ink-p-accent-info-border-color: var(--ink-p-container-border-color);
  --ink-p-accent-highlight-border-color: var(--ink-p-container-border-color);
  --ink-p-page-bg: var(--ink-p-surface-bg);
  --ink-p-fg-on-dark: var(--ink-p-white);
  --ink-p-fg-on-light: var(--ink-p-black);
  --ink-p-fg-weak-on-dark: rgba(255, 255, 255, 0.75);
  --ink-p-fg-weak-on-light: rgba(0, 0, 0, 0.5);
  --ink-p-fg: var(--if-dark, var(--ink-p-fg-on-dark)) var(--if-light, var(--ink-p-fg-on-light));
  --ink-p-fg-weak: var(--if-dark, var(--ink-p-fg-weak-on-dark)) var(--if-light, var(--ink-p-fg-weak-on-light));
  --ink-p-link-fg-on-light: var(--ink-p-light__blue-800);
  --ink-p-link-fg-on-dark: #AEC9FF;
  --ink-p-link-hover-fg-on-light: #0e398e;
  --ink-p-link-hover-fg-on-dark: #e1ebff;
  --ink-p-link-fg: var(--if-dark, var(--ink-p-link-fg-on-dark)) var(--if-light, var(--ink-p-link-fg-on-light));
  --ink-p-link-hover-fg: var(--if-dark, var(--ink-p-link-hover-fg-on-dark)) var(--if-light, var(--ink-p-link-hover-fg-on-light));
  --ink-p-icon-color: var(--ink-p-fg);
  --ink-p-header-bg: var(--if-dark, #1E1F22) var(--if-light, var(--ink-p-blue-300));
  --ink-p-header-border-color: var(--ink-p-container-border-color);
  --ink-p-header-fg: var(--if-dark, var(--ink-p-fg-on-dark)) var(--if-light, var(--ink-p-accent-tertiary-fg));
  --ink-p-header-fg-weak: var(--ink-p-fg-weak);
  --ink-p-footer-bg: var(--if-dark, var(--ink-p-header-bg)) var(--if-light, var(--ink-p-grey-200));
  --ink-p-footer-border-color: var(--ink-p-container-border-color);
  --ink-p-footer-fg: var(--if-dark, var(--ink-p-header-fg)) var(--if-light, var(--ink-p-surface-fg));
  --ink-p-input-bg: var(--if-dark, #282F32) var(--if-light, var(--ink-p-white));
  --ink-p-input-border-color: var(--if-dark, var(--ink-p-black)) var(--if-light, var(--ink-p-grey-400));
  --ink-p-input-fg: var(--if-dark, var(--ink-p-fg-on-dark)) var(--if-light, var(--ink-p-fg-on-light));
  --ink-p-input-selection-bg: var(--if-dark, rgba(200, 108, 255, 0.2)) var(--if-light, rgba(0, 128, 255, 0.2));
  --ink-p-accent-default-bg: var(--if-dark, #1E1F22) var(--if-light, var(--ink-p-blue-300));
  --ink-p-accent-default-border-color: var(--ink-p-header-border-color);
  --ink-p-code-literal-bg: var(--if-dark, inherit) var(--if-light, var(--ink-p-grey-100));
  --ink-p-code-literal-fg: var(--if-dark, var(--ink-p-red-800)) var(--if-light, var(--ink-p-red-700));
  --ink-p-code-literal-border-color: var(--if-dark, rgba(255, 255, 255, 0.15)) var(--if-light, rgba(0, 0, 0, 0.1));
  --ink-p-side-panel-bg: var(--if-dark, var(--ink-p-grey-100)) var(--if-light, var(--ink-p-grey-150));
  --ink-p-side-panel-active-bg: var(--if-dark, rgba(255, 255, 255, 0.12)) var(--if-light, rgba(0, 0, 0, 0.12));
  --ink-p-side-panel-hover-bg: var(--if-dark, rgba(255, 255, 255, 0.05)) var(--if-light, rgba(0, 0, 0, 0.05));
  --ink-p-side-panel-fg: var(--if-dark, var(--ink-p-fg-on-dark)) var(--if-light, var(--ink-p-fg-on-light));
  --ink-p-side-panel-border-color: var(--if-dark, rgba(255, 255, 255, 0.2)) var(--if-light, rgba(0, 0, 0, 0.2));
  --ink-u-border-radius-scale: 8px;
  --ink-u-border-radius-xs: 2px;
  --ink-u-border-radius-s-inner: 3px;
  --ink-u-border-radius-s: 4px;
  --ink-u-border-radius-m-inner: 7px;
  --ink-u-border-radius-m: 8px;
  --ink-u-border-radius-l: 10px;
  --ink-u-border-radius-xl: 16px;
  --ink-u-border-radius-xxl: 32px;
  --ink-u-border-radius-std: var(--ink-u-border-radius-s);
  --ink-u-border-radius-container: var(--ink-u-border-radius-std);
  --ink-u-border-radius-input: var(--ink-u-border-radius-std);
  --ink-u-border-x-thin: 0.5px;
  --ink-u-border-thin: 1px;
  --ink-u-border-medium: 2px;
  --ink-u-border-thick: 4px;
  --ink-u-font-xs: var(--ink-u-rem-10px);
  --ink-u-font-s: var(--ink-u-rem-11px);
  --ink-u-font-sm: var(--ink-u-rem-12px);
  --ink-u-font-m: var(--ink-u-rem-13px);
  --ink-u-font-ml: var(--ink-u-rem-14px);
  --ink-u-font-l: var(--ink-u-rem-16px);
  --ink-u-font-std: var(--ink-u-font-m);
  --ink-u-icon-scale: 16px;
  --ink-u-icon-s: 8px;
  --ink-u-icon-sm: 12px;
  --ink-u-icon-m: 16px;
  --ink-u-icon-ml: 20px;
  --ink-u-icon-l: 24px;
  --ink-u-icon-xl: 32px;
  --ink-u-icon-std: var(--ink-u-icon-m);
  --ink-u-rem-10px: 0.625rem;
  --ink-u-rem-11px: 0.6875rem;
  --ink-u-rem-12px: 0.75rem;
  --ink-u-rem-13px: 0.8125rem;
  --ink-u-rem-14px: 0.875rem;
  --ink-u-rem-16px: 1rem;
  --ink-u-spacing-scale: 1em;
  --ink-u-spacing-xs: 0.25em;
  --ink-u-spacing-s: 0.5em;
  --ink-u-spacing-sm: 0.75em;
  --ink-u-spacing-m: 1em;
  --ink-u-spacing-ml: 1.5em;
  --ink-u-spacing-l: 2em;
  --ink-u-spacing-xl: 3em;
  --ink-u-spacing-xxl: 4em;
  --ink-u-spacing-std: var(--ink-u-spacing-m);
  --ink-ff-default: var(--ink-ff-sans-serif);
  --ink-ff-monospace: "SF Mono",SFMono-Regular,ui-monospace,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --ink-ff-sans-serif: DejaVu Sans,Verdana,Arial,Helvetica,Sans-Serif;
  --ink-ff-serif: Georgia,Cambria,"Times New Roman",Times,serif;
  --ink-i-add: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22currentColor%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-filled%20icon-tabler-circle-plus%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M4.929%204.929a10%2010%200%201%201%2014.141%2014.141a10%2010%200%200%201%20-14.14%20-14.14zm8.071%204.071a1%201%200%201%200%20-2%200v2h-2a1%201%200%201%200%200%202h2v2a1%201%200%201%200%202%200v-2h2a1%201%200%201%200%200%20-2h-2v-2z%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-arrow-left: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22currentColor%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-filled%20icon-tabler-arrow-big-left%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M9.586%204l-6.586%206.586a2%202%200%200%200%200%202.828l6.586%206.586a2%202%200%200%200%202.18%20.434l.145%20-.068a2%202%200%200%200%201.089%20-1.78v-2.586h7a2%202%200%200%200%202%20-2v-4l-.005%20-.15a2%202%200%200%200%20-1.995%20-1.85l-7%20-.001v-2.585a2%202%200%200%200%20-3.414%20-1.414z%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-arrow-left-first: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22currentColor%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-filled%20icon-tabler-arrow-badge-left%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M17%206h-6a1%201%200%200%200%20-.78%20.375l-4%205a1%201%200%200%200%200%201.25l4%205a1%201%200%200%200%20.78%20.375h6l.112%20-.006a1%201%200%200%200%20.669%20-1.619l-3.501%20-4.375l3.5%20-4.375a1%201%200%200%200%20-.78%20-1.625z%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-arrow-right: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22currentColor%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-filled%20icon-tabler-arrow-big-right%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M12.089%203.634a2%202%200%200%200%20-1.089%201.78l-.001%202.586h-6.999a2%202%200%200%200%20-2%202v4l.005%20.15a2%202%200%200%200%201.995%201.85l6.999%20-.001l.001%202.587a2%202%200%200%200%203.414%201.414l6.586%20-6.586a2%202%200%200%200%200%20-2.828l-6.586%20-6.586a2%202%200%200%200%20-2.18%20-.434l-.145%20.068z%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-arrow-right-first: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22currentColor%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-filled%20icon-tabler-arrow-badge-right%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M7%206l-.112%20.006a1%201%200%200%200%20-.669%201.619l3.501%204.375l-3.5%204.375a1%201%200%200%200%20.78%201.625h6a1%201%200%200%200%20.78%20-.375l4%20-5a1%201%200%200%200%200%20-1.25l-4%20-5a1%201%200%200%200%20-.78%20-.375h-6z%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-check: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-check%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M5%2012l5%205l10%20-10%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-circle-arrow-right: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-circle-arrow-right%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M12%203a9%209%200%201%200%200%2018a9%209%200%200%200%200%20-18%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M16%2012l-4%20-4%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M16%2012h-8%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M12%2016l4%20-4%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-clock: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-clock%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M3%2012a9%209%200%201%200%2018%200a9%209%200%200%200%20-18%200%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M12%207v5l3%203%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-close: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-x%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M18%206l-12%2012%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M6%206l12%2012%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-copy: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-copy%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M7%207m0%202.667a2.667%202.667%200%200%201%202.667%20-2.667h8.666a2.667%202.667%200%200%201%202.667%202.667v8.666a2.667%202.667%200%200%201%20-2.667%202.667h-8.666a2.667%202.667%200%200%201%20-2.667%20-2.667z%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M4.012%2016.737a2.005%202.005%200%200%201%20-1.012%20-1.737v-10c0%20-1.1%20.9%20-2%202%20-2h10c.75%200%201.158%20.385%201.5%201%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-delete-item: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22currentColor%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-filled%20icon-tabler-trash-x%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M20%206a1%201%200%200%201%20.117%201.993l-.117%20.007h-.081l-.919%2011a3%203%200%200%201%20-2.824%202.995l-.176%20.005h-8c-1.598%200%20-2.904%20-1.249%20-2.992%20-2.75l-.005%20-.167l-.923%20-11.083h-.08a1%201%200%200%201%20-.117%20-1.993l.117%20-.007h16zm-9.489%205.14a1%201%200%200%200%20-1.218%201.567l1.292%201.293l-1.292%201.293l-.083%20.094a1%201%200%200%200%201.497%201.32l1.293%20-1.292l1.293%201.292l.094%20.083a1%201%200%200%200%201.32%20-1.497l-1.292%20-1.293l1.292%20-1.293l.083%20-.094a1%201%200%200%200%20-1.497%20-1.32l-1.293%201.292l-1.293%20-1.292l-.094%20-.083z%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M14%202a2%202%200%200%201%202%202a1%201%200%200%201%20-1.993%20.117l-.007%20-.117h-4l-.007%20.117a1%201%200%200%201%20-1.993%20-.117a2%202%200%200%201%201.85%20-1.995l.15%20-.005h4z%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-dot: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22currentColor%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-filled%20icon-tabler-point%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M12%207a5%205%200%201%201%20-4.995%205.217l-.005%20-.217l.005%20-.217a5%205%200%200%201%204.995%20-4.783z%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-dropdown: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22currentColor%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-filled%20icon-tabler-caret-down%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M18%209c.852%200%201.297%20.986%20.783%201.623l-.076%20.084l-6%206a1%201%200%200%201%20-1.32%20.083l-.094%20-.083l-6%20-6l-.083%20-.094l-.054%20-.077l-.054%20-.096l-.017%20-.036l-.027%20-.067l-.032%20-.108l-.01%20-.053l-.01%20-.06l-.004%20-.057v-.118l.005%20-.058l.009%20-.06l.01%20-.052l.032%20-.108l.027%20-.067l.07%20-.132l.065%20-.09l.073%20-.081l.094%20-.083l.077%20-.054l.096%20-.054l.036%20-.017l.067%20-.027l.108%20-.032l.053%20-.01l.06%20-.01l.057%20-.004l12.059%20-.002z%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-error: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22currentColor%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-filled%20icon-tabler-alert-circle%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M12%202c5.523%200%2010%204.477%2010%2010a10%2010%200%200%201%20-19.995%20.324l-.005%20-.324l.004%20-.28c.148%20-5.393%204.566%20-9.72%209.996%20-9.72zm.01%2013l-.127%20.007a1%201%200%200%200%200%201.986l.117%20.007l.127%20-.007a1%201%200%200%200%200%20-1.986l-.117%20-.007zm-.01%20-8a1%201%200%200%200%20-.993%20.883l-.007%20.117v4l.007%20.117a1%201%200%200%200%201.986%200l.007%20-.117v-4l-.007%20-.117a1%201%200%200%200%20-.993%20-.883z%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-help: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22currentColor%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-filled%20icon-tabler-help-circle%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M12%202c5.523%200%2010%204.477%2010%2010a10%2010%200%200%201%20-19.995%20.324l-.005%20-.324l.004%20-.28c.148%20-5.393%204.566%20-9.72%209.996%20-9.72zm0%2013a1%201%200%200%200%20-.993%20.883l-.007%20.117l.007%20.127a1%201%200%200%200%201.986%200l.007%20-.117l-.007%20-.127a1%201%200%200%200%20-.993%20-.883zm1.368%20-6.673a2.98%202.98%200%200%200%20-3.631%20.728a1%201%200%200%200%201.44%201.383l.171%20-.18a.98%20.98%200%200%201%201.11%20-.15a1%201%200%200%201%20-.34%201.886l-.232%20.012a1%201%200%200%200%20.111%201.994a3%203%200%200%200%201.371%20-5.673z%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-info: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22%3F%3E%0A%3C!DOCTYPE%20svg%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20SVG%201.1%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FGraphics%2FSVG%2F1.1%2FDTD%2Fsvg11.dtd%22%3E%0A%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2024%2024%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xml%3Aspace%3D%22preserve%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%3B%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M12%2C2C17.523%2C2%2022%2C6.477%2022%2C12L22%2C12.008C22%2C17.494%2017.486%2C22.008%2012%2C22.008C6.633%2C22.008%202.175%2C17.688%202.005%2C12.324L2%2C12L2.004%2C11.72C2.152%2C6.327%206.57%2C2%2012%2C2ZM13.5%2C16L13.5%2C11.484L13.49%2C11.484C13.49%2C10.932%2013.042%2C10.484%2012.49%2C10.484L9.99%2C10.484C9.438%2C10.484%208.99%2C10.932%208.99%2C11.484C8.99%2C12.036%209.438%2C12.484%209.99%2C12.484L11%2C12.484L11%2C16L9%2C16C8.448%2C16%208%2C16.448%208%2C17C8%2C17.552%208.448%2C18%209%2C18L15%2C18C15.552%2C18%2016%2C17.552%2016%2C17C16%2C16.448%2015.552%2C16%2015%2C16L13.5%2C16ZM12%2C5.5C11.172%2C5.5%2010.5%2C6.172%2010.5%2C7C10.5%2C7.828%2011.172%2C8.5%2012%2C8.5C12.828%2C8.5%2013.5%2C7.828%2013.5%2C7C13.5%2C6.172%2012.828%2C5.5%2012%2C5.5Z%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  --ink-i-mobile-menu: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-menu-2%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M4%206l16%200%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M4%2012l16%200%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M4%2018l16%200%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-refresh: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-refresh%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M20%2011a8.1%208.1%200%200%200%20-15.5%20-2m-.5%20-4v4h4%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M4%2013a8.1%208.1%200%200%200%2015.5%202m.5%204v-4h-4%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-search: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-search%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M10%2010m-7%200a7%207%200%201%200%2014%200a7%207%200%201%200%20-14%200%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M21%2021l-6%20-6%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-settings: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22currentColor%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-filled%20icon-tabler-settings%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M14.647%204.081a.724%20.724%200%200%200%201.08%20.448c2.439%20-1.485%205.23%201.305%203.745%203.744a.724%20.724%200%200%200%20.447%201.08c2.775%20.673%202.775%204.62%200%205.294a.724%20.724%200%200%200%20-.448%201.08c1.485%202.439%20-1.305%205.23%20-3.744%203.745a.724%20.724%200%200%200%20-1.08%20.447c-.673%202.775%20-4.62%202.775%20-5.294%200a.724%20.724%200%200%200%20-1.08%20-.448c-2.439%201.485%20-5.23%20-1.305%20-3.745%20-3.744a.724%20.724%200%200%200%20-.447%20-1.08c-2.775%20-.673%20-2.775%20-4.62%200%20-5.294a.724%20.724%200%200%200%20.448%20-1.08c-1.485%20-2.439%201.305%20-5.23%203.744%20-3.745a.722%20.722%200%200%200%201.08%20-.447c.673%20-2.775%204.62%20-2.775%205.294%200zm-2.647%204.919a3%203%200%201%200%200%206a3%203%200%200%200%200%20-6z%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-sort-ascending: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-sort-ascending%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M4%206l7%200%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M4%2012l7%200%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M4%2018l9%200%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M15%209l3%20-3l3%203%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M18%206l0%2012%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-sort-descending: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-sort-descending%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M4%206l9%200%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M4%2012l7%200%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M4%2018l7%200%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M15%2015l3%203l3%20-3%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M18%206l0%2012%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-success: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22currentColor%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-filled%20icon-tabler-circle-check%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M17%203.34a10%2010%200%201%201%20-14.995%208.984l-.005%20-.324l.005%20-.324a10%2010%200%200%201%2014.995%20-8.336zm-1.293%205.953a1%201%200%200%200%20-1.32%20-.083l-.094%20.083l-3.293%203.292l-1.293%20-1.292l-.094%20-.083a1%201%200%200%200%20-1.403%201.403l.083%20.094l2%202l.094%20.083a1%201%200%200%200%201.226%200l.094%20-.083l4%20-4l.083%20-.094a1%201%200%200%200%20-.083%20-1.32z%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-unsort: var(--ink-i-close);
  --ink-i-user: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22currentColor%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-filled%20icon-tabler-user%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M12%202a5%205%200%201%201%20-5%205l.005%20-.217a5%205%200%200%201%204.995%20-4.783z%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M14%2014a5%205%200%200%201%205%205v1a2%202%200%200%201%20-2%202h-10a2%202%200%200%201%20-2%20-2v-1a5%205%200%200%201%205%20-5h4z%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-vcs-commit: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-git-commit%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M12%2012m-3%200a3%203%200%201%200%206%200a3%203%200%201%200%20-6%200%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M12%203l0%206%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M12%2015l0%206%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-warning: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22currentColor%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-filled%20icon-tabler-alert-triangle%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M12%201.67c.955%200%201.845%20.467%202.39%201.247l.105%20.16l8.114%2013.548a2.914%202.914%200%200%201%20-2.307%204.363l-.195%20.008h-16.225a2.914%202.914%200%200%201%20-2.582%20-4.2l.099%20-.185l8.11%20-13.538a2.914%202.914%200%200%201%202.491%20-1.403zm.01%2013.33l-.127%20.007a1%201%200%200%200%200%201.986l.117%20.007l.127%20-.007a1%201%200%200%200%200%20-1.986l-.117%20-.007zm-.01%20-7a1%201%200%200%200%20-.993%20.883l-.007%20.117v4l.007%20.117a1%201%200%200%200%201.986%200l.007%20-.117v-4l-.007%20-.117a1%201%200%200%200%20-.993%20-.883z%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-zoom-in: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22currentColor%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-filled%20icon-tabler-zoom-in%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M14%203.072a8%208%200%200%201%202.617%2011.424l4.944%204.943a1.5%201.5%200%200%201%20-2.008%202.225l-.114%20-.103l-4.943%20-4.944a8%208%200%200%201%20-12.49%20-6.332l-.006%20-.285l.005%20-.285a8%208%200%200%201%2011.995%20-6.643zm-4%202.928a1%201%200%200%200%20-.993%20.883l-.007%20.117v2h-2l-.117%20.007a1%201%200%200%200%200%201.986l.117%20.007h2v2l.007%20.117a1%201%200%200%200%201.986%200l.007%20-.117v-2h2l.117%20-.007a1%201%200%200%200%200%20-1.986l-.117%20-.007h-2v-2l-.007%20-.117a1%201%200%200%200%20-.993%20-.883z%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-i-zoom-out: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22currentColor%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-filled%20icon-tabler-zoom-out%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M14%203.072a8%208%200%200%201%202.617%2011.424l4.944%204.943a1.5%201.5%200%200%201%20-2.008%202.225l-.114%20-.103l-4.943%20-4.944a8%208%200%200%201%20-12.49%20-6.332l-.006%20-.285l.005%20-.285a8%208%200%200%201%2011.995%20-6.643zm-1%205.928h-6l-.117%20.007a1%201%200%200%200%200%201.986l.117%20.007h6l.117%20-.007a1%201%200%200%200%200%20-1.986l-.117%20-.007z%22%20%2F%3E%0A%3C%2Fsvg%3E");
  --ink-anim-barber-pole-speed: 2s;
  --ink-g-border-container: var(--ink-u-border-thin) var(--ink-p-container-border-color) solid;
  --ink-g-border-header: var(--ink-u-border-thin) var(--ink-p-header-border-color) solid;
  --ink-g-border-input: var(--ink-u-border-thin) var(--ink-p-input-border-color) solid;
  --ink-g-border-side-panel: var(--ink-u-border-thin) var(--ink-p-side-panel-border-color) solid;
  --ink-g-shadow-std: 0px 2px 4px rgba(0, 0, 0, 0.1);
  --ink-g-shadow-l-dark: 0px 4px 6px rgba(0, 0, 0, 0.75);
  --ink-z-base: 1;
  --ink-z-deco: 20;
  --ink-z-event-overlay: 30;
  --ink-z-banner: 100;
  --ink-z-menu: 110;
  --ink-z-dialog: 120;
  --ink-z-page-overlay: 150;
  --ink-z-dnd-overloay: 200
}
@media (prefers-reduced-motion) {
  :root :root,
  [data-ink-color-scheme] :root {
    --ink-anim-barber-pole-speed: 4s
  }
}
.ink-c-alert,
:root {
  --ink-c-alert-close-icon: var(--ink-i-close);
  --ink-c-alert-standard-bg: var(--ink-p-grey-200);
  --ink-c-alert-standard-border-color: var(--ink-p-container-border-color);
  --ink-c-alert-standard-icon: var(--ink-i-info);
  --ink-c-alert-standard-fg: var(--ink-p-fg);
  --ink-c-alert-error-bg: var(--ink-p-accent-error-bg);
  --ink-c-alert-error-border-color: var(--ink-p-accent-error-border-color);
  --ink-c-alert-error-icon: var(--ink-i-error);
  --ink-c-alert-error-fg: var(--ink-p-accent-error-fg);
  --ink-c-alert-info-bg: var(--ink-p-accent-info-bg);
  --ink-c-alert-info-border-color: var(--ink-p-accent-info-border-color);
  --ink-c-alert-info-icon: var(--ink-i-info);
  --ink-c-alert-info-fg: var(--ink-p-accent-info-fg);
  --ink-c-alert-success-bg: var(--ink-p-accent-success-bg);
  --ink-c-alert-success-border-color: var(--ink-p-accent-success-border-color);
  --ink-c-alert-success-icon: var(--ink-i-success);
  --ink-c-alert-success-fg: var(--ink-p-accent-success-fg);
  --ink-c-alert-warning-bg: var(--ink-p-accent-warning-bg);
  --ink-c-alert-warning-border-color: var(--ink-p-accent-warning-border-color);
  --ink-c-alert-warning-icon: var(--ink-i-warning);
  --ink-c-alert-warning-fg: var(--ink-p-accent-warning-fg)
}
.ink-c-alert {
  display: grid;
  grid-template: "icon content close"/min-content auto min-content;
  margin: 0;
  width: 100%;
  --_ink-c-alert-bg: var(--ink-c-alert-standard-bg);
  --_ink-c-alert-border-color: var(--ink-c-alert-standard-border-color);
  --_ink-c-alert-fg: var(--ink-c-alert-standard-fg);
  --_ink-c-alert-icon: var(--ink-c-alert-standard-icon);
  background: var(--_ink-c-alert-bg);
  border-radius: var(--ink-u-border-radius-container);
  border: var(--ink-u-border-thin) var(--_ink-c-alert-border-color) solid;
  box-shadow: var(--ink-g-shadow-std);
  box-sizing: border-box;
  color: var(--_ink-c-alert-fg);
  font-size: var(--ink-u-font-std);
  padding: var(--ink-u-spacing-std)
}
.ink-c-alert:before {
  grid-area: icon;
  text-align: center;
  margin-right: var(--ink-u-spacing-s);
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--_ink-c-alert-icon);
  width: var(--ink-u-icon-l);
  height: var(--ink-u-icon-l)
}
.ink-c-alert[data-type=error] {
  --_ink-c-alert-bg: var(--ink-c-alert-error-bg);
  --_ink-c-alert-border-color: var(--ink-c-alert-error-border-color);
  --_ink-c-alert-icon: var(--ink-c-alert-error-icon);
  --_ink-c-alert-fg: var(--ink-c-alert-error-fg);
  --ink-p-link-fg: var(--ink-p-link-fg-on-light);
  --ink-p-link-hover-fg: var(--ink-p-link-hover-fg-on-light)
}
.ink-c-alert[data-type=info] {
  --_ink-c-alert-bg: var(--ink-c-alert-info-bg);
  --_ink-c-alert-border-color: var(--ink-c-alert-info-border-color);
  --_ink-c-alert-icon: var(--ink-c-alert-info-icon);
  --_ink-c-alert-fg: var(--ink-c-alert-info-fg);
  --ink-p-link-fg: var(--ink-p-link-fg-on-light);
  --ink-p-link-hover-fg: var(--ink-p-link-hover-fg-on-light)
}
.ink-c-alert[data-type=success] {
  --_ink-c-alert-bg: var(--ink-c-alert-success-bg);
  --_ink-c-alert-border-color: var(--ink-c-alert-success-border-color);
  --_ink-c-alert-icon: var(--ink-c-alert-success-icon);
  --_ink-c-alert-fg: var(--ink-c-alert-success-fg);
  --ink-p-link-fg: var(--ink-p-link-fg-on-light);
  --ink-p-link-hover-fg: var(--ink-p-link-hover-fg-on-light)
}
.ink-c-alert[data-type=warning] {
  --_ink-c-alert-bg: var(--ink-c-alert-warning-bg);
  --_ink-c-alert-border-color: var(--ink-c-alert-warning-border-color);
  --_ink-c-alert-icon: var(--ink-c-alert-warning-icon);
  --_ink-c-alert-fg: var(--ink-c-alert-warning-fg);
  --ink-p-link-fg: var(--ink-p-link-fg-on-light);
  --ink-p-link-hover-fg: var(--ink-p-link-hover-fg-on-light)
}
.ink-c-alert__actions {
  display: flex;
  margin-top: var(--ink-u-spacing-l);
  gap: var(--ink-u-spacing-std)
}
.ink-c-alert__body > :last-child {
  margin-bottom: 0;
  padding-bottom: 0
}
.ink-c-alert__content {
  grid-area: content;
  margin: 0;
  padding: 0;
  overflow: hidden
}
.ink-c-alert__close {
  grid-area: close;
  cursor: pointer;
  height: fit-content;
  margin: 0;
  line-height: 0;
  opacity: .6;
  padding: var(--ink-u-spacing-xs)
}
.ink-c-alert__close:before {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-c-alert-close-icon);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std)
}
.ink-c-alert__close:hover {
  opacity: 1
}
.ink-c-alert__heading {
  font-size: inherit;
  font-weight: 700;
  line-height: var(--ink-u-icon-l);
  margin: 0;
  padding: 0
}
.ink-c-button,
:root {
  --ink-c-button-border-radius: var(--ink-u-border-radius-s);
  --ink-c-button-busy-bg: rgba(0, 0, 0, 0.08);
  --ink-c-button-font-size: var(--ink-u-font-sm);
  --ink-c-button-padding-horiz: var(--ink-u-spacing-sm);
  --ink-c-button-padding-vert: var(--ink-u-spacing-s);
  --ink-c-button-shadow: var(--ink-g-shadow-std);
  --ink-c-button-keyboard-shortcut-font-size: var(--ink-u-font-s);
  --ink-c-button-accented-bg: var(--ink-p-accent-primary-bg) linear-gradient(to bottom, var(--ink-p-accent-secondary-bg), var(--ink-p-accent-primary-bg)) repeat-x;
  --ink-c-button-accented-active-bg: var(--ink-c-button-accented-bg) 0 -10px;
  --ink-c-button-accented-hover-bg: var(--if-dark, var(--ink-p-accent-primary-bg) linear-gradient(to bottom, var(--ink-p-accent-tertiary-bg), var(--ink-p-accent-secondary-bg) 35%, var(--ink-p-accent-primary-bg)) repeat-x 0 -5px) var(--if-light, var(--ink-c-button-primary-bg) 0 -10px);
  --ink-c-button-accented-fg: var(--ink-p-accent-primary-fg);
  --ink-c-button-bg: var(--if-dark, var(--ink-c-button-accented-bg)) var(--if-light, var(--ink-p-grey-200) linear-gradient(to bottom, white, white 25%, var(--ink-p-grey-200)) repeat-x);
  --ink-c-button-active-bg: var(--if-dark, var(--ink-c-button-accented-active-bg)) var(--if-light, var(--ink-c-button-bg) 0 -25px);
  --ink-c-button-hover-bg: var(--if-dark, var(--ink-c-button-accented-hover-bg)) var(--if-light, var(--ink-c-button-bg) 0 -8px);
  --ink-c-button-fg: var(--if-dark, var(--ink-c-button-accented-fg)) var(--if-light, var(--ink-p-surface-fg));
  --ink-c-button-border-color: rgba(0, 0, 0, 0.4);
  --ink-c-button-hover-border-color: rgba(0, 0, 0, 0.8);
  --ink-c-button-danger-bg: var(--ink-p-light__red-500) linear-gradient(to bottom, var(--ink-p-light__red-400), var(--ink-p-light__red-500)) repeat-x;
  --ink-c-button-danger-hover-bg: var(--if-dark, var(--ink-p-light__red-500) linear-gradient(to bottom, var(--ink-p-light__red-300), var(--ink-p-light__red-400) 35%, var(--ink-p-light__red-500)) repeat-x) var(--if-light, var(--ink-c-button-danger-bg) 0 -15px);
  --ink-c-button-danger-active-bg: var(--ink-c-button-danger-bg) 0 -25px;
  --ink-c-button-danger-fg: white;
  --ink-c-button-danger-border-color: var(--ink-c-button-border-color);
  --ink-c-button-danger-busy-bg: rgba(255, 255, 255, 0.08);
  --ink-c-button-disabled-bg: none;
  --ink-c-button-disabled-border-color: var(--if-dark, var(--ink-p-fg-on-dark)) var(--if-light, var(--ink-p-fg-on-light));
  --ink-c-button-disabled-fg: var(--if-dark, var(--ink-p-fg-on-dark)) var(--if-light, var(--ink-p-fg-on-light));
  --ink-c-button-disabled-busy-bg: var(--if-dark, rgba(255, 255, 255, 0.08)) var(--if-light, rgba(0, 0, 0, 0.08));
  --ink-c-button-primary-bg: var(--ink-c-button-accented-bg);
  --ink-c-button-primary-hover-bg: var(--ink-c-button-accented-hover-bg);
  --ink-c-button-primary-active-bg: var(--ink-c-button-accented-active-bg);
  --ink-c-button-primary-fg: var(--ink-c-button-accented-fg);
  --ink-c-button-primary-border-color: var(--ink-c-button-border-color);
  --ink-c-button-primary-busy-bg: rgba(255, 255, 255, 0.08)
}
.ink-c-button,
.ink-c-button:is(a:link,a:visited) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  font-weight: 400;
  line-height: normal;
  text-decoration: none;
  -webkit-user-select: none;
          user-select: none;
  --_ink-c-button-state-bg: var(--ink-c-button-bg);
  --_ink-c-button-state-active-bg: var(--ink-c-button-active-bg);
  --_ink-c-button-state-hover-bg: var(--ink-c-button-hover-bg);
  --_ink-c-button-state-border-color: var(--ink-c-button-border-color);
  --_ink-c-button-state-busy-bg: var(--ink-c-button-busy-bg);
  --_ink-c-button-state-fg: var(--ink-c-button-fg);
  background: var(--_ink-c-button-state-bg);
  border-width: var(--ink-u-border-thin);
  border-color: var(--_ink-c-button-state-border-color);
  border-style: solid;
  border-radius: var(--ink-c-button-border-radius);
  color: var(--_ink-c-button-state-fg);
  font-family: var(--ink-ff-sans-serif);
  transition: var(--ink-c-button-transition);
  gap: var(--ink-c-button-padding-horiz);
  padding: var(--ink-c-button-padding-vert) var(--ink-c-button-padding-horiz);
  vertical-align: top;
  cursor: pointer;
  font-size: var(--ink-c-button-font-size)
}
.ink-c-button > *,
.ink-c-button:is(a:link,a:visited) > * {
  cursor: inherit;
  color: inherit;
  font-family: inherit;
  font-size: inherit
}
.ink-c-button:is(:active,[aria-pressed=true],.js-active):is(a,button:enabled):not(.-is-disabled):not([aria-busy=true]),
.ink-c-button:is(a:link,a:visited):is(:active,[aria-pressed=true],.js-active):is(a,button:enabled):not(.-is-disabled):not([aria-busy=true]) {
  background: var(--_ink-c-button-state-active-bg);
  color: var(--_ink-c-button-state-fg);
  text-decoration: none;
  padding-top: calc(var(--ink-c-button-padding-vert) + .5px);
  padding-bottom: calc(var(--ink-c-button-padding-vert) - .5px);
  border-color: var(--ink-c-button-hover-border-color)
}
.ink-c-button:is(a:link,a:visited)[aria-busy=true],
.ink-c-button[aria-busy=true] {
  cursor: wait;
  overflow: hidden;
  color: var(--_ink-c-button-state-fg)
}
.ink-c-button:is(a:link,a:visited)[aria-busy=true]:after,
.ink-c-button[aria-busy=true]:after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  animation: linear ink-anim-barber-pole var(--ink-anim-barber-pole-speed) infinite reverse;
  background: linear-gradient(-45deg,var(--_ink-c-button-state-busy-bg) 25%,transparent 25%,transparent 50%,var(--_ink-c-button-state-busy-bg) 50%,var(--_ink-c-button-state-busy-bg) 75%,transparent 75%,transparent);
  background-size: 200% 200%
}
.ink-c-button:is([disabled],.-is-disabled),
.ink-c-button:is(a:link,a:visited):is([disabled],.-is-disabled) {
  cursor: default;
  --_ink-c-button-state-bg: var(--ink-c-button-disabled-bg);
  --_ink-c-button-state-fg: var(--ink-c-button-disabled-fg);
  --_ink-c-button-state-border-color: var(--ink-c-button-disabled-border-color);
  --_ink-c-button-state-busy-bg: var(--ink-c-button-disabled-busy-bg);
  color: var(--_ink-c-button-state-fg);
  opacity: .6
}
.ink-c-button:is(:focus,.js-focus),
.ink-c-button:is(a:link,a:visited):is(:focus,.js-focus) {
  color: var(--_ink-c-button-state-fg);
  outline-offset: 2px;
  z-index: 1
}
.ink-c-button:is(:hover,.js-hover):is(a,button:enabled):not(.-is-disabled):not([aria-busy=true]),
.ink-c-button:is(a:link,a:visited):is(:hover,.js-hover):is(a,button:enabled):not(.-is-disabled):not([aria-busy=true]) {
  background: var(--_ink-c-button-state-hover-bg);
  color: var(--_ink-c-button-state-fg);
  text-decoration: none
}
.ink-c-button:is([type=reset]),
.ink-c-button:is(a:link,a:visited):is([type=reset]) {
  --_ink-c-button-state-bg: var(--ink-c-button-danger-bg);
  --_ink-c-button-state-hover-bg: var(--ink-c-button-danger-hover-bg);
  --_ink-c-button-state-active-bg: var(--ink-c-button-danger-active-bg);
  --_ink-c-button-state-fg: var(--ink-c-button-danger-fg);
  --_ink-c-button-state-border-color: var(--ink-c-button-danger-border-color)
}
.ink-c-button:is([type=submit]),
.ink-c-button:is(a:link,a:visited):is([type=submit]) {
  --_ink-c-button-state-bg: var(--ink-c-button-primary-bg);
  --_ink-c-button-state-hover-bg: var(--ink-c-button-primary-hover-bg);
  --_ink-c-button-state-active-bg: var(--ink-c-button-primary-active-bg);
  --_ink-c-button-state-fg: var(--ink-c-button-primary-fg);
  --_ink-c-button-state-border-color: var(--ink-c-button-primary-border-color)
}
.ink-c-button.-is-danger,
.ink-c-button:is(a:link,a:visited).-is-danger {
  --_ink-c-button-state-bg: var(--ink-c-button-danger-bg);
  --_ink-c-button-state-hover-bg: var(--ink-c-button-danger-hover-bg);
  --_ink-c-button-state-active-bg: var(--ink-c-button-danger-active-bg);
  --_ink-c-button-state-fg: var(--ink-c-button-danger-fg);
  --_ink-c-button-state-border-color: var(--ink-c-button-danger-border-color)
}
.ink-c-button.-is-primary,
.ink-c-button:is(a:link,a:visited).-is-primary {
  --_ink-c-button-state-bg: var(--ink-c-button-primary-bg);
  --_ink-c-button-state-hover-bg: var(--ink-c-button-primary-hover-bg);
  --_ink-c-button-state-active-bg: var(--ink-c-button-primary-active-bg);
  --_ink-c-button-state-fg: var(--ink-c-button-primary-fg);
  --_ink-c-button-state-border-color: var(--ink-c-button-primary-border-color)
}
.ink-c-button__keyboard-shortcut {
  font-size: var(--ink-c-button-keyboard-shortcut-font-size)
}
.ink-c-button-group {
  display: inline-flex;
  margin: 0;
  padding: 0;
  font-size: 0
}
.ink-c-button-group .ink-c-button,
.ink-c-button-group .ink-c-button:is(a:link,a:visited) {
  margin: 0
}
.ink-c-button-group:not([aria-orientation]) .ink-c-button:is(a:link,a:visited):not(:first-child),
.ink-c-button-group:not([aria-orientation]) .ink-c-button:not(:first-child),
.ink-c-button-group[aria-orientation=horizontal] .ink-c-button:is(a:link,a:visited):not(:first-child),
.ink-c-button-group[aria-orientation=horizontal] .ink-c-button:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left: 0
}
.ink-c-button-group:not([aria-orientation]) .ink-c-button:is(a:link,a:visited):not(:last-child),
.ink-c-button-group:not([aria-orientation]) .ink-c-button:not(:last-child),
.ink-c-button-group[aria-orientation=horizontal] .ink-c-button:is(a:link,a:visited):not(:last-child),
.ink-c-button-group[aria-orientation=horizontal] .ink-c-button:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right-width: var(--ink-u-border-x-thin)
}
.ink-c-button-group[aria-orientation=vertical] {
  flex-direction: column
}
.ink-c-button-group[aria-orientation=vertical] .ink-c-button,
.ink-c-button-group[aria-orientation=vertical] .ink-c-button:is(a:link,a:visited) {
  width: 100%;
  justify-content: start
}
.ink-c-button-group[aria-orientation=vertical] .ink-c-button:is(a:link,a:visited):not(:first-child),
.ink-c-button-group[aria-orientation=vertical] .ink-c-button:not(:first-child) {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0
}
.ink-c-button-group[aria-orientation=vertical] .ink-c-button:is(a:link,a:visited):not(:last-child),
.ink-c-button-group[aria-orientation=vertical] .ink-c-button:not(:last-child) {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-bottom-width: var(--ink-u-border-x-thin)
}
.ink-c-dialog,
:root {
  --ink-c-dialog-title-bg: var(--ink-p-header-bg);
  --ink-c-dialog-title-border-color: var(--ink-p-header-border-color);
  --ink-c-dialog-width: 80%;
  --ink-c-dialog-height: 80%
}
.ink-c-dialog {
  border: 0;
  max-width: 100%;
  max-height: 100%;
  background: var(--ink-p-container-bg);
  border: var(--ink-u-border-thin) var(--ink-p-container-border-color-strong) solid;
  border-radius: var(--ink-u-border-radius-m);
  box-shadow: var(--ink-g-shadow-l-dark);
  color: var(--ink-p-container-fg);
  padding: 0;
  z-index: var(--ink-z-dialog)
}
.ink-c-dialog[open] {
  display: flex
}
.ink-c-dialog:not([data-size]),
.ink-c-dialog[data-size=fit] {
  width: fit-content;
  height: fit-content;
  min-width: 35vw;
  max-width: 60vw;
  max-height: 60vh
}
.ink-c-dialog[data-size=medium] {
  min-width: 60vw;
  max-width: 70vw;
  min-height: 60vh;
  max-height: 70vh
}
.ink-c-dialog[data-size=large] {
  min-width: 80vw;
  max-width: 80vw;
  min-height: 80vh;
  max-height: 80vh
}
.ink-c-dialog[data-size=max] {
  width: calc(100% - var(--ink-u-spacing-xxl));
  height: calc(100% - var(--ink-u-spacing-xxl))
}
.ink-c-dialog::backdrop {
  background: rgba(0,0,0,.85)
}
.ink-c-dialog__actions {
  display: flex;
  grid-area: actions;
  justify-content: space-between;
  height: min-content;
  padding: var(--ink-u-spacing-m);
  gap: var(--ink-u-spacing-m)
}
.ink-c-dialog__actions-primary,
.ink-c-dialog__actions-secondary {
  display: flex;
  gap: var(--ink-u-spacing-m)
}
.ink-c-dialog__body {
  grid-area: body;
  overflow: auto;
  padding: var(--ink-u-spacing-m)
}
.ink-c-dialog__inner {
  display: grid;
  flex-grow: 1;
  grid-template-areas: "title" "body" "actions";
  grid-template-rows: min-content 1fr min-content
}
.ink-c-dialog__suppress-label {
  display: flex;
  align-items: center;
  gap: var(--ink-u-spacing-xs)
}
.ink-c-dialog__title {
  grid-area: title;
  height: min-content;
  background: var(--ink-c-dialog-title-bg);
  border-bottom: var(--ink-u-border-thin) var(--ink-c-dialog-title-border-color) solid;
  border-radius: var(--ink-u-border-radius-m-inner) var(--ink-u-border-radius-m-inner) 0 0;
  font-weight: 700;
  padding: var(--ink-u-spacing-m)
}
.ink-c-keyboard-shortcut {
  display: inline-flex;
  gap: var(--ink-u-spacing-s)
}
.ink-c-keyboard-shortcut__key {
  background: var(--if-dark,rgba(255,255,255,.05)) var(--if-light,rgba(0,0,0,.05));
  border: var(--ink-u-border-thin) var(--if-dark,rgba(255,255,255,.1)) var(--if-light,rgba(0,0,0,.1)) solid;
  border-radius: var(--ink-u-border-radius-s);
  padding: var(--ink-u-spacing-xs) var(--ink-u-spacing-s);
  text-align: center
}
.ink-c-menu,
:root {
  --ink-c-menu-bg: var(--ink-p-container-bg);
  --ink-c-menu-border: var(--ink-g-border-container);
  --ink-c-menu-border-radius: var(--ink-u-border-radius-container);
  --ink-c-menu-shadow: var(--ink-g-shadow-std);
  --ink-c-menu-z-index: var(--ink-z-menu);
  --ink-c-menu-item-padding: var(--ink-u-spacing-m);
  --ink-c-menu-item-disabled-fg: var(--ink-p-fg-weak);
  --ink-c-menu-item-selected-bg: var(--ink-p-accent-primary-bg);
  --ink-c-menu-item-selected-fg: var(--ink-p-accent-primary-fg);
  --ink-c-menu-separator-border: var(--ink-u-border-thin) var(--if-dark, rgba(255, 255, 255, 0.1)) var(--if-light, rgba(0, 0, 0, 0.1)) solid
}
.ink-c-menu {
  display: none;
  line-height: 1;
  list-style: none;
  opacity: 0;
  overflow: hidden;
  text-align: left;
  -webkit-user-select: none;
          user-select: none;
  visibility: hidden;
  margin: 0;
  position: absolute;
  white-space: nowrap;
  background: var(--ink-c-menu-bg);
  border: var(--ink-c-menu-border);
  border-bottom-left-radius: var(--ink-c-menu-border-radius);
  border-bottom-right-radius: var(--ink-c-menu-border-radius);
  box-shadow: var(--ink-c-menu-shadow);
  color: var(--ink-p-fg);
  min-width: 15em;
  padding: var(--ink-c-menu-padding);
  z-index: var(--ink-c-menu-z-index);
  transition: opacity var(--ink-c-menu-transition-time) linear;
  outline: 0
}
.ink-c-menu.-has-icons .ink-c-menu__item-label:first-child {
  grid-column-start: 2
}
.ink-c-menu.-has-shortcuts .ink-c-menu__item-label:last-child {
  grid-column-end: -2
}
@supports (grid-template-columns:subgrid) {
  .ink-c-menu {
    display: grid;
    grid-template-columns: auto
  }
  .ink-c-menu .ink-c-menu__item {
    display: grid;
    grid-column: 1/-1;
    grid-template-columns: subgrid
  }
  .ink-c-menu .ink-c-menu__item-inner,
  .ink-c-menu .ink-c-menu__item-inner:link,
  .ink-c-menu .ink-c-menu__item-inner:visited {
    display: grid;
    grid-column: inherit;
    grid-template-columns: subgrid
  }
  .ink-c-menu .ink-c-menu__separator {
    grid-column: 1/-1
  }
  .ink-c-menu.-has-icons.-has-shortcuts {
    grid-template-columns: min-content 1fr min-content
  }
  .ink-c-menu.-has-icons:not(.-has-shortcuts) {
    grid-template-columns: max-content 1fr
  }
  .ink-c-menu.-has-shortcuts:not(.-has-icons) {
    grid-template-columns: 1fr min-content
  }
}
.ink-c-menu.-is-embedded {
  position: relative;
  border-radius: var(--ink-c-menu-border-radius)
}
.ink-c-menu.-is-open {
  opacity: 1;
  visibility: visible
}
.ink-c-menu:not(.-is-embedded):not(.-is-open) {
  display: none
}
.ink-c-menu__item {
  cursor: pointer;
  display: flex;
  margin: 0
}
.ink-c-menu__item[aria-disabled=true] {
  cursor: not-allowed;
  color: var(--ink-c-menu-item-disabled-fg)
}
.ink-c-menu__item[aria-selected=true] {
  background: var(--ink-c-menu-item-selected-bg);
  color: var(--ink-c-menu-item-selected-fg)
}
.ink-c-menu__item:focus {
  background: var(--ink-c-menu-item-selected-bg);
  outline: 0
}
.ink-c-menu__item.-is-header .ink-c-menu__item-label {
  font-weight: 700
}
.ink-c-menu__item.-is-header .ink-c-menu__item-inner,
.ink-c-menu__item.-is-header .ink-c-menu__item-inner:link,
.ink-c-menu__item.-is-header .ink-c-menu__item-inner:visited {
  cursor: initial
}
.ink-c-menu__item-icon {
  min-height: var(--ink-u-icon-m);
  min-width: var(--ink-u-icon-m)
}
.ink-c-menu__item-label {
  cursor: inherit;
  flex-grow: 1
}
.ink-c-menu__item-inner,
.ink-c-menu__item-inner:link,
.ink-c-menu__item-inner:visited {
  color: inherit;
  cursor: inherit;
  font-weight: 400;
  text-decoration: none;
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--ink-u-spacing-m);
  padding: var(--ink-c-menu-item-padding)
}
.ink-c-menu__item-shortcut {
  justify-self: end
}
.ink-c-menu__separator {
  border-bottom: var(--ink-c-menu-separator-border)
}
.ink-c-menu-button {
  display: inline-block;
  position: relative
}
.ink-c-menu-button__dropdown-button {
  flex-direction: row-reverse
}
.ink-c-menu-label,
.ink-c-menu-label:link,
.ink-c-menu-label:visited {
  cursor: pointer;
  display: inline-flex;
  position: relative;
  text-decoration: none;
  color: var(--ink-p-fg)
}
.ink-c-menu-label:hover {
  text-decoration: none;
  color: var(--ink-p-fg)
}
.ink-c-menu-label[aria-disabled=true] {
  cursor: not-allowed;
  color: var(--ink-p-fg-weak)
}
.ink-c-menu-label[aria-expanded=true] {
  background: var(--ink-p-accent-secondary-bg);
  color: var(--ink-p-accent-secondary-fg)
}
.ink-c-menu-label[aria-expanded=true].-opens-up {
  border-radius: 0 0 var(--ink-u-border-radius-std) var(--ink-u-border-radius-std)
}
.ink-c-menu-label[aria-expanded=true]:not(.-opens-up) {
  border-radius: var(--ink-u-border-radius-std) var(--ink-u-border-radius-std) 0 0
}
.ink-c-menu-label__inner {
  display: inline-flex;
  align-items: center;
  gap: var(--ink-u-spacing-xs);
  padding: var(--ink-u-spacing-s)
}
.ink-c-spinner,
:root {
  --ink-c-spinner-size: 1em;
  --ink-c-spinner-image: url("data:image/svg+xml,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2016%2016%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20style%3D%22stroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A1.5%3B%22%3E%0A%20%3Cpath%20d%3D%22M11.514%2C14.035c-1.032%2C0.603%20-2.233%2C0.948%20-3.514%2C0.948c-3.854%2C0%20-6.983%2C-3.129%20-6.983%2C-6.983c0%2C-3.854%203.129%2C-6.983%206.983%2C-6.983%22%20style%3D%22fill%3Anone%3Bstroke%3A%23000%3Bstroke-width%3A2px%3B%22%2F%3E%0A%20%3CanimateTransform%0A%20%20%20attributeName%3D%22transform%22%0A%20%20%20type%3D%22rotate%22%0A%20%20%20from%3D%220%200%200%22%0A%20%20%20to%3D%22360%200%200%22%0A%20%20%20dur%3D%221.0s%22%0A%20%20%20repeatCount%3D%22indefinite%22%2F%3E%0A%3C%2Fsvg%3E%0A")
}
.ink-c-spinner {
  display: inline-block;
  align-self: center;
  justify-self: center;
  vertical-align: middle;
  background-color: currentColor;
  background-repeat: no-repeat;
  mask-image: var(--ink-c-spinner-image);
  width: var(--ink-c-spinner-size);
  height: var(--ink-c-spinner-size)
}
@keyframes ink-anim-barber-pole {
  100% {
    background-position: 100% 100%
  }
}
@keyframes ink-show-deprecated {
  0%,
  100% {
    outline-color: red
  }
  25% {
    outline-color: #00f
  }
  50% {
    outline-color: green
  }
  75% {
    outline-color: orange
  }
}
.ink-show-deprecations .ink-deprecated {
  animation: 6s infinite alternate ink-show-deprecated!important;
  outline: transparent double 3px;
  outline-offset: 3px
}
a:hover {
  color: var(--ink-p-link-hover-fg)
}
a:link {
  color: var(--ink-p-link-fg)
}
body {
  accent-color: var(--ink-p-accent-primary-bg);
  background: var(--ink-p-page-bg);
  color: var(--ink-p-fg);
  font-family: var(--ink-ff-default);
  font-size: var(--ink-u-font-std)
}
/*# sourceMappingURL=../../lib/css/3rdparty.css.45b3270666f2.map */
/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */
@font-face {
  font-family: 'FontAwesome';
  src: url("../../lib/fonts/fontawesome-webfont.674f50d287a8.eot?v=4.7.0");
  src: url("../../lib/fonts/fontawesome-webfont.674f50d287a8.eot?#iefix&v=4.7.0") format('embedded-opentype'), url("../../lib/fonts/fontawesome-webfont.af7ae505a9ee.woff2?v=4.7.0") format('woff2'), url("../../lib/fonts/fontawesome-webfont.fee66e712a8a.woff?v=4.7.0") format('woff'), url("../../lib/fonts/fontawesome-webfont.b06871f281fe.ttf?v=4.7.0") format('truetype'), url("../../lib/fonts/fontawesome-webfont.912ec66d7572.svg?v=4.7.0#fontawesomeregular") format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* makes the font 33% larger relative to the icon container */
.fa-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}
.fa-2x {
  font-size: 2em;
}
.fa-3x {
  font-size: 3em;
}
.fa-4x {
  font-size: 4em;
}
.fa-5x {
  font-size: 5em;
}
.fa-fw {
  width: 1.28571429em;
  text-align: center;
}
.fa-ul {
  padding-left: 0;
  margin-left: 2.14285714em;
  list-style-type: none;
}
.fa-ul > li {
  position: relative;
}
.fa-li {
  position: absolute;
  left: -2.14285714em;
  width: 2.14285714em;
  top: 0.14285714em;
  text-align: center;
}
.fa-li.fa-lg {
  left: -1.85714286em;
}
.fa-border {
  padding: 0.2em 0.25em 0.15em;
  border: solid 0.08em #eee;
  border-radius: 0.1em;
}
.fa-pull-left {
  float: left;
}
.fa-pull-right {
  float: right;
}
.fa.fa-pull-left {
  margin-right: 0.3em;
}
.fa.fa-pull-right {
  margin-left: 0.3em;
}
/* Deprecated as of 4.4.0 */
.pull-right {
  float: right;
}
.pull-left {
  float: left;
}
.fa.pull-left {
  margin-right: 0.3em;
}
.fa.pull-right {
  margin-left: 0.3em;
}
.fa-spin {
  animation: fa-spin 2s infinite linear;
}
.fa-pulse {
  animation: fa-spin 1s infinite steps(8);
}
@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}
.fa-rotate-90 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
  transform: rotate(90deg);
}
.fa-rotate-180 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
  transform: rotate(180deg);
}
.fa-rotate-270 {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
  transform: rotate(270deg);
}
.fa-flip-horizontal {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
  transform: scale(-1, 1);
}
.fa-flip-vertical {
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
  transform: scale(1, -1);
}
:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
  filter: none;
}
.fa-stack {
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
}
.fa-stack-1x,
.fa-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.fa-stack-1x {
  line-height: inherit;
}
.fa-stack-2x {
  font-size: 2em;
}
.fa-inverse {
  color: #fff;
}
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
   readers do not read off random characters that represent icons */
.fa-glass:before {
  content: "\f000";
}
.fa-music:before {
  content: "\f001";
}
.fa-search:before {
  content: "\f002";
}
.fa-envelope-o:before {
  content: "\f003";
}
.fa-heart:before {
  content: "\f004";
}
.fa-star:before {
  content: "\f005";
}
.fa-star-o:before {
  content: "\f006";
}
.fa-user:before {
  content: "\f007";
}
.fa-film:before {
  content: "\f008";
}
.fa-th-large:before {
  content: "\f009";
}
.fa-th:before {
  content: "\f00a";
}
.fa-th-list:before {
  content: "\f00b";
}
.fa-check:before {
  content: "\f00c";
}
.fa-remove:before,
.fa-close:before,
.fa-times:before {
  content: "\f00d";
}
.fa-search-plus:before {
  content: "\f00e";
}
.fa-search-minus:before {
  content: "\f010";
}
.fa-power-off:before {
  content: "\f011";
}
.fa-signal:before {
  content: "\f012";
}
.fa-gear:before,
.fa-cog:before {
  content: "\f013";
}
.fa-trash-o:before {
  content: "\f014";
}
.fa-home:before {
  content: "\f015";
}
.fa-file-o:before {
  content: "\f016";
}
.fa-clock-o:before {
  content: "\f017";
}
.fa-road:before {
  content: "\f018";
}
.fa-download:before {
  content: "\f019";
}
.fa-arrow-circle-o-down:before {
  content: "\f01a";
}
.fa-arrow-circle-o-up:before {
  content: "\f01b";
}
.fa-inbox:before {
  content: "\f01c";
}
.fa-play-circle-o:before {
  content: "\f01d";
}
.fa-rotate-right:before,
.fa-repeat:before {
  content: "\f01e";
}
.fa-refresh:before {
  content: "\f021";
}
.fa-list-alt:before {
  content: "\f022";
}
.fa-lock:before {
  content: "\f023";
}
.fa-flag:before {
  content: "\f024";
}
.fa-headphones:before {
  content: "\f025";
}
.fa-volume-off:before {
  content: "\f026";
}
.fa-volume-down:before {
  content: "\f027";
}
.fa-volume-up:before {
  content: "\f028";
}
.fa-qrcode:before {
  content: "\f029";
}
.fa-barcode:before {
  content: "\f02a";
}
.fa-tag:before {
  content: "\f02b";
}
.fa-tags:before {
  content: "\f02c";
}
.fa-book:before {
  content: "\f02d";
}
.fa-bookmark:before {
  content: "\f02e";
}
.fa-print:before {
  content: "\f02f";
}
.fa-camera:before {
  content: "\f030";
}
.fa-font:before {
  content: "\f031";
}
.fa-bold:before {
  content: "\f032";
}
.fa-italic:before {
  content: "\f033";
}
.fa-text-height:before {
  content: "\f034";
}
.fa-text-width:before {
  content: "\f035";
}
.fa-align-left:before {
  content: "\f036";
}
.fa-align-center:before {
  content: "\f037";
}
.fa-align-right:before {
  content: "\f038";
}
.fa-align-justify:before {
  content: "\f039";
}
.fa-list:before {
  content: "\f03a";
}
.fa-dedent:before,
.fa-outdent:before {
  content: "\f03b";
}
.fa-indent:before {
  content: "\f03c";
}
.fa-video-camera:before {
  content: "\f03d";
}
.fa-photo:before,
.fa-image:before,
.fa-picture-o:before {
  content: "\f03e";
}
.fa-pencil:before {
  content: "\f040";
}
.fa-map-marker:before {
  content: "\f041";
}
.fa-adjust:before {
  content: "\f042";
}
.fa-tint:before {
  content: "\f043";
}
.fa-edit:before,
.fa-pencil-square-o:before {
  content: "\f044";
}
.fa-share-square-o:before {
  content: "\f045";
}
.fa-check-square-o:before {
  content: "\f046";
}
.fa-arrows:before {
  content: "\f047";
}
.fa-step-backward:before {
  content: "\f048";
}
.fa-fast-backward:before {
  content: "\f049";
}
.fa-backward:before {
  content: "\f04a";
}
.fa-play:before {
  content: "\f04b";
}
.fa-pause:before {
  content: "\f04c";
}
.fa-stop:before {
  content: "\f04d";
}
.fa-forward:before {
  content: "\f04e";
}
.fa-fast-forward:before {
  content: "\f050";
}
.fa-step-forward:before {
  content: "\f051";
}
.fa-eject:before {
  content: "\f052";
}
.fa-chevron-left:before {
  content: "\f053";
}
.fa-chevron-right:before {
  content: "\f054";
}
.fa-plus-circle:before {
  content: "\f055";
}
.fa-minus-circle:before {
  content: "\f056";
}
.fa-times-circle:before {
  content: "\f057";
}
.fa-check-circle:before {
  content: "\f058";
}
.fa-question-circle:before {
  content: "\f059";
}
.fa-info-circle:before {
  content: "\f05a";
}
.fa-crosshairs:before {
  content: "\f05b";
}
.fa-times-circle-o:before {
  content: "\f05c";
}
.fa-check-circle-o:before {
  content: "\f05d";
}
.fa-ban:before {
  content: "\f05e";
}
.fa-arrow-left:before {
  content: "\f060";
}
.fa-arrow-right:before {
  content: "\f061";
}
.fa-arrow-up:before {
  content: "\f062";
}
.fa-arrow-down:before {
  content: "\f063";
}
.fa-mail-forward:before,
.fa-share:before {
  content: "\f064";
}
.fa-expand:before {
  content: "\f065";
}
.fa-compress:before {
  content: "\f066";
}
.fa-plus:before {
  content: "\f067";
}
.fa-minus:before {
  content: "\f068";
}
.fa-asterisk:before {
  content: "\f069";
}
.fa-exclamation-circle:before {
  content: "\f06a";
}
.fa-gift:before {
  content: "\f06b";
}
.fa-leaf:before {
  content: "\f06c";
}
.fa-fire:before {
  content: "\f06d";
}
.fa-eye:before {
  content: "\f06e";
}
.fa-eye-slash:before {
  content: "\f070";
}
.fa-warning:before,
.fa-exclamation-triangle:before {
  content: "\f071";
}
.fa-plane:before {
  content: "\f072";
}
.fa-calendar:before {
  content: "\f073";
}
.fa-random:before {
  content: "\f074";
}
.fa-comment:before {
  content: "\f075";
}
.fa-magnet:before {
  content: "\f076";
}
.fa-chevron-up:before {
  content: "\f077";
}
.fa-chevron-down:before {
  content: "\f078";
}
.fa-retweet:before {
  content: "\f079";
}
.fa-shopping-cart:before {
  content: "\f07a";
}
.fa-folder:before {
  content: "\f07b";
}
.fa-folder-open:before {
  content: "\f07c";
}
.fa-arrows-v:before {
  content: "\f07d";
}
.fa-arrows-h:before {
  content: "\f07e";
}
.fa-bar-chart-o:before,
.fa-bar-chart:before {
  content: "\f080";
}
.fa-twitter-square:before {
  content: "\f081";
}
.fa-facebook-square:before {
  content: "\f082";
}
.fa-camera-retro:before {
  content: "\f083";
}
.fa-key:before {
  content: "\f084";
}
.fa-gears:before,
.fa-cogs:before {
  content: "\f085";
}
.fa-comments:before {
  content: "\f086";
}
.fa-thumbs-o-up:before {
  content: "\f087";
}
.fa-thumbs-o-down:before {
  content: "\f088";
}
.fa-star-half:before {
  content: "\f089";
}
.fa-heart-o:before {
  content: "\f08a";
}
.fa-sign-out:before {
  content: "\f08b";
}
.fa-linkedin-square:before {
  content: "\f08c";
}
.fa-thumb-tack:before {
  content: "\f08d";
}
.fa-external-link:before {
  content: "\f08e";
}
.fa-sign-in:before {
  content: "\f090";
}
.fa-trophy:before {
  content: "\f091";
}
.fa-github-square:before {
  content: "\f092";
}
.fa-upload:before {
  content: "\f093";
}
.fa-lemon-o:before {
  content: "\f094";
}
.fa-phone:before {
  content: "\f095";
}
.fa-square-o:before {
  content: "\f096";
}
.fa-bookmark-o:before {
  content: "\f097";
}
.fa-phone-square:before {
  content: "\f098";
}
.fa-twitter:before {
  content: "\f099";
}
.fa-facebook-f:before,
.fa-facebook:before {
  content: "\f09a";
}
.fa-github:before {
  content: "\f09b";
}
.fa-unlock:before {
  content: "\f09c";
}
.fa-credit-card:before {
  content: "\f09d";
}
.fa-feed:before,
.fa-rss:before {
  content: "\f09e";
}
.fa-hdd-o:before {
  content: "\f0a0";
}
.fa-bullhorn:before {
  content: "\f0a1";
}
.fa-bell:before {
  content: "\f0f3";
}
.fa-certificate:before {
  content: "\f0a3";
}
.fa-hand-o-right:before {
  content: "\f0a4";
}
.fa-hand-o-left:before {
  content: "\f0a5";
}
.fa-hand-o-up:before {
  content: "\f0a6";
}
.fa-hand-o-down:before {
  content: "\f0a7";
}
.fa-arrow-circle-left:before {
  content: "\f0a8";
}
.fa-arrow-circle-right:before {
  content: "\f0a9";
}
.fa-arrow-circle-up:before {
  content: "\f0aa";
}
.fa-arrow-circle-down:before {
  content: "\f0ab";
}
.fa-globe:before {
  content: "\f0ac";
}
.fa-wrench:before {
  content: "\f0ad";
}
.fa-tasks:before {
  content: "\f0ae";
}
.fa-filter:before {
  content: "\f0b0";
}
.fa-briefcase:before {
  content: "\f0b1";
}
.fa-arrows-alt:before {
  content: "\f0b2";
}
.fa-group:before,
.fa-users:before {
  content: "\f0c0";
}
.fa-chain:before,
.fa-link:before {
  content: "\f0c1";
}
.fa-cloud:before {
  content: "\f0c2";
}
.fa-flask:before {
  content: "\f0c3";
}
.fa-cut:before,
.fa-scissors:before {
  content: "\f0c4";
}
.fa-copy:before,
.fa-files-o:before {
  content: "\f0c5";
}
.fa-paperclip:before {
  content: "\f0c6";
}
.fa-save:before,
.fa-floppy-o:before {
  content: "\f0c7";
}
.fa-square:before {
  content: "\f0c8";
}
.fa-navicon:before,
.fa-reorder:before,
.fa-bars:before {
  content: "\f0c9";
}
.fa-list-ul:before {
  content: "\f0ca";
}
.fa-list-ol:before {
  content: "\f0cb";
}
.fa-strikethrough:before {
  content: "\f0cc";
}
.fa-underline:before {
  content: "\f0cd";
}
.fa-table:before {
  content: "\f0ce";
}
.fa-magic:before {
  content: "\f0d0";
}
.fa-truck:before {
  content: "\f0d1";
}
.fa-pinterest:before {
  content: "\f0d2";
}
.fa-pinterest-square:before {
  content: "\f0d3";
}
.fa-google-plus-square:before {
  content: "\f0d4";
}
.fa-google-plus:before {
  content: "\f0d5";
}
.fa-money:before {
  content: "\f0d6";
}
.fa-caret-down:before {
  content: "\f0d7";
}
.fa-caret-up:before {
  content: "\f0d8";
}
.fa-caret-left:before {
  content: "\f0d9";
}
.fa-caret-right:before {
  content: "\f0da";
}
.fa-columns:before {
  content: "\f0db";
}
.fa-unsorted:before,
.fa-sort:before {
  content: "\f0dc";
}
.fa-sort-down:before,
.fa-sort-desc:before {
  content: "\f0dd";
}
.fa-sort-up:before,
.fa-sort-asc:before {
  content: "\f0de";
}
.fa-envelope:before {
  content: "\f0e0";
}
.fa-linkedin:before {
  content: "\f0e1";
}
.fa-rotate-left:before,
.fa-undo:before {
  content: "\f0e2";
}
.fa-legal:before,
.fa-gavel:before {
  content: "\f0e3";
}
.fa-dashboard:before,
.fa-tachometer:before {
  content: "\f0e4";
}
.fa-comment-o:before {
  content: "\f0e5";
}
.fa-comments-o:before {
  content: "\f0e6";
}
.fa-flash:before,
.fa-bolt:before {
  content: "\f0e7";
}
.fa-sitemap:before {
  content: "\f0e8";
}
.fa-umbrella:before {
  content: "\f0e9";
}
.fa-paste:before,
.fa-clipboard:before {
  content: "\f0ea";
}
.fa-lightbulb-o:before {
  content: "\f0eb";
}
.fa-exchange:before {
  content: "\f0ec";
}
.fa-cloud-download:before {
  content: "\f0ed";
}
.fa-cloud-upload:before {
  content: "\f0ee";
}
.fa-user-md:before {
  content: "\f0f0";
}
.fa-stethoscope:before {
  content: "\f0f1";
}
.fa-suitcase:before {
  content: "\f0f2";
}
.fa-bell-o:before {
  content: "\f0a2";
}
.fa-coffee:before {
  content: "\f0f4";
}
.fa-cutlery:before {
  content: "\f0f5";
}
.fa-file-text-o:before {
  content: "\f0f6";
}
.fa-building-o:before {
  content: "\f0f7";
}
.fa-hospital-o:before {
  content: "\f0f8";
}
.fa-ambulance:before {
  content: "\f0f9";
}
.fa-medkit:before {
  content: "\f0fa";
}
.fa-fighter-jet:before {
  content: "\f0fb";
}
.fa-beer:before {
  content: "\f0fc";
}
.fa-h-square:before {
  content: "\f0fd";
}
.fa-plus-square:before {
  content: "\f0fe";
}
.fa-angle-double-left:before {
  content: "\f100";
}
.fa-angle-double-right:before {
  content: "\f101";
}
.fa-angle-double-up:before {
  content: "\f102";
}
.fa-angle-double-down:before {
  content: "\f103";
}
.fa-angle-left:before {
  content: "\f104";
}
.fa-angle-right:before {
  content: "\f105";
}
.fa-angle-up:before {
  content: "\f106";
}
.fa-angle-down:before {
  content: "\f107";
}
.fa-desktop:before {
  content: "\f108";
}
.fa-laptop:before {
  content: "\f109";
}
.fa-tablet:before {
  content: "\f10a";
}
.fa-mobile-phone:before,
.fa-mobile:before {
  content: "\f10b";
}
.fa-circle-o:before {
  content: "\f10c";
}
.fa-quote-left:before {
  content: "\f10d";
}
.fa-quote-right:before {
  content: "\f10e";
}
.fa-spinner:before {
  content: "\f110";
}
.fa-circle:before {
  content: "\f111";
}
.fa-mail-reply:before,
.fa-reply:before {
  content: "\f112";
}
.fa-github-alt:before {
  content: "\f113";
}
.fa-folder-o:before {
  content: "\f114";
}
.fa-folder-open-o:before {
  content: "\f115";
}
.fa-smile-o:before {
  content: "\f118";
}
.fa-frown-o:before {
  content: "\f119";
}
.fa-meh-o:before {
  content: "\f11a";
}
.fa-gamepad:before {
  content: "\f11b";
}
.fa-keyboard-o:before {
  content: "\f11c";
}
.fa-flag-o:before {
  content: "\f11d";
}
.fa-flag-checkered:before {
  content: "\f11e";
}
.fa-terminal:before {
  content: "\f120";
}
.fa-code:before {
  content: "\f121";
}
.fa-mail-reply-all:before,
.fa-reply-all:before {
  content: "\f122";
}
.fa-star-half-empty:before,
.fa-star-half-full:before,
.fa-star-half-o:before {
  content: "\f123";
}
.fa-location-arrow:before {
  content: "\f124";
}
.fa-crop:before {
  content: "\f125";
}
.fa-code-fork:before {
  content: "\f126";
}
.fa-unlink:before,
.fa-chain-broken:before {
  content: "\f127";
}
.fa-question:before {
  content: "\f128";
}
.fa-info:before {
  content: "\f129";
}
.fa-exclamation:before {
  content: "\f12a";
}
.fa-superscript:before {
  content: "\f12b";
}
.fa-subscript:before {
  content: "\f12c";
}
.fa-eraser:before {
  content: "\f12d";
}
.fa-puzzle-piece:before {
  content: "\f12e";
}
.fa-microphone:before {
  content: "\f130";
}
.fa-microphone-slash:before {
  content: "\f131";
}
.fa-shield:before {
  content: "\f132";
}
.fa-calendar-o:before {
  content: "\f133";
}
.fa-fire-extinguisher:before {
  content: "\f134";
}
.fa-rocket:before {
  content: "\f135";
}
.fa-maxcdn:before {
  content: "\f136";
}
.fa-chevron-circle-left:before {
  content: "\f137";
}
.fa-chevron-circle-right:before {
  content: "\f138";
}
.fa-chevron-circle-up:before {
  content: "\f139";
}
.fa-chevron-circle-down:before {
  content: "\f13a";
}
.fa-html5:before {
  content: "\f13b";
}
.fa-css3:before {
  content: "\f13c";
}
.fa-anchor:before {
  content: "\f13d";
}
.fa-unlock-alt:before {
  content: "\f13e";
}
.fa-bullseye:before {
  content: "\f140";
}
.fa-ellipsis-h:before {
  content: "\f141";
}
.fa-ellipsis-v:before {
  content: "\f142";
}
.fa-rss-square:before {
  content: "\f143";
}
.fa-play-circle:before {
  content: "\f144";
}
.fa-ticket:before {
  content: "\f145";
}
.fa-minus-square:before {
  content: "\f146";
}
.fa-minus-square-o:before {
  content: "\f147";
}
.fa-level-up:before {
  content: "\f148";
}
.fa-level-down:before {
  content: "\f149";
}
.fa-check-square:before {
  content: "\f14a";
}
.fa-pencil-square:before {
  content: "\f14b";
}
.fa-external-link-square:before {
  content: "\f14c";
}
.fa-share-square:before {
  content: "\f14d";
}
.fa-compass:before {
  content: "\f14e";
}
.fa-toggle-down:before,
.fa-caret-square-o-down:before {
  content: "\f150";
}
.fa-toggle-up:before,
.fa-caret-square-o-up:before {
  content: "\f151";
}
.fa-toggle-right:before,
.fa-caret-square-o-right:before {
  content: "\f152";
}
.fa-euro:before,
.fa-eur:before {
  content: "\f153";
}
.fa-gbp:before {
  content: "\f154";
}
.fa-dollar:before,
.fa-usd:before {
  content: "\f155";
}
.fa-rupee:before,
.fa-inr:before {
  content: "\f156";
}
.fa-cny:before,
.fa-rmb:before,
.fa-yen:before,
.fa-jpy:before {
  content: "\f157";
}
.fa-ruble:before,
.fa-rouble:before,
.fa-rub:before {
  content: "\f158";
}
.fa-won:before,
.fa-krw:before {
  content: "\f159";
}
.fa-bitcoin:before,
.fa-btc:before {
  content: "\f15a";
}
.fa-file:before {
  content: "\f15b";
}
.fa-file-text:before {
  content: "\f15c";
}
.fa-sort-alpha-asc:before {
  content: "\f15d";
}
.fa-sort-alpha-desc:before {
  content: "\f15e";
}
.fa-sort-amount-asc:before {
  content: "\f160";
}
.fa-sort-amount-desc:before {
  content: "\f161";
}
.fa-sort-numeric-asc:before {
  content: "\f162";
}
.fa-sort-numeric-desc:before {
  content: "\f163";
}
.fa-thumbs-up:before {
  content: "\f164";
}
.fa-thumbs-down:before {
  content: "\f165";
}
.fa-youtube-square:before {
  content: "\f166";
}
.fa-youtube:before {
  content: "\f167";
}
.fa-xing:before {
  content: "\f168";
}
.fa-xing-square:before {
  content: "\f169";
}
.fa-youtube-play:before {
  content: "\f16a";
}
.fa-dropbox:before {
  content: "\f16b";
}
.fa-stack-overflow:before {
  content: "\f16c";
}
.fa-instagram:before {
  content: "\f16d";
}
.fa-flickr:before {
  content: "\f16e";
}
.fa-adn:before {
  content: "\f170";
}
.fa-bitbucket:before {
  content: "\f171";
}
.fa-bitbucket-square:before {
  content: "\f172";
}
.fa-tumblr:before {
  content: "\f173";
}
.fa-tumblr-square:before {
  content: "\f174";
}
.fa-long-arrow-down:before {
  content: "\f175";
}
.fa-long-arrow-up:before {
  content: "\f176";
}
.fa-long-arrow-left:before {
  content: "\f177";
}
.fa-long-arrow-right:before {
  content: "\f178";
}
.fa-apple:before {
  content: "\f179";
}
.fa-windows:before {
  content: "\f17a";
}
.fa-android:before {
  content: "\f17b";
}
.fa-linux:before {
  content: "\f17c";
}
.fa-dribbble:before {
  content: "\f17d";
}
.fa-skype:before {
  content: "\f17e";
}
.fa-foursquare:before {
  content: "\f180";
}
.fa-trello:before {
  content: "\f181";
}
.fa-female:before {
  content: "\f182";
}
.fa-male:before {
  content: "\f183";
}
.fa-gittip:before,
.fa-gratipay:before {
  content: "\f184";
}
.fa-sun-o:before {
  content: "\f185";
}
.fa-moon-o:before {
  content: "\f186";
}
.fa-archive:before {
  content: "\f187";
}
.fa-bug:before {
  content: "\f188";
}
.fa-vk:before {
  content: "\f189";
}
.fa-weibo:before {
  content: "\f18a";
}
.fa-renren:before {
  content: "\f18b";
}
.fa-pagelines:before {
  content: "\f18c";
}
.fa-stack-exchange:before {
  content: "\f18d";
}
.fa-arrow-circle-o-right:before {
  content: "\f18e";
}
.fa-arrow-circle-o-left:before {
  content: "\f190";
}
.fa-toggle-left:before,
.fa-caret-square-o-left:before {
  content: "\f191";
}
.fa-dot-circle-o:before {
  content: "\f192";
}
.fa-wheelchair:before {
  content: "\f193";
}
.fa-vimeo-square:before {
  content: "\f194";
}
.fa-turkish-lira:before,
.fa-try:before {
  content: "\f195";
}
.fa-plus-square-o:before {
  content: "\f196";
}
.fa-space-shuttle:before {
  content: "\f197";
}
.fa-slack:before {
  content: "\f198";
}
.fa-envelope-square:before {
  content: "\f199";
}
.fa-wordpress:before {
  content: "\f19a";
}
.fa-openid:before {
  content: "\f19b";
}
.fa-institution:before,
.fa-bank:before,
.fa-university:before {
  content: "\f19c";
}
.fa-mortar-board:before,
.fa-graduation-cap:before {
  content: "\f19d";
}
.fa-yahoo:before {
  content: "\f19e";
}
.fa-google:before {
  content: "\f1a0";
}
.fa-reddit:before {
  content: "\f1a1";
}
.fa-reddit-square:before {
  content: "\f1a2";
}
.fa-stumbleupon-circle:before {
  content: "\f1a3";
}
.fa-stumbleupon:before {
  content: "\f1a4";
}
.fa-delicious:before {
  content: "\f1a5";
}
.fa-digg:before {
  content: "\f1a6";
}
.fa-pied-piper-pp:before {
  content: "\f1a7";
}
.fa-pied-piper-alt:before {
  content: "\f1a8";
}
.fa-drupal:before {
  content: "\f1a9";
}
.fa-joomla:before {
  content: "\f1aa";
}
.fa-language:before {
  content: "\f1ab";
}
.fa-fax:before {
  content: "\f1ac";
}
.fa-building:before {
  content: "\f1ad";
}
.fa-child:before {
  content: "\f1ae";
}
.fa-paw:before {
  content: "\f1b0";
}
.fa-spoon:before {
  content: "\f1b1";
}
.fa-cube:before {
  content: "\f1b2";
}
.fa-cubes:before {
  content: "\f1b3";
}
.fa-behance:before {
  content: "\f1b4";
}
.fa-behance-square:before {
  content: "\f1b5";
}
.fa-steam:before {
  content: "\f1b6";
}
.fa-steam-square:before {
  content: "\f1b7";
}
.fa-recycle:before {
  content: "\f1b8";
}
.fa-automobile:before,
.fa-car:before {
  content: "\f1b9";
}
.fa-cab:before,
.fa-taxi:before {
  content: "\f1ba";
}
.fa-tree:before {
  content: "\f1bb";
}
.fa-spotify:before {
  content: "\f1bc";
}
.fa-deviantart:before {
  content: "\f1bd";
}
.fa-soundcloud:before {
  content: "\f1be";
}
.fa-database:before {
  content: "\f1c0";
}
.fa-file-pdf-o:before {
  content: "\f1c1";
}
.fa-file-word-o:before {
  content: "\f1c2";
}
.fa-file-excel-o:before {
  content: "\f1c3";
}
.fa-file-powerpoint-o:before {
  content: "\f1c4";
}
.fa-file-photo-o:before,
.fa-file-picture-o:before,
.fa-file-image-o:before {
  content: "\f1c5";
}
.fa-file-zip-o:before,
.fa-file-archive-o:before {
  content: "\f1c6";
}
.fa-file-sound-o:before,
.fa-file-audio-o:before {
  content: "\f1c7";
}
.fa-file-movie-o:before,
.fa-file-video-o:before {
  content: "\f1c8";
}
.fa-file-code-o:before {
  content: "\f1c9";
}
.fa-vine:before {
  content: "\f1ca";
}
.fa-codepen:before {
  content: "\f1cb";
}
.fa-jsfiddle:before {
  content: "\f1cc";
}
.fa-life-bouy:before,
.fa-life-buoy:before,
.fa-life-saver:before,
.fa-support:before,
.fa-life-ring:before {
  content: "\f1cd";
}
.fa-circle-o-notch:before {
  content: "\f1ce";
}
.fa-ra:before,
.fa-resistance:before,
.fa-rebel:before {
  content: "\f1d0";
}
.fa-ge:before,
.fa-empire:before {
  content: "\f1d1";
}
.fa-git-square:before {
  content: "\f1d2";
}
.fa-git:before {
  content: "\f1d3";
}
.fa-y-combinator-square:before,
.fa-yc-square:before,
.fa-hacker-news:before {
  content: "\f1d4";
}
.fa-tencent-weibo:before {
  content: "\f1d5";
}
.fa-qq:before {
  content: "\f1d6";
}
.fa-wechat:before,
.fa-weixin:before {
  content: "\f1d7";
}
.fa-send:before,
.fa-paper-plane:before {
  content: "\f1d8";
}
.fa-send-o:before,
.fa-paper-plane-o:before {
  content: "\f1d9";
}
.fa-history:before {
  content: "\f1da";
}
.fa-circle-thin:before {
  content: "\f1db";
}
.fa-header:before {
  content: "\f1dc";
}
.fa-paragraph:before {
  content: "\f1dd";
}
.fa-sliders:before {
  content: "\f1de";
}
.fa-share-alt:before {
  content: "\f1e0";
}
.fa-share-alt-square:before {
  content: "\f1e1";
}
.fa-bomb:before {
  content: "\f1e2";
}
.fa-soccer-ball-o:before,
.fa-futbol-o:before {
  content: "\f1e3";
}
.fa-tty:before {
  content: "\f1e4";
}
.fa-binoculars:before {
  content: "\f1e5";
}
.fa-plug:before {
  content: "\f1e6";
}
.fa-slideshare:before {
  content: "\f1e7";
}
.fa-twitch:before {
  content: "\f1e8";
}
.fa-yelp:before {
  content: "\f1e9";
}
.fa-newspaper-o:before {
  content: "\f1ea";
}
.fa-wifi:before {
  content: "\f1eb";
}
.fa-calculator:before {
  content: "\f1ec";
}
.fa-paypal:before {
  content: "\f1ed";
}
.fa-google-wallet:before {
  content: "\f1ee";
}
.fa-cc-visa:before {
  content: "\f1f0";
}
.fa-cc-mastercard:before {
  content: "\f1f1";
}
.fa-cc-discover:before {
  content: "\f1f2";
}
.fa-cc-amex:before {
  content: "\f1f3";
}
.fa-cc-paypal:before {
  content: "\f1f4";
}
.fa-cc-stripe:before {
  content: "\f1f5";
}
.fa-bell-slash:before {
  content: "\f1f6";
}
.fa-bell-slash-o:before {
  content: "\f1f7";
}
.fa-trash:before {
  content: "\f1f8";
}
.fa-copyright:before {
  content: "\f1f9";
}
.fa-at:before {
  content: "\f1fa";
}
.fa-eyedropper:before {
  content: "\f1fb";
}
.fa-paint-brush:before {
  content: "\f1fc";
}
.fa-birthday-cake:before {
  content: "\f1fd";
}
.fa-area-chart:before {
  content: "\f1fe";
}
.fa-pie-chart:before {
  content: "\f200";
}
.fa-line-chart:before {
  content: "\f201";
}
.fa-lastfm:before {
  content: "\f202";
}
.fa-lastfm-square:before {
  content: "\f203";
}
.fa-toggle-off:before {
  content: "\f204";
}
.fa-toggle-on:before {
  content: "\f205";
}
.fa-bicycle:before {
  content: "\f206";
}
.fa-bus:before {
  content: "\f207";
}
.fa-ioxhost:before {
  content: "\f208";
}
.fa-angellist:before {
  content: "\f209";
}
.fa-cc:before {
  content: "\f20a";
}
.fa-shekel:before,
.fa-sheqel:before,
.fa-ils:before {
  content: "\f20b";
}
.fa-meanpath:before {
  content: "\f20c";
}
.fa-buysellads:before {
  content: "\f20d";
}
.fa-connectdevelop:before {
  content: "\f20e";
}
.fa-dashcube:before {
  content: "\f210";
}
.fa-forumbee:before {
  content: "\f211";
}
.fa-leanpub:before {
  content: "\f212";
}
.fa-sellsy:before {
  content: "\f213";
}
.fa-shirtsinbulk:before {
  content: "\f214";
}
.fa-simplybuilt:before {
  content: "\f215";
}
.fa-skyatlas:before {
  content: "\f216";
}
.fa-cart-plus:before {
  content: "\f217";
}
.fa-cart-arrow-down:before {
  content: "\f218";
}
.fa-diamond:before {
  content: "\f219";
}
.fa-ship:before {
  content: "\f21a";
}
.fa-user-secret:before {
  content: "\f21b";
}
.fa-motorcycle:before {
  content: "\f21c";
}
.fa-street-view:before {
  content: "\f21d";
}
.fa-heartbeat:before {
  content: "\f21e";
}
.fa-venus:before {
  content: "\f221";
}
.fa-mars:before {
  content: "\f222";
}
.fa-mercury:before {
  content: "\f223";
}
.fa-intersex:before,
.fa-transgender:before {
  content: "\f224";
}
.fa-transgender-alt:before {
  content: "\f225";
}
.fa-venus-double:before {
  content: "\f226";
}
.fa-mars-double:before {
  content: "\f227";
}
.fa-venus-mars:before {
  content: "\f228";
}
.fa-mars-stroke:before {
  content: "\f229";
}
.fa-mars-stroke-v:before {
  content: "\f22a";
}
.fa-mars-stroke-h:before {
  content: "\f22b";
}
.fa-neuter:before {
  content: "\f22c";
}
.fa-genderless:before {
  content: "\f22d";
}
.fa-facebook-official:before {
  content: "\f230";
}
.fa-pinterest-p:before {
  content: "\f231";
}
.fa-whatsapp:before {
  content: "\f232";
}
.fa-server:before {
  content: "\f233";
}
.fa-user-plus:before {
  content: "\f234";
}
.fa-user-times:before {
  content: "\f235";
}
.fa-hotel:before,
.fa-bed:before {
  content: "\f236";
}
.fa-viacoin:before {
  content: "\f237";
}
.fa-train:before {
  content: "\f238";
}
.fa-subway:before {
  content: "\f239";
}
.fa-medium:before {
  content: "\f23a";
}
.fa-yc:before,
.fa-y-combinator:before {
  content: "\f23b";
}
.fa-optin-monster:before {
  content: "\f23c";
}
.fa-opencart:before {
  content: "\f23d";
}
.fa-expeditedssl:before {
  content: "\f23e";
}
.fa-battery-4:before,
.fa-battery:before,
.fa-battery-full:before {
  content: "\f240";
}
.fa-battery-3:before,
.fa-battery-three-quarters:before {
  content: "\f241";
}
.fa-battery-2:before,
.fa-battery-half:before {
  content: "\f242";
}
.fa-battery-1:before,
.fa-battery-quarter:before {
  content: "\f243";
}
.fa-battery-0:before,
.fa-battery-empty:before {
  content: "\f244";
}
.fa-mouse-pointer:before {
  content: "\f245";
}
.fa-i-cursor:before {
  content: "\f246";
}
.fa-object-group:before {
  content: "\f247";
}
.fa-object-ungroup:before {
  content: "\f248";
}
.fa-sticky-note:before {
  content: "\f249";
}
.fa-sticky-note-o:before {
  content: "\f24a";
}
.fa-cc-jcb:before {
  content: "\f24b";
}
.fa-cc-diners-club:before {
  content: "\f24c";
}
.fa-clone:before {
  content: "\f24d";
}
.fa-balance-scale:before {
  content: "\f24e";
}
.fa-hourglass-o:before {
  content: "\f250";
}
.fa-hourglass-1:before,
.fa-hourglass-start:before {
  content: "\f251";
}
.fa-hourglass-2:before,
.fa-hourglass-half:before {
  content: "\f252";
}
.fa-hourglass-3:before,
.fa-hourglass-end:before {
  content: "\f253";
}
.fa-hourglass:before {
  content: "\f254";
}
.fa-hand-grab-o:before,
.fa-hand-rock-o:before {
  content: "\f255";
}
.fa-hand-stop-o:before,
.fa-hand-paper-o:before {
  content: "\f256";
}
.fa-hand-scissors-o:before {
  content: "\f257";
}
.fa-hand-lizard-o:before {
  content: "\f258";
}
.fa-hand-spock-o:before {
  content: "\f259";
}
.fa-hand-pointer-o:before {
  content: "\f25a";
}
.fa-hand-peace-o:before {
  content: "\f25b";
}
.fa-trademark:before {
  content: "\f25c";
}
.fa-registered:before {
  content: "\f25d";
}
.fa-creative-commons:before {
  content: "\f25e";
}
.fa-gg:before {
  content: "\f260";
}
.fa-gg-circle:before {
  content: "\f261";
}
.fa-tripadvisor:before {
  content: "\f262";
}
.fa-odnoklassniki:before {
  content: "\f263";
}
.fa-odnoklassniki-square:before {
  content: "\f264";
}
.fa-get-pocket:before {
  content: "\f265";
}
.fa-wikipedia-w:before {
  content: "\f266";
}
.fa-safari:before {
  content: "\f267";
}
.fa-chrome:before {
  content: "\f268";
}
.fa-firefox:before {
  content: "\f269";
}
.fa-opera:before {
  content: "\f26a";
}
.fa-internet-explorer:before {
  content: "\f26b";
}
.fa-tv:before,
.fa-television:before {
  content: "\f26c";
}
.fa-contao:before {
  content: "\f26d";
}
.fa-500px:before {
  content: "\f26e";
}
.fa-amazon:before {
  content: "\f270";
}
.fa-calendar-plus-o:before {
  content: "\f271";
}
.fa-calendar-minus-o:before {
  content: "\f272";
}
.fa-calendar-times-o:before {
  content: "\f273";
}
.fa-calendar-check-o:before {
  content: "\f274";
}
.fa-industry:before {
  content: "\f275";
}
.fa-map-pin:before {
  content: "\f276";
}
.fa-map-signs:before {
  content: "\f277";
}
.fa-map-o:before {
  content: "\f278";
}
.fa-map:before {
  content: "\f279";
}
.fa-commenting:before {
  content: "\f27a";
}
.fa-commenting-o:before {
  content: "\f27b";
}
.fa-houzz:before {
  content: "\f27c";
}
.fa-vimeo:before {
  content: "\f27d";
}
.fa-black-tie:before {
  content: "\f27e";
}
.fa-fonticons:before {
  content: "\f280";
}
.fa-reddit-alien:before {
  content: "\f281";
}
.fa-edge:before {
  content: "\f282";
}
.fa-credit-card-alt:before {
  content: "\f283";
}
.fa-codiepie:before {
  content: "\f284";
}
.fa-modx:before {
  content: "\f285";
}
.fa-fort-awesome:before {
  content: "\f286";
}
.fa-usb:before {
  content: "\f287";
}
.fa-product-hunt:before {
  content: "\f288";
}
.fa-mixcloud:before {
  content: "\f289";
}
.fa-scribd:before {
  content: "\f28a";
}
.fa-pause-circle:before {
  content: "\f28b";
}
.fa-pause-circle-o:before {
  content: "\f28c";
}
.fa-stop-circle:before {
  content: "\f28d";
}
.fa-stop-circle-o:before {
  content: "\f28e";
}
.fa-shopping-bag:before {
  content: "\f290";
}
.fa-shopping-basket:before {
  content: "\f291";
}
.fa-hashtag:before {
  content: "\f292";
}
.fa-bluetooth:before {
  content: "\f293";
}
.fa-bluetooth-b:before {
  content: "\f294";
}
.fa-percent:before {
  content: "\f295";
}
.fa-gitlab:before {
  content: "\f296";
}
.fa-wpbeginner:before {
  content: "\f297";
}
.fa-wpforms:before {
  content: "\f298";
}
.fa-envira:before {
  content: "\f299";
}
.fa-universal-access:before {
  content: "\f29a";
}
.fa-wheelchair-alt:before {
  content: "\f29b";
}
.fa-question-circle-o:before {
  content: "\f29c";
}
.fa-blind:before {
  content: "\f29d";
}
.fa-audio-description:before {
  content: "\f29e";
}
.fa-volume-control-phone:before {
  content: "\f2a0";
}
.fa-braille:before {
  content: "\f2a1";
}
.fa-assistive-listening-systems:before {
  content: "\f2a2";
}
.fa-asl-interpreting:before,
.fa-american-sign-language-interpreting:before {
  content: "\f2a3";
}
.fa-deafness:before,
.fa-hard-of-hearing:before,
.fa-deaf:before {
  content: "\f2a4";
}
.fa-glide:before {
  content: "\f2a5";
}
.fa-glide-g:before {
  content: "\f2a6";
}
.fa-signing:before,
.fa-sign-language:before {
  content: "\f2a7";
}
.fa-low-vision:before {
  content: "\f2a8";
}
.fa-viadeo:before {
  content: "\f2a9";
}
.fa-viadeo-square:before {
  content: "\f2aa";
}
.fa-snapchat:before {
  content: "\f2ab";
}
.fa-snapchat-ghost:before {
  content: "\f2ac";
}
.fa-snapchat-square:before {
  content: "\f2ad";
}
.fa-pied-piper:before {
  content: "\f2ae";
}
.fa-first-order:before {
  content: "\f2b0";
}
.fa-yoast:before {
  content: "\f2b1";
}
.fa-themeisle:before {
  content: "\f2b2";
}
.fa-google-plus-circle:before,
.fa-google-plus-official:before {
  content: "\f2b3";
}
.fa-fa:before,
.fa-font-awesome:before {
  content: "\f2b4";
}
.fa-handshake-o:before {
  content: "\f2b5";
}
.fa-envelope-open:before {
  content: "\f2b6";
}
.fa-envelope-open-o:before {
  content: "\f2b7";
}
.fa-linode:before {
  content: "\f2b8";
}
.fa-address-book:before {
  content: "\f2b9";
}
.fa-address-book-o:before {
  content: "\f2ba";
}
.fa-vcard:before,
.fa-address-card:before {
  content: "\f2bb";
}
.fa-vcard-o:before,
.fa-address-card-o:before {
  content: "\f2bc";
}
.fa-user-circle:before {
  content: "\f2bd";
}
.fa-user-circle-o:before {
  content: "\f2be";
}
.fa-user-o:before {
  content: "\f2c0";
}
.fa-id-badge:before {
  content: "\f2c1";
}
.fa-drivers-license:before,
.fa-id-card:before {
  content: "\f2c2";
}
.fa-drivers-license-o:before,
.fa-id-card-o:before {
  content: "\f2c3";
}
.fa-quora:before {
  content: "\f2c4";
}
.fa-free-code-camp:before {
  content: "\f2c5";
}
.fa-telegram:before {
  content: "\f2c6";
}
.fa-thermometer-4:before,
.fa-thermometer:before,
.fa-thermometer-full:before {
  content: "\f2c7";
}
.fa-thermometer-3:before,
.fa-thermometer-three-quarters:before {
  content: "\f2c8";
}
.fa-thermometer-2:before,
.fa-thermometer-half:before {
  content: "\f2c9";
}
.fa-thermometer-1:before,
.fa-thermometer-quarter:before {
  content: "\f2ca";
}
.fa-thermometer-0:before,
.fa-thermometer-empty:before {
  content: "\f2cb";
}
.fa-shower:before {
  content: "\f2cc";
}
.fa-bathtub:before,
.fa-s15:before,
.fa-bath:before {
  content: "\f2cd";
}
.fa-podcast:before {
  content: "\f2ce";
}
.fa-window-maximize:before {
  content: "\f2d0";
}
.fa-window-minimize:before {
  content: "\f2d1";
}
.fa-window-restore:before {
  content: "\f2d2";
}
.fa-times-rectangle:before,
.fa-window-close:before {
  content: "\f2d3";
}
.fa-times-rectangle-o:before,
.fa-window-close-o:before {
  content: "\f2d4";
}
.fa-bandcamp:before {
  content: "\f2d5";
}
.fa-grav:before {
  content: "\f2d6";
}
.fa-etsy:before {
  content: "\f2d7";
}
.fa-imdb:before {
  content: "\f2d8";
}
.fa-ravelry:before {
  content: "\f2d9";
}
.fa-eercast:before {
  content: "\f2da";
}
.fa-microchip:before {
  content: "\f2db";
}
.fa-snowflake-o:before {
  content: "\f2dc";
}
.fa-superpowers:before {
  content: "\f2dd";
}
.fa-wpexplorer:before {
  content: "\f2de";
}
.fa-meetup:before {
  content: "\f2e0";
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}
/*# sourceMappingURL=../../lib/css/fontawesome.css.9e7406b12da2.map */
/* Note: These are roughly in dependency order. */
.rb-icon {
  background-repeat: no-repeat;
  display: inline-block;
  overflow: hidden;
  text-indent: -99999px;
  vertical-align: middle;
  /* Set up the default image and size. */
  background-image: url("../images/icons.8349873cd17e.png");
  background-size: 155px 150px;
  /*
   * If there are 2 or more ratio levels, loop through and create media
   * selectors for each.
   */
  /*
   * If SVG is enabled, create a media selector for it based on the max
   * ratio.
   */
}
@media (min-resolution: 1.5dppx) {
  .rb-icon {
    background-image: url("../images/icons@2x.a67a7b4758fa.png");
    background-size: 155px 150px;
  }
}
@media (min-resolution: 192dpi) {
  .rb-icon {
    background-image: url("../images/icons@2x.a67a7b4758fa.png");
    background-size: 155px 150px;
  }
}
@media (min-resolution: 288dpi) {
  .rb-icon {
    background-image: url("../images/icons.de9a40700dc3.svg");
    background-size: 155px 150px;
  }
}
/*
 * NOTE: Keep these in the same order as found in the spritesheet.
 */
.rb-icon-issue-dropped {
  background-position: -5px -5px;
  width: 16px;
  height: 16px;
}
.rb-icon-issue-open {
  background-position: -26px -5px;
  width: 16px;
  height: 16px;
}
.rb-icon-issue-resolved {
  background-position: -47px -5px;
  width: 16px;
  height: 16px;
}
.rb-icon-collapse-review {
  background-position: -68px -5px;
  width: 18px;
  height: 18px;
}
.rb-icon-expand-review {
  background-position: -91px -5px;
  width: 18px;
  height: 18px;
}
.rb-icon-collapse {
  background-position: -114px -5px;
  width: 14px;
  height: 14px;
}
.rb-icon-expand {
  background-position: -135px -5px;
  width: 14px;
  height: 14px;
}
.rb-icon-dropdown-arrow {
  background-position: -8px -33px;
  width: 8px;
  height: 8px;
}
.rb-icon-datagrid-comment-draft {
  background-position: -24px -28px;
  width: 16px;
  height: 16px;
}
.rb-icon-datagrid-comment-shipit {
  background-position: -45px -28px;
  width: 16px;
  height: 16px;
}
.rb-icon-datagrid-comment {
  background-position: -66px -28px;
  width: 16px;
  height: 16px;
}
.rb-icon-datagrid-shipit {
  background-position: -87px -28px;
  width: 10px;
  height: 12px;
}
.rb-icon-new-updates {
  background-position: -102px -29px;
  width: 15px;
  height: 15px;
}
.rb-icon-edit {
  background-position: -124px -28px;
  width: 20px;
  height: 16px;
}
.rb-icon-delete {
  background-position: -5px -49px;
  width: 12px;
  height: 12px;
}
.rb-icon-diff-collapse-chunk {
  background-position: -22px -49px;
  width: 14px;
  height: 14px;
}
.rb-icon-diff-expand-above {
  background-position: -41px -49px;
  width: 28px;
  height: 14px;
}
.rb-icon-diff-expand-all {
  background-position: -74px -49px;
  width: 14px;
  height: 14px;
}
.rb-icon-diff-expand-below {
  background-position: -93px -49px;
  width: 28px;
  height: 14px;
}
.rb-icon-diff-expand-header {
  background-position: -126px -49px;
  width: 14px;
  height: 14px;
}
.rb-icon-admin-enabled {
  background-position: -5px -68px;
  width: 16px;
  height: 16px;
}
.rb-icon-admin-disabled {
  background-position: -26px -68px;
  width: 16px;
  height: 16px;
}
.rb-icon-admin-add {
  background-position: -47px -68px;
  width: 16px;
  height: 16px;
}
.rb-icon-star-off {
  background-position: -68px -68px;
  width: 16px;
  height: 16px;
}
.rb-icon-star-on {
  background-position: -89px -68px;
  width: 16px;
  height: 16px;
}
.rb-icon-warning {
  background-position: -110px -68px;
  width: 16px;
  height: 16px;
}
.rb-icon-search {
  background-position: -129px -66px;
  width: 20px;
  height: 20px;
}
.rb-icon-search-dark {
  background-position: -3px -86px;
  width: 20px;
  height: 20px;
}
.rb-icon-admin-collapse {
  background-position: -25px -89px;
  width: 20px;
  height: 13px;
}
.rb-icon-admin-expand {
  background-position: -50px -89px;
  width: 20px;
  height: 13px;
}
.rb-icon-jump-to {
  background-position: -76px -86px;
  width: 21px;
  height: 18px;
}
.rb-icon-range-slider {
  background-position: -99px -87px;
  width: 11px;
  height: 18px;
}
.rb-icon-download {
  background-position: -114px -90px;
  width: 14px;
  height: 14px;
}
.rb-icon-remove-widget {
  background-position: -130px -89px;
  width: 13px;
  height: 13px;
}
.rb-icon-archive-off {
  background-position: -6px -106px;
  width: 16px;
  height: 16px;
}
.rb-icon-archive-on {
  background-position: -26px -106px;
  width: 16px;
  height: 16px;
}
.rb-icon-datagrid-open-issues {
  background-position: -47px -108px;
  width: 8px;
  height: 11px;
}
.rb-icon-datagrid-column-shipits-issues {
  background-position: -59px -107px;
  width: 35px;
  height: 16px;
}
.rb-icon-shipit {
  background-position: -99px -107px;
  width: 12px;
  height: 15px;
}
.rb-icon-issue-verifying {
  background-position: -117px -107px;
  width: 16px;
  height: 16px;
}
.rb-icon-datagrid-issue-verifying {
  background-position: -139px -108px;
  width: 11px;
  height: 14px;
}
.rb-icon-compose-review {
  background-position: -6px -126px;
  width: 17px;
  height: 16px;
}
.rb-icon-edit-review {
  background-position: -26px -126px;
  width: 16px;
  height: 16px;
}
.rb-icon-create-review {
  background-position: -46px -124px;
  width: 18px;
  height: 18px;
}
.rb-icon-review-num-files {
  background-position: -64px -126px;
  width: 16px;
  height: 16px;
}
/*
 * Define SVG icons based on Tabler.
 */
.rb-icon-brand-bluesky {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-brand-bluesky%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M6.335%205.144c-1.654%20-1.199%20-4.335%20-2.127%20-4.335%20.826c0%20.59%20.35%204.953%20.556%205.661c.713%202.463%203.13%202.75%205.444%202.369c-4.045%20.665%20-4.889%203.208%20-2.667%205.41c1.03%201.018%201.913%201.59%202.667%201.59c2%200%203.134%20-2.769%203.5%20-3.5c.333%20-.667%20.5%20-1.167%20.5%20-1.5c0%20.333%20.167%20.833%20.5%201.5c.366%20.731%201.5%203.5%203.5%203.5c.754%200%201.637%20-.571%202.667%20-1.59c2.222%20-2.203%201.378%20-4.746%20-2.667%20-5.41c2.314%20.38%204.73%20.094%205.444%20-2.369c.206%20-.708%20.556%20-5.072%20.556%20-5.661c0%20-2.953%20-2.68%20-2.025%20-4.335%20-.826c-2.293%201.662%20-4.76%205.048%20-5.665%206.856c-.905%20-1.808%20-3.372%20-5.194%20-5.665%20-6.856%22%20%2F%3E%0A%3C%2Fsvg%3E");
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std);
}
.rb-icon-brand-facebook {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-brand-facebook%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M7%2010v4h3v7h4v-7h3l1%20-4h-4v-2a1%201%200%200%201%201%20-1h3v-4h-3a5%205%200%200%200%20-5%205v2h-3%22%20%2F%3E%0A%3C%2Fsvg%3E");
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std);
}
.rb-icon-brand-linkedin {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-brand-linkedin%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M8%2011v5%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M8%208v.01%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M12%2016v-5%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M16%2016v-3a2%202%200%201%200%20-4%200%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M3%207a4%204%200%200%201%204%20-4h10a4%204%200%200%201%204%204v10a4%204%200%200%201%20-4%204h-10a4%204%200%200%201%20-4%20-4l0%20-10%22%20%2F%3E%0A%3C%2Fsvg%3E");
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std);
}
.rb-icon-brand-mastodon {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-brand-mastodon%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M18.648%2015.254c-1.816%201.763%20-6.648%201.626%20-6.648%201.626a18.262%2018.262%200%200%201%20-3.288%20-.256c1.127%201.985%204.12%202.81%208.982%202.475c-1.945%202.013%20-13.598%205.257%20-13.668%20-7.636l-.026%20-1.154c0%20-3.036%20.023%20-4.115%201.352%20-5.633c1.671%20-1.91%206.648%20-1.666%206.648%20-1.666s4.977%20-.243%206.648%201.667c1.329%201.518%201.352%202.597%201.352%205.633s-.456%204.074%20-1.352%204.944%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M12%2011.204v-2.926c0%20-1.258%20-.895%20-2.278%20-2%20-2.278s-2%201.02%20-2%202.278v4.722m4%20-4.722c0%20-1.258%20.895%20-2.278%202%20-2.278s2%201.02%202%202.278v4.722%22%20%2F%3E%0A%3C%2Fsvg%3E");
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std);
}
.rb-icon-brand-reddit {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-brand-reddit%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M12%208c2.648%200%205.028%20.826%206.675%202.14a2.5%202.5%200%200%201%202.326%204.36c0%203.59%20-4.03%206.5%20-9%206.5c-4.875%200%20-8.845%20-2.8%20-9%20-6.294l-1%20-.206a2.5%202.5%200%200%201%202.326%20-4.36c1.646%20-1.313%204.026%20-2.14%206.674%20-2.14l.999%200%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M12%208l1%20-5l6%201%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M18%204a1%201%200%201%200%202%200a1%201%200%201%200%20-2%200%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M8.5%2013a.5%20.5%200%201%200%201%200a.5%20.5%200%201%200%20-1%200%22%20fill%3D%22currentColor%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M14.5%2013a.5%20.5%200%201%200%201%200a.5%20.5%200%201%200%20-1%200%22%20fill%3D%22currentColor%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M10%2017c.667%20.333%201.333%20.5%202%20.5s1.333%20-.167%202%20-.5%22%20%2F%3E%0A%3C%2Fsvg%3E");
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std);
}
.rb-icon-brand-twitter {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-brand-twitter%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M22%204.01c-1%20.49%20-1.98%20.689%20-3%20.99c-1.121%20-1.265%20-2.783%20-1.335%20-4.38%20-.737s-2.643%202.06%20-2.62%203.737v1c-3.245%20.083%20-6.135%20-1.395%20-8%20-4c0%200%20-4.182%207.433%204%2011c-1.872%201.247%20-3.739%202.088%20-6%202c3.308%201.803%206.913%202.423%2010.034%201.517c3.58%20-1.04%206.522%20-3.723%207.651%20-7.742a13.84%2013.84%200%200%200%20.497%20-3.753c0%20-.249%201.51%20-2.772%201.818%20-4.013l0%20.001%22%20%2F%3E%0A%3C%2Fsvg%3E");
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std);
}
.rb-icon-brand-youtube {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-brand-youtube%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M2%208a4%204%200%200%201%204%20-4h12a4%204%200%200%201%204%204v8a4%204%200%200%201%20-4%204h-12a4%204%200%200%201%20-4%20-4v-8%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M10%209l5%203l-5%203l0%20-6%22%20%2F%3E%0A%3C%2Fsvg%3E");
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std);
}
.rb-icon-rss {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: url("data:image/svg+xml,%3Csvg%0A%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20%20width%3D%2224%22%0A%20%20height%3D%2224%22%0A%20%20viewBox%3D%220%200%2024%2024%22%0A%20%20fill%3D%22none%22%0A%20%20stroke%3D%22currentColor%22%0A%20%20stroke-width%3D%222%22%0A%20%20stroke-linecap%3D%22round%22%0A%20%20stroke-linejoin%3D%22round%22%0A%20%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-rss%22%0A%3E%0A%20%20%3Cpath%20stroke%3D%22none%22%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M4%2019a1%201%200%201%200%202%200a1%201%200%201%200%20-2%200%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M4%204a16%2016%200%200%201%2016%2016%22%20%2F%3E%0A%20%20%3Cpath%20d%3D%22M4%2011a9%209%200%200%201%209%209%22%20%2F%3E%0A%3C%2Fsvg%3E");
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std);
}
/*
 * Prevents a floated element from affecting elements below it.
 *
 * This is used to allow an element with a float to remain floating without
 * interfering with the layout of any elements that follow it. It is
 * equivalent to placing an element immediately after with "clear: both;".
 */
.clearfix {
  display: inline-block;
}
.clearfix:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
/**
 * The main body element for the page.
 *
 * Modifiers:
 *     -has-sidebar:
 *         Whether the page has a sidebar shown.
 *
 *     -is-content-flush:
 *         Removes any margins and padding between the page content and the
 *         UI shell.
 *
 *     -is-content-flush-on-desktop:
 *         Removes any margins and padding between the page content and the
 *         UI shell when in desktop mode.
 *
 *     -is-content-flush-on-mobile:
 *         Removes any margins and padding between the page content and the
 *         UI shell when in mobile mode.
 *
 *     -is-content-full-page:
 *         Whether the content area should take up the full visual width
 *         and height of the page container. This keeps the content within
 *         the viewport, and allows the content to take care of its own
 *         scrolling.
 */
body {
  margin: 0;
  padding: 0;
}
body.-is-content-flush #page-container {
  padding: 0;
}
body.-is-content-flush #topbar {
  margin-bottom: 0;
}
@media only screen and (max-width: 800px) {
  body {
    /*
     * If the page indicates it's showing a sidebar, and the UI shell is in
     * mobile mode, override the content placement so it's not offset by the
     * size of the sidebar.
     */
  }
  body.js-mobile-menu-open {
    /*
       * When opening the mobile sidebar menu, lock the viewport so the user
       * can't scroll, and shift everything on the page over by the menu's
       * width. This will animate them, using the transitions set on the
       * elements.
       */
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
  }
  body.js-mobile-menu-open #container {
    transform: translate(300px, 0);
    height: 100%;
  }
  body.-has-sidebar #content,
  body.has-sidebar #content {
    margin-left: 0;
  }
  body.-is-content-flush-on-mobile #page-container {
    padding: 0;
  }
  body.-is-content-flush-on-mobile #topbar {
    margin-bottom: 0;
  }
}
@media only screen and (min-width: 801px) {
  body.-has-sidebar .rb-c-page-sidebar,
  body.has-sidebar .rb-c-page-sidebar {
    display: block;
  }
  body.-has-sidebar #page-container,
  body.has-sidebar #page-container {
    padding-left: 0;
  }
  body.js-rb-c-drawer-is-shown #page-sidebar-main-pane {
    opacity: 0;
  }
  body.-is-content-flush-on-desktop #page-container {
    padding: 0;
  }
  body.-is-content-flush-on-desktop #topbar {
    margin-bottom: 0;
  }
  body .rb-c-page-sidebar {
    display: none;
  }
}
:root,
[data-ink-color-scheme] {
  --rb-p-draft-bg: var(--if-light, var(--ink-p-green-200)) var(--if-dark, var(--ink-p-cool-grey-400));
  --rb-p-draft-hover-bg: var(--if-light, var(--ink-p-green-300)) var(--if-dark, var(--ink-p-accent-primary-bg));
  --rb-p-draft-hover-fg: var(--if-light, var(--ink-p-fg-on-light)) var(--if-dark, var(--ink-p-accent-primary-fg));
  --rb-p-draft-border-color: var(--if-light, var(--ink-p-green-500)) var(--if-dark, var(--ink-p-black));
  --rb-p-draft-label-fg: var(--ink-p-green-600);
  --rb-p-flag-draft-bg: var(--ink-p-light__green-200);
  --rb-p-flag-draft-hover-bg: var(--ink-p-light__green-100);
  --rb-p-flag-draft-fg: var(--ink-p-light__green-900);
  --rb-p-flag-draft-border-color: var(--ink-p-light__green-500);
  --rb-p-flag-published-bg: var(--ink-p-light__blue-400);
  --rb-p-flag-published-hover-bg: var(--ink-p-light__blue-300);
  --rb-p-flag-published-fg: var(--ink-p-light__blue-900);
  --rb-p-flag-published-border-color: var(--ink-p-dark__blue-300);
  --rb-p-issue-bg: var(--ink-p-light__yellow-300);
  --rb-p-issue-border-color: var(--ink-p-container-border-color);
  --rb-p-issue-open-accent-text-color: var(--ink-p-light__yellow-300);
  --rb-p-issue-dropped-accent-text-color: var(--ink-p-fg-weak-on-dark);
  --rb-p-issue-resolved-accent-text-color: var(--ink-p-accent-success-fg-on-container);
  --rb-p-diff-insert-graph-color: var(--if-light, var(--ink-p-green-500)) var(--if-dark, var(--ink-p-green-700));
  --rb-p-diff-delete-graph-color: var(--if-light, var(--ink-p-red-500)) var(--if-dark, var(--ink-p-red-700));
  --rb-p-diff-replace-graph-color: var(--if-light, var(--ink-p-yellow-800)) var(--if-dark, var(--ink-p-yellow-600));
  --rb-p-diff-insert-op-bg: var(--if-light, #CFF2CA) var(--if-dark, var(--ink-p-input-bg));
  --rb-p-diff-insert-op-fg: var(--if-light, var(--ink-p-fg-on-light)) var(--if-dark, var(--ink-p-green-700));
  --rb-p-diff-delete-op-bg: var(--if-light, #F6DBDF) var(--if-dark, var(--ink-p-input-bg));
  --rb-p-diff-delete-op-fg: var(--if-light, var(--ink-p-fg-on-light)) var(--if-dark, var(--ink-p-red-800));
  --rb-p-diff-replace-op-bg: var(--if-light, #EEEFC0) var(--if-dark, var(--ink-p-input-bg));
  --rb-p-diff-replace-op-fg: var(--if-light, var(--ink-p-fg-on-light)) var(--if-dark, var(--ink-p-yellow-800));
  --rb-p-diff-insert-text-fg: var(--ink-p-green-800);
  --rb-p-diff-delete-text-fg: var(--ink-p-red-800);
  --ink-ff-sans-serif: Verdana, Arial, Helvetica, Sans-Serif;
  --ink-u-font-std: var(--ink-u-font-s);
}
html {
  scroll-behavior: smooth;
}
html,
body {
  min-height: 100vh;
}
body.full-page-content,
body.-is-content-full-page {
  /*
   * Set the page to not scroll and have all content take up the maximum
   * height.
   */
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  /*
   * Set the content to take up the full height of #page-container. It's
   * expected that RB.PageView will size #page-container appropriately for
   * the page.
   */
  /*
   * Hide the page sidebar panes, so we can display them initially at the
   * correct height.
   */
}
body.full-page-content #container,
body.-is-content-full-page #container,
body.full-page-content #content_container,
body.-is-content-full-page #content_container,
body.full-page-content #content,
body.-is-content-full-page #content {
  height: 100%;
  margin-bottom: 0;
  vertical-align: top;
}
@media only screen and (min-width: 801px) {
  body.full-page-content,
  body.-is-content-full-page {
    /*
     * Set the page sidebar's panes container and all panes to allocate
     * the full height of #page-sidebar, so that #page-sidebar's scrolling
     * will be allowed to kick in. It's expected that RB.PageView will size
     * #page-sidebar appropriately for the page.
     */
  }
  body.full-page-content #page-sidebar-panes,
  body.-is-content-full-page #page-sidebar-panes,
  body.full-page-content .rb-c-page-sidebar__pane,
  body.-is-content-full-page .rb-c-page-sidebar__pane {
    height: 100%;
  }
}
body.full-page-content #page-sidebar-main-pane,
body.-is-content-full-page #page-sidebar-main-pane {
  visibility: hidden;
}
body.full-page-content.-is-loaded #page-sidebar-main-pane,
body.-is-content-full-page.-is-loaded #page-sidebar-main-pane {
  /*
     * On full-size pages, we hide the content and sidebar initially
     * (via CSS), so that we can properly position them before they're
     * first shown. Now that we've done that, make them visible.
    */
  visibility: visible;
}
/*
 * Set the mobile widths on some components.
 */
@media only screen and (min-width: 801px) {
  .rb-c-page-content-box {
    background: var(--ink-p-container-bg);
    border: var(--ink-g-border-container);
    border-radius: var(--ink-u-border-radius-std);
    box-shadow: var(--ink-g-shadow-std);
    box-sizing: border-box;
    padding: var(--ink-u-spacing-std);
  }
}
@media only screen and (max-width: 800px) {
  .rb-c-page-content-box {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }
}
@media only screen and (min-width: 801px) {
  .rb-c-content-header.-is-main {
    /* Desktop mode. */
    margin: 1em;
  }
  .rb-c-content-header.-is-main .rb-c-content-header__title {
    font-size: 120%;
  }
}
@media only screen and (max-width: 800px) {
  .rb-c-content-header.-is-main {
    /* Mobile mode. */
    margin: 1em 0;
    /*
           * If the body is making content flush, we still want to have the
           * margin on the left for headers.
           */
  }
  body.-is-content-flush-on-mobile .rb-c-content-header.-is-main {
    margin: 1em;
  }
  .rb-c-content-header.-is-main .rb-c-content-header__title {
    font-size: 130%;
  }
}
a:link,
a:visited {
  color: var(--ink-p-link-fg);
  text-decoration: none;
}
a:hover {
  color: var(--ink-p-link-hover-fg);
  text-decoration: underline;
}
h1 {
  font-size: 10pt;
}
h3 {
  margin-top: 2em;
}
img {
  border: 0;
}
pre,
textarea,
.CodeMirror,
.editable.field-text-area {
  font-family: var(--rb-c-textarea-font-family);
  font-size: var(--rb-c-textarea-font-size);
  line-height: var(--rb-c-textarea-line-height);
}
.editable.field-text-area {
  /*
   * Always show the text cursor when hovering over an editable text field
   * placeholder, so the entire thing feels like a text field.
   */
  cursor: text;
}
textarea {
  resize: none;
}
/*
 * The "Loading..." indicator shown during AJAX operations.
 */
#activity-indicator {
  display: flex;
  gap: var(--ink-u-spacing-sm);
  position: fixed;
  top: var(--ink-u-spacing-m);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-weight: bold;
  background: var(--ink-p-light__yellow-400);
  color: var(--ink-p-fg-on-light);
  border: 1px rgba(0, 0, 0, 0.4) solid;
  border-radius: var(--ink-u-border-radius-xl);
  box-shadow: var(--ink-g-shadow-std);
  padding: var(--ink-u-spacing-s) var(--ink-u-spacing-m);
  z-index: 140;
}
#activity-indicator span {
  vertical-align: middle;
  line-height: 16px;
}
#activity-indicator.error {
  background-color: var(--ink-p-light__red-100);
}
#activity-indicator.error a {
  margin-left: 1em;
  color: var(--ink-p-link-fg-on-light);
  text-decoration: none;
}
@media only screen and (max-width: 800px) {
  #container {
    position: relative;
    transition: 0.3s transform ease-out;
  }
}
#content_container {
  position: relative;
}
/*
 * The error information shown when an AJAX operation fails.
 */
#error div {
  background: #ffcd9c;
  border: 1px #9a4306 solid;
  margin-bottom: 10px;
  padding: 8px 10px;
}
#error h1 {
  display: inline;
  margin: 0;
  padding: 0;
}
#error input[type='submit'] {
  margin-left: 10px;
}
/*
 * An event mask overlaying the content of the page. It's shown only when
 * the mobile menu is shown. There is nothing visible, allowing the page
 * content to fully show through.
 */
#mobile_menu_mask {
  display: none;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 199;
}
/*
 * The main container for the page's content.
 */
#page-container {
  padding: 0 1.5em 1.5em 1.5em;
  visibility: hidden;
}
body.-is-loaded #page-container {
  visibility: visible;
}
@media only screen and (max-width: 800px) {
  #page-container {
    position: relative;
    transition: 0.3s transform ease-out;
  }
}
/*
 * The box containing information on an AJAX error.
 */
.server-error-box .response-data {
  margin-top: 2em;
}
/****************************************************************************
 * Page themes
 ****************************************************************************/
/*
 * Default color scheme, used for the dashboard, My Account page, and others
 * featuring largely blue-ish colors.
 */
#accountnav li:hover ul {
  border-color: #C4CFDC;
}
#accountnav li:hover ul li:hover {
  background: #ffffff;
}
#accountnav li:hover ul li.menu-info-box,
#accountnav li:hover ul li.menu-info-box:hover {
  /*
             * These are currently only used in RBCommons, but may be useful
             * for future accountnav features.
             */
  background: #f4f9ff;
  border-bottom: 1px #c1ddff solid;
  padding: 1em;
}
#accountnav li:hover ul li.menu-info-box,
#accountnav li:hover ul li.menu-info-box:hover,
#accountnav li:hover ul li.menu-info-box *,
#accountnav li:hover ul li.menu-info-box:hover * {
  cursor: default;
}
#accountnav li ul {
  background: #DAEBFF;
}
@media only screen and (max-width: 800px) {
  #page-sidebar {
    background: var(--ink-p-header-bg);
    border-right-color: var(--ink-p-header-border-color);
  }
}
.rb-c-drawer__content {
  background: #DAEBFF;
  border-color: #C4CFDC;
  color: #000000;
}
/* Reviewable pages (review request, diff, file attachment, etc.) are brown. */
.reviewable-page {
  --ink-p-header-bg: var(--if-light, #E5D7A8) var(--if-dark, var(--ink-p-cool-grey-100));
  --ink-p-header-fg: var(--ink-p-fg);
}
.reviewable-page #accountnav li:hover ul {
  border-color: #BCA626;
}
.reviewable-page #accountnav li:hover ul li:hover {
  background: #f1e9cf;
}
.reviewable-page #accountnav li:hover ul li.menu-info-box,
.reviewable-page #accountnav li:hover ul li.menu-info-box:hover {
  /*
             * These are currently only used in RBCommons, but may be useful
             * for future accountnav features.
             */
  background: #ebe0bc;
  border-bottom: 1px #dfce94 solid;
  padding: 1em;
}
.reviewable-page #accountnav li:hover ul li.menu-info-box,
.reviewable-page #accountnav li:hover ul li.menu-info-box:hover,
.reviewable-page #accountnav li:hover ul li.menu-info-box *,
.reviewable-page #accountnav li:hover ul li.menu-info-box:hover * {
  cursor: default;
}
.reviewable-page #accountnav li ul {
  background: #E5D7A8;
}
@media only screen and (max-width: 800px) {
  .reviewable-page #page-sidebar {
    background: var(--ink-p-header-bg);
    border-right-color: var(--ink-p-header-border-color);
  }
}
.reviewable-page .rb-c-drawer__content {
  background: #E5D7A8;
  border-color: #BCA626;
  color: #000000;
}
.reviewable-page.-has-next-attachment #page-container {
  padding-right: 3em;
}
.reviewable-page.-has-prev-attachment #page-container {
  padding-left: 3em;
}
#search_results {
  margin: var(--ink-u-spacing-l);
}
#search_results .paginator {
  border-top: var(--ink-g-border-container);
  margin-top: var(--ink-u-spacing-l);
  padding-top: var(--ink-u-spacing-l);
  font-size: var(--ink-u-font-ml);
}
#search_results .paginator a {
  text-decoration: none;
}
#search_results .paginator a,
#search_results .paginator b {
  margin-right: 0.5em;
}
#search_results .search-results-filters {
  border-bottom: var(--ink-g-border-container);
  margin-bottom: var(--ink-u-spacing-l);
}
#search_results .search-results-filters a {
  display: inline-block;
  font-size: var(--ink-u-font-l);
  text-decoration: none;
  padding: 0.5em 1em;
  border-bottom: var(--ink-u-border-thick) transparent solid;
}
#search_results .search-results-filters a.active {
  border-bottom: var(--ink-u-border-thick) var(--ink-p-container-border-color) solid;
}
#search_results .search-results-stats {
  font-size: var(--ink-u-font-ml);
}
#search_results .search-result {
  display: flex;
  flex-direction: column;
  gap: var(--ink-u-spacing-xs);
  line-height: 1.5;
  margin-bottom: var(--ink-u-spacing-l);
}
#search_results .search-result.-has-icon {
  flex-direction: row;
  gap: var(--ink-u-spacing-m);
}
#search_results .search-result a {
  text-decoration: none;
}
#search_results .search-result h2 {
  font-size: var(--ink-u-font-l);
  font-weight: normal;
  margin: 0;
}
#search_results .search-result .search-result-by {
  color: var(--ink-p-fg-weak);
}
#search_results form {
  margin-top: var(--ink-u-spacing-l);
  max-width: 60em;
}
/**
 * A list of registered actions that can be taken in a UI.
 *
 * TODO: This needs to be fleshed out. Currently, this component is
 * specialized across many different stylesheets, tied to parent containers.
 *
 * Version Added:
 *     8.0
 *
 * Structure:
 *     <menu class="rb-c-actions"
 *           role="menu">
 *      <li class="rb-c-actions__action ..."...</li>  [0+]
 *     </menu>
 */
.rb-c-actions {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  /**
   * An action available in the UI.
   *
   * Actions can take many forms, and perform an action managed by a
   * JavaScript view. Actions may be extensible, added via JavaScript or
   * a Python extension.
   *
   * Actions may also be registered as Quick Access actions, which are only
   * shown if a user has added them to their Quick Access hotbar.
   *
   * Version Added:
   *     8.0
   *
   * Structure:
   *     <li class="rb-c-actions__action"
   *          role="<presentation|menuitem>"
   *          [hidden]
   *          [display="..."]>
   *      ...
   *     </li>
   */
}
/**
 * Styles and variables for the rb-c-alert component.
 */
/**
 * An alert box displayed on the page that warns or informs.
 *
 * This is used to show something important to the user. It can display an
 * informational message/hint, a successful result, an warning, or an error.
 * The text will be displayed alongside an icon, which is dependent on the
 * type. The information may optionally be presented with leading or
 * sectional headers.
 *
 * Modifiers:
 *     -is-error:
 *         The alert represents an error.
 *
 *     -is-info:
 *         The alert represents information useful to the user.
 *
 *     -is-success:
 *         The alert represents a successful result.
 *
 *     -is-warning:
 *         The alert represents a warning.
 *
 * Structure:
 *     <div class="rb-c-alert -is-[type]">
 *      <span class="rb-c-alert__close" role="button"
 *            aria-label="Close" tabindex="0"></span>
 *      <p class="rb-c-alert__content">...</p>
 *     </div>
 */
.rb-c-alert {
  border-radius: 4px;
  border: 1px transparent solid;
  margin: 0 0 1em 0;
  padding: 1em;
  /*
   * Alerts always have light-ish colors, so the default link color in dark
   * mode is too low contrast. Fix it up to always us the fg-on-light color.
   */
  /**
   * Content to display within the alert.
   *
   * If showing only a single paragraph of text, this should be a ``<p>`` tag.
   * If showing multiple paragraphs, or other HTML content, use a ``<div>``
   * with the content inside.
   *
   * Structure:
   *     <p class="rb-c-alert__content">...</p>
   *
   *     <div class="rb-c-alert__content">
   *      <h3 class="rb-c-alert__heading">...</h3>
   *      <p>...</p>
   *      ...
   *     </div>
   */
  /**
   * A close button for the alert.
   *
   * DOM Attributes:
   *     aria-label (string):
   *          The accessibility label for the button.
   *
   *     role (string):
   *         This must be set to ``button``.
   *
   *     tabindex (number):
   *         The tab index. This should be set to ``0`` in most cases.
   *
   *     title (string):
   *          The tooltip label for the button.
   *
   * Structure:
   *     <span class="rb-c-alert__close"
   *           aria-label="Close"
   *           role="button"
   *           tabindex="0"
   *           title="Close"></span>
   */
  /**
   * An optional header above content in the alert.
   *
   * This may be used anywhere within an ``.rb-c-alert__content`` to provide
   * a heading above some part of the content. A common usage would be to
   * provide it as the first element to create a prominent heading for the
   * alert.
   *
   * Structure:
   *     <h3 class="rb-c-alert__heading">
   *      text...
   *     </h3>
   */
}
.rb-c-alert:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  float: left;
  font-size: 18px;
  margin-right: 0.5em;
  text-align: center;
  width: 18px;
}
.rb-c-alert:last-child {
  margin-bottom: 0;
}
.rb-c-alert.-is-error {
  background: var(--ink-c-alert-error-bg);
  border-color: var(--ink-c-alert-error-border-color);
  color: var(--ink-c-alert-error-fg);
}
.rb-c-alert.-is-error:before {
  content: "\f06a";
}
.rb-c-alert.-is-info {
  background: var(--ink-c-alert-info-bg);
  border-color: var(--ink-c-alert-info-border-color);
  color: var(--ink-c-alert-info-fg);
}
.rb-c-alert.-is-info:before {
  content: "\f05a";
}
.rb-c-alert.-is-success {
  background: var(--ink-c-alert-success-bg);
  border-color: var(--ink-c-alert-success-border-color);
  color: var(--ink-c-alert-success-fg);
}
.rb-c-alert.-is-success:before {
  content: "\f00c";
}
.rb-c-alert.-is-warning {
  background: var(--ink-c-alert-warning-bg);
  border-color: var(--ink-c-alert-warning-border-color);
  color: var(--ink-c-alert-warning-fg);
}
.rb-c-alert.-is-warning:before {
  content: "\f071";
}
.rb-c-alert.-is-error,
.rb-c-alert.-is-info,
.rb-c-alert.-is-success,
.rb-c-alert.-is-warning {
  --ink-p-link-fg: var(--ink-p-link-fg-on-light);
  --ink-p-link-hover-fg: var(--ink-p-link-hover-fg-on-light);
}
.rb-c-alert__content {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.rb-c-alert__content > :first-child {
  margin-top: 0;
  padding-top: 0;
}
.rb-c-alert__content > :last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}
.rb-c-alert__close {
  cursor: pointer;
  float: right;
  padding: 6px;
  margin: -10px -6px -6px -6px;
}
.rb-c-alert__close:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f00d";
}
.rb-c-alert__heading {
  font-size: 100%;
  font-weight: bold;
  margin: 2em 0 1em 0;
  padding: 0;
}
/**
 * Common styles for avatars.
 */
/**
 * A standard avatar on the page.
 *
 * This will style the avatar to be shown as a circle, and help
 * vertically-align it to make it appear correctly next to text.
 */
.djblets-o-avatar {
  border-radius: 50%;
  vertical-align: middle;
}
.banner {
  background: var(--rb-p-draft-bg);
  border-width: 1px;
  border-color: var(--rb-p-draft-border-color);
  border-style: solid;
  margin-bottom: 10px;
  padding: var(--ink-u-spacing-m);
  z-index: 100;
}
.banner > h1,
.banner > p {
  display: inline;
  margin-right: 0.2em;
  padding: 0;
}
@media screen and (max-width: 720px), screen and (max-device-width: 720px) and (orientation: landscape) {
  .banner p {
    display: block;
    margin: 1em 0;
  }
}
.banner .banner-actions {
  display: inline-flex;
  margin-left: 1em;
}
@media screen and (max-width: 720px), screen and (max-device-width: 720px) and (orientation: landscape) {
  .banner .banner-actions {
    display: block;
    margin-left: 0;
    margin-top: 1em;
  }
}
/**
 * The unified banner.
 *
 * This banner replaces a number of previous banners -- banners for the review
 * request draft, review draft, and review reply drafts. It's split into two
 * major parts:
 *
 * 1. The review area. This deals with reviews and drafts. It contains the main
 *    "Review" menu, publish button, mode switcher (for choosing different
 *    active drafts), and the change description field (when there's a review
 *    request update draft).
 *
 * 2. The dock area. This is currently unused, but we have plans to use this
 *    for an expandable file display on the diffviewer, as well as allow
 *    extensions to drop in their own content.
 *
 * Modifiers:
 *     -has-draft:
 *         Whether there are any drafts present.
 *
 *     -has-multiple:
 *         Whether there are multiple drafts present.
 *
 * Structure:
 *     <div class="rb-c-unified-banner">
 *      <div class="rb-c-unified-banner__review">...</div>
 *      <div class="rb-c-unified-banner__dock">...</div>
 *     </div>
 */
.rb-c-unified-banner {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  display: none;
  margin: -1.5em -1.5em 1.5em -1.5em;
  z-index: 100;
  /**
   * The main section of the review banner relating to reviews and drafts.
   *
   * Modifiers:
   *     -has-draft:
   *         Whether there's any draft objects present.
   *
   * Structure:
   *     <div class="rb-c-unified-banner__review">
   *      <div class="rb-c-unified-banner__controls">
   *      </div>
   *      <div class="rb-c-unified-banner__changedesc">...</div>
   *     </div>
   */
  /**
   * The change description field.
   *
   * Structure:
   *     <div class="rb-c-unified-banner__changedesc">
   *      <p>
   *       <label for="field_change_description">
   *        Describe your changes (optional):
   *       </label>
   *      </p>
   *      <pre id="field_change_description" class="field field-text-area"
   *           data-field-id="field_change_description"></pre>
   *     </div>
   */
  /**
   * The block of controls relating to reviews and drafts.
   *
   * Structure:
   *     <div class="rb-c-unified-banner__controls">
   *      <div class="rb-c-unified-banner__mode-selector">
   *       ...
   *      </div>
   *      <div class="rb-c-unified-banner__draft-actions">
   *       <input type="button" id="btn-review-request-discard"
   *              value="Discard">
   *      </div>
   *      <menu class="rb-c-unified-banner__review-actions rb-c-actions" ...>
   *       ...
   *      </menu>
   *      <menu class="rb-c-unified-banner__quick-access-actions
   *                   rb-c-actions" ...>
   *       ...
   *      </menu>
   *     </div>
   */
  /**
   * A drop-down menu for editing the Quick Access actions.
   *
   * Version Added:
   *     8.0
   *
   * Structure:
   *     <li class="rb-c-unified-banner__edit-quick-access">
   *      <span class="ink-c-menu-label ...">...</span>
   *     </li>
   */
  /**
   * The label shown for a menu.
   *
   * Structure:
   *     <label class="rb-c-unified-banner__menu-label">
   *      ...
   *     </label>
   */
  /**
   * The draft mode selector.
   *
   * Structure:
   *     <div class="rb-c-unified-banner__mode-selector">
   *      <div class="rb-c-unified-banner__menu">
   *       <a class="rb-c-unified-banner__mode">
   *        <span class="rb-c-unified-banner__menu-label">...<?span>
   *       </a>
   *       <div class="ink-c-menu">...</div>
   *      </div>
   *     </div>
   */
  /**
   * The menu within the draft mode selector.
   *
   * Modifiers:
   *     -is-open:
   *         The menu is open.
   */
  /**
   * The mode label.
   */
  /**
   * The publish/discard buttons.
   */
  /**
   * The "Review" menu and other actions.
   */
  /**
   * The Quick Access actions and control.
   *
   * Version Added:
   *     8.0
   *
   * Structure:
   *     <menu class="rb-c-unified-banner__quick-access-actions rb-c-actions"
   *           role="menu">
   *      <li class="rb-c-actions__action ..."...</li>  [0+]
   *      <li class="rb-c-unified-banner__edit-quick-access"></li>
   *     </menu>
   */
  /**
   * The notice about the existence of an unpublished draft.
   *
   * When viewing a review request as a privileged user (admin or the "can
   * edit review request" privilege), the user can see drafts which have
   * not yet been published. We add a notice to the dock area of the banner
   * that indicates this, and allows them to switch between viewing the
   * draft data and viewing as if they were a regular user.
   */
  /*
   * This makes sure that items in the review menu are clickable across
   * their entire breadth.
   */
  /*
   * Handle styling for the embedded menus for the draft mode and Reviews
   * menu.
   *
   * NOTE: Ideally, a lot of this would be common, and be based on action
   *       styling. However, we don't have styling specific to menu actions
   *       as of this writing (April 15, 2024), and the draft mode and review
   *       menus have different layouts. For now, we're just handling each
   *       specially.
   */
  /*
   * Move the menu up one so that the top-level menu item's border will
   * overlap, making it appear seamless.
   */
  /* Set up layout for the top-level menu item. */
  /* Increase the top level menu item's font size to be more header-sized. */
  /* Ensure the labels have menu background/border styling when open. */
  /* Give the review menu a left border to match the right. */
  /**
   * The link to the interdiff, if present.
   *
   * Structure:
   *     <div class="rb-c-unified-banner__interdiff-link">
   *      This draft adds a new diff.
   *      <a href="...">Show changes</a>
   *     </div>
   */
  /**
   * The "dock" portion of the unified banner.
   */
}
.rb-c-unified-banner.-has-multiple {
  box-shadow: none;
}
.rb-c-unified-banner.-has-multiple::after {
  background: var(--rb-p-draft-bg);
  border-color: var(--rb-p-draft-border-color);
  border-style: solid;
  border-width: 0 1px 1px 1px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.6);
  content: ' ';
  display: block;
  height: 2px;
  margin: 0 0.3em;
}
.rb-c-unified-banner .rb-c-actions a,
.rb-c-unified-banner a[role="button"] {
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}
.rb-c-unified-banner__review {
  background: var(--rb-c-review-request-bg-color);
  border-bottom: var(--rb-c-review-request-border);
  display: flex;
  flex-direction: column;
  gap: var(--ink-u-spacing-m);
  padding: 0 var(--ink-u-spacing-m);
  position: relative;
}
.-has-draft .rb-c-unified-banner__review {
  background: var(--rb-p-draft-bg);
  border-bottom: 1px var(--rb-p-draft-border-color) solid;
}
.rb-c-unified-banner__changedesc {
  padding-bottom: var(--ink-u-spacing-m);
}
.rb-c-unified-banner__changedesc > label {
  line-height: 16px;
}
.rb-c-unified-banner__changedesc > p {
  margin: 0 0 var(--ink-u-spacing-m);
}
.rb-c-unified-banner__changedesc .rb-c-text-editor {
  margin-top: 0;
}
.rb-c-unified-banner__controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--ink-u-spacing-m);
}
.rb-c-unified-banner__controls > div:not(:empty) {
  margin-right: 1em;
}
.rb-c-unified-banner__edit-quick-access {
  margin-left: auto;
}
.rb-c-unified-banner__menu-label {
  display: flex;
  gap: var(--ink-u-spacing-s);
}
.rb-c-unified-banner__mode-selector {
  /*
     * We'd normally put this in @vars below in customize-component(), but
     * we need these same variables to be usable by the menu dropdown action
     * element.
     */
  margin-left: calc(-1 * var(--ink-u-spacing-m));
}
.rb-c-unified-banner__mode-selector,
.rb-c-unified-banner__mode-selector .ink-c-menu {
  --ink-c-menu-bg: var(--rb-p-draft-bg);
  --ink-c-menu-border: 1px var(--rb-p-draft-border-color) solid;
  --ink-c-menu-item-selected-bg: var(--rb-p-draft-hover-bg);
  --ink-c-menu-item-selected-fg: var(--rb-p-draft-hover-fg);
}
@media only screen and (max-width: 800px) {
  .rb-c-unified-banner__mode-selector,
  .rb-c-unified-banner__mode-selector .ink-c-menu {
    /* Make sure the menu items appear over the Review menu on mobile. */
    z-index: 112;
  }
}
.rb-c-unified-banner__mode-selector .ink-c-menu {
  /**
     * Populate a menu schema.
     *
     * This will provide the structure for a menu component, populating the
     * parts of the component with the provided style rules.
     *
     * Menu components can be embedded in another element, or can pop up when
     * triggered by another element.
     *
     * They may contain menu items (standard, checkbox, or radio menu items)
     * and separators. Menu items may optionally have icons and displayed
     * keyboard shortcuts.
     *
     * Version Added:
     *     0.5
     *
     * Args:
     *     @name (string):
     *         The name of the CSS class that this schema would populate.
     *
     *     @schema-rules (ruleset, optional):
     *         Any rules to apply to part of the schema.
     *
     *     @specialize-schema-rules (ruleset, optional):
     *         Any additional specialized rules to apply to part of the schema.
     *
     *         This is a convenience to allow themes or specializations of
     *         components to easily inject additional rules into the schema.
     */
  /**
     * Add rules to a component based on the current context's schema.
     *
     * This is used within an existing ``.populate()`` mixin to add new
     * rules for one or more parts. It takes care of generating the selector
     * for the component as well.
     *
     * Within the context, this will be available as ``.add()``.
     *
     * Version Added:
     *     0.5
     *
     * Args:
     *     @rules (rulset):
     *         The rules to add to the component.
     *
     * Example:
     *     .add({
     *         @state-hover: {
     *             background: blue;
     *             color: red;
     *         };
     *     });
     */
  /**
     * Add schema and specialized rules for the given rules key.
     *
     * This is used inside a schema definition to add the caller's rules for
     * a given rules key. It will add the rules found in ``@schema-rules``
     * in the current context, followed by the rules in ``@specialize-rules``.
     *
     * This cannot be called outside of a schema definition.
     *
     * Within the context, this will be available as ``.add-rules()``.
     *
     * Version Added:
     *     0.5
     *
     * Args:
     *     @rules-key (string):
     *         The key within the rules definitions to add.
     *
     * Example:
     *     .add-rules('state-hover');
     */
  /**
       * Main part of the component.
       *
       * Accessibility Notes:
       *     Most menus will have a controller element set. This element
       *     should have the following attributes pointing to the menu:
       *
       *     ``aria-controls`` must be set to the ID of the menu.
       *
       *     ``aria-expanded`` must be set to ``false`` when the menu is
       *     closed or ``true`` when open.
       *
       *     ``aria-haspopup`` must be set to ``true``.
       *
       * DOM Attributes:
       *     aria-label (string):
       *         A label describing this menu.
       *
       *         This must be set if ``aria-labelledby`` is not set.
       *
       *     aria-labelledby (string):
       *         The ID of an element describing this menu.
       *
       *         This must be set if ``aria-label`` is not set.
       *
       *     role (string):
       *         This must be set to "menu".
       *
       *     tabIndex (number):
       *         This must always be set to 0 when the menu can be interacted
       *         with (embedded or open), or -1 if it cannot (closed).
       *
       *     aria-activedescendant (string, optional):
       *         Set to the ID of the selected menu item, if one is selected.
       *
       * Modifiers:
       *     -has-icons:
       *         The menu has menu items containing icons.
       *
       *     -has-shortcuts:
       *         The menu has menu items containing keyboard shortcuts.
       *
       *     -is-embedded:
       *         The menu is embedded in another element.
       *
       *     -is-open:
       *         The menu is open.
       *
       *         This must also be set if the menu is embedded.
       *
       *     js-no-animation:
       *         Opening/closing animation is actively being disabled.
       *
       * Structure:
       *     <menu class="@{name}
       *                  [-has-icons]
       *                  [-has-shortcuts]]
       *                  [-is-embedded]
       *                  [-is-open]"
       *           aria-label="..." | aria-labelledby="..."
       *           role="menu"
       *           tabIndex="(0 | 1)"
       *           [aria-activedescendant="..."]>
       *      {
       *       <li class="@{name}__item" ...></li>
       *       <li class="@{name}__separator" ...></li>
       *      } [1+]
       *     </menu>
       */
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
  border-left: 0;
  min-width: 30em;
  /**
       * A menu item.
       *
       * This may be a standard menu item, a checkbox menu item, or a radio
       * menu item.
       *
       * Menu items may optionally contain icons and/or keyboard shortcuts.
       *
       * A menu item that triggers an action requiring further interaction
       * (such as a confirmation dialog) should have a label ending in
       * "...".
       *
       * DOM Attributes:
       *     id (string):
       *         The ID of the menu item.
       *
       *         This must be set so that the main menu element can refer
       *         to it using ``aria-activedescendant``.
       *
       *     role (string):
       *         For standard menu items, set ``menuitem``.
       *
       *         For checkbox menu items, set ``menuitemcheckbox``.
       *
       *         For radio menu items, set ``menuitemradio``.
       *
       *     aria-checked (boolean, optional):
       *         Whether the menu item is checked.
       *
       *         This is only used for checkbox and radio menu items.
       *
       *     aria-disabled (boolean, optional):
       *         Whether the menu item is disabled.
       *
       *         Version Added:
       *             0.8
       *
       *     aria-selected (boolean, optional):
       *         Whether the menu item is currently selected.
       *
       *         This must be ``true`` when the menu item is selected by
       *         either mouse or keyboard navigation.
       *
       * Modifiers:
       *     -is-header:
       *         The item functions as a non-interactive header.
       *
       * Structure:
       *     <li class="@{name}__item [-is-header]"
       *         id="..."
       *         role="<menuitem | menuitemcheckbox | menuitemradio>"
       *         [aria-checked="...">]
       *         [aria-disabled="...">]
       *         [aria-selected="...">]
       *      <span class="@{name}__inner" ...</span>
       *      |
       *      <a class="@{name}__inner" ...</a>
       *     </li>
       */
  /**
       * An icon shown alongside a menu item.
       *
       * Population of the icon is dependent on the implementation.
       *
       * DOM Attributes:
       *     aria-hidden (boolean):
       *         ``true``, always.
       *
       * Structure:
       *     <span class="@{name}__item-icon ..."
       *           aria-hidden="true">
       *      html...
       *     </span>
       */
  /**
       * The label shown for a menu item.
       *
       * Structure:
       *     <label class="@{name}__item-icon">
       *      text...
       *     </label>
       */
  /**
       * The inner container for a menu item.
       *
       * This contains the label, icon, and keyboard shortcut.
       *
       * It may either be a ``<span ...>`` (standard for menu items) or an
       * ``<a href="...">`` (used for menu items that link to other pages).
       *
       * Structure:
       *     <(span | a) class="@{name}__item-inner"
       *                 [href="..."]>
       *      [<span class="@{name}__item-icon">...</span>]
       *      <label class="@{name}__item-label">...</label>
       *      [<span class="@{name}__item-shortcut">...</span>]
       *     </(span | a)
       */
  /**
       * A displayed keyboard shortcut.
       *
       * This is intended to be mixed into a ``keyboard-shortcut`` component.
       *
       * Structure:
       *     <span class="@{name}__item-shortcut ..." ...>
       *      ...
       *     </span>
       */
  /**
       * A separator menu item.
       *
       * DOM Attributes:
       *     role (string)
       *         This must be ``separator``.
       *
       * Structure:
       *     <span class="@{name}__separator"
       *           role="separator"></span>
       */
}
.rb-c-unified-banner__mode-selector .ink-c-menu:not(.-has-icons) {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner__mode-selector .ink-c-menu.-has-icons {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner__mode-selector .ink-c-menu:not(.-has-shortcuts) {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner__mode-selector .ink-c-menu.-has-shortcuts {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner__mode-selector .ink-c-menu.-has-icons.-has-shortcuts {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner__mode-selector .ink-c-menu.-has-icons:not(.-has-shortcuts) {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner__mode-selector .ink-c-menu.-has-shortcuts:not(.-has-icons) {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner__mode-selector .ink-c-menu.-is-embedded {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner__mode-selector .ink-c-menu.-is-open {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner__mode-selector .ink-c-menu:not(.-is-embedded):not(.-is-open) {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner__mode-selector .ink-c-menu__item {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner__mode-selector .ink-c-menu__item[aria-disabled="true"] {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner__mode-selector .ink-c-menu__item[aria-selected="true"] {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner__mode-selector .ink-c-menu__item:focus {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner__mode-selector .ink-c-menu__item.-is-header {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner__mode-selector .ink-c-menu__item-icon {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner__mode-selector .ink-c-menu__item-label {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
  font-size: var(--ink-u-font-sm);
  font-weight: bold;
}
.rb-c-unified-banner__mode-selector .ink-c-menu__item-inner,
.rb-c-unified-banner__mode-selector .ink-c-menu__item-inner:link,
.rb-c-unified-banner__mode-selector .ink-c-menu__item-inner:visited {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner__mode-selector .ink-c-menu__item-shortcut {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner__mode-selector .ink-c-menu__separator {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner__draft-actions {
  display: flex;
  align-items: center;
  gap: var(--ink-u-spacing-s);
}
@media only screen and (max-width: 800px) {
  .rb-c-unified-banner__draft-actions {
    /**
       * On mobile the buttons might be squished up against the left side
       * of the screen. Add a margin to make it look better
       */
    margin-left: var(--ink-u-spacing-m);
  }
}
.rb-c-unified-banner__review-actions {
  gap: var(--ink-u-spacing-s);
}
.rb-c-unified-banner__quick-access-actions {
  flex-grow: 1;
  gap: var(--ink-u-spacing-s);
}
.rb-c-unified-banner .rb-c-actions__action a {
  display: flex;
  gap: var(--ink-u-spacing-s);
}
.rb-c-unified-banner__unpublished-draft {
  background: var(--ink-p-accent-info-bg);
  color: var(--ink-p-accent-info-fg);
  padding: var(--ink-u-spacing-m);
}
.rb-c-unified-banner__unpublished-draft:not(:last-child) {
  border-bottom: var(--rb-c-review-request-border);
}
.rb-c-unified-banner__unpublished-draft a {
  color: var(--ink-p-link-fg-on-light);
}
.rb-c-unified-banner__unpublished-draft a:hover {
  color: var(--ink-p-link-hover-fg-on-light);
}
.rb-c-unified-banner #action-unified-banner-review-menu {
  display: inline-block;
  position: relative;
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu {
  /**
     * Populate a menu schema.
     *
     * This will provide the structure for a menu component, populating the
     * parts of the component with the provided style rules.
     *
     * Menu components can be embedded in another element, or can pop up when
     * triggered by another element.
     *
     * They may contain menu items (standard, checkbox, or radio menu items)
     * and separators. Menu items may optionally have icons and displayed
     * keyboard shortcuts.
     *
     * Version Added:
     *     0.5
     *
     * Args:
     *     @name (string):
     *         The name of the CSS class that this schema would populate.
     *
     *     @schema-rules (ruleset, optional):
     *         Any rules to apply to part of the schema.
     *
     *     @specialize-schema-rules (ruleset, optional):
     *         Any additional specialized rules to apply to part of the schema.
     *
     *         This is a convenience to allow themes or specializations of
     *         components to easily inject additional rules into the schema.
     */
  /**
     * Add rules to a component based on the current context's schema.
     *
     * This is used within an existing ``.populate()`` mixin to add new
     * rules for one or more parts. It takes care of generating the selector
     * for the component as well.
     *
     * Within the context, this will be available as ``.add()``.
     *
     * Version Added:
     *     0.5
     *
     * Args:
     *     @rules (rulset):
     *         The rules to add to the component.
     *
     * Example:
     *     .add({
     *         @state-hover: {
     *             background: blue;
     *             color: red;
     *         };
     *     });
     */
  /**
     * Add schema and specialized rules for the given rules key.
     *
     * This is used inside a schema definition to add the caller's rules for
     * a given rules key. It will add the rules found in ``@schema-rules``
     * in the current context, followed by the rules in ``@specialize-rules``.
     *
     * This cannot be called outside of a schema definition.
     *
     * Within the context, this will be available as ``.add-rules()``.
     *
     * Version Added:
     *     0.5
     *
     * Args:
     *     @rules-key (string):
     *         The key within the rules definitions to add.
     *
     * Example:
     *     .add-rules('state-hover');
     */
  /**
       * Main part of the component.
       *
       * Accessibility Notes:
       *     Most menus will have a controller element set. This element
       *     should have the following attributes pointing to the menu:
       *
       *     ``aria-controls`` must be set to the ID of the menu.
       *
       *     ``aria-expanded`` must be set to ``false`` when the menu is
       *     closed or ``true`` when open.
       *
       *     ``aria-haspopup`` must be set to ``true``.
       *
       * DOM Attributes:
       *     aria-label (string):
       *         A label describing this menu.
       *
       *         This must be set if ``aria-labelledby`` is not set.
       *
       *     aria-labelledby (string):
       *         The ID of an element describing this menu.
       *
       *         This must be set if ``aria-label`` is not set.
       *
       *     role (string):
       *         This must be set to "menu".
       *
       *     tabIndex (number):
       *         This must always be set to 0 when the menu can be interacted
       *         with (embedded or open), or -1 if it cannot (closed).
       *
       *     aria-activedescendant (string, optional):
       *         Set to the ID of the selected menu item, if one is selected.
       *
       * Modifiers:
       *     -has-icons:
       *         The menu has menu items containing icons.
       *
       *     -has-shortcuts:
       *         The menu has menu items containing keyboard shortcuts.
       *
       *     -is-embedded:
       *         The menu is embedded in another element.
       *
       *     -is-open:
       *         The menu is open.
       *
       *         This must also be set if the menu is embedded.
       *
       *     js-no-animation:
       *         Opening/closing animation is actively being disabled.
       *
       * Structure:
       *     <menu class="@{name}
       *                  [-has-icons]
       *                  [-has-shortcuts]]
       *                  [-is-embedded]
       *                  [-is-open]"
       *           aria-label="..." | aria-labelledby="..."
       *           role="menu"
       *           tabIndex="(0 | 1)"
       *           [aria-activedescendant="..."]>
       *      {
       *       <li class="@{name}__item" ...></li>
       *       <li class="@{name}__separator" ...></li>
       *      } [1+]
       *     </menu>
       */
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
  /**
       * A menu item.
       *
       * This may be a standard menu item, a checkbox menu item, or a radio
       * menu item.
       *
       * Menu items may optionally contain icons and/or keyboard shortcuts.
       *
       * A menu item that triggers an action requiring further interaction
       * (such as a confirmation dialog) should have a label ending in
       * "...".
       *
       * DOM Attributes:
       *     id (string):
       *         The ID of the menu item.
       *
       *         This must be set so that the main menu element can refer
       *         to it using ``aria-activedescendant``.
       *
       *     role (string):
       *         For standard menu items, set ``menuitem``.
       *
       *         For checkbox menu items, set ``menuitemcheckbox``.
       *
       *         For radio menu items, set ``menuitemradio``.
       *
       *     aria-checked (boolean, optional):
       *         Whether the menu item is checked.
       *
       *         This is only used for checkbox and radio menu items.
       *
       *     aria-disabled (boolean, optional):
       *         Whether the menu item is disabled.
       *
       *         Version Added:
       *             0.8
       *
       *     aria-selected (boolean, optional):
       *         Whether the menu item is currently selected.
       *
       *         This must be ``true`` when the menu item is selected by
       *         either mouse or keyboard navigation.
       *
       * Modifiers:
       *     -is-header:
       *         The item functions as a non-interactive header.
       *
       * Structure:
       *     <li class="@{name}__item [-is-header]"
       *         id="..."
       *         role="<menuitem | menuitemcheckbox | menuitemradio>"
       *         [aria-checked="...">]
       *         [aria-disabled="...">]
       *         [aria-selected="...">]
       *      <span class="@{name}__inner" ...</span>
       *      |
       *      <a class="@{name}__inner" ...</a>
       *     </li>
       */
  /**
       * An icon shown alongside a menu item.
       *
       * Population of the icon is dependent on the implementation.
       *
       * DOM Attributes:
       *     aria-hidden (boolean):
       *         ``true``, always.
       *
       * Structure:
       *     <span class="@{name}__item-icon ..."
       *           aria-hidden="true">
       *      html...
       *     </span>
       */
  /**
       * The label shown for a menu item.
       *
       * Structure:
       *     <label class="@{name}__item-icon">
       *      text...
       *     </label>
       */
  /**
       * The inner container for a menu item.
       *
       * This contains the label, icon, and keyboard shortcut.
       *
       * It may either be a ``<span ...>`` (standard for menu items) or an
       * ``<a href="...">`` (used for menu items that link to other pages).
       *
       * Structure:
       *     <(span | a) class="@{name}__item-inner"
       *                 [href="..."]>
       *      [<span class="@{name}__item-icon">...</span>]
       *      <label class="@{name}__item-label">...</label>
       *      [<span class="@{name}__item-shortcut">...</span>]
       *     </(span | a)
       */
  /**
       * A displayed keyboard shortcut.
       *
       * This is intended to be mixed into a ``keyboard-shortcut`` component.
       *
       * Structure:
       *     <span class="@{name}__item-shortcut ..." ...>
       *      ...
       *     </span>
       */
  /**
       * A separator menu item.
       *
       * DOM Attributes:
       *     role (string)
       *         This must be ``separator``.
       *
       * Structure:
       *     <span class="@{name}__separator"
       *           role="separator"></span>
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu:not(.-has-icons) {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu.-has-icons {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu:not(.-has-shortcuts) {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu.-has-shortcuts {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu.-has-icons.-has-shortcuts {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu.-has-icons:not(.-has-shortcuts) {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu.-has-shortcuts:not(.-has-icons) {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu.-is-embedded {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu.-is-open {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu:not(.-is-embedded):not(.-is-open) {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu__item {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu__item[aria-disabled="true"] {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu__item[aria-selected="true"] {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu__item:focus {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu__item.-is-header {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu__item-icon {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu__item-label {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu__item-label > a {
  display: inline-block;
  padding: var(--ink-c-menu-item-padding);
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu__item-inner,
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu__item-inner:link,
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu__item-inner:visited {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
  padding: 0;
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu__item-shortcut {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu__separator {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu,
.rb-c-unified-banner__mode-selector .ink-c-menu {
  /**
     * Populate a menu schema.
     *
     * This will provide the structure for a menu component, populating the
     * parts of the component with the provided style rules.
     *
     * Menu components can be embedded in another element, or can pop up when
     * triggered by another element.
     *
     * They may contain menu items (standard, checkbox, or radio menu items)
     * and separators. Menu items may optionally have icons and displayed
     * keyboard shortcuts.
     *
     * Version Added:
     *     0.5
     *
     * Args:
     *     @name (string):
     *         The name of the CSS class that this schema would populate.
     *
     *     @schema-rules (ruleset, optional):
     *         Any rules to apply to part of the schema.
     *
     *     @specialize-schema-rules (ruleset, optional):
     *         Any additional specialized rules to apply to part of the schema.
     *
     *         This is a convenience to allow themes or specializations of
     *         components to easily inject additional rules into the schema.
     */
  /**
     * Add rules to a component based on the current context's schema.
     *
     * This is used within an existing ``.populate()`` mixin to add new
     * rules for one or more parts. It takes care of generating the selector
     * for the component as well.
     *
     * Within the context, this will be available as ``.add()``.
     *
     * Version Added:
     *     0.5
     *
     * Args:
     *     @rules (rulset):
     *         The rules to add to the component.
     *
     * Example:
     *     .add({
     *         @state-hover: {
     *             background: blue;
     *             color: red;
     *         };
     *     });
     */
  /**
     * Add schema and specialized rules for the given rules key.
     *
     * This is used inside a schema definition to add the caller's rules for
     * a given rules key. It will add the rules found in ``@schema-rules``
     * in the current context, followed by the rules in ``@specialize-rules``.
     *
     * This cannot be called outside of a schema definition.
     *
     * Within the context, this will be available as ``.add-rules()``.
     *
     * Version Added:
     *     0.5
     *
     * Args:
     *     @rules-key (string):
     *         The key within the rules definitions to add.
     *
     * Example:
     *     .add-rules('state-hover');
     */
  /**
       * Main part of the component.
       *
       * Accessibility Notes:
       *     Most menus will have a controller element set. This element
       *     should have the following attributes pointing to the menu:
       *
       *     ``aria-controls`` must be set to the ID of the menu.
       *
       *     ``aria-expanded`` must be set to ``false`` when the menu is
       *     closed or ``true`` when open.
       *
       *     ``aria-haspopup`` must be set to ``true``.
       *
       * DOM Attributes:
       *     aria-label (string):
       *         A label describing this menu.
       *
       *         This must be set if ``aria-labelledby`` is not set.
       *
       *     aria-labelledby (string):
       *         The ID of an element describing this menu.
       *
       *         This must be set if ``aria-label`` is not set.
       *
       *     role (string):
       *         This must be set to "menu".
       *
       *     tabIndex (number):
       *         This must always be set to 0 when the menu can be interacted
       *         with (embedded or open), or -1 if it cannot (closed).
       *
       *     aria-activedescendant (string, optional):
       *         Set to the ID of the selected menu item, if one is selected.
       *
       * Modifiers:
       *     -has-icons:
       *         The menu has menu items containing icons.
       *
       *     -has-shortcuts:
       *         The menu has menu items containing keyboard shortcuts.
       *
       *     -is-embedded:
       *         The menu is embedded in another element.
       *
       *     -is-open:
       *         The menu is open.
       *
       *         This must also be set if the menu is embedded.
       *
       *     js-no-animation:
       *         Opening/closing animation is actively being disabled.
       *
       * Structure:
       *     <menu class="@{name}
       *                  [-has-icons]
       *                  [-has-shortcuts]]
       *                  [-is-embedded]
       *                  [-is-open]"
       *           aria-label="..." | aria-labelledby="..."
       *           role="menu"
       *           tabIndex="(0 | 1)"
       *           [aria-activedescendant="..."]>
       *      {
       *       <li class="@{name}__item" ...></li>
       *       <li class="@{name}__separator" ...></li>
       *      } [1+]
       *     </menu>
       */
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
  margin-top: -1px;
  /**
       * A menu item.
       *
       * This may be a standard menu item, a checkbox menu item, or a radio
       * menu item.
       *
       * Menu items may optionally contain icons and/or keyboard shortcuts.
       *
       * A menu item that triggers an action requiring further interaction
       * (such as a confirmation dialog) should have a label ending in
       * "...".
       *
       * DOM Attributes:
       *     id (string):
       *         The ID of the menu item.
       *
       *         This must be set so that the main menu element can refer
       *         to it using ``aria-activedescendant``.
       *
       *     role (string):
       *         For standard menu items, set ``menuitem``.
       *
       *         For checkbox menu items, set ``menuitemcheckbox``.
       *
       *         For radio menu items, set ``menuitemradio``.
       *
       *     aria-checked (boolean, optional):
       *         Whether the menu item is checked.
       *
       *         This is only used for checkbox and radio menu items.
       *
       *     aria-disabled (boolean, optional):
       *         Whether the menu item is disabled.
       *
       *         Version Added:
       *             0.8
       *
       *     aria-selected (boolean, optional):
       *         Whether the menu item is currently selected.
       *
       *         This must be ``true`` when the menu item is selected by
       *         either mouse or keyboard navigation.
       *
       * Modifiers:
       *     -is-header:
       *         The item functions as a non-interactive header.
       *
       * Structure:
       *     <li class="@{name}__item [-is-header]"
       *         id="..."
       *         role="<menuitem | menuitemcheckbox | menuitemradio>"
       *         [aria-checked="...">]
       *         [aria-disabled="...">]
       *         [aria-selected="...">]
       *      <span class="@{name}__inner" ...</span>
       *      |
       *      <a class="@{name}__inner" ...</a>
       *     </li>
       */
  /**
       * An icon shown alongside a menu item.
       *
       * Population of the icon is dependent on the implementation.
       *
       * DOM Attributes:
       *     aria-hidden (boolean):
       *         ``true``, always.
       *
       * Structure:
       *     <span class="@{name}__item-icon ..."
       *           aria-hidden="true">
       *      html...
       *     </span>
       */
  /**
       * The label shown for a menu item.
       *
       * Structure:
       *     <label class="@{name}__item-icon">
       *      text...
       *     </label>
       */
  /**
       * The inner container for a menu item.
       *
       * This contains the label, icon, and keyboard shortcut.
       *
       * It may either be a ``<span ...>`` (standard for menu items) or an
       * ``<a href="...">`` (used for menu items that link to other pages).
       *
       * Structure:
       *     <(span | a) class="@{name}__item-inner"
       *                 [href="..."]>
       *      [<span class="@{name}__item-icon">...</span>]
       *      <label class="@{name}__item-label">...</label>
       *      [<span class="@{name}__item-shortcut">...</span>]
       *     </(span | a)
       */
  /**
       * A displayed keyboard shortcut.
       *
       * This is intended to be mixed into a ``keyboard-shortcut`` component.
       *
       * Structure:
       *     <span class="@{name}__item-shortcut ..." ...>
       *      ...
       *     </span>
       */
  /**
       * A separator menu item.
       *
       * DOM Attributes:
       *     role (string)
       *         This must be ``separator``.
       *
       * Structure:
       *     <span class="@{name}__separator"
       *           role="separator"></span>
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu:not(.-has-icons),
.rb-c-unified-banner__mode-selector .ink-c-menu:not(.-has-icons) {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu.-has-icons,
.rb-c-unified-banner__mode-selector .ink-c-menu.-has-icons {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu:not(.-has-shortcuts),
.rb-c-unified-banner__mode-selector .ink-c-menu:not(.-has-shortcuts) {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu.-has-shortcuts,
.rb-c-unified-banner__mode-selector .ink-c-menu.-has-shortcuts {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu.-has-icons.-has-shortcuts,
.rb-c-unified-banner__mode-selector .ink-c-menu.-has-icons.-has-shortcuts {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu.-has-icons:not(.-has-shortcuts),
.rb-c-unified-banner__mode-selector .ink-c-menu.-has-icons:not(.-has-shortcuts) {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu.-has-shortcuts:not(.-has-icons),
.rb-c-unified-banner__mode-selector .ink-c-menu.-has-shortcuts:not(.-has-icons) {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu.-is-embedded,
.rb-c-unified-banner__mode-selector .ink-c-menu.-is-embedded {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu.-is-open,
.rb-c-unified-banner__mode-selector .ink-c-menu.-is-open {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu:not(.-is-embedded):not(.-is-open),
.rb-c-unified-banner__mode-selector .ink-c-menu:not(.-is-embedded):not(.-is-open) {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu__item,
.rb-c-unified-banner__mode-selector .ink-c-menu__item {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu__item[aria-disabled="true"],
.rb-c-unified-banner__mode-selector .ink-c-menu__item[aria-disabled="true"] {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu__item[aria-selected="true"],
.rb-c-unified-banner__mode-selector .ink-c-menu__item[aria-selected="true"] {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu__item:focus,
.rb-c-unified-banner__mode-selector .ink-c-menu__item:focus {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu__item.-is-header,
.rb-c-unified-banner__mode-selector .ink-c-menu__item.-is-header {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu__item-icon,
.rb-c-unified-banner__mode-selector .ink-c-menu__item-icon {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu__item-label,
.rb-c-unified-banner__mode-selector .ink-c-menu__item-label {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu__item-inner,
.rb-c-unified-banner__mode-selector .ink-c-menu__item-inner,
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu__item-inner:link,
.rb-c-unified-banner__mode-selector .ink-c-menu__item-inner:link,
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu__item-inner:visited,
.rb-c-unified-banner__mode-selector .ink-c-menu__item-inner:visited {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu__item-shortcut,
.rb-c-unified-banner__mode-selector .ink-c-menu__item-shortcut {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu .ink-c-menu__separator,
.rb-c-unified-banner__mode-selector .ink-c-menu__separator {
  /*
       * Note that we need to cover both the "@name" and "name" key forms.
       * This is the reason for the apparent duplication below.
       */
}
.rb-c-unified-banner #action-unified-banner-review-menu > a,
.rb-c-unified-banner__mode-selector .rb-c-unified-banner__menu .rb-c-unified-banner__mode {
  border-right: 1px transparent solid;
  box-sizing: border-box;
  display: flex;
  font-weight: bold;
  padding: var(--ink-u-spacing-m);
  position: relative;
  z-index: 111;
}
.rb-c-unified-banner #action-unified-banner-review-menu .rb-c-unified-banner__menu-label,
.rb-c-unified-banner__mode-selector .rb-c-actions__action-label {
  font-size: var(--ink-u-font-sm);
}
.rb-c-unified-banner #action-unified-banner-review-menu.-is-menu-open > a,
.rb-c-unified-banner__mode-selector .rb-c-unified-banner__menu.-is-menu-open .rb-c-unified-banner__mode {
  background: var(--ink-c-menu-bg);
  border-right: var(--ink-c-menu-border);
}
.rb-c-unified-banner #action-unified-banner-review-menu > a {
  border-left: 1px transparent solid;
}
.rb-c-unified-banner #action-unified-banner-review-menu.-is-menu-open > a {
  border-left: var(--ink-c-menu-border);
}
.rb-c-unified-banner__interdiff-link {
  margin-top: 1em;
}
.rb-c-unified-banner__interdiff-link a {
  color: var(--ink-p-link-fg);
}
.rb-c-unified-banner__dock:not(:empty) {
  background: var(--rb-c-review-request-bg-color);
  border-bottom: var(--rb-c-review-request-border);
}
@media screen and (max-width: 720px), screen and (max-device-width: 720px) and (orientation: landscape) {
  .rb-c-unified-banner__changedesc {
    padding: 0 var(--ink-u-spacing-m) var(--ink-u-spacing-m) var(--ink-u-spacing-m);
  }
  .rb-c-unified-banner__controls {
    flex-wrap: wrap;
  }
  .rb-c-unified-banner__mode-selector {
    margin-left: 0;
  }
  .rb-c-unified-banner__review {
    padding: 0;
    z-index: 110;
  }
}
.box,
.modalbox {
  background: var(--ink-p-container-bg);
  border: var(--ink-g-border-container);
  border-radius: var(--ink-u-border-radius-std);
  box-shadow: var(--ink-g-shadow-std);
  box-sizing: border-box;
  background-position: top left;
  background-repeat: repeat-x;
}
.box.important {
  background-color: #FDF2A0;
  background-image: url("../images/gold_box_top_bg.33df1a7c2e1b.png");
  color: var(--ink-p-fg-on-light);
  display: flex;
  border: 1px #B7A93E solid;
  padding: 0 10px;
}
.box.important:before {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-c-alert-warning-icon);
  width: var(--ink-u-icon-l);
  height: var(--ink-u-icon-l);
  margin: 10px 10px 0 0;
}
.box.important a {
  color: var(--ink-p-link-fg-on-light);
}
.box.important a:hover {
  color: var(--ink-p-link-hover-fg-on-light);
}
.box-head,
.modalbox-title {
  background: var(--ink-p-header-bg);
  border-bottom: var(--ink-g-border-header);
  margin: 0;
  padding: var(--ink-u-spacing-s) var(--ink-u-spacing-sm);
  border-radius: var(--ink-u-border-radius-std) var(--ink-u-border-radius-std) 0 0;
}
.box-title,
.modalbox-title {
  font-size: 120%;
}
.box-title {
  margin: 0;
  padding: 0;
}
.box-main {
  padding: 1em;
}
.box-container {
  margin-bottom: 10px;
  width: 100%;
}
.box-inner,
.modalbox-inner {
  border-radius: var(--ink-u-border-radius-std);
}
.box-inner form {
  margin: 0;
}
.box-inner .rb-c-form__actions {
  margin: 0;
  padding: 1em 0 1em 1em;
}
.modalbox,
.modalbox-bg {
  z-index: 120;
}
/**
 * A button.
 *
 * Buttons are clickable and perform an action when clicked. They generally
 * contain text or other markup (like an embedded icon).
 *
 * This component is automatically used for ``<button>``,
 * ``<input type="submit">``, and ``<input type="button">`` elements. It
 * can be used explicitly for other elements (such as an ``<a>``), in which
 * case ``aria-role="button"`` should also be set.
 *
 * Buttons may contain a ``<span class="djblets-o-spinner"></span>`` to show
 * a spinner. This will be themed properly for the state of the button.
 *
 * They may also contain ``.rb-c-button__icon`` and ``.rb-c-button__label``
 * children to style an icon and label. These will be spaced appropriately.
 *
 * Deprecated:
 *     7.0:
 *     Use ``.ink-c-button`` instead.
 *
 * Modifiers:
 *     -is-danger:
 *         Indicates that the button performs an operation that might result
 *         in data loss (such as discarding a form or deleting data).
 *
 *     -is-disabled:
 *         Indicates that the button is disabled. This is only needed when
 *         applying the ``rb-c-button`` class to something other than a
 *         ``<button>`` or ``<input>``, which have their own ``disabled``
 *         DOM attribute.
 *
 *     -is-primary:
 *         Indicates that the button is the primary button on a form. This
 *         generally implies that the button is the default.
 *
 * DOM Attributes:
 *     aria-role (optional):
 *         Should be set to "button" if using an element other than
 *         ``<button>`` or ``<input>``.
 *
 *     data-action (optional):
 *         An action the button should perform.
 *
 *         This may be used by implementations to differentiate buttons, or to
 *         handle styling per-button (using ``&[data-action="..."]``).
 *
 *         Version Added:
 *             6.0
 *
 *     disabled (optional):
 *         Disables the button. This is used instead of the ``-is-disabled``
 *         modifier when the element is a ``<button>`` or ``<input>``.
 *
 *     role (optional):
 *         This should always be set to "button" when on an element other
 *         than ``<button>`` or ``<input>``. The exception is when using
 *         the ``-is-segmented`` modifier.
 *
 *     type (optional):
 *         Set to "button" if this is a ``<button>`` inside of a form, and
 *         you don't want it to submit the form.
 *
 * Structure:
 *     <button class="[modifiers]">...</button>
 *
 *     <button class="rb-c-button [modifiers]">...</button>
 *
 *     <button class="rb-c-button [modifiers]">
 *      <span class="rb-c-button__icon"></span>
 *      <label class="rb-c-button__label">...</label>
 *     </button>
 *
 *     <input type="submit" class="rb-c-button [modifiers]">
 *
 *     <input type="submit" class="[modifiers]">
 *
 *     <input type="button" class="rb-c-button [modifiers]">
 *
 *     <input type="button" class="[modifiers]">
 *
 *     <a class="rb-c-button [modifiers]" role="button" href="...">...</a>
 *
 *     <a class="rb-c-button [modifiers]" role="button" href="...">
 *      <span class="rb-c-button__icon"></span>
 *      <label class="rb-c-button__label">...</label>
 *     </a>
 */
.rb-c-button,
button:not(.ink-c-button),
input[type="button"]:not(.ink-c-button),
input[type="submit"]:not(.ink-c-button),
.btn,
.btn-segment {
  border: 1px #C0C0C0 solid;
  border-radius: 4px;
  color: #333333;
  cursor: pointer;
  display: inline-flex;
  gap: 0.5em;
  align-items: center;
  justify-content: center;
  font-family: var(--ink-ff-default);
  font-weight: normal;
  font-size: 13px;
  line-height: normal;
  padding: 3px 8px;
  text-decoration: none;
  transition: 0.1s linear all;
  background-color: #E9E9E9;
  background-repeat: no-repeat;
  background-image: linear-gradient(to bottom, #FFFFFF, #FFFFFF 25%, #E9E9E9);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#E9E9E9', GradientType=0);
}
.ink-show-deprecations .rb-c-button,
.ink-show-deprecations button:not(.ink-c-button),
.ink-show-deprecations input[type="button"]:not(.ink-c-button),
.ink-show-deprecations input[type="submit"]:not(.ink-c-button) {
  animation: ink-show-deprecated 6s infinite alternate !important;
  outline: 3px transparent double;
  outline-offset: 3px;
}
.rb-c-button:hover,
.rb-c-button.js-hover,
button:not(.ink-c-button):hover,
button:not(.ink-c-button).js-hover,
input[type="button"]:not(.ink-c-button):hover,
input[type="button"]:not(.ink-c-button).js-hover,
input[type="submit"]:not(.ink-c-button):hover,
input[type="submit"]:not(.ink-c-button).js-hover,
button:not(.ink-c-button):hover,
input[type="submit"]:not(.ink-c-button):hover,
.btn:hover,
.btn-segment:hover,
button:not(.ink-c-button) .hover,
input[type="submit"]:not(.ink-c-button) .hover,
.btn .hover,
.btn-segment .hover {
  background-position: 0 -15px;
  color: #333333;
  text-decoration: none;
}
.rb-c-button:link,
.rb-c-button:visited,
button:not(.ink-c-button):link,
button:not(.ink-c-button):visited,
input[type="button"]:not(.ink-c-button):link,
input[type="button"]:not(.ink-c-button):visited,
input[type="submit"]:not(.ink-c-button):link,
input[type="submit"]:not(.ink-c-button):visited,
button:not(.ink-c-button):link,
input[type="submit"]:not(.ink-c-button):link,
.btn:link,
.btn-segment:link,
button:not(.ink-c-button):visited,
input[type="submit"]:not(.ink-c-button):visited,
.btn:visited,
.btn-segment:visited {
  color: #333333;
}
.rb-c-button[disabled],
.rb-c-button.-is-disabled,
button:not(.ink-c-button)[disabled],
button:not(.ink-c-button).-is-disabled,
input[type="button"]:not(.ink-c-button)[disabled],
input[type="button"]:not(.ink-c-button).-is-disabled,
input[type="submit"]:not(.ink-c-button)[disabled],
input[type="submit"]:not(.ink-c-button).-is-disabled,
button:not(.ink-c-button).disabled,
input[type="submit"]:not(.ink-c-button).disabled,
.btn.disabled,
.btn-segment.disabled {
  color: #D0D0D0;
  cursor: default;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.rb-c-button.-is-danger,
button:not(.ink-c-button).-is-danger,
input[type="button"]:not(.ink-c-button).-is-danger,
input[type="submit"]:not(.ink-c-button).-is-danger,
button:not(.ink-c-button).danger,
input[type="submit"]:not(.ink-c-button).danger,
.btn.danger,
.btn-segment.danger {
  color: #FFFFFF !important;
  background-color: #DE1717;
  background-repeat: repeat-x;
  background-image: linear-gradient(to bottom, #EA3939, #DE1717);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EA3939', endColorstr='#DE1717', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #DE1717 #DE1717 #991010;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.rb-c-button.-is-primary,
button:not(.ink-c-button).-is-primary,
input[type="button"]:not(.ink-c-button).-is-primary,
input[type="submit"]:not(.ink-c-button).-is-primary,
button:not(.ink-c-button).default,
input[type="submit"]:not(.ink-c-button).default,
.btn.default,
.btn-segment.default,
button:not(.ink-c-button).primary,
input[type="submit"]:not(.ink-c-button).primary,
.btn.primary,
.btn-segment.primary {
  color: #FFFFFF;
  background-color: #2378DB;
  background-repeat: repeat-x;
  background-image: linear-gradient(to bottom, #4A90E2, #2378DB);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A90E2', endColorstr='#2378DB', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #2378DB #2378DB #185499;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}
.rb-c-button.-is-danger .djblets-o-spinner,
.rb-c-button.-is-primary .djblets-o-spinner,
button:not(.ink-c-button).-is-danger .djblets-o-spinner,
button:not(.ink-c-button).-is-primary .djblets-o-spinner,
input[type="button"]:not(.ink-c-button).-is-danger .djblets-o-spinner,
input[type="button"]:not(.ink-c-button).-is-primary .djblets-o-spinner,
input[type="submit"]:not(.ink-c-button).-is-danger .djblets-o-spinner,
input[type="submit"]:not(.ink-c-button).-is-primary .djblets-o-spinner {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%2016%2016%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20style%3D%22stroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A1.5%3B%22%3E%0A%20%3Cpath%20d%3D%22M11.514%2C14.035c-1.032%2C0.603%20-2.233%2C0.948%20-3.514%2C0.948c-3.854%2C0%20-6.983%2C-3.129%20-6.983%2C-6.983c0%2C-3.854%203.129%2C-6.983%206.983%2C-6.983%22%20style%3D%22fill%3Anone%3Bstroke%3A%23FFF%3Bstroke-width%3A2px%3B%22%2F%3E%0A%20%3CanimateTransform%0A%20%20%20attributeName%3D%22transform%22%0A%20%20%20type%3D%22rotate%22%0A%20%20%20from%3D%220%200%200%22%0A%20%20%20to%3D%22360%200%200%22%0A%20%20%20dur%3D%221.0s%22%0A%20%20%20repeatCount%3D%22indefinite%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}
.rb-c-button > *,
button:not(.ink-c-button) > *,
input[type="button"]:not(.ink-c-button) > *,
input[type="submit"]:not(.ink-c-button) > * {
  cursor: inherit;
}
/*
 * NOTE: The following are provided separately due to the use of &:extend()
 *       below, which would cause these definitions to be lost if part of
 *       ``.rb-c-button`` above.
 */
/**
 * The icon for a button.
 *
 * Consumers are responsible for styling the icon, using Review Board
 * icons, FontAwesome, or some other mechanism. This can be done by
 * attaching additional CSS classes or styling in CSS.
 *
 * If including any text-based content for the icon, consider using
 * ``aria-hidden="true"``.
 *
 * Version Added:
 *     6.0
 *
 * DOM Attributes:
 *     aria-hidden (boolean):
 *         Should always be set to ``true``.
 *
 * Structure:
 *     <span class="rb-c-button__icon [...]"
 *           aria-hidden="true">
 *      [...]
 *     </span>
 */
.rb-c-button__icon {
  min-width: 1em;
}
/**
 * The label for a button.
 *
 * This should be used when the button also contains an icon, to properly
 * handle styling of both the icon and label.
 *
 * Version Added:
 *     6.0
 *
 * Structure:
 *     <label class="rb-c-button__label">text...</label>
 */
/*
 * Give all standard buttons the .rb-c-button component by default.
 */
/**
 * A group of buttons arranged compactly in a row.
 *
 * Button groups have the appearance of one large button split into
 * multiple clickable areas. They're useful for things like buttons with
 * dropdowns and toolbars.
 *
 * Children must be ``.rb-c-button`` components or ``<button>`` elements.
 *
 * Deprecated:
 *     7.0:
 *     Use ``.ink-c-button-group`` instead.
 *
 * Modifiers:
 *     -is-vertical:
 *         Lays out the buttons vertically instead of horizontally.
 *
 * DOM Attributes:
 *     aria-label (required):
 *         A descriptive label for screen readers (e.g., "Text formatting").
 *
 *     role (required):
 *         This should be set to "group" in most cases. If this button
 *         group is simulating a toolbar, set this to "toolbar".
 *
 * Structure:
 *     <div class="rb-c-button-group [modifiers]" role="..."
 *          aria-label="...">
 *      <button class="rb-c-button">...</button>
 *      ...
 *     </div>
 */
.rb-c-button-group,
.btn-segmented,
.split-btn .split-btn-alternatives {
  border: 1px #C0C0C0 solid;
  border-radius: 4px;
  display: inline-flex;
  /* Make sure there's no space between buttons. */
  font-size: 0;
}
.ink-show-deprecations .rb-c-button-group {
  animation: ink-show-deprecated 6s infinite alternate !important;
  outline: 3px transparent double;
  outline-offset: 3px;
}
.rb-c-button-group:not(.-is-vertical),
.btn-segmented,
.split-btn .split-btn-alternatives {
  /* Default horizontal layouts. */
}
.rb-c-button-group:not(.-is-vertical) > .btn-segment,
.rb-c-button-group:not(.-is-vertical) > button,
.rb-c-button-group:not(.-is-vertical) > .rb-c-button,
.rb-c-button-group:not(.-is-vertical) > button:not(.ink-c-button),
.rb-c-button-group:not(.-is-vertical) > input[type="button"]:not(.ink-c-button),
.rb-c-button-group:not(.-is-vertical) > input[type="submit"]:not(.ink-c-button),
.btn-segment {
  /*
       * Set these based on a default horizontal orientation. We'll round out
       * the corners of the first and last buttons, and add borders in-between
       * each.
       */
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  border-left: inherit;
  border-radius: 0;
}
.rb-c-button-group:not(.-is-vertical) > .btn-segment:first-child,
.rb-c-button-group:not(.-is-vertical) > button:first-child,
.rb-c-button-group:not(.-is-vertical) > .rb-c-button:first-child,
.rb-c-button-group:not(.-is-vertical) > button:not(.ink-c-button):first-child,
.rb-c-button-group:not(.-is-vertical) > input[type="button"]:not(.ink-c-button):first-child,
.rb-c-button-group:not(.-is-vertical) > input[type="submit"]:not(.ink-c-button):first-child,
.btn-segment:first-child {
  border-left: 0;
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
}
.rb-c-button-group:not(.-is-vertical) > .btn-segment:last-child,
.rb-c-button-group:not(.-is-vertical) > button:last-child,
.rb-c-button-group:not(.-is-vertical) > .rb-c-button:last-child,
.rb-c-button-group:not(.-is-vertical) > button:not(.ink-c-button):last-child,
.rb-c-button-group:not(.-is-vertical) > input[type="button"]:not(.ink-c-button):last-child,
.rb-c-button-group:not(.-is-vertical) > input[type="submit"]:not(.ink-c-button):last-child,
.btn-segment:last-child {
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
}
.rb-c-button-group.-is-vertical > .btn-segment,
.rb-c-button-group.-is-vertical > button,
.rb-c-button-group.-is-vertical > .rb-c-button,
.rb-c-button-group.-is-vertical > button:not(.ink-c-button),
.rb-c-button-group.-is-vertical > input[type="button"]:not(.ink-c-button),
.rb-c-button-group.-is-vertical > input[type="submit"]:not(.ink-c-button),
.split-btn .split-btn-alternatives .btn {
  border-top: inherit;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  display: block;
  text-align: left;
  width: 100%;
}
.rb-c-button-group.-is-vertical > .btn-segment:first-child,
.rb-c-button-group.-is-vertical > button:first-child,
.rb-c-button-group.-is-vertical > .rb-c-button:first-child,
.rb-c-button-group.-is-vertical > button:not(.ink-c-button):first-child,
.rb-c-button-group.-is-vertical > input[type="button"]:not(.ink-c-button):first-child,
.rb-c-button-group.-is-vertical > input[type="submit"]:not(.ink-c-button):first-child,
.split-btn .split-btn-alternatives .btn:first-child {
  border-top: 0;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.rb-c-button-group.-is-vertical > .btn-segment:last-child,
.rb-c-button-group.-is-vertical > button:last-child,
.rb-c-button-group.-is-vertical > .rb-c-button:last-child,
.rb-c-button-group.-is-vertical > button:not(.ink-c-button):last-child,
.rb-c-button-group.-is-vertical > input[type="button"]:not(.ink-c-button):last-child,
.rb-c-button-group.-is-vertical > input[type="submit"]:not(.ink-c-button):last-child,
.split-btn .split-btn-alternatives .btn:last-child {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}
/**
 * A button that displays a drop-down menu.
 *
 * Menu buttons consist of either a single button or a button group that,
 * when clicked, displays a drop-down (or drop-up) menu.
 *
 * The menu can optionally be a list of buttons, when mixing in a
 * ``.rb-c-button-group`` into the ``.rb-c-menu`` element and ``.rb-c-button``
 * into the ``.rb-c-menu__item`` elements.
 *
 * Deprecated:
 *     7.0:
 *     Use ``.ink-c-menu-button`` instead.
 *
 * DOM Attributes:
 *     role (required):
 *         This should be set to "group".
 *
 * Structure:
 *     <div class="rb-c-menu-button" role="group">
 *      <button class="rb-c-button rb-c-menu-button__toggle"
 *              id="<label ID>"
 *              aria-controls="<menu ID>"
 *              aria-haspopup="true"
 *              aria-label="...">
 *       ...
 *      </button>
 *      <div class="rb-c-menu" role="menu" tabindex="-1" id="<menu ID>"
 *           aria-labelledby="<label ID>">
 *       ...
 *      </div>
 *     </div>
 *
 *     <div class="rb-c-menu-button" role="group">
 *      <div class="rb-c-button-group" role="group">
 *       <button class="rb-c-button rb-c-menu-button__primary">...</button>
 *       <button class="rb-c-button rb-c-menu-button__toggle"
 *               id="<label ID>"
 *               aria-controls="<menu ID>"
 *               aria-haspopup="true"
 *               aria-label="...">
 *        ...
 *       </button>
 *      </div>
 *      <div class="rb-c-menu" role="menu" tabindex="-1" id="<menu ID>"
 *           aria-labelledby="<label ID>">
 *       ...
 *      </ul>
 *     </div>
 */
.rb-c-menu-button,
.split-btn {
  border-radius: 4px 4px 0 0;
  display: inline-block;
  position: relative;
  transition: 0.25s linear border;
  /**
   * A primary action button, for split menu buttons.
   *
   * Structure:
   *     <button class="rb-c-menu-button__primary rb-c-button"
   *             type="button">
   *      text or icon...
   *     </button>
   */
  /**
   * The button that toggles the display of a menu.
   *
   * Structure:
   *     <button class="rb-c-menu-button__toggle rb-c-button"
   *             id="<label id>" aria-haspopup="true" type="button">
   *      [text...]
   *      <span class="rb-icon rb-icon-dropdown-arrow"></span>
   *     </button>
   */
}
.ink-show-deprecations .rb-c-menu-button {
  animation: ink-show-deprecated 6s infinite alternate !important;
  outline: 3px transparent double;
  outline-offset: 3px;
}
.rb-c-menu-button:not(.-opens-up) {
  /* Default drop-down styling. */
}
.rb-c-menu-button:not(.-opens-up) > .rb-c-menu {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.rb-c-menu-button:not(.-opens-up) > .rb-c-menu > .btn-segment,
.rb-c-menu-button:not(.-opens-up) > .rb-c-menu > button,
.rb-c-menu-button:not(.-opens-up) > .rb-c-menu > .rb-c-button,
.rb-c-menu-button:not(.-opens-up) > .rb-c-menu > button:not(.ink-c-button),
.rb-c-menu-button:not(.-opens-up) > .rb-c-menu > input[type="button"]:not(.ink-c-button),
.rb-c-menu-button:not(.-opens-up) > .rb-c-menu > input[type="submit"]:not(.ink-c-button) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.rb-c-menu-button:not(.-opens-up) > .rb-c-menu.-is-vertical > .btn-segment,
.rb-c-menu-button:not(.-opens-up) > .rb-c-menu.-is-vertical > button,
.rb-c-menu-button:not(.-opens-up) > .rb-c-menu.-is-vertical > .rb-c-button,
.rb-c-menu-button:not(.-opens-up) > .rb-c-menu.-is-vertical > button:not(.ink-c-button),
.rb-c-menu-button:not(.-opens-up) > .rb-c-menu.-is-vertical > input[type="button"]:not(.ink-c-button),
.rb-c-menu-button:not(.-opens-up) > .rb-c-menu.-is-vertical > input[type="submit"]:not(.ink-c-button) {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.rb-c-menu-button:not(.-opens-up) > .rb-c-menu.-is-vertical > .btn-segment:first-child,
.rb-c-menu-button:not(.-opens-up) > .rb-c-menu.-is-vertical > button:first-child,
.rb-c-menu-button:not(.-opens-up) > .rb-c-menu.-is-vertical > .rb-c-button:first-child,
.rb-c-menu-button:not(.-opens-up) > .rb-c-menu.-is-vertical > button:not(.ink-c-button):first-child,
.rb-c-menu-button:not(.-opens-up) > .rb-c-menu.-is-vertical > input[type="button"]:not(.ink-c-button):first-child,
.rb-c-menu-button:not(.-opens-up) > .rb-c-menu.-is-vertical > input[type="submit"]:not(.ink-c-button):first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.rb-c-menu-button.-opens-up > .rb-c-menu {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.rb-c-menu-button.-opens-up > .rb-c-menu > .btn-segment,
.rb-c-menu-button.-opens-up > .rb-c-menu > button,
.rb-c-menu-button.-opens-up > .rb-c-menu > .rb-c-button,
.rb-c-menu-button.-opens-up > .rb-c-menu > button:not(.ink-c-button),
.rb-c-menu-button.-opens-up > .rb-c-menu > input[type="button"]:not(.ink-c-button),
.rb-c-menu-button.-opens-up > .rb-c-menu > input[type="submit"]:not(.ink-c-button) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.rb-c-menu-button.-opens-up > .rb-c-menu.-is-vertical > .btn-segment,
.rb-c-menu-button.-opens-up > .rb-c-menu.-is-vertical > button,
.rb-c-menu-button.-opens-up > .rb-c-menu.-is-vertical > .rb-c-button,
.rb-c-menu-button.-opens-up > .rb-c-menu.-is-vertical > button:not(.ink-c-button),
.rb-c-menu-button.-opens-up > .rb-c-menu.-is-vertical > input[type="button"]:not(.ink-c-button),
.rb-c-menu-button.-opens-up > .rb-c-menu.-is-vertical > input[type="submit"]:not(.ink-c-button) {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.rb-c-menu-button.-opens-up > .rb-c-menu.-is-vertical > .btn-segment:last-child,
.rb-c-menu-button.-opens-up > .rb-c-menu.-is-vertical > button:last-child,
.rb-c-menu-button.-opens-up > .rb-c-menu.-is-vertical > .rb-c-button:last-child,
.rb-c-menu-button.-opens-up > .rb-c-menu.-is-vertical > button:not(.ink-c-button):last-child,
.rb-c-menu-button.-opens-up > .rb-c-menu.-is-vertical > input[type="button"]:not(.ink-c-button):last-child,
.rb-c-menu-button.-opens-up > .rb-c-menu.-is-vertical > input[type="submit"]:not(.ink-c-button):last-child {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.rb-c-menu-button.js-open:not(.-opens-up) {
  /* Default drop-down styling. */
}
.rb-c-menu-button.js-open:not(.-opens-up) > .btn-segment,
.rb-c-menu-button.js-open:not(.-opens-up) > button,
.rb-c-menu-button.js-open:not(.-opens-up) > .rb-c-button,
.rb-c-menu-button.js-open:not(.-opens-up) > button:not(.ink-c-button),
.rb-c-menu-button.js-open:not(.-opens-up) > input[type="button"]:not(.ink-c-button),
.rb-c-menu-button.js-open:not(.-opens-up) > input[type="submit"]:not(.ink-c-button) {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.rb-c-menu-button.js-open:not(.-opens-up) > .rb-c-button-group:not(.rb-c-menu),
.split-btn.drop-down-shown .btn-segmented:not(.rb-c-menu),
.split-btn.drop-down-shown .split-btn .split-btn-alternatives:not(.rb-c-menu) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.rb-c-menu-button.js-open:not(.-opens-up) > .rb-c-button-group:not(.rb-c-menu) > .btn-segment,
.rb-c-menu-button.js-open:not(.-opens-up) > .rb-c-button-group:not(.rb-c-menu) > button,
.rb-c-menu-button.js-open:not(.-opens-up) > .rb-c-button-group:not(.rb-c-menu) > .rb-c-button,
.rb-c-menu-button.js-open:not(.-opens-up) > .rb-c-button-group:not(.rb-c-menu) > button:not(.ink-c-button),
.rb-c-menu-button.js-open:not(.-opens-up) > .rb-c-button-group:not(.rb-c-menu) > input[type="button"]:not(.ink-c-button),
.rb-c-menu-button.js-open:not(.-opens-up) > .rb-c-button-group:not(.rb-c-menu) > input[type="submit"]:not(.ink-c-button),
.split-btn.drop-down-shown .btn-segmented:not(.rb-c-menu) > .btn-segment,
.split-btn.drop-down-shown .btn-segmented:not(.rb-c-menu) > button,
.split-btn.drop-down-shown .btn-segmented:not(.rb-c-menu) > .rb-c-button,
.split-btn.drop-down-shown .split-btn .split-btn-alternatives:not(.rb-c-menu) > .btn-segment,
.split-btn.drop-down-shown .split-btn .split-btn-alternatives:not(.rb-c-menu) > button,
.split-btn.drop-down-shown .split-btn .split-btn-alternatives:not(.rb-c-menu) > .rb-c-button {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.rb-c-menu-button.js-open:not(.-opens-up) > .rb-c-button-group:not(.rb-c-menu).-is-vertical > .btn-segment,
.rb-c-menu-button.js-open:not(.-opens-up) > .rb-c-button-group:not(.rb-c-menu).-is-vertical > button,
.rb-c-menu-button.js-open:not(.-opens-up) > .rb-c-button-group:not(.rb-c-menu).-is-vertical > .rb-c-button,
.rb-c-menu-button.js-open:not(.-opens-up) > .rb-c-button-group:not(.rb-c-menu).-is-vertical > button:not(.ink-c-button),
.rb-c-menu-button.js-open:not(.-opens-up) > .rb-c-button-group:not(.rb-c-menu).-is-vertical > input[type="button"]:not(.ink-c-button),
.rb-c-menu-button.js-open:not(.-opens-up) > .rb-c-button-group:not(.rb-c-menu).-is-vertical > input[type="submit"]:not(.ink-c-button),
.split-btn.drop-down-shown .btn-segmented:not(.rb-c-menu).-is-vertical > .btn-segment,
.split-btn.drop-down-shown .btn-segmented:not(.rb-c-menu).-is-vertical > button,
.split-btn.drop-down-shown .btn-segmented:not(.rb-c-menu).-is-vertical > .rb-c-button,
.split-btn.drop-down-shown .split-btn .split-btn-alternatives:not(.rb-c-menu).-is-vertical > .btn-segment,
.split-btn.drop-down-shown .split-btn .split-btn-alternatives:not(.rb-c-menu).-is-vertical > button,
.split-btn.drop-down-shown .split-btn .split-btn-alternatives:not(.rb-c-menu).-is-vertical > .rb-c-button {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.rb-c-menu-button.js-open:not(.-opens-up) > .rb-c-button-group:not(.rb-c-menu).-is-vertical > .btn-segment:last-child,
.rb-c-menu-button.js-open:not(.-opens-up) > .rb-c-button-group:not(.rb-c-menu).-is-vertical > button:last-child,
.rb-c-menu-button.js-open:not(.-opens-up) > .rb-c-button-group:not(.rb-c-menu).-is-vertical > .rb-c-button:last-child,
.rb-c-menu-button.js-open:not(.-opens-up) > .rb-c-button-group:not(.rb-c-menu).-is-vertical > button:not(.ink-c-button):last-child,
.rb-c-menu-button.js-open:not(.-opens-up) > .rb-c-button-group:not(.rb-c-menu).-is-vertical > input[type="button"]:not(.ink-c-button):last-child,
.rb-c-menu-button.js-open:not(.-opens-up) > .rb-c-button-group:not(.rb-c-menu).-is-vertical > input[type="submit"]:not(.ink-c-button):last-child,
.split-btn.drop-down-shown .btn-segmented:not(.rb-c-menu).-is-vertical > .btn-segment:last-child,
.split-btn.drop-down-shown .btn-segmented:not(.rb-c-menu).-is-vertical > button:last-child,
.split-btn.drop-down-shown .btn-segmented:not(.rb-c-menu).-is-vertical > .rb-c-button:last-child,
.split-btn.drop-down-shown .split-btn .split-btn-alternatives:not(.rb-c-menu).-is-vertical > .btn-segment:last-child,
.split-btn.drop-down-shown .split-btn .split-btn-alternatives:not(.rb-c-menu).-is-vertical > button:last-child,
.split-btn.drop-down-shown .split-btn .split-btn-alternatives:not(.rb-c-menu).-is-vertical > .rb-c-button:last-child {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.rb-c-menu-button.js-open.-opens-up > .btn-segment,
.rb-c-menu-button.js-open.-opens-up > button,
.rb-c-menu-button.js-open.-opens-up > .rb-c-button,
.rb-c-menu-button.js-open.-opens-up > button:not(.ink-c-button),
.rb-c-menu-button.js-open.-opens-up > input[type="button"]:not(.ink-c-button),
.rb-c-menu-button.js-open.-opens-up > input[type="submit"]:not(.ink-c-button) {
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.rb-c-menu-button.js-open.-opens-up > .rb-c-button-group:not(.rb-c-menu),
.split-btn.drop-up-shown .btn-segmented:not(.rb-c-menu),
.split-btn.drop-up-shown .split-btn .split-btn-alternatives:not(.rb-c-menu) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.rb-c-menu-button.js-open.-opens-up > .rb-c-button-group:not(.rb-c-menu) > .btn-segment,
.rb-c-menu-button.js-open.-opens-up > .rb-c-button-group:not(.rb-c-menu) > button,
.rb-c-menu-button.js-open.-opens-up > .rb-c-button-group:not(.rb-c-menu) > .rb-c-button,
.rb-c-menu-button.js-open.-opens-up > .rb-c-button-group:not(.rb-c-menu) > button:not(.ink-c-button),
.rb-c-menu-button.js-open.-opens-up > .rb-c-button-group:not(.rb-c-menu) > input[type="button"]:not(.ink-c-button),
.rb-c-menu-button.js-open.-opens-up > .rb-c-button-group:not(.rb-c-menu) > input[type="submit"]:not(.ink-c-button),
.split-btn.drop-up-shown .btn-segmented:not(.rb-c-menu) > .btn-segment,
.split-btn.drop-up-shown .btn-segmented:not(.rb-c-menu) > button,
.split-btn.drop-up-shown .btn-segmented:not(.rb-c-menu) > .rb-c-button,
.split-btn.drop-up-shown .split-btn .split-btn-alternatives:not(.rb-c-menu) > .btn-segment,
.split-btn.drop-up-shown .split-btn .split-btn-alternatives:not(.rb-c-menu) > button,
.split-btn.drop-up-shown .split-btn .split-btn-alternatives:not(.rb-c-menu) > .rb-c-button {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.rb-c-menu-button.js-open.-opens-up > .rb-c-button-group:not(.rb-c-menu).-is-vertical > .btn-segment,
.rb-c-menu-button.js-open.-opens-up > .rb-c-button-group:not(.rb-c-menu).-is-vertical > button,
.rb-c-menu-button.js-open.-opens-up > .rb-c-button-group:not(.rb-c-menu).-is-vertical > .rb-c-button,
.rb-c-menu-button.js-open.-opens-up > .rb-c-button-group:not(.rb-c-menu).-is-vertical > button:not(.ink-c-button),
.rb-c-menu-button.js-open.-opens-up > .rb-c-button-group:not(.rb-c-menu).-is-vertical > input[type="button"]:not(.ink-c-button),
.rb-c-menu-button.js-open.-opens-up > .rb-c-button-group:not(.rb-c-menu).-is-vertical > input[type="submit"]:not(.ink-c-button),
.split-btn.drop-up-shown .btn-segmented:not(.rb-c-menu).-is-vertical > .btn-segment,
.split-btn.drop-up-shown .btn-segmented:not(.rb-c-menu).-is-vertical > button,
.split-btn.drop-up-shown .btn-segmented:not(.rb-c-menu).-is-vertical > .rb-c-button,
.split-btn.drop-up-shown .split-btn .split-btn-alternatives:not(.rb-c-menu).-is-vertical > .btn-segment,
.split-btn.drop-up-shown .split-btn .split-btn-alternatives:not(.rb-c-menu).-is-vertical > button,
.split-btn.drop-up-shown .split-btn .split-btn-alternatives:not(.rb-c-menu).-is-vertical > .rb-c-button {
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}
.rb-c-menu-button.js-open.-opens-up > .rb-c-button-group:not(.rb-c-menu).-is-vertical > .btn-segment:first-child,
.rb-c-menu-button.js-open.-opens-up > .rb-c-button-group:not(.rb-c-menu).-is-vertical > button:first-child,
.rb-c-menu-button.js-open.-opens-up > .rb-c-button-group:not(.rb-c-menu).-is-vertical > .rb-c-button:first-child,
.rb-c-menu-button.js-open.-opens-up > .rb-c-button-group:not(.rb-c-menu).-is-vertical > button:not(.ink-c-button):first-child,
.rb-c-menu-button.js-open.-opens-up > .rb-c-button-group:not(.rb-c-menu).-is-vertical > input[type="button"]:not(.ink-c-button):first-child,
.rb-c-menu-button.js-open.-opens-up > .rb-c-button-group:not(.rb-c-menu).-is-vertical > input[type="submit"]:not(.ink-c-button):first-child,
.split-btn.drop-up-shown .btn-segmented:not(.rb-c-menu).-is-vertical > .btn-segment:first-child,
.split-btn.drop-up-shown .btn-segmented:not(.rb-c-menu).-is-vertical > button:first-child,
.split-btn.drop-up-shown .btn-segmented:not(.rb-c-menu).-is-vertical > .rb-c-button:first-child,
.split-btn.drop-up-shown .split-btn .split-btn-alternatives:not(.rb-c-menu).-is-vertical > .btn-segment:first-child,
.split-btn.drop-up-shown .split-btn .split-btn-alternatives:not(.rb-c-menu).-is-vertical > button:first-child,
.split-btn.drop-up-shown .split-btn .split-btn-alternatives:not(.rb-c-menu).-is-vertical > .rb-c-button:first-child {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
.rb-c-menu-button > .rb-c-button,
.rb-c-menu-button > .rb-c-button-group .rb-c-button,
.rb-c-menu-button > button:not(.ink-c-button),
.rb-c-menu-button > .rb-c-button-group button:not(.ink-c-button),
.rb-c-menu-button > input[type="button"]:not(.ink-c-button),
.rb-c-menu-button > .rb-c-button-group input[type="button"]:not(.ink-c-button),
.rb-c-menu-button > input[type="submit"]:not(.ink-c-button),
.rb-c-menu-button > .rb-c-button-group input[type="submit"]:not(.ink-c-button) {
  border-bottom: transparent;
  margin: 0;
}
.rb-c-menu-button > .rb-c-menu,
.split-btn .split-btn-alternatives {
  position: absolute;
  white-space: nowrap;
}
.rb-c-menu-button > .rb-c-menu.-is-open {
  visibility: visible;
}
/**
 * Deprecated styling variables for buttons.
 *
 * Deprecated:
 *     4.0:
 *     These have been replaced by definitions in ``#rb-ns-ui.buttons``.
 */
/**
 * Old style for buttons.
 *
 * Deprecated:
 *     4.0:
 *     This has been replaced with ``.rb-c-button``, and will be removed
 *     in a future release.
 */
/**
 * Old style for segmented button groups.
 *
 * Deprecated:
 *     4.0:
 *     This has been replaced with ``.rb-c-button-group``, and will be
 *     removed in a future release.
 */
.btn-segmented,
.split-btn .split-btn-alternatives {
  /* Override .btn styles. */
  background: none;
  padding: 0;
}
/**
 * Old style for button segments.
 *
 * Deprecated:
 *     4.0:
 *     This has been replaced with ``.rb-c-button`` nested inside of a
 *     ``.rb-c-button-group``, and will be removed in a future release.
 */
.split-btn .split-btn-alternatives {
  background: #FFFFFF;
  border: 1px #C0C0C0 solid;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.05);
  display: none;
  list-style: none;
  opacity: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  transition: opacity 0.2s linear;
  visibility: hidden;
  z-index: 110;
  /**
   * A menu item.
   *
   * This may contain any content needed in the menu item, but will usually
   * consist of text.
   *
   * The element type may be anything, and will depend on the parent
   * ``.rb-c-menu``. It will most commonly be a ``<li>``, ``<a>``, ``<div>``,
   * or ``<button>``.
   *
   * If displaying a button-based menu, this must have ``.rb-c-button`` mixed
   * in.
   *
   * Consumers are responsible for marking a menu item as focused in response
   * to keyboard navigation or mouse movements, in order to convey the active
   * item.
   *
   * DOM Attributes:
   *     role (required):
   *         This must be set to "menuitem".
   *
   *     tabindex (required):
   *         This must be set to -1, allowing the menu to be focused
   *         programmatically but not through tabbing. Consumers should provide
   *         keep
   *
   * Structure:
   *     <li class="rb-c-menu__item" role="menuitem" tabindex="-1">...</li>
   *
   *     <a class="rb-c-menu__item" role="menuitem" tabindex="-1">...</a>
   *
   *     <button class="rb-c-menu__item rb-c-button" role="menuitem"
   *             type="button" tabindex="-1">
   *      ...
   *     </button>
   */
  /**
   * A menu separator.
   */
}
.split-btn .split-btn-alternatives.-is-open {
  display: block;
  opacity: 1;
  visibility: visible;
}
.split-btn .split-btn-alternatives.js-no-animation {
  transition: none;
}
.split-btn .split-btn-alternatives__item {
  cursor: pointer;
  display: block;
  list-display: none;
  margin: 0;
}
.split-btn .split-btn-alternatives__item.rb-c-button:focus,
.split-btn .split-btn-alternatives__itembutton:not(.ink-c-button):focus,
.split-btn .split-btn-alternatives__iteminput[type="button"]:not(.ink-c-button):focus,
.split-btn .split-btn-alternatives__iteminput[type="submit"]:not(.ink-c-button):focus {
  background: #DAEBFF;
  outline: 0;
}
.split-btn .split-btn-alternatives__item:not(.rb-c-button) {
  /*
       * We want to apply padding to standard list items, but button list
       * items should retain button padding.
       */
  padding: 0.8em 1em;
}
.split-btn .split-btn-alternatives__item:not(.rb-c-button):focus,
.split-btn .split-btn-alternatives__item:not(.rb-c-button):hover {
  background: #DAEBFF;
  outline: 0;
}
.split-btn .split-btn-alternatives__separator {
  border-bottom: 1px #C0C0C0 solid;
}
button:not(.ink-c-button).large,
input[type="submit"]:not(.ink-c-button).large,
.btn.large,
.btn-segment.large {
  font-size: 130%;
  line-height: normal;
  padding: 9px 14px 9px;
  border-radius: 6px;
}
button:not(.ink-c-button).small,
input[type="submit"]:not(.ink-c-button).small,
.btn.small,
.btn-segment.small {
  padding: 7px 9px 7px;
  font-size: 11px;
}
/**
 * Styles, variables, and mixins for the rb-c-content-header component.
 */
/**
 * Header area for a section of content.
 *
 * This provides a consistent header above an area of content. This may be
 * above the main content area for a page, above a section of list items, or
 * any other part of the UI.
 *
 * Modifiers:
 *     -is-main:
 *         Whether this is the main header for the page. This will use a
 *         slightly larger font size and provide additional padding/margins.
 *
 * Structure:
 *     <header class="rb-c-content-header -is-main">
 *      <h1 class="rb-c-content-header__title">...</h1>
 *      <div class="rb-c-content-header__actions">...</div>
 *     </header>
 */
.rb-c-content-header {
  padding: 0;
  margin: 0;
  position: relative;
  vertical-align: middle;
  /**
   * An actions area, shown just to the right of the title.
   *
   * This can be used to place icons or text that can perform actions when
   * clicked. It is up to the consumer to handle any rendering of the actions.
   *
   * Structure:
   *     <div class="rb-c-content-header__actions">
   *      <div class="rb-c-content-header__action">...</div>
   *      ...
   *     </div>
   */
  /**
   * An action shown in the header's actions area.
   *
   * The content and implementation of the action is dependent on the consumer.
   *
   * Structure:
   *     <div class="rb-c-content-header__action">...</div>
   */
  /**
   * The title for the header.
   *
   * This should use a standard ``<h1>``, ``<h2>``, etc. element as appropriate
   * for the position on the page, for semantic reasons. There are no
   * differences in how they are rendered, though.
   *
   * Structure:
   *     <h2 class="rb-c-content-header__title">...</h2>
   */
}
.rb-c-content-header__actions {
  display: inline-flex;
  gap: 1em;
  margin-left: 1em;
}
.rb-c-content-header__action {
  display: inline-block;
  margin-left: 1em;
}
.rb-c-content-header__title {
  color: var(--ink-p-header-fg);
  font-size: 110%;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-block;
  margin: 0;
  padding: 0;
}
/*
 * Applies to the body tag, and prepares the page for a datagrid that can
 * fit the contents of the page.
 */
body.datagrid-page #page-container #content table:after {
  clear: both;
}
body.datagrid-page #page-container #content .datagrid-body-container {
  overflow-y: auto;
}
body.datagrid-page #page-container #content .datagrid-wrapper {
  height: 100%;
}
body.datagrid-page #page-container #content .main {
  padding: 0;
}
.datagrid-body th {
  text-align: left;
}
.datagrid-header .rb-icon-datagrid-column-shipits-issues {
  margin-left: 4px;
}
.datagrid-main {
  z-index: 1;
}
.datagrid-title-tabs {
  display: inline-block;
  list-style: none;
  /*
   * Position the tabs immediately above the header, so that the active
   * tab can sit directly on top of the border.
   */
  margin: 0 0 0 4em;
  padding: 0;
  position: relative;
  vertical-align: middle;
  z-index: 20;
}
.datagrid-title-tabs .datagrid-showclosed,
.datagrid-title-tabs .datagrid-showarchived {
  padding: 2px 0 0 10px;
}
.datagrid-top-filters {
  display: inline-block;
  top: -1em;
  right: 0;
}
.datagrid-top-filters a {
  color: var(--ink-p-link-fg);
  text-decoration: none;
}
.datagrid-top-filters a:hover {
  text-decoration: underline;
}
.datagrid-top-filters .datagrid-filters {
  list-style: none;
  margin: 0 0 0 0;
  padding: 0;
}
.datagrid-top-filters .datagrid-filters > li {
  display: inline-block;
  margin: 0 0 0 1em;
  padding: 0;
}
.datagrid-top-filters .datagrid-filters-menu {
  display: none;
  border: 1px transparent solid;
  border-bottom: 0;
  position: relative;
  text-align: center;
  padding: 1em;
}
@media screen and (max-width: 720px), screen and (max-device-width: 720px) and (orientation: landscape) {
  .datagrid-top-filters .datagrid-filters-menu {
    display: block;
  }
}
.datagrid-top-filters .datagrid-filters-menu .fa {
  color: #333;
  font-size: 1.5em;
}
@media screen and (max-width: 720px), screen and (max-device-width: 720px) and (orientation: landscape) {
  .datagrid-top-filters:hover .datagrid-filters {
    opacity: 1;
    visibility: visible;
    /* Overlap the border of the action. */
    margin-top: -1px;
  }
  .datagrid-top-filters:hover .datagrid-filters-menu {
    background: #FFFFE0;
    border-color: #939300;
    border-radius: 6px 6px 0 0;
    transition: 0.1s border-color linear, 0.1s background linear;
    z-index: 111;
  }
  .datagrid-top-filters .datagrid-filters {
    background: #FFFFE0;
    border: 1px #939300 solid;
    border-radius: 6px 0 6px 6px;
    opacity: 0;
    position: absolute;
    right: 0;
    transition: 0.1s opacity linear;
    visibility: hidden;
    z-index: 110;
  }
  .datagrid-top-filters .datagrid-filters li {
    white-space: nowrap;
  }
  .datagrid-top-filters .datagrid-filters li a {
    color: black;
    display: block;
    padding: 1em;
  }
  .datagrid-top-filters .datagrid-filters li a:hover {
    text-decoration: none;
  }
}
.datagrid-header-drag.datagrid-header {
  z-index: 20;
}
/****************************************************************************
 * Formal datagrid components
 ****************************************************************************/
/**
 * Page header for a datagrid.
 *
 * This builds upon the ``.rb-c-content-header`` component to offer support
 * for tabs.
 *
 * Tab support currently requires use of the ``.datagrid-title-tabs`` class,
 * which does not meet our current component styles.
 *
 * Modifiers:
 *     -has-tabs:
 *         The header has tabs. This will remove the padding at the bottom
 *         of the header, allowing tabs to be flush.
 *
 * Structure:
 *     <header class="rb-c-datagrid-header rb-c-content-header -is-main">
 *      <h1 class="rb-c-content-header__title">...</h1>
 *      <div class="rb-c-content-header__actions">...</div>
 *     </header>
 *
 *     <header class="rb-c-datagrid-header rb-c-content-header -is-main
 *                    -has-tabs">
 *      <ul class="datagrid-title-tabs">...</ul>
 *      <div class="rb-c-content-header__actions">...</div>
 *     </header>
 */
.rb-c-datagrid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rb-c-datagrid-header.-has-tabs {
  margin-bottom: 0;
  padding-bottom: 0;
}
/****************************************************************************
 * Column-specific styles
 ****************************************************************************/
#page-container .datagrid .age1,
#page-container .datagrid .age2,
#page-container .datagrid .age3,
#page-container .datagrid .age4,
#page-container .datagrid .age5 {
  color: var(--ink-p-fg);
  white-space: nowrap;
}
#page-container .datagrid .age1 {
  background: var(--if-dark, #0a5507) var(--if-light, #beedbc);
}
#page-container .datagrid .age2 {
  background: var(--if-dark, #304001) var(--if-light, #ddfa8e);
}
#page-container .datagrid .age3 {
  background: var(--if-dark, #4c4501) var(--if-light, #fdf18c);
}
#page-container .datagrid .age4 {
  background: var(--if-dark, #4f2700) var(--if-light, #fed3a9);
}
#page-container .datagrid .age5 {
  background: var(--if-dark, #3e0505) var(--if-light, #fbc4c4);
}
#page-container .datagrid td.bugs {
  cursor: text;
}
#page-container .datagrid td.bugs a.bug {
  text-decoration: underline;
  color: var(--ink-p-link-fg);
}
#page-container .datagrid td.bugs .bug {
  white-space: nowrap;
}
#page-container .datagrid .diff-size-column {
  font-size: 90%;
}
#page-container .datagrid .diff-size-column.delete {
  color: var(--rb-p-diff-delete-text-fg);
}
#page-container .datagrid .diff-size-column.insert {
  color: var(--rb-p-diff-insert-text-fg);
}
#page-container .datagrid .month {
  background-color: #E9E9E9;
}
#page-container .datagrid .issue-count-container,
#page-container .datagrid .shipit-count-container {
  border-radius: 10px;
  display: inline-block;
  font-weight: bold;
  overflow: hidden;
  vertical-align: bottom;
  white-space: nowrap;
}
#page-container .datagrid .issue-count,
#page-container .datagrid .issue-verifying-count,
#page-container .datagrid .shipit-count {
  display: inline-block;
  padding: 0.05em 0.8em;
  vertical-align: bottom;
}
#page-container .datagrid .issue-count + .issue-verifying-count {
  padding-left: 0;
}
#page-container .datagrid .issue-count-container {
  border: 1px #b09700 solid;
  color: #205003;
  background-color: #ffdf17;
  background-repeat: no-repeat;
  background-image: linear-gradient(to bottom, #FFF4B0, #FFF4B0 25%, #ffdf17);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFF4B0', endColorstr='#ffdf17', GradientType=0);
}
#page-container .datagrid .issue-count-container .rb-icon-datagrid-open-issues {
  margin: 2px 3px 2px 0;
}
#page-container .datagrid .issue-count-container .rb-icon-datagrid-issue-verifying {
  margin: 0 3px 0 0;
}
#page-container .datagrid .shipit-count-container {
  border: 1px #478a06 solid;
  color: #202003;
  background-color: #6bc511;
  background-repeat: no-repeat;
  background-image: linear-gradient(to bottom, #7feb14, #7feb14 25%, #6bc511);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7feb14', endColorstr='#6bc511', GradientType=0);
}
#page-container .datagrid .shipit-count-container.-is-stale {
  border-color: #777777;
  background-color: #bcbcbc;
  background-repeat: no-repeat;
  background-image: linear-gradient(to bottom, #D0D0D0, #D0D0D0 25%, #bcbcbc);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D0D0D0', endColorstr='#bcbcbc', GradientType=0);
}
#page-container .datagrid .shipit-count-container .rb-icon-datagrid-shipit {
  margin: 1px 4px 1px 0;
}
#page-container .datagrid .repository-column,
#page-container .datagrid .submitter-column {
  white-space: nowrap;
}
#page-container .datagrid .submitter-column {
  padding-top: 0;
  padding-bottom: 0;
}
#page-container .datagrid .summary {
  cursor: pointer;
  position: relative;
  /*
     * The summary text.
     *
     * We're forcing this to be a block, and then setting overflow: hidden,
     * which, along with the float: left in the label above, will cause the
     * text to stay together and wrap as a cohesive block, without part of
     * the text wrapping below the label.
     *
     * Yes, CSS is weird.
     */
}
#page-container .datagrid .summary .no-summary {
  color: var(--ink-p-fg-weak);
  font-style: italic;
}
#page-container .datagrid .summary label {
  border-radius: 4px;
  display: inline;
  float: left;
  margin-right: 0.6em;
  padding: 0 4px;
  line-height: 1.4;
}
#page-container .datagrid .summary label.label-draft {
  background: var(--rb-p-flag-draft-bg);
  border: var(--ink-u-border-thin) var(--rb-p-flag-draft-border-color) solid;
  color: var(--rb-p-flag-draft-fg);
}
#page-container .datagrid .summary label.label-submitted {
  background: #FFFFD0;
  border: 1px #b6b600 solid;
  color: #777700;
}
#page-container .datagrid .summary label.label-discarded {
  background: #DDDDDD;
  border: 1px #9d9d9d solid;
  color: #555555;
}
#page-container .datagrid .summary label.label-archived {
  background: #FAFAFA;
  border: 1px #bababa solid;
  color: #555555;
}
#page-container .datagrid .summary label.label-muted {
  background: #DDDDDD;
  border: 1px #9d9d9d solid;
  color: #555555;
}
#page-container .datagrid .summary span {
  display: block;
  overflow: hidden;
  line-height: 1.5;
}
/****************************************************************************
 * Styles for the User page
 ****************************************************************************/
.datagrid-page #user_page_profile {
  margin-bottom: 1em;
  text-align: center;
}
.datagrid-page #user_page_profile .nickname {
  font-size: 1.4em;
  margin-bottom: 0;
  padding-bottom: 0;
}
.datagrid-page #user_page_profile .email,
.datagrid-page #user_page_profile .group {
  color: var(--ink-p-link-fg);
}
.datagrid-page #user_page_profile .fn,
.datagrid-page #user_page_profile .email {
  font-size: 1.2em;
}
.datagrid-page #user_page_profile .logged-in {
  margin-top: 1.5em;
}
/**
 * A button used to collapse expanded regions of diffs.
 *
 * This is designed to float over an expanded section of a diff. Pressing the
 * button will collapse the expanded lines.
 *
 * It's up to the consumer to handle positioning of the button. This component
 * only handles styling.
 *
 * Version Added:
 *     6.0
 *
 * DOM Attributes:
 *     aria-label (string):
 *         A description of the button.
 *
 *     data-lines-of-context (string, optional):
 *         A chunk line range to collapse to.
 *
 *         This should be ``0`` or ``0,0``.
 *
 *     role (string):
 *         ``button``, always.
 *
 *     tabindex (number):
 *         ``0``, always.
 *
 *     title (string):
 *         A tooltip for the button.
 *
 *     data-chunk-index (number, optional):
 *         The index of the chunk that was expanded.
 *
 *     data-comment-id (number, optional):
 *         An ID of a comment associated with the expanded diff.
 *
 * Structure:
 *     <div class="rb-c-diff-collapse-button"
 *          role="button"
 *          tabindex="0"
 *          aria-label="..."
 *          title="..."
 *          data-lines-of-context="..."
 *          [data-chunk-index="..."]
 *          [data-comment-id="..."]>
 *     <span class="rb-c-diff-collapse-button__icon" ...></span>
 *     <label class="rb-c-diff-collapse-button__label" ...>...</label>
 *    </div>
 */
.rb-c-diff-collapse-button {
  background: var(--if-dark, var(--ink-c-button-primary-bg)) var(--if-light, #DAEBFF);
  border: 1px var(--if-dark, rgba(0, 0, 0, 0.4)) var(--if-light, #597595) solid;
  border-radius: 4px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  color: var(--if-dark, var(--ink-c-button-primary-fg)) var(--if-light, var(--ink-p-fg));
  padding: 0.5em;
  cursor: pointer;
  -webkit-user-select: none;
          user-select: none;
  z-index: 90;
  /**
   * The icon for the collapse button.
   *
   * Structure:
   *     <span class="rb-c-diff-collapse-button__icon" aria-hidden="true">
   *     </span>
   */
  /**
   * The label for the collapse button.
   *
   * Structure:
   *     <label class="rb-c-diff-collapse-button__label" aria-hidden="true">
   *      text...
   *     </label>
   */
}
.rb-c-diff-collapse-button:hover {
  background: var(--if-dark, var(--ink-c-button-primary-hover-bg)) var(--if-light, #e9f3ff);
}
.rb-c-diff-collapse-button__icon {
  background-repeat: no-repeat;
  display: inline-block;
  overflow: hidden;
  text-indent: -99999px;
  vertical-align: middle;
  /* Set up the default image and size. */
  background-image: url("../images/icons.8349873cd17e.png");
  background-size: 155px 150px;
  /*
   * If there are 2 or more ratio levels, loop through and create media
   * selectors for each.
   */
  /*
   * If SVG is enabled, create a media selector for it based on the max
   * ratio.
   */
  background-position: -22px -49px;
  width: 14px;
  height: 14px;
  cursor: inherit;
  vertical-align: top;
}
@media (min-resolution: 1.5dppx) {
  .rb-c-diff-collapse-button__icon {
    background-image: url("../images/icons@2x.a67a7b4758fa.png");
    background-size: 155px 150px;
  }
}
@media (min-resolution: 192dpi) {
  .rb-c-diff-collapse-button__icon {
    background-image: url("../images/icons@2x.a67a7b4758fa.png");
    background-size: 155px 150px;
  }
}
@media (min-resolution: 288dpi) {
  .rb-c-diff-collapse-button__icon {
    background-image: url("../images/icons.de9a40700dc3.svg");
    background-size: 155px 150px;
  }
}
.rb-c-diff-collapse-button__label {
  cursor: inherit;
}
/**
 * Styles and variables for the rb-c-diff-complexity-icon component.
 *
 * Version Added:
 *     7.0
 */
/**
 * An icon indicating the proportions of changes made to a file.
 *
 * This is a donut graph that shows the relative number of inserts, deletes,
 * and replaces made to a file, and how much of the file was modified.
 *
 * The graph is used to approximate how complex it may be to review a change.
 *
 * Version Added:
 *     7.0
 *
 * DOM Attributes:
 *     aria-label (string):
 *         A string describing the data shown in the graph.
 *
 *         This should match the inner ``<svg>``'s ``<title>``, more or less.
 *
 *     role (string):
 *         ``figure``, always.
 *
 * Structure:
 *     <div class="rb-c-diff-complexity-icon"
 *          aria-label="<<string>>"
 *          role="figure">
 *      <svg width="..."
 *           height="..."
 *           viewBox="..."
 *           aria-hidden="true">
 *       [<path class="rb-c-diff-complexity-icon__insert" ...></path>]
 *       [<path class="rb-c-diff-complexity-icon__delete" ...></path>]
 *       [<path class="rb-c-diff-complexity-icon__replace" ...></path>]
 *       <title>...</title>
 *      </svg>
 *     </div>
 */
.rb-c-diff-complexity-icon {
  position: relative;
  /**
   * The path segment representing the deleted lines.
   *
   * DOM Attributes:
   *     d (string):
   *         The path arc data.
   *
   * Structure:
   *     <path class="rb-c-diff-complexity-icon__insert"
   *           d="...">
   *     </path>
   */
  /**
   * The path segment representing the deleted lines.
   *
   * DOM Attributes:
   *     d (string):
   *         The path arc data.
   *
   * Structure:
   *     <path class="rb-c-diff-complexity-icon__delete"
   *           d="...">
   *     </path>
   */
  /**
   * The path segment representing the deleted lines.
   *
   * DOM Attributes:
   *     d (string):
   *         The path arc data.
   *
   * Structure:
   *     <path class="rb-c-diff-complexity-icon__replace"
   *           d="...">
   *     </path>
   */
}
.rb-c-diff-complexity-icon__delete {
  fill: var(--rb-p-diff-delete-graph-color);
}
.rb-c-diff-complexity-icon__insert {
  fill: var(--rb-p-diff-insert-graph-color);
}
.rb-c-diff-complexity-icon__replace {
  fill: var(--rb-p-diff-replace-graph-color);
}
:root {
  --rb-c-discussion-header-title-color: var(--ink-p-fg);
}
/**
 * The header for part of a discussion.
 *
 * This is used at the top of reviews (or other review request entry boxes)
 * and for replies, and can be used in custom UIs as well to represent the
 * author and timestamp for part of a discussion.
 *
 * Normally, the header's layout is a single line, showing avatars (if
 * enabled), the status indicator (if set), the user's name and roles, and
 * then the timestamp along the right-hand side.
 *
 * Alternatively, this can be put into compact mode, which takes less
 * horizontal width and instead positions the timestamp directly below
 * the author's name.
 *
 * Version Added:
 *     8.0
 *
 * Modifiers:
 *     -has-avatar:
 *         If set, an avatar will be shown along the left of the bar.
 *
 *     -is-compact:
 *         If set, this will go into compact mode.
 *
 * CSS Variables:
 *     --rb-c-discussion-header-title-color:
 *         The color used for the title text.
 *
 * Structure:
 *     <div class="rb-c-discussion-header
 *                 [-has-avatar]
 *                 [-is-compact]">
 *      [<div class="rb-c-discussion-header__avatar">...</div>]
 *      [<div class="rb-c-discussion-header__status">...</div>]
 *      <div class="rb-c-discussion-header__title">...</div>
 *      <div class="rb-c-discussion-header__timestamp">...</div>
 *     </div>
 */
.rb-c-discussion-header {
  display: grid;
  gap: var(--ink-u-spacing-s);
  width: 100%;
  /*
   * We'll align centered, and then align the text cells as baseline.
   * This will prevent baseline from being generated based on either the
   * avatar or the status icon, which will throw off alignment.
   */
  align-items: center;
  /* Compact styling is suitable for both mobile and non-mobile use. */
  /**
   * The avatar to display.
   *
   * If present, the ``-has-avatar`` modifier should be set on the
   * component.
   *
   * The caller can place any avatar in here.
   *
   * Structure:
   *     <div class="rb-c-discussion-header__avatar">
   *      ...
   *     </div>
   */
  /**
   * The title area for the header.
   *
   * This may show arbitrary text or it may show a user's information.
   * The content is up to the caller.
   *
   * Structure:
   *     <div class="rb-c-discussion-header__title">
   *      ...
   *     </div>
   */
  /**
   * The status area for the header.
   *
   * If present, this will generally include the "new updates" icon.
   *
   * Structure:
   *     <div class="rb-c-discussion-header__status">
   *      <span class="rb-icon rb-icon-new-updates"
   *            title="..."></span>
   *     </div>
   */
  /**
   * The timestamp area for the header.
   *
   * Structure:
   *     <div class="rb-c-discussion-header__timestamp">
   *      <a class="timestamp"
   *         href="...">
   *       <time class="timesince"
   *             datetime="...">
   *        ...
   *       </time>
   *      </a>
   *     </div>
   */
}
.rb-c-discussion-header.-is-compact {
  align-items: start;
  grid-row-gap: var(--ink-u-spacing-xs);
  /*
     * Styling when a status indicator is shown.
     *
     * This is used as the default, since browsers may not support :has(),
     * and we don't want to risk the status indicator being hidden.
     */
  grid-template: "status       title       title       title" ".            timestamp   edit-icon   ." / min-content max-content min-content max-content;
}
.rb-c-discussion-header.-is-compact.-has-avatar {
  grid-template: "avatar       status      title       title       title" "avatar       .           timestamp   edit-icon   ." / min-content min-content max-content min-content max-content;
}
.rb-c-discussion-header.-is-compact:not(:has(.rb-c-discussion-header__status)) {
  grid-template: "title        title       title" "timestamp    edit-icon   ." / max-content min-content max-content;
}
.rb-c-discussion-header.-is-compact:not(:has(.rb-c-discussion-header__status)).-has-avatar {
  grid-template: "avatar       title       title       title" "avatar       timestamp   edit-icon   ." / min-content max-content min-content max-content;
}
@media only screen and (max-width: 800px) {
  .rb-c-discussion-header {
    align-items: start;
    grid-row-gap: var(--ink-u-spacing-xs);
    /*
     * Styling when a status indicator is shown.
     *
     * This is used as the default, since browsers may not support :has(),
     * and we don't want to risk the status indicator being hidden.
     */
    grid-template: "status       title       title       title" ".            timestamp   edit-icon   ." / min-content max-content min-content max-content;
  }
  .rb-c-discussion-header.-has-avatar {
    grid-template: "avatar       status      title       title       title" "avatar       .           timestamp   edit-icon   ." / min-content min-content max-content min-content max-content;
  }
  .rb-c-discussion-header:not(:has(.rb-c-discussion-header__status)) {
    grid-template: "title        title       title" "timestamp    edit-icon   ." / max-content min-content max-content;
  }
  .rb-c-discussion-header:not(:has(.rb-c-discussion-header__status)).-has-avatar {
    grid-template: "avatar       title       title       title" "avatar       timestamp   edit-icon   ." / min-content max-content min-content max-content;
  }
}
@media only screen and (min-width: 801px) {
  .rb-c-discussion-header {
    /*
     * Styling when a status indicator is shown.
     *
     * This is used as the default, since browsers may not support :has(),
     * and we don't want to risk the status indicator being hidden.
     */
    grid-template: "status       title timestamp" / min-content 1fr auto;
  }
  .rb-c-discussion-header.-has-avatar {
    grid-template: "avatar       status      title timestamp" / min-content min-content 1fr auto;
  }
  .rb-c-discussion-header:not(:has(.rb-c-discussion-header__status)) {
    grid-template: "title timestamp" / 1fr auto;
  }
  .rb-c-discussion-header:not(:has(.rb-c-discussion-header__status)).-has-avatar {
    grid-template: "avatar       title timestamp" / min-content 1fr auto;
  }
}
.rb-c-discussion-header .rb-c-inline-editor-edit-icon {
  grid-area: edit-icon;
}
.rb-c-discussion-header__avatar {
  grid-area: avatar;
}
.rb-c-discussion-header__avatar .avatar-container {
  background: white;
  border-radius: 50%;
  width: 32px;
  height: 32px;
}
.rb-c-discussion-header__title {
  grid-area: title;
  align-self: baseline;
  color: var(--rb-c-discussion-header-title-color);
  font-size: 110%;
  font-weight: bold;
}
.rb-c-discussion-header__title a {
  color: inherit;
  text-decoration: none;
}
.rb-c-discussion-header__status {
  grid-area: status;
  display: flex;
  align-items: center;
  height: 100%;
}
.rb-c-discussion-header__timestamp {
  grid-area: timestamp;
  align-self: baseline;
}
.rb-c-discussion-header__timestamp,
.rb-c-discussion-header__timestamp a {
  color: var(--ink-p-fg-weak);
}
/**
 * Styles for the Drawer UI component.
 */
/**
 * A slide-out drawer for info and actions that overlay a sidebar.
 *
 * Drawers are used to provide optional UI elements that aren't shown by
 * default, but can be activated by some action (a button click or item
 * selections). They're useful for multi-selection DataGrids.
 *
 * These can only be used on pages with a sidebar, as they overlay the
 * sidebar area.
 *
 * The drawer will display when the ``<body>`` tag is given a
 * ``js-rb-c-drawer-is-shown`` CSS class. This is used instead of a modifier
 * on the component due to other page-level changes that need to occur
 * simultaneously.
 *
 * Note that drawer colors (background, border colors, text color) are all
 * set by the page theme.
 *
 * Structure:
 *     <div class="rb-c-drawer">
 *      <div class="rb-c-drawer__content">
 *       ...
 *      </div>
 *     </div>
 */
.rb-c-drawer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  pointer-events: none;
  /**
   * A container of actions that can be performed.
   *
   * This contains one or more action groups, which provide visually-separated
   * lists of actions that can be performed.
   *
   * Structure:
   *     <div class="rb-c-drawer__actions">
   *      <ul class="rb-c-drawer__action-group">
   *       ...
   *      </ul>
   *      ...
   *     </div>
   */
  /**
   * A group of actions in a drawer.
   *
   * Structure:
   *     <ul class="rb-c-drawer__action-group">
   *      <li class="rb-c-drawer__action">...</li>
   *      ...
   *     </ul>
   */
  /**
   * An action that can be performed.
   *
   * The contents are generally expected to be text, with event handlers
   * attached to this element.
   *
   * Structure:
   *     <li class="rb-c-drawer__action">...</li>
   */
  /**
   * The main content area of a drawer.
   *
   * Structure:
   *     <div class="rb-c-drawer__content">
   *      <p class="rb-c-drawer__summary">...</p>
   *      <div class="rb-c-drawer__actions">...</div>
   *     </div>
   */
  /**
   * Summary text shown before any actions.
   *
   * This can be used to show how many items are selected, for example.
   *
   * Structure:
   *     <p class="rb-c-drawer__summary">...</p>
   */
}
@media only screen and (min-width: 801px) {
  .rb-c-drawer {
    top: 0;
    right: 1px;
  }
}
@media only screen and (max-width: 800px) {
  .rb-c-drawer {
    height: 15em;
    transform: translateY(100%);
  }
  .rb-c-drawer .rb-c-drawer__actions {
    display: flex;
  }
  .rb-c-drawer .rb-c-drawer__action-group {
    flex: auto;
    flex-direction: row;
    text-align: center;
    margin: 0;
  }
  .rb-c-drawer .rb-c-drawer__action {
    flex: auto;
    flex-direction: column;
    margin: 0;
    padding: 1em;
  }
  .rb-c-drawer .rb-c-drawer__content {
    padding: 1em;
  }
  .rb-c-drawer .rb-c-drawer__summary {
    margin: 1em 0 2em 0;
  }
}
.rb-c-drawer__actions {
  font-size: 110%;
  margin: 0;
  padding: 0;
}
.rb-c-drawer__action-group {
  margin: 3em 0 0 0;
  padding: 0;
  list-style: none;
  text-align: right;
}
.rb-c-drawer__action {
  cursor: pointer;
  margin: 1em 0;
  padding: 0;
}
.rb-c-drawer__action a {
  color: inherit;
  text-decoration: none;
}
.rb-c-drawer__content {
  box-sizing: border-box;
  padding: 2em;
  position: absolute;
  left: 0;
  right: 0;
  transition: 0.2s linear transform;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media only screen and (min-width: 801px) {
  .rb-c-drawer__content {
    border-width: 1px;
    border-style: solid;
    border-right: 0;
    border-radius: 6px 0 0 6px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
    left: 2em;
    top: 7em;
    bottom: 6em;
    transform: translateX(100%);
  }
}
@media only screen and (max-width: 800px) {
  .rb-c-drawer__content {
    border-top-width: 1px;
    border-top-style: solid;
    height: 100%;
  }
}
.rb-c-drawer__summary {
  margin: 0 0 2em 0;
  padding: 0;
  text-align: center;
}
body.js-rb-c-drawer-is-shown .rb-c-drawer {
  pointer-events: all;
}
@media only screen and (min-width: 801px) {
  body.js-rb-c-drawer-is-shown .rb-c-drawer__content {
    transform: translateX(0);
  }
}
@media only screen and (max-width: 800px) {
  body.js-rb-c-drawer-is-shown .rb-c-drawer {
    transform: translateY(0);
    z-index: 100;
  }
}
/**
 * Styles for the rich text formatting toolbar.
 */
/**
 * The rich text formatting toolbar.
 */
.rb-c-formatting-toolbar {
  background: var(--if-light, rgba(0, 0, 0, 0.04)) var(--if-dark, rgba(0, 0, 0, 0.1));
  bottom: 0px;
  display: flex;
  margin: 0;
  padding: 0;
}
.rb-c-formatting-toolbar a,
.rb-c-formatting-toolbar label {
  color: var(--ink-c-button-fg);
}
.rb-c-formatting-toolbar__btn-group {
  display: flex;
  margin: 0.5em;
}
.rb-c-formatting-toolbar__btn {
  background: none;
  border: 0;
  border-radius: 2px;
  box-sizing: content-box;
  font-size: 120%;
  margin: 0 0.1em;
  width: 14px;
  height: 14px;
  padding: var(--ink-c-button-padding-vert) var(--ink-c-button-padding-horiz);
  text-align: center;
}
.rb-c-formatting-toolbar__btn::before {
  vertical-align: top;
}
.rb-c-formatting-toolbar__btn:hover,
.rb-c-formatting-toolbar__btn:focus {
  background: var(--ink-c-button-hover-bg);
}
.rb-c-formatting-toolbar__btn-bold:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f032";
}
.rb-c-formatting-toolbar__btn-code:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f121";
}
.rb-c-formatting-toolbar__btn-image:hover {
  cursor: pointer;
}
.rb-c-formatting-toolbar__btn-image:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f03e";
}
.rb-c-formatting-toolbar__btn-italic:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f033";
}
.rb-c-formatting-toolbar__btn-link:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f0c1";
}
.rb-c-formatting-toolbar__btn-list-ol:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f0cb";
}
.rb-c-formatting-toolbar__btn-list-ul:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f0ca";
}
.rb-c-formatting-toolbar__btn-strikethrough:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f0cc";
}
/**
 * Styles for forms and form fields.
 */
/**
 * Text areas and CodeMirror editors.
 */
:root,
.CodeMirror,
.banner pre.field,
.rb-c-unified-banner pre.field,
.rb-c-review-request-field pre.field,
.rb-c-review-request-changed-fields__value > pre,
.rb-c-textarea {
  --rb-c-textarea-font-family: var(--ink-ff-monospace);
  --rb-c-textarea-font-size: var(--ink-u-font-m);
  --rb-c-textarea-line-height: calc(var(--rb-c-textarea-font-size) + 0.25rem);
  --rb-c-textarea-spacing: 10px;
  --rb-c-textarea-margin: var(--rb-c-textarea-spacing) 0 0 0;
}
:root,
.rb-c-form-field {
  /** Form fields with errors. */
  --rb-p-input-border-color-error: var(--ink-p-red-700);
  --rb-p-input-label-color-error: var(--ink-p-red-500);
  /** Required flag for fields. */
  --rb-p-required-flag-color: var(--ink-p-red-500);
  --rb-u-required-flag-font-size: var(--ink-u-font-xs);
}
:root,
.rb-c-form-fieldset {
  /** Fieldsets. */
  --rb-c-form-fieldset-collapsed-bg: var(--ink-p-surface-dim-bg);
  --rb-c-form-fieldset-border: var(--ink-g-border-container);
}
input[type=email],
input[type=number],
input[type=password],
input[type=search],
input[type=text],
input[type=url],
select {
  background: var(--ink-p-input-bg);
  border: var(--ink-g-border-input);
  border-radius: var(--ink-u-border-radius-input);
  color: var(--ink-p-input-fg);
  box-sizing: border-box;
  font-size: inherit;
  padding: var(--ink-u-spacing-xs) var(--ink-u-spacing-s);
}
textarea {
  background: var(--ink-p-input-bg);
  border: var(--ink-g-border-input);
  border-radius: var(--ink-u-border-radius-input);
  box-sizing: border-box;
  color: var(--ink-p-input-fg);
  font-size: var(--rb-c-textarea-font-size);
  padding: var(--rb-c-textarea-spacing);
}
.CodeMirror {
  background: var(--rb-theme-rich-text-code-bg);
  border: var(--ink-g-border-input);
  border-radius: var(--ink-u-border-radius-input);
  color: var(--rb-theme-rich-text-code-fg);
  cursor: text;
}
.CodeMirror-cursor {
  border-left-color: var(--ink-p-input-fg);
}
.CodeMirror-gutters {
  background: inherit;
  border-right: var(--ink-g-border-input);
}
.CodeMirror-focused .CodeMirror-selected,
.CodeMirror-selected {
  background: var(--ink-p-input-selection-bg);
}
/**
 * Django form validation error list.
 *
 * These are some default styles for errorlists that provide a default look
 * when in typical forms.
 *
 * Note:
 *     The ``.rb-c-form-field`` component specializes this, changing the
 *     presentation to better fit in with the rest of the enhanced form UI.
 *     It's recommended that consumers make use of that component.
 *
 * Structure:
 *     <ul class="errorlist">
 *      <li>...</li>
 *      ...
 *     </ul>
 */
.errorlist {
  color: var(--rb-p-input-label-error-color);
  display: inline;
  font-weight: bold;
  margin: 0 0 0 15px;
  padding: 4px 8px;
}
.errorlist li {
  display: inline;
}
/**
 * A standard form.
 *
 * This provides consistent styling for forms, providing modifiers to easily
 * make form inputs (and related content, like help text and errors) line up
 * to the right of labels.
 *
 * When placed in a standard ``.rb-c-content-box``, it's recommended that
 * you set ``<body class="-is-content-flush-on-mobile">`` and
 * ``<div class="rb-c-content-box -is-content-flush">``.
 *
 * Modifiers:
 *     -is-aligned:
 *         Aligns inputs, help text, errors, and similar content for all fields
 *         into the column, positioned right of a column of labels.
 *
 * Structure:
 *     <form class="rb-c-form [modifiers]">
 *      <fieldset class="rb-c-form-fieldset">...</fieldset>
 *      ...
 *
 *      <div class="rb-c-form__actions">
 *       ...
 *      </div>
 *     </form>
 */
.rb-c-form {
  margin: 0;
  padding: 0;
  /**
   * An action that can be taken on a form.
   *
   * This is used for things like submit buttons, or for links that in some
   * way interact with the form.
   *
   * Structure:
   *     <input class="rb-c-form__action" type="submit">
   *     <button class="rb-c-form__action">Delete</button>
   *     <a href="#" class="rb-c-form__action">Frobnicate</button>
   */
  /**
   * The action area for a form.
   *
   * This contains up to two action areas: A primary set of actions (required),
   * and a secondary set of actions (optional).
   *
   * This is usually positioned at the bottom of the form.
   *
   * Structure:
   *     <div class="rb-c-form__actions">
   *      <div class="rb-c-form__actions-primary">...</div>
   *      <div class="rb-c-form__actions-secondary">...</div>
   *     </div>
   */
  /**
   * The primary set of actions for a form.
   *
   * This is intended to contain form submission buttons and any other
   * prominent actions that the user may want to invoke.
   *
   * This is displayed on the left of the action area.
   *
   * Structure:
   *     <div class="rb-c-form__actions-primary">
   *      <input class="rb-c-form__action" type="submit">
   *      <button class="rb-c-form__action">...</button>
   *      ...
   *     </div>
   */
  /**
   * A secondary set of actions for a form.
   *
   * This is intended to contain form submission buttons and any other
   * prominent actions that the user may want to invoke.
   *
   * This is displayed on the right of the action area.
   *
   * Structure:
   *     <div class="rb-c-form__actions-secondary">
   *      <button class="rb-c-form__action">...</button>
   *      <a href="rb-c-form__action">...</a>
   *      ...
   *     </div>
   */
}
.rb-c-form.-is-aligned {
  /*
     * The goal is to align the fields alongside the labels without the
     * input/help text area wrapping below the label when that content wraps.
     * We want to keep that area aligned.
     *
     * The very easiest, safest way to do this is to use table-based layout,
     * which will turn on table's alignment and wrapping rules.
     *
     * We only need to set `display: table-cell` for the aligned parts:
     * .rb-c-form-field__label and .rb-c-form-field__input.
     */
}
@media only screen and (min-width: 1024px) {
  .rb-c-form.-is-aligned .rb-c-form-field__label {
    /*
         * We're using min/max-width to force this width to stick when the
         * .rb-c-form-field__input is set to 100%. If we just used `width:`,
         * these would collapse down to a minimum width.
         */
    min-width: 160px;
    max-width: 160px;
  }
  .rb-c-form.-is-aligned .rb-c-form-fieldset.-is-wide .rb-c-form-field__label {
    /*
         * We're using min/max-width to force this width to stick when the
         * .rb-c-form-field__input is set to 100%. If we just used `width:`,
         * these would collapse down to a minimum width.
         */
    min-width: 200px;
    max-width: 200px;
  }
  .rb-c-form.-is-aligned .rb-c-form-field.-has-input-first {
    display: block;
  }
  .rb-c-form.-is-aligned .rb-c-form-field.-has-input-first .rb-c-form-field__input {
    display: inline-block;
  }
  .rb-c-form.-is-aligned .rb-c-form-field.-has-input-first .rb-c-form-field__label {
    display: inline-block;
    min-width: 0;
    max-width: none;
    margin-top: 0;
  }
  .rb-c-form.-is-aligned .rb-c-form-field__label {
    display: table-cell;
    margin-bottom: 0;
    /* Help align the labels with most input content. */
    margin-top: 4px;
  }
  .rb-c-form.-is-aligned .rb-c-form-field__input {
    display: table-cell;
  }
}
.rb-c-form__action {
  box-sizing: border-box;
  font-size: var(--ink-u-font-m);
  text-align: center;
  /*
     * See the comment for &__actions below to see how we're handling the
     * spacing around actions.
     */
}
@media only screen and (min-width: 801px) {
  .rb-c-form__action {
    margin: var(--ink-u-spacing-m) var(--ink-u-spacing-m) 0 0;
  }
}
@media only screen and (max-width: 800px) {
  .rb-c-form__action {
    margin: var(--ink-u-spacing-m) 0 0 0;
    width: 100%;
    /* Force one action per line. */
    float: left;
    clear: left;
  }
}
.rb-c-form__actions {
  display: inline-block;
  display: block;
  /*
     * In order to ensure proper spacing along the sides and between each
     * action (when in one row and when wrapped), we need to divvy up which
     * element is responsible for which part of the padding.
     *
     * On desktop, the bottom and left of this container will contain padding.
     * The top and right of each action will contain a margin with the same
     * padding value. In the end, this creates a consistent padding across all
     * actions and the container.
     *
     * Mobile is similar, but each action on mobile gets a full width and its
     * own row, so we're going to want to let this container own the padding
     * on both sides.
     */
}
.rb-c-form__actions:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.rb-c-form__actions:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
@media only screen and (min-width: 801px) {
  .rb-c-form__actions {
    margin: var(--ink-u-spacing-m) 0 var(--ink-u-spacing-m) var(--ink-u-spacing-m);
  }
}
@media only screen and (max-width: 800px) {
  .rb-c-form__actions {
    margin: var(--ink-u-spacing-m);
  }
}
@media only screen and (min-width: 801px) {
  .rb-c-form__actions-primary {
    float: left;
  }
}
@media only screen and (min-width: 801px) {
  .rb-c-form__actions-secondary {
    float: right;
  }
}
.rb-c-form__actions-primary,
.rb-c-form__actions-secondary {
  /* Remove any extra whitespace gaps between actions. */
  font-size: 0;
}
/**
 * A field on a form.
 *
 * Form fields contain a label, input widget, help text, and errors. Their
 * presentation depends on the display modifiers set on the parent
 * ``.rb-c-form``.
 *
 * Modifiers:
 *     -has-errors:
 *         This field has errors.
 *
 *     -has-input-first:
 *         The field input is before the label. This is intended for field
 *         inputs like checkboxes or radio buttons.
 *
 *     -is-required:
 *         Whether the field is required. This will place a visual marker
 *         after the label.
 *
 *         Inputs should also have their ``required`` attribute set.
 *
 * Structure:
 *     <div class="rb-c-form-field [modifiers]">
 *      <div class="rb-c-form-field__errors">...</div>
 *      <label class="rb-c-form-field__label" for="...">...</label>
 *      <div class="rb-c-form-field__input">...</div>
 *     </div>
 */
.rb-c-form-field {
  margin-top: var(--ink-u-spacing-s);
  /**
   * A label indicating why a field is disabled.
   *
   * Structure:
   *     <div class="rb-c-form-field__disabled-reason">...</div>
   */
  /**
   * Errors shown for the field.
   *
   * This is shown before the row containing the label and input. It's meant
   * to contain a Django ``ul.errorlist``.
   *
   * Structure:
   *     <div class="rb-c-form-field__errors">
   *      <ul class="errorlist">...</ul>
   *     </div>
   */
  /**
   * Help text offering guidance for the field.
   *
   * Structure:
   *     <div class="rb-c-form-field__help">
   *      ...
   *     </div>
   */
  /**
   * The container for an input widget for the field.
   *
   * This may contain a standard field input, like ``<input>`` or
   * ``<textarea>``, or a potentially more complex custom widget.
   * It may also contain help text.
   *
   * Structure:
   *     <div class="rb-c-form-field__input">
   *      <input ...>
   *      <div class="rb-c-form-field__help">...</div>
   *     </div>
   */
  /**
   * The field's label.
   *
   * Structure:
   *     <label class="rb-c-form-field__label" for="...">...</label>
   */
  /**
   * The read-only value for a field.
   *
   * This is used in place of an input when the field is representing a
   * read-only value.
   *
   * Structure:
   *     <div class="rb-c-form-field__readonly-value">...</div>
   */
}
.rb-c-form-field.-has-errors .rb-c-form-field__label {
  color: var(--rb-p-input-label-color-error);
}
.rb-c-form-field.-has-errors .rb-c-form-field__input input,
.rb-c-form-field.-has-errors .rb-c-form-field__input select,
.rb-c-form-field.-has-errors .rb-c-form-field__input textarea {
  border-color: var(--rb-p-input-border-color-error);
}
.rb-c-form-field.-has-input-first .rb-c-form-field__input {
  /*
       * We'll be setting this to not wrap, and then setting the label to
       * wrap, so that if the label is long (which may easily happen on
       * mobile), it won't wrap below the checkbox/radio input. If we didn't
       * do this, the entire label would move below the input.
       */
  white-space: nowrap;
}
.rb-c-form-field.-has-input-first .rb-c-form-field__label {
  display: inline-block;
  font-weight: normal;
  margin-bottom: 0;
  margin-top: 0;
  white-space: normal;
}
.rb-c-form-field.-is-required .rb-c-form-field__label:after,
label.required:after {
  color: var(--rb-p-required-flag-color);
  content: ' *';
  font-size: var(--ink-u-font-xs);
  font-weight: bold;
}
.rb-c-form-field__disabled-reason {
  color: var(--ink-p-fg-weak);
  display: flex;
  font-size: var(--ink-u-font-xs);
  gap: var(--ink-u-spacing-s);
  line-height: var(--ink-u-icon-std);
}
.rb-c-form-field__disabled-reason:before {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-error);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std);
  color: var(--ink-p-red-700);
  flex-grow: 0;
  flex-shrink: 0;
}
.rb-c-form-field__errors {
  border-radius: 4px;
  border: 1px transparent solid;
  margin: 0 0 1em 0;
  padding: 1em;
  /*
   * Alerts always have light-ish colors, so the default link color in dark
   * mode is too low contrast. Fix it up to always us the fg-on-light color.
   */
  /**
   * Content to display within the alert.
   *
   * If showing only a single paragraph of text, this should be a ``<p>`` tag.
   * If showing multiple paragraphs, or other HTML content, use a ``<div>``
   * with the content inside.
   *
   * Structure:
   *     <p class="rb-c-alert__content">...</p>
   *
   *     <div class="rb-c-alert__content">
   *      <h3 class="rb-c-alert__heading">...</h3>
   *      <p>...</p>
   *      ...
   *     </div>
   */
  /**
   * A close button for the alert.
   *
   * DOM Attributes:
   *     aria-label (string):
   *          The accessibility label for the button.
   *
   *     role (string):
   *         This must be set to ``button``.
   *
   *     tabindex (number):
   *         The tab index. This should be set to ``0`` in most cases.
   *
   *     title (string):
   *          The tooltip label for the button.
   *
   * Structure:
   *     <span class="rb-c-alert__close"
   *           aria-label="Close"
   *           role="button"
   *           tabindex="0"
   *           title="Close"></span>
   */
  /**
   * An optional header above content in the alert.
   *
   * This may be used anywhere within an ``.rb-c-alert__content`` to provide
   * a heading above some part of the content. A common usage would be to
   * provide it as the first element to create a prominent heading for the
   * alert.
   *
   * Structure:
   *     <h3 class="rb-c-alert__heading">
   *      text...
   *     </h3>
   */
  background: var(--ink-c-alert-error-bg);
  border-color: var(--ink-c-alert-error-border-color);
  color: var(--ink-c-alert-error-fg);
  --ink-p-link-fg: var(--ink-p-link-fg-on-light);
  --ink-p-link-hover-fg: var(--ink-p-link-hover-fg-on-light);
}
.rb-c-form-field__errors:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  float: left;
  font-size: 18px;
  margin-right: 0.5em;
  text-align: center;
  width: 18px;
}
.rb-c-form-field__errors:last-child {
  margin-bottom: 0;
}
.rb-c-form-field__errors.-is-error {
  background: var(--ink-c-alert-error-bg);
  border-color: var(--ink-c-alert-error-border-color);
  color: var(--ink-c-alert-error-fg);
}
.rb-c-form-field__errors.-is-error:before {
  content: "\f06a";
}
.rb-c-form-field__errors.-is-info {
  background: var(--ink-c-alert-info-bg);
  border-color: var(--ink-c-alert-info-border-color);
  color: var(--ink-c-alert-info-fg);
}
.rb-c-form-field__errors.-is-info:before {
  content: "\f05a";
}
.rb-c-form-field__errors.-is-success {
  background: var(--ink-c-alert-success-bg);
  border-color: var(--ink-c-alert-success-border-color);
  color: var(--ink-c-alert-success-fg);
}
.rb-c-form-field__errors.-is-success:before {
  content: "\f00c";
}
.rb-c-form-field__errors.-is-warning {
  background: var(--ink-c-alert-warning-bg);
  border-color: var(--ink-c-alert-warning-border-color);
  color: var(--ink-c-alert-warning-fg);
}
.rb-c-form-field__errors.-is-warning:before {
  content: "\f071";
}
.rb-c-form-field__errors.-is-error,
.rb-c-form-field__errors.-is-info,
.rb-c-form-field__errors.-is-success,
.rb-c-form-field__errors.-is-warning {
  --ink-p-link-fg: var(--ink-p-link-fg-on-light);
  --ink-p-link-hover-fg: var(--ink-p-link-hover-fg-on-light);
}
.rb-c-form-field__errors__content {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.rb-c-form-field__errors__content > :first-child {
  margin-top: 0;
  padding-top: 0;
}
.rb-c-form-field__errors__content > :last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}
.rb-c-form-field__errors__close {
  cursor: pointer;
  float: right;
  padding: 6px;
  margin: -10px -6px -6px -6px;
}
.rb-c-form-field__errors__close:before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f00d";
}
.rb-c-form-field__errors__heading {
  font-size: 100%;
  font-weight: bold;
  margin: 2em 0 1em 0;
  padding: 0;
}
.rb-c-form-field__errors:before {
  content: "\f06a";
}
.rb-c-form-field__errors .errorlist,
.djblets-c-config-forms-page__content .rb-c-form-field__errors .errorlist {
  color: inherit;
  display: inline;
  font-weight: bold;
  margin: 0;
  padding: 0;
}
.rb-c-form-field__errors .errorlist li,
.djblets-c-config-forms-page__content .rb-c-form-field__errors .errorlist li {
  display: inline;
}
.rb-c-form-field__help {
  color: var(--ink-p-fg-weak);
  display: flex;
  font-size: var(--ink-u-font-xs);
  gap: var(--ink-u-spacing-s);
  line-height: var(--ink-u-icon-std);
  margin: 0;
  padding: var(--ink-u-spacing-m) 0;
  position: relative;
}
.rb-c-form-field__help:before {
  background-color: currentColor;
  background-repeat: no-repeat;
  content: "";
  display: inline-block;
  mask-size: 100% 100%;
  mask-image: var(--ink-i-help);
  width: var(--ink-u-icon-std);
  height: var(--ink-u-icon-std);
  color: var(--ink-p-blue-700);
  flex-grow: 0;
  flex-shrink: 0;
}
.rb-c-form-field__input {
  display: inline-block;
  vertical-align: top;
  /*
     * Make sure this gets as much space as possible, so that any widgets
     * nested within will not be constrained.
     */
  width: 100%;
  /* Radio buttons and multi-select checkboxes. */
}
.rb-c-form-field__input > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rb-c-form-field__input > ul > li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rb-c-form-field__input > ul > li + li {
  margin-top: var(--ink-u-spacing-m);
}
.rb-c-form-field__input input[type=checkbox],
.rb-c-form-field__input input[type=radio] {
  /* Help these inputs align with their labels and help text. */
  margin: 0;
}
.rb-c-form-field__label {
  display: block;
  font-weight: bold;
  margin-bottom: var(--ink-u-spacing-s);
  vertical-align: top;
  word-wrap: break-word;
}
/**
 * A fieldset containing an optional title and one or more rows of fields.
 *
 * Fieldsets can optionally be collapsible, allowing more advanced fields
 * to be hidden by default.
 *
 * DOM Attributes:
 *     data-subform-group (string):
 *         The group that this subform belongs to, if using ``-is-subform``.
 *         All subforms that are part of the same location in the form or
 *         should be considered together for visibility purposes should have
 *         the same group.
 *
 *         This should not be specified if ``data-subform-controller` is set.
 *
 *     data-subform-controller (string):
 *         A selector for a ``<select>`` (or another element that returns
 *         a value) that controls the presence of this subform, if using
 *         ``-is-subform``. The input should have a ``data-subform-group``
 *         attribute set.
 *
 *     data-subform-id (string):
 *         A unique ID for this subform, if using ``-is-subform``. This
 *         must be unique within the group (see ``data-subform-group``).
 *
 *     disabled:
 *         Disable the fieldset, preventing fields from being sent to the
 *         server.
 *
 *         This should be used along with ``hidden`` if using the
 *         ``-is-subform`` modifier and the subform is not intended to be
 *         shown.
 *
 *     hidden:
 *         Hides the fieldset.
 *
 *         This should be used along with ``disabled`` if using the
 *         ``-is-subform`` modifier and the subform is not intended to be
 *         shown.
 *
 * Modifiers:
 *     -is-collapsed:
 *         Collapses the fieldset by default, requiring it to be uncollapsed
 *         manually before fields can be shown and modified.
 *
 *     -is-subform:
 *         Marks this as a subform, which is a set of fields within a form
 *         that may be conditionally hidden or shown based on another
 *         condition or value within the form. Users of this should set
 *         the ``hidden`` and ``disabled`` attributes to hide the subform and
 *         prevent its contents from being sent to the server, and should
 *         provide the appropriate ``data-`` attributes.
 *
 *         Subforms must have a <fieldset> within it.
 *
 * Structure:
 *     <fieldset class="rb-c-form-fieldset [modifiers]">
 *      <legend class="rb-c-form-fieldset__name">...</legend>
 *      <div class="rb-c-form-fieldset__content">...</div>
 *     </fieldset>
 *
 *     <fieldset class="rb-c-form-fieldset -is-subform"
 *               data-subform-controller="..."
 *               data-subform-id="...">"
 *      <legend class="rb-c-form-fieldset__name">...</legend>
 *      <div class="rb-c-form-fieldset__content">...</div>
 *     </fieldset>
 *
 *     <fieldset class="rb-c-form-fieldset -is-subform"
 *               data-subform-group="..."
 *               data-subform-id="...">"
 *      <legend class="rb-c-form-fieldset__name">...</legend>
 *      <div class="rb-c-form-fieldset__content">...</div>
 *     </fieldset>
 */
.rb-c-form-fieldset {
  border: 0;
  border-top: var(--rb-c-form-fieldset-border);
  margin: 0;
  padding: 0 var(--ink-u-spacing-m);
  /**
   * The content area of a fieldset.
   *
   * This contains any descriptive content and the container for the fields.
   *
   * Structure:
   *     <div class="rb-c-form-fieldset__content">
   *      <div class="rb-c-form-fieldset__description">...</div>
   *      <div class="rb-c-form-fieldset__fields">...</div>
   *     </div>
   */
  /**
   * The description of the fields in a fieldset.
   *
   * Structure:
   *     <div class="rb-c-form-fieldset__description">
   *      ...
   *     </div>
   */
  /**
   * The fields that make up the fieldset.
   *
   * Structure:
   *     <div class="rb-c-form-fieldset__fields">
   *      <div class="rb-c-form-row">...</div>
   *      ...
   *     </div>
   */
  /**
   * The name of the form.
   *
   * This is shown at the top of the fieldset.
   *
   * Structure:
   *     <legend class="rb-c-form-fieldset__name">
   *      text...
   *      <a href="#" class="rb-c-form-fieldset__toggle">...</a>
   *     </legend>
   */
  /**
   * The toggle for expanding or collapsing a fieldset.
   *
   * Structure:
   *     <a href="#" class="rb-c-form-fieldset__toggle">...</a>
   */
}
.rb-c-form-fieldset:first-of-type {
  margin-top: 0;
  border-top: 0;
}
.rb-c-form-fieldset:first-of-type > .rb-c-form-fieldset__name {
  padding-top: 0;
}
.rb-c-form-fieldset.-can-collapse .rb-c-form-fieldset__name {
  margin: var(--ink-u-spacing-m) 0;
}
.rb-c-form-fieldset.-is-collapsed {
  background: var(--rb-c-form-fieldset-collapsed-bg);
  border-bottom: var(--rb-c-form-fieldset-border);
  border-top: var(--rb-c-form-fieldset-border);
}
.rb-c-form-fieldset.-is-collapsed + .rb-c-form-fieldset {
  border-top: 0;
  margin-top: 0;
}
.rb-c-form-fieldset.-is-collapsed > .rb-c-form-fieldset__content {
  display: none;
}
.rb-c-form-fieldset.-is-collapsed > .rb-c-form-fieldset__name {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
.rb-c-form-fieldset.-is-subform > .rb-c-form-fieldset__content > .rb-c-form-fieldset__fields {
  /*
       * Subform fieldsets themselves have nested fields, and those have
       * their own margins. We want to collapse down the outer-most fields.
       */
  margin: 0;
}
.rb-c-form-fieldset.-is-subform .rb-c-form-fieldset {
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}
.rb-c-form-fieldset__content {
  clear: both;
  overflow-y: hidden;
}
.rb-c-form-fieldset__description {
  padding: 0;
  margin: var(--ink-u-spacing-m) 0 var(--ink-u-spacing-l) 0;
}
.rb-c-form-fieldset__fields {
  margin: var(--ink-u-spacing-l) 0;
}
.rb-c-form-fieldset__name {
  color: var(--ink-p-header-fg);
  font-size: 110%;
  font-weight: bold;
  text-transform: uppercase;
  /*
     * Browsers render <legend> in such a way where it overlaps the border.
     * The fixes for these are all a bit hacky, but one solution is to
     * float and apply a clearfix.
     */
  float: left;
  display: inline-block;
  margin: var(--ink-u-spacing-m) 0 0 0;
  padding: 0;
  width: 100%;
}
.rb-c-form-fieldset__name:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.rb-c-form-fieldset__name:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.rb-c-form-fieldset__toggle {
  font-size: var(--ink-u-font-xs);
  font-weight: normal;
  margin-left: var(--ink-u-spacing-m);
}
/**
 * A row in a form containing a field.
 *
 * Structure:
 *  <div class="rb-c-form-row">
 *   <div class="rb-c-form-field">...</div>
 *  </div>
 */
.rb-c-form-row,
.djblets-c-config-forms-page__content .rb-c-form-row.fields-row,
.config-forms-page-content .rb-c-form-row.fields-row {
  margin: var(--ink-u-spacing-ml) 0 0 0;
  padding: 0;
}
/* Legacy styles. */
form td {
  padding: 8px 8px 4px 4px;
}
form td.label {
  text-align: right;
  font-weight: bold;
}
form th {
  text-align: right;
  vertical-align: top;
}
td.help {
  font-size: 10px;
  color: #333;
  padding-top: 0;
}
/****************************************************************************
 * Shared rules for all infoboxes
 ****************************************************************************/
:root,
.infobox {
  --rb-c-infobox-bg: var(--ink-p-grey-100);
  --rb-c-infobox-border-color: var(--ink-p-light__grey-600);
  --rb-c-infobox-border: var(--ink-u-border-thin) var(--rb-c-infobox-border-color) solid;
}
.infobox {
  background: var(--rb-c-infobox-bg);
  border: var(--rb-c-infobox-border);
  border-radius: var(--ink-u-border-radius-std);
  box-shadow: var(--ink-g-shadow-std);
  color: var(--ink-p-fg);
  display: block;
  font-size: 12px;
  overflow: hidden;
  position: absolute;
  min-width: 40em;
  max-width: 50em;
  min-height: 10em;
  z-index: 120;
}
.infobox a {
  text-decoration: none;
}
.infobox a:hover {
  text-decoration: underline;
}
.infobox h2,
.infobox .infobox-header-text {
  color: inherit;
  font-size: 1.4em;
  font-weight: bold;
  margin: 0;
  padding: 0;
  vertical-align: top;
}
.infobox h2 a,
.infobox .infobox-header-text a {
  color: inherit;
}
.infobox p {
  margin: 0.5em 0;
  padding: 0;
}
.infobox-content {
  width: 100%;
}
.infobox-details {
  display: flex;
}
.infobox-extra {
  box-sizing: border-box;
  padding: 0.5em;
  width: 100%;
}
.infobox-hover-item .fa,
.infobox-item .fa {
  min-width: 16px;
  text-align: right;
}
.infobox-hover-item {
  position: relative;
}
.infobox-hover-item.infobox-hover-item-anchor-has-small-icon .infobox-hover-item-content {
  padding-left: 26px;
  padding-right: 26px;
}
.infobox-hover-item.infobox-hover-item-opened .infobox-hover-item-content,
.infobox-hover-item.infobox-hover-item-opened .infobox-hover-item-anchor {
  z-index: 121;
}
.infobox-hover-item.infobox-hover-item-opened .infobox-hover-item-content {
  display: block;
}
.infobox-hover-item-content {
  border: var(--rb-c-infobox-border);
  background-color: var(--rb-c-infobox-bg);
  display: none;
  margin: -4px 0 0 -6px;
  padding: 24px 6px 4px 6px;
  position: absolute;
  top: 0;
  left: 0;
}
.infobox-hover-item-anchor {
  cursor: pointer;
  position: relative;
}
.infobox-hover-item-anchor label {
  border-bottom: var(--ink-u-border-thin) var(--rb-c-infobox-border-color) dotted;
}
.infobox-links a {
  color: var(--ink-p-link-fg);
  margin-right: 2em;
}
.infobox-pic img {
  border-radius: 2px 0 0 2px;
}
.infobox-scrollable-section {
  padding-left: 20px;
  position: relative;
}
.infobox-scrollable-section:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2em;
  background: linear-gradient(to bottom, transparent 0%, var(--rb-c-infobox-bg) 100%);
}
.infobox-scrollable-section:hover:after {
  display: none;
}
.infobox-scrollable-section:hover .infobox-scrollable-section-content {
  overflow-y: scroll;
}
.infobox-scrollable-section .infobox-scrollable-section-content {
  max-height: 8em;
  overflow: hidden;
}
.infobox-small-detail {
  font-size: 10px;
}
.infobox-text {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--ink-u-spacing-s) 0;
  padding: 0.75em;
  position: relative;
  vertical-align: top;
  width: 100%;
  word-wrap: break-word;
}
.infobox-text-section {
  margin-top: 1.5em;
}
.infobox-text-section > pre {
  font-size: 12px;
  white-space: pre-wrap;
}
/****************************************************************************
 * User infobox
 ****************************************************************************/
.user-infobox {
  min-height: 128px;
  /*
   * If there's extra content provided by extensions, the avatar image should
   * have a flat bottom. If not, round the bottom-left as well as the top-left.
   */
}
.user-infobox .infobox-pic {
  height: 128px;
  width: 128px;
}
.user-infobox .has-extra-content .infobox-pic img {
  border-radius: 2px 0 0 0;
}
.user-infobox .infobox-extra {
  border-top: var(--rb-c-infobox-border);
}
.user-infobox .infobox-text {
  min-width: 20em;
  max-width: 40em;
  width: auto;
}
.user-infobox .infobox-text .infobox-links {
  align-content: end;
  flex-grow: 1;
  padding-top: var(--ink-u-spacing-l);
}
.user-infobox h2 .username {
  color: #888888;
  font-size: 12px;
  font-weight: normal;
}
/****************************************************************************
 * Bug infobox
 ****************************************************************************/
.bug-infobox .bug-infobox-id {
  float: right;
}
.bug-infobox .bug-infobox-id a {
  color: #888;
  font-size: 90%;
  font-weight: normal;
}
/****************************************************************************
 * Review Request infobox
 ****************************************************************************/
.review-request-infobox .infobox-pic {
  display: inline-block;
  border-radius: 0;
  vertical-align: middle;
}
.review-request-infobox .review-request-infobox-header {
  margin-bottom: 1em;
}
.review-request-infobox .review-request-infobox-id {
  float: right;
}
.review-request-infobox .review-request-infobox-id a {
  color: #888;
  font-size: 90%;
  font-weight: normal;
}
.review-request-infobox .review-request-infobox-label-draft {
  background-color: #D1F5A9;
  border: 1px #49BB18 solid;
  border-radius: 5px;
  color: #005500;
  font-size: 75%;
  font-weight: normal;
  padding: 0.1em 0.35em 0.25em 0.35em;
}
.review-request-infobox .review-request-infobox-label-submitted {
  background-color: #FFFFD0;
  border: 1px #b6b600 solid;
  border-radius: 5px;
  color: #777700;
  font-size: 75%;
  font-weight: normal;
  padding: 0.1em 0.35em 0.25em 0.35em;
}
.review-request-infobox .review-request-infobox-label-discarded {
  background-color: #DDDDDD;
  border: 1px #9d9d9d solid;
  border-radius: 5px;
  color: #555555;
  font-size: 75%;
  font-weight: normal;
  padding: 0.1em 0.35em 0.25em 0.35em;
}
.review-request-infobox .review-request-infobox-review-summary {
  background: var(--ink-p-grey-200);
  border-top: 1px var(--ink-p-grey-300) solid;
  border-radius: 0 0 2px 2px;
  margin-left: -0.75em;
  margin-right: -0.75em;
  margin-bottom: -0.75em;
  padding: 0.75em;
}
.review-request-infobox .review-request-infobox-review-summary.has-ship-its {
  background: var(--if-dark, var(--ink-p-green-100)) var(--if-light, #bcf592);
  border-color: var(--if-dark, transparent) var(--if-light, #8fd051);
  color: var(--ink-p-accent-success-fg-on-container);
}
.review-request-infobox .review-request-infobox-review-summary.has-issues {
  background: var(--if-dark, rgba(255, 255, 255, 0.1)) var(--if-light, var(--rb-p-issue-bg));
  border-color: var(--rb-p-issue-border-color);
  color: var(--if-dark, var(--rb-p-issue-open-accent-text-color)) var(--if-light, var(--ink-p-fg-on-light));
}
.review-request-infobox .review-request-infobox-review-summary a {
  color: var(--ink-p-link-fg);
}
.review-request-infobox .review-request-infobox-review-summary ul {
  list-style: none;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
}
.review-request-infobox .review-request-infobox-review-summary li {
  display: inline-block;
  padding-left: 1.5em;
}
.review-request-infobox .review-request-infobox-review-summary li:first-child {
  padding-left: 0;
}
.review-request-infobox .review-request-infobox-review-summary li .rb-icon {
  vertical-align: text-top;
}
/**
 * The inline editor component.
 *
 * This wraps a piece of displayed content (generally text) that, when clicked,
 * displays an editor for changing that content.
 *
 * They contain a wrapper for the edit field and a list of buttons or other
 * actions that apply to that content.
 *
 * Inline editors can be in one of two modes:
 *
 * 1. **Single-line:** The editor field and save/cancel buttons will displayed
 *    in a single line.
 *
 * 2. **Multi-line:** The editor field will be displayed in one line, and
 *    buttons in a separate line.
 *
 * Buttons can also be shortened to only show icons, for areas where space is
 * at a premium.
 *
 * Inline editors are managed by :js:class:`RB.InlineEditorView` and subclasses.
 *
 * Version Added:
 *     6.0
 *
 * DOM Attributes:
 *     id (string):
 *         The ID of the inline editor.
 *
 *         This must be referenced by the ``.rb-c-inline-editor-edit-icon``.
 *
 * Modifiers:
 *     -is-multi-line:
 *         The inline editor is in multi-line mode.
 *
 *     -is-single-line:
 *         The inline editor is in single-line mode.
 *
 *     -has-short-buttons:
 *         The Save/Cancel buttons will show icons but no text.
 *
 * Structure:
 *     <form class="rb-c-inline-editor [modifiers]"
 *           id="...">
 *      <div class="rb-c-inline-editor__field">...</div>
 *      <div class="rb-c-inline-editor__actions">...</div>
 *     </form>
 *     rendered_field_html...
 *     <a class="rb-c-inline-editor-edit-icon" ...>...</a>
 */
.rb-c-inline-editor {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  gap: 0.5em;
  /**
   * The actions available for the inline editor.
   *
   * This will always have at minimum a Save and a Cancel button, but may
   * also contain other actions.
   *
   * Support for Markdown-related actions are built-in to the component.
   *
   * Structure:
   *     <div class="rb-c-inline-editor__actions">
   *      <button class="rb-c-button" data-action="save">...</button>
   *      <button class="rb-c-button" data-action="cancel">...</button>
   *      ...
   *     </div>
   */
  /**
   * A wrapper for the field used to edit the content.
   *
   * This will usually contain a ``<textarea>``, ``<input>``, or
   * ``.rb-c-text-editor``.
   *
   * Structure:
   *     <div class="rb-c-inline-editor__field">
   *      <textarea>...</textarea>
   *     </div>
   *
   *     <div class="rb-c-inline-editor__field">
   *      <input type="...">
   *     </div>
   *
   *     <div class="rb-c-inline-editor__field">
   *      <div class="rb-c-text-editor">...</div>
   *     </div>
   */
}
.rb-c-inline-editor.-is-multi-line {
  display: flex;
  flex-direction: column;
}
.rb-c-inline-editor.-is-single-line {
  display: inline-flex;
  flex-direction: row;
}
.rb-c-inline-editor.-has-short-buttons .rb-c-button[data-action="cancel"],
.rb-c-inline-editor.-has-short-buttons .rb-c-button[data-action="save"],
.rb-c-inline-editor.-has-short-buttons button:not(.ink-c-button)[data-action="cancel"],
.rb-c-inline-editor.-has-short-buttons button:not(.ink-c-button)[data-action="save"],
.rb-c-inline-editor.-has-short-buttons input[type="button"]:not(.ink-c-button)[data-action="cancel"],
.rb-c-inline-editor.-has-short-buttons input[type="button"]:not(.ink-c-button)[data-action="save"],
.rb-c-inline-editor.-has-short-buttons input[type="submit"]:not(.ink-c-button)[data-action="cancel"],
.rb-c-inline-editor.-has-short-buttons input[type="submit"]:not(.ink-c-button)[data-action="save"] {
  /* Save space by making these icon-only. */
  padding: 3px 6px;
}
.rb-c-inline-editor.-has-short-buttons .rb-c-button[data-action="cancel"] > .rb-c-button__label,
.rb-c-inline-editor.-has-short-buttons .rb-c-button[data-action="save"] > .rb-c-button__label,
.rb-c-inline-editor.-has-short-buttons button:not(.ink-c-button)[data-action="cancel"] > .rb-c-button__label,
.rb-c-inline-editor.-has-short-buttons button:not(.ink-c-button)[data-action="save"] > .rb-c-button__label,
.rb-c-inline-editor.-has-short-buttons input[type="button"]:not(.ink-c-button)[data-action="cancel"] > .rb-c-button__label,
.rb-c-inline-editor.-has-short-buttons input[type="button"]:not(.ink-c-button)[data-action="save"] > .rb-c-button__label,
.rb-c-inline-editor.-has-short-buttons input[type="submit"]:not(.ink-c-button)[data-action="cancel"] > .rb-c-button__label,
.rb-c-inline-editor.-has-short-buttons input[type="submit"]:not(.ink-c-button)[data-action="save"] > .rb-c-button__label {
  display: none;
}
.rb-c-inline-editor__actions {
  display: flex;
  align-items: center;
  gap: 0.5em;
  white-space: normal;
}
.rb-c-inline-editor__actions > .markdown-info {
  margin-left: auto;
}
.rb-c-inline-editor__actions > .rb-c-button,
.rb-c-inline-editor__actions > button:not(.ink-c-button),
.rb-c-inline-editor__actions > input[type="button"]:not(.ink-c-button),
.rb-c-inline-editor__actions > input[type="submit"]:not(.ink-c-button) {
  margin: 0;
}
.rb-c-inline-editor__actions > .rb-c-button[data-action="cancel"] > .rb-c-button__icon::before,
.rb-c-inline-editor__actions > button:not(.ink-c-button)[data-action="cancel"] > .rb-c-button__icon::before,
.rb-c-inline-editor__actions > input[type="button"]:not(.ink-c-button)[data-action="cancel"] > .rb-c-button__icon::before,
.rb-c-inline-editor__actions > input[type="submit"]:not(.ink-c-button)[data-action="cancel"] > .rb-c-button__icon::before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f00d";
}
.rb-c-inline-editor__actions > .rb-c-button[data-action="save"] > .rb-c-button__icon::before,
.rb-c-inline-editor__actions > button:not(.ink-c-button)[data-action="save"] > .rb-c-button__icon::before,
.rb-c-inline-editor__actions > input[type="button"]:not(.ink-c-button)[data-action="save"] > .rb-c-button__icon::before,
.rb-c-inline-editor__actions > input[type="submit"]:not(.ink-c-button)[data-action="save"] > .rb-c-button__icon::before {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\f00c";
}
.rb-c-inline-editor__field {
  display: flex;
  flex-direction: row;
  flex-grow: 1;
}
.rb-c-inline-editor__field > * {
  flex-grow: 1;
  width: 100%;
}
.rb-c-inline-editor__field > input[type='text']:not(:focus) {
  box-shadow: 0px 0px 4px rgba(255, 0, 0, 0.75);
}
/**
 * An edit icon used to open an inline editor.
 *
 * This will exist outside of the inline editor component. It will trigger
 * opening the inline editor when clicked.
 *
 * Version Added:
 *     6.0
 *
 * DOM Attributes:
 *     aria-controls (string):
 *         The ID of the ``.rb-c-inline-editor`` that this controls.
 *
 *     aria-label (string):
 *         A label describing the action performed by this icon.
 *
 *     role (string):
 *         This should be "button".
 *
 *     tabindex (number):
 *         This should be 0.
 *
 *     title (string):
 *         A tooltip describing the action performed by this icon.
 *
 * Structure:
 *     rendered...
 *     <a class="rb-c-inline-editor-edit-icon"
 *        aria-controls="..."
 *        aria-label="..."
 *        href="#"
 *        role="button"
 *        tabindex="0"
 *        title="...">
 *      <div class="rb-icon rb-icon-edit" aria-hidden="true"></div>
 *     </a>
 */
.rb-c-inline-editor-edit-icon {
  display: inline-block;
  margin-left: 4px;
  text-decoration: none;
}
.rb-c-inline-editor-edit-icon:hover {
  text-decoration: none;
}
.rb-c-inline-editor-edit-icon .rb-icon {
  vertical-align: text-bottom;
}
.rb-c-inline-editor-edit-icon .required-flag {
  vertical-align: top;
}
/****************************************************************************
 * Rich text
 ****************************************************************************/
:root,
.rich-text {
  --rb-u-code-block-border-radius: var(--ink-u-border-radius-s-inner);
  --rb-u-code-block-border-size: var(--ink-u-border-thin);
  --rb-g-code-block-border: var(--ink-g-border-input);
  --rb-u-inline-code-border-size: var(--ink-u-border-thin);
  --rb-u-inline-code-border-radius: var(--ink-u-border-radius-s-inner);
}
.rich-text {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 17px;
  /*
   * NOTE: See .cm-rb-markdown-code in pages/reviews.less for details on
   *       how we're approaching displaying borders.
   *
   *       Much of this should eventually be moved back into Djblets.
   */
}
.rich-text * {
  margin: 0;
  padding: 0;
  line-height: inherit;
  text-rendering: inherit;
  white-space: normal;
}
.rich-text * br {
  display: block;
}
.rich-text h1,
.rich-text h2,
.rich-text h3,
.rich-text h4,
.rich-text h5,
.rich-text h6 {
  font-size: 100%;
}
.rich-text p {
  white-space: inherit;
  /* Don't show both the <br> and the blank line. */
}
.rich-text p br {
  display: none;
}
.rich-text ul,
.rich-text ol {
  line-height: 0;
  margin: 0;
  padding: 0;
}
.rich-text ul p,
.rich-text ol p {
  /*
       * <p> tags in a list do not preserve whitespace, since there's
       * mandatory leading whitespace before the content.
       */
}
.rich-text ul p br,
.rich-text ol p br {
  display: block;
}
.rich-text ul ul,
.rich-text ol ul,
.rich-text ul ol,
.rich-text ol ol {
  margin-left: 2ch;
}
.rich-text ol {
  /*
     * We want to keep wrapped text within the confines of the list item. So:
     *
     * 1. This is long text that
     *    wraps like this.
     *
     * Instead of:
     *
     * 1. This is long text that
     * wraps like this.
     *
     * To do this, we need to use display: table and display: table-cell.
     * However, that loses item counter rendering, so we have to do counters
     * ourselves. In combination with StyledOListBlockProcessor in
     * reviewboard/reviews/markdown_extensions.py, this maintains compatibility
     * with the start= attribute.
     */
  counter-reset: li;
  display: table;
  list-style-position: inside;
}
.rich-text ol > li {
  counter-increment: li;
  display: table;
}
.rich-text ol > li::before {
  content: counter(li) ". ";
  padding-right: 1ch;
  display: table-cell;
  text-align: right;
}
.rich-text ul {
  list-style-position: outside;
  list-style: disc;
  margin-left: 2ch;
}
.rich-text li {
  line-height: 17px;
}
.rich-text li ~ li:last-child p:last-child {
  margin-bottom: 0;
}
.rich-text li p {
  margin-bottom: 17px;
  /*
       * If the list item ends up with a sole <p>, just remove the margins.
       * Depending on neighboring elements, Python Markdown will sometimes
       * create list items this way.
       */
}
.rich-text li p:first-child:last-child {
  margin: 0;
}
.rich-text table {
  border-collapse: collapse;
  margin-left: 4px;
}
.rich-text table td,
.rich-text table th {
  padding: 0.2em 1em;
}
.rich-text table td {
  border: 1px solid #bbbbbb;
}
.rich-text table th {
  border-bottom: 1px solid #000000;
  border-left: 1px solid #bbbbbb;
  border-right: 1px solid #bbbbbb;
}
.rich-text table thead tr:last-child th {
  padding-bottom: 0.5em;
}
.rich-text table tbody tr:first-child td {
  padding-top: 0.5em;
}
.rich-text table tbody tr:last-child td {
  border-bottom: none;
}
.rich-text code {
  background: var(--ink-p-code-literal-bg);
  border: 1px var(--ink-p-code-literal-border-color) solid;
  border-radius: 3px;
  color: var(--ink-p-code-literal-fg);
  display: inline-block;
  margin: -1px;
  /*
     * Add just enough spacing to represent the backtick (`) before and after
     * the code block, so we can leave room there. The goal is to align the
     * content the best we can, so there's a more predictable width for the
     * line.
     */
}
.rich-text code:before,
.rich-text code:after {
  content: "`";
  visibility: hidden;
}
.rich-text pre {
  font-size: inherit;
  margin-left: 2.5em;
  white-space: pre-wrap;
}
.rich-text pre * {
  white-space: pre-wrap;
}
.rich-text blockquote {
  border-left: 1px solid #bbb;
  padding-left: 1em;
  margin-left: 0.5em;
}
.rich-text hr {
  border: 1px solid #ddd;
}
.rich-text .codehilite {
  background: var(--ink-p-input-bg);
  color: var(--ink-p-input-fg);
  border: var(--ink-g-input-border);
  border-radius: 3px;
  margin: -4px -11px;
  padding: 3px 10px;
}
.rich-text .codehilite code {
  /*
       * Undo all the rules above. This is necessary with Python-Markdown 3.2+,
       * which places a <code> around the code block. Previous versions did
       * not do this.
       */
  background: none;
  border: none;
  border-radius: 0;
  color: inherit;
  display: inline;
  margin: 0;
}
.rich-text .codehilite code:before,
.rich-text .codehilite code:after {
  content: none;
}
.rich-text .codehilite pre {
  margin-left: 0;
  padding: 0;
}
.rich-text .codehilite.codehilite-multiline-start {
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}
.rich-text .codehilite.codehilite-multiline-middle {
  border-top: 0;
  border-bottom: 0;
  border-radius: 0;
}
.rich-text .codehilite.codehilite-multiline-end {
  border-top: 0;
  border-radius: 0 0 3px 3px;
}
.rich-text .codehilite {
  background: var(--rb-theme-rich-text-code-bg);
  border: 0;
  border-radius: 0;
  color: var(--rb-theme-rich-text-code-fg);
  position: relative;
  margin: 0;
  padding: 0;
}
.rich-text .codehilite:before {
  content: "";
  position: absolute;
  background: inherit;
  border: var(--rb-g-code-block-border);
  border-radius: var(--rb-u-code-block-border-radius);
  top: calc(-1 * var(--rb-u-code-block-border-size));
  left: -10px;
  right: -10px;
  bottom: calc(-1 * var(--rb-u-code-block-border-size));
}
.rich-text .codehilite code {
  /* Undo the default `code` border rules below. */
  padding: 0;
}
.rich-text .codehilite code:after,
.rich-text .codehilite code:before {
  display: none;
}
.rich-text code {
  white-space: pre-wrap;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding-left: 1ch;
  padding-right: 1ch;
  position: relative;
}
.rich-text code:after {
  content: "";
}
.rich-text code:before {
  border: var(--rb-u-inline-code-border-size) var(--ink-p-code-literal-border-color) solid;
  border-radius: var(--rb-u-inline-code-border-radius);
  content: "";
  position: absolute;
  top: calc(-1 * var(--rb-u-inline-code-border-size));
  left: calc(-1 * var(--rb-u-inline-code-border-size));
  right: calc(-1 * var(--rb-u-inline-code-border-size));
  bottom: calc(-1 * var(--rb-u-inline-code-border-size));
  pointer-events: none;
  visibility: visible;
}
.rich-text img {
  max-width: 100%;
  height: auto;
}
.rich-text .emoji {
  width: auto;
  height: 1rem;
  vertical-align: text-top;
}
/**
 * A drop-down menu.
 *
 * This is shown as a result of clicking another piece of UI (such as a
 * ``.rb-c-menu-button``).
 *
 * Drop-down menus may contain lists of items that perform actions or
 * manipulate state. This may be represented as a ``<ul>`` tag, with each
 * item as a ``<li>``. It may also be represented as a ``<div>`` tag, with
 * each item as a ``<a>``, ``<button>``, or ``<div>``.
 *
 * They may also contain lists of buttons, when a ``.rb-c-button-group`` is
 * mixed in. In this case, ``.rb-c-button` should also be mixed in to each
 * ``.rb-c-menu__item``.
 *
 * :js:class:`RB.MenuView` provides a standard implementation of this
 * component.
 *
 * Accessibility Notes:
 *     Implementations of this component should implement keyboard navigation
 *     behavior for accessing items in the menu.
 *
 *     The following keys should be supported:
 *
 *     Enter:
 *         Trigger a click event on the selected item.
 *
 *     Escape, Tab:
 *         Close the menu and return focus to the controlling element that
 *         opened it.
 *
 *     Up:
 *         Move focus up one item. If focus was previously on the first item
 *         in the menu, focus should move to the last item.
 *
 *     Down:
 *         Move focus down one item. If focus was previously on the last item
 *         in the menu, focus should move to the first item.
 *
 *     Home, Page Up:
 *         Move focus to the first item.
 *
 *     End, Page Down:
 *         Move focus to the last item.
 *
 *     The menu and items should not be able to be focused via the Tab key.
 *     Instead, focus should be brought to the first menu item when opened
 *     via keyboard navigation.
 *
 *     Mouse movement over a menu item should also switch focus to that item.
 *     There is no ``:hover`` styling for menu items, so that all highlighting
 *     can standardize on ``:focus``.
 *
 * DOM Attributes:
 *     aria-labelledby (required):
 *         A reference to the element (or an element related to the element)
 *         that opened this menu. It must contain a descriptive label.
 *
 *     role (required):
 *         This must be set to "menu".
 *
 *     tabindex (required):
 *         This must be set to -1, allowing the menu to be focused
 *         programmatically but not through tabbing. Consumers must provide
 *         keyboard/mouse navigation.
 *
 * Structure:
 *     <ul class="rb-c-menu" role="menu" tabindex="-1" aria-labelledby="...">
 *      <li class="rb-c-menu__item" role="menuitem" tabindex="-1">...</li>
 *      ...
 *     </ul>
 *
 *     <div class="rb-c-menu" role="menu" tabindex="-1" aria-labelledby="...">
 *      <div class="rb-c-menu__item" role="menuitem">...</div>
 *      <div class="rb-c-menu__separator" role="separator"></div>
 *      ...
 *     </div>
 *
 *     <div class="rb-c-menu rb-c-button-group -is-vertical" role="menu"
 *          aria-labelledby="...">
 *      <button class="rb-c-menu__item rb-c-button" role="menuitem"
 *              type="button" tabindex="-1">...</div>
 *      ...
 *     </div>
 */
.rb-c-menu {
  background: #FFFFFF;
  border: 1px #C0C0C0 solid;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.05);
  display: none;
  list-style: none;
  opacity: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  transition: opacity 0.2s linear;
  visibility: hidden;
  z-index: 110;
  /**
   * A menu item.
   *
   * This may contain any content needed in the menu item, but will usually
   * consist of text.
   *
   * The element type may be anything, and will depend on the parent
   * ``.rb-c-menu``. It will most commonly be a ``<li>``, ``<a>``, ``<div>``,
   * or ``<button>``.
   *
   * If displaying a button-based menu, this must have ``.rb-c-button`` mixed
   * in.
   *
   * Consumers are responsible for marking a menu item as focused in response
   * to keyboard navigation or mouse movements, in order to convey the active
   * item.
   *
   * DOM Attributes:
   *     role (required):
   *         This must be set to "menuitem".
   *
   *     tabindex (required):
   *         This must be set to -1, allowing the menu to be focused
   *         programmatically but not through tabbing. Consumers should provide
   *         keep
   *
   * Structure:
   *     <li class="rb-c-menu__item" role="menuitem" tabindex="-1">...</li>
   *
   *     <a class="rb-c-menu__item" role="menuitem" tabindex="-1">...</a>
   *
   *     <button class="rb-c-menu__item rb-c-button" role="menuitem"
   *             type="button" tabindex="-1">
   *      ...
   *     </button>
   */
  /**
   * A menu separator.
   */
}
.rb-c-menu.-is-open {
  display: block;
  opacity: 1;
  visibility: visible;
}
.rb-c-menu.js-no-animation {
  transition: none;
}
.rb-c-menu__item {
  cursor: pointer;
  display: block;
  list-display: none;
  margin: 0;
}
.rb-c-menu__item.rb-c-button:focus,
.rb-c-menu__itembutton:not(.ink-c-button):focus,
.rb-c-menu__iteminput[type="button"]:not(.ink-c-button):focus,
.rb-c-menu__iteminput[type="submit"]:not(.ink-c-button):focus {
  background: #DAEBFF;
  outline: 0;
}
.rb-c-menu__item:not(.rb-c-button) {
  /*
       * We want to apply padding to standard list items, but button list
       * items should retain button padding.
       */
  padding: 0.8em 1em;
}
.rb-c-menu__item:not(.rb-c-button):focus,
.rb-c-menu__item:not(.rb-c-button):hover {
  background: #DAEBFF;
  outline: 0;
}
.rb-c-menu__separator {
  border-bottom: 1px #C0C0C0 solid;
}
/**
 * Converts an element into a pop-up menu.
 *
 * Deprecated:
 *     4.0:
 *     Elements should mix in ``.rb-c-menu`` instead.
 */
/**
 * Indicates that an element will display a menu on hover.
 *
 * Deprecated:
 *     4.0:
 *     Consumers should use a more specific component class instead.
 */
.has-menu .menu {
  background: #FFFFFF;
  border: 1px #C0C0C0 solid;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.05);
  display: none;
  list-style: none;
  opacity: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  transition: opacity 0.2s linear;
  visibility: hidden;
  z-index: 110;
  /**
   * A menu item.
   *
   * This may contain any content needed in the menu item, but will usually
   * consist of text.
   *
   * The element type may be anything, and will depend on the parent
   * ``.rb-c-menu``. It will most commonly be a ``<li>``, ``<a>``, ``<div>``,
   * or ``<button>``.
   *
   * If displaying a button-based menu, this must have ``.rb-c-button`` mixed
   * in.
   *
   * Consumers are responsible for marking a menu item as focused in response
   * to keyboard navigation or mouse movements, in order to convey the active
   * item.
   *
   * DOM Attributes:
   *     role (required):
   *         This must be set to "menuitem".
   *
   *     tabindex (required):
   *         This must be set to -1, allowing the menu to be focused
   *         programmatically but not through tabbing. Consumers should provide
   *         keep
   *
   * Structure:
   *     <li class="rb-c-menu__item" role="menuitem" tabindex="-1">...</li>
   *
   *     <a class="rb-c-menu__item" role="menuitem" tabindex="-1">...</a>
   *
   *     <button class="rb-c-menu__item rb-c-button" role="menuitem"
   *             type="button" tabindex="-1">
   *      ...
   *     </button>
   */
  /**
   * A menu separator.
   */
}
.has-menu .menu.-is-open {
  display: block;
  opacity: 1;
  visibility: visible;
}
.has-menu .menu.js-no-animation {
  transition: none;
}
.has-menu .menu__item {
  cursor: pointer;
  display: block;
  list-display: none;
  margin: 0;
}
.has-menu .menu__item.rb-c-button:focus,
.has-menu .menu__itembutton:not(.ink-c-button):focus,
.has-menu .menu__iteminput[type="button"]:not(.ink-c-button):focus,
.has-menu .menu__iteminput[type="submit"]:not(.ink-c-button):focus {
  background: #DAEBFF;
  outline: 0;
}
.has-menu .menu__item:not(.rb-c-button) {
  /*
       * We want to apply padding to standard list items, but button list
       * items should retain button padding.
       */
  padding: 0.8em 1em;
}
.has-menu .menu__item:not(.rb-c-button):focus,
.has-menu .menu__item:not(.rb-c-button):hover {
  background: #DAEBFF;
  outline: 0;
}
.has-menu .menu__separator {
  border-bottom: 1px #C0C0C0 solid;
}
.has-menu:hover > .menu {
  display: block;
  opacity: 1;
  visibility: visible;
}
.rb-c-event-overlay {
  background-color: black;
  height: 100%;
  left: 0;
  opacity: 20%;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 109;
}
/**
 * A banner shown at the top of the page.
 *
 * This is a standard banner that can be used for important notifications.
 * It can optionally be dismissed by users via a Close/Dismiss button.
 *
 * Version Added:
 *     8.0
 *
 * DOM Attributes:
 *     role (string):
 *         This should be one of the following:
 *
 *         * ``alert`` for time-sensitive information.
 *         * ``status`` for important (but not urgent) information.
 *         * ``region`` for all others.
 *
 *     aria-label (string, optional):
 *         A label for the banner. This should be used if ``aria-labelledby``
 *         can't be used.
 *
 *     aria-labelledby (string, optional):
 *         The ID of the header element, if present. This will provide the
 *         label for the banner.
 *
 *     hidden (bool, optional):
 *         Whether the banner is hidden.
 *
 * Structure:
 *     <div class="rb-c-page-banner"
 *          role="region"
 *          [hidden]
 *          [aria-label="..."]
 *          [aria-labelledby="..."]>
 *      <div class="rb-c-page-banner__content">...</div>
 *      [<a class="rb-c-page-banner__close ..." ...>...</a>]
 *     </div>
 */
.rb-c-page-banner {
  background: var(--ink-p-accent-warning-bg);
  border-bottom: 1px var(--ink-p-accent-warning-border-color) solid;
  border-top: 1px var(--ink-p-accent-warning-border-color) solid;
  display: flex;
  padding: var(--ink-u-spacing-sm);
  text-align: left;
  /**
   * The close/dismiss button for the banner.
   *
   * It's up to the implementation to handle interaction with this button.
   * In this case, it should probably have an ID.
   *
   * DOM Attributes:
   *     aria-label (string):
   *         A label describing the button.
   *
   *     href (string):
   *         A URL to invoke when clicking the button. This may be ``#``.
   *
   *     role (string):
   *         This must be ``button``.
   *
   *     tabindex (number):
   *         This must be ``0``.
   *
   *     title (string):
   *         A label to show when hovering over the button.
   *
   * Structure:
   *     <a class="rb-c-page-banner__close ink-i-close"
   *        aria-label="..."
   *        href="..."
   *        role="button"
   *        tabindex="0"
   *        title="..."></a>
   */
  /**
   * The content of the banner.
   *
   * This will generally contain a header, and may contain other content.
   * Styling will largely be the responsibility of the consumer.
   *
   * Structure:
   *     <div class="rb-c-page-banner__content">
   *      [<div class="rb-c-page-banner__header" ...>...</div>]
   *      html...
   *     </div>
   */
  /**
   * The header text for the banner.
   *
   * This is the primary text shown for the banner. Most banners will have
   * this.
   *
   * If present, this should have an ``id`` attribute referenced by the
   * banner's ``aria-labelledby`` attribute.
   *
   * Structure:
   *     <h2 class="rb-c-page-banner__header"
   *         id="...">
   *      html...
   *     </h2>
   */
}
.rb-c-page-banner:hidden {
  display: none;
}
.rb-c-page-banner a:link:not(.ink-c-button) {
  color: var(--ink-p-link-fg-on-light);
  font-weight: bold;
}
.rb-c-page-banner__close {
  color: var(--ink-p-accent-warning-fg);
}
.rb-c-page-banner__close:hover {
  color: black;
}
.rb-c-page-banner__content {
  color: var(--ink-p-accent-warning-fg);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--ink-u-spacing-std);
  margin: 0;
  padding: 0;
}
.rb-c-page-banner__header {
  font-size: var(--ink-u-font-ml);
  font-weight: normal;
  margin: 0;
  padding: 0;
}
@media only screen and (min-width: 801px) {
  .rb-c-page-banner {
    padding-left: 76px;
  }
}
/**
 * Styles and mixins for the rb-c-page-content-box component.
 */
/**
 * A main content box on the page.
 *
 * In desktop mode, this will show a border around the content area, with
 * padding in-between. In mobile mode, this will have no decoration or
 * additional padding, allowing the content to take the maximum amount of
 * space available.
 *
 * Modifiers:
 *     -is-content-flush:
 *         The content is expected to be flush with the boundaries of the box.
 *         This will remove any padding inside the box in desktop mode.
 *
 * Structure:
 *     <div class="rb-c-page-content-box">
 *      ...
 *     </div>
 */
.rb-c-page-content-box.-is-content-flush {
  padding: 0;
}
/**
 * Main sidebar for the page.
 *
 * This component comprises the main part of the UI shell controlling the
 * layout of page sidebars and their inclusion in mobile mode's hamburger
 * menu.
 */
/**
 * The main sidebar and mobile navigation menu shown on a page.
 *
 * This houses one or more sidebar panes, which may be shown on the page
 * in desktop mode (if ``<body>`` has the ``-has-sidebar`` CSS modifier
 * class applied) or when in mobile mode. Only one pane should be shown at
 * a time.
 *
 * When ``<body>`` has the ``-is-content-full-page`` CSS modifier class
 * applied, the main page sidebar will be scrollable. This is managed in
 * :file:`css/pages/base.less`.
 *
 * The page sidebar can transition between a desktop mode (where the sidebar
 * is shown on the left-hand side of the page) and a mobile mode (where it
 * comprises the entirety of the hamburger menu). Some of the elements used in
 * this component are specific to the mobile mode, and are hidden in desktop
 * mode.
 *
 * Modifiers:
 *     -is-connected:
 *         Whether the sidebar items are connected directly to a content box
 *         on the right. This will provide a visual indicator associating the
 *         active sidebar entry with the content.
 *
 * Structure:
 *     <div class="rb-c-page-sidebar">
 *      <header class="rb-c-page-sidebar__mobile-header">...</header>
 *      <div class="rb-c-page-sidebar__panes">...</div>
 *      <footer class="rb-c-page-sidebar__mobile-footer">...</footer>
 *     </div>
 */
.rb-c-page-sidebar {
  box-sizing: border-box;
  position: absolute;
  transition: 0.3s transform ease-out;
  z-index: 20;
  /**
   * Footer shown at the bottom of the mobile menu.
   *
   * Structure:
   *     <footer class="rb-c-page-sidebar__mobile-footer">
   *      <ul>
   *       <li><a href="...">...</a></li>
   *      </ul>
   *     </footer>
   */
  /**
   * Header shown at the top of the mobile menu.
   *
   * Structure:
   *     <header class="rb-c-page-sidebar__mobile-header">
   *      <img class="djblets-o-avatar" ...>
   *      <span class="rb-c-page-sidebar__mobile-username">...</span>
   *      <ul class="rb-c-page-sidebar__mobile-user-actions">
   *       <li>...</li>
   *      </ul>
   *     </header>
   */
  /**
   * The current user's username.
   *
   * Structure:
   *     <span class="rb-c-page-sidebar__mobile-username">...</span>
   */
  /**
   * A collection of panes in the sidebar.
   *
   * This is used primarily for pane placement and lookup purposes, and does
   * not include any styling.
   *
   * Structure:
   *     <div class="rb-c-page-sidebar__panes">
   *      <div class="rb-c-page-sidebar__pane">...</div>
   *      ...
   *     </div>
   */
  /**
   * A layered pane in the sidebar.
   *
   * Panes can scroll if there's too much content to display (and the page is
   * set up to constrain the height of ``.rb-c-page-sidebar``). The outer pane
   * handles the scrolling and basic state, and the
   * ``.rb-c-page-sidebar__pane-content` child element contains any content to
   * show in the pane.
   *
   * Panes can be shown or hidden. Only one pane should be shown at a time. By
   * default, transitioning that state will result in a fade-in/out effect,
   * though specialized panes can provide their own transition effect.
   *
   * Modifiers:
   *     -is-shown:
   *         The pane is currently shown on the screen.
   *
   * Structure:
   *     <div class="rb-c-page-sidebar__pane -is-shown">
   *      <div class="rb-c-page-sidebar__pane-content">
   *       ...
   *      </div>
   *     </div>
   */
  /**
   * Content shown in a sidebar pane.
   *
   * This is generally going to have a ``.rb-c-sidebar`` component inside of
   * it, but can display any form of content appropriate for the page.
   *
   * Structure:
   *     <div class="rb-c-page-sidebar__pane-content">
   *      ...
   *     </div>
   */
}
@media only screen and (max-width: 800px) {
  .rb-c-page-sidebar {
    /* Note: Colors here are going to be set by the theme. */
    box-sizing: border-box;
    border: 0;
    border-right: 1px transparent solid;
    top: 0;
    left: -300px;
    height: 100%;
    width: 300px;
  }
  .rb-c-page-sidebar .rb-c-sidebar__nav-item:hover,
  .rb-c-page-sidebar .rb-c-sidebar__nav-section-header:hover,
  .rb-c-page-sidebar .rb-c-sidebar__nav-item[aria-current="page"],
  .rb-c-page-sidebar .rb-c-sidebar__nav-section-header[aria-current="page"],
  .rb-c-page-sidebar .rb-c-sidebar__nav-item.-is-active,
  .rb-c-page-sidebar .rb-c-sidebar__nav-section-header.-is-active,
  .rb-c-page-sidebar #page_sidebar .page-sidebar-items li.active .page-sidebar-row,
  .rb-c-page-sidebar #page_sidebar .page-sidebar-items li.active.has-url:hover .page-sidebar-row,
  .rb-c-page-sidebar #page_sidebar .page-sidebar-items li.has-url:hover .page-sidebar-row {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .rb-c-page-sidebar .rb-c-sidebar__nav-item:hover,
  .rb-c-page-sidebar .rb-c-sidebar__nav-section-header:hover,
  .rb-c-page-sidebar .rb-c-sidebar__nav-item[aria-current="page"],
  .rb-c-page-sidebar .rb-c-sidebar__nav-section-header[aria-current="page"],
  .rb-c-page-sidebar .rb-c-sidebar__nav-item.-is-active,
  .rb-c-page-sidebar .rb-c-sidebar__nav-section-header.-is-active,
  .rb-c-page-sidebar #page_sidebar .page-sidebar-items li.active .page-sidebar-row,
  .rb-c-page-sidebar #page_sidebar .page-sidebar-items li.active.has-url:hover .page-sidebar-row,
  .rb-c-page-sidebar #page_sidebar .page-sidebar-items li.has-url:hover .page-sidebar-row {
    /* Ensure the sidebar can overlay the border. */
    border-right: var(--ink-u-border-thin) transparent solid;
  }
  .rb-c-page-sidebar .rb-c-page-sidebar__pane {
    padding-right: 0;
  }
}
@media only screen and (min-width: 801px) {
  .rb-c-page-sidebar {
    margin: 0 0 1.5em 1px;
  }
  .rb-c-page-sidebar.-is-connected .rb-c-sidebar__nav-item:hover,
  .rb-c-page-sidebar.-is-connected .rb-c-sidebar__nav-section-header:hover,
  .rb-c-page-sidebar.-is-connected .rb-c-sidebar__nav-item[aria-current="page"],
  .rb-c-page-sidebar.-is-connected .rb-c-sidebar__nav-section-header[aria-current="page"],
  .rb-c-page-sidebar.-is-connected .rb-c-sidebar__nav-item.-is-active,
  .rb-c-page-sidebar.-is-connected .rb-c-sidebar__nav-section-header.-is-active,
  .rb-c-page-sidebar.-is-connected #page_sidebar .page-sidebar-items li.active .page-sidebar-row,
  .rb-c-page-sidebar.-is-connected #page_sidebar .page-sidebar-items li.active.has-url:hover .page-sidebar-row,
  .rb-c-page-sidebar.-is-connected #page_sidebar .page-sidebar-items li.has-url:hover .page-sidebar-row {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .rb-c-page-sidebar.-is-connected .rb-c-sidebar__nav-item:hover,
  .rb-c-page-sidebar.-is-connected .rb-c-sidebar__nav-section-header:hover,
  .rb-c-page-sidebar.-is-connected .rb-c-sidebar__nav-item[aria-current="page"],
  .rb-c-page-sidebar.-is-connected .rb-c-sidebar__nav-section-header[aria-current="page"],
  .rb-c-page-sidebar.-is-connected .rb-c-sidebar__nav-item.-is-active,
  .rb-c-page-sidebar.-is-connected .rb-c-sidebar__nav-section-header.-is-active,
  .rb-c-page-sidebar.-is-connected #page_sidebar .page-sidebar-items li.active .page-sidebar-row,
  .rb-c-page-sidebar.-is-connected #page_sidebar .page-sidebar-items li.active.has-url:hover .page-sidebar-row,
  .rb-c-page-sidebar.-is-connected #page_sidebar .page-sidebar-items li.has-url:hover .page-sidebar-row {
    /* Ensure the sidebar can overlay the border. */
    border-right: var(--ink-u-border-thin) transparent solid;
  }
  .rb-c-page-sidebar.-is-connected .rb-c-page-sidebar__pane {
    padding-right: 0;
  }
}
.rb-c-page-sidebar__mobile-footer {
  font-size: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 0;
}
@media only screen and (max-width: 800px) {
  .rb-c-page-sidebar__mobile-footer {
    display: flex;
    justify-content: space-evenly;
  }
}
@media only screen and (min-width: 801px) {
  .rb-c-page-sidebar__mobile-footer {
    display: none;
  }
}
.rb-c-page-sidebar__mobile-footer li {
  display: inline-block;
  font-size: 12px;
  text-align: center;
}
.rb-c-page-sidebar__mobile-footer li a {
  box-sizing: border-box;
  color: inherit;
  display: block;
  height: 100%;
  padding: 1em;
}
.rb-c-page-sidebar__mobile-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rb-c-page-sidebar__mobile-header {
  font-size: 120%;
  height: 50px;
  overflow: hidden;
  padding: 5px;
  white-space: nowrap;
  vertical-align: middle;
  /**
     * A list of account-related actions the user can perform.
     *
     * This will be shown alongside the avatar and username (or below it if
     * the username is too long).
     *
     * Structure:
     *     <ul class="rb-c-page-sidebar__mobile-user-actions">
     *      <li>...</li>
     *     </ul>
     */
}
@media only screen and (max-width: 800px) {
  .rb-c-page-sidebar__mobile-header {
    display: block;
  }
}
@media only screen and (min-width: 801px) {
  .rb-c-page-sidebar__mobile-header {
    display: none;
  }
}
.rb-c-page-sidebar__mobile-header .djblets-o-avatar {
  display: inline-block;
  vertical-align: middle;
}
.rb-c-page-sidebar__mobile-header .rb-c-page-sidebar__mobile-user-actions {
  float: right;
  font-size: 10px;
  line-height: inherit;
  list-style: none;
  margin: 4px 8px 0 0;
  padding: 0;
  white-space: nowrap;
}
.rb-c-page-sidebar__mobile-header .rb-c-page-sidebar__mobile-user-actions li {
  display: inline-block;
  margin: 0 0 0 2em;
  padding: 4px 0;
  text-align: center;
}
.rb-c-page-sidebar__mobile-header .rb-c-page-sidebar__mobile-user-actions li a {
  color: inherit;
}
.rb-c-page-sidebar__mobile-header .rb-c-page-sidebar__mobile-user-actions li span {
  line-height: inherit;
}
.rb-c-page-sidebar__mobile-header .rb-c-page-sidebar__mobile-user-actions li .fa {
  font-size: 18px;
  vertical-align: middle;
}
.rb-c-page-sidebar__mobile-username {
  vertical-align: middle;
}
.rb-c-page-sidebar__pane {
  box-sizing: border-box;
  opacity: 0;
  transition: 0.2s linear opacity, 0.2s linear visibility;
  visibility: hidden;
}
@media only screen and (max-width: 800px) {
  .rb-c-page-sidebar__pane {
    position: absolute;
    top: 50px;
    bottom: 50px;
    left: 0;
    right: -1px;
  }
}
@media only screen and (min-width: 801px) {
  .rb-c-page-sidebar__pane {
    direction: rtl;
    /* Position the scrollbar on the left. */
    padding: 3em 1em 0 1em;
  }
  .rb-c-page-sidebar__pane .rb-c-page-sidebar__pane-content {
    direction: ltr;
    /* Restore the default direction of the content. */
  }
}
.rb-c-page-sidebar__pane.-is-shown {
  opacity: 1;
  visibility: visible;
}
@media only screen and (max-width: 800px) {
  .rb-c-page-sidebar__pane-content .rb-c-sidebar,
  .rb-c-page-sidebar__pane-content #page_sidebar {
    /*
         * Give the sidebar some breathing room so it's not overlapping the
         * top or bottom set of links in the mobile sidebar.
         */
    padding: 0.5em 0 0.5em 0.5em;
    width: 100%;
    /*
         * We might have a nested deprecated sidebar element. Fix its styling
         * here so that it may properly fit within the page.
         */
  }
  .rb-c-page-sidebar__pane-content .rb-c-sidebar #page_sidebar,
  .rb-c-page-sidebar__pane-content #page_sidebar #page_sidebar {
    position: relative;
    margin: 0;
  }
}
@media only screen and (min-width: 801px) {
  .rb-c-page-sidebar__pane-content .rb-c-sidebar,
  .rb-c-page-sidebar__pane-content #page_sidebar {
    position: relative;
  }
}
body.full-page-content,
body.-is-content-full-page {
  /*
   * Make sure the sidebar is scrollable in order to allow the user to
   * access any parts of it.
   */
}
body.full-page-content .rb-c-page-sidebar__pane,
body.-is-content-full-page .rb-c-page-sidebar__pane {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@media only screen and (max-width: 800px) {
  /* On mobile, the sidebar must always be scrollable. */
  .rb-c-page-sidebar__pane {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}
/* Set a default width for the sidebar. */
@media only screen and (min-width: 801px) {
  /*
         * This may be called as a top-level rule, or as part of a CSS class
         * on ``<body>``. Support both.
         */
  body.-has-sidebar #content,
  body.has-sidebar #content {
    margin-left: 21em;
  }
  .rb-c-page-sidebar {
    width: 21em;
  }
}
/**
 * The top product, search, and navigation bar for Review Board.
 *
 * This is the header bar shown at the top of the page, providing information
 * on the version of Review Board, general site-wide navigation, and menus
 * for accounts and help.
 *
 * Version Added:
 *     7.0
 *
 * DOM Attributes:
 *     role (string):
 *         ``banner``, always.
 *
 * Structure:
 *     <div class="rb-c-topbar" role="banner">
 *      <div class="rb-c-topbar__header">...</div>
 *      <div class="rb-c-topbar__nav-container">...</div>
 *      <div class="rb-c-topbar__banners">...</div>
 *     </div>
 */
.rb-c-topbar {
  background: var(--ink-p-header-bg);
  border-bottom: var(--ink-g-border-header);
  color: var(--ink-p-header-fg);
  margin: 0 0 1.5em 0;
  /**
   * The main actions shown in the top-right of the navigation bar.
   *
   * This is only shown on desktop.
   *
   * See ``.rb-c-actions`` for the content and DOM attributes of this
   * element.
   *
   * Structure:
   *     <nav class="rb-c-topbar__actions rb-c-actions"
   *          aria-label="..."
   *          role="presentation">
   *      ...
   *     </nav>
   */
  /**
   * Banners shown below the navigation area, before page content.
   *
   * This can be used for important notifications or messages. The banners
   * are meant to be attention-grabbing.
   *
   * Version Added:
   *     8.0
   *
   * DOM Attributes:
   *     aria-label (string):
   *         A label describing the banners area.
   *
   *     role (string):
   *         "region", always.
   *
   * Structure:
   *     <div class="rb-c-topbar__banners"
   *          aria-label="..."
   *          role="region">
   *      <div class="rb-c-page-banner" ...>...</div>  [0+]
   *     </div>
   */
  /**
   * The top header portion of the bar.
   *
   * This contains the logo, product information, search bar, and main
   * menus.
   *
   * Structure:
   *     <div class="rb-c-topbar__header">
   *      <div class="rb-c-topbar__product-info">...</div>
   *      <div class="rb-c-topbar__nav-toggle" ...></div>
   *      <div class="rb-c-topbar__search">
   *       ...
   *      </div>
   *      <nav class="rb-c-topbar__actions rb-c-actions" ...>...</nav>
   *     </div>
   */
  /**
   * The container for the main navigation items.
   *
   * This is not shown on mobile.
   *
   * DOM Attributes:
   *     aria-label (string):
   *         A label describing the navigation bar area.
   *
   * Structure:
   *     <nav class="rb-c-topbar__main-nav"
   *          aria-label="...">
   *      <ul class="rb-c-topbar__nav-items">...</ul>
   *     </nav>
   */
  /**
   * The container for the main navigation area.
   *
   * Structure:
   *     <div class="rb-c-topbar__nav-container"
   *      <nav class="rb-c-topbar__main-nav" ...>...</nav>
   *     </div>
   */
  /**
   * A navigation item in the main navigation bar.
   *
   * Structure:
   *     <li class="rb-c-topbar__nav-item">
   *      <a href="...">...</a>
   *     </li>
   */
  /*
   * The list of main navigation items.
   *
   * This is the bar showing such items as "My Dashboard" and
   * "New Review Request".
   *
   * Structure:
   *     <ul class="rb-c-topbar__nav-items">
   *      <li class="rb-c-topbar__nav-item">...</li>  [1+]
   *     </ul>
   */
  /**
   * The toggle control for the navigation sidebar on mobile.
   *
   * This is not shown on desktop views.
   *
   * DOM Attributes:
   *     aria-label (string):
   *         A label describing the navigation toggle.
   *
   *     role (string):
   *         ``button``, always.
   *
   * Structure:
   *     <div class="rb-c-topbar__nav-toggle"
   *          aria-label="..."
   *          role="button">
   *      <span class="fa fa-navicon"></span>
   *     </div>
   */
  /**
   * Information on the Review Board product.
   *
   * Structure:
   *     <div class="rb-c-topbar__product-info">
   *      <a href="..." aria-label="...">
   *       <img class="rb-c-topbar__product-logo" ...>
   *      </a>
   *      <h1 class="rb-c-topbar__product-name">...</h1>
   *     </div>
   */
  /**
   * The product's logo.
   *
   * DOM Attributes:
   *     alt (string):
   *         Alternative text describing the logo.
   *
   *     aria-hidden (boolean):
   *         ``true``, always.
   *
   *     height (number):
   *         The height of the image.
   *
   *     src (string):
   *         The URL to the main image.
   *
   *     srcset (string):
   *         The set of images for all supported DPIs.
   *
   *     width (number):
   *         The width of the image.
   *
   * Structure:
   *     <img class="rb-c-topbar__product-logo"
   *          alt=""
   *          aria-hidden="true"
   *          height="..."
   *          src="..."
   *          srcset="..."
   *          width="...">
   */
  /**
   * The name of the product.
   *
   * Structure:
   *     <h1 class="rb-c-topbar__product-name">
   *      <a href="..."
   *         aria-label="...">
   *       ...
   *      </a>
   *      <span class="rb-c-topbar__product-version">
   *       ...
   *      </span>
   *     </h1>
   */
  /**
   * The suffix of the product.
   *
   * Structure:
   *     <span class="rb-c-topbar__product-suffix">
   *      ...
   *     </span>
   */
  /**
   * The version of the product.
   *
   * Structure:
   *     <span class="rb-c-topbar__product-version">
   *      ...
   *     </span>
   */
  /**
   * The search area.
   *
   * The inner search form is optional, depending on whether full-text
   * searching is enabled. If enabled, the form will be present.
   *
   * DOM Attributes:
   *     role (string):
   *         "search", always.
   *
   * Structure:
   *     <div class="rb-c-topbar__search"
   *          role="search">
   *      <form method="get" action="...">
   *       <div class="rb-c-search-field ..." ...>...</div>
   *      </form>
   *      |
   *      <div class="rb-c-search-field ..." ...>...</div>
   *     </div>
   */
}
.rb-c-topbar__actions {
  grid-area: actions;
}
.rb-c-topbar__banners {
  display: flex;
  flex-direction: column;
}
.rb-c-topbar__banners:empty {
  display: none;
}
.rb-c-topbar__banners .rb-c-page-banner {
  border-bottom: 0;
}
.rb-c-topbar__header {
  display: grid;
  grid-template-areas: "product search actions";
  grid-template-columns: minmax(28em, 1fr) minmax(auto, 30em) min-content;
  align-items: center;
  margin: 0;
  padding: 5px;
  padding-left: 0;
  vertical-align: middle;
  /* Ensure we have a stacking context for action menus. */
  position: relative;
  z-index: 50;
}
.rb-c-topbar__header .rb-c-search-field {
  margin: 0 1em;
}
.rb-c-topbar__nav-container {
  border-color: var(--ink-p-header-border-color);
  font-size: var(--ink-u-font-sm);
  /*
     * Alerts embedded in the navbar area should appear flush with the
     * navigation container.
     */
}
.rb-c-topbar__nav-container .ink-c-alert,
.rb-c-topbar__nav-container .rb-c-alert {
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-radius: 0;
}
.rb-c-topbar__nav-item {
  display: inline;
  margin: 0 1em 0 0;
}
.rb-c-topbar__nav-items {
  list-style: none;
  margin: 0;
  padding: var(--ink-u-spacing-s);
  padding-left: 76px;
}
.rb-c-topbar__nav-toggle {
  grid-area: mobile-nav;
  color: var(--ink-p-header-fg-weak);
  cursor: pointer;
  display: none;
  font-size: 16px;
  padding: 8px;
  position: absolute;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
}
.rb-c-topbar__nav-toggle .fa {
  vertical-align: middle;
}
.rb-c-topbar__product-info {
  grid-area: product;
  position: absolute;
  left: 0;
  padding-top: 0.2em;
  padding-left: 76px;
}
.rb-c-topbar__product-logo {
  display: inline;
  position: absolute;
  top: 3px;
  left: 8px;
  vertical-align: middle;
  z-index: 115;
}
.rb-c-topbar__product-name {
  color: inherit;
  display: inline;
  font-weight: normal;
  font-size: 125%;
  margin: 0;
  padding: 0;
  vertical-align: middle;
}
.rb-c-topbar__product-name a {
  color: inherit;
  font-size: 120%;
  text-decoration: none;
}
.rb-c-topbar__product-suffix {
  color: var(--ink-p-header-fg);
  font-weight: normal;
  font-size: 90%;
}
.rb-c-topbar__product-version {
  color: var(--ink-p-header-fg-weak);
  font-weight: normal;
  font-size: 90%;
}
.rb-c-topbar__search {
  grid-area: search;
}
.rb-c-topbar .ink-c-menu {
  --ink-c-menu-bg: var(--ink-p-header-bg);
  --ink-c-menu-border: 1px var(--ink-p-header-border-color) solid;
}
@media only screen and (max-width: 800px) {
  .rb-c-topbar {
    height: auto;
    position: relative;
    text-align: center;
    transition: 0.3s transform ease-out;
  }
  .rb-c-topbar__header {
    grid-template-areas: "mobile-nav product" "search     search";
    grid-template-columns: min-content auto;
    gap: var(--ink-u-spacing-std) 0;
  }
  .rb-c-topbar__nav-item {
    display: block;
  }
  .rb-c-topbar__nav-items {
    display: none;
    padding-left: 10px;
    margin-top: 10px;
  }
  .rb-c-topbar__nav-toggle {
    display: block;
  }
  .rb-c-topbar__product-info {
    /*
       * Reset positioning and floating so that on mobile, this will take the
       * full width of the page.
       */
    position: relative;
    padding: 0;
  }
  .rb-c-topbar__product-logo {
    position: relative;
    top: 0;
    height: 32px;
    width: 32px;
    z-index: 50;
  }
  .rb-c-topbar__product-name {
    margin-left: 0.5em;
  }
  .rb-c-topbar__product-version {
    display: none;
  }
}
/**
 * Header actions.
 *
 * Structure:
 *     <div class="rb-c-actions" role="presentation">
 *      <menu class="rb-c-actions__content" role="menu">
 *       ...
 *      </menu>
 *     </div>
 */
.rb-c-topbar .rb-c-actions {
  /**
   * A header action.
   *
   * Structure:
   *     <li class="rb-c-actions__action" role="presentation">
   *      <a href="#" role="menuitem">...</a>
   *     </li>
   */
}
.rb-c-topbar .rb-c-actions__action {
  border: var(--ink-g-header-border);
  border-top: 0;
  box-sizing: border-box;
  display: inline-block;
  position: relative;
}
.rb-c-topbar .rb-c-actions__action a {
  color: inherit;
  display: flex;
  align-items: center;
  font-size: 110%;
  margin: 0;
  padding: 0 1em;
  text-decoration: none;
  height: 32px;
  line-height: 32px;
}
.rb-c-topbar .rb-c-actions__action a:hover {
  background: var(--ink-c-menu-item-selected-bg);
  color: var(--ink-c-menu-item-selected-fg);
}
.rb-c-topbar .rb-c-actions__action img {
  vertical-align: middle;
}
.rb-c-topbar .rb-c-actions__content {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  box-sizing: border-box;
  list-style: none;
  margin: -5px 0;
  padding: 0;
  z-index: 1;
}
.rb-c-topbar .rb-c-actions .ink-c-menu {
  right: 0;
}
.rb-c-topbar .rb-c-actions .rb-c-menu__item {
  background: transparent;
  margin: 0;
  padding: 0;
}
.rb-c-topbar .rb-c-actions .rb-c-menu__item > a {
  gap: var(--ink-u-spacing-m);
}
.rb-c-topbar .rb-c-actions .rb-c-menu__item:focus,
.rb-c-topbar .rb-c-actions .rb-c-menu__item:hover {
  background: var(--ink-c-menu-item-selected-bg);
  color: var(--ink-c-menu-item-selected-fg);
}
.rb-c-topbar .rb-c-actions .rb-c-menu__item:last-child {
  border-radius: 0 0 6px 6px;
}
@media only screen and (max-width: 800px) {
  .rb-c-topbar .rb-c-actions {
    display: none;
  }
}
/**
 * An update notification bubble shown at the bottom of the page.
 *
 * This is used for conveying updates to a review request or something else worth
 * showing to the user.
 *
 * Update bubbles are meant to be accessible, communicated as a status alert. This
 * helps assistive technologies inform users when it appears.
 *
 * Version Added:
 *     7.0
 *
 * Modifiers:
 *     -is-open:
 *         Display the bubble.
 *
 *         This will cause it to fade and slide in.
 *
 * DOM Attributes:
 *     role (string):
 *         Should be set to ``status``, unless the notification is more urgent.
 *
 * Structure:
 *     <div class="rb-c-page-updates-bubble
 *                 [-is-open]">
 *      <div class="rb-c-page-updates-bubble__message">...</div>
 *      <div class="rb-c-page-updates-bubble__actions">...</div>
 *     </div>
 */
.rb-c-page-updates-bubble {
  background: var(--ink-p-light__yellow-300);
  color: var(--ink-p-fg-on-light);
  border: 1px rgba(0, 0, 0, 0.4) solid;
  bottom: var(--ink-u-spacing-sm);
  border-radius: var(--ink-u-border-radius-xxl);
  box-shadow: var(--ink-g-shadow-std);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: var(--ink-u-spacing-m) var(--ink-u-spacing-l);
  font-size: 110%;
  width: max-content;
  max-width: calc(100% - 1.5em);
  opacity: 0;
  padding: var(--ink-u-spacing-m) var(--ink-u-spacing-ml);
  position: fixed;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  transition: bottom 0.2s ease-in, opacity 0.2s ease-in;
  z-index: 130;
  /**
   * An action the user can perform on the update.
   *
   * This may contain text, or a mixed-in icon class. Implementations must set any
   * accessibility attributes as appropriate.
   *
   * DOM Attributes:
   *     role (string):
   *         Should be set to ``button``, unless another role is more appropriate.
   *
   *     aria-label (string, optional):
   *         A label to communicate to screen readers, if not set as a child.
   *
   *     title (string, optional):
   *         A label to show on hover, if not set as a child.
   *
   * Structure:
   *     <a class="rb-c-page-updates-bubble__action"
   *        role="button"
   *        [aria-label="<<string>>"]
   *        [title="<<string>>"]>
   *      [...]
   *     </a>
   */
  /**
   * A list of actions the user can perform on the update.
   *
   * Structure:
   *     <div class="rb-c-page-updates-bubble__actions">
   *      <a class="rb-c-page-updates-bubble__action ..." ...>...</a>  [1+]
   *     </div>
   */
  /**
   * The message shown on the bubble.
   *
   * Structure:
   *     <div class="rb-c-page-updates-bubble__message">
   *      ...
   *     </div>
   */
}
.rb-c-page-updates-bubble.-is-open {
  opacity: 1;
  bottom: var(--ink-u-spacing-m);
}
.rb-c-page-updates-bubble__action {
  display: flex;
}
.rb-c-page-updates-bubble__action,
.rb-c-page-updates-bubble__action:link,
.rb-c-page-updates-bubble__action:visited {
  color: inherit;
}
.rb-c-page-updates-bubble__action:focus {
  outline: solid;
}
.rb-c-page-updates-bubble__actions {
  display: flex;
  gap: var(--ink-u-spacing-m);
}
.rb-c-page-updates-bubble__message a:link,
.rb-c-page-updates-bubble__message a:visited {
  color: var(--ink-p-link-fg-on-light);
}
/** A standardized search field with an icon. */
/**
 * A field for searching or filtering content.
 *
 * Structure:
 *     <div class="rb-c-search-field">
 *      <span class="fa fa-search"></span>
 *      <input class="rb-c-search-field__input" type="search">
 *     </div>
 */
.rb-c-search-field {
  display: flex;
  position: relative;
  /**
   * The text input field.
   *
   * Structure:
   *     <input class="rb-c-search-field__input">
   */
}
.rb-c-search-field .fa {
  color: inherit;
  font-size: var(--ink-u-font-s);
  position: absolute;
  margin: var(--ink-u-spacing-s);
}
.rb-c-search-field__input {
  /* Avoid input[type=...] taking precedence. */
}
.rb-c-search-field__input,
.rb-c-search-field__input[type=search],
.rb-c-search-field__input[type=text],
.djblets-c-config-forms-page__content .rb-c-search-field__input[type=search],
.djblets-c-config-forms-page__content .rb-c-search-field__input[type=text] {
  border: var(--ink-g-border-input);
  border-radius: var(--ink-u-border-radius-input);
  box-sizing: border-box;
  padding-left: calc(var(--ink-u-font-s) + var(--ink-u-spacing-sm));
  width: 100%;
}
/**
 * Defines a sidebar on the page.
 *
 * Sidebars allow for navigation between pages or within a page. They're
 * composed of items organized by sections. Each item can display a label,
 * along with an optional icon and value.
 *
 * Pages displaying a sidebar should set the ``-has-sidebar`` class on
 * ``<body>``.
 *
 * Accessibility Notes:
 *     Consumers of this component should generally use either ``<nav>`` or
 *     ``<section>``, in order to define a suitable landmark for the sidebar
 *     content.
 *
 *     Using ``<nav>`` will communicate to screen readers that there are
 *     navigation items available in the sidebar. Using ``<section>`` instead
 *     will communicate a general landmark.
 *
 *     Sidebars should always use an ``aria-label`` to distinguish between
 *     them.
 *
 * DOM Attributes:
 *     aria-label (string):
 *         A label describing this sidebar. This may simply be "Sidebar", but
 *         if the page makes use of multiple sidebars (such as a slide-out
 *         sidebar), there should be distinct labels.
 *
 * Modifiers:
 *     -has-icons:
 *         Items may have icons. This provides sufficient spacing for icons
 *         on the left of all items in the sidebar.
 *
 * Structure:
 *     <nav class="rb-c-sidebar" aria-label="...">
 *      <ul class="rb-c-sidebar__items">
 *       <li class="rb-c-sidebar__section">
 *        ...
 *       </li>
 *       ...
 *      </ul>
 *     </nav>
 *
 *     <section class="rb-c-sidebar" aria-label="...">...</section>
 */
.rb-c-sidebar,
#page_sidebar {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.rb-c-sidebar a,
.rb-c-sidebar a:link,
.rb-c-sidebar a:visited,
#page_sidebar a,
#page_sidebar a:link,
#page_sidebar a:visited {
  color: inherit;
  display: block;
  text-decoration: none;
}
/**
 * A list of items/sections in a sidebar's top level or in a section.
 *
 * These should contain a list of ``<li class="rb-c-sidebar__item">`` or
 * ``<li class="rb-c-sidebar__section">`` elements.
 *
 * Two of these can be placed adjacent to each other to create a visual
 * separation within a section.
 *
 * Structure:
 *     <ul class="rb-c-sidebar__items">
 *      {
 *       <li class="rb-c-sidebar__item">...</li>
 *       <li class="rb-c-sidebar__section">...</li>
 *      } [0+]
 *     </ul>
 */
.rb-c-sidebar__items,
#page_sidebar .page-sidebar-items,
#page_sidebar .page-sidebar-items li ul {
  list-style: none;
  margin: 0;
  /*
   * Prevent the shadow from going off the right-hand side (so the overlap
   * onto the content is correct), but ensure it doesn't disappear below the
   * last item in the section.
   */
  padding: 0 0 6px 0;
  overflow-x: hidden;
}
.rb-c-sidebar__items + .rb-c-sidebar__items {
  /* New subsection */
  margin-bottom: 1em;
}
/**
 * An item in a sidebar.
 *
 * These must contain a ``.rb-c-sidebar__item-label`` child, and may also
 * contain an icon (``.rb-c-sidebar__icon``) and/or value
 * (``.rb-c-sidebar__item-value``).
 *
 * For navigating to a page, the more specific ``.rb-c-sidebar__nav-item``
 * may be used.
 *
 * Structure:
 *     <li class="rb-c-sidebar__item">
 *      <div class="rb-c-sidebar__icon rb-icon rb-icon-edit"></div>
 *      <span class="rb-c-sidebar__item-label">Label</a>
 *      <span class="rb-c-sidebar__item-value">42</span>
 *     </li>
 */
.rb-c-sidebar__item,
.rb-c-sidebar__nav-item,
.rb-c-sidebar__section-header,
#page_sidebar .page-sidebar-items li,
.rb-c-sidebar__nav-section-header,
#page_sidebar .page-sidebar-items li.has-url,
#page_sidebar .page-sidebar-items li.section > .page-sidebar-row .label {
  display: block;
  line-height: 20px;
  list-style: none;
  margin: 0;
  position: relative;
  text-align: left;
  word-break: break-all;
  /* Match the border on the active row, to prevent content jumps. */
  border: 1px transparent solid;
}
/**
 * A navigation item in a sidebar.
 *
 * These must contain a ``.rb-c-sidebar__item-label`` child, and may also
 * contain an icon (``.rb-c-sidebar__icon``) and/or value
 * (``.rb-c-sidebar__item-value``).
 *
 * Labels should use an ``<a href="...">`` tag.
 *
 * Modifiers:
 *     -is-active:
 *         This item represents the current page view.
 *
 * Structure:
 *     <li class="rb-c-sidebar__nav-item">
 *      <div class="rb-icon rb-icon-edit"></div>
 *      <a class="rb-c-sidebar__item-label" href="/page/">Label</a>
 *      <span class="rb-c-sidebar__item-value">42</span>
 *     </li>
 */
/**
 * An icon for an item in the sidebar.
 *
 * This can be an ``<img>``, ``.rb-icon``, or any other class. The size
 * should be 20x20 pixels or smaller.
 *
 * If used, the parent ``.rb-c-sidebar`` or ``.rb-c-sidebar__section`` must
 * use the ``.-has-icons`` modifier.
 *
 * Structure:
 *     <span class="rb-c-sidebar__icon rb-icon rb-icon-edit"></span>
 */
.rb-c-sidebar__icon,
#page_sidebar .page-sidebar-items li .rb-icon {
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  left: 10px;
  pointer-events: none;
  /* This trick will properly center-align our icon. */
  top: 50%;
  transform: translateY(-50%);
}
a.rb-c-sidebar__icon,
a#page_sidebar .page-sidebar-items li .rb-icon {
  pointer-events: all;
}
/**
 * A label for an item in the sidebar.
 *
 * If this is a navigation item, this should be a ``<a href="...">``.
 *
 * Structure:
 *     <a class="rb-c-sidebar__item-label" href="/page/">Label</a>
 */
.rb-c-sidebar__item-label,
#page_sidebar .page-sidebar-items li a {
  display: block;
  padding: 5px 10px;
}
/**
 * The value shown in a sidebar item.
 *
 * This can be used to show a short value, such as a number of a boolean,
 * indicating the item's state.
 *
 * If the value is an empty/disabled sort of value (like 0 or false), then
 * this can use the ``.-is-dimmed`` class to dim the appearance.
 *
 * Modifiers:
 *     -is-dimmed:
 *         Dims the display of the value.
 *
 * Structure:
 *     <span class="rb-c-sidebar__item-value">42</span>
 *
 *     <span class="rb-c-sidebar__item-value -is-dimmed">0</span>
 */
.rb-c-sidebar__item-value,
.rb-c-sidebar__nav-section-header:after,
#page_sidebar .page-sidebar-items li .count {
  color: var(--ink-p-blue-800);
  position: absolute;
  right: 20px;
  font-size: 95%;
  padding: 0px 0 0px 8px;
  margin-top: 0px;
  /* Make sure we can click through the value. */
  pointer-events: none;
  /* Vertically-align the value. */
  top: 50%;
  transform: translateY(-50%);
}
.rb-c-sidebar__item-value.-is-dimmed,
#page_sidebar .page-sidebar-items li .count.count-zero {
  color: #C0C0C0;
}
/**
 * A section in a sidebar.
 *
 * Sections must have a section header (``.rb-c-sidebar__section-header``)
 * and should have a list of items (``.rb-c-sidebar__items``).
 *
 * Modifiers:
 *     -has-icons:
 *         Items may have icons. This provides sufficient spacing for icons
 *         on the left of all items in the section.
 *
 *     -is-desktop-only:
 *         The section will only be displayed if the page shell is in desktop
 *         mode.
 *
 *     -is-mobile-only:
 *         The section will only be displayed if the page shell is in mobile
 *         mode.
 *
 * Structure:
 *     <li class="rb-c-sidebar__section">
 *      <header class="rb-c-sidebar__section-header">Header</header>
 *      <ul class="rb-c-sidebar__items">
 *       ...
 *      </ul>
 *     </li>
 */
.rb-c-sidebar__section,
#page_sidebar .page-sidebar-items li.section {
  list-style: none;
  margin: 0 0 1em 0;
  /* Styling for subsections. */
}
@media only screen and (max-width: 800px) {
  .rb-c-sidebar__section.-is-mobile-only {
    display: list-item;
  }
}
@media only screen and (min-width: 801px) {
  .rb-c-sidebar__section.-is-mobile-only {
    display: none;
  }
}
@media only screen and (max-width: 800px) {
  .rb-c-sidebar__section.-is-desktop-only {
    display: none;
  }
}
@media only screen and (min-width: 801px) {
  .rb-c-sidebar__section.-is-desktop-only {
    display: list-item;
  }
}
.rb-c-sidebar__section .rb-c-sidebar__section .rb-c-sidebar__items {
  padding-left: 20px;
}
.rb-c-sidebar__section .rb-c-sidebar__section .rb-c-sidebar__section-header {
  font-size: 100%;
  text-transform: none;
}
/**
 * The header for a section.
 *
 * Modifiers:
 *     -is-active:
 *         This section header represents the current page view. This is
 *         used for section headers that double as navigation elements.
 *
 * Structure:
 *     <header class="rb-c-sidebar__section-header">Header</header>
 */
.rb-c-sidebar__section-header,
.rb-c-sidebar__nav-section-header,
#page_sidebar .page-sidebar-items li.section > .page-sidebar-row .label {
  color: var(--ink-p-header-fg);
  font-size: 110%;
  font-weight: bold;
  text-transform: uppercase;
  padding-left: 10px;
}
/**
 * A section header that works as a navigation item.
 *
 * This allows a header to have the same visuals that a nav item would have,
 * and to shoe as active when it matches the current page.
 *
 * Structure:
 *     <header class="rb-c-sidebar__nav-section-header">
 *      <a href="/page/">Label</a>
 *     </header>
 */
.rb-c-sidebar__nav-section-header {
  display: block;
  padding: 5px 10px 5px 10px;
}
.rb-c-sidebar__nav-section-header:after {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: inherit;
  content: "\f0da";
}
/* Modifier options common to the sidebar and sections. */
.rb-c-sidebar.-has-icons .rb-c-sidebar__item-label,
.rb-c-sidebar__section.-has-icons .rb-c-sidebar__item-label,
#page_sidebar.-has-icons .rb-c-sidebar__item-label {
  padding-left: 30px;
}
/* Navigation visuals for nav items and section headers. */
.rb-c-sidebar__nav-item,
.rb-c-sidebar__nav-section-header,
#page_sidebar .page-sidebar-items li.has-url {
  cursor: pointer;
}
.rb-c-sidebar__nav-item:hover,
.rb-c-sidebar__nav-section-header:hover,
.rb-c-sidebar__nav-item[aria-current="page"],
.rb-c-sidebar__nav-section-header[aria-current="page"],
.rb-c-sidebar__nav-item.-is-active,
.rb-c-sidebar__nav-section-header.-is-active,
#page_sidebar .page-sidebar-items li.active .page-sidebar-row,
#page_sidebar .page-sidebar-items li.active.has-url:hover .page-sidebar-row,
#page_sidebar .page-sidebar-items li.has-url:hover .page-sidebar-row {
  background: var(--ink-c-data-table-body-bg);
  border: var(--ink-c-data-table-border);
  border-radius: 15px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
  color: var(--ink-p-fg);
}
.rb-c-sidebar__nav-item[aria-current="page"],
.rb-c-sidebar__nav-section-header[aria-current="page"],
.rb-c-sidebar__nav-item.-is-active,
.rb-c-sidebar__nav-section-header.-is-active,
#page_sidebar .page-sidebar-items li.active .page-sidebar-row,
#page_sidebar .page-sidebar-items li.active.has-url:hover .page-sidebar-row {
  z-index: 20;
}
/****************************************************************************
 * Deprecated styles
 ****************************************************************************/
#page_sidebar {
  /*
   * We're using the same basic positioning and styling that we used in 3.0
   * for the legacy page_sidebar, to ensure presentation is correct for any
   * extensions that are setting up their own sidebars. They'll likely base
   * other layout requirements on these values. We don't want to use the
   * modern ones we're defining for a page sidebar, for this reason.
   */
  direction: rtl;
  /* Position the scrollbar on the left. */
  position: absolute;
  top: 0;
  bottom: 1px;
  margin: 3em -1px 0 1px;
  padding: 1em 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#page_sidebar .page-sidebar-items li {
  border: 0;
}
#page_sidebar .page-sidebar-items li.has-url {
  border: 0;
}
#page_sidebar .page-sidebar-items li.new-subsection {
  margin-top: 10px;
}
#page_sidebar .page-sidebar-items li.section > .page-sidebar-row .label {
  margin: 0;
}
#page_sidebar .page-sidebar-items li .label {
  border: 0;
}
#page_sidebar .page-sidebar-items li .page-sidebar-row {
  border: 1px transparent solid;
  position: relative;
}
#page_sidebar .page-sidebar-items li .page-sidebar-row.overview-section-row {
  line-height: normal;
  vertical-align: middle;
}
#page_sidebar .page-sidebar-items li .page-sidebar-row.overview-section-row a {
  padding-left: 10px;
}
#page_sidebar .page-sidebar-items li .page-sidebar-row.overview-section-row .label {
  padding-left: 0;
}
#page_sidebar .page-sidebar-items li .overview-count {
  font-size: 135%;
  padding-right: 0;
}
/**
 * A slideshow for navigating and cycling between content.
 *
 * Slideshows can automatically cycle between content periodically, up to
 * a maximum number of time. Users can choose to navigate to specific pages,
 * which will turn off the automatic navigation.
 *
 * An animation will play when transitioning slides. This defaults to a
 * sliding animation. If the user's system/browser preferences is set to
 * prefer reduced motion, it will instead be a simple fade.
 *
 * This is meant to be used with the :js:class:`RBWS.UI.SlideshowView` view,
 * for event handling and automatic cycling.
 *
 * DOM Attributes:
 *     aria-label (string):
 *         Set to a label describing this slideshow.
 *
 *     aria-roledescription (string):
 *         Set to ``carousel``.
 *
 * Modifiers:
 *     -is-auto-cycled:
 *         If set, the slideshow will automatically cycle between content.
 *
 * Structure:
 *     <div class="rb-c-slideshow"
 *          aria-label="..."
 *          aria-roledescription="carousel">
 *      <nav class="rb-c-slideshow__nav">
 *       ...
 *      </nav>
 *      <ul class="rb-c-slideshow__slides ..." ...>
 *       ...
 *      </ul>
 *     </div>
 */
.rb-c-slideshow {
  overflow-x: hidden;
  /**
   * The navigation links for the slideshow.
   *
   * Structure:
   *     <nav class="rb-c-slideshow__nav">
   *      <a class="rb-c-slideshow__nav-item" ...>...</a>
   *      ...
   *     </nav>
   *
   *     Alternatively, the slideshow can use next and previous buttons:
   *
   *     <nav class="rb-c-slideshow__nav">
   *      <a class="rb-c-slideshow__nav-prev" ...>...</a>
   *      <a class="rb-c-slideshow__nav-next" ...>...</a>
   *     </nav>
   */
  /**
   * Next and previous buttons for the slideshow.
   *
   * DOM Attributes:
   *     aria-label (string):
   *          The accessibility label for the button.
   *
   *     role (string):
   *         This must be set to ``button``.
   *
   *     title (string):
   *          The tooltip label for the button.
   *
   * Structure:
   *     <a class="rb-c-slideshow__nav-prev"
   *        aria-label="Previous"
   *        href="#"
   *        role="button"
   *        title="Previous">
   *      <span class="fa fa-caret-left"></span>
   *     </a>
   */
  /**
   * A navigation link pointing to a particular slide.
   *
   * DOM Attributes:
   *     aria-controls (string):
   *         The ID of the ``rb-c-slideshow__slides`` element.
   *
   *     aria-selected (boolean):
   *         ``true`` for the current slide's navigation item and ``false``
   *         for all others.
   *
   *     href (string):
   *         The anchor name pointing to ID of the corresponding
   *         ``rb-c-slideshow__slide`` element.
   *
   *     id (string):
   *         A unique ID that can be referenced by the
   *         ``rb-c-slideshow__slide`` element.
   *
   * Structure:
   *     <a id="nav_id..."
   *        class="rb-c-slideshow__nav-item"
   *        href="#slide-id..."
   *        aria-controls="slides_id..."
   *        aria-selected="true|false">
   *      title...
   *     </a>
   */
  /**
   * A slide.
   *
   * The content within the slide will be scrollable along the X axis, if it
   * doesn't fit. Only one slide is ever shown at a time.
   *
   * DOM Attributes:
   *     aria-hidden (boolean):
   *         ``false`` for the current slide, and ``true`` for all others.
   *
   *     aria-labelledby (string):
   *         The ID of the corresponding ``rb-c-slideshow__nav-item``
   *         element.
   *
   *     aria-roledescription (string):
   *         Set to ``slide``.
   *
   *     id (string):
   *         A unique ID that can referenced by the
   *         ``rb-c-slideshow__nav-item`` element.
   *
   *     role (string):
   *         Set to ``group``.
   *
   *     data-last-animation (string, optional):
   *         The name of the last animation that would play on a slide, if
   *         the slide contains animations. Cycling will only occur after
   *         the named animation has ended.
   *
   * Structure:
   *     <li id="slide_id..."
   *         class="rb-c-slideshow__slide"
   *         role="group"
   *         aria-hidden="true|false"
   *         aria-roledescription="slide"
   *         aria-labelledby="nav_id...">
   *      <div class="rb-c-slideshow__slide-content">
   *       ...
   *      </div>
   *     </li>
   */
  /**
   * The displayed content within a slide.
   *
   * Structure:
   *     <div class="rb-c-slideshow__slide-content">
   *      ...
   *     </div>
   */
  /**
   * The collection of slides.
   *
   * DOM Attributes:
   *     aria-live (string):
   *         Set to ``off``. This will then be managed automatically by
   *         the JavaScript side.
   *
   *     id (string):
   *         A unique ID that can be referenced by
   *         ``rb-c-slideshow__nav-item``'s ``aria-controls=`` attribute.
   *
   * Structure:
   *     <ul id="..."
   *         class="rb-c-slideshow__slides ..."
   *         aria-live="off">
   *      <li class="rb-c-slideshow__slide ...">...</li>
   *      ...
   *     </ul>
   */
}
.rb-c-slideshow__nav {
  font-size: 120%;
  margin: 1em 0 0.5em 0;
  text-align: center;
}
.rb-c-slideshow__nav-next,
.rb-c-slideshow__nav-prev {
  display: block;
  padding: 0.5em 0.25em;
  margin: -0.5em 0;
}
.rb-c-slideshow__nav-item {
  color: #124BBD;
  display: inline-block;
  border-bottom: 2px transparent solid;
  font-weight: normal;
  margin: 1em;
  text-align: center;
  padding-bottom: 3px;
}
.rb-c-slideshow__nav-item[aria-selected="true"] {
  border-bottom-color: #124BBD;
}
@media only screen and (max-width: 800px) {
  .rb-c-slideshow__nav-item {
    margin: 0.5em;
  }
}
.rb-c-slideshow__slide {
  display: inline-block;
  flex: 0 0 100%;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  position: relative;
  width: 100%;
  height: 100%;
  transition: 0.4s ease-in-out opacity;
}
.rb-c-slideshow__slide[aria-hidden="true"] {
  opacity: 0;
}
.rb-c-slideshow__slide[aria-hidden="false"] {
  opacity: 1;
}
.rb-c-slideshow__slide-content {
  display: inline-block;
  margin: 0 auto;
  position: relative;
}
.rb-c-slideshow__slides {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  transition: 0.4s ease-in-out all;
  will-change: transform;
}
@media (prefers-reduced-motion) {
  .rb-c-slideshow__slides {
    transition: none;
  }
}
/**
 * A CSS component for tabbed navigation.
 */
/**
 * A list of tabs.
 *
 * Each tab within supports an ``-is-active`` modifier class indicating if
 * the tab is currently active.
 *
 * Tab labels may also have responsive content by providing a ``<label>``
 * with multiple ``<span>`` tags within using ``-is-full-label`` and
 * ``-is-short-label`` modifier classes.
 *
 * Structure:
 *     <ul class="rb-c-tabs">
 *      <li class="rb-c-tabs__tab -is-active">
 *       <label class="rb-c-tabs__tab-label">...</label>
 *      </li>
 *      <li class="rb-c-tabs__tab">
 *       <label class="rb-c-tabs__tab-label">
 *        <span class="rb-c-tabs__tab-label-full">...</span>
 *        <span class="rb-c-tabs__tab-label-short">...</span>
 *       </label>
 *      </li>
 *      ...
 *     </ul>
 */
.rb-c-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  /**
   * A tab containing a label.
   *
   * Modifiers:
   *     -is-active:
   *         The tab is the currently active tab. This should only be set on
   *         one tab at a time.
   */
  /**
   * The label for a tab.
   *
   * This can contain text, icons, or other content.
   *
   * A shorter, mobile-friendly label can be set by providing two sets of label
   * content inside ``<span>`` tags, like so::
   *
   *     <span class="rb-c-tabs__tab-label-full">...</span>
   *     <span class="rb-c-tabs__tab-label-short">...</span>
   *
   * If providing only a full label, this is not needed.
   */
  /**
   * Short label content for small screens.
   */
  /**
   * Full label content for larger screens.
   */
}
@media screen and (max-width: 720px), screen and (max-device-width: 720px) and (orientation: landscape) {
  .rb-c-tabs {
    /*
     * Keep the tabs at one row and make it scrollable horizontally. On mobile
     * devices, there won't be a scrollbar getting in the way.
     *
     * Since the overflow will normally cut off part of the tab, we also need
     * just a bit of padding above the tabs.
     */
    overflow-x: auto;
    padding-top: 1px;
    white-space: nowrap;
  }
}
.rb-c-tabs__tab {
  border-bottom: var(--ink-u-border-medium) transparent solid;
  border-radius: var(--ink-u-border-radius-std) var(--ink-u-border-radius-std) 0 0;
  cursor: pointer;
  display: inline-block;
  margin: 0 0.5em 0 0;
  padding: 5px 10px 5px 10px;
  white-space: nowrap;
  vertical-align: bottom;
}
@media screen and (max-width: 720px), screen and (max-device-width: 720px) and (orientation: landscape) {
  .rb-c-tabs__tab {
    margin-right: 0;
  }
}
.rb-c-tabs__tab:hover {
  background: var(--if-dark, var(--ink-p-container-hover-bg)) var(--if-light, none);
  border-bottom-color: var(--ink-p-accent-secondary-bg);
}
.rb-c-tabs__tab.-is-active {
  background: var(--if-dark, var(--ink-p-container-active-bg)) var(--if-light, none);
  border-bottom-color: var(--ink-p-accent-primary-bg);
}
.rb-c-tabs__tab * {
  cursor: pointer;
  vertical-align: middle;
}
.rb-c-tabs__tab-label {
  display: inline;
  font-weight: normal;
  line-height: 16px;
  vertical-align: middle;
}
.rb-c-tabs__tab-label,
.rb-c-tabs__tab-label:link,
.rb-c-tabs__tab-label:visited {
  color: var(--ink-p-fg);
}
.rb-c-tabs__tab-label:hover {
  text-decoration: none;
}
.rb-c-tabs__tab-label-short {
  display: none;
}
@media screen and (max-width: 720px), screen and (max-device-width: 720px) and (orientation: landscape) {
  .rb-c-tabs__tab-label-short {
    display: inline;
  }
}
@media screen and (max-width: 720px), screen and (max-device-width: 720px) and (orientation: landscape) {
  .rb-c-tabs__tab-label-full {
    display: none;
  }
}
/**
 * A text editor for plain and Markdown text input.
 *
 * Text editors (backed by :js:class:`RB.TextEditorView`) can contain a plain
 * ``<textarea>`` for plain text input or a CodeMirror widget and formatting
 * toolbar for rich text input.
 *
 * The ``.rb-c-text-editor__textarea`` and ``.rb-c-formatting-toolbar`` should
 * be managed and added/removed as necessary when changing edit modes.
 *
 * Structure:
 *     <div class="rb-c-text-editor">
 *      <textarea class="rb-c-text-editor__textarea -is-plain">...</textarea>
 *     </div>
 *
 *     <div class="rb-c-text-editor">
 *      <div class="rb-c-text-editor__textarea -is-rich CodeMirror">...</div>
 *      <div class="rb-c-formatting-toolbar" ...>...</div>
 *     </div>
 */
.rb-c-text-editor {
  background: var(--ink-p-input-bg);
  border: var(--ink-g-border-input);
  color: var(--ink-p-input-fg);
  display: flex;
  flex-direction: column;
  margin: var(--rb-c-textarea-margin);
  position: relative;
  /**
   * The text area in the editor.
   *
   * The type of text area is designated by the ``.-is-plain`` or ``.-is-rich``
   * modifiers.
   *
   * Modifiers:
   *     -is-plain:
   *         This is a plain text area, using a ``<textarea>`` widget.
   *
   *     -is-rich:
   *         This is a rich text area, using CodeMirror.
   *
   *         When set, there should be a ``.rb-c-formatting-toolbar``
   *         component added below this.
   *
   * Structure:
   *     <textarea class="rb-c-text-editor__textarea -is-plain">...</textarea>
   *
   *     <div class="rb-c-text-editor__textarea -is-rich CodeMirror">...</div>
   */
}
.rb-c-text-editor__textarea {
  flex-grow: 1;
  /* Make sure we override any default rules for .CodeMirror here. */
}
textarea.rb-c-text-editor__textarea,
.rb-c-text-editor__textarea.CodeMirror {
  background: transparent;
  color: inherit;
  border: 0;
  border-radius: 0;
  margin: 0;
}
.rb-c-text-editor__textarea.-is-plain {
  box-sizing: border-box;
  margin: 0;
  outline: none;
  padding: var(--rb-c-textarea-spacing);
  /*
       * This prevents extra spacing below a text area in different browsers.
       * See http://stackoverflow.com/questions/7144843/extra-space-under-textarea-differs-along-browsers
       */
  vertical-align: top;
}
.rb-c-text-editor__textarea.-is-plain::selection {
  background: var(--ink-p-input-selection-bg);
}
.rb-c-text-editor__textarea.-is-rich .CodeMirror-scroll {
  margin-bottom: calc(-1 * var(--ink-u-spacing-l)) !important;
}
/**
 * Styles for a trophy list component.
 *
 * Version Added:
 *     7.0
 */
/**
 * A list of trophies earned on a review request.
 *
 * All trophies are shown centered, with the trophy image on either side,
 * slanted away from the text.
 *
 * Multiple trophies can be shown at once.
 *
 * Version Added:
 *     7.0
 *
 * Structure:
 *     <div class="rb-c-trophies">
 *      <div class="rb-c-trophies__trophy">...</div>  [1+]
 *     </div>
 */
.rb-c-trophies {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ink-u-spacing-l);
  padding: 0 var(--ink-u-spacing-m);
  margin: var(--ink-u-spacing-xl) 0;
  /**
   * A trophy shown to the user.
   *
   * Structure:
   *     <div class="rb-c-trophies__trophy">
   *      <img class="rb-c-trophies__trophy-image" ...>
   *      <h2 class="rb-c-trophies__trophy-text" ...>...</h2>
   *      <img class="rb-c-trophies__trophy-image" ...>
   *     </div>
   */
  /**
   * The trophy image.
   *
   * DOM Attributes:
   *     alt (string):
   *         Text describing the trophy.
   *
   *     height (number):
   *         The width of the image.
   *
   *     src (string):
   *         The main URL to the image.
   *
   *     srcset (string):
   *         URLs to the images for different DPIs.
   *
   *     width (number):
   *         The width of the image.
   *
   * Structure:
   *     <img class="rb-c-trophies__trophy-image"
   *          alt="..."
   *          src="..."
   *          srcset="..."
   *          width="..."
   *          height="..."/>
   */
  /**
   * The text accompanying the trophy image.
   *
   * This should tell the user that they got a trophy, in some form.
   *
   * Structure:
   *     <h2 class="rb-c-trophies__trophy-text">
   *      text...
   *     </h2>
   */
}
.rb-c-trophies__trophy {
  display: flex;
  align-items: center;
  gap: var(--ink-u-spacing-l);
}
.rb-c-trophies__trophy-image:first-of-type {
  transform: rotateZ(-10deg);
}
.rb-c-trophies__trophy-image:last-of-type {
  transform: rotateZ(10deg);
}
.rb-c-trophies__trophy-text {
  color: var(--if-dark, gold) var(--if-light, #6a5001);
  font-size: var(--ink-u-font-ml);
  margin: 0;
  padding: 0;
  text-align: center;
}
/**
 * A standard display for a reference to a user.
 *
 * This will show a user's display name, optionally show any avatar and
 * badges for the user, and display a tooltip when hovering over the
 * avatar/display name.
 *
 * Version Added:
 *     8.0
 *
 * Structure:
 *     <span class="rb-c-user">
 *      <a class="user"
 *         href="@{url}">
 *       [<span class="rb-c-user__avatar">...</span>]
 *       @{display_name}
 *      </a>
 *      [<span class="rb-c-user-badges">...</span>]
 *     </span>
 */
.rb-c-user {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ink-u-spacing-m);
  /**
   * Container for a displayed avatar.
   *
   * This can take any standard avatar display as a child.
   *
   * Structure:
   *     <span class="rb-c-user__avatar">
   *      (
   *       <img class="avatar djblets-o-avatar" .../>
   *       |
   *       <span class="avatar djblets-o-avatar" ...>...</span>
   *      )
   *     </span>
   */
}
.rb-c-user > a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--ink-u-spacing-s);
}
/**
 * A badge shown alongside a user.
 *
 * User badges provide additional detail about a user. These are provided by
 * extensions.
 *
 * Badges should have a standard style, but can be specialized to include
 * custom colors.
 *
 * Version Added:
 *     8.0

 * DOM Attributes:
 *     role (string):
 *         Set to "listitem".
 *
 * Structure:
 *     <span class="rb-c-user-badge [...]"
 *           role="listitem">
 *      text...
 *     </span>
 */
.rb-c-user-badge {
  background: var(--ink-p-cool-grey-300);
  border-radius: var(--ink-u-border-radius-l);
  color: var(--ink-p-fg);
  font-size: var(--ink-u-font-s);
  font-weight: normal;
  padding: var(--ink-u-spacing-xs) var(--ink-u-spacing-sm);
}
/**
 * A group of badges to show alongside a user.
 *
 * Version Added:
 *     8.0
 *
 * DOM Attributes:
 *     aria-label (string):
 *         Set to "Badges", or something more specific.
 *
 *     role (string):
 *         Set to "list".
 *
 * Structure:
 *     <span class="rb-c-user-badges"
 *           role="list"
 *           aria-label="Badges">
 *      <span class="rb-c-user-badge ...">...</span> [1+]
 *     </span>
 */
.rb-c-user-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--ink-u-spacing-s);
}
.loading img {
  margin-right: 4px;
  vertical-align: text-bottom;
}
.box .star {
  cursor: pointer;
}
/****************************************************************************
 * Modal Boxes
 ****************************************************************************/
.modalbox {
  margin: 10px;
}
.modalbox .modalbox-contents {
  margin: 10px;
  position: relative;
  /* Makes this the offsetParent for calculations. */
}
.modalbox .modalbox-buttons {
  position: absolute;
  margin: 10px;
  text-align: right;
  bottom: 0;
  right: 0;
}
.modalbox .modalbox-buttons input,
.modalbox .modalbox-buttons .split-btn {
  margin-left: 10px;
}
/****************************************************************************
 * Forms
 ****************************************************************************/
.formdlg tr {
  padding-top: 4px;
}
.formdlg td.label {
  white-space: nowrap;
}
.formdlg .error {
  color: #DD0000;
  font-weight: bold;
  margin-bottom: 10px;
  padding: 4px 8px;
}
.formdlg .errorlist {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
}
.formdlg .errorlist li {
  display: list-item;
  padding: 2px 4px;
}
.formdlg .spinner {
  float: left;
}
.formdlg .spinner img {
  vertical-align: top;
}
.formdlg .spinner h1 {
  display: inline;
  margin-left: 10px;
}
/****************************************************************************
 * Account page
 ****************************************************************************/
.section {
  margin-bottom: 20px;
}
.section .title {
  background: #DDDDDD;
  border: 1px black solid;
  padding: 4px 8px;
}
.section .body {
  margin-left: 20px;
  padding: 10px;
}
#manual-updates {
  padding-top: 1em;
}
#manual-updates .box-main {
  padding: 1em;
}
#manual-updates .box-main h1,
#manual-updates .box-main h2 {
  margin-top: 2em;
}
/****************************************************************************
 * Login/Register pages
 ****************************************************************************/
#auth_container {
  font-size: 120%;
  margin: 7em 0 0 0;
}
#auth_container input[type="text"],
#auth_container input[type="password"],
#auth_container input[type="number"],
#auth_container input[type="email"] {
  padding: 0.5em;
  width: 16em;
}
@media screen and (max-width: 720px), screen and (max-device-width: 720px) and (orientation: landscape) {
  #auth_container input[type="text"],
  #auth_container input[type="password"],
  #auth_container input[type="number"],
  #auth_container input[type="email"] {
    width: 100%;
  }
}
#auth_container .auth-button-container {
  display: flex;
  justify-content: center;
  margin: var(--ink-u-spacing-m) 0;
  width: 100%;
  gap: var(--ink-u-spacing-m);
}
#auth_container .auth-button-container .ink-c-button {
  font-size: 120%;
}
#auth_container .auth-button-container a {
  font-size: inherit;
}
#auth_container .auth-form-row {
  clear: both;
}
#auth_container .auth-form-row.auth-field-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: var(--ink-u-spacing-s);
}
#auth_container .auth-form-row.auth-field-row:not(.checkbox-row) label {
  font-weight: normal;
  margin: 0;
  padding: 0;
  text-align: right;
}
#auth_container .auth-form-row.auth-field-row:not(.checkbox-row) .errorlist {
  display: block;
  color: var(--ink-p-accent-error-fg-on-container);
  margin: 0;
  padding: 0;
  grid-row: 2;
  grid-column: 2;
}
#auth_container .auth-form-row.auth-field-row:not(.checkbox-row) .errorlist li {
  font-weight: normal;
  font-size: inherit;
}
#auth_container .auth-form-row.auth-field-row.checkbox-row {
  grid-template-columns: min-content auto;
  align-items: center;
  justify-content: center;
}
#auth_container .auth-form-row.auth-field-row.checkbox-row input {
  margin: 0;
}
#auth_container .auth-form-row.auth-field-row.checkbox-row label {
  text-align: left;
}
#auth_container .auth-header {
  margin: 0 auto 1em auto;
  max-width: 60em;
  text-align: center;
}
#auth_container .auth-header h1 {
  font-size: 120%;
  margin: 1em 0;
  padding: 0;
}
#auth_container .auth-header p {
  color: var(--ink-p-fg-weak);
  margin: 1em 0;
}
#auth_container .auth-header .errorbox {
  display: inline-block;
  text-align: center;
}
#auth_container .auth-header .errorbox .errorlist {
  text-align: left;
}
#auth_container .auth-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ink-u-spacing-std);
}
#auth_container .errorlist {
  margin: 0;
  padding: 0;
}
#auth_container .errorlist li {
  display: block;
  font-weight: normal;
  margin: 0 0 1em 0;
}
@media screen and (max-width: 720px), screen and (max-device-width: 720px) and (orientation: landscape) {
  #auth_container {
    /* Waste less vertical space on mobile devices. */
    margin-top: 3em;
  }
  #auth_container .auth-form-row {
    width: 100%;
    /* Change the labels to appear above the fields and not to the side. */
  }
  #auth_container .auth-form-row.auth-field-row:not(.checkbox-row) {
    display: flex;
    flex-direction: column;
  }
  #auth_container .auth-form-row.auth-field-row:not(.checkbox-row) label {
    text-align: left;
  }
  #auth_container .auth-form-row.auth-field-row:not(.checkbox-row) .errorlist {
    margin-left: 0;
  }
  #auth_container .auth-header p {
    margin-left: 1.5em;
    margin-right: 1.5em;
  }
  #auth_container .auth-section.main-auth-section {
    /* Reset the margin that was providing room for the side labels. */
    margin-left: 0;
    margin-right: 0;
  }
}
#auth_container #login_form .login-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ink-u-spacing-std);
  margin-top: var(--ink-u-spacing-l);
}
#auth_container #login_form .login-links p {
  margin: 0;
  padding: 0;
}
#auth_container .register-captcha-row {
  display: flex;
  justify-content: center;
}
/****************************************************************************
 * Auto-complete widget
 ****************************************************************************/
.ui-autocomplete-results {
  background: var(--ink-c-menu-bg);
  border: var(--ink-c-menu-border);
  border-radius: var(--ink-c-menu-border-radius);
  color: var(--ink-p-fg);
  overflow: hidden;
  position: absolute;
  width: 100%;
  z-index: 110;
}
@media screen and (max-width: 720px), screen and (max-device-width: 720px) and (orientation: landscape) {
  .ui-autocomplete-results.search-results {
    /*
       * On mobile, set the autoresults list to take up the entire size of
       * the #page-container, overriding anything set by the widget.
       */
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100%;
    border: 0;
    border-radius: 0;
    overflow-y: auto;
  }
}
.ui-autocomplete-results ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
@media screen and (max-width: 720px), screen and (max-device-width: 720px) and (orientation: landscape) {
  .ui-autocomplete-results ul {
    max-height: none !important;
  }
}
.ui-autocomplete-results ul li {
  cursor: pointer;
  margin: 0;
  padding: var(--ink-c-menu-item-padding);
  position: relative;
  white-space: nowrap;
}
.ui-autocomplete-results ul li span {
  margin-left: 6px;
  position: absolute;
  right: 6px;
}
.ui-autocomplete-results .ui-autocomplete-over {
  background: var(--ink-c-menu-item-selected-bg);
  color: var(--ink-c-menu-item-selected-fg);
}
.ui-autocomplete-footer {
  background: var(--ink-p-footer-bg);
  border-top: var(--ink-u-border-thin) var(--ink-p-footer-border-color) solid;
  padding: var(--ink-c-menu-item-padding);
}
#submitter {
  position: relative;
}
/****************************************************************************
 * New Review Request
 ****************************************************************************/
#id_basedir #id_diff_path,
#id_parent_diff_path {
  width: 100%;
}
/****************************************************************************
 * clearfix hacks
 ****************************************************************************/
/*
 * clearfix hack. See http://www.webtoolkit.info/css-clearfix.html
 */
.clearfix {
  display: inline-block;
}
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
html[xmlns] .clearfix {
  display: block;
}
* html .clearfix {
  height: 1%;
}
/*
 * Styles the syntax-highlighted code for various languages, using both the
 * Pygments and CodeMirror CSS classes for styles.
 *
 * Each section will document the class names in order, naming them as per
 * Pygments/CodeMirror's conventions.
 */
/* Light diff UI colors. */
/* Dark diff UI colors. */
/* Rich text colors. */
/* Ensure the variables don't leak out of the scope of this theme. */
:root {
  --rb-theme-rich-text-code-bg: var(--if-light, #FBFAF8) var(--if-dark, rgba(0, 0, 0, 0.08));
  --rb-theme-rich-text-code-fg: var(--ink-p-fg);
  --rb-theme-diff-equals-bg: var(--if-dark, #222222) var(--if-light, #FFFFFF);
  --rb-theme-diff-equals-fg: var(--ink-p-fg);
  --rb-theme-diff-equals-highlight-bg: var(--if-dark, rgba(255, 255, 255, 0.2)) var(--if-light, rgba(0, 0, 0, 0.1));
  --rb-theme-diff-equals-linenum-bg: var(--if-dark, #333333) var(--if-light, #F2F2F2);
  --rb-theme-diff-equals-linenum-fg: var(--if-light, rgba(0, 0, 0, 0.6)) var(--if-dark, rgba(255, 255, 255, 0.8));
  --rb-theme-diff-delete-bg: var(--if-dark, #572121) var(--if-light, #FDE9ED);
  --rb-theme-diff-delete-fg: var(--ink-p-fg);
  --rb-theme-diff-delete-highlight-bg: var(--if-dark, rgba(255, 128, 128, 0.3)) var(--if-light, rgba(200, 0, 0, 0.15));
  --rb-theme-diff-delete-linenum-bg: var(--if-dark, #792C26) var(--if-light, #F6DBDF);
  --rb-theme-diff-delete-linenum-fg: var(--if-light, rgba(0, 0, 0, 0.6)) var(--if-dark, rgba(255, 255, 255, 0.8));
  --rb-theme-diff-insert-bg: var(--if-dark, #16390A) var(--if-light, #E7FFE1);
  --rb-theme-diff-insert-fg: var(--ink-p-fg);
  --rb-theme-diff-insert-highlight-bg: var(--if-dark, rgba(255, 255, 255, 0.2)) var(--if-light, rgba(0, 200, 0, 0.25));
  --rb-theme-diff-insert-linenum-bg: var(--if-dark, #135709) var(--if-light, #CFF2CA);
  --rb-theme-diff-insert-linenum-fg: var(--if-light, rgba(0, 0, 0, 0.6)) var(--if-dark, rgba(255, 255, 255, 0.8));
  --rb-theme-diff-replace-bg: var(--if-dark, #3E3E28) var(--if-light, #FDFECC);
  --rb-theme-diff-replace-fg: var(--ink-p-fg);
  --rb-theme-diff-replace-highlight-bg: var(--if-dark, rgba(255, 255, 0, 0.2)) var(--if-light, rgba(200, 200, 0, 0.25));
  --rb-theme-diff-replace-linenum-bg: var(--if-dark, #656520) var(--if-light, #EEEFC0);
  --rb-theme-diff-replace-linenum-fg: var(--if-light, rgba(0, 0, 0, 0.6)) var(--if-dark, rgba(255, 255, 255, 0.8));
  --rb-theme-diff-indent-fg: var(--if-dark, var(--ink-p-green-700)) var(--if-light, var(--ink-p-green-600));
  --rb-theme-diff-unindent-fg: var(--if-dark, var(--ink-p-red-800)) var(--if-light, var(--ink-p-red-500));
  --rb-theme-diff-move-from-flag-bg: var(--ink-p-light__green-400);
  --rb-theme-diff-move-from-flag-fg: var(--ink-p-fg-on-light);
  --rb-theme-diff-move-to-flag-bg: var(--ink-p-light__red-200);
  --rb-theme-diff-move-to-flag-fg: var(--ink-p-fg-on-light);
}
/*
 * Pygments: Comment
 * Pygments: Comment.Multiline
 * Pygments: Comment.Single
 * CodeMirror: Comment
 */
.c,
.com,
.cm,
.c1,
.cm-s-rb .cm-comment {
  color: var(--if-light, #0000C0) var(--if-dark, #05f3f2);
  font-style: italic;
}
/*
 * CodeMirror: Link
 */
.cm-s-rb .cm-link {
  color: var(--ink-p-link-fg);
  text-decoration: none;
}
/* Pygments: Error */
/*
 * Pygments: Operator
 * CodeMirror: Operator
 */
.o,
.cm-s-rb .cm-operator {
  color: inherit;
}
/*
 * Pygments: Comment.Preproc
 * CodeMirror: Meta (pre-processor, etc.)
 */
.cp,
.cm-s-rb .cm-meta {
  color: var(--if-light, #612B00) var(--if-dark, #ff7100);
}
/* Pygments: Generic.Deleted */
.gd {
  color: var(--rb-p-diff-delete-text-fg);
}
/* Pygments: Generic.Emph */
.ge {
  font-style: italic;
}
/* Pygments: Generic.Error */
.gr {
  color: var(--if-light, #FF0000) var(--if-dark, #ff7979);
}
/* Pygments: Generic.Heading */
.gh {
  color: var(--if-light, #000080) var(--if-dark, #ffa5ff);
  font-weight: bold;
}
/* Pygments: Generic.Inserted */
.gi {
  color: var(--rb-p-diff-insert-text-fg);
}
/* Pygments: Generic.Output */
.go {
  color: var(--if-light, #808080) var(--if-dark, #bcbcbc);
}
/* Pygments: Generic.Prompt */
.gp {
  color: var(--if-light, #000080) var(--if-dark, #9cf0fb);
  font-weight: bold;
}
/* Pygments: Generic.Strong */
.gs {
  font-weight: bold;
}
/* Pygments: Generic.Subheading */
.gu {
  color: var(--if-light, #800080) var(--if-dark, #ff6aff);
  font-weight: bold;
}
/* Pygments: Generic.Traceback */
.gt {
  color: var(--if-light, #0040D0) var(--if-dark, #aeccfe);
}
/*
 * Pygments: Name.Decorator
 * Pygments: Keyword
 * Pygments: Keyword.Constant
 * Pygments: Keyword.Declaration
 * Pygments: Keyword.Namespace
 * CodeMirror: Atom
 * CodeMirror: Keyword (var, function)
 * CodeMirror: Property on an object
 */
.k,
.kc,
.kd,
.kn,
.cm-s-rb .cm-atom,
.cm-s-rb .cm-keyword,
.cm-s-rb .cm-property {
  color: var(--if-light, #770088) var(--if-dark, #f0bbf8);
  font-weight: bold;
}
/* Pygments: Keyword.Pseudo */
.kp {
  color: var(--if-light, #AA22FF) var(--if-dark, #e6a6ef);
}
/* Pygments: Keyword.Reserved */
.kr {
  font-weight: bold;
}
/* Pygments: Keyword.Type */
.kt {
  font-weight: bold;
}
/*
 * Pygments: Name.Builtin.Pseudo
 * Pygments: Literal.Number
 * Pygments: Literal.Number.Float
 * Pygments: Literal.Number.Hex
 * Pygments: Literal.Number.Integer
 * Pygments: Literal.Number.Integer.Long
 * Pygments: Literal.Number.Oct
 * CodeMirror: Number
 * CodeMirror: Variable 2 (self, this, etc.)
 */
.bp,
.m,
.mf,
.mh,
.mi,
.il,
.mo,
.cm-s-rb .cm-number,
.cm-s-rb .cm-variable-2 {
  color: var(--if-light, darkred) var(--if-dark, #fe9c9c);
  font-weight: bold;
}
/*
 * Pygments: Name.Constant
 * Pygments: Name.Other
 * CodeMirror: Type
 * CodeMirror: Variable (case constants, ...)
 * CodeMirror: Variable 3 (CSS pseudo-elements, ...)
 */
.no,
.nx,
.cm-s-rb .cm-type,
.cm-s-rb .cm-variable,
.cm-s-rb .cm-variable-3 {
  color: inherit;
}
/*
 * Pygments: Name.Attribute
 * CodeMirror: Attribute
 */
.na,
.cm-s-rb .cm-attribute {
  color: var(--if-light, #000080) var(--if-dark, #cfcfff);
}
/*
 * Pygments: Name.Builtin
 * CodeMirror: Builtin Keyword
 */
.nb,
.cm-s-rb .cm-builtin {
  color: inherit;
  font-weight: bold;
}
/* Pygments: Name.Class */
.nc {
  color: inherit;
}
/* Pygments: Name.Decorator */
.nd {
  color: var(--if-light, darkblue) var(--if-dark, #89cecd);
  font-weight: bold;
}
/* Pygments: Name.Entity */
.ni {
  color: var(--if-light, #999999) var(--if-dark, #aaaaaa);
  font-weight: bold;
}
/* Pygments: Name.Exception */
.ne {
  color: var(--if-light, #D2413A) var(--if-dark, #ffb862);
  font-weight: bold;
}
/* Pygments: Name.Function */
.nf,
.cm-s-rb .cm-def {
  color: inherit;
}
/* Pygments: Name.Label */
.nl {
  color: inherit;
}
/* Pygments: Name.Namespace */
.nn {
  color: inherit;
}
/*
 * Pygments: Name.Tag
 * CodeMirror: Tag
 */
.nt,
.cm-s-rb .cm-tag {
  color: var(--if-light, #000080) var(--if-dark, #a3a3f8);
  font-weight: bold;
}
/* Pygments: Name.Variable */
.nv {
  color: inherit;
}
/* Pygments: Operator.Word */
.ow {
  font-weight: bold;
}
/*
 * Pygments: Literal.String
 * Pygments: Literal.String.Single
 * Pygments: Literal.String.Double
 * Pygments: Literal.String.Backtick
 * Pygments: Literal.String.Char
 * Pygments: Literal.String.Doc
 * Pygments: Literal.String.Heredoc
 * CodeMirror: String
 * CodeMirror: String 2
 */
.s,
.s1,
.s2,
.sb,
.sc,
.sd,
.sh,
.cm-s-rb .cm-string,
.cm-s-rb .cm-string-2 {
  color: var(--if-light, #BB4444) var(--if-dark, #ffc1a6);
}
/* Pygments: Literal.String.Escape */
.se {
  color: var(--if-light, #BB6622) var(--if-dark, #ffe1c8);
  font-weight: bold;
}
/* Pygments: Literal.String.Interpol */
.si {
  color: var(--if-light, red) var(--if-dark, #ff7979);
  font-weight: bold;
}
/* Pygments: Literal.String.Other */
.sx {
  color: var(--if-light, #008000) var(--if-dark, #aeffae);
}
/*
 * Pygments: Literal.String.Regex
 * CodeMirror: Meta
 */
.sr,
.cm-s-rb .cm-meta {
  color: var(--if-light, #bb6688) var(--if-dark, #feb9d5);
}
/* Pygments: Literal.String.Symbol */
.ss {
  color: var(--if-light, #b8860b) var(--if-dark, #ffb603);
}
/*
 * Pygments: Name.Variable.Class
 * Pygments: Name.Variable.Global
 * Pygments: Name.Variable.Instance
 */
.vc,
.vg,
.vi {
  color: var(--if-light, #b8860b) var(--if-dark, #ecba40);
}
/* Pygments: Comment.Special */
.cs {
  color: var(--if-light, red) var(--if-dark, #ff6060);
  font-weight: bold;
  font-style: italic;
}
/*# sourceMappingURL=bundles/common.css.a83cf27049cd.map */