x-dialog {
  display: block;
  width: 18rem;
  margin: 0 auto;
}
x-dialog > div {
  flex-direction: column;
  padding: 1rem;
  width: 18rem;
  min-height: auto;
  display: flex;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  background-color: var(--color-light, #FEFEFE);
  color: var(--color-text, #4A4A4A);
  box-shadow: 0px 3px 1rem rgba(var(--color-border-rgb, 200, 199, 204), 0.2), inset 0 0 0 1px rgba(var(--color-border-rgb, 200, 199, 204), 0.35);
  border-radius: 0.5rem;
}
.is-dark-mode x-dialog > div {
  background-color: var(--color-dark, #1F1F1F);
  color: var(--color-text-light, #FEFEFE);
  box-shadow: 0px 3px 1rem rgba(var(--color-black-rgb, 0, 0, 0), 0.35), inset 0 0 0 1px var(--color-dark-tint, #414141);
}
.is-mobile x-dialog > div {
  margin: 0 auto;
}
x-dialog > div h4 {
  margin-top: 1rem;
  margin-bottom: 0.75rem;
}
x-dialog > div p {
  word-break: break-word;
  opacity: 0.9;
  margin-top: 0;
  margin-bottom: 1rem;
}
x-dialog > div .buttons {
  display: flex;
  padding: 0.75rem 0.675rem;
}
x-dialog > div x-button {
  margin-right: 1rem;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
x-dialog > div x-button:last-child {
  margin-right: 0px;
}
x-dialog > div[class*=dialog-] {
  color: var(--color-white, #FFFFFF);
  padding-top: 17rem;
  background-color: var(--color-default-lucid, #f0f0f0);
  background-position: top -2rem center;
  background-size: 100%;
  background-repeat: no-repeat;
}
x-dialog > div.dialog-default {
  background-color: var(--color-light, #FEFEFE) !important;
  color: var(--color-text, #4A4A4A) !important;
  padding-top: 1rem;
}
.is-dark-mode x-dialog > div.dialog-default {
  background-color: var(--color-dark, #1F1F1F) !important;
  color: var(--color-text-light, #FEFEFE) !important;
}
x-dialog > div.dialog-success {
  background-image: var(--background-dialog-success);
  background-color: var(--color-success, #00AE69) !important;
  background-position: top 1.4rem center;
  background-repeat: no-repeat;
  padding-top: 7rem;
  background-size: 82px 82px;
  box-shadow: 0px 3px 1rem rgba(0, 0, 0, 0.15), inset 0 0 0 1px var(--color-success-tint, #26ba80) !important;
}
x-dialog > div.dialog-success x-button:hover, x-dialog > div.dialog-success x-button:active, x-dialog > div.dialog-success x-button:focus, x-dialog > div.dialog-success x-button.button-focus {
  box-shadow: none;
}
x-dialog > div.dialog-success x-button button {
  background-color: var(--color-white, #FFFFFF);
  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.17);
  color: var(--color-text-tint, #656565);
}
.is-dark-mode x-dialog > div.dialog-success x-button button {
  background-color: var(--color-white, #FFFFFF);
  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.17);
  color: var(--color-text-tint, #656565);
}
x-dialog > div.dialog-success x-button button:hover, x-dialog > div.dialog-success x-button button:active, x-dialog > div.dialog-success x-button button:focus, x-dialog > div.dialog-success x-button button.button-focus {
  background-color: var(--color-white, #FFFFFF);
  color: var(--color-text, #4A4A4A);
  text-shadow: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(var(--color-white-rgb, 255, 255, 255), 0.3) !important;
}
.is-dark-mode x-dialog > div.dialog-success x-button button:hover, .is-dark-mode x-dialog > div.dialog-success x-button button:active, .is-dark-mode x-dialog > div.dialog-success x-button button:focus, .is-dark-mode x-dialog > div.dialog-success x-button button.button-focus {
  background-color: var(--color-white, #FFFFFF);
  color: var(--color-text, #4A4A4A);
  text-shadow: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(var(--color-white-rgb, 255, 255, 255), 0.3);
}
x-dialog > div.dialog-confirm {
  background-image: var(--background-dialog-confirm);
  background-color: #3274ED;
  box-shadow: 0px 3px 1rem rgba(0, 0, 0, 0.15), inset 0 0 0 1px #3069d3 !important;
}
x-dialog > div.dialog-confirm x-button:hover, x-dialog > div.dialog-confirm x-button:active, x-dialog > div.dialog-confirm x-button:focus, x-dialog > div.dialog-confirm x-button.button-focus {
  box-shadow: none;
}
x-dialog > div.dialog-confirm x-button button {
  background-color: var(--color-white, #FFFFFF);
  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.17);
  color: var(--color-text-tint, #656565);
}
.is-dark-mode x-dialog > div.dialog-confirm x-button button {
  background-color: var(--color-white, #FFFFFF);
  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.17);
  color: var(--color-text-tint, #656565);
}
x-dialog > div.dialog-confirm x-button button:hover, x-dialog > div.dialog-confirm x-button button:active, x-dialog > div.dialog-confirm x-button button:focus, x-dialog > div.dialog-confirm x-button button.button-focus {
  background-color: var(--color-white, #FFFFFF);
  color: var(--color-text, #4A4A4A);
  text-shadow: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(var(--color-white-rgb, 255, 255, 255), 0.3) !important;
}
.is-dark-mode x-dialog > div.dialog-confirm x-button button:hover, .is-dark-mode x-dialog > div.dialog-confirm x-button button:active, .is-dark-mode x-dialog > div.dialog-confirm x-button button:focus, .is-dark-mode x-dialog > div.dialog-confirm x-button button.button-focus {
  background-color: var(--color-white, #FFFFFF);
  color: var(--color-text, #4A4A4A);
  text-shadow: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(var(--color-white-rgb, 255, 255, 255), 0.3);
}
x-dialog > div.dialog-danger {
  background-image: var(--background-dialog-danger);
  background-color: var(--color-danger, #DC3545) !important;
  background-position: top 1.4rem center;
  background-repeat: no-repeat;
  padding-top: 7rem;
  background-size: 82px 82px;
  box-shadow: 0px 3px 1rem rgba(0, 0, 0, 0.15), inset 0 0 0 1px var(--color-danger-tint, #e15361) !important;
}
x-dialog > div.dialog-danger x-button:hover, x-dialog > div.dialog-danger x-button:active, x-dialog > div.dialog-danger x-button:focus, x-dialog > div.dialog-danger x-button.button-focus {
  box-shadow: none;
}
x-dialog > div.dialog-danger x-button button {
  background-color: var(--color-white, #FFFFFF);
  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.17);
  color: var(--color-text-tint, #656565);
}
.is-dark-mode x-dialog > div.dialog-danger x-button button {
  background-color: var(--color-white, #FFFFFF);
  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.17);
  color: var(--color-text-tint, #656565);
}
x-dialog > div.dialog-danger x-button button:hover, x-dialog > div.dialog-danger x-button button:active, x-dialog > div.dialog-danger x-button button:focus, x-dialog > div.dialog-danger x-button button.button-focus {
  background-color: var(--color-white, #FFFFFF);
  color: var(--color-text, #4A4A4A);
  text-shadow: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(var(--color-white-rgb, 255, 255, 255), 0.3) !important;
}
.is-dark-mode x-dialog > div.dialog-danger x-button button:hover, .is-dark-mode x-dialog > div.dialog-danger x-button button:active, .is-dark-mode x-dialog > div.dialog-danger x-button button:focus, .is-dark-mode x-dialog > div.dialog-danger x-button button.button-focus {
  background-color: var(--color-white, #FFFFFF);
  color: var(--color-text, #4A4A4A);
  text-shadow: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(var(--color-white-rgb, 255, 255, 255), 0.3);
}
x-dialog > div.dialog-exception {
  background-image: var(--background-dialog-exception);
  background-color: #5b4ac5;
  box-shadow: 0px 3px 1rem rgba(0, 0, 0, 0.15), inset 0 0 0 1px #5042ae !important;
}
x-dialog > div.dialog-exception x-button:hover, x-dialog > div.dialog-exception x-button:active, x-dialog > div.dialog-exception x-button:focus, x-dialog > div.dialog-exception x-button.button-focus {
  box-shadow: none;
}
x-dialog > div.dialog-exception x-button button {
  background-color: var(--color-white, #FFFFFF);
  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.17);
  color: var(--color-text-tint, #656565);
}
.is-dark-mode x-dialog > div.dialog-exception x-button button {
  background-color: var(--color-white, #FFFFFF);
  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.17);
  color: var(--color-text-tint, #656565);
}
x-dialog > div.dialog-exception x-button button:hover, x-dialog > div.dialog-exception x-button button:active, x-dialog > div.dialog-exception x-button button:focus, x-dialog > div.dialog-exception x-button button.button-focus {
  background-color: var(--color-white, #FFFFFF);
  color: var(--color-text, #4A4A4A);
  text-shadow: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(var(--color-white-rgb, 255, 255, 255), 0.3) !important;
}
.is-dark-mode x-dialog > div.dialog-exception x-button button:hover, .is-dark-mode x-dialog > div.dialog-exception x-button button:active, .is-dark-mode x-dialog > div.dialog-exception x-button button:focus, .is-dark-mode x-dialog > div.dialog-exception x-button button.button-focus {
  background-color: var(--color-white, #FFFFFF);
  color: var(--color-text, #4A4A4A);
  text-shadow: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(var(--color-white-rgb, 255, 255, 255), 0.3);
}
x-dialog > div.dialog-error {
  background-image: var(--background-dialog-error);
  background-color: #eff1f3;
  box-shadow: 0px 3px 1rem rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(var(--color-border-rgb, 200, 199, 204), 0.35) !important;
}
x-dialog > div.dialog-error p {
  font-weight: normal;
  color: var(--color-text, #4A4A4A);
}
x-dialog > div.dialog-error h4 {
  color: var(--color-danger, #DC3545);
}
x-dialog > div.dialog-invalid {
  background-image: var(--background-dialog-invalid);
  background-color: #eff1f3;
  box-shadow: 0px 3px 1rem rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(var(--color-border-rgb, 200, 199, 204), 0.35) !important;
}
x-dialog > div.dialog-invalid p,
x-dialog > div.dialog-invalid h4 {
  color: var(--color-text, #4A4A4A);
}
x-dialog > div.dialog-missing {
  background-image: var(--background-dialog-missing);
  background-color: #fafafa;
}
x-dialog > div.dialog-missing p,
x-dialog > div.dialog-missing h4 {
  color: var(--color-text, #4A4A4A);
}
x-dialog > div.dialog-payment {
  background-image: var(--background-dialog-payment);
  background-color: #eff1f3;
  box-shadow: 0px 3px 1rem rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(var(--color-border-rgb, 200, 199, 204), 0.35) !important;
}
x-dialog > div.dialog-payment p,
x-dialog > div.dialog-payment h4 {
  color: var(--color-text, #4A4A4A);
}
x-dialog > div.dialog-unknown {
  background-image: var(--background-dialog-unknown);
  background-color: #ee8c48;
  box-shadow: 0px 3px 1rem rgba(0, 0, 0, 0.15), inset 0 0 0 1px #e17f39 !important;
}
x-dialog > div.dialog-unknown x-button:hover, x-dialog > div.dialog-unknown x-button:active, x-dialog > div.dialog-unknown x-button:focus, x-dialog > div.dialog-unknown x-button.button-focus {
  box-shadow: none;
}
x-dialog > div.dialog-unknown x-button button {
  background-color: var(--color-white, #FFFFFF);
  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.17);
  color: var(--color-text-tint, #656565);
}
.is-dark-mode x-dialog > div.dialog-unknown x-button button {
  background-color: var(--color-white, #FFFFFF);
  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.17);
  color: var(--color-text-tint, #656565);
}
x-dialog > div.dialog-unknown x-button button:hover, x-dialog > div.dialog-unknown x-button button:active, x-dialog > div.dialog-unknown x-button button:focus, x-dialog > div.dialog-unknown x-button button.button-focus {
  background-color: var(--color-white, #FFFFFF);
  color: var(--color-text, #4A4A4A);
  text-shadow: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(var(--color-white-rgb, 255, 255, 255), 0.3) !important;
}
.is-dark-mode x-dialog > div.dialog-unknown x-button button:hover, .is-dark-mode x-dialog > div.dialog-unknown x-button button:active, .is-dark-mode x-dialog > div.dialog-unknown x-button button:focus, .is-dark-mode x-dialog > div.dialog-unknown x-button button.button-focus {
  background-color: var(--color-white, #FFFFFF);
  color: var(--color-text, #4A4A4A);
  text-shadow: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(var(--color-white-rgb, 255, 255, 255), 0.3);
}
x-dialog > div.dialog-failure {
  background-image: var(--background-dialog-failure);
  background-color: #4b678c;
  box-shadow: 0px 3px 1rem rgba(0, 0, 0, 0.15), inset 0 0 0 1px #436085 !important;
}
x-dialog > div.dialog-failure x-button:hover, x-dialog > div.dialog-failure x-button:active, x-dialog > div.dialog-failure x-button:focus, x-dialog > div.dialog-failure x-button.button-focus {
  box-shadow: none;
}
x-dialog > div.dialog-failure x-button button {
  background-color: var(--color-white, #FFFFFF);
  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.17);
  color: var(--color-text-tint, #656565);
}
.is-dark-mode x-dialog > div.dialog-failure x-button button {
  background-color: var(--color-white, #FFFFFF);
  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.17);
  color: var(--color-text-tint, #656565);
}
x-dialog > div.dialog-failure x-button button:hover, x-dialog > div.dialog-failure x-button button:active, x-dialog > div.dialog-failure x-button button:focus, x-dialog > div.dialog-failure x-button button.button-focus {
  background-color: var(--color-white, #FFFFFF);
  color: var(--color-text, #4A4A4A);
  text-shadow: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(var(--color-white-rgb, 255, 255, 255), 0.3) !important;
}
.is-dark-mode x-dialog > div.dialog-failure x-button button:hover, .is-dark-mode x-dialog > div.dialog-failure x-button button:active, .is-dark-mode x-dialog > div.dialog-failure x-button button:focus, .is-dark-mode x-dialog > div.dialog-failure x-button button.button-focus {
  background-color: var(--color-white, #FFFFFF);
  color: var(--color-text, #4A4A4A);
  text-shadow: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(var(--color-white-rgb, 255, 255, 255), 0.3);
}
x-dialog > div.dialog-no-result {
  background-image: var(--background-dialog-no-result);
  background-color: #686b89;
  box-shadow: 0px 3px 1rem rgba(0, 0, 0, 0.15), inset 0 0 0 1px #606280 !important;
}
x-dialog > div.dialog-no-result x-button:hover, x-dialog > div.dialog-no-result x-button:active, x-dialog > div.dialog-no-result x-button:focus, x-dialog > div.dialog-no-result x-button.button-focus {
  box-shadow: none;
}
x-dialog > div.dialog-no-result x-button button {
  background-color: var(--color-white, #FFFFFF);
  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.17);
  color: var(--color-text-tint, #656565);
}
.is-dark-mode x-dialog > div.dialog-no-result x-button button {
  background-color: var(--color-white, #FFFFFF);
  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.17);
  color: var(--color-text-tint, #656565);
}
x-dialog > div.dialog-no-result x-button button:hover, x-dialog > div.dialog-no-result x-button button:active, x-dialog > div.dialog-no-result x-button button:focus, x-dialog > div.dialog-no-result x-button button.button-focus {
  background-color: var(--color-white, #FFFFFF);
  color: var(--color-text, #4A4A4A);
  text-shadow: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(var(--color-white-rgb, 255, 255, 255), 0.3) !important;
}
.is-dark-mode x-dialog > div.dialog-no-result x-button button:hover, .is-dark-mode x-dialog > div.dialog-no-result x-button button:active, .is-dark-mode x-dialog > div.dialog-no-result x-button button:focus, .is-dark-mode x-dialog > div.dialog-no-result x-button button.button-focus {
  background-color: var(--color-white, #FFFFFF);
  color: var(--color-text, #4A4A4A);
  text-shadow: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(var(--color-white-rgb, 255, 255, 255), 0.3);
}
x-dialog > div.dialog-forbidden {
  background-image: var(--background-dialog-forbidden);
  background-color: #262334;
  box-shadow: 0px 3px 1rem rgba(0, 0, 0, 0.15), inset 0 0 0 1px #2d293e !important;
}
x-dialog > div.dialog-forbidden x-button:hover, x-dialog > div.dialog-forbidden x-button:active, x-dialog > div.dialog-forbidden x-button:focus, x-dialog > div.dialog-forbidden x-button.button-focus {
  box-shadow: none;
}
x-dialog > div.dialog-forbidden x-button button {
  background-color: var(--color-white, #FFFFFF);
  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.17);
  color: var(--color-text-tint, #656565);
}
.is-dark-mode x-dialog > div.dialog-forbidden x-button button {
  background-color: var(--color-white, #FFFFFF);
  box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.17);
  color: var(--color-text-tint, #656565);
}
x-dialog > div.dialog-forbidden x-button button:hover, x-dialog > div.dialog-forbidden x-button button:active, x-dialog > div.dialog-forbidden x-button button:focus, x-dialog > div.dialog-forbidden x-button button.button-focus {
  background-color: var(--color-white, #FFFFFF);
  color: var(--color-text, #4A4A4A);
  text-shadow: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(var(--color-white-rgb, 255, 255, 255), 0.3) !important;
}
.is-dark-mode x-dialog > div.dialog-forbidden x-button button:hover, .is-dark-mode x-dialog > div.dialog-forbidden x-button button:active, .is-dark-mode x-dialog > div.dialog-forbidden x-button button:focus, .is-dark-mode x-dialog > div.dialog-forbidden x-button button.button-focus {
  background-color: var(--color-white, #FFFFFF);
  color: var(--color-text, #4A4A4A);
  text-shadow: none;
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(var(--color-white-rgb, 255, 255, 255), 0.3);
}
x-dialog > div.alert-interval-progress .button--interval-progress {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  transition-property: width;
  transition-timing-function: linear;
  background-color: rgba(0, 0, 0, 0.15);
}
x-dialog > div.alert-interval-progress .button--interval-progress.button--has-interval {
  width: 0%;
}