* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #fff;
  color: #1a1a2e;
}

button,
input {
  font: inherit;
}

#app > div {
  width: 100%;
}

#app > div:not(:first-child):not(#overlay) > div {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

#overlay {
  position: absolute !important;
  top: 64px;
  left: 0;
  right: 0;
}

[style*="cursor:pointer"] {
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

[style*="cursor:pointer"]:hover {
  transform: translateY(-2px);
}

input:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

@media (max-width: 760px) {
  #app > div:first-child {
    height: auto !important;
    min-height: 64px;
    padding: 12px 18px !important;
    flex-wrap: wrap;
    gap: 10px;
  }

  #app > div:first-child > div:nth-child(2) {
    order: 3;
    width: 100%;
    overflow-x: auto;
  }

  #app > div:first-child > div:nth-child(2) > div {
    white-space: nowrap;
  }

  #btnAkun {
    padding: 9px 12px !important;
  }

  #btnAkun > span:last-child {
    display: none;
  }

  #overlay {
    top: 118px;
    padding: 8px 12px !important;
  }

  #modal {
    width: 100% !important;
  }

  #app > div[style*="padding:56px"] {
    padding: 38px 18px 0 !important;
  }

  #app > div[style*="padding:48px"] {
    padding: 38px 18px !important;
  }

  [style*="font-size:42px"] {
    font-size: 32px !important;
  }

  [style*="font-size:32px"] {
    font-size: 27px !important;
  }

  [style*="font-size:28px"] {
    font-size: 24px !important;
  }

  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  [style*="width:185px"] {
    width: min(100%, 260px) !important;
  }

  [style*="border-right:1px solid #EDE9FE"] {
    border-right: 0 !important;
  }
}