Achieve Seamless Data Verification for PIPEDA Compliance

#form-pipeda-edit-account-request,

#form-pipeda-data-account-request,

#form-pipeda-personal-data-report-request {

display: none; #pipeda_page button {

background-color: transparent; border: 0; border-bottom: 1px solid black; padding: 0px; /* Modal background */

#data-verification-background {

display: none; position: fixed; z-index: 1; padding-top: calc(50vh - 83px); left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); opacity: unset; z-index: 9999; /* Modal Content */

#data-verification-modal {

background-color: #fefefe; margin: auto; padding: 16px; border: 1px solid #888; width: 38%; opacity: 1; /* Modal Close Button */

.data-verification-close {

color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; line-height: 17px; .data-verification-close:hover,

.data-verification-close:focus {

color: #000; text-decoration: none; cursor: pointer; /* Checkbox Text */

#data-verification-container p {

display: inline-block; padding: 0; margin: 0; line-height: 24px; padding-left: 10px; vertical-align: top; width: calc(100% - 45px); #data-verification-container a,

#data-verification-container a:hover {

text-decoration: underline !important; color: #4285f4; /* Checkbox Icon */

#data-verification-icon {

cursor: pointer; position: relative; margin: auto; width: 18px; height: 18px; -webkit-tap-highlight-color: transparent; transform: translate3d(0, 0, 0); margin-top: 2px; #data-verification-icon:before {

content: ""; position: absolute; top: -7px; left: -7px; width: 32px; height: 32px; border-radius: 50%; background: rgba(34, 50, 84, 0.03); opacity: 0; transition: opacity 0.2s ease; #data-verification-icon svg {

position: relative; z-index: 1; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke: #c8ccd4; stroke-width: 1.5; transform: translate3d(0, 0, 0); transition: all 0.2s ease; #data-verification-icon svg path {

stroke-dasharray: 60; stroke-dashoffset: 0; #data-verification-icon svg polyline {

stroke-dasharray: 22; stroke-dashoffset: 66; #data-verification-icon:hover:before {

opacity: 1; #data-verification-container:hover #data-verification-icon svg {

stroke: #4285f4; #data-verification-icon.clicked svg {

stroke: #4285f4; #data-verification-icon.clicked svg path {

stroke-dashoffset: 60; transition: all 0.3s linear; #data-verification-icon.clicked svg polyline {

stroke-dashoffset: 42; transition: all 0.2s linear; transition-delay: 0.15s; /* Loading Element */

.loading {

display: none; top: 50vh; left: 50vw; position: fixed; .loading:not(:required):after {

content: ''; display: block; font-size: 10px; width: 1em; height: 1em; margin-top: -0.5em; -webkit-animation: spinner 1500ms infinite linear; -moz-animation: spinner 1500ms infinite linear; -ms-animation: spinner 1500ms infinite linear; -o-animation: spinner 1500ms infinite linear; animation: spinner 1500ms infinite linear; border-radius: 0.5em; -webkit-box-shadow: rgba(255, 255, 255, 1) 1.5em 0 0 0, rgba(255, 255, 255, 1) 1.1em 1.1em 0 0, rgba(255, 255, 255, 1) 0 1.5em 0 0, rgba(255, 255, 255, 1) -1.1em 1.1em 0 0, rgba(255, 255, 255, 1) -1.5em 0 0 0, rgba(255, 255, 255, 1) -1.1em -1.1em 0 0, rgba(255, 255, 255, 1) 0 -1.5em 0 0, rgba(255, 255, 255, 1) 1.1em -1.1em 0 0; box-shadow: rgba(255, 255, 255, 1) 1.5em 0 0 0, rgba(255, 255, 255, 1) 1.1em 1.1em 0 0, rgba(255, 255, 255, 1) 0 1.5em 0 0, rgba(255, 255, 255, 1) -1.1em 1.1em 0 0, rgba(255, 255, 255, 1) -1.5em 0 0 0, rgba(255, 255, 255, 1) -1.1em -1.1em 0 0, rgba(255, 255, 255, 1) 0 -1.5em 0 0, rgba(255, 255, 255, 1) 1.1em -1.1em 0 0; #pipeda_page .list-unstyled li button {

cursor: pointer; .show-isense {

transition: opacity 400ms !important;