/** * Variables */ /** * Grid breakpoints * * Define the minimum dimensions at which your layout will change, * adapting to different screen sizes, for use in media queries. **/ /** * Grid containers * * Define the maximum width of `.ur-container` for different screen sizes. * scss-docs-start container-max-widths **/ #user-registration.vertical { display: flex; flex-wrap: wrap; } #user-registration.vertical .user-registration-error, #user-registration.vertical .user-registration-message { float: none; width: 100%; } #user-registration.vertical .user-registration-MyAccount-navigation { background: #f0f1f5; width: 25%; } #user-registration.vertical .user-registration-MyAccount-navigation ul { flex-direction: column; flex-wrap: nowrap; } #user-registration.vertical .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link.is-active a { background: #dee0e9; border-color: #475bb2; } #user-registration.vertical .user-registration-MyAccount-content { width: 75%; } #user-registration.vertical .user-registration-MyAccount-content .user-registration-profile-header { display: flex; flex-wrap: wrap; align-items: center; flex-direction: column; } #user-registration.vertical .user-registration-MyAccount-content .user-registration-profile-header .user-registration-img-container { margin: auto; } #user-registration.horizontal, #user-registration { box-shadow: 0 2px 20px rgba(45, 53, 89, 0.1); } #user-registration.horizontal .user-registration-message, #user-registration.horizontal .user-registration-error, #user-registration.horizontal .user-registration-info, #user-registration .user-registration-message, #user-registration .user-registration-error, #user-registration .user-registration-info { margin-bottom: 0; } #user-registration.horizontal .user-registration-MyAccount-navigation, #user-registration .user-registration-MyAccount-navigation { border-bottom: 1px solid #e1e1e1; } #user-registration.horizontal .user-registration-MyAccount-navigation ul, #user-registration .user-registration-MyAccount-navigation ul { justify-content: center; } #user-registration.horizontal .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link a, #user-registration .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link a { padding: 15px 20px; } #user-registration.horizontal .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link.is-active a, #user-registration .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link.is-active a { background-color: #dee0e9; } #user-registration.horizontal .user-registration-MyAccount-content, #user-registration.horizontal .ur-edit-profile, #user-registration .user-registration-MyAccount-content, #user-registration .ur-edit-profile { text-align: center; } #user-registration.horizontal .user-registration-MyAccount-content .user-registration-profile-header .user-registration-img-container, #user-registration.horizontal .ur-edit-profile .user-registration-profile-header .user-registration-img-container, #user-registration .user-registration-MyAccount-content .user-registration-profile-header .user-registration-img-container, #user-registration .ur-edit-profile .user-registration-profile-header .user-registration-img-container { margin: 0 auto; margin-bottom: 15px; } #user-registration.horizontal .user-registration-MyAccount-content .user-registration-profile-header .user-registration-img-container img, #user-registration.horizontal .ur-edit-profile .user-registration-profile-header .user-registration-img-container img, #user-registration .user-registration-MyAccount-content .user-registration-profile-header .user-registration-img-container img, #user-registration .ur-edit-profile .user-registration-profile-header .user-registration-img-container img { width: 100px; height: 100px; object-fit: cover; border-radius: 50%; margin: 0 auto; } #user-registration.horizontal .user-registration-MyAccount-content .edit-profile, #user-registration.horizontal .user-registration-MyAccount-content .edit-password, #user-registration.horizontal .ur-edit-profile .edit-profile, #user-registration.horizontal .ur-edit-profile .edit-password, #user-registration .user-registration-MyAccount-content .edit-profile, #user-registration .user-registration-MyAccount-content .edit-password, #user-registration .ur-edit-profile .edit-profile, #user-registration .ur-edit-profile .edit-password { text-align: left; } #user-registration.horizontal .user-registration-MyAccount-content .edit-profile .user-registration-profile-header, #user-registration.horizontal .user-registration-MyAccount-content .edit-profile h2, #user-registration.horizontal .ur-edit-profile .edit-profile .user-registration-profile-header, #user-registration.horizontal .ur-edit-profile .edit-profile h2, #user-registration .user-registration-MyAccount-content .edit-profile .user-registration-profile-header, #user-registration .user-registration-MyAccount-content .edit-profile h2, #user-registration .ur-edit-profile .edit-profile .user-registration-profile-header, #user-registration .ur-edit-profile .edit-profile h2 { text-align: center; } #user-registration .user-registration-MyAccount-content { padding: 40px 40px 40px 48px; } @media (max-width: 991px) { #user-registration .user-registration-MyAccount-content { padding: 36px 30px; } } #user-registration .user-registration-MyAccount-content .ur-frontend-form { padding: 0 !important; } #user-registration .user-registration-MyAccount-content .ur-frontend-form:has(.user-registration-PrivacyTab) h2 { text-align: left; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-EditProfileForm .user-registration-profile-fields h2 { text-align: center; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-EditAccountForm .ur-form-grid > p { float: right; margin-top: 24px; margin-bottom: 0; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-EditProfileForm .user-registration-profile-fields > p { float: right; margin-top: 24px; margin-bottom: 0; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab { text-align: left; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-grid { padding-left: 0; padding-right: 0; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row { display: flex; flex-wrap: wrap; row-gap: 10px; margin-bottom: 30px; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row:last-child { margin-bottom: 0; } @media (max-width: 991px) { #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row { flex-direction: column; gap: 12px; } } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-privacy-field-label { width: 40%; max-width: 100%; } @media (max-width: 991px) { #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-privacy-field-label { width: 100%; } } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-privacy-field-label label { font-size: 15px; line-height: 150%; font-weight: 500; color: #383838; margin: 0; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-privacy-field-label label .ur-portal-tooltip::after { color: #BABABA; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-privacy-input { display: flex; align-items: center; gap: 12px; width: 60%; max-width: 100%; } @media (max-width: 991px) { #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-privacy-input { width: 100%; } } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-privacy-input--radio-box { position: relative; display: block; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-privacy-input--radio-box label { display: block; border-radius: 3px; padding: 8px 12px 8px 34px; border: 1px solid #999999; cursor: pointer; font-size: 14px; font-weight: 500; line-height: 150%; color: #6B6B6B; margin: 0; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-privacy-input--radio-box label::before, #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-privacy-input--radio-box label::after { content: ""; position: absolute; left: 12px; top: 12px; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #bdbdbd; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-privacy-input--radio-box label::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; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-privacy-input--radio-box input[type="radio"] { display: none; position: absolute; width: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; margin-right: 0; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-privacy-input--radio-box input[type="radio"]:checked + label { color: #475BB2; background: #EDEFF7; border-color: #475BB2; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-privacy-input--radio-box input[type="radio"]:checked + label::after { background: #fff; border: 1px solid #475BB2; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-privacy-input--radio-box input[type="radio"]:checked + label::before { width: 8px; height: 8px; background: #475BB2; top: 16px; left: 16px; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row.ur-about-your-data { margin-bottom: 40px; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-about-your-data-input { width: 60%; max-width: 100%; } @media (max-width: 991px) { #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-about-your-data-input { width: 100%; } } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-about-your-data-input h3 { font-weight: 600; font-size: 18px; line-height: 24px; color: #6B6B6B; margin-bottom: 12px; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-about-your-data-input p { font-weight: 400; font-size: 15px; line-height: 23px; color: #6B6B6B; margin-bottom: 0; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-about-your-data-input .ur-privacy-action-btn { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 20px; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-about-your-data-input .ur-privacy-action-btn .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; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-about-your-data-input .ur-privacy-action-btn .ur-button:hover { background: #004c7d; border-color: #004c7d; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-about-your-data-input .ur-privacy-action-btn #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; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-about-your-data-input .ur-privacy-action-btn #ur-new-download-request:hover { color: #0170B9; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-about-your-data-input .ur-privacy-action-btn #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; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-about-your-data-input .ur-privacy-action-btn #ur-new-erase-request:hover { color: #0170B9; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-about-your-data-input .ur-field { margin-bottom: 32px; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-about-your-data-input .ur-field:last-child { margin-bottom: 0; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-about-your-data-input .ur-field label { font-weight: 400; font-size: 15px; color: #6B6B6B; line-height: 150%; margin-top: 0; margin-bottom: 16px; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-about-your-data-input .ur-field .ur-field-area { margin-bottom: 16px; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-about-your-data-input .ur-field .ur-field-area input[type="password"] { padding: 8px 14px; background: #FFFFFF; border: 1px solid #E1E1E1; border-radius: 4px; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-about-your-data-input .ur-field .ur-field-area input[type="password"]::placeholder { color: #BABABA; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-about-your-data-input .ur-field .ur-field-area .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; display: flex; align-items: center; gap: 4px; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-about-your-data-input .ur-field .ur-field-area .ur-field-error::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; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-about-your-data-input .ur-field .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; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row .ur-about-your-data-input .ur-field .ur-request-button:hover { background: #004C7D; border-color: #004C7D; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row.ur-privacy-button { padding-top: 32px; border-top: 1px solid #e1e1e1; justify-content: flex-end; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row.ur-privacy-button 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; } #user-registration .user-registration-MyAccount-content .ur-frontend-form .user-registration-PrivacyTab .ur-form-row .user-registration-form-row.ur-privacy-button input[type="submit"]:hover { background: #004C7D; border-color: #004C7D; } #user-registration .user-registration-MyAccount-content .ur-payments-container .ur-payment-invoices { padding-left: 20px; padding-right: 20px; overflow: hidden; overflow-x: auto; margin-top: 15px; } #user-registration .user-registration-MyAccount-content .ur-payments-container .ur-payment-invoices table { border-collapse: collapse; border: 1px solid #f1f1f1; } #user-registration .user-registration-MyAccount-content .ur-payments-container .ur-payment-invoices table tbody tr th { background: #F1F5F9; font-weight: 600; } #user-registration .user-registration-MyAccount-content .ur-payments-container .ur-payment-invoices table tbody tr td:last-child { color: #59B259; text-transform: capitalize; } #user-registration .user-registration-MyAccount-content .ur-payments-container .ur-payment-invoices table tbody tr td a { background: #475bb2; color: #ffffff; padding: 8px 12px; border-radius: 3px; } #user-registration .user-registration-MyAccount-content .ur-payments-container .ur-payment-invoices table tbody tr td a:hover { background: #38488e; } #user-registration .user-registration-MyAccount-content .ur-payments-container .ur-payment-invoices table tbody tr:nth-child(odd) td { background: #fafafa; } .ur-toggle-section .user-registration-toggle-form { position: relative; display: inline-block; width: 30px; height: 16px; } .ur-toggle-section .user-registration-toggle-form input { position: relative; z-index: 99; opacity: 0; height: 16px; width: 30px; cursor: pointer; } .ur-toggle-section .user-registration-toggle-form input:checked + .slider { background-color: #475BB2; } .ur-toggle-section .user-registration-toggle-form input:focus + .slider { box-shadow: 0 0 1px #2196F3; } .ur-toggle-section .user-registration-toggle-form input:checked + .slider::before { transform: translateX(14px); } .ur-toggle-section .user-registration-toggle-form .slider { position: absolute; cursor: pointer; inset: 0; background-color: #DFE1EA; transition: .4s; } .ur-toggle-section .user-registration-toggle-form .slider.round { border-radius: 30px; } .ur-toggle-section .user-registration-toggle-form .slider.round::before { border-radius: 50%; } .ur-toggle-section .user-registration-toggle-form .slider::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.vertical .user-registration-MyAccount-content { width: 70%; } } @media screen and (max-width: 600px) { #user-registration.vertical .user-registration-MyAccount-navigation { width: 100%; } #user-registration.vertical .user-registration-MyAccount-navigation ul .user-registration-MyAccount-navigation-link a { padding: 15px 20px; } #user-registration.vertical .user-registration-MyAccount-content { width: 100%; } #user-registration .user-registration-MyAccount-content { padding: 15px; } } .tooltipster-base .tooltipster-box { background: #383838 !important; padding: 4px 8px; border-radius: 4px; border-color: #383838; }