.button-main.start-button {
    opacity: 0;
    transition: 1s ease all;
}
.photo-navigator {
    position: absolute;
    width: 25vw;
    height: 25vw;
    border: 1px solid #84DCC8;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.ai-demo-slider    .slick-list {
    height: 100vh;
}

.ai-demo-slider .slick-list {
    height: 100vh;
}
.ai-demo-slider .slick-track {
    height: 100vh
        1200px
        ;
}

.slick-vertical .slick-slide {
    height: 100vh;
}

.main-loop.video-full video {
    height: 100%;
    width: 100%;
    object-fit: cover;
}
.slide-ai-demo-single-wrapper video {
    height: 790px;
    width: 585px;
    margin: auto;
    border-radius: 30PX;
}

.slide-ai-demo-single-wrapper {
    height: 100%;
    display: flex
        ;
    margin: auto;
}
.slide-ai-demo-single {
    height: 100vh;
}
.main-wrapper-steps-content {
    position: relative;
}
.menu h3 {
    height: 100vh;
    display: flex
        ;
    text-align: center;
}
.ai-demo-signle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.steps-applicaton {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
.main-wrapper-ai-demos-content-carousel {
    width: 50%;
}
.main-loop.video-full {
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    top: 0px;
}

.single-step {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}
.close-camera {
    position: absolute;
    top: 29%;
    left: auto;
    width: 108px;
    text-align: center;
}

.retake-photo-again {
    position: absolute;
    bottom: 30%;
    left: auto;
    width: 108px;
    text-align: center;
}
.ai-demo-main-content {
    padding-top: 50px;
    padding-left: 100px;
}
.image-placeholder-generated img {
    display: block;
    height: 100%;
    object-fit: cover;
}
.inner-steps .camera-wrapper.show-camera {
    pointer-events: none;
}
.main-demo-title {
    background: linear-gradient(26deg, #51b39d 0%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-inline: .16em;
    margin-inline: -.12em;
    overflow: visible;
    font-family: 'MarkOffcForMC-Medium';
    font-size: 96px;
    line-height: 110%;
}
.steps-applicaton {
    z-index: 99;
}
.single-step {
    z-index: 999999;
}

.single-ai-demo-description {
    font-size: 32px;
    margin-top: 30px;
}
.single-step.hide-section {
    z-index: 0;
    opacity: 0;
}
.single-step.intro > div {
    margin: auto;
}
.single-step.intro {
    height: 100%;
    display: flex
        ;
}
.ai-demo-signle {
    width: 85%;
}
.order-number {
    width: 60px;
    background: #ffffff2e;
    text-align: center;
    height: 39px;
    border-radius: 20px;
    color: #4FCDB0;
}

.demo-label {
    background: #ffffff2e;
    text-align: center;
    height: 39px;
    border-radius: 20px;
    padding: 0px 20px;
}
.demo-name {
    font-size: 24px;
}
.demo-name {
    display: flex
        ;
    column-gap: 50px;
}
.button-rows {
    column-gap: 20px;
}
ai-demo-app-wrapper > div {
    width: 50%;
    display: flex
        ;
}
.ai-demo-app-wrapper {
    display: flex
        ;
}
.ai-demo-app-title {
    font-family: 'MarkWebPro-Bold W01';
    font-size: 48px;
}
.left-ai-demo-app-wrapper-inner {
    text-align: left;
    margin: auto;
}
.ai-demo-signle {
    margin: auto;
    text-align: left;
}
.big-title {
    font-family: 'MarkOffcForMC-Medium';
    font-size: 120px;
    line-height: 120%;
}
.camera-controls {
    position: absolute;
    right: 50px;
    top: 0px;
    bottom: 0px;
}

div#capture {
    position: absolute;
    top: 50%;
    left: auto;
    transform: translate(0%, -50%);
}
.camera-controls {
    width: 300px;
}
.take-photo-popup {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    z-index: 222;
}
span.logo-tagline {
    font-family: 'MarkOffcForMC-Medium';
    color: white;
    font-size: 24px;
    position: relative;
    top: -12px;
    left: 20px;
}
.small-title {
    font-size: 24px;
    color: #4FCDB0;
    margin-bottom: 20px;
    font-family: 'MarkOffcForMC-Medium';
}
.intro-description {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}
.intro-description {
    font-size: 30px;
}
.button-main.start-button {
    background: #4FCDB0;
    color: #141413;
    padding: 14px 20px;
    max-width: 210px;
    border-radius: 50px;
    margin: auto;
    margin-top: 70px;
    font-size: 21px;
    font-family: 'MarkOffcForMC-Medium';
}
.hidden-button {
    display: none;
}
.demo-started .single-step.intro {
    transform: scale(0);
    transition: 1.5s ease all;
    opacity: 0;
}
.button-main.button-launch-ai-demo {
    background: #4FCDB0;
    color: #141413;
    padding: 14px 20px;
    max-width: 250px;
    border-radius: 50px;
    margin-top: 70px;
    font-size: 21px;
    font-family: 'MarkOffcForMC-Medium';
    text-align: center;
}
.main-loop.video-full svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.demo-started .main-loop.video-full svg {
    transform: scale(10);
    transition: 3s ease all;
    opacity: 0;
}
.ai-demo-signle.active-demo {
    opacity: 1;
    pointer-events: auto;
}
.ai-demo-signle {
    opacity: 0;
    pointer-events: none;
}
.button-main.button-launch-ai-demo.disabled {
    opacity: .2;
    pointer-events: none;
}
.big-title {
    background: linear-gradient(26deg, #86cdbd 0%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-inline: .16em;
    margin-inline: -.12em;
    overflow: visible;
}
.main-wrapper-steps-content {
    width: 50%;
    height: 100%;
}

.main-wrapper-steps-content-carousel {
    width: 50%;
    height: 100%;
    display: flex
        ;
}
.slick-slide.slick-current {
    z-index: 2;
    position: relative;
}
.slick-slide.is-next-1  .slide-ai-demo-single-wrapper > div {
    transform: scale(.7) rotate(-13deg) translate(18%, -30%);
    opacity: .8;
    transition: 1s ease all;
}
.ai-demo-slider {
    overflow: visible;
    height: 100vh;
}
.main-wrapper-steps-content {
    width: 50%;
    height: 100%;
    display: flex
        ;
}
.ai-demo-slider .slick-list {
    height: 100vh !important;
}
.single-step.ai-demos {
    display: flex
        ;
}
.ai-demo-app-wrapper {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
}
ul.slick-dots {
    row-gap: 10px;
}
ul.slick-dots li {
    width: 100%;
    display: flex
        ;
    margin: auto;
    justify-content: center;
}
ul.slick-dots li {
    width: 100%;
    display: flex
        ;
}
.ai-demo-slider ul.slick-dots li.slick-active button {
    background: #4FCDB0;
    transition: 1s ease all;
    height: 30px;
    border-radius: 5px;
}
ul.slick-dots {
    list-style: none;
    background: #10292333;
    padding: 10px;
    border-radius: 40px;
}
.ai-demo-slider ul.slick-dots button {
    font-size: 0px;
    padding: 0px;
    margin: 0px;
    height: 7px;
    width: 7px;
    border-radius: 50%;
    background: #276658;
    transition: 1s ease all;
}
.slick-vertical .slick-slide {
    height: 70vh;
}

.ai-demo-slider ul.slick-dots {
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translate(0%, -50%);
}
.button-main.launch-camera {
    background: #4FCDB0;
    color: #141413;
    padding: 14px 20px;
    max-width: 210px;
    border-radius: 50px;
    margin-top: 70px;
    font-size: 21px;
    font-family: 'MarkOffcForMC-Medium';
    text-align: center;
}
.camera-video canvas#canvas {
    height: 100%;
    width: 100%;
    display: block !important;
    z-index: 99999;
    position: relative;
}
.left-ai-demo-app-wrapper-inner {
    margin-top: 30%;
}
.single-image-box .image-placeholder {
    position: relative;
    top: 0px;
    left: 0px;
    transform: none;
    width: 100%;
    height: 100%;
}

.images-row {
    display: flex
        ;
    column-gap: 30px;
}

.analysis-box {
    max-width: 90%;
    margin-left: 0px;
}
ul.slick-dots {
    row-gap: 10px;
    display: flex
        ;
    flex-wrap: wrap;
    justify-content: center;
}

.single-image-box {
 
    border-radius: 40px;
}
.image-placeholder.blured-photo {
    filter: blur(30px);
}
.ai-demo-app-description {
    font-size: 32px;
    max-width: 630px;
}
ul.slick-dots li {
    width: 10px;
}
.ai-demo-slider ul.slick-dots {
    list-style: none;
    background: #10292333;
    padding: 20px;
    border-radius: 40px;
}
ul.slick-dots {
    width: 40px;
    padding: 20px 10px;
}
.slick-slide .slide-ai-demo-single-wrapper > div {
    transform: scale(1) rotate(0deg) translate(0%, 0%);
    opacity: 1;
    transition: 1s ease all;
}
 
.slick-slide.is-next-1 .slide-ai-demo-single-wrapper > div {
    transform: scale(.7) rotate(-13deg) translate(18%, -30%);
    opacity: .8;
    transition: 1s ease all;
}

.slick-slide.is-prev-1 .slide-ai-demo-single-wrapper > div {
    transform: scale(.7) rotate(13deg) translate(18%, 30%);
    opacity: .8;
    transition: 1s ease all;
}


.slick-slide.slick-current {
    z-index: 2;
    position: relative;
    transition: 1s ease z-index;
}

.slick-slide.is-next-1 {
    z-index: 1;
    position: relative;

}

.main-wrapper-steps-content {
    left: 0%;
    opacity: 1;
    position: relative;
    transition: 1s ease all;
}
.hide-section .main-wrapper-steps-content {
    position: relative;
    left: -50%;
    opacity: 0;
    transition: 1s ease all;
}
button#capture {
    font-size: 30px;
    margin-top: 50px;
}
.main-wrapper-ai-demos-content-carousel {
    bottom: 0%;
    opacity: 1;
    position: relative;
    transition: 1s ease all;
}
.hide-section .main-wrapper-ai-demos-content-carousel {
    position: relative;
    bottom: -150%;
    opacity: 0;
    transition: 1s ease all;
}
.camera-video {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;

}

.right-ai-demo-app-wrapper-inner {
    display: flex
        ;
}
.app-ai-demo-activated .main-wrapper-steps-content {
    left: -50%;
}
.inner-steps {
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    top: 0px;
    display: flex
        ;
}
.camera-wrapper {
    margin-right: 100px;
}
.camera-wrapper svg {
    height: 100%;
    width: auto;
}
.image-placeholder {
    position: absolute;
    height: 100%;
    width: 100%;
}
.button-main.takeaphoto {
    background: #4FCDB0;
    color: #141413;
    padding: 14px 20px;
    max-width: 210px;
    border-radius: 50px;
    margin-top: 70px;
    font-size: 21px;
    font-family: 'MarkOffcForMC-Medium';
    text-align: center;
}
.image-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.right-ai-demo-app-wrapper-inner {
    display: flex
        ;
    margin: auto;
}
.ai-demo-app-wrapper > div {
    width: 65%;
    display: flex
        ;
}
.button-main.generate-deepfake {
    background: #4FCDB0;
    color: #141413;
    padding: 14px 20px;
    max-width: 270px;
    border-radius: 50px;
    margin-top: 70px;
    font-size: 21px;
    font-family: 'MarkOffcForMC-Medium';
    text-align: center;
    width: 100%;
}
.take-photo-popup {
    background: #0000007a;
    backdrop-filter: blur(31px);
}
.button-main.retakeaphoto {
    background: #102923;
    color: #4FCDB0;
    padding: 14px 20px;
    max-width: 270px;
    border-radius: 50px;
    margin-top: 70px;
    font-size: 21px;
    font-family: 'MarkOffcForMC-Medium';
    text-align: center;
    width: 100%;
}
.camera-wrapper {
    opacity: 1;
    transition: 1s ease all;
}
.app-ai-demo-activated .main-wrapper-ai-demos-content-carousel {
    bottom: -150%;
}
.camera-wrapper {
    height: 100%;
    margin: auto;
}
.image-placeholder {
    z-index: 999999999;
}

.inner-steps.step-2.photo-taken .camera-video {
    transform: translate(10%, -50%);
    transition: 1s ease all;
}
.right-ai-demo-app-wrapper-inner {
    position: relative;
}
.right-ai-demo-app-wrapper-inner {
    display: flex
        ;
    margin: auto;
    height: 100%;
}
.camera-wrapper.show-camera {
    opacity: 1;
}
.right-ai-demo-app-wrapper-inner {
    margin-left: 0px;
}
.camera-wrapper {
    position: relative;
}
.camera-video video {
    height: 100%;
    width: 100%;
}
.camera-frame {
    height: 100%;
    position: relative;
    z-index: 99;
}
.image-placeholder {
    background: #0000006b;
}
.image-placeholder {
    height: 95%;
    width: 93%;
    border-radius: 40px;
    margin: auto;
}
.inner-steps.step-2 .camera-video {
    transition: .2s ease all;
}
.image-placeholder {
    height: 95%;
    width: 93%;
    border-radius: 40px;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.single-image-box {
    position: relative;
}
.image-placeholder.blured-photo {
    z-index: 2;
}

.image-placeholder-generated {
    position: absolute;
    bottom: 0px;
    right: 0px;
    top: 0px;
    z-index: 555;
}
.camera-video {
    position: absolute;
    border-radius: 50px;
    overflow: hidden;
    width: 40vw;
    height: 80vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #676767;
}

.camera-video canvas#canvas {
    height: 100%;
    width: 100%;
    display: block !important;
    z-index: -1;
    position: absolute;
}

.button-rows {
    display: flex
        ;
}
.camera-video {
    display: flex
        ;
}
.camera-controls {
    z-index: 999999;
}
.take-photo-popup.hide-camera {
    opacity: 0;
    transition: 0s ease all;
}

.take-photo-popup {
    opacity: 1;
    transition: .7s ease all;
}
.camera-video video {
    height: 95%;
    width: 93%;
    border-radius: 40px;
    margin: auto;
    background: #0000006b;
}
.button-main.retakeaphoto {
    background: #102923;
    color: #4FCDB0;
    padding: 14px 20px;
    max-width: 270px;
    border-radius: 50px;
    margin-top: 70px;
    font-size: 21px;
    font-family: 'MarkOffcForMC-Medium';
    text-align: center;
    width: 100%;
    border: 1px solid #276658;
}
.take-photo-popup {
    display: flex
        ;
}

.take-photo-popup.hide-camera {
    pointer-events: none;
}
.image-placeholder {
    overflow: hidden;
}
.take-photo-popup {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    z-index: 999999999;
}

.camera-wrapper {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}
.inner-steps.hide-inner-step {
    opacity: 0;
    transition: 1s ease all;
    pointer-events: none;
}
.image-scaner svg {
    width: 60%;
    height: auto;
    margin: auto;
}
.image-scaner {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    display: flex
        ;
}

.analysis-box {
    margin: auto;
}
.title-of-stage {
    font-family: 'MarkOffcForMC-Medium';
    font-size: 30px;
}
.analysis-box {
    background: #00000078;
    padding: 40px 35px;
    border-radius: 50px;
    backdrop-filter: blur(24px);
}
.images-row > div {
    width: 50%;
}
.inner-steps {
    opacity: 1;
    transition: 1s ease all;
    pointer-events: auto;
}

.left-ai-demo-app-wrapper-inner {
    margin-left: 155px;
}
.camera-video canvas#canvas {
    height: 100%;
    width: 100%;
    display: block !important;
    z-index: -1;
    position: absolute;
    opacity: 0;
}
.title-of-stage {
    text-align: left;
    margin-bottom: 30px;
}
.image-scaner {
    opacity: 1;
    transition: 1s ease all;
}
.ai-demo-app-title {
    line-height: 120%;
    margin-bottom: 40px;
}

.analysis-box {
    max-width: 90%;
    margin-left: 0px;
}


@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

circle.pulsate {
    transform-origin: center;
    animation: pulse 2s infinite ease-in-out;
}

.image-scaner.image-captured {
    opacity: 1;
    transition: 1s ease all;
    z-index: 999999999999999;
}

.button-main.step-back {
    background: #102923;
    color: #4FCDB0;
    padding: 14px 20px;
    max-width: 180px;
    border-radius: 50px;
    margin-top: 70px;
    font-size: 21px;
    font-family: 'MarkOffcForMC-Medium';
    text-align: center;
    width: 100%;
    border: 1px solid #276658;
}

.right-ai-demo-app-wrapper-inner {
 
}
 
.analysis-box {
    max-width: 85%;
    margin-left: 0px;
    width: 100%;
}
div#continue {
    background: #4FCDB0;
    color: #141513;
    padding: 14px 30px;
    max-width: 270px;
    border-radius: 50px;
    margin-top: 70px;
    font-size: 21px;
    font-family: 'MarkOffcForMC-Medium';
    width: 100%;
    text-align: left;
}

.photo-label {
    display: inline-flex
;
    padding: 5px 20px;
    background: #141413;
    border: 1px solid #54524F;
    border-radius: 20px;
}
.photo-box {
    border-radius: 40px;
    overflow: hidden;
    position: relative;
}
.photo-lable {
    margin-top: 20px;
}
.photo-box {
    height: auto;
    background: #80808024;
    aspect-ratio: 1 / 1;
}

.photo-label.generating-photo-label img {
  height: 18px;
  display: block;
  margin: 0 10px 0 auto;       /* keeps right margin you had */
  transform-origin: 50% 50%;   /* center point */
  animation: rotateLoader 2s linear infinite;
}

@keyframes rotateLoader {
  to {                     /* same as 100% */
    transform: rotate(360deg);
  }
}

.photo-label {
    margin-top: 40px;
}


.photo-label.generated-photo-label {
    background: rgb(16, 41, 35);
    border: 1px solid rgb(39, 102, 88);
    display: none;
}


.photo-label.generated-photo-label img {
    height: 18px;
    position: relative;
    top: 3px;
    left: -11px;
}

.photo-label.generating-photo-label img {
    position: relative;
    top: 3px;
}
.photo-label.generated-photo-label.show-label {
    display: inline-flex
;
}
.hide-label {
    display: none;
}

.ai-demo-app-wrapper .left-ai-demo-app-wrapper {
    width: 45%;
}

.ai-demo-app-wrapper > div {
    width: 55%;
    display: flex
;
    margin-left: auto;
}

div#continue img {
    margin-left: auto;
    height: 25px;
    float: right;
    top: 5px;
    position: relative;
    right: -10px;
}
div#product-loader {
    background-image: url(/experience-center/tablet/ai-studio-dev/assets/images/bg-4.jpg);
}
div#product-loader {
    background-size: cover;
}
body div#product {
    background: transparent !important;
}

.status-step-box {
    background: #070707;
    background: linear-gradient(360deg, rgba(7, 7, 7, 0) 0%, rgba(15, 15, 15, 1) 100%);
    border-radius: 80px;
    border: 1px solid rgb(39 102 88 / 22%);
}

.status-step-box {
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: left;
}

.status-step-box {
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: left;
    padding: 20px 30px;
}

.status-step-box {
    line-height: 100%;
    display: flex
;
}
.progress-bar-number {
    font-size: 14px;
    font-family: 'MarkOffcForMC-Medium';
}
.status-step-box * {
    margin-top: auto;
    margin-bottom: auto;
}
.status-step-box img {
    margin-right: 20px;
      animation: rotateLoader 2s linear infinite;
    height: 30px;
}

.status-step-box {
    margin-top: 40px;
}


.status-step-box > div {
    width: 100%;
}

.status-message {
    display: flex
;
}

span.action-label {
    font-family: 'MarkOffcForMC-Medium';
    color: #4FCDB0;
}

span.divider {
    background: #4FCDB0;
    height: 15px;
    width: 1px;
    margin: auto 20px;
}


.status-step-box {
    row-gap: 30px;
}


.status-container {
    display: flex
;
    flex-wrap: wrap;
    row-gap: 40px;
}

.status-step-box {
    height: 70px;
    overflow: hidden;
}

.status-container {
    position: relative;
    transition: 1s ease all;
 
    top: 0px;
}

 .status-step-box.deepfake-generated .status-container {
    position: relative;
    transition: 1s ease all;
 
    top: -63px;
}



.progress-bar-box {
    background: #276658;
    background: linear-gradient(163deg, rgba(39, 102, 88, 0) 60%, rgb(39 102 88 / 33%) 100%);
    border-radius: 40px;
    border: 1px solid rgb(39 102 88 / 35%);
    margin-top: 40px;
    padding: 20px 30px;
}

.progress-bar-single {
    display: flex
;
}

.progress-bar-single > span {
    font-family: 'MarkOffcForMC-Medium';
    font-size: 18px;
}

 
.progress-bar-single {
    flex-wrap: wrap;
}

.progress-bar-single > span {
    width: 40%;
    text-align: left;
}

.progress-bar-single:first-child {
    margin-top: 10px;
}
.progress-bar-single:last-child {
    margin-bottom: 10px;
}
.progress-bar-single {
    margin: 40px 10px;
}
.progres-bar-container {
    width: 60%;
    text-align: right;
}

.status-step-box * {
    margin-top: auto;
    margin-bottom: auto;
    font-family: 'MarkOffcForMC-Medium';
}

.progres-bar-container {
    display: flex
;
}

.progres-bar-container {
    height: 48px;
    width: 100%;
    border: 1px solid #242423;
    border-radius: 40px;
    margin: 0px 0px;
}

.progress-bar-single > * {
    margin-top: auto;
    margin-bottom: auto;
}

.progress-bar-single > span {
    width: 260px;
    text-align: left;
}


.progres-bar-container {
    width: calc(100% - 260px);
    text-align: right;
}

.progress-bar-number {
    margin-top: auto;
    margin-bottom: auto;
}


.progress-bar-single {
    margin: 25px 0px;
}

.inner-steps.step-2 .camera-video {
    transition: .2s ease all;
    transform: translate(-36%, -50%);
}

.progres-bar-container {
    padding: 0px 20px;
}

.progress-bar-number {
    width: 60px;
    line-height: 100%;
}

.progress-line {
    background: #242423;
    width: calc(100% - 60px);
    height: 10px;
    border-radius: 30px;
    margin-top: auto;
    margin-bottom: auto;
    overflow: hidden;
}

.progress-line span {
    height: 100%;
    width: 0%;
    background: #FFC81F;
    display: block;
    border-radius: 30px;
    transition: 1s ease all;
}

.progress-bar-single.loading-progress-bar.loaded .progress-line span {
    background: #4ecdb0;
          transition: 0s linear all;
}
.progress-bar-single.loading-progress-bar .progress-line span {
    width: 100%;
      transition: 10s linear all;
}

.progress-bar-single.loading-progress-bar[progress-bar="3"] .progress-line span {
 
    width: 90%;
    transition: 70s linear all;
}

.progress-bar-single.loading-progress-bar.loaded[progress-bar="3"] .progress-line span {
    background: #4ecdb0;
    width: 100%;
    transition: 0.2s linear all;
}

.image-placeholder.blured-photo img {
    filter: blur(168px) brightness(0.5);
}

.progress-bar-single.loaded .progres-bar-container {
    background: #102923;
}

.progress-bar-single.loaded .progres-bar-container {
    background: #102923;
    border: 1px solid #378F7B;
}

.camera-active .inner-steps .camera-wrapper.show-camera {
 
    opacity: 0;
}


.inner-steps .camera-wrapper.show-camera {
    pointer-events: none;
    transition: 0s;
}

.button-main.retakeaphoto svg {
    position: relative;
    top: 3px;
    left: -10px;
}

.progress-bar-single.loading-progress-bar.loaded .progress-bar-number {
    color: #4ecdb0;
}


.photo-box .image-scaner svg {
    width: 50%;
    height: auto;
    margin: auto;
}

.single-image-box .image-scaner.image-generated {
    display: none;
}

.main-demo-title {
transform: translate(0%, 25%);
    position: relative;
    opacity: 0;
    transition: 1s ease all .5s;
}

.single-ai-demo-description {
transform: translate(0%, 25%);
    position: relative;
    opacity: 0;
    transition: 1s ease all .5s;
}


.buttons-row {
transform: translate(0%, 25%);
    position: relative;
    opacity: 0;
    transition: 1s ease all .8s;
}

.ai-demo-signle.active-demo .main-demo-title {
transform: translate(0%, 0%);
    position: relative;
    opacity: 1;
    transition: 1s ease all .5s;
}

.ai-demo-signle.active-demo .single-ai-demo-description {
transform: translate(0%, 0%);
    position: relative;
    opacity:1;
    transition: 1s ease all .5s;
}

.demo-name {
transform: translate(0%, 25%);
    position: relative;
    opacity: 0;
    transition: 1s ease all .8s;   
}
.ai-demo-signle.active-demo .demo-name {
transform: translate(0%, 0%);
    position: relative;
    opacity: 1;
    transition: 1.1s ease all .5s;
    }
.ai-demo-signle.active-demo .buttons-row {
transform: translate(0%, 0%);
    position: relative;
    opacity: 1;
    transition: 1.1s ease all .5s;
}


.ai-demo-app-title {
transform: translate(0%, 0%);
    position: relative;
    opacity: 1;
    transition: 1s ease 1s;
}

.hide-inner-step .ai-demo-app-title {
 
transform: translate(0%,35%);
    position: relative;
    opacity: 0;
    transition: 1s ease 1s;  
}

.ai-demo-app-description {
transform: translate(0%, 0%);
    position: relative;
    opacity: 1;
    transition: 1.2s ease 1s;
}

.hide-inner-step .ai-demo-app-description {
transform: translate(0%,35%);
    position: relative;
    opacity: 0;
    transition: 1.2s ease 1s;  
}

.button-main.launch-camera {
 transform: translate(0%, 0%);
    position: relative;
    opacity: 1;
    transition: 1.5s ease 1s;
}

.hide-inner-step .button-main.launch-camera {
transform: translate(0%,35%);
    position: relative;
    opacity: 0;
    transition: 1.5s ease 1s;  
}

.take-photo-popup.hide-camera {
    z-index: -1;
}

.input-box {
    width: 100%;
    text-align: left;
}

.input-box-title {
    text-align: left;
    margin-bottom: 30px;
    font-family: 'MarkOffcForMC-Medium';
    font-size: 30px;
    width: 100%;
}

.inner-steps.step-4 .right-ai-demo-app-wrapper-inner {
    width: 100%;
}



.input-box {
    margin-top: 40px;
}

.input-label {
    font-size: 16px;
    color: #4FCDB0;
    margin-bottom: 10px;
}

.input-single {
    margin-bottom: 20px;
}

.input-single input {
    outline: none !important;
}
.input-single input {
    background: #070707;
    background: linear-gradient(273deg, rgba(7, 7, 7, 0) 0%, rgba(15, 15, 15, 1) 100%);
    border-radius: 80px;
    border: 1px solid #242424;
    font-size: 24px;
    font-family: 'MarkOffcForMC-Medium';
    padding: 20px 30px;
    color:white;
    width: 100%;
}

.input-single input::placeholder {
    color: #6c6c6c;
}

div#submit {
    background: #4FCDB0;
    color: #141513;
    padding: 14px 30px;
    max-width: 270px;
    border-radius: 50px;
    margin-top: 70px;
    font-size: 21px;
    font-family: 'MarkOffcForMC-Medium';
    width: 100%;
    text-align: left;
}

div#submit img {
    margin-left: auto;
    height: 25px;
    float: right;
    top: 5px;
    position: relative;
    right: -10px;
}

div#submit.disabled {
    opacity: 0.2;
    pointer-events: none;
}


.inner-steps.step-5 .right-ai-demo-app-wrapper-inner {
    width: 100%;
}

 
.single-image-box .input-box {
    margin: auto 0px;
}


.single-image-box:last-child .input-single {
    margin-bottom: 0px;
}

.single-image-box .input-single:last-child {
    margin-bottom: 0px;
}

.single-image-box .input-single:first-child {
    margin-bottom: 40px;
}

.inner-steps.step-5 .single-image-box:last-child {
    display: flex
;
}


.single-image-box .input-label {
    color: #84817D;
}

.single-image-box input {
    font-size: 16px;
}

.single-image-box .input-box {
    margin-top: 40px;
}


.progress-bar-single.full-width-progress >span {
    width: 100%;
    margin-bottom: 20px;
}

.progress-bar-single.full-width-progress .progres-bar-container {
    width: 100%;
}

div#see-results {
    background: #4FCDB0;
    color: #141513;
    padding: 14px 30px;
    max-width: 270px;
    border-radius: 50px;
    margin-top: 70px;
    font-size: 21px;
    font-family: 'MarkOffcForMC-Medium';
    width: 100%;
    text-align: left;
}


div#see-results img {
       margin-left: auto;
    height: 25px;
    float: right;
    top: 5px;
    position: relative;
    right: -10px; 
}

.status-message.no-animation img {
    animation: noin;
}

.status-message {
    width: 100%;
}

.inner-steps.step-5 .images-row {
    padding: 20px;
    background: #070707;
    border-radius: 50px;
    background: linear-gradient(352deg, rgb(7 7 7 / 0%) 0%, rgba(15, 15, 15, 1) 100%);
    border: 1px solid #33333354;
}

.inner-steps.step-5 .progress-bar-box {
    border: 1px solid #33333354;
    background: #070707;
    background: linear-gradient(352deg, rgba(7, 7, 7, 0) 0%, rgba(15, 15, 15, 1) 100%);
}

.single-image-box input {
    font-size: 16px;
    background: #1F1F1E;
}

.analysis-box {
    border: 1px solid #33333357;
}

 .status-step-box.fakeid-generated .status-container {
    position: relative;
    transition: 1s ease all;
     top: -70px;
}


.hidden-buttons.button-rows {
    top: 60px;
    position: relative;
    transition: 1s ease all;
    opacity: 0;
}


.button-rows {
    top: 0px;
    position: relative;
    transition: 1s ease all 1s;
    opacity: 1;
}


.sumbiting-id-animation svg {
    margin: auto;
    overflow: visible;
    width: 40%;
    display: block;
    height: auto;
}


.sumbiting-id-animation {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    display: flex
;
}

.info-notes .ai-demo-app-title {
    font-size: 20px;
    letter-spacing: 1px;
    margin-top: 50px;
    text-transform: uppercase;
}

.inner-steps.step-6 .right-ai-demo-app-wrapper-inner {
    width: 100%;
}
.info-notes .ai-demo-app-description {
    font-size: 20px;
}

.note-detection {
    text-align: left;
    margin-top: 40px;
    font-size: 16px;
    padding: 0px 30px;
}

.progress-bar-title {
    font-family: 'MarkOffcForMC-Medium';
    font-size: 24px;
    text-align: left;
    margin-top: 40px;
    padding: 0px 30px;
}

.inner-steps.step-6 .progress-bar-box {
    margin-top: 30px;
}

.inner-steps.step-6 .images-row {
    padding: 20px;
    background: #070707;
    border-radius: 50px;
    background: linear-gradient(352deg, rgb(7 7 7 / 0%) 0%, rgba(15, 15, 15, 1) 100%);
    border: 1px solid #33333354;
}

.denied-title {
    text-align: left;
    margin-bottom: 30px;
    font-family: 'MarkOffcForMC-Medium';
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 2px;
}


.title-sub {
    text-align: left;
    margin-bottom: 10px;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
}


.detected-title {
    text-align: left;
    margin-bottom: 30px;
    font-family: 'MarkOffcForMC-Medium';
    font-size: 32px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #EB001B;
}


.status-detected {
    text-align: left;
    margin-bottom: 30px;
    font-family: 'MarkOffcForMC-Medium';
    font-size: 32px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #EB001B;
}

.denied-title {
    text-align: left;
    margin-bottom: 80px;
    font-family: 'MarkOffcForMC-Medium';
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 20px;
}

img.alert {
    position: absolute;
    left: 20px;
    top: 20px;
}

img.circlered {
    position: absolute;
    width: 100%;
    HEIGHT: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

img.detected {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


 

@keyframes pulseCircle{
  0%, 100% {
    transform:  translate(-50%, -50%) scale(1) ;
    opacity: 1;
  }
  50% {
    transform:  translate(-50%, -50%) scale(1.1);
    opacity: 0.6;
  }
}


@keyframes pulseAlert{
  0%, 100% {
 
    opacity: 1;
  }
  50% {
 
    opacity: 0.2;
  }
}
img.circlered {
  animation: pulseCircle 1.5s infinite ease-in-out;
}


img.alert {
  animation: pulseAlert .5s infinite ease-in-out;
}


.inner-steps.step-6 .progress-bar-single > span {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 16px;
}

.inner-steps.step-6 .progress-bar-single img {
    margin-left: auto;
}

.inner-steps.step-6 .progress-bar-single > span {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 16px;
    width: 360px;
}

.inner-steps.step-6 .progress-bar-single {
    margin-bottom: 10px;
    margin-top: 15px;
}

.inner-steps.step-6 .progress-bar-box {
     border: 1px solid #5411137a;
    background: #070707;
    background: linear-gradient(352deg, rgba(7, 7, 7, 0) 0%, rgba(15, 15, 15, 1) 100%);
}

.inner-steps.step-6 {
    background-image: url(/experience-center/tablet/ai-studio-dev/assets/images/bg-red.jpg);
}

div#back-to-demos {
    background: #4FCDB0;
    color: #141513;
    padding: 14px 30px;
    max-width: 270px;
    border-radius: 50px;
    margin-top: 70px;
    font-size: 21px;
    font-family: 'MarkOffcForMC-Medium';
    width: 100%;
    text-align: center;
}

.button-main.restart-demo {
    background: #102923;
    color: #4FCDB0;
    padding: 14px 20px;
    max-width: 180px;
    border-radius: 50px;
    margin-top: 70px;
    font-size: 21px;
    font-family: 'MarkOffcForMC-Medium';
    text-align: center;
    width: 100%;
    border: 1px solid #276658;
}

.instruction-take-photo-text {
    font-size: 32px;
    font-family: 'MarkOffcForMC-Medium';
    max-width: 40%;
}
.button-main.restart-demo img {
    margin-left: auto;
    height: 25px;
    float: left;
    top: 5px;
    position: relative;
    left: 10px;
}

.close-button-voice.leave-signals.hide-close-button {
    top: -80px;
    transition: 1s ease all;
}

.close-button-voice.leave-signal  {
    top: 45px;
    transition: 1s ease all;
}

.close-demo {
    position: absolute;
    z-index: 9999999999;
    right: -158px;
    top: 53px;
    transition: 1s ease;
}


.show-close-demo.close-demo {
    position: absolute;
    z-index: 9999999999;
    right: 58px;
    top: 53px;
    transition: 1s ease;
}

.instruction-take-photo {
    position: absolute;
    bottom: 80px;
    left: 80px;
}

.close-camera {
    opacity: .4;
    pointer-events: none;
}

.photo-taken .close-camera {
    opacity: 1;
    pointer-events: auto;
}



.hide-inner-step .button-rows.deep-fake-buttons {
    top: 80px;
    position: relative;
    transition: 1s ease all 1s;
    opacity: 0;
}

img.circlered {
    z-index: 99999999999999999999999;
}
.button-rows.deep-fake-buttons {
}

img.detected {
    z-index: 9999999999999999;
}

img.alert {
    z-index: 9999999999999;
}

.red-gradient {
    background: #EB001B;
    background: radial-gradient(circle, rgba(235, 0, 27, 0) 30%, rgba(235, 0, 27, 0.42) 100%);
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    z-index: 99999;
}


.close-button-voice.leave-signals {
    transition: 1s ease all;
}

.instruction-take-photo-text {
    color: white;
}

.instruction-take-photo {
    position: absolute;
    bottom: 120px;
    left: 80px;
}

.hide-inner-step .analysis-box {
    top: 800px;
    position: relative;
    transition: 1s ease all;
}

.analysis-box {
    top: 0px;
    position: relative;
    transition: 1s ease all;
}

.bg-overlay-n {
    position: absolute;
    top: 0px;
 
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
}


.ai-demo-slider {
    left: -8%;
}

 

.breadcrubms-info {
    display: flex;
    position: absolute;
    bottom: 140px;
    left: 155px;
    column-gap: 20px;
}

.breadcrubms-info > span {
    width: 80px;
    height: 3px;
    background: #212120;
    border-radius: 30px;
}


.hide-inner-step .breadcrubms-info > span  span {
      width: 0%;
    transition: 1s ease all 1s;
}
  .breadcrubms-info > span  span {
  
    transition: 1s ease all 1s;
}

.hide-inner-step .breadcrubms-info > span.active span {
    height: 100%;
    width: 0%;
    background: #4ecdb0;
    display: block;
    border-radius: 30px;
    transition: 1s ease all 1s;
}

  span.active.finsihed-loading span {
    height: 100%;
    width: 100%!important;
    background: #4ecdb0;
    display: block;
    border-radius: 30px;
    transition: 1s ease all;
}
.app-ai-demo-activated .bg-overlay-n {
    opacity: 0;
}
.inner-steps.step-1 .bg-overlay-n {
    opacity: 1;
}

.hide-inner-step.inner-steps.step-1 .bg-overlay-n {
    opacity: 1;
}
 .breadcrubms-info > span.active span {
    height: 100%;
    width: 100%;
    background: #4ecdb0;
    display: block;
    border-radius: 30px;
    transition: 1s ease all;
}

.hide-section .bg-overlay-n {
    opacity: 0;
    transition: 1s ease all ;
}


.bg-overlay-n {
    opacity: 1;
    transition: 1s ease all;
}

.app-ai-demo-activated .hide-section .bg-overlay-n  {
     opacity: 0;
    transition: 1s ease all;  
}

.inner-steps.step-6 .analysis-box {
    top: 0px;
    opacity: 1;
}

.hide-inner-step.inner-steps.step-6 .analysis-box {
    top: 0px;
    opacity: 0;
}

.inner-steps.step-5.hide-inner-step .analysis-box {
    transition: 1s ease all 2s;
}

.ai-demo-slider ul.slick-dots button {
    border: none;
}

.inner-steps.step-6 {
    background-size: cover;
}

.bg-overlay-n img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

 

svg.detected {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

svg.detected path {
    animation: pulseAlert .5s infinite ease-in-out;
}

svg.detected {
    width: 30%;
    height: auto;
}

svg.detected {
    z-index: 999999999999999999999999999999;
}

.photo-label {
    text-transform: uppercase;
    letter-spacing: 1.1px;
}

.photo-label {
    font-family: 'MarkOffcForMC-Medium';
}

.progress-bar-number {
    letter-spacing: 1.1px;
}

.input-label {
    text-transform: uppercase;
    margin-bottom: 10px;
}

.step-6 .breadcrubms-info {
    bottom: 100px;
}

.breadcrubms-info {
    opacity: 1;
    transition: 1s ease 1s;
}
 
.hide-inner-step .breadcrubms-info {
    opacity: 0;
    transition: 1s ease 1s;
}
.step-5 .breadcrubms-info {
    bottom: 100px;
}

.step-3 .breadcrubms-info {
    bottom: 100px;
}


.button-rows.hidden-buttons {
    pointer-events: none;
}

.button-rows.hidden-buttons > div {
    pointer-events: none;
}

 

.connected-app .button-main.start-button {
    opacity: 1;
    transition: 1s ease all;
}

.button-main.voice-recoder {
        background: #4FCDB0;
    color: #141413;
    padding: 14px 20px;
    max-width: 300px;
    border-radius: 50px;
    margin-top: 70px;
    font-size: 21px;
    font-family: 'MarkOffcForMC-Medium';
    text-align: center;
}
 

.button-main.voice-recoder {
    transform: translate(0%, 0%);
    position: relative;
    opacity: 1;
    transition: 1.5s ease 1s;
}

.button-main.voice-recoder {
    transform: translate(0%, 0%);
    position: relative;
    opacity: 1;
    transition: 1.5s ease 1s;
}

.hide-inner-step .button-main  {
    transform: translate(0%, 35%);
    position: relative;
    opacity: 0;
    transition: 1.5s ease 1s;
}


.voice-recorder-placeholder {
    margin: auto;
}

.voice-recorder-placeholder img {
    backdrop-filter: blur(20px);
}
.voice-recorder-placeholder img {
    max-width: 100%;
}

.voice-recorder-placeholder img {
    max-width: 70%;
}

.voice-recorder-placeholder img {
    border-radius: 40px;
}

.app-ai-demo-activated .inner-steps:not(.hide-inner-step) .bg-overlay-n {
    opacity:1;
}

   canvasVoice {
      background: #0a0f0d;
      border-radius: 12px;
      display: block;
      margin: 20px auto;
    }
    #output {
      margin-top: 20px;
      font-size: 18px;
      word-wrap: break-word;
      max-width: 800px;
      margin: 10px auto;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      background: #fff;
      color: #0a0f0d;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      margin: 5px;
    }
    
    .inner-steps.step-vc-1 {
    z-index: 9999;
}
canvas#waveform {
    z-index: 2;
}
canvas#waveform {
    z-index: 2;
    position: relative;
    top: 0px;
        width: 100%;
    left: 0px;
    transform: none;
  height: 240px;
 
}
.voice-recorder-player {
    z-index: 999999999;
    position: relative;
}

button[disabled] {
    opacity: .2;
}

 
    #waveform {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      height: 200px;
      background: #0a0f0d;
      border-radius: 12px;
      overflow: hidden;
      margin: 20px auto;
    }
    /* Each bar is a white rectangle */
    #waveform .bar {
      background: #fff;
      margin-right: 2px; /* gap */
      transform-origin: bottom center;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
      background: #fff;
      color: #0a0f0d;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      margin: 5px;
    }
    #output span { margin: 0 2px; }
    
    wave {
    width: 100%;
}

div#waveform canvas {
    transform: none;
    height: auto;
    width: auto;
}


 

.voice-recorder-player {
    position: relative;
    transition: 1s ease all;
    border: 1px solid #33333357;
    background: #00000078;
    padding: 40px 35px;
    border-radius: 50px;
    backdrop-filter: blur(24px);
}

canvas#waveform {
    background: #4fcdb00a !important;
    border-radius: 20px;
    border: 1px solid #ffffff12;
}
.player-controls > div {
    margin-top: auto;
    margin-bottom: auto;
}
.player-controls {
    display: flex
;
    justify-content: center;
}


div#record {
    width: 120px;
}

div#reset, div#pauseRecord {
    width: 90px;
}
.player-controls img {
    display: block;
    margin: auto;
}
.player-controls {
    margin-top: 30px;
}
.record-button {
    max-width: 120px;
}
img#stopRecord {
    display: none;
}

img#play {
      display: none; 
}

img#pausePlay {
    display: none;
}

.voice-recorder-placeholder {
    max-width: 90%;
    margin: auto;
        width: 100%;
}

.title-of-stage.v2 {
    font-size: 19px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #4FCDB0;
    font-family: 'MarkWebPro-Book W01', sans-serif;
}

.header-player {
    display: flex;
}

.player-timer {
    margin-left: auto;
}

.player-title {
    font-size: 22px;
}

.player-timer {
    margin-top: auto;
    margin-bottom: auto;
}

canvas#waveform {
    background: #4FCDB0 !important;
    background: linear-gradient(178deg, rgba(79, 205, 176, 0) 0%, rgb(79 205 176 / 14%) 45%, rgba(79, 205, 176, 0) 100%) !important;
}

.player-timer {
    font-size: 16px;
}

span.player-status > * {
    display: none;
}
.player-timer > * {
    margin: auto;
}
.player-timer {
    display: flex
;
}

span.indicator-recroding {
    width: 6px;
    height: 6px;
    display: flex
;
    background: #505050;
    border-radius: 50%;
    margin: auto 20px;
}

.player-timer.recording span.recording-status.recording-now {
    display: flex
;
}
.player-timer.recording span.indicator-recroding {
    background: #D22A2F;
     animation: pulseAlert 1s infinite ease-in-out;
}
span.timer-numbers {
    line-height: 100%;
}

span.recording-status {
    text-transform: uppercase;
    line-height: 100%;
    letter-spacing: 2px;
}

.player-timer.recording span.recording-status.recording-now {
    display: flex
;
    
    color: #D22A2F;
}

span.indicator-recroding {
    position: relative;
    top: 2px;
}

.player-timer.recording-paused span.recording-paused {
    display: flex;
    text-transform: uppercase;
}

.player-timer.playback-playing span.playback-playing {
        display: flex;
    text-transform: uppercase;
    color:#4FCDB0;
}


.player-timer.playback-playing  span.indicator-recroding {
      animation: pulseAlert 1s infinite ease-in-out;
    background:#4FCDB0;
}

 .player-timer.playback-paused span.playback-paused {
        display: flex;
    text-transform: uppercase;
    color:#4FCDB0;
}


.player-timer.recording-paused span.recording-paused {
    display: flex
;
    text-transform: uppercase;
    color: #d22a2f;
}

 
.record-quality-session {
    font-size: 19px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #4FCDB0;
    font-family: 'MarkWebPro-Book W01', sans-serif;
    position: relative;
    transition: 1s ease all;
    border: 1px solid #33333357;
    background: #00000078;
    padding: 25px 35px;
    border-radius: 50px;
    backdrop-filter: blur(24px);
    text-align: left;
    margin-top: 30px;
    background: #070707;
    background: linear-gradient(83deg, rgba(7, 7, 7, 0) 0%, rgb(78 205 176 / 3%) 100%);
    border-radius: 80px;
    border: 1px solid rgb(39 102 88 / 22%);
};


.record-quality-session-status {
    position: relative;
    transition: 1s ease all;
    border: 1px solid #33333357;
    background: #00000078;
    padding: 25px 35px;
    border-radius: 50px;
    backdrop-filter: blur(24px);
    text-align: left;
    margin-top: 30px;
    background: #070707;
    background: linear-gradient(83deg, rgba(7, 7, 7, 0) 0%, rgb(78 205 176 / 3%) 100%);
    border-radius: 40px;
    border: 1px solid rgb(39 102 88 / 22%);
}

.status-adio-label {
    font-size: 18px;
    opacity: .7;
}

.inner-status-single.voice-clarity {
    margin: 30px 0px;
}


.record-quality-session span.recording-analisis img {
    margin-left: auto;
    display: block;
    height: 30px;
    width: auto;
    max-width: 100%;
      animation: rotateLoader 2s linear infinite;
}


span.recording-analisis {
    float: right;
}



.record-quality-session-status {
    position: relative;
    transition: 1s ease all;
    border: 1px solid #33333357;
    background: #00000078;
    padding: 25px 35px;
    border-radius: 50px;
    backdrop-filter: blur(24px);
    text-align: left;
    margin-top: 30px;
    background: #070707;
    background: linear-gradient(83deg, rgba(7, 7, 7, 0) 0%, rgb(78 205 176 / 3%) 100%);
    border-radius: -30px;
    border: 1px solid rgb(39 102 88 / 22%);
}


span.recording-analisis {
    display: none;
}

span.indictator-progress {
    display: flex
;
}

.status-indicator {
    width: calc(100% - 290px);
    margin-left: auto;
    margin-top: auto;
    margin-bottom: auto;
}
.inner-status-single.voice-volume {
    display: flex
;
}

.inner-status-single {
    display: flex
;
}

span.indictator-progress span {
    border-radius: 30px;
}
span.indictator-progress {
    display: flex
;
    column-gap: 15px;
}

span.indictator-progress span {
    height: 10px;
    width: 16.66%;
    background: #2A3230;
}

.recording-status {
    width: 50px;
    margin-left: auto;
    text-align: center;
}

.status-adio-label {
    width: 160px;
}

span.player-status .recording-status {
    width: auto;
}

.inner-status-single.low .status-indicator span span:first-child {
    background: #d22a2f;
}


.inner-status-single.good .status-indicator span span:nth-child(-n+3) {
    background: #B28C16;
}

.inner-status-single.great .status-indicator span span:nth-child(-n+5) {
    background: #4FCDB0;
}
.inner-status-single.background-noise.low .status-indicator span span:first-child {
       background: #4FCDB0;
}

.inner-status-single.background-noise.medium .status-indicator span span:nth-child(-n+3) {
          background: #B28C16;
}

.inner-status-single.background-noise.high .status-indicator span span:nth-child(-n+5) {
    background: #d22a2f;
}

div#continue-voice-generator {
    background: #4FCDB0;
    color: #141513;
    padding: 14px 30px;
    max-width: 360px;
    border-radius: 50px;
    margin-top: 70px;
    font-size: 21px;
    font-family: 'MarkOffcForMC-Medium';
    width: 100%;
    text-align: left;
}

div#submit-generated-voice {
    background: #4FCDB0;
    color: #141513;
    padding: 14px 30px;
    max-width: 400px;
    border-radius: 50px;
    margin-top: 70px;
    font-size: 21px;
    font-family: 'MarkOffcForMC-Medium';
    width: 100%;
    text-align: left;
}

div#attempt-verification {
    background: #4FCDB0;
    color: #141513;
    padding: 14px 30px;
    max-width: 330px;
    border-radius: 50px;
    margin-top: 70px;
    font-size: 21px;
    font-family: 'MarkOffcForMC-Medium';
    width: 100%;
    text-align: left;
}

div#continue-voice-generator img {
    margin-left: auto;
    height: 25px;
    float: right;
    top: 5px;
    position: relative;
    right: -10px;
}

div#submit-generated-voice img {
    margin-left: auto;
    height: 25px;
    float: right;
    top: 5px;
    position: relative;
    right: -10px;
}

div#attempt-verification img {
    margin-left: auto;
    height: 25px;
    float: right;
    top: 5px;
    position: relative;
    right: -10px;
}

canvas#waveformRecorded, canvas#waveformGenerated  {
    z-index: 2;
    position: relative;
    top: 0px;
    width: 100%;
    left: 0px;
    transform: none;
    height: 120px;
        border-radius: 20px;
    border-width: 0px!important;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.07);
    border-image: initial;
        background: transparent!important;
    
}
#waveformGeneratedLoader {
    
}
canvas#waveformRecorded, canvas#waveformGenerated {

}
.voiceRecorded {
    margin-bottom: 30px;
}
canvas#waveformGeneratedLoader {
    background: transparent !important;
}
canvas#waveformGeneratedLoader {
    max-width: calc(100% - 80px);
    height: 45px;
    margin: auto;
    margin-right: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: auto;
    width: 100%;
    transform: none;
    top: 0px;
}
.voiceGenerated, .voiceRecorded {
    z-index: 2;
        margin-top: 20px;
    position: relative;
    top: 0px;
    width: 100%;
    left: 0px;
    transform: none;
    height: 120px;
        border-radius: 20px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.07);
    border-image: initial;
        background: linear-gradient(178deg, rgba(79, 205, 176, 0) 0%, rgba(79, 205, 176, 0.14) 45%, rgba(79, 205, 176, 0) 100%) !important;
    
}


.smallplayer-recorder img {
    width: 72px;
    display: block;
}
.smallplayer-recorder {
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translate(0%, -50%);
}

.smallplayer-recorder img.pause-small-player {
    display: none;
}

.voiceRecorded {
    display: flex
;
}

canvas#waveformRecorded {
    max-width: calc(100% - 80px);
    height: 45px;
    margin: auto;
    margin-right: 0px;
}

canvas#waveformGenerated {
    max-width: calc(100% - 80px);
    height: 45px;
    margin: auto;
    margin-right: 0px;
}

 
.inner-steps.step-vc-3 .right-ai-demo-app-wrapper-inner {
    width: 100%;
}

.voiceGenerated {
    display: flex;
}

.voiceGenerated {
    position: relative;
    overflow: hidden;
}

.progress-line-generating {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    height: 100%;
    background: #27645636;
    width: 50%;
        z-index: 2222;
}

.progress-line-generating {
    position: absolute;
    top: 0px;
    width: 100%;
    bottom: 0px;
    left: 0px;
    height: 100%;
    background: #27645636;
    width: 50%;
    z-index: 2222;
    transition: 10s;
}

.progress-line-generating {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    height: 100%;
    background: #27645636;
    width: 0px;
    z-index: 2222;
    transition: 20s linear all;
    pointer-events: none;
}

.progress-line-generating.start-generating-progress {
    transition: 15s linear all;
    width: 100%;
}

.voiceGenerated .smallplayer-recorder {
    display: none;
}

.progress-bar-single.loading-progress-bar.loaded[progress-bar="8"] .progress-line span {
    transition: 5s linear width;
}

.progress-bar-single.loading-progress-bar.loaded[progress-bar="9"] .progress-line span {
    transition: 5s linear width;
}

.progress-bar-single.loading-progress-bar.loaded[progress-bar="10"] .progress-line span {
    transition: 5s linear width;
}

.progress-bar-single.loading-progress-bar[progress-bar="8"] .progress-line span {
    transition: 5s linear width;
}

.progress-bar-single.loading-progress-bar[progress-bar="9"] .progress-line span {
    transition: 5s linear width;
}

.progress-bar-single.loading-progress-bar[progress-bar="10"] .progress-line span {
    transition: 5s linear width;
}


.progress-bar-single.loading-progress-bar.loaded[progress-bar="11"] .progress-line span {
    transition: 5s linear width;
}

.progress-bar-single.loading-progress-bar.loaded[progress-bar="12"] .progress-line span {
    transition: 5s linear width;
}

.progress-bar-single.loading-progress-bar.loaded[progress-bar="13"] .progress-line span {
    transition: 5s linear width;
}

.progress-bar-single.loading-progress-bar[progress-bar="11"] .progress-line span {
    transition: 5s linear width;
}

.progress-bar-single.loading-progress-bar[progress-bar="12"] .progress-line span {
    transition: 5s linear width;
}

.progress-bar-single.loading-progress-bar[progress-bar="13"] .progress-line span {
    transition: 5s linear width;
}

.small-player-timer {
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translate(0%, -50%);
    right: 30px;
    color: #4FCDB0;
}

canvas#waveformRecorded, canvas#waveformGeneratedLoader, canvas#waveformGenerated {
    max-width: calc(100% - 180px);
    height: 45px;
    margin: auto;
    margin-right: 90px;
}

.voiceGenerated .small-player-timer {
    display: none;
}

canvas#waveformGeneratedLoader {
    max-width: 100%;
}


canvas#waveformGeneratedLoader {
    max-width: 100%;
    margin-right: 0px;
}

.inner-steps.step-vc-4 .right-ai-demo-app-wrapper > div {
    width: 100%;
}
.inner-steps.step-vc-5 .right-ai-demo-app-wrapper > div {
    width: 100%;
}
#voiceforanalisis, canvas#voiceforanalisisdetected {
        z-index: 2;
    position: relative;
    top: 0px;
    width: 100%;
    left: 0px;
    transform: none;
    height: 330px;
    border-radius: 20px;
    border-width: 0px !important;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.07);
    border-image: initial;
    background: transparent !important;
}

#voiceforanalisis {
    margin-top: 40px;
}

.inner-steps.step-vc-4 .progress-bar-single > span {
    width: 400px;
}

.inner-steps.step-vc-4 .progres-bar-container {
    width: calc(100% - 400px);
}

.inner-steps.step-vc-5 {
    background-image: url(/experience-center/tablet/ai-studio-dev/assets/images/bg-red.jpg);
}

.title-of-stage.v2.bigger-title {
    color: white;
    font-family: 'MarkOffcForMC-Medium';
    text-transform: capitalize;
    letter-spacing: 0px;
    font-size: 32px;
}


.step-vc-5 .voice-recorder-player {
    border: 1px solid #ec001b3b;
}


.step-vc-5 .record-quality-session {
    border: 1px solid #ec001b3b;
}


.player-title.access-denied > * {
    margin: auto;
    margin-right: 10px;
}
.player-title.access-denied {
    display: flex
;
}
.player-title.access-denied {
    color: #D22A2F;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
.player-title {
    font-size: 22px;
}


.additional-message {
    max-width: 630px;
    font-size: 24px;
    margin-top: 70px;
}

.detection-voice-info {
    text-align: left;
    margin-top: 14px;
    font-size: 24px;
}

.aditional-title-analisis {
    text-align: left;
}

.aditional-text-analisis {
    text-align: left;
    font-size: 20px;
}

.aditional-title-analisis {
    text-align: left;
    font-size: 30px;
    font-family: 'MarkOffcForMC-Medium';
}

.step-vc-5 .record-quality-session {
    color: white;
}

.voice-analisis-generated-box {
    position: relative;
}

.voice-analisis-generated-box img {
    border-radius: 0px;
    width: 40px;
    position: absolute;
    bottom: 30px;
    left: 20px;
}

.voice-analisis-generated-box {
    z-index: 2;
    margin-top: 20px;
    position: relative;
    top: 0px;
    width: 100%;
    left: 0px;
    transform: none;
    border-radius: 20px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.07);
    border-image: initial;
    background: linear-gradient(178deg, rgb(234 0 1 / 0%) 0%, rgb(234 0 1 / 0%) 45%, rgb(234 0 1 / 16%) 100%) !important;
    margin-bottom: 20px;
}

.voice-analisis-generated-box img {
    border-radius: 0px;
    width: 40px;
    position: absolute;
    bottom: 30px;
    left: 20px;
    z-index: 99999999999999999;
    backdrop-filter: none;
}

.step-vc-5 .progress-bar-box {
    border: 1px solid #ec001b3b;
}

.hide-inner-step .voice-recorder-placeholder {
    top: 100%;
    position: relative;
    transition: 1s ease all;
}

.voice-recorder-placeholder {
    top: 0%;
    position: relative;
    transition: 1s ease all;
}

.additional-message {
    top: 100px;
    position: relative;
    opacity: 0;
    transition: 1s ease all;
}

.hide-inner-step .additional-message {
    top: 0px;
    position: relative;
    opacity: 0;
    transition: 1s ease all;
}

.voice-analisis-generated-box img {
    border-radius: 0px;
    width: 40px;
    position: absolute;
    bottom: 30px;
    right: 20px;
    z-index: 99999999999999999;
    backdrop-filter: none;
    left: auto;
}

.hide-inner-step  .progress-bar-single[progress-bar="multi-factor-security"] .progress-line span {
    width: 0%;
    background: #4ecdb0;
}

.progress-bar-single[progress-bar="multi-factor-security"] .progress-line span {
    width: 96%;
    
    transition: 5s ease all;
    background: #4ecdb0;
}

.hide-inner-step  .progress-bar-single[progress-bar="synthetic-voice-detection"] .progress-line span {
    width: 0%;
    background: #4ecdb0;
}

.progress-bar-single[progress-bar="synthetic-voice-detection"] .progress-line span {
    width: 91%;
    
    transition: 5s ease all;
    background: #4ecdb0;
}

.voice-analisis-generated-box img {
      animation: pulseAlert 1s infinite ease-in-out;
 
}
 
.inner-steps.step-vc-5 {
    background-image: url(/experience-center/tablet/ai-studio-dev/assets/images/bg-red.jpg);
    background-size: cover;
}

div#pauseRecord,div#reset {
    pointer-events: none;
}

div#pauseRecord.enabled, div#reset.enabled {
    pointer-events: all;
}



.inner-steps.step-vc-5 .progress-bar-number {
    width: 170px;
}

.inner-steps.step-vc-5 .progress-bar-number {
    width: 220px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #4ecdb0;
}


.inner-steps.step-vc-2 .right-ai-demo-app-wrapper-inner {
    width: 100%;
}
.voice-recorder-placeholder video {
    max-width: 100%;
    height: auto;
    backdrop-filter: blur(20px);
    border-radius: 30px;
}



.intro-loader-skipper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.video-background video {
    height: 100vh;
    width: auto;
    object-fit: contain;
}
.video-background {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.intro-loader-skipper {
    z-index: 99;
}


[ai-demo="deep-fake"] .step-1 .video-background video {
    height: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


[ai-demo="deep-fake"] .video-background video {
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.skip-button {
    color: #4FCDB0;
    font-size: 20px;
}


.loader-progress-bar {
    height: 2px;
    width: 320px;
    background: #393939;
    margin-bottom: 20px;
}


.loader-progress-bar span {
    height: 2px;
    width: 0%;
    background: #44FFCC;
    display: block;
}

@keyframes sweep {
  0%   { width: 0%;  transform-origin: left center; }
  96%  { width: 100%; }
  100% { width: 100%; } /* holds ~1s because 96%->100% is ~1s of 25s */
}


.intro-started .loader-progress-bar span {
   animation: sweep 26s linear forwards;
}

.choose-persona {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    width: 80%;
}

.persona-grid {
    display: flex;
    justify-content: center;
    column-gap: 30px;
}


.persona-single img {
    max-width: 100%;
}
.persona-single {
    width: 280px;
    height: auto;
    filter: brightness(0.4);
    transition:.5s ease all;
}


.persona-single.active {
    filter: brightness(1);
    transform: scale(1.15);
}

.persona-single-tab {
    opacity: .5;
}
.persona-single-tab.active {
    opacity: 1;
    color: #4FCDB0;
}
.persona-single.active {
    filter: brightness(1);
    transform: scale(1.15);
    margin: 0px 0px;
}
.persona-tabs {
    font-family: 'MarkOffcForMC-Medium';
}

.choose-persona-button {
    margin-top: 100px;
    margin-bottom: 50px;
    width: 210px;
    margin-left: auto;
    margin-right: auto;
    background: rgb(255 255 255 / 10%);
    border-radius: 20px;
    padding: 10px 30px;
}

.persona-tabs {
    display: flex;
    justify-content: center;
    column-gap: 60px;
    font-size: 20px;
}


.single-persona-contant-wrapper {
    position: absolute;
    left: 170px;
    top: 30%;
    width: 50%;
    text-align: left;
    z-index: 999999;
}

.title-persona {
    font-size: 50px;
    font-family: 'MarkWebPro-Bold W01';
}

.title-persona-content {
    font-size: 24px;
}

.single-persona-contant-wrapper {
    position: absolute;
    left: 170px;
    top: 30%;
    width: 40%;
    text-align: left;
    z-index: 999999;
}

.title-persona {
    line-height: 130%;
}

.launch-button {
    background: #4FCDB0;
    color: #141413;
    padding: 14px 20px;
    max-width: 210px;
    border-radius: 50px;
    margin-top: 70px;
    font-size: 21px;
    font-family: 'MarkOffcForMC-Medium';
    text-align: center;
}


.title-persona-content {
    max-width: 620px;
}

.single-persona-intro {
    opacity: 0;
    transition: 1s ease all;
}

.single-persona-intro.active {
    opacity: 1;
}


.left-box-content {
    position: absolute;
    left: 170px;
    top: 30%;
    width: 40%;
    text-align: left;
    z-index: 999999;
}
.text-content {
    max-width: 620px;
    font-size: 24px;
}
.title-left-box {
    font-size: 50px;
    font-family: 'MarkWebPro-Bold W01';
    line-height: 130%;
}

.input-box {
    border: 1px solid #333333;
    border-radius: 40px;
    padding: 40px;
}

.analysis-box {
    padding: 50px;
    border-radius: 60px;
}

.input-box input {
    pointer-events: none;
}

[ai-demo="deep-fake"] .left-ai-demo-app-wrapper .button-main {
    background: #4FCDB0;
    color: #141513;
    padding: 14px 30px;
    max-width: 270px;
    border-radius: 50px;
    margin-top: 70px;
    font-size: 21px;
    font-family: 'MarkOffcForMC-Medium';
    width: 100%;
    text-align: left;
}


.left-ai-demo-app-wrapper img {
    margin-left: auto;
    height: 25px;
    float: right;
    top: 5px;
    position: relative;
    right: -10px;
}

.row-input-box-row {
    display: flex;
    text-align: left;
    column-gap: 20px;
    margin-top: 30px;
}

.alert-input-content {
    opacity: .7;
}
.alert-input-content-text {
    font-size: 18px;
}
.alert-input-content-title {
    font-size: 20px;
    font-family: 'MarkWebPro-Bold W01';
    line-height: 130%;
}

.alert-input-box {
    opacity: 0;
    transition: 1s 
ease all;
}

.alert-input-box.info-generated {
    opacity: 1;
}

.notice-box {
    display: flex;
    column-gap: 20px;
    padding: 40px;
    background: #27665854;
    border-radius: 20px;
    max-width: 600px;
    width: 100%;
}

.notice-box.hidden-element {
    top: 100px;
    position: relative;
    transition: 1s 
ease all;
    opacity: 0;
}


.notice-box  {
    top: 0px;
    position: relative;
    transition: 1s 
ease all;
    opacity: 1;
}


.button-main.hidden-element {
    pointer-events: none;
    top: 100px;
    position: relative;
    transition: 1s 
ease all;
    opacity: 0;
}

.button-main {
 
    top: 0px;
    position: relative;
    transition: 1s 
ease all;
    opacity: 1;
}

div#auto-fill.hidden-element {
    display: none;
}

div#selfie-verification {
    max-width: 400px;
}

.notice-box * {
    opacity: .7;
}

.image-preload-single.active {
    position: relative;
    opacity: 1;
}
.image-preload-single {
    position: absolute;
    opacity: 0;
    border-radius: 20px;
    overflow: hidden;
}

.info-notice-text {
    font-family: 'MarkOffcForMC-Medium';
    margin-top: 10px;
}
.image-preload img {
    display: block;
}

.image-preload-single img {
    width: 100%;
    object-fit: cover;
    height: 100%;
}
.analysis-box.box-capture-image {
    border: 2px solid #67676736;
}
.info-notice {
    position: absolute;
    z-index: 99;
    text-align: left;
    top: 80px;
    left: 90px;
    max-width: 170px;
}

.image-preload {
    border: 1px solid #cfcfcf57;
    border-radius: 40px;
}

.analysis-box.box-capture-image {
    background: transparent;
}

.image-preload-single.placeholder img {
    max-width: 100%;
    object-fit: cover;
}
.image-preload-single.placeholder {
    position: relative;
}

.image-preload-single.active {
    position: absolute;
    opacity: 1;
}

.image-preload {
    position: relative;
}

.camera-capture {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
}

.camera-video {
    width: 100%;
    height: 100%;
}

.image-placeholder {
    height: 100%;
    width: 100%;
    border-radius: 40px;
}

.camera-video video {
    width: 100%;
    height: 100%;
}

.photo-navigator {
    border-radius: 50%;
    border-color: WHITE;
}

.camera-video {
    border: 0px;
    border-radius: 40px;
}

.camera-activated .image-preload-single.active {
    width: 20%;
  
    right: 20px;
    top: 20px;
    border-radius: 20px;
 
    height: auto;
}

  .image-preload-single {
 transition: 1s ease all;
}

span.label-photo {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translate(-50%, 0%);
    font-family: 'MarkOffcForMC-Medium';
    opacity: 0;
}

span.label-photo {
    width: 100%;
    bottom: 10px;
}
.image-preload-single.active {
    position: absolute;
    opacity: 1;
    width: 100%;
    right: 0px;
    top: 0px;
  
}

.camera-activated span.label-photo {
    transition: 1s 
ease all 1s;
    opacity: 1;
}

.inner-steps.hide-inner-step * {
    pointer-events: none;
}

.info-notice-text {
    position: absolute;
        transition: 1s 
ease all 1s;
}

.camera-activated .info-notice-text.id-upload {
    top: 100px;
    opacity: 0;
}

.camera-activated .info-notice-text.camera-guide {
    top: 0px;
    opacity: 1;
}

.info-notice {
    width: 130px;
}

.info-notice-text.camera-guide {
    opacity: 0;
    top: 100px;
}


.camera-activated .info-notice-text.camera-guide {
    top: 30px;
    opacity: 1;
}

.info-notice-text.id-upload {
    top: 30px;
}

.camera-action:first-child {
    border-right: 1px solid #494949;
}
.photo-navigator {
    position: absolute;
    width: 30vw;
    height: 30vw;
    border: 1px solid #84DCC8;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.camera-nav {
    position: absolute;
    right: 4%;
    left: 4%;
    bottom: 30px;
    background: #141413ad;
    border: 1px solid #cfcfcf57;
    border-radius: 40px;
}

.camera-nav-row > div {
    width: 50%;
    padding: 20px 30px;
}
.camera-nav-row {
    display: flex
;
}
.camera-nav {
    z-index: 999999999999;
}
.camera-button {
    background: #311c0085;
    border: 1px solid #613800;
    border-radius: 40px;
    padding: 15px 10px;
    margin-bottom: 10px;
    color: #F38B00;
}

.photo-navigator {
    position: absolute;
    width: 440px;
    height: 440px;
    border: 1px solid #84DCC8;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.analysis-box.box-capture-image .gradient-overlay {
    top: auto;
    height: 480px;
    bottom: -210px;
    z-index: 1;
    left: -400px;
    right: -400px;
}
.camera-action.active .camera-button {
    background: #F38B00;
    color: #311C00;
}
.analysis-box.box-capture-image .gradient-overlay img {
    opacity: 1;
}

.analysis-box.box-capture-image .gradient-overlay {
    opacity: 0;
    transition: 1s 
ease all;
}

.camera-activated .analysis-box.box-capture-image .gradient-overlay {
    opacity: 1;
}

.camera-action.deactive {
    opacity: .3;
    pointer-events: none;
}

.camera-nav {
    opacity: 0;
    transition: 1s 
ease all;
}

.camera-activated .camera-nav {
    opacity: 1;
    transition: 1s 
ease all;
}

.single-persona-intro, .single-persona-intro * {
    pointer-events: none;
}


.single-persona-intro.active, .single-persona-intro.active * {
    pointer-events: auto;
}

.left-box-content.hidden-element {
    top: 50%;
    opacity: 0;
    transition: 1s 
ease all;
    pointer-events: none;
}

.left-box-content {
 
    transition: 1s 
ease all;
}

div#Capture-Photo img {
    margin-right: auto;
    margin-left: 0px;
    right: auto;
    float: left;
    left: -7px;
    top: 3px;
}


div#Capture-Photo {
    max-width: 240px;
}

.inner-steps.step-5.image-generated .image-placeholder-generates
 {
    z-index: 99999999999;
}

.camera-button.simulated-feed {
    position: relative;
    overflow: hidden;
}

.camera-button.simulated-feed > span:not(.button-label) {
    position: absolute;
    background: #f38b0152;
    left: 0px;
    top: 0px;
    bottom: 0px;
    display: block;
    width: 0%;
    transition: 1s ease all;
}

.camera-action.camera-feed.feed-generating .camera-button.simulated-feed > span:not(.button-label) {
    position: absolute;
    background: #f38b0152;
    left: 0px;
    top: 0px;
    bottom: 0px;
    display: block;
       width: 100%;
   transition: 95s linear all;
}

.inner-steps.step-5.camera-activated.image-generated .info-notice {
    opacity: 0;
}

.image-placeholder-generated {
    opacity: 0;
}

.inner-steps.step-5.camera-activated.image-generated.feed-open .image-placeholder-generated {
    opacity: 1;
}

.camera-action.camera-feed.feed-generating span.button-label {
    opacity: .5;
}

div#Recapture-Photo {
    max-width: 240px;
}

div#Recapture-Photo img {
    margin-right: auto;
    margin-left: 0px;
    right: auto;
    float: left;
    left: -7px;
    top: 3px;
}

.left-box-content.image-capture-instruction .button-rows {
    display: block;
}

div#Recapture-Photo {
    top: -140px;
}

 

.info-notice.hidden-element {
 
    opacity: 0;
    transition: 1s 
ease all;
}

.image-placeholder-generated {
    transition: 1s  ease opacity ;
}

.feed-open .image-placeholder {
    opacity: 0;
        transition: 1s  ease opacity ;
    
}

.image-placeholder {
    transition: 1s 
ease opacity;
}

.image-scaner svg {
    position: relative;
    top: -9%;
}

.photo-navigator {
 
    border: 1px solid #ffffff;
  
}

.camera-action.camera-feed > .button-label {
    opacity: .3;
}


.camera-action.camera-feed.simulated-feed-ready.active .button-label {
    opacity: 1;
}


.feed-open .image-scaner.image-captured {
    opacity: 0;
}

.inner-steps.step-5.camera-activated.image-generated.feed-open .left-box-content.hidden-element.verify-identity-instruction {
    opacity: 1;
    top: 30%;
}

.inner-steps.step-5.camera-activated.image-generated.feed-open .left-box-content.image-capture-instruction {
    opacity: 0;
}

.inner-steps.step-5.camera-activated.image-generated .left-box-content.hidden-element.verify-identity-instruction  {
    opacity: 0;
    top: 30%;
}


div#Recapture-Photo img {
    margin-right: 10px;
 
}
.result-box .image-placeholder-generated {
    opacity: 1;
}
.inner-steps.step-5.camera-activated.image-generated.feed-open .left-box-content.image-capture-instruction {
    opacity: 0;
    pointer-events: none;
}
.info-notes .ai-demo-app-title {
    margin-bottom: 20px;
}
.inner-steps.step-5.camera-activated.image-generated.feed-open .left-box-content.hidden-element.verify-identity-instruction {
    opacity: 1;
    top: 30%;
    pointer-events: auto;
}

div#Verify-identity {
    text-align: center;
    max-width: 220px;
}
.photo-box .image-placeholder-generated {
    opacity: 1;
}

.inner-steps.step-6 .progress-bar-box {
    position: absolute;
    right: 5%;
    left: 5%;
    bottom: 5%;
    background: #141413ad;
    border: 1px solid #cfcfcf57;
    border-radius: 30px;
}

.inner-steps.step-6 .analysis-box {
    border: 1px solid #541113;
}

.result-box {
    overflow: hidden;
    border-radius:40px;
    position: relative;
}

img.alert {
    position: absolute;
    left: 30px;
    top: 30px;
}

.inner-steps.step-6 .progress-bar-box {
    z-index: 99999;
    background: #000000;
    left: 10px;
    bottom: 10px;
    right: 10px;
}

.analysis-box {
    max-width: 80%;
    margin-left: 0px;
    width: 100%;
    margin-left: auto;
    height: 85%;
}

.result-box {
    height: 100%;
}

.image-placeholder-generated img {
    display: block;
    height: 100%;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.image-preload {
    height: 100%;
}


.image-preload-single {
    height: 100%;
}


.inner-steps.step-6 .ai-demo-app-description {
    font-size: 28px;
    max-width: 630px;
}


.inner-steps.step-6 .progress-bar-box {
    z-index: 99999;
    background: #000000;
    left: 10px;
    bottom: 10px;
    right: 10px;
    border: 1px solid #541113;
}

.inner-steps.step-6 .ai-demo-app-description {
    font-size: 28px;
    max-width: 630px;
}

.final-result-row > div {
    width: 50%;
}

.inner-steps.step-6 .final-result-row img {
    margin-left: 0px;
    margin-top: 10px;
    max-width: 120px;
}

.inner-steps.step-6 .progress-bar-single > span {
    font-size: 19px;
    text-transform: none;
    letter-spacing: 0px;
}


.inner-steps.step-6 .final-result-row img {
    margin-left: 0px;
    margin-top: 10px;
    height: 35px;
    width: auto;
        max-width: max-content;
}

.final-result-row > div {
    width: 50%;
}
.final-result-row {
    display: flex;
}

.inner-steps.step-6 .progress-bar-single {
    margin-top: 0px;
    margin-bottom: 20px;
}

.inner-steps.step-6 .final-result-row:last-child .progress-bar-single {
    margin-top: 0px;
    margin-bottom: 0px;
}


.progress-bar-single.risk-high * {
    z-index: 2;
}

.progress-bar-single.risk-high:before {
    content: "";
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 30px;
    display: block;
    width: auto;
    height: auto;
    position: absolute;
    background: #C9161D;
    background: linear-gradient(180deg, rgb(201 22 29 / 17%) 0%, rgb(201 22 29 / 57%) 50%);
}

.progress-bar-single.risk-high {
    position: relative;
}

.hide-inner-step.inner-steps.step-6 .progress-bar-box {
    bottom: -500px;
    transition: 1s 
ease all;
        opacity: 0;
}

.inner-steps.step-6 .progress-bar-box {
    bottom: 10px;
    transition: 1s 
ease all;
    opacity: 1;
}

 
.inner-steps.step-6 .info-notes .ai-demo-app-description {
    font-size: 20px;
    max-width: 630px;
}

.detected-label {
    position: absolute;
    right: 35px;
    top: 35px;
    z-index: 9999;
}

.gradient-double {
    position: absolute;
    bottom: 0px;
    height: 300px;
    right: 0px;
    left: 0px;
    z-index: 999;
    width: 100%;
}

.gradient-double img {
    position: absolute;
    right: auto;
    bottom: 0px;
    object-fit: contain;
    width: 280%;
    height: auto;
    top: 130%;
    left: 30%;
    transform: translate(-50%, -50%);
}


.inner-steps.step-7 div#back-to-demos {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    margin: 0px;
}

.inner-steps.step-7 .restart-button {
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
}

.inner-button-last-step {
    position: absolute;
    z-index: 999;
    top: 0px;
    right: 0px;
    left: 0px;
    bottom: 0px;
}

.video-background svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 22;
}

.slide-ai-demo-single-wrapper video {
    border-radius: 30px;
    overflow: hidden;
}


.slide-ai-demo-single-wrapper > div {
    height: 790px;
    width: 585px;
    margin: auto;
    border-radius: 30PX;
}

.slide-ai-demo-single-wrapper > div {
    overflow: hidden;
}

.inner-steps.step-6 .progress-bar-box {
    z-index: 9999999999999999;
}

@media only screen and (min-device-width: 375px) and (max-device-width: 1050px) and (orientation: portrait) {
    body:after {
     display:none;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 1050px) and (orientation: portrait) {
    body > * {
        opacity: 1;
        background: transparent;
    }
}

.big-title {
    font-family: 'MarkOffcForMC-Medium';
    font-size: 42px;
    line-height: 120%;
}
.intro-description {
    font-size: 16px;
}

.small-title {
    font-size: 14px;
}
.main-loop.video-full svg {
    height: 60vh;
}
.intro-description {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

div#logo {
    left: 50% !important;
    top: 45px;
    transform: translate(-50%, 0%) !important;
}

    .app-logo.p-absolute img {
        max-width: 50px;
    }
    
    .intro-description {
    max-width: 330px;
}

.button-main.start-button {
    background: #4FCDB0;
    color: #141413;
    padding: 12px 20px;
    max-width: 190px;
    border-radius: 50px;
    margin: auto;
    margin-top: 40px;
    font-size: 18px;
    font-family: 'MarkOffcForMC-Medium';
}

.single-step.ai-demos {
    flex-wrap: wrap;
}


.main-wrapper-steps-content {
    width: 100%;
    height: 100%;
    display: flex;
}

.ai-demo-main-content {
    padding-top: 50px;
    padding-left: 0px;
}

.single-ai-demo-description {
    font-size: 16px;
    margin-top: 30px;
}
.main-demo-title {
    background: linear-gradient(26deg, #51b39d 0%, #ffffff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-inline: .16em;
    margin-inline: -.12em;
    overflow: visible;
    font-family: 'MarkOffcForMC-Medium';
    font-size: 32px;
    line-height: 110%;
}

.button-main.button-launch-ai-demo {
    background: #4FCDB0;
    color: #141413;
    padding: 12px 20px;
    max-width: 220px;
    border-radius: 50px;
    margin-top: 20px;
    font-size: 18px;
    font-family: 'MarkOffcForMC-Medium';
    text-align: center;
}

.main-wrapper-steps-content {
    width: 100%;
    height: 50%;
    display: flex;
}

.main-wrapper-ai-demos-content-carousel {
    width: 100%;
}

.slide-ai-demo-single-wrapper video {
    height: 100%;
    width: 100%;
    margin: auto;
    border-radius: 30PX;
}


.slick-vertical .slick-slide {
    height: auto;
}

.ai-demo-slider .slick-track {
    height: auto;
}

.ai-demo-slider {
    left: 0px;
}

.ai-demo-signle.active-demo .main-demo-title {
    text-align: center;
}

.ai-demo-signle.active-demo .single-ai-demo-description {
    text-align: center;
}

.button-main.button-launch-ai-demo {
    margin-left: auto;
    margin-right: auto;
}

.slide-ai-demo-single-wrapper > div {
    height: auto;
    width: auto;
    margin: auto;
    border-radius: 30PX;
}

.slide-ai-demo-single {
    height: auto;
}

.main-wrapper-ai-demos-content-carousel {
    padding: 0px 20px;
}


.main-wrapper-ai-demos-content-carousel {
    height: 50%;
}

.ai-demo-slider {
    overflow: visible;
    height: 100%;
}

.single-step.intro > div {
    position: relative;
    top: 5%;
}

.main-wrapper-ai-demos-content-carousel {
    max-width: 100%;
    margin: auto;
}

.ai-demo-slider .slick-list {
    height: 100% !important;
}

.ai-demo-slider .slick-list {
    height: 100% !important;
}

.ai-demo-slider .slick-track {
    height: 100%;
}

.slick-slide > div {
    height: 100%;
}

.slide-ai-demo-single {
    height: 100%;
}

.slide-ai-demo-single-wrapper > div {
    height: 100%;
    width: 100%;
}


.slick-slide > div {
    width: 85%;
    margin: auto;
}

.ai-demo-slider ul.slick-dots {
    position: absolute;
    right: auto;
    top: auto;
    transform: translate(-50%, 0%);
    bottom: 10px;
    display: flex;
    left: 50%;
    width: 170px;
}

.ai-demo-slider ul.slick-dots li.slick-active button {
    background: #4FCDB0;
    transition: 1s 
ease all;
    height: 7px;
    border-radius: 5px;
    width: 30px;
}

ul.slick-dots li {
    width: auto;
}

.ai-demo-slider ul.slick-dots {
    list-style: none;
    background: #10292333;
    padding: 10px 20px;
    border-radius: 40px;
}


.main-wrapper-ai-demos-content-carousel {
    padding: 0px 0px;
}


.ai-demo-slider .slick-list {
    overflow: visible;
}

.slick-slide.is-next-1 .slide-ai-demo-single-wrapper > div {
    transform: scale(.7) rotate(-13deg) translate(-70%, -30%);
    opacity: .8;
    transition: 1s 
ease all;
}

.slick-slide.is-prev-1 .slide-ai-demo-single-wrapper > div {
    transform: scale(.7) rotate(13deg) translate(70%, -30%);
    opacity: .8;
    transition: 1s 
ease all;
}

.slick-slide > div {
 
    height: 100%;
    width: auto;
}

.slide-ai-demo-single-wrapper > div {
    height: auto;
    width: auto;
    margin: auto;
    border-radius: 20px;
}

.slide-ai-demo-single-wrapper > div {
    height: 100%;
}

.slide-ai-demo-single-wrapper video {
    border-radius: 0px;
}

.big-title, .main-demo-title {
    font-size: 10vw;
}

 .main-demo-title {
    font-size: 6vw;
}

.intro-description, .single-ai-demo-description {
    font-size: 3.5vw;
}

.button-main.button-launch-ai-demo {
    font-size: 3.5vw;
    width: 50vw;
}

.main-wrapper-ai-demos-content-carousel {
    height: 85%;
    margin-top: auto;
    margin-bottom: 0px;
}

.slide-ai-demo-single-wrapper > div {
    height: 100%;
    width: 100%;
}

.main-demo-title {
    opacity: 1;
}
.button-main.button-launch-ai-demo {
    margin-top: 40px;
}
.slide-ai-demo-single-wrapper video {
    height: calc(100% - 80px);
}

.slide-ai-demo-single-wrapper video {
    height: calc(100% - 200px);
    border-radius: 20px;
    overflow: hidden;
}


[ai-demo="deep-fake"] .step-1 .video-background video, [ai-demo="deep-fake"] .step-2 .video-background video {
    height: 70%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.show-close-demo.close-demo {
    position: absolute;
    z-index: 9999999999;
    right: 20px;
    top: 20px;
    transition: 1s 
ease;
}

.close-demo.show-close-demo svg {
    width: 40px;
}

div#logo {
    left: 50% !important;
    top: 30px;
    transform: translate(-50%, 0%) !important;
}

.button-main.start-button {
      font-size: 3.5vw;
}

.loader-progress-bar {
    height: 2px;
    width: 280px;
    background: #393939;
    margin-bottom: 20px;
}

.persona-grid {
    display: block;
}


.choose-persona {
    width: 100%;
}
 
.persona-grid .slick-list.draggable {
    overflow: visible;
}

.persona-grid .slick-list.draggable {
    padding-right: 120px;
}

.choose-persona-button {
     font-size: 3.5vw;
    width: 50vw;
    background: #4FCDB0;
    color: #141413;
    padding: 12px 20px;
    max-width: 220px;
    border-radius: 50px;
    font-family: 'MarkOffcForMC-Medium';
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 60px;
}

.persona-single {
    padding: 20px;
}

.persona-name {
    line-height: 100%;
}
.persona-name {
    font-size: 34px;
    margin-top: 30px;
    font-family: 'MarkOffcForMC-Medium';
}


.single-persona-contant-wrapper {
    left: 0px;
    right: 0px;
    top: auto;
    bottom: 70px;
    text-align: center;
    width: 100%;
}

.title-persona {
    font-size: 8vw;
}


.title-persona-content {
    font-size: 4vw;
    max-width: 85%;
    margin: auto;
}

.launch-button {
    margin: auto;
    font-size: 3.5vw;
    margin-top: 30px;
}

body#categories {
    width: 100%;
    max-width: 100%;
}

.product-page div#product-loader {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    color: white;
    display: flex;
    transition: 2.5s all;
    top: 0px;
}

.slide-ai-demo-single-wrapper {
    padding: 0px 10px;
}








.main-wrapper-ai-demos-content-carousel .slick-slide {
    opacity: .2;
        transition: 1s 
ease opcity;
}

 

.main-wrapper-ai-demos-content-carousel .slick-slide.slick-current.slick-center {
    opacity: 1;
    transition: 1s 
ease opcity;
}

.slide-ai-demo-single-wrapper video {
    pointer-events: none;
}

.skip-button {
    color: #4FCDB0;
    font-size: 16px;
}

.loader-progress-bar {
    height: 2px;
    width: 220px;
    background: #393939;
    margin-bottom: 20px;
}

.persona-single img {
    height: 300px;
    width: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 20px;
}

.persona-name {
    font-size: 24px;
    margin-top: 30px;
    font-family: 'MarkOffcForMC-Medium';
}

.choose-persona-button {
    margin-top: 30px;
}

.persona-name {
    font-size: 24px;
    margin-top: 20px;
    font-family: 'MarkOffcForMC-Medium';
}

.ai-demo-app-wrapper {
    flex-wrap: wrap;
}

.ai-demo-app-wrapper .left-ai-demo-app-wrapper {
    width: 100%;
}

.left-box-content {
    position: relative;
    left: 0px;
    top: 0%;
    width: 100%;
    text-align: left;
    z-index: 999999;
}


.title-left-box {
    text-align: center;
    font-size: 6vw;
}

.title-left-box {
    margin-top: 80px;
}

.ai-demo-app-wrapper > div {
    width: 100%;
}

.analysis-box {
    max-width: 100%;
}

.analysis-box {
    padding: 0px;
}

.input-box {
    margin-top: 0px;
    border-radius: 15px;
}

.right-ai-demo-app-wrapper-inner {
    padding: 0px 20px;
}
.analysis-box {
    margin-top: 0px;
}

.input-single input {
    background: #070707;
    background: linear-gradient(273deg, rgba(7, 7, 7, 0) 0%, rgba(15, 15, 15, 1) 100%);
    border-radius: 80px;
    border: 1px solid #242424;
    font-size: 11px;
    font-family: 'MarkOffcForMC-Medium';
    padding: 10px 20px;
    color: white;
    width: 100%;
}

.input-label {
    font-size: 10px;
    color: #4FCDB0;
    margin-bottom: 10px;
}

.input-label {
    text-transform: uppercase;
    margin-bottom: 5px;
}

.input-box {
    border: 1px solid #333333;
    border-radius: 20px;
    padding: 20px;
}

.analysis-box {
 
    border-radius: 20px;
}

.input-single {
    margin-bottom: 10px;
}

.right-ai-demo-app-wrapper-inner {
    display: block;
}

.analysis-box {
 
    height: auto;
}

.breadcrubms-info {
    display: flex;
    position: absolute;
    bottom: 30px;
    left: 50%;
    column-gap: 20px;
    max-width: 60%;
    transform: translate(-50%, 0%);
}

div#auto-fill, div#Submit-data {
    font-size: 3.5vw;
    width: 50vw;
    background: #4FCDB0;
    color: #141413;
    padding: 12px 20px;
    max-width: 220px;
    border-radius: 50px;
    font-family: 'MarkOffcForMC-Medium';
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

.ai-demo-app-wrapper {
    display: block;
}

.ai-demo-app-wrapper .left-ai-demo-app-wrapper {
    margin-bottom: 20px;
}

div#auto-fill img, div#Submit-data img {
    float: right;
    width: 16px;
    position: relative;
    top: 2px;
}

.input-single:last-child {
    margin-bottom: 0px;
}

.ai-demo-app-wrapper .left-ai-demo-app-wrapper {
    display: block;
}

.left-box-content.hidden-element {
    display: none;
}


div#selfie-verification {
    font-size: 3.5vw;
    background: #4FCDB0;
    color: #141413;
    padding: 12px 20px;
    max-width: 80%;
    border-radius: 50px;
    font-family: 'MarkOffcForMC-Medium';
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

div#selfie-verification img {
    margin-left: auto;
    height: 17px;
    float: right;
    top: 4px;
    position: relative;
    right: -6px;
}

.image-preload {
    border: 1px solid #cfcfcf57;
    border-radius: 20px;
}

.analysis-box.box-capture-image {
    padding: 20px;
}

.camera-nav-row {
    column-gap: 10px;
    row-gap: 10px;
    padding: 5px 5px;
}
.info-notice-text {
    position: relative;
    transition: 1s 
ease all 1s;
    top: 0px;
    margin: 0px;
}
.info-notice * {
    font-size: 12px;
}
.info-notice-icon svg {
    width: 19px;
}
.info-notice {
    margin-bottom: 20px;
}
.info-notice-text.id-upload {
    top: 0px;
}
.info-notice-text.camera-guide {
    opacity: 0;
    top: 100px;
    position: absolute;
}
.analysis-box.box-capture-image {
    padding: 10px;
    width: 85%;
}

.step-5 .breadcrubms-info {
    bottom: 30px;
}

.ai-demo-app-wrapper > div {
    width: 100%;
    display: block;
}


.info-notice {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    max-width: 100%;
    text-align: center;
}

.button-rows {
    display: block;
}

div#Capture-Photo {
    font-size: 3.5vw;
    background: #4FCDB0;
    color: #141413;
    padding: 12px 20px;
    max-width: 180px;
    border-radius: 50px;
    font-family: 'MarkOffcForMC-Medium';
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

div#Capture-Photo img {
    height: 20px;
}

.inner-steps.step-5 .button-rows {
    bottom: -100px;
    position: relative;
    opacity: 0;
    top: unset;
    transition: 1s 
ease all;
}

.inner-steps.step-5.camera-activated div#selfie-verification {
    bottom: -200px;
    opacity: 0;
}

.inner-steps.step-5.camera-activated .button-rows {
    opacity: 1;
    bottom: 60px;
}


.camera-activated .info-notice-text.camera-guide {
    left: 50%;
    transform: translate(-50%, 0%);
    width: 100%;
}

.camera-nav {
    position: relative;
    right: 0px;
    left: 0px;
    bottom: 0px;
    background: #141413ad;
    border: 1px solid #cfcfcf57;
    border-radius: 40px;
}

.camera-activated .image-preload-single.active {
    width: 100%;
    right: 0px;
    top: 0px;
    border-radius: 20px;
    
    height: auto;
    opacity: 0;
}

.photo-navigator {
    position: absolute;
    width: 200px;
    height: 200px;
    border: 1px solid #84DCC8;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.camera-activated .info-notice-text.camera-guide {
    top: 30px;
    opacity: 1;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 100%;
}

.info-notice-text.camera-guide {
 
    opacity: 0;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 100%;
}

.analysis-box.box-capture-image .button-rows {
    position: absolute;
}

.inner-steps.step-5.camera-activated .button-rows {
    z-index: 999;
    width: 100%;
    left: 0px;
    bottom: 30px;
}

.camera-nav {
    position: relative;
    right: 0px;
    left: 0px;
    bottom:-450px;
    background: #141413ad;
    border: 1px solid #cfcfcf57;
    border-radius: 40px;
}

.camera-activated .camera-nav {
    opacity: 1;
    transition: 1s 
ease all;
    bottom: 50px;
}

.camera-nav-row > div {
    width: 50%;
    padding: 10px 10px;
}

.camera-button {
    font-size: 11px;
}

.camera-button {
    margin: 0px;
}

.camera-button {
    background: #311c0085;
    border: 1px solid #613800;
    border-radius: 40px;
    padding: 10px 10px;
    margin-bottom: 10px;
    color: #F38B00;
}

.camera-nav-row > div {
    width: 50%;
    padding: 5px 5px;
}

.camera-action:first-child {
    border-right: none;
}

.camera-nav {
    max-width: 85%;
    margin: auto;
}

.camera-button {
    margin: 0px;
}

div#Recapture-Photo {
    font-size: 3.5vw;
    background: #4FCDB0;
    color: #141413;
    padding: 12px 20px;
    max-width: 180px;
    border-radius: 50px;
    font-family: 'MarkOffcForMC-Medium';
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    top: auto;
}

div#Recapture-Photo img {
    height: 20px;
}

div#Recapture-Photo {
    position: absolute;
}

div#Recapture-Photo {
    left: 50%;
    transform: translate(-50%, 0%);
    width: 100%;
    bottom: 0px;
}


.photo-navigator {
    position: absolute;
    width: 180px;
    height: 180px;
    border: 1px solid #ffffff;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.image-placeholder {
    height: 100%;
    width: 100%;
    border-radius: 20px;
}


.camera-video {
    border: 0px;
    border-radius: 20px;
}

.inner-steps.step-5.camera-activated.image-generated.feed-open .left-box-content.image-capture-instruction {
    opacity: 1;
    pointer-events: none;
}

.camera-video video {
 
    border-radius: 20px;
 
}

div#Verify-identity {
    font-size: 3.5vw;
    background: #4FCDB0;
    color: #141413;
    padding: 12px 20px;
    max-width: 180px;
    border-radius: 50px;
    font-family: 'MarkOffcForMC-Medium';
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 100%;
    bottom: 0px;
    top: auto;
}

.info-notice.notice-after-generation {
    position: absolute;
    top: 40px;
    opacity: 0;
    letter-spacing: -0.5px;
        padding: 0px 10px;
}


.inner-steps.step-5.camera-activated.image-generated.feed-open .info-notice.notice-after-generation.hidden-element {
    opacity: 1;

}


.left-ai-demo-app-wrapper-inner {
    margin-left: 0px;
}


.ai-demo-app-title {
    text-align: center;
    font-size: 6vw;
    padding: 0px 20px;
}

.inner-steps.step-6 .analysis-box {
    max-width: 85%;
}
.inner-steps.step-6 .analysis-box {
    padding: 10px;
}
.result-box {
    overflow: hidden;
    border-radius: 20px;
    position: relative;
}


.left-ai-demo-app-wrapper-inner {
    margin-top: 25%;
}

.inner-steps.step-6 .progress-bar-box {
    z-index: 99999;
    background: #000000;
    left: 0px;
    bottom: 0px;
    right: 0px;
    border: 0px;
    transition: tan;
}

.inner-steps.step-6 .progress-bar-box {
    z-index: 99999;
    background: #000000;
    left: 0px;
    bottom: 0px;
    right: 0px;
    border: 0px;
    transition: tan;
    padding: 0px;
    border-radius: 10px;
}

.final-result-row > div {
    width: 100%;
}


.progress-bar-single.risk-high:before {
    content: "";
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius: 10px;
    display: block;
    width: auto;
    height: auto;
    position: absolute;
    background: #C9161D;
    background: linear-gradient(180deg, rgb(201 22 29 / 17%) 0%, rgb(201 22 29 / 57%) 50%);
}

.inner-steps.step-6 .progress-bar-single > span {
    width: 50%;
}
.inner-steps.step-6 .final-result-row img {
    margin-left: 0px;
    margin-top: 10px;
    height: auto;
    width: auto;
    max-width: 45%;
    margin-top: auto;
    margin-bottom: auto;
}


img.alert {
    position: absolute;
    left: 10px;
    top: 10px;
}

.inner-steps.step-6 .progress-bar-single > span {
    font-size: 14px;
    padding: 10px;
}

.step-6 .breadcrubms-info {
    bottom: 20px;
}

 

div#Continue-outro img {
    float: right;
    width: 16px;
    position: relative;
    top: 2px;
}
div#Continue-outro {
    font-size: 3.5vw;
    width: 50vw;
    background: #4FCDB0;
    color: #141413;
    padding: 12px 20px;
    max-width: 160px;
    border-radius: 50px;
    font-family: 'MarkOffcForMC-Medium';
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

div#back-to-demos {
    font-size: 3.5vw;
    width: 50vw;
    background: #4FCDB0;
    color: #141413;
    padding: 12px 20px;
    max-width: 210px;
    border-radius: 50px;
    font-family: 'MarkOffcForMC-Medium';
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
}

.restart-button img {
    max-width: 100px;
}

.inner-steps.step-4 .analysis-box {
    margin-top: 40px;
}

.analysis-box.box-capture-image {
    z-index: 999999999;
}

.left-ai-demo-app-wrapper-inner {
    margin-top: 80px;
}

.image-preload-single.placeholder img {
    max-width: 100%;
    object-fit: cover;
    display: block;
}

.inner-steps.step-7 .video-background svg {
    height: 60vh;
}

.analysis-box.box-capture-image .button-rows {
    pointer-events: none;
}


.inner-steps.step-5.camera-activated .button-rows {
    pointer-events: auto;
}

[ai-demo="deep-fake"] .video-background video {
    width: 100%;
    object-fit: cover;
}

.hide-inner-step div#auto-fill, .hide-inner-step div#Submit-data, .hide-inner-step div#selfie-verification {
    top: 300px;
    opacity: 0;
    pointer-events: none;
}


.hide-inner-step .choose-persona {
    top: 90%;
    opacity: 0;
    transition: 1s 
ease all;
}


 .choose-persona {
 
    transition: 1s 
ease all;
}

.hide-inner-step .single-persona-contant-wrapper {
    bottom: -190px;
    opacity: 0;
    transition: 1s 
ease all 1s;
}

.single-persona-contant-wrapper {
 
    transition: 1s 
ease all 1s;
}


[ai-demo="deep-fake"] .step-1 .video-background video,[ai-demo="deep-fake"] .step-2 .video-background video {
    height: 100%;
}

.intro-loader-skipper {
    position: absolute;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.persona-single img {
    height: 40vh;
 
}
.camera-nav-row {
    width: 100%;
}

.camera-nav-row > div {
    width: 50%;
    padding: 0px;
}

.inner-wrapper-change-controls {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999999;
}
.no-control-text {
    font-size: 40px;
    max-width: 420px;
    font-family: 'MarkOffcForMC-Medium';
    margin-top: 40px;
}

.back-to-demos {
    background: #4FCDB0;
    color: #141413;
    padding: 14px 20px;
    max-width: 280px;
    border-radius: 50px;
    margin-top: 70px;
    font-size: 21px;
    font-family: 'MarkOffcForMC-Medium';
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.hide-section .inner-wrapper-change-controls {
    opacity: 0;
    transition: 1s 
ease all 1s;
}


.inner-wrapper-change-controls {
    opacity: 1;
    transition: 1s 
ease all 1s;
}

.inner-wrapper-change-controls img {
    width: 80px;
    height: auto;
}

.inner-wrapper-change-controls {
    width: 80%;
}

.no-control-text {
    font-size: 6vw;
}

.back-to-demos {
    font-size: 4vw;
    margin-top: 40px;
}

.persona-grid.slick-initialized.slick-slider .slick-list {
    overflow: visible;
}

.persona-grid.slick-initialized.slick-slider .slick-track {
    overflow: visible;
}

.button-main.button-launch-ai-demo.main-button-explore {
    position: absolute;
    bottom: 50px;
    top: auto;
    transform: translate(-50%, 0%);
    left: 50%;
}

.slide-ai-demo-single-wrapper .button-main.button-launch-ai-demo {
    display: none;
}

.inner-steps.step-6 .left-ai-demo-app-wrapper-inner {
    margin-top: auto;
}

.inner-steps.step-6 .ai-demo-app-title {
    margin-top: 80px;
}

.inner-steps.step-5.hide-inner-step .analysis-box {
    top: 0px;
}

.inner-steps.step-5_1.hide-inner-step .analysis-box {
    top: 0px;
}

div#show-info {
    background: #F38B00;
}


div#show-info img {
    float: right;
    width: 16px;
    position: relative;
    top: 2px;
}
div#show-info {
    font-size: 3.5vw;
    width: 400px;
    color: #141413;
    padding: 12px 20px;
    border-radius: 50px;
    font-family: 'MarkOffcForMC-Medium';
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    max-width: 100%;
    width: 200px;
}

.inner-steps.step-6 .button-rows.deep-fake-buttons {
    display: flex;
}