/*set background modal*/
/*set background page*/
video {
    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}

:root {
    --borderRadius16: 16px;
    --white: #FFFFFF;
    --black: #000000;
}


/*modal*/
/*mask*/
@media (min-width: 991px) and (orientation: landscape) {

    @keyframes zoomIn {
        0% {
            transform: scale(0.5); /* Start at default scale */
            box-shadow: 0 0 0 300px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
        100% {
            transform: scale(1); /* Start at default scale */
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
    }
    .zoom-in {
        animation: zoomIn 1s forwards; /* Apply animation */
    }
    @keyframes zoomCenter {
        0% {
            transform: scale(1); /* Start at default scale */
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
        100% {
            transform: scale(0.9); /* End at zoomed out scale */
            box-shadow: 0 0 0 50px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
        }
    }
    .zoom-center {
        animation: zoomCenter 1s forwards; /* Apply animation */
    }
    @keyframes zoomOut {
        0% {
            transform: scale(1); /* Start at default scale */
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
        100% {
            transform: scale(0.5); /* End at zoomed out scale */
            box-shadow: 0 0 0 300px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
        }
    }

    .zoom-out {
        animation: zoomOut 1s forwards; /* Apply animation */
    }
    .modal-content #cameraFeed3 {
        z-index: 999;
        position: absolute;
        width: 530px;
        height: 387px;

        object-fit: cover;
        border-radius: var(--borderRadius16);
        /*border: solid 2px var(--white);*/
    }

    .modal-content .passport-overlay {
        position: relative;
        z-index: 5000;
        width: 530px;
        height: 387px;
        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);
    }

    .modal-content .passport-overlay-inside {
        position: relative;
        left: 30.84px;
        top: 62px;

        z-index: 5000;
        width: 152px;
        height: 202px;
        /*background-color: white;*/
        /*border-radius: var(--borderRadius16);*/
        border: solid 2px var(--white);
    }

    .modal-content .passport-overlay-inside2 {
        position: relative;
        left: 0px;
        top: 86px;
        z-index: 5000;
        /*height: 0px;*/
        /*width: 528px;*/
        border: 1px solid var(--white);
    }

    .topbott-space-cus {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;
        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;

    }

    #capture-ocr2 .ocr-landscape {
        height: 98vh !important;
        /*gap: 6rem;*/
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    #capture-ocr2 #modalhead-ocr-portrait {
        display: none;
    }

    /*set video and overlay size of modal-ocr*/
    /*set video and overlay size of modal-ocr*/
    .modal-content #cameraFeed2 {
        z-index: 999;
        position: absolute;
        width: 586px;
        height: 400.98px;

        object-fit: cover;
        border-radius: var(--borderRadius16);
        /*border: solid 2px var(--white);*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .modal-content #cameraFeedidcard {
        z-index: 999;
        position: absolute;
        width: 586px;
        height: 400.98px;
        object-fit: cover;
        border-radius: var(--borderRadius16);
        /*border: solid 2px var(--white);*/
        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;

    }

    .modal-content #cameraFeed4 {
        z-index: 999;
        position: absolute;
        width: 586px;
        height: 400.98px;

        object-fit: cover;
        border-radius: var(--borderRadius16);
        /*border: solid 2px var(--white);*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .modal-content .idCard-overlay {
        bottom: 2px;
        position: relative;
        z-index: 5000;

        width: 586px;
        height: 400.98px;
        /*height: 386.98px;*/

        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .modal-content .idCard-overlay-inside {
        position: relative;
        z-index: 5000;

        left: 406.84px;
        top: 181.08px;
        width: 156.33px;
        height: 182.25px;

        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .text-capture-inform {
        font-size: 28px;
    }

    .text-capture-posture {
        font-size: 28px;
    }
}

/*2K device landscape*/
@media (max-width: 2048px) {

    @keyframes zoomIn {
        0% {
            transform: scale(0.5); /* Start at default scale */
            box-shadow: 0 0 0 300px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
        100% {
            transform: scale(1); /* Start at default scale */
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
    }
    .zoom-in {
        animation: zoomIn 1s forwards; /* Apply animation */
    }
    @keyframes zoomCenter {
        0% {
            transform: scale(1); /* Start at default scale */
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
        100% {
            transform: scale(0.9); /* End at zoomed out scale */
            box-shadow: 0 0 0 50px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
        }
    }
    .zoom-center {
        animation: zoomCenter 1s forwards; /* Apply animation */
    }
    @keyframes zoomOut {
        0% {
            transform: scale(1); /* Start at default scale */
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
        100% {
            transform: scale(0.5); /* End at zoomed out scale */
            box-shadow: 0 0 0 300px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
        }
    }

    .zoom-out {
        animation: zoomOut 1s forwards; /* Apply animation */
    }
    /*.count-capture-posture h3 {*/
    /*    position: relative;*/
    /*    top: 20px;*/
    /*    -webkit-appearance: none;*/
    /*    -moz-appearance: none; !*For Mozilla*!*/
    /*    appearance: none;*/
    /*}*/
    #capture-face-nf2f .space-b2 {
        margin-bottom: 1.5rem !important
    }

    #capture-face-nf2f .space-bt1 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important
    }

    #capture-face-nf2f .space-t1 {
        margin-bottom: 1.5rem !important
    }

    #capture-face-nf2f .space-b1 {
        margin-bottom: 1rem !important
    }

    .count-capture-posture {
        width: 90px;
        height: 90px;
    }

    .flip-camera-icon {
        width: 65px !important;
        padding: 12px;
    }

    /*set video and overlay size of modal-ocr-passport*/
    .modal-content #cameraFeed3 {
        z-index: 999;
        position: absolute;
        width: 530px;
        height: 387px;

        object-fit: cover;
        border-radius: var(--borderRadius16);
        /*border: solid 2px var(--white);*/
        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .modal-content .passport-overlay {
        position: relative;
        z-index: 5000;
        width: 530px;
        height: 387px;
        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);
        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .modal-content .passport-overlay-inside {
        position: relative;
        left: 30.84px;
        top: 62px;

        z-index: 5000;
        width: 152px;
        height: 202px;
        /*background-color: white;*/
        /*border-radius: var(--borderRadius16);*/
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .modal-content .passport-overlay-inside2 {
        position: relative;
        left: 0px;
        top: 86px;
        z-index: 5000;
        /*height: 0px;*/
        /*width: 528px;*/
        border: 1px solid var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    /*end*/
    .modal-content {
        padding-right: 24px;
        padding-left: 24px;

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .top-space-cus {
        margin-top: 3rem !important;

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .topbott-space-cus {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    /*set video and overlay size of modal-ocr*/
    @media (min-width: 1367px) and (orientation: portrait) {

        @keyframes zoomIn {
            0% {
                transform: scale(0.5); /* Start at default scale */
                box-shadow: 0 0 0 300px rgba(0, 0, 0, 0.9); /* Default shadow */
            }
            100% {
                transform: scale(1); /* Start at default scale */
                box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
            }
        }
        .zoom-in {
            animation: zoomIn 1s forwards; /* Apply animation */
        }
        @keyframes zoomCenter {
            0% {
                transform: scale(1); /* Start at default scale */
                box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
            }
            100% {
                transform: scale(0.9); /* End at zoomed out scale */
                box-shadow: 0 0 0 50px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
            }
        }
        .zoom-center {
            animation: zoomCenter 1s forwards; /* Apply animation */
        }
        @keyframes zoomOut {
            0% {
                transform: scale(1); /* Start at default scale */
                box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
            }
            100% {
                transform: scale(0.5); /* End at zoomed out scale */
                box-shadow: 0 0 0 300px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
            }
        }

        .zoom-out {
            animation: zoomOut 1s forwards; /* Apply animation */
        }
        /*set video and overlay size of modal-ocr*/
        .modal-content #cameraFeed4 {
            z-index: 999;
            position: absolute;
            width: 530px;
            height: 357.98px;

            object-fit: cover;
            border-radius: var(--borderRadius16);
            /*border: solid 2px var(--white);*/

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        .modal-content #cameraFeed2 {
            z-index: 999;
            position: absolute;
            width: 530px;
            height: 357.98px;

            object-fit: cover;
            border-radius: var(--borderRadius16);
            /*border: solid 2px var(--white);*/

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        .modal-content #cameraFeedidcard {
            z-index: 999;
            position: absolute;
            width: 530px;
            height: 357.98px;

            object-fit: cover;
            border-radius: var(--borderRadius16);
            /*border: solid 2px var(--white);*/

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        .modal-content .idCard-overlay {
            position: relative;
            z-index: 5000;

            width: 530px;
            height: 357.98px;
            /*height: 386.98px;*/

            /*background-color: white;*/
            border-radius: var(--borderRadius16);
            border: solid 2px var(--white);

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        .modal-content .idCard-overlay-inside {
            position: relative;
            z-index: 5000;

            left: 369.84px;
            top: 163.08px;

            width: 136.33px;
            height: 162.25px;
            /*background-color: white;*/
            border-radius: var(--borderRadius16);
            border: solid 2px var(--white);

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        #capture-ocr2 .capture-ocr-button {
            justify-content: center !important;

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }
    }


    .gap-custom {
        gap: 24px;
    }

    /*set video and overlay size of capture-ocr*/
    .capture-ocr-page #cameraFeed2 {
        z-index: 999;

        position: absolute;
        width: 530px;
        height: 386.98px;

        object-fit: cover;
        border-radius: var(--borderRadius16);
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .capture-ocr-page #cameraFeedidcard {
        z-index: 999;

        position: absolute;
        width: 530px;
        height: 386.98px;

        object-fit: cover;
        border-radius: var(--borderRadius16);
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .capture-ocr-page .idCard-overlay {
        position: relative;
        z-index: 5000;
        width: 530px;
        height: 386.98px;
        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .capture-ocr-page .idCard-overlay-inside {
        position: relative;
        left: 365.84px;
        top: 184.08px;

        z-index: 5000;
        width: 141.33px;
        height: 168.25px;
        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    /*end*/
    /*set video and overlay size of modal-capture-face , capture-face*/
    .iframe-custom iframe {
        top: 20%;
        z-index: -5000;
        position: absolute;
        /*position: absolute;*/
        width: 200px;
        height: 200px;
        /*border-radius: 50%;*/
        object-fit: cover;
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .circle {
        bottom: 2px;
        position: relative;
        z-index: 5000;
        width: 465px;
        height: 465px;
        /*background-color: white;*/
        border-radius: 50%;
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    #cameraFeed {
        z-index: 999;
        position: absolute;
        width: 465px;
        height: 465px;
        border-radius: 50%;
        object-fit: cover;
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;

    }

    #cameraFeedNF {

        position: absolute;
        width: 595px;
        height: 595px;
        border-radius: 50%;
        object-fit: cover;
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .circleNf2f {
        position: relative;
        z-index: 5000;
        width: 465px;
        height: 465px;
        /*background-color: white;*/
        border-radius: 50%;
        border: solid 2px var(--white);;

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    #cameraFeed5 {
        top: 213px;
        z-index: 999;
        position: absolute;
        width: 465px;
        height: 465px;
        border-radius: 50%;
        object-fit: cover;
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;

    }

    /*end*/
    .btn-cancel-modal {
        width: 350px;
    }

    .btn-accept-modal {
        width: 350px;

    }

    .icon-modal {
        width: auto;
        height: 130px;
    }

    .text-capture-inform {
        font-size: 28px;
    }

    .text-capture-posture {
        font-size: 28px;
    }
}

/*Pc device landscape*/
@media (max-width: 1366px) {

    @keyframes zoomIn {
        0% {
            transform: scale(0.5); /* Start at default scale */
            box-shadow: 0 0 0 300px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
        100% {
            transform: scale(1); /* Start at default scale */
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
    }
    .zoom-in {
        animation: zoomIn 1s forwards; /* Apply animation */
    }
    @keyframes zoomCenter {
        0% {
            transform: scale(1); /* Start at default scale */
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
        100% {
            transform: scale(0.9); /* End at zoomed out scale */
            box-shadow: 0 0 0 50px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
        }
    }
    .zoom-center {
        animation: zoomCenter 1s forwards; /* Apply animation */
    }
    @keyframes zoomOut {
        0% {
            transform: scale(1); /* Start at default scale */
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
        100% {
            transform: scale(0.5); /* End at zoomed out scale */
            box-shadow: 0 0 0 300px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
        }
    }

    .zoom-out {
        animation: zoomOut 1s forwards; /* Apply animation */
    }
    /*set video and overlay size of modal-ocr-passport*/
    .modal-content #cameraFeed3 {
        z-index: 999;

        position: absolute;
        width: 530px;
        height: 387px;

        object-fit: cover;
        border-radius: var(--borderRadius16);
        /*border: solid 2px var(--white);*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .modal-content .passport-overlay {
        position: relative;
        z-index: 5000;
        width: 530px;
        height: 387px;
        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .modal-content .passport-overlay-inside {
        position: relative;
        left: 30.84px;
        top: 62px;

        z-index: 5000;
        width: 152px;
        height: 202px;
        /*background-color: white;*/
        /*border-radius: var(--borderRadius16);*/
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .modal-content .passport-overlay-inside2 {
        position: relative;
        left: 0px;
        top: 86px;
        z-index: 5000;
        /*height: 0px;*/
        /*width: 528px;*/
        border: 1px solid var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    /*end*/
    .top-space-cus {
        margin-top: 3rem !important;

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .topbott-space-cus {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important;

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    /*set video and overlay size of modal-ocr*/
    @media (min-width: 1025px) and (orientation: portrait) {

        @keyframes zoomIn {
            0% {
                transform: scale(0.5); /* Start at default scale */
                box-shadow: 0 0 0 300px rgba(0, 0, 0, 0.9); /* Default shadow */
            }
            100% {
                transform: scale(1); /* Start at default scale */
                box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
            }
        }
        .zoom-in {
            animation: zoomIn 1s forwards; /* Apply animation */
        }
        @keyframes zoomCenter {
            0% {
                transform: scale(1); /* Start at default scale */
                box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
            }
            100% {
                transform: scale(0.9); /* End at zoomed out scale */
                box-shadow: 0 0 0 50px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
            }
        }
        .zoom-center {
            animation: zoomCenter 1s forwards; /* Apply animation */
        }
        @keyframes zoomOut {
            0% {
                transform: scale(1); /* Start at default scale */
                box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
            }
            100% {
                transform: scale(0.5); /* End at zoomed out scale */
                box-shadow: 0 0 0 300px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
            }
        }

        .zoom-out {
            animation: zoomOut 1s forwards; /* Apply animation */
        }
        /*set video and overlay size of modal-ocr*/
        .modal-content #cameraFeed2 {
            z-index: 999;
            position: absolute;
            width: 530px;
            height: 357.98px;

            object-fit: cover;
            border-radius: var(--borderRadius16);
            /*border: solid 2px var(--white);*/

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        .modal-content #cameraFeedidcard {
            z-index: 999;
            position: absolute;
            width: 530px;
            height: 357.98px;

            object-fit: cover;
            border-radius: var(--borderRadius16);
            /*border: solid 2px var(--white);*/

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        .modal-content #cameraFeed4 {
            z-index: 999;

            position: absolute;
            width: 530px;
            height: 357.98px;

            object-fit: cover;
            border-radius: var(--borderRadius16);
            /*border: solid 2px var(--white);*/

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        .modal-content .idCard-overlay {
            position: relative;
            z-index: 5000;

            width: 530px;
            height: 357.98px;
            /*height: 386.98px;*/

            /*background-color: white;*/
            border-radius: var(--borderRadius16);
            border: solid 2px var(--white);

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        .modal-content .idCard-overlay-inside {
            position: relative;
            z-index: 5000;

            left: 369.84px;
            top: 163.08px;

            width: 136.33px;
            height: 162.25px;
            /*background-color: white;*/
            border-radius: var(--borderRadius16);
            border: solid 2px var(--white);

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        #capture-ocr2 .capture-ocr-button {
            justify-content: center !important;

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }
    }


    .gap-custom {
        gap: 24px;
    }

    /*set video and overlay size of capture-ocr*/
    .capture-ocr-page #cameraFeed2 {
        z-index: 999;
        position: absolute;
        width: 530px;
        height: 386.98px;

        object-fit: cover;
        border-radius: var(--borderRadius16);
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .capture-ocr-page #cameraFeedidcard {
        z-index: 999;
        position: absolute;
        width: 530px;
        height: 386.98px;

        object-fit: cover;
        border-radius: var(--borderRadius16);
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .capture-ocr-page .idCard-overlay {
        position: relative;
        z-index: 5000;
        width: 530px;
        height: 386.98px;
        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .capture-ocr-page .idCard-overlay-inside {
        position: relative;
        left: 365.84px;
        top: 184.08px;

        z-index: 5000;
        width: 141.33px;
        height: 168.25px;
        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    /*end*/
    /*set video and overlay size of modal-capture-face , capture-face*/
    .iframe-custom iframe {
        top: 20%;
        z-index: -5000;
        position: absolute;
        /*position: absolute;*/
        width: 200px;
        height: 200px;
        /*border-radius: 50%;*/
        object-fit: cover;
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .circle {
        bottom: 2px;
        position: relative;
        z-index: 5000;
        width: 600px;
        height: 600px;
        /*background-color: white;*/
        border-radius: 50%;
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    #cameraFeed {
        z-index: 999;
        position: absolute;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        object-fit: cover;
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;

    }

    #cameraFeedNF {
        position: absolute;
        width: 595px;
        height: 595px;
        border-radius: 50%;
        object-fit: cover;
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;

    }

    .circleNf2f {
        position: relative;
        z-index: 5000;
        width: 600px;
        height: 600px;
        /*background-color: white;*/
        border-radius: 50%;
        border: solid 2px var(--white);
        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    #cameraFeed5 {
        top: 213px;
        z-index: 999;
        position: absolute;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        object-fit: cover;
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;

    }

    /*end*/
    .btn-cancel-modal {
        width: 350px;
    }

    .btn-accept-modal {
        width: 350px;

    }

    .icon-modal {
        width: auto;
        height: 130px;
    }

    .text-capture-inform {
        font-size: 28px;
    }

    .text-capture-posture {
        font-size: 28px;
    }

    .capture-text {
        font-size: 28px;
    }

}

/*Ipad device landscape*/
@media (max-width: 1024px) {

    @keyframes zoomIn {
        0% {
            transform: scale(0.5); /* Start at default scale */
            box-shadow: 0 0 0 300px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
        100% {
            transform: scale(1); /* Start at default scale */
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
    }
    .zoom-in {
        animation: zoomIn 1s forwards; /* Apply animation */
    }
    @keyframes zoomCenter {
        0% {
            transform: scale(1); /* Start at default scale */
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
        100% {
            transform: scale(0.9); /* End at zoomed out scale */
            box-shadow: 0 0 0 50px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
        }
    }
    .zoom-center {
        animation: zoomCenter 1s forwards; /* Apply animation */
    }
    @keyframes zoomOut {
        0% {
            transform: scale(1); /* Start at default scale */
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
        100% {
            transform: scale(0.5); /* End at zoomed out scale */
            box-shadow: 0 0 0 300px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
        }
    }

    .zoom-out {
        animation: zoomOut 1s forwards; /* Apply animation */
    }

    /*set video and overlay size of modal-ocr-passport*/
    .modal-content #cameraFeed3 {
        z-index: 999;
        position: absolute;
        width: 530px;
        height: 387px;

        object-fit: cover;
        border-radius: var(--borderRadius16);
        /*border: solid 2px var(--white);*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .modal-content .passport-overlay {
        position: relative;
        z-index: 5000;
        width: 530px;
        height: 387px;
        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .modal-content .passport-overlay-inside {
        position: relative;
        left: 30.84px;
        top: 62px;

        z-index: 5000;
        width: 152px;
        height: 202px;
        /*background-color: white;*/
        /*border-radius: var(--borderRadius16);*/
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .modal-content .passport-overlay-inside2 {
        position: relative;
        left: 0px;
        top: 86px;
        z-index: 5000;
        /*height: 0px;*/
        /*width: 528px;*/
        border: 1px solid var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    /*.circle {*/
    /*    position: relative;*/
    /*    z-index: 5000;*/
    /*    width: 600px;*/
    /*    height: 600px;*/
    /*    !*background-color: white;*!*/
    /*    border-radius: 50%;*/
    /*    border: solid 2px var(--white);;*/
    /*}*/
    #cameraFeed {
        z-index: 999;

        position: relative;
        z-index: 5000;
        /*position: absolute;*/
        width: 600px;
        height: 600px;
        border-radius: 50%;
        object-fit: cover;
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;

    }

    #cameraFeedNF {
        position: absolute;
        width: 595px;
        height: 595px;
        border-radius: 50%;
        object-fit: cover;
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;

    }

    /*end*/
    .top-space-cus {
        margin-top: 3rem !important;
    }

    .topbott-space-cus {
        margin-top: 3rem !important;
        margin-bottom: 3rem !important
    }


    @media (min-width: 991px) and (orientation: portrait) {

        @keyframes zoomIn {
            0% {
                transform: scale(0.5); /* Start at default scale */
                box-shadow: 0 0 0 300px rgba(0, 0, 0, 0.9); /* Default shadow */
            }
            100% {
                transform: scale(1); /* Start at default scale */
                box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
            }
        }
        .zoom-in {
            animation: zoomIn 1s forwards; /* Apply animation */
        }
        @keyframes zoomCenter {
            0% {
                transform: scale(1); /* Start at default scale */
                box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
            }
            100% {
                transform: scale(0.9); /* End at zoomed out scale */
                box-shadow: 0 0 0 50px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
            }
        }
        .zoom-center {
            animation: zoomCenter 1s forwards; /* Apply animation */
        }
        @keyframes zoomOut {
            0% {
                transform: scale(1); /* Start at default scale */
                box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
            }
            100% {
                transform: scale(0.5); /* End at zoomed out scale */
                box-shadow: 0 0 0 300px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
            }
        }

        .zoom-out {
            animation: zoomOut 1s forwards; /* Apply animation */
        }
        /*set video and overlay size of modal-ocr*/
        /*set video and overlay size of modal-ocr*/
        .modal-content #cameraFeed2 {
            z-index: 999;
            position: absolute;
            width: 530px;
            height: 357.98px;

            object-fit: cover;
            border-radius: var(--borderRadius16);
            /*border: solid 2px var(--white);*/

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        .modal-content #cameraFeedidcard {
            z-index: 999;
            position: absolute;
            width: 530px;
            height: 357.98px;

            object-fit: cover;
            border-radius: var(--borderRadius16);
            /*border: solid 2px var(--white);*/

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        .modal-content #cameraFeed4 {
            z-index: 999;
            position: absolute;
            width: 530px;
            height: 357.98px;

            object-fit: cover;
            border-radius: var(--borderRadius16);
            /*border: solid 2px var(--white);*/

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        .modal-content .idCard-overlay {
            position: relative;
            z-index: 5000;

            width: 530px;
            height: 357.98px;
            /*height: 386.98px;*/

            /*background-color: white;*/
            border-radius: var(--borderRadius16);
            border: solid 2px var(--white);

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        .modal-content .idCard-overlay-inside {
            position: relative;
            z-index: 5000;

            left: 369.84px;
            top: 163.08px;

            width: 136.33px;
            height: 162.25px;
            /*background-color: white;*/
            border-radius: var(--borderRadius16);
            border: solid 2px var(--white);

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        #capture-ocr2 .capture-ocr-button {
            justify-content: center !important;

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }
    }

    .gap-custom {
        gap: 24px;
    }

    /*set video and overlay size of capture-ocr*/
    .capture-ocr-page #cameraFeed2 {
        z-index: 999;
        position: absolute;
        width: 530px;
        height: 386.98px;

        object-fit: cover;
        border-radius: var(--borderRadius16);
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .capture-ocr-page #cameraFeedidcard {
        z-index: 999;
        position: absolute;
        width: 530px;
        height: 386.98px;

        object-fit: cover;
        border-radius: var(--borderRadius16);
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .capture-ocr-page .idCard-overlay {
        position: relative;
        z-index: 5000;
        width: 530px;
        height: 386.98px;
        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .capture-ocr-page .idCard-overlay-inside {
        position: relative;
        left: 365.84px;
        top: 184.08px;

        z-index: 5000;
        width: 141.33px;
        height: 168.25px;
        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    /*end*/
    /*set video and overlay size of modal-capture-face , capture-face*/
    .iframe-custom iframe {
        top: 20%;
        z-index: -5000;
        position: absolute;
        width: 200px;
        height: 200px;
        /*border-radius: 50%;*/
        object-fit: cover;
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .circle {
        bottom: 2px;
        position: relative;
        z-index: 5000;
        width: 600px;
        height: 600px;
        /*background-color: white;*/
        border-radius: 50%;
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    #cameraFeed {
        z-index: 999;
        position: absolute;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        object-fit: cover;
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;

    }

    #cameraFeedNF {
        position: absolute;
        width: 595px;
        height: 595px;
        border-radius: 50%;
        object-fit: cover;
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;

    }

    .circleNf2f {
        position: relative;
        z-index: 5000;
        width: 600px;
        height: 600px;
        /*background-color: white;*/
        border-radius: 50%;
        border: solid 2px var(--white);
        background-clip: content-box;

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    #cameraFeed5 {
        top: 220px;
        z-index: 999;
        position: absolute;
        width: 600px;
        height: 600px;
        border-radius: 50%;
        object-fit: cover;
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;

    }

    /*end*/
    .btn-cancel-modal {
        width: 350px;
    }

    .btn-accept-modal {
        width: 350px;

    }

    .icon-modal {
        width: auto;
        height: 130px;
    }

    .text-capture-inform {
        font-size: 28px;
    }

    .text-capture-posture {
        font-size: 28px;
    }
}

/*Ipad device Portrait*/
@media (max-width: 990px) {

    @keyframes zoomIn {
        0% {
            transform: scale(0.5); /* Start at default scale */
            box-shadow: 0 0 0 250px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
        100% {
            transform: scale(1); /* Start at default scale */
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
    }
    .zoom-in {
        animation: zoomIn 1s forwards; /* Apply animation */
    }
    @keyframes zoomCenter {
        0% {
            transform: scale(1); /* Start at default scale */
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
        100% {
            transform: scale(0.9); /* End at zoomed out scale */
            box-shadow: 0 0 0 50px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
        }
    }
    .zoom-center {
        animation: zoomCenter 1s forwards; /* Apply animation */
    }
    @keyframes zoomOut {
        0% {
            transform: scale(1); /* Start at default scale */
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
        100% {
            transform: scale(0.5); /* End at zoomed out scale */
            box-shadow: 0 0 0 250px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
        }
    }

    .zoom-out {
        animation: zoomOut 1s forwards; /* Apply animation */
    }
    #capture-face-nf2f .space-b2 {
        margin-bottom: 1.5rem !important
    }

    #capture-face-nf2f .space-bt1 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important
    }

    #capture-face-nf2f .space-t1 {
        margin-bottom: 1.5rem !important
    }

    #capture-face-nf2f .space-b1 {
        margin-bottom: 1.5rem !important
    }

    /*@media (max-width: 990px)and (orientation: landscape) and (max-height: 500px){*/
    /*    .modal-fullscreen {*/
    /*        height: auto;*/
    /*    }*/
    /*}*/
    @media (min-width: 501px) and (orientation: landscape) {

        @keyframes zoomIn {
            0% {
                transform: scale(0.5); /* Start at default scale */
                box-shadow: 0 0 0 300px rgba(0, 0, 0, 0.9); /* Default shadow */
            }
            100% {
                transform: scale(1); /* Start at default scale */
                box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
            }
        }
        .zoom-in {
            animation: zoomIn 1s forwards; /* Apply animation */
        }
        @keyframes zoomCenter {
            0% {
                transform: scale(1); /* Start at default scale */
                box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
            }
            100% {
                transform: scale(0.9); /* End at zoomed out scale */
                box-shadow: 0 0 0 50px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
            }
        }
        .zoom-center {
            animation: zoomCenter 1s forwards; /* Apply animation */
        }
        @keyframes zoomOut {
            0% {
                transform: scale(1); /* Start at default scale */
                box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
            }
            100% {
                transform: scale(0.5); /* End at zoomed out scale */
                box-shadow: 0 0 0 300px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
            }
        }

        .zoom-out {
            animation: zoomOut 1s forwards; /* Apply animation */
        }
        #capture-ocr2 #ocr-inform2 {
            margin-top: -24px;
        }

        .topbott-space-cus {
            margin-top: 3rem !important;
            margin-bottom: 3rem !important;

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        #capture-ocr2 .ocr-landscape {
            height: 94vh !important;
            /*gap: 5rem;*/
            display: flex;
            flex-direction: row;
            justify-content: space-between;

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        #capture-ocr2 #modalhead-ocr-portrait {
            display: none;
        }

        /*set video and overlay size of modal-ocr*/
        .modal-content #cameraFeed2 {
            z-index: 999;
            position: absolute;
            width: 430px;
            height: 280px;

            object-fit: cover;
            border-radius: var(--borderRadius16);
            /*border: solid 2px var(--white);*/

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        .modal-content #cameraFeedidcard {
            z-index: 999;
            position: absolute;
            width: 430px;
            height: 280px;

            object-fit: cover;
            border-radius: var(--borderRadius16);
            /*border: solid 2px var(--white);*/

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        .modal-content #cameraFeed4 {
            z-index: 999;
            position: absolute;
            width: 430px;
            height: 280px;

            object-fit: cover;
            border-radius: var(--borderRadius16);
            /*border: solid 2px var(--white);*/

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        .modal-content .idCard-overlay {
            bottom: 4px;
            position: relative;
            z-index: 5000;

            width: 430px;
            height: 280px;
            /*height: 386.98px;*/

            /*background-color: white;*/
            border-radius: var(--borderRadius16);
            border: solid 2px var(--white);

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        .modal-content .idCard-overlay-inside {
            position: relative;
            z-index: 5000;

            left: 308.84px;
            top: 134.08px;
            width: 107.33px;
            height: 125.25px;

            /*background-color: white;*/
            border-radius: var(--borderRadius16);
            border: solid 2px var(--white);

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }
    }
    @media (min-width: 501px) and (orientation: portrait) {

        @keyframes zoomIn {
            0% {
                transform: scale(0.5); /* Start at default scale */
                box-shadow: 0 0 0 250px rgba(0, 0, 0, 0.9); /* Default shadow */
            }
            100% {
                transform: scale(1); /* Start at default scale */
                box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
            }
        }
        .zoom-in {
            animation: zoomIn 1s forwards; /* Apply animation */
        }
        @keyframes zoomCenter {
            0% {
                transform: scale(1); /* Start at default scale */
                box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
            }
            100% {
                transform: scale(0.9); /* End at zoomed out scale */
                box-shadow: 0 0 0 50px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
            }
        }
        .zoom-center {
            animation: zoomCenter 1s forwards; /* Apply animation */
        }
        @keyframes zoomOut {
            0% {
                transform: scale(1); /* Start at default scale */
                box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
            }
            100% {
                transform: scale(0.5); /* End at zoomed out scale */
                box-shadow: 0 0 0 250px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
            }
        }

        .zoom-out {
            animation: zoomOut 1s forwards; /* Apply animation */
        }
        #capture-ocr2 #close-orc-lands {
            display: none !important;
        }

        #capture-ocr2 .capture-ocr-button {
            justify-content: center !important;

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        .topbott-space-cus {
            margin-top: 3rem !important;
            margin-bottom: 3rem !important;

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        /*set video and overlay size of modal-ocr*/
        .modal-content #cameraFeed4 {
            z-index: 999;
            position: absolute;
            width: 530px;
            height: 357.98px;

            object-fit: cover;
            border-radius: var(--borderRadius16);
            /*border: solid 2px var(--white);*/

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        .modal-content #cameraFeedidcard {
            z-index: 999;
            position: absolute;
            width: 530px;
            height: 357.98px;
            object-fit: cover;
            border-radius: var(--borderRadius16);
            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;

        }

        .modal-content #cameraFeed2 {
            z-index: 999;
            position: absolute;
            width: 530px;
            height: 357.98px;

            object-fit: cover;
            border-radius: var(--borderRadius16);

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        .modal-content .idCard-overlay {
            bottom: 4px;
            position: relative;
            z-index: 5000;

            width: 530px;
            height: 357.98px;
            /*height: 386.98px;*/

            /*background-color: white;*/
            border-radius: var(--borderRadius16);
            border: solid 2px var(--white);

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }

        .modal-content .idCard-overlay-inside {
            position: relative;
            z-index: 5000;

            left: 384.84px;
            top: 181.08px;
            width: 129.33px;
            height: 150.25px;

            /*background-color: white;*/
            border-radius: var(--borderRadius16);
            border: solid 2px var(--white);

            -webkit-appearance: none;
            -moz-appearance: none; /*For Mozilla*/
            appearance: none;
        }
    }

    /*.count-capture-posture h3 {*/
    /*    position: relative;*/
    /*    top: 22px*/
    /*}*/
    /*set video and overlay size of modal-ocr-passport*/
    .modal-content #cameraFeed3 {
        z-index: 999;
        position: absolute;
        width: 530px;
        height: 387px;

        object-fit: cover;
        border-radius: var(--borderRadius16);
        /*border: solid 2px var(--white);*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .modal-content .passport-overlay {
        bottom: 5px;
        position: relative;
        z-index: 5000;
        width: 530px;
        height: 387px;
        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .modal-content .passport-overlay-inside {
        position: relative;
        left: 30.84px;
        top: 62px;

        z-index: 5000;
        width: 152px;
        height: 202px;
        /*background-color: white;*/
        /*border-radius: var(--borderRadius16);*/
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .modal-content .passport-overlay-inside2 {
        position: relative;
        left: 0px;
        top: 86px;
        z-index: 5000;
        /*height: 0px;*/
        /*width: 528px;*/
        border: 1px solid var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    /*end*/
    .top-space-cus {
        margin-top: 3rem !important;

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }


    /*set video and overlay size of modal-ocr*/
    /*.modal-content #cameraFeed2 {*/
    /*    position: absolute;*/
    /*    width: 530px;*/
    /*    height: 357.98px;*/
    /*    object-fit: cover;*/
    /*    border-radius: var(--borderRadius16);*/
    /*    !*border: solid 2px var(--white);*!*/
    /*}*/
    .capture-ocr-page .chevron-back, .capture-face-page .chevron-back {
        margin-left: 16px;
    }

    .capture-ocr-page .sp-none, .capture-face-page .sp-none {
        margin-right: 16px;
    }

    .gap-custom {
        gap: 3rem;
    }

    /*set video and overlay size of capture-ocr*/
    .capture-ocr-page #cameraFeed2 {
        z-index: 999;
        position: absolute;
        width: 478px;
        height: 339.98px;

        object-fit: cover;
        border-radius: var(--borderRadius16);
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .capture-ocr-page #cameraFeedidcard {

        z-index: 999;
        position: absolute;
        width: 478px;
        height: 339.98px;
        object-fit: cover;
        border-radius: var(--borderRadius16);
        /*border: solid 2px var(--white);;*/
        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .capture-ocr-page .idCard-overlay {
        position: relative;
        z-index: 5000;
        width: 478px;
        height: 339.98px;
        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .capture-ocr-page .idCard-overlay-inside {
        position: relative;
        z-index: 5000;

        left: 331.84px;
        top: 157.08px;

        width: 125.33px;
        height: 152.25px;
        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    /*end*/
    /*set video and overlay size of modal-capture-face , capture-face*/
    .iframe-custom iframe {
        top: 20%;
        z-index: -5000;
        position: absolute;
        /*position: absolute;*/
        width: 200px;
        height: 200px;
        /*border-radius: 50%;*/
        object-fit: cover;
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .circle {
        bottom: 0.21875rem;
        position: relative;
        z-index: 5000;
        width: 450px;
        height: 450px;
        /*background-color: white;*/
        border-radius: 50%;
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    #cameraFeed {
        z-index: 999;
        position: absolute;
        width: 450px;
        height: 450px;
        border-radius: 50%;
        object-fit: cover;
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;

    }

    #cameraFeedNF {
        position: absolute;
        width: 445px;
        height: 445px;
        border-radius: 50%;
        object-fit: cover;
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;

    }

    .circleNf2f {
        position: relative;
        z-index: 5000;
        width: 450px;
        height: 450px;
        /*background-color: white;*/
        border-radius: 50%;
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    #cameraFeed5 {
        top: 220px;
        z-index: 999;
        position: absolute;
        width: 450px;
        height: 450px;
        border-radius: 50%;
        object-fit: cover;
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;

    }

    /*end*/
    .btn-cancel-modal {
        width: 205px;
    }

    .btn-accept-modal {
        width: 205px;

    }

    .icon-modal {
        width: auto;
        height: 100px;
    }

    .text-h3-modal {
        color: rgb(0, 0, 0);
        font-size: 25px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .text-modal {
        color: rgba(0, 0, 0, 0.6);
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;


    }

    .text-capture-inform {
        font-size: 24px;
    }

    .text-capture-posture {
        font-size: 24px;
    }

}

@media (max-width: 844px) {
    .modal-cap-text {
        color: red;
    }
}

/*mobile device Portrait*/
@media (max-width: 500px) {

    @keyframes zoomIn {
        0% {
            transform: scale(0.5); /* Start at default scale */
            box-shadow: 0 0 0 180px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
        100% {
            transform: scale(1); /* Start at default scale */
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
    }
    .zoom-in {
        animation: zoomIn 1s forwards; /* Apply animation */
    }
    @keyframes zoomCenter {
        0% {
            transform: scale(1); /* Start at default scale */
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
        100% {
            transform: scale(0.9); /* End at zoomed out scale */
            box-shadow: 0 0 0 30px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
        }
    }
    .zoom-center {
        animation: zoomCenter 1s forwards; /* Apply animation */
    }
    @keyframes zoomOut {
        0% {
            transform: scale(1); /* Start at default scale */
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
        100% {
            transform: scale(0.5); /* End at zoomed out scale */
            box-shadow: 0 0 0 180px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
        }
    }

    .zoom-out {
        animation: zoomOut 1s forwards; /* Apply animation */
    }
    #capture-face-nf2f .space-b2 {
        margin-bottom: .5rem !important
    }

    #capture-face-nf2f .space-bt1 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important
    }

    #capture-face-nf2f .space-t1 {
        margin-bottom: 0rem !important
    }

    #capture-face-nf2f .space-b1 {
        margin-bottom: 0rem !important
    }

    .btn-cancel-modal {
        width: 165px;
    }

    .btn-accept-modal {
        width: 165px;

    }

    /*.count-capture-posture h3 {*/
    /*    position: relative;*/
    /*    top: 17px*/
    /*}*/
    .count-capture-posture {
        width: 70px;
        height: 70px;
    }

    .flip-camera-icon {
        width: 45px !important;
        padding: 8px;
    }

    #capture-ocr2 #ocr-inform2 {
        margin-top: 2rem;
    }

    #capture-ocr2 .capture-ocr-button {
        justify-content: center !important;
    }

    /*set video and overlay size of modal-ocr-passport*/
    .modal-content #cameraFeed3 {
        z-index: 999;
        position: absolute;
        width: 350px;
        height: 273px;

        object-fit: cover;
        border-radius: var(--borderRadius16);
        /*border: solid 2px var(--white);*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .modal-content .passport-overlay {
        bottom: 8px;
        position: relative;
        z-index: 5000;
        width: 350px;
        height: 273px;
        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .modal-content .passport-overlay-inside {
        position: relative;
        left: 19.84px;
        top: 47px;
        z-index: 5000;
        width: 114px;
        height: 133px;
        /*background-color: white;*/
        /*border-radius: var(--borderRadius16);*/
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .modal-content .passport-overlay-inside2 {
        position: relative;
        left: 0px;
        top: 66px;
        z-index: 5000;
        /*height: 0px;*/
        /*width: 528px;*/
        border: 1px solid var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }


    /*ocr-mobile*/
    #capture-ocr2 #close-moblie-orc {
        display: block;

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .modal-content {
        padding-right: 8px;
        padding-left: 8px;

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .top-space-cus {
        margin-top: 3rem !important;

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .topbott-space-cus {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .text-capture-inform {
        font-size: 20px;
    }

    .text-capture-posture {
        font-size: 20px;
    }

    /*set video and overlay size of modal-ocr*/
    #capture-ocr2 .capture-ocr-button {
        justify-content: center !important;
        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    #capture-ocr2 .modal-content .idCard-overlay {
        top: 4px;
    }

    #capture-ocr2 #close-orc-lands {
        display: none !important;
    }

    #capture-ocr .modal-content #cameraFeed2, #cameraFeedidcard
    #capture-ocr2 .modal-content #cameraFeed4 {
        margin-top: 8px;
        position: absolute;
        width: 350px;
        height: 245.98px;

        object-fit: cover;
        border-radius: var(--borderRadius16);
        /*border: solid 2px var(--white);*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    /*id500*/
    #capture-ocr .modal-content .idCard-overlay,
    #capture-ocr2 .modal-content .idCard-overlay, #capture-Carddip .modal-content .idCard-overlay {
        bottom: 4px;
        position: relative;
        z-index: 5000;

        width: 350px;
        height: 245.98px;
        /*height: 386.98px;*/

        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    #capture-ocr .modal-content .idCard-overlay-inside,
    #capture-ocr2 .modal-content .idCard-overlay-inside, #capture-Carddip .modal-content .idCard-overlay-inside {
        position: relative;
        z-index: 5000;

        left: 247.84px;
        top: 115.08px;

        width: 89.33px;
        height: 112.25px;
        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }


    /*set video and overlay size of capture-ocr*/
    .capture-ocr-page #cameraFeed2 {
        position: absolute;
        width: 478px;
        height: 339.98px;

        object-fit: cover;
        border-radius: var(--borderRadius16);
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .capture-ocr-page #cameraFeedidcard {
        position: absolute;
        width: 478px;
        height: 339.98px;
        object-fit: cover;
        border-radius: var(--borderRadius16);
        /*border: solid 2px var(--white);;*/
        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .capture-ocr-page .idCard-overlay {
        position: relative;
        z-index: 5000;
        width: 478px;
        height: 339.98px;
        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .capture-ocr-page .idCard-overlay-inside {
        position: relative;
        z-index: 5000;

        left: 331.84px;
        top: 157.08px;

        width: 125.33px;
        height: 152.25px;
        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    /*end*/
    /*set video and overlay size of modal-capture-face , capture-face*/
    .iframe-custom iframe {
        top: 20%;
        z-index: -5000;
        position: absolute;
        /*position: absolute;*/
        width: 200px;
        height: 200px;
        /*border-radius: 50%;*/
        object-fit: cover;
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    /*500cir*/
    .circle {
        position: relative;
        bottom: 6px;
        z-index: 5000;
        width: 350px;
        height: 350px;
        /*background-color: white;*/
        border-radius: 50%;
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    #cameraFeed {
        z-index: 999;
        position: absolute;
        width: 350px;
        height: 350px;
        border-radius: 50%;
        object-fit: cover;
        /*border: solid 2px var(--white);*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;

    }

    #cameraFeedNF {
        position: absolute;
        width: 345px;
        height: 345px;
        border-radius: 50%;
        object-fit: cover;
        /*border: solid 2px var(--white);*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;

    }

    .circleNf2f {
        position: relative;
        z-index: 5000;
        width: 350px;
        height: 350px;
        /*background-color: white;*/
        border-radius: 50%;
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    #cameraFeed5 {
        top: 140px;
        z-index: 999;
        position: absolute;
        width: 350px;
        height: 350px;
        border-radius: 50%;
        object-fit: cover;
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;

    }

    /*end*/
    #capture-ocr2 .gap-custom {
        gap: 24px;

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    #capture-ocr2 .btn-cancel-modal {
        width: 190px;

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    #capture-ocr2 .btn-accept-modal {
        width: 190px;

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;

    }
}


@media (max-width: 414px) {

    @keyframes zoomIn {
        0% {
            transform: scale(0.5); /* Start at default scale */
            box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
        100% {
            transform: scale(1); /* Start at default scale */
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
    }
    .zoom-in {
        animation: zoomIn 1s forwards; /* Apply animation */
    }
    @keyframes zoomCenter {
        0% {
            transform: scale(1); /* Start at default scale */
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
        100% {
            transform: scale(0.9); /* End at zoomed out scale */
            box-shadow: 0 0 0 30px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
        }
    }
    .zoom-center {
        animation: zoomCenter 1s forwards; /* Apply animation */
    }
    @keyframes zoomOut {
        0% {
            transform: scale(1); /* Start at default scale */
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
        100% {
            transform: scale(0.5); /* End at zoomed out scale */
            box-shadow: 0 0 0 200px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
        }
    }

    .zoom-out {
        animation: zoomOut 1s forwards; /* Apply animation */
    }
    #capture-face-nf2f .space-bt1 {
        padding-top: 1rem !important;
        padding-bottom: 1.25rem !important
    }

    .btn-cancel-modal {
        width: 160px;
    }

    .btn-accept-modal {
        width: 160px;

    }

    #capture-ocr2 #ocr-inform2 {
        margin-top: 2rem;
    }

    #capture-ocr2 .capture-ocr-button {
        justify-content: center !important;

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    /*set video and overlay size of modal-ocr-passport*/
    .modal-content #cameraFeed3 {
        z-index: 999;

        position: absolute;
        width: 350px;
        height: 273px;

        object-fit: cover;
        border-radius: var(--borderRadius16);
        /*border: solid 2px var(--white);*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .modal-content .passport-overlay {
        bottom: 8px;
        position: relative;
        z-index: 5000;
        width: 350px;
        height: 273px;
        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .modal-content .passport-overlay-inside {
        position: relative;
        left: 19.84px;
        top: 47px;
        z-index: 5000;
        width: 114px;
        height: 133px;
        /*background-color: white;*/
        /*border-radius: var(--borderRadius16);*/
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .modal-content .passport-overlay-inside2 {
        position: relative;
        left: 0px;
        top: 66px;
        z-index: 5000;
        /*height: 0px;*/
        /*width: 528px;*/
        border: 1px solid var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }


    /*ocr-mobile*/
    #capture-ocr2 #close-moblie-orc {
        display: block;
    }

    .modal-content {
        padding-right: 8px;
        padding-left: 8px;
        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .top-space-cus {
        margin-top: 3rem !important;
        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .topbott-space-cus {
        margin-top: 1rem !important;
        margin-bottom: 1rem !important;
        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .text-capture-inform {
        font-size: 20px;
    }

    .text-capture-posture {
        font-size: 20px;
    }

    /*set video and overlay size of modal-ocr*/
    #capture-ocr2 .capture-ocr-button {
        justify-content: center !important;
    }

    #capture-ocr2 .modal-content .idCard-overlay {
        top: 4px;
    }

    #capture-ocr2 #close-orc-lands {
        display: none !important;
    }

    #capture-ocr .modal-content #cameraFeed2, #cameraFeedidcard, #capture-ocr2 .modal-content #cameraFeed4 {
        margin-top: 8px;
        position: absolute;
        width: 350px;
        height: 245.98px;

        object-fit: cover;
        border-radius: var(--borderRadius16);
        /*border: solid 2px var(--white);*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    /*id414*/
    #capture-ocr .modal-content .idCard-overlay, #capture-ocr2 .modal-content .idCard-overlay, #capture-Carddip .modal-content .idCard-overlay {
        bottom: 2px;
        position: relative;
        z-index: 5000;

        width: 350px;
        height: 245.98px;
        /*height: 386.98px;*/

        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    #capture-ocr .modal-content .idCard-overlay-inside, #capture-ocr2 .modal-content .idCard-overlay-inside, #capture-Carddip .modal-content .idCard-overlay-inside {
        position: relative;
        z-index: 5000;

        left: 247.84px;
        top: 115.08px;

        width: 89.33px;
        height: 112.25px;
        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .capture-ocr-page #cameraFeedidcard {

        position: absolute;
        width: 478px;
        height: 339.98px;
        object-fit: cover;
        border-radius: var(--borderRadius16);
        /*border: solid 2px var(--white);;*/
        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;

    }


    /*set video and overlay size of capture-ocr*/
    .capture-ocr-page #cameraFeed2 {
        position: absolute;
        width: 478px;
        height: 339.98px;

        object-fit: cover;
        border-radius: var(--borderRadius16);
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .capture-ocr-page .idCard-overlay {
        position: relative;
        z-index: 5000;
        width: 478px;
        height: 339.98px;
        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    .capture-ocr-page .idCard-overlay-inside {
        position: relative;
        z-index: 5000;

        left: 331.84px;
        top: 157.08px;

        width: 125.33px;
        height: 152.25px;
        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    /*end*/
    /*set video and overlay size of modal-capture-face , capture-face*/
    .iframe-custom iframe {
        /*position: absolute;*/
        width: 200px;
        height: 200px;
        /*border-radius: 50%;*/
        object-fit: cover;
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    /*414cir*/
    .circle {
        position: relative;
        bottom: 6px;
        z-index: 5000;
        width: 350px;
        height: 350px;
        /*background-color: white;*/
        border-radius: 50%;
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    #cameraFeed {
        z-index: 999;
        position: absolute;
        width: 350px;
        height: 350px;
        border-radius: 50%;
        object-fit: cover;
        /*border: solid 2px var(--white);*/
        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;

    }

    /*end*/
    #capture-ocr2 .gap-custom {
        gap: 24px;
    }

    #capture-ocr2 .btn-cancel-modal {
        width: 190px;
    }

    #capture-ocr2 .btn-accept-modal {
        width: 190px;

    }

    .circleNf2f {
        position: relative;
        z-index: 5000;
        width: 350px;
        height: 350px;
        /*background-color: white;*/
        border-radius: 50%;
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    #cameraFeed5 {
        top: 140px;
        z-index: 999;
        position: absolute;
        width: 350px;
        height: 350px;
        border-radius: 50%;
        object-fit: cover;
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;

    }

    .count-capture-posture {
        width: 65px;
        height: 65px;
    }
}

@media (max-width: 376px) {

    @keyframes zoomIn {
        0% {
            transform: scale(0.5); /* Start at default scale */
            box-shadow: 0 0 0 160px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
        100% {
            transform: scale(1); /* Start at default scale */
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
    }
    .zoom-in {
        animation: zoomIn 1s forwards; /* Apply animation */
    }
    @keyframes zoomCenter {
        0% {
            transform: scale(1); /* Start at default scale */
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
        100% {
            transform: scale(0.9); /* End at zoomed out scale */
            box-shadow: 0 0 0 23px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
        }
    }
    .zoom-center {
        animation: zoomCenter 1s forwards; /* Apply animation */
    }
    @keyframes zoomOut {
        0% {
            transform: scale(1); /* Start at default scale */
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.9); /* Default shadow */
        }
        100% {
            transform: scale(0.5); /* End at zoomed out scale */
            box-shadow: 0 0 0 160px rgba(0, 0, 0, 0.9); /* Large shadow to create overlay effect */
        }
    }

    .zoom-out {
        animation: zoomOut 1s forwards; /* Apply animation */
    }
    /*#capture-face-nf2f  .space-bt1 {*/
    /*    padding-top: 0.5rem !important;*/
    /*    padding-bottom: 0.5rem !important*/
    /*}*/
    #capture-face-nf2f .space-bt1 {
        padding-top: 0.5rem !important;
        padding-bottom: 1rem !important
    }

    #capture-face-nf2f .space-b2 {
        margin-bottom: 0rem !important
    }

    .circleNf2f {
        position: relative;
        z-index: 5000;
        width: 320px;
        height: 320px;
        /*background-color: white;*/
        border-radius: 50%;
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    #cameraFeed5 {
        top: 132px;
        z-index: 999;
        position: absolute;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        object-fit: cover;
        /*border: solid 2px var(--white);;*/

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;

    }

    .circle {
        position: relative;
        bottom: 7px;
        z-index: 5000;
        width: 320px;
        height: 320px;
        /* background-color: white; */
        border-radius: 50%;
        border: solid 2px var(--white);
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    #cameraFeed {
        z-index: 999;
        position: absolute;
        width: 320px;
        height: 320px;
        border-radius: 50%;
        object-fit: cover;
        /* border: solid 2px var(--white); */
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .count-capture-posture {
        width: 65px;
        height: 65px;
    }

    .top-space-cus {
        margin-top: 2rem !important;
        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }

    /*id375*/
    #capture-ocr .modal-content .idCard-overlay, #capture-ocr2 .modal-content .idCard-overlay {
        bottom: 2px;
        position: relative;
        z-index: 5000;

        width: 350px;
        height: 245.98px;
        /*height: 386.98px;*/

        /*background-color: white;*/
        border-radius: var(--borderRadius16);
        border: solid 2px var(--white);

        -webkit-appearance: none;
        -moz-appearance: none; /*For Mozilla*/
        appearance: none;
    }


}


.modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 0px;
    border-top-left-radius: calc(.3rem - 1px);
    border-top-right-radius: calc(.3rem - 1px);
    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}


.modal-header2 {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1rem;
    border-bottom: 0px;
    border-top-left-radius: calc(.3rem - 1px);
    border-top-right-radius: calc(.3rem - 1px);
    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}

.modal-header .btn-close {
    /*padding: .5rem .5rem;*/
    margin: -.5rem -.5rem -.5rem auto;
    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}

.modal-content {
    padding-top: 16px;
    padding-bottom: 16px;
    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}

.modal-cap-bg {
    background-color: var(--black) !important;
    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}

.modal-cap-text {
    color: var(--white) !important;
    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}

.modal-icon-text {
    gap: 4px;
}

.sp-none {
    width: 32px;
    height: 24px;
    padding: .25em .25em;
    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}


.chevron-back {
    font-size: 40px;
    box-sizing: content-box;
    width: 24px;
    height: 24px;
    padding: .25em .25em;
    color: var(--black);
    background: transparent url('data:image/png;base64,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') center/1em auto no-repeat;
    border: 0;
    border-radius: .25rem;
    opacity: 1;
    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}

.btn-close {
    font-size: 15px;
    box-sizing: content-box;
    width: 24px;
    height: 24px;
    padding: .25em .25em;
    color: var(--black);
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    border: 0;
    border-radius: .25rem;
    opacity: .5;
    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}

.btn-accept-modal {
    /* Auto layout */
    font-size: 15px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8px 22px;
    color: var(--white);
    position: static;
    /*width: 150px;*/
    height: 56px;
    background: #0078D6;
    border-radius: 2px;
    flex: none;
    order: 1;
    flex-grow: 0;
    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}

.btn-cancel-modal {
    /* Auto layout */
    font-size: 15px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0px 25.6px;
    color: #000000B2;
    position: static;
    /*width: 150px;*/
    height: 56px;
    top: 0px;
    background: var(--white);
    border: 1px solid #000000B2;
    border-radius: 2px;
    /* Inside auto layout */
    flex: none;
    order: 1;
    flex-grow: 0;
    /*margin: 0px 20px;*/
    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}

.button-ocr-cap, .button-face-cap {
    position: absolute;
    bottom: 5rem;
    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}

.gap-24 {
    gap: 24px !important;
    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}

.inform-posture {
    font-family: 'Poppins', sans-serif;
}

.text-capture-inform {
    color: var(--black);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}

. mtext-capture-posture {
    color: var(--black);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}

.count-capture-posture {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFFFFF;
    border-radius: 50%;
    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}

/*!*set video and overlay size of modal-ocr-passport*!*/
/*.modal-content #cameraFeed3 {*/
/*    position: absolute;*/
/*    width: 530px;*/
/*    height: 387px;*/

/*    object-fit: cover;*/
/*    border-radius: var(--borderRadius16);*/
/*    !*border: solid 2px var(--white);*!*/
/*}*/
/*.modal-content .passport-overlay {*/
/*    position: relative;*/
/*    z-index: 5000;*/
/*    width: 530px;*/
/*    height: 387px;*/
/*    !*background-color: white;*!*/
/*    border-radius: var(--borderRadius16);*/
/*    border: solid 2px var(--white);*/
/*}*/
/*.modal-content .passport-overlay-inside {*/
/*    position: relative;*/
/*    left: 30.84px;*/
/*    top: 62px;*/

/*    z-index: 5000;*/
/*    width: 152px;*/
/*    height: 202px;*/
/*    !*background-color: white;*!*/
/*    !*border-radius: var(--borderRadius16);*!*/
/*    border: solid 2px var(--white);*/
/*}*/
/*.modal-content .passport-overlay-inside2 {*/
/*    position: relative;*/
/*    left: 0px;*/
/*    top: 86px;*/
/*    z-index: 5000;*/
/*    !*height: 0px;*!*/
/*    !*width: 528px;*!*/
/*    border: 1px solid var(--white);*/
/*}*/
/*!*end*!*/

/*.idCard-overlay {*/
/*    position: relative;*/
/*    z-index: 5000;*/
/*    width: 530px;*/
/*    height: 386.98px;*/
/*    !*background-color: white;*!*/
/*    border-radius: 16px;*/
/*    border: solid 2px var(--white);*/
/*}*/
/*.idCard-overlay-inside {*/
/*    position: relative;*/
/*    left: 365.84px;*/
/*    top: 184.08px;*/

/*    z-index: 5000;*/
/*    width: 141.33px;*/
/*    height: 168.25px;*/
/*    !*background-color: white;*!*/
/*    border-radius: 16px;*/
/*    border: solid 2px var(--white);*/
/*}*/
/*video setting size*/
.cap-camera-icon {
    width: 120px !important;
    height: auto;
    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}

.flip-camera-icon {
    /*width: 45px !important;*/
    height: auto;

    /*padding: 12px;*/
    /*width: 65px !important;*/

    border-radius: 50%;
    background-color: #d1d3d475;
    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}

#capture-face .cap-camera {
    position: absolute;
    left: calc(50% - 72px);
    padding: 0;
    z-index: 1000;

    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}

/* Add a CSS class for blinking animation */
@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }


}

.blink {
    animation: blink 0.25s infinite;

    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}


/*set background modal*/
#capture-face, #capture-ocr, #capture-ocr-passport, #capture-ocr2, #capture-face-nf2f {
    background-color: var(--black);

    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}

/*set background page*/
.capture-ocr-page, .capture-face-page {
    background-color: var(--black);
    height: 100vh; /* 100% of the viewport height */
    margin: 0; /* Remove default margin to ensure full coverage */
    padding: 0; /* Remove default padding */
    overflow: hidden;

    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}

.capture-face-page video, #capture-face video, #capture-face-nf2f video {
    transform: scale(-1, 1);

    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}

.circle-core2 {
    width: 100%;
    height: 100%;
    background-color: #000000;
    border-radius: 50%;

    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}

.frame-warning {
    width: auto;
    height: 32px;
    border: solid 1px transparent;

    -webkit-appearance: none;
    -moz-appearance: none; /*For Mozilla*/
    appearance: none;
}

/*.capture-face-page video::-webkit-media-controls-panel, #capture-face video::-webkit-media-controls-panel {*/
/*    transform: scale(-1, 1);*/
/*}*/
.text-countdown {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
}