body{
	background-image: linear-gradient(to bottom right, rgb(224, 234, 240), rgb(153, 193, 232));
	background-attachment: fixed;
	font-family: sans-serif;
    padding: 0px;
    margin: 0px;
    border: none;
    width: 100vw;
    overflow-x: hidden;
}

.users-container{
	width: 90vw;
    max-width: 500px;
	background-color: rgba(170, 170, 170, 0.189);
	padding: 30px;
    margin: 0px;
    overflow-x: scroll;
}

.users-box{
	
    padding: 10px 10px 30px 10px;
    margin-bottom: 30px;
	width: fit-content;
    border: 1px rgba(157, 167, 179, 0.766) solid;
    box-shadow: 1px 1px 1px rgba(103, 103, 103, 0.727);
    background-color: rgba(170, 170, 170, 0.245);
    border-radius: 5px;
}

.user-container{
	background-color: rgba(170, 170, 170, 0.598);
	padding: 30px;
    margin: 0px;
}

.scrollable-search-results{
    
}

input{
	padding: 0px 20px;
	width: 300px;
	height: 40px;
	font-size: 22px;
}

button{
	width: 100px;
	height: 44px;
	font-size: 22px;
}

.content{
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 20px;
    width: 100%;
    height: 100%;
    margin: 0px;
}

.container-for-centering-divs{
    width:100%;
}

.centered-div{
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
}

#login-form, #registration-form, #reset-password-form, #forgot-password-form{
    border-radius: 5px;
    background-color: rgba(139, 167, 192, 0.455);
    display: block;
    width: 100%;
    max-width: 540px;
    align-items: center;
    text-align: center;
    margin:0px;
    padding-top: 25px;
    padding-bottom: 25px;
    box-shadow: 1px 1px 1px rgba(128, 128, 128, 0.628);
}

.red-invalid-input{
    color:red;
}

#add-task-module{
    width: 90%;
    max-width: 487px;
}

.fade-this-when-adding-new-task{
    opacity: 0.1;
    transition: 0.3s;
}

.fade-this-when-adding-new-task:hover {
    opacity: 1;
}

#txtHint{
    
}

#footer{
    background-color: black;
    position: sticky;
    bottom: 0px;
    text-align: center;
    width: 100vw;
    margin: 0px;
    color:white;
}

.wrapper{
    height: calc(100vh - 80px);
    width: 100vw;
    overflow-y: auto;
}

@media (max-width: 992px){
    /* Note that 992px is the default width dimensions for BootStrap to enable mobile layouts.
        You can see this effect taking place on the BootStrap NavBar. 
    */
    .wrapper{
        height: calc(100vh - 84px);
        width: 100vw;
        overflow-y: scroll;
    }
}