/*
    1. LAYOUT
    2. PAYMENT
    3. FORM / SIGNATURES
    4. COOKIES
    5. GALLERY (Blueimp)
    6. COLLABORATION ROOM
    7. READ ONLY MODE
    8. FEATURES
    9. MEDIA (viewport)
*/
/******************************************/
/*                LAYOUT                  */
/******************************************/
.line {
  display: flex;
  text-align: left;
  margin-bottom: 4px;
}

.instruction-block .line {
    column-gap: 16px;
}

.instruction-block .line {
    column-gap: 16px;
}

.line .icon {
  height: 30px;
  min-width: 70px;
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: top;
  margin-left: 0;
  margin-right: 15px;
}

.rtl .line {
  text-align: right;
}

.seperator-container {
  display: flex;
  width: 100%;
  height: 30px;
  align-items: center;
}

.seperator-container span {
  height: 1px;
  width: 100%;
  background-image: linear-gradient(
    90deg,
    #4b515f,
    #4b515f 75%,
    transparent 75%,
    transparent 100%
  );
  background-size: 4px 1px;
  border: none;
}

.rotate-screen {
  display: none;
  z-index: -1;
  opacity: 0;
}

.conversations .compose {
  padding: 10px 80px 10px 40px;
}

.rtl .conversations .compose {
  padding: 10px 40px 10px 80px;
}

.btn-download-draft {
  margin: 8px 0px;
}

/* make the native arrow invisible and stretch it over the whole field so you can click anywhere in the input field to trigger the native datepicker*/
input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  color: transparent;
  background: transparent;
}

.lightico-loading {
  position: fixed;
  z-index: 9;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.9);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
}

.lightico-loading > .progress {
  position: absolute;
  bottom: 0px;
  width: 100%;
  margin: 0px;
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#muteButton {
  width: 48px;
  height: 48px;
}

#hangupButton {
  width: 48px;
  height: 48px;
}

#attachButton {
  width: 48px;
  height: 48px;
}

.fit {
  max-height: 100%;
  max-width: 100%;
}

/* End moved from the page */

.loader-target {
  -webkit-transition-duration: 0.5s !important;
  transition-duration: 0.5s !important;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
  opacity: 0;
}

.loader-target.loader-target-loaded {
  -webkit-transform: scale(1) translateY(0px);
  transform: scale(1) translateY(0px);
  opacity: 1;
}

.spinner {
  margin: 100px auto;
}

.spinner-mask {
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: table;
  background: #3e4554;
  position: fixed;
  z-index: 999;
  opacity: 1;
}

.spinner-mask.fade {
  opacity: 0;
  z-index: -1;
}

.spinner-mask.hide {
  display: none;
}

.spinner-mask .spinner-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.client-page {
  padding: 0;
  margin: 0;
  height: 100%;
}

.commands-panel {
  position: relative;
  height: 52px;
  width: 100%;
  padding-right: 5px;
  padding-left: 5px;
  clear: both;
  display: flex;
  flex-direction: column;
  flex-wrap: initial;
}

.commands-panel.panel-with-download-draft-btn,
.commands-panel.panel-with-payment-btn {
  height: 96px;
}

.commands-panel .commands {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  height: 100%;
}

.commands-panel button,
.commands-panel a {
  min-height: 30px;
  min-width: 100px;
  max-width: 60%;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 25px;
  font-size: 11px;
  text-decoration: none;
  width: calc(50% - 2px);
  height: 30px;
}

.commands-panel .rounded-btn {
  cursor: pointer;
}

.commands-panel button.payment-cancel,
.commands-panel .btn-download-draft {
  line-height: 1;
  border-radius: 17.5px;
  text-align: center;
}

.commands-panel .commands.flex-two-col {
  justify-content: space-around;
}

/*.flex-two-col a, .flex-two-col button {
    max-width: 40% !important;
}*/

/******************************************/
/*                PAYMENT                 */
/******************************************/
.payment-confirmation label {
  display: block;
  width: 100%;
  padding-bottom: 15px;
}

.payment-confirmation label span:first-child {
  padding-right: 25px;
}

.attachment.message-payment-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.message-payment-button i.fa.fa-credit-card {
  font-size: 3em;
}

.payment-confirmation-modal .title {
  font-size: 16px;
  display: block;
  width: 100%;
}

.rtl .payment-confirmation-modal p {
  margin-right: 15px;
  text-align: right;
}

.payment-confirmation-modal p {
  padding: 0;
  text-align: left;
}

.rtl .payment-confirmation label span:first-child {
  padding-left: 25px;
  padding-right: 0;
}

.document-item.commands {
  margin-top: 1.7em;
  width: 100%;
}

.cc-cvv.input-placeholder {
  padding-left: 50px;
  max-width: 100%;
}

.rtl .cc-number {
  width: 94% !important;
}

.cc-number.input-placeholder {
  padding-left: 110px;
  max-width: 100%;
}

/******************************************/
/*            FORM / SIGNATURES           */
/******************************************/
.lock-form > div > .title {
  text-transform: capitalize;
}

.lock-form > div > .description {
  text-align: left;
}

.lock-form > div > .controls {
  text-align: left;
}

.lock-form .btn-field:not(.b1) {
  height: 40px;
  line-height: 40px;
  padding: 0 30px;
  font-size: 14px;
  text-transform: uppercase;
  border-radius: 0px;
  /*float: none;*/
  color: #116fc6;
  background: #fff;
  border-color: #fff;
}

.confirm-modal .controls {
  margin-bottom: 30px;
  text-align: left;
  overflow-y: auto;
  max-height: 250px;
}

.rtl .confirm-modal .controls {
  text-align: right;
}

.rtl .confirm-modal .title {
  text-align: right;
}

/******************************************/
/*               COOKIES                  */
/******************************************/
div#cookie-confirmation.can-use-gradients {
  background-color: rgba(0, 0, 0, 0);
  background-image: -webkit-gradient(
    linear,
    50% 0%,
    50% 100%,
    color-stop(0%, rgba(0, 0, 0, 0.9)),
    color-stop(100%, rgba(0, 0, 0, 0.75))
  );
  background-image: -webkit-linear-gradient(
    top,
    rgba(0, 0, 0, 0.9),
    rgba(0, 0, 0, 0.75)
  );
  background-image: -moz-linear-gradient(
    top,
    rgba(0, 0, 0, 0.9),
    rgba(0, 0, 0, 0.75)
  );
  background-image: -o-linear-gradient(
    top,
    rgba(0, 0, 0, 0.9),
    rgba(0, 0, 0, 0.75)
  );
  background-image: linear-gradient(
    top,
    rgba(0, 0, 0, 0.9),
    rgba(0, 0, 0, 0.75)
  );
  background-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.9),
    rgba(0, 0, 0, 0.75)
  );
}

div#cookie-confirmation {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    display: none;
    color: var(--lds-color-font-inverse-base);
    padding: 16px;
}

    div#cookie-confirmation.active {
        z-index: 100000000 !important;
        background-color: var(--lds-color-neutral-900);
        display: block;
    }

    div#cookie-confirmation div#cookie-confirmation-inner {
        display: flex;
        gap: 16px;
        justify-content: flex-start;
        align-items: center;
    }

    div#cookie-confirmation div#cookie-confirmation-inner p {
        font-weight: 400 !important;
        font-size: 0.875rem !important;
        line-height: 1.375rem !important;
        letter-spacing: 0.015625rem !important;
        margin: 0;
    }

        div#cookie-confirmation div#cookie-confirmation-inner confirmation-button {
            min-height: 36px !important;
            text-decoration: none;
        }

        div#cookie-confirmation div#cookie-confirmation-inner #cookie_message a {
            color: var(--lds-color-font-inverse-base);
            text-decoration: underline;
        }

.rtl div#cookie-confirmation {
  /*text-align: right;*/
}

.rtl div#cookie-confirmation div#cookie-confirmation-inner p {
/*  float: right;
  text-align: right;*/
}

.rtl
  div#cookie-confirmation
  div#cookie-confirmation-inner
  div#cookie-confirmation-buttons-area {
  float: right;
}

/******************************************/
/*            GALLERY (Blueimp)           */
/******************************************/
.blueimp-gallery > .editor .sign-form {
  display: none;
}

.blueimp-gallery > .editor .controls .control {
  color: rgba(47, 59, 91, 0.54);
}

.blueimp-gallery .header-container {
  display: none;
}

.blueimp-gallery.share-view {
  background-color: #ccc;
}

.blueimp-gallery.share-view .slides {
  bottom: 60px;
}

.blueimp-gallery.share-view .close-btn {
  display: none;
}

.blueimp-gallery.share-view .header-container {
  position: fixed;
  top: 0;
  height: 60px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: #0099f0;
}

.blueimp-gallery.share-view .header-container h2 {
  color: #fff;
  font-size: 16px;
  margin: 0;
}

.blueimp-gallery.share-view .header-container .sub-title {
  margin: 0;
}

.blueimp-gallery.share-view .header-container .sub-title p {
  color: #fff;
  font-size: 12px;
  margin: 0;
  padding: 0;
}

.blueimp-gallery.share-view > .editor {
  bottom: 0;
  top: auto !important;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}

.blueimp-gallery.share-view > .editor .sign-form {
  display: block;
}

.blueimp-gallery.share-view .title {
  max-width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}

/******************************************/
/*          COLLABORATION ROOM            */
/******************************************/
.thumb-seperator {
  width: 100%;
  height: 1px;
  display: block;
  float: left;
  transition: width ease-in-out 0.4s;
  -moz-transition: width ease-in-out 0.4s;
  -webkit-transition: width ease-in-out 0.4s;
  -o-transition: width ease-in-out 0.4s;
  -ms-transition: width ease-in-out 0.4s;
  background-color: rgba(47, 59, 91, 0.12);
}

.thumb-seperator.with-download-draft {
  margin-bottom: 5px;
}

.attachment a.download {
  height: 110px;
}

.img-received {
  max-width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
  border: none;
}

/******************************************/
/*            READ ONLY MODE              */
/******************************************/
.read-only .client-side-view {
  top: 0;
  height: 100%;
}

.read-only .conversations.client-side .messages {
  bottom: 0;
  top: 60px;
}

/******************************************/
/*                FEATURES                */
/******************************************/
.inner-modal {
  display: none;
  width: 100%;
  height: calc(100% - 130px);
  position: relative;
  top: 0;
  z-index: -1;
  pointer-events: none;
  flex-direction: column;
  overflow-y: scroll;
  background-color: #ffffff;
  text-align: center;
}

.inner-modal.active {
  display: block;
  bottom: 0;
  top: 60px;
  padding: 15px;
  height: 100%;
  pointer-events: auto;
  z-index: 9999999;
}

.bottom.active,
.continue-button.active,
.readability.active {
  opacity: 1;
  pointer-events: auto;
  z-index: 9999999;
}

.resend {
  height: 30px;
  height: 30px;
  display: inline-block;
  background-color: white;
  margin-top: 16px;
}

.readability {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-height: calc(100% - 138px);
    overflow: hidden;
}

.readability-title {
    margin-bottom: 4px;
}

.readability-title h2 {
    margin: 0;
}

.readability-txt {
    font-weight: 400 !important;
    font-size: 0.75rem !important;
    line-height: 1.125rem !important;
    letter-spacing: 0.025rem !important;
    margin-bottom: 16px;
}

.readability-txt p {
    margin: 0;
}

.readability-buttons {
    position: fixed;
    bottom: 32px;
    height: 84px;
    padding: 0 32px;
    margin: 0 auto;
    max-width: 780px;
    display: flex;
    border-top: 1px solid var(--lds-color-border-light);
    left: 0;
    right: 0;
    align-items: center;
}

.continue-button {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    justify-content: space-between;
}

.custom-page .msg,
.last-page .msg {
    vertical-align: middle;
}

.last-page .msg {
    overflow: hidden;
}

.client-page.new-ui .payment-confirmation-modal .title {
    font-weight: 400 !important;
    font-size: 1.125rem !important;
    line-height: 1.75rem !important;
    letter-spacing: 0.015625rem !important;
    margin-bottom: 8px;
    padding-right: 44px;
}

.client-page.new-ui .payment-confirmation-modal p {
    font-weight: 400 !important;
    font-size: 0.8125rem !important;
    line-height: 1.25rem !important;
    letter-spacing: 0.009375rem !important;
    margin-top: 0;
    margin-bottom: 16px;
    padding-right: 20px;
}

.client-page.new-ui .modal-form.payment-confirmation-modal .submit {
    margin-top: 0;
}

.client-page.new-ui .inner-modal.active {
    display: block;
    bottom: 0;
    top: 0;
    padding: 56px 64px;
    height: 100%;
    pointer-events: auto;
    z-index: 9999999;
}

.client-page.new-ui .msg h1.title,
.client-page.new-ui .msg h2.title,
.client-page.new-ui .msg .txt,
.client-page.new-ui #idv_selfie h1,
.client-page.new-ui #idv_selfie p,
.client-page.new-ui #idv_back h1,
.client-page.new-ui #idv_back p,
.client-page.new-ui #intro_idv h1,
.client-page.new-ui #intro_idv p,
.client-page.new-ui .form-content .link_sent h1,
.client-page.new-ui #resend_link .reason-txt,
.client-page.new-ui .last-page h2.title,
.client-page.new-ui .last-page .txt,
.client-page.new-ui .custom-page h1.title,
.client-page.new-ui .custom-page p.txt,
.client-page.new-ui #idv_result h1.result-title,
.client-page.new-ui #idv_result .txt,
.client-page.new-ui .idv-consent-confirm h2.result-title,
.client-page.new-ui .idv-consent-confirm .txt,
.client-page.new-ui .idv_msg .idv-title,
.client-page.new-ui .idv_msg .idv-txt,
.client-page.new-ui .custom-idv-page .idv-title,
.client-page.new-ui .custom-idv-page .idv-txt,
.client-page.new-ui .custom-page .idv-txt,
.client-page.new-ui .idv-upload-files .idv-title,
.client-page.new-ui .idv-upload-files .idv-txt,
.client-page.new-ui .idv_msg .consent-idv-title,
.client-page.new-ui .idv_msg .consent-idv-subtitle,
.client-page.new-ui #err-page .err-title,
.client-page.new-ui #err-page .reason-txt,
.client-page.new-ui #idv_result .helper-txt,
.client-page.new-ui #err-page .err-txt {
    max-width: 360px;
    margin-left: auto !important;
    margin-right: auto !important;
}
.client-page.new-ui #idv_result .helper-txt {
  max-width: 290px !important;
}

.client-page.new-ui #idv_result .result-bottom-container .result-buttons,
.client-page.new-ui .idv-consent-confirm .result-bottom-container .result-buttons {
    display: flex;
    flex-direction: column;
    row-gap: var(--lds-space-5);
    align-items: center;
    align-self: stretch;
}

.client-page.new-ui #idv_result .result-bottom-container .result-buttons .lds-button,
.client-page.new-ui .idv-consent-confirm .result-bottom-container .result-buttons .lds-button {
    width: 100%;
}

.client-page.new-ui .idv-different-method.lds-button {
    padding: 0 4px !important;
}

.client-page.new-ui #idv_result .result-bottom-container .txt,
.client-page.new-ui .idv-consent-confirm .result-bottom-container .txt {
    margin-bottom: var(--lds-space-9);
}

.client-page.new-ui .idv-consent-confirm h2.result-title,
.client-page.new-ui .idv-consent-confirm .txt {
    max-width: 320px;
    text-align: center;
}

.client-page.new-ui #idv_result .camera-text-box {
    text-align: center;
    max-width: 320px;
}

.client-page.new-ui #idv_result .camera-text-box .txt {
    margin-bottom: var(--lds-space-0);
}

.client-page.new-ui #idv_result .camera-instructions {
    width: 280px;
}

/* lds-subheading-1 */
.client-page.new-ui #idv_result .camera-instructions .instructions-title {
    margin-bottom: var(--lds-space-4);
}

.client-page.new-ui #idv_result .camera-instructions ol {
    padding-left: var(--lds-space-7);
    margin: var(--lds-space-0);
    color: var(--lds-color-font-weak);
}

.client-page.new-ui #idv_result .camera-buttons {
    padding: var(--lds-space-0) var(--lds-space-8);
}

.client-page.new-ui #idv_result .camera-buttons .camera-skip-btn {
    width: 100%;
}

.client-page.new-ui .custom-page h1.title,
.client-page.new-ui #idv_result h1.result-title,
.client-page.new-ui .idv-consent-confirm h1.result-title,
.client-page.new-ui #idv_selfie h1,
.client-page.new-ui #idv_result .helper-txt
{
    margin: 0 auto 8px !important;
    text-align: center;
}

.client-page.new-ui .custom-page h1.title:empty {
    display: none;
}

.client-page.new-ui .custom-page p.txt,
.client-page.new-ui #idv_selfie p,
.client-page.new-ui #idv_back p {
    margin: 0 auto;
}

.client-page.new-ui #idv_selfie p {
    text-align: center;
    margin-bottom: 32px;
}


.client-page.new-ui #idv_back p,
.client-page.new-ui #idv_result p.txt {
    text-align: center;
}

.custom-page .btn-continue,
#idv_selfie .idv-btn-continue {
    margin-top: 32px;
}

.idv-skip {
    margin-top: var(--lds-space-8);
    color: var(--font-primary-base, #1565CF);
    border: 0px;
    background: white;
}

.photo-frame {
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    border-radius: var(--panel-border-radius);
    border: 1px solid var(--lds-color-border-light);
    overflow: auto;
}

/* new spinner css */

@keyframes svg-animation {
  0% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(360deg);
  }
}

/* IDV .spinner */

#manualCaptureBtn {
  background: url("../img/icons/capture_button.svg");
  background-color: #ffffff;
  border-radius: 100px;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 95%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  border: 1px solid transparent;
  background-position: center;
}

@keyframes slideInFromLeft {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

#transition {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  position: relative;
}

#upload-progress-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.4);
  z-index: 50;
  transition: opacity 0.3s ease;
}

#upload-progress-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

#upload-progress-overlay #upload-progress-ring {
  width: 100px;
  height: 100px;
  transform: rotate(-90deg);
}

#upload-progress-overlay .progress-ring-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.3);
  stroke-width: 6;
}

#upload-progress-overlay .progress-ring-fill {
  fill: none;
  stroke: var(--lds-brand-color-primary);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 339.29;
  stroke-dashoffset: 339.29;
  transition: stroke-dashoffset 0.3s ease;
}

#upload-progress-overlay #upload-progress-text {
  position: absolute;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
}

#img-result {
  height: 40px;
  width: 40px;
  animation: 2.5s ease-out 0s 1 slideInFromLeft;
}

#loader-container {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

#final_loader {
  position: absolute;
  top: 50%;
  left: 44%;
  width: initial;
  max-width: 100%;
  background: white;
  border-radius: 100px;
  display: flex;
  width: 56px;
  height: 56px;
  z-index: 100;
}

.idv-consent .custom-idv-page {
  height: 100%;
}

.consent-content {
    letter-spacing: normal;
}
/* Documents required banner */
.doc-req-banner {
  display: flex;
  align-items: center;
  gap: var(--lds-space-4);
  padding: var(--lds-space-5) var(--lds-space-6);
  border-radius: var(--lds-radius-md);
  margin: var(--lds-space-4) 0px var(--lds-space-8);
}
.doc-req-banner.doc-req-banner--warning {
  background-color: var(--lds-color-semantic-alert-transparent-300);
  color: var(--lds-color-font-base);
}
.doc-req-banner.doc-req-banner--warning .lds-icon {
  color: var(--lds-color-semantic-alert-main);
}
.doc-req-banner.doc-req-banner--success {
  background-color: var(--lds-color-semantic-success-transparent-300);
  color: var(--lds-color-font-base);
}
.doc-req-banner.doc-req-banner--success .lds-icon {
  color: var(--lds-color-semantic-success-main);
}
.doc-req-banner.doc-req-banner-info {
  background-color: var(--lds-color-primary-50);
  color: var(--lds-color-font-base);
}

.upload-files .blue-button {
  padding: 10px 10px 10px 70px;
  border-radius: 15px;
}

.upload-files .capture_doc .upload-indicator {
  left: 0;
  right: auto;
}

.upload-text {
  text-align: start;
}

.intro-drivers_license,
.intro-identification_card,
.intro-passport,
.intro-residence_permits,
.intro-icao_compliant_passport_books {
  width: 100%;
}

.selfie-intro {
  width: 100%;
}

#intro_idv .img-container img,
#idv_back .img-container img,
#idv_selfie .img-container img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.button-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 32px
}


.idv-intro-container {
  display: flex;
  justify-content: center;
  width: 100%;
}

#intro_idv,
#idv_back {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    row-gap: 32px;
}

    #intro_idv .top-container {
        row-gap: 8px;
    }

    #intro_idv .top-container h2,
    #intro_idv .top-container p,
    #intro_idv .helper-txt,
    #idv_back .top-container h2,
    #idv_back .top-container p {
        text-align: center;
    }

    #intro_idv .bottom-container {
        position: fixed;
        bottom: 0;
        padding: 16px;
        column-gap: 8px;
        width: 100%;
        box-shadow: 0px -2px 10px 0px rgba(33, 46, 62, 0.08);
    }

    #intro_idv .bottom-container button {
        width: 100%;
    }

#idv_verify {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#err-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

    #err-page .text {
        text-align: start;
        font-weight: 400 !important;
        font-size: 1rem !important;
        line-height: 1.5rem !important;
        letter-spacing: 0.009375rem !important;
    }

#err-page .icon.bullet {
  display: none;
}

.inner-btn {
  height: 35px;
  width: 35px;
  background: url();
}

.err-title {
  display: flex;
  align-items: center;
  text-align: center;
  color: #2f3b5b !important;
  font-size: 16px;
  max-width: 272px;
  line-height: 28px;
}

.err-txt,
.reason-txt {
    text-align: center;
}

.err-bottom-container .reason-txt {
    margin-top: 32px;
}

.err-bottom-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
}

  .err-bottom-container .idv-result-button {
      margin-top: 32px;
  }

/* Partial retake (feature 77503): per-failed-side cards on the "Retake the image" screen */
#idv-partial-retake {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.idv-retake-cards {
    display: flex;
    flex-direction: column;
    gap: var(--lds-space-4);
    align-items: stretch;
    width: 100%;
    max-width: 320px;
    margin: var(--lds-space-6) auto 0;
}

.idv-retake-card {
    background: var(--lds-color-background-lightest);
    border-radius: var(--lds-radius-md);
    padding: var(--lds-space-5) var(--lds-space-6) var(--lds-space-5) var(--lds-space-4);
    text-align: start;
}

/* typography comes from .lds-sub-body-2 in the markup */
.idv-retake-card-title {
    display: flex;
    align-items: center;
    gap: var(--lds-space-4);
    color: var(--lds-color-font-base);
    margin-bottom: var(--lds-space-3);
}

.idv-retake-card-icon {
    flex: none;
    font-size: var(--lds-space-6);
    color: var(--lds-color-font-base);
}

/* typography comes from .lds-sub-body-1 in the markup */
.idv-retake-card-list {
    margin: 0;
    padding-left: var(--lds-space-8);
    list-style: disc;
}

    .idv-retake-card-list li {
        color: var(--lds-color-font-base);
        margin-bottom: var(--lds-space-2);
    }

/* Bleeds through .form-content's 24px side padding so the footer meets the card edges */
.idv-retake-footer {
    align-self: stretch;
    margin: auto calc(var(--lds-space-8) * -1) 0;
    padding: var(--lds-space-5) var(--lds-space-8) 0;
    box-shadow: 0px -2px 10px 0px rgba(33, 46, 62, 0.08);
    display: flex;
    flex-direction: column;
    gap: var(--lds-space-5);
}

    .idv-retake-footer .idv-result-button {
        width: 100%;
        max-width: 320px;
        align-self: center;
    }

    .idv-retake-footer .idv-retake-divider {
        border-top: 1px solid var(--lds-color-border-light);
        width: 100%;
        max-width: 280px;
        align-self: center;
    }

    .idv-retake-footer .idv-retake-different-id {
        align-self: center;
    }

.mobile-only-step{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}
.mobile-only-step .mobile-only-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--lds-space-12);
}
.mobile-only-step .mobile-only-content .image-and-title{
  display: flex;
  flex-direction: column;
  margin-top: 76px;
}
.mobile-only-step .mobile-only-content .image-and-title .titles-container{
  display: flex;
  flex-direction: column;
  gap: var(--lds-space-6);
  align-items: center;
  max-width: 336px;
}
.mobile-only-step .mobile-only-content .image-and-title .titles-container .mobile-only-title{
    color: #2f3b5b !important;
}
.mobile-only-step .mobile-only-content .image-and-title .titles-container .mobile-only-sub-title{
  color: var(--lds-color-font-weak) !important;
  text-align: center;
}
.mobile-only-step .mobile-only-content .actions-container{
  display: flex;
  flex-direction: column;
}
#idv_verify > #main-spinner {
    display: block;
}

#main-spinner {
  position: inherit;
  top: 45%;
  text-align: center;
}

.idv_bottom {
  display: flex;
  width: 100%;
  justify-content: space-evenly;
}

.intro-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding: 0px;
  position: static;
  width: 322px;
  height: 110px;
  left: 24px;
  top: 212px;
  justify-content: space-between;
}

.upload-files .completed {
  pointer-events: none;
  opacity: 0.5;
}

.pin-options-button {
    width: 282px;
    height: 36px;
    background-color: rgba(47, 59, 91, 0.12);
    border: none;
    color: white;
    cursor: pointer;
    font-size: 16px;
    margin-top: 40px;
}

.idv-upload-files {
  display: flex;
  flex-direction: column;
  align-items: inherit;
}

.idv-upload-files-container {
  margin-top: 32px;
  width: 100%;
}

#uiContainer {
  top: 0;
  position: absolute;
  padding: 0px !important;
}

.inner-img-top-container > .blue-button {
  width: 272px;
  padding: 20px 12px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 12px 16px;
  border: 1px solid var(--lds-color-border-light);
  box-sizing: border-box;
  border-radius: 8px;
  margin-bottom: 12px;
  height: 101px !important;
  background-color: transparent;
}

.inner-img-bottom-container {
  display: flex;
  justify-content: space-between;
  width: 272px;
  flex-wrap: wrap;
}

    .inner-img-bottom-container > .blue-button {
        width: 130px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 12px 16px;
        height: 101px !important;
        left: 142px;
        top: 0px;
        border: 1px solid rgba(47, 59, 91, 0.12);
        box-sizing: border-box;
        border-radius: 8px;
        margin-bottom: 12px;
        background-color: transparent;
    }

#idv_processing {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0px;
  height: 100%;
  row-gap: 16px;
}

.result-bottom-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.result-bottom-container.gap-items {
 gap: 56px;
}
.result-bottom-container.gap-items .insturctions {
  text-align: center;
 }

.retake-idv {
  background-image: url(../img/icons/too_quick.svg) !important;
  width: 110px;
  height: 167px;
  background-repeat: no-repeat;
}

.upload-files .completed .upload-indicator {
  background-image: url(../img/icons/checkmark.svg);
  background-repeat: no-repeat;
  background-position: center center;
}

.verifying {
  width: 227px;
  /* height: 30vh; */
  left: 10px;
  top: 10px;
  display: flex;
  flex-direction: column-reverse;
  row-gap: 24px;
}

.PDF417_BARCODE-back-icon,
.DL_FRONT-back-icon {
  width: 100%;
}

.SELFIE-icon {
  /* width: 208px;
    height: 200px; */
  left: 32px;
  top: 0px;
  background-repeat: no-repeat !important;
  background-position: center center;
}

.center-icon {
  display: flex;
  justify-content: center;
}
.link_sent {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  text-align: center;
}

.readability-title h2,
.top-container > h1,
.top-container > h2,
.self-service-last-page .well-done .title,
.client-page.new-ui .custom-page h1.title,
.client-page.new-ui #idv_result h1.result-title,
.client-page.new-ui #idv_selfie h1,
.client-page.new-ui #idv_back h1,
.client-page.new-ui .form-content #idv_verify h1,
.client-page.new-ui .form-content .link_sent h1 {
    font-weight: 400 !important;
    font-size: 1.5rem !important;
    line-height: 2rem !important;
    letter-spacing: 0 !important;
}

#resend_link {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.idv_verify {
  display: flex;
  justify-content: center;
}

#idv_retake {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
}

#retake {
  cursor: pointer;
  background: #0099f0;
  border-radius: 100px;
  color: white;
  width: 82px;
  height: 34px;
  border: none;
}

.btn-continue-footer {
  position: absolute;
  bottom: 15px;
}

.msg-bottom-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.blue-button {
  cursor: pointer;
}

.photo-frame img {
    width: max-content;
    margin: 0;
    border-radius: var(--lds-radius-md);
}

.centered-form {
  max-width: 300px;
  margin: 0 auto;
}

.align {
  text-align: left;
  align-items: flex-start;
}

.rtl .align {
  text-align: right;
  align-items: flex-start;
}

.align-center {
  text-align: center;
}

.session-pin-form,
.otp-pincode {
  display: flex;
  direction: ltr;
  justify-content: center;
  column-gap: 8px;
}

.resend-sub-title {
    margin-top: 8px;
    margin-bottom: 32px;
}

.resend-pin {
    transform: translateY(84px);
}

.resend-pin-button {
    transform: translateY(32px);
}

.session-pin-form .input-placeholder,
.otp-pincode .input-placeholder {
    max-width: 40px;
    padding: 0 !important;
}

    .session-pin-form .input-placeholder input,
    .otp-pincode .input-placeholder input {
        border-bottom-width: 2px;
        font-size: 24px;
        text-align: center;
        padding: 0 !important;
        height: 48px !important;
    }

.resend-otp-container.resend{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.resend-otp-container.resend .resend-pin{
  width: fit-content !important;
  transform: inherit !important;

}

.preloader {
    height: 10px;
    width: 200px;
    background-color: #ccc;
    border-radius: 15px;
    margin-top: 20px;
    margin: 32px auto 0;
}

    .preloader .bar {
        width: 100px;
        position: absolute;
        height: 10px;
        animation-name: loader-animation;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-timing-function: ease-in-out;
        margin: 0 auto;
        right: 0;
        left: 0;
        border-radius: 25px;
        background-color: var(--lds-brand-color-primary);
    }

.rtl i.yale {
  right: 10px;
  left: auto;
}

/********************************/
/*        CIRCLE LOADER         */
/********************************/
.circle-loader {
  margin-bottom: 3.5em;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-left-color: #5cb85c;
  animation: loader-spin 1.2s infinite linear;
  position: relative;
  display: inline-block;
  vertical-align: top;
  border-radius: 50%;
  width: 7em;
  height: 7em;
}

.load-complete {
  -webkit-animation: none;
  animation: none;
  border-color: #5cb85c;
  transition: border 500ms ease-out;
}

.checkmark {
  display: none;
}

.checkmark.draw:after {
  animation-duration: 800ms;
  animation-timing-function: ease;
  animation-name: checkmark;
  transform: scaleX(-1) rotate(135deg);
}

.checkmark:after {
  opacity: 1;
  height: 3.5em;
  width: 1.75em;
  transform-origin: left top;
  border-right: 3px solid #5cb85c;
  border-top: 3px solid #5cb85c;
  content: "";
  left: 1.75em;
  top: 3.5em;
  position: absolute;
}

/********************************/
/*           ANIMATION          */
/********************************/

@keyframes loader-animation {
  0% {
    left: -100px;
  }

  49% {
    left: 100px;
  }

  50% {
    left: 100px;
  }

  100% {
    left: -100px;
  }
}

@-webkit-keyframes loader-animation {
  0% {
    left: -100px;
  }

  49% {
    left: 100px;
  }

  50% {
    left: 100px;
  }

  100% {
    left: -100px;
  }
}

@keyframes loader-spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes checkmark {
  0% {
    height: 0;
    width: 0;
    opacity: 1;
  }

  20% {
    height: 0;
    width: 1.75em;
    opacity: 1;
  }

  40% {
    height: 3.5em;
    width: 1.75em;
    opacity: 1;
  }

  100% {
    height: 3.5em;
    width: 1.75em;
    opacity: 1;
  }
}

/******************************************/
/*                FEATURES                */
/******************************************/
.limited-ribbon {
  display: none;
  transform: rotate(90deg);
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(-45deg);
  padding: 0 85px;
  text-align: center;
  height: 50px;
  z-index: 1000000;
  position: absolute;
  left: -95px;
  right: auto;
  top: 20px;
  box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.5);
  background-color: #0099f0;
}

.limited-ribbon p.text {
  color: #fff;
}

.client-page.new-ui.limited .limited-ribbon {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    box-shadow: none;
    background-color: var(--lds-brand-color-primary);
    height: 24px !important;
    min-height: 24px !important;
    border-radius: 0 !important;
    display: flex;
    width: 100%;
}

.client-page.new-ui .limited-ribbon p.text {
    margin: 0;
    /*lds-caption-1*/
    font-weight: 400 !important;
    font-size: 0.75rem !important;
    line-height: 1.125rem !important;
    font-family: var(--lds-primary-font-family) !important;
    letter-spacing: 0.025rem !important;
    color: var(--lds-brand-color-on-primary);
}


.flex-center {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center;
}

/******************************************/
/*            MEDIA (viewport)            */
/******************************************/
@media (orientation: landscape)
  and (min-aspect-ratio: 13/9)
  and (max-width: 900px)
  and (min-width: 420px)
  and (pointer: coarse) {
  html {
    -webkit-text-size-adjust: none !important;
  }

  .rotate-screen {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex !important;
    position: fixed;
    align-items: center;
    opacity: 1 !important;
    background-color: #fff;
    flex-direction: column;
    justify-content: center;
    z-index: 9999999999 !important;
  }
  .form-content {
    height: 100% !important;
  }

  .form-header-classic {
    display: none;
  }
}

/* Landscape mode that suppose to handle all IOS devices */
@media (orientation: landscape)
  and (min-aspect-ratio: 4/3)
  and (max-width: 1020px)
  and (pointer: coarse) {
  html {
    -webkit-text-size-adjust: none !important;
  }

  .rotate-screen {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    display: flex !important;
    position: fixed;
    align-items: center;
    opacity: 1 !important;
    background-color: #fff;
    flex-direction: column;
    justify-content: center;
    z-index: 9999999999 !important;
  }
  .form-content {
    height: 100% !important;
  }
  .form-header-classic {
    display: none;
  }
}

.powered-by-lightico {
  width: 200px;
  position: absolute;
  margin-left: -100px;
  left: 50%;
  bottom: 32px;
}

.powered-by-lightico a {
  color: rgba(0, 153, 240, 0.54);
  font-size: 13px; 
}

/* Need to be refactored like in agent side! */
.blueimp-gallery .editor .editor-container .controls {
  margin: 0;
} 

.blueimp-gallery > .editor li#buttonCloseGallery {
  background-color: #fff;
  border-color: #7f7a80;
  color: #7f7a80;
}

.signature-z-index {
  z-index: 99999999999 !important;
}

.model-change-event {
    z-index: 99999999999 !important;
}

.upload-files-container .msg-attachment-panel .preview-file {
  left: 0;
}

.idv_msg {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
}

.phone_verification_msg {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.idv-title,
.err-bottom-container .err-title,
.client-page.new-ui .form-content .link_sent h1,
.client-page.new-ui .form-content p.consent-idv-title {
    margin-bottom: 8px;
}

.idv-txt {
    text-align: center;
}

.err-txt,
.reason-txt,
.readability-txt,
.consent-idv-subtitle,
.idv-consent-body p,
#idv_result .txt,
.idv-txt {
    color: var(--lds-color-font-weak) !important;
}

.idv-consent-body a {
    color: var(--lds-brand-color-font-primary-base);
    text-decoration-line: none;
}

    .idv-consent-body a:hover {
        text-decoration-line: underline;
    }

.idv-consent,
.custom-idv-page,
#err-page,
#resend_link {
    padding: var(--customer-inner-form-padding);
}

    .idv-consent .consent-decline-txt,
    .client-page.new-ui #idv_result .result-bottom-container .txt,
    .idv-consent-body {
        font-weight: 400 !important;
        font-size: 0.875rem !important;
        line-height: 1.375rem !important;
        letter-spacing: 0.015625rem !important;
    }

.idv-consent .idv_msg {
  height: 100%
}

.idv-consent-body {
    margin-top: 32px;
}

.consent-idv-subtitle,
.client-page.new-ui .custom-page p.txt,
.client-page.new-ui #idv_selfie p,
.err-txt,
.reason-txt,
.resend-sub-title,
.idv-txt {
    font-weight: 400 !important;
    font-size: 0.8125rem !important;
    line-height: 1.25rem !important;
    letter-spacing: 0.009375rem !important;
}

.consent-idv-subtitle {
    text-align: center;
}

.consent-idv-top-container {
  display: flex;
  flex-direction: column; 
  align-self: center;
  align-items: center;
}

.consent-button-container {
    display: flex;
    align-items: flex-start;
    column-gap: 8px;
    margin-top: 32px;
}

.pv-txt,
.pv-title {
  color: #2f3b5b !important;
  line-height: 22px;
  text-align: center;
}

.icon-idv_group {
  background-repeat: no-repeat;
  width: 110px;
  height: 110px;
  margin: auto;
}

.top-container {
    display: flex;
    flex-direction: column;
    align-self: center;
    align-items: center;
}


.pv_top-container {
  display: flex;
  flex-direction: column;
  align-self: center;
}

.pv_img-container {
  display: flex;
  justify-content: center;
  width: 282px;
}

.top-container > h1,
.top-container > h2 {
    color: var(--lds-color-font-base) !important;
}

.img-container {
  display: flex;
  justify-content: center;
}
.consent-img-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pv_img-container {
  display: flex;
  justify-content: center;
  width: 282px;
}

.bottom-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  column-gap: 12px;
}

[id^="autoCompleteSuggestions"] {
    position: absolute;
    top: 85%;
    width: 100%;
    z-index: 100;
    flex-direction: column;
    display: flex;
    border: 1px solid black;
    visibility: hidden;
    background: white;
    border: 2px solid #7795b7;
    border-radius: 4px;
    z-index: 999999999;
}

[id^="autoCompleteSuggestions"] div {
  height: 28px;
  padding: 5px;
  display: flex;
  flex-direction: row;
  max-height: 25px;
  overflow: hidden;
  background: white;
  opacity: 1;
  z-index: 999999999;
}

[id^="autoCompleteSuggestions"] div:hover {
  cursor: pointer;
  background-color: aliceblue;
}

[id^="autoCompleteSuggestions"] div span.address-description {
  padding-left: 12px;
  color: grey;
  font-size: 12px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

[id^="autoCompleteSuggestions"] div span.address-addr {
  font-size: 12px;
  max-width: 80%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.connection-fail-page {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 250px;
  background-image: url(../img/icons/warning.png);
  background-repeat: no-repeat;
  background-position: 50% 70px;
}
.external-html-error{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
}
.external-html-fail-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 150px;
  background-image: url(../img/icons/external_html.png);
  background-repeat: no-repeat;
  background-position: 50% 70px;
}

.connection-fail-page .connection-fail-title {
  font-weight: bold;
  font-size: 30px;
  margin-bottom: 10px;
}

.connection-fail-page .connection-fail-text {
  color: grey;
  margin-bottom: 20px;
}

.otp-selection {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 24px;
    gap: 16px;
    width: 282px;
    height: 56px;
    border: 1px solid var(--lds-color-border-light);
    border-radius: 8px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.otp-button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px;
    width: 272px;
    height: 34px;
    background: #0099F0;
    border-radius: 4px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

.otp-label {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 24px;
    gap: 16px;
    width: 282px;
    height: 56px;
    border: 1px solid var(--lds-color-border-light);
    border-radius: 8px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    text-align: left;
    font-size: 14px;
}

.invisible-checkboxes input[type=radio] {
    display: none;
    margin-top: 64px;
}

    .invisible-checkboxes input[type=radio]:checked + .otp-label {
        background-color: #EDF4FD;
        color: #2f3b5b !important;
    }

@media only screen and (max-width: 780px) {
    .continue-button {
        flex-direction: column;
    }

    .readability-buttons {
        bottom: 0;
        flex-direction: column;
        box-shadow: 0px -6px 16px -5px rgba(0, 0, 0, 0.16);
        border-top: none;
        height: unset;
        padding: 16px;
    }

    .re-take-photo {
        position: relative;
        margin-bottom: -4px;
        margin-top: 12px;
        top: 0;
    }

    .idv-consent-body,
    .idv-consent .consent-decline-txt,
    .reason-txt {
        font-weight: 400 !important;
        font-size: 1rem !important;
        line-height: 1.5rem !important;
        letter-spacing: 0.009375rem !important;
    }

    .client-page.new-ui .custom-page p.txt,
    .client-page.new-ui #idv_selfie p,
    .idv-txt,
    .resend-sub-title,
    .err-txt,
    .consent-idv-subtitle {
        font-weight: 400 !important;
        font-size: 0.875rem !important;
        line-height: 1.375rem !important;
        letter-spacing: 0.015625rem !important;
    }

    .idv-consent {
        padding: 0;
    }

    div#cookie-confirmation div#cookie-confirmation-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .client-page.new-ui .payment-confirmation-modal .title {
        font-weight: 400 !important;
        font-size: 1.25rem !important;
        line-height: 1.75rem !important;
        letter-spacing: 0.015625rem !important;
    }

    .client-page.new-ui .payment-confirmation-modal p {
        font-weight: 400 !important;
        font-size: 0.875rem !important;
        line-height: 1.375rem !important;
        letter-spacing: 0.015625rem !important;
        padding-right: 24px;
    }

    .client-page.new-ui .inner-modal.active {
        padding: 32px 16px;
    }

    .client-page.new-ui .msg h1.title,
    .client-page.new-ui .msg h2.title,
    .client-page.new-ui .msg .txt,
    .client-page.new-ui #idv_selfie h1,
    .client-page.new-ui #idv_selfie p,
    .client-page.new-ui #idv_back h1,
    .client-page.new-ui #idv_back p,
    .client-page.new-ui #intro_idv h1,
    .client-page.new-ui #intro_idv p,
    .client-page.new-ui .form-content .link_sent h1,
    .client-page.new-ui #resend_link .reason-txt,
    .client-page.new-ui .last-page h2.title,
    .client-page.new-ui .last-page .txt,
    .client-page.new-ui .custom-page h1.title,
    .client-page.new-ui .custom-page p.txt,
    .client-page.new-ui #idv_result h1.result-title,
    .client-page.new-ui #idv_result .txt,
    .client-page.new-ui .idv_msg .idv-title,
    .client-page.new-ui .idv_msg .idv-txt,
    .client-page.new-ui .custom-idv-page .idv-title,
    .client-page.new-ui .custom-idv-page .idv-txt,
    .client-page.new-ui .idv-upload-files .idv-title,
    .client-page.new-ui .idv-upload-files .idv-txt,
    .client-page.new-ui .idv_msg .consent-idv-title,
    .client-page.new-ui .idv_msg .consent-idv-subtitle,
    .client-page.new-ui #err-page .err-title,
    .client-page.new-ui #err-page .reason-txt,
    .client-page.new-ui #err-page .err-txt {
        max-width: 320px;
    }
}

/* The Co-browse bar the customer keeps while the agent can see the screen (R18). Namespaced
   co-browse-bar to stay clear of the legacy .co-browse styles and #divEndCoBrowse. */

:root {
    --co-browse-bar-height: 40px;

    /* Co-browse chrome sits above the page's own full-screen views: the workflow is a .modal-view at
       9999999 (common.css:6121) and the file/PDF viewer is .blueimp-gallery at 99999, both of which
       simply covered the bar, the tools and the ink. It stays on top of those on purpose — the customer
       has to be able to see they are sharing and reach Stop whatever is open, and a mark is only useful
       over the thing being discussed. The four keep their existing order relative to each other. */
    /* Below the whole co-browse stack and below .modal-view (9999999): the shared page sits over the
       session page, and the tools, the frame and any dialog sit over it. */
    --cbrowse-z-url-surface: 9999998;
    --cbrowse-z-capture: 10000000;
    --cbrowse-z-frame: 10000001;
    --cbrowse-z-bar: 10000002;
    --cbrowse-z-toolbar: 10000003;
    --cbrowse-z-ink: 10000004;
    /* Co-browse's own consent and stop dialogs: over every co-browse layer, and over any page dialog
       already open, which they must not replace. */
    --cbrowse-z-dialog: 10000005;

    /* The status pill's ground, a shade down from the bar so the badge reads as an object on it, and
       the live dot. Both sampled from the design: there is no LDS token for either, and the pill is a
       darker tint of the brand rather than a semantic surface. */
    --cbrowse-status-pill: #135bb9;
    --cbrowse-status-live: #00965c;
    --cbrowse-status-halo: #def2e9;
}

#co-browse-dialog.modal-view {
    z-index: var(--cbrowse-z-dialog);
}

/* Co-browse takes a band off the top of the viewport and a band off the bottom, and the page's own
   views have to be told about both — they are positioned against the viewport and so account for
   neither. Every rule below is scoped to .cbrowse-active, so the page is untouched otherwise.

   Specificity is deliberate and load order is why: customer.css is linked *before* form.css and
   modal.css (Default.aspx:45-48), so an equal-specificity rule here loses to theirs. `body` plus three
   classes clears .client-page.new-ui .main-container and its neighbours without reaching for
   !important. */

/* The page's full-screen views are positioned against the viewport and are a full 100% tall, so they
   run under the bar at the top and under the tools at the bottom. Each is moved down and shortened by
   both bands, which is what puts everything they contain — the workflow's .form-header-classic at the
   top, its .bottom action bar at the foot — inside the space co-browse leaves. Shortening the container
   rather than nudging its last child is the point: .main-container is height: 100% (form.css:2632), so
   a margin on .bottom moved nothing. */
body.cbrowse-active.new-ui .main-container,
body.cbrowse-active.new-ui .modal-view,
body.cbrowse-active.new-ui .blueimp-gallery {
    top: var(--co-browse-bar-height);
    height: calc(100% - var(--co-browse-bar-height) - var(--cbrowse-toolbar-height, 0px));
}

/* The viewer's two halves are fixed to the viewport rather than to the gallery, so moving the gallery
   down leaves both of them where they were: the bar that carries Close (60px tall, `.blueimp-gallery >
   .editor` in common.css)
   under this one, and the slides overlapping it once it comes down. Both follow, keeping the 60px the
   slides already stand off by (blueimp-gallery_min.css). */
body.cbrowse-active.new-ui .blueimp-gallery > .editor {
    top: var(--co-browse-bar-height);
}

body.cbrowse-active.new-ui .blueimp-gallery > .slides {
    top: calc(60px + var(--co-browse-bar-height));
    bottom: var(--cbrowse-toolbar-height, 0px);
}

/* The chat view is in the flow on this UI (.client-side-view is position: relative, common.css:6533),
   so it already clears the bar; only the bottom needs giving back, under the compose bar. */
body.cbrowse-active.new-ui footer .footer {
    padding-bottom: var(--cbrowse-toolbar-height, 0px);
}

/* In the flow above #header so it reserves its own space rather than painting over a header that
   is itself sticky (old UI) or a centred card (new UI). Relative with the smallest z-index that
   works: without one it is painted under the positioned page chrome, and anything higher would
   assert a priority this bar does not need. */
.co-browse-bar {
    position: relative;
    /* Above the annotation hit area (997), or a drawing tool covers this bar and its stop button with
       it. Still below the page footer, which owns the bottom of the screen. */
    z-index: var(--cbrowse-z-bar);
    box-sizing: border-box;
    height: var(--co-browse-bar-height);
    /* Both, and flex: none: the bar came out two pixels short of the token, which only something
       upstream squeezing it can do. A floor it cannot be pushed below settles it wherever that was. */
    min-height: var(--co-browse-bar-height);
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--lds-space-5);
    /* 4px around a 32px row, which is the 40px header the design draws. */
    padding: var(--lds-space-3);
    background: var(--lds-brand-color-primary);
    color: var(--lds-brand-color-on-primary);
}

/* The bar replaces the page's top breathing room while it is up: on the new UI the header is a
   centred card with margin-top 32px (common.css:6302), which otherwise reads as a gap under the
   bar. Adjacent-sibling, so it needs no class from the script. */
.co-browse-bar + header #header.client {
    margin-top: 0;
}

/* One badge: glyph, word and live dot on a darker ground, which is how the design reads the state. */
.co-browse-bar-status {
    display: inline-flex;
    align-items: center;
    gap: var(--lds-space-4);
    box-sizing: border-box;
    height: 32px;
    min-height: 32px;
    flex: none;
    padding: var(--lds-space-3) var(--lds-space-4);
    /* 100px, not --lds-radius-ellipse: this page's token file defines --lds-radius-circle but not that
       one, so the token resolved to nothing and the pill came out square. */
    border-radius: 100px;
    background: var(--cbrowse-status-pill);
}

.co-browse-bar-status .icon-support_agent {
    font-size: 18px;
    line-height: 1;
    color: var(--lds-brand-color-on-primary);
}

.co-browse-bar-title {
    font-size: 14px;
    font-weight: 500;
}

/* A disc with a pale ring, not a glyph: it is a state light, and the ring is what makes it read as lit. */
.co-browse-bar-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--lds-radius-circle);
    background: var(--cbrowse-status-live);
    box-shadow: 0 0 0 3px var(--cbrowse-status-halo);
}

/* .lds-icon-button gives the shape and hover, but hardcodes a dark icon for light surfaces. */
.co-browse-bar .co-browse-bar-stop,
.co-browse-bar .co-browse-bar-stop .icon-close {
    color: var(--lds-brand-color-on-primary);
}

/* Ringed, so it reads as a control rather than a stray mark on the bar. */
.co-browse-bar .co-browse-bar-stop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--lds-brand-color-on-primary);
    border-radius: var(--lds-radius-circle);
    box-sizing: border-box;
}

/*
 * The blue runs down both sides and along the foot as well as across the top, so the whole shared view
 * reads as one framed surface. The bar is the top edge, in the flow; this draws the other three against
 * the viewport, stopping above the annotation tools, which sit outside the frame.
 *
 * Inert to the pointer throughout: it is a picture of state, and anything it intercepted would be a
 * click the page never received.
 */
.co-browse-frame {
    position: fixed;
    /*
     * From the very top, not from below the bar. Starting at the bar's nominal height left a hairline of
     * page showing wherever the bar rendered a fraction taller than the token says — and the token is not
     * the authority on that, the rendered bar is. The side borders simply run up behind the bar, which is
     * opaque, the same blue, and stacked above this, so the two read as one continuous frame.
     */
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--cbrowse-toolbar-height, 0px);
    z-index: var(--cbrowse-z-frame);
    border: 4px solid var(--lds-brand-color-primary);
    border-top: 0;
    pointer-events: none;
}

/* The annotation layer and the customer's toolbar (R27, R31). cbrowse- prefixed, like every other
   identifier this feature adds, so nothing collides with the co-browse that already ships. */

/* Annotation ink. No LDS token matches any of these: they exist to stay legible over whatever the page
   happens to be, which is a different job from a semantic colour, and the design's values are markedly
   more vivid than the nearest tokens. Declared by these same names in the agent app's styles.scss — a
   mark carries the property name across the relay and each side resolves it locally, so the two lists
   have to agree. */
:root {
    --cbrowse-annotation-green: #2fc755;
    --cbrowse-annotation-blue: #3786ed;
    --cbrowse-annotation-red: #f46258;
    --cbrowse-annotation-yellow: #ffe016;
}

/* Over the whole viewport, because the agent can point at anything on it, and fixed so its coordinate
   space *is* the viewport — which is what a mark records, on both sides of the session.

   It paints and never listens. This page stacks ordinary content far above a low z-index, so a layer
   at 2 had its strokes painted over and only showed where it beat the co-browse bar; but a layer high
   enough to be seen is also high enough to swallow every click, which stopped the bar's close button
   working. `pointer-events: none` settles both — it can sit above the chrome without taking anything
   from it. Only a modal, at six figures and up, is meant to cover a mark.

   Exempt from capture on purpose: js/cobrowse/capture.js blocks every canvas, and blocking one this
   size would hatch the agent's entire mirror. Its pixels never travel either (recordCanvas is off), so
   the agent receives an empty transparent element and paints the marks from the relay instead. */
.cbrowse-annotation-layer {
    position: fixed;
    inset: 0;
    z-index: var(--cbrowse-z-ink);
    display: block;
    pointer-events: none;
}

/*
 * Where the agent is pointing, drawn on the customer's screen (R29, step 44).
 *
 * Three pieces, laid out from the arrow's tip — which is the position that was actually reported, and
 * so the only point that has to land exactly. Colours are sampled from the design export rather than
 * guessed, and none has an LDS token: this exists to be the one thing on the page that is not the page,
 * which is a different job from any semantic colour.
 *
 * Inert throughout: it is a picture of someone else's attention, and anything it intercepted would be a
 * click the page never received.
 */
.cbrowse-agent-guide {
    --cbrowse-guide-ink: #f48e08;
    /* Half-transparent, so the page it sits over shows through rather than being blanked out. The
       hue is the export's; the alpha is Daniel's call (2026-09-14). */
    --cbrowse-guide-halo: rgba(245, 235, 222, 0.65);
    --cbrowse-guide-glyph: #4d525b;

    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--cbrowse-z-ink);
    width: 0;
    height: 0;
    pointer-events: none;
}

/*
 * Measured from the design export, all three anchored on the arrow's tip — the tip is the position that
 * was actually reported, so it is the only point that has to land exactly.
 *
 * Halo 48 centred on the arrow, arrow 18 square with its tip at the anchor, badge 38 (32 inside a 3px
 * ring) centred 35.5 right and 36.5 down of the tip.
 */
.cbrowse-agent-guide-halo {
    position: absolute;
    top: -15px;
    left: -15px;
    width: 48px;
    height: 48px;
    border-radius: var(--lds-radius-circle);
    background: var(--cbrowse-guide-halo);
}

/* Square, and concentric with the halo: the design centres the arrow in the disc, it does not sit on its edge. */
.cbrowse-agent-guide-arrow {
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    fill: var(--cbrowse-guide-ink);
    display: block;
}

/* A white disc inside an orange ring. Its own box, so nothing about the glyph can move the circle. */
/*
 * The toast icon for a session the agent ended. A mask rather than an <img>: COMMON.ui.toast only ever
 * puts a class on an <i>, and this way the glyph takes .msg-icon's colour instead of carrying its own.
 * Sized here because lds.css, which .lds-size-icon-md comes from, is an agent-page stylesheet.
 */
.toast-popup .toast-container .msg-icon.icon-co-browse-ended {
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask: url('../img/co-browse-session-ended.svg') no-repeat center / contain;
    mask: url('../img/co-browse-session-ended.svg') no-repeat center / contain;
}

.cbrowse-agent-guide-badge {
    position: absolute;
    top: 17px;
    left: 16px;
    width: 38px;
    height: 38px;
    box-sizing: border-box;
    border: 3px solid var(--cbrowse-guide-ink);
    border-radius: var(--lds-radius-circle);
    background: var(--lds-color-background-base);
}

/*
 * Centred by transform rather than by flex: an icon font's line box carries its own baseline and
 * leading, so centring the box still left the glyph sitting low. This centres the glyph itself, and the
 * design has it dead centre — the badge and the glyph share a centre exactly.
 */
.cbrowse-agent-guide-glyph {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    line-height: 1;
    color: var(--cbrowse-guide-glyph);
}

/* The hit area: transparent, inset away from the chrome by the script, and below both the co-browse bar
   and the page footer so each stays clickable. Only present to the pointer while a drawing tool is
   held — with Cursor the customer is being guided and has to be able to scroll and tap (R29). */
.cbrowse-annotation-capture {
    position: fixed;
    left: 0;
    right: 0;
    z-index: var(--cbrowse-z-capture);
    pointer-events: none;
}

.cbrowse-annotation-capture.drawing {
    pointer-events: auto;
    cursor: crosshair;
    touch-action: none;
}

/* A strip at the foot of the page, which is where the design puts it — not inside the co-browse bar,
   the chrome at the top. Fixed to the viewport and in the co-browse stack, so it clears the page's own
   footer rather than hiding beneath the compose bar; see the tokens above for what it has to outrank. */
.cbrowse-annotation-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--cbrowse-z-toolbar);
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--lds-color-border-light);
    background: var(--lds-color-background-base);
}

.cbrowse-annotation-toolbar {
    display: flex;
    align-items: center;
    gap: var(--lds-space-3);
    padding: var(--lds-space-4);
}

.cbrowse-annotation-tools,
.cbrowse-annotation-colours {
    display: flex;
    align-items: center;
    gap: var(--lds-space-2);
}

.cbrowse-annotation-openable {
    position: relative;
    display: flex;
}

/* Closed until the trigger is pressed, and opening above it — there is nothing below a footer. */
.cbrowse-annotation-panel {
    display: none;
    position: absolute;
    bottom: calc(100% + var(--lds-space-3));
    left: 50%;
    transform: translateX(-50%);
    flex-direction: column;
    gap: var(--lds-space-3);
    padding: var(--lds-space-4);
    border-radius: var(--lds-radius-md);
    background: var(--lds-color-background-base);
    box-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
}

.cbrowse-annotation-panel.open {
    display: flex;
}

.cbrowse-annotation-chevron {
    font-size: 16px;
}

.cbrowse-annotation-trigger {
    width: auto;
    padding: 0 var(--lds-space-2);
}

/* On white, so the LDS icon-button default is right and only the pressed state needs saying. */
.cbrowse-annotation-toolbar .cbrowse-annotation-button[aria-pressed='true'] {
    background-color: var(--lds-color-primary-transparent-200);
}

/* The three tool glyphs are exported from the design; the icon font has no touch point and nothing
   matching its pen or arrow. */
.cbrowse-annotation-glyph {
    display: block;
}

.cbrowse-annotation-toolbar .cbrowse-annotation-button:disabled {
    opacity: 0.5;
}

/* The swatch is the colour, so it keeps its own tint rather than the toolbar's. */
.cbrowse-annotation-toolbar .cbrowse-annotation-swatch .lds-icon {
    color: inherit;
}

.co-browse-bar .co-browse-bar-stop:hover,
.co-browse-bar .co-browse-bar-stop:focus,
.co-browse-bar .co-browse-bar-stop:active {
    background-color: rgba(255, 255, 255, 0.24);
}

/*
 * The co-browse log entry in the collaboration room (Figma 7581:34737, "Property 1=Customer,
 * Action=Ended"). Not the agent's pill: the customer's is a full-width card, centred, over two
 * rows — what happened, then when it ended.
 */
.co-browse-timeline {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    padding: 8px;
    background-color: #fff;
    border-radius: 8px;
}

.co-browse-timeline-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-height: 18px;
}

.co-browse-timeline-icon {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
    color: #080F1C;
}

.co-browse-timeline-text,
.co-browse-timeline-time {
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.4px;
    color: rgba(8, 15, 28, 0.72);
}

.co-browse-timeline-text {
    font-weight: 600;
}

.co-browse-timeline-time {
    font-weight: 400;
    white-space: nowrap;
}