/* --Generic-- */

/* Upgrade Package Card */

select.dropdown-select {
    margin-bottom: 5px;
    height: 35px;
    background-color: #E5E1E6;
    color: #202945;
    border: none;
    border-radius: 8px !important;
    text-align: left;
    font-size: 14px;
    padding: 7px 14px;
}


div#CompareUpgrade-card-modal___BV_modal_body_ {
    padding: 14px 5px 14px 5px;
}

select.dropdown-select option {
    background-color: #E5E1E6;
    opacity: 1;
}

select.dropdown-select option:focus {
    background-color: #4F55EB;
    color: #FFFFFF;
}

select.dropdown-select:active, select.dropdown-select:hover {
    outline-color: #4F55EB;
}

select.dropdown-select:hover, select.dropdown-select:focus {
    background-color: #E5E1E6;
    color: #202945;
    border: none;
}

.full-width-dropdown .dropdown-text {
    display: inline-block;
    width: calc(100% - 20px);
}

.full-width-dropdown .dropdown-toggle {
    width: 100%;
}

.full-width-dropdown .dropdown-menu {
    width: 100%;
}

.btn-transparent, .legacy-eservice-content .btn.btn-transparent {
    transition: all 0.3s;
    min-width: 100px;
    max-height: 48px;
    background-color: transparent;
    border: 1px solid #202945;
    color: #202945;
    border-radius:30px !important;
    font-size: 14px !important;
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 1rem;
    padding-right: 1rem;
}

    .btn-transparent:hover, .legacy-eservice-content .btn.btn-transparent:hover {
        transition: all 0.3s;
        background-color: #d5d7dc;
        color: #202945;
    }

.btn-solid,
.legacy-eservice-content .btn-solid {
    position: relative; /* Ensure ::before is positioned correctly */
    transition: background 0.3s, color 0.3s, border 0.3s;
    min-width: 100px;
    max-height: 48px;
    background: linear-gradient(45deg, rgba(32, 41, 69, 1) 65%, rgba(213, 0, 55, 1) 100%) !important;
    border: none !important;
    color: #FFFFFF !important;
    border-radius: 30px !important;
    font-size: 14px !important;
    padding: 6px 1rem;
    z-index: 3;
    overflow: hidden; /* Ensure pseudo-element doesn't overflow */
}
/* Apply ::before only to enabled .btn-solid buttons */
.btn-solid:not(.disabled):not(:disabled)::before,
.legacy-eservice-content .btn-solid:not(.disabled):not(:disabled)::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(45deg, #D50037 65%, #D50037 100%);
    border-radius: 30px !important;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s linear;
}
/* Hover effect for enabled .btn-solid buttons */
.btn-solid:not(.disabled):not(:disabled):hover::before,
.legacy-eservice-content .btn-solid:not(.disabled):not(:disabled):hover::before {
    opacity: 1; /* Shows the ::before pseudo-element on hover */
}

.btn-solid:not(.disabled):not(:disabled):active::before,
.legacy-eservice-content .btn-solid:not(.disabled):not(:disabled):active::before {
    opacity: 1; /* Maintains the ::before pseudo-element on active */
}

/* Optional: Additional hover styles */
.btn-solid:not(.disabled):not(:disabled):hover,
.legacy-eservice-content .btn-solid:not(.disabled):not(:disabled):hover {
    color: white;
    border: none;
    /* Add any additional hover styles here */
}

.labeled-value {
    display: inline-block;
}

.value-label {
    font-size: 12px;
    display: block;
    color: #202945;
    margin-bottom: 2px;
}

.value-text {
    display: block;
    font-size: 14px;
    color: #202945;
}

.align-with-labeled-content {
    margin-top: 17px;
}

.selectedpackage-modal {
    border: 1px solid;
    border-color: #D50037;
    background-color: #FFFCFC !important;
    font-size: 11px !important;
    
}

.currentpackage-modal .gray-details-area-list-details li div:first-child {
    color: #202945;
    font-size: 10px !important;
    text-align: left;
    white-space: pre-wrap;
}

.currentpackage-modal .gray-details-area-list-details li div:last-child {
    color: #888A8A;
    font-size: 10px !important;
    text-align: right;
}

.gray-details-area-list-details li div:last-child {
    color: #888A8A;
    text-align: right;
}
.selectedpackage-modal .gray-details-area-list-details li div:first-child {
    color: #D50037 !important;
    font-size: 10px !important;
    text-align: left;
    white-space: pre-wrap;
}

.selectedpackage-modal .gray-details-area-list-details li div:last-child {
    color: #D50037 !important;
    text-align: right;
    font-size: 10px !important;
}


.currentpackage-modal {
    margin-right: 8px;
    border: 1px solid;
    border-color: #BDBDBD;
    font-size: 11px;
}

.gray-details-area {
    background-color: rgba(189, 189, 189, 0.15);
    width: 100%;
    padding: 15px 20px 11px 20px;
    border-radius: 8px;
}

ul.gray-details-area-list-details {
    padding: 0;
    margin: 0;
    font-size: 12px !important;
}
.selectedpackage-modal .gray-details-area-list-details {
    color: #D50037 !important;
}

.gray-details-area-list-details li {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin-bottom: 6px;
}

.gray-details-area-list-details li div:first-child {
    color: #202945;
}

.gray-details-area-list-details li div:last-child {
    color: #888A8A;
    text-align:right;
}

.current-package-section {
    margin-bottom: 14px;
}

/* Overriding Select2 Styles*/
.select2-container--classic .select2-results__options .select2-results__option[aria-selected=true], .select2-container--default .select2-results__options .select2-results__option[aria-selected=true] {
    background-color: #4f55eb !important;
    color: white !important;
}

.select2-container input, .select2-container input::-webkit-textfield-decoration-container {
    outline: none;
}

.dropdown-select.select2 ~ .select2-container {
    margin-bottom: 5px;
}

.select2-selection.select2-selection--single {
    height: 40px !important;
}

.model-content-title b {
    font-weight: 600;
    color: #202945;
    margin-bottom:9px;

}

#UpgradePackageConfirmation .gray-details-area {
    margin-top: 10px;
    display: inline-block;
}

#UpgradePackageCard .shimmer-content .upgrade-package-button-shimmer-placeholder lines {
    margin-top: 34px;
}

#UpgradePackageCard .shimmer-content .upgrade-package-selector-shimmer-placeholder {
    margin-top: 15px;
}

#UpgradePackageCard .shimmer-content .upgrade-package-selector-shimmer-placeholder lines {
    width: 100%;
}

#UpgradePackageCard .shimmer-content .upgrade-package-details-shimmer-placeholder lines {
    width: 100%;
    height: 105px;
}

.click-here-underline {
    text-decoration: underline !important;
    color: inherit;
}

.upgrade-package-modal-content {
    padding-left: 25px;
    padding-right: 25px;
}

.small-notes {
    font-size: 11px;
    font-weight: normal;
    color: #55595C;
    padding-bottom: 16px;
}

.otp-modal-content {
    padding-left: 18px;
    padding-right: 18px;
}


.brojiC{
    background-color:#202945 !important;
}
.card {
    background-color: rgba(229, 225, 230, 0.4) !important;
    border-radius:16px !important;
    border: none;
}
.card-body {
    background-color: transparent;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}
#PaymentSMESummaryContent_BC, #EFTSServiceOrder_BC {
    background-color: rgba(229, 225, 230, 0.4);
    border-radius:16px;
}
.card-header {
    background-color: transparent;
    border-bottom: 2px solid white;
    color: #E5E1E6;
}
.shadow {
    box-shadow:none !important;
}
.pdfIcon{
    content: "";
    background-image: url('../images/48.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 25px;
    height: 25px;
}
.excelIcon{
    content: "";
    background-image: url('../images/50.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 25px;
    height: 25px;
}
.downloadIcon {
    content: "";
    background-image: url('../images/import_1.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 20px;
    height: 20px;
}
    .downloadIcon:hover {
        background-image: url('../images/import.svg');
    }
.form-check-input:checked {
    background-color: #4f55eb !important;
}
/*input[type=checkbox]:checked {
    background-color: #4f55eb !important;
}*/
img.img-responsive.img-fluid.d-none.d-xl-block, img.img-responsive.img-fluid.d-none.d-lg-block.d-xl-none, img.img-responsive.img-fluid.d-md-block.d-lg-none {
    border-radius: 16px;
}
.card-header .card-title .left_text {
    color: #202945;
    font-size:20px;
    font-weight:600 !important;
}
form .form-control{
    border:1px solid #202945;
    color:#202945 !important;
}
.input-group-addon {
    border: 1px solid #202945;
    border-left:none;
}
.form-control:focus {
    border: 1px solid #4f55eb;
    box-shadow:none;
    background-color:white;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #F5F3F5 inset !important;
    background-color: transparent !important;
}
.status-badge {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 16px;
    font-size: 14px;
    color: #202945;
    position: relative; /* Add position relative */
}

    .status-badge::before {
        content: "\2022";
        color: #56b093;
        margin-right: 5px;
        font-size: 25px;
        z-index: 1;
        position: absolute; /* Position the dot absolutely */
        left: -12px; /* Adjust the left position as needed */
        top: 50%;
        transform: translateY(-50%);
    }

    .status-badge.unknown::before {
        color: #E5E1E6; /* Inherit the color from parent */
    }

    .status-badge.unavailable::before {
        color: #8A8A8A; /* Inherit the background color from parent */
    }
    .status-badge.pending::before {
        color: #DB9C49; /* Inherit the background color from parent */
    }
    .status-badge.grace::before,.status-badge.failed::before  {
        color: #ff4f41; /* Inherit the background color from parent */
    }
    .form-control{
        border-color:#202945;
        background-color:transparent;
    }

        .form-control:disabled, .form-control[readonly] {
            background-color: #E5E1E6 !important;
            height: calc(2.75rem + 2px);
        }
.input-group-addon {
    background-color: transparent !important;
}
.progress{
    background-color:white;
}
.tooltip-inner{
    background-color:#202945;
}

.bs-tooltip-bottom .arrow::before {
    border-bottom-color: #202945;
}
select {
    border-radius: 8px;
    background-color: #F5F3F5;
    border:1px solid #202945;
}
input {
    border-radius: 8px;
    background-color: #F5F3F5;
    border: 1px solid #202945;
}
.dataTables_info{
    color:#202945 !important;
}
.dataTables_wrapper .dataTables_length {
    color: #202945 !important;
    margin-top:12px !important;
}
.anchorcontent, .myLink {
    color: #4f55eb !important;
    cursor: pointer !important;
}
.myLink:hover{
    color:#D50037 !important;
}

/* Styles for disabled .btn and .btn-solid buttons */
.btn.disabled,
.btn:disabled,
.btn-solid.disabled,
.btn-solid:disabled,
.legacy-eservice-content .btn-solid.disabled,
.legacy-eservice-content .btn-solid:disabled {
    background: #D9D5DB !important;
    border-color: #D9D5DB !important;
    color: #8E8E8E !important;
    cursor: not-allowed; /* Indicates the button is disabled */
    z-index: 3;
    /* Remove any interactive properties */
    pointer-events: none;
    font-weight: 300;
    opacity: 1 !important;
}

/* Hide the ::before pseudo-element for disabled buttons */
.btn-solid.disabled::before,
.btn-solid:disabled::before,
.legacy-eservice-content .btn-solid.disabled::before,
.legacy-eservice-content .btn-solid:disabled::before {
    display: none;
}


input::-webkit-input-placeholder {
    color: #8E8E8E !important;
    font-weight: 300;
}
input::-moz-placeholder {
    color: #8E8E8E !important;
    font-weight: 300;
}
input:-moz-placeholder {
    color: #8E8E8E !important;
    font-weight: 300;
}
input:-ms-input-placeholder {
    color: #8E8E8E !important;
    font-weight: 300;
}
input::placeholder {
    color: #8E8E8E !important;
    font-weight: 300;
}
.fullHeight{
    height:100%;
}
.sorting_1{
    background: transparent !important;
}
table.dataTable thead th, table.dataTable thead td{
    border-bottom: 1px solid #ddd;
}
table.dataTable.no-footer{
    border-bottom: 1px solid #ddd;
}


/* 1) Hide Font Awesome's content */
.fa-angle-down:before,
.fa-angle-up:before {
    content: none !important;
}

/* 2) Make <i> a container for your custom arrow */
.fa-angle-down,
.fa-angle-up {
    /* Override any FA font settings */
    font-family: inherit !important;
    font-style: normal;
    font-weight: normal;
    text-decoration: none;
    /* Display & sizing */
    display: inline-block;
    width: 1.2rem; /* Adjust as you wish */
    height: 1.2rem; /* Adjust as you wish */
    /* Show your SVG arrow as the background */
    background: url('../images/Arrow.svg') no-repeat center center;
    background-size: contain;
    /* Smooth rotation transitions */
    transition: transform 0.3s ease-in-out;
}

/* 3) Rotate .fa-angle-up vs. .fa-angle-down */
.fa-angle-down {
    transform: rotate(0deg);
}

.fa-angle-up {
    transform: rotate(90deg);
}
.card-header{
    color: #202945;
}

.modal-header{
    border-bottom: none;
}
.modal-footer{
    border-top: none;
}
.bootbox-close-button.close {
    content: '';
    position: absolute !important;
    top: 12px;    /* Adjust to match your modal header spacing */
    right: 12px;  /* Adjust as needed */
    width: 28px;
    height: 28px;
    /* Remove any default margin or override it */
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important; /* Hide the default “×” text */
}
    /*.bootbox-close-button.close::before {
        content: url('../images/closeIcon.svg');*/
        /* Make it act like a block inside that 24×24 container */
        /*display: block;
        width: 100%;
        height: 100%;*/
        /* If you want it aligned at top-left, keep position: static or relative */
        /*position: relative;
        top: 0;
        left: 0;*/
        /* If the SVG is too big or too small, you can scale it:
       transform: scale(0.8); 
       transform-origin: center; 
    */
    /*}*/
/* Ensure the .alert itself is relatively positioned so the close button 
   can be positioned inside it */
.alert {
    position: relative;
}

/* Center-right close button inside .alert */
.alert .close {
    position: absolute !important;
    top: 30%;
    right: 12px;   /* or however far from the right edge you want */
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0; /* Hides the default “×” text if you’re replacing with an SVG */
}

/* Insert the custom SVG for the alert’s close icon */
    .alert .close::after {
        content: url('../images/closeIcon.svg');
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        top: 0;
        left: 0;
        /* If needed, scale or shift the SVG:
       transform: scale(0.9);
       transform-origin: center;
    */
    }

.footerWorkAround{
    margin-top: -24px;
 }
.leftAddOn{
    border-left: 1px solid #202945;
    border-right: 0;
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.paymentOptions{
    display: flex;
    justify-content: end;
    gap: 6px;
}
.paymentCardsIcons{
    width: 24px;
}
input[type=image]{
    border:none !important;
}
.alignCenter{
    display:flex;
    align-items:center;
}
.headerWorkAround {
    background: rgba(229, 225, 230, 0.4) !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    border-bottom: 2px solid white !important;
    padding: 0.75rem 1.5rem !important;
    margin-top:2rem;
}
.bodyWorkAround {
    border-top-left-radius: 0px !important;
    border-top-right-radius: 0px !important;
}
.checked-box-tag2{
    margin-top:22px !important;
    position:absolute !important;
}
.bootbox-close-button.close, button[type=button].close {
    content: '';
    position: absolute !important;
    top: 12px; /* Adjust to match your modal header spacing */
    right: 12px; /* Adjust as needed */
    width: 28px;
    height: 28px;
    /* Remove any default margin or override it */
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important; /* Hide the default “×” text */
}

     button[type=button].close::after {
        content: url('../images/closeIcon.svg');
        /* Make it act like a block inside that 24×24 container */
        display: block;
        width: 100%;
        height: 100%;
        /* If you want it aligned at top-left, keep position: static or relative */
        position: relative;
        top: 0;
        left: 0;
        /* If the SVG is too big or too small, you can scale it:
       transform: scale(0.8); 
       transform-origin: center; 
    */
    }
input[type="checkbox"] {
    accent-color: #202945 !important;
}
.dataTables_length{
    margin-top:12px !important
}
.TotalAMount {
    color: #D50037 !important;
}
.select2-selection.select2-selection--multiple {
    height: 40px !important;
}
.containedImage{
    height: 100%;
    width: 100%;
    border-radius: 8px;
}
.text-danger{
    color: #D50037 !important;
}
.BrandUpArrow{
    content: "";
    background-image: url('../images/Arrow_1.svg');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    width: 16px;
    height: 16px;
    transform: rotate(-90deg);
    margin-bottom: 3px;
    margin-left: 1px;

}
.input-group-addon{
    height: 40px !important;
}
label.btn.btn-default {
    height: 40px;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background:transparent;
    border:1px solid #202945
}
/*dataTable Global Design*/
.dataTables_wrapper {
    overflow-x: auto;
}

    .dataTables_wrapper table th {
        color: #202945 !important;
    }

    .dataTables_wrapper table {
        background-color: rgba(255, 255, 255, 0) !important;
    }


    .dataTables_wrapper .dataTables_paginate .paginate_button:hover, .dataTables_wrapper .dataTables_paginate .paginate_button {
        color: #4f55eb !important;
        border: 0px solid #979797;
        background-color: white !important;
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(220, 220, 220, 0))) !important;
        background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(220, 220, 220, 0) 100%) !important;
        background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(220, 220, 220, 0) 100%) !important;
        background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(220, 220, 220, 0) 100%) !important;
        background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(220, 220, 220, 0) 100%) !important;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(220, 220, 220, 0) 100%) !important;
        box-shadow: 0px 0px 0px RGBA(17, 17, 17, 0) !important;
    }



        .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover, .dataTables_wrapper .dataTables_paginate .paginate_button:active {
            color: #202945 !important;
            border: 0px solid #979797 !important;
            background-color: white !important;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(220, 220, 220, 0))) !important;
            background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(220, 220, 220, 0) 100%) !important;
            background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(220, 220, 220, 0) 100%) !important;
            background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(220, 220, 220, 0) 100%) !important;
            background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(220, 220, 220, 0) 100%) !important;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(220, 220, 220, 0) 100%) !important;
            box-shadow: 0px 0px 0px RGBA(17, 17, 17, 0) !important;
            cursor: auto !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
            color: #202945 !important;
            border: 0px solid #979797 !important;
            background-color: white !important;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(220, 220, 220, 0))) !important;
            background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(220, 220, 220, 0) 100%) !important;
            background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(220, 220, 220, 0) 100%) !important;
            background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(220, 220, 220, 0) 100%) !important;
            background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(220, 220, 220, 0) 100%) !important;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(220, 220, 220, 0) 100%) !important;
            box-shadow: 0px 0px 0px RGBA(17, 17, 17, 0) !important;
        }





table tbody tr {
    background: transparent none repeat scroll 0% 0% !important;
}

table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1, table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
    background: transparent none repeat scroll 0% 0% !important;
}

.legacy-eservice-content,.legacy-eservice-content.legacy-eservice-content-with-title.card {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
      border:none !important;
}
.card {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: none !important;
}