The Social Login Demo allows you to view some of the data available from Gigya when a user is logged in to a social network.

 

See it in Action

 

<style>
/* base for gigya css classes */
.gigya-screen-caption{
    font-family: arial;
    padding-left: 11px;
    line-height: 40px;
}
.gigya-screen,
.gigya-screen *{
    margin: 0 auto;
    padding: 0px;
    border: none;
    color: inherit;
    text-decoration: none;
    width: auto;
    float: none;
    -moz-border-radius: 0;
    border-radius: 0;
    font-family: arial;
    font-size: 15px;
    color: #4e515e;
    text-align: left;
    font-family: arial;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}
.gigya-screen{
    box-sizing: border-box;
    padding-bottom: 25px;
    /* the input is for overriding the selector in the default screenset css */ }
.gigya-screen .gigya-label{
    display: block;
    font-weight: bold;
    font-size: 15px;
    color: #4e515e;
}
.gigya-screen .gigya-label-text, .gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-remember-label,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-edit-header-text,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-edit-number,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-resend-type,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-resend-yourphone,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-resend-header-text, .gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-header-text,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-header-subtext,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-phonenumber, .gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-register-example, .gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-label, .gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-header-text, .gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-register-type span,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-resend-type span{
    display: inline-block;
    font-weight: lighter;
    font-size: 15px;
    font-family: arial;
    color: #4e515e;
}
.gigya-screen .gigya-checkbox-text{
    display: inline;
}
.gigya-screen .gigya-message{
    font-size: 15px;
    color: #333;
    display: block;
    text-align: center;
}
.gigya-screen .gigya-message.left{
    text-align: left;
    padding-bottom: 40px;
}
.gigya-screen .gigya-social-login-container{
    margin: auto;
}
.gigya-screen .gigya-forgotPassword,
.gigya-screen .gigya-forgotPassword:link{
    float: right;
}
.gigya-screen .gigya-keep-me-logged-in{
    display: block;
}
.gigya-screen .gigya-input-text,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-textbox,
.gigya-screen .gigya-input-password,
.gigya-screen .gigya-textarea{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding-left: 7px;
    box-sizing: border-box;
    width: 100%;
    text-indent: 5px;
    border-color: #b6bdc5;
    color: #4e515e;
    outline: none;
    border-radius: 4.5px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}
.gigya-screen .gigya-input-text:focus,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-textbox:focus,
.gigya-screen .gigya-input-password:focus,
.gigya-screen .gigya-textarea:focus{
    border: 1px solid #87B9EA;
    outline: none;
    -webkit-box-shadow: 0px 0px 20px 0px #1d87ff;
    -moz-box-shadow: 0px 0px 20px 0px #1d87ff;
    box-shadow: 0px 0px 5px 0px #1d87ff;
}
.gigya-screen input.gigya-input-text,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container input.gig-tfa-phone-code-textbox,
.gigya-screen input.gigya-input-password{
    border: 1px solid #b6bdc5;
}
.gigya-screen input.gigya-input-text:disabled,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container input.gig-tfa-phone-code-textbox:disabled,
.gigya-screen input.gigya-input-password:disabled{
    background-color: #f2f2f2;
    border-color: #b6bdc5;
}
.gigya-screen input.gigya-input-text.gigya-error,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container input.gigya-error.gig-tfa-phone-code-textbox,
.gigya-screen input.gigya-input-password.gigya-error{
    border-radius: 4.5px;
    border: 1px Solid #e76468;
}
.gigya-screen input.gigya-input-text,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container input.gig-tfa-phone-code-textbox,
.gigya-screen input.gigya-input-text:focus,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container input.gig-tfa-phone-code-textbox:focus,
.gigya-screen input.gigya-input-text.gigya-valid,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container input.gigya-valid.gig-tfa-phone-code-textbox,
.gigya-screen input.gigya-input-text.gigya-valid:focus,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container input.gigya-valid.gig-tfa-phone-code-textbox:focus,
.gigya-screen input.gigya-input-text.gigya-pending,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container input.gigya-pending.gig-tfa-phone-code-textbox,
.gigya-screen input.gigya-input-text.gigya-pending:focus,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container input.gigya-pending.gig-tfa-phone-code-textbox:focus,
.gigya-screen input.gigya-input-text.gigya-error,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container input.gigya-error.gig-tfa-phone-code-textbox,
.gigya-screen input.gigya-input-text.gigya-error:focus,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container input.gigya-error.gig-tfa-phone-code-textbox:focus,
.gigya-screen input.gigya-input-password,
.gigya-screen input.gigya-input-password:focus,
.gigya-screen input.gigya-input-password.gigya-valid,
.gigya-screen input.gigya-input-password.gigya-valid:focus,
.gigya-screen input.gigya-input-password.gigya-pending,
.gigya-screen input.gigya-input-password.gigya-pending:focus,
.gigya-screen input.gigya-input-password.gigya-error,
.gigya-screen input.gigya-input-password.gigya-error:focus{
    padding-left: 7px;
}
.gigya-screen .gigya-input-text,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-textbox,
.gigya-screen .gigya-input-password,
.gigya-screen select{
    height: 43px;
}
.gigya-screen .gigya-required-display{
    color: red;
    display: inline-block;
    padding: 0 5px;
}
.gigya-screen .gigya-error-display{
    display: none;
}
.gigya-screen .gigya-error-display.gigya-error-display-active{
    display: block;
}
.gigya-screen *.gigya-error-msg,
.gigya-screen *.gigya-error-msg-active.gigya-form-error-msg{
    line-height: 14px;
    font-size: 13px;
    text-align: center;
    font-weight: normal;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.gigya-screen *.gigya-error-msg.gigya-error-msg-active,
.gigya-screen *.gigya-error-msg-active.gigya-form-error-msg{
    padding-top: 8px;
    padding-bottom: 0px;
    color: #e76468;
    font-weight: bold;
    font-size: 13px;
    line-height: 15px;
}
.gigya-screen .gigya-error-msg-active.gigya-form-error-msg{
    _height: 26px;
    font-size: 12px;
    min-height: 26px;
    text-align: center;
    margin-top: 1px;
    border: 1px Solid #e76468;
    border-radius: 4.4px;
    font-weight: bold;
    padding: 10px;
}
.gigya-screen .gigya-login-provider-row:first-child{
    padding-top: 0px;
}
/* elements inside gigya screen */
.gigya-screen a,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-resend,
.gigya-screen a:visited,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-resend:visited,
.gigya-screen a:link,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-resend:link,
.gigya-screen a:active,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-resend:active{
    color: #1371b9;
    text-decoration: none;
    font-size: 15px;
}
.gigya-screen a:hover,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-resend:hover{
    text-decoration: underline;
}
.gigya-screen h2,
.gigya-screen h1{
    line-height: 15px;
    font-size: 15px;
    color: #4e515e;
    font-weight: normal;
    text-align: center;
}
.gigya-screen h1{
    border-bottom: 1px solid #dbdbdb;
    font-weight: bold;
}
.gigya-screen select,
.gigya-screen input[type=text],
.gigya-screen input[type=password],
.gigya-screen input[type=email],
.gigya-screen a.gigya-button,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gigya-button.gig-tfa-phone-code-resend,
.gigya-screen textarea{
    width: 100%;
    border-radius: 4.5px;
    border: 1px solid #b6bdc5;
    background-color: #FFFFFF;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.gigya-screen input:-ms-input-placeholder{
    color: darkgrey;
}
.gigya-screen .gigya-composite-control-submit,
.gigya-screen .gigya-composite-control-link,
.gigya-screen .gig-tfa-button-submit,
.gigya-screen .gigya-button,
.gigya-screen input[type=submit],
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-edit-link, .gigya-screen input[type=button], .gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-button-container .gig-tfa-button,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-button-container .gig-tfa-button-submit{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.gigya-screen a.gigya-button,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gigya-button.gig-tfa-phone-code-resend, .gigya-screen input[type=button],
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-button-container .gig-tfa-button,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-button-container .gig-tfa-button-submit, .gigya-screen input[type=submit],
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-edit-link{
    cursor: pointer;
    width: 100%;
    height: 43px;
    border-radius: 1.79px;
    border-color: #1371B9;
    -webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.4);
    color: #FFFFFF;
    background-color: #1D87FF;
    align-content: center;
    text-align: center;
    font-size: 19px;
}
.gigya-screen a.gigya-button:hover,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gigya-button.gig-tfa-phone-code-resend:hover, .gigya-screen input[type=button]:hover,
.gigya-screen a.gigya-button:active,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gigya-button.gig-tfa-phone-code-resend:active, .gigya-screen input[type=button]:active,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-button-container .gig-tfa-button:active,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-button-container .gig-tfa-button-submit:active, .gigya-screen input[type=submit]:active, .gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-edit-link:active, .gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-button-container .gig-tfa-button:hover,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-button-container .gig-tfa-button-submit:hover, .gigya-screen input[type=submit]:hover,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-edit-link:hover{
    background-color: #0068DE;
}
.gigya-screen a.gigya-button:active,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gigya-button.gig-tfa-phone-code-resend:active, .gigya-screen input[type=button]:active,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-button-container .gig-tfa-button:active,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-button-container .gig-tfa-button-submit:active, .gigya-screen input[type=submit]:active,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-edit-link:active{
    -webkit-box-shadow: inset 0px 2px 7px 0px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: inset 0px 2px 7px 0px rgba(0, 0, 0, 0.4);
    box-shadow: inset 0px 2px 7px 0px rgba(0, 0, 0, 0.4);
}
.gigya-screen input[type=checkbox],
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-remember-checkbox{
    width: auto;
    margin: 0px 5px 3px 0px;
    padding: 0;
    border-radius: 0;
    border: none;
    vertical-align: middle;
}
.gigya-screen input[type=checkbox] + label, .gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-remember-checkbox + label{
    display: inline;
}
.gigya-screen option{
    width: 100%;
    padding: 5px;
}
.gigya-screen option:hover{
    background-color: #3593C1;
}
.gigya-screen label.letter-spacing-s{
    letter-spacing: -0.1px;
}
/* layout */
.gigya-screen .gigya-layout-row{
    zoom: 1;
    display: block;
    text-align: center;
}
.gigya-screen .gigya-layout-row:after{
    content: "";
    display: table;
    clear: both;
}
.gigya-screen .gigya-layout-row.with-two-inputs .gigya-composite-control{
    padding-right: 7.5px;
}
.gigya-screen .gigya-layout-row.with-two-inputs > .gigya-layout-cell + .gigya-layout-cell > .gigya-composite-control{
    padding-right: 0px;
    padding-left: 7.5px;
}
.gigya-screen .gigya-layout-cell{
    text-align: center;
    float: left;
    min-width: 50%;
}
.gigya-screen .gigya-layout-cell .gigya-error-cell{
    width: 100%;
    max-width: none;
    min-width: initial;
}
.gigya-screen .gigya-layout-cell .gigya-layout-cell{
    max-width: 50%;
}
.gigya-screen .gigya-layout-footer{
    text-align: right;
    clear: both;
}
.gigya-screen.portrait .gigya-layout-row .submit-button{
    padding-bottom: 25px;
}
.gigya-screen.portrait .gigya-layout-row .gigya-layout-cell.responsive,
.gigya-screen.portrait .gigya-layout-row.with-divider .gigya-layout-cell.responsive{
    float: none;
    min-width: 100%;
    width: 100%;
}
/* landscape */
.gigya-screen-content div.gigya-screen.landscape{
    padding-left: 43px;
    padding-right: 43px;
    width: 920px;
}
.gigya-screen.landscape{
    padding-top: 50px;
}
.gigya-screen.landscape .gigya-composite-control.gigya-composite-control-social-login{
    position: relative;
    right: 25px;
}
/* portrait */
.gigya-screen.portrait{
    width: 500px;
    font-size: 15px;
    padding-left: 68px;
    padding-right: 68px;
    padding-top: 40px;
}
.gigya-screen.portrait .sub-title-text{
    font-size: 15px;
}
.gigya-screen.portrait .gigya-error-msg.gigya-error-msg-active,
.gigya-screen.portrait .gigya-error-msg-active.gigya-form-error-msg{
    font-size: 13px;
}
.gigya-screen.portrait .text-field-disabled{
    background-color: #f2f2f2;
    border: 1px solid #d6dee4;
    border-radius: 2px;
    color: #4e515e;
}
.gigya-screen.portrait .gigya-composite-control{
    padding-left: 0px;
    padding-right: 0px;
}
.gigya-screen.portrait .gigya-composite-control.gigya-composite-control-social-login{
    width: calc(100% + 50px);
    position: relative;
    right: 27px;
}
/* mobile */
.gigya-screen.portrait.mobile{
    width: 100%;
    padding-top: 30px;
    padding-bottom: 15px;
    padding-left: 20px;
    padding-right: 20px;
}
.gigya-screen.portrait.mobile:before{
    display: block;
    width: 375px;
    content: '';
}
.gigya-screen.portrait.mobile .text-field-disabled{
    color: #4e515e;
}
.gigya-screen.portrait.mobile a,
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-resend,
.gigya-screen.portrait.mobile h2,
.gigya-screen.portrait.mobile h1,
.gigya-screen.portrait.mobile .gigya-label,
.gigya-screen.portrait.mobile .gigya-label-text,
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-remember-label,
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-edit-header-text,
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-edit-number,
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-resend-type,
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-resend-yourphone,
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-resend-header-text,
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-header-text,
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-header-subtext,
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-phonenumber,
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-register-example,
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-label,
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-header-text,
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-register-type span,
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-resend-type span,
.gigya-screen.portrait.mobile .sub-title-text,
.gigya-screen.portrait.mobile .gigya-message,
.gigya-screen.portrait.mobile .gigya-terms-of-use,
.gigya-screen.portrait.mobile .gigya-forgotPassword,
.gigya-screen.portrait.mobile .gigya-login-footer-text-wrapper,
.gigya-screen.portrait.mobile .gigya-register-here-link,
.gigya-screen.portrait.mobile .gigya-composite-control-label,
.gigya-screen.portrait.mobile .main-header,
.gigya-screen.portrait.mobile .site-title,
.gigya-screen.portrait.mobile .site-title,
.gigya-screen.portrait.mobile .forgotpassword,
.gigya-screen.portrait.mobile *.gigya-error-msg.gigya-error-msg-active,
.gigya-screen.portrait.mobile *.gigya-error-msg-active.gigya-form-error-msg{
    font-size: 13px;
}
.gigya-screen.portrait.mobile input[type=text],
.gigya-screen.portrait.mobile input[type=password],
.gigya-screen.portrait.mobile input[type=email],
.gigya-screen.portrait.mobile select{
    height: 36px;
    font-size: 13px;
}
.gigya-screen.portrait.mobile *.gigya-error-msg.gigya-error-msg-active,
.gigya-screen.portrait.mobile *.gigya-error-msg-active.gigya-form-error-msg{
    font-size: 13px;
}
.gigya-screen.portrait.mobile .gigya-composite-control-social-login{
    width: calc(100% + 40px);
    position: relative;
    right: 20px;
}
.gigya-screen.portrait.mobile input[type=checkbox],
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-remember-checkbox{
    margin-bottom: 2px;
}
.gigya-screen.portrait.mobile label.letter-spacing-s{
    letter-spacing: 0px;
}
/* composite controls - spacing */
.gigya-screen .gigya-composite-control{
    padding-bottom: 18px;
}
.gigya-screen .gigya-composite-control.gigya-spacer{
    display: none;
}
.gigya-screen .gigya-composite-control.gigya-composite-control-label.main-text,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-header-text{
    padding-bottom: 40px;
    display: block;
    text-align: left;
}
.gigya-screen .gigya-composite-control.gigya-composite-control-label.main-text.inlined,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .inlined.gig-tfa-phone-header-text{
    display: inline-block;
    text-align: center;
}
.gigya-screen .gigya-composite-control.gigya-composite-control-label.social-login-title{
    padding-bottom: 26px;
    display: inline-block;
    text-align: center;
}
.gigya-screen .gigya-composite-control.gigya-composite-control-header{
    padding-bottom: 26px;
}
.gigya-screen .gigya-composite-control.gigya-composite-control-dropdown,
.gigya-screen .gigya-composite-control.gigya-composite-control-textbox,
.gigya-screen .gigya-composite-control.gigya-composite-control-password{
    padding-bottom: 5px;
}
.gigya-screen .gigya-composite-control.gigya-composite-control-dropdown .gigya-label,
.gigya-screen .gigya-composite-control.gigya-composite-control-textbox .gigya-label,
.gigya-screen .gigya-composite-control.gigya-composite-control-password .gigya-label{
    padding-bottom: 6px;
}
.gigya-screen .gigya-composite-control.gigya-composite-control-dropdown input,
.gigya-screen .gigya-composite-control.gigya-composite-control-dropdown select,
.gigya-screen .gigya-composite-control.gigya-composite-control-textbox input,
.gigya-screen .gigya-composite-control.gigya-composite-control-textbox select,
.gigya-screen .gigya-composite-control.gigya-composite-control-password input,
.gigya-screen .gigya-composite-control.gigya-composite-control-password select{
    margin-bottom: 13px;
}
.gigya-screen .gigya-composite-control.gigya-composite-control-dropdown .gigya-error-msg-active,
.gigya-screen .gigya-composite-control.gigya-composite-control-textbox .gigya-error-msg-active,
.gigya-screen .gigya-composite-control.gigya-composite-control-password .gigya-error-msg-active{
    padding-top: 0px;
    padding-bottom: 8px;
}
.gigya-screen .gigya-composite-control.gigya-composite-control-captcha-widget{
    padding-bottom: 0px;
}
.gigya-screen .gigya-composite-control.gigya-composite-control-captcha-widget .gigya-captcha-wrapper{
    margin-bottom: 5px;
}
.gigya-screen .gigya-composite-control.gigya-composite-control-captcha-widget .gigya-captcha-wrapper .gigya-captcha{
    margin: 0px auto 13px auto;
}
.gigya-screen .gigya-composite-control.gigya-composite-control-captcha-widget .gigya-captcha-wrapper .gigya-captcha input{
    height: auto;
}
.gigya-screen .gigya-composite-control.gigya-composite-control-captcha-widget .gigya-captcha-wrapper .gigya-captcha .recaptcha_only_if_privacy a,
.gigya-screen.portrait .gigya-composite-control.gigya-composite-control-captcha-widget .gigya-captcha-wrapper .gigya-captcha .recaptcha_only_if_privacy div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-resend,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gigya-composite-control.gigya-composite-control-captcha-widget .gigya-captcha-wrapper .gigya-captcha .recaptcha_only_if_privacy .gig-tfa-phone-code-resend{
    font-size: 12px;
}
.gigya-screen .gigya-composite-control.gigya-composite-control-captcha-widget .gigya-captcha-wrapper .gigya-error-msg-active{
    padding-top: 0px;
    padding-bottom: 8px;
}
.gigya-screen .gigya-composite-control.gigya-composite-control-tfa-widget{
    padding-bottom: 0px;
}
.gigya-screen .gigya-composite-control.gigya-composite-control-submit,
.gigya-screen .gigya-composite-control.gigya-composite-control-button,
.gigya-screen .gigya-composite-control.gigya-composite-control-link.button{
    padding-bottom: 25px;
}
.gigya-screen .gigya-composite-control.gigya-composite-control-submit + .gigya-error-display-active,
.gigya-screen .gigya-composite-control.gigya-composite-control-button + .gigya-error-display-active, .gigya-screen .gigya-composite-control.gigya-composite-control-link.button + .gigya-error-display-active{
    padding-bottom: 25px;
}
.gigya-screen .gigya-composite-control.gigya-composite-control-link.button{
    display: block;
}
.gigya-screen .gigya-composite-control.gigya-footer{
    padding-bottom: 0px;
}
.gigya-screen .gigya-composite-control.gigya-composite-control-social-login{
    padding: 0px;
}
.gigya-screen .gigya-composite-control.gigya-composite-control-checkbox + .gigya-composite-control-checkbox{
    margin-top: -3px;
}
.gigya-screen .gigya-composite-control.gigya-terms-error{
    padding: 5px;
    margin-bottom: 18px;
    position: relative;
    right: 6px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #DD4B39;
}
.gigya-screen div.gigya-loginID-availability-available{
    margin-bottom: 18px;
}
.gigya-screen form.gigya-form-error .gigya-composite-control.gigya-composite-control-submit,
.gigya-screen form.gigya-form-error .gigya-composite-control.gigya-composite-control-button,
.gigya-screen form.gigya-form-error .gigya-composite-control.gigya-composite-control-link.button{
    padding-bottom: 10px;
}
.gigya-screen form.gigya-form-error .gigya-composite-control.gigya-composite-control-form-error.gigya-error-display-active{
    padding-bottom: 10px;
}
.gigya-screen.landscape .gigya-layout-row.with-divider{
    padding-bottom: 25px;
}
.gigya-screen.landscape .gigya-layout-row.with-divider .gigya-composite-control.gigya-composite-control-submit,
.gigya-screen.landscape .gigya-layout-row.with-divider .gigya-composite-control.gigya-composite-control-button,
.gigya-screen.landscape .gigya-layout-row.with-divider .gigya-composite-control.gigya-composite-control-link.button{
    padding-bottom: 0px;
}
.gigya-screen.landscape form.gigya-form-error .gigya-layout-row.with-divider{
    padding-bottom: 10px;
}
.gigya-screen.landscape form.gigya-form-error .gigya-layout-row.with-divider .gigya-composite-control.gigya-composite-control-submit,
.gigya-screen.landscape form.gigya-form-error .gigya-layout-row.with-divider .gigya-composite-control.gigya-composite-control-button,
.gigya-screen.landscape form.gigya-form-error .gigya-layout-row.with-divider .gigya-composite-control.gigya-composite-control-link.button{
    padding-bottom: 10px;
}
.gigya-screen.landscape form.gigya-form-error .gigya-layout-row.with-divider .gigya-composite-control.gigya-composite-control-form-error.gigya-error-display-active{
    padding-bottom: 0px;
}
/* divider */
.gigya-screen .gigya-layout-row.with-divider > .gigya-layout-cell{
    min-width: 48%;
    width: 48%;
}
.gigya-screen .gigya-layout-row.with-divider > .gigya-layout-cell.with-divider{
    min-width: 4%;
    width: 4%;
    background-image: url(data:image/png;
    base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAMSURBVBhXY7h8+TIABPYCeicnV7oAAAAASUVORK5CYII=);
    background-position: center;
}
.gigya-screen .gigya-layout-row.with-divider > .gigya-layout-cell.with-divider > .gigya-divider-content{
    padding: 0px;
    position: relative;
    line-height: 16px;
    background: white;
    text-align: center;
    min-width: 10px;
}
.gigya-screen.portrait .gigya-layout-row.with-divider > .gigya-layout-cell.with-divider{
    height: 81px;
    background-repeat: repeat-x;
    position: relative;
}
.gigya-screen.portrait .gigya-layout-row.with-divider > .gigya-layout-cell.with-divider > .gigya-divider-content{
    padding: 0px 10px 2px 10px;
    position: absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
}
.gigya-screen.landscape .gigya-layout-row .gigya-layout-cell.under-site-login{
    width: 370px;
    text-align: center;
    min-width: 0px;
    margin-left: 460px;
}
.gigya-screen.landscape .gigya-layout-row.with-divider{
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
}
.gigya-screen.landscape .gigya-layout-row.with-divider > .gigya-layout-cell.with-divider{
    margin-top: 41px;
    width: 87px;
    background-repeat: repeat-y;
}
.gigya-screen.landscape .gigya-layout-row.with-divider > .gigya-layout-cell.with-divider > .gigya-divider-content{
    display: block;
    line-height: 15px;
    padding: 10px 0px;
    top: 83px;
    left: 0px;
}
.gigya-screen.landscape .gigya-layout-row.with-divider > .gigya-layout-cell.with-social-login,
.gigya-screen.landscape .gigya-layout-row.with-divider > .gigya-layout-cell.with-site-login{
    min-width: 0;
    width: 370px;
}
/* mobile devices */
/* tfa screens */
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-link{
    margin-left: 24%;
    margin-top: 8%;
}
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-header-text,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-header-subtext,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-phonenumber{
    display: inline;
}
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-header-subtext + .gig-tfa-phone-label{
    margin-top: 40px;
}
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-register-example{
    display: block;
}
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-label{
    padding-bottom: 6px;
    display: block;
    margin: 0px;
}
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-register-select,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-register-example,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-textbox,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-remember-label,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-resend-header-text,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-resend-yourphone-label{
    margin: 0px 0px 18px 0px;
    padding: 0px;
}
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-header-text{
    margin: 0px;
}
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-textbox{
    font-size: 15px;
}
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-error{
    text-align: center;
    margin-bottom: 18px;
    margin-top: -10px;
    font-size: 15px;
}
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-error:empty{
    display: none;
}
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-register-type span,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-resend-type span,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-resend-type{
    display: inline;
}
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-prefix{
    height: 43px;
    width: 10%;
    margin-top: 0px;
    margin-right: 16px;
    text-align: center;
}
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-number{
    margin-top: 0px;
    height: 43px;
    width: calc( 90% - 16px);
}
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container label{
    display: inline;
}
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-resend-type-label,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-register-type-label,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-register-type,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-resend-type{
    display: inline-block;
    width: 33.33333%;
    margin-bottom: 18px;
}
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-resend-type-label,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-register-type-label{
    padding: 0px;
}
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-register-type,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-resend-type{
    margin-right: 0px;
    margin-left: 0px;
    text-align: center;
    width: 34.33333%;
}
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-register-type + .gig-tfa-phone-register-type, .gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-resend-type + .gig-tfa-phone-register-type, .gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-register-type + .gig-tfa-phone-resend-type, .gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-resend-type + .gig-tfa-phone-resend-type{
    width: 32.33333%;
    text-align: right;
}
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-resend-type + .gig-tfa-phone-resend-type{
    width: 32.33333%;
    text-align: right;
}
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-button-container{
    margin: 0px;
}
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-button-container .gig-tfa-button,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-button-container .gig-tfa-button-submit{
    background-image: none;
    filter: none;
    font-weight: normal;
    line-height: normal;
    padding-top: 10px;
    margin-bottom: 25px;
}
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-edit-link{
    width: 70px;
    line-height: 43px;
    float: right;
    margin-top: -10px;
}
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-edit-numbers{
    margin-top: 26px;
    line-height: 31px;
}
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-edit-numbers:last-child{
    padding-bottom: 25px;
}
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-edit-link{
    font-size: 19px;
    padding: 0px;
    margin-top: 0px;
}
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-prefix{
    width: 10%;
    margin-right: 8px;
}
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-number{
    width: calc(90% - 8px);
}
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-remember-label{
    margin-left: 0;
}
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-register-type,
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-resend-type,
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-resend-type{
    letter-spacing: -0.5px;
}
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-error,
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-resend{
    font-size: 13px;
}
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-edit-header-text{
    font-size: 13px;
    color: #4e515e;
}
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-edit-numbers{
    margin-top: 30px;
}
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-edit-numbers .gig-tfa-phone-edit-number{
    font-size: 13px;
    margin-top: 8px;
    color: #4e515e;
}
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-prefix,
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-number,
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-textbox{
    font-size: 13px;
    height: 36px;
}
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-button-container .gig-tfa-button,
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-button-container .gig-tfa-button-submit{
    margin-bottom: 15px;
}
.gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-resend-header-text{
    display: block;
}
/* only on deviceType:'mobile' */
.gigya-screen-dialog-mobile .gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-number{
    width: 100%;
}
/* RegistrationLogin/gigya-login-screen */
#gigya-login-screen.gigya-screen.landscape .gigya-layout-row.with-divider > .gigya-layout-cell.with-divider > .gigya-divider-content{
    top: 83px;
}
#gigya-login-screen.gigya-screen.portrait.mobile .gigya-prefered-content-width{
    width: 375px;
}
/* RegistrationLogin/gigya-register-screen */
#gigya-register-screen.gigya-screen.landscape .gigya-layout-row.with-divider > .gigya-layout-cell.with-divider > .gigya-divider-content{
    top: 127px;
}
#gigya-change-password-screen .error-wrapper{
    width: 100%;
}
#gigya-change-password-screen.portrait.mobile input[password]{
    width: 260px;
}
#gigya-change-password-screen.portrait.mobile input[submit]{
    width: 276px;
}
#gigya-update-profile-screen{
    /* only on deviceType:'mobile' */ }
#gigya-update-profile-screen .second-row-wrapper{
    margin-top: 8px;
}
#gigya-update-profile-screen .first-name-row > div{
    padding: 0 0;
}
#gigya-update-profile-screen .first-name-row input{
    margin: 0px;
}
#gigya-update-profile-screen .last-name-row > div{
    padding: 0 0;
}
#gigya-update-profile-screen .gigya-myPhoto{
    padding: 0 0;
    display: inline-block;
}
#gigya-update-profile-screen .second-cell{
    display: inline-block;
}
#gigya-update-profile-screen .gigya-layout-row{
    overflow: visible;
}
#gigya-update-profile-screen .second-row-wrapper{
    padding-top: 8px;
}
#gigya-update-profile-screen .gigya-layout-cell.gigya-tfa-off{
    float: none;
}
#gigya-update-profile-screen .gigya-layout-cell.gigya-tfa-off a,
#gigya-update-profile-screen .gigya-layout-cell.gigya-tfa-off .gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-resend,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container #gigya-update-profile-screen .gigya-layout-cell.gigya-tfa-off .gig-tfa-phone-code-resend{
    float: none;
}
#gigya-update-profile-screen.portrait .gigya-myPhoto{
    width: 120px;
}
#gigya-update-profile-screen.portrait .second-cell > div{
    margin-left: 16px;
}
#gigya-update-profile-screen.portrait .first-row{
    height: 149px;
}
#gigya-update-profile-screen.portrait .first-row .gigya-myPhoto-profile-box-wrapper{
    margin-left: 0;
    margin-top: 0;
}
#gigya-update-profile-screen.portrait .first-row .gigya-myPhoto{
    padding-top: 23px;
}
#gigya-update-profile-screen.portrait .first-row .second-cell{
    width: calc(100% - 124px);
    vertical-align: top;
    line-height: 17px;
}
#gigya-update-profile-screen.portrait .first-row .last-name-row{
    margin-top: 13px;
}
#gigya-update-profile-screen.portrait.mobile .first-row{
    height: 132px;
    margin-top: -2px;
}
#gigya-update-profile-screen.portrait.mobile .first-row .gigya-myPhoto{
    padding-top: 21px;
    width: 106px;
}
#gigya-update-profile-screen.portrait.mobile .first-row .second-cell{
    margin-left: 10px;
    width: calc(100% - 120px);
    line-height: 15px;
}
#gigya-update-profile-screen.portrait.mobile .first-row .first-name-row,
#gigya-update-profile-screen.portrait.mobile .first-row .last-name-row{
    margin-left: 10px;
}
#gigya-update-profile-screen.portrait.mobile .first-row .last-name-row{
    margin-top: 15px;
}
#gigya-update-profile-screen .gigya-screen-dialog-mobile #gigya-change-password-screen.gigya-screen.portrait .link-cell{
    margin-left: 44%;
}
#gigya-link-account-screen .submit-cell{
    width: 100%;
}
#gigya-link-account-screen .main-Header{
    margin-bottom: 10px;
}
#gigya-link-account-screen .gigya-container .gigya-layout-cell{
    max-width: none;
}
#gigya-link-account-screen .footer .first-cell,
#gigya-link-account-screen .second-cell{
    min-width: 0;
}
#gigya-link-account-screen .footer .second-cell{
    float: right;
}
#gigya-link-account-screen .password-title,
#gigya-link-account-screen .sub-title-text{
    text-align: center;
}
#gigya-link-account-screen.portrait .main-Header .title{
    text-align: center;
}
#gigya-link-account-screen.portrait .footer .first-cell{
    float: left;
}
#gigya-link-account-screen.portrait.mobile .button-row label,
#gigya-link-account-screen.portrait.mobile .gigya-composite-control-textbox,
#gigya-link-account-screen.portrait.mobile .password-container,
#gigya-link-account-screen.portrait.mobile .first-cell > .gig-tfa-phone-code-resend{
    padding-left: 0;
    padding-right: 0;
}
#gigya-link-account-screen.portrait.mobile .main-Header{
    width: 84%;
}
/* only on deviceType:'mobile' */
.gigya-screen-dialog-mobile #gigya-link-account-screen.gigya-screen.portrait .submit-cell > div{
    padding-left: 0;
    padding-right: 0;
}
#gigya-reauthentication-screen .gigya-composite-control.gigya-composite-control-label.main-text.inlined,
#gigya-reauthentication-screen .gigya-screen.portrait div.gigya-tfa .gig-tfa-container .inlined.gig-tfa-phone-header-text,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container #gigya-reauthentication-screen .inlined.gig-tfa-phone-header-text{
    letter-spacing: 0.1px;
    display: block;
}
#gigya-reauthentication-screen .social-title,
#gigya-reauthentication-screen .site-container-title{
    text-align: center;
}
#gigya-reauthentication-screen .forgot-password-cell{
    float: none;
    min-width: initial;
    max-width: none;
    margin: 0 auto;
}
#gigya-reauthentication-screen .forgot-password-cell > a, #gigya-reauthentication-screen .gigya-screen.portrait div.gigya-tfa .gig-tfa-container .forgot-password-cell > .gig-tfa-phone-code-resend, .gigya-screen.portrait div.gigya-tfa .gig-tfa-container #gigya-reauthentication-screen .forgot-password-cell > .gig-tfa-phone-code-resend{
    display: inline;
}
#gigya-reauthentication-screen .social-container-text{
    text-align: center;
}
#gigya-reauthentication-screen .social-sub-title{
    padding-bottom: 26px;
}
#gigya-reauthentication-screen.portrait .main-header{
    width: 98%;
}
#gigya-reauthentication-screen.portrait.mobile .main-header{
    width: 60%;
}
/* mac os fixes */
.gigya-mac .gigya-screen label.letter-spacing-s{
    letter-spacing: -0.3px;
}
/* ios fixes */
.gigya-ios .gigya-screen.landscape input[type=checkbox],
.gigya-ios .gigya-screen.landscape .gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-remember-checkbox,
.gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gigya-ios .gigya-screen.landscape .gig-tfa-phone-code-remember-checkbox, .gigya-ios .gigya-screen.portrait input[type=checkbox],
.gigya-ios .gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-remember-checkbox,
.gigya-ios .gigya-screen.portrait.mobile input[type=checkbox],
.gigya-ios .gigya-screen.portrait.mobile div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-remember-checkbox{
    margin-bottom: 5px;
}
.gigya-ios .gigya-screen#gigya-change-password-screen form label:nth-child(1){
    letter-spacing: -0.1px;
}
.gigya-ios .gigya-screen#gigya-forgot-password-screen form label:nth-child(1){
    letter-spacing: -0.3px;
}
/* android */
.gigya-native-mobile-app.gigya-android .gigya-screen.portrait.mobile .gigya-composite-control.gigya-composite-control-social-login{
    right: 28px;
}
/* firefox fixes */
/* edge browser fixes */
.gigya-edge .gigya-screen label.letter-spacing-s{
    letter-spacing: -0.3px;
}
/* ie10 fixes */
.gigya-ie10 .gigya-screen.portrait label{
    letter-spacing: -0.3px;
}
.gigya-ie10 .gigya-screen.mobile label{
    letter-spacing: 0px;
}
.gigya-ie10 .gigya-screen #gigya-change-password-screen.portrait .gigya-message{
    letter-spacing: -0.2px;
}
.gigya-ie10 .gigya-screen #gigya-change-password-screen.mobile{
    letter-spacing: 0px;
}
/* ie9 fixes */
.gigya-ie9 .gigya-screen#gigya-login-screen.landscape .gigya-layout-row.with-divider .gigya-layout-cell.with-divider{
    height: 202px;
}
.gigya-ie9 .gigya-screen#gigya-register-screen.landscape .gigya-layout-row.with-divider .gigya-layout-cell.with-divider{
    height: 300px;
}
.gigya-ie9 .gigya-screen select{
    font-size: 13px;
}
/* ie8 fixes */
.gigya-ie8 .gigya-screen .gigya-layout-cell{
    margin-left: 0px !important;
}
.gigya-ie8 .gigya-screen .gigya-layout-cell.under-site-login{
    margin-left: 460px !important;
}
.gigya-ie8 .gigya-screen .gigya-input-text,
.gigya-ie8 .gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-textbox,
.gigya-ie8 .gigya-screen .gigya-input-password{
    padding-top: 11px;
}
.gigya-ie8 .gigya-screen.portrait .gigya-layout-row.with-divider .gigya-layout-cell.with-divider .gigya-divider-content{
    top: 31px;
    left: 45%;
}
.gigya-ie8 .gigya-screen.portrait .gigya-input-text,
.gigya-ie8 .gigya-screen.portrait div.gigya-tfa .gig-tfa-container .gig-tfa-phone-code-textbox,
.gigya-ie8 .gigya-screen.portrait .gigya-input-password{
    padding-top: 11px;
}
.gigya-ie8 .gigya-screen.portrait gigya-layout-cell{
    margin-left: 0 !important;
}
.gigya-ie8 .gigya-screen.portrait #gigya-change-password-screen.portrait .gigya-message{
    letter-spacing: -0.2px;
}
.gigya-ie8 .gigya-screen.portrait #gigya-change-password-screen.mobile{
    letter-spacing: 0px;
}
.gigya-ie8 .gigya-screen.portrait #gigya-forgot-password-screen.portrait label{
    letter-spacing: -0.3px;
}
.gigya-ie8 .gigya-screen.portrait #gigya-forgot-password-screen.mobile label{
    letter-spacing: 0px;
}
.gigya-ie8 .gigya-screen#gigya-login-screen.landscape .gigya-layout-row.with-divider .gigya-layout-cell.with-divider{
    height: 202px;
}
.gigya-ie8 .gigya-screen#gigya-register-screen.landscape .gigya-layout-row.with-divider .gigya-layout-cell.with-divider{
    height: 300px;
}
.gigya-ie8 .gigya-screen#gigya-update-profile-screen.portrait .second-cell{
    width: 239px;
}
.gigya-ie8 .gigya-screen#gigya-update-profile-screen.portrait.mobile .second-cell{
    width: 57%;
}
</style>
<div id="runningCodeExample" style="border: 1px solid skyblue; padding: 15px; width: 400px; display: block; height: auto;">
<script>
		{
			enabledProviders: 'facebook,twitter,googleplus,linkedin,yahoo,microsoft,aol,foursquare,vkontakte,renren,QQ,Sina'
		}
        // This method is activated when the page is loaded
        function onLoad() {
            // register for login event
            gigya.socialize.addEventHandlers({
					context: { str: 'congrats on your' }
					, onLogin: onLoginHandler 
					, onLogout: onLogoutHandler
					});
        }
        // onLogin Event handler
        function onLoginHandler(eventObj) {	
            alert(eventObj.context.str + ' ' + eventObj.eventName + ' to ' + eventObj.provider 
				+ '!\n' + eventObj.provider + ' user ID: ' +  eventObj.user.identities[eventObj.provider].providerUID);
            // verify the signature ...
            verifyTheSignature(eventObj.UID, eventObj.timestamp, eventObj.signature);
            // Check whether the user is new by searching if eventObj.UID exists in your database
            var newUser = true; // lets assume the user is new
            
            if (newUser) {
                // 1. Register user 
                // 2. Store new user in DB
                // 3. link site account to social network identity
                //   3.1 first construct the linkAccounts parameters
                var dateStr = Math.round(new Date().getTime()/1000.0); // Current time in Unix format
																	//(i.e. the number of seconds since Jan. 1st 1970)
				
                var siteUID = 'uTtCGqDTEtcZMGL08w'; // siteUID should be taken from the new user record
                                                   // you have stored in your DB in the previous step
                var yourSig = createSignature(siteUID, dateStr);
                var params = {
                    siteUID: siteUID, 
                    timestamp:dateStr,
					cid:'',
                    signature:yourSig
                };
                
                //   3.1 call linkAccounts method:
                gigya.socialize.notifyRegistration(params);
            }
			
			document.getElementById('status').style.color = "green";
			document.getElementById('status').innerHTML = "Status: You are now signed in";
        }
        // Note: the actual signature calculation implementation should be on server side
        function createSignature(UID, timestamp) {
			encodedUID = encodeURIComponent(UID); // encode the UID parameter before sending it to the server.
												// On server side use decodeURIComponent() function to decode an encoded UID
            return '';
        }
		
        // Note: the actual signature calculation implementation should be on server side
        function verifyTheSignature(UID, timestamp, signature) {
			encodedUID = encodeURIComponent(UID); // encode the UID parameter before sending it to the server.
												// On server side use decodeURIComponent() function to decode an encoded UID
            alert('Your UID: ' + UID + '\n timestamp: ' + timestamp + '\n signature: ' + signature + '\n Your UID encoded: ' + encodedUID);
        }
        
        // Logout from Gigya platform. This method is activated when "Logout" button is clicked 
		function logoutFromGS() {
            gigya.socialize.logout(); // logout from Gigya platform
        }
		
		// onLogout Event handler
        function onLogoutHandler(eventObj) {
			document.getElementById('status').style.color = "red";
			document.getElementById('status').innerHTML = "Status: You are now signed out";
		}
        onLoad();
    </script>

	<br />
	<h4>Please sign in using one of the following providers:</h4><br /><br />
	<div id="loginDiv"></div>
	<script type="text/javascript">
	    gigya.socialize.showLoginUI({ 
			height: 100
	        ,width: 330
			,showTermsLink:false // remove 'Terms' link
			,hideGigyaLink:true // remove 'Gigya' link
			,buttonsStyle: 'fullLogo' // Change the default buttons design to "Full Logos" design
			,showWhatsThis: true // Pop-up a hint describing the Login Plugin, when the user rolls over the Gigya link.
	        ,containerID: 'loginDiv' // The component will embed itself inside the loginDiv Div 
			,cid:''
			});
	</script>
    <br />
    <br /><br /><br />
	<h4>Click the button below to sign out from Gigya platform:</h4><br /><br />
    <input id="btnLogout" type="button" value="Sign Out" 
            onclick="logoutFromGS()"/>
    <br />
    <br />
    <div id="status"></div>
</div>

 

Read More

Developer Guide

API Reference

Check Out the Code

The code of this example implements the framework* of the algorithm that is described in the Social Login Implementation section of the Developer's Guide.

* The missing parts in the implementation are the parts that require interaction with your site's server and database.

<html>
<head>
	<SCRIPT type="text/javascript" lang="javascript" 
		src="https://cdns.gigya.com/js/gigya.js?apikey=3_mK2cmEzLkzhqe4MUrtPncxbv4wKsYAhsew0iVwhVUls3c_Jx_HLX434jAVpq5M_W">
	</SCRIPT>
</head>
<body>
<div id="runningCodeExample" style="border: 1px solid skyblue; padding: 15px; width: 400px; display: block; height: auto;">
<script>
		{
			enabledProviders: 'facebook,twitter,googleplus,linkedin,yahoo,microsoft,myspace,aol,foursquare,vkontakte,renren,QQ,Sina,kaixin'
		}
        // This method is activated when the page is loaded
        function onLoad() {
            // register for login event
            gigya.socialize.addEventHandlers({
					context: { str: 'congrats on your' }
					, onLogin: onLoginHandler 
					, onLogout: onLogoutHandler
					});
        }
        // onLogin Event handler
        function onLoginHandler(eventObj) {	
            alert(eventObj.context.str + ' ' + eventObj.eventName + ' to ' + eventObj.provider 
				+ '!\n' + eventObj.provider + ' user ID: ' +  eventObj.user.identities[eventObj.provider].providerUID);
            // verify the signature ...
            verifyTheSignature(eventObj.UID, eventObj.timestamp, eventObj.signature);
            // Check whether the user is new by searching if eventObj.UID exists in your database
            var newUser = true; // lets assume the user is new
            
            if (newUser) {
                // 1. Register user 
                // 2. Store new user in DB
                // 3. link site account to social network identity
                //   3.1 first construct the linkAccounts parameters
                var dateStr = Math.round(new Date().getTime()/1000.0); // Current time in Unix format
																	//(i.e. the number of seconds since Jan. 1st 1970)
				
                var siteUID = 'uTtCGqDTEtcZMGL08w'; // siteUID should be taken from the new user record
                                                   // you have stored in your DB in the previous step
                var yourSig = createSignature(siteUID, dateStr);
                var params = {
                    siteUID: siteUID, 
                    timestamp:dateStr,
					cid:'',
                    signature:yourSig
                };
                
                //   3.1 call linkAccounts method:
                gigya.socialize.notifyRegistration(params);
            }
			
			document.getElementById('status').style.color = "green";
			document.getElementById('status').innerHTML = "Status: You are now signed in";
        }
        // Note: the actual signature calculation implementation should be on server side
        function createSignature(UID, timestamp) {
			encodedUID = encodeURIComponent(UID); // encode the UID parameter before sending it to the server.
												// On server side use decodeURIComponent() function to decode an encoded UID
            return '';
        }
		
        // Note: the actual signature calculation implementation should be on server side
        function verifyTheSignature(UID, timestamp, signature) {
			encodedUID = encodeURIComponent(UID); // encode the UID parameter before sending it to the server.
												// On server side use decodeURIComponent() function to decode an encoded UID
            alert('Your UID: ' + UID + '\n timestamp: ' + timestamp + '\n signature: ' + signature + '\n Your UID encoded: ' + encodedUID);
        }
        
        // Logout from Gigya platform. This method is activated when "Logout" button is clicked 
		function logoutFromGS() {
            gigya.socialize.logout(); // logout from Gigya platform
        }
		
		// onLogout Event handler
        function onLogoutHandler(eventObj) {
			document.getElementById('status').style.color = "red";
			document.getElementById('status').innerHTML = "Status: You are now signed out";
		}
        onLoad();
    </script>

	<br />
	<h4>Please sign in using one of the following providers:</h4><br /><br />
	<div id="loginDiv"></div>
	<script type="text/javascript">
	    gigya.socialize.showLoginUI({ 
			height: 100
	        ,width: 330
			,showTermsLink:false // remove 'Terms' link
			,buttonsStyle: 'fullLogo' // Change the default buttons design to "Full Logos" design
			,showWhatsThis: true // Pop-up a hint describing the Login Plugin, when the user rolls over the Gigya link.
	        ,containerID: 'loginDiv' // The component will embed itself inside the loginDiv Div 
			,cid:''
			});
	</script>
    <br />
    <br /><br /><br />
	<h4>Click the button below to sign out from Gigya platform:</h4><br /><br />
    <input id="btnLogout" type="button" value="Sign Out" 
            onclick="logoutFromGS()"/>
    <br />
    <br />
    <div id="status"></div>
</div>
</body>
</html>