﻿
/********************************************************/
/*Login and Register Pages Style Sheets                 */
/********************************************************/

#loginFormSection {   
    position: relative;
    margin: 30px 10px;
    max-width: 500px;
    
}


.FacebookLoginButton {
    font-size: 1em!important;
    font-weight: bold !important;
    margin: 0px 10px 8px !important;   
    padding: 8px !important;   
    text-align: center !important;
    color: white !important;
    border: solid 1px #4568a0 !important;
    background: #f47c20 !important;
    background: -webkit-gradient(linear, left top, left bottom, from(#599bd7), to(#414d90)) !important;
    background: -moz-linear-gradient(top, #599bd7, #414d90) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#599bd7', endColorstr='#414d90') !important;
}
.FacebookLoginButton:hover {
	color: #faa51a !important;
    background: #f47c20 !important;
    border: solid 1px #2e456b !important;
	background: -webkit-gradient(linear, left top, left bottom, from(#4f87ba), to(#406c95)) !important;
	background: -moz-linear-gradient(top,  #4f87ba,  #406c95) !important;
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4f87ba', endColorstr='#406c95') !important;
}
.FacebookLoginButton:active {
	color: #fcd3a5 !important;
	background: -webkit-gradient(linear, left top, left bottom, from(#414d90), to(#599bd7)) !important;
	background: -moz-linear-gradient(top,  #414d90,  #599bd7) !important;
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#414d90', endColorstr='#599bd7') !important;
}

#LoginForm .ui-input-text,
#PasswordForm .ui-input-text {
    min-width: 59%;
}

#LoginForm label,
#PasswordForm label {
    min-width:41%;
    padding-right:12px;
}

/* Login form inputs - expand to fill available space */
#LoginForm input[type="text"],
#LoginForm input[type="password"],
#PasswordForm input[type="text"],
#PasswordForm input[type="password"] {
    flex: 1;
}


 /*          Registration Form
 -----------------------------------------------------*/

.registerForm label {
    width: 125px;
    padding-right: 8px;
    word-wrap: break-word;
}

/* Input fields in register form - flex to fill available space */
#registerForm .flexbox-with-wrap > input,
#registerForm .flexbox-with-wrap > select {
    flex: 1 1 auto;
    min-width: 120px;
    margin: 5px 6px 5px 0;
}

/* Password wrapper needs to flex like inputs */
#registerForm .password-input-wrapper,
.registerForm .password-input-wrapper {
    flex: 1 1 auto;
    min-width: 120px;
    margin: 5px 6px 5px 0;
    position: relative;
    display: flex;
}

/* Password input fills its wrapper */
#registerForm .password-input-wrapper input,
.registerForm .password-input-wrapper input {
    flex: 1;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
}

/* State dropdown - constrained width */
#registerForm #State,
.registerForm #State {
    flex: 0 0 auto;
    width: 160px;
    min-width: 160px;
    max-width: 160px;
}

/* Zip code - smaller fixed width */
#registerForm #Zip,
.registerForm #Zip {
    flex: 0 0 auto;
    width: 100px;
    min-width: 100px;
}

/* City - constrained width to fit with State and Zip */
#registerForm #City,
.registerForm #City {
    flex: 1 1 auto;
    max-width: 250px;
}

/* Username - expand to fill available space */
#registerForm #UserName,
.registerForm #UserName {
    flex: 1 1 auto;
}

/* International address fields - expand to full width */
#registerForm #InternationalCity,
#registerForm #InternationalState,
#registerForm #InternationalZip,
.registerForm #InternationalCity,
.registerForm #InternationalState,
.registerForm #InternationalZip {
    flex: 1 1 auto;
}

/* Country dropdown - expand to full width */
#registerForm #Country,
.registerForm #Country {
    flex: 1 1 auto;
}

#registerForm {
    position: relative;
    margin: 30px 0 !important;
    max-width: 680px;
}


/*----------------------------------------------------------------------------------*/
/*       User Account Screen
/*    
/*--------------------------------------------------------------------------------*/


#ChangePasswordAccordion .text-box {
    width: 100%!important;
}