.showPopup {
    position: fixed; /* fixed instead of absolute */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* full viewport height */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 999999; /* above everything */
    /*background-color: rgba(0, 0, 0, 0.4);*/ /* optional dim background */
    padding: 0; /* remove left padding */
}
    
.otp_verfiy_popup {
    position: relative;
    z-index: 1000000; /* ensure popup itself stays above overlay */
    background-color: var(--color-BgOrgWhite);
    border-radius: 8px;
    box-shadow: 0 8px 20px var(--color-DropBoxShadowx);
}

.otpContainer,
.otp_verfiy_popup {
    display: flex;
    flex-direction: column;
    background-color: var(--color-BgOrgWhite);
    border-radius: 4px;
    color: var(--color-TextBlack)
}

.otpContainer {
    box-shadow: 0 7px 6px -5px var(--color-PopupShadowx), 0 8px 23px 2px var(--color-PopupShadowx), 0 1px 7px 1px var(--color-PopupShadowx);
    max-height: 80%;
    max-width: 100%;
    min-width: 240px;
    position: relative
}

.otp_verfiy_popup {
    float: left;
    width: 1050px;
    min-height: 450px;
    height: auto;
    margin: 0;
    z-index: 99999999999
}

    .otp_verfiy_popup .otp_popup {
        height: 100%;
        top: 0;
        z-index: 2
    }

    .otp_verfiy_popup .popup_overlay {
        position: fixed;
        height: 100%;
        width: 100%;
        background-color: var(--color-BgBlack);
        opacity: .4
    }

    .otp_verfiy_popup .otp_popup .popup_region {
        height: 100%;
        width: 100%;
        align-items: flex-start;
        border-radius: 4px;
        margin: 0;
        display: flex;
        flex-direction: column
    }

    .otp_verfiy_popup .popup_region .popup_header {
        float: left;
        width: 100%;
        height: 55px;
        background-color: var(--color-BgOrgWhite);
        border-bottom: 2px solid var(--color-BodTertiaryGray);
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 9999999;
        background-image: none;
        padding: 2px 15px 0
    }

        .otp_verfiy_popup .popup_region .popup_header .close_btn {
            cursor: pointer;
            color: var(--color-TextBlack)
        }

        .otp_verfiy_popup .popup_region .popup_header .popup_title .title_name {
            font-size: 24px;
            letter-spacing: 0;
            font-weight: 400;
            color: var(--color-TextBlack) !important;
            line-height: 32px
        }

.icon {
    font-family: var(--font-5) !important;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga"
}

.otp_verfiy_popup .otp_head {
    background: var(--color-BgOrgWhite);
    display: flex;
    align-items: center;
    grid-gap: 14px;
    padding: 0 18px
}

.otp_verfiy_popup .popup_region .popup_content {
    float: left;
    width: 100%;
    background-color: var(--color-BgOrgWhite);
    padding: 15px 15px 15px;
    max-height: 600px;
    overflow-y: auto;
    flex-grow: 1
}

.otp_verfiy_popup .popup_content .check_msg {
    float: left;
    width: 100%;
    padding-bottom: 20px;
    text-align: left
}

.verify-cntn {
    grid-gap: 5px;
    padding-bottom: 20px
}

    .verify-cntn .otp-title {
        font-size: 40px;
        font-weight: 300;
        letter-spacing: -.4px;
        color: var(--color-TextBlack) !important;
        text-align: left;
        display: block;
        margin: 0;
        padding: 0;
        font-family: var(--font-4) !important;
        line-height: 48px
    }

    .verify-cntn,
    .verify-cntn .otp_content {
        float: left;
        width: 100%;
        display: flex;
        flex-direction: column
    }

        .verify-cntn .otp-info {
            float: left;
            width: 100%;
            font-size: 21px;
            color: var(--color-TextBlack);
            text-align: left;
            letter-spacing: .3px
        }

            .verify-cntn .otp-info b {
                font-family: var(--font-3) !important
            }

        .verify-cntn .nme-sect {
            margin-bottom: 8px;
            user-select: none
        }

        .verify-cntn .key-lbl {
            color: var(--color-TextPrimaryBlue);
            font-size: 21px;
            margin-bottom: 0
        }

        .verify-cntn .key-value {
            color: var(--color-TextBlack);
            font-size: 20px;
            text-overflow: ellipsis;
            white-space: nowrap
        }

        .verify-cntn .key-value-blur {
            color: transparent;
            text-shadow: 0 0 10px var(--color-ShadowBlack)
        }

        .verify-cntn .otp-part {
            float: left;
            width: 100%;
            display: flex;
            align-items: center;
            grid-gap: 15px
        }

        .verify-cntn .otp_number {
            float: left;
            display: flex;
            align-items: center;
            justify-content: left;
            grid-gap: 10px
        }

        .verify-cntn .otp-part .input_block {
            float: left;
            position: relative;
            width: 52px;
            margin: 0;
            height: auto
        }

        .verify-cntn .input_block .customChanges {
            z-index: 1;
            display: block;
            position: relative;
            vertical-align: middle;
            text-align: center;
            border: 1px solid var(--color-BodTertiaryGray);
            height: 56px;
            border-radius: 8px;
            font-size: 23px;
            padding: 12px !important;
            width: 100%;
            background: var(--color-BgTextSecondaryCharcoleGray);
            white-space: nowrap;
            text-overflow: ellipsis;
            margin: 0;
            outline: 0 !important;
            background: var(--color-BgOrgWhite) !important;
            font-weight: 400;
            letter-spacing: normal;
            line-height: normal;
            float: left;
            box-sizing: border-box;
            color: var(--color-TextTextSecondaryCharcoleGray)
        }

.rt-errors-spacer {
    min-height: 1px;
    float: right;
    min-width: 1px
}

.verify-cntn .hyphen {
    position: absolute;
    font-weight: 900;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 17px;
    color: var(--color-TextPrimaryBlue);
    z-index: 9;
    pointer-events: none
}

.verify_btn {
    float: left;
    height: 50px;
    width: 170px;
    cursor: pointer;
    margin: 15px
}

.verify_btn_section {
    font-size: 20px;
    border-radius: 8px;
    color: var(--color-TextOrgWhite);
    width: 100%;
    height: 100%;
    background-color: var(--color-BgRedErrorText);
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center
}

.otp_verfiy_popup .popup_content .otp_value {
    display: flex;
    grid-gap: 15px;
    align-items: center;
    clear: left;
    float: left;
    color: var(--color-TextBlack)
}

.otp_nrml_txt {
    font-size: 21px;
    font-weight: 400;
    color: var(--color-TextBlack);
    letter-spacing: .3px
}

.verify_box_resend,
.verify_btn_resend.enablebtn {
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center
}

.verify_box_resend {
    color: var(--color-TextTextSecondaryCharcoleGray);
    height: 40px;
    width: 140px;
    line-height: normal
}

.verify_btn_resend.enablebtn {
    color: var(--color-TextOrgWhite);
    padding: 14px 0 13px;
    width: 100%;
    height: 100%
}

.read_txt {
    font-weight: 700;
    color: unset
}

.otp_verfiy_popup .popup_content .check_txt {
    font-size: 22px;
    font-weight: 400;
    color: var(--color-TextBlack);
    line-height: normal;
    white-space: nowrap
}

.btnDisable {
    pointer-events: none;
    background: var(--color-BgGrayMedium);
    border-color: var(--color-BodGrayMedium);
    cursor: not-allowed
}

.btnEnable {
    background-color: var(--color-BgPrimaryBlue);
    cursor: pointer
}

#count {
    color: var(--color-TextPrimaryBlue);
    font-size: 20px
}

.otp_error {
    border: 1px solid var(--color-BodRedErrorText) !important
}

.Enablebtn {
    cursor: pointer
}

.Disablebtn {
    cursor: not-allowed
}

.input_block .OTPField:focus + .hyphen,
.input_block .OTPField:not(:placeholder-shown) + .hyphen {
    z-index: -1
}

.check_txt.otp #count {
    color: var(--color-TextTextSecondaryCharcoleGray)
}

.new-popup .otp_bold {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-TextBlack);
    font-family: var(--font-2) !important
}

.new-popup {
    padding-top: 10px !important
}

    .new-popup .verify-cntn {
        padding: 0
    }

.verify_btn_section.succ-btnmain {
    background: var(--color-BgGreenSuccessAlert) !important;
    gap: 10px;
    border-color: var(--color-BodGreenSuccessAlert) !important
}

.footer_btns.btnEnable {
    background-color: var(--color-BgPrimaryBlue) !important;
    cursor: pointer !important
}

.footer_btns .nxt_txt {
    color: var(--color-TextOrgWhite)
}

.footer_btns .fa.fa-save {
    color: var(--color-TextOrgWhite);
    fill: var(--color-FillOrgWhite)
}
/*.content_input .over_Lay{
    width: calc(100% + 400px);
    left: -400px;
    height: 100vh;
    top: -83px;
    transition: 0.1s ease-out;
}*/
.content_input .over_Lay, #GovtEntityRegistration .content_input .over_Lay {
    width: calc(100% + 400px);
    left: -400px;
    height: 100vh;
    top: -83px;
    transition: 0.1s ease-out;
}

.company_reg_list {
    overflow: initial;
    padding-top: 3px;
}

@media (max-width:639px) {
    #GovtEntityRegistration .showPopup {
        top: -66px;
    }

    .otp_verfiy_popup {
        width: 100%;
        min-height: auto;
        height: auto;
        margin: 10px auto;
        box-shadow: none;
    }

    .verify-cntn .otp-title {
        font-size: 26px;
        line-height: 34px
    }

    .verify-cntn .check_txt,
    .verify-cntn .key-lbl,
    .verify-cntn .key-value,
    .verify-cntn .otp-info {
        font-size: 18px;
        word-wrap: break-word;
    }

    .verify-cntn .otp_number {
        margin-top: 12px;
    }

        .verify-cntn .otp_number .input_block {
            width: 100% !important
        }

    .verify-cntn .otp-part {
        float: left;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        grid-gap: 15px;
    }

    .verify-cntn .input_block .customChanges {
        height: 42px !important;
        font-size: 18px !important;
        padding: 8px !important
    }

    .verify_box_resend,
    .verify_btn {
        margin: 10px 0
    }

    .otp_verfiy_popup .popup_content .otp_value {
        display: grid;
        grid-template-columns: 35%auto auto;
        grid-gap: 10px;
    }

    .otpContainer {
        margin: 0 70px;
    }

    .content_input .over_Lay, #GovtEntityRegistration .content_input .over_Lay {
        width: calc(100% + 400px);
        left: -400px;
        height: 100vh !important;
        top: -190px;
        transition: 0.1s ease-out;
        z-index: 1; /*Map overlay issue*/
    }
}

@media (min-width:640px) {
    .content_input .over_Lay, #GovtEntityRegistration .content_input .over_Lay {
        width: calc(100% + 400px);
        left: -400px;
        height: 100vh !important;
        top: -187px;
        transition: 0.1s ease-out;
        position: fixed !important;
    }

    #GovtEntityRegistration .showPopup {
        top: -66px;
    }

    .otp_verfiy_popup {
        width: 100%
    }

    .verify-cntn .otp-title {
        font-size: 30px;
        line-height: 38px
    }

    .verify-cntn .otp-part {
        float: left;
        width: 100%;
        display: flex;
        /*        flex-direction: column;
        align-items: flex-start;*/
        flex-direction: row;
        align-items: center;
        grid-gap: 15px
    }

    .otpContainer {
        margin: 0 32px;
    }

    .storage_det .verify-cntn .otp_number {
        padding-top: 10px;
    }
}

@media (max-width:600px) {
    .otpContainer {
        width: 100%;
        min-width: unset;
        max-width: unset;
        margin: 0 20px;
    }

    .storekeeper_details .showPopup {
        padding: 0px 10px;
    }
}

@media (min-width:768px) {

    .otp_verfiy_popup {
        width: 100%
    }
    /*
    #GovtEntityRegistration .showPopup, .Company_registration .showPopup {
        left: -200px;
    }*/

    .verify-cntn .otp-title {
        font-size: 34px
    }

    .verify_box_resend,
    .verify_btn {
        width: 180px;
        margin: 15px !important
    }

    .verify-cntn .otp-part {
        float: left;
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        grid-gap: 15px
    }

    .Company_registration .verify-cntn .otp-part, #GovtEntityRegistration .verify-cntn .otp-part {
        float: left;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        grid-gap: 15px;
    }

    .Company_registration .verify-cntn .otp_number, #GovtEntityRegistration .verify-cntn .otp_number,
    .storage_det .verify-cntn .otp_number {
        padding-top: 10px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    #GovtEntityRegistration .showPopup,
    .Company_registration .showPopup {
        left: -200px;
    }

    .content_input .over_Lay {
        width: calc(100% + 400px);
        left: -400px;
        height: 100vh !important;
        top: -83px;
        transition: 0.1s ease-out;
    }

    .content_input .over_Lay, #GovtEntityRegistration .content_input .over_Lay {
        width: calc(100% + 400px);
        left: -400px;
        height: calc(100% + 86px) !important;
        top: -86px;
        transition: 0.1s ease-out;
    }

    .showPopup {
        top: 0
    }
}

@media (min-width:1024px) {
    .showPopup {
        top: 0
    }

    .content_input .over_Lay, #GovtEntityRegistration .content_input .over_Lay {
        width: calc(100% + 400px);
        left: -400px;
        height: calc(100% + 86px) !important;
        top: -86px;
        transition: 0.1s ease-out;
        z-index: 1; /*Map overlay issue*/

    }

    .otp_verfiy_popup {
        width: 100%
    }

    .verify-cntn .otp-title {
        font-size: 38px
    }

    .verify-cntn .otp-part {
        flex-direction: row !important;
        align-items: center !important
    }

    .Company_registration .verify-cntn .otp_number, #GovtEntityRegistration .verify-cntn .otp_number {
        padding-top: 10px;
    }

    #GovtEntityRegistration .showPopup, .Company_registration .showPopup {
        left: -200px;
    }
}

@media (min-width:1280px) {
    .otp_verfiy_popup {
        width: 950px
    }
}

@media (min-width:1536px) {
    .otp_verfiy_popup {
        width: 1050px
    }
}