@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;
}
}
}
}
}