/* GLOBAL --------------------------------------------------------------------- */

	/* SQRD Colors */

	:root {
		--aquamarine : #E81840;
		--black   	 : #111111;
		--granite 	 : #DDDDDD;
		--grey       : #888888;
		--red     	 : #E81840;
		--purple  	 : #42378f;
		--white   	 : #F2F2F2;
	}

	/* Extra Colors */

	:root {
		--green  : #00F2A0;
		--yellow : #FCE95E;
    }

	html, body {
		background : black;
	    display    : inline-block;
	    height     : 100%;
		margin     : 0;
		overflow-x : hidden;
		padding    : 0;
		width      : 100%;
	}

	p a {
        color : var(--red);
    }

	@font-face {
        font-family: 'morganite';
        src: url('/css/fonts/morganite/Morganite-Light.ttf') format('truetype');
        font-weight : 300;
        font-style  : normal;
    }

    @font-face {
        font-family : 'morganite';
        src : url('/css/fonts/morganite/Morganite-SemiBold.ttf') format('truetype');
        font-weight : normal;
        font-style  : normal;
    }

    @font-face {
        font-family: 'morganite';
        src: url('/css/fonts/morganite/Morganite-Bold.ttf') format('truetype');
        font-weight : bold;
        font-style  : normal;
    }

	.ailerons {
		font-family    : "ailerons";
		letter-spacing : -5px;
	}

	.clickable:hover {
		color  			: var(--red);
		cursor 		    : pointer;
		text-decoration : underline;
	}

	.morg {
		font-family    : "morganite";
		letter-spacing : 1px;
	}

	.container-fluid, .container-fluid > .row {
		height : 100%;
	}

	.spinner-border {
		height : 20px;
		width  : 20px;
	}

	.subtitle {
		color : var(--grey);
	}

	.w-100 {
		margin-top : 1px;
	}



/* LEFT PART ------------------------------------------------------------------ */

	.bg-image {
		background : black;
		height     : 100%;
		overflow   : hidden;
	}

	.bg-image img {
		min-height : 100%;
	}

	.credits {
		color    : rgba(255, 255, 255, 0.35);
		left     : 10px;
		position : absolute;
		top   	 : 5px;
	}



/* RIGHT PART ----------------------------------------------------------------- */

	.form-area {
		background : white;
	}

	#login-status {
		min-height : 28px;
	}


	/* BTNS */

		.form-area .btn-outline-danger {
			border  : var(--red) 1px solid;
			color   : var(--red);
			height  : 50px;
		}

		.form-area .btn-outline-danger:hover {
			background : var(--red);
			color      : white;
		}

		/* Login + Reset password btn */
		.form-area .btn-outline-primary {
			border  : var(--purple) 1px solid;
			color   : var(--purple);
			height  : 50px;
			width   : 100%;
		}

		.form-area .btn-outline-primary:hover {
			background : var(--purple);
			color      : white;
		}


	/* Captcha */

		.form-area .jCaptchaCanvas {
			background    : #F1F1F1;
			border-radius : 9px;
	  		border		  : 1px solid #CCC;
			padding    	  : 21px 3px 6px 15px;
		}

		.form-area .captcha {
			float  : right;
			height : 58px;
			margin : 0 0 0 5px;
			width  : calc(100% - 93px);
		}


	/* Copyright */

		.copyright {
			bottom         : 0px;
			color          : var(--grey);
			font-weight    : 300;
			left 	       : calc(50% - 70px);
			letter-spacing : -1px;
			position       : absolute;
			text-align     : center;
			width	       : 140px;
		}

		@media (min-width: 768px) {
			.copyright { left : calc(75% - 70px); }
		}


	/* Form blocs */

		.form-bloc {
			display : none;
		}

		.form-bloc.active {
			height    : 95vh;
		    display   : flex;
		    align-items: center;
		    justify-content: center;
		}



	/* Logos */

		.squared-logo {
			max-height    : 5vh;
			margin-bottom : 2.5vh;
			margin-top    : 1vh;
		}