/**
 * This file is a LESS import match for "mediawiki.skin.variables.less"
 * when legacy Vector (useskin=vector) is the active skin.
 */
/* stylelint-disable indentation */
/* stylelint-disable selector-class-pattern */
/* stylelint-disable selector-no-vendor-prefix */
/* stylelint-enable selector-no-vendor-prefix */
.flow-ui-modal {
  box-sizing: border-box;
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.75);
}
.flow-ui-modal::before {
  box-sizing: border-box;
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.flow-ui-modal-layout {
  background: #ffffff;
  box-sizing: border-box;
  vertical-align: middle;
  display: inline-block;
  min-width: 320px;
  overflow: auto;
  max-width: 97%;
  max-height: 97%;
  position: relative;
  box-shadow: 0 4px 0 0 #c8ccd1, 0 0 0 1px #c8ccd1;
  border-radius: 2px;
  color: #202122;
  text-align: left;
}
.flow-ui-modal-heading {
  box-sizing: border-box;
  margin: 0.3em 0.3em 0;
  padding: 0 0.3em;
  font-weight: bold;
  color: #202122;
  line-height: 2.2;
  border-bottom: 1px solid #c8ccd1;
}
.flow-ui-modal-heading-prev {
  float: left;
  padding: 0 0.3em;
  margin: 0 0.6em 0 -0.3em;
  height: 100%;
  border-right: 1px solid #c8ccd1;
  color: #54595d;
}
.flow-ui-modal-heading-next {
  float: right;
  padding: 0 0.3em;
  margin: 0 -0.3em 0 0.6em;
  height: 100%;
  border-left: 1px solid #c8ccd1;
  color: #54595d;
}
.flow-ui-modal-content {
  overflow: hidden;
  margin: 1.3em;
}

/**
 * This file is a LESS import match for "mediawiki.skin.variables.less"
 * when legacy Vector (useskin=vector) is the active skin.
 */
/* stylelint-disable indentation */
/* stylelint-disable selector-class-pattern */
/* stylelint-disable selector-no-vendor-prefix */
/* stylelint-enable selector-no-vendor-prefix */
/*
Tooltips

<h3>Guidelines</h3>

Requires the following markup at minimum: <span class="mw-ui-tooltip">CONTENT<span class="mw-ui-tooltip-triangle"></span></span>
An additional class should be added relating the triangle to the direction of the content: mw-ui-tooltip-DIRECTION, where direction is one of up, down, left, or right.
Adding to this could be an extra class: mw-ui-tooltip-inverted, which moves the tooltip and triangle to the opposing side. This used when the tooltip would go off the right of the viewport, and instead aligns to the right of the viewport.
Finally, a context class can be given to assign it a color (eg. mw-ui-progressive).

This is intended to be used with JavaScript, but does not have to be. With JS, you can directly bind the element to given X-Y coords for an element.

Styleguide 4.0.
 */
.flow-ui-tooltip {
  background-color: #ffffff;
  color: #202122;
  position: relative;
  top: 1px;
  display: inline-block;
  border-radius: 2px;
  padding: 0.571em 0.857em;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
  font-size: 0.875em;
  word-wrap: break-word;
  z-index: 99;
}
.flow-ui-tooltip a {
  color: #fff !important;
  /* stylelint-disable-line declaration-no-important */
  font-weight: bold;
}
#bodyContent .flow-ui-tooltip {
  /* stylelint-disable-line selector-max-id */
  font-size: 1em;
}
.flow-ui-tooltip .flow-ui-tooltip-triangle {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.flow-ui-tooltip .flow-ui-tooltip-triangle::after {
  content: '';
  position: absolute;
  z-index: 1;
  width: 1em;
  height: 1em;
  background: #fff;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}
.flow-ui-tooltip.flow-ui-tooltip-up {
  /* @noflip */
  margin-top: 0.75em;
}
.flow-ui-tooltip.flow-ui-tooltip-up .flow-ui-tooltip-triangle {
  width: 2em;
  height: 1em;
  /* @noflip */
  left: 50%;
  top: -1em;
  /* @noflip */
  margin-left: -1em;
}
.flow-ui-tooltip.flow-ui-tooltip-up .flow-ui-tooltip-triangle::after {
  top: 0.5em;
  /* @noflip */
  left: 0.5em;
  /* @noflip */
  box-shadow: 0 0 1px 0 #c8ccd1;
}
.flow-ui-tooltip.flow-ui-tooltip-down {
  margin-bottom: 0.75em;
}
.flow-ui-tooltip.flow-ui-tooltip-down .flow-ui-tooltip-triangle {
  width: 2em;
  height: 1em;
  /* @noflip */
  left: 50%;
  bottom: -1em;
  /* @noflip */
  margin-left: -1em;
}
.flow-ui-tooltip.flow-ui-tooltip-down .flow-ui-tooltip-triangle::after {
  top: -0.5em;
  /* @noflip */
  left: 0.5em;
  /* @noflip */
  box-shadow: 0 -1.5px 0 1.5px #c8ccd1, 0 0 1px 0 #c8ccd1;
}
.flow-ui-tooltip.flow-ui-tooltip-left {
  /* @noflip */
  margin-left: 0.75em;
}
.flow-ui-tooltip.flow-ui-tooltip-left .flow-ui-tooltip-triangle {
  width: 1em;
  height: 2em;
  /* @noflip */
  left: -1em;
  top: 50%;
  margin-top: -1em;
}
.flow-ui-tooltip.flow-ui-tooltip-left .flow-ui-tooltip-triangle::after {
  margin-top: -1px;
  top: 0.5em;
  /* @noflip */
  right: -0.5em;
  /* @noflip */
  box-shadow: 1.5px 0 0 1.5px #c8ccd1, 0 0 1px 0 #c8ccd1;
}
.flow-ui-tooltip.flow-ui-tooltip-right {
  /* @noflip */
  margin-left: -0.75em;
}
.flow-ui-tooltip.flow-ui-tooltip-right .flow-ui-tooltip-triangle {
  width: 1em;
  height: 2em;
  /* @noflip */
  right: -1em;
  top: 50%;
  margin-top: -1em;
}
.flow-ui-tooltip.flow-ui-tooltip-right .flow-ui-tooltip-triangle::after {
  margin-top: -1px;
  top: 0.5em;
  /* @noflip */
  left: -0.5em;
  /* @noflip */
  box-shadow: 0 1.5px 0 1.5px #c8ccd1, 0 0 1px 0 #c8ccd1;
}
.flow-ui-tooltip .flow-ui-tooltip-content {
  display: block;
  max-width: 360px;
}
.flow-ui-tooltip[class].mw-ui-progressive {
  background: #3366cc;
  /* @noflip */
  box-shadow: 0 2px 0 0 #254a95;
  color: #fff;
}
.flow-ui-tooltip[class].mw-ui-progressive .flow-ui-tooltip-triangle::after {
  background: #3366cc;
}
.flow-ui-tooltip[class].mw-ui-progressive.flow-ui-tooltip-down .flow-ui-tooltip-triangle::after {
  /* @noflip */
  box-shadow: 0 -2px 0 2px #254a95;
}
.flow-ui-tooltip[class].mw-ui-progressive.flow-ui-tooltip-left .flow-ui-tooltip-triangle::after {
  /* @noflip */
  box-shadow: 2px 0 0 2px #254a95;
}
.flow-ui-tooltip[class].mw-ui-progressive.flow-ui-tooltip-right .flow-ui-tooltip-triangle::after {
  /* @noflip */
  box-shadow: 0 2px 0 2px #254a95;
}
.flow-ui-tooltip[class].mw-ui-progressive .mw-ui-icon {
  fill: #3366cc;
}
.flow-ui-tooltip[class].mw-ui-destructive {
  background: #dd3333;
  /* @noflip */
  box-shadow: 0 2px 0 0 #ae1d1d;
  color: #fff;
}
.flow-ui-tooltip[class].mw-ui-destructive .flow-ui-tooltip-triangle::after {
  background: #dd3333;
}
.flow-ui-tooltip[class].mw-ui-destructive.flow-ui-tooltip-down .flow-ui-tooltip-triangle::after {
  /* @noflip */
  box-shadow: 0 -2px 0 2px #ae1d1d;
}
.flow-ui-tooltip[class].mw-ui-destructive.flow-ui-tooltip-left .flow-ui-tooltip-triangle::after {
  /* @noflip */
  box-shadow: 2px 0 0 2px #ae1d1d;
}
.flow-ui-tooltip[class].mw-ui-destructive.flow-ui-tooltip-right .flow-ui-tooltip-triangle::after {
  /* @noflip */
  box-shadow: 0 2px 0 2px #ae1d1d;
}
.flow-ui-tooltip[class].mw-ui-destructive .mw-ui-button.mw-ui-destructive.mw-ui-quiet:hover,
.flow-ui-tooltip[class].mw-ui-destructive .mw-ui-button.mw-ui-destructive.mw-ui-quiet:focus span {
  fill: #dd3333;
}
.flow-ui-tooltip[class].flow-ui-tooltip-small {
  font-size: 0.75em;
}
.flow-ui-tooltip[class].flow-ui-tooltip-small .flow-ui-tooltip-content {
  max-width: 240px;
}
.flow-ui-tooltip[class].flow-ui-tooltip-large {
  max-width: 100%;
}
.flow-ui-tooltip[class].flow-ui-tooltip-large .flow-ui-tooltip-content {
  max-width: 100%;
}
.flow-ui-tooltip-block {
  box-sizing: border-box;
  width: 100%;
}

/**
 * This file is a LESS import match for "mediawiki.skin.variables.less"
 * when legacy Vector (useskin=vector) is the active skin.
 */
/* stylelint-disable indentation */
/* stylelint-disable selector-class-pattern */
/* stylelint-disable selector-no-vendor-prefix */
/* stylelint-enable selector-no-vendor-prefix */
.client-js .flow-action-view {
  /*
		Fallback elements

		Fallback elements are invisible when JavaScript is enabled. They only exist when JavaScript does not run.

		Markup:
		<div class="flow-ui-fallback-element"></div>

		Styleguide X.
		*/
}
.client-js .flow-action-view .flow-ui-load-overlay {
  z-index: 101;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: wait;
}
.client-js .flow-action-view .flow-component {
  position: relative;
  opacity: 0.5;
}
.client-js .flow-action-view .flow-component-ready {
  opacity: 1;
  transition: opacity 0.5s;
}
.client-js .flow-action-view .flow-ui-fallback-element {
  visibility: hidden;
  height: 0;
}
.client-js .flow-action-view .flow-nojs {
  display: none;
}
.client-js .flow-action-view .flow-js {
  display: block;
}
.flow-ui-loading {
  display: none;
  text-align: center;
}
.flow-load-more.flow-api-inprogress .flow-ui-loading {
  display: block;
}
.flow-ui-loading .mw-ui-icon {
  display: inline-block;
  font-size: 2em;
  -webkit-animation: spin infinite 2s linear;
  -ms-animation: spin infinite 2s linear;
  animation: spin infinite 2s linear;
}
.mw-body #bodyContent .flow-api-inprogress {
  /* stylelint-disable-line selector-max-id */
  opacity: 0.5;
  cursor: wait;
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    opacity: 0.5;
  }
  50% {
    opacity: 0.75;
  }
  100% {
    -webkit-transform: rotate(360deg);
    opacity: 0.5;
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
    opacity: 0.5;
  }
  50% {
    opacity: 0.75;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0.5;
  }
}