x-dialog {
  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);
}
.is-dark-mode x-dialog {
  background-color: var(--color-dark, #1F1F1F);
  color: var(--color-text-light, #FEFEFE);
}
x-dialog h4 {
  margin-top: 1rem;
  margin-bottom: 0.75rem;
}
x-dialog p {
  word-break: break-word;
  opacity: 0.9;
  margin-top: 0;
  margin-bottom: 1rem;
}
x-dialog .buttons {
  display: flex;
  padding: 0.75rem 0.675rem;
}
x-dialog x-button {
  margin-right: 1rem;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
x-dialog x-button:last-child {
  margin-right: 0px;
}
x-dialog[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.dialog-default {
  background-color: var(--color-light, #FEFEFE) !important;
  color: var(--color-text, #4A4A4A) !important;
  padding-top: 1rem;
}
.is-dark-mode x-dialog.dialog-default {
  background-color: var(--color-dark, #1F1F1F) !important;
  color: var(--color-text-light, #FEFEFE) !important;
}
x-dialog.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.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.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.dialog-success x-button button:hover {
  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);
}
.is-dark-mode x-dialog.dialog-success x-button button:hover {
  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.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.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.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.dialog-confirm x-button button:hover {
  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);
}
.is-dark-mode x-dialog.dialog-confirm x-button button:hover {
  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.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.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.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.dialog-danger x-button button:hover {
  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);
}
.is-dark-mode x-dialog.dialog-danger x-button button:hover {
  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.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.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.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.dialog-exception x-button button:hover {
  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);
}
.is-dark-mode x-dialog.dialog-exception x-button button:hover {
  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.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.dialog-error p {
  font-weight: normal;
  color: var(--color-text, #4A4A4A);
}
x-dialog.dialog-error h4 {
  color: var(--color-danger, #DC3545);
}
x-dialog.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.dialog-invalid p,
x-dialog.dialog-invalid h4 {
  color: var(--color-text, #4A4A4A);
}
x-dialog.dialog-missing {
  background-color: #fafafa;
}
x-dialog.dialog-missing p,
x-dialog.dialog-missing h4 {
  color: var(--color-text, #4A4A4A);
}
x-dialog.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.dialog-payment p,
x-dialog.dialog-payment h4 {
  color: var(--color-text, #4A4A4A);
}
x-dialog.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.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.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.dialog-unknown x-button button:hover {
  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);
}
.is-dark-mode x-dialog.dialog-unknown x-button button:hover {
  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.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.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.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.dialog-failure x-button button:hover {
  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);
}
.is-dark-mode x-dialog.dialog-failure x-button button:hover {
  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.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.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.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.dialog-no-result x-button button:hover {
  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);
}
.is-dark-mode x-dialog.dialog-no-result x-button button:hover {
  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.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.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.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.dialog-forbidden x-button button:hover {
  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);
}
.is-dark-mode x-dialog.dialog-forbidden x-button button:hover {
  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.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.alert-interval-progress .button--interval-progress.button--has-interval {
  width: 0%;
}

x-modal x-dialog {
  box-shadow: 0px 3px 1rem rgba(var(--color-border-rgb), 0.2), inset 0 0 0 1px rgba(var(--color-border-rgb), 0.35);
  border-radius: 0.5rem;
}
.is-dark-mode x-modal x-dialog {
  box-shadow: 0px 3px 1rem rgba(var(--color-black-rgb), 0.35), inset 0 0 0 1px var(--color-dark-tint);
}