html {
    overflow: hidden;
}

body {
    width: 100%;
    overflow: auto;
    /*overflow-y: scroll;*/
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f3f7f9
}

    body .app {
        min-height: 525px;
    }
    body.nocode{
        background: #F3F7F9;
    }

.login-body {
    display: flex;
    align-items: center;
    justify-content: center;
}
#app-header {
    position: fixed;
    top: 0;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}
.usernamefield-password-carousel,
.sub-heading{
    font-size: 14px;
    font-weight: 600;
    color: #66788a;
}
.topBar {
    height: 6px;
    border-radius: 5px 5px 0px 0px;
}
/* #slideIn {
    padding-bottom: 0px !important;
} */

#back-btn-password {
    margin: 30px 10px 0px 0px;
    float: left;
    height: 41px;
    padding: 13px 17px;
    text-align: center;
    width: 100%;
}

#continue-btn-password {
    float: right;
    margin: 30px 0px 0px 3px;
    width: 100%;
}
#ippLoginImg {
    width: 75px;
    height: 75px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

#channel-logo {
    
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.loginpanel1 {
    width: 100vw;
   
    display: flex;
    justify-content: center;
}

.carouselBG {
    width: 100%;
    min-width: 100px;
    max-width: 480px;
    background: white;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    position: absolute;
    border-radius: 5px;

}

    .carouselBG .carousel-inner {
        /*box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.05);
        border: 1px solid #eee;
        border-radius: 15px;*/
        /* height:  calc(100vh - 50px); */
    }

    /* .carouselBG .carousel-inner .form-box {
        border: 1px solid #e1e1e1;
        padding: 0 25px 25px;
        border-radius: 10px;
        background-color: white;
        min-width:  100px;
    } */
    .max-width500 {
        max-width:  600px;
    }


        .carouselBG .carousel-inner:hover {
            /*box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.05);*/
        }

.loginpanel {
    width: 450px;
    margin: 0 auto;
}

.left-icon-1 input {
    padding-left: 38px !important;
}
.right-icon-1 input {
    padding-right: 38px !important;
}

.show-password.active {
    background-color: #d9e9f1;
    border-radius: 50%;
}

.form-box .label {
    font-size: 14px;
    font-weight: 500;
    color: #26405E;
    order: -1;
    position: relative;
}
.form-box .input-left-icon  {
    position: absolute;
    left: 8px;
    top: 34px;
    display: flex;
    align-items: center;
    z-index: 5;
}
.form-box .input-right-icon  {
    position: absolute;
    right:8px;
    top: 34px;
    display: flex;
    align-items: center;
    z-index:  5;
}
#login-idp-btn {
    /*bottom: 30px;*/
    /*position: absolute;*/
    width: 100%;
}

.form-box .form-control-input {
    display: block;
    width: 100%;
    width: -webkit-fill-available;
    /* height: calc(1.5em + 1.06rem + 2px); */
    /* padding: .63rem 1.3rem; */
    padding: 8px 16p;
    font-size: 14px;
    font-family: Montserrat, sans-serif;
    font-weight: 400;
    line-height: 1.5;
    color: #26405E;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #d1d2db;
    border-radius: .29rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
   
    height: 3rem;
}

.form-box .form-control-label {
    padding-left: 0;
}
.form-box .form-control-input:focus {
     border-color: #9297da !important;
    outline: 0;
    box-shadow: 0 0.313rem 0.719rem rgb(122 123 151 / 10%), 0 0.156rem 0.125rem rgb(122 123 151 / 6%);
}
.carouselBG .change-email-box {
    margin-top: 20px;
    font-weight: 600;
}

.carouselBG .change-email-box .hq-link ,
.carouselBG .reset-password{
        color: #26404e;
    font-weight: bold;
}
.panel-header h5{
    font-weight: 700;
    color: #27414f;
}
.continue-btn, .continue-btn:hover, .continue-btn:focus {
    padding: 10px !important;
    width: 100%;
    border-radius: 5px;
    /* border:1px solid #a8a69e !important */
}

footer {
    text-align: center;
    width: 100%;
    /*height: 125px;*/
    /*position: absolute;*/
    bottom: 0;
    left: 0;
}

    footer .footer-logo {
        /*margin-bottom: 20px;*/
        color: #818a91;
        font-size: 12px;
    }

/*#email, #password {
    border-bottom: 1px solid #28bc6a !important;
}*/

.md-input:focus, .md-input.focus {
    border-color: #28bc6a;
}

    .md-input:focus ~ label, .md-input.focus ~ label {
        color: #28bc6a;
    }

/* #slideIn {
} */

.loginpanel .thumbnail span img {
    width: 100px;
}

.loginpanel span i {
    color: #818a91;
}


#slideIn, #slideOut {
    border-radius: 5px;
    /* border: 1px solid #d0d2db; */
    background-color: white;
}
.auth-or {
    margin: 0;
    position: relative;
    padding: 3px;
}

.auth-or::after {
    content: " ";
    width: 100%;
    height: 1px;
    background: #DBDBDB;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
}

.auth-or span {
    font-weight: 700;
    text-align: center;
    padding: 0 8px;
    background: #fff;
    display: block;
    position: relative;
    z-index: 11;
    margin: 0 auto;
    width: 52px;
    font-size: 15px;
    color: #cacaca;
}
.go-to-webapp,
.btn-google {
    background: #ffffff;
    width: 100%;
    color: #27414f;
    padding: 0;
    -webkit-box-shadow: 0 0 1px 0 #6d6d6d;
    box-shadow: 0 0 1px 0 #6d6d6d;
    border: 1px solid #e2e2e2;
    border-radius: 5px;
    /* margin-top: 2.5rem; */
    padding: 5px;
    font-weight: 600;
}
.btn-google .google-text{
    font-size: 14px;
}
.go-to-webapp {

    text-align: center;
    border: none;
    background-color: #fff !important;
    box-shadow: none;
    color: #27414f;
    font-weight: bold !important;
    font-size: 14px;
    padding: 8px 16px;
    border-radius: 4px;
    display: inline-flex;
    width: auto;
}

.go-to-webapp img {
    margin-left: 4px;
}
.go-to-link {
    display: flex;
    justify-content: center;
    align-items: center;
}
#slideOut .go-to-link .go-to-webapp:hover {
    background-color:white !important;
    cursor: pointer;
}

.btn-google{
    border-color: #27414f;
    border: 1px solid #444;
}
.btn-google:hover {
    border-color: #27414f;
    background-color: #fff !important;
    border: 1px solid #444;
}

.btn-google .content-grid {
    text-align: left;
    -ms-touch-action: none;
    touch-action: none;
    pointer-events: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.btn-google .logo-wp {
    display: inline-block;
    vertical-align: middle;
}

.btn-google .logo-wp .logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0;
    background-color: #fff;
    border-radius: 50%;
    height: 25px;
    width: 25px;
    margin: 5px;
}
.no-acc-text,
.change-email-box .title,
.or-text{
    color: #969696;
    text-align: center;
    font-weight: 600;
    opacity: 80%;
}
.or-text{
    margin:20px
}
.bg_A {
    background: #F7F7F7 !important;
}

.bg_B {
    background: #EEEEEE !important;
}
#slideOut a.brand_A,
#slideIn a.brand_A,
.brand_A {
    color: #27414f  !important;
}
button.brand_B,
.brand_B {
    background-color: #27414f  !important;
    font-weight:600;
}

.font_A {
    color: #fff !important;
    /* optional */
    background: #fff !important;
}

.headBG {
    border: 1px solid #D3D9DB;
    background: #fff !important;
    border-radius: 5px 5px 0px 0px;
}
.backArrow{
    transform: scale(-1);
}
/* .carousel-inner{
    border-radius: 5px;
    border: 1px solid #d0d2db
} */
::-webkit-scrollbar-thumb {
    background: #c9cfd3;
    border-radius: 10px;
    border: 2px solid #ffffff;
    display: none;
}