.login-container {
    display: grid;
    justify-items: center;
    padding: 0px 30px;
}
.login-container .card {
    width: 450px;
    max-width: 90%;
}
.login-container .card-body div {
    display: grid;
    /* justify-items: center; */
}

#LoginForm > div,
.exp-input-form  {
    display: grid;
    row-gap: 20px;
}
.login-container h3 {
    margin-bottom: 20px;
}

.login-error {
    margin-top: 30px;
}

.login-input-area {
    display: grid;
    grid-template-columns: auto 1fr;
    justify-self: start;
    column-gap: 20px;
    row-gap: 20px;
}

.login-input-area .hlut-login-btn {
    padding: 6px 50px 6px 20px;
}

/* .hlut-login-btn:disabled {
    background-color: #ccc;
    color: #666;
    border-color: #ccc;

} */



.main-elogin-form .text {
    margin-top: 0;
    font-weight: normal;
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 0px;
}

.big-blue-pin {
    font-size: 50px;
    color: #2235DF;
}

.dots-modal > .modal-body .pin-dot-wrapper {
    width: 100%;
    display: grid;
    justify-items: center;
    background-color: #F8F8FA;
    padding: 20px 0;
}

.dots-modal {
    text-align: center;
}
.dots-modal > .modal-header {
    display: grid;
    grid-template-columns: 1fr auto;
}
.dots-modal > .modal-header > h3 {
    text-align: left;
    margin-bottom: 20px;
    align-self: center;
}
.dots-modal > .modal-header #closeModal {
    cursor: pointer;
}
.dots-modal > .modal-body {
    display: grid;
    justify-items: left;
    row-gap: 20px;
    padding: 0;
    max-width: 860px;
}

/* Tab area */
.tab-wrapper{
    width: max-content;
}
.hlut-tab-select .without-app.active + .with-app + .tab-underline {
    left: 0px;
    width: 106px;
    right: inherit;
}

.hlut-tab-select .with-app.active + .tab-underline {
    right: 0;
    width: 106px;
    left: calc(100% - 106px);
}

.expired-login-container{
    display: grid;
}

.expired-login-container #closeExpiredLoginModal {
    justify-self: end;
    margin-top:20px;
}

#loginExpiredModal {
    width: 450px;
    max-width: 90%; 
}

#expiredLoginInfo{
    padding-bottom:20px;
}

@media(max-width: 510px) {
    .login-container .card {
        width: 90%;
    }

    .login-input-area {
        display: grid;
        justify-content: center;
        margin:auto;
        grid-template-columns: 1fr;
        column-gap: 20px;
        row-gap: 20px;
    }

    .login-container .card-body #LoginForm div,
    .expired-login-container div  {
        width: 100%;
    }

    .login-container {
        padding: 0px 10px;
    }
    
}