/* OrangeWeb3 Profile Page Styles -denzdoneza */

#orangeWeb3-profileContainer,
.orangeWeb3-profileMainContainer {
  margin: 0 !important;
  padding: 0 !important;
}
#orangeWeb3-profileContainer {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 32px !important;
}
.orangeWeb3-profileMainContainer {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 16px !important;
}
.orangeWeb3-profileBasic {
  width: 100% !important;
  padding: 48px 40px !important;
  background-image: url("https://irp.cdn-website.com/e81c109a/dms3rep/multi/orange-web3-hexagon-pattern-logo-v1a-1920x1080-20250416.webp") !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}
.orangeWeb3-profileInner {
  width: 100% !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 40px !important;
}
#orangeWeb3-profilePicture {
  width: 100% !important;
  min-width: auto !important;
  max-width: 310px !important;
  position: relative !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: hidden;
}
.orangeWeb3-editProfilePictureContainer {
  background-image: url("https://irp.cdn-website.com/e81c109a/dms3rep/multi/orange-web3-edit-profile-image-v1b-512x512-20250521.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.orangeWeb3-editProfilePictureContainer:hover {
  outline: 2px solid #f3791f !important;
}
.orangeWeb3-profileImage {
  width: 100% !important;
}
.orangeWeb3-editProfileImage:hover {
  cursor: pointer !important;
  filter: opacity(50%) !important;
  transition: filter 0.3s ease-in-out !important;
}
#orangeWeb3-profileNames {
  width: calc(100% - 350px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 16px !important;
}
.orangeWeb3-displayName {
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Verdana" !important;
  font-size: 2.25rem !important;
  line-height: 1.2 !important;
  font-weight: bold !important;
  color: #edeff7 !important;
}
.orangeWeb3-username {
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Verdana" !important;
  font-size: 18px !important;
  line-height: 1.5 !important;
  font-weight: bold !important;
  color: #f3791f !important;
}
.orangeWeb3-bio {
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Verdana" !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: normal !important;
  color: #d3d6e0 !important;
}
.orangeWeb3-profileEdit {
  width: 40px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  align-self: stretch !important;
}
.orangeWeb3-editButton {
  width: 40px !important;
  height: 40px !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 4px !important;
  background-color: #f3791f !important;
  border-radius: 8px !important;
  outline: none !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background-color 0.3s ease-in-out !important;
}
.orangeWeb3-buttonIcon {
  width: 24px !important;
  height: 24px !important;
  fill: #000 !important;
}
.orangeWeb3-buttonText {
  display: none !important;
  font-family: "Verdana" !important;
  font-size: 14px !important;
  color: #000 !important;
  font-weight: bold !important;
}
.orangeWeb3-editButton:hover {
  background-color: #de5b26 !important;
}
.orangeWeb3-label {
  margin: 0 0 -8px !important;
  padding: 0 !important;
  font-family: "Verdana" !important;
  font-size: 14px !important;
  color: #9da2b3 !important;
}
.orangeWeb3-input {
  width: 100% !important;
  padding: 8px 16px !important;
  background-color: #000 !important;
  border-radius: 8px !important;
  font-family: "Verdana" !important;
  color: #edeff7 !important;
  line-height: 1.5 !important;
  outline: none !important;
  border: none !important;
}
.orangeWeb3-inputDisplayName,
.orangeWeb3-inputUsername {
  max-width: 50% !important;
  font-weight: bold !important;
}
.orangeWeb3-inputDisplayName {
  font-size: 24px !important;
  height: 48px !important;
}
.orangeWeb3-inputUsername {
  font-size: 16px !important;
  height: 40px !important;
}
.orangeWeb3-inputBio {
  height: 120px;
  font-size: 16px !important;
  font-weight: normal !important;
}
.orangeWeb3-input:focus {
  border: 1px solid #f3791f !important;
}
.orangeWeb3-profileDetails {
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
}
.orangeWeb3-profileInfo {
  color: #d3d6e0 !important;
  font-family: "Verdana" !important;
  font-size: 14px !important;
}
.orangeWeb3-profileInfo:before {
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  margin-right: 4px !important;
  transform: translate(0px, 4px) !important;
}
.orangeWeb3-profileInfo:after {
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin-left: 4px !important;
  transform: translate(0px, 2px) !important;
  cursor: pointer !important;
}
#orangeWeb3-profileEmail:before {
  content: url("https://irp.cdn-website.com/e81c109a/icon/orange-web3-email-icon-v1b-24x24.svg") !important;
}
#orangeWeb3-profileWallet:before {
  content: url("https://irp.cdn-website.com/e81c109a/icon/orange-web3-wallet-icon-v1b-24x24.svg") !important;
}
#orangeWeb3-profileWallet:after {
  content: url("https://irp.cdn-website.com/e81c109a/icon/orange-web3-copy-icon-v1a-24x24.svg") !important;
}
#orangeWeb3-profileLocation:before {
  content: url("https://irp.cdn-website.com/e81c109a/icon/orange-web3-location-icon-v1b-24x24.svg") !important;
}
#orangeWeb3-profileStartDate:before {
  content: url("https://irp.cdn-website.com/e81c109a/icon/orange-web3-start-date-icon-v1b-24x24.svg") !important;
}
.orangeWeb3-tutorialAndRank {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 16px !important;
}
#orangeWeb3-tutorialContainer {
  width: 100% !important;
  padding: 24px 32px !important;
  height: auto !important;
  display: flex;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 24px !important;
  background-color: #1e1e24 !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}
.orangeWeb3-tutorialHeadingAndCta {
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
}
.orangeWeb3-tutorialHeadingsContainer {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 8px !important;
}
h4.orangeWeb3-tutorialHeading,
p.orangeWeb3-tutorialSubHeading {
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Verdana" !important;
  line-height: 1.5 !important;
}
h4.orangeWeb3-tutorialHeading {
  color: #edeff7 !important;
  font-size: 20px !important;
  font-weight: bold !important;
}
p.orangeWeb3-tutorialSubHeading {
  color: #9da2b3 !important;
  font-size: 14px !important;
  font-weight: normal !important;
}
button.orangeWeb3-tutorialDontShow {
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Verdana" !important;
  line-height: 1.5 !important;
  color: #9da2b3 !important;
  font-size: 14px !important;
  font-weight: bold !important;
  background-color: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: color 0.3s ease-in-out !important;
}
button.orangeWeb3-tutorialDontShow:hover {
  color: #bcbfcc !important;
}
.orangeWeb3-tutorialContent {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 12px !important;
}
.orangeWeb3-tutorialLevelContainer {
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 0 !important;
}
.orangeWeb3-tutorialPreviousLevel {
  width: 33.33% !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 0 !important;
  /*   border: 1px dashed red; */
}
.orangeWeb3-tutorialPreviousDot {
  display: flex !important;
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 12px !important;
  background: #f3791f !important;
  box-shadow: 0px 0px 8px 0px #f3791f !important;
}
svg.orangeWeb3-tutorialPreviousTick {
  width: 12px !important;
  height: 10.5px !important;
  flex-shrink: 0 !important;
  fill: #edeff7 !important;
}
.orangeWeb3-tutorialProgressBar-previous {
  width: calc(50% - 12px) !important;
  height: 2px !important;
  background: #f3791f !important;
  box-shadow: 0px 0px 8px 0px #f3791f !important;
}
.orangeWeb3-tutorialCurrentLevel {
  width: 33.33% !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
  /*   border: 1px dashed blue; */
}
.orangeWeb3-tutorialProgressBar-previousToCurrent {
  width: calc(50% - 16px) !important;
  height: 2px !important;
  background: #f3791f !important;
  box-shadow: 0px 0px 8px 0px #f3791f !important;
}
.orangeWeb3-tutorialProgressBar-currentToNext {
  width: calc(50% - 16px) !important;
  height: 2px !important;
  background: #40424d !important;
}
.orangeWeb3-tutorialOuterRing {
  display: flex !important;
  padding: 2px !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 16px !important;
  background: #f3791f !important;
  box-shadow: 0px 0px 8px 0px #f3791f !important;
}
.orangeWeb3-tutorialInnerRing {
  display: flex !important;
  padding: 2px !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 14px !important;
  background: #1e1e24 !important;
}
.orangeWeb3-tutorialDotContainer {
  display: flex !important;
  padding: 8px !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 12px !important;
  background: #f3791f !important;
}
svg.orangeWeb3-tutorialCurrentDot {
  width: 8px !important;
  height: 8px !important;
  aspect-ratio: 1/1 !important;
  fill: #edeff7 !important;
}
.orangeWeb3-tutorialNextLevel {
  width: 33.33% !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0 !important;
  /*   border: 1px dashed green; */
}
.orangeWeb3-tutorialProgressBar-next {
  width: calc(50% - 14px) !important;
  height: 2px !important;
  background: #40424d !important;
}
.orangeWeb3-tutorialNextRing {
  display: flex !important;
  padding: 2px !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 14px !important;
  background: #40424d !important;
}
.orangeWeb3-tutorialNextDotContainer {
  display: flex !important;
  padding: 8px !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 12px !important;
  background: #1e1e24 !important;
}
svg.orangeWeb3-tutorialNextDot {
  width: 8px !important;
  height: 8px !important;
  aspect-ratio: 1/1 !important;
  fill: #6e7180 !important;
}
.orangeWeb3-tutorialLevelDescription {
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 0 !important;
}
.orangeWeb3-tutorialPreviousLevelDesc, .orangeWeb3-tutorialCurrentLevelDesc, .orangeWeb3-tutorialNextLevelDesc {
  width: 33.33% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 8px !important;
/*   border: 1px dashed blue; */
}
h5.orangeWeb3-tutorialLevelHeading {
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Verdana" !important;
  font-size: 14px !important;
  color: #d3d6e0 !important;
  font-weight: bold !important;
  line-height: 1.5 !important;
  text-align: center !important;
}
p.orangeWeb3-tutorialLevelText {
  margin: 0 !important;
  padding: 0 !important;
  width: 80% !important;
  font-family: "Verdana" !important;
  font-size: 12px !important;
  color: #9da2b3 !important;
  font-weight: normal !important;
  line-height: 1.5 !important;
  text-align: center !important;
}
span.orangeWeb3-tutorialXp {
  color: #f3791f !important;
  font-weight: bold !important;
}
#orangeWeb3-rankContainer {
  width: 100% !important;
  padding: 16px 32px !important;
  height: auto !important;
  background-color: #1e1e24 !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}
.orangeWeb3-rankInner {
  width: 100% !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: stretch !important;
  align-items: center !important;
  gap: 0px !important;
}
.orangeWeb3-rankInfoContainer {
  width: 60% !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 16px !important;
}
#orangeWeb3-rankImageContainer {
  width: 96px !important;
  aspect-ratio: 1 / 1 !important;
}
.orangeWeb3-rankImage {
  width: 100% !important;
}
#orangeWeb3-rankTitleContainer {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 0px !important;
}
.orangeWeb3-rankTitleLabel {
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Verdana" !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: normal !important;
  color: #9da2b3 !important;
}
.orangeWeb3-rankTitle {
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Verdana" !important;
  font-size: 24px !important;
  line-height: 1.5 !important;
  font-weight: bold !important;
  color: #f3791f !important;
}
#orangeWeb3-rankXpContainer {
  width: 40% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-end !important;
  gap: 0px !important;
}
.orangeWeb3-rankXpLabel {
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Verdana" !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
  font-weight: normal !important;
  color: #9da2b3 !important;
  text-align: right !important;
}
.orangeWeb3-rankXp {
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Verdana" !important;
  font-size: 24px !important;
  line-height: 1.5 !important;
  font-weight: bold !important;
  color: #edeff7 !important;
  text-align: right !important;
}
.orangeWeb3-socialsContainer,
.orangeWeb3-walletsContainer {
  width: 100% !important;
  background-color: #1e1e24 !important;
  padding: 24px 32px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 24px !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}
.orangeWeb3-socialsHeadingsContainer,
.orangeWeb3-walletsHeadingsContainer {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 8px !important;
}
h4.orangeWeb3-socialsHeading,
p.orangeWeb3-socialsSubHeading,
h4.orangeWeb3-walletsHeading,
p.orangeWeb3-walletsSubHeading {
  margin: 0 !important;
  padding: 0 !important;
  font-family: "Verdana" !important;
  line-height: 1.5 !important;
}
h4.orangeWeb3-socialsHeading,
h4.orangeWeb3-walletsHeading {
  color: #edeff7 !important;
  font-size: 24px !important;
  font-weight: bold !important;
}
p.orangeWeb3-socialsSubHeading,
p.orangeWeb3-walletsSubHeading {
  color: #9da2b3 !important;
  font-size: 14px !important;
  font-weight: normal !important;
}
.orangeWeb3-socialsContentContainer,
.orangeWeb3-walletsContentContainer {
  width: 100% !important;
  /* max-width: 768px !important; */
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 24px !important;
}
.orangeWeb3-divider {
  display: block !important;
  width: 100% !important;
  height: 1px !important;
  background-color: #353333 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
form.orangeWeb3-socialsFormGroup,
form.orangeWeb3-walletsFormGroup {
  width: 100% !important;
}
.orangeWeb3-socialsLabelAndInput {
  width: calc(100% - 128px) !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 16px !important;
}
.orangeWeb3-socialsGoogle,
.orangeWeb3-socialsApple {
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
}
img.orangeWeb3-socialsGoogleLogo,
img.orangeWeb3-socialsAppleLogo {
  width: 40px !important;
  height: 40px !important;
}
label.orangeWeb3-walletsLabel {
  font-family: "Verdana" !important;
  font-size: 16px !important;
  color: #d3d6e0 !important;
  line-height: 1.5 !important;
  font-weight: bold !important;
}
input.orangeWeb3-socialsInput,
input.orangeWeb3-walletsInput {
  margin: 0 !important;
  padding: 12px 24px !important;
  width: 100% !important;
  height: auto !important;
  background-color: #000000 !important;
  border: 2px solid #353333 !important;
  border-radius: 8px !important;
  outline: none !important;
  color: #edeff7 !important;
  font-family: "Verdana" !important;
  font-size: 16px !important;
  font-weight: normal !important;
  line-height: 1 !important;
  transition: border 0.3s ease-in-out !important;
}
input.orangeWeb3-socialsInput {
  max-width: 512px !important;
}
input.orangeWeb3-walletsInput {
  max-width: 568px !important;
}
input.orangeWeb3-socialsInput:focus,
input.orangeWeb3-walletsInput:focus {
  border: 2px solid #f3791f !important;
  transition: border 0.3s ease-in-out !important;
}
.orangeWeb3-socialsInput[readonly],
.orangeWeb3-walletsInput[readonly] {
  color: #6e7180 !important;
}
.orangeWeb3-socialsCopy,
.orangeWeb3-walletsCopy {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 0 !important;
}
img.orangeWeb3-socialsCopyIcon,
img.orangeWeb3-walletsCopyIcon,
img.orangeWeb3-walletsShowHideIcon {
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
}
button.orangeWeb3-socialsEditButton,
button.orangeWeb3-walletsEditButton {
  width: auto !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 10px !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  font-family: "Verdana" !important;
  font-size: 14px !important;
  font-weight: bold !important;
  color: #000000 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  background-color: #f3791f !important;
  border-radius: 8px !important;
  border: none !important;
  outline: none !important;
  transition: background-color 0.3s ease-in-out !important;
}
button.orangeWeb3-socialsEditButton:hover,
button.orangeWeb3-walletsEditButton:hover {
  background-color: #de5b26 !important;
}
img.orangeWeb3-socialsEdit,
img.orangeWeb3-walletsEdit {
  width: 20px !important;
  height: 20px !important;
}
.orangeWeb3-errorText {
  font-family: "Verdana" !important;
  color: #d32f2f !important;
  font-size: 12px !important;
  font-weight: normal !important;
  margin-top: 4px !important;
  line-height: 1.5 !important;
}
.orangeWeb3-walletsEVM {
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  gap: 16px !important;
}
.orangeWeb3-walletsLabelAndInput {
  width: calc(100% - 56px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 16px !important;
}
.orangeWeb3-inputHideCopy-container {
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 16px !important;
}

/* Toaster */
.toast-container {
  position: fixed !important;
  bottom: 20px !important;
  right: 20px !important;
  z-index: 9999 !important;
}
.toast {
  min-width: 260px !important;
  margin-top: 10px !important;
  background-color: #1e1e24 !important;
  color: white !important;
  padding: 12px 16px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  opacity: 0 !important;
  transform: translateX(100%) !important;
  transition: all 0.3s ease-in-out !important;
}
.toast.show {
  opacity: 1 !important;
  transform: translateX(0) !important;
}
.toast.success {
  background-color: #8fb44c !important;
}
.toast.error {
  background-color: #d32f2f !important;
}
.toast.info {
  background-color: #1f9ef2 !important;
}
.toast .close-btn {
  margin-left: 12px !important;
  cursor: pointer !important;
}

/* Media Query */
@media (max-width: 767px) {
  .orangeWeb3-profileBasic {
    padding: 32px 24px !important;
  }
  .orangeWeb3-profileInner,
  .orangeWeb3-rankInner,
  .orangeWeb3-rankInfoContainer {
    flex-direction: column !important;
  }
  #orangeWeb3-profileNames {
    width: 100% !important;
    align-items: center !important;
  }
  .orangeWeb3-profileEdit {
    width: 100% !important;
    display: inline !important;
  }
  .orangeWeb3-input {
    width: 100% !important;
    max-width: 100% !important;
  }
  .orangeWeb3-editButton {
    width: 100% !important;
    height: 48px !important;
  }
  .orangeWeb3-buttonIcon {
    width: 24px !important;
    height: 24px !important;
  }
  .orangeWeb3-buttonText {
    display: inline !important;
  }
  .orangeWeb3-profileDetails {
    flex-direction: column !important;
  }
  .orangeWeb3-rankInner {
    gap: 16px !important;
  }
  .orangeWeb3-rankInfoContainer,
  #orangeWeb3-rankXpContainer {
    width: 100% !important;
  }
  .orangeWeb3-bio,
  .orangeWeb3-rankXpLabel,
  .orangeWeb3-rankXp {
    text-align: center !important;
  }
  #orangeWeb3-rankTitleContainer,
  #orangeWeb3-rankXpContainer {
    align-items: center !important;
  }
  .orangeWeb3-socialsContainer, .orangeWeb3-walletsContainer {
    padding: 24px 24px !important;
    gap: 16px !important;
  }
  .orangeWeb3-walletsEVM {
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
  .orangeWeb3-walletsLabelAndInput {
    width: 100% !important;
  }
  button.orangeWeb3-socialsEditButton, button.orangeWeb3-walletsEditButton {
    width: 100% !important;
  }
  /* img.orangeWeb3-socialsEdit, img.orangeWeb3-walletsEdit {
    display: none !important;
  } */
}