input {
    border-radius: 8px;
    border: 1px solid #576C80;
    background: #FFF;
    box-sizing: border-box;
    color: #161616;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 2.4rem;
    margin: 4px 0;
    padding: 0 10px;
    width: 100%;
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    opacity: 1;
}

input.hide-cursor {
    caret-color: transparent;
}

input:-webkit-autofill {
    background-color: #fff !important;
    color: #161616 !important;
    box-shadow: 0 0 0px 1000px #fff inset !important;
}

input:focus-visible {
    outline: none;
}

input::placeholder {
    color: transparent;
}

input#password {
    padding: 0 35px 0 10px;
}

.attrEntry input.labelStyleInput,
.entry-item input.labelStyleInput {
    background: none;
    border: none;
    outline: none;
    align-self: stretch;
    padding: 0px;
    color: #161616;
    font-family: "OpenSans";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

input.labelStyleInput:hover,
input.labelStyleInput:focus-visible {
    outline: none;
}

.attrEntry label.labelStyleInput,
.entry-item label.labelStyleInput {
    align-self: stretch;

    color: #555;
    font-family: "OpenSans";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

input:hover {
    border-width: 1px;
    border-color: #576c80;
    outline: 3px solid #b7d6f7;
    transition: outline-color 0.25s;
}

input:focus,
input:focus-visible {
    outline: 2px solid #1224b8;
    outline-offset: 3px;
    transition: outline-color 0.25s;
}

input#VerificationCode[type=text] {
    background: url('https://clientele-statique.solutions.hydroquebec.com/config/auth/prd/images/input-code.svg');
    background-repeat: no-repeat;
    background-size: 192px 40px;
    height: 40px;
    border: none;
    width: 218px;
    font-size: 16px;
    line-height: 2.4rem;
    letter-spacing: 23.5px;
    padding-left: 11px;
}

input#VerificationCode[type=text]:has(+ .error:not(:empty)),
.verificationControlContent:has(#emailVerificationControl_error_message:not(:empty):not([style*="display: none"])) input#VerificationCode[type=text],
.verificationControlContent:has(#emailVerificationControl-reset_error_message:not(:empty):not([style*="display: none"])) input#VerificationCode[type=text],
input#VerificationCode[type=text].error {
    background: url('https://clientele-statique.solutions.hydroquebec.com/config/auth/prd/images/input-code-error.svg');
    background-repeat: no-repeat;
    background-size: 192px 40px;
    height: 40px;
    border: none;
    width: 218px;
    font-size: 16px;
    line-height: 2.4rem;
    letter-spacing: 23.5px;
    padding-left: 11px;
}

input#VerificationCode[type=text]:hover,
input#VerificationCode[type=text]:focus,
input#VerificationCode[type=text]:focus-visible {
    border: none;
    outline: none;
    background: url('https://clientele-statique.solutions.hydroquebec.com/config/auth/prd/images/input-code-focus.svg');
    background-repeat: no-repeat;
    background-size: 192px 40px;
    height: 40px;
    border: none;
    width: 218px;
    font-size: 16px;
    line-height: 2.4rem;
    letter-spacing: 23.5px;
    padding-left: 11px;
}

input ~ .texte-aide {
  color: #555555;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25rem;
  display: block;
  margin: 0.25rem 0 0;
}