#custom-bg {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    left: 0;
    margin: 0;
    opacity: 0;
    padding: 55px 0 0 0;
    position: fixed;
    top: 0;
    transition: opacity 700ms;
    width: 100%;
}
.form-control{
	color: var(--white);

}
    ::placeholder {
        color: var(--white)!important;
    }
    .login-frm {
        margin-left: auto;
       /* margin-right: auto;*/
        position: relative;
        max-width: 440px;
        width: calc(100% - 40px);
        margin-bottom: 28px;
        background-color: #fff;
        -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        min-width: 320px;
        min-height: 340px;
        overflow: hidden;
        border-radius:6px;
    }
.clslogo img{
    margin-left:auto;
    margin-right:auto;
    display:block;
}

.login-forget1 {
    padding: 14px 20px;
    border-bottom: 2px dotted #999;
    font-weight: 500;
    cursor: pointer;
    font-size: 15px;
}
.textlogin {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 10px;
}
.textheder{
    padding: 24px 180px;
}
.ptext {
    margin-bottom: 40px;
    font-size: 16px;
}

.login-forget1:hover {
    background-color: #F5F5F5;
    cursor: pointer;
    text-decoration: none;
}

.login-forget2 {
    padding: 14px 20px;
   /* border-bottom: 2px dotted #999;*/
    font-weight: 500;
    cursor: pointer;
    font-size: 15px;
}

            .login-forget2:hover {
                background-color: #F5F5F5;
                cursor: pointer;
            }

        .loginMicrisoft {
            color: var(--black);
            text-decoration: none;
            padding-left:10px;
        }

            .loginMicrisoft:hover {
                color: var(--black);
                text-decoration: none;
            }

        .loginweatwork {
            color: var(--black);
            text-decoration: none;
            padding-left: 10px;
        }

            .loginweatwork:hover {
                color: var(--black);
                text-decoration: none;
            }

.logo {
    /*  background-color: #01994f;*/
    /* background-color: #1c2336;*/
    /*  height: 80px;*/
    margin: 24px 0px;
}

            .logo img {
                display: block;
                margin-left: auto;
                margin-right: auto;
               /* width: 100%;
                height: 100%;*/
            }
.QR{
    margin-bottom:10px;
}
a.btn-social-icon1.btn-outline-theme {
    margin-right: -60px;
}
a.btn-social-icon2.btn-outline-theme {
    margin-left: -60px;
}

.btn-social {
    padding: 0.3rem 0.3rem 0.3rem 2.9rem !important;
}
.heading {
    padding: 0px;
    font-weight: 300;
    font-size: 28px;
    text-align: center;
    margin-top: -14px;
    margin-bottom: 30px;
}

/* Responsive CSS */
@media screen and (min-width: 280px) and (max-width:320px) {
      .login-content {min-height: 60vh;display: flex;align-items: center;}
       /* .login-frm {min-width: 100%;min-height: 100%;}*/
        .heading {font-size: 18px;padding: 20px 6px;}
         img.tile-img{width:34px;}
        .logo {height:62px;}
        .login-forget1 {padding: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
        .login-forget2 {padding: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
        .loginMicrisoft {padding-left: 14px;font-size: 14px;}
        .loginweatwork {padding-left: 14px;font-size: 14px;}
}
 @media screen and (min-width: 321px) and (max-width: 667px) {
        .login-content {min-height: 60vh;display: flex;align-items: center;}
        /*.login-frm {min-width: 100%;min-height: 100%;}*/
         
         img.tile-img{width:34px;}
        .logo {height:62px;}
        .login-forget1 {padding: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
        .login-forget2 {padding: 14px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
        .loginMicrisoft {padding-left: 14px;font-size: 14px;}
        .loginweatwork {padding-left: 14px;font-size: 14px;}
        }

 @media screen and (min-width: 668px) and (max-width: 768px) {
         .login-content {min-height: 60vh;display: flex;align-items: center;}
           
   }

  @media screen and (min-width: 769px) and (max-width: 1024px) {
        .login-content {min-height: 100vh;display: flex;align-items: center;}
         
   }

.login-page {
    background: url(../images/weatwork_bg.jpg) no-repeat center center fixed;
    background-size: cover;
    position: relative;
    z-index: 9;
}