@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Thai+Looped&display=swap");

html body {
  font-family: "Noto Sans Thai Looped", sans-serif;
  background-color: #f7f7fa;
}

.fullscreen-block {
  /* background: #006699 url("../img/bg.jpg") no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  width: 100vw;
  height: 100vh; */
  background-color: #f7f7fa;
}

.cardrank {
  /* background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15) 30%,
    #dabe06 100%
  ) !important; */
}

.inputtranparent {
  /* background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15) 30%,
    #aadae7 100%
  ) !important; */
  font-weight: bold!important;
} 

[v-cloak] {
  display: none;
}

.rankfont {
  transform: matrix(0.98, -0.21, -0.28, 0.96, 0, 0);
}
.navcustom {
  background-color: #f4cf1a !important;
  box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
}

.progress-stacked {
  padding: 0px !important;
}

.relative {
  position: relative;
}
.w-full {
  width: 100%;
}

.flex {
  display: flex;
}

.bottom-\[20px\] {
  bottom: 20px;
}
.-left-\[10\%\] {
  left: -10%;
}

.overflow-hidden {
  overflow: hidden;
}

.w-\[80px\] {
  width: 80px;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.items-center {
  align-items: center;
}

.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.h-fit {
  height: -moz-fit-content;
  height: fit-content;
}

.font-\[900\] {
  font-weight: 900;
}

.text-\[28px\] {
  font-size: 28px;
}


.text-\[22px\] {
  font-size: 22px;
}

.text-\[14px\] {
  font-size: 14px;
}
.font-db {
  font-family: DB, Kanit, arial, sans-serif;
}

.right-0 {
  right: 0;
}

.bottom-\[6px\] {
  bottom: 6px;
}

.drop-shadow-\[0px_2px_4px_rgba\(0\2c 0\2c 0\2c 0\.25\)\] {
  --tw-drop-shadow: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.25));
}

.blur-\[30px\],
.drop-shadow-\[0px_2px_4px_rgba\(0\2c 0\2c 0\2c 0\.25\)\] {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
    var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
    var(--tw-sepia) var(--tw-drop-shadow);
}

.rounded-full {
  border-radius: 9999px;
}
.relative {
  position: relative;
}

.flex-col {
  flex-direction: column;
}

.justify-between {
  justify-content: space-between;
}

.items-baseline {
  align-items: baseline;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[18px\] {
  font-size: 18px;
}
.text-\[28px\] {
  font-size: 28px;
}

.font-normal {
  font-weight: 400;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

svg,
video {
  display: block;
  vertical-align: middle;
}

.absolute {
  position: absolute;
}

.overflow-hidden {
  overflow: hidden;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

img,
video {
  max-width: 100%;
  height: auto;
}

.w-\[80px\] {
  width: 80px;
}

.w-\[70px\] {
  width: 70px;
}

.justify-center {
  justify-content: center;
}


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.text-gray{
  color: gray;
}
.text-blue{
  color: #03239e;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}