@import "variables";

.authentification {
	.nav-tabs {
		margin-bottom: 32px;
		& > li {
			a {
				//min-width: 140px;
			}
		}
	}

	h1 {
		margin-bottom: 32px;
		font-size: 22px;
		font-weight: bold;
	}
	h2 {
		margin-bottom: 32px;
		font-size: 22px;
		font-weight: bold;
	}

	.auth-summary-errors {
		margin-bottom: 32px;
		text-align: center;
		color: $color_red;
		.title {
			font-size: 20px;
		}
	}

	.authentification-body {
		max-width: 512px;
		margin: 0 auto;
	}

	.form-authentification {
		.form-control {
			@media (max-width: 767px) {
				font-size: 16px;
			}
		}
		.form-group {
			& + .form-group {
				margin-top: 16px;
			}
			.form-label {
				min-height: 1px;
				color: $color_dark;
				white-space: nowrap;
			}
			.form-field {}
			@media (min-width: 768px){
				overflow: hidden;
				.form-label {
					float: left;
					width: 200px;
					padding-top: 5px;
					padding-right: 0;
				}
				.form-field {
					float: left;
					width: 312px;
				}
			}

			.auth-conditions {
				padding: 4px;
				margin-left: -4px;
				a {
					border: none;
					&:hover {
						text-decoration: underline;
					}
				}
			}

			&.auth-client-legal {
				display: none;
				&.active {
					display: block;
				}
			}

			&.has-error {
				.auth-conditions {
					background: #fbe6e6;
					.form-check {
						label {
							color: $color_dark !important;
						}
					}
				}
			}
		}

		.form-groups {
			&:not(:first-child){
				margin-top: 16px;
			}
			& + .form-group {
				margin-top: 16px;
			}
			& > .form-group {
				& + .form-group {
					margin-top: 8px;
				}
			}
		}

		.auth-client-types {
			margin: 0;
			padding: 5px 0 0 0;
			list-style: none;
			& > li + li { margin-top: 8px; }
		}
	}
}

.js-related-visible {
	display: none;
}