/* Login Page Style */

body {
    margin:0px; padding:0px;
    background-image:url(../media/images/login-page/waves.svg);
    background-position:top right;
    background-repeat:no-repeat;
    background-size:200px 100px;

    -webkit-user-select: none;
    -ms-user-select: none;
    
    font-family:arial;
    
    
}


* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}


.inner-submit{
    width:100%;cursor:pointer; transition: background-color .3s;
}

/*--Loader--*/
.loader {
  display: inline-block;
  position: fixed;
  width: 80px;
  height: 80px;
  
}
.loader div {
  position: absolute;
  border: 4px solid #008080;
  opacity: 1;
  border-radius: 50%;
  animation: loader 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.loader div:nth-child(2) {
  animation-delay: -0.5s;
}
@keyframes loader {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}
/* end loader */    

a {
    background-color: transparent;
    text-decoration:none;
}
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

.verify{
    color:skyblue;
}
.verify:hover{
    color:brown
}

/* Change browser sugggestion input color */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

input:-webkit-autofill::second-line {font-size: 22px}


.gray-text{
    color :gray;
}

input[type=submit]{
    cursor:pointer;
}


.notify{

    position:fixed;max-width:400px;
    min-width:200px; right:10px; 
    margin-top:10px;z-index:999;
    box-shadow:0px 1px 1px lightgray;
    background:#eff2f9;
    color:brown;
    font-weight:bold;
    padding:15px;
    border-radius:35px;
    display:none;
    max-height:200px
}

.notify-remove{
    
    color:lightgray;
    position:absolute;
    right:15px;
    cursor:pointer;
    font-size:20px;
    margin-top:0px;
    
}
                  
.notify-remove:hover{
    
    color:#172b70;

}

.notify-internet{
    
    position:fixed;
    max-width:400px; 
    right:10px; 
    bottom:10px;
    z-index:999;
    box-shadow:0px 1px 1px lightgray;
    background:#eff2f9;
    color:brown;
    padding:10px 15px 10px 15px;
    border-radius:35px;
    display:none;
    max-height:200px;
    font-size:90%;
    xxxtext-shadow:1px 1px 3px lightgray
}

.tap-erp-hero-bg{
 height:450px;width:379px;
 vertical-align:middle;
 margin:auto
   
}



.login_button{
    
    background:#eff2f9;
}

.login_button:hover{
    
background:linear-gradient(135deg, rgb(0, 204, 255)  0%,  rgb(42, 39, 218) 100%);
    
}

.demo_button{
    
    background:#eff2f9;
}

.demo_button:hover{
    
background:linear-gradient(135deg, rgb(0, 204, 255)  0%,  rgb(32, 38, 218) 100%);
    
}



@media screen and (min-width: 700px){


.main-box{
    width:100vw;
    display:flex;
    height:100vh;
}

.left{
    width:50%;
    display : flex;
    align-items : center;
    background: radial-gradient(25% 100% at right, transparent 70%, #eff2f9 71%);
}


.right{
    width:50%;
    align-items:center;
    display:flex;
    margin:auto;
}



.right-in{ 
   text-align:center;
   padding:0px 10px 1px 10px;
   width:400px;
}



.main-logo {
    position: absolute;
    z-index: 1;
    top: 5%;
    height: 25px;
    width: 300px;
    text-align:center;
    text-decoration:none
}

.main-logo img {
    border-style: none;
    width:47px;height:47px;
}

.logo-text{
    
    font-weight:bold;vertical-align:top;margin-top:6px;
                        display:inline-block;color:#0076ff;margin-left:2px;font-size:35px
}


.notify{
    font-size:100%;width:30%;
}

.login-heading{
    color: #172b70;
    font-weight:bold;
    letter-spacing: -.5px;
    text-align: center;
    text-shadow:1px 1px lightgray;
    margin-top:0px
}

.tabs{
    margin-bottom:10px;
    padding:5px 5px 5px 0px;
    border:1px solid #d8d7db;
    border-radius:25px;
    color: #080f1a;
} 
        
.tabs-inner{
    border:none;
    font-size:17px;
    outline:none;
    height:35px;
    width:100%;
    padding:3px 15px 3px 0px;
}

.tabs .i-img{
    float:right;height:100%;font-size:19px;cursor:pointer;
}
        
.tabs input{
    height:100%;width:75%;float:left;border:none;font-size:22px;outline:none;background:transparent;text-align:left;
}
        

.tabs .img img{
    width:30px;height:30px;       
}
        
.tabs .img {
    margin-right:3px;
    float:left;
    background:whitesmoke;
    padding:7px 5px 3px 5px;
    border-radius:23.5px;
    margin-top:-8px;
    width:45px;
}
        

.span-text{
    font-size:15px;color:gray;
}


}
/* end media for larage device */

 





@media screen and (max-width: 700px){
    
.main-box{
    width:100%;
    height:100vh;
    text-align:center;
}


.left{
    display:none;
}




.notify{
    font-size:100%;width:60%;
}


.right{
    width:100%;height:100vh;padding:10px;
}

.right-in{
    text-align:center;
    padding:0px 10px 0px 10px;
    width:100%;
    margin-top:140px;
}

.login-heading{
   display:none;
}

.right-in input{
  height:40px;
}

.main-logo {
    position: absolute;
    z-index: 1;
    top: 5%;
    height: 25px;
    width: 100%;
    text-align:center;
    text-decoration:none
}

.main-logo img {
    width: 100%;
    height: 100%; 
    height: 25px;
    width: 80px;
    border-style: none;
}

.main-logo  img{
    width:48px;
    height:48px;
}

.logo-text{
        font-weight:bold;
        font-size:32px;
        vertical-align:top;
        margin-top:6px;
        display:inline-block;
        color:#0076ff;
        margin-left:2px;
        font-size:36px
}




.tabs{
    margin-bottom:10px;border:1px solid gray; 
    padding:5px 5px 5px 0px;border:1px solid #d8d7db;border-radius:25px;xxxbox-shadow:1px 1px 2px gray; color: #080f1a;
} 
        
.tabs-inner{
    width:75%;border:none;font-size:17px;outline:none;height:35px !important;width:100%;padding:3px 15px 3px 0px
}

.tabs .i-img{
            float:right;height:100%;font-size:19px;cursor:pointer;
}
        
.tabs input{
    height:100%;
    width:75%;
    float:left;
    border:none;
    font-size:22px;
    outline:none;
    background:transparent;
    text-align:left;
}

.tabs .img img{
    width:30px;height:30px;       
}
        
.tabs .img {
    margin-right:3px;
    float:left;
    background:whitesmoke;
    padding:7px 5px 3px 5px;
    border-radius:23.5px;
    margin-top:-8px;
    width:45px;
}
        
.span-text{
    font-size:100%;
    color:gray;
}




}
/* end media for small device */