* {
  border: 0;
  box-sizing: inherit;
  font-family: NotoSerifThai, sans-serif;
}

@font-face {
  font-family: NotoSerifThai;
  src: url(../fonts/NotoSansThai-Regular.woff2);
}

.MuiGrid-grid-xs-12 {
  flex-grow: 0;
  max-width: 100%;
  flex-basis: 100%;
}

@media (min-width: 1280px) {
  .MuiGrid-grid-lg-9 {
    flex-grow: 0;
    max-width: 75%;
    flex-basis: 75%;
  }
  .content {
    margin-top: 8px;
  }
}

@media (min-width: 600px) {
  .MuiGrid-grid-sm-6 {
    flex-grow: 0;
    max-width: 50%;
    flex-basis: 50%;
  }
  .MuiGrid-grid-sm-4 {
    flex-grow: 0;
    max-width: 33.333333%;
    flex-basis: 33.333333%;
  }
}

@media (min-width: 960px) {
  .MuiGrid-grid-md-6 {
    flex-grow: 0;
    max-width: 50%;
    flex-basis: 50%;
  }
  .MuiGrid-grid-md-4 {
    flex-grow: 0;
    max-width: 33.333333% !important;
    flex-basis: 33.333333% !important;
  }
  .MuiGrid-grid-md-3 {
    flex-grow: 0;
    max-width: 25% !important;
    flex-basis: 25% !important;
  }
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-clip-margin: content-box;
}

body {
  color: #020202;
  margin: 0;
  font-size: 0.875rem;
  font-family: NotoSerifThai, sans-serif;
  font-weight: 400;
  line-height: 1.43;
  background-color: #fafafa !important;
}

.wrapper {
  padding: 0;
  position: relative;
  min-height: 100vh;
}

.navbar {
  width: 100%;
  display: flex;
  padding: 8px;
  background: linear-gradient(
    to top,
    #e20f32 0%,
    #e61818 35%,
    #cb162e 73%,
    #8c162e 100%
  );
  align-items: center;
  justify-content: center;
}
@media (min-width: 960px) {
  .navbar {
    padding: 16px !important;
  }
}

.navbar-toggler {
  border: var(--bs-border-width) solid #fff !important;
}

h5.typography {
  font-size: 1.5rem;
  font-family: NotoSerifThai, sans-serif;
  font-weight: 400;
  line-height: 1.334;
}

/* Sidebar */
.offcanvas {
  z-index: 9999 !important;
  width: 340px !important;
  background: linear-gradient(
    to top,
    #e20f32 0%,
    #e61818 35%,
    #cb162e 73%,
    #8c162e 100%
  );
}

.offcanvas-header {
  display: flex;
  height: 64px;
  align-items: center;
  background-color: #fff;
}

.offcanvas-header > h5 {
  font-size: 2.125rem;
  font-family: NotoSerifThai, sans-serif;
  font-weight: 400;
  line-height: 1.235;
}

.offcanvas-title {
  color: #da0010;
}

.btn-close-white {
  filter: unset !important;
}

.offcanvas-body {
  padding: 24px !important;
  flex-grow: unset !important;
}

a {
  color: #fff !important;
  text-decoration: unset !important;
}

.menu-list > .menu.col-6:nth-child(odd) > a {
  border-right: 1px solid #fff;
}

.menu-list > .menu:not(:last-child) {
  border-bottom: 1px solid #fff;
}

.menu > a {
  flex: 1 1 0px;
  padding: 12px 8px;
  color: inherit;
  border: 0;
  cursor: pointer;
  margin: 0;
  display: inline-flex;
  position: relative;
  align-items: center;
  user-select: none;
  border-radius: 0;
  vertical-align: middle;
  -moz-appearance: none;
  justify-content: center;
  text-decoration: none;
  background-color: transparent;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.menu.col-6 i.fa {
  font-size: 24px;
}

.menu.col-12 i.fa {
  font-size: 28px;
  margin-right: 10px;
}

.menu.col-12 {
  padding: 6px 8px;
}

a > p,
a > span {
  font-size: 1rem;
  font-family: NotoSerifThai, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

/* End Sidebar */

/* Navbar-user */
.navbar-user > * {
  flex: 1 1 0px;
}

.navbar-user {
  width: 100%;
  display: flex;
  padding: 8px;
  align-items: center;
  background-color: #faeb94;
}
.navbar-user a:hover {
  color: #da0010 !important;
  background: #da001054 !important;
  border: 0;
}

.navbar-user a {
  color: #020202 !important;
}

.navbar-user a span {
  font-weight: bold;
}

.navbar-user .balance {
  display: flex;
  align-items: center;
  padding-left: 16px;
  border-radius: 10px;
  justify-content: center;
  background-color: #fff;
  height: 40px;
}

.balance p {
  font-weight: bold;
}

.iconButton-label {
  width: 100%;
  display: flex;
  align-items: inherit;
  justify-content: inherit;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.iconButton-label .fa-bell {
  font-size: 30px;
}
/* End Navbar-user */
/* Marquee */
.marquee-home {
  color: #020202;
  height: 46px;
  display: flex;
  border-top: 5px solid #da0010;
  align-items: center;
  border-bottom: 5px solid #da0010;
  background-color: #fff;
}
/* End Marquee */
/* main content */
@media (min-width: 960px) {
  .container-maxWidthMd {
    max-width: 960px;
  }
}

@media (min-width: 600px) {
  .container-main {
    /*padding-left: 24px;*/
    /*padding-right: 24px;*/
  }
}

.container-main {
  width: 100%;
  display: block;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

.content {
  padding-bottom: 60px;
  background-color: #f8f9fb;
}

.bg-main {
  padding: 8px;
  background-color: #faeb94;
}

.main-card,
.banner-card {
  margin: 8px;
}

.paper {
  color: #020202;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  background-color: #fff;
}

.paper-elevation,
.paper-elevation2 {
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

.paper .card-user,
.paper .card-banner,
.paper .card-content {
  padding: 8px;
}

.MuiGrid-spacing-xs-1 {
  width: calc(100% + 8px) !important;
  margin: -4px;
}

.MuiGrid-spacing-xs-1 > .MuiGrid-item {
  padding: 4px;
}

.MuiGrid-grid-xs-8 {
  flex-grow: 0;
  max-width: 66.666667%;
  flex-basis: 66.666667%;
}

.MuiGrid-item {
  margin: 0;
  box-sizing: border-box;
}

.flex-middle,
.flex-middle-right {
  display: flex;
  align-items: center;
}

.my-account {
  box-sizing: border-box;
  display: inline-block;
  overflow: hidden;
  width: initial;
  height: initial;
  background: none;
  opacity: 1;
  border: 0px;
  margin: 0px;
  padding: 0px;
  position: relative;
  max-width: 100%;
}

.account-detail {
  padding-left: 8px;
}

.text-bold {
  font-weight: bold !important;
}

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

.account-detail h6 {
  font-size: 1.25rem;
  font-family: NotoSerifThai, sans-serif;
  font-weight: 500;
  line-height: 1.6;
}

.border-box {
  border: 1px solid rgb(218, 0, 16);
  padding: 8px;
}

.MuiGrid-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.MuiGrid-grid-xs-6 {
  flex-grow: 0;
  max-width: 50%;
  flex-basis: 50%;
}

.MuiGrid-grid-xs-4 {
  flex-grow: 0;
  max-width: 33.333333%;
  flex-basis: 33.333333%;
}

.MuiGrid-grid-xs-3 {
  flex-grow: 0;
  max-width: 25%;
  flex-basis: 25%;
}

.text-main {
  color: rgb(218, 0, 16);
}

.border-transition {
  padding: 4px;
  overflow: hidden;
  position: relative;
}

@keyframes top {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes right {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(-100%);
  }
}

@keyframes left {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

@keyframes bottom {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.border-transition .top {
  top: 0px;
  left: 0px;
  width: 100%;
  height: 4px;
  position: absolute;
  animation: 2s top linear infinite;
  background: linear-gradient(to left, rgba(43, 8, 8, 0), #d92626);
}

.border-transition .right {
  top: 0px;
  right: 0px;
  width: 4px;
  height: 100%;
  position: absolute;
  animation: 2s right linear -1s infinite;
  background: linear-gradient(to top, rgba(43, 8, 8, 0), #d92626);
}

.border-transition .bottom {
  left: 0px;
  width: 100%;
  bottom: 0px;
  height: 4px;
  position: absolute;
  animation: 2s bottom linear infinite;
  background: linear-gradient(to right, rgba(43, 8, 8, 0), #d92626);
}

.border-transition .left {
  top: 0px;
  left: 0px;
  width: 4px;
  height: 100%;
  position: absolute;
  animation: 2s left linear -1s infinite;
  background: linear-gradient(to bottom, rgba(43, 8, 8, 0), #d92626);
}
/* End main content*/
/* Navbar bottom */
.navbar-bottom {
  width: 100%;
  bottom: 0px;
  display: flex;
  z-index: 1200;
  position: fixed;
  background: linear-gradient(
    to top,
    #e20f32 0%,
    #e61818 35%,
    #cb162e 73%,
    #8c162e 100%
  );
  align-items: center;
}

.button-base {
  flex: 1 1 0px;
  color: #fff;
  padding: 8px 4px !important;
  font-weight: bold;
}

.button-base {
  color: inherit;
  border: 0;
  cursor: pointer;
  margin: 0;
  display: inline-flex;
  outline: 0;
  padding: 0;
  position: relative;
  align-items: center;
  user-select: none;
  border-radius: 0;
  vertical-align: middle;
  -moz-appearance: none;
  justify-content: center;
  text-decoration: none;
  background-color: transparent;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.navbar-bottom .button {
  color: #020202;
  padding: 6px 16px;
  font-size: 0.875rem;
  min-width: 64px;
  box-sizing: border-box;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  font-family: NotoSerifThai, sans-serif;
  font-weight: 500;
  line-height: 1.75;
  border-radius: 4px;
  text-transform: uppercase;
}

.button-label {
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.touch-ripple {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.typography-caption {
  font-size: 0.75rem;
  font-family: NotoSerifThai, sans-serif;
  font-weight: 400;
  line-height: 1.66;
}

.icon {
  fill: currentColor;
  width: 1em !important;
  height: 1em !important;
  display: inline-block;
  font-size: 1.5rem;
  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  flex-shrink: 0;
  user-select: none;
}

.divider {
  border: none;
  height: 1px;
  margin: 0;
  flex-shrink: 0;
  background-color: #e5e5e5 !important;
  margin: 12px 0px;
  background-color: #fff;
}

.divider-flex-item {
  height: auto !important;
  align-self: stretch;
}

.divider-vertical {
  width: 1px;
  height: 100%;
}

hr.divider {
  opacity: 1 !important;
}
/* End Navbar bottom */
/* Button Mavbar */
button.nav-button-base {
  top: 8px;
  color: #fff;
  right: 8px;
  border: 1px solid #fff;
  padding: 8px;
  z-index: 1000;
  position: fixed;
  min-width: 0px;
  box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
  background-color: #da0010;
}

button.button-text-large {
  padding: 8px 11px;
  font-size: 0.9375rem;
}

button.nav-button-base {
  box-sizing: border-box;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  font-family: NotoSerifThai, sans-serif;
  font-weight: 500;
  line-height: 1.75;
  border-radius: 4px;
  text-transform: uppercase;
}

.button-label i.fa-bars {
  font-size: 30px;
}
/* End Button Navbar*/
.back-menu {
  color: #ffffff;
  border-bottom: 1px solid #e5e5e5;
  background-color: #fff;
}

.text-gray {
  color: #aaaaaa;
}

.back-button-label {
  width: 100%;
  display: inherit;
  align-items: inherit;
  justify-content: inherit;
}

.back-button-label i {
  font-size: 24px;
  margin-right: 8px;
}

h4.typography {
  font-size: 2.125rem;
  font-family: NotoSerifThai, sans-serif;
  font-weight: 400;
  line-height: 1.235;
}

h6.typography {
  font-size: 1.25rem;
  font-family: NotoSerifThai, sans-serif;
  font-weight: 500;
  line-height: 1.6;
}

.mt-mb-24 {
  margin-top: 24px;
  margin-bottom: 24px;
}

.mt-mb-16 {
  margin-top: 16px;
  margin-bottom: 16px;
}

.bank-deposit {
  border: 1px solid #da0010;
  display: flex;
  padding: 16px 8px;
  align-items: center;
  border-radius: 5px;
  margin-bottom: 16px;
  justify-content: center;
}

@media (max-width: 1279.95px) {
  .bank-deposit .infoText {
    font-size: 18px;
  }
  .bank-deposit img {
    margin: 8px 8px;
  }
}

.bank-deposit img {
  width: 60px;
  height: 60px;
  margin: 8px 24px;
}

.button-outlined {
  color: #da0010;
  border: 1px solid #da0010;
}

.button-root {
  padding: 6px 16px;
  font-size: 0.875rem;
  min-width: 64px;
  box-sizing: border-box;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  font-family: NotoSerifThai, sans-serif;
  font-weight: 500;
  line-height: 1.75 !important;
  border-radius: 4px;
  text-transform: uppercase;
}

.button-root:hover {
  background-color: rgba(2, 2, 2, 0.04);
}

.mt-16 {
  margin-top: 16px;
}

.text-error {
  color: #f44336;
}

.user-bank-detail {
  border: 1px solid rgb(244, 67, 54);
  border-radius: 4px;
}

.box-header-red {
  color: #ffffff;
  background: red;
}

.mt-40 {
  margin-top: 40px;
}

.button-container {
  color: #fff;
  background: linear-gradient(
    to top,
    #e20f32 0%,
    #e61818 35%,
    #cb162e 73%,
    #8c162e 100%
  );
}

/* Form Deposit */
.MuiFormControl-fullWidth {
  width: 100%;
}

.MuiFormControl-root {
  border: 0;
  margin: 0;
  display: inline-flex;
  padding: 0;
  position: relative;
  min-width: 0;
  flex-direction: column;
  vertical-align: top;
}

.jss2979 {
  color: #020202;
}

.MuiInputLabel-animated {
  transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
    transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
}

.MuiInputLabel-shrink {
  transform: translate(0, 1.5px) scale(0.75);
  transform-origin: top left;
}

.MuiInputLabel-formControl {
  top: 0;
  left: 0;
  position: absolute;
}

label + .jss2980 {
  margin-top: 24px;
}

.MuiInputBase-root {
  color: #020202;
  cursor: text;
  display: inline-flex;
  position: relative;
  font-size: 1rem;
  box-sizing: border-box;
  align-items: center;
  font-family: NotoSerifThai, sans-serif;
  font-weight: 400;
  line-height: 1.1876em;
}

.jss2981 {
  border: 1px solid #ced4da !important;
  padding: 10px 26px 10px 12px !important;
  position: relative;
  font-size: 16px !important;
  transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-radius: 4px;
  background-color: #fff !important;
}

.MuiInputBase-input {
  font: inherit;
  color: currentColor;
  width: 100%;
  border: 0;
  height: 1.1876em;
  margin: 0;
  display: block;
  padding: 6px 0 7px;
  min-width: 0;
  background: none;
  box-sizing: content-box;
  animation-name: mui-auto-fill-cancel;
  letter-spacing: inherit;
  animation-duration: 10ms;
  -webkit-tap-highlight-color: transparent;
}

.MuiGrid-spacing-xs-2 > .MuiGrid-item {
  padding: 8px;
}
/*End Form Deposit*/
/* Transaction */
.jss2878 {
  border: solid 1px #9e9e9e;
  padding: 8px;
  margin-top: 8px;
  border-radius: 5px;
}

.text-ok {
  color: rgb(76, 175, 80) !important;
}
/* End Transaction */
/* PopOver */
.MuiPopover-paper {
  outline: 0;
  position: absolute;
  max-width: calc(100% - 32px);
  min-width: 16px;
  max-height: calc(100% - 32px);
  min-height: 16px;
  overflow-x: hidden;
  overflow-y: auto;
}

.MuiPaper-elevation8 {
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.MuiPaper-rounded {
  border-radius: 4px;
}

.MuiPaper-root {
  color: #020202;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  background-color: #fff;
}

.jss2852 {
  width: 100%;
  max-width: 360px;
}

.MuiList-subheader {
  padding-top: 0;
}

.MuiList-root {
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
}

.MuiListSubheader-sticky {
  top: 0;
  z-index: 1;
  position: sticky;
  background-color: inherit;
}

.MuiListSubheader-gutters {
  padding-left: 16px;
  padding-right: 16px;
}

.MuiListItem-gutters {
  padding-left: 16px;
  padding-right: 16px;
}

.MuiListItem-dense {
  padding-top: 4px;
  padding-bottom: 4px;
}

.MuiListItemText-multiline {
  margin-top: 6px;
  margin-bottom: 6px;
}

.MuiListSubheader-colorPrimary {
  color: #da0010;
}

.MuiListSubheader-root {
  font-size: 0.875rem;
  box-sizing: border-box;
  list-style: none;
  font-family: NotoSerifThai, sans-serif;
  font-weight: 500;
  line-height: 48px;
}

.MuiListItem-root {
  width: 100%;
  display: flex;
  position: relative;
  box-sizing: border-box;
  text-align: left;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
}

.MuiListItemText-root {
  flex: 1 1 auto;
  min-width: 0;
}

.MuiTypography-body2 {
  font-size: 0.875rem;
  font-family: NotoSerifThai, sans-serif;
  font-weight: 400;
  line-height: 1.43;
}

.jss2853 {
  color: #9e9e9e;
}
/* End PopOver */
/* Withdraw */
.bank-withdraw {
  border: 1px solid #da0010;
  margin: 16px 0px;
  display: block;
  padding: 16px;
  text-align: center;
  border-radius: 5px;
}

.jss3100 {
  color: #020202;
}

label + .jss3101 {
  margin-top: 24px;
}

.jss3102 {
  border: 1px solid #ced4da;
  padding: 10px 26px 10px 12px;
  position: relative;
  font-size: 16px;
  transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-radius: 4px;
  background-color: #fff;
}

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

.MuiGrid-spacing-xs-2 {
  width: calc(100% + 16px);
  margin: -8px;
}

.jss3075 {
  line-height: 1.75 !important;
}

.button-container:active {
  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
/* End Withdraw */
/* Profile */
.typography-body1 {
  font-size: 1rem;
  font-family: NotoSerifThai, sans-serif;
  font-weight: 400;
  line-height: 1.5;
}

label + .jss192 {
  margin-top: 24px;
}

.jss193 {
  border: 1px solid #ced4da;
  padding: 10px 26px 10px 12px;
  position: relative;
  font-size: 16px;
  transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-radius: 4px;
  background-color: #fff;
}
/* End Profile */
.button-container:hover {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
    0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
}

button.bg-transparent:hover {
  color: #f44336;
}

.bg-red {
  background-color: #f44336 !important;
}

.text-red {
  color: #da0010 !important;
}

.divider-flex-item {
  height: auto;
  align-self: stretch;
}

.d-flex > a {
  flex: 1 1 0px;
  padding: 16px 8px !important;
}

.typography-subtitle1 {
  font-size: 1rem;
  font-family: NotoSerifThai, sans-serif;
  font-weight: 400;
  line-height: 1.75;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Poy */
button#poy-today.active,
button#poy-wait.active,
button#poy-success.active {
  background: #da0010;
  border: 1px solid #da0010;
}
.text-black {
  color: #020202 !important;
}
.poy-summary {
  border: 1px solid #da0010;
  margin: 16px 0px;
  display: flex;
  overflow: hidden;
  border-radius: 4px;
}

.poy-summary .sum {
  background-color: #faeb94;
}

.poy-summary > div {
  padding: 8px;
  flex-basis: 50%;
}

.btn-red,
.btn-red:hover {
  background-color: #da0010 !important;
}

.poy-nav > div > a:hover {
  background-color: rgba(2, 2, 2, 0.04);
}

.poy-nav > div {
  flex-basis: 50%;
}

.poy-border {
  border: 1px solid #212121;
}

.poy-header .status.win {
  background-color: #4caf50;
}

.poy-header .status.lost {
  background-color: #d32f2f;
}

.status {
  padding: 0px 8px;
  background-color: #faeb94;
}

.typography-body2 {
  font-size: 0.875rem;
  font-family: NotoSerifThai, sans-serif;
  font-weight: 400;
  line-height: 1.43;
}

.poy-body > div.info-name {
  color: rgb(255, 255, 255);
  background-color: rgb(23, 162, 184);
}

.poy-body > div {
  padding: 4px;
  flex-basis: 50%;
}

.poy-footer .jss1072 {
  color: #020202 !important;
  font-weight: bold;
}

.poy-footer .jss1276 {
  padding: 0px 4px !important;
  font-size: small;
}

.button-icon-end {
  display: inherit;
  margin-left: 8px;
  margin-right: -4px;
}

.button-label-inherit {
  display: inherit;
  align-items: inherit;
  justify-content: inherit;
}

.button-outlined2 {
  border: 1px solid rgba(0, 0, 0, 0.23);
  padding: 5px 15px;
}

.poy-footer .button-outlined2:hover,
.back-menu > button:hover,
.back-menu > button > span:hover,
.back-menu > button > span > a > h5:hover,
a.button-root:hover,
button.result-by-date:hover {
  color: #da0010 !important;
  background: rgba(2, 2, 2, 0.04);
}

.poy-footer span {
  font-size: 13px;
}

a.jss1276.jss1072 {
  max-width: 85px;
  height: 25px;
}
/* End Poy */
/* Poy-detail */
.poy-border .head {
  color: #ffffff;
  display: flex;
  padding: 4px;
  justify-content: center;
  background-color: #616161;
}

.flex-half,
.flex-space-evenly {
  display: flex;
  align-items: center;
}

.flex-half > div {
  flex-basis: 50%;
}

.text-blue {
  color: #037bff;
}

h6.typography {
  font-size: 1.25rem;
  font-family: NotoSerifThai, sans-serif;
  font-weight: 500;
  line-height: 1.6;
}

.text-brown {
  color: #be8428;
}

.bet-number .bg {
  border-radius: 4px;
  background-color: rgb(238, 238, 238);
}
/* End Poy-detail */
a.disabled {
  cursor: not-allowed;
  filter: opacity(0.5);
  pointer-events: none;
}

/* Affiliate */
.icon-aff {
  fill: currentColor;
  width: 1em;
  height: 1em;
  display: inline-block;
  font-size: 1.25rem;
  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  flex-shrink: 0;
  user-select: none;
}

.aff-box {
  border: 1px solid #424242;
  padding: 4px;
  border-radius: 4px;
  background-color: #e0e0e0;
}

.aff-box .header {
  color: #ffffff;
  padding: 4px;
  text-align: center;
  border-radius: 4px;
  background-color: #424242;
}

.aff-box .header .percent {
  color: #faeb94;
}

.aff-box .aff-content {
  padding: 4px;
  text-align: center;
  background-color: #fff;
}

.aff-content .value {
  color: #2f73c6;
  display: block;
}

.jss35 {
  border: 1px solid rgb(224, 224, 224);
  border-radius: 4px;
}

.aff-link {
  border: 1px solid rgb(158, 158, 158);
  padding: 16px;
  border-radius: 4px;
  background-color: rgb(224, 224, 224);
}

.jss41 {
  color: #020202;
  border: 1px solid #f44336;
  padding: 16px;
  border-radius: 4px;
  background-color: #e57373;
}

.jss41 .header {
  font-weight: bold;
  margin-bottom: 8px;
}

.jss41 > div {
  display: flex;
  justify-content: center;
}

.jss33 {
  color: seagreen;
  border: 2px solid red;
  padding: 4px;
}

.jss45 {
  border: 1px solid rgb(224, 224, 224);
  margin-top: 8px;
  border-radius: 4px;
}

.jss126 {
  color: #2d5883;
  border: 1px solid #2d5883;
  padding: 16px;
  border-radius: 4px;
  background-color: #cbe5fe;
}

.jss126 .header {
  font-weight: bold;
  margin-bottom: 8px;
}

.jss126 > div {
  display: flex;
  justify-content: center;
}

.jss162 {
  color: #020202;
}

label + .jss163 {
  margin-top: 24px;
}

.jss164 {
  border: 1px solid #ced4da;
  padding: 10px 26px 10px 12px;
  position: relative;
  font-size: 16px;
  transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-radius: 4px;
  background-color: #fff;
}

.MuiTableHead-root {
  border-bottom: 2px solid #e0e0e0;
}

.MuiTableBody-root .MuiTableRow-root:nth-child(odd) {
  background-color: #eeeeee;
}

.table-bordered .MuiTableHead-root {
  background-color: #eeeeee;
}

.MuiTableCell-sizeSmall {
  padding: 6px 24px 6px 16px !important;
}

.MuiTableCell-head {
  color: #020202;
  font-weight: 500;
  line-height: 1.43rem !important;
  font-size: 0.875rem !important;
}

.jss292 {
  border: 1px solid rgb(129, 199, 132);
  border-radius: 4px;
}

.jss293 {
  width: 50%;
  display: inline-block;
  padding: 8px;
  background-color: rgb(129, 199, 132);
}

.jss294 {
  width: 50%;
  display: inline-block;
  padding: 8px;
}
/* End Affiliate */
/* Login */
.box-login {
  border: 2px solid #da0010;
  padding: 32px 8px;
  border-radius: 4px;
  background-color: #e7e9e8;
}

.jss16 {
  border: 1px solid #ced4da;
  padding: 10px 26px 10px 12px;
  position: relative;
  font-size: 16px;
  transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
    box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-radius: 4px;
  background-color: #fff;
}
/* End Login */
button:disabled {
  filter: grayscale(0.7);
  cursor: not-allowed;
}

.page-item > a {
  color: #020202 !important;
}

.page-item.active > a {
  color: #fff !important;
  background-color: #da0010 !important;
  border-color: #da0010 !important;
}

.jss563 {
  color: rgb(255, 255, 255);
  padding: 0px 4px;
  line-height: 1.3;
  border-radius: 4px;
  background-color: rgb(33, 33, 33);
}

.flex-space-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-type {
  color: #020202 !important;
  background: #b7b7b7 !important;
}

.nav-type.active {
  color: #020202 !important;
  background: #fbeb94 !important;
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

a.activation {
  color: #fff !important;
  background: #da0010 !important;
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  border: none;
}

.btn-lotto1 {
  width: 100% !important;
  color: #da0010 !important;
  border: 1px solid #da0010 !important;
}

a.nav-link.active {
  color: #020202 !important;
  background: #fbeb94 !important;
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
    0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
}

a#nav-panghuay-tab,
a#nav-keyboard-tab {
  color: #020202 !important;
  background: #b7b7b7;
  line-height: 1.75;
}

a.btn-lotto1 > span {
  font-size: 14px;
  line-height: 2;
}

.number-input {
  float: left;
  display: block;
  width: 40px;
  height: 40px;
  margin: 0px 5px;
  font-size: 1.25rem;
  font-weight: 500;
  text-align: center;
  line-height: 40px;
  color: #da0010;
  border-radius: 2px;
  border: solid 1px #da0010;
  position: relative;
}

.btn.btn-number,
.btn.btn-number:hover,
.btn.btn-number:active,
button.btn.btn-block {
  border: solid 1px #da0010;
  color: #da0010;
}

.bg-red2 {
  background-color: #b70c05;
}

#stake_form {
  height: 100%;
  color: #fff;
  background-color: #212121;
}

#total_transaction {
  justify-content: center !important;
}

.btn-bet {
  font-size: 14px !important;
  flex: 0 0 auto;
  width: 25% !important;
  background: #fff !important;
  color: #da0010 !important;
  border: 1px solid #da0010 !important;
}

.btn-deposit.stake-list-submit {
  background-color: #138215;
  color: #fff !important;
  border: 1px solid #138215 !important;
}

.wrapper-stake {
  min-height: unset !important;
}

.alert-primary {
  color: #fff !important;
  background-color: #212121 !important;
  border: none !important;
}

.badge-light {
  background-color: #dc3545 !important;
}

li > a#pills-3-tab {
  color: #da0010 !important;
  border: 1px solid #da0010;
  background-color: #fff;
}

li > a#pills-3-tab.active {
  color: #fff !important;
  background-color: #da0010 !important;
}

li > a#pills-2-tab {
  color: #0662b9 !important;
  border: 1px solid #0662b9;
  background-color: #fff;
}

li > a#pills-2-tab.active {
  color: #fff !important;
  background-color: #0662b9 !important;
}

li > a#pills-run-tab {
  color: #138215 !important;
  border: 1px solid #138215;
  background-color: #fff;
}

li > a#pills-run-tab.active {
  color: #fff !important;
  background-color: #138215 !important;
}
/*
.btn-group-toggle > .btn-panghuay {
  border-color: #FFF;
  background: #FFF;
  color: #1E2329;
  border: solid 1px #e7eaec;
}*/

input.form-control.btn-panghuay.bet_three,
#shuffle_3 {
  border: 1px solid #da0010;
  color: #da0010;
}

input.form-control.btn-panghuay.bet_three.activation2,
#shuffle_3.activation2 {
  background: #da0010;
  border: 1px solid #da0010;
  color: #fff;
}

input.form-control.btn-panghuay.bet_two,
#numlist-tabContent2 > div > .btn-panghuay,
#shuffle_2,
.btn-group-toggle > .btn-rood {
  border: 1px solid #0662b9;
  color: #0662b9;
}

input.form-control.btn-panghuay.bet_two.activation2,
#numlist-tabContent2 > div > .btn-panghuay.active,
#shuffle_2.activation2,
.btn-group-toggle > .btn-rood.active {
  background: #0662b9;
  border: 1px solid #0662b9;
  color: #fff;
}

input.form-control.btn-panghuay.bet_run,
#numlist-tabContent3 > div > .btn-panghuay {
  border: 1px solid #138215;
  color: #138215;
}

input.form-control.btn-panghuay.bet_run.activation2,
#numlist-tabContent3 > div > .btn-panghuay.active {
  background: #138215;
  border: 1px solid #138215;
  color: #fff;
}

.btn-group-toggle > .btn input[type="radio"],
.btn-group-toggle > .btn input[type="checkbox"],
.btn-group-toggle > .btn-group > .btn input[type="radio"],
.btn-group-toggle > .btn-group > .btn input[type="checkbox"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

#numlist-tabContent1 > div > div > .btn-panghuay {
  border: 1px solid #da0010;
  color: #da0010;
}

#numlist-tabContent1 > div > div > .btn-panghuay.active {
  background: #da0010;
  border: 1px solid #da0010;
  color: #fff;
}

#numlist-tab1 > li > .btn-panghuay {
  border: 1px solid #da0010;
  color: #da0010 !important;
}

#numlist-tab1 > li > .btn-panghuay.active {
  background: #da0010 !important;
  border: 1px solid #da0010;
  color: #fff !important;
}

.btn-rood {
  padding: 5px;
  border-radius: 0;
  border-right: 0;
  width: 100%;
}

.jss563 > span {
  font-size: 14px;
}

.yeekee > .flag > div {
  font-size: 14px;
}

/*Role*/
.MuiDialog-container {
  height: 100%;
  outline: 0;
}

.MuiDialog-scrollPaper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.MuiBackdrop-root {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  z-index: -1;
  position: fixed;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-tap-highlight-color: transparent;
}

.jss1429 {
  overflow: unset;
  position: relative;
  min-width: 300px;
  border-radius: 10px;
}

.MuiDialog-paperWidthMd {
  max-width: 960px;
}

.MuiDialog-paperScrollPaper {
  display: flex;
  max-height: calc(100% - 64px);
  flex-direction: column;
}

.MuiPaper-elevation24 {
  box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
    0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}

.MuiPaper-root {
  color: #020202;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  background-color: #fff;
}

.jss1431 {
  top: -12px;
  right: -12px;
  position: absolute;
}

.MuiIconButton-root {
  flex: 0 0 auto;
  color: rgba(0, 0, 0, 0.54);
  padding: 12px;
  overflow: visible;
  font-size: 1.5rem;
  text-align: center;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-radius: 50%;
}

.jss1430 {
  color: #da0010;
  padding: 36px;
  text-align: center;
}

.MuiDialogTitle-root {
  flex: 0 0 auto;
  margin: 0;
  padding: 16px 24px;
}

.MuiIconButton-root {
  flex: 0 0 auto;
  color: rgba(0, 0, 0, 0.54);
  padding: 12px;
  overflow: visible;
  font-size: 1.5rem;
  text-align: center;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-radius: 50%;
}

.MuiDialogContent-root {
  flex: 1 1 auto;
  padding: 8px 24px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.MuiIconButton-label {
  width: 100%;
  display: flex;
  align-items: inherit;
  justify-content: inherit;
}

.MuiIconButton-label i {
  font-size: 2.1875rem;
}

.jss1493 {
  margin-top: 24px;
}
/*End role*/
/* yeekee */
.jss1740 {
  border: 1px solid #757575;
  overflow: hidden;
  border-radius: 4px;
}

.jss1745 {
  font-size: 24px;
  font-weight: bold;
}

.jss1740 .header {
  color: #be8428;
  font-weight: bold;
  background-color: #f5f5f5;
}

.jss1742 {
  color: #4caf50;
}

.jss1743 {
  color: #be8428;
}

.jss1741 {
  display: flex;
}

.jss1741 > div {
  flex-basis: 50%;
}

.jss1746 {
  font-size: 24px;
  font-weight: bold;
}

.jss1747 {
  font-size: 24px;
  font-weight: bold;
}

.jss1748 {
  font-size: 18px;
  font-weight: bold;
}

.jss408 {
  color: rgb(255, 255, 255);
  padding: 0px 4px;
  font-size: 16px;
  line-height: 1.3;
  border-radius: 4px;
  background-color: rgb(218, 0, 16);
}

.jss405 {
  margin-left: 8px;
}

.jss88 {
  border: 1px solid #9e9e9e;
  display: flex;
  overflow: hiden;
  border-radius: 4px;
  margin-bottom: 4px;
}

.jss88 .order {
  padding: 8px;
  flex-basis: 200px;
  background-color: #757575;
}

.jss88 .order .order-number {
  border-radius: 10px;
  background-color: #fff;
}

.jss88 .number {
  padding: 8px;
  flex-basis: 100%;
}

.jss484 {
  display: flex;
  margin-bottom: 8px;
  justify-content: center;
}

.jss484 .field {
  color: #da0010;
  width: 50px;
  border: 1px solid #da0010;
  height: 50px;
  margin: 4px;
  display: flex;
  font-size: xx-large;
  align-items: center;
  justify-content: center;
}

.jss486 {
  animation: 1s jss487 step-end infinite;
}

@keyframes (jss487) {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
/* End yeekee*/
.exceed_limit {
  background-color: #ff9800 !important;
  border: 1px solid #ff9800 !important;
  color: #000 !important;
}

/* Forgot-pass*/
.MuiStep-alternativeLabel {
  flex: 1;
  position: relative;
}

.MuiStep-horizontal {
  padding-left: 8px;
  padding-right: 8px;
}

.MuiStepLabel-root.MuiStepLabel-alternativeLabel {
  flex-direction: column;
}

.MuiStepLabel-root {
  display: flex;
  align-items: center;
}

.MuiStepLabel-iconContainer.MuiStepLabel-alternativeLabel {
  padding-right: 0;
}

.MuiStepLabel-iconContainer {
  display: flex;
  flex-shrink: 0;
  padding-right: 8px;
}

.MuiStepIcon-root.MuiStepIcon-active {
  color: #da0010;
}

.MuiStepIcon-root {
  color: rgba(0, 0, 0, 0.38);
  display: block;
}

.MuiSvgIcon-root {
  fill: currentColor;
  width: 1em;
  height: 1em;
  display: inline-block;
  font-size: 1.5rem;
  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  flex-shrink: 0;
  user-select: none;
}

.MuiStepIcon-text {
  fill: #fff;
  font-size: 0.75rem;
  font-family: NotoSerifThai, sans-serif;
}

.MuiStepLabel-labelContainer {
  width: 100%;
}

.jss1 .MuiStepLabel-active {
  color: #020202;
}

.jss1 .MuiStepLabel-label {
  color: #777;
}

.MuiStepLabel-label.MuiStepLabel-alternativeLabel {
  margin-top: 16px;
  text-align: center;
}

.MuiStepLabel-label.MuiStepLabel-active {
  color: #020202;
  font-weight: 500;
}

.MuiTypography-displayBlock {
  display: block;
}

.MuiStepConnector-alternativeLabel {
  top: 12px;
  left: calc(-50% + 20px);
  right: calc(50% + 20px);
  position: absolute;
}

.MuiStepConnector-lineHorizontal {
  border-top-style: solid;
  border-top-width: 1px;
}

.MuiStepConnector-line {
  display: block;
  border-color: #bdbdbd;
}

.MuiStepLabel-root.Mui-disabled {
  cursor: default;
}

.jss13 {
  border: 1px solid #ced4da;
  padding: 10px 26px 10px 12px;
  position: relative;
  font-size: 16px;
  transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  border-radius: 4px;
  background-color: #fff;
}
/* End Forgot-pass*/