.tx-boldbox-cpmcalculator #progressbar {
    overflow: hidden;
    color: lightgrey;
    display: block;
    width: 38%;
    height: auto;
    padding: 50px;
    position: relative;
    background: #00FFDD;
    border-radius: 30px;
}

@media(max-width:991px) {
    .tx-boldbox-cpmcalculator #progressbar {
        padding: 50px 40px;
    }
}

@media(max-width:768px) {
    .tx-boldbox-cpmcalculator #progressbar {
        width: 100%;
        display: flex;
        column-gap: 20px;
        justify-content: space-around;
    }
}

.tx-boldbox-cpmcalculator #progressbar li {
    list-style-type: none;
    font-size: 16px;
    position: relative;
    cursor: pointer;
    transition: opacity 0.3s ease;
    opacity: 0.3;
}

@media(max-width:768px) {
    .tx-boldbox-cpmcalculator #progressbar li {
        margin-bottom: 0px !important;
    }
}

.tx-boldbox-cpmcalculator #progressbar li p {
    color: #646768;
    margin-bottom: 30px;
}

@media(max-width:768px) {
    .tx-boldbox-cpmcalculator #progressbar li p {
        display: none;
    }
}

.tx-boldbox-cpmcalculator #progressbar li:hover {
    opacity: 0.8;
}

.tx-boldbox-cpmcalculator #progressbar .active {
    color: #000;
    opacity: 1;
}

.calculator-outerwrap .calculator-innerwrap fieldset h3 {
    margin-bottom: 40px;
}

.calculator-outerwrap .calculator-innerwrap fieldset:not(:first-of-type) {
    display: none;
}

.tx-boldbox-cpmcalculator #cpm-chart,
.tx-boldbox-cpmcalculator #dues-coverage-chart {
    width: 100%;
    height: 400px;
}

.tx-boldbox-cpmcalculator .custom-tooltip-icon {
    display: inline-block;
    margin-left: 5px;
    background: #FF1481;
    color: white;
    border-radius: 50%;
    width: 18px;
    height: 18px;
    text-align: center;
    font-size: 12px;
    line-height: 18px;
    cursor: pointer;
    position: relative;
}

.tx-boldbox-cpmcalculator .custom-tooltip-icon:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    top: -7px;
    left: 25px;
    background: #FF1481;
    color: #fff;
    padding: 5px 9px;
    border-radius: 4px;
    z-index: 9999;
    font-size: 16px;
    opacity: 1;

    display: inline-block;
    width: auto;
    max-width: 400px;
    min-width: 300px;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    box-sizing: border-box;
    line-height: 1.4;
    text-align: left;
}

/* Tooltip arrow */
.tx-boldbox-cpmcalculator .custom-tooltip-icon:hover::before {
    content: '';
    position: absolute;
    top: 6px;
    left: 18px;
    transform: rotate(270deg);
    border: 5px solid transparent;
    border-top: none;
    border-bottom-color: #FF1481;
}

/* === Mobile: Tooltip below icon === */
@media (max-width: 576px) {
    .tx-boldbox-cpmcalculator .custom-tooltip-icon:hover::after {
        top: 30px;                /* 👇 position below icon */
        left: -60px;                  /* align with icon */
        max-width: 90vw;
        min-width: unset;
        word-break: unset;
        font-size: 14px;
    }

    .tx-boldbox-cpmcalculator .custom-tooltip-icon:hover::before {
        top: 25px;                /* 👆 arrow just above tooltip */
        left: 6px;
        transform: rotate(180deg);
        border: 5px solid transparent;
        border-bottom: none;
        border-top-color: #FF1481;  /* 🔺 arrow pointing up */
    }
}

.tx-boldbox-cpmcalculator form {
    display: flex;
}

@media(max-width:768px) {
    .tx-boldbox-cpmcalculator form {
        display: block;
        width: 100%;
        padding: 15px;
    }
}

.tx-boldbox-cpmcalculator #progressbar {
    list-style: none;
    margin: 0;
}

.tx-boldbox-cpmcalculator #progressbar li {
    position: relative;
    padding-left: 33px;
    margin-bottom: 20px;
}

.tx-boldbox-cpmcalculator #progressbar li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 20px;
    height: 20px;
    background-image: url('../Images/check.svg');
    background-repeat: no-repeat;
    background-size: cover;
    filter: brightness(0) saturate(100%) invert(16%) sepia(89%) saturate(4005%) hue-rotate(174deg) brightness(97%) contrast(101%);
}

.tx-boldbox-cpmcalculator #progressbar li span {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
    color: #000;
}

.tx-boldbox-cpmcalculator #progressbar li p {
    margin: 0;
    font-size: 14px;
}

.tx-boldbox-cpmcalculator h3 {
    color: #0057BB;
    font-size: 32px;
}

.tx-boldbox-cpmcalculator fieldset {
    width: 62%;
    padding: 45px 70px;
}

@media(max-width:991px) {
    .tx-boldbox-cpmcalculator fieldset {
        padding: 45px 40px;
    }
}

@media(max-width:768px) {
    .tx-boldbox-cpmcalculator fieldset {
        width: 100%;
        padding: 45px 10px;
    }
}

.tx-boldbox-cpmcalculator select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg fill='%23B9BFBF' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.08 1.04l-4.25 4.25a.75.75 0 01-1.06 0L5.21 8.27a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 1.5em;
    padding-right: 2em;
}

.tx-boldbox-cpmcalculator input.form-control {
    border: 1px solid #dadada;
    width: 100%;
    display: block;
}

.tx-boldbox-cpmcalculator .form-control:focus {
    outline: 0;
    box-shadow: none;
}

/* button css */

.tx-boldbox-cpmcalculator .submitbtn-wrapper button.next,
.tx-boldbox-cpmcalculator .submitbtn-wrapper button.submit {
    position: relative;
    cursor: pointer;
    font-weight: 400;
    transition: all 0.2s;
    padding: 10px 20px;
    border-radius: 100px;
    background: #0091FF;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    overflow: hidden;
    color: #fff;
    min-width: 120px;
    justify-content: center;
}

.tx-boldbox-cpmcalculator .submitbtn-wrapper button.next:hover,
.tx-boldbox-cpmcalculator .submitbtn-wrapper button.submit:hover {
    background: #0091FF;
}

.tx-boldbox-cpmcalculator .submitbtn-wrapper button.next:active,
.tx-boldbox-cpmcalculator .submitbtn-wrapper button.submit:active {
    transform: scale(0.95);
}

.tx-boldbox-cpmcalculator .submitbtn-wrapper button.next::before,
.tx-boldbox-cpmcalculator .submitbtn-wrapper button.submit::before {
    content: "";
    display: inline-block;
}

.tx-boldbox-cpmcalculator .submitbtn-wrapper button.next::after {
    content: '';
    display: inline-block;
    margin-left: 10px;
    width: 25px;
    height: 25px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 74 74"><circle stroke-width="3" stroke="black" r="35.5" cy="37" cx="37"/><path fill="black" d="M25 35.5C24.1716 35.5 23.5 36.1716 23.5 37C23.5 37.8284 24.1716 38.5 25 38.5V35.5ZM49.0607 38.0607C49.6464 37.4749 49.6464 36.5251 49.0607 35.9393L39.5147 26.3934C38.9289 25.8076 37.9792 25.8076 37.3934 26.3934C36.8076 26.9792 36.8076 27.9289 37.3934 28.5147L45.8787 37L37.3934 45.4853C36.8076 46.0711 36.8076 47.0208 37.3934 47.6066C37.9792 48.1924 38.9289 48.1924 39.5147 47.6066L49.0607 38.0607ZM25 38.5L48 38.5V35.5L25 35.5V38.5Z"/></svg>') no-repeat center center;
    background-size: contain;
    transition: transform 0.3s ease-in-out;
    filter: invert(1);
}

.tx-boldbox-cpmcalculator .submitbtn-wrapper button.submit::after {
    content: '';
    display: inline-block;
    margin-left: 10px;
    width: 23px;
    height: 25px;
    background: url('../Images/check.svg') no-repeat center center;
    background-size: contain;
    transition: transform 0.3s ease-in-out;
    filter: invert(1);
}

.tx-boldbox-cpmcalculator .submitbtn-wrapper button.next:hover::after,
.tx-boldbox-cpmcalculator .submitbtn-wrapper button.submit:hover::after {
    transform: translateX(5px);
}

.tx-boldbox-cpmcalculator .submitbtn-wrapper button.previous {
    position: relative;
    cursor: pointer;
    font-weight: 400;
    transition: all 0.2s;
    padding: 10px 20px;
    border-radius: 100px;
    background: #0091FF;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    overflow: hidden;
    color: #fff;
    min-width: 120px;
}

.tx-boldbox-cpmcalculator .submitbtn-wrapper button.previous:hover {
    background: #0091FF;
}

.tx-boldbox-cpmcalculator .submitbtn-wrapper button.previous:active {
    transform: scale(0.95);
}

.tx-boldbox-cpmcalculator .submitbtn-wrapper button.previous::before {
    content: '';
    display: inline-block;
    margin-right: 10px;
    width: 25px;
    height: 25px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 74 74"><circle stroke-width="3" stroke="black" r="35.5" cy="37" cx="37"/><path fill="black" d="M49 35.5C49.8284 35.5 50.5 36.1716 50.5 37C50.5 37.8284 49.8284 38.5 49 38.5V35.5ZM24.9393 38.0607C24.3536 37.4749 24.3536 36.5251 24.9393 35.9393L34.4853 26.3934C35.0711 25.8076 36.0208 25.8076 36.6066 26.3934C37.1924 26.9792 37.1924 27.9289 36.6066 28.5147L28.1213 37L36.6066 45.4853C37.1924 46.0711 37.1924 47.0208 36.6066 47.6066C36.0208 48.1924 35.0711 48.1924 34.4853 47.6066L24.9393 38.0607ZM49 38.5L26 38.5V35.5L49 35.5V38.5Z"/></svg>') no-repeat center center;
    background-size: contain;
    transition: transform 0.3s ease-in-out;
    filter: invert(1);
}

.tx-boldbox-cpmcalculator .submitbtn-wrapper button.previous:hover::before {
    transform: translateX(-5px);
}

.tx-boldbox-cpmcalculator .submitbtn-wrapper {
    justify-content: space-between !important;
    padding-right: 10px;
    margin-top: 30px;
}

.tx-boldbox-cpmcalculator .submitbtn-wrapper button:only-child {
    margin-left: auto !important;
}

.tx-boldbox-cpmcalculator {
    /* background: #f9fbfccf; */
    padding-top: 0;
    padding-bottom: 0;
}

.tx-boldbox-cpmcalculator h1 {
    text-align: center;
    margin-bottom: 75px;
    font-size: 42px;
}

.tx-boldbox-cpmcalculator .cpm-innerwrap {
    background-color: #f9fbfccf;
    border-radius: 30px;
    padding: 30px;
    margin: 20px;
}

.tx-boldbox-cpmcalculator .download-pdf-wrapper {
  display: flex;
  justify-content: flex-end; /* Aligns button to the right */
  margin: 20px; /* Optional spacing */
}

.tx-boldbox-cpmcalculator button.download-pdf {
    background-color: #0091FF;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 100px;
    font-size: 15px;
    cursor: pointer;
    font-weight: 400;
    transition: all 0.3s;
    align-items: center;
    position: relative;
    overflow: hidden;
    display: flex;
}

.tx-boldbox-cpmcalculator button[onclick="downloadPDF()"]:hover {
    background-color: #0091FF;
}

.tx-boldbox-cpmcalculator button[onclick="downloadPDF()"]::after {
    content: '';
    margin-left: 10px;
    width: 20px;
    height: 20px;
    background: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 16l4-5h-3V4h-2v7H8z"/><path d="M5 18h14v2H5z"/></svg>') no-repeat center center;
    background-size: contain;
    transition: transform 0.3s ease-in-out;
}

.tx-boldbox-cpmcalculator button[onclick="downloadPDF()"]:hover::after {
    transform: translateY(3px);
}

.tx-boldbox-cpmcalculator .cpm-outerwrap ol {
    padding-left: 16px;
}

.tx-boldbox-cpmcalculator div#cpm-chart {
    margin-top: 30px;
    padding: 10px;
}

.tx-boldbox-cpmcalculator #dues-coverage-chart {
    margin-top: 30px;
    padding: 10px;
}

.tx-boldbox-cpmcalculator .cpm-innerwrap .row {
    border-bottom: 1px solid #ced4da61;
    padding-top: 15px;
    padding-bottom: 15px;
}

.tx-boldbox-cpmcalculator .cpm-innerwrap .row:last-child {
    border-bottom: none;
}
.tx-boldbox-cpmcalculator label {
    font-size: 16px;
}
.tx-boldbox-cpmcalculator label.capitalize {
    text-transform: capitalize;
}
#printableArea.pdf-mode .chart-wrapper .col-md-6 {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    margin-top: 30px;
}
#printableArea.pdf-mode #cpm-chart, #printableArea.pdf-mode #dues-coverage-chart {
    height: 300px !important;
    width: 600px !important;
}
