.user-profile {
  display: inline-block;
  width: 100%;
  background: #F1FBFF;
}
.user-profile .thumb-avatar {
  width: 50px;
}
.user-profile .module {
  display: inline-block;
  margin: 10px 0;
  border-radius: 8px;
  padding: 15px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  border: 1px solid #eee;
  position: relative;
}
.user-profile .profile-menu {
  display: inline-block;
  width: 320px;
  margin-left: 15px;
  margin-right: 15px;
  vertical-align: top;
}
.user-profile .profile-menu .profile-navigator.pc {
  display: inline-block;
}
.user-profile .profile-menu .profile-navigator.mobile {
  display: none;
}
@media screen and (max-width: 767px) {
  .user-profile .profile-menu {
    width: calc(100% - 30px);
  }
  .user-profile .profile-menu .profile-navigator.pc {
    display: none;
  }
  .user-profile .profile-menu .profile-navigator.mobile {
    display: inline-block;
    background: transparent;
    border-color: transparent;
    padding: 0;
    margin: 0;
  }
  .user-profile .profile-menu .profile-navigator.mobile .tab-wrapper {
    max-width: 100%;
    background: #fff;
  }
  .user-profile .profile-menu .profile-navigator.mobile .tab-wrapper .tab {
    margin-top: 3px;
    margin-bottom: 3px;
    border: 1px solid #00A6FF;
  }
  .user-profile .profile-menu .profile-navigator.mobile .tab-wrapper .tab.three {
    width: calc(33% - 43px);
  }
}
@media screen and (max-width: 767px) and (max-width: 595px) {
  .user-profile .profile-menu .profile-navigator.mobile .tab-wrapper .tab.three {
    font-size: 13px;
  }
  .user-profile .profile-menu .profile-navigator.mobile .tab-wrapper .tab.three .thumb-ico {
    width: 20px;
  }
}
@media screen and (max-width: 767px) and (max-width: 510px) {
  .user-profile .profile-menu .profile-navigator.mobile .tab-wrapper .tab.three {
    text-align: center;
  }
  .user-profile .profile-menu .profile-navigator.mobile .tab-wrapper .tab.three span {
    width: 100%;
    display: inline-block;
  }
}
@media screen and (max-width: 767px) and (max-width: 445px) {
  .user-profile .profile-menu .profile-navigator.mobile .tab-wrapper .tab.three {
    width: calc(50% - 20px);
    padding: 5px 8px;
  }
  .user-profile .profile-menu .profile-navigator.mobile .tab-wrapper .tab.three .thumb-ico {
    width: 15px;
  }
}
@media screen and (max-width: 767px) {
  .user-profile .profile-menu .profile-navigator.mobile .tab-wrapper .tab.active {
    border-color: transparent;
  }
  .user-profile .profile-menu .profile-navigator.mobile .tab-wrapper .tab.active .thumb-ico {
    -webkit-filter: brightness(0) invert(1);
            filter: brightness(0) invert(1);
  }
  .user-profile .profile-menu .profile-navigator.mobile .field.include-img {
    width: calc(33% - 6px);
    margin: 10px 3px;
    border-radius: 8px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    border: 1px solid #eee;
    background: #fff;
    padding: 15px 6px 6px 6px;
    height: auto;
    min-height: 40px;
    vertical-align: top;
  }
  .user-profile .profile-menu .profile-navigator.mobile .field.include-img.fixed_height {
    height: 85px;
  }
}
@media screen and (max-width: 767px) and (max-width: 640px) {
  .user-profile .profile-menu .profile-navigator.mobile .field.include-img {
    width: calc(50% - 8px);
  }
}
@media screen and (max-width: 767px) and (max-width: 384px) {
  .user-profile .profile-menu .profile-navigator.mobile .field.include-img {
    padding: 6px;
  }
}
@media screen and (max-width: 767px) and (max-width: 340px) {
  .user-profile .profile-menu .profile-navigator.mobile .field.include-img {
    width: calc(100% - 0px);
    height: auto;
    margin: 5px 3px;
  }
}
.user-profile .field {
  display: inline-block;
  width: 100%;
  margin: 5px 0;
  border-radius: 8px;
  padding: 10px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.user-profile .field.active {
  background: -webkit-gradient(linear, left top, left bottom, from(#00A6FF), to(#00A6FF)) !important;
  background: linear-gradient(to bottom, #00A6FF, #00A6FF) !important;
}
.user-profile .field.active .name img {
  -webkit-filter: brightness(0) invert(1) !important;
          filter: brightness(0) invert(1) !important;
}
.user-profile .field.active .value a,
.user-profile .field.active .value p,
.user-profile .field.active .value span {
  color: #fff !important;
}
.user-profile .field.include-img .name {
  min-width: auto;
  margin-right: 5px;
}
.user-profile .field.include-img .name img {
  vertical-align: middle;
  width: 24px;
  -webkit-filter: brightness(0);
          filter: brightness(0);
}
.user-profile .field.include-img .value a {
  vertical-align: middle;
  color: #999;
}
.user-profile .field.include-img .value a.active {
  color: #1677ff !important;
}
.user-profile .field .name {
  display: inline-block;
  width: auto;
  margin: 0;
  font-size: 16px;
}
.user-profile .field strong {
  font-weight: 600;
  color: #222;
}
.user-profile .field p {
  font-size: 14px;
  font-weight: 400;
}
.user-profile .field .value {
  display: inline-block;
  width: auto;
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  vertical-align: middle;
}
.user-profile .field .value.f-right {
  float: right;
}
@media screen and (max-width: 319px) {
  .user-profile .field .value {
    zoom: 0.7;
  }
}
.user-profile .main-content {
  display: inline-block;
  width: calc(100% - 390px);
  border: 1px solid #eee;
  border-radius: 8px;
  vertical-align: top;
  background: #fff;
  border-radius: 8px;
  margin: 10px 0;
  padding: 15px;
}
@media screen and (max-width: 767px) {
  .user-profile .main-content {
    width: calc(100% - 30px);
    margin: 15px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
  }
}
.user-profile .main-content .has-border {
  border-bottom: 1px solid #C2E8FF;
  padding-bottom: 15px;
  color: #1677ff;
}
.user-profile .main-content .required {
  color: red;
}
.user-profile .main-content .field.border-bot-color {
  border-bottom: 1px solid #fff;
  border-radius: 0px;
}
.user-profile .main-content .field.qr {
  padding: 0;
  margin: 0;
}
.user-profile .main-content .field.input .name, .user-profile .main-content .field.select .name {
  width: 150px;
}
@media screen and (max-width: 880px) {
  .user-profile .main-content .field.input .name, .user-profile .main-content .field.select .name {
    width: 120px;
  }
}
@media screen and (max-width: 767px) {
  .user-profile .main-content .field.input .name, .user-profile .main-content .field.select .name {
    width: 100%;
    margin-bottom: 5px;
  }
}
.user-profile .main-content .field.input .value, .user-profile .main-content .field.select .value {
  width: calc(100% - 160px);
}
@media screen and (max-width: 880px) {
  .user-profile .main-content .field.input .value, .user-profile .main-content .field.select .value {
    width: calc(100% - 130px);
  }
}
@media screen and (max-width: 767px) {
  .user-profile .main-content .field.input .value, .user-profile .main-content .field.select .value {
    width: calc(100% - 0px);
  }
}
.user-profile .main-content .field input,
.user-profile .main-content .field select,
.user-profile .main-content .field .custom-select {
  padding: 0 15px;
  border: 1px solid #C2E8FF;
  background: #F4FBFF;
}
.user-profile .main-content .field input[disabled],
.user-profile .main-content .field select[disabled],
.user-profile .main-content .field .custom-select[disabled] {
  background: #eee;
}
.user-profile .main-content .field.picker .num.active {
  color: #FEFC95;
  background-color: #0380CE;
}
.user-profile .main-content .field.picker[disabled] {
  background: #eee;
}
.user-profile .main-content .btn-update-profile {
  min-width: 150px;
}
.user-profile .steps {
  display: inline-block;
  width: 100%;
}
.user-profile .steps .separate {
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px;
}
.user-profile .steps .step {
  display: inline-block;
}
.user-profile .steps .step span {
  color: #888;
  vertical-align: middle;
}
.user-profile .steps .step .num {
  background: -webkit-gradient(linear, left top, left bottom, from(#8E8E8E), to(#8E8E8E)) !important;
  background: linear-gradient(to bottom, #8E8E8E, #8E8E8E) !important;
  display: inline-block;
  border-radius: 50%;
  width: 32px;
  height: auto;
  text-align: center;
  color: #fff;
  font-size: 14px;
}
.user-profile .steps .step.active span {
  color: #009FFF;
}
.user-profile .steps .step.active .num {
  background: -webkit-gradient(linear, left top, left bottom, from(#00A6FF), to(#00A6FF)) !important;
  background: linear-gradient(to bottom, #00A6FF, #00A6FF) !important;
  display: inline-block;
  border-radius: 50%;
  text-align: center;
  color: #fff;
}
.user-profile .steps .step.completed span {
  color: #37B349;
}
.user-profile .steps .step.completed .num {
  background: -webkit-gradient(linear, left top, left bottom, from(#37B349), to(#37B349)) !important;
  background: linear-gradient(to bottom, #37B349, #37B349) !important;
  display: inline-block;
  border-radius: 50%;
  text-align: center;
  color: #fff;
}
.user-profile .pannel {
  display: inline-block;
  background: #C2E8FF;
  width: 320px;
  border-radius: 8px;
  padding: 15px;
  vertical-align: top;
  height: 420px;
}
.user-profile .pannel + .pannel {
  width: calc(100% - 385px);
}
@media screen and (max-width: 991px) {
  .user-profile .pannel {
    width: calc(100% - 30px) !important;
    margin-bottom: 15px;
    height: auto;
  }
}
.user-profile .pannel .expiry-time {
  background: #fff;
  display: inline-block;
  width: 200px;
  border-radius: 8px;
  -webkit-box-shadow: 0 0 5px #eee;
          box-shadow: 0 0 5px #eee;
  padding: 5px 0;
}
.user-profile .tab-wrapper {
  display: inline-block;
  background: rgba(212, 237, 255, 0.8);
  border-radius: 10px;
  padding: 4px;
  max-width: 500px;
  width: 100%;
}
.user-profile .tab {
  display: inline-block;
  padding: 8px 20px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  color: #7a7a7a;
  font-weight: 500;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.user-profile .tab.two {
  width: calc(50% - 4px);
}
.user-profile .tab.active {
  background: -webkit-gradient(linear, left top, left bottom, from(#2da7ff), to(#007bff));
  background: linear-gradient(180deg, #2da7ff, #007bff);
  color: white;
  font-weight: 600;
}
.user-profile .table-responsive {
  overflow-x: auto;
  width: 100%;
}
.user-profile .table-responsive table {
  width: 100%;
  table-layout: auto;
  min-width: 600px;
}
.user-profile .collapse-toggle {
  background: none;
  border: none;
  font-size: 22px;
  color: #007aff;
  cursor: pointer;
  margin-left: auto;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  float: right;
}
.user-profile .collapsed .collapse-toggle {
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.user-profile .collapse-content {
  max-height: 2000px;
  overflow: hidden;
  opacity: 1;
  -webkit-transition: max-height 0.4s ease, opacity 0.3s ease;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}
.user-profile .collapsed .collapse-content {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}