@import url(fontawesome-all.min.css);
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,700,900");


	body, input, select, textarea {
		color: #585858;
		font-family: "Source Sans Pro", Helvetica, sans-serif;
		font-size: 16pt;
		font-weight: 300;
		line-height: 1.5; /* 1.75 GM */
	}

		@media screen and (max-width: 1680px) {

			body, input, select, textarea {
				font-size: 14pt;
			}

		}

		@media screen and (max-width: 1280px) {

			body, input, select, textarea {
				font-size: 12pt;
			}

		}

/* Form */

	form {
		margin: 0 0 1em 0;
		overflow-x: hidden;
	}

		form > :last-child {
			margin-bottom: 0;
		}

		form > .fields {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-wrap: wrap;
			-webkit-flex-wrap: wrap;
			-ms-flex-wrap: wrap;
			flex-wrap: wrap;
			width: calc(100% + 3em);
			margin: -1.5em 0 1em -1.5em;
		}

			form > .fields > .field {
				-moz-flex-grow: 0;
				-webkit-flex-grow: 0;
				-ms-flex-grow: 0;
				flex-grow: 0;
				-moz-flex-shrink: 0;
				-webkit-flex-shrink: 0;
				-ms-flex-shrink: 0;
				flex-shrink: 0;
				padding: 1.5em 0 0 1.5em;
				width: calc(100% - 1.5em);
			}

				form > .fields > .field.half {
					width: calc(50% - 0.75em);
				}

				form > .fields > .field.third {
					width: calc(100%/3 - 0.5em);
				}

				form > .fields > .field.quarter {
					width: calc(25% - 0.375em);
				}

/*		@media screen and (max-width: 480px) {

			form > .fields {
				width: calc(100% + 3em);
				margin: -1.5em 0 1em -1.5em;
			}

				form > .fields > .field {
					padding: 1.5em 0 0 1.5em;
					width: calc(100% - 1.5em);
				}

					form > .fields > .field.half {
						width: calc(100% - 1.5em);
					}

					form > .fields > .field.third {
						width: calc(100% - 1.5em);
					}

					form > .fields > .field.quarter {
						width: calc(100% - 1.5em);
					}

		}*/

	label {
		display: inline-block;
		width: 14em;
		text-align: left;
		font-weight: 700;
	}
	
	.label {
		width: 12em;
		font-weight: 700;
	}

	input[type="text"],
	input[type="password"] {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		background-color: transparent;
		border: none;
		border-radius: 0;
		/*border-bottom: solid 1px #c9c9c9; GM */ 
		color: inherit;
		display: block;
		outline: 0;
		padding: 0;
		text-decoration: none;
		width: 100%;
	}
	
		input[type="text"]:invalid,
		input[type="password"]:invalid {
			box-shadow: none;
		}

		input[type="text"]:focus,
		input[type="password"]:focus {
			border-bottom-color: #f497af;
			box-shadow: inset 0 -1px 0 0 #f497af;
		}

	input[type="text"],
	input[type="password"] {
		height: 1.5em; /*3em GM*/
	}


/* Button */

	input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
		background-color: transparent;
		border-radius: 4px;
		border: 0;
		box-shadow: inset 0 0 0 2px #585858;
		color: #585858 !important;
		cursor: pointer;
		display: inline-block;
		font-size: 0.8em;
		font-weight: 900;
		height: 3.5em;
		letter-spacing: 0.35em;
		line-height: 3.45em;
		overflow: hidden;
		padding: 0 1.25em 0 1.6em;
		text-align: center;
		text-decoration: none;
		text-overflow: ellipsis;
		text-transform: uppercase;
		white-space: nowrap;
	}

		input[type="submit"].icon:before,
		input[type="reset"].icon:before,
		input[type="button"].icon:before,
		button.icon:before,
		.button.icon:before {
			margin-right: 0.5em;
		}

		input[type="submit"].fit,
		input[type="reset"].fit,
		input[type="button"].fit,
		button.fit,
		.button.fit {
			width: 100%;
		}

		input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		button:hover,
		.button:hover {
			color: #f497af !important;
			box-shadow: inset 0 0 0 2px #f497af;
		}

		input[type="submit"]:active,
		input[type="reset"]:active,
		input[type="button"]:active,
		button:active,
		.button:active {
			background-color: rgba(242, 132, 158, 0.1);
		}

		input[type="submit"].small,
		input[type="reset"].small,
		input[type="button"].small,
		button.small,
		.button.small {
			font-size: 0.6em;
		}

		input[type="submit"].large,
		input[type="reset"].large,
		input[type="button"].large,
		button.large,
		.button.large {
			font-size: 1em;
		}

		input[type="submit"].primary,
		input[type="reset"].primary,
		input[type="button"].primary,
		button.primary,
		.button.primary {
			box-shadow: none;
			background-color: #585858;
			color: #ffffff !important;
		}

			input[type="submit"].primary:hover,
			input[type="reset"].primary:hover,
			input[type="button"].primary:hover,
			button.primary:hover,
			.button.primary:hover {
				background-color: #f497af;
			}

			input[type="submit"].primary:active,
			input[type="reset"].primary:active,
			input[type="button"].primary:active,
			button.primary:active,
			.button.primary:active {
				background-color: #ee5f81;
			}

		input[type="submit"].disabled, input[type="submit"]:disabled,
		input[type="reset"].disabled,
		input[type="reset"]:disabled,
		input[type="button"].disabled,
		input[type="button"]:disabled,
		button.disabled,
		button:disabled,
		.button.disabled,
		.button:disabled {
			pointer-events: none;
			opacity: 0.25;
		}



/**********************************************************************************************************************************************************************************************************************************************************//**********************************************************************************************************************************************************************************************************************************************************//**********************************************************************************************************************************************************************************************************************************************************//**********************************************************************************************************************************************************************************************************************************************************/

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.login-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

.error-message {
    color: red;
    margin-top: 10px;
}

/*******************************************************************/

.custom-form input, .custom-form select {
	display: inline-block;
	border: 1px solid #ccc;
	padding: 8px;
	margin-bottom: 15px;
	box-sizing: border-box;
}
	
input[type="password"],input[type="text"] {
	height: 2em;
	width: 100%;
}
::placeholder {
        font-size: 0.8em;
    }

/* Floating placeholder */
.input-container {
	position: relative;
	margin-bottom: 1.5em;
	padding: 0 0.1em 0 0.1em;
}

.input-container input {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}

.input-container label {
	position: absolute;
	top: 1.25em; /* Position verticale du label de taille normale */
	transform: translateY(-50%);
	left: 3px;
	padding: 10px;
	box-sizing: border-box;
	transition: all 0.3s ease-out;
	pointer-events: none;
	font-size: 0.8em;
	font-weight: normal;
	color: #b1b1cd;
}

.input-container input:hover
{
    background-color: #f5f7ff; /* couleur de fond des champs */
}

.input-container input:focus + label,
.input-container input:not(:placeholder-shown) + label {
	top: -55%; /* Position verticale du label de taille réduite */
	transform: translateY(0);
	font-size: 12px;
	color: #f497af; /* couleur du label */
}
		@media screen and (max-width: 360px) {
		
		.input-container input:not(:placeholder-shown) + label {
			top: -65%; /* Position verticale du label de taille réduite */
		}

		}

label {
        white-space: nowrap;
    }