﻿/*css for suggestion popup(mobile no) bootstrap start*/
/*add by Hari Sankar for font-family change based DDA documents 20240325*/
.popover {
    --bs-popover-zindex: 1070;
    --bs-popover-max-width: 276px;
    --bs-popover-font-size: 0.875rem;
    --bs-popover-border-width: 1px;
    --bs-popover-border-radius: 0.5rem;
    --bs-popover-inner-border-radius: calc(0.5rem - 1px);
    --bs-popover-box-shadow: 0 0.5rem 1rem var(--color-DropBoxShadowx);
    --bs-popover-header-padding-x: 1rem;
    --bs-popover-header-padding-y: 0.5rem;
    --bs-popover-header-font-size: 1rem;
    --bs-popover-header-color: inherit;
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: 1rem;
    --bs-popover-body-color: var(--color-TextTextSecondaryCharcoleGray); /*Needed To Remove the Color Variable*/
    --bs-popover-arrow-width: 1rem;
    --bs-popover-arrow-height: 0.5rem;
    z-index: var(--bs-popover-zindex);
    display: block;
    max-width: var(--bs-popover-max-width);
    font-family: var(--font-1);
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    white-space: normal;
    word-spacing: normal;
    line-break: auto;
    font-size: var(--bs-popover-font-size);
    word-wrap: break-word;
    background-clip: padding-box;
    border: var(--bs-popover-border-width) solid var(--color-BodOrgOffWhite);
    border-radius: var(--bs-popover-border-radius)
}

    .popover .popover-arrow {
        display: block;
        width: var(--bs-popover-arrow-width);
        height: var(--bs-popover-arrow-height);
    }

        .popover .popover-arrow::after, .popover .popover-arrow::before {
            position: absolute;
            display: block;
            content: "";
            border-color: transparent;
            border-style: solid;
            border-width: 0;
            left: 0px;
        }

.bs-popover-auto[data-popper-placement^=top] > .popover-arrow, .bs-popover-top > .popover-arrow {
    bottom: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
}

    .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .bs-popover-top > .popover-arrow::after, .bs-popover-top > .popover-arrow::before {
        border-width: var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0
    }

    .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::before, .bs-popover-top > .popover-arrow::before {
        bottom: 0px;
        border-top-color: var(--color-BodOrgOffWhite)
    }

    .bs-popover-auto[data-popper-placement^=top] > .popover-arrow::after, .bs-popover-top > .popover-arrow::after {
        bottom: var(--bs-popover-border-width);
        border-top-color: var(--color-BodOrgWhite)
    }

.bs-popover-auto[data-popper-placement^=right] > .popover-arrow, .bs-popover-end > .popover-arrow {
    left: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
    width: var(--bs-popover-arrow-height);
    height: var(--bs-popover-arrow-width)
}

    .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .bs-popover-end > .popover-arrow::after, .bs-popover-end > .popover-arrow::before {
        border-width: calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width) * .5) 0
    }

    .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::before, .bs-popover-end > .popover-arrow::before {
        left: 0;
        border-right-color: var(--color-BodOrgOffWhite)
    }

    .bs-popover-auto[data-popper-placement^=right] > .popover-arrow::after, .bs-popover-end > .popover-arrow::after {
        left: var(--bs-popover-border-width);
        border-right-color: var(--color-BodOrgWhite)
    }

.bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow, .bs-popover-bottom > .popover-arrow {
    top: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width))
}

    .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .bs-popover-bottom > .popover-arrow::after, .bs-popover-bottom > .popover-arrow::before {
        border-width: 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height)
    }

    .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::before, .bs-popover-bottom > .popover-arrow::before {
        top: 0;
        border-bottom-color: var(--color-BodOrgOffWhite)
    }

    .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after, .bs-popover-bottom > .popover-arrow::after {
        top: var(--bs-popover-border-width);
        border-bottom-color: var(--color-BgOrgWhite)
    }

.bs-popover-auto[data-popper-placement^=bottom] .popover-header::before, .bs-popover-bottom .popover-header::before {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    width: var(--bs-popover-arrow-width);
    margin-left: calc(-.5 * var(--bs-popover-arrow-width));
    content: "";
    border-bottom: var(--bs-popover-border-width) solid var(--color-BodBlack)
}

.bs-popover-auto[data-popper-placement^=left] > .popover-arrow, .bs-popover-start > .popover-arrow {
    right: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
    width: var(--bs-popover-arrow-height);
    height: var(--bs-popover-arrow-width)
}

    .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .bs-popover-start > .popover-arrow::after, .bs-popover-start > .popover-arrow::before {
        border-width: calc(var(--bs-popover-arrow-width) * .5) 0 calc(var(--bs-popover-arrow-width) * .5) var(--bs-popover-arrow-height)
    }

    .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::before, .bs-popover-start > .popover-arrow::before {
        right: 0;
        border-left-color: var(--color-BodOrgOffWhite)
    }

    .bs-popover-auto[data-popper-placement^=left] > .popover-arrow::after, .bs-popover-start > .popover-arrow::after {
        right: var(--bs-popover-border-width);
        border-left-color: var(--color-BodOrgWhite)
    }

.popover-header {
    padding: var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x);
    margin-bottom: 0;
    font-size: var(--bs-popover-header-font-size);
    color: var(--bs-popover-header-color);
    background-color: var(--color-BgBlack);
    border-bottom: var(--bs-popover-border-width) solid var(--color-BodOrgOffWhite);
    border-top-left-radius: var(--bs-popover-inner-border-radius);
    border-top-right-radius: var(--bs-popover-inner-border-radius)
}

.popover {
    z-index: 3333333;
}

.popover-header:empty {
    display: none
}

.popover-body {
    padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x);
    color: var(--bs-popover-body-color)
}
/*without login building-form.css lines start*/
.popover-body {
    padding: 0px;
}

button {
    background: transparent;
    font-family: var(--font-1);
}
/*.input_block {
    latChangedByArun
    height: 56px;
}*/
.input_block.mob_blk {
    width: 100%;
}

.intl-tel-input .flag-container {
    left: 0px !important;
    height: 100%;
    top: 0px;
    cursor: pointer;
    width: 160px;
    padding: 0 !important;
    position: absolute;
    z-index: 99 !important;
    border: 1px solid var(--color-BodTertiaryGray);
    border-radius: 8px;
}

.intl-tel-input {
    position: relative;
    display: inline-block;
    height: 100%;
    width: 100%;
    box-shadow: none;
    font-size: 15px;
    font-weight: 400;
    border-radius: 4px;
    margin: 0px;
    padding-left: 185px;
}

    .intl-tel-input .selected-flag .iti-arrow::after {
        content: "\f107" !important;
        font-size: 26px !important;
        color: var(--color-TextBlack) !important;
        font-family: var(--font-6);
        transform: unset !important;
    }

    .intl-tel-input .selected-flag .iti-arrow {
        margin-left: 11px;
        width: 0;
        height: 0;
        border-left: 6px solid transparent !important;
        border-right: 6px solid transparent !important;
        border-top: 6px solid var(--color-BodBlack) !important;
        border: none !important;
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    .intl-tel-input .selected-flag {
        width: 140px !important;
        background-color: transparent !important;
        padding: 0px;
        margin-left: 12px;
    }

.flag_code, .dialCode {
    position: absolute;
    z-index: 2;
    left: 52px;
    width: auto;
    top: 18px;
    color: var(--color-TextBlack);
    font-weight: 400;
    font-size: 20px;
    line-height: 18px;
}

.ownerMobilenumber .flag-container {
    user-select: none;
    pointer-events: none;
}

rt-input-container.rt-block.customChanges input:focus {
    border: 1px solid var(--color-BodPrimaryBlue) !important;
}
/*without login building-form.css lines end*/
.mail_number * {
    box-sizing: border-box;
}

.mail_number .confirm_dialog {
    width: auto;
}

.mail_number .confirmation_popup {
    padding: 0px;
}

    .mail_number .confirmation_popup .popup_region {
        width: 870px;
    }

    .mail_number .confirmation_popup .popup_header {
        float: left;
        width: 100%;
        display: flex;
        border-bottom: 2px solid var(--color-BgTextSecondaryCharcoleGray);
        padding: 10px 15px;
        align-items: center;
        background-image: none;
        text-indent: unset;
    }

        .mail_number .confirmation_popup .popup_header .close_btn {
            right: 15px;
            top: 15px;
            width: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

    .mail_number .confirmation_popup .popup_content {
        float: left;
        width: 100%;
    }

        .mail_number .confirmation_popup .popup_content .cntn_info {
            padding: 10px 17px;
        }

            .mail_number .confirmation_popup .popup_content .cntn_info > span {
                font-size: 20px;
            }

        .mail_number .confirmation_popup .popup_content .main_grid {
            float: left;
            width: 100%;
            display: block;
            padding: 0px;
        }

            .mail_number .confirmation_popup .popup_content .main_grid > #person_mobile_Email {
                float: left;
                width: 100%;
                margin: 0px;
                padding-bottom: 66px;
                position: relative;
            }

            .mail_number .confirmation_popup .popup_content .main_grid .grid_details {
                float: left;
                width: 100%;
                padding: 0px 17px;
            }

        .mail_number .confirmation_popup .popup_content .input_block {
            margin-bottom: 20px;
        }

    .mail_number .confirmation_popup .popup_btn {
        float: left;
        width: 100%;
        position: absolute;
        left: 0px;
        bottom: 0px;
        padding: 15px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        grid-gap: 15px;
        border-top: 1px solid var(--color-BodTextSecondaryCharcoleGray);
        box-sizing: border-box;
    }

        .mail_number .confirmation_popup .popup_btn .updt_btn {
            color: var(--color-TextPrimaryBlue);
            border-radius: 5px;
            cursor: pointer;
            border: 1px solid var(--color-BodTertiaryGray) !important;
            outline: none;
            padding: 5px 19px;
            font-weight: 500;
            font-size: 15px;
        }

        .mail_number .confirmation_popup .popup_btn .confirm_btn {
            color: var(--color-TextOrgWhite);
            border: 1px solid var(--color-BodPrimaryBlue);
        }

    .mail_number .confirmation_popup .popup_title > svg {
        font-size: 29px;
        color: var(--color-TextOrangeWarningText);
        margin: 0px 0px 0px -7px;
    }

    .mail_number .confirmation_popup .intl-tel-input .selected-flag .iti-arrow {
        height: 0px;
        width: 0px;
        margin: 0px;
    }

.popoverContainer .eg {
    opacity: 0.7;
    float: left;
    font-family: var(--font-1);
    font-size: 15px;
    position: absolute;
    right: 0px;
    top: 25px;
    color: var(--color-TextBlack);
}
