@import "global.css";
@import "animations.css";
@import "index.css";
@import "login.css";
@import "smart.css";
@import "account.css";
@import "font.css";
@import "dark.css";
/* desktop */
@media (min-width: 769px) {
  img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
  }

  @supports (-webkit-hyphens: none) {
    img {
      image-rendering: initial !important;
      image-rendering: initial !important;
      image-rendering: initial !important;
      image-rendering: initial !important;
      -ms-interpolation-mode: initial !important;
    }
  }

  .desktop {
    display: block;
  }
  .mobile {
    display: none;
  }
}

/* mobile */
@media (max-width: 769px) {
  .desktop {
    display: none;
  }
  .mobile {
    display: block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

.bg-black {
  background-color: #2a2a2a !important;
  /* background-color: #ebc76e !important; */
}

.bg-dark-black {
  background-color: #000;
}

.bg-gold {
  background-color: #ebc76e;
}

.color-gold {
  color: #ebc76e;
}

.cursor-pointer {
  cursor: pointer;
}

.uppercase {
  text-transform: uppercase;
}

.login-container {
  z-index: 1100;
}

.wrapper {
  z-index: 100;
}

.display-none {
  display: none;
}

.visibility-hidden {
  visibility: hidden !important;
}

.display-block {
  display: block;
}

/* .swal2-popup {
  border-radius: 24px !important;
} */

/* .border-radius-24 {
  border-radius: 24px !important;
} */

.swal2-styled.swal2-confirm {
  background-image: linear-gradient(to top, #e5ac14, #fed974) !important;
  border-radius: 24px !important;
  color: #2b2b32 !important;
  letter-spacing: 0.21px !important;
  font-weight: bold !important;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  min-width: 145px !important;
  /* font-family: SegoeUI !important; */
}

.swal2-styled.swal2-cancel:focus,
.swal2-styled.swal2-confirm:focus {
  /* box-shadow: 0 0 0 3px rgb(115 103 240 / 50%); */
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16) !important;
}

.swal2-title {
  font-size: 18px !important;
  font-weight: bold !important;
  line-height: 1.11 !important;
  color: #202022 !important;
  /* font-family: SegoeUI !important; */
}

.swal2-styled.swal2-cancel {
  background-color: #b2b2b2 !important;
  border-radius: 24px !important;
  color: #2b2b32 !important;
  letter-spacing: 0.21px !important;
  font-weight: bold !important;
  border: 0px solid !important;
  min-width: 145px !important;
  /* font-family: SegoeUI !important; */
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16) !important;
}
.swal2-html-container {
  /* font-family: SegoeUI !important; */
  font-size: 14px !important;
  color: #202022 !important;
  align-items: baseline !important;
}

.preference-content {
  /* background-color: red; */
  margin-bottom: 20px !important;
}

.preference-modal {
  width: 392px !important;
  height: 231px !important;
  border-radius: 24px !important;
  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.65) !important;
  background-color: #fff !important;
}

.preference-title {
  margin-top: 10px !important;
  top: 20px !important;
}

.preference-confirm {
  height: 40px;
  margin: 0px 10px 2px 10px;
  padding: 10px 53px 11px;
  border-radius: 24px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  background-image: linear-gradient(to top, #e5ac14, #fed974);

  font-size: 14px;
  font-weight: bold;

  letter-spacing: 0.21px;
  text-align: center;
  color: #2b2b32;
}

.preference-cancel {
  height: 40px;
  margin: 0px 0 2px 10px;
  padding: 10px 19px 11px;
  border-radius: 24px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
  background-color: #b2b2b2;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.21px;
  text-align: center;
  color: #2b2b32;
}

.preference-action {
  margin-top: 0px !important;
  position: relative;
  top: -10px;
}

.preference-container {
  margin-bottom: 10px !important;
}

.swal2-modal {
  padding: 1.25rem 0rem !important;
}
.btn-nickname-confirm {
  background-image: linear-gradient(to top, #e5ac14, #fed974) !important;
  font-weight: bold !important;
  letter-spacing: 0.21px !important;
  color: #2b2b32 !important;
  border-radius: 24px !important;
}

.btn-nickname-cancel {
  background-color: #b2b2b2 !important;
  font-weight: bold !important;
  letter-spacing: 0.21px !important;
  color: #2b2b32 !important;
  border-radius: 24px !important;
}

.btn-timeout {
  background-image: linear-gradient(to top, #e5ac14, #fed974) !important;
  padding-left: 30px;
  padding-right: 30px;
  color: #2b2b32 !important;
  letter-spacing: 0.21px !important;
  font-weight: bold !important;
}

/* vue 3 pagination */
.Page:focus {
  outline: 0px !important;
}

.Page {
  font-size: 12px !important;
  /* font-family: SegoeUI !important; */
  letter-spacing: 0.18px !important;
  text-align: center !important;
  color: #b5b5b5 !important;
  border-radius: 15px !important;
  width: 25px !important;
  height: 25px !important;
  margin: 0 1px;
  font-weight: 600;
}
.Page-active {
  color: #ffffff !important;
  border: 1px solid #dedede !important;
  border-radius: 15px !important;
}

/* multi select */
.multiselect__option--highlight {
  background: #007bff !important;
  outline: none;
  color: #fff;
}

.multiselect__input,
.multiselect__single {
  /* font-family: SegoeUI !important;
  font-size: 14px !important; */
  color: #000 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

.multiselect__tags {
  padding: 10px 40px 0 8px !important;
}

/* .multiselect__option {
  color: #000 !important;
  font-weight: 600 !important;
} */

.multiselect__element {
  /* font-family: SegoeUI !important; */
  font-size: 14px !important;
}

.game-footer .text-dark {
  word-wrap: break-word;
  white-space: initial;
}

/* mobile */
@media only screen and (max-width: 1200px) and (min-width: 989px) {
  /* .menu-container {
    margin-top: 3rem !important;
  } */
  .header-logo {
    zoom: 0.8;
    height: 89px !important;
  }
  .btn-outline-gold {
    zoom: 0.8;
  }
  .user-dropdown {
    left: auto !important;
    right: 0;
  }
  .lang-dropdown {
    left: auto !important;
    right: 0;
  }
}

@media only screen and (max-width: 992px) and (min-width: 750px) {
  .btn-outline-gold {
    float: right;
    margin-top: 20px !important;
  }

  .menu-container {
    margin-top: 4.5rem !important;
  }
}

/* small screen */
@media (max-width: 280px) {
  body {
    zoom: 0.85;
  }
}

.bg-light-grey {
  background-color: #f7f7f7;
}

.profile-label {
  font-size: 14px;
  text-align: left;
  color: #6b6555;
}

.tab-label-active {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.tab-label {
  color: #908d84;
  font-size: 14px;
  font-weight: 400;
}

.left-card {
  border-radius: 5px;
  /* box-shadow: 0 9px 9px 0 rgba(0, 0, 0, 0.16) !important; */
  box-shadow: 0 0px 5px 0 rgba(0, 0, 0, 0.16) !important;
}