/* ----- Sign in Dialog -----  */
::deep .e-float-input.e-control-wrapper:not(.e-error) input:valid ~ label.e-float-text, .e-float-input.e-control-wrapper:not(.e-error) input ~ label.e-label-top.e-float-text {
    top: 10px;
}

::deep .e-float-text {
    font-size: 16px !important;
}

.s-centre-contents {
    margin: 0 auto;
}

.s-main-container {
    border: 1px solid #c3c3c3;
    border-radius: 16px;
    background: #ffffff;
    width: 550px;
    box-shadow: 0px 0px 10px 4px rgba(85,85,85,0.2);
    position: relative;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
}

.s-customer-logo {
    height: 85px;
    margin: 10px auto;
}

.s-login-container {
    background: #f5f5f5;
    text-align: center;
}

.s-company-container {
    border-top: 1px solid #c3c3c3;
    padding: 6px 0px 32px 0px;
    font-size: 15px;
    font-weight: 600;
    color: #5f5f5f;
    width: 100%;
}

.s-s4wicon {
    width: 20px;
    margin-right: 3px;
    margin-bottom: 2px;
}

.s-title-text {
    font-size: 16px;
    padding: 0px 0px 18px 0px;
}

.s-input-container {
    width: 275px !important;
    margin-bottom: 15px;
    text-align: left;
}

::deep .s-input-box {
    font-size: 16px !important;
    height: 36px;
    padding-top: 1px !important;
}

::deep .s-login-button {
    width: 275px;
    margin: 18px auto 30px auto;
}

.s-footer-container {
    border-top: 1px solid #c3c3c3;
    padding: 8px 0px 8px 0px;
    font-size: 10px;
    font-weight: 400;
    text-align: center;
    color: #7f7f7f;
}

.temp-style {
    background-color: #00a650 !important;
    border-color: #026d36 !important;
}

/* Sign-in button focus ring: light green with custom thickness */
.s-login-button.e-btn:focus,
.s-login-button.e-btn:focus-visible,
.s-login-button.e-btn.e-focus,
.s-login-button.e-btn.e-primary:focus,
.s-login-button.e-btn.e-primary:focus-visible {
    --signin-focus-color: #9ee6b8; /* light green */
    outline: 0; /* hide default outline */
    box-shadow: 0 0 0 3px var(--signin-focus-color) !important; /* ring thickness */
}

/* If you meant the button’s width (not focus ring), set it here */
.s-login-button.e-btn {
    width: 270px; /* or whatever you need */
}

/* Focus ring for NavLinks on keyboard navigation */
.s-navlink:focus-visible {
    outline: 1px solid #2fa8e6; /* color + width */
    outline-offset: 1px; /* gap between text and ring */
    border-radius: 1px; /* optional */
}

/* Fallback for browsers without :focus-visible */
.s-navlink:focus {
    outline: 1px solid #2fa8e6;
    outline-offset: 1px;
}

/* If Bootstrap or other CSS removes outlines, you can use a box-shadow ring instead:
.s-navlink:focus,
.s-navlink:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 166, 80, 0.6);
}
*/

button.btn.pwd-btn:focus,
button.btn.pwd-btn:focus-visible {
    border-color: #d8dde5 !important;             /* lighter grey */
    box-shadow: 0 0 0 .2rem rgba(216,221,229,.5) !important; /* subtle grey focus ring */
    outline: 0;
}