body
{
    margin: 0;
    padding: 0;
    background-size: cover;
    background-color: rgb(34, 34, 34);
    font-family:'Poppins',sans-serif;  

}
.title
{
    text-align:center;

}
.title h1
{
    margin: 0;
    padding: 0;
    color: #fff;
    font-size:  50px;
    font-family:'Calibri';
    font-style: bold;
}

.box{
    margin-top: 120px;
}
.container
{
    width: 50%;
    height: 400px;
    background: #fff;
    margin: 0 auto;
    box-shadow: 0 15px 40px rgba(0,0,0,.5);
}
.container .left
{
    float:left;
    width: 50%;
    height: 400px;
    background:white;
    background-size: cover;
    box-sizing: border-box;

}

.container .right
{
    float: right;
    width: 50%;
    height: 400px;
    background-color:  #45adf0; 
    background-size: cover;
    box-sizing: border-box;
}
.formBox 
{
    width: 100%;
    padding: 50px 40px;
    box-sizing: border-box;
    height: 400px;
    background-color:#45adf0;
}
.formBox p
{
    margin: 0;
    padding: 0;
    font-weight: bold;

}
.formBox input
{
    width: 100%;
    margin-bottom: 20px;

}
.formBox input[type="text"],
.formBox input[type="password"]
{
    border: none;
    outline: none;
    height: 40px;
}
.formBox input[type="text"]:focus,
.formBox input[type="password"]:focus
{
    border-bottom: 2px solid #262626;

}
.formBox input[type="submit"]
{
    border-radius: 8px;
    outline:none;
    height: 45px;
    color: #262626;
    background:#fff;
    cursor: pointer;
    font-family:'Poppins',sans-serif;  
}
.formBox a
{
    color: #262626;
    font-size: 12px;
    font-weight: bold;
}


/*display error*/
.error 
{
    width: 100%;
    margin :0px auto;
    border: 1px solid #a94442;
    color: #a94442;
    background-color: #f2dede;
    border-radius: 5px;
    text-align: left;
}
.success{
    color: #3c763d;
    background: #dff0d8;
    border:1px solid #3c763d;
    margin-bottom:20px;
}
/*responsive web*/

@media screen and (max-width:1000px){
    .container .left,.container .right{
        width: 100%;
    }
}
/*responsive web*/

@viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}
@-ms-viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}
/* Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
    .container,.container.left,.container.right{
        width: 100%;
    }
    .box{
        margin-top: 10px;
    }

    .title h1{
        margin-bottom: 10px;
    }
  
}

/* Small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) { 
    .container.container.left,.container.right{
        width: 100%;
    }
    .box{
        margin-top: 10px;
    }

    .title h1{
        margin-bottom: 10px;
    }
  
 }

/* Medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) { 
    .container,.container.left,.container.right{
        width: 100%;
    }
    .box{
        margin-top: 10px;
    }

    .title h1{
        margin-bottom: 10px;
    }
  
 }

/* Large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) { 
    .container,.container.left,.container.right{
        width: 100%;
    }
    .box{
        margin-top: 0px;
    }

    .title h1{
        margin-bottom: 10px;
    }
  
 }

 /* Large devices (desktops, less than 1200px)*/
@media (max-width: 1198px) { 
    .container,.container.left,.container.right{
        width: 100%;
    }
    .box{
        margin-top: 10px;
    }

    .title h1{
        margin-bottom: 10px;
    }
  
 }

 


/* Extra large devices (large desktops)*/
/* No media query since the extra-large breakpoint has no upper bound on its width*/