/********** signUpPage *****************/
#signUpPage #content {
	max-width: 100%;
}
#signUpPage .smartForm {
	max-width: 700px;
}
#signUpPage .smartBtn {
	background-color: var(--secondary-color);
	color: var(--text-secondary-color);
}
#signUpPage.localismartPage .smartBtn {
	background-color: var(--app-secondary-color);
	color: var(--app-text-secondary-color);
}
#signUpPage .oAuthDiv {
	margin: 20px auto;
	text-align: center;
}
#signUpPage .oAuthDiv .imgDiv {
	background-image: url('/img/asset/user.jpg');
	background-size: cover;
	background-repeat: no-repeat;
    width: 100px;
    height: 100px;
    margin: 20px auto;
    border-radius: 50%;
    border: 2px solid var(--app-first-color);
}
#signUpPage .oAuthDiv .fullname {
	font-weight: bold;
}
#signUpPage .oAuthDiv .provider {
    color: var(--dark-gray-color);
    font-size: 12px;
    font-style: italic;
}
/********** accountPage *****************/
#accountPage .page__background {
	background-color: #f7f7f7;
}
#accountPage .account {
	padding: 20px;
	text-align: center;
	background-color: var(--navbar-color);
	color: var(--text-navbar-color);
}
#accountPage .account .image {
	padding: 10px;
}
#accountPage .account .image .icon {	
	font-size: 40px;
}
#accountPage .account .name {
	font-size: 14px;
}
#accountPage .account .email {
	font-size: 12px;
	color: #999;
}
#accountPage .account #loginBtn {
	max-width: 200px;
}
#accountPage .list-group {
	display: block;
    max-width: 600px;
    margin: 0 auto;
}
#accountPage .list-group-item {
	width: auto;
	height: auto;
	padding: 20px;
	font-size: 14px;
	background-color: transparent;
    color: var(--black-color);
	margin: 0;
}
#accountPage .list-group-item:hover {
	cursor: pointer;
}
#accountPage .list-group-item .icon {
	font-size: 24px;
	line-height: 30px;
	min-width: 40px;
	height: auto;
}	
#accountPage .list-group-item:last-child .icon {
	color: var(--danger);
}	
#accountPage .list-group-item .text {
	margin-top: -6px;
}
#accountPage .list-group-item .title {
	font-style: normal;
	font-size: 14px;
	line-height: 25px;
}
#accountPage .list-group-item:last-child .title {
	color: var(--danger);
}
#accountPage .list-group-item .subtitle {
	font-size: 12px;
	line-height: 15px;
	color: #999;
}
/********** loginPage *****************/
#loginPage #content {
	padding: 0;
	max-width: 100%;
}
#loginPage .smartBtn {
	background-color: var(--secondary-color);
	color: var(--text-secondary-color);
	max-width: 250px;
}
#loginPage .loginDiv,
#loginPage .forgotPasswordDiv,
#loginPage .signUpBtnDiv {
	max-width: 700px;
	margin: 20px auto;
}
#loginPage #forgotPasswordLink {
	color: var(--app-text-secondary-color);
	text-decoration: underline;
}
#loginPage #forgotPasswordAlert {
	display: none;
	margin: 20px auto;
}
#loginPage .title {
	text-align: center;
	font-weight: bold;
}
#loginPage .smartForm {
	max-width: 500px;
}
#loginPage .divider {
	margin: 10px auto;
}
#loginPage .divider .line {
    border-bottom: 1px solid var(--dark-gray-color);
}
#loginPage .divider .text {
    background-color: #FFF;
    color: var(--dark-gray-color);
    width: 80px;
    margin: -11px auto 0 auto;
    text-align: center;
}
/********** editAccountPage *****************/

/********** editAccountPage *****************/
#editAccountPage #content {
	max-width: 100%;
}
#editAccountPage .smartForm {
	max-width: 700px;
}
#editAccountPage input[type=date] {
	min-height: 46px;
}
/********** editPasswordPage *****************/
#editPasswordPage #content {
	max-width: 100%;
}
#editPasswordPage .smartForm {
	max-width: 700px;
}
/********** deliveryAddressesPage *****************/
#deliveryAddressesPage .list-group {
	display: block;
    max-width: 600px;
    margin: 0 auto;
}
#deliveryAddressesPage .emptyContent {
	margin: 20px auto;
	text-align: center;
	color: var(--dark-gray-color);
}
#deliveryAddressesPage .deliveryAddress:last-child {
    border-bottom: none;
}
#deliveryAddressesPage .deliveryAddress .description {
    font-weight: normal;
}
#deliveryAddressesPage .deliveryAddress .deleteBtn {
    min-width: auto;
    box-shadow: none;
    background-color: transparent;
    border-radius: 50%;
}
#deliveryAddressesPage .deliveryAddress .deleteBtn svg {
	fill: var(--dark-gray-color);
	width: 20px;
	height: 20px;
}
/********** paymentMethodsPage *****************/
#paymentMethodsPage .list-group {
	display: block;
    max-width: 600px;
    margin: 0 auto;
}
#paymentMethodsPage .emptyContent {
	margin: 20px auto;
	text-align: center;
	color: var(--dark-gray-color);
}
#paymentMethodsPage .paymentMethod:last-child {
    border-bottom: none;
}
#paymentMethodsPage .paymentMethod .description {
    font-weight: normal;
}
#paymentMethodsPage .paymentMethod .deleteBtn {
    min-width: auto;
    box-shadow: none;
    background-color: transparent;
    border-radius: 50%;
}
#paymentMethodsPage .paymentMethod .deleteBtn svg {
	fill: var(--dark-gray-color);
	width: 20px;
	height: 20px;
}
/********** deleteAccountPage *****************/
#deleteAccountPage #content {
	max-width: 100%;
}
#deleteAccountPage .smartForm {
	max-width: 700px;
}
#deleteAccountPage #deleteMsg {
    font-size: 20px;
    line-height: 30px;
}
#deleteAccountPage #deleteBtn {
	background-color: var(--danger);
	color: #FFF;
}
/********** forgotPasswordPage *****************/
#forgotPasswordPage #content {
	max-width: 100%;
}
#forgotPasswordPage .smartForm {
	max-width: 500px;
}
#forgotPasswordPage #content .header {
	background-color: var(--first-color);
	text-align: center;
}
#forgotPasswordPage .smartBtn {
	background-color: var(--secondary-color);
	color: var(--text-secondary-color);
}
#forgotPasswordPage #content .header svg,
#forgotPasswordPage #content .header img {
    width: 160px;
    height: auto;
    margin: 20px auto;
	border-radius: 50%;
}
#forgotPasswordPage.localismartPage #content .header {
	background-color: var(--app-first-color);
}
#forgotPasswordPage.localismartPage .smartBtn {
	background-color: var(--app-secondary-color);
	color: var(--app-text-secondary-color);
}
/********** notificationsSettingsPage *****************/
#notificationsSettingsPage #notificationsSettingsForm img {
	margin: 30px auto;
    width: 150px;
    height: 150px;
    opacity: 0.7;
}
#notificationsSettingsPage #notificationsNotSupportedAlert,
#notificationsSettingsPage #notificationsNotGrantedAlert {
	background-color: var(--danger);
    color: #FFF;
	border-radius: 10px;
    padding: 20px;
	margin: 20px;
}