/* This is for the form id="secondaryLoginForm"*/


.card-msb {
width: 380px;
max-width: 90vw;
background: #fff;
border: 1px solid #d0d0d0;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
padding: 40px 32px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-start;
height: 360px; /* fixed height */
overflow: hidden;
}

.header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 20px;
}

.back-btn {
display: none;        /* initially hidden */
font-size: 14px;
color: #0067b8;
background: none;
border: none;
cursor: pointer;

flex-shrink: 1;       /* can shrink slightly on very narrow screens */
min-width: 100px;      /* never too small to click */
max-width: 150px;     /* never too wide */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.back-btn:hover {
color: #fff;
}
.header h1 {
flex: 1;              /* take all remaining space */
margin: 0;
font-size: 23px;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.form-container {
flex: 1;
position: relative;
}

.step {
position: absolute;
top: 0;
left: 0;
width: 100%;
transition: transform 0.35s cubic-bezier(.4,0,.2,1), opacity 0.35s ease;
display: flex;
flex-direction: column;
opacity: 0;
transform: translateX(100%);
}

.step.active {
opacity: 1;
transform: translateX(0);
}

.step.exit-left {
transform: translateX(-100%);
opacity: 0;
}


.input {
width: 100%;
padding: 10px;
font-size: 15px;
margin-top: 12px;
border: 1px solid #ccc;
outline: none;
box-sizing: border-box;
}

.input:focus {
border-color: #0067b8;
box-shadow: 0 0 0 1px #0067b8;
}

.button {
margin-top: 25px;
width: 100%;
padding: 10px;
background: #0067b8;
color: #fff;
border: none;
font-size: 15px;
cursor: pointer;
}

.button:hover {
background: #00529b;
}

.subtitle {
font-size: 14px;
color: #666;
margin-top: 8px;
}

.error {
font-size: 13px;
color: #c00000;
margin-top: 8px;
display: none;
}
a.notSigned {
text-decoration: none;	
}

.password-wrapper {
    position: relative;
}

.eye-btn {
    position: absolute;
    right: 10px;
    top: 58%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.eye-btn img {
    width: 33px;
    height: auto;
	margin-top: 4px !important;
}


.eye-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
}

.eye-btn:hover,
.eye-btn:focus,
.eye-btn:active {
    background: none !important;
    outline: none !important;
    box-shadow: none !important;
}