.adds-on-card,
.usage-status-card {
}

.adds-on-card .panel-group,
.usage-status-card .panel-group {
}

.adds-on-card .panel-heading,
.usage-status-card .panel-heading {
}

    .adds-on-card .panel .panel-title,
    .adds-on-card .panel .panel-title a,
    .usage-status-card .panel .panel-title {
        font-size: 14px;
        font-weight: normal;
        letter-spacing: 0;
        color: #202945;
        position: relative;
        margin-bottom: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid #F5F5F5;
        cursor: pointer;
        transition: 200ms ease-in-out transform, 200ms ease-in-out border-bottom-color;
    }

.usage-status-card .panel .panel-title .progress {
    margin-bottom: 0;
}

/* ---------------------------------------
1. Base arrow styles
--------------------------------------- */
.adds-on-card .panel .panel-title[role="button"]::before,
.usage-status-card .panel .panel-title a::before,
.usage-status-card .panel .panel-title[role="button"]::before{
    content: "";
    display: inline-block;

    /* Adjust size to fit your icon */
    width: 1rem;
    height: 1rem;

    /* Use your custom Arrow.svg */
    background: url('../../../resources/beyonTelecom/Arrow.svg') no-repeat center center;
    background-size: contain;

    /* Positioning */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);

    /* Smooth rotation transition */
    transition: transform 0.3s ease-in-out;
}

/* 
   The link (a) needs position: relative,
   so the absolutely positioned arrow can be placed inside
*/
.adds-on-card .panel .panel-title a,
.usage-status-card .panel .panel-title a,
.usage-status-card .panel .panel-title[role="button"]{
    position: relative;
}

/* ---------------------------------------
   2. Rotated arrow when open
   --------------------------------------- */
.adds-on-card .panel .panel-title[aria-expanded="true"]::before,
.usage-status-card .panel .panel-title a[aria-expanded="true"]::before,
.usage-status-card .panel .panel-title[aria-expanded="true"]::before{
    transform: translateY(-50%) rotate(90deg);
}
.adds-on-card .panel [aria-expanded="true"].panel-title,
.usage-status-card .panel [aria-expanded="true"].panel-title {
    border-bottom-color: transparent;
}

.usage-status-card .panel [aria-expanded="true"].panel-title::before,
.adds-on-card .panel [aria-expanded="true"].panel-title::before {
    transform: translateY(-50%) rotate(90deg);
}
/* =======================================
   NEW LINES TO ADD AT THE BOTTOM
   ======================================= */

/* 1. Give the <a role="button"> a relative position 
   so the arrow can be absolutely positioned inside. */
.adds-on-card .panel .panel-title a[role="button"] {
    position: relative;
}

/* 2. Inject the arrow icon on .adds-on-card <a role="button"> */
    .adds-on-card .panel .panel-title a[role="button"]::before {
        content: "";
        display: inline-block;
        width: 1rem;
        height: 1rem;
        background: url('../../../resources/beyonTelecom/Arrow.svg') no-repeat center center;
        background-size: contain;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        transition: transform 0.3s ease-in-out;
    }

/* 3. Rotate the arrow when aria-expanded="true" */
.adds-on-card .panel .panel-title a[role="button"][aria-expanded="true"]::before {
    transform: translateY(-50%) rotate(90deg);
}

.adds-on-card .panel:last-child .panel-title,
.usage-status-card .panel:last-child .panel-title {
    border-bottom: none;
}

.adds-on-card .installment-policy,
.usage-status-card .installment-policy {
    font-size: 10px;
    font-weight: normal;
    margin-top: 10px;
}

.adds-on-card .shorten-the-context {
    max-width: 130px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.usage-status-card .panel-title .panel-subtitle {
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 4px;
}

.usage-status-card .panel-title .panel-subtitle.values {
    color: #202945;
}

.usage-status-card .panel-body .panel-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.usage-status-card .panel-body .panel-content .panel-content-title {
    font-size: 12px;
    font-weight: normal;
    margin-bottom: 4px;
    color: #202945;
}

.usage-status-card .panel-body .panel-content .panel-content-title.subtitle {
    font-size: 11px;
    opacity: 0.8;
}

.usage-status-card .panel-body .panel-content .panel-content-subtitle {
    font-size: 11px;
    font-weight: normal;
    color: #A0A2A2;
}

.usage-status-card .panel-body .panel-content .panel-content-values {
    font-size: 11px;
    font-weight: normal;
    color: #202945;
}

.table-packages-compact {
    border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
}

.table-packages-compact > thead > tr > th {
    font-size: 0.875rem;
    color: #202945;
    background: #E9E9E9;
}

.table-packages-compact > tbody > tr > td {
    font-size: 0.75rem;
    color: #787A7A;
    background: #F5F5F5;
}

.table-packages-compact.first-col-title > tbody > tr > td:first-child {
    color: #202945;
}

.table-packages-compact > thead > tr > th,
.table-packages-compact > tbody > tr > th,
.table-packages-compact > tfoot > tr > th,
.table-packages-compact > thead > tr > td,
.table-packages-compact > tbody > tr > td,
.table-packages-compact > tfoot > tr > td {
    padding: 8px;
    border: none;
}

.table-packages-compact th:first-child {
    border-radius: 6px 0 0 0;
    -moz-border-radius: 6px 0 0 0;
    -webkit-border-radius: 6px 0 0 0;
}

.table-packages-compact th:last-child {
    border-radius: 0 6px 0 0;
    -moz-border-radius: 0 6px 0 0;
    -webkit-border-radius: 0 6px 0 0;
}

.table-packages-compact tr:last-child td:first-child {
    border-radius: 0 0 0 6px;
    -moz-border-radius: 0 0 0 6px;
    -webkit-border-radius: 0 0 0 6px;
}

.table-packages-compact tr:last-child td:last-child {
    border-radius: 0 0 6px 0;
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
}


.card-error-section {
    margin-left: -18px;
    margin-right: -18px;
    padding: 18px;
    color: #202945 !important;
    /* color: #202945;*/
    /*background-color: #FBB0B0;*/
    background-color: transparent;
    border-radius: inherit;
    padding: 32px 27px 32px 27px;
    display: flex;
    justify-content: center;
}

.errorIcon {
    color: #D50037;
    margin-right: 20px;
    font-size: 24px;
}
.card-show-message {
    margin-left: -18px;
    margin-right: -18px;
    padding: 18px;
    color: #202945 !important;
    /* color: #202945;*/
    /*background-color: #FBB0B0;*/
    background-color: white;
}

.card-show-message .click-here-underline, .card-show-message .click-here-underline:hover {
    color: #D50037;
}


.card-error-section.modal-response {
    margin-left: -14px;
    margin-right: -14px;
    padding: 14px;
}

.card-error-section-expired {
    margin-left: -21px;
    margin-right: -21px;
    padding: 21px;
    color: #202945 !important;
    /* color: #202945;*/
    /*background-color: #FBB0B0;*/
    background-color: #FBB0B0 !important;
}

.card-error-section-expired.modal-response {
    margin-left: -14px;
    margin-right: -14px;
    padding: 14px;
}

.card-success-section {
    margin-left: -21px;
    margin-right: -21px;
    padding: 21px;
    color: #FFFFFF !important;
    /* color: #202945;*/
    background-color: #52ae93;
}

.card-success-section.modal-response {
    margin-left: -14px;
    margin-right: -14px;
    padding: 14px;
}

.card-success-section.extra-margin-bottom,
.card-error-section.extra-margin-bottom {
    margin-bottom: 10px;
}

.form-input-styled {
    border: none;
    background-color: #EEEEEE;
}