html {
    background-color: #ffffff;
}

#container_wrapper {
    background-color: #ffffff;
    padding: 0;
    height: 100%;
}

.content {
    box-sizing: border-box;
    position: relative;
    background-color: #fff;
    padding: 16px 26px 0px 26px;
    min-height: 500px;
    height: 100%;
}

.content.info-page {
    line-height: 32px;
    font-size: 20px;
}
.content.info-page a {
    line-height: 32px;
    font-size: 20px;
}

.content h1 {
    font-size: 20px;
    line-height: 22px;
    padding: 0;
    margin: 13px 0 30px 0;
    overflow:hidden;
}

.content .sprite-icon.adverts_a {
    fill: #ff8f1c;
    margin-top: -4px;
    height: 15px;
    width: 15px;
    margin-right: 5px;
}

.social_links {
    overflow: hidden;
    width: 100%;
    margin: 0 auto 0 auto;
    padding: 0 0 10px 0;
    list-style: none;
}

.social_links li {
    text-align: center;
}

/* Signup social buttons */
.social_links .form_row a {
    background-color: #ffffff;
    border-radius: 4px;
    box-sizing: border-box;
    color: #ea7d22;
    display: block;
    font-weight: bold;
    font-size: 14px;
    height: 50px;
    line-height: 46px;
    position: relative;
    width: 100%; 
}

.social_links a:active,
.social_links a:hover {
    background-color: #ea7d22; 
    color: #fff;
}
.social_links a.google {
    border-color: #4285F4;
    color: #4285F4;
}

.social_links a.google:active, 
.social_links a.google:hover {
    background-color: #4285F4;
    color: #ffffff;
}

.signup .social_links a.facebook {
    border: solid 2px #4990e2;
    border-color: #4990e2; 
    background-color: #ffffff;
    color: #4267b2;
}

.signup .social_links a.facebook:active, 
.signup .social_links a.facebook:hover {
    background-color: #4990e2; 
    color: #fff;
}

.social_links a.facebook:active, 
.social_links a.facebook:hover {
    border-color: #4990e2; 
    background-color: #ffffff;
    color: #4267b2;
}

.social_links a.facebook {
    border: solid 2px #4990e2;
    background-color: #4990e2; 
    color: #fff;
}


.social_links span {
    position: absolute;
    margin-left: 50%;
    top: 12px;
}

.login_text {
    box-sizing: border-box;
    border-bottom: 1px solid #eaeaea;
    height: 0px;
    line-height: 16px;
    margin: 7px 0px 25px;
    position: relative;
    text-align: center;
    width: 100%;
}
.login_text span {
    background: #ffffff;
    box-sizing: border-box;
    color: #4a4a4a;
    display: inline-block;
    font-size: 14px;
    padding: 0px 26px;
    position: relative; 
    top: -10px;
}
.login_text a {
    color:#122cdf;
    text-decoration:none;
}

.form_wrap {
    margin: 0 auto;
    padding: 0;
}

.content .form_row {
    margin: 0px 0px 13px;
    position: relative;
}

.form_row input, textarea {
    border-radius: 4px;
    background-color: #f9f9f9;
    border: solid 1px #d0d0d0;
    font-size: 14px;
    color: #4a4a4a;
    height: 43px;
    width: 100%;
}
.form_row input.short_input {
    display: inline-block;
    width: 75%;
    min-width: 168px;
}

.form_row .info {
    display: inline;
    margin: 0px 0px 0px 16px;
    cursor: pointer;
    top: 10px;
    position: absolute;
}

.form_row input[type=file] {
    width: 100%;
    margin-top: 10px;
}

.form_row input[type=radio] {
    width: 20px;
}

.login_bor .form_row select {
    width: 100%;
}

.form_row #how-hear-from {
    width: 100%;
    margin-top: 10px;
}

.form_row .checkbox input {
    width: auto;
    margin: 0 4px 0 0;
    padding: 0;
}

.submit_button_row {
    margin-top: 17px;
}

.form_row .submit.rounded_button:disabled {
    border: 1px solid #f309a2;
    color: #f309a2;
    background: white;
    opacity: 0.35; 
}
    
/*
 * Icons
 */

.sprite-icon.facebook_f {
    margin: -4px 4px 0px -0px;
}
.signup .sprite-icon.facebook_f,
.facebook:hover .sprite-icon.facebook_f {
    background-color: #fff;
    fill: #4990e2;
    stroke: #ffffff;
}

.signup .facebook:hover .sprite-icon.facebook_f,
.sprite-icon.facebook_f {
    background-color: #4990e2;
    fill: white;
    stroke: #4990e2;
}

/*
 * Floating labels
 */
.floating-label {
    position: absolute;
    pointer-events: none;
    color: #9b9b9b;
    left: 20px;
    top: 18px;
    font-size: 16px;
    transition: 0.2s ease all;
}

.floating-label.focused {
    top: 8px;
    bottom: 10px;
    left: 20px;
    font-size: 11px;
    opacity: 1;
}

.form_row .inputText {
    box-sizing: border-box;
    font-size: 14px;
    height: 50px;
    width: 100%;
    padding-left: 20px;
    padding-bottom: 0px;
    padding-right:20px;
}


#password.inputText {
    padding-right: 60px;
}
.form_row .inputText {
    padding-top: 18px;
}

.form_row .inputText:focus {
    outline: 0;
    border-color: #4a4a4a;
}

.form_row .toggle-password {
    position: absolute;
    display: block;
    padding: 4px;
    right: 20px;
    top: 13px;
    font-size: 14px;
    color: #9b9b9b;
    z-index: 12;
}


/*
 * Hide placeholders
 */
.form_row ::-webkit-input-placeholder { /* WebKit browsers */
    color: transparent;
}
.form_row :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: transparent;
}
.form_row ::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: transparent;
}
.form_row :-ms-input-placeholder { /* Internet Explorer 10+ */
   color: transparent;
}

.form_row textarea::-webkit-input-placeholder { /* WebKit browsers */
    color: transparent;
}
.form_row textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: transparent;
}
.form_row textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: transparent;
}
.form_row textarea:-ms-input-placeholder { /* Internet Explorer 10+ */
   color: transparent;
}

/* Hide sign up text */
.content.regular #sign-up-text {
    display: none;
}

/*
 * Error handling
 */
.error {
    color: #d62c2d;
    font-size: 14px;
    width: 100%;
    display: block;
}

input.error,
.username_select .form_row input.error,
textarea.error {
    border-color: #d62c2d;
    color: #e98f91;
}

.checkbox label, 
.content a.forgot-password-link {
    font-weight: normal;
    color: #9b9b9b;
    font-size: 14px;
}

.forgot-password-link {
    margin: 20px 0px;
}

#errors {
    list-style: none;
    margin: 0;
    padding: 0px 0px 12px;
}
#errors li {
    color: #fb7878; 
    font-size: 14px;
    line-height: 16px;
}


/*
 * Other elements
 */
.content #x-button {
    box-sizing: border-box;
    position: relative;
    float: right;
    color: #9b9b9b;
    padding: 4px;
    top: 14px;
    line-height: 16px !important;
    font-size: 20px !important;
    right: -4px;
}
.forgot-password-link:active {
    text-decoration: underline;
}

.form_row a {
    color: #4990e2;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
}

a#login-link {
    display: block;
    margin-top: 23px;
}

/*
 * Signup
 */
.signup .terms_and_conditions {
    width: 100%;
    font-size: 10px;
    line-height: 14px;
    padding: 7px 0px 38px;
    vertical-align: bottom;
}

.signup .terms_and_conditions a {
    font-size: 10px;
}

/*
 * Login service page
 */
.connected_as {
    width: 230px;
    margin: 20px auto 18px;
    padding: 8px 8px 8px 33px;
    background: #e2e6ed url(../../i/icons/facebook-logo.png) 8px 8px no-repeat;
    color: #24468b;
    font-size: 13px;
    line-height: 22px;
    clear: both;
}
.connected_as img {
    vertical-align:middle;
    margin:0 0 4px 0;
}
.username_select {
    width:270px;
    margin:0 auto;
    overflow:hidden;
}
.username_select img {
    float:left;
    border:1px solid #dedede;
}
.username_select .form_row {
    width: 200px;
    float: right;
}
.username_select .form_row input {
    background-color: #f6f6f6;
    border: 1px solid #DDD;
    width: 100%;
    margin: 0 0 20px 0;
    padding: 9px;
    font-size: 13px;
    color: #000;
}
.username_select .form_row label {
    display: block;
    color: #000;
    font-weight: bold;
    margin: 0 0 8px;
}
.username_select .button {
    clear:both;
}


.content .primary.rounded_button {
    box-sizing: border-box;
    height: 50px;
    font-weight: bold;
    font-size: 14px;
    max-height: 50px;
    min-height: 50px;
    line-height: 50px;
    padding: 0;
    border-radius: 4px;
    background-color: #f7f9fa;
    color: #f7f9fa;
    background-color: #f309a2;
    background-image: linear-gradient(281deg, #ff8f1c, #f309a2);
    border: none;

    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
}

.content .primary.rounded_button:active {
    outline: 0;
    background-color: #f309a2;
    color: #f309a2;
    line-height: 48px;
    background-color: #f7f9fa;
    background-image: linear-gradient(281deg, #f7f9fa, #f7f9fa);
    border: 2px solid #f309a2;
}

.content .secondary.rounded_button {
    box-sizing: border-box;
    color: #797979;
    font-weight: bold;
    font-size: 14px;
    height: 50px;
    max-height: 50px;
    min-height: 50px;
    line-height: 48px;
    padding: 0;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);
    border: solid 1px #9b9b9b;
}

.content .secondary.rounded_button:active {
    outline: 0;
    background-color: #797979;
    color: #ffffff;
    line-height: 48px;
    background-color: #9b9b9b;
    color: #f7f9fa;
    border: none;
}


/*
    @TODO: This may be something to generalise in the future
 */
.verification_success_page .centered_container {
    margin-left: auto;
    margin-right: auto;
    width: 216px;
}
/* password reset page */
.signup_button .submit-button {
    margin-left: 7px;
    margin-top: 10px;
}

/* password reset page - show password */
.password-container {
    position: relative;
}
.password-container .eye {
    position: absolute;
    right: 10px;
    cursor: pointer;
}

.password-container .eye i {
    font-size: 20px;
    color: #333;
    transition: color 0.3s;
}

.password-container .eye.open i {
    color: #666;
}