/* ACCOUNT RENEWAL MODAL */
#accRenewalModal .modal-title, #accRenewalModal_7days .modal-title, #accRenewalModal_today .modal-title, #accRenewalModal_tomorrow .modal-title{
    color: #009ccd;
    font-size: 22px;
}

#accRenewalModal button.btn-close, #accRenewalModal_7days button.btn-close, #accRenewalModal_today button.btn-close, #accRenewalModal_tomorrow button.btn-close{
    color: #009ccd;
}

#accRenewalModal .modal-body p, #accRenewalModal_7days .modal-body p, #accRenewalModal_today .modal-body p, #accRenewalModal_tomorrow .modal-body p{
    text-align: center;
    font-size: 14px;
    color: gray;
}

#accRenewalModal button, #accRenewalModal_7days button, #accRenewalModal_today button, #accRenewalModal_tomorrow button{
    padding: 5px 15px 5px 15px;
    width: 130px;
}

#accRenewalModal .modal-footer p, #accRenewalModal_7days .modal-footer p, #accRenewalModal_today .modal-footer p, #accRenewalModal_tomorrow .modal-footer p{
    font-size: 12px;
    color: gray;
}

.circle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 75px; /* Adjust width and height as needed */
    height: 75px;
    border-radius: 50%; /* Creates a circular shape */
    overflow: hidden; /* Hides image overflow */
    position: relative; /* Allows for positioning of the image */
    background-color: #009ccd;
}

.circle-container img {
    width: 45px; /* Makes the image fill the circular container */
    height: auto; /* Maintains aspect ratio of the image */

}

#features span{
    font-size: 14px;
    text-align: center;
    color: #009ccd;
}

.modal-footer a{
    text-decoration: underline;
    color: gray;
}

.customPlansBtn{
    color: white;
    background-color: #009ccd;
    border-radius: 25px;
}

.customPlansBtn:hover{
    color: #009ccd;
    background-color: white;
    border: 1px solid #009ccd;
    
}


/* FREE PLAN RENEWAL MODAL */
#freePlanRenewalModal button{
    padding: 5px 2px 5px 2px;
    width: 170px;
}

#freePlanRenewalModal #features .circle-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 75px; /* Adjust width and height as needed */
    height: 75px;
    border-radius: 50%; /* Creates a circular shape */
    overflow: hidden; /* Hides image overflow */
    position: relative; /* Allows for positioning of the image */
    background-color: rgb(189, 189, 189);
}

#freePlanRenewalModal #features .circle-container img {
    width: 45px; /* Makes the image fill the circular container */
    height: auto; /* Maintains aspect ratio of the image */

}

#freePlanRenewalModal #features span{
    font-size: 14px;
    text-align: center;
    color: rgb(189, 189, 189);
}


/* VIEW PLANS MODAL */
#viewPlansModal .modal-header, #viewPlansModal .modal-footer{
    border: none;
}

#viewPlansModal .nav-link{
    font-size: 16px;
}

#viewPlansModal .card{
    width: 220px;
}

#viewPlansModal .modal-footer a{
    font-size: 12px;
    color: gray;
}

#viewPlansModal .card-title{
    color: rgb(94, 94, 94);
    font-size: 14px;
}

#viewPlansModal h6.card-subtitle, .userCount{
    color: #009ccd;
    font-size: 18px;
}


#viewPlansModal p.userCount{
    color: rgb(94, 94, 94);
    font-size: 12px;
}

#viewPlansModal .card button{
    padding: 2px 5px 2px 5px;
    width: 100px;
    font-size: 11px;
}

#viewPlansModal .currentBtn{
    border-radius: 25px;
    color: gray;
    background-color: white;
    border: 1px solid gray;
    padding: 2px 5px 2px 5px;
    width: 100px;
    font-size: 11px;
}

#viewPlansModal .upgradeBtn{
    border-radius: 25px;
    color: white;
    background-color: #009ccd;
    padding: 2px 5px 2px 5px;
    width: 100px;
    font-size: 11px;
}

#viewPlansModal .upgradeBtn:hover{
    border-radius: 25px;
    color: #009ccd ;
    background-color: white;
    border: 1px solid #009ccd;
    padding: 2px 5px 2px 5px;
    width: 100px;
    font-size: 11px;
}


#viewPlansModal #discountImage{
    height: auto;
    width: 70px;
    position: absolute;
    top: -30px;
    left: 170px;
}

#viewPlansModal .fa-indian-rupee-sign, #viewPlansModal .fa-dollar-sign{
    font-size: 18px;
    color: rgb(189, 189, 189);
}

#viewPlansModal .fa-check{
    font-size: 15px;
    color: #009ccd;
}

#viewPlansModal .benefits{
    color: rgb(94, 94, 94);
    font-size: 14px;
}

#viewPlansModal p.rupees{
    font-size: 22px;
    color: #009ccd;
}

/* Custom CSS to remove default background color of the selected nav tab */
.nav-item{
    background-color: transparent;
    color: #000;
}


/* MONTHLY UPGRADE MODAL */
#upgradePlanModal .modal-title{
    color: #009ccd;
    font-size: 24px;
}

#upgradePlanModal input{
    width: 50px;
    border: 1px solid gray;
    border-radius: 5px;
    padding: 4px 10px 4px 10px; 
    font-size: 16px;
    font-weight: 500;
    color: black;
    text-align: right;
} 


/* ESTIMATE COST MODAL */
#estimateCostModal .modal-title{
    color: #009ccd;
    font-size: 24px;
}

#estimateCostModal input{
    width: 50px;
    border: 1px solid gray;
    border-radius: 5px;
    padding: 4px 10px 4px 10px; 
    font-size: 16px;
    font-weight: 500;
    color: black;
    text-align: right;
}

#estimateCostModal .fa-indian-rupee-sign, #estimateCostModal .fa-dollar-sign{
    color: rgb(177, 177, 177);
}

.enableProceedBtn {
    border-radius: 25px;
    color: white;
    background-color: #009ccd;
    padding: 4px 5px 4px 5px;
    width: 100px;
    font-size: 13px;
}

.enableProceedBtn:hover {
    border-radius: 25px;
    color: #009ccd;
    background-color: white;
    border: 1px solid #009ccd;
    padding: 4px 5px 4px 5px;
    width: 100px;
    font-size: 13px;
}

.disableProceedBtn {
    border-radius: 25px;
    color: #999999;
    background-color: white;
    border: 1px solid #999999;
    padding: 4px 5px 4px 5px;
    width: 100px;
    font-size: 13px;
}

/* CONFIRMATION MODAL */
#confirmationModal .modal-body p {
    line-height: 14px;
}





/* PREMUIM ACC RENEWAL NOTIFICATIONS */
/* PREMIUM RENEWAL MODAL */
#prmRenewalModal .modal-title {
    color: #009ccd;
    font-size: 20px;
}

#prmRenewalModal button.btn-close {
    color: #009ccd;
}

#prmRenewalModal .modal-body p {
    text-align: justify;
    font-size: 14px;
    color: gray;
}

/* #prmRenewalModal #prmUpdateBtn {
    border-radius: 25px;
    color: white;
    background-color: #009ccd;
    padding: 4px 5px 4px 5px;
    width: 100px;
    font-size: 13px;
} */

.enableUpdateBtn{
    border-radius: 25px;
        color: white;
        background-color: #009ccd;
        padding: 4px 5px 4px 5px;
        width: 100px;
        font-size: 13px;
}

.enableUpdateBtn:hover{
    border-radius: 25px;
        color: #009ccd;
        background-color: white;
        border: 1px solid #009ccd;
        padding: 4px 5px 4px 5px;
        width: 100px;
        font-size: 13px;
}

.disableUpdateBtn{
    border-radius: 25px;
        color: #999999;
        background-color: white;
        border: 1px solid #999999;
        padding: 4px 5px 4px 5px;
        width: 100px;
        font-size: 13px;
}

#prmRenewalModal input{
    width: 50px;
    border: 1px solid gray;
    border-radius: 5px;
    padding: 3px 8px 4px 8px; 
    margin:0px 8px 0px 8px; 
    font-size: 15px;
    font-weight: 500;
    color: black;
    text-align: right;
}


#prmRenewalModal #discountImage{
    height: auto;
    width: 60px;
    position: absolute;
    top: -25px;
    left: 187px;
}


#prmRenewalModal .card{
    width: 220px;
}

#prmRenewalModal p.card-title{
    text-align: center;
    color: rgb(94, 94, 94);
    font-size: 14px;
    margin-bottom: 15px;
}

#prmRenewalModal h6.card-subtitle {
    color: #009ccd;
    font-size: 16px;
    text-align: center;
    padding: 0px;
}

#prmRenewalModal .fa-indian-rupee-sign {
    font-size: 16px;
    color: rgb(189, 189, 189);
}

#prmRenewalModal p.rupees{
    font-size: 16px;
    color: #009ccd;
}


#prmRenewalModal .fa-check{
    font-size: 15px;
    color: #009ccd;
}

#prmRenewalModal .prmRenewBtn{
    border-radius: 25px;
    color: #009ccd;
    background-color: white;
    border: 1px solid #009ccd;
    padding: 4px 5px 4px 5px;
    width: 170px;
    font-size: 13px;
}

#prmRenewalModal .prmRenewBtn:hover{
    border-radius: 25px;
    color: white; ;
    background-color: #009ccd;
    padding: 4px 5px 4px 5px;
    width: 170px;
    font-size: 13px;
}

#prmRenewalModal .prmUpgradeBtn{
    border-radius: 25px;
    color: white;
    background-color: #009ccd;
    padding: 4px 5px 4px 5px;
    width: 170px;
    font-size: 13px;
}

#prmRenewalModal .prmUpgradeBtn:hover{
    border-radius: 25px;
    color: #009ccd ;
    background-color: white;
    border: 1px solid #009ccd;
    padding: 4px 5px 4px 5px;
    width: 170px;
    font-size: 13px;
}

#prmRenewalModal .disPrmRenewBtn{
    border-radius: 25px;
    color: rgb(167, 167, 167);
    background-color: white;
    border: 1px solid rgb(167, 167, 167);
    padding: 4px 5px 4px 5px;
    width: 170px;
    font-size: 13px;
}

#prmRenewalModal .disPrmUpgradeBtn{
    border-radius: 25px;
    color: white;
    background-color: rgb(167, 167, 167);
    padding: 4px 5px 4px 5px;
    width: 170px;
    font-size: 13px;
}

#prmRenewalModal .modal-footer button{
    padding: 4px 15px 4px 15px;
    width: 130px;
    font-size: 13px;
}

#prmConfirmationModal .modal-body p, #prmConfirmationModal .modal-body div p {
    line-height: 14px;
}