.field_passwrd {
    align-self: center;
    width: 400px;
    margin: 2em auto;
    padding-top: 5px;
    position: relative;
    clear: both;
    transition: 0.12s ease-out;
  }
  .field_passwrd label {
    display: flex;
    align-items: center;
    pointer-events: none;
  }
  .field_passwrd .togglePass {
    display: inline-block;
    border: 0;
    background: none;
    width: 20px;
    height: 20px;
    margin: 2px 0 0 auto;
  /* background: url('data:image/svg+xml;utf8,<svg preserveAspectRatio="xMidYMid" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 24 24" height="24" width="24"><g transform="scale(0.015625 0.015625)"><path d="M512 192c-223.318 0-416.882 130.042-512 320 95.118 189.958 288.682 320 512 320 223.312 0 416.876-130.042 512-320-95.116-189.958-288.688-320-512-320zM764.45 361.704c60.162 38.374 111.142 89.774 149.434 150.296-38.292 60.522-89.274 111.922-149.436 150.296-75.594 48.218-162.89 73.704-252.448 73.704-89.56 0-176.858-25.486-252.452-73.704-60.158-38.372-111.138-89.772-149.432-150.296 38.292-60.524 89.274-111.924 149.434-150.296 3.918-2.5 7.876-4.922 11.86-7.3-9.96 27.328-15.41 56.822-15.41 87.596 0 141.382 114.616 256 256 256 141.382 0 256-114.618 256-256 0-30.774-5.452-60.268-15.408-87.598 3.978 2.378 7.938 4.802 11.858 7.302v0zM512 416c0 53.020-42.98 96-96 96s-96-42.98-96-96 42.98-96 96-96 96 42.982 96 96z"/></g></svg>') 0 0 no-repeat; */
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M288 80c-65.2 0-118.8 29.6-159.9 67.7C89.6 183.5 63 226 49.4 256c13.6 30 40.2 72.5 78.6 108.3C169.2 402.4 222.8 432 288 432s118.8-29.6 159.9-67.7C486.4 328.5 513 286 526.6 256c-13.6-30-40.2-72.5-78.6-108.3C406.8 109.6 353.2 80 288 80zM95.4 112.6C142.5 68.8 207.2 32 288 32s145.5 36.8 192.6 80.6c46.8 43.5 78.1 95.4 93 131.1c3.3 7.9 3.3 16.7 0 24.6c-14.9 35.7-46.2 87.7-93 131.1C433.5 443.2 368.8 480 288 480s-145.5-36.8-192.6-80.6C48.6 356 17.3 304 2.5 268.3c-3.3-7.9-3.3-16.7 0-24.6C17.3 208 48.6 156 95.4 112.6zM288 336c44.2 0 80-35.8 80-80s-35.8-80-80-80c-.7 0-1.3 0-2 0c1.3 5.1 2 10.5 2 16c0 35.3-28.7 64-64 64c-5.5 0-10.9-.7-16-2c0 .7 0 1.3 0 2c0 44.2 35.8 80 80 80zm0-208a128 128 0 1 1 0 256 128 128 0 1 1 0-256z"/></svg>') 0 0 no-repeat;
    cursor: pointer;
    opacity: 0;
    transition: 0.2s ease-out;
    outline: none;
  }
  .field_passwrd input {
    background: none;
    height: 26px;
    width: 100%;
    border: 0;
    padding: 5px 0;
    font-size: inherit;
    background-image: linear-gradient(0deg, #2B93D9 1px, transparent 0), linear-gradient(0deg, #DDD 1px, transparent 0);
    background-position: left bottom, left bottom;
    background-size: 0 100%, 100% 100%;
    background-repeat: no-repeat;
    transition: 0.3s ease-out;
  }
  .field_passwrd input:focus {
    background-size: 100% 100%, 100% 100%;
    outline: none;
  }
  .field_passwrd input:invalid {
    box-shadow: none;
  }
  .field_passwrd input + label {
    position: absolute;
    left: 0;
    right: 0;
    top: 8px;
    opacity: 0.5;
    transition: 0.2s cubic-bezier(0.7, 0.15, 0.36, 1);
  }
  .field_passwrd input:focus + label, .field_passwrd input:valid + label, .field_passwrd input.hasValue + label {
    pointer-events: auto;
    transform: translateY(-120%);
    font-size: 12px;
    color: #2B93D9;
    opacity: 1;
  }
  .field_passwrd input:focus + label .togglePass, .field_passwrd input:valid + label .togglePass, .field_passwrd input.hasValue + label .togglePass {
    opacity: 0.3;
  }
  .field_passwrd input:focus + label .togglePass:hover, .field_passwrd input:valid + label .togglePass:hover, .field_passwrd input.hasValue + label .togglePass:hover {
    opacity: 0.5;
  }
  .field_passwrd input:focus + label .togglePass.active, .field_passwrd input:valid + label .togglePass.active, .field_passwrd input.hasValue + label .togglePass.active {
    opacity: 1;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zm151 118.3C226 97.7 269.5 80 320 80c65.2 0 118.8 29.6 159.9 67.7C518.4 183.5 545 226 558.6 256c-12.6 28-36.6 66.8-70.9 100.9l-53.8-42.2c9.1-17.6 14.2-37.5 14.2-58.7c0-70.7-57.3-128-128-128c-32.2 0-61.7 11.9-84.2 31.5l-46.1-36.1zM394.9 284.2l-81.5-63.9c4.2-8.5 6.6-18.2 6.6-28.3c0-5.5-.7-10.9-2-16c.7 0 1.3 0 2 0c44.2 0 80 35.8 80 80c0 9.9-1.8 19.4-5.1 28.2zm51.3 163.3l-41.9-33C378.8 425.4 350.7 432 320 432c-65.2 0-118.8-29.6-159.9-67.7C121.6 328.5 95 286 81.4 256c8.3-18.4 21.5-41.5 39.4-64.8L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5zm-88-69.3L302 334c-23.5-5.4-43.1-21.2-53.7-42.3l-56.1-44.2c-.2 2.8-.3 5.6-.3 8.5c0 70.7 57.3 128 128 128c13.3 0 26.1-2 38.2-5.8z"/></svg>') 0 0 no-repeat;
  }
  .field__rules {
    -moz-column-count: 2;
         column-count: 2;
    padding: 5px;
    font-size: 0.8em;
    list-style: none;
  }
  .field__rules > li {
    display: flex;
    align-items: center;
    padding: 3px 0;
    transition: 0.2s;
  }
  .field__rules > li::before {
    content: "✔";
    display: inline-block;
    color: #DDD;
    font-size: 1em;
    line-height: 0;
    margin: 0 6px 0 0;
    transition: 0.2s;
  }
  .field__rules > li.pass {
    color: #19d12e;
  }
  .field__rules > li.pass::before {
    color: #2B93D9;
    text-shadow: 0 0 8px currentColor;
  }
  .field_passwrd .showPassBtn {
    float: right;
    padding: 0;
    font-size: 0.9em;
    opacity: 0.7;
    line-height: 1.5;
    height: 1.5em;
    margin-left: 1.5em;
    background: none;
    border: 0;
    overflow: hidden;
  }
  .field_passwrd .showPassBtn::before {
    content: "•";
    display: inline-block;
    font-size: 30px;
    line-height: 20px;
    vertical-align: top;
    margin-right: 0.3em;
    border: 1px solid black;
  }
  .field_passwrd .showPassBtn::after {
    content: "Show\aHide";
    display: inline-block;
    text-align: left;
    white-space: pre;
    vertical-align: top;
    transition: 0.18s ease-out;
  }
  .field_passwrd .showPassBtn:hover {
    opacity: 1;
  }
  .field_passwrd .showPassBtn.active::after {
    transform: translateY(-50%);
  }