@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&display=swap");

body {
  overflow: overlay;
  font-family: "IBM Plex Sans Thai", sans-serif;
  background-color: black;
}

* ::-webkit-scrollbar {
  width: 6px;
}

* ::-webkit-scrollbar-track {
  background: #ffffff00;
}

* ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.26);
  border-radius: 100px 100px 100px 100px;
}

* ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.562);
}

.bgkaraoke {
  background-image: url("https://cdn.aona.in.th/1hi82fdkb/AONA%20Karaoke%20x%20ML%20(1).png");
  background-color: black;
  background-position: center;
  background-size: cover;
}

/* sweetalert custom css */

.swal2-modal {
  background-color: rgb(18, 18, 18);
  color: rgb(214, 214, 214);
}

div:where(.swal2-container) input:where(.swal2-input):focus,
div:where(.swal2-container) input:where(.swal2-file):focus,
div:where(.swal2-container) textarea:where(.swal2-textarea):focus {
  border: none !important;
  outline: none;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.06),
    0 0 0 3px rgba(100, 150, 200, 0.5);
  background-color: rgba(0, 0, 0, 0.261);
}

div:where(.swal2-container) div:where(.swal2-loader) {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 2.2em;
  margin: 0 1.875em;
  animation: swal2-rotate-loading 1.5s linear 0s infinite normal;
  border-width: 0.25em;
  border-style: solid;
  border-radius: 100%;
  border-color: #f27cff rgba(0, 0, 0, 0) #f27cff rgba(0, 0, 0, 0);
}

.swal2-popup.swal2-toast {
  box-sizing: border-box;
  grid-column: 1/4 !important;
  grid-row: 1/4 !important;
  grid-template-columns: min-content auto min-content;
  padding: 1em;
  overflow-y: hidden;
  background: rgb(18, 18, 18);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.075), 0 1px 2px rgba(0, 0, 0, 0.075),
    1px 2px 4px rgba(0, 0, 0, 0.075), 1px 3px 8px rgba(0, 0, 0, 0.075),
    2px 4px 16px rgba(0, 0, 0, 0.075);
  pointer-events: all;
}

div:where(.swal2-container) input:where(.swal2-input),
div:where(.swal2-container) input:where(.swal2-file),
div:where(.swal2-container) textarea:where(.swal2-textarea) {
  box-sizing: border-box;
  width: auto;
  transition: border-color 0.1s, box-shadow 0.1s;
  border: 0px solid;
  border-radius: 0.1875em;
  background: rgba(6, 6, 6, 0.402) !important;
  box-shadow: none !important;
  color: inherit;
  font-size: 1.125em;
}

.swal2-styled.swal2-default-outline:focus {
  box-shadow: none !important;
}

div:where(.swal2-icon).swal2-info {
  border-color: #f69dec;
  color: #ef85e3;
}

.aona-gradient-1 {
  background-image: linear-gradient(30deg, #0000ff 0%, rgba(0, 0, 255, 0) 80%);
}

.aona-gradient-2 {
  background-image: linear-gradient(
    30deg,
    #3b82f6 0%,
    rgba(59, 130, 246, 0) 40%
  );
}

.aona-fadeIn {
  animation: fadeIn 3s;
}

.aona-fadeIn-15 {
  animation: fadeIn15 3s;
}

.aona-zoomIn {
  animation: zoomIn 3s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn15 {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.15;
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}