/* body {
  background: url('../img/bg.png') no-repeat;
  background-size: cover;
  background-position: center;
  min-height: 100vh;
} */
@media screen and (orientation: landscape) {
  body {
    background: url('../img/bg.png') no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    touch-action: manipulation;
  }
}

@media screen and (orientation: portrait) {
  body {
    background: url('../imgs/portrait/bg-2.png') no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    touch-action: manipulation;
  }
}

.header-btn img {
  width: 45px;
}

.record-block {
  background: linear-gradient(#234a05, #2d5016);
  border-radius: 60px;
  border: 2px solid #fcc44f;
  box-shadow: 0 0 6px #000;
  width: 60px;
}

.record-block img {
  width: 100%;
}

.record-block button {
  padding: 8px 10px;
  width: 100%;
}

.record-block {
  position: absolute;
  right: 20px;
  top: 80px;
  padding-top: 22px;
  top: 50%;
  transform: translateY(-50%);
  right: 8%;
}

@media (max-width: 992px) and (orientation: landscape) {
  .record-block button {
    padding: 2px 12px;
    width: 100%;
  }

  .record-block {
    position: absolute;
    right: 20px;
    top: 80px;
    padding-top: 22px;
    top: 65%;
    transform: translateY(-50%);
    right: 8%;
  }
}

.record-text {
  background: #250734;
  color: #fff;
  border: 2px solid #fdca53;
  width: 90px;
  text-align: center;
  top: -8px;
  left: -18px;
  border-radius: 25px;
  padding: 0px 2px;
}

.record-text span {
  background: linear-gradient(#fef9b0, #f58c23);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  font-size: 18px;
}

#GameContainer {
  position: absolute;
  height: calc(100vh - 68px);
  width: 100%;
  left: 0;
  right: 0;
  top: 40px;
  bottom: 0;
  /* padding-top: 65px; */
  overflow: hidden;
  /* padding-right: 70px; */
}

/* /////////////////////////////////////////// */

@keyframes slotMachine {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-200%);
  }
}

.slot-machine-animation {
  animation: slotMachine 1s ease-out;
}

.slot-machine-container {
  overflow: hidden;
  height: 405px;
  /* Adjust based on your image height */
  position: relative;
}

.slot-machine {
  position: absolute;
  width: 95%;
}

.zoom-animation {
  animation: zoom-in-out 1s forwards;
}

@keyframes zoom-in-out {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.5);
    /* Adjust the scale as needed */
  }

  100% {
    transform: scale(1);
  }
}

/* ////////// */

.header-btn img.header-rank-icon {
  width: 38px;
}


@media (min-width: 1380px) {
  .record-block {
    width: 80px;
  }

  .record-text {
    width: 105px;
  }

  #GameContainer {
    width: calc(100% - 100px) !important;
    margin-right: auto;
  }


}

@media (max-width: 1320px) {
  #GameContainer {
    width: calc(100% - 60px) !important;
    margin-right: auto;
  }

  .record-block {
    right: 3%;
  }
}

@media (max-width: 992px) {
  .record-block {
    width: 50px;
  }

  .record-text {
    width: 75px;
  }

  .record-text span {
    font-size: 15px;
  }
}

.modal-backdrop.fade.show {
  z-index: 1;
}

.settingOffcanvas-block {
  bottom: inherit !important;
  background: #2b2933 !important;
  border: 1.9px solid #ffffff7a !important;
  margin: 5px !important;
  border-radius: 5px !important;
  width: 268px !important;
}

.settingOffcanvas-block .offcanvas-header h5 {
  margin: 0;
  font-size: 22px;
  color: #fff;
}

.settingOffcanvas-block .offcanvas-header .btn-close {
  background-color: #fff;
  opacity: 1;
  padding: 0;
  width: 30px;
  height: 27px;
  border-radius: 50%;
  background-size: 13px;
}

.settingOffcanvas-block .offcanvas-header {
  border-bottom: 1.9px solid #ffffff7a;
}

.pokernav-item {
  border-bottom: 1.9px solid #ffffff7a;
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: 16px;
  padding: 8px 15px;
  position: relative;
  text-decoration: none;
  transition: all .4s linear;
}

.setting-menu-list li i {
  height: 40px;
  margin: 0;
  padding: 10px;
  width: 40px;
}

.setting-menu-list li i img {
  width: 100%;
}

.header-icon {
  width: 50px;
}

.header-end-icon-block {
  display: flex;
  align-items: center;
  gap: 10px;
}

.profileUser {
  height: 40px;
  width: 40px;
  /* border: 2px solid #fed435; */
  border-radius: 50%;
  object-fit: cover;
}

.profileDetails p label,
.profileDetails p span {
  font-size: 16px;
  font-weight: 500;
  padding-left: 10px;
  padding-top: 0;
}

.profileDetails p {
  color: #fff;
  font-family: arial-rounded-mt-bold;
  margin-left: 0 !important;
}

.profileDetails p {
  font-size: 12px;
}

.profileDetails p label,
.profileDetails p span {
  font-size: 12px;
  font-weight: 600;
}

.profileDetails p label,
.profileDetails p span {
  padding-bottom: 0;
  padding-top: 0;
}

.profileDetails p span {
  border-radius: 0 0 4px 0;
  color: #fed435;
  display: block;
}



@media screen and (orientation: landscape) {
  .settingsBtn-land-none {
    display: none;
  }

  .potrait_header {
    display: none !important;
  }
}

@media screen and (orientation: portrait) {
  .settingsBtn-port-none {
    display: none;
  }

  #GameContainerP {
    width: 98% !important;
    margin: 0 auto;
    height: 100vh !important;
    position: fixed;
    left: 0;
    right: 10px;
    top: 40px;
  }

  #GameContainerP canvas {
    margin: 0px !important;
  }
}


/* Setting Menu Css End */


.switchTable-modal .modal-content .modal-header {
  border-bottom: 1.9px solid #4ab74d3d;
  padding-bottom: 15px;
}

.switchTable-modal .modal-content .modal-header .modal-title {
  font-weight: 600;
  font-size: 38px;
}

.switchTable-modal .modal-content p {
  margin-bottom: 35px;
  font-size: 24px;
}

.switchTable-modal .modalon-btn {
  background: linear-gradient(to bottom, #12171b, #101113);
  border: 2px solid #4ab74d;
  font-size: 16px;
  color: #fff;
  min-width: 160px;
}

.switchTable-modal .modalon-btn:hover {
  color: #fff;
  border-color: #4ab74d;
}

.switchTable-modal .modal-content {
  border: 1.9px solid #4ab74d;
}

.switchTable-modal.show {
  display: block !important;
  background: rgba(0, 0, 0, 0.8);
}

@media (max-width: 420px) {
  .switchTable-modal .modalon-btn {
    min-width: 125px;
    font-size: 13px;
  }

  .switchTable-modal .modal-content .modal-header .modal-title {
    font-size: 32px;
  }

  .switchTable-modal .modal-content p {
    margin-bottom: 20px;
    font-size: 22px;
  }

}




.settingpopup {
  height: auto;
  right: 10px;
}

.settingpopup {
  left: inherit;
  right: 0;
  transform: translate(200%);
}

.settingpopup-open {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translate(0) !important;
}

.settingpopup button {
  font-size: 26px !important;
  padding: 8px 8px;
}

.settingpopup .JM_Menu-list li {
  font-family: cambriab;
}

.settingpopup .JM_Menu-list li i img {
  width: 100%;
}

.settingpopup .JM_Menu-list li i {
  padding: 10px;
  margin: 0;
  width: 40px;
  height: 40px;
}

.settingpopup .JM_Menu-list li {
  padding: 7px 15px;
  position: relative;
}

.settingpopup .JM_Menu-list li::before,
.settingpopup button::before {
  background: linear-gradient(to left, transparent 10%, #610585, transparent 115%);
}



.settingpopup {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to left, transparent 10%, #610585, transparent 90%);
}


.settingpopup-open {
  visibility: visible !important;
  opacity: 1 !important;
  transform: translate(0) !important;
}


.userProfile {
  position: relative;
  width: 141px;
}

.userProfile .userImg {
  position: absolute;
  position: absolute;
  width: 41px;
  left: 6px;
  top: 7px;
  border-radius: 50%;
}

.userProfile img {
  width: 143px;
}

.userProfile p {
  position: absolute;
  position: absolute;
  top: 7px;
  left: 54px;
  width: 100%;
  font-size: 14px;
}


.userProfile {
  position: relative;
  width: 141px;
}

.userProfile .userImg {
  position: absolute;
  position: absolute;
  width: 41px;
  left: 6px;
  top: 7px;
  border-radius: 50%;
}

.userProfile img {
  width: 143px;
}

.userProfile p {
  position: absolute;
  position: absolute;
  top: 7px;
  left: 54px;
  width: 100%;
  font-size: 14px;
}

/* ------- #3 Modal ------ */


.dragonTiger-modal .modal-content {
  background: url('../img/bg.png') no-repeat;
  background-position: center;
  background-size: cover;
  border: 1px solid #fff;
  background-color: #000000c4;
  background-blend-mode: overlay;
}

.dragonTiger-modal {
  background: rgba(0, 0, 0, .9) !important
}

.dragonTiger-modal .modal-header {
  background: linear-gradient(90deg, #aa7a25, #3d1551);
  border: 0;
  padding: 8px
}

.dragonTiger-modal .modal-title {
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 26px;
  font-weight: 700
}

.dragonTiger-modal .btn-close {
  background: linear-gradient(#f1de6b, #b88228);
  border-radius: 50%;
  height: 30px;
  opacity: 1;
  padding: 0 !important;
  right: 16px;
  width: 30px
}

.dragonTiger-modal .btn-close i {
  color: #4c2901;
  font-size: 22px;
  margin-top: 5px
}

.dragonTiger-modal {
  background: rgba(0, 0, 0, .8)
}

.modal-profile-user {
  border: 2px solid #fdbe2f;
  border-radius: 50%;
  display: block;
  height: 75px;
  margin: 0 auto 15px;
  object-fit: cover;
  width: 75px
}

.modal-profile-coin {
  color: #fdbe2f;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  margin: 0;
  text-align: center
}

.modal-layer-table thead tr th {
  background: #fff;
  color: #000;
  font-size: 18px;
  text-align: center
}

.modal-layer-table,
.modal-layer-table * {
  border: 0
}

.modal-layer-table thead tr th:first-child {
  border-radius: 25px 0 0 25px
}

.modal-layer-table thead tr th:last-child {
  border-radius: 0 25px 25px 0
}

.modal-layer-table tr td {
  background: transparent;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  padding: 15px 5px
}

.tr-border-bottom {
  background: linear-gradient(270deg, transparent, #fdbe2f, transparent);
  bottom: 0;
  height: 1px;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  width: 65%
}

@media (max-width:767px) {

  .dragonTiger-modal .btn-close {
    background-size: 10px;
    height: 20px;
    width: 20px
  }

  .dragonTiger-modal .modal-title {
    font-size: 18px
  }

  .gamewin-name {
    bottom: 1px;
    font-size: 5px;
    height: 10px;
    left: 1px;
    width: 10px
  }

  .card-parent-block .col-2 {
    padding: 5px
  }

  .hands-text-modal,
  .hands-text-modal span {
    font-size: 12px
  }

  .modal-user-name {
    margin-top: 10px;
    text-align: center
  }

  .modal-level .img-fluid {
    width: 20px
  }

  .modal-level {
    padding-bottom: 10px
  }

  .setting-tools li {
    font-size: 12px
  }

  .handsWon-text,
  .handsWon-value {
    font-size: 14px
  }

  .modal-layer-table thead tr th {
    font-size: 12px;
    padding: 5px 3px
  }

  .modal-layer-table tr td img {
    width: 20px
  }

  .modal-layer-table tr td {
    font-size: 12px
  }
}

.ti_win_text {
  background-color: #35933f;
  left: 87%;
  top: 41%;
  z-index: 1
}

.redColorCss {
  color: red !important
}

.greenColorCss {
  color: green !important
}

.modal-layer-table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1
}

.dragonTiger-modal {
  background: rgba(0, 0, 0, .5)
}

::selection {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none
}

* {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none
}

.realNewCard {
  border-radius: 3px;
  height: 25px;
  padding: 2px 8px 2px 16px;
  right: -71px;
  top: 30%
}

.realNewCard,
.realNewCard:before {
  background: green;
  position: absolute
}

.realNewCard:before {
  -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  content: "";
  display: block;
  height: 100%;
  left: -25px;
  top: 1px;
  -webkit-transform: rotate(-92deg);
  transform: rotate(-92deg);
  width: 89%
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar {
  width: 5px
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar-track {
  background: #f1f1f1
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar-thumb {
  background: #c9c8c8
}

.modal-dialog-scrollable .modal-bodydy::-webkit-scrollbar-thumb:hover {
  background: #cacaca
}

.modal-dialog-scrollable .modal-body {
  scrollbar-color: transparent transparent;
  scrollbar-width: thin
}

.modal-dialog-scrollable .modal-body::-webkit-scrollbar {
  display: none
}

@media screen and (min-width:600px) {

  .potrait_header,
  .profileDetails.potrait_header {
    display: none !important
  }
}

@media screen and (max-width:767px) {
  div#GameContainer {
    height: 100vh;
    margin: 0;
    padding-top: 65px;
    top: 0
  }

  .numLeaderBoard {
    position: relative;
    top: 1px
  }

  .realNewCard {
    font-size: 10px;
    height: 20px;
    padding: 2px 5px;
    right: -36px
  }

  .realNewCard:before {
    background: green;
    -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%);
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    content: "";
    display: block;
    height: 75%;
    left: -19px;
    position: absolute;
    top: 2px;
    -webkit-transform: rotate(-92deg);
    transform: rotate(-92deg);
    width: 85%
  }
}

@media (max-width:420px) {
  div#GameContainer {
    height: 85vh
  }
}

@supports (-webkit-touch-callout:none) {
  div#GameContainer {
    height: 78vh;
    margin: 0;
    padding-top: 80px;
    top: 0
  }
}

.numberInLeaderBoard {
  left: 1%;
  position: absolute;
  top: 36%
}

.switch {
  display: inline-block;
  font-size: 14px;
  height: 2em;
  overflow: hidden;
  position: relative;
  width: 5.2em
}

.switch input {
  height: 0;
  opacity: 0;
  width: 0
}

.slider {
  background-color: #000;
  border-radius: 30px;
  bottom: 0;
  cursor: pointer;
  left: 0;
  right: 0;
  top: 0
}

.slider,
.slider:before {
  position: absolute;
  transition: .4s
}

.slider:before {
  background-color: #476857;
  border-radius: 20px;
  bottom: .4em;
  content: "";
  height: 1.2em;
  left: .4em;
  width: 1.2em
}

input:checked+.slider {
  background-color: #2196f3;
  background-color: #fff
}

input:checked+.slider:before {
  background: green;
  -webkit-transform: translateX(3em);
  transform: translateX(3em)
}

.switch .text {
  pointer-events: none;
  position: absolute;
  text-transform: uppercase;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  transition: .4s
}

.switch .text.on {
  left: .8rem;
  -webkit-transform: translateX(-3rem) translateY(-50%);
  transform: translateX(-3rem) translateY(-50%)
}

.switch .text.off {
  color: #476857;
  font-weight: 600;
  right: 1rem
}

input:checked~.text.off {
  -webkit-transform: translateX(4rem) translateY(-50%);
  transform: translateX(4rem) translateY(-50%)
}

input:checked~.text.on {
  color: green;
  font-weight: 600;
  right: 1rem;
  -webkit-transform: translateX(0) translateY(-50%);
  transform: translateX(0) translateY(-50%)
}

.modal-level {
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding-bottom: 20px;
  position: relative
}

.modal-level:before {
  background: linear-gradient(270deg, transparent, #fdbe2f, transparent);
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 0;
  position: absolute;
  right: 0
}

.modal-level p {
  color: #fdbe2f;
  font-size: 18px;
  font-weight: 600
}

.modal-level .img-fluid {
  display: inline-block;
  width: 35px
}

.setting-tools {
  margin-bottom: 0;
  margin-top: 20px
}

.setting-tools li:first-child {
  margin-bottom: 25px
}

.setting-tools li {
  align-items: center;
  border-radius: 8px;
  color: #fff;
  display: flex;
  font-size: 18px;
  font-size: 15px;
  font-weight: 500;
  justify-content: space-between;
  letter-spacing: .5px;
  margin-bottom: 15px;
  text-transform: uppercase
}

.realNewCard,
.realtimeRank-td {
  background-color: #1e052d !important
}

.realtimerecord-Percentage {
  color: "#dfbe2b" !important
}

.realRecordTable .realtimeRank-td {
  background: #3d294c !important;
  border-radius: 50%;
  height: 40px;
  margin: 0 auto;
  padding: 0;
  width: 40px
}

.lose-text-td,
.win-text-td {
  background: linear-gradient(#e1a7a7, #ff2120);
  border-radius: 25px;
  display: inline-block;
  font-size: 14px;
  font-weight: 700;
  min-width: 54px;
  padding: 3px 4px !important;
  text-transform: uppercase
}

.win-text-td {
  background: linear-gradient(#dae666, #96b500)
}

.realRecordTable,
.realRecordTable~.tableFooter-data {
  background: #1e052d
}

/* .realRecordTable {
  border:2px solid #cc8e50;
  border-radius:8px 8px 0 0
} */
.realRecordTable td {
  padding: 8px 10px;
  text-align: center
}

/* .realRecordTable tr td:first-child {
  border-right:2px solid #cc8e50
} */
.table-footer-data-inner {
  align-items: center;
  background: linear-gradient(270deg, #3b284a, #3d294b);
  border-radius: 25px;
  display: flex;
  justify-content: center;
  padding: 5px 3px
}

.realRecordTable,
.realRecordTable~.tableFooter-data,
.realRecordTable tr td {
  background: #1e052d;
}

.table-footer-data-inner p {
  font-weight: 700;
  margin: 0
}

.table-footer-data-inner .realtimerecord-Percentage:last-child {
  color: #f8d40e
}

.table-footer-data-inner .realtimeRank-td {
  background: transparent !important;
  margin-right: 0
}

#realTimeRecord .modal-dialog {
  max-width: 900px
}

.tableFooter-data {
  border: 2px solid #cc8e50;
  border-radius: 0 0 8px 8px;
  border-top: 0;
  padding: 15px 10px
}

/* .realRecordTable {
  border-collapse:initial;
  border-spacing:0
} */
.realRecordTable tr:first-child td:first-child {
  border-radius: 8px 0 0 0
}

.realRecordTable tr:last-child td:last-child {
  border-radius: 0 8px 0 0
}

/* .realRecordTable tr td {
  border-bottom:2px solid #cc8e50;
  border-top:0
}
.realRecordTable tr td:last-child {
  border-left:2px solid #cc8e50
} */
.realRecordTable,
.realRecordTable * {
  border-color: #cc8e50 !important
}

/* .realRecordTable tr:last-child td {
  border-bottom:0
} */
.newCard-icon {
  background: transparent !important;
  padding: 0 !important;
  position: absolute;
  right: 25px;
  top: -28px;
  width: 40px
}

.setting-tools {
  margin-bottom: 0;
  margin-top: 20px
}

.setting-tools li:first-child {
  margin-bottom: 25px
}

.handsWon-text,
.handsWon-value {
  font-size: 18px;
  color: #fff;
}

.modal-user-name {
  color: #fff;
}

.handsWon-value {
  color: #fdbe2f;
  font-weight: 600
}

.car-logo-img {
  height: 40px;
}

.table-footer-data-inner {
  color: #fff;
}

body {
  padding: 0 !important;
}

.realRecordTable tr:last-child td:last-child {
  background: #fff;
  border-radius: 0 !important;
}


@media (max-width:767px) {
  .realRecordTable tr:first-child td {
    width: 45px
  }

  .settingsBtn img {
    width: 40px
  }

  .table-footer-data-inner p {
    font-size: 12px
  }

  .realRecordTable td {
    padding: 5px 3px
  }

  .lose-text-td,
  .win-text-td {
    font-size: 10px;
    min-width: 35px;
    padding: 2px 1px !important
  }

  .realRecordTable .realtimeRank-td {
    height: 30px;
    padding: 0;
    width: 30px
  }

  .realRecordTable tr td:nth-child(2),
  .realRecordTable tr td:nth-child(3) {
    display: none
  }

  .dragonTiger-modal .btn-close i {
    font-size: 14px;
    margin-top: 0
  }

  .dragonTiger-modal .btn-close {
    align-items: center;
    display: flex;
    justify-content: center
  }

  .newCard-icon {
    right: 4px
  }

  /* .dragonTiger-modal .modal-content {
    background:#2b2933
  } */
  .dragonTiger-modal .modal-header {
    background: linear-gradient(90deg, #aa7a25, #1e5089)
  }

  .realRecordTable,
  .realRecordTable~.tableFooter-data {
    background: #002649
  }

  .realRecordTable .realtimeRank-td,
  .table-footer-data-inner {
    background: #1e5089 !important
  }

  .lobbyMenu,
  .settingpopup {
    display: block !important
  }

  .car-logo-img {
    height: 32px;
    width: 100%;
    object-fit: contain;
  }
}

.bmw-logo img {
  width: 36px;
}

.porche-logo img {
  width: 28px;
}

.maserati_levante-logo img {
  width: 24px;
}

.land_rover-logo img {
  width: 50px;
  height: 35px;
}

.mercedes-logo img {
  width: 35px;
}

.jaguar-logo img {
  width: 50px;
  height: 38px;
}

.ferrari-logo img {
  width: 27px;
}

.lamborghini-logo img {
  width: 35px;
}

/* Online-Offline */

.switchTable-modal .modal-content .modal-header {
  border-bottom: 1.9px solid #4ab74d3d;
  padding-bottom: 15px;
}

.switchTable-modal .modal-content .modal-header .modal-title {
  font-weight: 600;
  font-size: 38px;
}

.switchTable-modal .modal-content p {
  margin-bottom: 35px;
  font-size: 24px;
}

.switchTable-modal .modalon-btn {
  background: linear-gradient(to bottom, #12171b, #101113);
  border: 2px solid #4ab74d;
  font-size: 16px;
  color: #fff;
  min-width: 160px;
}

.switchTable-modal .modalon-btn:hover {
  color: #fff;
  border-color: #4ab74d;
}

.switchTable-modal .modal-content {
  border: 1.9px solid #4ab74d;
}

.switchTable-modal.show {
  display: block !important;
  background: rgba(0, 0, 0, 0.8);
}

@media (max-width: 420px) {
  .switchTable-modal .modalon-btn {
    min-width: 125px;
    font-size: 13px;
  }

  .switchTable-modal .modal-content .modal-header .modal-title {
    font-size: 32px;
  }

  .switchTable-modal .modal-content p {
    margin-bottom: 20px;
    font-size: 22px;
  }

}

/* //////////////Loader ////////////////// */


.vyka_logo {
  background: black;
  background-size: cover;
  background-position: center;
  width: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99999999;

  top: 0;
  left: 0;
  transform: none;
  bottom: 0;
  position: fixed;
  z-index: 10000;
}

.vyka_logo img {
  width: 130px;
}

.vyka-loader {
  height: 4px;
  width: 130px;
  --c: no-repeat linear-gradient(green 0 0);
  background: var(--c), var(--c), #fff;
  background-size: 60% 100%;
  animation: l16 3s infinite;
}

@keyframes l16 {
  0% {
    background-position: -150% 0, -150% 0;
  }

  66% {
    background-position: 250% 0, -150% 0;
  }

  100% {
    background-position: 250% 0, 250% 0;
  }
}

@keyframes loading {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 100% 0%;
  }
}

.vyka_logo.hide {
  display: none;
}

.vyka_logo.show {
  display: flex;
}

.vyka_logo img.vyka-ludo {
  width: 120px;
}

.vyka-loader {
  margin-top: -2% !important;
  width: 25%;
  margin: 0px auto;
}

.normalLudologo {
  width: 25% !important;
}

@media (max-width: 767px) {
  .vyka-loader {
    margin-top: -8% !important;
    width: 60%;
    margin: 0px auto;
  }

  .normalLudologo {
    width: 50% !important;
  }
}

#expireModal.show {
  display: block !important;
  opacity: 1;
  background: rgba(0, 0, 0, 0.8);
}

#expireModal {
  width: 100%;
  font-size: 22px;
  text-align: center;
}

.waitingForOtherUserInMathMaking {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px;
  color: white;
  width: 80%;
  position: absolute;
  top: -5%;
  left: 0;
  z-index: 2;
  background: #000;
  border: 2px solid transparent;
  border-radius: 10px;
  right: 0;
  margin: auto;
  border: 2px solid #8f969a;
  font-size: 18px;
  /* font-weight: 600; */
  text-align: center;
  font-family: "Titan One", sans-serif;
  font-weight: 200;
}

.waitingForOtherUserInMathMaking.topCenterHeader {
  top: -5% !important;
}

.waitingForOtherUserInMathMaking.waitScreenStatus-top {
  top: -5.5% !important;
}

.waitingForOtherUserInMathMaking::after,
.waitingForOtherUserInMathMaking::before {
  content: "";
  display: block;
  width: 45%;
  height: 3px;
  background: linear-gradient(to left, transparent, red, transparent);
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  margin: 0px auto;
  z-index: -1;
}

.waitingForOtherUserInMathMaking::before {
  top: 100%;
  bottom: 0;
  z-index: 1;
}

@media (max-width: 767px) {
  .waitingForOtherUserInMathMaking {
    width: 90%;
  }

  #matchingModal .modal-body {
    padding-top: 50px !important;
  }

  .image-width-mobile {
    width: 70% !important;
  }

  .waitingForOtherUserInMathMaking {
    top: -6%;
  }

  .waitingForOtherUserInMathMaking.topCenterHeader {
    top: -9% !important;
  }

  .waitingForOtherUserInMathMaking.waitScreenStatus-top {
    top: -5.5% !important;
  }
}

/* /////////////////network strength/////////////////// */
.network-block {
  width: 24px;
}

.network-speed span {
  font-size: 7px;
}

.network-speed {
  font-size: 10px;
  font-weight: bold;
}

.network-sec {
  position: fixed;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: 0;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 10px;
}

.network-block {
  background: #0000006e;
  border-radius: 3px;
  padding: 3px 3px 2px 4px;
  width: 30px;
}

.network-inner,
.network-bottom {
  width: 100% !important;
}

.net-bar {
  width: 40%;
}

.net-lines {
  width: 3px;
}

@media (max-width: 992px) and (orientation: landscape) {
  div#GameContainer {
    height: calc(100vh - 50px);
    margin: 0;
    padding-top: 0px;
    top: 50px;
    z-index: 1;
  }
}