@import "global.css";
@import "animations.css";
@import "index.css";
@import "login.css";
@import "smart.css";
@import "account.css";
@import "font.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;
  }
}
/*ipad*/
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
  .desktop {
    display: block;
  }
  .mobile {
    display: none;
  }
}

.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;
}

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

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

.swal2-styled.swal2-confirm {
  background: linear-gradient(to bottom, #00edff, #22a4dd) !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: white !important;
  align-items: baseline !important;
}

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

.preference-modal {
  width: 340px !important;
  height: 200px !important;
  border-radius: 24px !important;
  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.65) !important;
  background: url(../../images/starry.png) #020d3a 0 0 / cover !important;
}

.preference-title {
  color: white !important;
}

.preference-confirm {
  border: none;
  font-weight: bold;
  color: black;
  cursor: pointer;
  border-radius: 8px;
  padding: 8px 10px;
  background-image: linear-gradient(to bottom, #00edff, #22a4dd);
  width: 120px;
  margin-right:0.5em;
  font-size: small;
  white-space: nowrap;
}

.preference-cancel {
  border: none;
  font-weight: bold;
  cursor: pointer;
  color: black;
  border-radius: 8px;
  padding: 8px 10px;
  background-image: linear-gradient(to bottom, #00edff, #22a4dd);
  opacity: 0.5;
   width: 120px;
  margin-left:0.5em;
  font-size: small;
  white-space: nowrap;
}
.swal2-actions{
  width : 300px !important;
  white-space: nowrap;
  /*justify-content: space-between !important;*/
}

.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: #000000 !important;
  border: 0 !important;
  font-weight: bold;
  border-radius: 0 !important;
}

/* multi select */
.multiselect__option{
  background: black;
  white-space: normal !important;
}
.multiselect__option--highlight {
  background: black !important;
  outline: none;
  color: white;
}
.multiselect__option--selected{
  background: #001e3c !important;
  color: white !important;
}

.multiselect__input,
.multiselect__single {
  /* font-family: SegoeUI !important;
  font-size: 14px !important; */
  color: white;
  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;
  white-space: normal !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;
  }
}
.menu-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

@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;
  }
}
#desktopBanner{
  width: 100%;
}
@media only screen and (max-width: 1200px){
  #desktopBanner {
    margin-top: -0.5em;
  }
  .menu-container{
    justify-content: space-evenly;
  }
}
@media only screen and (max-width: 1024px){
  #desktopBanner {
    margin-top: 0;
    width: 96%;
    margin-left: 2%;
  }
  .menu-container{
    justify-content: space-evenly;
  }
}

@media only screen and (max-width: 992px){
  #desktopBanner{
    margin-top: -1em;
    width: 100%;
    margin-left: 0;
  }

  }
  .banner-right{
    margin-top: -2em;
  }
  .banner-left{
    margin-top: -2em;
  }
}
.Control{
  fill: #bbb !important;
  filter: invert(64%) sepia(97%) saturate(0%) hue-rotate(186deg) brightness(95%) contrast(102%);
}
.Control-active:hover{
  fill: #bbb !important;
  filter: invert(64%) sepia(97%) saturate(0%) hue-rotate(186deg) brightness(95%) contrast(102%);
}
.Control-active{
  fill: #bbb !important;
  filter: invert(64%) sepia(97%) saturate(0%) hue-rotate(186deg) brightness(95%) contrast(102%);
}