aibishal

✏️ Editing: my-account-layout.scss

@import 'variables/variables';

#user-registration {
	&.vertical {
		display: flex;
		flex-wrap: wrap;

.user-registration-error, .user-registration-message {
			float: none;
			width: 100%;
		}

.user-registration-MyAccount-navigation {
			ul {
				flex-direction: column;
				flex-wrap: nowrap;

.user-registration-MyAccount-navigation-link {
					&.is-active {
						a {
							border-color: $primary_color;
						}
					}
				}
			}
		}

.user-registration-MyAccount-content {
			flex: 1;
		}
	}

&.horizontal,
	& {
		box-shadow: 0 2px 20px transparentize($gray-base, 0.9);

.user-registration-message,
		.user-registration-error,
		.user-registration-info {
			margin-bottom: 0;
		}

.user-registration-MyAccount-navigation {
			border-bottom: 1px solid $border_color;

ul {
				justify-content: center;

.user-registration-MyAccount-navigation-link {
					a {
						padding: 15px 20px;
						font-family: inherit;
						font-weight: 500;
					}

&.is-active {
						a {
							background-color: $color_gray_four;
						}
					}
				}
			}
		}

.user-registration-MyAccount-content,
		.ur-edit-profile {
			text-align: center;

.user-registration-profile-header {
				.user-registration-img-container {
					margin: 0 auto;
					margin-bottom: 15px;

img {
						width: 100px;
						height: 100px;
						object-fit: cover;
						border-radius: 50%;
						margin: 0 auto;
					}
				}
			}

.edit-profile,
			.edit-password {
				text-align: left;
			}

.edit-profile {
				.user-registration-profile-header,
				h2 {
					text-align: center;
				}
			}
		}
	}

// Privacy Tab Design Fixes

&.horizontal {
		.user-registration-MyAccount-content {
			// text-align: left;
		}
	}

.user-registration-MyAccount-content {
		@media (max-width: 991px) {
			padding: 36px 30px;
		}

> h2 {
			margin-bottom: $spacing_24px;
		}

.user-registration-profile-header {
			margin-bottom: $spacing_20px;
			gap: $spacing_16px;

header {
				h3 {
					margin-bottom: 0;
				}
			}
		}

> p {
			margin-bottom: $spacing_8px;

a {
				font-weight: 500;
				color: $primary_color;
			}
		}

.ur-frontend-form {
			padding: 0 !important;

&:has(.user-registration-PrivacyTab) {
				h2 {
					text-align: left;
				}
			}

.user-registration-EditProfileForm {
				.user-registration-profile-fields {
					h2 {
						text-align: center;
					}
				}
			}

.user-registration-EditAccountForm {
				.ur-form-grid {
					> p {
						float: right;
						margin-top: $spacing_24px;
						margin-bottom: 0;
					}
				}
			}

.user-registration-EditProfileForm {
				.user-registration-profile-fields {
					> p {
						float: right;
						margin-top: $spacing_24px;
						margin-bottom: 0;
					}
				}
			}

.user-registration-PrivacyTab {
				text-align: left;

.ur-form-grid {
					padding-left: 0;
					padding-right: 0;
				}

.ur-form-row {
					.user-registration-form-row {
						display: flex;
						flex-wrap: wrap;
						row-gap: $spacing_10px;
						// justify-content: flex-end;
						margin-bottom: 30px;

&:last-child {
							margin-bottom: 0;
						}

@media (max-width: 991px) {
							flex-direction: column;
							gap: 12px;
						}

.ur-privacy-field-label {
							width: 40%;
							max-width: 100%;

@media (max-width: 991px) {
								width: 100%;
							}

label {
								font-size: 15px;
								line-height: 150%;
								font-weight: 500;
								color: #383838;
								margin: 0;

.ur-portal-tooltip {
									&::after {
										color: #BABABA;
									}
								}
							}
						}

.ur-privacy-input {
							display: flex;
							align-items: center;
							gap: 12px;
							width: 60%;
							max-width: 100%;

@media (max-width: 991px) {
								width: 100%;
							}

&--radio-box {
								position: relative;
								display: block;

label {
									display: block;
									border-radius: 3px;
									padding: $spacing_8px $spacing_12px $spacing_8px $spacing_34px;
									border: 1px solid #999999;
									cursor: pointer;
									font-size: 14px;
									font-weight: 500;
									line-height: 150%;
									color: #6B6B6B;
									margin: 0;

&::before,
									&::after {
										content: "";
										position: absolute;
										left: 12px;
										top: 12px;
										width: 16px;
										height: 16px;
										border-radius: 50%;
										border: 1px solid #bdbdbd;
									}

&::before {
										z-index: 2;
										overflow: hidden;
										background: transparent;
										width: 0;
										height: 0;
										border: none;
										transition: 0.1s width cubic-bezier(0.075, 0.82, 0.165, 1) 0s, 0.3s width cubic-bezier(0.075, 0.82, 0.165, 2) 0.1s;
									}
								}

input[type="radio"] {
									display: none;
									position: absolute;
									width: 100%;
									-webkit-appearance: none;
									-moz-appearance: none;
									appearance: none;
									margin-right: 0;

&:checked + label {
										color: #475BB2;
										background: #EDEFF7;
										border-color: #475BB2;

&::after {
											background: #fff;
											border: 1px solid #475BB2;
										}

&::before {
											width: 8px;
											height: 8px;
											background: #475BB2;
											top: 16px;
											left: 16px;
										}
									}
								}
							}
						}

&.ur-about-your-data {
							margin-bottom: 40px;
						}

.ur-about-your-data-input {
							width: 60%;
							max-width: 100%;

@media (max-width: 991px) {
								width: 100%;
							}

h3 {
								font-weight: 600;
								font-size: 18px;
								line-height: 24px;
								color: #6B6B6B;
								margin-bottom: 12px;
							}

p {
								font-weight: 400;
								font-size: 15px;
								line-height: 23px;
								color: #6B6B6B;
								margin-bottom: 0;
							}

.ur-privacy-action-btn {
								display: flex;
								flex-wrap: wrap;
								align-items: center;
								gap: 20px;
								margin-top: 20px;

.ur-button {
									padding: 10px 16px;
									background: #0170B9;
									border: 1px solid #0170B9;
									border-radius: 3px;
									font-weight: 500;
									font-size: 14px;
									line-height: 150%;
									color: #FFFFFF;
									text-decoration: none;
									transition: all .3s ease-in-out;
									letter-spacing: .2px;

&:hover {
										background: #004c7d;
										border-color: #004c7d;
									}
								}

#ur-new-download-request {
									font-weight: 500;
									font-size: 14px;
									line-height: 150%;
									text-decoration-line: underline;
									color: #6B6B6B;
									letter-spacing: .1px;
									transition: all .3s ease-in-out;

&:hover {
										color: #0170B9;
									}
								}

#ur-new-erase-request {
									font-weight: 500;
									font-size: 14px;
									line-height: 150%;
									text-decoration-line: underline;
									color: #6B6B6B;
									letter-spacing: .1px;
									transition: all .3s ease-in-out;

&:hover {
										color: #0170B9;
									}
								}
							}

.ur-field {
								margin-bottom: 32px;

&:last-child {
									margin-bottom: 0;
								}

label {
									font-weight: 400;
									font-size: 15px;
									color: #6B6B6B;
									line-height: 150%;
									margin-top: 0;
									margin-bottom: 16px;
								}

.ur-field-area {
									margin-bottom: 16px;

input[type="password"] {
										padding: 8px 14px;
										background: #FFFFFF;
										border: 1px solid #E1E1E1;
										border-radius: 4px;

&::placeholder {
											color: #BABABA;
										}
									}

.ur-field-error {
										background: #FFF4F4;
										padding: 8px 12px 8px 16px;
										color: #F25656;
										font-weight: 500;
										border-left: 3px solid #F25656;
										margin-top: 8px;
										font-size: 14px;
										// border-top: 2px solid #F25656;
										display: flex;
										align-items: center;
										gap: 4px;

&::before {
											content: "";
											background-image: url("../images/icons/alert-icon.svg");
											background-position: center;
											background-size: 100%;
											background-repeat: no-repeat;
											display: block;
											width: 18px;
											height: 18px;
										}
									}
								}

.ur-request-button {
									font-weight: 500;
									font-size: 14px;
									line-height: 150%;
									color: #FFFFFF;
									padding: 10px 16px;
									background: #0170B9;
									border: 1px solid #0170B9;
									border-radius: 3px;
									letter-spacing: 0.2px;
									transition: all .3s ease-in-out;

&:hover {
										background: #004C7D;
										border-color: #004C7D;
									}
								}
							}
						}

&.ur-privacy-button {
							padding-top: 32px;
							border-top: 1px solid #e1e1e1;
							justify-content: flex-end;

input[type="submit"] {
								font-weight: 500;
								font-size: 14px;
								line-height: 150%;
								color: #FFFFFF;
								padding: 10px 16px;
								background: #0170B9;
								border: 1px solid #0170B9;
								border-radius: 3px;
								letter-spacing: 0.2px;
								transition: all .3s ease-in-out;

&:hover {
									background: #004C7D;
									border-color: #004C7D;
								}
							}
						}
					}
				}
			}
		}

// Payment Invoice Table Design Fix
		.ur-payments-container {
			.ur-payment-invoices {
				padding-left: 20px;
				padding-right: 20px;
				overflow: hidden;
				overflow-x: auto;
				margin-top: 15px;

table {
					border-collapse: collapse;
					border: $border_width solid #f1f1f1;

tbody {
						tr {
							th {
								background: #F1F5F9;
								font-weight: $semi_bold;
							}

td {
								&:last-child {
									color: #59B259;
									text-transform: capitalize;
								}

a {
									background: $primary_color;
									color: $grey-0;
									padding: $spacing_8px $spacing_12px;
									border-radius: $border_radius_3;

&:hover {
										background: #38488e;
									}
								}
							}

&:nth-child(odd) {
								td {
									background: #fafafa;
								}
							}
						}
					}
				}
			}
		}

.user-registration-membership-content {
			display: flex;
			flex-direction: column;
			gap: 20px;

.membership-row {
				display: flex;
				.membership-label {
					min-width: 300px;
					text-align: left;
				}
				#ur-membership-status {
					padding: 6px 18px;
					color: white;
					border-radius: 36px;
					&.btn-active {
						background: #4dc245;
					}
					&.btn-inactive {
						background: gray;
					}
					&.btn-canceled {
						background: #ea4335;
					}
					&.btn-trial {
						background: #ff8300;
					}
				}
			}

.membership-row-btn-container {
				display: flex;
				align-items: center;

.cancel-membership-button {
					border: none;
					padding: 10px;
					border-radius: 8px;
					background: #ea4335;
					color: white;
					cursor: pointer;
					line-height: 20px;
				}

#membership-error-div {
					width: 70%;
					text-align: left;

padding: 8px 12px 8px 16px;
					font-size: 14px;
					font-weight: 500;
					display: none;
					&.btn-error {
						background: #fff4f4;
						color: red;
						border-left: 3px solid #f25656;
					}
					&.btn-success {
						background: #d7ede0;
						color: #554545;
						border-left: 3px solid #00ff5a;
					}
				}
			}
		}

}
}

//User registration toggle.
.ur-toggle-section {
	.user-registration-toggle-form {
		position: relative;
		display: inline-block;
		width: 30px;
		height: 16px;

input {
			position: relative;
			z-index: 99;
			opacity: 0;
			height: 16px;
			width: 30px;
			cursor: pointer;

&:checked + .slider {
				background-color: #475BB2;
			}

&:focus + .slider {
				box-shadow: 0 0 1px #2196F3;
			}

&:checked + .slider::before {
				transform: translateX(14px);
			}
		}

.slider {
			position: absolute;
			cursor: pointer;
			inset: 0;
			background-color: #DFE1EA;
			transition: .4s;

&.round {
				border-radius: 30px;
			}

&.round::before {
				border-radius: 50%;
			}

&::before {
				position: absolute;
				content: "";
				height: 12px;
				width: 12px;
				left: 2px;
				bottom: 2px;
				background-color: #fff;
				transition: .4s;
				border-radius: 100%;
			}
		}
	}
}

@media screen and (max-width: 980px) {
	#user-registration {
		&.vertical {
			.user-registration-MyAccount-navigation {
				width: 30%;
			}

.user-registration-MyAccount-content {
				width: 70%;
			}
		}
	}
}

@media screen and (max-width: 600px) {
	#user-registration {
		&.vertical {
			.user-registration-MyAccount-navigation {
				width: 100%;

ul {
					.user-registration-MyAccount-navigation-link {
						a {
							padding: 15px 20px;
						}
					}
				}
			}

.user-registration-MyAccount-content {
				width: 100%;
			}
		}

.user-registration-MyAccount-content {
			padding: 15px;
		}
	}
}

// Tooltip for privacy tab
.tooltipster-base {
	.tooltipster-box {
		background: $grey-400 !important;
		padding: $spacing_4px $spacing_8px;
		border-radius: $border_radius_4;
		border-color: $grey-400;
	}
}

// My Account Page Design Revamp CSS
#user-registration {
	&.vertical,
	&.horizontal {
		border-radius: $border_radius_16;
		background: $grey-0;
		box-shadow: 0px 6px 26px 0px rgba(10, 10, 10, 0.08);

.user-registration-MyAccount {
			&-navigation {
				&-link {
					border: 0 !important;

&:last-child {
						border: 0 !important;
					}

> a {
						display: flex;
						gap: $spacing_8px;

i {
							width: 20px;
							height: 20px;
							display: flex;
							align-items: center;
							justify-content: center;
							margin-right: 0 !important;
						}
					}
				}
			}

&-content {
				&__body {
					h2 {
						margin-bottom: $spacing_20px;
						color: $grey-400;
						font-size: 22px;
						line-height: 32px;
					}

.user-registration-profile-header {
						display: flex;
						flex-wrap: wrap;
						align-items: center;
						flex-direction: column;
						margin-bottom: $spacing_20px;

.user-registration-img-container {
							margin: auto;
						}
					}

p {
						margin-bottom: $spacing_8px;

a {
							font-weight: $medium;
							color: $primary_color;
						}
					}

.ur-frontend-form {
						&.login {
							.ur-form-row {
								.ur-form-grid {
									// padding: 0;

fieldset {
										padding: 0;
										margin: 0;
										border: 0;

.user-registration-form-row {
											margin-bottom: $spacing_20px;

&:last-child {
												margin-bottom: 0;
											}

label {
												margin-top: 0;
												margin-bottom: $spacing_8px;
												color: $grey-500;
												font-size: 15px;
												font-weight: $medium;
												line-height: 21px;
											}

.password-input-group {
												display: block;

.input-text {
													height: 38px;
													padding: $spacing_8px $spacing_10px $spacing_8px $spacing_14px;
													border-radius: $border_radius_4;
													border: $border_width solid #E1E1E1;
													background: $grey-0;

&:focus {
														border-color: $primary_color;
													}
												}
											}
										}
									}

.user-registration-form-row {
										.ur-privacy-button {
											margin-bottom: 0;
										}
									}

// Save Changes Button CSS
									> p {
										float: unset;
										margin-top: $spacing_32px;
										text-align: right;

input[type="submit"] {
											float: unset;
											border-radius: $border_radius_4;
											background: $primary_color;
											border: $border_width solid $primary_color;
											color: $grey-0;
											font-size: 15px;
											line-height: 22px;
											padding: $spacing_8px $spacing_16px;
											transition: all .3s;

&:hover {
												background: darken($primary_color, 10%);
												border-color: darken($primary_color, 10%);
											}
										}
									}
								}
							}
						}
					}

.user-registration-membership-content {
						.membership {
							&-label {
								width: 40%;
								text-align: left;
							}

&-data {
								flex: 1;
								text-align: left;
							}

&-row {
								gap: 0;

&-btn-container {
									margin-top: $spacing_20px;
									justify-content: flex-start;
									flex-direction: unset;

.btn-div {
										width: 100%;

.cancel-membership-button {
											background: #F25656;
											padding: $spacing_8px $spacing_16px;
											display: flex;
											gap: 6px;
											align-items: center;

&::before {
												content: "";
												background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 3.818a8.182 8.182 0 1 0 0 16.364 8.182 8.182 0 0 0 0-16.364ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm13.37-3.37a.91.91 0 0 1 0 1.286L13.286 12l2.084 2.084a.91.91 0 0 1-1.286 1.286L12 13.286 9.916 15.37a.91.91 0 0 1-1.286-1.286L10.714 12 8.63 9.916A.91.91 0 0 1 9.916 8.63L12 10.714l2.084-2.084a.91.91 0 0 1 1.286 0Z' clip-rule='evenodd'/%3E%3C/svg%3E");
												background-repeat: no-repeat;
												background-position: center;
												background-size: 100%;
												width: 18px;
												height: 18px;
												display: block;
											}
										}
									}
								}
							}
						}
					}

.user-registration-pn-section {
						.user-registration-pn-container {
							.user-registration-pn-lists {
								border-radius: 8px 0 0 8px;
							}

.user-registration-pn-display-detail-area {
								border-radius: 0px 8px 8px 0px;
								border: 1px solid #F1F1F1;
								background: $grey-0;
								border-left: 0;
							}
						}
					}

// Payments Details New Design CSS
					.ur-payments-container {
						.ur-payments-details {
							margin-bottom: 40px;

.ur-payments-table {
								margin-bottom: 0;

tbody {
									tr {
										&.ur-payment-table-row {
											padding: 0;
											border-bottom: 0;

th {
												padding: 0;
												width: 360px;
												padding: 12px 0;
											}

td {
												padding: 12px 0;
											}
										}
									}
								}
							}
						}

.ur-payment-invoices {
							margin-top: 0 !important;
							padding: 0 !important;

table.ur-payment-invoice-table {
								border-radius: 6px !important;
								margin-bottom: 0;
								border: 0 !important;

tbody {
									tr {
										&:has(th) {
											background: #EDEFF7 !important;
											border-radius: 6px !important;
										}

th {
											padding: 16px 20px;
											color: $grey-500;
											font-size: 15px;
											font-weight: 500;
											line-height: 21px;
											border-radius: 0 !important;
											background: transparent !important;
											border: 0;

&:first-child {
												width: 200px;
											}

&:nth-child(2) {
												width: 230px !important;
											}
										}

td {
											border: 0;
											padding: 16px 20px;
											color: $grey-400;
											font-size: 14px;
											font-weight: 400;
											line-height: 20px;

a {
												&#ur_download_payment_invoice {
													padding: 0;
													background: none;
													color: $primary_color;
													border-radius: 0;
													position: relative;

&::after {
														content: "";
														background: darken($primary_color, 10%);
														width: 0px;
														height: 1.5px;
														position: absolute;
														bottom: -2px;
														left: 0;
														transition: all .3s ease-in-out;
													}

&:hover {
														background: transparent;
														color: darken($primary_color, 10%);

&::after {
															width: 100%;
														}
													}
												}
											}
										}

&:nth-child(odd) {
											td {
												background: #f8f8fa !important;
											}
										}
									}
								}
							}
						}
					}
				}
			}
		}
	}

&.vertical {
		padding: $spacing_12px;
		border-radius: $border_radius_16;

.user-registration-MyAccount {
			&-navigation {
				border-radius: $border_radius_10;
				background: #F8F8FA;
				max-width: 260px;
				width: 100%;
				padding: $spacing_26px $spacing_20px $spacing_16px;
				border: 0;

ul {
					gap: $spacing_4px;

.user-registration-MyAccount-navigation-link {
						transition: all .3s;

a {
							padding: $spacing_12px $spacing_12px $spacing_12px $spacing_24px;
							border-radius: $border_radius_4;
							border-left: 3px solid transparent;
							color: #4E4E4E;
							font-size: 14px;
							font-weight: 500;
							line-height: 22px;
						}

&:hover {
							a {
								background: $blue-50;
								color: $primary_color;
							}
						}

&.is-active {
							a {
								color: $primary_color;
								background: $blue-50;
							}
						}
					}
				}
			}

&-content {
				padding: $spacing_24px $spacing_24px 52px 36px;

&__header {
					border-bottom: $border_width solid #F4F4F4;
					padding-bottom: $spacing_16px;
					margin-bottom: $spacing_32px;

h1 {
						margin-bottom: 0;
						text-align: left;
						color: $grey-500;
						font-size: 24px;
						font-weight: 500;
						line-height: 36px;
					}
				}
			}
		}
	}

&.horizontal {
		.user-registration-MyAccount {
			&-navigation {
				&-link {
					a {
						border-left: 0 !important;
						padding: $spacing_16px $spacing_24px;
						font-size: 14px;
						font-weight: 500;
						line-height: 22px;
						color: #4E4E4E;
						border-bottom: 3px solid $grey-0;
						transition: all .3s;

&:hover {
							color: $primary_color;
							background: $blue-50;
							border-bottom-color: $blue-50;
						}
					}

&.is-active {
						a {
							border-bottom: 3px solid $primary_color;
							color: $primary_color;
							background: $blue-50;
						}
					}
				}
			}

&-content {
				padding: $spacing_24px 36px 52px 36px;
			}
		}
	}
}

.user-registration-logout-swal2-container {
	.swal2-modal {
		padding: 0px !important;

.swal2-header {
			padding: 20px;
			align-items: baseline;

h2 {
				border-bottom: 1px solid #D3D3D3;
				padding-bottom: $spacing_16px;
				width: 100%;
				text-align: left;
				margin-bottom: 0;
				color: #222222;
				font-size: 16px;
				font-weight: 500;
				line-height: 24px;
			}
		}

.swal2-content {
			text-align: left;
			color: $grey-400;
			font-size: 14px;
			font-weight: 400;
			line-height: 24px;
		}

.swal2-actions {
			display: flex;
			flex-direction: row-reverse;
			justify-content: center;
			background-color: #F0F0F0;
			padding: 18px $spacing_20px;
			gap: $spacing_16px;
			margin-top: $spacing_20px;
			border-radius: 0 0 5px 5px;
			background: #F4F4F4;

button {
				width: 45%;
				color: $grey-400;
				font-size: 14px;
				font-weight: 400;
				line-height: 24px;
				margin: 0;
				padding: 6px 12px;

&:focus {
					border: 0;
					outline: none;
					box-shadow: none;
				}

&.swal2-confirm {
					color: $grey-0;
				}

&.swal2-cancel {
					color: $grey-400;
					background: $grey-0 !important;
				}
			}
		}
	}
}

Gifari Industries - BD Cyber Security Team