div.password-wrapper {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0;
  font: inherit;
}

div.password-wrapper > input {
  font: inherit;
  padding: 5px;
}

div.password-wrapper > i {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translate(0, -50%);
  display: inline-block;
  height: 1.4em;
  width: 1.4em;
  font: inherit;
  cursor: pointer;
}

div.password-wrapper > i.eye-open {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3C%21--%21Font%20Awesome%20Free%207.0.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20Copyright%202025%20Fonticons%2C%20Inc.--%3E%3Cpath%20d%3D%22M320%2096C239.2%2096%20174.5%20132.8%20127.4%20176.6C80.6%20220.1%2049.3%20272%2034.4%20307.7C31.1%20315.6%2031.1%20324.4%2034.4%20332.3C49.3%20368%2080.6%20420%20127.4%20463.4C174.5%20507.1%20239.2%20544%20320%20544C400.8%20544%20465.5%20507.2%20512.6%20463.4C559.4%20419.9%20590.7%20368%20605.6%20332.3C608.9%20324.4%20608.9%20315.6%20605.6%20307.7C590.7%20272%20559.4%20220%20512.6%20176.6C465.5%20132.9%20400.8%2096%20320%2096zM176%20320C176%20240.5%20240.5%20176%20320%20176C399.5%20176%20464%20240.5%20464%20320C464%20399.5%20399.5%20464%20320%20464C240.5%20464%20176%20399.5%20176%20320zM320%20256C320%20291.3%20291.3%20320%20256%20320C244.5%20320%20233.7%20317%20224.3%20311.6C223.3%20322.5%20224.2%20333.7%20227.2%20344.8C240.9%20396%20293.6%20426.4%20344.8%20412.7C396%20399%20426.4%20346.3%20412.7%20295.1C400.5%20249.4%20357.2%20220.3%20311.6%20224.3C316.9%20233.6%20320%20244.4%20320%20256z%22%20fill%3D%22%23333%22%2F%3E%3C%2Fsvg%3E");
}

div.password-wrapper > i.eye-slash {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20640%20640%22%3E%3C%21--%21Font%20Awesome%20Free%207.0.1%20by%20%40fontawesome%20-%20https%3A%2F%2Ffontawesome.com%20License%20-%20https%3A%2F%2Ffontawesome.com%2Flicense%2Ffree%20Copyright%202025%20Fonticons%2C%20Inc.--%3E%3Cpath%20d%3D%22M73%2039.1C63.6%2029.7%2048.4%2029.7%2039.1%2039.1C29.8%2048.5%2029.7%2063.7%2039%2073.1L567%20601.1C576.4%20610.5%20591.6%20610.5%20600.9%20601.1C610.2%20591.7%20610.3%20576.5%20600.9%20567.2L504.5%20470.8C507.2%20468.4%20509.9%20466%20512.5%20463.6C559.3%20420.1%20590.6%20368.2%20605.5%20332.5C608.8%20324.6%20608.8%20315.8%20605.5%20307.9C590.6%20272.2%20559.3%20220.2%20512.5%20176.8C465.4%20133.1%20400.7%2096.2%20319.9%2096.2C263.1%2096.2%20214.3%20114.4%20173.9%20140.4L73%2039.1zM236.5%20202.7C260%20185.9%20288.9%20176%20320%20176C399.5%20176%20464%20240.5%20464%20320C464%20351.1%20454.1%20379.9%20437.3%20403.5L402.6%20368.8C415.3%20347.4%20419.6%20321.1%20412.7%20295.1C399%20243.9%20346.3%20213.5%20295.1%20227.2C286.5%20229.5%20278.4%20232.9%20271.1%20237.2L236.4%20202.5zM357.3%20459.1C345.4%20462.3%20332.9%20464%20320%20464C240.5%20464%20176%20399.5%20176%20320C176%20307.1%20177.7%20294.6%20180.9%20282.7L101.4%20203.2C68.8%20240%2046.4%20279%2034.5%20307.7C31.2%20315.6%2031.2%20324.4%2034.5%20332.3C49.4%20368%2080.7%20420%20127.5%20463.4C174.6%20507.1%20239.3%20544%20320.1%20544C357.4%20544%20391.3%20536.1%20421.6%20523.4L357.4%20459.2z%22%20fill%3D%22%23333%22%2F%3E%3C%2Fsvg%3E");
}

div.password-wrapper > svg.eye {
  position: absolute;
  top: 3px;
  right: 2em;
  font: inherit;
  fill: #333;
}

#login-modal {
  z-index: 100;
  position: fixed;
  left: 0;
  top: 0;
  display: none;
  height: 100vh;
  width: 100vw;
  background-color: rgba(6,6,6,0.4);
}

#login-modal > div.content {
  position: relative;
  width: 80%;
  max-width: 500px;
  margin: 100px auto;
  padding: 20px;
  border: 2px solid #333;
  background-color: #fff;
}

#login-modal > div.content > div.close {
  font-size: 16pt;
  text-align: right;
}

#login-modal > div.content > div.close > a {
  color: #333;
  text-decoration: none;
}

#login-modal > div.content > h2 {
  text-align: center;
}

#login-modal > div.content > hr {
  width: 220px;
  margin: 20px auto;
  border: 1px solid #333;
}

#login-modal > div.content > ul {
  width: 220px;
  margin: 0 auto;
  padding: 0;
}

#login-modal > div.content.login > ul > li {
  margin: 20px 0;
  list-style-type: none;
}

#login-modal > div.content.create-account > ul > li {
  margin: 10px 0;
  list-style-type: none;
}

#login-modal > div.content > ul > li > div.title {
  padding: 4px 0;
  font-size: 10pt;
  font-weight: bold;
}

#login-modal > div.content > ul > li input {
  font: inherit;
}

#login-modal > div.content > ul > li input[type="text"] {
  width: 208px;
  padding: 5px;
  border: 1px solid #333;
  background-color: #fff;
  color: #333;
}

#login-modal > div.content > ul > li input[type="password"] {
  width: 208px;
  padding: 5px;
  border: 1px solid #333;
  background-color: #fff;
  color: #333;
}

#login-modal > div.content > ul > li input[type="button"] {
  width: 220px;
  border: 0;
  margin: 0 auto;
  padding: 5px 0;
  background-color: #48f;
  color: #fff;
  font-size: 14pt;
  box-shadow:
    inset 2px 2px 3px rgb(255 255 255 / 0.6),
    inset -2px -2px 3px rgb(51 51 51 / 0.6);
}

#login-modal > div.content > ul > li input[type="button"]:active {
  box-shadow:
    inset -2px -2px 3px rgb(255 255 255 / 0.6),
    inset 2px 2px 3px rgb(51 51 51 / 0.6);
}

#login-modal > div.content > ul > li input[type="button"]:disabled {
  background-color: #666666;
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
}