@charset "utf-8";

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.note,.note *{
  user-select: text;
  -webkit-tap-highlight-color: auto;
} 

html{height:100%;background: #f1f0f3;font-family: -apple-system-body, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;-webkit-text-size-adjust: 100%;}
html{font-family: 'Heebo', sans-serif;font-size: 1rem;color: #333;}
/* html.ios{font: -apple-system-body;} */
img{max-width: 100%;}
body{height:100%;padding: 0;margin: 0;font-size:1em;}
.container.error_msg,
.container{display: flex; align-items: center;height: 100%; justify-content: center;}
.profile{width:100%;max-width: 655px;max-width: 40.9em;line-height: 1.5; word-break: break-word;padding-bottom: 0.5em;}
.profile-card{display: flex; padding: 2em;border-radius: 1em; background: #fff;box-shadow: 2px 2px 7px #ccc;width:100%;    align-items: stretch;}
.profile-pic{padding-right: 1.8em;width:45.3%;border-radius: 0.6em; overflow: hidden;display: inline-flex;align-items: center;}
.profile-pic > img{vertical-align: top;border-radius: 0.6em;}
.profile-name{padding-left: 1.5em;width:54.7%;border-left: thin solid #bcbcbc; position: relative;display: flex;flex-flow: column;justify-content: center;}
.profile p{margin:0 0 0.7em;font-size: 1em;}
.profile .funcSet:hover a,
.profile .funcSet:hover,
.profile .link,
.poweredby a{text-decoration: none;color:#2972ff}
.profileimg,
.profile a{text-decoration: none;color:#333;cursor: pointer;}
.zoompic{position:absolute;bottom: 0; right: 0;padding: 22px 14px 4px 22px;z-index: 1;opacity: 0.9;}
.profile-name p{margin-bottom: 0;}
.profile-name div{margin-bottom: 0.5em;}
.profile-name div:last-child{margin-bottom: -0.4em;}
.profile h2{margin: -0.15em 0;font-size: 1.4em;font-weight: 500;line-height: 1.2;letter-spacing: -0.5px;}
.profile h2#profile_name{padding-right: 1.2em;}
.profile .name_search{cursor: pointer;}
.profile h3{margin: 0 0 0.1em;font-size: 1.2em;font-weight: 500;line-height: 1.2; margin-bottom:-0.05em;letter-spacing: -0.5px;}
.profile .note{padding:0 2em;line-height: 1.4;font-size: 1em;margin: 1.7em 0 0;}
.profile-hdg{width: 100%;}
.profile .hdr{margin:0em 0 1.4em;}
.profile .hdr > a{padding: 0 1.25em; cursor: pointer;margin-right: -4px;}
.profile .hdr > a:not(.noborder):not(:first-child){border-left: thin solid #bcbcbc;}
.center{text-align: center;}
p.poweredby{padding: 2em 0 0;margin: auto 0 0;font-size: 0.9em;}
.profile-pic .picon{display: none;}
.verified-name{position: absolute; top: -0.15em; right: -0.1em;width: 45px;cursor: pointer;padding: 10px;margin: -10px -10px 0 0;}
.socialchats{display: flex;justify-content: center;margin: 1.7em 0 0;}
.socialchats > div{display: flex;align-items: center;}
.socialchats a{width: 40px;height: 40px;display: inline-block;padding: 9px;margin: 0 5px;background: #fff;border-radius: 0.5em;position: relative;}
.socialchats img{vertical-align: top;width: 100%;}
.socialchats > .border-left{margin-left: 16px;}
.socialchats > .border-left:before{content: '';border-left: thin solid #aaa;position: absolute;top: -0.2em;bottom: -0.2em;left: -10px;}
.cursor,
.moreNote{cursor: pointer;}
.phonetag{font-style: normal; min-width: 1.1em;display: inline-block;text-transform: lowercase;}
.mob_show{display: none!important;}
i.small_diamond {display: inline-block!important;width: 0.35em;height: 0.35em;background: #8f8f8f;vertical-align: middle;transform: rotate(45deg);margin: 0 0.35em;}
.help-txt{max-width: 41.5em;line-height: 1.6;margin: 0 auto;display: none;background: #f1f0f3;z-index: 1;position: relative;}
.help-txt li{margin-bottom: 0.5em;}
.help-txt ul{padding-left: 1em;}
.help-txt p {margin: 0 0 0.6em;}
.help-txt h2{font-weight: 500;margin: 0;line-height: 1.2;font-size: 1.3em;position: sticky;top: 0;background: inherit;padding: 15px 40px 15px 10px;margin-left: -10px;}
.profileqr{display: block; width: 100%;border-radius: 0.8em;}
.profileqr img{width: 100%;border-radius: 0.8em;margin: auto;display: block;background: #eee;}
.popupbox .profileqr{padding: 0.5em;}
.popupbox .profileqr img{padding: 8px;}
p.message{position: absolute;margin-right: -0.35em;color: #fff;text-align: left;top: 1.75em;font-weight: 400;background: #696969;border-color: #696969;line-height: 1.5;
  padding: 0.6em 1em 0.8em 1em;box-shadow: 1px 1px 4px #9c9b9b;font-size: 1rem;border-radius: 0.6rem;right: 0;left: 1em; z-index: 1;}
p.message:before {right: 0.6em;content: '';position: absolute;bottom: 100%;margin: auto;width: 0;    border-left: 0.4em solid transparent;
  border-right: 0.4em solid transparent;
  border-bottom: 0.4em solid;
  border-bottom-color: #696969;}
  span.data-tooltip{position: absolute;    margin-right: -0.35em;    color: #fff;    text-align: left;    top: 100%; margin-top: 0.5em;
    font-weight: 400;
    background: #696969;
    border-color: #696969;
    line-height: 1.2;
    padding: 0.45em 0.6em 0.5em 0.6em;
    box-shadow: 1px 1px 4px #9c9b9b;
    font-size: 1rem;
    border-radius: 0.4rem;
    left: 0;
    z-index: 1;
    white-space: nowrap;
    font-size: 0.9em;}
span.data-tooltip:before {    left: 50%;
  content: '';
  position: absolute;
  bottom: 100%;
  margin: auto;
  margin-left: -0.4em;
  width: 0;
  border-left: 0.4em solid transparent;
  border-right: 0.4em solid transparent;
  border-bottom: 0.4em solid;
  border-bottom-color: #696969;}
  
#qrPhotoToggle span {min-width: 6.2em;display: inline-block; text-align: center;}
.menu{position: absolute;display: block;width: 13em;background: #fff;border-radius: 0.5em;box-shadow: 2px 2px 7px #ccc;margin-left: 0.45em;z-index: 1;margin-top: 0.25em;}
.menu a{display: block; position: relative; cursor: pointer; padding: 0.5em 0.8em 0.5em;text-align: left;}
.menu a.border-btm:After{border-bottom: thin solid #ccc;content: '';position: absolute;left: 0.8em;right: 0.8em;bottom: 0;}
.error_img{display: block; margin: 0 auto 0.5em;}

.profile .funcSet{display: block; position: relative;}
.funcIcon{display: none;position: absolute;right: 0;bottom: -0.15em;width:1.75em}
.addressOpen{line-height: 1.3;}
.addressOpen .funcIcon{bottom:0.3em;}
.funcSet:hover .funcIcon{display: inline-block !important;}
.help-mode .funcSet:hover .notforhelp{display: none !important;}
.funcSet:not([data-type="mobile"]) [data-id="sms"], html:not(.ios) .funcIcon[data-id="apple"]{display:none!important;}
/* body.android [data-num] img{border-radius: 100%;} */
.funcIcon.secIcon{right: 2.5em;}
img.funcIcon[src="../profile/browser-android.svg"] {padding: 0.15em;}

.popupbox{position: fixed;z-index: 1;top: 0;bottom: 0;left: 0;right: 0;background: #000;color: #fff;text-align: center;display: flex;align-items: center;flex-direction: column;justify-content: center;}
.popupbox h2{margin: 0.6em 0 0.1em;}
.profileqr{position: relative;}
.profileqr img.toplogo{position: absolute;width: 1.75em;left: 0;right: 0;margin: auto;top: 0;bottom: 0;padding:5px;line-height: 1;border-radius: 0.4em;}
h3.errormsg{margin: 0 1em 0 1.75em;}
html:not(.mobile) .tapMsg{display: none!important;}

.confirmMsg{padding: 1px;margin: 0;position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999;background: rgba(0, 0, 0, 0.15);}
.confirmMsg .txtarea{background: #fff;position: relative;border-radius: 0.4em;box-shadow: 0 0.2em 0.8em rgba(0, 0, 0, 0.5);top: 50%;left: 50%;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);padding: 1px;border-radius: 0.4em;max-width: 85%;}
.confirmMsg .txtarea div{padding: 0 1.25em;margin: 1em 0;border: 0;padding-bottom: 0;line-height: 1.4;}
.confirmMsg p.btns{margin-bottom: 0.55em;text-align: right;padding: 0 0.75em 0 1em;}
.confirmMsg p.btns button{font-size: 1em;outline: 0;background: transparent;border: 1px solid;margin-right: 0.5em;display: inline-block;padding: 0.55em 0.5em 0.55em;color: #616161;border-radius: 0.3em;cursor: pointer;-webkit-appearance: none;text-decoration: none;text-align: center;min-width: 3em;line-height: 1;position: relative;vertical-align: top;text-transform: uppercase;border-color: transparent;}
.confirmMsg p.btns button.submitmsg{color: #2b7ae9;margin-right: 0;}
strong{font-weight: 500;}
.profile .hdr > a.mob_show.hidden,
.hidden{display: none!important;}

@media(max-width:600px){
  html{font-size:1.25rem;font-size: 4.7vw;}
  a.moblink{text-decoration: none;color:#2972ff}
  .funcSet.funcSetsingle .funcIcon{display:none !important;}
  /* .funcIcon{display:none!important ;} */
  .mob_reverse{display: flex;flex-direction: column-reverse;}
  .help,
  .data-tooltip{display: none!important;}
  h3.errormsg{margin: 0 0.55em;}
  p.message{right: 1em;top: 3.1em;}
  /* .linebreak{display: block;margin: 0.5em 0;}
  .linebreak+a{padding-left: 0!important;border: none!important;} */
  .profile .hdr > a{padding:0.5em 0;border-left: 0!important;min-width: 4em;display: block;width:10.1em;white-space: nowrap;}
  .profile .hdr > a.mob_show{display: block!important;}
    .profile .hdr > a:not(:last-child){border-bottom: thin solid #ccc;}
  p.message{top:3em;left:16px;right:20px;}
  .help-txt{padding: 0 16px 16px;top: 0;height: 100%;overflow: auto;position:fixed;background: #fff;}
  .mob_show{display: block!important;}
  a.mob_show{display: inline-block!important;}
  .web_show{display: none!important;}
  .mob_show .note{margin: 1.1em 0 1em!important;}
  .tapMsg{display:none;background: #656665;left: 16px;right: 16px;position: fixed;z-index: 999;bottom: 10px;color: #fff;text-align: center;padding: 16px 10px;border-radius: 10px;font-weight: 400;}
  html,body{background: #fff!important}        
  .container {padding:16px 16px 0;display: block;max-height: none;height: auto;}
  .profile .hdr{margin:1.7em 0 2em;text-align: left;}
  .helplink{white-space: nowrap;}
  .profile-card{box-shadow: none;display: block; padding: 0;}
  .profile-hdg .hdr > a:first-child{padding-left: 0;}
  .profile-pic{width:100%; padding:0;margin-bottom: 1em;position: relative;background: #ccc;display: flex;}
  .profile-name{width:100%; padding: 0; border: none;position: relative;}
  .profile .note{padding:0;margin: 1em 0 1em}
  .profile-pic .profileqr > img{padding: 0;}
  /* .profile-pic > img{position: absolute;width: 100%;height: 100%;} */
  .profile-pic .profileqr{padding: 15%;margin: -12% 0;}
  .error_msg h2{padding:  0 2em;}
  .profile-pic:not(.imgunavaialble):after,
  .profile-pic:not(.imgunavaialble):before{content: '';display: block;background: linear-gradient(to bottom, rgb(0 0 0 / 50%) , rgb(0 0 0 / 20%), transparent);padding-top:75px;position: absolute;top: 0;left: 0;right: 0;}
  .profile-pic:not(.imgunavaialble):after{background:linear-gradient(to top, rgb(0 0 0 / 50%) , rgb(0 0 0 / 20%), transparent);    top: auto;bottom: 0;}
  .profile-pic .picon{display: inline-block; border-radius: 0; margin: 0; position: absolute; top:0px; padding: 14px; left: 0px; height: auto;}
  .profile-pic .picon.verified{z-index: 1;line-height: 1;right: 0;left: auto;}
  .profile-pic .verified:before {content: '';position: absolute;background: #fff;background: #fff;left: 18px;right: 18px;top: 18px;bottom: 22px;margin: auto;border-radius: 100%;line-height: 1;}
  .profile-pic .picon img{width: 24px;position: relative;}  
    .profile-pic .picon.verified img{width: 28px;}
  .socialchats{justify-content: left;margin-top: 1.3em;position: relative;top:0.35em}
  .socialchats a{padding: 0.05em;margin: 0 4px;}
  .socialchats a:first-child{margin-left: -0.2em;}
  .verified-name{display: none;}
  p.poweredby{padding: 0 0 2em;text-align: left;}
  .profile-name div.socialchats {justify-content: initial;margin: 0.3em 0 1.3em}
}


@media only screen and (max-width:991px) and (orientation: landscape) {
  .mobile .shareqr{display: inline-block!important;width: 21px;    position: absolute;top: -18px;right: -0.1em;width: 55px;padding: 15px;}
  .mobile .profile{max-width: 100%;height: 100%;font-size: 15.5pt;font-size: 4.7vh;padding-bottom: 0;}
  .mobile .container{display: block;}
  .mobile .profile-card{border-radius: 0; height: 100%;    align-items: center;}
  .mobile .profile-hdg,
  .mobile .profile-footer,
  .mobile .poweredby,
  .mobile .verified-name,
  .mobile .zoompic,
  .mobile .tapMsg{display: none!important;}
  .mobile .profile-pic{width: 35%;}
  .mobile .profile-name {width: 65%;}
  html.mobile,
  .mobile body,
  .mobile .profile-card{background: #E7E7E7}
  .mobile .profile h2{font-size: 1.5em;}  
  .mobile .profileqr img{background: #fff;}
  .mobile .profileqr{background: none;}
  .mobile .help{display: none!important;}
}

body.android .funcIcon[data-id="apple"]{display: none!important;}
body.android .secIcon[data-id="google"]{right: 0;}

/* help */
@media(min-width:601px){
body:not(.help-mode) .help{display: none;}
.help-mode .profile-hdg{text-align: center;}
.help{display: flex;margin: 1em auto;text-align: center;}
.help.top{padding-bottom: 30px;position: relative;}
.help h3{font-size: 1em;letter-spacing: -0.015em;margin-bottom: 2px;font-weight: 600;}
.help div{padding: 5px ;position: relative;}
.help .dot{width: 10px;height: 10px;background: red;border-radius: 100%;display: inline-block;position: absolute;left: 50%;top: 100%;margin-left: -4px;}
.help .vline{width: 1px;height: 100px;background: red;display: inline-block;position: absolute;left:50%;top: 100%;}
.help.btm .dot{bottom:100%;top:auto}
.help.btm .vline{bottom:100%;top:auto}
.help .hline .vline:after{content: '';width: 260px;height: 1px;display: block;position: absolute;left: -130px;top: 100%;background: red;}

.help-mode.scroll .container{align-items: flex-start;}
.help-mode .profile-name{position: relative;width: auto;min-width: 48%;padding-right: 1em;}
.help-mode .profile-name::before{content:''; position: absolute;top:0; bottom: 0; right:0em;background: red ;height: 90%;margin: auto; width: 1px;}
.help-mode .profile-name::after{content:''; position: absolute;top:0; bottom: 0; margin: auto; left:100%;background: red ; width: 41px;height: 1px;}
.help-mode .profile h2#profile_name {padding-right: 0;}
.help-mode .socialchats{padding-bottom: 1em;}
.help-mode .firstsocial-name{position: relative;padding-right: 1em;}
.help-mode .firstsocial::before{content:''; position: absolute;top:0; bottom: 0; left:-15px;width:1px; background: red ;height: 25px;margin: auto;}
.help-mode .firstsocial::after{content:''; position: absolute;top:0; bottom: 0; margin: auto; right:calc(100% + 15px);background: red ; width: 41px;height: 1px;}

.help.top div{padding: 5px 12px;}
.help.top div:nth-child(1){position: relative;left: -45px;}
.help div#help5{max-width:40%;left: -75px; }
.help div#help6{position: relative;left: 15%;width: 40%;}
.help.top div:nth-child(3){position: relative;left: 45px;}
.help.top div:nth-child(3) .dot{left: 100%;margin-left: -93px;}
.help.top div:nth-child(3) .vline{left: 100%;margin-left: -89px;}

.help.btm{justify-content: space-between;margin: 0.5em 0 -1.5em;}
.help-mode .funcIcon:not(.notforhelp){display: inline-block!important;}
.tempsocial{pointer-events: none;opacity: 0.6;}
.helplink{min-width: 6em;}
.help p{color: #333;margin: 0;font-size: 0.95em;}
.help-mode .addressOpen{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding-right: 4.5em;}
}