/* On page */
.uiOauthInvitation, .uiOauthRegister {
	.popupTitle {
		cursor: default!important;
	}
}

.uiOauthRegister {
    .alert i {
        top: 0;
    }
}

.uiOauthInvitation {
	width: 400px;
	margin: 50px auto;
	border-radius: 8px;
	.content {
      p {
  		margin: 0 0 15px;
      }
      .error {
      	display: inline-block;
      }
	}
}

.uiOauthRegister.uiPopup {
    background: #ffffff url("@{images-path}/platform/portlets/extensions/registerFormBG.png") no-repeat scroll center bottom;
    border: 1px solid #333;
    border-radius: 8px;
    margin-bottom: 0;
    padding-bottom: 8px;
    width: 512px!important;
    @media (max-width: 600px) {
        background-image: none;
        width: auto !important;
    }
    .popupHeader {
        background: #484848;
        border-radius: 6px 6px 0 0;
        box-shadow: none;
        line-height: 42px;
        padding: 3px 10px 4px 20px;
        margin: -1px;
        border: 1px solid #333;
        position: relative;
        .uiIconClose {
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            margin: 0;
            &:before {
                margin: 0;
                position: absolute;
                right: 4px;
                top: 2px;
            }
        }
        [class^="uiIcon"]:hover {
          color: @colorIconSecondary!important;
        }
        .popupTitle {
          font-size: 18px;
          font-weight: bold;
          color: #c1c1c1;
        }
    }  
    .popupContent {
      background: none;
      .alert.alert-error {
        background: none;
        border: none;
        box-shadow: none;
        margin-bottom: 0;
      }
      .content {
        padding: 20px 0 5px;
      }
      .form-horizontal .controls span {
        color: red;
      }
    }
    #UIPortalLoginFormAction {
      padding-top: 35px;

    } 
}
@media (max-width: 600px) {
    .uiOauthRegister.uiPopup #UIPortalLoginFormAction {
        border-top: 1px solid #ddd;
        margin: 20px -15px 0;
        padding-top: 25px;
    }
}
/* On mask layer*/
.UIMaskWorkspace .MaskContainer .UIOAuthInvitationForm {
	margin: 0;
	width: 428px;
	border-radius: 5px;
	.title {
	   padding-left: 20px;
	}
	.uiContentBox {
	   div, table, tr, td, img, form {
	     font-size: 13px;
	   }
      .content p {
      	margin: 10px 0 20px;
      	label {
      		display: inline-block;
      		margin: 3px 10px 0 0;
      	}
      	span.pull-left {
      		display: inline-block;
      	}
      }
    }
}
.UIMaskWorkspace .MaskContainer .uiRegisterOauthForm {
	margin: 0;
	width: 470px;
	border-radius: 5px;
	.title {
	   padding-left: 20px;
	}
	.uiContentBox {
      .form-horizontal {
        .require {
          display: none;
        }
        .control-label {
          width: 125px;
        } 
        .controls {
          margin-left: 135px;
          color: red;
        }
      }
	}
}

/* Login form on mask layer */
.UIMaskWorkspace.TransparentMask {
    background: none;
    border: none;
    box-shadow: none;
    width: auto;
}

.UIMaskWorkspace.TransparentMask .MaskContainer {
    background: none;
    padding: 0;
    border-radius: 0;
}

.uiLogin {
    background: #ffffff url("@{images-path}/platform/portlets/extensions/loginBG.png") no-repeat scroll center bottom;
    border-radius: 8px;
    padding: 0 40px 15px;
    margin-bottom: 0;
    @media(max-width: 479px) {
         background-image: none;
    }
    @media(min-width: 480px) {
        width: 312px;
    }
	.title {
		background: #484848;
		border-radius: 8px 8px 0 0;
		color: #c1c1c1;
		font-size: 18px;
		font-weight: bold;
		line-height: 42px;
		margin: 0 -40px;
	}
	.centerLoginContent {
	    padding-top: 15px;
		form > input, form > input[type="text"] {
			background: #ffffff;
			border: 1px solid #cccccc;
			border-radius: 4px;
			box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.075) inset;
			color: #333333;
			font-size: 18px;
			height: 36px;
			margin: 0 0 14px;
			outline: medium none;
			padding: 1px 0 1px 50px;
			width: 260px;
            @media(max-width: 480px) {
                width: 100%;
                box-sizing: border-box;
                -wekit-box-sizing: border-box;
            }
			.box-sizing(initial);

			&.username {
				background: url("@{images-path}/platform/portlets/extensions/username.png") no-repeat scroll left top;
				margin-top: 15px; 
			}
			&.password {
				background: url("@{images-path}/platform/portlets/extensions/password.png") no-repeat scroll left top;
			}
			&:focus {
              background-position: 0 -41px;
              border-color: #84abe8;
              box-shadow: 0 0 5px rgba(19, 75, 159, 0.45);
              color: #333333;
          }
		}
		.spaceRole {
			clear: both;
			padding: 2px 0 11px;
			.uiSwitchBtn {
				float: left;
				margin-right: 15px;
				text-align: center;
            }
            .rememberTxt {
                color: #999999;
                font-size: 13px;
                font-weight: bold;
            }
		}
		.forgetPass {
		    a {
		      font-weight: bold;
		    }
		}
		.uiAction.uiActionBorder {
		  margin: 20px -40px;
		}
	}
	#social-pane {
		text-align: center;
		#signInDelimiter {
			font-size: @baseFontSize;
		}
		#social-login {
			a {
				display: inline-block;
				margin: 10px 8px 0;
				text-decoration: none;
				.uiIconOauth {
					background-image: url("@{images-path}/platform/portlets/extensions/oauthIcon.png");
					.size(35px, 37px);
					display: block;
				}
				&:hover {
					.uiIconOauth {
						background-image: url("@{images-path}/platform/portlets/extensions/oauthIconHover.png");
					}
				}
				.facebook {
					background-position: 0 0;
				}
				.twitter {
					background-position: -123px 0;
				}
				.linkedin {
					background-position: -82px 0;
				}
				.google {
					background-position: -41px 0;
				}
			}
		}
	}
}


@media (max-width: 1024px) {
    .uiOauthInvitation  .password-field input {
        width: 90%!important;
    }
}

@media(max-width: 480px) {
    .uiOauthRegister ,.uiOauthInvitation {
        select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input, .exo-mentions .replaceTextArea {
            font-size: 13px !important;
        }
        .password-field.pull-right {
            float: none;
        }
    }


}
