/** User Profile
*************************************************** **/

%resetBtn{
	box-shadow: none;
	background-color: $m-color-light;
	border: none;
	border-radius: 0;
}
%card-style{
	border-radius: 0;
	@include add-border(3px, $m-color-light, all);
	box-shadow: none;
	margin-bottom: 30px;
	.card-heading{
		background-color: $m-color-light;
		border-color: $m-color-light;
		border-radius: 0;
		.card-title{
			font-size: 15px;
			margin-bottom: 0;
			font-weight: 700; 
			text-transform: capitalize;
			color: #252525;
		}
	}
	.card-body{
		address{
			font-size: 13px;
			line-height: 30px;
			margin-bottom: 0;
			strong{
				font-size: 15px;
				font-weight: 400;
			}
			span{
				font-size: 15px;
			}
			a{
				font-size: 15px;
				color: $m-color-secondary;
				@include transition(all 0.3s ease-in-out);
				&:hover{
					opacity: .8;
				}
			}
			p{
				line-height: 24px;
				margin-bottom: 0;
				color: $m-color-secondary;
			}
		}
	}
}
.userProfile{
	.btn-group{
		margin-bottom: 30px;
		display: block;
		a{
			float: none;
			height: 45px;
			padding: 0 20px;
			line-height: 45px;
			color: $m-color-secondary;
			
			font-weight: 700;
			@extend %resetBtn;
			@include transition(all 0.3s ease-in-out);
			@include mobile-xs{
				font-size: 10px;
				padding: 0 10px;
				margin: 0 5px 5px 0;
			}
			@include mobile{
				font-size: 10px;
				padding: 0 10px;
				margin: 0 5px 5px 0;
			}
			@include tablet{
				font-size: 11px;
				padding: 0 20px;
				margin: 0 5px 0 0;
			}
			@include desktops{
				font-size: 14px;
			}
			i{
				margin-right: 10px;
			} 
			&:hover, &.active{
				background-color: $m-color-primary;
				color: $m-color-white;
			}
		}
	}
	.innerWrapper{
		width: 100%;
		display: block;
		@include add-border(5px, $m-color-light, all);
		padding: 30px 30px 0 30px;
		@include mobile{
			margin-bottom: 90px;
		}
		@include tablet{
			margin-bottom: 30px;
		}
		.alert{
			border: none;
			border-radius: 0;
		}
		h3{
			font-weight: 400;
			text-transform: capitalize;
			margin-bottom: 15px;
			span{
				color: $m-color-primary;
			}
		}
		p{
			font-size: 14px;
			color: #888888;
			line-height: 22px;
			margin-bottom: 40px+5px; 
		}
		.list-inline{
			display: block;
			margin-bottom: 50px;
			li{
				@include mobile-xs{
					padding: 0;
					display: block;
					margin-bottom: 10px;
				}
				@include mobile{
					padding: 0;
					display: block;
					margin-bottom: 10px;
				}
				@include tablet{
					padding: 0 10px 0 0;
					display: inline-block;
					margin: 0
				}
				@include desktops{
					padding: 0 10px 0 0;
				}
				.btn-lg{
					color: $text-slider-title;
					font-weight: 700;  
					@extend %resetBtn;
					@include transition(all 0.3s ease-in-out);
					@include mobile-xs{
						width: 100%;
						padding: 47px 0;
						font-size: 16px;
					}
					@include mobile{
						width: 100%;
						padding: 47px 0;
						font-size: 16px;
					}
					@include tablet{
						width: 120px;
						padding: 31px 0;
						font-size: 14px;
					}
					@include desktops{
						width: 156px;
						padding: 47px 0;
						font-size: 16px;
					}
					@include large-desktops{
						width: 196px;
						padding: 67px 0;
						font-size: 18px;
					}
					i{
						display: block;
						margin-bottom: 20px;
					}
					&:hover{
						background-color: $m-color-primary;
						color: $m-color-white;
					}
				}
				&:last-child{
					padding: 0;
				}
			}
		}
		.card{
			@extend %card-style;
		}
		&.singleOrder{
			.orderBox{
				margin-bottom: 0;
			}
			.btn-group{
				margin-bottom: 30px;
				float: left;
				.btn-default{
					border-radius: 0;
					border: none;
					background-color: $m-color-primary;
					padding: 0 20px;
					color: $m-color-white;
					font-size: 12px;
					font-weight: 700;
					text-transform: uppercase;
					height: 40px;
					line-height: 40px;
					@include transition(all 0.3s ease-in-out);
					&:hover{
						opacity: .8;
					}
					@include mobile-xs{
						display: block;
						width: 100%;
						margin: 0 0 15px 0;
					}
					@include mobile{
						display: inline-block;
						width: auto;
						margin-right: 5px;
					}
				}
			}
		}
	}
}
.orderBox{
	display: block;
	margin-bottom: 50px;
	h4{
		font-weight: 400;
		text-transform: capitalize;
		font-size: 20px;
	}
	.table-responsive{
		margin-bottom: 0;
		@include mobile{
			overflow-x: auto;
		}
		@include tablet{
			overflow-x: visible;
		}
		.table{
			margin-bottom: 0;
			thead{
				tr{
					@include add-border(3px, $m-color-primary, right-left);
					th{
						@extend %tableHead;
						@include mobile-xs{
							padding: 10px;
							text-align: center;
							font-size: 12px;
						}
						@include mobile{
							padding: 10px;
							text-align: center;
							font-size: 12px;
						}
						@include tablet{
							padding: 10px 10px 10px 20px;
							text-align: left;
							font-size: 15px;
						}
					}
				}
			}
			tbody{
				tr{
					@include add-border(3px, $m-color-light, right-left);
					td{
						@extend %tableData;
						padding-left: 20px;
						font-weight: 400;
						.btn-default{
							box-shadow: none;
							border-radius: 0;
							@include add-border(1px, $border-gray, all);
							padding: 15px 20px;
							display: inline-block;
							font-size: 12px;
							font-weight: 700;
							color: $m-color-secondary;
							@include transition(all 0.3s ease-in-out);
							text-transform: uppercase;
							&:hover{
								background-color: $m-color-primary;
								color: $m-color-white;
								border-color: $m-color-primary;
							}
						}
						&:last-child{
							text-align: center;
							padding-left: 10px;
						}
						&:first-child{
							color: $m-color-primary;
							.fa{
								color: $m-color-secondary !important;
							}
						}
						.label{
							border-radius: 0;
							font-size: 12px;
						}
					}
				}
			}
		}
	}
	&.myAddress{
		margin-bottom: 10px;
		.table-responsive{
			.table{
				tbody{
					tr{
						border: none;
						td{
							&:first-child{
								color: $m-color-secondary;
							}
							.btn-default{
								padding: 10px 14px;
								border: none;
							}
							.close{
								@extend %closeBtn;
							}
						}
						&:last-child{
							td{
								border: none;
							}	
						}
					}
				}
			}
		}
		&.wishList{
			.table-responsive{
				.table{
					thead{
						tr{
							th{
								&:first-child{
									@include mobile-xs{
										display: none;
									}
									@include mobile{
										display: none;
									}
									@include tablet{
										display: table-cell;
									}
								}
							}
						}
					}
					tbody{
						tr{
							td{
								&:nth-child(4){
									color: $m-color-primary;
								}
								.btn-default{
									@include add-border(1px, $border-gray, all);
									padding: 15px 20px;
								}
								&:first-child{
									@include mobile-xs{
										display: none;
									}
									@include mobile{
										display: none;
									}
									@include tablet{
										display: table-cell;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

%commonBtn{
	height: 45px;
	font-weight: 700;
	color: $m-color-white;
	font-size: 15px;
	border-radius: 0;
	background-color: $m-color-primary;
	border: none;
	@include transition(all 0.3s ease-in-out);
	&:hover{
		opacity: .8;
	}
}
.profile{
	.orderBox{
		margin-bottom: 30px;
	}
}

%tableHead{
	background-color: $m-color-primary;
	padding: 0;
	height: 55px;
	vertical-align: middle;
	text-align: left;
	font-size: 15px;
	color: $m-color-white;
	padding-left: 20px;
	@include add-border(1px, rgba(255,255,255,0.2), right);
	border-bottom: none;
}
%tableData{
	vertical-align: middle;
	text-transform: uppercase;
	font-weight: 700;
	@include add-border(3px, $m-color-light, bottom);
	border-top: none;
}
%closeBtn{
	display: inline-block;
	float: left;
	font-size: 35px;
	margin-right: 30px;
	color: $m-color-primary;
	opacity: 1;
	line-height: 74px;
	font-weight: normal;
	@include transition(all 0.3s ease-in-out);
	&:hover{
		opacity: .8;
	}
	@include tablet{
		margin-right: 5px;
	}
	@include desktops{
		margin-right: 30px;
	}
}