*{
    max-width: 100%;
    outline: none;
    font-family: sans-serif;
    box-sizing: border-box;
}

html,body,main,.continer{
    height:100%;
}

body{
    margin: 0;
}




main{
    text-align: center;
}


.continer{
    display: flex; 
}

.left{
    flex:1;
    margin-left: 40px;
    text-align: center;
    height:100%;
}

.god{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.right{
    width:600px;
    height:100%;
    background:url('img/sso.jpg');
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    
}

.logo{
    text-align:left;
   
}

.logo img{
   width:140px; 
    margin-top: 40px;
}

.title{
    font-size:2.2em;
    font-weight:bold;

}
.info{
    display:inline-block;
    width:560px;
    padding:50px 50px;
    margin-top:-100px;
    text-align:left;
    
   
   
}

.title2 a{
 
    color:#000000a8;
}
.title2{
    color:#0000008a;
     margin-bottom:40px ;
     font-size: 1.1em;
}
.col {
    margin-bottom:20px;
}

.col label{
    display:block;
    margin:6px 0;
    font-size:0.9em;
}

.col input{
    width:100%;
    padding:14px;
    border-radius:6px;
    border:solid 1px #0000003b;
}

.box{
    display:flex;
    align-items:center;
}

.chek{
    width:50%;
     display:flex;
    align-items:center;
}

.chek input{
    width:16px;
    height:16px;
}

.chek label{
    margin-left:3px;
    font-size:0.93em;
}

.a{
    width:50%;
    text-align:right;
}

.a a{
    text-decoration:none;
    color:#000000;
    font-size:0.94em;
}

.but{
    margin-top:20px;
}
.but button{
    width:100%;
    padding:12px;
    border:none;
    background:rgb(9 194 105);
    font-size:1em;
    color:white;
    border-radius:6px;
}

.can{
    text-align: center;
    margin-top: 40px;
}

.can a{
    text-decoration: none;
    color:#000000d9;
    font-size:0.96em;
}

.right img{
    height: 800px;
    width: 100%;
}

@media screen and (max-width : 1000px ){

.continer{
    display: inline-block; 
    width:920px;
   
    
}

.left{
    width: 100%;
      margin-left: 0px;
       text-align: center;
     
    
}

    .info{
        text-align:left;
   display:inline-block;
    padding:0px 0px;
         
        
    
   
   
}
    .title{
    font-size:2em;
    font-weight:bold;

}

    .logo{
    text-align:left;
       
   
}

.logo img{
   width:140px; 
    margin-top: 10px;
    margin-bottom:40px;
}

   

    
    .right{
        display:none;
    }
    
}@media screen and (max-width : 600px ){

.continer{
    display: inline-block; 
    width:920px;
    padding:40px;
   
    
}

.left{
    width: 100%;
      margin-left: 0px;
       text-align: center;
     
    
}

    .info{
        text-align:left;
   display:inline-block;
    padding:0px 0px;
         
        
    
   
   
}
    .title{
    font-size:1.7em;
    font-weight:bold;

}

    .logo{
    text-align:left;
       
   
}

.logo img{
   width:140px; 
    margin-top: 10px;
    margin-bottom:40px;
}

    .box{
        display:block;
    }


.chek{
    width:100%;
     display:flex;
    align-items:center;
}

.chek input{
    width:16px;
    height:16px;
}

.chek label{
    margin-left:3px;
    font-size:0.93em;
}

.a{
    width:100%;
    text-align:left;
    margin-top:20px;
}

    
    .right{
        display:none;
    }
    
}
.text{
    margin:20px 0;
    color:#595959;
}

.error{
    display:flex;
    align-items:center;
    padding:10px;
    background:#fef2f2;
    border:1px solid #efdfdf;
    border-radius:6px;
    gap:10px;
}
.error img{
    width:20px;
}

.rec a{
    color:#222222;
}
.rec {
    color:#2d2d2d;
}

input.error{
    border:1px solid rgb(95, 23, 23);
}

div.error{
    margin:25px 0;
}