/* ==========================================================================
   CENTRAL Z-INDEX SYSTEM
   This file is used to define common z-index values for portal's React components
   If needed to modify, please be thoughtful regarding:
       1. Impact on already existing components
       2. Respect hierarchy: prioritize functionality and component's logic over necessity
   ========================================================================== */
/* ==========================================================================
   DECLARATIVE ALIASES
   ========================================================================== */
/* Negative layer */
/* Base layer */
/* Interactive layer */
/* Overlay layer */
/* Critical layer */
.X-QtV {
  /* reapplying deleted inline jquery-ui styles */
  height: auto;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 310;
  /* intentional styles */
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 4px 1px var(--modal--shadow, var(--color--shadow, rgba(0, 0, 0, 0.2)));
  border-radius: var(--modal--border--radius, var(--boxes--border--radius, 4px));
  border-width: var(--modal--border--width, 0);
  border-style: solid;
  border-color: var(--modal--border--color, var(--boxes--border--color, #979797));
  width: calc(100% - var(--grid--laterals, var(--spacer--m, 16px)) * 2) !important;
  max-width: 542px;
  background-color: var(--modal--background--color, var(--boxes--background--color, #ffffff));
  padding-top: var(--modal--padding--outers--v, var(--spacer--xxl, 40px));
  padding-right: var(--modal--padding--outers--h, var(--spacer--l, 24px));
  padding-bottom: var(--modal--padding--outers--v, var(--spacer--xxl, 40px));
  padding-left: var(--modal--padding--outers--h, var(--spacer--l, 24px));
  font-family: var(--font, ""), Arial, Helvetica, sans-serif;
  font-size: var(--font--size, 16px);
  line-height: calc(2px + 2ex + 2px);
  color: var(--color--font, #333333);
}
.ui-dialog .JyoXM {
  /* reseting jquery-ui styles */
  margin: unset;
  border: unset;
  background: unset;
  padding: unset;
  text-align: inherit;
  /* intentional styles */
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: var(--modal--padding--inners--h, var(--spacer--m, 16px));
}
.ui-dialog * + .JyoXM {
  padding-top: var(--modal--padding--outers--v, var(--spacer--xxl, 40px));
}
.ui-dialog .JyoXM .Pzp5h {
  /* reseting jquery-ui styles */
  float: unset;
  /* intentional styles */
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--button-bar--cols--gap, 16px);
  row-gap: var(--button-bar--rows--gap, 8px);
  transition: all 250ms ease-in-out;
  width: 100%;
  clear: both;
}
.IlH-B {
  /* reseting jquery-ui styles */
  opacity: initial;
  -webkit-filter: none;
  filter: none;
  /* reapplying deleted inline jquery-ui styles */
  z-index: 300;
  /* intentional styles */
  background: var(--modal__overlay--background--color, var(--color--overlay--dark, rgba(0, 0, 0, 0.45)));
}.ui-dialog .BJyD1 {
  /* reseting jquery-ui styles */
  position: static;
  margin: unset;
  width: auto;
  height: auto;
  text-indent: unset;
  /* imitating .button */
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0; /* in case it's within a flex parent */
  outline-width: var(--buttons--outline--width, 0);
  outline-style: solid;
  outline-color: var(--buttons--outline--color, #ffffff);
  border-radius: var(--buttons--border--radius, 4px);
  border-width: var(--buttons--border--width, 1px);
  border-style: solid;
  border-color: var(--buttons--border--color, #333333);
  min-height: var(--buttons--height, 40px);
  background-color: var(--buttons--background--color, #333333);
  padding-top: calc(var(--buttons--padding--v, 8px) - var(--buttons--border--width, 1px));
  padding-right: calc(var(--buttons--padding--h, 16px) - var(--buttons--border--width, 1px));
  padding-bottom: calc(var(--buttons--padding--v, 8px) - var(--buttons--border--width, 1px));
  padding-left: calc(var(--buttons--padding--h, 16px) - var(--buttons--border--width, 1px));
  font-family: var(--buttons--font, inherit);
  font-size: var(--button--font--size, 16px);
  line-height: calc(var(--buttons--height, 40px) - var(--buttons--padding--v, 8px) * 2);
  font-weight: var(--font--weight--bold, 700);
  font-style: normal;
  text-transform: initial;
  text-decoration: none;
  text-align: center;
  vertical-align: baseline;
  color: var(--buttons--font--color, #ffffff);
  cursor: pointer;
}

.ui-dialog .BJyD1:focus {
  outline: 2px solid #979797;
  outline-offset: 2px;
}

.ui-dialog .BJyD1:hover,
.ui-dialog .BJyD1:active {
  text-decoration: none;
}

.ui-dialog-buttonset .BJyD1:nth-of-type(2) {
  border-color: var(--buttons--border--color, #333333);
  background-color: var(--buttons--background--color, #ffffff);
  color: var(--buttons--font--color, #333333);
}

.ui-dialog .ui-dialog-buttonpane .BJyD1 {
  /* reseting jquery-ui styles */
  margin: unset;
  /* imitating .button-bar */
  flex-basis: var(--button-bar__buttons--width, auto);
}.ui-dialog .Jjua4 {
  /* reset jQuery UI styles */
  position: static;
  border: unset;
  background: unset;
  padding: unset;
  color: inherit;
}

.ui-dialog * + .Jjua4 {
  padding-top: var(--modal--padding--inners--v, var(--spacer--m, 16px));
}.ui-dialog .uDisQ {
  /* intentional styles */
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: var(--modal--padding--inners--h, var(--spacer--m, 16px));
  margin-top: calc(-1 * var(--modal--padding--inners--v, var(--spacer--m, 16px)));
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--dividers--border--color, #979797);
  padding-top: var(--modal--padding--inners--v, var(--spacer--m, 16px));
  padding-right: 0;
  padding-bottom: var(--modal--padding--inners--v, var(--spacer--m, 16px));
  padding-left: 0;
}

.ui-dialog .UW0du {
  /* reseting jquery-ui styles */
  float: unset;
  margin: unset;
  width: auto;
  white-space: initial;
  /* imitating .title */
  display: block;
  font-family: var(--title--font, inherit);
  font-size: var(--title--font--size, 22px);
  font-weight: var(--title--font--weight, bold);
  color: var(--title--font--color, #000000);
}

.ui-dialog .KJIjM {
  --buttons--height: 24px;
  border-color: var(--buttons--border--color, transparent);
  min-height: var(--buttons--height, 24px);
  background-color: var(--buttons--background--color, transparent);
  padding-top: calc(var(--buttons--padding--v, 6px) - var(--buttons--border--width, 1px));
  padding-right: calc(var(--buttons--padding--h, 6px) - var(--buttons--border--width, 1px));
  padding-bottom: calc(var(--buttons--padding--v, 6px) - var(--buttons--border--width, 1px));
  padding-left: calc(var(--buttons--padding--h, 6px) - var(--buttons--border--width, 1px));
  font-size: var(--button--font--size, 0);
  line-height: calc(var(--buttons--height, 24px) - var(--buttons--padding--v, 6px) * 2);
  color: var(--buttons--font--color, #333333);
}

.ui-dialog .KJIjM ._2Zkw- {
  mask-image: var(--button__icon--background--image, var(--session--icon--closethick, url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='12px' height='12px' viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EIcons/Basic/Close/Small Copy@1x%3C/title%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group-3' fill='%23000000'%3E%3Cpolygon id='Fill-1' points='10.6785 0 5.9995 4.73623219 1.3215 0 0.0005 1.26699437 5.9995 7.27112983 11.9995 1.26699437'%3E%3C/polygon%3E%3Cpolygon id='Fill-2' points='0 10.7330056 1.321 12 6 7.2646767 10.678 12 12 10.7330056 6 4.72887017'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E")));
  -webkit-mask-image: var(--button__icon--background--image, var(--session--icon--closethick, url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='12px' height='12px' viewBox='0 0 12 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EIcons/Basic/Close/Small Copy@1x%3C/title%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Group-3' fill='%23000000'%3E%3Cpolygon id='Fill-1' points='10.6785 0 5.9995 4.73623219 1.3215 0 0.0005 1.26699437 5.9995 7.27112983 11.9995 1.26699437'%3E%3C/polygon%3E%3Cpolygon id='Fill-2' points='0 10.7330056 1.321 12 6 7.2646767 10.678 12 12 10.7330056 6 4.72887017'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/svg%3E")));
}

.ui-dialog .jntJI {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--button__icon--width, 12px);
  height: var(--button__icon--height, 12px);
  background-color: currentColor;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-position: center;
  -webkit-mask-position: center;
}.RouterOfflineMessageRetryLink {
    font-weight: normal;
}

.RouterOfflineMessageRetryLinkTrying {
    color: var(--tin-neutral600);
}
:where(.pkg) {
    display: inline;
    border-width: 0;
    border-style: solid;
    padding: 0;
    cursor: pointer;
    text-align: start;
    text-decoration: none;
}

:where(.pkg:hover),
:where(.pkg:focus) {
    text-decoration: underline;
}

:where(.pkg[disabled]) {
    cursor: auto;
    color: var(--tin-neutral500);
}

.pkg::-moz-focus-inner {
    border: none;
}
/* FIXME - Almost identical to harp - ErrorIndicator.css */

.pkg_Content {
    z-index: 9999999;
    top: 0;
    left: 50%;
    position: fixed;
    max-width: 100%;
    width: 900px;
    padding: 1rem;
    line-height: normal; /* firefox 3.6 clipped the text otherwise */
    border-bottom: 1px solid var(--tin-avaHoney600);
    border-right: 1px solid var(--tin-avaHoney600);
    border-left: 1px solid var(--tin-avaHoney600);
    background-color: var(--tin-avaHoney300);
    border-radius: 0 0 3px 3px;
    display: flex;
    box-sizing: border-box;
    transform: translateX(-50%);
}

.pkg_Icon {
    width: 3rem;
    height: 3rem;
    margin-right: 0.75rem;
    vertical-align: middle;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDM2IDM2Ij4KICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgPGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTgiIGZpbGw9IiNGRkYiLz4KICAgIDxwYXRoIGZpbGw9IiM0QjRCNEIiIGQ9Ik0xNy41NDM4MjMyLDIxLjg5NjI0MDIgTDE3LDE0LjIxMzUwMSBMMTcsMTEgTDE5LjIwNDk1NjEsMTEgTDE5LjIwNDk1NjEsMTQuMjEzNTAxIEwxOC42OTA3OTU5LDIxLjg5NjI0MDIgTDE3LjU0MzgyMzIsMjEuODk2MjQwMiBaIE0xNy4wNzkxMDE2LDI1LjQ5NTM2MTMgTDE3LjA3OTEwMTYsMjMuNDY4MzgzOCBMMTkuMTI1ODU0NSwyMy40NjgzODM4IEwxOS4xMjU4NTQ1LDI1LjQ5NTM2MTMgTDE3LjA3OTEwMTYsMjUuNDk1MzYxMyBaIi8+CiAgPC9nPgo8L3N2Zz4K);
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
}

.pkg_Blinking {
    background-color: var(--tin-avaHoney300);
}

.pkg_Message {
    font-size: 1rem;
    text-align: left;
    margin-bottom: 0px;
    color: var(--tin-avaBlack);
    overflow: hidden;
    align-self: center;
    padding-right: 0.75rem;
}

.pkg_CloseButton {
    vertical-align: top;
    flex-shrink: 0;
    margin-left: auto;
}
.pkg {
    display: inline-block;
    width: 18px;
    height: 18px;
    overflow: hidden;
    background-image: url("ICO_controls_closeSpriteStyleguide.svg");
    background-position: 0 0;
    text-indent: 100%;
    white-space: nowrap;
}

.pkg:hover,
.pkg:focus-visible {
    background-position: 0 36px;
}

.pkg:active {
    background-position: 0 18px;
}

.pkg_Offline {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAA2CAMAAAD9LTlFAAAB7FBMVEUAAAAAAAD///+AgICqqqqfn5+ioqKVlZWdnZ1NTU2ZmZlJSUmenp5GRkaXl5dOTk6bm5tKSkqfn59HR0eZmZmhoaFNTU2bm5tLS0uenp6ZmZlOTk6cnJyfn59KSkqampqZmZlLS0ubm5tJSUmenp6ampqcnJycnJyampqdnZ1LS0ubm5tKSkqcnJxNTU2enp5JSUmbm5uenp5KSkqbm5tNTU2dnZ1LS0uampqcnJycnJycnJycnJybm5ubm5ubm5ucnJydnZ2bm5ucnJydnZ2cnJycnJycnJybm5ucnJxLS0udnZ2cnJxLS0ubm5tLS0ucnJydnZ2cnJxLS0ucnJxLS0udnZ1KSkqcnJxLS0ucnJxLS0ubm5tLS0ucnJxLS0ucnJxLS0ucnJxKSkqbm5ucnJxLS0ucnJxLS0ucnJxLS0udnZ1LS0ucnJxMTEycnJxLS0ucnJxLS0ucnJydnZ2cnJybm5ucnJycnJycnJycnJxLS0udnZ1LS0ucnJxLS0ucnJxLS0ucnJxLS0ucnJxLS0ucnJycnJycnJybm5tLS0ucnJxLS0ucnJycnJybm5ucnJxLS0ucnJxLS0ucnJxLS0ucnJxLS0ucnJxLS0ucnJxLS0ucnJycnJxLS0ucnJxLS0ucnJxLS0ucnJwjjVazAAAAonRSTlMAAQECAwgLDA0UFBUVFhYXFxgYGRkbISEiIiMkJCUmJigpKSoqKywxOjw9PT4+Pz9CQkRFRUZGR0dIWF1kZmlrbG1ub3BxdHl9lpmZmpycnZ2en7e3uLi5ubq6u7u8vL6+v7/AwMHCwsPDxcXGxsfHyMjJycrM0tPU1dbX19nZ2trd3d7e39/i4+Tm5ufn6Onq7Ozt7e7u7+/x8fLy8/T0+PhzQbNWAAAAAWJLR0QCZgt8ZAAAAgRJREFUOMttkOlDElEUxY+KlSi4llqWZZAtmilktG/QqoLtLiUFlkv7ZhQpmmWLo4C4pLjN/KO99+7wGMzz4c5vzrx359wLcLnaI/F4xNeMlGyvhtx2s/mAJzRYQ05D9LyJyHQpWs+f1VNOeR6uqSpWe8/CoHN+wPkxh1E59GIKNeLWBQY74weBax+yGV5uw/BefqApcejqZysnexjLW0WPk8u/tgvYlsTqFkFnpqdrUlZE0Kmfu09PiH/YwmjxsGelUssav+ftr1yH8xOPXgS98BDodW+MiuqoK+00K1VibEWOfVE5QlT5aMhty821e0Kd5enz7ePr62M+w0rg8v23VU2X3OqCJrVAW53TDEqwENnvtAz1s60KGJdFa0SbeCkIatq9gj+cb2JYfPJb+7uLXggMI0ktgiVlb4gWsUpwx2x+QpTUL3ZaB/3WZ/pF0f5HCRsgWKZQewqhyMJCoDsz6oNNBwLqE2knLreacgxbdfrGNm71hHckFhvxHpfG/peqroF95BydV6Xm67izZ1Y1aGYXkPVWzVAf4BDwTRb1GFrFS35AVe/m/+Z8A1/Fpx5LX1fhc4FfsEQtAsWlr4n+YoXgdl7eY6Il/WKHZaDH8lS/KNp/L2YDBEonqT2FmJSFhUBXZtT7mw4E1M2kndhhWkXFw5TTsUNuzOEdXVsb9TrEyz8QJlFH1Q0aCwAAAABJRU5ErkJggg==');
}

.pkg_NotificationAndDialog {
    display: inline-block;
    width: 12px;
    height: 12px;
    overflow: hidden;
    cursor: pointer;
    background-image: url("ICO_controls__closeSimpleneutral500outline.svg");
    background-position: 0 0;
    text-indent: 100%;
    white-space: nowrap;
}