/* Generic Styles */
*,
body {
  font-family: "Hanken Grotesk", "Roboto", sans-serif !important;
}

.main-body {
  --primary: #0066FF;
  --color-spanish-gray: #949494;
  --disabled: #808080;
}

.display-none {
  display: none !important;
}

button:disabled,
button[disabled] {
  background-color: var(--disabled) !important;
  color: #fff !important;
  cursor: initial !important;
}

button:hover[disabled] {
  box-shadow: none !important;
}

button:before {
  content: "\f1ce";
  display: inline-block;
  vertical-align: middle;
  font-family: "Font Awesome 5 Free";
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-weight: 900;
  animation: btn-spin 2s linear infinite;
  opacity: 0;
  width: 0;
}

button:disabled:before {
  opacity: 1;
  margin: 0 6px 3px 0;
  width: auto;
}

@keyframes btn-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.main-body {
  background-color: initial;
  background-image: url('../images/background/welcome_background.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

/* Dialog Styling */
[data-component*="dialog"] * {
  box-sizing: border-box;
}

:where([data-component*="dialog"]) {
  background: var(--dlg-bg, #fff);
  border: var(--dlg-b, 0);
  border-radius: var(--dlg-bdrs, 16px);
  box-shadow: var(--dlg-bxsh, 0px 25px 50px -12px rgba(0, 0, 0, 0.25));
  font-family: var(--dlg-ff, ui-sansserif, system-ui, sans-serif);
  min-inline-size: var(--dlg-mis, auto);
  padding: var(--dlg-gap, 16px);
  max-width: var(--dlg-max-width);
}

:where([data-component="no-dialog"]:not([hidden])) {
  display: block;
  inset-block-start: var(--dlg-gap);
  inset-inline-start: 50%;
  position: fixed;
  transform: translateX(-50%);
}

:where([data-component*="dialog"] menu) {
  display: flex;
  gap: calc(var(--dlg-gap) / 2);
  justify-content: var(--dlg-menu-jc, flex-end);
  margin: 0;
  padding: 0;
}

:where([data-component*="dialog"] menu button) {
  background-color: var(--dlg-button-bgc);
  border: 0;
  border-radius: var(--dlg-button-bdrs, 6px) !important;
  color: var(--dlg-button-c);
  font-size: var(--dlg-button-fz, 0.8em);
  padding: var(--dlg-button-p, 0.65em 1.5em);
}

:where([data-component*="dialog"] [data-ref="accept"]) {
  --dlg-button-bgc: var(--dlg-accept-bgc, --primary);
  --dlg-button-c: var(--dlg-accept-c, #fff);
}

:where([data-component*="dialog"] [data-ref="cancel"]) {
  --dlg-button-bgc: var(--dlg-cancel-bgc, transparent);
  --dlg-button-c: var(--dlg-cancel-c, inherit);
}

:where([data-component*="dialog"] [data-ref="fieldset"]) {
  border: 0;
  margin: unset;
  padding: unset;
}

:where([data-component*="dialog"] [data-ref="message"]) {
  font-size: var(--dlg-message-fz, 1.25em);
  color: var(--primary) !important;
  font-weight: 700;
  margin-block-end: var(--dlg-gap);
  text-align: center;
}

:where([data-component*="dialog"] [data-ref="template"]:not(:empty)) {
  margin-block-end: var(--dlg-gap);
  width: 100%;
  text-align: center;
}

/* hack for Firefox */
@-moz-document url-prefix() {
  [data-component="no-dialog"]:not([hidden]) {
    inset-inline-start: 0;
    transform: none;
  }
}

/* added to `body` when browser do not support `<dialog>` */
.dialog-open {
  background-color: rgba(0, 0, 0, .1);
  overflow: hidden;
}

[name="prompt"] {
  border: 1px solid silver;
  padding: .6em 1em;
  width: 100%;
}

.custom-dialog {
  --dlg-max-width: 480px;
  --dlg-accept-bgc: var(--primary);
  --dlg-accept-c: #fff;
  --dlg-bg: #fff;
  --dlg-button-p: 8px 16px;
  --dlg-outline-c: #000;
  --dlg-gap: 24px;
  --dlg-bdrs: 10px;
  --dlg-button-fz: inherit;
  --dlg-button-bdrs: 6px;
  --dlg-menu-jc: center;
}

/* End of Dialog Styling */

@media screen and (max-width: var(--dlg-max-width)) {
  :where([data-component*="dialog"]) {
    margin: auto 16px;
  }
}