body{
            margin: 0; 
            font-family: "Roboto", sans-serif;
            background: #f0f0f0a8;
        }
        .data-content{
            padding-bottom: 4rem; 
        }
        header{
            background-color: #fff;
            box-shadow: 0 0 10px 0 rgba(0,0,0,.2);
            overflow: hidden;  
        } 
        .data-loading header{
            box-shadow: none;
        }
        .navbar .header-navbar-wrapper{
            padding: 5px 40px;
            display: flex;
            justify-content: space-between;
        }
        .navbar .header-navbar-wrapper img{
            position: relative;
            top: 8px;
            height: 70px;
            transform: scale(1.8);
            margin: -5px 0;
        }
        .navbar .nav-right{
            vertical-align: middle; 
            padding-top: 17px;
        }
            body.data-loading{
                overflow: hidden;
            }
            .form-wrapper{
                margin: 0 auto;
                background: #fff;
                border-radius: 16px;
                padding: 60px;
                width: 540px;
                margin-top: 3rem;
                box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.027);
                border: 1px solid #ddd;
            } 
            body.data-loading   .form-wrapper{
                box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.071);
                border: none;
            }
            .app-logo{
                margin: 0 auto; 
                display: flex;
                justify-content: center;
            }
            .app-logo img{
                height: 210px;
                margin: -2rem 0 -1rem;
            }
            .data-group{
                display: flex;
                flex-direction: column;
                margin: 0 0 10px 0;
            } 
            .data-group label{
                color: #222;
                font-size: 15px;
                margin-bottom: 5px;
                font-weight: 500;
                padding-left: 15px;
            }
            .data-group input{
                padding: 18px 10px 18px 15px;
                border: 1px solid #c0c0c0;
                border-radius: 30px;
                letter-spacing: .4px
            }
            .forget-password{
                margin-top: 9px; 
            }
            .forget-password a{
                color: #1a82e2;
                font-size: 13px;
                padding-left: 15px;
            }
            #submitbutton{
                background-color: #1a82e2;
                padding: 20px 25px;
                border: none;
                outline: none;
                border-radius: 30px;
                position: relative;
                top: 5px;
                font-size: 15px;
                font-weight: 600;
                cursor: pointer;
                color: #fff; 
            } 
            .line-separator{
                margin: 1.9rem 0 1.3rem;
                height: 2px;
                width: 100%;
                background: #ddd;
                position: relative;
            }
            .line-separator span{
                position: absolute;
                left: 50%;
                transform: translate(-50%,0);
                background-color: #fff;
                padding: 0 18px;
                top: -8px;
                font-size: 16px;
                font-weight: 600;
                color: #888;
            }
            .bottom-section-content{
                text-align: center;
            }
            .data-usage-msg{
                padding: 6px 0;
            }
            .data-usage-msg p{
                color: #888;
                font-size: 12px;
            }

            .user-register-account a{
                color: #1a82e2;
                cursor: pointer;
            }
            .data-usage-msg a{ 
                color: #bebebe;
                cursor: pointer;
            } 
            .page-footer{
                font-size: 11px;
                margin: 5rem 0 1rem;
                color: #888;
                text-align: center;
            }

            .data-loading .app-logo,
            .data-loading .form-separator,
            .data-loading button[type=submit],
            .data-loading .user-register-account,
            .data-loading label{
                display: none;
            }
            .data-loading .data-group, 
            .data-loading .data-usage-msg{
                position: relative;
            }
            .data-loading .data-usage-msg p:first-child,
            .data-loading .data-group:last-child{
                margin: 0;
                padding: 0;
            } 
            
            .data-loading .data-group input{
                height: 10px;
            } 
            
            .data-loading .data-group > *, 
            .data-loading .data-usage-msg > *{
                opacity: 0;
            }
                
            .data-loading .data-usage-msg p{
                position: relative!important;
            }
            
            .data-loading .data-usage-msg p, 
            .data-loading .data-usage-msg p a{
                color: #f2f2f2!important; 
            }
            .data-loading .data-usage-msg p,
            .data-loading .loading-skeleton{ 
                background: #f2f2f2;
                position: absolute;
                z-index: 2;
                height: 100%;
                width: 100%;
                left: 0;
                top: 0;
                opacity: 1;
                border-radius: 6px;
            }    .modal p.message{
  	padding: 20px 10px 20px 30px;
    margin: 0;
    background-color: antiquewhite;
    color: red;
    font-weight: 300
  }
      .modal p.message-success{
  	padding:20px 30px;
    margin: 0;
    background-color: #9df1d5;
    color: #2e413a;
    font-weight: 300
  }
      
  
  .modal-auth.data-fetch-error .btn-cancel{
    min-width:140px
  }

.data-loading .app-logo img{
display: none;
}
.form-header {
  display:none
}
*{
    box-sizing: border-box;
}