li.switchAccountPanel {
  --color-neutral-1: #eff5ff;
  --color-text-5: #2354E6;
  display: none;
}
body.classic-dark li.switchAccountPanel {
  --color-neutral-1: #1f2433;
  --color-text-5: #4070FF;
}
#mainHeader li.switchAccountPanel {
  height: auto;
  padding: 0 16px;
  box-sizing: border-box;
  margin: 8px 0 !important;
  column-gap: 16px;
  flex-direction: column;
  row-gap: 12px;
}
#mainHeader #drawer_container_profile li.switchAccountPanel {
  margin: 24px 0 16px 0!important;
}
#mainHeader #topLoginBar li.switchAccountPanel {
  margin: 16px 0 !important;
}
#mainHeader li.switchAccountPanel > a {
  height: 40px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-radius: 99px;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  min-height: auto !important;
  width: auto;
}
#mainHeader li.switchAccountPanel > a:last-child{
  color: var(--color-text-text-primary);
  background-color: var(--color-cmpt-button-soft);
}
#mainHeader li.switchAccountPanel > a:last-child:hover {
  color: var(--color-text-text-tertiary);
}
#mainHeader li.switchAccountPanel > a:first-child
{
  color: var(--color-text-inverse-primary);
  background-color: var(--color-cmpt-button-primary);
}
#mainHeader li.switchAccountPanel > a:first-child:hover{
  color: var(--color-text-text-tertiary);
}
@media screen and (max-width: 768px) {
  #mainHeader li.switchAccountPanel > a {
    height: 48px;
  }
}
@media screen and (min-width: 768px){
  #mainHeader li.switchAccountPanel > a.search-deposit-btn-a {
    display: none;
  }
  #mainHeader #drawer_container_profile li.switchAccountPanel > a 
  {
    color: var(--color-text-inverse-primary);
    background-color: var(--color-cmpt-button-primary);
  }
  #mainHeader #drawer_container_profile li.switchAccountPanel > a:hover {
    color: var(--color-text-text-tertiary);
  }
}
/* #mainHeader li.switchAccountPanel > a:hover {
  color: var(--color-text-5);
}
body.classic-dark #mainHeader li.switchAccountPanel > a:hover {
  color: var(--color-text-5);
} */

/* 弹窗start */
.switchAccountWrapper {
  --color-brand-1: #2354E6;
  --color-text-1: #262933;
  --color-text-2: #434446;
  --color-text-3: #70798c;
  --color-text-4: #ACB2BF;
  --color-text-5: #2354E6;
  --color-text-7: #ACB2BF;
  --color-text-disabled: #B3B3B3;
  --color-text-9: #2354E6;
  --color-funct-2: #009967;
  --color-funct-3: #CC3D55;
  --color-card-2: #ffffff;
  --color-card-4: #FFFFFF;
  --color-card-7: #F5F5F7;
  --color-neutral-1: #eff5ff;
  --color-neutral-2: #f2f7ff;
  --color-neutral-3: #f2f3f7;
  --color-neutral-4: #b8bfcc;
  --color-cmpt-1: rgba(4, 9, 26, 0.9); /* #04091A（90%） */
  --color-cmpt-2: #EBEDF2;
  --color-cmpt-3: #FFFCF3;
  --color-cmpt-7: #eff5ff;
  --color-cmpt-6: rgba(38, 41, 51, 0.90);
  --color-cmpt-4: #FFF1F1;
  --color-cmpt-8: #F2FFFB;
  --color-cmpt-12: #EDEFF4;
  --color-cmpt-13: #fff5ec;
  --color-cmpt-15: #edf4ff;
  --color-border-1: #0B0C0D;
  --color-divider-2: #eef1fa;
  --color-divider-3: #dce8fd;
  --color-divider-5: #E9EBF0;
  --color-icon-3: #70798c;
  --color-bg-1: #FFFFFF;
  --color-other-2: #F2B80C;
  --skeleton-gradient-from-color: rgba(0, 0, 0, 0.06);
  --skeleton-gradient-to-color: rgba(0, 0, 0, 0.15);
}
body.classic-dark .switchAccountWrapper {
  --color-brand-1: #266FFF;
  --color-text-1: #e0e0e0;
  --color-text-2: #BFBFBF;
  --color-text-3: #8C8C8C;
  --color-text-4: #474F66;
  --color-text-5: #4070FF;
  --color-text-7: #5C6270;
  --color-text-disabled: #6D6D6D;
  --color-text-9: #FAFAFA;
  --color-funct-2: #009967;
  --color-funct-3: #CC3D55;
  --color-card-2: #14151a;
  --color-card-4: #1B1D22;
  --color-card-7: #20232B;
  --color-neutral-1: #3C4150;
  --color-neutral-2: #080c1a;
  --color-neutral-3: #1a1c23;
  --color-neutral-4: #b8bfcc;
  --color-cmpt-1: rgba(96, 104, 128, 1); /* #474F66（90%） */
  --color-cmpt-2: #323642;
  --color-cmpt-3: #27272B;
  --color-cmpt-4: #261C2A;
  --color-cmpt-6: rgba(71, 79, 102, 0.90);
  --color-cmpt-7: #203040;
  --color-cmpt-8: #24332E;
  --color-cmpt-12: #2E2E2E;
  --color-cmpt-13: #321900;
  --color-cmpt-15: #182253;
  --color-border-1: #FAFAFA;
  --color-divider-2: #262933;
  --color-divider-3: #262933;
  --color-divider-5: #262933;
  --color-icon-3: #70798c;
  --color-bg-1: #14141A;
  --color-other-2: #F2B500;
  --skeleton-gradient-from-color: rgb(255, 255, 255, 0.15);
  --skeleton-gradient-to-color: rgba(255, 255, 255, 0.6);
}

.switchAccountWrapper .modal-body {
  overflow: auto;
  max-height: 65vh;
  height: 100%;
  padding-right: 12px;
  margin-right: -14px;
}
[lang="ar"] .switchAccountWrapper .modal-body {
  padding-right: 0;
  margin-right: 0;
  padding-left: 12px;
  margin-left: -14px;
}
.switchAccountWrapper .modal-body::-webkit-scrollbar-thumb {
  background-color: var(--color-divider-1);
}
.switchAccountWrapper .accItemBox {
  position: relative;
  border: 1px solid var(--color-divider-2);
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* min-height: 102px; */
  box-sizing: border-box;
}
.switchAccountWrapper .accItemBox.accItemCurrent {
  border-color: var(--color-border-1);
}
.switchAccountWrapper .accItemBox .accInfo {
  display: flex;
  align-items: center;
}
.switchAccountWrapper .accItemBox .accInfo.accInfoFrozen h3,
.switchAccountWrapper .accItemBox .accInfo.accInfoFrozen p {
  color: var(--color-text-disabled) !important;
}
.switchAccountWrapper .accItemBox .accInfo.accInfoFrozen > img,
.switchAccountWrapper .accItemBox .accInfo.accInfoFrozen > svg {
  opacity: 0.5;
  
}
.switchAccountWrapper .accItemBox .accInfo > img,
.switchAccountWrapper .accItemBox .accInfo .user_avatar_default {
  width: 48px;
  height: 48px;
  margin-right: 8px;
  border-radius: 50%;
}
[lang="ar"] .switchAccountWrapper .accItemBox .accInfo > img,
[lang="ar"] .switchAccountWrapper .accItemBox .accInfo .user_avatar_default {
  margin-right: 0;
  margin-left: 8px;
}
/* body.classic-dark .switchAccountWrapper .accItemBox .accInfo .user_avatar_default {

} */
.switchAccountWrapper .accItemBox .accTitleFlex {
  display: inline-flex;
  align-items: center;
  margin-bottom: 2px;
  color: var(--color-text-1);
}
.switchAccountWrapper .accItemBox .accTitleFlex h3 {
  font-size: 16px;
  font-weight: 600;
  margin-right: 8px;
  color: var(--color-text-1);
}
[lang="ar"] .switchAccountWrapper .accItemBox .accTitleFlex h3 {
  margin-right: 0;
  margin-left: 8px;
}
.switchAccountWrapper .accItemBox .accTitleFlex .userTickVipTag {
  margin-right: 8px;
  margin-top: 4px;
  min-width: 23px;
  height: 14px;
}
[lang="ar"] .switchAccountWrapper .accItemBox .accTitleFlex .userTickVipTag {
  margin-right: 0;
  margin-left: 8px;
}
.switchAccountWrapper .accItemBox .accTitleFlex .tagMainOrSubAcc {
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 600;
}
.switchAccountWrapper .accItemBox .accTitleFlex .subAcc {
  color: var(--color-funct-6);
  background-color: var(--color-cmpt-15);
}
.switchAccountWrapper .accItemBox .accTitleFlex .mainAcc {
  color: var(--color-funct-4);
  background-color: var(--color-cmpt-13);
}
.switchAccountWrapper .accItemBox p {
  margin-bottom: 8px;
  color: var(--color-text-3);
}
.switchAccountWrapper .accItemBox p:last-child {
  margin-bottom: 0px;
}

.switchAccountWrapper .accItemBox .accOperation button {
  border-radius: 20px;
  border: none;
  height: 32px;
  padding: 0 16px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.switchAccountWrapper .accItemBox .accOperation .pinButton {
  margin-right: 8px;
  background: var(--color-neutral-3);
  color: var(--color-text-1);
}
[lang="ar"] .switchAccountWrapper .accItemBox .accOperation .pinButton {
  margin-right: 0;
  margin-left: 8px;
}
.switchAccountWrapper .accItemBox .accOperation .pinButton:hover {
  background: var(--color-brand-1);
  color: #fff;
}
.switchAccountWrapper .accItemBox .accOperation .switchButton {
  background: var(--color-brand-1);
  color: #fff;
}
.switchAccountWrapper .accItemBox .accOperation .switchButton:hover {
  background: var(--color-brand-2);
}

.switchAccountWrapper .accItemBox .isCurrentTag {
  position: absolute;
  right: 0;
  top: 0;
  padding: 5px 8px;
  border-radius: 0px 7px 0px 12px;
  background-color: var(--color-pd-4);
  color: var(--color-funct-2);
  font-weight: 600;
}
[lang="ar"] .switchAccountWrapper .accItemBox .isCurrentTag {
  left: 0;
  right: unset;
  border-radius: 7px 0px  12px 0px ;
}

.switchAccountWrapper .AccountsContent {
  margin-top: 16px;
  min-height: 446px;
}
.switchAccountWrapper .AccountsContent .accTitleSearch, 
.switchAccountWrapper .AccountsContent .accTitleSearch h2 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  color: var(--color-text-1);
  margin-bottom: 14px;
}
.switchAccountWrapper .AccountsContent .accTitleSearch .searchBox {
  width: 240px;
  height: 32px;
  position: relative;
  display: inline-flex;
  align-items: center;
}
.switchAccountWrapper .AccountsContent .accTitleSearch .searchBox .searchIcon {
  position: absolute;
  left: 8px;
  color: var(--color-neutral-4);
}
[lang="ar"] .switchAccountWrapper .AccountsContent .accTitleSearch .searchBox .searchIcon {
  left: unset;
  right: 8px;
}
.switchAccountWrapper .AccountsContent .accTitleSearch .searchBox input {
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-divider-2);
  background: var(--color-card-2);
  color: var(--color-text-1);
  border-radius: 4px;
  text-indent: 28px;
  padding-right: 32px;
  font-weight: 500;
}
[lang="ar"] .switchAccountWrapper .AccountsContent .accTitleSearch .searchBox input {
  padding-left: 32px;
  padding-right: 8px;
}
.switchAccountWrapper .AccountsContent .accTitleSearch .searchBox input::placeholder {
  color: var(--color-text-4);
  font-weight: 500;
}
.switchAccountWrapper .AccountsContent .accTitleSearch .searchBox input:focus {
  border-color: var(--color-brand-1);
}
.switchAccountWrapper .AccountsContent .accTitleSearch .searchBox .clearIcon {
  position: absolute;
  right: 8px;
  color: var(--color-divider-1);
  cursor: pointer;
}
[lang="ar"] .switchAccountWrapper .AccountsContent .accTitleSearch .searchBox .clearIcon {
  right: unset;
  left: 8px;
}

.switchAccountWrapper .accItemList .accItemBox {
  margin-bottom: 16px;
  cursor: pointer;
}
.switchAccountWrapper .accItemList .accItemBox:hover {
  border: 1px solid var(--color-divider-3);
  background: var(--color-neutral-2);
}

.switchAccountWrapper .accItemList .accItemBox .accOperation {
  display: none;
}
.switchAccountWrapper .accItemList .accItemBox:hover .accOperation {
  display: block;
}

/* 弹层基础样式 */
body.switch-account-panel-show {
  overflow: hidden;
}
.gate-switch-account-modal-wrapper .modal-mask {
  position: fixed;
  z-index: 1000;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  transition: all 0.5s;
}

.gate-switch-account-modal-wrapper .modal-container {
  z-index: 1001;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  /* transform: translate(-50%, -50%) scale(0.9);
  opacity: 0.8;
  transition: all 300ms ease-in; */
  background: var(--color-card-2);

  width: 820px;
  border-radius: 16px;
  padding: 32px 40px;
  box-shadow: 0 0 16px rgba(20, 40, 130, 0.05);
  font-weight: 400;
  box-sizing: border-box;
}

.gate-switch-account-modal-wrapper .modal-container.animated {
  transform: translate(-50%, -50%);
  opacity: 1;
}

.gate-switch-account-modal-wrapper .modal-title {
  display: flex;
  justify-content: space-between;
  color: var(--color-text-1);
  font-weight: 600;
  line-height: 150%;
  font-size: 24px;
  margin-bottom: 16px;
}

.gate-switch-account-modal-wrapper .modal-title .iconshanchu {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-4);
  font-weight: 400;
  cursor: pointer;
  width: 24px;
  height: 24px;
  font-size: 24px;
  position: absolute;
  right: 16px;
  top: 16px;
}
[lang="ar"] .gate-switch-account-modal-wrapper .modal-title .iconshanchu {
  right: unset;
  left: 16px;
}

.gate-switch-account-modal-wrapper .switch-input:checked {
  background-color: var(--color-brand-1);
  border-color: var(--color-brand-1);
}
.gate-switch-account-modal-wrapper .switch-input {
  background-color: var(--color-neutral-2);
  border-color: var(--color-neutral-2);
  cursor: pointer;
}

.gate-switch-account-modal-wrapper .modal-title .iconshanchu:hover {
  color: var(--color-text-4) !important;
}

/* .gate-switch-account-modal-wrapper .modal-body {} */

.gate-switch-account-modal-wrapper .modal-body .block-tips {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--color-card-1);
  color: var(--color-text-1);
  font-size: 12px;
  border-radius: 4px;
  padding: 12px;
}

.gate-switch-account-modal-wrapper .modal-body .block-tips::placeholder {
  color: var(--color-text-4) !important;
}

.gate-switch-account-modal-wrapper .modal-body .anchor {
  color: var(--color-brand-1);
  font-weight: 400;
  font-size: 14px;
  cursor: pointer;
}

.gate-switch-account-modal-wrapper .modal-body .form {
  margin-top: 24px;
}

.gate-switch-account-modal-wrapper .modal-body .form .form-title {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--color-text-2);
  padding-bottom: 8px;
}

.gate-switch-account-modal-wrapper .modal-body .form .form-content {
  padding-bottom: 16px;
}

.gate-switch-account-modal-wrapper .modal-body .form input {
  width: 100%;
  height: 40px;
  border-radius: 4px;
  border: 1px solid var(--color-divider-1);
  background-color: var(--color-cmpt-2);
  border-radius: 4px;
  font-size: 14px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  box-sizing: border-box;
}

.gate-switch-account-modal-wrapper .modal-body .form input::placeholder {
  color: var(--color-text-4) !important;
}

.gate-switch-account-modal-wrapper .modal-body .form input:focus,
.gate-switch-account-modal-wrapper .modal-body .form input:hover {
  border-color: var(--color-brand-1);
}

/* 弹层内容 */
.gate-switch-account-modal-wrapper .button-box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  margin-bottom: -32px;
}

.gate-switch-account-modal-wrapper .button-box .confirm-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 4px;
  padding: 0 24px;
  cursor: pointer;
  outline: none;
  border: none;
  color: var(--color-brand-1);
  background: none;
}
.gate-switch-account-modal-wrapper .button-box .confirm-btn:hover {
  color: var(--color-brand-2);
}

.gate-switch-account-modal-wrapper .tipPopEm {
  position: relative;
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
  cursor: pointer;
}
.gate-switch-account-modal-wrapper .tipPopEm:hover > svg path {
  fill: var(--color-brand-1);
}
.gate-switch-account-modal-wrapper .tipPopEm:hover .popBox {
  display: block !important;
}
.gate-switch-account-modal-wrapper .popBox {
  position: fixed;
  transform: translate(calc(-50% + 9px), 10px);
  padding: 12px;
  max-width: 400px;
  background-color: var(--color-cmpt-1);
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  line-height: 150%;
  color: #fff;
  z-index: 10;
  margin-top: -6px;
}
.gate-switch-account-modal-wrapper .popBox::after {
  display: inline-block;
  content: '';
  position: absolute;
  left: 50%;
  top: -5px;
  width: 0;
  height: 0;
  transform: rotate(180deg) translateX(50%);
  border-top: 5px dashed;
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  color: var(--color-cmpt-1);
}

.gate-switch-account-modal-wrapper .blockTips {
  position: absolute;
  bottom: 96px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 500px;
  border-radius: 4px;
  border: 1px solid rgba(35, 84, 230, 0.6);
  background: var(--color-cmpt-7);
  box-shadow: 0px 0px 26px 0px rgba(13, 31, 66, 0.07);
  display: flex;
  align-items: center;
  font-size: 14px;
  color: var(--color-text-1);
  padding: 16px;
  z-index: 1004;
}
.gate-switch-account-modal-wrapper .blockTips.infoBoxTips {
  top: 10px;
  bottom: auto;
}
.gate-switch-account-modal-wrapper .blockTips.successBoxTips {
  top: 10px;
  bottom: auto;
  border: 1px solid rgba(17, 173, 122, 0.60);
  background: var(--color-cmpt-8);
  box-shadow: 0px 0px 26px 0px rgba(13, 31, 66, 0.07);
}
.gate-switch-account-modal-wrapper .blockTips.errorBoxTips {
  top: 10px;
  bottom: auto;
  border: none;
  background: var(--color-cmpt-4);
}
.gate-switch-account-modal-wrapper .switch-notification-icon {
  flex-shrink: 0;
}
.gate-switch-account-modal-wrapper .blockTips > svg {
  margin-right: 8px;
}
/* end region 弹层样式 - new */

/* start region verification */
.gate-switch-account-modal-wrapper .verification-modal-mask { z-index: 1002;}
.gate-switch-account-modal-wrapper .switch-verification-modal__content {
  z-index: 1003;
  background-color: var(--color-card-4);
  padding-top: 24px;
  border-radius: 8px;
  width: 588px;
}
.switch-verification-modal__content .verification-back-wrapper {
  display: inline-flex;
  align-items: center;
  width: fit-content;
}
.switch-verification-modal__content .verification-back-wrapper:hover {
  cursor: pointer;
}
.switch-verification-modal__content .verification-back__label {
  font-size: 20px;
  color: var(--color-text-3);
  line-height: 24px;
  font-weight: 500;
  padding-left: 8px;
}
.switch-verification-modal__content .verification-modal__content {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
}
.switch-verification-modal__content .verification-content__title {
  font-size: 28px;
  line-height: 34px;
  color: var(--color-text-1);
  font-weight: 600;
}
.switch-verification-modal__content .verification-content__message {
  display: flex;
  align-items: center;
  margin: 16px 0;
  padding: 8px 12px;
  border-radius: 4px;
  background-color: var(--color-cmpt-3);
  height: 34px;
  box-sizing: border-box;
}
.switch-verification-modal__content .verification-content__message svg {
  margin-right: 8px;
  flex-shrink: 0;
}
.switch-verification-modal__content .verification-message__text {
  font-size: 12px;
  /* line-height: 18px; */
  color: var(--color-text-1);
}
.switch-verification-modal__content .form-item__label {
  font-size: 14px;
  color: var(--color-text-2);
  line-height: 16px;
  margin-bottom: 8px;
}
.switch-verification-modal__content .form-item-input__wrapper {
  display: flex;
  align-items: center;
  border: 1px solid var(--color-divider-5);
  height: 48px;
  width: 100%;
  padding: 0 16px;
  border-radius: 4px;
  background-color: var(--color-bg-1);
  box-sizing: border-box;
}
.switch-verification-modal__content .form-item__input {
  padding: 0;
  border: none;
  border-radius: 0;
  outline: none;
  font-size: 14px;
  font-weight: 500;
  line-height: 17px;
  margin-right: 8px;
  width: 100%;
  color: var(--color-text-1);
  background-color: transparent;
}
.switch-verification-modal__content .form-item__input::placeholder {
  color: var(--color-text-4)!important;
  font-weight: 500;
  line-height: 17px;
  opacity: 1;
}
.switch-verification-modal__content .form-item-input__suffix {
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
  cursor: pointer; 
  color: var(--color-text-5);
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  white-space: nowrap;
}
.switch-verification-modal__content .form-item-input__suffix:disabled {
  color: var(--color-text-7);
  cursor: not-allowed;
  pointer-events: none;
}
.switch-verification-modal__content .form-item-input__suffix--disabled {
  color: var(--color-text-7);
}
.switch-verification-modal__content .form-item-input--error {
  font-size: 12px;
  line-height: 15px;
  color: var(--color-funct-3);
  margin-top: 8px;
}
.switch-verification-modal__content .form-item-input__wrapper--error {
  border-color: var(--color-funct-3);
}
.switch-verification-modal__content .verification-modal__footer {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}
.switch-verification-modal__content .verification-btn-default {
  color: var(--color-text-9);
}
.switch-verification-modal__content .verification-btn {
  width: 100%;
  height: 40px;
  font-weight: 600;
  font-size: 16px;
  line-height: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-neutral-1);
  border-radius: 20px;
}
.switch-verification-modal__content .verification-btn:hover {
  cursor: pointer;
  background-color: var(--color-brand-1);
  color: #ffffff;
}
.switch-verification-modal__content .verification-btn-primary {
  background-color: var(--color-brand-1);
  color: #ffffff;
}
.switch-verification-modal__content .verification-btn-primary:hover {
  background-color: var(--color-brand-2);
}
.switch-verification-modal__content .verification-btn-disabled  {
  background-color: var(--color-cmpt-2);
  color: var(--color-text-7);
}
.switch-verification-modal__content .verification-btn-disabled:hover {
  cursor: not-allowed;
  background-color: var(--color-cmpt-2);
  color: var(--color-text-7);
}
.gate-switch-account-modal-wrapper .switch-verification-modal__content .modal-title .iconshanchu {
  width: 16px;
  height: 16px;
  color: var(--color-icon-3);
}
/* end region verification */

/* 空状态 start */
.switchAccountWrapper .margin-warper-empty {
  margin: 80px 0 130px 0;
}
.switchAccountWrapper .noorder {
  width: 180px;
  height: 180px;
  margin: 0 auto;
  background: url(/images/switch-account/empty-light.webp) center center no-repeat;
  background-size: cover;
  margin-top: 0;
}
.switchAccountWrapper .noorderText {
  display: block;
  text-align: center;
  margin-top: 16px;
  font-size: 16px;
  color: var(--color-text-3);
}
body.classic-dark .switchAccountWrapper .noorder {
  background-image: url(/images/switch-account/empty-dark.webp) !important;
}
/* 空状态 end */

/* 加载中 start */
.modalSwitchAccount .loading_more, .modalSwitchAccount .loading_more_button {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.modalSwitchAccount .loading_more_button {height: 100%;}
/* 加载中 end */

.AccountsContent .handleScrollTopBut {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-icon-3);
  border-radius: 50%;
  background-color: var(--color-card-2);
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 16px;
  bottom: 90px;
  cursor: pointer;
}
.AccountsContent .handleScrollTopBut:hover {
  border-color: var(--color-brand-1);
  background-color: var(--color-brand-1);
}
.AccountsContent .handleScrollTopBut:hover svg path {
  stroke: #fff;
}

.switchAccountWrapper .account-skeleton-item {
  display: flex;
}
.switchAccountWrapper .account-skeleton-item:not(:first-child) {
  margin-top: 24px;
}
.switchAccountWrapper .account-skeleton-container {
  width: 100%;
  display: flex;
  flex-direction: column;
}
.main-skeleton-container {
  height: 101px;
}

.switchAccountWrapper .account-skeleton-content {
  height: 24px;
  margin-bottom: 14px;
  background-color: var(--color-card-7);
}
.switchAccountWrapper .account-skeleton-content:last-child {
  margin-bottom: 0;
}

.switchAccountWrapper .account-skeleton-list {
  width: 100%;
}

.switchAccountWrapper .account-skeleton-content {
  width: 100%;
}

@keyframes skeleton-loading {
  0% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0 50%;
  }
}
.account-skeleton-container .account-skeleton-header {
  width: 48px;
  height: 48px;
  margin-right: 8px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.switchAccountWrapper .account-skeleton-container .account-skeleton-content,
.switchAccountWrapper .account-skeleton-container .account-skeleton-header
 {
  background: linear-gradient(90deg, var(--skeleton-gradient-from-color) 25%, var(--skeleton-gradient-to-color) 37%, var(--skeleton-gradient-from-color) 63%);
  background-size: 400% 100%;
  animation-name: skeleton-loading;
  animation-duration: 1.4s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
}

/* ======================= h5 start ======================= */
@media screen and (max-width: 820px) {
  .gate-switch-account-modal-wrapper .modal-container {
    max-width: 80vw;
  }
}
@media screen and (max-width: 768px) {
  /* #mainHeader li.switchAccountPanel > a:hover {
    color: #FFFFFF;
    background-color: var(--color-brand-2);
  } */
  .gate-switch-account-modal-wrapper .modal-container {
    max-width: 100vw;
    width: 100%;
    top: 6%;
    left: 0;
    bottom: 0;
    transform: unset !important;
    box-shadow: unset;
    border-radius: 8px 8px 0px 0px;
    padding: 24px 16px 24px;
  }
  .gate-switch-account-modal-wrapper .modal-title {
    font-size: 16px;
  }
  .gate-switch-account-modal-wrapper .modal-title .iconshanchu {
    width: 20px;
    height: 20px;
  }
  .switchAccountWrapper .modal-body {
    /* max-height: 80vh; */
    max-height: calc(100% - 48px );
  }
  .gate-switch-account-modal-wrapper .tipPopEm > svg {
    vertical-align: text-top;
  }

  .gate-switch-account-modal-wrapper .modal-body .block-tips .mantine-Switch-track {
    min-width: 38px;
  }
  .gate-switch-account-modal-wrapper .button-box {
    height: 48px;
    padding: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    margin-bottom: 0;
  }

  .switchAccountWrapper .accItemBox .isCurrentTag {
    border-radius: 50%;
    border: 1px solid var(--color-brand-1);
    padding: 4px;
    right: 8px;
    top: 8px;
  }
  .switchAccountWrapper .accItemBox.accItemCurrent {
    background-color: var(--color-neutral-2);
    border-color: var(--color-neutral-2);
  }

  .switchAccountWrapper .accItemBox .isCurrentTag::after {
    content: ' ';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-brand-1);
  }
  .switchAccountWrapper .accItemBox .accTitleFlex {
    align-items: center;
    margin-bottom: 4px;
  }
  .switchAccountWrapper .accItemBox .accTitleFlex h3 {
    font-size: 14px;
    line-height: 150%;
    margin-right: 4px;
  }
  .switchAccountWrapper .accItemBox .accTitleFlex .userTickVipTag {
    margin-right: 4px;
    margin-top: 0;
  }
  .switchAccountWrapper .accItemBox .accTitleFlex .tagMainOrSubAcc {
    padding: 0 4px;
    font-weight: 500;
    height: 16px;
    line-height: 16px;
  }
  .switchAccountWrapper .accItemBox p {
    margin-bottom: 4px;
  }

  .gate-switch-account-modal-wrapper .accItemBox:hover .operation-tip__phone {
    display: block !important;
  }
  .gate-switch-account-modal-wrapper .operation-tip__phone {
    position: absolute;
    right: 52px;
    top: 15px;
    padding: 8px 12px;
    max-width: 400px;
    background-color: var(--color-cmpt-6);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    line-height: 150%;
    color: #fff;
    z-index: 10;
    display: flex;
    align-items: center;
  }
  .gate-switch-account-modal-wrapper .operation-tip__phone::after {
    display: inline-block;
    content: '';
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 0;
    height: 0;
    border-top: 5px dashed;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    color: var(--color-cmpt-6);
    transform: translateX(-50%);
  }
  .operation-tip__phone .operation__divider {
    color: var(--color-text-4);
    padding: 0 4px;
  }
  .gate-switch-account-modal-wrapper .tipPopEm:hover .popBox {
    max-width: 265px;
  }

  .switchAccountWrapper .AccountsContent .accTitleSearch h2 {
    font-weight: 600;
    font-size: 14px;
  }
  .switchAccountWrapper .AccountsContent .accTitleSearch .searchBox {
    width: 160px;
  }
}
/* ======================= h5 end ======================= */