@import url("Space_Mono/style.css");
body{
    font-family: "Space Mono";
    background-color: #232323;
    height: 100vh;
    margin: 0;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.oauth_form{
    position:absolute;
    box-shadow: 0 0 1em #403838;
    background-color: #373737;
    color:white;
    border-radius: 20px;
    padding:20px;
    width: 500px;
    min-height:600px;
    max-height:90vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: stretch;
    *{
	transition: all 1s ease;
    };
    .client_infos{
	color:rgb(198, 198, 198);
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	img{
	    max-width:50px!important;
	}
    };
    .infosauth{
	font-size:90%;
	text-align:center;
	color: #ccc;
	a{
	    color:#ccc;
	    &:hover{
		filter:brightness(50%);
	    }
	}
    };
    .loginBody{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: stretch;
	overflow:auto;
	&::-webkit-scrollbar {
	    display: block;
	    width: 5px;
	}
	&::-webkit-scrollbar-track {
	    background: transparent;
	}

	&::-webkit-scrollbar-thumb {
	    background-color: #888;
	    border-radius:20px;
	    border-right: none;
	    border-left: none;
	}
	&::-webkit-scrollbar-thumb:hover{
	    background-color:#666;
	}


	&::-webkit-scrollbar-track-piece:end {
	    background: transparent;
	    margin-bottom: 10px; 
	}

	&::-webkit-scrollbar-track-piece:start {
	    background: transparent;
	    margin-top: 10px;
	}

	label{
	    text-align: center;
	    display: flex;
	    flex-direction: column;
	    margin-bottom: 10px;

	    input:-webkit-autofill,
	    input:-webkit-autofill:hover,
	    input:-webkit-autofill:focus,
	    input:-webkit-autofill:active {
		-webkit-background-clip: text;
		-webkit-text-fill-color: #ffffff;
		-webkit-transition: background-color 5000s ease-in-out 0s;
		-webkit-box-shadow: inset 0 0 20px 20px #23232329;
		font-family: "Space Mono";
	    }
	    input{
		font-family: "Space Mono";
		padding:10px;
		background:none;
		border:2px solid #333333;
		border-radius: 10px;
		color:white;
		outline: none;
		transition: border .1s ease;
		&:focus{
		    outline: none;
		    border: 2px solid white;
		}
	    }
	    .securpassword{
		display:none;
	    }
	    div.passwordinput{
		display:flex;
		flex-direction:row;
		width:100%;
		--visitype:"password";
		input#password{
		    flex: 2 0;
		    border-top-right-radius: 0px;
		    border-bottom-right-radius: 0px;
		    display:inline-block;
		}
		input[type=checkbox]#switchvisib{
		    display: inline-block;
		    appearance: none;
		    margin: 0;
		    padding: 10px;
		    border-top-left-radius: 0;
		    border-bottom-left-radius: 0;
		    background: lightgrey;
		    width: 40px;
		    &::after{
			font-family: FontAwesome;
			color:black;
			content: "\f06e";
		    }
		    &:checked::after{
			content:"\f070";
		    }
		}
		&:has(input#switchvisib:checked){
		    --visitype:"text";
		    input#password{
			color:red;
		    }
		}
	    }
	};
    }
    button{
	padding:10px;
	background:greenyellow;
	border:0px solid;
	border-radius: 5px;
	cursor:pointer;
	font-family: "Space Mono";
	&:hover{
	    background:green;
	    color:white;
	}
    };
    p.reg, p.pass_forgot{
	text-align: center;
	color:white;
	a{
	    color:white;
	    &:hover{
		filter:brightness(50%);
	    }
	}
    };
    p.goback{
	color:#ccc;
	a{color:#ccc;&:hover{filter:brightness(50%);}}
    }
    .client_can{
	li.checkmark{
	    color:#2ff22f;
	    &::marker{
		content:"\f14a\2002";
		font-family: FontAwesome;
	    }
	}
	li.crossmark{
	    color:#f22f2f;
	    &::marker{
		content:"\f2d3\2002";
		font-family: FontAwesome;
	    }
	}
    };
    .copy{
	text-align: center;
	color: #ccc;
	a{
	    color:unset;
	    &:hover{
		filter:brightness(50%);
	    }
	}
    }
    .error{
	display: block;
	color:#f22f2f;
	text-align: center;
	font-size: 150%;
	animation: .5s linear 0s 3 alternate hello;
	&:hover{
	    font-size: 100%;
	    transition: all 5s ease hello;
	}
    }
}
@keyframes hello{
    from{
	font-size:100%;
    }
    to{
	font-size:150%;
    }
}
@media all and (max-width: 1200px){
    body{
	padding:0;
	margin:0;
	height:100vh;
	flex-direction: unset;
	justify-content: unset;
	align-items: unset;
    }
    .oauth_form{
	height:unset;
	width:unset;
	margin:0;
	min-height:unset;
	max-height:unset;

    }
}
.errors {
    color: #D8000C;
    background-color: #FFBABA;
    text-align: center;
}