*{
   margin: 0;
   padding: 0;
   font-family: sans-serif;
}

:root{
   --primary: #2084a0;
   --secondary: #09222a;
   --white: #fff;
}

body{
   background-color: var(--secondary);
   overflow: hidden;
}

.container{
   max-width: 450px;
   padding: 0 20px;
   margin: 170px auto;
}

.wrapper{
   width: 100%;
   background-color: var(--white);
   border-radius: 5px;
}

.wrapper .title{
   line-height: 80px;
   background-color: var(--primary);
   border-radius: 5px 5px 0 0;
   padding-left: 20px;
   font-weight: 600;
   font-size: 25px;
   color: var(--white);
}

.wrapper form{
   padding: 30px 20px 25px 20px;
}

.wrapper form .row{
   height: 45px;
   margin-bottom: 15px;
   position: relative;
   
}

.wrapper form .row input{
   height: 100%;
   width: 100%;
   padding-left: 60px;
   outline: none;
   border-radius: 5px;
   border: 1px solid lightgray;
   font-size: 16px;
}

.wrapper form .row input:focus{
   border-color:var(--primary);
   box-shadow: inset 0px 0px 1px 1px #7d959c;
}


.wrapper form .row i{
   background-color: var(--primary);
   color: var(--white);
   position: absolute;
   height: 100%;
   width: 45px;
   font-size: 18px;
   display: flex;
   align-items:center ;
   justify-content: center;
   border-radius: 5px 0 0 5px; 
}

.wrapper form .pass{
   margin: -5px 0 20px 0;
}

.wrapper form .pass a{
   color: var(--primary);
   font-size: 17px;
   text-decoration: none;
}

.wrapper form .pass a:hover{
   text-decoration: underline;
}


.wrapper form .button input{
   padding-left: 0px;
   background: var(--primary);
   color: var(--white);
   font-size: 18px;
   font-weight: 500;
   cursor: pointer;
}

.wrapper form .signup-link{
   margin-top: 60px;
   text-align: center;
   color: rgb(122, 122, 122);
}

.wrapper form .signup-link a{
   color: var(--primary);
   text-decoration: none;
}

.wrapper form .signup-link a:hover{
   cursor: pointer;
   text-decoration: underline;
}