.btnOuter .btn.btn-primary.next {    
    background: var(--btn-primary-bg-color);
    border-color: var(--btn-primary-border-color);
}
.btnOuter .btn.btn-primary.next:hover{
    background-color: var(--btn-primary-hover-bg-color);
    color: var(--btn-primary-hover-color); 
    box-shadow: 0 3px 15px 0 var(--btn-primary-box-shadow-color);
    border: none;  
}

.btnOuter .btn.btn-primary.edit {    
    background: var(--btn-signin-bg-color);
    border-color: var(--btn-signin-border-color);
}
.btnOuter .btn.btn-primary.edit:hover{
    background-color: var(--btn-signin-hover-bg-color);
    color: var(--btn-signin-hover-color); 
    box-shadow: 0 3px 15px 0 var(--btn-signin-hover-box-shadow-color);
    border: none;
}

.btn.btn-primary.yes {    
    background: var(--btn-primary-bg-color);
    border-color: var(--btn-primary-border-color);
    font-size: 16px; 
    font-weight: bold;
}
.btn.btn-primary.no {    
    background: var(--btn-primary-no-bg-color);
    border-color: var(--btn-primary-no-border-color);
    font-size: 16px; 
    font-weight: bold;
}

/* --------------------------Registration button CSS End------------------------------ */

.searched-address-div{
    position: absolute;
    z-index: 100000;
    background-color: var(--search-address-div-bg-color);
    width: 100%;
    border: 1px solid var(--search-address-div-border-color);
    border-radius: 1%;
    box-shadow:inset 0 2px 2px var(--search-address-div-box-shadow-color);
}

.searched-address-div ul div:hover{
    background-color: var(--search-address-div-hover-bg-color);
    color: var( --search-address-div-hover-color);
    width: auto;
}

.searched-address-div ul div a{
    margin-left: 11px;;
}

.cal-icon{
    position: relative;
    /* top: 7px; */
    right: 17px;
    z-index: 5;
    float: right;
}

.search-icon{
    position: relative;
    right: 22px; 
    z-index: 1;
    fill: #787878;
    float: right;
    bottom: 26px;
}

/* -----------------------Registration balloon CSS Started-------------------------- */

.balloon-step1 ,.balloon-step2{
    width: 200px;
    position: absolute;
    top: 234px;
    right: 79px;
}
.balloon-mobile-step1 ,.balloon-mobile-step2 ,.balloon-mobile-step4{
    width: 65px;
    position: absolute;
    top: 87px;
    right: 2px;
    z-index: 1;
}
.cloud-l-step1 ,.cloud-l-step2{
    position: absolute;
    bottom: 136px;
    right: 35px;
    width: 110px;
}
.cloud-l-mobile-step1 ,.cloud-l-mobile-step2 ,.cloud-l-mobile-step4{
    position: absolute;
    top: 140px;
    right: -24px;
    width: 52px;
    z-index: 1;
}
.cloud-s-step1 ,.cloud-s-step2{
    position: absolute;
    top: 216px;
    right: 246px;
}
.cloud-s-mobile-step1 ,.cloud-s-mobile-step2 ,.cloud-s-mobile-step4{
    position: absolute;
    top: 70px;
    width: 40px;
    right: 44px;
    z-index: 1;
}

.balloon-step4 {
    width: 200px;
    position: absolute;
    bottom: 189px;
    right: 111px;
}

.cloud-l-step4 {
    position: absolute;
    bottom: 136px;
    right: 63px;
    width: 110px;
}

.cloud-s-step4 {
    position: absolute;
    top: 389px;
    right: 277px;
}

/* --------------------------------Registration Balloon CSS End------------------------------- */

.alert-text-step4-otp{
    font-size: 14px;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 5px;
    width: 206%;
}

/* ----------------------------CSS for tooltip Started----------------------------------- */

[data-tooltip]:before {
    /* needed - do not touch */
    content: attr(data-tooltip);
    position: absolute;
    opacity: 0;
    
    /* customizable */
    transition: all 0.15s ease;
    padding: 10px;
    color: var(--data-tooltip-color);
    background: var(--data-tooltip-bg-color);
    border-radius: 10px;
    box-shadow: 2px 2px 1px var(--data-tooltip-box-shadow-color);    
}

[data-tooltip]:hover:before {
    /* needed - do not touch */
    opacity: 1;
    font-style: italic;

    /* customizable */
    background: var(--data-tooltip-bg-color);
    margin-top: -15%;
    margin-left: 20px;  
    width: max-content; 
    padding: 10px; 
}

[data-tooltip]:not([data-tooltip-persistent]):before {
    pointer-events: none;
}

.medicard-expDt-tooltip[data-tooltip]:before {
    /* needed - do not touch */
    content: attr(data-tooltip);
    position: absolute;
    opacity: 0;
    
    /* customizable */
    transition: all 0.15s ease;
    padding: 10px;
    color: var(--data-tooltip-color);
    border-radius: 10px;
    box-shadow: 2px 2px 1px var(--data-tooltip-box-shadow-color);    
}

.medicard-expDt-tooltip[data-tooltip]:hover:before {
    /* needed - do not touch */
    opacity: 1;
    font-style: italic;

    /* customizable */
    color: var(--data-tooltip-color);
    background: var(--data-tooltip-bg-color);
    margin-top: -15%;
    margin-left: 20px;  
    width: max-content; 
    padding: 10px; 
}

.medicard-expDt-tooltip[data-tooltip]:not([data-tooltip-persistent]):before {
    pointer-events: none;
}

.customerRefNo-tooltip[data-tooltip]:before {    
    content: attr(data-tooltip);
    position: absolute;
    opacity: 0; 
    /* customizable */
    transition: all 0.15s ease;
    padding: 10px;
    color: var(--data-tooltip-color);
    border-radius: 10px;
    box-shadow: 2px 2px 1px var(--data-tooltip-box-shadow-color);    
}

.customerRefNo-tooltip[data-tooltip]:hover:before {   
    opacity: 1;
    font-style: italic;    
    color: var(--data-tooltip-color);
    background: var(--data-tooltip-bg-color);
    margin-top: -15%;
    margin-left: 20px;  
    width: max-content; 
    padding: 10px; 
}

.customerRefNo-tooltip[data-tooltip]:not([data-tooltip-persistent]):before {
    pointer-events: none;
}

.email-info-tooltip-icon{
    color: #2e83f2;                
    margin: 4px;
}

/* ------------------------------Registration Tooltip End------------------------------- */

.note-span{   
    padding: 5px;
}

.error-msg-dvs-nxtGen{
    color:#990404;
    font-weight: bold;
    font-style: italic;
}

.date-invalid-tooltip{
    margin-top:-18px;
}

@media (max-width: 768px){
    
    body, html{
        overflow-x: hidden;
    }
    .navbar-brand{
        padding: 0px 20px;  
    }
    .navbar {
        height: 60px;
    }
    .page-footer .footer-link{
        padding: 0;
    }
    .pt-20{
        padding-top: 20px !important;
    }
}