@media (max-width: 821px) {

    .inviteLoginButn.modebutn {
        padding: 6px 8px 6px !important;
        margin: 0 5px 2px 10px !important;
        width: auto !important;
        font-size: 10px;
        height: 24px;
    }

    .inviteLoginButn.modebutn svg {
        margin: 0 0 0 6px !important;
        height: 18px !important;
        width: 18px !important;
    }

    .datgamgames.DataDating .dashdr {
        margin: 0 10px 40px;
        padding: 0 10px 30px;
        width: calc(100% - 40px);
        justify-content: space-between;
    }

    .datingWelcome .gamelist {
        padding: 0 7px;
    }


    .datgamgames.DataDating.datingWelcome .dashdr {
        margin: 0 10px 30px;
        padding: 0 10px 20px;
    }

    .datingdashinfo .dashinfoMobi .dashinfocont {
        margin: 0 0 10px;
    }
    .datingdashinfo .dashinfoMobi .dashinfocont .titlesub {
        font-size: 13px !important;
    }


    .datingwelcinfo .hdrSearchButn.datingMobi {
        color: #FFF;
        background-color: #FF6600;
        border: 2px solid #FF6600;
        margin: 0 auto;
        position: relative;
        right: 0;
        top: 0;
        padding: 4px 12px;
    }
    .datingwelcinfo .hdrSearchButn.datingMobi:hover {
        background: #EE5500;
    }
    .userdeets .thememode.modebutn {
        margin: 0 0 2px !important;
        padding: 3px 0 0;
    } 
    .userdeets .thememode.modebutn svg {
        width: 16px;
        height: 16px;
    }

    .datingWelcome .dashdr .maintitle {
        font-size: 1.7em;
        letter-spacing: -1px;
        line-height: 1em;
        font-weight: 400;
    }
    .datingWelcome .dashdr .dashdricon svg {
        min-width: 32px;
        min-height: 32px;
    }

    .datingWelcAvatar,
    .datingwelcinfo .dashinfoMobi .avMain,
    .datingWelcIcon { 
        width: 86px;
        height: 86px;
    }


    .datingWelcome .gameWelcTitle {
        font-size: 18px !important;
        justify-content: center;
    }
    .DataDating .datingdashinfo {
        width: calc(100% - 20px);
        margin: -10px 0px 0;
        padding: 0 10px;
        flex-wrap: wrap;
        border-bottom: none;
        box-shadow: none;
    }

    .rateGameInfo .gameWelcDesc {
        font-size: 12px !important;
        padding: 0 20px;
        line-height: 1.1em;
        margin: 10px 0 5px;
    }

    .resultsbox.DataDating .dashHdrMeta {
        flex-direction: row !important;
        justify-content: center;
        font-size: 16px;
    }

    .DataDating .dashdrlft {
        padding: 25px 0 0;
    }
    .datingWelcome .dashdrlft {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .datingWelcome .dashinfolft,
    .datingWelcome .dashinfomidl,
    .datingWelcome .dashinforyt{
        display: none;
    }
    .datingWelcome .dashinfoMobi {
        display: inline-block;
        width: 100%;
        padding: 0 !important;
        margin: 0 0 50px !important;
        text-align: center;
    }

    .datingcatstitle {
        width: calc(100% - 20px);
        margin: 0 10px 10px;
        padding: 15px 0px 0;
    }

    .hdrSearchButn.datingTopx,
    .hdrSearchButn.datingConx,
    .hdrSearchButn.datingPriv {
        margin: 0 auto;
        position: relative;
        right: 0;
        top: -10px;
        padding: 4px 12px;
    }



    .gamelist .maintitle {
        font-size: 16px !important;
    }

    .datingWelcome .gamelist .bigArrow,
    .datingWelcome .rateItemHdr .titlesub,
    .DataDating .datingtaghldr,
    .datingWelcome .rateGameInfo .metaPoint,
    .datingWelcome #ratopics.dashinfotitle,
    .datingWelcome .rateItemHdr .dashdricon,
    .datingWelcome .rateItemHdr .maintitle {
        display: none !important;
    }


    .gamelist .rateItemHolder .rateitemname {
        width: 100%;
        height: auto;
        margin: 0 0 5px;
        font-size: 11px;
        transition: font-size 0.3s, margin 0.3s;
    }
    .rateItemHolder .rateListItems .rateitemname .namebox {
        padding: 3px 5px;
        box-shadow: none;
        max-width: 96%;
        overflow: hidden;
        transition: padding 0.3s;
    }

    .gamelist .fontSel2 .rateitemname {
        font-size: 13px;
        margin: 2px 0 7px;
    }
    .gamelist .fontSel2 .votebutn {
        padding: 4px 0 5px;
        font-size: 13px;
    }

    .datgam_cardlist.DataDating .dashinfolft,
    .datgam_cardlist.DataDating .dashinfomidl,
    .datgam_cardlist.DataDating .dashinforyt {
        width: 100% !important;
        border: none !important;
        padding: 0 0 20px !important;
        margin: 0 0 25px !important;
        border-bottom: var(--borderbottomcolor) !important;
        box-shadow: var(--borderboxshadow) !important;
    }


    .datgam_cardlist.DataDating .datingcatstitle {
        width: calc(100% - 20px);
        margin: 0 auto 10px;
        padding: 0;
        justify-content: center;
    }
    .datingcatstitle .dashinfofull {
        margin: 0 auto 3px;
    }
    
    .datgam_widebox.usersGames .datingcatstitle .dashinfotitle,
    .datgam_cardlist.DataDating .datingcatstitle .dashinfotitle {
        flex-direction: column;
    } 
    .dashinfotitle .listMeta .metaSep {
        margin: 0 8px;
    }
    .datgam_widebox.usersGames .dashinfotitle .listMeta .metaSep:first-of-type,
    .datgam_cardlist.DataDating .dashinfotitle .listMeta .metaSep:first-of-type {
        display: none;
    }
    .dashinfotitle .listMeta .metaInfo {
        font-size: 12px;
    }
    
    .datgam_cardlist.DataDating .categorygame {
        margin: 0 10px 30px;
    }

    .datgam_cardlist.DataDating .categorygame .datgamTots {
        display: inline-block;
        top: 8px;
        width: fit-content;
        height: 16px;
        word-spacing: 2px;
        padding: 1px 5px 0;
        font-weight: 400;
        font-size: 8px;
        right: 10px;
        line-height: 16px;
    }
    .datgam_cardlist.DataDating .categorygame h4 {
        font-size: 14px !important;
    }
    .datgam_cardlist.DataDating .categorygame p {
        font-size: 12px;
    }
    .datgam_cardlist.DataDating .categorygame .cardimg {
        height: 160px;
    }


    .datgam_widebox.usersGames .dashdr {
        display: flex;
        flex-direction: column;
        margin: 0 auto 15px;
    }

    .dashdricon {
        margin: 0 6px 0 0;
    }
    .hdrSubTitle {
        margin: 3px 0 0;
    }
    .hdrSubTitle .titlesub {
        font-size: 18px !important;
    }
    .hdrSubTitle .dashdricon,
    .hdrSubTitle .dashdricon svg {
        width: 22px;
        height: 22px;
    }
    
    .userGamesButnRow {
        justify-content: center;
        margin: 0px 0 10px;
        padding: 0 0 12px;
        gap: 0;
        max-width: 100%;
    }

    .datingConxOvr .datdatButn.datButnRow.datConx,
    .inactiveDatingButn {
        display: none;
    }

    .usersGames .usrGameCell.userGamePriv span {
        padding: 2px;
        width: 33px;
        margin: 0 0 1px;
    }

    .datdatButn button a {
        gap: 0;
        padding: 2px 8px;
        font-size: 10px;
    }
    .datdatButn button a svg {
        width: 26px;
        height: 26px;
    }
    .selectConxList {
        padding: 0;
        max-width: 100%;
    }
    .createNewLink {
        margin: 0 0 20px;
        padding: 10px 0 15px;
        flex-direction: column;
        gap: 0;
        max-width: 100%;
    }
    .newLinkLft {
        padding: 0 5px;
        line-height: 1.2em;
        font-size: 12px;
    }
    .newLinkRyt {
        flex-direction: column;
        align-items: center;
        gap: 0;
        width: 100%;
        margin: 15px 0 0;
    }
    .newLinkFields {
        gap: 0;
        flex-direction: column;
    }
    .newLinkFields input {
        height: 32px;
        padding: 0 7px;
        width: calc(100% - 14px);
        margin: 0 0 10px;
    }
    .newLinkFields button {
        min-width: 240px;
        gap: 0;
        padding: 4px 12px;
        font-size: 12px;
    }
    .newLinkFields button svg {
        width: 24px;
        height: 24px;
        margin: 0 7px 0 0;
    }
    .linksRemain small {
        font-size: 12px;
        margin: 7px 0 0;
        display: inline-block;
    }
    .selectConxCard {
        padding: 8px 10px;
        margin: 0 0 20px;
        flex-direction: column;
    }
    .selectConx .friendAvatar, 
    .selectConx .friendAvatar img, 
    .selectConx .friendAvatar figure:after,
    .datgam_widebox.usersGames .friendAvatar, 
    .datgam_widebox.usersGames .friendAvatar img, 
    .datgam_widebox.usersGames .friendAvatar figure:after {
        height: 70px;
        width: 70px;
    }
    .selectConx .selectConxCard .friendAvatar,
    .datgam_widebox.usersGames .friendAvatar {
        margin: 0 8px 0 -2px;
    }

    .dashinfotitle .listTitle {
        margin: 0 0 3px;
    }

    button.refreshLinksButn {
        padding: 2px 5px 2px 3px;
        margin: 0 0 0 3px;
        font-size: 10px;
        gap: 0;
    }

    .linkButns button {
        padding: 3px 6px 3px 4px;
        margin: 0 7px;
        font-size: 10px;
        gap: 0;
        min-width: auto;
    }

    .linkButns button svg, 
    button.refreshLinksButn svg {
        margin: 0 5px 0 0;
    }

    .selectConx .freindInfo,
    .selectConxCard .freindInfo {
        padding: 0 0 15px;
        border-bottom: var(--borderbottomcolor) !important;
        box-shadow: var(--borderboxshadow) !important;
        transition: all 500ms;
    }

    .selectConx.selectRankConx .freindInfo {
        padding: 0 0 8px;
        margin: 0 0 7px;
    }
    
    .selectConx .friendName,
    .selectConxCard .friendName {
        width: 100%;
    }

    .selectConx .friendNameMeta {
        gap: 0 !important;
        width: 100%;
    }
    .selectRankConx .friendNameMeta .frndNameLabel {
        margin: -20px 0 0;
    }
    .selectRankConx .friendNameMeta.friendMeta2 {
        flex-direction: row !important;
        justify-content: space-around;
    }
    .selectRankConx .friendNameMeta.friendMeta2 .scoreInfo {
        flex-direction: column;
    }
    .selectConx .friendNameMeta .scoreInfo,
    .selectRankConx .friendNameMeta .scoreInfo {
        margin: 5px 0 0;
        align-self: end;
        align-self: flex-end;
        -webkit-align-self: flex-end;
    }
    .selectRankConx .friendNameMeta.friendMeta2 .scoreInfo .scoreSimVal {
        padding: 5px 0 0;
    }

    .selectConx .friendName.lgtxt14,
    .selectConxCard .friendName span.lgtxt13 {
        line-height: 18px !important;
        font-size: 16px !important;
        overflow: hidden;
    }
    .selectConx .friendName.lgtxt14 {
        margin: 0 0 0 -10px;
    }
    .selectConx.selectRankConx .friendName.lgtxt14 {
        font-size: 18px !important;
        margin: 0;
        color: var(--theme-color) !important;
    }
    .selectConxCard .friendName small.lineh20 {
        line-height: 13px !important;
        font-size: 10px !important;
    }
    .friendName span {
        line-height: 11px;
    }
    .selectConx .invitAtrib,
    .selectConxCard .invitAtrib {
        display:block;
    }
    .selectConx .viewConxnButn,
    .selectConxCard .viewConxnButn {
        margin: 8px 0 0 0 !important;
        align-self: end;
        align-self: flex-end;
        -webkit-align-self: flex-end;
    }
    .selectConx .viewConxnButn a,
    .selectConxCard .viewConxnButn a {
        gap: 0;
        padding: 2px 5px;
        font-size: 10px !important;
    }
    .selectConx .viewConxnButn a svg,
    .selectConxCard .viewConxnButn a svg {
        width: 16px !important;
        height: 16px !important;
        margin: 0 2px 0 0;
    }
    .selectConx .metaTitle {
        gap: 0;
        font-size: 16px;
    }
    .selectConx .metaData {
        gap: 0px;
        font-size: 9px;
        flex-direction: column;
        margin: 0 0 -10px;
    }
    .selectConx .metaData .orng,
    .selectConx .metaData .green,
    .selectConx .metaData .blue {
        color: #737B99 !important;
    } 

    .selectConx .privWarn {
        top: -12px;
        margin: -12px 0 0 -10px;
        align-self: end;
        align-self: flex-end;
        -webkit-align-self: flex-end;
    }

    .selectConxCard .mechsHldr {
        gap: 0;
        min-height: auto;
        width: 100%;
        margin: 0 0 5px;
    }
    .selectConxCard .mechsTop .smtxt07 {
        font-size: 10px !important;
    }
    .selectConxCard .mechsTop .smtxt08 {
        font-size: 11px !important;
    }
    .selectConxCard .statsLevel {
        width: 100px;
        margin: 0 0 0 2px;
        padding: 0 0 0 4px;
    }
    .selectConxCard .mechsTop select {
        width: 100px;
        margin: 0;
        padding: 3px 0 3px 2px;
        font-size: 11px;
    }
    .selectConxCard .mechsThem {
        margin: 0;
    }
    .selectConxCard .mechsBotm {
        flex-direction: row;
        gap: 0;
        margin: 12px 0 0;
        width: 100%;
        justify-content: end;
        justify-content: flex-end;
        -webkit-justify-content: flex-end;
    }
    .selectConxCard .mechsBotm button {
        padding: 3px 7px;
        gap: 0;
        width: auto;
        font-size: 9px !important;
        margin: 0 0 0 12px;
    }
    .selectConxCard .mechsBotm button svg {
        margin: 0 3px 0 0;
    }

    .inviteLink {
        padding: 7px 5px;
        flex-direction: column;
    }
    .inviteLink .linkInfo {
        min-height: auto;
    }
    .inviteLink .linkName, 
    .inviteLink .linkCode, 
    .inviteLink .linkDate, 
    .inviteLink .conxDate {
        margin: 0 0 4px;
    }
    .inviteLink .linkInfo div label {
        width: 60px;
        min-width: 60px;
        padding: 0 7px 0 0;
        font-size: 9px !important;
        line-height: 16px;
    }
    .linkName input {
        margin: 0 3px 0 0px;
        padding: 2px 4px;
        width: 90px;
    }
    .linkName button {
        padding: 2px 8px;
        font-size: 10px;
    }
    .inviteLink .linkName .lgtxt18.lineh10 {
        font-size: 14px !important;
        line-height: 16px !important;
    }
    .linkCode.smtxt07 span {
        font-size: 9px !important;
        line-height: 10px;
    }

    .linkUsed {
        display: none;
    }
    .linkButns {
        gap: 0;
        flex-direction: row-reverse;
        margin: 7px 0 5px;
    }


    .compareFriend.conxCompatOvr .selectFriendHdr {
        padding: 20px 20px 11px;
    }
    .conxCompatOvr .hdrTitle {
        margin: 0;
    }
    .datingOverview .userGamesButnRow {
        width: calc(100% - 30px);
        padding: 14px 5px 13px;
        gap: 0;
    }
    .datingOverview .navLabel,
    .datingOverview .datPriv {
        display: none !important;
    }
    .datgam_widebox.usersGames .datdatButn.datButnRow,
    .datingOverview .datdatButn.datButnRow {
        margin: 0 7px;
    }
    .datingOverview .compareAvatars {
        padding: 12px 0 0;
    }
    .datingOverview .avatarIcon,
    .datingOverview .compVS {
        margin: -15px 0 0;
        width: 20px;
    }
    .datingOverview .compUserName span.smtxt05 {
        font-size: 9px !important;
    }
    .datingOverview .compUserName {
        font-size: 12px !important;
        text-align: center !important;
    }
    .compareFriend .datingOverview .compSvgSep {
        padding: 0 10px;
        margin: -15px 0 0;
    }
    .datingOverview .compareStats.compatScore {
        padding: 5px 0 15px;
        align-items: center;
        flex-direction: column;
        margin: 0 10px;
        max-width: calc(100% - 20px);
        gap: 0 !important;
    }
    .datingOverview .compareStats .speedoCol {
        order: 1;
        margin: -15px auto 0;
    }
    .datingOverview .compareStats .compatMeta {
        gap: 0;
        order: 2;
        max-width: 100%;
    }
    
    .datingOverview .simCol.mutualGamesStats {
        align-items: center !important;
        flex-direction: column !important;
        padding: 0 !important;
        margin: 15px 0 0;
        width: 100%;
        gap: 0 !important;
        text-align: center;
        order: 1;
    }
    .datingOverview .compatMut {
        font-size: 10px !important;
        margin: 0;
        padding: 10px 0 0;
        width: 100%;
        text-align: center;
        border: none;
        order: 2;
    } 
    .datingOverview .simCol.mutualGamesStats .finalContWidth {
        width: fit-content;
        display: inline-block;
        height: 65px;
        line-height: 65px;
        font-size: 70px;
    }
    .datingOverview .conxSentLabel .lgtxt21 {
        font-size: 18px !important;
        margin: 4px 0 0;
    }
    .datingOverview .conxSentLabel .lgtxt21 br {
        display: none;
    }
    .datingOverview .compatScore .scoreGraph,
    .datingOverview .recharts-wrapper {
        width: 234px !important;
        height: 121px !important;
    }
    .datingOverview img.mvrspeedoicon {
        width: 26px;
        left: calc(50% - 12px);
        bottom: -3px;
    }

    .datingOverview .gamListHdr {
        width: calc(100% - 20px);
        justify-content: center;
        margin: 0 auto;
        padding: 15px 0px;
        border-top: none;
        box-shadow: none;
        flex-direction: column;
        text-align: center;
    }
    .datingOverview .gamListHdr h3.titlesub {
        display: flex !important;
        gap: 0 !important;
        margin: 0 !important;
    }
    .datingOverview .gamListHdr h3.titlesub span {
        display: inline-block;
        margin: 0 6px;
    }
    .datingOverview .gamListHdr .refreshGamesButn {
        margin: 7px 0 0 !important;
    }

    .datingOverview .selectFriendCard {
        margin: 0 10px 30px;
        padding: 10px !important; 
    }
    .datingOverview .gameCard .freindInfo {
        flex-direction: column;
    }
    .datingOverview .dashavfig.datgamimg.compatGamImg, 
    .datingOverview .datgamimg.compatGamImg .dashavatar, 
    .datingOverview .dashavfig.compatGamImg.datgamimg figure::after {
        width: 100%;
        height: 140px;
        top: 0;
        margin: 0 0 8px !important;
    }
    .datingOverview .gameDetails {
        width: 100%;
    }
    .datingOverview .gameDetails .lgtxt14 {
        margin-right: 0 !important;
        width: 100% !important;
        font-size: 18px !important;
    }
    .datingOverview .gameDetails .datgamName {
        font-size: 18px;
        font-weight: 600;
        line-height: 1em;
        margin: 0 0 5px 0;
        width: 100%;
    }
    .datingOverview .gameDetails .datgamMetaHldr {
        line-height: 1.0em !important;
        margin: 0 0 15px;
        border-bottom: var(--borderbottomcolor) !important;
        box-shadow: var(--borderboxshadow) !important;
        transition: all 500ms;
    }
    .datingOverview .gameDetails .datgamMeta {
        font-size: 13px;
        line-height: 13px;
        margin: 0 0 7px;
    }
    .datingOverview .gameDetails .privSettings.smtxt07 {
        margin: 14px 0 0 !important;
        padding: 10px 0 0;
        font-size: 9px !important;
        border-top: var(--topBorder);
        box-shadow: var(--topBoxShadow);
        transition: all 500ms;
    }
    .datingOverview .gameDetails .privSetTitle {
        border-bottom: 1px solid #737B9944;
        margin: 0 0 8px;
        line-height: 1.7em;
        position: relative;
    }
    .privSettings .privWarn.tooltip {
        top: 0px;
    }
    .datingOverview .gameDetails .privWarn svg {
        width: 16px !important;
        height: 16px !important;
        margin: -5px 0 0 3px;
    }

    .datingOverview .gameDetails .datgamMetaNo {
        display: block;
    }
    .datingOverview .gameDetails .datgamMetaSep.metaSep1 {
        display: none;
    }
    .datingOverview .gameCard .scoreHldr {
        margin: 0 0 5px;
        top: 0;
        min-height: 40px;
        flex-direction: column;
        align-items: start;
    }

    .datingOverview .compatPrivLevels {
        flex-direction: column;
        align-items: start;
    }
    .datingOverview .privLvlSep {
        display: none;
    }

    .selectConx .selectFriendCard .friendLink,
    .datingOverview .gameCard .friendLink {
        width: 40px;
        height: 40px;
        top: 3px;
        padding: 0;
        margin: 0 0 0 5px;

    }
    .selectConx .selectFriendCard .friendLink.tooltip,
    .datingOverview .gameCard .friendLink.tooltip {
        position: absolute !important;
    }

    .datingOverview .scoreHldr,
    .datingOverview .scoreInfo {
        gap: 0;
    }
    .datingOverview div.scoreInfo:nth-of-type(2) {
        margin: 15px 0 0;
    }
    .datingOverview .selectFriendCard .scoreGraph {
        width: 140px;
        height: 72px;
        border-radius: 80px 80px 4px 4px;
    }
    .selectConx .selectFriendCard .scoreGraph {
        width: 100px;
        height: 54px;
    }
    .selectConx .selectFriendCard .graphNeedle, 
    .selectConx .selectFriendCard .graphNeedleBlur {
        width: 45px;
    }

    .datingOverview .selectFriendCard .graphNeedle, 
    .datingOverview .selectFriendCard .graphNeedleBlur {
        width: 65px;
    }

    .resultsbox.DataDating .reshdr2 {
        flex-wrap: wrap;
        padding: 0 0 15px;
    }
    .resultsbox.DataDating .butndiv {
        margin: 7px;
        width: calc(50% - 14px);
        justify-content: center;
    }
    .resultsbox.DataDating .butndiv.butndiv3 {
        display: flex;
    }
    .resultsbox.DataDating .butndiv button {
        width: 100%;
        margin: 0;
    }
    .resultsbox.DataDating .butndiv button a {
        padding: 2px 0;
        font-size: 10px;
        text-align: left;
        justify-content: start;
    }
    .resultsbox.DataDating .butndiv  button a svg {
        width: 22px;
        height: 22px;
        margin: 0 7px 0 3px;
    }
    .resultsbox.DataDating .resultsPage.userGamePriv {
        width: 100% !important;
        margin: 0 !important;
    }
    .resultsbox.DataDating .resultsPage.userGamePriv .privButn {
        gap: 0;
        padding: 7px 4px;
        line-height: 1em;
        font-size: 10px;
    }
    .resultsbox.DataDating .resultsPage.userGamePriv .privButn svg {
        width: 22px;
        height: 22px;
        margin: 0 7px 0 2px;
    }

    .selectConx .selectFriendHdr .titlesub {
        display: none !important;
    }
    .selectConx .selectFriendHdr .rateGameInfo .lgtxt14 {
        font-size: 12px !important;
        justify-content: center;
    }
    .selectConx .gameInstrux svg {
        width: 20px;
        height: 20px;
    }
    .selectRankConx .gameTopic.lgtxt11,
    .selectConx .gameTopic.lgtxt11 {
        font-size: 14px !important;
        margin: 6px 0 0 !important;
        display: flex;
        flex-direction: column;
    }
    .selectConx .plyrOrdrMsg {
        margin: 0px 10px 10px;
        padding: 15px 0 0;
    }
    .selectConx .userGamesButnRow {
        display: none;
    }
    .selectConx .infoThem, 
    .selectConx .infoYou {
        width: 185px;
        margin: 1px 0;
    }

    .compareFriend.datingConx .compActionButns {
        display: none;
    }


    .vsrankconx .selectFriendHdr .rateGameInfo {
        width: 100% !important;
        margin: 0;
        align-items: center;
    }
    .vsrankconx .selectFriendHdr .rateGameInfo svg {
        width: 100% !important;
        margin: 0;
        align-items: center;
    }
    .compareFriend.datingConx .titleSubConx,
    .compareRankFriend.datingConx .titleSubConx {
        font-size: 16px !important;
        justify-content: center;
        margin: 3px 0;
    }
    .compareRankFriend.datingConx .titleSubConx svg,
    .compareFriend.datingConx .titleSubConx svg {
        width: 22px !important;
        height: 22px !important;
    }
    .compareFriend.datingConx .titleSubMeta {
        flex-direction: column;
    }
    .compareFriend.datingConx .selectFriendHdr {
        padding: 20px 30px 10px;
    }


    .compareFriend.datingConx .compareStats {
        padding: 0px 0 15px;
        margin: -20px 0 0;
    }
    .compareFriend.datingConx .infoBubl.infoSimScore {
        top: -55px;
        right: -25px;
    }
    .compareRankFriend.datingConx .itemDetails,
    .compareFriend.datingConx .itemDetails { 
        width: calc(100% - 20px);
        margin: 0 auto 10px;
    }
    .compareRankFriend.datingConx .itemDetails h3,
    .compareFriend.datingConx .itemDetails h3 {
        margin: 0 0 9px;
        padding: 10px 0px 4px 5px;
        font-size: 14px !important;
    }
    .compareRankFriend.datingConx .infoBubl.infoRateDiff, 
    .compareFriend.datingConx .infoBubl.infoRateDiff {
        top: -7px;
        right: 0px;
    }

    .compareRankFriend.datingConx .selectFriendHdr,
    .compareFriend.datingConx .selectFriendHdr {
        padding: 20px;
    }


}