/*set border to the form*/

form {
    /*border: 3px solid #f1f1f1; */
}

/*assign full width inputs*/ 
.modalInput, 
.modalPassword { 
    width: 100%; 
    padding: 12px 20px; 
    margin: 8px 0; 
    display: inline-block; 
    border: 1px solid #ccc; 
    box-sizing: border-box;  
    border-radius: 5px;
    height: 35px;
} 


/*set a style for the buttons*/ 
.modal .modalButton { 
    background-color: #4CAF50 ; 
    color: white; 
    padding: 14px 20px; 
    margin: 8px 0; 
    border: none; 
    cursor: pointer; 
    width: 100%; 
    border-radius: 5px;
} 

/* set a hover effect for the button*/ 
button:hover { 
    opacity: 0.8; 
} 

/*set extra style for the cancel button*/ 
.cancelbtn { 
    width: auto; 
    padding: 10px 18px; 
    background-color: #f44336; 
} 

/*centre the display image inside the container*/ 
.imgcontainer { 
    text-align: center; 
    margin: 24px 0 12px 0; 
    position: relative; 
} 

/*set image properties*/ 
img.avatar { 
    width: 40%; 
     
} 

/*set padding to the container*/ 
.container { 
    padding: 16px; 
} 
  
/*set the forgot password text*/ 
span.psw { 
    float: right; 
    padding-top: 16px; 
    color: white;
} 

/*set the Modal background*/ 
.modal { 
    display: none; 
    position: fixed; 
    z-index: 2; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0, 0, 0); 
    background-color: rgba(0, 0, 0, 0.4); 
    padding-top: 60px; 
} 

/*style the model content box*/ 
.modal-content { 
    background-color: #fefefe; 
    margin: 5% auto 15% auto; 
    border: 1px solid #888; 
    width: 50%; 
} 

/*style the close button*/ 
.close { 
    position: absolute; 
    right: 25px; 
    top: 0; 
    color: #000; 
    font-size: 35px; 
    font-weight: bold; 
} 
  
.close:hover, 
.close:focus { 
    color: red; 
    cursor: pointer; 
} 

/* add zoom animation*/ 
.animate { 
    -webkit-animation: animatezoom 0.6s; 
    animation: animatezoom 0.6s 
} 
  
@-webkit-keyframes animatezoom { 
    from { 
        -webkit-transform: scale(0) 
    } 
    to { 
        -webkit-transform: scale(1) 
    } 
} 
  
@keyframes animatezoom { 
    from { 
        transform: scale(0) 
    } 
    to { 
        transform: scale(1) 
    } 
} 
  
@media screen and (max-width: 500px) { 
    .modal-content {
        width: 100%;
    } 
}
@media screen and (max-width: 300px) { 
    span.psw { 
        display: block; 
        float: none; 
    } 
    .cancelbtn { 
        width: 100%; 
    } 
}