.hero-wrapper{
    background: url('../images/bg-login-img.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;

}
.card-header:first-child {
    border-radius: 0px !important;
}
.card-header{
        background-color: #196bc1;
    border-bottom: none;
    color: #ffffff;
    border: none !important;
}
.info-icon{
    color: #f59d00;
    font-size: 24px;
}
.para-teaser{
    color: #f59d00;
    line-height: 35px;
}
.gap-18{
    gap: 15px;
}
.gap-list{
    gap: 8px;
}
.input-field{
        height: 40px;
    color: #424242;
    background-color: #e6e6e6;
    border: 1px solid #777777;
    border-radius: 4px;
    text-align: left;
}
.input-field:focus{
        background-color: rgba(25, 107, 193, 0.175);
    border: 1px solid #196bc1;
    color: #424242;
    box-shadow: none;
}
.btn-weiter{
        color: #ffffff;
    background-color: #196bc1;
    font-size: 18px;
}
.btn-weiter:hover{
        
        color: #ffffff;
    background-color: #1763b2;
}
.txt-footer{
    color: #196bc1;
}
.card-header-icon{
    display: flex;
}
.arrow-left-icon{
    color: #fff;
    font-size: 50px;
    display: none;
}
.left-content-para{
    display: flex;
}


.top-loader{
  width: 100%;
  height: 4px;
  background: #f59d00; /* background line */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  overflow: hidden;
}

.top-loader span{
  position: absolute;
  left: -30%;
  top: 0;
  height: 100%;
  width: 30%;
  background: #ffffff; /* loader color */
  animation: topLine 1.2s linear infinite;
}

@keyframes topLine{
  0%   { left: -30%; }
  100% { left: 100%; }
}
.para-password{
    display: none;
}
.password-id{
    display: none;
}