.userprofile-header {
   --profile-bg-color: #2A2E3E;
   --profile-text-color-primary: #fff;
   --profile-text-color-secondary: #f5f5f5;
   --profile-border-color: #fff;
   height: max-content;
   display: flex;
   flex-direction: column;
   background-color: var(--profile-bg-color);
}

.userprofile-header .header {
   max-width: 1300px;
   width: 100%;
   margin: 0 auto;
   padding: 30px 16px;
   display: flex;
   align-items: center;
   gap: 12px;
   justify-content: space-between;
}

.user-info {
   display: flex;
   justify-content: flex-start;
   gap: 16px;
   width: 100%;
}

.user-info .right {
   gap: 6px !important;
   flex-direction: column !important;
   justify-content: center;
}

.user-info .user-img {
   height: 180px;
   width: 180px;
   border: 4px solid var(--profile-border-color);
   border-radius: 50%;
}

.user-info .user-img.default-profile-pic {
   border: none;
}

.user-info .user-name-social-holder {
   display: flex;
   gap: 16px;
   align-items: center;
}

.user-info .user-name-social-holder .user-social-media {
   margin: 0;
}

.user-bio.header-bio {
   border: none;
   margin: 0;
   padding: 0px;
   width: 100%;
}

.user-bio.header-bio .content {
   margin: 10px 0;
   border: none;
}

.user-bio.header-bio .content p.author-bio {
   color: var(--profile-text-color-primary);
   font-size: 16px !important;
   font-weight: 400 !important;
   line-height: 25px;
   text-align: left;
   margin: 0;
}

.user-info .user-fullname {
   font-weight: 600;
   font-size: 20px;
   line-height: 24px;
   letter-spacing: 0.5px;
   color: var(--profile-text-color-primary);
}

.user-info .author-title {
   font-weight: 400;
   font-size: 14px;
   line-height: 16px;
   color: var(--profile-text-color-secondary);
}

.user-info .user-status {
   font-weight: 500;
   font-size: 16px;
   line-height: 22px;
   color: var(--profile-text-color-secondary);
}

.user-info .update-user-status {
   color: var(--active-color);
   font-weight: 500;
   font-size: 14px;
   line-height: 17px;
}

.user-stats {
   display: flex;
   gap: 37px;
   margin-left: 114px;
}

.user-stats .count {
   text-align: center;
}

.count.followers-count,
.count.following-count {
   cursor: pointer;
}

.user-stats .count .value {
   font-weight: 500;
   font-size: 16px;
   line-height: 22px;
   color: var(--profile-text-color-primary);
}

.user-stats .count .text {
   font-weight: 400;
   font-size: 12px;
   line-height: 17px;
   color: var(--profile-text-color-primary);
}

.header .right {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.user-info .right {
   max-width: 70%;
}

.user-follow-edit-section {
   min-width: 200px;
}

.btn-follow {
   height: 40px;
   width: 194px;
   border-radius: 40px;
   font-weight: 500;
   font-size: 14px;
   line-height: 16px;
   cursor: pointer;
   font-family: 'Rubik' !important;
}

.btn-follow.follow {
   background: var(--active-color);
   border: none;
   color: #FFF;
}

.btn-follow.follow:hover {
   background: var(--active-color);
}

.btn-follow.follow::after {
   content: "＋ Follow";
}

.btn-follow.following {
   background: var(--surface-color);
   border: 1px solid var(--active-color);
   color: var(--active-color);
}

.btn-follow.following::after {
   content: "✓ Following";
}

.btn-edit-profile,
.btn-edit-bio {
   display: flex;
   align-items: center;
   justify-content: center;
   height: 40px;
   width: 194px;
   border-radius: 40px;
   font-weight: 500;
   font-size: 14px;
   line-height: 16px;
   background: var(--bg-color);
   border: none;
   cursor: pointer;
   font-family: 'Rubik' !important;
   color: var(--textColor);
   text-decoration: none;
}

.right .btn-edit-bio {
   display: none;
}

.btn-share,
.share-container .share-text-holder.share-btn {
   height: 40px;
   width: 194px;
   border: none;
   color: var(--textColor);
   font-weight: 700;
   font-size: 14px;
   line-height: 16px;
   background: var(--surface-color);
   border-radius: 40px;
   cursor: pointer;
   display: block;
   position: relative;
}

.share-container .share-text-holder.share-btn:hover {
   background: var(--surface-color);
}

.userprofile-tabs {
   border-bottom: 1px solid var(--border-color--alpha);
   position: sticky;
   top: 50px;
   background: var(--bg-color);
   z-index: 1001;
}

.tabs {
   display: flex;
   max-width: 1300px;
   width: 100%;
   margin: 0 auto;
   padding: 14px;
   gap: 50px;
   border-top: 1px solid var(--border-color--alpha);
   font-weight: 500;
   font-size: 14px;
   line-height: 17px;
   color: var(--active-color);
}

.user-profile-tab {
   color: var(--textColor);
   text-decoration: none;
   padding: 14px 14px 13px 14px;
}

.user-profile-tab.hovered {
   color: var(--active-color);
   border-bottom: 2px solid var(--active-color);
}

.user-info .left {
   position: relative;
   height: 180px;
   width: 180px;
}

.profile-pic-upload {
   position: absolute;
   right: 0;
   bottom: 0;
   height: 28px;
   width: 28px;
}

.tooltip {
   position: fixed;
   background-color: var(--surface-color);
   color: var(--textColor);
   padding: 5px 10px;
   border-radius: 5px;
   z-index: 9999;
   transition: opacity 0.3s ease-in-out;
   left: 50%;
   bottom: 60px;
   transform: translateX(-50%);
}

.tooltip.hidden {
   opacity: 0;
   pointer-events: none;
}

.user-bio {
   border: 1px solid var(--border-color--alpha);
   margin-bottom: 16px;
}

.user-bio h2 {
   border-bottom: 1px solid var(--border-color--alpha);
   padding: 16px 20px;
   font-weight: 600;
   font-size: 16px;
   line-height: 16px;
   letter-spacing: 0.01em;
   color: var(--textColor);
}

.user-bio .content {
   margin: 16px 20px;
   position: relative;
   border-bottom: 1px solid var(--border-color--alpha);
}

.user-bio .content p.author-bio {
   padding: 0;
   font-weight: 400;
   font-size: 14px !important;
   line-height: 24px;
   color: var(--textColor);
   overflow: hidden;
   height: auto;
   margin-bottom: 16px;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 4;
}

@media (max-width: 1024px) {
   .user-follow-section {
      display: flex;
      gap: 5px;
      justify-content: center;
   }
}

.user-bio .content p.author-bio.expanded {
   -webkit-line-clamp: unset;
}

.user-bio .content p.read-more {
   cursor: pointer;
   line-height: 24px;
   position: absolute;
   right: 0;
   text-align: right;
   padding: 5px 8px;
   margin: 0;
   width: fit-content;
   background: var(--profile-bg-color);
   color: var(--profile-text-color-primary);
   font-size: 14px;
   font-weight: 400;
   top: 100%;
}

.user-bio .content p.read-less {
   cursor: pointer;
   line-height: 24px;
   position: absolute;
   right: 0;
   text-align: right;
   padding: 0 8px;
   margin: 0;
   width: fit-content;
   background: var(--profile-bg-color);
   color: var(--profile-text-color-primary);
   font-size: 14px;
   font-weight: 400;
   bottom: 0;
}

.user-social-media {
   display: flex;
   gap: 12px;
   margin: 16px 20px;
   align-items: center;
}

.user-social-media a.inactive {
   pointer-events: none;
}

.user-social-media a {
   width: 26px;
   height: 26px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 15px;
}

.user-social-media img {
   background: none;
   height: 100%;
   width: 100%;
}

.user-social-media #author-twitter-refresh img {
   background: none;
   height: 18px;
   width: 18px;
   margin: 0;
}

@media (max-width: 1024px) {
   .userprofile-header {
      border: none;
      height: fit-content;
      border-bottom: 8px solid var(--border-color--alpha);
      background-color: var(--profile-bg-color);
   }

   .userprofile-header .header {
      width: 100%;
      display: flex;
      flex-direction: column;
      text-align: left;
      height: fit-content;
      align-items: flex-start;
      gap: 10px;
      padding: 16px;
   }

   .user-info {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 10px;
   }

   .header .right {
      flex-direction: column;
      width: 100%;
      display: flex;
      justify-content: center;
      max-width: 100%;
      gap: 8px;
      margin-top: 10px;
   }

   .user-follow-section {
      display: flex;
      gap: 5px;
      justify-content: center;
   }

   .btn-follow.follow,
   .btn-follow.following,
   .btn-edit-bio {
      height: 32px;
      width: 150px;
   }

   .btn-edit-profile {
      height: 32px;
      width: 150px;
   }

   .share-top.share-container {
      position: relative;
      margin: 0;
   }

   .user-info .left {
      position: relative;
      height: 98px;
      width: 98px;
   }

   .user-info .right {
      gap: 4px !important;
      justify-content: center;
      width: auto;
      align-items: center;
   }

   .user-info .user-fullname {
      line-height: 16px;
   }

   .user-info .author-title {
      font-size: 12px;
      line-height: 16px;
   }

   .user-info .update-user-status {
      color: #0B65F0;
      font-weight: 500;
      font-size: 12px;
      line-height: 16px;
   }

   .user-name-social-media-contaniner {
      display: flex;
      gap: 10px;
      align-items: center;
   }

   .user-social-media.top {
      margin: 0;
   }

   .btn-share,
   .share-container .share-text-holder.share-btn {
      height: 32px;
      width: 32px;
      position: relative;
   }

   .user-info .user-img {
      height: 98px;
      width: 98px;
      border: 4px solid var(--profile-border-color);
      border-radius: 50%;
   }

   .user-stats {
      display: flex;
      gap: unset;
      margin-left: 0;
      padding-top: 16px;
      justify-content: space-between;
   }

   .userprofile-tabs {
      border: none;
      box-shadow: 1px 1px 7px rgb(0 0 0 / 7%);
      position: sticky;
      top: 50px;
      background: var(--bg-color);
      z-index: 1001;
   }

   .tabs {
      width: 100%;
      margin: 0;
      gap: 16px;
      padding: 16px 8px;
   }

   .profile-pic-upload {
      position: absolute;
      right: 0;
      bottom: 0;
      height: 21px;
      width: 21px;
   }

   .user-info .user-status {
      font-weight: 500;
      font-size: 12px;
      line-height: 17px;
      color: var(--profile-text-color-secondary);
   }

   .user-bio.header-bio .content p.author-bio {
      font-size: 14px !important;
      font-weight: 400;
      line-height: 20px;
      text-align: left;
   }

   .user-bio {
      border: none;
      padding: 16px;
      display: flex;
      flex-direction: column;
      border-bottom: 8px solid var(--border-color--alpha);
      margin: 0;
   }

   .user-bio h2 {
      border: none;
      padding: 0;
      margin: 0;
      font-weight: 500;
      font-size: 14px;
      line-height: 17px;
   }

   .user-bio .content p.author-bio {
      font-weight: 400;
      font-size: 12px !important;
      line-height: 19px;
   }

   .user-bio .content p.read-more {
      bottom: 0;
      right: 0;
      font-size: 12px !important;
      line-height: 19px;
   }

   .user-bio .content p.read-less {
      bottom: 0;
      right: 0;
      font-size: 12px !important;
      line-height: 19px;
   }

   .user-social-media {
      display: flex;
      gap: 12px;
      margin: 12px 0 0 0;
      flex-direction: row;
      float: none;
      clear: both;
   }
}

.follower-following {
   height: auto;
}

.follower-following-tabs {
   display: flex;
   width: 100%;
   gap: 32px;
   border-top: none;
   margin: 0;
   padding: 16px 16px 14px 16px;
   font-weight: 500;
   font-size: 14px;
   line-height: 17px;
   color: var(--textColor);
   border-bottom: 1px solid var(--border-color--alpha);
}

.followers-tab {
   text-decoration: none;
   padding: 14px 14px 13px 14px;
}

.followers-tab.hovered {
   color: var(--active-color);
   border-bottom: 2px solid var(--active-color);
}

.follower-following-container {
   padding: 20px 16px;
   text-align: center;
}

.default-msg {
   font-weight: 400;
   font-size: 16px;
   line-height: 22px;
   color: var(--textColor);
   padding: 40px;
   text-align: center;
}

.follower-wrapper {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   padding: 16px 0;
   align-items: center;
   border-top: 1px solid var(--border-color--alpha);
}

.follower-wrapper:first-of-type {
   border: none;
   padding: 0 0 16px 0;
}

.follower-following-list .follower-wrapper {
   padding: 16px 0;
}

.follower-wrapper .author-info {
   display: flex;
   justify-content: flex-start;
   gap: 12px;
   align-items: center;
}

.author-info .left {
   display: flex;
   justify-content: flex-start;
}

.follower-img {
   border-radius: 50%;
}

.follow-button {
   height: 26px;
   width: 78px;
   left: 0px;
   top: 0px;
   border-radius: 40px;
   background: var(--active-color);
   border: none;
   color: #FFF;
   font-weight: 500;
   font-size: 12px;
   line-height: 16px;
   cursor: pointer;
   font-family: 'Rubik' !important;
}

.follow-button.follow::after {
   content: "Follow";
}

.follow-button.following {
   background: var(--bg-color);
   color: var(--active-color);
   border: 1px solid var(--active-color);
}

.follow-button.following::after {
   content: "Following";
}

.view-more-wrapper {
   text-align: center;
   padding: 8px;
   font-weight: 500;
   font-size: 16px;
   line-height: 19px;
   color: var(--textColor);
   border: 1px solid var(--border-color--alpha);
   border-radius: 2px;
   cursor: pointer;
}

.follower-following-popup-container {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   position: fixed;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.7);
   top: 0;
   left: 0;
   z-index: 99999;
}

.follower-following-box {
   width: 706px;
   background: var(--bg-color);
   border: 1px solid var(--border-color--alpha);
   box-shadow: -1px 4px 20px rgb(0 0 0 / 4%);
   border-radius: 6px;
}

.follower-following-box .header {
   border-bottom: 1px solid var(--border-color--alpha);
   box-shadow: -1px 4px 20px rgb(0 0 0 / 4%);
   height: 56px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.follower-following-box .header .right-side {
   padding: 8px 20px;
   display: flex;
   justify-content: center;
   gap: 25px;
   align-items: center;
}

.follower-following-box .header .right-side .search {
   border-radius: 40px;
   width: 262px;
   height: 40px;
   border: none;
   padding: 12px;
   padding: 13px;
   background: none;
   background-color: var(--bg-color);
   background-image: url("/assets/img/search.svg");
   background-repeat: no-repeat;
   padding-left: 38px;
   background-position: 13px;
   background-size: 14px;
   font-family: 'Rubik' !important;
}

.follower-following.tabs {
   display: flex;
   width: 100%;
   gap: 32px;
   border-top: none;
   margin: 0;
   padding: 10px 16px 1px 16px;
   font-weight: 500;
   font-size: 14px;
   line-height: 17px;
   color: var(--textColor);
}

.followers-tab,
.close {
   cursor: pointer;
}

.follower-following-list {
   display: flex;
   flex: 1;
   flex-direction: row;
   flex-wrap: wrap;
   gap: 0 24px;
   overflow: scroll;
   max-height: 600px;
   min-height: 600px;
   align-content: flex-start;
   padding: 0 20px;
}

.follower-following-list.no-data {
   justify-content: center;
}

.follower-following-list .follower-wrapper {
   width: 48%;
}

@media (max-width: 1024px) {
   .follower-following-box {
      position: absolute;
      width: 100%;
      height: auto;
      max-height: unset;
      bottom: 0;
      border: unset;
   }

   .follower-following-list {
      flex-direction: column;
      flex-wrap: nowrap;
      overflow: scroll;
      max-height: 600px;
      min-height: 600px;
      justify-content: unset;
      padding: 0;
   }

   .tabs.follower-following .followers-tab {
      padding: 14px 10px 13px 10px;
   }

   .follower-following-box .header .right-side {
      padding: 8px;
      gap: 16px;
   }

   .follower-following-list .follower-wrapper {
      width: unset;
      margin: 0 20px 0 20px;
   }

   .follower-wrapper:first-of-type {
      padding: 16px 0;
   }

   .follower-following-box .header {
      height: 46px;
   }

   .follower-following-box .tabs.follower-following {
      gap: 8px;
      padding: 0 0 2px 0;
   }

   .follower-following-box .header .right-side .search {
      width: 130px;
      height: 26px;
      padding: 13px;
      background: none;
      background-color: var(--surface-color);
      background-image: url("/assets/img/search.svg");
      background-repeat: no-repeat;
      padding-left: 38px;
      background-position: 13px;
      background-size: 14px;
   }
}

.author-profile-link {
   text-decoration: none;
}

.author-info .right {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   text-align: left;
   gap: 4px;
}

.follower-name {
   font-size: 14px;
   line-height: 16px;
   font-weight: 500;
   color: var(--textColor);
   letter-spacing: 0.5px;
   width: 150px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.follower-writer-title {
   font-weight: 400;
   font-size: 12px;
   line-height: 16px;
   color: var(--textColor);
   text-transform: capitalize;
}

/* writer-stats */
.writer-stats {
   border: 1px solid var(--border-color--alpha);
   margin-bottom: 16px;
}

.writer-stats h2 {
   border-bottom: 1px solid var(--border-color--alpha);
   padding: 16px 20px;
   font-weight: 500;
   font-size: 16px;
   line-height: 16px;
   letter-spacing: 0.01em;
   color: var(--textColor);
}

.writer-stats .stats {
   margin: 16px 20px;
   display: flex;
   gap: 16px;
}

.writer-stats .stats .single-stats {
   width: 100%;
   border: 1px solid var(--border-color--alpha);
   border-radius: 4px;
   text-align: left;
   padding: 12px 16px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 4px;
}

.single-stats .value {
   font-weight: 500;
   font-size: 14px;
   line-height: 21px;
   color: var(--textColor);
}

.single-stats .text {
   font-weight: 400;
   font-size: 14px;
   line-height: 21px;
   color: var(--textColor);
}

.user-published-stories {
   border: 1px solid var(--border-color--alpha);
   margin-bottom: 16px;
}

.user-published-stories h2 {
   border-bottom: 1px solid var(--border-color--alpha);
   padding: 16px 20px;
   font-weight: 500;
   font-size: 16px;
   line-height: 16px;
   letter-spacing: 0.01em;
   color: var(--textColor);
}

.stories-tabs {
   display: flex;
   width: 100%;
   margin: 0 auto;
   padding: 14px 20px 0 20px;
   gap: 10px;
   font-weight: 500;
   font-size: 14px;
   line-height: 17px;
}

.stories-tabs .tab {
   padding: 8px 12px;
   height: 31px;
   border-radius: 28px;
   font-weight: 500;
   font-size: 12px;
   line-height: 15px;
   background: var(--surface-color);
   border: 1px solid var(--border-color--alpha);
   box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.07);
   border-radius: 28px;
   color: var(--textColor);
   cursor: pointer;
}

.stories-tabs .tab.hovered {
   background: var(--active-color);
   color: #FFF;
}

.search-stories-div {
   margin: 0 auto;
   padding: 14px 20px;
}

.search-stories-div .search-stories {
   border-radius: 40px;
   height: 40px;
   border: none;
   width: 100%;
   outline: none;
   padding: 13px;
   background-color: var(--surface-color);
   background-image: url("/assets/img/search.svg");
   background-repeat: no-repeat;
   padding-left: 38px;
   background-position: 13px;
   font-family: 'Rubik' !important;
}

@media (max-width: 1024px) {

   /* writer-stats */
   .writer-stats {
      border: none;
      padding: 16px;
      display: flex;
      flex-direction: column;
      border-bottom: 8px solid var(--border-color--alpha);
      margin: 0;
   }

   .writer-stats h2 {
      border: none;
      padding: 0;
      margin: 0;
      font-weight: 500;
      font-size: 14px;
      line-height: 21px;
   }

   .writer-stats .stats {
      margin: 16px 0 0 0;
      justify-content: space-between;
      gap: 8px;
   }

   .writer-stats .stats .single-stats {
      width: 100%;
      padding: 10px;
   }

   .single-stats .text {
      font-size: 12px;
      line-height: 18px;
   }

   .user-bio .content {
      margin: 12px 0 0 0;
   }

   .user-published-stories {
      border: none;
      margin: 0;
   }

   .user-published-stories h2 {
      margin: 0;
      border: none;
      padding: 16px 16px 12px 16px;
      font-weight: 500;
      font-size: 14px;
      line-height: 17px;
   }

   .search-stories-div {
      margin: 0 auto;
      padding: 12px 16px;
   }

   .search-stories-div .search-stories {
      padding: 13px;
      background: none;
      background-color: var(--surface-color);
      background-image: url("/assets/img/search.svg");
      background-repeat: no-repeat;
      padding-left: 38px;
      background-position: 13px;
   }

   .user-published-stories .stories-tabs {
      padding: 0 16px;
   }

   .user-social-media img {
      height: 22px;
      width: 22px;
   }
}


.profile .story-wrapper {
   position: relative;
   display: unset;
   width: 100%;
   color: unset;
   overflow: unset !important;
   margin-bottom: unset !important;
   background-color: var(--bg-color);
   border: unset !important;
   padding: 0 0 0 0 !important;
}

.story-wrapper .story-permalink {
   text-decoration: none !important;
   color: unset !important;
   height: 100%;
   width: 100%;
   position: absolute;
}

.author-story {
   display: flex;
   gap: 16px;
}

.author-story {
   padding: 16px 0;
   margin: 0 20px;
   border-top: 1px solid var(--textColor);
}

.author-story.first-story {
   border: none;
   padding: 0 0 16px 0;
}

.author-story .story-info {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   width: 100%;
}

.author-story .thumbnail {
   width: 218px;
   max-width: 218px;
   min-width: 218px;
   height: 125px;
   border-radius: 4px;
   background: none;
   margin: 0;
   object-fit: cover;
}

.author-story .meta {
   display: flex;
   justify-content: space-between;
   font-weight: 400;
   font-size: 14px;
   line-height: 17px;
   color: var(--textColor);
}

.meta-secondary .page-views {
   background: url("/assets/img/page-views.svg") no-repeat;
   background-size: 14px 10px;
   padding-left: 18px;
   background-position: left;
}

.author-story .title {
   font-weight: 500;
   font-size: 16px;
   line-height: 30px;
   color: var(--textColor);
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

.story-wrapper:hover .title {
   color: var(--active-color);
}

.meta-primary {
   display: flex;
   align-items: center;
   gap: 4px;
}

@media (max-width: 1024px) {
   .author-story {
      padding: 16px 0;
      margin: 0 16px;
   }

   .author-story .thumbnail {
      width: 86px;
      max-width: 86px;
      min-width: 86px;
      height: 81px;
   }

   .author-story .title {
      font-weight: 500;
      font-size: 14px;
      line-height: 21px;
   }

   .author-story .meta {
      font-weight: 400;
      font-size: 10px;
      line-height: 12px;
   }

   .meta-primary .sport-name {
      overflow: hidden;
      max-width: 20ch;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: inline-block;
   }
}


/* ============== edit Profile ============= */

.edit-profile-page {
   display: flex;
   gap: 24px;
   flex-direction: row;
}

.edit-profile-page .edit-profile-menu-container {
   width: 319px;
   height: fit-content;
   display: flex;
   flex-direction: column;
   position: sticky;
   top: 70px;
   gap: 12px;
}

.edit-profile-menu-container .edit-profile-menu {
   display: flex;
   flex-direction: column;
   border: 1px solid var(--border-color--alpha);
}

.edit-profile-menu-container .save-info-button {
   display: flex;
   width: 318px;
   padding: 10px 16px;
   justify-content: center;
   align-items: center;
   gap: 10px;
   border: none;
   border-radius: 74px;
   background: var(--active-color);
   opacity: 0.5;
}

.save-info-button span {
   color: #FFF;
   font-size: 14px;
   font-weight: 600;
   line-height: 21px;
}

.edit-profile-menu .edit-profile-heading-cta {
   display: flex;
   flex-direction: row;
   gap: 12px;
   align-items: center;
   padding: 16px 20px;
   border-bottom: 1px solid var(--border-color--alpha);
}

#go-to-profile {
   text-decoration: none;
}

.edit-profile-menu .edit-profile-heading-cta img {
   height: 10px;
   width: 6px;
   background: none;
   margin: 0;
}

.edit-profile-menu .edit-profile-heading-cta span {
   font-weight: 700;
   font-size: 16px;
   line-height: 20px;
   letter-spacing: 0.01em;
   color: var(--textColor);
}

.edit-profile-menu .menu-item {
   font-weight: 400;
   font-size: 15px;
   line-height: 18px;
   color: var(--textColor);
   padding: 12px 20px;
   margin: 10px 0;
   cursor: pointer;
   border-left: 3px solid transparent;
}

.menu-item.selected {
   border-left: 3px solid var(--active-color);
}

.input,
.textarea {
   color: var(--textColor);
}

.edit-profile-page .edit-user-profile {
   width: 730px;
}

.edit-user-profile .profile-pic-section {
   display: flex;
   justify-content: space-between;
   align-items: center;
   border: 1px solid var(--border-color--alpha);
   padding: 20px;
}

.profile-pic-section .user-pic {
   position: relative;
   cursor: pointer;
}

.user-pic .user-img {
   height: 96px !important;
   width: 96px !important;
   background: none !important;
   border-radius: 50%;
}

.user-pic .profile-pic-upload {
   height: 26px !important;
   width: 26px !important;
   position: absolute;
   right: 0;
   bottom: 0;
   background: none !important;
}

.edit-user-profile .basic-info-section {
   border: 1px solid var(--border-color--alpha);
   padding: 20px;
   margin-top: 16px;
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.basic-info-section .name,
.basic-info-section .status,
.basic-info-section .bio,
.basic-info-section .location {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.basic-info-section .location {
   width: 40%;
}

.basic-info-section .name label,
.basic-info-section .status label,
.basic-info-section .bio label,
.basic-info-section .location label {
   font-weight: 500;
   font-size: 16px;
   line-height: 20px;
   color: var(--textColor);
}

.basic-info-section .name input,
.basic-info-section .status input {
   border: 1px solid var(--border-color--alpha);
   border-radius: 2px;
   height: 35px;
   padding: 8px 6px;
   color: var(--textColor);
}

.basic-info-section .bio textarea {
   height: 90px;
   border: 1px solid var(--border-color--alpha);
   border-radius: 2px;
   color: var(--textColor);
   padding: 8px 6px;
}

.location select {
   height: 35px;
   border: 1px solid var(--border-color--alpha);
   border-radius: 2px;
   cursor: pointer;
   padding: 8px 6px;
   background-image: url(//staticg.sportskeeda.com/skm/assets/user_profile/dropdown.svg);
   background-repeat: no-repeat;
   background-position: calc(100% - 14px) center, center center, 100% center;
   appearance: none;
}

.edit-user-profile .social-media-section,
.edit-user-profile .profile-url-section {
   border: 1px solid var(--border-color--alpha);
   padding: 20px;
   margin-top: 16px;
}

.social-media-section h2,
.profile-url-section h2 {
   font-weight: 500;
   font-size: 16px;
   line-height: 20px;
   color: var(--textColor);
   margin: 0;
}

.social-media-section h2 span,
.profile-url-section h2 span {
   font-weight: 400;
   font-size: 12px;
   line-height: 14px;
   color: var(--textColor);
}

.social-media-section .sm-inputs {
   display: flex;
   flex-direction: column;
   gap: 16px 20px;
   padding: 16px 0 0 0;
}

.sm-inputs .sm-type {
   display: flex;
   align-items: center;
   gap: 4px;
}

.sm-type img {
   height: 20px;
   width: 20px;
   background: none;
   margin: 0;
}

.sm-type input {
   height: 35px;
   width: 238px;
   border: 1px solid var(--border-color--alpha);
   border-radius: 2px;
   padding: 8px 6px;
   color: var(--textColor);
}

.keeda-user-social-handle-label {
   font-size: 14px;
}

.profile-url-section .profile-url {
   display: flex;
   gap: 20px;
   padding: 16px 0 3px 0;
}

.profile-url span {
   font-weight: 400;
   font-size: 16px;
   line-height: 19px;
   color: var(--textColor);
}

.profile-url img {
   height: 20px;
   width: 16px;
   background: none;
   margin: 0;
   cursor: pointer;
}

.edit-user-profile .personal-info-section {
   border: 1px solid var(--border-color--alpha);
   padding: 20px;
   margin-top: 16px;
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.personal-info-section h2 {
   font-weight: 700;
   font-size: 14px;
   line-height: 17px;
   text-transform: uppercase;
   color: var(--textColor);
   margin: 0;
}

.personal-info-section .two-fields {
   display: flex;
   gap: 20px;
   border-bottom: 1px solid var(--border-color--alpha);
   padding-bottom: 20px;
}

.gender,
.dob {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.gender label,
.dob label {
   font-weight: 500;
   font-size: 16px;
   line-height: 20px;
   color: var(--textColor1);
}

#gender,
#dob {
   width: 224px;
   height: 35px;
   border: 1px solid #999999;
   border-radius: 2px;
   padding: 8px 6px;
   cursor: pointer;
   background-image: url(//staticg.sportskeeda.com/skm/assets/user_profile/dropdown.svg);
   background-repeat: no-repeat;
   background-position: calc(100% - 14px) center, center center, 100% center;
   appearance: none;
}

.personal-info-section .mobile-number,
.personal-info-section .password,
.personal-info-section .email {
   border-bottom: 1px solid var(--border-color--alpha);
   padding-bottom: 20px;
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.personal-info-section .email {
   border: none;
   padding: 0;
}

.mobile-number label,
.password label,
.email label {
   font-weight: 500;
   font-size: 16px;
   line-height: 20px;
   color: var(--textColor1);
}

.mobile-number-edit,
.password-edit,
.email-edit {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.mobile-number-edit span,
.password-edit span,
.email-edit span {
   font-weight: 400;
   font-size: 16px;
   line-height: 19px;
   color: var(--textColor1);
}

.mobile-number-edit img,
.password-edit img,
.email-edit img {
   height: 13px;
   width: 13px;
   background: none;
   margin: 0;
   cursor: pointer;
}

.email-input {
   display: flex;
   justify-content: space-between;
   gap: 20px;
}

.email-input input {
   width: 100%;
   height: 35px;
   border: 1px solid #999999;
   border-radius: 2px;
   padding: 8px 6px;
   color: var(--textColor1);
}

.email-input button {
   font-size: 14px;
   font-weight: bold;
   border: none;
   color: #fff;
   padding: 6px 18px;
   background-color: var(--active-color);
   width: 180px;
   height: 35px;
   border-radius: 40px;
   margin: 0;
}

#input-email-error {
   color: #D32F2F;
}

#email-pwd {
   width: 100%;
   padding: 12px 20px;
   margin: 8px 0;
   display: inline-block;
   border: 1px solid #ccc;
   box-sizing: border-box;
}

@media (max-width: 1024px) {
   .content-holder {
      margin: 0;
   }

   .header-ad {
      display: none;
   }

   .edit-profile-page {
      flex-direction: column;
      margin-bottom: 55px;
   }

   .edit-profile-page .edit-user-profile {
      width: auto;
   }

   #go-to-profile {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      font-weight: 500;
      font-size: 14px;
      line-height: 17px;
      color: #666666;
   }

   .edit-user-profile .profile-pic-section {
      border: none;
      border-bottom: 8px solid #e5e5e5;
   }

   .profile-pic-section .user-img {
      height: 72px !important;
      width: 72px !important;
      border-radius: 50%;
   }

   .user-pic .profile-pic-upload {
      height: 21px !important;
      width: 21px !important;
   }

   .edit-user-profile .basic-info-section,
   .edit-user-profile .social-media-section,
   .edit-user-profile .profile-url-section,
   .edit-user-profile .personal-info-section {
      margin: 0;
      border: none;
      border-bottom: 8px solid #e5e5e5;
      padding: 16px 16px 14px 16px;
   }

   .name label,
   .status label,
   .bio label,
   .location label {
      font-weight: 500;
      font-size: 14px;
      line-height: 17px;
      color: #2D2D2D;
   }

   .social-media-section h2,
   .profile-url-section h2 {
      font-weight: 500;
      font-size: 14px;
      line-height: 17px;
      color: #2D2D2D;
   }

   .sm-inputs .sm-type {
      width: 100%;
   }

   .sm-type input {
      width: 100%;
   }

   .keeda-user-social-handle-label {
      font-size: 12px;
   }

   .gender,
   .dob {
      width: 50%;
   }

   #gender,
   #dob {
      width: unset;
   }

   .basic-info-section .location {
      width: 100%;
   }

   .flatpickr-input.flatpickr-mobile {
      height: 35px;
      border: 1px solid #999999;
      border-radius: 2px;
      padding: 8px 6px;

   }

   .additional-cta-info {
      display: flex;
      justify-content: space-between;
      padding: 8px 20px;
      border-bottom: 1px solid #F5F5F5;
   }

   .additional-cta-info img {
      height: 16px !important;
      width: 16px !important;
   }

   .email-input {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      flex-direction: column;
   }

   .email-input button {
      width: 100%;
   }

   .button-container {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: fit-content;
      padding: 8px 16px;
      position: fixed;
      bottom: 0;
      background-color: #FFF;
   }

   .button-container button {
      display: flex;
      width: 159px;
      padding: 8px 16px;
      justify-content: center;
      align-items: center;
      gap: 10px;
      border-radius: 74px;
   }

   .button-container .cancel-button {
      border: 1px solid #999;
      background: #FFF;
   }

   .cancel-button span {
      color: #999;
      font-size: 14px;
      font-weight: 600;
      line-height: 21px;
   }

   .button-container .save-info-button {
      border: 1px solid #37C77A;
      background: #37C77A;
      opacity: 0.5;
   }

   .save-info-button span {
      color: #FFF;
      font-size: 14px;
      font-weight: 600;
      line-height: 21px;
   }
}

.remove-profile-pic-popup-container {
   display: flex;
   justify-content: center;
   align-items: center;
   position: fixed;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.7);
   top: 50px;
   left: 0;
   z-index: 99999;
}

.profile-pic-popup {
   max-width: 500px;
   height: auto;
   border: 1px solid var(--border-color--alpha);
   box-shadow: -1px 4px 20px rgba(0, 0, 0, 0.04);
   border-radius: 6px;
   background: #FFFFFF;
}

.profile-pic-popup .header {
   padding: 18px 20px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   border-bottom: 1px solid var(--border-color--alpha);
   box-shadow: -1px 4px 20px rgb(0 0 0 / 4%);
   height: 56px;
}

.profile-pic-popup .header span {
   font-weight: 700;
   font-size: 16px;
   line-height: 20px;
   color: #666666;
}

.profile-pic-popup .header img {
   margin: 0;
   background: 0;
   height: 15px;
   width: 15px;
}

.profile-pic-popup .content {
   padding: 30px 20px 20px 20px;
   text-align: center;
}

.profile-pic-popup .content .upload-pic-btn {
   padding: 12px 32px;
   color: #FFF;
   width: 100%;
   height: 40px;
   background: var(--active-color);
   border-radius: 40px;
   border: none;
   cursor: pointer;
   font-weight: 700;
   font-size: 14px;
   line-height: 17px;
   text-align: center;
   letter-spacing: 0.01em;
}

.content .info-msg {
   text-align: center;
   font-weight: 400;
   font-size: 14px;
   line-height: 20px;
   color: #999999;
   width: 244px;
   margin: 14px auto;
}

.remove-photo-cta {
   font-weight: 500;
   font-size: 16px;
   line-height: 20px;
   color: #474747;
   cursor: pointer;
}

.avatar-heading {
   font-weight: 400;
   font-size: 14px;
   line-height: 17px;
   color: #666666;
   text-align: center;
   display: grid;
   grid-template-columns: 33% auto 10fr;
   grid-template-rows: 8px 0;
   grid-gap: 12px 16px;
   padding: 16px 0 0 0;
}

.avatar-heading:after,
.avatar-heading:before {
   content: " ";
   display: block;
   border-bottom: 1px solid var(--border-color--alpha);
}

.avatar-options {
   display: flex;
   padding: 20px 28px;
   gap: 25px 52px;
   flex-direction: row;
   flex-wrap: wrap;
}

.avatar-options .one-avatar {
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 52px;
   width: 52px;
   border-radius: 50%;
   background: #EEF2F5;
   position: relative;
}

.avatar-options .one-avatar:hover {
   border: 2px solid var(--active-color);
   border-radius: 50%;
   background: #FBEBEB;
}

.avatar-options .avatar-img {
   background: none;
   height: 35px;
   width: 26px;
   margin: 0;
}

.avatar-img.no-avatar {
   height: 48px;
   width: 48px;
}

.avatar-selected {
   position: absolute;
   right: -5px;
   bottom: 0;
   background: none !important;
   display: none !important;
   height: 20px !important;
   width: 20px !important;
   margin: 0;
}

.avatar-options .one-avatar .avatar-selected {
   display: none !important;
}

.avatar-options .one-avatar:hover .avatar-selected {
   display: block !important;
}

.file-input__input {
   width: 0.1px;
   height: 0.1px;
   opacity: 0;
   overflow: hidden;
   position: absolute;
   z-index: -1;
}

.file-input__label {
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 12px 32px;
   color: #FFF;
   width: 100%;
   height: 40px;
   background: var(--active-color);
   border-radius: 40px;
   border: none;
   cursor: pointer;
   font-weight: 700;
   font-size: 14px;
   line-height: 17px;
   text-align: center;
   letter-spacing: 0.01em;
}

.profile-pic-popup-container {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   position: fixed;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.7);
   top: 50px;
   left: 0;
   z-index: 99999;
}

.selected-image-popup-container {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   position: fixed;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.7);
   top: 0;
   left: 0;
   z-index: 99999;
}

.selected-image-popup {
   background: #141414;
   width: 500px;
   text-align: center;
   height: auto;
   padding: 20px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   gap: 20px;
}

.selected-image-popup .uploaded-img-container {
   max-width: 800px;
   max-height: 450px;
}

.image-ctas {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
}

.image-ctas img,
.rotate-cta img {
   height: 15px;
   width: 15px;
   background: none;
   margin: 0;
}

.image-ctas span,
.rotate-cta {
   font-weight: 500;
   font-size: 14px;
   line-height: 17px;
   color: #FFFFFF;
}

.gallery-img {
   min-height: 400px;
   min-width: 400px;
}

.rotate-cta {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
   gap: 10px;
}

.remove-profile-pic-popup {
   width: 274px;
   height: 226px;
   background: #FFFFFF;
   border-radius: 8px;
   border: 1px solid var(--border-color--alpha);
   box-shadow: -1px 4px 20px rgba(0, 0, 0, 0.04);
   padding: 24px 30px 16px;
   text-align: center;
}

.remove-profile-pic-popup .remove-profile-pic-confirmation-msg {
   font-weight: 700;
   font-size: 16px;
   line-height: 20px;
   text-align: center;
   color: #2D2D2D;
   padding: 16px 0 4px 0;
}

.remove-profile-pic-popup .remove-profile-pic-info-msg {
   font-weight: 400;
   font-size: 14px;
   line-height: 17px;
   text-align: center;
   color: var(--active-color);
}

.remove-profile-pic-popup .ctas {
   display: flex;
   justify-content: space-between;
   padding: 24px 0 0 0;
}

.ctas .cancel {
   width: 106px;
   height: 33px;
   background: #FFFFFF;
   border-radius: 30px;
   border: none;
   font-weight: 500;
   font-size: 14px;
   line-height: 17px;
   text-align: center;
   color: #666666;
}

.ctas .remove {
   width: 106px;
   height: 33px;
   background: #AF2222;
   border-radius: 30px;
   border: none;
   color: #FFF;
   font-weight: 500;
   font-size: 14px;
   line-height: 17px;
   text-align: center;
}

.image-ctas img {
   cursor: pointer;
}

.image-ctas #done-img {
   cursor: pointer;
}

.image-ctas #back-to-edit {
   cursor: pointer;
}

.remove-profile-pic-popup .remove-icon {
   height: 64px;
   width: 64px;
}

@media (max-width: 1024px) {
   .remove-profile-pic-popup-container {
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      top: 0;
      left: 0;
      z-index: 99999;
   }

   .profile-pic-popup {
      position: absolute;
      width: 100%;
      height: auto;
      max-height: unset;
      bottom: 0;
   }

   .profile-pic-popup .content {
      margin-bottom: 40px;
   }

   .avatar-options {
      padding: 10px 2px;
   }

   .selected-image-popup {
      max-width: 100%;
   }
}


.mobile-verification-div .mobile-verification-overlay,
.password-edit-div .password-edit-overlay {
   width: 100%;
   position: fixed;
   height: 100%;
   left: 0;
   top: 0;
   background: #000000;
   opacity: 0.3;
   z-index: 10000;
}

.mobile-verification-div .mobile-number-box,
.mobile-verification-div .otp-verification-box,
.password-edit-div .password-edit-box,
.mobile-verification-div .verification-result-box {
   position: fixed;
   z-index: 100001;
   height: 300px;
   width: 360px;
   border-radius: 12px;
   background: var(--surface-color);
   left: 35%;
   top: 25%;
   padding: 16px;
   text-align: center;
}

.heading {
   line-height: 20px;
   font-size: 16px;
   font-weight: 700;
   color: #474747;
   margin: 10px;
}

.sub-text {
   line-height: 20px;
   font-size: 16px;
   font-weight: 400;
   color: #999999;
   margin-bottom: 20px;
}

.mobile-input-div {
   width: 100%;
   border: solid 1px #999999;
   height: 40px;
   border-radius: 4px;
}

.otp-input-div {
   width: 196px;
   margin: auto;
   border: solid 1px #999999;
   height: 40px;
   border-radius: 4px;
}

.otp-input-div input::placeholder

/* Chrome, Firefox, Opera, Safari 10.1+ */
   {
   letter-spacing: normal !important;
}

.otp-input-div input:-ms-input-placeholder {
   letter-spacing: normal !important;
}

.otp-input-div input::-ms-input-placeholder {
   letter-spacing: normal !important;
}

.form-input {
   box-shadow: none;
   width: 100%;
   border: none;
   height: 38px !important;
   border-radius: 3px;
}

.form-input::placeholder {
   font-size: 14px;
   color: #808080;
}

.send-otp {
   font-size: 14px;
   font-weight: bold;
   border: none;
   color: #fff;
   padding: 6px 18px;
   margin-top: 20px;
   background-color: #474747;
   cursor: pointer;
   width: 100%;
   height: 40px;
   margin: 20px auto;
   border-radius: 40px;
}

.send-otp.active {
   background-color: var(--active-color);
   cursor: pointer;
}

.form-input.otp {
   text-align: center;
   letter-spacing: 10px;
   box-shadow: none;
}

.verify-otp {
   font-size: 14px;
   width: 100%;
   font-weight: bold;
   height: 40px;
   border-radius: 40px;
   border: none;
   color: var(--textColor);
   padding: 6px 18px;
   margin-top: 20px;
   background-color: var(--surface-color1);
   cursor: pointer;
}

.verify-otp.active {
   background-color: var(--active-color);
   cursor: pointer;
}

#otp-resend-timer {
   float: left;
   color: #999999;
   font-size: 14px;
}

.resend-otp {
   float: left;
   color: var(--active-color);
   font-size: 14px;
   cursor: pointer;
   font-weight: 400;
}

.change-mobile-number {
   float: right;
   font-size: 14px;
   color: #474747;
   cursor: pointer;
   font-weight: 500;
}


.password-edit-box .close-btn {
   background: none;
   float: right;
   cursor: pointer;
   height: 20px;
   width: 20px;
}

.password-edit-box .password-edit-fields {
   display: flex;
   flex-direction: column;
   gap: 12px;
   width: 100%;
   margin: 30px 0;
}

.password-edit-fields .pwd-edit {
   padding: 6px 8px;
   width: 100%;
   border: solid 1px #999999;
   height: 40px;
   border-radius: 4px;
}

.password-edit-box .save-button {
   padding: 12px 32px;
   color: #FFF;
   width: 100%;
   height: 40px;
   background: var(--active-color);
   border-radius: 40px;
   border: none;
   cursor: pointer;
   font-weight: 700;
   font-size: 14px;
   line-height: 17px;
   text-align: center;
   letter-spacing: 0.01em;
}

.password-edit-box #author_password_error {
   width: 100%;
   width: 100%;
   font-size: 12px;
   min-height: 70px;
   max-height: 70px;
}

@media (max-width: 1024px) {
   .password-edit-div .password-edit-box {
      position: fixed;
      z-index: 100001;
      height: 350px;
      width: 90%;
      border-radius: 12px;
      background: #fff;
      left: 5%;
      top: 25%;
      padding: 16px;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
   }
}

.mobile-verification-div .error {
   color: #d32f2f;
   display: block;
   margin-top: 10px;
   font-size: 12px;
   box-shadow: none !important;
}

.input-error {
   border: 1px solid #D32F2F !important;
}

input:focus {
   outline: none;
}

.loading-block-overlay {
   position: fixed;
   z-index: 100002;
   height: 300px;
   width: 360px;
   border-radius: 12px;
   background: #fff;
   left: 35%;
   top: 25%;
   padding: 16px;
   text-align: center;
   background: #9999;
   opacity: .7;
}

.mobile-verification-loader {
   border: 5px solid #f3f3f3;
   border-top: 5px solid #555;
   border-radius: 50%;
   width: 50px;
   height: 50px;
   animation: spin 2s linear infinite;
   position: relative;
   left: 45%;
   top: 45%;
   z-index: 10000;
   color: var(--active-color);
}

.mobile-verification-div .close-popup {
   background: none;
   float: right;
   cursor: pointer;
   height: 20px;
   width: 20px;
}

@keyframes spin {
   0% {
      transform: rotate(0deg);
   }

   100% {
      transform: rotate(360deg);
   }
}

.iti__flag-container {
   height: 38px;
}

.iti {
   width: 100%;
}

.iti__country-list {
   white-space: normal;
   width: 323px;
}

.iti--separate-dial-code .iti__selected-flag,
.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
   background-color: var(--surface-color) !important;
   color: var(--textColor) !important;
}

@media (max-width: 1024px) {

   .mobile-verification-div .mobile-number-box,
   .mobile-verification-div .otp-verification-box,
   .mobile-verification-div .verification-result-box {
      position: fixed;
      z-index: 100001;
      height: 300px;
      width: 90%;
      border-radius: 12px;
      background: #fff;
      left: 5%;
      top: 25%;
      padding: 16px;
      text-align: center;
   }

   .heading {
      line-height: 20px;
      font-size: 16px;
      font-weight: 700;
      color: #474747;
      margin: 10px;
   }

   .sub-text {
      line-height: 20px;
      font-size: 16px;
      font-weight: 400;
      color: #999999;
      margin-bottom: 20px;
   }

   .mobile-input-div {
      width: 100%;
      border: solid 1px #999999;
      height: 40px;
      border-radius: 4px;
   }

   .otp-input-div {
      width: 196px;
      margin: auto;
      border: solid 1px #999999;
      height: 40px;
      border-radius: 4px;
   }

   .otp-input-div input::placeholder

   /* Chrome, Firefox, Opera, Safari 10.1+ */
      {
      letter-spacing: normal !important;
   }

   .otp-input-div input:-ms-input-placeholder

   /* Internet Explorer 10-11 */
      {
      letter-spacing: normal !important;
   }

   .otp-input-div input::-ms-input-placeholder

   /* Microsoft Edge */
      {
      letter-spacing: normal !important;
   }

   .form-input {
      box-shadow: none;
      width: 100%;
      border: none;
      height: 38px !important;
      border-radius: 3px;
   }

   .form-input::placeholder {
      font-size: 14px;
      color: #808080;
   }

   .send-otp {
      font-size: 14px;
      font-weight: bold;
      border: none;
      color: #fff;
      padding: 6px 18px;
      margin-top: 20px;
      background-color: #474747;
      cursor: pointer;
      width: 100%;
      height: 40px;
      margin: 20px auto;
      border-radius: 40px;
   }

   .send-otp.active {
      background-color: var(--active-color);
      cursor: pointer;
   }

   .form-input.otp {
      text-align: center;
      letter-spacing: 10px;
      box-shadow: none;
      height: 38px !important;
      font-size: 16px !important;
   }

   .verify-otp {
      font-size: 14px;
      width: 100%;
      font-weight: bold;
      height: 40px;
      border-radius: 40px;
      border: none;
      color: #fff;
      padding: 6px 18px;
      margin-top: 20px;
      background-color: #E0E0E0;
      cursor: pointer;
   }

   .verify-otp.active {
      background-color: var(--active-color);
      cursor: pointer;
   }

   #otp-resend-timer {
      float: left;
      color: #999999;
      font-size: 14px;
   }

   .resend-otp {
      float: left;
      color: var(--active-color);
      font-size: 14px;
      cursor: pointer;
      font-weight: 400;
   }

   .change-mobile-number {
      float: right;
      font-size: 14px;
      color: #474747;
      cursor: pointer;
      font-weight: 500;
   }

   .mobile-verification-div .error {
      color: #d32f2f;
      display: block;
      margin-top: 10px;
      font-size: 12px;
      box-shadow: none !important;
   }

   .input-error {
      border: 1px solid #D32F2F !important;
   }

   input:focus {
      outline: none;
   }

   .loading-block-overlay {
      position: fixed;
      z-index: 100002;
      height: 300px;
      width: 90%;
      border-radius: 12px;
      background: #fff;
      left: 11%;
      top: 25%;
      left: 5%;
      padding: 16px;
      text-align: center;
      background: #9999;
      opacity: .7;
   }

   .mobile-verification-loader {
      border: 5px solid #f3f3f3;
      border-top: 5px solid #555;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 2s linear infinite;
      position: relative;
      left: 45%;
      top: 45%;
      z-index: 10000;
      color: var(--active-color);
   }

   .mobile-number-box img {
      height: 20px !important;
      width: 20px !important;
   }

   @keyframes spin {
      0% {
         transform: rotate(0deg);
      }

      100% {
         transform: rotate(360deg);
      }
   }

   .iti__flag-container {
      height: 38px;
   }

   .iti {
      width: 100%;
   }

   .iti__country-list {
      white-space: normal;
      width: 323px;
   }

   .iti--separate-dial-code .iti__selected-flag,
   .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
      background-color: #fff !important;
   }
}


/* ==== login page ============== */
.login img {
   background: none !important;
}

.login-loading-overlay {
   display: none;
   z-index: 10000;
}

.login-overlay {
   width: 100%;
   position: fixed;
   height: 100%;
   left: 0;
   top: 0;
   background: #FFF;
   opacity: 0.8;
   z-index: 10000;
}

.login-loader {
   border: 5px solid hsl(0, 0%, 95%);
   border-top: 5px solid #555;
   border-radius: 50%;
   width: 50px;
   height: 50px;
   animation: spin 2s linear infinite;
   position: fixed;
   left: 50%;
   top: 50%;
   margin-left: -25px;
   margin-top: -25px;
   z-index: 10000;
}

.banner-text {
   color: var(--active-color);
   background-color: var(--surface-color1);
   position: relative;
   font-weight: 500;
   max-width: 500px;
   display: flex;
   height: 30px;
   justify-content: center;
   align-items: center;
   margin: 30px auto -30px auto;
}

.box {
   position: relative;
   max-width: 500px;
   height: fit-content;
   border-radius: 12px;
   background-color: var(--surface-color);
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
   padding: 15px 40px;
   margin: 30px auto;
   text-align: center;
}

.logo img {
   background: none !important;
   max-height: 75px;
}

.heading {
   line-height: 20px;
   font-size: 16px;
   font-weight: 700;
   color: var(--textColor);
   margin: 10px;
}

.email-input-div {
   margin: 10px auto;
   width: 100%;
   border: solid 1px var(--border-color--alpha);
   height: 40px;
   border-radius: 4px;
}

.password-input-div,
.name-input-div {
   margin: 10px auto;
   width: 100%;
   border: solid 1px var(--border-color--alpha);
   height: 40px;
   border-radius: 4px;
}

.password-input-div {
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
}

.form-input {
   box-shadow: none;
   width: 100%;
   padding: 0 10px;
   border: none;
   height: 38px !important;
   border-radius: 3px;
}

.input-icon.password {
   cursor: pointer;
   width: 16px;
   height: 10px;
}

.password-input-div img.input-icon {
   background: none;
   display: inline-block;
   vertical-align: middle;
   position: absolute;
   right: 5px;
}

.error {
   color: #d32f2f;
   display: block;
   margin-top: 15px;
   font-size: 12px;
   position: relative;
   width: 450px;
   left: -50px;
   padding: 0 50px;
}

button.active {
   background-color: var(--active-color);
   cursor: pointer;
}

.sign-in,
.register-btn,
.change-password-btn {
   width: 100%;
   font-size: 14px;
   font-weight: bold;
   height: 40px;
   border-radius: 40px;
   border: none;
   color: #fff;
   padding: 6px 18px;
   margin-top: 10px;
   background-color: var(--active-color);
   cursor: pointer;
}

.new-to-sk {
   height: 17px;
   font-size: 14px;
   font-weight: 400;
   color: #999999;
   float: left;
}

a.forgot-link {
   height: 17px;
   font-size: 14px;
   text-align: right;
   display: block;
   color: var(--active-color);
   cursor: pointer;
   text-decoration: none;
   float: right;
}

.login-separator-text {
   width: 100%;
   text-align: center;
   border-bottom: 1px solid var(--border-color--alpha);
   margin: 20px 0;
   color: var(--textColor);
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 0.1em;
}

.login-separator-text span {
   background: var(--surface-color);
   padding: 0 10px;
}

#mobile-login-box .sso-google-button,
#sign-in-box .sso-phone-button {
   margin-top: 0;
}

img.input-icon {
   display: inline-block;
   vertical-align: middle;
   width: 16px !important;
   margin: 0 0 5px 0 !important;
}

.sso-phone-button.active {
   background-color: var(--surface-color1);
   cursor: pointer;
   opacity: 1;
}

.sso-google-button,
.sso-fb-button,
.sso-username-button,
.sso-phone-button,
.sso-apple-button {
   text-decoration: none !important;
   height: 40px;
   border-radius: 40px;
   margin-top: 12px;
   font-weight: 400;
   cursor: pointer;
   background-color: var(--surface-color1);
   border: solid 1px var(--border-color--alpha);
   color: var(--textColor) !important;
   display: flex;
   align-items: center;
   justify-content: center;
   /* opacity: 0.6; */
}

.login-img {
   margin: 20px auto 0 auto !important;
   background: none !important;
   height: 103px !important;
   width: 212px !important;
   display: block;
}

.i-agree,
.i-agree-as-affiliate {
   font-size: 12px;
   color: var(--textColor);
}

a.policies {
   color: var(--active-color);
   cursor: pointer;
   padding: 0 3px;
}

.other-login {
   float: right;
   font-size: 14px;
   color: var(--textColor);
   cursor: pointer;
   font-weight: 500;
}

.login-footer {
   margin-top: 100px;
   padding: 15px 40px;
}

.name-submit,
.send-btn {
   font-size: 14px;
   font-weight: bold;
   height: 40px;
   width: 100%;
   border-radius: 40px;
   border: none;
   color: #fff;
   padding: 6px 18px;
   margin-top: 20px;
   background-color: var(--active-color);
   cursor: pointer;
}

.login-heading {
   font-size: 16px;
   font-style: normal;
   font-weight: 600;
   margin: 10px 0;
   color: var(--textColor);
}

.email-box,
.phone-box {
   justify-self: center;
   margin-top: 30px;
   flex-direction: column;
   width: fit-content !important;
   height: fit-content !important;
   padding: 10px 20px !important;
   border-radius: 5px !important;
}

.email-box img,
.phone-box img {
   width: 30px !important;
   height: 30px !important;
}

@media (max-width: 1024px) {
   .box {
      position: relative;
      max-width: 100% !important;
      height: fit-content;
      border-radius: 0px !important;
      background-color: var(--bg-color);
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
      padding: 15px 40px;
      margin: 30px auto;
      text-align: center;
   }
}

#new-layout-box .sso-google-button {
   border-radius: 50px;
   height: 55px;
   border: 1px solid hsl(0, 0%, 60%);
   cursor: pointer;
   /* background: #FFF;
   filter: drop-shadow(0px 4px 4px #E9F2FA); */
}

#new-layout-box .sso-fb-button {
   border-radius: 50px;
   height: 55px;
   border: 1px solid var(--border-color--alpha);
   /* background: #FFF; */
   margin-bottom: 30px;
   cursor: pointer;
}

.us-email-mobile-login-holder {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
}

#new-layout-box .sso-username-button,
#new-layout-box .sso-phone-button {
   flex-direction: column;
   text-decoration: none !important;
   border-radius: 0px;
   margin-top: 12px;
   font-size: 14px;
   border-radius: 6px;
   border: 1px solid var(--border-color--alpha);
   background: var(--surface-color);
   color: var(--textColor) !important;
   width: 70px;
   height: 65px;
}

img.sso-icon {
   margin: 0;
   width: 30px;
   height: 30px;
}

.register,
.resend {
   color: var(--active-color) !important;
   cursor: pointer;
}