/* Profile */


.profilewrapper {
  position: relative;
  margin: 40px 0;
  border-radius: 25px;
  /* background: #b72424; */
  min-height: 680px;
  /* background: linear-gradient(170deg, #b72424  25%, #1FE080 95%); */
  background: linear-gradient(153deg, rgba(63, 81, 181, 1) 9%, rgba(60, 121, 179, 1) 85%);

}

.userinfocontainer {
  width: 85%;
  margin: 0 auto;
}

.userinfocontainer .userinfo {
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;

}
.profileimagecontainer {
  position: relative;
  display: flex;
}

.userinfocontainer .userinfo .profileimagecontainer .profileimage {
  margin: 0 30px;
  height: 90px;
  width: 90px;
  border-radius: 100%;
}


.uploadtextctonainer {
  position: absolute;
  display: flex;
  background-color: #1a1a1a85;
  left: 0;
  right: 0;
  width: 90px;
  height: 90px;
  margin-inline: auto;
  opacity: 0;
  border-radius: 100%;
  transition: opacity 0.4s ease;
}

.profileimagecontainer .uploadtextctonainer:hover {
  opacity: 100%;
}

.uploadprofimagetext {
  position: relative;
  align-self: center;
  margin-inline: auto;
  width: fit-content;
  transform: scale(0);
  transition: transform 0.4s ease;
}

.uploadtextctonainer:hover .uploadprofimagetext {
  z-index: 1;
  transform: scale(1);
}

.profilewrapper .userinfocontainer .userinfo div a,
.usernameinput {
  padding: 0px 5px;
  padding-left: 10px;
  font-size: 32px;
  font-weight: 600;
}

.usernameinput {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
}

.usernamecontainer {
  display: flex;
  align-items: center;
}

.imagebutton {
  background-color: transparent;
  outline: none;
  border: none;
  transition: all ease 200ms;
}

.imagebutton:hover {
  cursor: pointer;
}

.imagebutton:active {
  transform: scale(0.9);
}

.editbutton {
  max-width: 48px;
  max-height: 48px;
}

.applybutton, .revertbutton {
  max-width: 32px;
  max-height: 32px;
  margin: 0 4px;
}

.usernameinput {
  background: transparent;
  outline: none;
  border: none;
  height: 48px;
  display: flex;
  max-width: 300px;
}

.profilewrapper .userinfocontainer hr {
  border-radius: 1px;
  height: 1px;
  background-color: #fff;
}

.profilewrapper .userinfocontainer ul {
  list-style: none;
  padding: 10px 0;
  padding-left: 20px;
}

.profilewrapper .userinfocontainer ul li {
  font-size: 24px;
  padding: 16px 0;
  font-weight: 400;
}

.profilewrapper .userinfocontainer .statswrapper {
  height: fit-content;
  min-height: 60%;
}

.profilewrapper .buttonholder {
  position: absolute;
  left: 40%;
  right: 40%;
  bottom: 0px;
  justify-content: center;
  display: flex;
  margin: 25px 0;
}

.profilewrapper .btn {
  margin: auto;
  background: #1a1a1a;
  padding: 9px 17px;
  border-radius: 9px;
  width: fit-content;
  transition: all 500ms ease;
}

.profilewrapper .btn:hover {
  cursor: pointer;
  transform: scale(1.3);
  background: #b72424;
}

.loadercontainer {
  position: fixed;
  background-color: #1a1a1a;
  width: 100%;
  height: 100vh;
  z-index: 4;
}

.loaderwrapper {
  position: relative;
  margin: auto auto;
}

/* HTML: <div class="loader"></div> */
.tetrisloader {
  width: 45px;
  height: 30px;
  background:
    linear-gradient(#004ce4 0 0) 0 100%/100% 50%,
    linear-gradient(#004ce4 0 0) 0 0 /calc(100%/3) 100%;
  background-repeat: no-repeat;
  position: relative;
  clip-path: inset(-100% 0 0 0);
  animation: l2-0 2s infinite steps(4);
}

.tetrisloader::before,
.tetrisloader::after {
  content: "";
  position: absolute;
  inset: -50% 0 50%;
  background:
    linear-gradient(#00e622 0 0) 0 0 /calc(2*100%/3) 50%,
    linear-gradient(#00e622 0 0) 100% 100%/calc(2*100%/3) 50%;
  background-repeat: no-repeat;
  animation: inherit;
  animation-name: l2-1;
}

.tetrisloader::after {
  inset: -100% 0 100%;
  background:
    linear-gradient(#e50021 0 0) 0 0/100% 50%,
    linear-gradient(#e50021 0 0) 100% 0/calc(100%/3) 100%;
  background-repeat: no-repeat;
  animation-name: l2-2;
}

@keyframes l2-0 {
  0% {
    transform: translateY(-250%);
    clip-path: inset(100% 0 0 0)
  }

  25%,
  100% {
    transform: translateY(0);
    clip-path: inset(-100% 0 0 0)
  }
}

@keyframes l2-1 {

  0%,
  25% {
    transform: translateY(-250%)
  }

  50%,
  100% {
    transform: translateY(0)
  }
}

@keyframes l2-2 {

  0%,
  50% {
    transform: translateY(-250%)
  }

  75%,
  100% {
    transform: translateY(0)
  }
}

[hidden] {
  display: none;
}