<style>
    @font-face {
        font-family: StagSansWeb-Book;
        src: url(https://www.which.co.uk/global/fonts/StagSansWeb/StagSansWeb-Book/StagSansWeb-Book.woff2) format("woff2");
        unicode-range: U+000-5FF; /* Latin glyphs */
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: StagSansWeb-Light;
        src: url(https://www.which.co.uk/global/fonts/StagSansWeb/StagSansWeb-Light/StagSansWeb-Light.woff2) format("woff2");
        unicode-range: U+000-5FF; /* Latin glyphs */
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: OpenSans-Semibold;
        src: url(https://www.which.co.uk/global/fonts/open-sans/opensans_semibold/OpenSans-Semibold-webfont.woff2) format("woff2");
        unicode-range: U+000-5FF; /* Latin glyphs */
        font-weight: 600;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: OpenSans-Regular;
        src: url(https://www.which.co.uk/global/fonts/open-sans/opensans_regular/OpenSans-Regular-webfont.woff2) format("woff2");
        unicode-range: U+000-5FF; /* Latin glyphs */
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    .stylingblock-content-wrapper.camarker-inner {
        padding: 0 !important;
    }

    .stylingblock-content-wrapper > table > tbody > tr > td > table > tbody > tr {
        align-items: flex-start;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        margin: 30px auto;
        width: 100%;
    }

    .responsive-td {
        display: block;
        padding: 0 !important;
    }

    .responsive-td:first-child {
        width: 100% !important;
    }

    .responsive-td:nth-child(2) {
        width: 100% !important;
    }

    .form__container {
        background-color: #ffffff;
        box-sizing: border-box;
        margin: 0 auto;
        max-width: 710px;
        padding: 30px;
        width: 100%;
    }

    .form__title {
        border-bottom: 1px solid #e0e0e0;
        color: #02171e;
        font-family: StagSansWeb-Light;
        font-size: 28px;
        line-height: 28px;
        margin: 0 0 22px;
        padding: 0 0 12px;
        width: 100%;
    }

    .form__title span {
        color: #616161;
        font-family: OpenSans-Regular;
        font-size: 16px;
        line-height: 24px;
        margin: 0 0 0 12px;
    }

    fieldset {
        border: none;
        margin: 0 auto;
        padding: 0;
        width: 100%;
    }

    fieldset > legend {
        display: none;
    }

    .form__label {
        color: #04171d;
        display: block;
        font-family: OpenSans-Regular;
        font-size: 16px;
        line-height: 24px;
        padding: 10px 0 5px;
        width: 100%;
    }

    .form__label {
        color: #04171d;
        width: 100%;
    }

    ul.password-validations {
        color: #616161;
        margin: 0;
        padding: 10px;
    }

    li.validation {
        line-height: 18px
    }

    li.error {
        color: #d12f2f;
        list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23D12F2F' fill-rule='evenodd' d='M11.733 1.051L6.716 6.068l5.017 5.017-.776.777L5.94 6.845.923 11.862l-.777-.784 5.018-5.01L.146 1.051.923.268 5.94 5.285 10.957.268z'/%3E%3C/svg%3E");
    }

    li.ok {
        color: #168290;
        list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='11' viewBox='0 0 15 11'%3E%3Cpath fill='%23168290' fill-rule='evenodd' d='M4.773 8.701l-3.58-3.447L0 6.403 4.773 11 15 1.15 13.807 0z'/%3E%3C/svg%3E")
    }

    #password-message {
        color: #616161;
        font-family: OpenSans-Regular;
        font-size: 16px;
        line-height: 24px;
    }

    .password__label--error {
        color: #d12f2f;
    }

    #password__label {
        display: block;
        padding: 10px 0 1px;
    }

    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        text-indent: 1px;
        text-overflow: "";
    }

    select::-ms-expand {
        display: none;
    }

 
    select,
    .form__input {
        background-color: #f6f6f6;
        border: 2px solid #e8e8e8;
        box-sizing: border-box;
        display: block;
        font-size: 16px;
        padding: 12px;
        width: 100%;
    }

    .form__spacer {
        height: 26px;
        width: 100%;
    }

    .form__2col {
        align-items: flex-start;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .form__col {
        width: 47%;
    }

    .form__col .form__btn {
        margin: 0;
        width: 100%;
    }

    .form__btn {
        align-items: center;
        border-radius: 24px;
        color: #ffffff;
        cursor: pointer;
        display: flex;
        font-family: OpenSans-Semibold;
        font-size: 16px;
        font-weight: 700;
        height: 47px;
        justify-content: center;
        margin: 26px 0;
        padding: 0 50px;
        transition: all 300ms ease;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .form__input--error {
        border: 2px solid #d12f2f;
    }

    .form__btn--red {
        background-color: #e30613;
        border: 2px solid #e30613;
    }

    .form__btn--blue {
        background-color: #3f51b5;
        border: 2px solid #3f51b5;
    }

    .form__btn--red:hover {
        background-color: #ffffff;
        color: #e30613;
    }

    .form__btn--blue:hover {
        background-color: #ffffff;
        color: #3f51b5;
    }

    .form__btn--submitted {
        color: transparent;
        cursor: default;
        position: relative;
    }

    .form__btn--submitted:hover {
        background-color: #e30613;
    }

    .loader {
        display: none;
    }

    .form__btn--submitted .loader {
        animation-delay: -0.16s;
        color: #546e7a;
        display: block;
        font-size: 6px;
        left: 50%;
        margin-left: -8px;
        margin-top: -8px;
        position: absolute;
        top: 50%;
        transform: translateZ(0);
    }

    .loader,
    .loader::before,
    .loader::after {
        animation-fill-mode: both;
        animation: loading 1.8s infinite ease-in-out;
        background-color: #d6d6d6;
        border-radius: 50%;
        height: 15px;
        width: 15px;
    }

    .loader::before,
    .loader::after {
        content: "";
        position: absolute;
        top: 0;
    }

    .loader::before {
        animation-delay: -0.32s;
        left: -20px;
    }

    .loader::after {
        animation-delay: 0.32s;
        left: 20px;
    }

    @keyframes loading {
        0%,
        80%,
        100% {
            backrgound-color: #757575;
        }

        40% {
            background-color: #757575;
        }
    }

    .form__btn-manual {
        color: #3f51b5;
        cursor: pointer;
        font-family: OpenSans-Regular;
        font-size: 16px;
        line-height: 24px;
        padding: 10px 0;
    }

    .form__btn-manual:hover {
        opacity: 0.6;
    }

    .error-message {
        color: #d12f2f;
        font-family: StagSansWeb-Book;
        font-size: 14px;
        line-height: 20px;
        margin: 0;
        padding: 10px 0 0;
    }

    button#addressfinder {
        font-family: OpenSans-Semibold;
    }

    button#addressfinder span {
        font-family: "Which-Icons", serif !important;
        font-size: 28px;
        margin: 0 8px 0 0;
    }

    #pcselect {
        margin-top: 10px;
    }

    .form__postcode {
        position: relative;
        width: 100%;
    }

    #pcselect img {
        margin-top: -4px;
        position: absolute;
        right: 16px;
        top: 50%;
    }

    #manualAddress {
        clear: both;
        padding-top: 5px;
    }

    #password {
        margin: 0;
    }

    .form__disclaimer {
        color: #424242;
        font-family: OpenSans-Regular;
        font-size: 14px;
        line-height: 22px;
    }

    .form__disclaimer a {
        color: #3f51b5;
        font-family: OpenSans-Regular;
        font-size: 14px;
        line-height: 22px;
        text-decoration: none;
    }

    .form__disclaimer a:hover {
        opacity: 0.6;
    }

    @media only screen and (max-width: 1024px) {
        .form__container {
            margin: 0;
            padding: 20px;
        }

        .form__title {
            font-size: 24px;
            line-height: 24px;
            margin: 0 0 25px;
        }

        .form__title span {
            color: #757575;
        }

        .form__label {
            margin: 0;
            padding: 0 0 6px;
        }

        .form__input {
            margin: 0 0 18px;
        }

        .form__input--error {
            margin: 0;
        }

        .error-message {
            margin: 0 0 18px;
        }

        .form__btn {
            margin: 16px auto;
            max-width: 334px;
            padding: 0;
            width: 100%;
        }

        .form__btn span {
            display: none;
        }
    }

    @media only screen and (min-width: 1244px) {
        .stylingblock-content-wrapper > table > tbody > tr > td > table > tbody > tr {
            flex-direction: row;
            max-width: 1243px;
        }

        .responsive-td:first-child {
            margin-right: 73px;
            width: 710px !important;
        }

        .responsive-td:nth-child(2) {
            width: 460px !important;
        }
    }

    @media only screen and (min-width: 1024px) and (max-width: 1243px) {
        .stylingblock-content-wrapper > table > tbody > tr > td > table > tbody > tr {
            flex-direction: row;
            max-width: 984px;
        }

        .responsive-td:first-child {
            margin-right: 54px;
            padding: 0 !important;
            width: 580px !important;
        }

        .responsive-td:nth-child(2) {
            width: 350px !important;
        }
    }

    @media only screen and (min-width: 768px) and (max-width: 1023px) {
        .stylingblock-content-wrapper > table > tbody > tr > td > table > tbody > tr {
            flex-direction: row;
            max-width: 728px;
        }

        .responsive-td:first-child {
            margin-right: 20px;
            width: 471px !important;
        }

        .responsive-td:nth-child(2) {
            width: 237px !important;
        }
    }

    @media only screen and (min-width: 768px) {
        .form__btn {
            font-size: 18px;
        }
    }

    @media only screen and (max-width: 767px) {
        .form__container {
            max-width: 100%;
        }
    }
</style>
<div class="container">
    <form class="form-horizontal" method="" action="">
        <label for="password" class="form__label">
            Password
        </label>

        <div id="show-hide-container" class="input-container show-background">

            <input autocomplete="new-password"
                   class="form__input__password"
                   data-nice-name="password"
                   data-validate="true"
                   data-ignore-leading-spaces="true"
                   id="password"
                   name="Password"
                   minLength="8"
                   maxlength="50"
                   type="password"
                   value="%%=v(@password)=%%">
          
            <div class="icon-container" onclick="myFunction()">
              <span id="icon" class="show-pwd-icon"></span>
                <span id="icon-text" class="show-icon-txt">Show</span>
            </div>
        </div>
    </form>
</div>

/* Style the input container */
.input-container {
  display: flex;
  width: 100%;
  align-items: center;
  text-align: center;
  font-size: 17px;
  
  border-right: solid 2px #e8e8e8;
  border-top: solid 2px #e8e8e8;
  border-left: solid 2px #e8e8e8;
  border-bottom: solid 2px #e8e8e8;
 
}

#password {
  border-right: solid 2px #e8e8e8;
  border-top: none;
  border-left: none;
  border-bottom: none;
}

.show-background {
  background: #f6f6f6;
}

.hide-background {
  background: #484b9a;
}

#icon-text {
  user-select: none;
}

.hide-icon-txt {
  color: white;
}

.show-icon-txt {
  color: #484b9a;
}

.hide-pwd-icon {
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='17' viewBox='0 0 24 17'%3E%3Cg fill='%23FFF' fill-rule='evenodd'%3E%3Cpath d='M11.85 13.69c-2.77 0-5.024-2.266-5.024-5.051 0-2.786 2.253-5.052 5.023-5.052 2.77 0 5.024 2.266 5.024 5.052 0 2.785-2.254 5.052-5.024 5.052m11.692-5.362C20.615 3.576 16.354.85 11.85.85S3.082 3.576.157 8.33a.6.6 0 0 0 0 .62c2.925 4.753 7.187 7.48 11.692 7.48s8.766-2.727 11.692-7.48a.6.6 0 0 0 0-.62'/%3E%3Cpath d='M13.104 8.679c0 .801-.577 1.451-1.29 1.451-.713 0-1.29-.65-1.29-1.451 0-.802.577-1.452 1.29-1.452.713 0 1.29.65 1.29 1.452'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.show-pwd-icon {
  background-repeat: no-repeat;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='17' viewBox='0 0 24 17'%3E%3Cg fill='%23484B9A' fill-rule='evenodd'%3E%3Cpath d='M11.85 13.69c-2.77 0-5.024-2.266-5.024-5.051 0-2.786 2.253-5.052 5.023-5.052 2.77 0 5.024 2.266 5.024 5.052 0 2.785-2.254 5.052-5.024 5.052m11.692-5.362C20.615 3.576 16.354.85 11.85.85S3.082 3.576.157 8.33c-.114.186-.114.433 0 .62 2.925 4.753 7.187 7.48 11.692 7.48s8.766-2.727 11.692-7.48c.115-.187.115-.434 0-.62'/%3E%3Cpath d='M13.104 8.679c0 .801-.577 1.451-1.29 1.451-.713 0-1.29-.65-1.29-1.451 0-.802.577-1.452 1.29-1.452.713 0 1.29.65 1.29 1.452'/%3E%3C/g%3E%3C/svg%3E%0A");
}

#icon {
  margin-top: 0.3rem;
  margin-left: 1rem;
  min-width: 3rem;
}

/* Style the form icons */
.icon-container {
  display: flex;
  min-width: 9.5rem;
  cursor: pointer;
}

/* Style the input fields */
.input-field {
  width: 100%;
  outline: none;
}

.itext {
  padding-left: 5px;
}

.form__input__password {
  background-color: #f6f6f6;
  box-sizing: border-box;
  display: flex;
  font-size: 16px;
  width: 100%;
  padding: 12px;
}

function myFunction() {
  var x = document.getElementById("password");
  
  var showHideContainer = document.getElementById("show-hide-container");
  
  var icon = document.getElementById("icon");
  
    var iconText = document.getElementById("icon-text");


  if (x.type === "text") {
    showHideContainer.classList.remove('hide-background');
    showHideContainer.classList.add('show-background');
    
    icon.classList.remove('hide-pwd-icon');
    icon.classList.add('show-pwd-icon');
    
    iconText.classList.remove('hide-icon-txt');
    iconText.classList.add('show-icon-txt');
    iconText.innerText = "Show"
    
    x.type = "password";
  } else {
    x.type = "text";
    showHideContainer.classList.remove('show-background');
    showHideContainer.classList.add('hide-background');
    
    icon.classList.remove('show-pwd-icon');
    icon.classList.add('hide-pwd-icon');
    
    iconText.classList.remove('show-icon-txt');
    iconText.classList.add('hide-icon-txt');
    iconText.innerText = "Hide"
  }
}