/* MOBILE DATAGAMES STYLES  */
@media (max-width: 821px) {
  /* Submit toast (mobile) */
  #ftrSubmitToastHldr {
    margin: 0 auto;
    height: 125px;
  }
  .datagame #ftrSubmitToastHldr, 
  #ftrSubmitToastHldr.ratesubmit {
    bottom: 25px;
    width: 100%;
  }
  .ratesubmit .ftrSubmitToast,
  .ftrSubmitToast {
    width: calc(100% - 30px);
    height: 90px;
    padding: 5px 10px 50px;
    margin: 0 auto;
    flex-wrap: wrap;
  }
  .ftrSubmitToastTxt {
    text-align: center;
  }

  .gameWelcome button.welcSubmitButn,
  .ftrSubmitToast button.welcSubmitButn {
    padding: 5px 10px;
    font-size: 12px;  
    border: none;
  }
  .ftrSubmitToast .welcSubmitButn svg {
    max-height: 20px;
    max-width: 20px;
  }

  .datgam_widebox {
    width: calc(100% - 40px);
    padding: 0;
    margin: 10px 20px;
    box-shadow: none !important;
  }
  .datgam_widebox.usersGames {
    width: calc(100% - 40px);
    padding: 20px 0;
    margin: 0px 20px;
    box-shadow: none !important;
  }

  .usersGames .dashleftcol,
  .resultsbox .dashleftcol,
  .datgamDashbrd .dashleftcol,
  .datgamDashbrd .titlesep,
  .datgamcats .titlesep,
  .datgamgames .titlesep,
  .datgam_search .titlesep,
  .selectFriendHdr .titlesep,
  .compareFriendHdr .titlesep,
  .rankInstrux .titlesep {
    display: none !important;
  }
  
  .selectFriendHdr .titlesep.sepstay {
    display: inline-block !important;
    margin: 0 20px !important;
  }

  .gameInstrux.rankInstrux {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  .usersGames .dashrytcol,
  .resultsbox .dashrytcol,
  .datgamDashbrd .dashrytcol {
    width: 100%;
  }

  .dashcontent { 
    padding: 15px 0;
  }
  .cardCat {order: 1;} 
  .cardRat {order: 3;}
  .cardRan {order: 4;}
  .cardSea {order: 2;}
  .cardMygam {order: 5;}
  .cardMydat {order: 6;}  


  .dashdrlft {
    display: block;
    padding: 44px 0 0;
  }
  .datgam_search .dashdrlft {
    padding: 20px 0 10px;
  }
  .datagame .dashdrlft {
    padding: 0;
    width: 0px;
  }
  .datagame .dashdrryt {
    padding: 0;
  }
  .datagame .dublhdr, 
  .datagame .dublhdr2,
  .gameTitleSearch {
    justify-content: center;
    flex-direction: column;
  }

  .datgamcat .hdrSubTitle {
    margin: 3px 0 0;
    flex-direction: column;
  }
  .datgamcat .hdrSubTitle .catName.titlesub {
    font-size: 22px !important;
    line-height: 26px;
  }
  .datgamcat .hdrSubTitle .gameCount.titlesub {
    font-size: 16px !important;
    line-height: 18px;
  }
  .datgamcat .hdrTitle {
    justify-content: center;
    margin: -25px 0 0;
  }
  .datgamcat .hdrTitle .maintitle {
    font-size: 16px;
  }
  .datgamcat .dashdricon svg {
    width: 24px;
    height: 24px;
  }
  .categorygame .cardimg {
    height: 180px;
  }


  .gameMetaTitle {
    display: flex;
    align-items: center;
    flex-direction: column;
  }
  .gameMetaIdPlays.titlesub,
  .gameMetaExpir.titlesub {
    display: flex !important;
    font-size: 12px !important;
    align-items: center;
  }
  .gameMetaExpir .expDisplay {
    line-height: 1;
    margin: 1px 0 9px;
  }

  .gameMetaIdPlays.titlesub .font600.orng {
    margin: 0 0 0 8px;
  }
  .gameMetaIdPlays .titlesep {
    margin: 0 20px;
  }
  .gameMetaIdPlays span.titlesep:last-of-type {
    display: none !important;
  }

  .datagame .gameInstrux {
    text-align: center;
  }
  .datagame .gameInstrux.rateInstrux{
    padding: 0 20px;
  }
  

  .resultsbox .backarrow,
  .usersGames .backarrow,
  .datgamDashbrd .backarrow,
  .selectFriend .backarrow, 
  .compareFriend .backarrow,
  .compareRankFriend .backarrow,
  .rateItemsHolder .backarrow, 
  .ranklist.backarrow {
    margin: 0;
    position: absolute;
    top: 3px;
    left: 3px;
  }
  .backarrow a,
  .backarrow a svg {
    width: 24px;
    height: 24px;
    margin: 0;
  }
  .backarrow a {
    box-shadow: var(--shadupsm) !important;
  }
  
  .datgamgames .backarrow,
  .datgam_search .backarrow,
  .datgamcats .backarrow {
    margin: 0;
    display: inline-flex;
    position: absolute;
    left: 22px;
    top: 5px;
  }
  .datagame .backarrow {
    margin: 0;
    position: absolute;
    top: 3px;
    left: 20px;
  }
  .usersGames .dashdr,
  .resultsbox .dashdr,
  .datgamDashbrd .dashdr,
  .datgamcats .dashdr,
  .datgamgames .dashdr,
  .datgam_search .dashdr {
    width: calc(100% - 30px);
    padding: 0 0 15px;
    margin: 0 15px;
    display: block;
    text-align: center;
  }
  .datgamDashbrd .dashdr,
  .usersGames .dashdr,
  .resultsbox .dashdr {
    width: 100%;
    margin: 0;
  }
  .datagame .dashdr {
    width: calc(100% - 30px);
    padding: 15px 0 20px;
    margin: 0 auto 20px;
    text-align: center;
  }
  .icoTitle {
    justify-content: center;
  }
  .dashHdrMeta {
    flex-direction: column !important;
  }

  .dashdrryt .dashdrType {
    font-size: 24px;
  }
  .datagame .maintitle .titlesep {
    margin: 0 10px;
  }




  .dashHdrMeta .subtitle {
    font-size: 18px !important;
  }
  .dashHdrMeta .titleexp {
    font-size: 11px !important;
    line-height: 1;
    margin: 3px 0;
  }
  .usersGames .titlesep,
  .dashHdrMeta .titlesub.titlesep,
  .dashdrType .titlesub.titlesep {
    display: none !important;
  }
  .hdrSubTitle .titlesep.showsep,
  .dashHdrMeta .titlesub.titlesep.showsep {
    display: inline-block !important;
    margin: 0 15px;
  }


  .dashdricon {
    height: 30px;
    width: 30px;
    margin: 0 12px 0 0;
    font-weight: 800;
    display: inline-block;
    vertical-align: text-bottom;
  }
  .datgamcats .dashdricon {
    margin: 0 12px 0 0;
  }
  .dashdricon svg {
    width: 30px;
    height: 30px;
  }
  .maintitle,
  .usersGames .maintitle,
  .rateItemHdr .maintitle,
  .selectFriendHdr .maintitle, 
  .compareFriendHdr .maintitle {
    height: 30px;
    font-size: 22px;
    display: inline-flex;
    line-height: 1;
    align-items: center;
  }

  .maintitle.datgamTitle {
    display: flex;
    flex-direction: column;
  }
  
  .titlesub {
    font-size: 16px !important;
    display: block !important;
  }
  .titlesub.flexRow {
    display: flex !important;
    justify-content: center;
  }

  .resultsbox .dashdr .titlesub.lgtxt14 {
    font-size: 28px !important;
  }

  .gameTitleSearch {
    line-height: 1.6em;
    margin: 6px 0 9px;
  }
  .usersGames .dashdr .titlesub.lgtxt17 {
    font-size: 18px !important;
  }
  .datagame .gameTitleSearch .gameNameTitle.titlesub {
    font-size: 24px !important;
  }
  .datagame .dublhdr2 {
    font-size: 12px;
    text-align: left;
    line-height: 1.2em;
    margin: 0 0 5px;
  }
  .datagame .rategame {
    width: calc(100% - 40px) !important;
  }
  .datagame .rategame h2 {
    font-size: 1.2em;
  }

  .datgamgames .titlesub.lgtxt19 {
    display: none;
  }
  .datgamgames .titlesub.lgtxt19.font600 {
    display: block;
    font-size: 20px !important;
  }

  .datgamgames .hdrSearchButn,
  .datgamcats .hdrSearchButn {
    position: absolute;
    right: 15px;
    top: 5px;
    padding: 3px;
    min-width: 20px;
    font-size: 11px;
    gap: 0px;
  }
  .datgamgames .hdrSearchButn span,
  .datgamcats .hdrSearchButn span {
    display: none;
  }
  .datgamgames .hdrSearchButn svg,
  .datgamcats .hdrSearchButn svg,
  .datgam_search .dashdr .titlesub svg {
    width: 20px;
    height: 20px;
  }

  .datgamDashbrd .sugstdGames .sugstdGamesList {
    flex-direction: column;
  }
  .datgamDashbrd .sugstdGame,
  .datgamDashbrd .sugstdGame.gameid1 {
    margin: 0 0 30px;
    padding: 3px 11px 6px;
    width: auto;
  }

  .gamedashcard {
    width: calc(50% - 15px);
    padding: 0;
    margin: 0px 0 15px;
    text-align: center;
  }
  .gamedashcard button {
    box-shadow: var(--shadupsm) !important;
  }
  .gamedashcard.smtxt07 {
    font-size: 10px !important;
  }
  .gamedashcard span {
    line-height: 1.1em;
    padding: 0;
    display: none;
  }
  .gamedashcard button a {
    padding: 10px;
    font-size: 11px;
  }

  .gameFilters {
    width: calc(100% - 35px);
    margin: 25px 17.5px 15px;
  }
  .datgam_search .gameFilter,
  .datgamgames .gameFilter {
    width: calc(20% - 15px);
  }

  .datgam_search .gameFilter.loadMoreGames,
  .datgamgames .gameFilter.loadMoreGames {
    width: 100%;
    margin: 20px 0;
  }
  .gameFilter button.loadMoreButn {
    width: calc(100% - 30px);
    max-width: 250px;
    flex-direction: row !important;
    border-radius: 6px !important;
    padding: 8px 20px !important;
    transition: color 0.5s, background-color 0.5s;
  }


  .datgam_search .gameFilter, 
  .datgamgames .gameFilter {
    border-radius: 6px 6px 25px 25px;
    -moz-border-radius: 6px 6px 25px 25px;
    -webkit-border-radius: 6px 6px 25px 25px;
  }
  .datgam_search .gameFilter button,
  .datgamgames .gameFilter button {
    flex-direction: column;
    padding: 7px 4px;
    border-radius: 6px 6px 25px 25px;
    -moz-border-radius: 6px 6px 25px 25px;
    -webkit-border-radius: 6px 6px 25px 25px;
    box-shadow: var(--shadupsm) !important;
  }

  .datgam_search .gameFilter.gamesAll button span,
  .datgamgames .gameFilter.gamesAll button span {
    max-width: 30px;
  }
  .datgam_search .gameFilter button span,
  .datgamgames .gameFilter button span {
    font-size: 7px;
    line-height: 1.1em;
  }
  .datgam_search .gameFilter .filterIcon,
  .datgamgames .gameFilter .filterIcon {
    width: 30px;
    height: 30px;
    margin: 5px 0 0;
  }
    
  .gamecategory {
    width: calc(50% - 38px);
    padding: 9px 9px 12px;
    margin: 10px 10px 20px;
  }
  .categorygame {
    width: 100%;
    padding: 9px 12px 12px;
    margin: 15px;
  }
  .categorygame .datgamTots {
    top: 6px;
  }

  .gamecategory .cardimg {
    height: 100px;
  }
  .datgamTots {
    font-size: 12px;
    top: 14px;
    right: 14px;
    width: 22px;
    height: 22px;
  }

  .gamecategory h4, 
  .categorygame h4 {
    font-size: 11px;
  }
  .gamecategory p {
    font-size: 10px;
  }
  .categorygame p {
    font-size: 14px;
  }
  .categorygame p.gameExpires {
    font-size: 12px;
  }

  .datagame .gamehdrimg,
  .datagame .hdrSearchButn,
  .datgam_search .hdrSearchButn,
  .datagame .maintitle .titlesub {
    display: none !important;
  }

  
  .datagame .maintitle .gameMetaTitle .titlesub {
    display: flex !important;
  }

  .rategame button {
    margin: 25px auto 0;
    padding: 10px !important;
    font-size: 11px !important;
  }
  .resultsbox button.reloadButn {
      font-size: 1.3em;
      font-weight: 700;
      display: flex;
      padding: 12px 18px;
      color: var(--text-color);
      transition: color 0.3s;
  }
  .rategame button svg {
      color: #FF6600;
      margin: 0 0 0 10px;
  }
  .resultsbox button.reloadButn svg {
      color: #FF6600;
      margin: 0 0 0 5px;
  }

  .rateItemsHolder {
    margin: 10px 10px 60px;
    width: calc(100% - 20px);
  }

  .rateItemsHolder.rateList {
    max-width: calc(100% - 30px);
    width: calc(100% - 30px);
    margin: 10px auto 60px;
    box-shadow: none;
  }
  .rateItemHolder {
    width: calc(100% - 30px);
    padding: 12px 15px;
  }
  .gameWelcome .rateItemHolder.rateItemList {
    width: calc(100% - 30px);
    padding: 5px 10px !important;
    margin: 10px auto 0;
    box-shadow: none !important;
  }
  .rateList .rateItemList {
    width: calc(100% - 10px);
    padding: 12px 5px;
  }
  .rateListItems.sortbox {
    padding: 0;
    width: 100%;
    box-shadow: none !important;
    margin: 0;
    overflow: visible;
  }
  .rateListItems .rateListFooter {
    margin: -25px auto 30px;
    flex-direction: column;
    text-align: center;
    font-size: 0.9em;
  }


  .rankgame .sorthdr {
    padding: 0 15px;
  }
  .rankgame .sorthdr.hdrHidden {
    margin-bottom: 0 !important;
    padding: 0 15px 0px;
  }
  .rankgame .sorthdrcol.coleft, 
  .rankgame .sorthdrcol.colryt {
    padding: 0;
  }
  .cautionmsg {
    padding: 15px 5px;
    font-size: 12px;
    line-height: 1.2;
  }
  .gamealert {
    padding: 6px 16px;
    background: #FF6600;
    color: #FFF;
    font-weight: 600;
    border-radius: 8px;
    font-size: 1.0em;
    gap: 0;
    line-height: 1.2;
    margin: 10px 0;
  }
  .rankgame .infoBubl.rateRankInstrux {
    display: none;
  }
  .rankgame .sortbox {
    margin: 0 10px;
    overflow: auto;
    padding: 10px 10px 0;
    border-radius: 10px;
  } 
  .sorthdrcol button {
    width: 100%;
    margin: 0 0 25px 0;
  }
  .sorthdrcol button a {
    padding: 0 7px;
    font-size: 14px !important;
  }
  .showCancelButn button.respbutn {
    padding: 7px !important;
    margin: 15px 0;
  }

  .gameSubmitButn {
    width: 90% !important;
    padding: 10px !important;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.1;
    margin: 0 !important;
  }
  .gameSubmitButn svg {
    min-width: 26px;
    min-height: 26px;
  }
  .showCancelButn .gameSubmitButn {
    padding: 10px !important;
  }
  .rateListHeader.rateListSubmit, 
  .rateListFooter.rateListSubmit {
    margin: 10px 0 20px;
  }



  .rateListItem,
  .sortitem {
    width: calc(100% - 20px);
    max-width: calc(100% - 20px);
    height: 75px;
    margin: 5px 0 20px !important;
    padding: 7px 7px 6px;
    box-shadow: var(--shadupsm);
  }
  .hidePic .sortitem, 
  .hidePic .rateListItem {
    height: 55px;
  }

  .rankItemTop {
    margin: 0 0 5px;
    max-width: 100%;
  }
  .rateitemimg,
  .rankitemimg {
    width: 60px;
    min-width: 60px;
    height: 45px;
    margin: 0 8px 0 0;
  }
  .rateitemimg img,
  .rankitemimg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .rateitemimg,
  .rankitemimg,
  .rateitemimg img,
  .rankitemimg img,
  .rateitemimg:after,
  .rankitemimg:after {
      border-radius: 5px;
  }


  .rateListItem .rateitemname,
  .sortitem .rateitemname {
    display: flex;
    align-items: flex-start;
  }
  .rateListItem .rateitemname .namebox,
  .sortitem .rateitemname .namebox {
    border-radius: 3px;
    font-size: 10px;
    padding: 3px 0;
    align-self: flex-start;
  }
  .fontSel2 .rateListItem .rateitemname .namebox,
  .fontSel2 .sortitem .rateitemname .namebox {
    font-size: 12px !important;
  }
  .rateitemname .namebox.p3, 
  .rateitemname .namebox.p2, 
  .rateitemname .namebox.p1, 
  .rateitemname .namebox.n0, 
  .rateitemname .namebox.n1, 
  .rateitemname .namebox.n2, 
  .rateitemname .namebox.n3 {
    padding: 3px !important;
  }

  
  .hidePic .rankItemTop {
    margin: 0 0 6px;
  }
  
  .rankSelectBox {
    height: 17px;
    width: 53px;
  }
  select.rankSelect {
    height: 17px;
    padding: 0 0 1px;
    font-size: 10px;
    border-radius: 3px;
  }



  .rateItemHdr, 
  .selectFriendHdr,
  .compareFriendHdr {
    display: flex;
    align-items: center;
    margin: 0 -25px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .rateItemHdr .titlesub {
    display: none !important;
  }
  .rateItemHdr .gameNumItems .titlesub {
    display: inline-block !important;
  }
  .rateItemHdr .datgamName {
    font-size: 20px !important;
    padding: 3px 10px;
  }

  .rateItemHolder .navigationButtons {
    margin: 5px 0 30px;
  }
  .rateGameInfo {
    margin: 6px 0;
    width: calc(100% - 40px) !important;
    text-align: center;
    line-height: 1.2em;
  }
  .selectFriendHdr .rateGameInfo,
  .compareFriendHdr .rateGameInfo {
    margin: 6px -10px;
    width: calc(100% + 20px) !important;
    text-align: center;
    line-height: 1.2em;
  }

  .selectFriendHdr .rateGameInfo .smtxt09,
  .compareFriendHdr .rateGameInfo .smtxt09 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 5px 0 0;
  }
  .compareRankFriend .compareFriendHdr .rateGameInfo .smtxt09 {
    display: none;
  }
  .selectFriendHdr .rateGameInfo .smtxt09 span,
  .compareFriendHdr .rateGameInfo .smtxt09 span {
    font-size: 20px !important;
  }
  .selectFriendHdr .rateGameInfo .lgtxt14 {
    font-size: 16px !important;
  }
  .compareFriendHdr .rateGameInfo .lgtxt14 {
    font-size: 20px !important;
  }

  .rateGameInfo span {
    margin: 0px;
  }
  .rateGameInfo .metaGameName {
    font-size: 20px !important;
    line-height: 1.1em !important;
  }

  .rateGameInfo span.smtxt09 {
    font-size: 12px !important;
  }

  .itemStuff {
    height: auto;
    min-height: 325px;
  }
  .rateItem {
    width: 100%;
  }
  .utilsMeta {
    margin: 40px 20px 0;
  }
  .rateItemList .utilsMeta {
    margin: 8px 0 5px;
    padding: 9px 0 0;
    border-top: var(--topBorder);
    box-shadow: var(--topBoxShadow);
    transition: border-top 0.5s, box-shadow 0.5s;
  }
  .rateItemList #itemRanked.stickyFixed, 
  .datagame #itemRanked.stickyFixed {
    top: 50px !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 20px 0 !important;
    box-sizing: border-box !important;
  }


  .rateList .progBarTemp, 
  .rankgame .progBarTemp {
    height: 14px;
    border-radius: 9px;
  }
  .gameProgBar {
    margin: 10px 0px 15px;
  }
  .rateItemList .gameProgBar {
    margin: 15px 0px 5px;
  }
  .rateItemList .picToglHldr {
    margin-bottom: -2px;
  }
  .progBarCurNum, 
  .progBarTotNum {
    font-size: 12px;
    width: 22px;
  }
  .progBarBg {
    width: calc(100% - 46px);
    height: 14px;
  }
  .rateList .progBarTemp {
    height: 14px;
  }
  .rateItemImg {
    width: 100%;
    height: auto;
    max-height: 200px;
  }
  .rateItemImg img {
    object-fit: cover;
    width: 100%;
    height: auto;
    max-height: 200px;
  }
  .rateItemHolder .rateinfohldr {
    margin: 15px 0 0;
  }
  .rateItemHolder .rateitemname {
    width: 100%;
    height: calc(50% - 6px);
    margin: 0 0 5px;
    font-size: 12px;
  }
  .rateList .rateItemHolder .rateitemname {
    width: 100%;
    height: auto;
    margin: 0 0 8px;
    font-size: 11px;
    transition: font-size 0.3s, margin 0.3s;
  }
  .rankresults .fontSel2 .resultitem .datatag {
    font-size: 13px;
  }
  .rateList .rateItemHolder .fontSel2 .rateitemname {
    font-size: 13px;
    margin: 0 0 9px;
  }
  .rateItemHolder .rateListItem .rateitemname .namebox {
    padding: 3px 5px;
    box-shadow: none;
    max-width: 96%;
    overflow: hidden;
    transition: padding 0.3s;
  }
  .rateItemHolder .fontSel2 .rateListItem .rateitemname .namebox {
    padding: 5px;
  }

  .rateItemHolder .rateitemname .namebox {
    font-size: 15px;
    padding: 8px 12px;
  }
  .prevButn, 
  .nextButn {
    height: 50px;
    width: 30px;
    top: -5px;
    left: -30px;
    padding: 0;
    border-radius: 2px 20px 20px 2px;
  }
  .nextButn {
    border-radius: 20px 2px 2px 20px;
    padding: 0;
    left: 30px;
  }
  .skipButn, 
  .resultsButn {
    height: 40px;
    padding: 6px 9px;
    font-size: 11px;
    margin: 0 8px;
    line-height: 1.2em;
  }
  .resultsButn {
    padding: 6px 12px;
  }
  .skipButn svg{
    width: 24px !important;
    height: 24px !important;
  }
  .resultsButn svg {
    width: 30px !important;
    height: 30px !important;
  }

  .voteButnRowHldr {
    height: 30px;
    width: 100%;
    margin: 15px 0 20px 0;
  }
  .rateItemHolder .votebutnrow {
    width: calc(100% + 4px) !important;
    height: auto;
    margin: 0 -2px;
    transition: margin 0.3s;
  }
  .rateListItem .votebutn,
  .sortitem .votebutn {
    padding: 5px 0px;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0px;
    box-shadow: var(--shaduptiny);
    transition: box-shadow 0.3s;
  }
  XX.rateListItem XX.votebutn {
    padding: 3px 0 4px;
    font-size: 10px;
    margin: 2px 3px 0;
    width: calc(14.3% - 6px);
    box-shadow: var(--shaduptiny);
    transition: box-shadow 0.3s;
  }
  .fontSel2 .rateListItem .votebutn,
  .fontSel2 .sortitem .votebutn {
    padding: 2px 0px 3px;
    font-size: 15px;
    margin: 0 3px;
  }


  .votebutn.n3,
  .votebutn.n2 {
    letter-spacing: 1px;
  }
  
  .fontSel2 .votebutn.n3,
  .fontSel2 .votebutn.n2,
  .fontSel2 .votebutn.n1 {
    font-size: 17px;
    line-height: 14px;
    padding: 2px 0 4px;
  }
  .fontSel2 button.votebutn:first-child,
  button.votebutn:first-child {
    margin-left: 0 !important;
  }
  .fontSel2 button.votebutn:last-child,
  button.votebutn:last-child {
    margin-right: 0 !important;
  }


  .currCount {;
    font-size: 10px;
    right: -18px;
    top: -16px;
  }
  .currIndex {
    font-size: 10px;
    right: -6px;
    top: 11px;
  }


  .toglNad {
    flex-direction: column;
    padding: 25px  5px 20px;
    margin: 0 0 10px;
  }
  .toglNad.toglNTitle {
    padding: 10px 5px 20px;
    margin: 0 0 25px;
  }

  .titleNPriv {
    flex-direction: column;
  }
  .toglNTitle .resultsPrivTogl {
    margin: 7px 0 0 5px;
    min-width: 200px;
    align-self: flex-end;
  }

  .resTitleLbl {
    font-size: 0.8em;
    font-weight: 700;
  }
  .resTitleTxt {
      font-size: 1.3em;
      font-weight: 600;
      line-height: 1.1em;
  }
  .picToglHldr {
    margin-bottom: 10px;
  }
  .rankgame .picToglHldr {
    margin: 0 auto 10px !important;
    width: calc(100% - 40px);
  }
  .rankgame .utilsMeta .picToglHldr {
    margin: 0 15px 5px 0px !important;
    width: auto;
  }
          
  .rateresults .picToglHldr, 
  .rankresults .picToglHldr {
    align-self: flex-start;
    box-shadow: none;
    padding: 0 5px 0 0;
    border-radius: 0;
    bottom: 35px;
  }
  .compareFriend .picToglHldr {
    margin-bottom: 0px;
  }
  .compareRankFriend .picTogl,
  .compareFriend .picTogl {opacity: 1;}
  .textTogl {display: flex;}

  .fontToglBase,
  .picToglBase {
      width: 38px;
      height: 18px;
      border: 1px solid #737B9944;
      background: #737B9922;
      cursor: pointer;
      position: relative;
  }
  .fontToglKnob,
  .picToglKnob {
      width: 18px;
      height: 18px; 
      position: absolute;
      top: -1px;
      font-size: 7px;
      font-weight: 700;
      transition: all 0.3s;
  }


  .rateresults, .rankresults {
    margin: 15px 0 0;
  }
  .reshdr1 {
    flex-direction: column;
  }
  .reshdr1lft {
    width: 100%;
  }
  .reshdr1ryt {
    justify-content: start;
  }
  .gameinfotop .smtxt08 {
    font-size: 10px !important;
  }
  .gameinfotop .smtxt09 {
    font-size: 13px !important;
    font-weight: 400 !important;
  }
  .gameinfotop .titlesub {
    font-size: 22px !important;
    display: block !important;
  }
  .tagscreated, 
  .tagsvalue {
    justify-content: start;
    margin: 15px 0 5px;
  }
  .tagscreated .lgtxt19 {
    font-size: 20px !important;
  }
  .gameinfobtm .infolabel {
    font-size: 10px !important;
  }
  .valuescale {
    margin: 8px 0 0 0;
  }
  .resultsbox .donutgraph {
    margin: 5px auto 15px;
    width: calc(100% - 15px);
    height: 160px;
    box-shadow: var(--shadup);
    padding: 15px 4px 15px 16px;
    border-radius: 90px 6px 6px 10px;
    transition: box-shadow 0.3s;
  }
  .donutchart {
    width: 160px;
    height: 160px;
    padding: 0px;
    margin: 0 10px 0 0;
  }

  .donutgraph.simple-chart-view .donutchart {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    margin: -2px 15px 0 -2px;
    padding: 0px;
    box-shadow: var(--shadupsm);
    transition: box-shadow 0.5s;
  }  
  .simple-chart-view .donut-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64%;
    height: 64%;
    border-radius: 50%;
    background-color: var(--background-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: var(--shadinsetsm);
    transition: box-shadow 0.5s, background-color 0.5s;
  }


  .donutlegend {
    width: calc(100% - 115px);
    height: 160px;
    margin: 15px 0 0;
  }

  .legendrow {
    padding: 0;
  }
  .legendrowlft .votelabelarm,
  .legendrowlft .votelabel {
    height: 14px;
  }
  .legendrowlft .votelabelarm {
    width: 90px;
  }
  .legendrowlft .votelabel {
    margin: 0 0 0 -1px;
    justify-content: flex-end;
    padding: 0 6px 0 0;
  }

  .voteavg {
    font-size: 30px;
  } 
  .votenumber,
  .voteperc {
    font-size: 12px;
    width: 40px;
  }

  .reshdr2 {
    margin: 0 -10px 20px;
  }

  .resultsbox .butndiv {
    margin: 0 0 10px;
    width: 50%;
  } 
  .rateresults .resultsbox .butndiv.butndiv3 {
    display: none;
  }
  .resultsbox button {
    width: 90%;
    margin: 5px auto;
  }
  .resultsbox button a, 
  .rateListFooter button a {
    padding: 5px 7px;
  }
  .sorthdrcol button a svg, 
  .resultsbox button a svg, 
  .rateListFooter button a svg {
    margin: 0 5px 0 0;
    min-width: 30px;
    min-height: 30px;
  }


  .butndiv.inviteButnDiv {
    width: calc(100% - 40px) !important;
    padding: 15px 15px 25px;
    margin: 10px auto 20px !important;
    flex-direction: column;
  }
  .inviteInstrux {
    font-size: 13px;
    align-items: center;
    text-align: center;
  }
  .inviteInstruxTxt {
    font-weight: 400 !important;
    padding: 0 !important;
    line-height: 1.3;
  }
  .inviteButnDiv .copyInvButn {
    margin: 15px 0 0 !important;
    padding: 8px 5px 8px 15px !important;
    font-size: 16px !important;
  }


  .resultsPage.userGamePriv .privButn {
    width: calc(90% - 20px);
    margin: 7px 0 0 !important;
    padding: 10px;
    font-size: 11px;
    float: right;
  }
  .butndiv .resultsPage.userGamePriv .privButn {
    width: calc(90% - 18px);
    margin: 0 auto !important;
    padding: 8px 9px;
    float: none;
  }
  .resultsPage.userGamePriv .privButn svg {
    width: 30px;
    height: 30px;
  }
  .butndiv.compFriendButn {
    order: 1;
  }
  .butndiv.gamePrivButn {
    order: 2;
  }
  .butndiv.compAvgButn {
    order: 3;
  }
  .butndiv.compOffResButn {
    order: 4;
  }
  .resultsbox .resultsListInfo {
    padding: 8px 5px;
    margin: 0 0 20px;
    flex-direction: column;
  }
  .resultsbox .resultsInfoCol {
    display: none;
    flex-direction: column;
    padding: 5px;
    justify-content: center;
    width: calc(100% - 10px);
    font-size: 11px;
  }
  .resultsbox .resultsInfoCol span b {
    display: block;
  }
  .rankresults .resultsEditCol {
    width: 100%;
    font-size: 13px;
  }
  .resultsbox .resultsEditCol button.respbutn {
    margin: 5px 4px 5px 7px;
  }
  .resultsbox .rankresults .resultsEditCol button.respbutn {
    width: calc(100% - 15px);
  }


  .rankresults .expdMsg {
    width: calc(100% - 35px);
    gap: 0;
    font-size: 11px;
    line-height: 1.2em;
    margin: 0 auto 3px;
  }
  .rankresults .expdMsg svg {
    margin: 0 8px 0 3px;
  }


  .rateresults .editRatings,
  .rankresults .editRatings {
    display: none !important;
  }
  .rankresults .editButns,
  .rateresults .editButns {
    width: 100%;
  }
  .rateresults .resultsEditCol button {
    width: calc(50% - 10px);
    margin: 0 5px;
  } 
  .resultsbox .rateresults .resultsEditCol button a {
    padding: 3px;
  }



  .gameresultslist {
    padding: 0 8px;
  }
  .rankresults .gameresultslist {
    margin: 5px -5px 0;
  }
  .resultitem {
    height: 36px;
    padding: 10px 0;
    min-width: 100%;
  }
  .utilsMeta.addMobiMargTop {
    padding-top: 50px;
    margin: 0 15px;
  }
  .rankedSpots {
    width: calc(100% - 8px);
    margin: 0 0 40px;
    padding: 15px 4px 0;
  }
  .regRanked.rankedSpots {
    margin: 0 10px 40px;
    width: calc(100% - 34px);
  }
  .rankedTitle {
    padding: 0 0 10px 0;
    margin: 0 0 15px 5px;
  }
  .rankedSpot {
    width: calc(100% - 18px) !important;
    min-width: auto !important;
    height: 88px;
    margin: 0 auto 15px;
    padding: 0 !important;
  }
  .regRanked.hidePic .rankedSpot {
    height: 68px;
  }
  .regRanked.rankedSpots .sortitem {
    width: calc(100% - 14px);
    max-width: calc(100% - 14px);
  }
  .resultsbox .rankedSpot {
    height: 50px;
  }

  .top1 .rankSpot1,
  .top3 .rankSpot1 {
      border: 2px solid #FFBB00 !important;
      width: calc(100% - 4px) !important;
  }
  .top3 .rankSpot2 {    
      border: 2px solid #C0C0C0 !important;
      width: calc(100% - 4px) !important;
  }
  .top3 .rankSpot3 {
      border: 2px solid #CD7F32 !important;
      width: calc(100% - 4px) !important;
  }



  .resultimg, 
  .resultimg img {
    height: 38px;
    width: 50px;
    min-width: 50px;
    transition: all 0.5s ease-in-out;
  }
  .resultitem a {
    overflow: scroll;
  }
  .resultitem .datatag {
    padding: 2px 6px;
    border-radius: 5px;
    color: #FFF;
    font-size: 11px;
    font-weight: 600;
    text-wrap: nowrap;
    text-shadow: 1px 1px 0 #111;
    letter-spacing: 0;
  }
  .fontSel2 .resultitem .datatag {
    font-size: 14px;
  }

  .compareRankFriend,
  .compareFriend,
  .selectFriend {
    width: calc(100% - 30px);
    min-width: calc(100% - 30px);
    margin: 0 15px 30px;
    box-shadow: none !important;
  }

  .mobiLayout {
    width: 100%;
  }
  .friendNameMeta .scoreInfo .scoreSimVal {
    padding: 0 12px 0 0;
  }


  .plyrOrdrMsg {
    margin: 0 15px 12px;
    flex-direction: column;
  }
  .maxdMsg,
  .ordrMsg {
    align-self: flex-start;
  }
  .selectFriendCard {
    flex-direction: column;
    margin: 15px 10px 30px;
    padding: 10px !important;
    box-shadow: var(--shadupsm);
    border-radius: 8px;
    width: calc(100% - 40px);
  }
  .rankFriend .selectFriendCard {
    margin: 15px 0 30px;
    width: calc(100% - 20px);
  }
  .scoreHldr {
    justify-content: start;
    width: 100%;
    position: relative;
    margin: 10px 0 0 0;
  }
  .rankFriend .scoreHldr {
    justify-content: space-between;
    align-self: flex-end;
  }
  .rankFriend .offResultsCard .scoreHldr {
    margin: 15px 0 0 0;
  }
  .rankFriend .offResultsCard .friendName {
    font-size: 18px !important;
  }


  .freindInfo {
    width: 100%;
  }
  .friendIndexNum {
    top: 50px;
    left: -10px;
    width: 16px;
    height: 16px;
    font-size: 9px;
  }
  .selectFriend .friendIndexNum {
    top: -8px;
    left: -9px;
  }
  .friendAvatar {
    margin: 0 7px 0 4px;
  }
  .friendAvatar,
  .friendAvatar img,
  .friendAvatar figure:after {
    height: 36px;
    width: 36px;
  }
  .friendName.lgtxt12 {
    font-size: 16px !important;
  }
  .selectFriend.rankFriend .friendName.lgtxt12 {
    font-size: 15px !important;
  }
  .friendLink {
    width: 30px;
    height: 30px;
    position: absolute;
    top: -50px;
    right: 0px;
    margin: 0 0 0 10px;
  }

  .friendLink .wyt.smtxt065 {
    font-size: 8.5px !important;
  }

  .rankFriend .friendLink {
    top: -45px;
  }
  .friendLink svg {
    width: 20px !important;
    height: 20px !important;
  }

  .selectFriendCard .scoreGraph {
    width: 80px;
    height: 42px;
  }
  .rankFriend .selectFriendCard .scoreGraph {
    margin: 0 5px;
  }
  .rankFriend .scoreGraph.rankGraph {
    order: 5;
  }
  .selectFriendCard .graphNeedle,
  .selectFriendCard .graphNeedleBlur {
    width: 35px;
  }
  .scoreSimVal {
    padding: 0 0 0 8px;
  }
  .scoreSimVal span {
    font-size: 25px;
    line-height: 25px;
  }
  .scoreSimVal small {
    font-size: 9px;
    line-height: 1em;
  }

  .compareRankFriend .shareButnHldr, 
  .compareFriend .shareButnHldr {
    display: none;
    position: absolute;
    top: 0px;
    right: 0px;
  }
  .compareRankFriend .hdrSearchButn,
  .compareFriend .hdrSearchButn {
    display: none;
    padding: 3px 7px;
    min-width: 120px;
    border-radius: 14px;
    font-size: 8px;
  }
  .compareRankFriend .hdrSearchButn svg,
  .compareFriend .hdrSearchButn svg {
    width: 18px;
    height: 18px;
    margin: 0 5px 0 0;
  }
  .compareRankFriend .compareFriendHdr,
  .compareFriend .compareFriendHdr{
    padding: 15px 30px 20px;
    margin: 0;
  }

  .compareFriend .compareWrapper, 
  .compareRankFriend .compareWrapper {
    margin: 0 auto 10px;
    padding: 0 0 10px;
    border-bottom: 1px solid #737B9944;
  }


  .compareRankFriend .compareAvatars,
  .compareFriend .compareAvatars {
    justify-content: space-around;
    padding: 15px 0 0;
    gap: 0;
    margin: 0;
  }
  .avatarIcon {
    width: 30px;
  }
  .compVS {
    font-size: 20px;
    width: 30px;
  }
  .avatarLeft, 
  .avatarRight {
    display: flex;
    align-items: center;
    width: calc(50% - 15px);
    gap: 0;
    flex-direction: column;
  }
  .compUserAvatar,
  .compUserAvatar img,
  .compUserAvatar::after {
    width: 90px;
    height: 90px;
  }
  .compUserAvatar.statsIcon svg {
    width: 50px;
    height: 50px;
    margin: 0 0 5px;
  }

  .statsAvgMeta {
    position: relative;
  }
  .statsAvgTotPlyrs {
    position: absolute;
    display: flex;
    flex-direction: row;
    top: 16px;
    align-items: center;
    justify-content: space-around;
    width: 100%;
  }
  .vsrankfriend .statsAvgTotPlyrs {
    top: 23px;
  }
  .statsAvgTotPlyrs .smtxt07 {
    font-size: 8px !important;
  }
  .statsAvgTotPlyrs .lgtxt16 {
    font-size: 10px !important;
  }


  .compUserName {
    font-size: 11px !important;
    margin: 2px 0 0;
    font-weight: 500;
  }
  .compareAvatars .avatarLeft .compUserName {
    order: 5;
  }
  .gameItemsNum {
    margin: 0 0 7px 0;
  }
  .totGameItems .gameItemsNum {
    margin: 0;
  }
  .compSvgSep {
    padding: 0 30px;
    margin: -15px 0 0;
  }
  .compareRankFriend .compSvgSep,
  .compareFriend .compSvgSep {
    margin: -10px 0 0;
    padding: 0;
  }
  .compareStats {
    padding: 0px 0 25px;
    flex-direction: column;
    gap: 0;
  }
  .compareRankFriend .compareStats {
    padding: 0 0 15px;
    margin: 0;
    flex-direction: row;
    flex-wrap: wrap;
  }


  .compareStats .topicCol,
  .compareStats .simCol {
    gap: 0;
    line-height: 1.3em;
    padding: 0;
    order: 1;
    width: 100%;
    justify-content: center;
    align-items: center;
  }
  .compareStats .speedoCol {
    order: 2;
    margin: 10px 0 0;
  }

  .compareStats .simCol {
    order: 3;
    margin: 20px 0 0;
  }
  .compareStats .simPerc {
    font-size: 54px !important;
  }
  .compareStats .simTxt {
    font-size: 13px;
  }


  .compareRankFriend .compareStats .topicCol {
    order: 1;
    width: 100%;
  }
  .compareRankFriend .compareStats .speedoCol {
    order: 2;
    width: 50%;
    margin: 10px 0px 0;
    align-items: center;
    justify-content: center;
  }
  .compareRankFriend .compareStats .simCol {
    order: 3;
    width: 50%;
    margin: 13px 0 0;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }
  .compareRankFriend .compareStats .simPerc {
    font-size: 42px !important;
    letter-spacing: -1px;
  }
  .compareRankFriend .speedoCol .recharts-wrapper {
    width: 130px !important;
    height: 65px !important;
  }
  .compareRankFriend img.mvrspeedoicon {
    width: 20px;
    left: calc(50% - 10px);
  }

  .compareRankFriend .compActionButns, 
  .compareRankFriend .moreActionButns {
    padding: 20px 0 10px;
    flex-wrap: wrap;
    margin: 0;
  }
  
  .compareRankFriend .toglNad {
    padding: 0 0 10px;
    margin: -10px 0 10px;
  }
  .compareRankFriend .picToglHldr, 
  .rateresults .picToglHldr, 
  .rankresults .picToglHldr {
    padding: 5px 8px;
    }

  .compareRankFriend .gameCriteria {
    width: calc(100% - 30px);
    margin: 20px 0;
    padding: 10px 15px;
    flex-direction: column;
    align-items: flex-start;
  }
  .compareRankFriend .rateCrit, 
  .compareRankFriend .rankCrit {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 12px !important;
    line-height: 1;
    margin: 5px 0;
  }
  .compareRankFriend .rateCrit .font600, 
  .compareRankFriend .rankCrit .font600 {
    width: 50px;
    text-align: right;
  }
  
  .resultitem .itemposnum {
    font-size: 11px;
    height: 17px;
    width: 17px;
    min-width: 17px;
    margin: 0 8px 0px 0px;
  }
  .rankedSpots .resultitem .itemposnum {
    margin: 0 5px;
    font-size: 11px;
    height: 17px;
    width: 17px;
    min-width: 17px;
  }
  .compareRankFriend .rankedSpot .itemposnum {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    height: 15px;
    width: 15px;
    min-width: 15px;
    margin: 0 3px;
  }

  .compGameName {
    text-align: center;
    margin: -10px auto 8px;
  }
  .compGameName .lgtxt14 {
    font-size: 20px !important;
  }
  
  .compareRankFriend .compGameName {  
    margin: -10px auto 15px;
    width: calc(100% - 20px);
    max-width: calc(100% - 20px);
  }
  .compareRankFriend .gameName {
    padding: 0;
    font-size: 22px;
    line-height: 1.2;
  }
  .compareRankFriend .compGameItems,
  .compareFriend .compGameItems {
    display: none;
  }
  .compGameItems {
    align-items: center;
    gap: 0;
    justify-content: center;
    text-align: center;
  }
  .totGameItems, 
  .ratedGameItems {
    padding: 0 20px;
  }
  .compActionButns,
  .moreActionButns {
    margin: 0 10px;
    padding: 15px 0;
    flex-wrap: wrap;
    gap: 0px;
  }
  .compActionButns button, 
  .moreActionButns button {
    border-radius: 5px !important;
    width: calc(50% - 20px);
    margin: 10px;
  }
  .compActionButns button a, 
  .moreActionButns button a {
    padding: 3px !important;
    font-size: 10px;
    line-height: 1;
  }
  .compareTableHldr {
    margin: 0 5px;
    width: calc(100% - 10px);
  }
  .compareTHeadRow,
  .compareTBodyRow {
    padding: 7px 0;
    width: 100%;
    max-width: calc(100vw - 45px);
    display: flex;
    align-items: center;
    justify-content: end;
    justify-content: flex-end;
    -webkit-justify-content: flex-end;
  }
  .tabledatgamitmImgCol {
    width: 40px;
    height: 30px;
    position: relative;
  }
  .tabledatgamitmImgCol img {
    width: 40px;
    height: 28px;
    object-fit: cover;
    border-radius: 4px;
  }
  .tabledatgamitmImgCol::after {
    width: 40px;
    height: 28px;
  }
  .compareTHeadRow th.tableuserVoteValCol, 
  .compareTHeadRow th.tablestatsVoteValCol, 
  .compareTHeadRow th.tableuser1VoteValCol, 
  .compareTHeadRow th.tableuser2VoteValCol {
    padding: 0 2px;
    width: 40px;
    font-size: 8px;
  }
  th.tabledatgamitmImgCol,
  th.tabledatgamitmNameCol {
    font-size: 8px !important;
  }
  th.tablevoteValDiffCol span {
    display: none;
  }
  .compareTHeadRow th {
    flex-direction: column;
    max-height: 33px;
  }

  .tabledatgamitmNameCol {
    width: calc(100% - 146px);
    font-size: 10px !important;
    margin: 0 5px !important;
    padding: 0px !important;
    gap: 0;
    transition: width 0.3s;
    overflow: hidden;
  }
  .hidePic .tabledatgamitmNameCol {
    width: calc(100% - 110px);
  }
  .fontSel2 .tabledatgamitmNameCol {
    font-size: 12px !important;
  }

  .compareTHeadRow th.tableuser1VoteValCol, 
  .compareTHeadRow th.tableuser2VoteValCol, 
  td.tableuser1VoteValCol, 
  td.tableuser2VoteValCol,
  td.tableuserVoteValCol, 
  td.tablestatsVoteValCol, 
  th.tablevoteValDiffCol {
    font-weight: 700;
    font-size: 11px;
    height: 30px;
    width: 32px;
    min-width: 32px;
    padding: 0 2px 0 0;
  }
  .tableuser1VoteValCol .lineh10,
  .tableuser2VoteValCol .lineh10 {
    gap: 0px;
    margin: 0px 0px 5px !important;
  }
  .tableuserVoteValCol span, 
  .tablestatsVoteValCol span, 
  .tableuser1VoteValCol span, 
  .tableuser2VoteValCol span {
    padding: 2px 3px;
    border-radius: 3px;
    width: 21px;
    min-width: 21px;
  }
  .tablevoteValDiffCol {
    width: 40px;
  }
  .tablevoteValDiffCol span {
    width: 90%;
    height: 22px;
    font-size: 8px;
    border-radius: 3px;
  }


  .compareTHeadRow {
    padding: 10px 0 5px;
  }
  .compareTHeadRow th svg {
    margin: 0 0 3px;
    max-width: 12px;
    max-height: 12px;
  }
  .compareTHeadRow th.tableuserVoteValCol, 
  .compareTHeadRow th.tablestatsVoteValCol, 
  .compareTHeadRow th.tableuser1VoteValCol, 
  .compareTHeadRow th.tableuser2VoteValCol {
    font-size: 8px;
    padding: 0 0px;
    width: 40px;
  }
  .compareTHeadRow th.tablevoteValDiffCol {
    font-size: 8px;
  }
  .compareRankFriend .infoBubl.infoRateDiff,
  .compareFriend .infoBubl.infoRateDiff {
    display: none;
    top: 0px;
    right: 0px;
  }
  .moreActionButns {
    justify-content: space-between;
    margin: 5px 5px 0;
  }

  .hidePic th.tabledatgamitmImgCol,
  .hidePic td.tabledatgamitmImgCol{
    display: none;
  }


  .userGame {
    margin: 0 0 25px;
    padding: 7px;
    font-size: 9px;
    flex-wrap: wrap;
    max-width: calc(100vw - 60px);
    height: auto;
    transition: box-shadow 0.3s, height 0.5s;
  }
  .userGame:hover {
    box-shadow: var(--shadup);
  }

  
  .userGamesHdr {
    display: flex;
    justify-content: space-between;
    font-size: 8px;
    margin: 0 0 5px;
    padding: 0;
    max-width: calc(100vw - 50px);
  }
  .userGamesHdr .userGameImg,
  .userGamesHdr .userGameName {
    display: none;
  }
  .usrGameCell {
    font-size: 8px;
    line-height: 1.2em;
    min-height: 30px;
    padding: 0 2.5px;
    margin: 0;
    border: none !important;
    transition: font-size 0.5s, line-height 0.5s;
  }

  .userGame:hover .usrGameCell {
    font-size: 9.5px;
    font-weight: 500;
    line-height: 9px;
  }
  .usrHdrCell {
    padding: 0 2.5px;
  }
  .userGameImg {
    width: 100%;
  }
  .userGameName {
    width: 100%;
    height: auto;
    padding: 0 5px 0 8px;
    margin: 0 0 6px;
    font-weight: 600 !important;
    justify-content: start;
    border: none;
  }
  .userGameName a.gameLink {
    font-size: 15px;
    line-height: 17px;
    letter-spacing: -0.5px;
    text-align: left;
    padding: 10px 0;
    height: auto;
  }
  .userGameMeta {
    margin: 3px 0 5px !important;
    width: 100%;
  }
  .copyInvButn,
  .viewConxnButn.copyInvButn {
    font-size: 10px !important;
    font-weight: 700;
    font-family: 'Poppins';
    line-height: 1.2;
    padding: 3px 10px 3px 5px !important;
    border-radius: 4px !important;
  }
  .userGameId {
    font-size: 9px !important;
    margin-left: 3px !important;
  }

  .userGameType {
    width: auto;
    height: 30px;
    flex-grow: 2;
    padding: 2px 2.5px 0;
  }
  .userGamesHdr .userGameType {
    height: 30px;
    padding: 0 2.5px;
  }
  .userGameMode {
    width: 28px;
  }
  .userGameRated {
    width: 34px;
  }
  .userGamePlyd {
    width: 42px;
  }
  .userGameDone {
    width: 40px;
  }
  .userGameExp {
    width: 42px;
    border: none;
  }
  .usrHdrCell.userGamePriv, 
  .usrGameCell.userGamePriv {
    width: 30px;
    padding: 0;
  }
  .usrGameCell.userGamePriv span {
    padding: 3px 0 3px;
    width: 33px;
    margin: 0 0 0 0px;
  }
  .usrGameCell.userGamePriv span svg {
    width: 14px;
    height: 14px;
    margin: 0 0 1px;
  }
  .usrGameCell.userGamePriv span small {
    font-size: 6px;
    line-height: 6px;
  }
  .totGameItems, 
  .ratedGameItems {
    padding: 0 5px;
  }

  .usersGames .hdrSearchButn {
    display: none;
  }
  
  .gameSearchInputs {
    flex-direction: column;
    margin: 20px 10px 25px;
  }
  .searchType {
    width: calc(100% - 10px);
    padding: 0 0 15px;
    gap: 0;
    line-height: 1.3em;
    font-size: 15px !important;
  }
  .searchInstrux small {
    font-size: 11px;
    line-height: 12px !important;
    margin: 5px 30px 10px;
    display: inline-block;
  }
  .gameInfoSearch {
    border: none;
  }
  .gameItemSearch {
    border: none;
    margin: 20px 0 0;
  }
  .searchForm {
    gap: 0;
  }
  .searchInstrux {
    font-size: 16px;
  }
  .searchForm input {
    width: 50%;
    height: 15px;
    font-size: 12px;
  }
  .gameSearchButton {
    width: 38%;
    height: 35px;
    justify-content: flex-start;
    border: none;
    gap: 0;
    padding: 3px 3px 3px 6px;
    font-size: 11px;
    margin: 0 0 0 7px;
  }
  .gameSearchButton svg {
    width: 17px;
    height: 17px;
    margin: 0 6px 0 0;
  }

  .searchQuery {
    margin: 0 20px 35px;
    flex-direction: column;
  }
  .searchQuery h2 {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .noResults {
    font-size: 12px;
    margin: 0 20px;
  }
  .ratelistSpecInstrux {
    margin: 5px 5px 15px !important;
    font-size: 12px;
    padding: 5px 10px 0 !important;
  }
  .ratelistSpecInstrux .spec_instrux_hldr {
    margin: 0 auto;
    width: 100%;
  }
  .ratelistSpecInstrux .spec_instrux {
    font-size: 12px;
  }
  .ratelistSpecInstrux .votebutn {
    padding: 2px 1px 3px;
    font-size: 14px;
    line-height: 14px;
  }
  .ratelistSpecInstrux .left-arrow .arrow-body {
    box-shadow: -5px 1px 5px #00000066;
  }
  .ratelistSpecInstrux .right-arrow .arrow-body {
    box-shadow: 5px 1px 5px #00000066;
  }

  .compareTablesWrapper {
    overflow: hidden;
  }
}

@media screen and (orientation: portrait) {
  /* Remove the global rotation styles since we're now using a local approach */
  .mvrclasses.vsrankfriend,
  .mvrclasses.vsrankconx {
    /* Remove transform and other properties */
    /* Keep normal mobile styling */
  }
  
  /* Style for the specific compare tables overlay in portrait mode */
  .rotate-device-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    background: rgba(0, 0, 0, 0.90);
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    line-height: 1.2;
    border-radius: 8px;
    border: 2px solid #FF6600;
  }
  
  .rotate-device-message {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    padding: 20px;
    text-align: center;
    font-size: 1.4em;
    font-weight: 500;
    color: #fff;
    z-index: 20000;
  }
}

@media screen and (orientation: landscape) and (max-width: 821px) {

  header.hdrPos {
    position: absolute;
  }
  .selectFriendHdr .rateGameInfo .lgtxt14,
  .compareFriendHdr .rateGameInfo .lgtxt14 {
    font-size: 22px !important;
    font-weight: 500;
  }
  .compareRankFriend .compUserAvatar, 
  .compareRankFriend .compUserAvatar img, 
  .compareRankFriend .compUserAvatar::after {
    width: 110px;
    height: 110px;
  }
  .compareRankFriend .compUserName {
    font-size: 16px !important;
  }
  .compareRankFriend .compGameName {
    max-width: 100%;
    align-self: center;
    text-align: center;
    margin: 0 0 10px;
  }
  .compareRankFriend .gameName {
    padding: 0 20px;
  }
  .compareRankFriend .gameName h3 {
    font-size: 25px !important;
    margin: 0px !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    color: #FF6600;
    line-height: 1.1em;
  }
  .compareRankFriend .compareStats {
    flex-direction: row;
    margin: 0 10px;
  }

  .vsrankfriend .compareFriendHdr .rateGameInfo {
    width: auto !important;
    margin: 0;
  }
  .vsrankfriend .compareFriendHdr .titleexp, 
  .vsrankconx .compareFriendHdr .titleexp {
    width: calc(100% - 40px);
    text-align: center;
    font-size: 8px !important;
  }
  .vsrankfriend .compareFriendHdr .titleexp br,
  .vsrankconx .compareFriendHdr .titleexp br {
    display: none;
  }
  .vsrankfriend .compareFriendHdr .titleexp span i,
  .vsrankconx .compareFriendHdr .titleexp span i {
    margin-left: 20px;
  }



  .vsrankfriend .compareStats .simCol.simCol1,
  .vsrankconx .compareStats .simCol.simCol1 {
    order: 1;
    margin: 20px 0 0;
    width: 20%;
  }
  .vsrankfriend .compareStats .speedoCol.speedoCol1,
  .vsrankconx .compareStats .speedoCol.speedoCol1 {
    order: 2;
    margin: 20px 0 0;
    width: 30%;
  }
  .vsrankfriend .compareStats .topicCol,
  .vsrankconx .compareStats .topicCol {
    display: none;
  }
  .vsrankfriend .compareStats .speedoCol.speedoCol2,
  .vsrankconx .compareStats .speedoCol.speedoCol2 {
    order: 3;
    margin: 20px 0 0;
    width: 30%;
  }
  .vsrankfriend .compareStats .simCol.simCol2,
  .vsrankconx .compareStats .simCol.simCol2 {
    order: 4;
    margin: 20px 0 0;
    width: 20%;
  }


  .compareRankFriend .speedoCol .recharts-wrapper {
    width: 140px !important;
    height: 70px !important;
  }
  .compareRankFriend .speedoGrafHldr {
    padding: 5px;
    border-radius: 70px 70px 6px 6px;
    margin: 0 8px;
  }
  .compareRankFriend .compareStats .simPerc {
    font-size: 40px !important;
  }
  .compareRankFriend .compareStats .simTxt {
    padding: 0 !important;
    overflow: visible !important;
    font-size: 10px !important;
    max-width: 70px !important;
    white-space: normal !important;
    line-height: 1.2em !important;
    text-align: center !important;
  }
  .compareRankFriend .infoBubl.infoSimScore {
    top: -15px;
    right: 0px;
  }
  .compareRankFriend .gameCriteria {
    margin: 0 0 20px;
    font-size: 12px;
    flex-direction: column;
  }
  .rateCrit, 
  .rankCrit {
    width: 100%;
  }

  .compActionButns button, 
  .moreActionButns button {
    border-radius: 4px;
    width: calc(25% - 10px);
    margin: 5px;
  }

  .compareMainHdr {
    margin: 0 5px 10px;
  }
  .compareItemRowHdr {
    height: 55px;
    padding: 0 0 2px;
  }
  .compareItemRowHdr.hdrRowLft {
    width: 47%;
    padding-right: 11%;
  }
  .compareItemRowHdr.hdrRowRyt {
    width: 42%;
  }
  .compareHdrTop {
    font-size: 12px;
    margin: 0 !important;
  }
  .compHdrLabel .infoBubl.infoRateDiffRank {
    top: 3px;
    left: -17px;
  }
  .compHdrLabel .infoBubl.infoRankDiff {
    top: 3px;
    right: -20px;
  }

  .compHdrLabel {
    font-size: 8px;
    flex-direction: column;
  }
  .compHdrLabel .compareUser1Pos, 
  .compHdrLabel .compareUser2Pos {
    width: 25px;
  }
  .compareSentDiff,
  .compareRankDiff {
    width: 30px;
    padding: 3px 0 0;
    position: relative;
  }
  .compareUser1Item {
    width: calc(100% - 85px);
  }
  .compareUser2Item {
    width: calc(100% - 25px);
  }

  .compareRankFriend .compActionButns, 
  .compareRankFriend .moreActionButns {
    padding: 15px 0 30px;
  }
  .compareRankFriend .toglNad {
    padding: 0 0 10px;
    margin: -10px 0 30px;
  }

  .compareTables {
    width: calc(100% - 10px);
    margin: 0 5px;
  }
  .compareRankFriend .compareTables {
    width: 100%;
    margin: 0;
  }
  .compareRankFriend .compareUser1Table {
    width: 47%;
  }
  .compareRankFriend .compareUser2Table {
    width: 42%;
  }
  .compareRankFriend .compareItemRow {
    width: 100%;
    height: 40px;
    padding: 0;
  }
  .compareRankFriend .hidePic .compareItemRow.rankedSpot,
  .compareRankFriend .hidePic .compareItemRow {
    height: 30px;
  }
  .compareRankFriend .compareItemRow.rankedSpot {
    height: 40px;
    border-radius: 6px;
  }
  .compareRankFriend .rankedSpot .compareUser2Img {
    margin: 0 0 0 5px;
  }
  .compareItemRow .compareUser1Pos,
  .compareItemRow .compareUser2Pos {
    font-size: 8px;
    font-weight: 600;
    width: 21px;
    color: #666;
  }
  .compareUser1Img, 
  .compareUser2Img {
    width: 40px;
    min-width: 40px;
    margin: 0;
    align-items: center;
  }
  .compareUser1Img img, 
  .compareUser2Img img {
    width: 40px;
    min-width: 40px;
    height: 30px;
    border-radius: 4px;
  }
  .compareUser1Tag {
    width: calc(100% - 117px);
  }
  .hidePic .compareUser1Tag {
    width: calc(100% - 72px);
  }
  .rankedSpot .compareUser2Tag,
  .compareUser2Tag {
    width: calc(100% - 66px);
  }
  .hidePic .compareUser2Tag,
  .hidePic .rankedSpot .compareUser2Tag {
    width: calc(100% - 21px);
  }
  .compareUser1Tag .datatag, 
  .compareUser2Tag .datatag {
    color: #FFF;
    font-weight: 600;
    font-size: 9px;
    text-shadow: 0.5px 0.7px 0 #000;
    border-radius: 3px;
    padding: 2px 4px;
    margin: 0 5px;
  }
  .fontSel2 .compareUser1Tag .datatag, 
  .fontSel2 .compareUser2Tag .datatag {
    font-size: 11px;
  }

  .compareUser1VoteDiff {
    width: 36px;
  }
  .voteDiff {
    width: 30px;
    height: 18px;
    font-size: 7px;
    padding: 0;
    line-height: 1em;
    font-weight: 500;
    text-shadow: 0.5px 0.6px 0 #000;
    border-radius: 3px;
  }

  .compareRankGap {
    width: 20px;
  }
  .rankGap {
    width: 16px;
    height: 16px;
    border-radius: 10px;
    text-shadow: 0.5px 0.6px 0px #000;
    font-size: 10px;
  }
  .ftrLegal.smtxt06 {
    font-size: 8px !important;
  }

  .compareRankFriend .compActionButns,
  .compareRankFriend .gameCriteria,
  .compareRankFriend .butndiv.inviteButnDiv,
  .compareRankFriend .gameWelcAd.gameAd2 {
    display:none
  }





  /*  DANGER - THIS IS NOT  821PX */
}