:root {
  --user-icon-background-gradient-one: linear-gradient(270deg, #3d83b3, #76a3c1);
  --icon-selection-background-color: #eee;
  --icon-selection-background-gradient: linear-gradient(0deg, #eee, #ddd);
}

html[data-theme="light"] {
  --user-icon-background-gradient-one: linear-gradient(270deg, #3d83b3, #76a3c1);
  --icon-selection-background-color: #eee;
  --icon-selection-background-gradient: linear-gradient(0deg, #eee, #ddd);
}

html[data-theme="dark"] {
  --user-icon-background-gradient-one: linear-gradient(270deg, #76a3c1, lightblue);
  --icon-selection-background-color: #444;
  --icon-selection-background-gradient: linear-gradient(0deg, #eee, #ddd);
}

.user-icon-write-image-black {
  border-width: 0.8vh;
  border-style: solid;
  box-sizing: border-box;
  box-shadow: 0 0 1.5vh rgba(0, 0, 0, 0.25);
  border-color: rgba(0, 0, 0, 0.92);
}

.user-icon-write-image-white {
  border-width: 0.9vh;
  border-style: solid;
  box-sizing: border-box;
  box-shadow: 0 0 1.2vh rgba(0, 0, 0, 0.12);
  border-color: white;
}

.user-icon-write-image-red {
  border-width: 1vh;
  border-style: solid;
  box-sizing: border-box;
  box-shadow: 0 0 1.2vh rgba(0, 0, 0, 0.32);
  border-color: rgba(202, 95, 93, 0.9);
}

.user-icon-write-image-green {
  border-width: 1vh;
  border-style: solid;
  box-sizing: border-box;
  box-shadow: 0 0 1.3vh rgba(0, 0, 0, 0.26);
  border-color: rgba(133, 178, 98, 0.94);
}

.user-icon-write-image-blue {
  border-width: 1vh;
  border-style: solid;
  box-sizing: border-box;
  box-shadow: 0 0 1.2vh rgba(0, 0, 0, 0.28);
  border-color: #76a3c1;
}

.user-icon-write-image-purple {
  border-width: 1vh;
  border-style: solid;
  box-sizing: border-box;
  box-shadow: 0 0 1.3vh rgba(0, 0, 0, 0.32);
  border-color: #b282c7;
}

.user-icon-top-image-black {
  border-width: 0.45vh;
  border-style: solid;
  box-sizing: border-box;
  box-shadow: 0 0 1.5vh rgba(0, 0, 0, 0.25);
  border-color: rgba(0, 0, 0, 0.9);
}

.user-icon-top-image-white {
  border-width: 0.5vh;
  border-style: solid;
  box-sizing: border-box;
  box-shadow: 0 0 1.2vh rgba(0, 0, 0, 0.08);
  border-color: rgba(255, 255, 255, 0.86);
}

.user-icon-top-image-red {
  border-width: 0.6vh;
  border-style: solid;
  box-sizing: border-box;
  box-shadow: 0 0 1.2vh rgba(0, 0, 0, 0.32);
  border-color: rgba(202, 95, 93, 0.9);
}

.user-icon-top-image-green {
  border-width: 0.6vh;
  border-style: solid;
  box-sizing: border-box;
  box-shadow: 0 0 1.3vh rgba(0, 0, 0, 0.22);
  border-color: rgba(133, 178, 98, 0.94);
}

.user-icon-top-image-blue {
  border-width: 0.6vh;
  border-style: solid;
  box-sizing: border-box;
  box-shadow: 0 0 1.2vh rgba(0, 0, 0, 0.28);
  border-color: #76a3c1;
}

.user-icon-top-image-purple {
  border-width: 0.6vh;
  border-style: solid;
  box-sizing: border-box;
  box-shadow: 0 0 1.3vh rgba(0, 0, 0, 0.32);
  border-color: #b282c7;
}

.user-icon-left-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
}

.user-icon-right-container {
  position: absolute;
  /* top: 28.2%; */
  top: 33.2%;
  right: 0;
  width: 50%;
  height: 27.6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.user-icon-image-container-user {
  position: absolute;
  top: 8.2%;
  left: 4%;
  width: 92%;
  height: 83.6%;
  border-radius: 50%;
  box-shadow: 0 0 1.6vh rgba(0, 0, 0, 0.25);
  background-color: #fbe8bf;
  border: 1vh solid white;
  box-sizing: border-box;
}

#user-icon-image-edit-icon-container {
  position: absolute;
  left: 40%;
  width: 20%;
  height: 17.4%;
  border-radius: 24%;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0.6;
  cursor: pointer;
}

#user-icon-image-edit-icon-container:hover {
  opacity: 0.86;
}

.user-icon-image-edit-icon-container-user {
  bottom: 10.4%;
}

.user-icon-image-edit-icon-container-visitor {
  bottom: 4.4%;
}

#user-icon-image-edit-icon {
  position: absolute;
  bottom: 10%;
  left: 11%;
  width: 84%;
  height: 84%;
  opacity: 1;
}

.user-icon-image-container-visitor {
  position: absolute;
  top: 20.74%;
  left: 17.8%;
  width: 64.4%;
  height: 58.52%;
  opacity: 0.8;
}

.user-icon-background-one {
  background-image: var(--user-icon-background-gradient-one);
}

.user-icon-name-text {
  font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;
  text-shadow: rgba(40, 40, 40, 0.8) 0 0.2vh 0;
  font-size: min(3vh, 5.2vw);
  line-height: min(3vh, 5.2vw);
  overflow-wrap: break-word;
  word-break: break-word;
  color: white;
}

.user-icon-info-texts {
  font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif;
  text-shadow: rgba(40, 40, 40, 0.6) 0 0.1vh 0;
  font-size: min(2.6vh, 4.7vw);
  line-height: min(2.6vh, 4.7vw);
  color: white;
}

.user-icon-selection-container {
  position: absolute;
  bottom: 5%;
  right: 3%;
  width: 48%;
  height: 30%;
  border-radius: min(1vh, 1.6vw) 0 0 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.user-icon-selection-icon-containers {
  position: relative;
  width: 31.4%;
  height: 88%;
  border-radius: min(1vh, 1.6vw);
  box-shadow: 0 0 1.2vh rgba(0, 0, 0, 0.14);
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.3);
  opacity: 0.99;
}

.user-icon-selection-icon-containers-selected {
  position: relative;
  width: 31.4%;
  height: 90%;
  border-radius: min(1vh, 1.6vw);
  opacity: 1;
}

#user-icon-selection-rating-svg {
  position: absolute;
  top: 6%;
  left: 6%;
  width: 88%;
  height: 88%;
}

#user-icon-selection-history-svg {
  position: absolute;
  top: 6.2%;
  left: 5%;
  width: 90%;
  height: 90%;
}

#user-icon-selection-statistics-svg {
  position: absolute;
  top: 6.2%;
  left: 5%;
  width: 90%;
  height: 90%;
}