body {
    background-color: #eee;
}
  
.circular {
    animation: rotate 2s linear infinite;
    height: 120px;
    position: absolute;
    width: 120px;
    left: -5px;
    top: -35px;
    z-index: 10;
    display:none;
}
  
.path {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite;
    stroke-linecap: round;
    stroke: #fff;
}
  
@keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
}
@keyframes dash {
    0% {
      stroke-dasharray: 1,150;
      stroke-dashoffset: 0;
    }
    50% {
      stroke-dasharray: 66,150;
      stroke-dashoffset: -27;
    }
    100% {
      stroke-dasharray: 66,150;
      stroke-dashoffset: -93;
    }
}

.mui--pull-right {
    position: relative;
}

.mui--text-headline, h2 {
    font-weight: bold;
    color: #6c6c6c;
    padding-left: 45px;
    padding-top: 5px;
    padding-bottom: 15px;
}

.mui--text-body2 {
    padding-bottom: 15px;
}

.container {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: url(../images/hld50a.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
  
.center-container {
    display: table-cell;
    vertical-align: middle;
}

#main {
    width: 100%;
    max-width: 450px;
    padding: 40px;
    min-height: 350px;
    background-color: #fff;
    background-image: url(../images/henderson-72.png);
    background-repeat: no-repeat;
    background-position: 40px 43px;
    background-size: 36px 36px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#submit {
    width: 108px;
    background-color: #00AC94!important;
}

legend {
    padding: 10px 0;
}

#lang-container button {
    padding: 3px;
    margin: 0;
    text-transform: none;
}

#lang-container .mui-dropdown__menu {    
    min-width: auto;
}
#mfaCode, #mfaAuth {
    display: none;   
    padding: 20px 20px 10px 20px;
    max-width: 400px;    
    background-color: #fff;   
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);        
}

#mfaCode .mui-textfield input {
    width: 42px;
    text-align: center;
    font-size: 30px;
    height: auto;
}

#mfaCode .mui--text-headline, #mfaAuth .mui--text-headline {
    font-weight: normal;
    padding-left: 0px;
}

#mui-overlay {
    display: table;
    width: 100%;
    height: 100%;
}

input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
 }

 input[type=number] {
      -moz-appearance:textfield;
 }
 
#newaccount, #selectaccount, #fplogin, #pwdlogin, #signinaccount, #otplogin {
    display: none;
}

#currentaccount {
    margin: 20px -40px;
    padding: 15px 40px 15px 72px;
    cursor: pointer;
    background-image: url(../images/user.png);
    background-repeat: no-repeat;
    background-position: 36px center;
    background-color: #eaeffe;
}

#usepassword {
    padding-top: 50px;
}

#signinaccount {
    padding-bottom: 20px;
    cursor: pointer;
}

#signinaccount:hover {
    text-decoration: underline;
}

#fplogin .mui--text-subhead {
    background-repeat: no-repeat;
    background-position: right center;
}

.fpLoginDlg {
    background-image: url(../images/fingerprint.gif);
    background-size: 64px;
    padding-right: 64px;
    height: auto;
    min-height: 64px;
}

.qrcLoginDlg {
    background-image: none;
    background-size: 128px;
    padding-right: 138px;
    height: 128px;
}

.footer {
    padding-top: 30px;
    padding-bottom: 30px;
}

.help {
    line-height: 32px;
    padding: 5px 0 15px 10px;
}

@media screen and (max-width: 600px) {
    .container {
      background-color: #ded4ba;
      background-image: none;
    }

    #mfaCode .mui-textfield {
        display: inline-block;
  }
}

#hs2FA_overLayID1 {
   display: none !important;
}