@font-face {
    font-family: 'SF Pro Display Light';
    src: url('fonts/SFProDisplay-Light.eot');    
    src: url('fonts/SFProDisplay-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/SFProDisplay-Light.woff2') format('woff2'),
        url('fonts/SFProDisplay-Light.woff') format('woff'),
        url('fonts/SFProDisplay-Light.ttf') format('truetype'),
        url('fonts/SFProDisplay-Light.svg#SFProDisplay-Light') format('svg');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('fonts/SFProDisplay-Regular.eot');
    src: url('fonts/SFProDisplay-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/SFProDisplay-Regular.woff2') format('woff2'),
        url('fonts/SFProDisplay-Regular.woff') format('woff'),
        url('fonts/SFProDisplay-Regular.ttf') format('truetype'),
        url('fonts/SFProDisplay-Regular.svg#SFProDisplay-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'SF Pro Display';
    src: url('fonts/SFProDisplay-Medium.eot');
    src: url('fonts/SFProDisplay-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/SFProDisplay-Medium.woff2') format('woff2'),
        url('fonts/SFProDisplay-Medium.woff') format('woff'),
        url('fonts/SFProDisplay-Medium.ttf') format('truetype'),
        url('fonts/SFProDisplay-Medium.svg#SFProDisplay-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SF Pro Display';
    src: url('fonts/SFProDisplay-Bold.eot');
    src: url('fonts/SFProDisplay-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/SFProDisplay-Bold.woff2') format('woff2'),
        url('fonts/SFProDisplay-Bold.woff') format('woff'),
        url('fonts/SFProDisplay-Bold.ttf') format('truetype'),
        url('fonts/SFProDisplay-Bold.svg#SFProDisplay-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
body{
    margin: 0;
}
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.elm-hide{
    display: none !important;
}
.elm-show{
    display: block !important;
}
.opacity-0{
    opacity: 0 !important;
}
.opacity-08{
    opacity: 0.8 !important;
}
.opacity-09{
    opacity: 0.9 !important;
}


.dispaly-b{
    display: block;
}
.font-light{
    font-family: 'SF Pro Display Light';
    font-weight: 300;
}
.font-Medium{
    font-weight: 500;
}
img{
    max-width: 100%;
}
.w-bg{
    background-color: white;
}
.full-h{
    height: 750px;
}
/* width */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  background-color: #BFBFBF;
  border-radius: 10px;
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: white; 
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: white; 
}

button{
    width: auto;
    height: 48px;
    font-size: 20px;
    color: white;
    background-color: #FF3E3E;
    border: none;
    padding: 0 40px;
    border-radius: 30px;
}
button.next{
    font-family: 'SF Pro Display Light';
    font-size: 14px;
    background-color: #FF2B35;
    height: 32px;
    box-shadow: 0px 0px 10px rgba(255, 43, 53, 0.5);
    letter-spacing: 1px;
    padding: 0 30px;
}

button.animation span{
    position: relative;
    z-index: 1;
     font-size: 20px;
    color: white;
}

.loading{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(23, 39, 51, 0.8);
    z-index: 105;
}
.loading img{
    width: auto;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.v-center{    
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
}
.main-title{    
    font-size: 36px;
    color: white;
}
.conic {
    --background-color: transparent;
    position: relative;
    z-index: 0;
    border-radius: 10px;
    overflow: hidden;   
}
.conic::before {
        content: '';
        position: absolute;
        z-index: -2;
        left: -50%;
        top: -50%;
        width: 200%;
        height: 200%;
        background: conic-gradient(transparent 100deg, white, transparent);
        background-repeat: no-repeat;
        background-position: 0 0;
        background-image: conic-gradient(transparent, rgba(255, 0, 10, 1), transparent 100%);
        animation: rotate 4s linear infinite;
}

.conic::after {
        content: '';
        position: absolute;
        z-index: -1;
        left: 2px;
        top: 2px;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        background: var(--background-color);
        border-radius: 8px;
}
@keyframes rotate {
    100% {
        transform: rotate(1turn);
    }
}

.conicRound {
    --offset: 2px;
    --background-color: transparent;
    position: relative;
    z-index: 0;
    border-radius: 50px;
    overflow: hidden;   
}
.conicRound::before {
    content: '';
    background: conic-gradient(transparent 100deg, white, transparent);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 1;
    width: 100%;
    animation: glowing 2s linear infinite;
}
.conicRound::after {
    content: '';
    background: inherit;
    border-radius: inherit;
    position: absolute;
    inset: var(--offset);
    height: calc(100% - 2 * var(--offset));
    width: calc(100% - 2 * var(--offset));
}
@keyframes glowing {
   from {
        transform: translate(-50%, -50%) scale(2.4) rotate(0turn);
    }
    to {
        transform: translate(-50%, -50%) scale(2.4) rotate(1turn);
    }
}

.hand-point{
    width: 48px;
    height: 48px;
    position: absolute;
    top: -10px;
    right: 8%;
    z-index: 5;
    rotate: 0deg;
}
.hand-point img{
    max-width: 100%;
    animation: PointArrow 1s linear infinite;
}
.hand-2{
    rotate: 180deg;
    top: auto;
    bottom: -10px;
    right: auto;
    left: 6%;
}
.hand-3{
    rotate: 270deg;        
    right: auto;
    left: 6%;
}
.hand-4{
    rotate: 90deg;
    top: auto;
    bottom: -10px;    
}
.hand-50{    
    bottom: 20%;
    top: auto;    
}
.top-40{    
    top: 40%;
    right: 2%;
}

.up-scroll-arw{
    width: 100%;
    height: 111px;
    position: sticky;
    left: 0;
    bottom: calc(100% - 110px);
    background: #172633;
    background: linear-gradient(180deg,rgba(23, 38, 51, 1) 0%, rgba(23, 38, 51, 0) 100%);
    text-align: center;
    padding: 20px 0 0;
    z-index: 110;
}
.down-scroll-arw{
    width: 100%;
    height: 111px;
    position: sticky;
    left: 0;
    bottom: calc(0% + 87px);
    background: #172633;
    background: linear-gradient(0deg,rgba(23, 38, 51, 1) 0%, rgba(23, 38, 51, 0) 100%);
    text-align: center;
    padding: 35px 0 0px 0;
    z-index: 111;
}
.down-scroll-arw.two{
    bottom: calc(0% + 0px);
}
.down-scroll-arw.three {
  top: calc(100% - 0px);
  bottom: auto;
}
.down-scroll-arw p, .up-scroll-arw p{ font-size: 14px; color: white; margin: 10px 0; display: inline-block; text-decoration: none;}
.down-scroll-arw img, .up-scroll-arw img{ display: inline-block !important;}

.hand-point.left-1{
    right:auto;
    left: 25%;
}
.hand-point-down{
    width: 61px;
    height: 50px;
    position: absolute;    
    left: 50%;
    margin-left: -30px;
    bottom: 10%;
    z-index: 10;    
}
.hand-point-down .bot-15{
    bottom: 15%;
}
.hand-point-down img{
    max-width: 100%;
    animation: PointArrowDown 1s linear infinite;
}
.hand-point-down .arrow1{
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
    opacity: 0;    
}
.hand-point-down .one{       
    animation: ScrollDown 2s ease-in-out infinite;    
    
}
.hand-point-down .two{
    animation: ScrollDownTwo 2s ease-in-out infinite;
    animation-delay: 1s;
}

@keyframes ScrollDown {
    0% {
        opacity: 0;
        zoom: 1;
        transform: scale(0.9);
    }    
    50% {
        opacity: 1;    
        transform: scale(1); 
    }    
    100% {
        opacity: 0;
        top: 100%;
        zoom: 0.5;     
        transform: scale(0.9);
    }
}
@keyframes ScrollDownTwo {
   0% {
        opacity: 0;
        zoom: 1;
         transform: scale(0.9);
    }    
    50% {
        opacity: 1;   
         transform: scale(1);  
    }    
    100% {
        opacity: 0;
        top: 100%;
        zoom: 0.5;  
         transform: scale(0.9);
    }
}

.hand-point-hint{
    width: auto;
    height: 11px;
    position: absolute;    
    left: 2%;    
    bottom: 17%;
    z-index: 10;
}
.hand-point-hint.right{
    left: auto;
    right: 2%;
}
.hand-point-hint img{
    max-width: 28px;
    display: inline-block !important;
    animation: PointArrowDown 1s linear infinite;
}
.hand-point-hint span{
    width: auto;
    position: relative;
    display: inline-block;
    font-size: 13px !important;
    font-weight: 500;
    color: black;
    vertical-align: top;
    top: 20px;
}
.hand-point-hint span.white{
    color: white;
}
.hint-TL{
    left: 4px;
    right: auto;
    top: -45px;
    bottom: auto;
}
.hint-TL.two{
    top: -40px;
}

@keyframes PointArrow {
    0% {
        margin-left: 0px;
        margin-top: 0px;
    }
    50% {
        margin-left: -10px;
        margin-top: 10px;
    }
    100% {
        margin-left: 0px;
        margin-top: 0px;
    }
}
@keyframes PointArrowDown {
    0% {
        margin-top: 0px;
    }
    50% {
        margin-top: 15px;
    }
    100% {
        margin-top: 0px;
    }
}


.desktop-bg{
    position: relative;
    display: block;    
    width: 100%;
    background-image: url('../../media/images/others/digibank-demo/backgrounds/desktopBg.png');
    background-size: cover;
    background-position: right bottom;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 900px; 
}

.main-frame{    
    font-family: 'SF Pro Display';
    font-weight: normal;    
    width: 385px;
    height: 750px;
    position: absolute; 
    display: block;
    background-image: url('../../media/images/others/digibank-demo/backgrounds/welcomeBg.png');    
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    border-radius: 58px;
    overflow-x: hidden; 
    scrollbar-width: none; /* For Firefox */ 
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);    
}
.white-bg{    
    background-color: white;
    background-image: none;
}
.mobile-frame{
    max-width:410px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.main-frame::-webkit-scrollbar {
    display: none;
}

@media (max-width: 640px) {
    .main-frame{  
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        transform: translate(0%, 0%);
        border-radius: 0rem;
    }
    .mobile-frame{
        display: none;
    }
}


.musicPlayer{
    width: 150px;
    position: absolute;
    top: 10px;
    right: 10px;
}
.musicPlayer img{
    max-width: 100%;
    display: block;
}

.musicPlayer .icon{
    width: 32px;
    height: 32px;
    position: absolute;
    top: 11px;
    right: 10px;
    z-index: 5;
    padding: 3px;
}
.musicPlayer .icon img{
    width: 26px;
    height: 26px;    
    display: block;
}
.musicPlayer .icon .progress-ring{
    width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: conic-gradient(white var(--progress-angle, 0deg), #FF3330 0deg);
	border-radius: calc(infinity * 1px);
	z-index: 10;
}

.back-btn{
    width: 50px;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
}
.back-btn2{
    width: 40px;
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
}
.skip-btn{
    width: auto;
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 5;
}
.skip-btn a{
    display: block;
    font-size: 10px;
    background-color: #FF2B35;
    border-radius: 30px;
    border: 1px solid white;
    line-height: 30px;
    color: white;
    text-decoration: none;
    padding: 0 20px;
}

.landing{
    width: 100%;
    display: block;
    text-align: center;
    /* padding: 200px 10px 0 10px; */
    padding: 73% 10px 0 10px;

}
.landing .dbs-logo{
    width: 68px;
    height: 68px;
    display: inline-block;
    vertical-align: top;
}
.landing button{
    margin: 60px 0;
    overflow: hidden !important;
}
.landing .main-title{
    width: auto;        
    display: block;    
    line-height: 34px;
}
.video-section{
    width: 100%;
    position: relative;
    display: block;
    color: white;
    text-align: center;
    display: none;
}
.video-section .video-title{
    font-size: 20px;
    padding-bottom: 20px;
}
.video-section p{
    width: 350px;
    font-family: 'SF Pro Display Light';
    display: inline-block;
    font-size: 14px;    
    font-weight: 300;
    padding: 0 60px;
}

.choose-language{
    width: 100%;
    height: 100%;
    background-image: url('../../media/images/others/digibank-demo/backgrounds/welcomeBg1.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0 auto;
    padding: 0 10px;
}
.choose-language .main-title{    
    display:block;    
    text-align: center;    
    line-height: 34px;
    padding: 0 40px;
}
.choose-language .mid-cont{
    width: 100%;
    text-align: center;
}
.choose-language .btn-main{
    width: 100%;
    padding: 50px 0;
}
.choose-language .btn-main .button{
    width: 135px;
    height: 85px;
    display: inline-block;
    line-height: 85px;
    border-radius: 20px;
    background-color: white;
    font-size: 20px;
    color: #FF3E3E;
    text-decoration: none;
    margin: 0 5px;
    border: 2px solid white;
    font-family: 'SF Pro Display Light';
}
.choose-language .btn-main .button.selected{
    background-color: #ef4444;
    color: #fff;
    border: 2px solid white;
}
.choose-language .btn-main .button.unselected{
    background-color: #ffffffbf;
    color: #6b7280;
    border: 2px solid transparent;
}
.choose-language .select-btn{
    width: 100%;
    display: block;
}
.choose-language .select-btn button{
    height: 36px;
    background-color: white;
    color: #FF3E3E;
    font-size: 16px;
    box-shadow: 0px 0px 10px rgba(255, 43, 53, 0.5);
}
.choose-language .select-btn button.disable{
    background-color: #d1d5db;
    color: #9ca3af;
    cursor: not-allowed;
    box-shadow: none;
}

 
.gallery {
    width: 100%;   
    height: 390px; 
    display: block;    
    margin-top: 0px;
}

.gallery .mascot-img {
    position: relative;      
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; will-change: transform, opacity;
    opacity: 1 !important;
}
.gallery .slide{
    width: 100%;
    position: absolute;
    left: 0;    
    top: 50%;    
    transform: translate(0%, -50%);
    padding: 50px 0 0;
}
.gallery .mascots-item .mst-ttl{
    font-size: 32px;
    color: white;
    padding-bottom: 10px;
}
.gallery .mascots-item img{
    width: 110px;
    display: inline-block;
}
.gallery .slider-arw{
    width: 100%;
    position: absolute;
    top: 55%;
    left: 0%;
    transform: translate(0%, -50%);
    z-index: 2;
}
.gallery .slider-arw #btnGuidePrev, .gallery .slider-arw #btnGuideNext {
    width: 32px;
    display: inline-block;
    position: absolute;
}
.gallery .slider-arw #btnGuidePrev{
    left: 20%;
}
.gallery .slider-arw #btnGuideNext{
    right: 20%;
}


.introductions{
 width: 100%;
 position: absolute;
 display: block;
 background-color: white;
}
.introductions .logout{
    position: absolute;
    width: 72px;
    top: 86px;
    right: 16px;
}
.introductions .back-arw{
    position: absolute;
    width: 30px;
    top: 50px;
    left: 16px;
}
.introductions .top-img{
    width: 100%;
    display: block;
}
.introductions .scroll-panel {
    width: auto;
    display: block;
    background-color: white;
    overflow-x: hidden;
}
/* Handle */
.introductions .scroll-panel::-webkit-scrollbar-thumb {
  background: #333;   
}
.introductions .scroll-panel .scroll-container{
    width: 100%;
    display: flex;
    padding: 5px;    
    margin: 0 0px;    
}
.introductions .scroll-panel .scroll-container a{
    width: auto;
    display: inline-block;
    border-radius: 5px;
    margin: 2px;
}
.introductions .scroll-panel .scroll-container a.conicRound::before{
 background-image: conic-gradient(transparent, rgba(255, 0, 10, 1), transparent 100%);   
}
.introductions .scroll-panel .scroll-container a.conicRound::after{
    background-color: white;
}
.introductions .scroll-panel .scroll-container a img{
    position: relative;
    z-index: 2;
    display: block;
}
.introductions a.deposits{
    display: inline-block;
    border-radius: 5px;
    margin: 15px 3px 2px;
}
.introductions a.deposits.conicRound::before{
 background-image: conic-gradient(transparent, rgba(255, 0, 10, 1), transparent 100%);   
}
.introductions a.deposits.conicRound::after{
    background-color: white;
}
.introductions a.deposits img{
    position: relative;
    z-index: 2;
    display: block;
    padding: 5px;
}
.introductions .last-img{
    margin-bottom: 5%;
}
.popup-main{
    width: 100%;
    height: 100%;
    position: sticky;    
    left: 0;
    top: 0;
    inset: 0;
    z-index: 100;
    pointer-events: none;
}
.info-popup{
    width: 100%;
    position: absolute;    
    left: 0;
    z-index: 10;    
    padding: 10px;    
    bottom:15%;
    pointer-events: auto;
}
.info-popup.popup1{
    bottom: 57%;
}

.info-popup .Mascot{
     width: 92px;
     display: inline-block;
     vertical-align: top;
     position: relative;
     z-index: 2;
}
.info-popup .Mascot2 img{
    max-width: none;
    width: 105px;
    margin-left: 5px;
}
.info-popup .jaan img{    
    width: 90px;    
}
.info-popup .msg-box{
     width: 240px;
     display: inline-block;
     background-color: rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.5);
    padding: 20px;
    margin-left: 10px;
    border-radius: 20px;     
    color: white;
}
.info-popup .msg-box.small{
    width: 175px;
}
@-moz-document url-prefix() {
    .info-popup .msg-box{
        background-color: rgba(0, 0, 0, 0.9);
    }
}
.info-popup .msg-box::before {
    content: '';
    width: 15px;
    height: 13px;
    position: absolute;
    top: 50px;
    left: -15px;
    background-image: url('../../media/images/others/digibank-demo/uiElements/landing/point.png');
    opacity: 0.85;
}
.info-popup .msg-box .star{
    width: 34px;
    display: block;
    margin-left: -5px;
}
.info-popup .msg-box .title{
    width: 100%;
    display: block;
    font-size: 16px;
    font-weight: 500;
}
.info-popup .msg-box .scroll-content{
    width: 105%;
    display: block;
    max-height: 210px;    
    overflow-y: auto;
    margin: 10px 0;
    padding: 0 10px 0 0;
}
.info-popup .msg-box ol{
    width: 100%;
    display: block;    
    padding: 0 0 0 20px;
    margin: 0;
    list-style-type: number;    
}
.info-popup .msg-box ol li, .info-popup .msg-box p{
    width: 100%;    
    font-size: 13px;
    font-family: 'SF Pro Display Light';
    font-weight: 300;
    letter-spacing: 0.7px;
    padding-bottom: 18px;
    margin: 0;
}
.pad-0{
    padding: 0 !important;
}
.relative{
    position: relative;
}

.digivaultEntry2{
    width: 100%;
    display: block;
    background-color: white;
}
.digivaultEntry2 .logout-btn{
    width: auto;
    position: absolute;
    bottom: 20%;
    left: 28%;
}
.digivaultEntry2 .card{
    width: 124px;
    position: absolute;
}
.digivaultEntry2 .conicRound{
    border-radius: 10px;
    background-color: #FF2B35;
    margin: 2px;
    padding: 10px;
}
.digivaultEntry2 .card img{
    position: relative;
    z-index: 1;
}
    
.digivaultEntry2 .conicRound::before{
    background-image: conic-gradient(transparent, rgba(255, 255, 255, 1), transparent 100%);   
}
.digivaultEntry2 .conicRound::after{
    background-color: white;
}
.digivaultEntry2 .card1{    
    right: 10px;
    top: 42px;
}
.digivaultEntry2 .card2{    
    right: 10px;
    bottom: 1%;
}
.digivaultEntry2 .card3{    
    left: 33%;
    top: 11%;
}
.digivaultEntry2 .card4{    
    left: 1%;
    top: 9%;
}
.digivaultEntry2 .card5{    
    left: 1%;
    top: 32%;
}
.digivaultEntry2 .card6{    
    left: 33%;
    top: 65%;
}
.digivaultEntry2 .card7{    
    left: 33%;
    top: 71%;
}
.bottom-bar{
    width: 100%;     
    position:  sticky; 
    left: 0;
    bottom: 0;
}
.footer-nav{
     width: 100%;
     height: 87px;
     display: flex;
     position:  sticky;
     left: 0;
     bottom: 0;
     text-align: center;
     background-color: #182431;
     padding: 5px 0 25px;
     z-index: 10;
     justify-content: center;
}
.footer-nav.two{
    position: absolute;
}
.footer-nav a{
    min-width: 70px;
    width: auto;    
    position: relative;
    padding: 0px;
    text-decoration: none;
    opacity: 0.7;
}
.footer-nav .conicRound{
    border-radius: 7px;
    padding: 0px 8px;
}
.footer-nav .conicRound::before{
    background: conic-gradient(transparent 100deg, white, #ef4444);
}
.footer-nav .conicRound::after{
    background-color: #182431;
}
.footer-nav a img{
    width: 24px;
    display: inline-block;
    position: relative;
    z-index: 1;
    margin-top: 5px;
}
.footer-nav a .name{
    display: block;
    font-family: 'SF Pro Display Light';
    font-size: 10px;
    letter-spacing: 1px;
    color: white;
    text-decoration: none;
    position: relative;
    z-index: 1;
    margin-bottom: 5px;
}
.footer-nav .more{
    width: 42px;
    height: auto;
    position: absolute;
    top: -10px;
    right: -5px;    
    z-index: 1;
}

.footer-nav a.active{
    opacity: 1;
}

.start-screen{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    text-align: center;
}
.start-screen .sub-ttl{
    display: block;
    font-size: 18px;
    color: white;
}
.start-screen .main-ttl{
    display: block;
    font-size: 48px;
    color: white;
    font-weight: bold;
    padding: 15px 0;
}
.start-screen .simulation-text{
    width: 101%;
    min-height: 50px;
    display: block;
    font-size: 16px;
    background-image: url('../../media/images/others/digibank-demo/backgrounds/HomeTitleBg.png');
	background-position: center;
	background-size: 100% 100%;
    padding: 15px 20%;
    margin-left: -1px;
}
.start-screen .simulation-text.one-line{
    padding: 24px 16%;
}
.start-screen .skip-btn{
    width: auto;
    display: inline-block;
    text-align: center;
    right: 0;    
    position: relative;
}
.start-screen .skip-btn a{
    width: 100px;
    height: 36px;
    line-height: 34px;
    background-color: white;
    color: #FF3E3E;
    font-size: 16px;
    box-shadow: 0px 0px 10px rgba(255, 43, 53, 0.5);
}
.start-screen .skip-btn a:hover{
    background-color: #FF3E3E;
    color: white;    
    box-shadow: none;
}

.start-screen .Mascot{
    width: 100%;
    height: 295px;
    display: block;
    margin-top: 25%;
    overflow: hidden;
}
.start-screen .Mascot img{
    width: 169px;
}
.start-screen .learnmore-btn{
    width: 100%;
    display: block;
    position: absolute;
    margin-top: 20px;
    z-index: 5;    
}
.start-screen .learnmore-btn a{
    width: auto;
    display: inline-block;
    background-color: white;
    font-size: 16px;
    color: #FD2B35;
    border-radius: 30px;    
    text-decoration: none;
    line-height: 36px;
    padding: 0 25px;
    box-shadow: 0px 0px 10px rgba(255, 43, 53, 0.5);
}
.finish-screen .animation{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;    
}
.finish-screen .animation .confetti{
    width: 200%;
    max-width: none;
    position: absolute;
    top: 0;
    left: -25%;
}
.finish-screen .animation .balloons{
    width: 60%;
    position: absolute;
    top: 0;
    left: -20%;
    animation: Balloons 4s linear infinite;
}
.finish-screen .animation .balloons.right{
    left: auto;
    right: -20%;    
}

.finish-screen .tips-main{    
    width: 80%;
    position: relative;
    top: 80px;
    left: 0;
    text-align: center;
    z-index: 5;
    margin: 0 10%;
    border: 2px solid white;
    border-radius: 40px;
    padding: 3px;
}
.finish-screen .tips-main .thumb{ 
    width: 78px;
    height: 78px;
    position: absolute;
    left: 0;
    top: 50%;    
    transform: translate(0%, -50%);
    background-color: white;
    border-radius: 50px;
    overflow: hidden;
    margin: 0px 0 0 -5px;
    z-index: 2;
}
.finish-screen .tips-main .thumb img{ 
    width: 65%;
    margin: 10% 14px;
}
.finish-screen .tips-main .thumb.jaan img{ 
     margin:10% 10px;
}
.finish-screen .tips-main .content{    
    width: 100%;
    min-height: 60px;
    position: relative;
    background-color: rgba(253, 43, 53, 0.8);    
    font-family: 'SF Pro Display Light';
    font-size: 11px;    
    color: white;    
    text-align: left;
    letter-spacing: 0.1px;
    padding: 10px 20px 10px 80px;
    border-radius: 50px;    
    box-shadow: inset 0 0 10px #000000;
    -moz-box-shadow: inset 0 0 10px #000000;
    -webkit-box-shadow: inset 0 0 10px #000000;
}
.finish-screen .tips-main .content.two{
    padding-top: 17px;
}
.noise-finish.start-screen .main-ttl{
    font-size: 36px;
}

.noise-finish .noise-note{
    width: 100%;
    display: block;
    font-size: 16px;
    color: white;
    padding: 0 10% 10px;
}
.noise-finish .finish-tips-box{
    width: 100%;
    max-width: 315px;
    display: block;
    position: relative;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0%);
}
.noise-finish .finish-tips-box .detail-box{
    width: 100%;
    position: absolute;
    display: block;
    padding: 25px 20px;
    left: 0;
    top: 0;
    text-align: left;
}
.noise-finish .finish-tips-box .detail-box .title{
    width: 100%;
    display: block;
    font-size: 20px;
    color: black;
    font-weight: bold;
    padding-bottom: 10px;
}
.noise-finish .finish-tips-box .detail-box .title .ttl-icon{
    width: 20px;
    display: inline-block;
    margin-top: 2px;
    vertical-align: top;
}
.noise-finish .finish-tips-box .detail-box ul{
    width: 100%;
    display: block;
    margin: 0;
    padding: 0 0 0 18px;
    list-style-type: number;
}
.noise-finish .finish-tips-box .detail-box ul li{
    font-size: 13px;
    color: black;
    line-height: 18px;
}
.start-screen.noise-finish .Mascot{
    opacity: 1;
    margin-top: 0;
    height: 230px;
}
.noise-finish .finish-tips-box .detail-box ul.line-h15 li{    
    line-height: 15px;
}


@keyframes Balloons {
   from {
        top:100%;
    }
    to {
        top:-100%;
    }
}
.finish-screen .countdown{
    width: 60px;
    height: 60px;
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 5;
    text-align: center;
    border-radius: 40px;
    border: 1px solid white;
    background-color: #88898b;
    font-size: 36px;
    font-weight: bold;
    color: white;
    line-height: 58px;
}


.overlay{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    z-index: 1;
}
@-moz-document url-prefix() {
    .overlay{
        background-color: rgba(0, 0, 0, 0.6);
    }
}

/* Digivault Entry */
.digivaultEntry{
    width: 100%;
    display: block;
}

.digivault-inner{
     width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.digivault-inner .bg-img{
    position: relative;
    width: 70%;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.digivault-inner .popup-main{    
    position: absolute;    
    left: 0;
    top: 0;    
    z-index: 100;
    pointer-events: none;
}
.digivault-inner .popup-main .step-popup{
    width: 100%;
    max-width: 375px;
    position: absolute;    
    left: 0;
    z-index: 10;    
    padding: 0px;    
    top:50%;
    pointer-events: auto;
    left: 51%;
    transform: translate(-50%, -50%);
}
.digivault-inner .popup-main .step-popup.step1{
    top:60%;
}
.digivault-inner .popup-main .step-popup.step3{
    top:73%;
}
.digivault-inner .popup-main .step-popup.step4{
    top:62%;
}
.digivault-inner .popup-main .step-popup.step5{
    top:60%;
}
.digivault-inner .popup-main .step-popup.step6{
    top:60%;
}
.digivault-inner .popup-main .step-popup .Mascot{
     width: 92px;
     display: inline-block;
     vertical-align: top;
}

.digivault-inner .popup-main .step-popup .msg-box{
    width:74%;
    position: relative;
    display: inline-block;    
    margin-left: -5px;
    top: -15px;
}
.digivault-inner .popup-main .step-popup .msg-box img.bg{
    width: 100%;
    position: absolute;
    height: auto;
    display: block;
    left: 0;
    top: 0;
    z-index: 0;
}
.digivault-inner .popup-main .step-popup .msg-box .box-detail{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding: 30px 23px 0 38px;
}

.digivault-inner .popup-main .step-popup .msg-box .star{
    width: 34px;
    display: block;
    margin-left: -5px;
}
.digivault-inner .popup-main .step-popup .msg-box .star img{
    display: block;
}

.digivault-inner .popup-main .step-popup .msg-box .title{
    width: 100%;
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: black;
    padding: 7px 0;
}
.digivault-inner .popup-main .step-popup .msg-box p{
    width: 100%;    
    font-size: 13px;
    color: black;
    font-family: 'SF Pro Display Light';
    font-weight: 300;
    letter-spacing: 0.7px;
    padding-bottom: 12px;
    margin: 0;
}

.digivault-inner .popup-main .step-popup .msg-box .button-main{
    width: 100%;   
    display: flex;
    gap: 3%;    
 }
 .digivault-inner .popup-main .step-popup .msg-box button{
    width: 100%;
    font-family: 'SF Pro Display Light';
    font-size: 14px;
    background-color: #FF2B35;
    height: 32px;
    box-shadow: 0px 0px 10px rgba(255, 43, 53, 0.5);
    letter-spacing: 1px;
    padding: 0;
    color: white;

 }
 .digivault-inner .popup-main .step-popup .msg-box button.white{
    background-color: white;
    color: #FF2B35;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
 }

 .digivault-inner .popup-btn{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 8%;
    text-align: center;
    z-index: 2;
 }
 .digivault-inner .popup-btn.btn1{
    bottom: auto;
    top: 22%;
 }
 .digivault-inner .popup-btn.btn2{
    bottom: auto;
    top: 22%;
 }
.digivault-inner .popup-btn.btn3{
    bottom: auto;
    top: 21%;
 }
 .digivault-inner .popup-btn.btn4{
    bottom: auto;
    top: 16%;
 }
 .digivault-inner .popup-btn img{
    width: 85%;
    display: inline-block;
 }
 .digivaultlevel2{
    background-color: white;
 }
 .digivaultlevel2 .popup-main{
    position: sticky;
    height: auto;
 }
 .digivaultlevel2 .popup-main .info-popup{    
    bottom: 450px;
 }
 .digivaultlevel2 .popup-main .info-popup.popup0{    
    bottom: 490px;
 }
.digivaultlevel2 .popup-main .info-popup.popup1 {    
    bottom: 300px;
 }
 .digivaultlevel2 .popup-main .info-popup.popup2 {    
    bottom: 200px;
 }
 .digivaultlevel2 .popup-main .info-popup.popup2Sub {    
    bottom: -140px;
 }
 .digivaultlevel2 .popup-main .info-popup.popup2Sub1 {    
    bottom: -75px;
 }
  .digivaultlevel2 .popup-main .info-popup.popup3 {    
    bottom: -90px;
 }
 .digivaultlevel2 .popup-main .info-popup.popup4{    
    bottom: 500px;
 }
 
 .digivaultlevel2 .card1{
    width: 77px;
    position: absolute;
    top: 42%;
    left: 2.3%;
 }
 .digivaultlevel2 .card2{
    width: 77px;
    position: absolute;
    top: 43%;
    left: 26.3%;
    display: none;
 }
 .digivaultlevel2 a.conicRound{
    width: 78px;
    display: inline-block;
    border-radius: 5px;
    margin: 2px;
    padding: 5px 0;
 }
.digivaultlevel2 a.conicRound::before{
    background-image: conic-gradient(transparent, rgba(255, 0, 10, 1), transparent 100%);   
}
.digivaultlevel2 a.conicRound::after{
    background-color: white;
}
.digivaultlevel2 a img{
    position: relative;
    z-index: 2;
    display: block;
}
 .digivaultlevel2 .popup-btn{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 4%;
    text-align: center;
    z-index: 2;
 }
 .digivaultlevel2 .popup-btn.btn1{
    bottom: 12%;    
 } 
 .digivaultlevel2 .popup-btn img{
    width: 94%;
    display: inline-block;
 }
 .digivaultlevel2 .popup-btn a.conicRound{
    width: 98%;
    display: inline-block;
    border-radius: 5px;
    margin: 2px;
    padding: 5px;
 }
 .digivaultlevel2 .popup-btn a.conicRound img{
    width: 100%;
    display: block;
 }
.digivaultlevel2 .popup-btn a.conicRound::before{
    background-image: conic-gradient(transparent, rgba(255, 0, 10, 1), transparent 100%);   
}
.digivaultlevel2 .popup-btn a.conicRound::after{
    background-color: white;
}

.digivaultlevel2 .protect-btn{
    width: 100%;
    position: relative;
    left: 0;
    bottom: 0;
    text-align: center;
    z-index: 2;
 }
 .digivaultlevel2 .protect-btn .amt4{
    bottom: 20%;
 }
 #step7.digivaultlevel2 .popup-main .info-popup.popup5{
    bottom: auto;
    top: 15%;
    position: fixed;
 }
 .digivaultlevel2 .protect-btn a.conicRound{
    display: block;
 }

.digivaultlevel2 .flex-container{
    width: 100%;
    display: block;
}
.digivaultlevel2 .flex-container{
    width: 100%;
    display: block;
}
.digivaultlevel2 .flex-container .amt-lock{
    width: 94%;
    display: block;    
    color: #667078;
    padding: 10px 8px;
    margin: 0 3%;
}
.digivaultlevel2 .flex-container .amt-lock.two{
    text-align: right;
}
.digivaultlevel2 .flex-container .amt-lock.three{
    background-color: #BFBFBF;
    padding: 0;
    height: 6px;
    border-radius: calc(infinity * 1px);
}
.digivaultlevel2 .flex-container .amt-lock.three.inner{
    background-color: #5F23FD;
    padding: 0;
    height: 6px;
    margin: 0;
    width: 0%;
    border-radius: calc(infinity * 1px);
}

.digivaultlevel2 .flex-container .amt-lock p{    
    display: block;
    font-size: 14px;
    color: #667078;
    padding: 0px;
    margin: 0;
}
.digivaultlevel2 .flex-container .amt-lock .currancy{
    width: 100%;
    display: block;
    font-size: 16px;
    font-weight: 500;
}
.digivaultlevel2 .flex-container .amt-lock .currancy .amt{    
    font-size: 25px;
    font-weight: 500;
    color: #172733;
}
.digivaultlevel2 .flex-container .amt-lock.two .currancy .amt{
    text-align: right;
    font-size: 18px;
}
.digivaultlevel2 .enter-amt {
    width: 100%;
    display: block;
    background-image: url('../../media/images/others/digibank-demo/uiElements/digivault/digivaultSimulation/entr-amtBg.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 15px 10px;
    cursor: pointer;
}
.digivaultlevel2 .enter-amt.two{
    width: 94%;
    margin: 0 3%;
    border-radius: 5px;
}
.digivaultlevel2 .enter-amt p{
    color: #9BA4AB;
    font-size: 14px;
    margin: 0;
    padding: 5px 0;
}
.digivaultlevel2 .enter-amt .amt{
    color: white;
    font-size: 20px;        
}
.digivaultlevel2 .enter-amt .amt .right{
    float: right;
}
.digivaultlevel2 .title-rew{
    display: block;
    font-size: 20px;
    color: #172733;
    font-weight: 500;
    padding: 10px;
}


/* Noise */
.noise-main{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;    
}
.noise-main .landing-screeen{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    text-align: center;
    background-image: url('../../media/images/others/digibank-demo/backgrounds/noiseEncounter.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.noise-main .landing-screeen .v-center{
    width: 100%;
}

.noise-main .landing-screeen .icon{
    width: 96px;
    display: inline-block;
}
.noise-main .landing-screeen .title{
    display: block;
    font-size: 36px;
    color: white;
    font-weight: bold;
    padding: 0 5%;
}
.noise-main .noise-step{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
}
.noise-main .noise-step .bg-img{
    width: 100%;    
    display: block;
    height: 100%;
    position: relative;
    top: 0;
    left: 0;
    object-fit: cover;
}

.noise-main .noise-step .step-popup{
    width: 100%;
    max-width: 375px;
    position: absolute;    
    left: 10px;
    z-index: 10;    
    padding: 0px;    
    bottom: 6%;
    pointer-events: auto;
    text-align: center;
}
.noise-main .noise-step .step-popup .Mascot{
     width: 64px;
     display: inline-block;
     vertical-align: top;
}

.noise-main .noise-step .step-popup .msg-box{
    width:74%;
    position: relative;
    display: inline-block;    
    margin-left: -5px;
    top: -50px;
}
.noise-main .noise-step .step-popup .msg-box img.bg{
    width: 100%;
    position: absolute;
    height: auto;
    display: block;
    left: 0;
    top: 0;
    z-index: 0;
}
.noise-main .noise-step .step-popup .msg-box .box-detail{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding: 30px 20px 0 36px;
    text-align: left;
}
.noise-main .noise-step .step-popup .msg-box .box-detail.two, .noise-main .noise-step .step-popup .msg-box .box-detail.three{
    padding: 20px 20px 0 36px;    
}

.noise-main .noise-step .step-popup .msg-box .star{
    width: 34px;
    display: block;
    margin-left: -5px;
    padding-bottom: 5px;
}
.noise-main .noise-step .step-popup .msg-box .box-detail.three .star{
    padding-bottom: 0px;   
}
.noise-main .noise-step .step-popup .msg-box .star img{
    display: block;
}

.noise-main .noise-step .step-popup .msg-box .title{
    width: 100%;
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: black;
    padding: 7px 0;
}
.noise-main .noise-step .step-popup .msg-box p{
    width: 100%;    
    font-size: 13px;
    color: black;    
    font-weight: 300;
    letter-spacing: 0.5px;
    padding-bottom: 18px;
    margin: 0;
}
.noise-main .noise-step .step-popup .msg-box .box-detail.three p{
    padding-bottom: 10px;
}

.noise-main .noise-step .step-popup .msg-box .button-main{
    width: 100%;   
    display: block;
    gap: 3%;    
 }
 .noise-main .noise-step .step-popup .msg-box button{
    width: 100%;
    font-family: 'SF Pro Display Light';
    font-size: 14px;
    background-color: #FF2B35;
    height: 32px;
    box-shadow: 0px 0px 10px rgba(255, 43, 53, 0.5);
    letter-spacing: 1px;
    padding: 0;
    margin-bottom: 8px;
    color: white;
 }
 .noise-main .noise-step .step-popup .msg-box button.font-10{
    font-size: 10px;
    letter-spacing: 0.4px;
 }
 .noise-main .noise-step .step-popup .msg-box button.white{
    background-color: white;
    color: #FF2B35;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
 }
.noise-main .noise-step .conversation{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    text-align: center;
}
.noise-main .noise-step .conversation img{
    width: 80%;
    position: relative;
    top: 40px;
}

 .noise-slider{
    width: 100%;
    display: block;
    text-align: center;
    margin-top: -20px;    
 }
 .noise-slider .main-ttl{
    display: block;
    font-size: 36px;
    color: white;
    font-weight: bold;
    padding: 10px 0;
}
.noise-slider .noise-note{
    width: 100%;
    display: block;
    font-family: 'SF Pro Display Light';
    font-size: 12px;
    color: white;
    padding: 0 0 10px;    
}
.noise-slider .noise-gallery{
    width: 100%;
    position: relative;     
    top: 70px;
    height: 322px;
 }
.noise-slider .noise-gallery .slide {
    width: 260px;
    height: 322px;
    position: absolute;
    left: 13%;
    /* left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);     */
    background-color: rgba(255, 43, 53, 0.5);
    border: 2px solid white;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border-radius: 20px;
    padding: 10px;
    margin: 0 10px;
}
.noise-slider .noise-gallery .slide .logo-icon{
    width: 100%;
    display: block;
    text-align: center;
    margin-top: -70px; 
    margin-bottom: 20px;
}
.noise-slider .noise-gallery .slide .logo-icon img{
    width: 120px;    
    display: inline-block;    
}
.noise-slider .noise-gallery .slide .v-center{
    width: 94%;    
    top: 57%;   
}
.noise-slider .noise-gallery .slide .slide-title{
    display: block;
    font-size: 18px;
    color: white;
    font-weight: 500;
    letter-spacing: 1px;
    padding: 0;
}
.noise-slider .noise-gallery .slide .slide-title.font-14{    
    font-size: 14px;  
    letter-spacing: 0.5px;      
}
.noise-slider .noise-gallery .slide p{
    font-size: 12px;
    color: white;    
    font-family: 'SF Pro Display Light';
    letter-spacing: 0.5px;
    padding: 0;
    margin: 10px 0;
}
.noise-slider .noise-gallery .slide p.font-11{
     font-size: 10px;
}
.noise-slider .noise-gallery .slide .store-button{
    width: 100%;
    display: block;
    padding: 0 5%;
}
.noise-slider .noise-gallery .slide .store-button img{
    width: 48%;
    display: inline-block;
    padding: 3px 2px;
}
.noise-slider .noise-gallery .slide .store-button img.full{
    width: 82%;
    display: inline-block;
    margin-top: 20px;
}
.noise-slider .slider-arw{
    width: 100%;
    position: absolute;
    top: 46%;
    left: 0%;
    transform: translate(0%, -50%);
    z-index: 3;
}
.noise-slider .noise-gallery .slide .store-button .submit-btn{
    width: auto;
    display: inline-block;
    background-color: white;
    padding: 8px 15px;
    font-size: 16px;
    color: #FD2B35;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
    text-decoration: none;
    border-radius: 30px;
    margin-top: 20px;
}
.noise-slider .slider-arw #btnGuidePrev, .noise-slider .slider-arw #btnGuideNext {
    width: 32px;
    display: inline-block;
    position: absolute;
    pointer-events: none;    
}
.noise-slider .slider-arw #btnGuidePrev{
    left: 5%;
    pointer-events: fill;
}
.noise-slider .slider-arw #btnGuideNext{
    right: 7%;
    pointer-events: fill;
}
 

 /* Payment Controls */
.payment-control-main{
    width: 100%;
    display: block;
}

.payment-control-main .start-screen .simulation-text{
    padding: 15px 20%;
}

.payment-control-main .start-screen .simulation-text.end-text{
    padding: 15px 10%;
}

.payment-control-main .start-screen .main-ttl{
    padding: 10px 20%;
    line-height: 90%;
}


 .pc-inner{
     width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.pc-inner .bg-img{
    position: relative;
    width: 73%;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.pc-inner .popup-main{    
    position: absolute;    
    left: 0;
    top: 0;    
    z-index: 100;
    pointer-events: none;
}
.pc-inner .popup-main .step-popup{
    width: 100%;
    max-width: 375px;
    position: absolute;    
    left: 0;
    z-index: 10;    
    padding: 0px;    
    top: 50%;
    pointer-events: auto;
    left: 51%;
    transform: translate(-50%, -50%);
}
.pc-inner .popup-main .step-popup.step2{
    top: 80%;
}
.pc-inner .popup-main .step-popup.step3{
    top: 45%;
}
.pc-inner .popup-main .step-popup.step4{
    top: 35%;
}
.pc-inner .popup-main .step-popup.step5{
    top: 66%;
}
.pc-inner .popup-main .step-popup.step6{
    top: 25%;
}
.pc-inner .popup-main .step-popup.step7{
    top: 62%;
}
.pc-inner .popup-main .step-popup .Mascot{
     width: 92px;
     display: inline-block;
     vertical-align: top;
}

.pc-inner .popup-main .step-popup .msg-box{
    width:74%;
    position: relative;
    display: inline-block;    
    margin-left: -5px;
    top: -15px;
}
.pc-inner .popup-main .step-popup .msg-box .textbox1{
    width: 100%;
    height: 215px;
}
.pc-inner .popup-main .step-popup .msg-box img.bg{
    width: 100%;
    position: absolute;
    height: auto;
    display: block;
    left: 0;
    top: 0;
    z-index: 0;
}
.pc-inner .popup-main .step-popup .msg-box .box-detail{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding: 20px 23px 0 38px;
}
.pc-inner .popup-main .step-popup .msg-box .star{
    width: 34px;
    display: block;
    margin-left: -5px;
}
.pc-inner .popup-main .step-popup .msg-box .star img{
    display: block;
}

.pc-inner .popup-main .step-popup .msg-box .title{
    width: 100%;
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: black;
    padding: 7px 0;
}
.pc-inner .popup-main .step-popup .msg-box .box-detail.two .title{
    padding:0 0 7px 0;
}
.pc-inner .popup-main .step-popup .msg-box p{
    width: 100%;    
    font-size: 13px;
    color: black;
    font-family: 'SF Pro Display Light';
    font-weight: 300;
    letter-spacing: 0.4px;
    padding-bottom: 12px;
    margin: 0;
}

.pc-inner .popup-main .step-popup .msg-box .button-main{
    width: 100%;   
    display: flex;
    gap: 3%;    
 }
 .pc-inner .popup-main .step-popup .msg-box button{
    width: 100%;
    font-family: 'SF Pro Display Light';
    font-size: 14px;
    background-color: #FF2B35;
    height: 32px;
    box-shadow: 0px 0px 10px rgba(255, 43, 53, 0.5);
    letter-spacing: 1px;
    padding: 0;
    color: white;

 }
 .pc-inner .popup-main .step-popup .msg-box button.white{
    background-color: white;
    color: #FF2B35;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
 }

.pc-inner .popup-btn{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 34%;
    text-align: center;
    z-index: 2;
 }
.pc-inner .popup-btn.btn1{
    bottom: auto;
    top: 68%;
 }
.pc-inner .popup-btn.btn2{
    bottom: auto;
    top: 35%;
 }
.pc-inner .popup-btn.btn3{
    bottom: auto;
    top: 54%;
 }
.pc-inner .popup-btn.btn4{
    bottom: auto;
    top: 39%;
 }
.pc-inner .popup-btn.btn5{
    bottom: auto;
    top: 79%;
 }
.pc-inner .popup-btn.btn6{
    bottom: auto;
    top: 33%;
 }
.pc-inner .popup-btn.btn7{
    bottom: auto;
    top: 19%;
 }
.pc-inner .popup-btn img{
    width: 85%;
    display: inline-block;
 }
 .pc-inner .popup-btn img.two{
    width: 74%;    
 }
 .payment-control-main .finish-screen .start-screen .Mascot{
    opacity: 1;
 }
.payment-control-main .pc-level2 {
    max-height: inherit !important;
    min-height: 750px;
 }
 .scanPay-main .pc-level2 {
    max-height: inherit !important;
    min-height: 750px;
 }
 .card-replacement-main .cr-level2 {
    max-height: inherit !important;
    min-height: 750px;
 }
 .pay-now-main .pn-level2 {
    max-height: inherit !important;
    min-height: 750px;
 }
.pc-level2 {
    background-color: white;
    max-height: 750px;
 }
.pc-level2 .card1{
    width: 100%;
    position: absolute;
    top: 65%;
    left: 0;
 }
.pc-level2 .card2{
    width: 100%;
    position: absolute;
    top: 203%;
    left: 0;
}
.pc-level2 .card3{
    width: 100%;
    position: absolute;
    top: 29%;
    left: 0;
}
.pc-level2 .card4{
    width: 100%;
    position: absolute;
    top: 98%;
    left: 0;
}
.pc-level2 .card5{
    width: 100%;
    position: absolute;
    top: 125%;
    left: 0;
}
.pc-level2  a.conicRound{
    width: 99%;
    display: inline-block;
    border-radius: 8px;
    margin: 2px;
    padding:0;    
 }
 .pc-level2  a.conicRound.red{    
    padding:4px;
 }
.pc-level2 a.conicRound::before{
    background-image: conic-gradient(transparent, rgba(255, 0, 10, 1), transparent 100%);   
}
.pc-level2 a.conicRound::after{
    background-color: white;
}
.pc-level2 a.conicRound img{
    position: relative;
    z-index: 2;
    padding: 2px;
    display: block;
    border-radius: 8px;
}
.pc-level2 .amount-field{
    width: 100%;
    position: absolute;
    top: 40.4%;
    left: 0;
}
.pc-level2 .amount-field .amount{
    width: 72%;
    left:22%;
    position:absolute;
    height: 38px;    
    line-height: 38px;
    display: block;
    padding: 2px 0 0 0;
    font-weight: 500;
    background-color: white;
}
.pc-level2 .pc-overlay{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
}
.pc-level2 .pc-overlay .lock-card{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 20px;
}
.pc-level2 .pc-overlay .lock-card img{
    max-width: 100%;
}
.pc-level2 .pc-overlay .lock-card .buttons{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 5%;    
    text-align: end;
    padding: 0 10%;
}
.pc-level2 .pc-overlay .lock-card .buttons a{
    margin: 0 4px;
    width: auto;
    display: inline-block;
    vertical-align: middle;
    padding: 3px;
}
.pc-level2 .pc-overlay .lock-card .buttons img{
    width: auto;
    height: 40px;
}

.payment-control-main .pc-level2 .pc-inner .bg-img{
    width: 100%;    
    top: 0;
    left: 0;
    transform: none;
    display: block;
}  
.payment-control-main .pc-level2 .popup-main{    
    height: 0;
    position: sticky;    
    inset: 0;
    top: 0;
}
.payment-control-main .pc-level2 .popup-main .info-popup{    
    position: absolute;
    bottom: 250px;
}
.payment-control-main .pc-level2 .popup-main .info-popup.popup2{        
    bottom: 210px;
}
.payment-control-main .pc-level2 .popup-main .info-popup.popup3{        
    bottom: 140px;
}
.payment-control-main .pc-level2 .popup-main .info-popup .msg-box{    
    padding: 20px 15px;
}
.payment-control-main .pc-level2 .popup-main .info-popup .msg-box p{    
    padding: 0;
}
.payment-control-main .pc-level2 .popup-main .info-popup.popup4{        
    bottom: 175px;
}
.payment-control-main .pc-level2 .popup-main .info-popup.popup5{        
    bottom: 135px;
}

/* Scan & Pay */
.scanPay-main{
    width: 100%;
    min-height: 100%;
    display: block;
}
.scanPay-main .start-screen .simulation-text{
    padding: 15px 8%;
}
.scanPay-main .start-screen .simulation-text.one-line{
    padding: 24px 10%;
}
.scanPay-main .pc-inner .popup-main .step-popup.two{
    top: 73%;
}
.scanPay-main .pc-inner .popup-main .step-popup.three{
    top: 80%;
}

.scanPay-main .pc-inner .popup-main .step-popup .msg-box .box-detail{
    padding: 30px 23px 0 38px;
}
.scanPay-main .pc-inner .popup-btn{
    bottom: 58%;
}
.scanPay-main .pc-inner .popup-btn img{
    width: 85%;
}
.scanPay-main .pc-inner .popup-btn .card-img{
    width: 100px;    
    margin-left: 80px;
}
.scanPay-main .finish-screen .start-screen .Mascot{
    opacity: 1;
}
.scanPay-main .pc-level2 .popup-main .info-popup{
    bottom: 100px;
}
.scanPay-main .pc-level2 .card1{
   width: 96px;
   position: absolute; 
   top: 26%;
   left: 50%;
}
.scanPay-main .pc-level2 .card2{
   width: 92px;
   position: absolute; 
   top: 7%;
   left: 6%;
}
 .scanPay-main .popup-btn{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 1%;
    text-align: center;
    z-index: 2;
 }
 .scanPay-main .popup-btn.btn1{
    bottom: auto;
    top: 12%;
 }
.scanPay-main .popup-btn.btn2{
    bottom: auto;
    top: 73%;
}
.scanPay-main .popup-btn.btn3{
    bottom: auto;
    top: 30%;
}
.scanPay-main .popup-btn.btn4{
    bottom: auto;
    top: 15%;
}
.scanPay-main .popup-btn.btn5{
    bottom: auto;
    top: 85%;
}
.scanPay-main .popup-btn.two-btn{
    bottom: 5px;    
    display: flex;
}

 .scanPay-main .popup-btn img{
    width: 94%;
    display: inline-block;
 }
.scanPay-main .enter-amt{
    position: absolute;
    bottom: 64%;
    height: 87px;
    color: #ffff;
    padding-left: 25px;							
    width: 100%;
    padding-right: 20px;
    padding-top: 41px;
}
.scanPay-main .enter-amt span:last-child{
    float: right;
}
.scanPay-main .enter-amt2{
    position: absolute;
    bottom: 78%;
    height: 87px;
    color: #ffff;
    padding-left: 25px;    
    width: 100%;
    padding-right: 20px;
    padding-top: 41px;    
}
.scanPay-main .enter-amt2 span:last-child{
    float: right;
    margin-right: 10px;
}

 .scanPay-main .popup-btn a.conicRound{
    width: 98%;
    display: inline-block;
    border-radius: 5px;
    margin: 2px;
    padding: 5px;
 }
 .scanPay-main .popup-btn a.conicRound img{
    width: 100%;
    display: block;
 }
.scanPay-main .popup-btn a.conicRound::before{
    background-image: conic-gradient(transparent, rgba(255, 0, 10, 1), transparent 100%);   
}
.scanPay-main .popup-btn a.conicRound::after{
    background-color: white;
}
.scanPay-main .pc-level2 .popup-main .info-popup .msg-box{
    padding:20px 18px;
}
.scanPay-main .pc-level2 .popup-main .info-popup .msg-box p{
    padding-bottom: 0px;
}

.po-sticky{
    width: 100%;    
    position: sticky;
    left: 0;
    bottom: 0;
    z-index: 11;
}
.keypad-main{
    width: 100%;
    position: absolute;    
    bottom: 0;
    left: 0;
    display: block;
    background-color: #dcdfe3;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    padding: 60px 0 30px;
}
.keypad-main .top-bar {
    width: 100%;
      position: absolute;
      top: 0px;
      right: 0px;
      font-size: 18px;
      color: #007AFF;
      font-weight: 500;
      cursor: pointer;
      background-color: #EDEEF0;
      padding: 10px;
      text-align: right;
}
.keypad-main .keypad {
      display: grid;
      grid-template-columns: repeat(3, 120px);
      grid-gap: 6px;      
}
.keypad-main .keypad .key {
      background: #fff;
      border-radius: 5px;
      font-size: 25px;      
      color: #000;
      text-align: center;
      padding: 5px 0 5px;
      cursor: pointer;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
      position: relative;
      user-select: none;
      box-shadow: 0 1px 0px rgba(0,0,0,0.2);      
      
}
.keypad-main .keypad .key span {
      display: block;
      font-size: 10px;
      font-weight: bold;      
      color: #000;
      letter-spacing: 2px;
}

.keypad-main .keypad .key:active {
      background: #f0f0f0;
}
.keypad-main .keypad .delete {
      font-size: 26px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer !important;
}
.keypad-main .keypad .key.trans{
    background-color: transparent;
    box-shadow: none;
    cursor:auto;
}

.keypad-main.alpha {
    padding: 50px 0 60px;
}
.keypad-main.alpha .top-bar{
    background-color: transparent;
}
.keypad-main.alpha .keypad {
      display: block;
      grid-template-columns: repeat(0, 0px);
      grid-gap: 0;      
}
.keypad-main.alpha .keypad .row{
    display: grid;
    grid-template-columns: repeat(10, 32px);
    grid-gap: 6px;
    padding: 0 0 12px 0;    
}
.keypad-main.alpha .keypad .row2{
    display: grid;
    grid-template-columns: repeat(9, 32px);
    grid-gap: 6px;
    padding: 0 0 12px 0;    
    justify-content: center; 
}
.keypad-main.alpha .keypad .row3{
    display: grid;
    grid-template-columns: repeat(3, 85px);
    grid-gap: 6px;
    padding: 0 0 12px 0;    
    justify-content: center; 
}

.keypad-main.alpha .keypad .key{
    font-size: 22.5px;
    padding: 0px 0 4px;
    line-height: 38px;
}
.keypad-main.alpha .keypad .key.gray{
    background-color: #ADB3BC;
    width: 40px;
    margin-left: -19px;
    padding: 0;
    line-height: 42px;
}
.keypad-main.alpha .keypad .key.upercase img{
    width: 23px;
    height: auto;
}
.keypad-main.alpha .keypad .key.gray2{
    background-color: #ADB3BC;
    width: 40px;
    margin-left: 10px;
    line-height: 42px;
    padding:0;
}
.keypad-main.alpha .keypad .row3 .button1{
    width: 85px;
    background-color: #ADB3BC;
    margin-left: -52px;
    font-size: 16px;
    padding: 2px 0 0;
    line-height: 40px;
}
.keypad-main.alpha .keypad .row3 .button2{
    width: 222%;
    font-size: 16px;    
    padding: 2px 0 0;
    line-height: 40px;
    margin-left: -52px;
}
.keypad-main.alpha .keypad .row3 .button3{
    width: 85px;
    background-color: #ADB3BC;
    margin-left: 52px;
    font-size: 16px;  
    padding: 2px 0 0;
    line-height: 40px;  
}
.keypad-main .keypad .key.delete img{
    width: 25px;
    height: auto;

}
.keypad-main.alpha .audio-mic{
    width: 25px;
    position: absolute;
    right: 20px;
    bottom: 20px;
}

/* Payment Controls */
.card-replacement-main{
    width: 100%;
    display: block;
}

.card-replacement-main .start-screen .simulation-text{
    padding: 15px 20%;
}

.card-replacement-main .start-screen .simulation-text.start-text{
    padding: 24px 10%;
}

.card-replacement-main .start-screen .main-ttl{ 
    line-height: 90%;
}

.cr-inner{
     width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.cr-inner .bg-img{
    position: relative;
    width: 73%;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.cr-inner .bg-img{
    position: relative;
    width: 73%;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.card-replacement-main  .cr-level2 .cr-inner .bg-img{
    width: 100%;    
    top: 0;
    left: 0;
    transform: none;
    display: block;
}  
.cr-inner .popup-main{    
    position: absolute;    
    left: 0;
    top: 0;    
    z-index: 100;
    pointer-events: none;
}
.cr-inner .popup-main .step-popup{
    width: 100%;
    max-width: 375px;
    position: absolute;    
    left: 0;
    z-index: 10;    
    padding: 0px;    
    top: 50%;
    pointer-events: auto;
    left: 51%;
    transform: translate(-50%, -50%);
}
.cr-inner .popup-main .step-popup.step2{
    top: 75%;
}
.cr-inner .popup-main .step-popup.step3{
    top: 26%;
}
.cr-inner .popup-main .step-popup.step4{
    top: 84%;
}
.cr-inner .popup-main .step-popup.step5{
    top: 65%;
}
.cr-inner .popup-main .step-popup.step6{
    top: 56%;
}
.cr-inner .popup-main .step-popup.step7{
    top: 40%;
}
.cr-inner .popup-main .step-popup .Mascot{
     width: 92px;
     display: inline-block;
     vertical-align: top;
}

.cr-inner .popup-main .step-popup .msg-box{
    width:74%;
    position: relative;
    display: inline-block;    
    margin-left: -5px;
    top: -15px;
}
.cr-inner .popup-main .step-popup .msg-box .box-detail{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding: 20px 23px 0 38px;
}
.cr-inner .popup-main .step-popup .msg-box .star{
    width: 34px;
    display: block;
    margin-left: -5px;
}
.cr-inner .popup-main .step-popup .msg-box .star img{
    display: block;
}

.cr-inner .popup-main .step-popup .msg-box .title{
    width: 100%;
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: black;
    padding: 7px 0;
}
.cr-inner .popup-main .step-popup .msg-box .box-detail.two .title{
    padding: 2px 0 7px;
}
.cr-inner .popup-main .step-popup .msg-box p{
    width: 100%;    
    font-size: 13px;
    color: black;
    font-family: 'SF Pro Display Light';
    font-weight: 300;
    letter-spacing: 0.4px;
    padding-bottom: 12px;
    margin: 0;
}

.cr-inner .popup-main .step-popup .msg-box .button-main{
    width: 100%;   
    display: flex;
    gap: 3%;    
 } 
 .cr-inner .popup-main .step-popup .msg-box button{
    width: 100%;
    font-family: 'SF Pro Display Light';
    font-size: 14px;
    background-color: #FF2B35;
    height: 32px;
    box-shadow: 0px 0px 10px rgba(255, 43, 53, 0.5);
    letter-spacing: 1px;
    padding: 0;
    color: white;

 }
 .cr-inner .popup-main .step-popup .msg-box button.white{
    background-color: white;
    color: #FF2B35;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
 }
.cr-inner .popup-main .step-popup .msg-box .button-main.full{
    width: 100%;   
    display: block;        
 }
 .cr-inner .popup-main .step-popup .msg-box .button-main.full button{
    margin-bottom: 5px;
 }
.cr-inner .popup-btn{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 67%;
    text-align: center;
    z-index: 2;
}
.cr-inner .popup-btn.btn1{  
    bottom: 28%;    
 }
.cr-inner .popup-btn.btn2{  
    bottom: 7%;    
}
.cr-inner .popup-btn.btn3{
    bottom: 45%;    
}
.cr-inner .popup-btn.btn4{
    bottom: 56%;
}
.cr-inner .popup-btn.btn5{
    bottom: 34%;
}
.cr-inner .popup-btn.btn6{  
    bottom: 4%;    
}
.cr-inner .popup-btn.btn7{
    bottom: 65%;
}
.cr-inner .popup-btn.btn8{  
    bottom: -10%;    
}
.cr-inner .popup-btn img{
    width: 85%;
    display: inline-block;
}
.cr-inner .popup-btn.full img{
    width: 73%;    
}
.card-replacement-main .cr-level2 .popup-main .info-popup {
    bottom: 10%;
}
.card-replacement-main .cr-level2 .popup-main .info-popup.popup2 {
    bottom: 5%;
}
.card-replacement-main .cr-level2 .popup-main .info-popup.popup3 {
    bottom: 50%;
}
.card-replacement-main .cr-level2 .popup-main .info-popup.popup4 {
    bottom: 14%;
}

.cr-level2 {
    background-color: white;
    max-height: 750px;
}
.cr-level2 .cr-inner{
    background-color: white;
}
.cr-level2 .card1{
    width: 100%;
    position: absolute;
    top: 21%;
    left: 0;
}
.cr-level2 .card1.two{
    top: 32%;
}
.cr-level2 .card1.three{
    top: 15.5%;
}
.cr-level2 .card1.four{
    top: 57%;
}
.cr-level2 .card1.five{
    top: 88%;
}
.cr-level2 .card1.six{
    top: 98%;
}
.cr-level2 .updateName{    
    width: 100%;
    position: absolute;
    top: 41%;
    padding-left: 20px;
    color: #9BA4AB;
    height: 59px; 
}
.cr-level2 .updateName.dc-div{    
    top: 45%;
}
.cr-level2 .updateName.two{
    top: 42%;
    font-size: 19px;
    color: #172633;
    padding-left: 28px;
    font-weight: 400;
}
.cr-level2 .updateName.three{
    top: 59%;
    font-size: 16px;
    color: #172633;
    padding-left: 28px
}
.cr-level2 .updateName .name{  
    display: block;
    font-size: 16px;
    padding-top: 10px;
    padding-bottom: 7px;
}
.cr-level2 .updateName #lblNameOnCard1{
    color: #132634;
    font-size: 19px;
    font-weight: 400;
}

.cr-level2 .updateName .animation{
    width: 100%;
    height: 60px;
    position: absolute; 
    left: 0;
    top: 0;    
}
.cr-level2 .updateName .animation a{
    text-decoration: none;
}
.cr-level2 .updateName .animation .name{
    position: relative;
    height: 55px;
    display: block;
    font-size: 16px;
    color: #9BA4AB;
    padding-top: 25px;
    padding-left: 15px;
    z-index: 2;
    text-decoration: none;
}
.cr-level2 .cr-inner .popup-btn img{
    width: 100%;
    display:block;
}
.cr-level2  a.conicRound{
    width: 99%;
    display: inline-block;
    border-radius: 8px;
    margin: 2px;
    padding:0;    
 }
.cr-level2 a.conicRound::before{
    background-image: conic-gradient(transparent, rgba(255, 0, 10, 1), transparent 100%);   
}
.cr-level2 a.conicRound::after{
    background-color: white;
}
.cr-level2  a.conicRound img{
    position: relative;
    z-index: 2;
    padding: 2px;
    display: block;
    border-radius: 8px;
}
.cr-level2 .block-popup{
    width: 270px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.cr-level2 .cancle-btn{
    width: auto;
    position: absolute;
    bottom: 10%;
    left: 17%; 
}
.cr-level2 .cancle-btn.proceed{ 
    bottom: -10%;
    left: 50%;
    width: 130px;    
    line-height: 42px;
    text-align: center;
}
.cr-level2 .cancle-btn.proceed span{     
    position: relative;    
    z-index: 1;
    font-size: 17px;
}
.cr-level2 .cancle-btn a{
    text-decoration: none;
    color: #FF3E3E;
}
.cr-level2 .cancle-btn.proceed a{
    text-decoration: none;
    color: #007AFF;
}




/* Pay Now */
.pay-now-main{
    width: 100%;
    display: block;
}

.pay-now-main .start-screen .simulation-text{
    padding: 15px 0%;
}
.pay-now-main .start-screen .simulation-text.one-line{
    padding: 24px 5%;
}
.pay-now-main .start-screen .simulation-text.tutorial-end-text{
    padding: 15px 20%;
}

.pay-now-main .start-screen .main-ttl{ 
    line-height: 90%;
}

.pn-inner{
     width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.pn-inner .bg-img{
    position: relative;
    width: 73%;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.pn-inner .bg-img{
    position: relative;
    width: 73%;
    z-index: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.pn-inner .popup-main{    
    position: absolute;    
    left: 0;
    top: 0;    
    z-index: 100;
    pointer-events: none;
}
.pn-inner .popup-main .step-popup{
    width: 100%;
    max-width: 375px;
    position: absolute;    
    left: 0;
    z-index: 10;    
    padding: 0px;    
    top: 50%;
    pointer-events: auto;
    left: 51%;
    transform: translate(-50%, -50%);
}
.pn-inner .popup-main .step-popup.step2{
    top: 70%;
}
.pn-inner .popup-main .step-popup.step3{
    top: 82%;
}
.pn-inner .popup-main .step-popup.step4{
    top: 65%;
}
.pn-inner .popup-main .step-popup .Mascot{
     width: 92px;
     display: inline-block;
     vertical-align: top;
}

.pn-inner .popup-main .step-popup .msg-box{
    width:74%;
    position: relative;
    display: inline-block;    
    margin-left: -5px;
    top: -15px;
}
.pn-inner .popup-main .step-popup .msg-box .box-detail{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    padding: 30px 23px 0 38px;
}
.pn-inner .popup-main .step-popup .msg-box .star{
    width: 34px;
    display: block;
    margin-left: -5px;
}
.pn-inner .popup-main .step-popup .msg-box .star img{
    display: block;
}

.pn-inner .popup-main .step-popup .msg-box .title{
    width: 100%;
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: black;
    padding: 7px 0;
}
.pn-inner .popup-main .step-popup .msg-box p{
    width: 100%;    
    font-size: 13px;
    color: black;
    font-family: 'SF Pro Display Light';
    font-weight: 300;
    letter-spacing: 0.4px;
    padding-bottom: 12px;
    margin: 0;
}

.pn-inner .popup-main .step-popup .msg-box .button-main{
    width: 100%;   
    display: flex;
    gap: 3%;    
 } 
 .pn-inner .popup-main .step-popup .msg-box button{
    width: 100%;
    font-family: 'SF Pro Display Light';
    font-size: 14px;
    background-color: #FF2B35;
    height: 32px;
    box-shadow: 0px 0px 10px rgba(255, 43, 53, 0.5);
    letter-spacing: 1px;
    padding: 0;
    color: white;

 }
 .pn-inner .popup-main .step-popup .msg-box button.white{
    background-color: white;
    color: #FF2B35;
    box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
 }
.pn-inner .popup-main .step-popup .msg-box .button-main.full{
    width: 100%;   
    display: block;        
 }
 .pn-inner .popup-main .step-popup .msg-box .button-main.full button{
    margin-bottom: 5px;
 }

.pay-now-main .pn-level2 .card1{
   width: 96px;
   position: absolute; 
   top: 8%;
   left: 1%;
}
.pay-now-main .pn-level2 .card2{
   width: 100%;
   position: absolute; 
   top: 21%;
   left: 0%;
}
.pay-now-main .pn-level2 .card3{
   width: 100%;
   position: absolute; 
   top: 32%;
   left: 0%;
}
.pay-now-main .pn-level2 .card4{
   width: 100%;
   position: absolute; 
   top: 27%;
   left: 0%;
}

.pay-now-main .pn-level2 .card4.nickname{
   top: 30%;
}

.pn-inner .popup-btn{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 69%;
    text-align: center;    
    z-index: 2;
 }
 .pn-inner .popup-btn.btn1{
    bottom: 61%;
 }
.pn-inner .popup-btn.btn2{
    bottom: 56%;
}
.pn-inner .popup-btn.btn3{
    bottom: 3%;
}
.pn-inner .popup-btn.btn4{
    bottom: 54%;
}
.pn-inner .popup-btn.btn5{
    bottom: 40%;
}
.pn-inner .popup-btn img{
    width: 88%;
    display: inline-block;
}
.pn-inner .popup-btn .card-img{
    width: 110px;    
    margin-left: -210px;
}
.pn-level2 {
    background-color: white;
    max-height: 750px;
}
.pn-level2 .pn-inner {
background-color: white;
}

.pay-now-main .pn-level2 .popup-main .info-popup.popup1{
    bottom: 115px;
}
.pay-now-main .pn-level2 .popup-main .info-popup.popup2{
    bottom: 130px;
}
.pay-now-main .pn-level2 .popup-main .info-popup.popup3{
    bottom: 100px;
}

.pn-level2  a.conicRound{
    width: 99%;
    display: inline-block;
    border-radius: 8px;
    margin: 2px;
    padding:0;    
 }
.pn-level2 a.conicRound::before{
    background-image: conic-gradient(transparent, rgba(255, 0, 10, 1), transparent 100%);   
}
.pn-level2 a.conicRound::after{
    background-color: white;
}
.pn-level2  a.conicRound img{
    position: relative;
    z-index: 2;
    padding: 2px;
    display: block;
    border-radius: 8px;
}
.pn-level2 .number-field{
    width: 100%;
    position: absolute;
    top: 38.5%;
    left: 0;
    z-index: 1;
}
.pn-level2 .number-field.n5{
    top: 27.5%;
}
.pn-level2 .number-field .number{
    width: 52%;
    left:27%;
    position:absolute;
    height: 38px;    
    line-height: 38px;
    display: block;
    padding:0;
    font-weight: 500;
    color: #132634;
    background-color: white;
}
.pn-level2 .number-field.two{ 
    top: 28.7%; 
}
.pn-level2 .number-field.two .number{
    width: 50%;
    color: #667078;
    left: 20%;
    line-height: normal;
    height: auto;
}
.pn-level2 .number-field .number.mobile{
    font-size: 14px;
    color: gray;
}
.pn-level2 .lbl3{
    width: 75%;
    position: absolute;
    top: 28%;
    left: 0px;
    z-index: 1;
}
.pn-level2 .lbl4{
    width: 80%;
    position: absolute;
    top: 48%;
    left: -35px;
    z-index: 1;
}
.pn-level2 .lbl5{
    width: 80%;
    position: absolute;
    top: 88%;
    left: -29px;
    z-index: 1;
}
.pn-level2 .amount-field{
    width: 100%;
    position: absolute;
    top: 27%;
    left: 0;
    height: 82px;
    padding-top: 33px;
}
.pn-level2 .amount-field.two{
    top: 19%;
}
.pn-level2 .amount-field.three{
    top: 34.7%;    
}
.pn-level2 .amount-field.three span{
    font-size: 24px;
    width: 30%;
    left: auto;
    right: 26px;
}
.pn-level2 .amount-field .amount{
    width: 35%;
    left:60%;
    position:absolute;
    height: 38px;    
    line-height: 38px;
    display: block;
    padding:0;
    font-weight: 500;
    font-size: 20px;
    color: white;
    text-align: right;
    background-image: url('../../media/images/others/digibank-demo/uiElements/payNow/simulation/entr-amtBg.png');
    background-size: 385px auto;
    background-position: center;
    background-repeat: no-repeat;
    padding-right: 5px;
}
.pn-level2 .popup-btn{
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0%;
    text-align: center;    
    z-index: 2;
}
.pn-level2 .popup-btn.btn2{
    bottom: -11%;
}
.pn-level2 .popup-btn.btn3{
    bottom: -50%;
	display: flex;			  
}
.pn-level2 .popup-btn a{
    padding: 4px;
}
.pn-level2 .alphabet{
    width: 7%;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
}
.pn-level2 .alphabet img{
    width: auto;
    height: 72%;
    position: absolute;
    top: 55%;
    right: 0;
    transform: translate(0%, -50%);
}
.pn-level2 .search-animation{
    width: 99%;
    position: relative;
    display: block;
    margin: 4px 2px 4px 2px;
    padding: 0;
}
.pn-level2 .search-animation img{    
    padding: 0px 2px 4px 2px;
}
.pn-level2 .search-contact{
    width: 67%;
    position: absolute;
    padding: 7px 3% 5px 0;
    left: 13%;
    top: 17%;
    color: #8e8e93;
    letter-spacing: 1px;
    font-weight: 400;
    z-index: 3;
}
.pn-level2 .cancel-btn{
    width: auto;
    position: absolute;
    right: 5%;
    top: 2%;
    font-size: 15px;
    font-weight: 400;
    color: #8E8E93;
    text-decoration: none;
    letter-spacing: 1px;
    padding: 2% 0 2% 3%;    
}
.pn-level2 .search-animation.conicRound + .cancel-btn{
    top: 2.6%;
}
.pn-level2 .search-animation.conicRound .search-contact{
    top: 20%;
}	

.scanPay-main .amt3{
    position: absolute;
    bottom: 59%;
    height: 42px;
    color: #ffff;
    width: 35%;
    font-size: 20px;
    left: 54%;
    font-weight: 500;
    text-align: right;
}
.digivaultlevel2 .amt4{
    bottom: 10%;
    position: absolute;
    z-index: 111;
    right: 5%;
}
.digivaultlevel2 .currancy1{
    color: #9BA4AB;
    font-size: 16px;
}
.digivaultlevel2 .lbl4{
    color: #172733;
    font-size: 16px;
    font-weight: 500;
}
.keypad-main.alpha .keypad .row:before{content:none;}
.keypad-main.alpha .keypad .row:after{content:none;}
@media (max-width: 700px){
    #main-wrapper{      
        padding-top: 48px;
    }
}
@media (max-width: 640px) {
    #main-wrapper{      
        padding-top: 48px;
    }
}
.scanPay-main .pc-level2 .pn {
    left: 1%;
    top: 9%;
}
.slider-back-btn{
    top: 20px;
}
.inactive{
    pointer-events: none;
    cursor: pointer;
}
.pd-zero{
    width: 99%;
    display: inline-block;
    margin: 2px;
}

.start-screen .countdown-home{
    width: 60px;
    height: 60px;
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 5;
    text-align: center;
    border-radius: 40px;
    border: 1px solid white;
    background-color: #88898b;
    font-size: 36px;
    font-weight: bold;
    color: white;
    line-height: 58px;
}
.conicRound1{
	border-radius: 7px;
	padding: 0px 8px;
	--offset: 2px;
    --background-color: transparent;
    position: relative;
    z-index: 0;
    border-radius: 50px;
    overflow: hidden;
}
.no-arrow-animation .hand-point-down{
    display: none !important;
}
.noise-main .noise-step .step-popup .msg-box .fs12{
    font-size: 12px;
}