@import "variables";
.w-openid {
	position: fixed; top: 0; right: 0; bottom: 0; left: 0;
	z-index: 9999;
	display: none;
	min-width: 320px;

	.w-openid-shadow {
		background: $black;
		position: absolute; top: 0; right: 0; bottom: 0; left: 0;
		z-index: 2;
		opacity: 0.85;
	}
	.w-openid-window {
		background: $white;
		z-index: 55;
		@media (min-width: 576px) {
			position: absolute; top: 50%; left: 50%;
			width: 520px;
			@include transform(translateX(-50%) translateY(-50%));
		}
		@media (max-width: 575px) {
			position: absolute; top: 0; right: 0; bottom: 0; left: 0;
			overflow-y: auto;
		}
	}

	.w-openid-body {
		padding: 32px;
		@media (max-width: 575px) {
			padding: 16px;
		}
		.closer {
			top: 24px;
			right: 32px;
			width: 32px;
			height: 32px;
			@media (max-width: 575px) {
				top: 12px;
				right: 16px;
				width: 24px;
				height: 24px;
			}
		}
		.wof-logo {
			margin-bottom: 48px;
			a {
				border: none;
				display: inline-block;
			}
			svg {
				display: block;
			}
		}
		.wof-buttons {
			margin: 0 0 24px;
			padding: 0;
			list-style: none;
			li {
				position: relative;
				&:not(:first-child){
					margin-top: 16px;
				}
				a, button {
					background: $blue;
					border: none;
					position: relative;
					display: block;
					width: 100%;
					margin: 0;
					padding: 12px 16px 12px 60px;
					font-size: 18px;
					line-height: 20px;
					color: $white;
					text-align: left;
					@include border-radius(3px);
					@media (max-width: 575px) {
						font-size: 16px;
					}
					&.facebook {
						//background: #1c438b;
						background: rgb(54,88,151);
						background: -moz-linear-gradient(top, rgba(54,88,151,1) 0%, rgba(4,46,130,1) 100%);
						background: -webkit-linear-gradient(top, rgba(54,88,151,1) 0%,rgba(4,46,130,1) 100%);
						background: linear-gradient(to bottom, rgba(54,88,151,1) 0%,rgba(4,46,130,1) 100%);
						filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#365897', endColorstr='#042e82',GradientType=0 );
						&:hover {
							opacity: 0.85;
						}
					}
					&.goggle {
						background: #4285f4;
						&:hover {
							opacity: 0.85;
						}
					}
					.ico {
						background: $white;
						position: absolute; top: 1px; bottom: 1px; left: 1px;
						display: block;
						width: 42px;
						@include border-radius(3px 0 0 3px);
						img {
							position: absolute; top: 50%; left: 50%;
							display: block;
							max-width: 18px;
							max-height: 18px;
							@include transform(translateX(-50%) translateY(-50%));
						}
					}
				}
			}
		}
		.wof-or {
			background: #f5f7fa;
			width: 54px;
			height: 54px;
			margin: 0 auto 24px;
			font-size: 16px;
			line-height: 52px;
			text-align: center;
			@include border-radius(50%);
		}
		.wof-form {
			.form-group {
				margin-bottom: 16px;
				.form-control {}
				.btn {
					min-width: 240px;
					&.btn-primary {
						display: none;
					}
				}
				&.password {
					display: none;
				}
			}
			.conditions {
				max-width: 300px;
				margin: 0 auto;
				text-align: center;
				font-size: 12px;
				a {
					border-bottom-color: transparent;
					&:hover {
						border-bottom-color: $blue;
					}
				}
			}
		}
	}
}

.openid-in {
	overflow: hidden;
	.w-openid {
		display: block;
	}
}