.page-calculator-box-container,
.calculator-box-container,
.faq-box-container,
.calculator-box-container.ammortisation-table {
    max-width: 1024px;
    flex-wrap: wrap;
    justify-content: left;
    align-items: left;
    text-align: left;
}

.no-transition {
    transition: none !important;
}

.calculator-box-container,
.faq-box-container,
.calculator-box-container.ammortisation-table {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 25px 0 0 0;
}

.faq-box-container,
.calculator-box-container.ammortisation-table {
    gap: 8px;
}

.faq-box-container {
    margin: 8px 0 0px 0;
}

.calculator-box-container.ammortisation-table {
    margin: 0px 0 16px 0;
}

.calculator-input-row-1,
.calculator-input-row-2,
.calculator-input-row-2-addInvestment,
.calculator-input-row-2-wrap,
.calculator-input-row-last,
.calculator-input-row-3,
.calculator-input-row-4,
.calculator-input-row-A,
.calculator-input-row-Z,
.calculator-input-row-reset,
.calculator-input-row-B,
.calculator-input-row-C,
.calculator-input-row-new-input,
.calculator-input-row-new-single-input,
.calculator-input-row-input,
.calculator-input-row-new-prize-input,
.calculator-input-row-new-regular-input,
.calculator-input-row-new-aer-input,
.calculator-input-row-only {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    gap: 0 8px;
    margin: 0 0 32px 0;
    z-index: 2;
}

.calculator-input-row-B {
    margin-top: 20px
}

.calculator-input-row-C {
    margin-top: 20px;
    margin-bottom: 0px
}

.calculator-input-row-reset {
    margin: 0 0 10px 0;
}

.fisrt-box {
    margin-bottom: 32px;
}

.last-box {
    margin-bottom: 0px;
}

.calculator-input-row-Z {
    margin: 0
}

/* .calculator-input-row-A, IF ADDING THIS BACK CHECK MWRR CALCUALTOR */
.calculator-input-row-3,
.calculator-input-row-4 {
    margin: 0 0 16px 0;
}

/* .calculator-input-row-new-single-input, 
.calculator-input-row-new-prize-input, 
.calculator-input-row-new-regular-input, 
.calculator-input-row-new-aer-input {
    margin-bottom: 12px
}  */

.calculator-box.one,
.calculator-box-100 {
    flex-basis: calc((100% - 16px) *.475);
    align-items: left;
    justify-content: left;
}


.calculator-box-100 {
    flex-basis: calc((100% - 0px) * 1);
    z-index: 2;
}

.calculator-box.two,
.calculator-action-container2,
.calculator-box.frequency,
.calculator-box.reset,
.calculator-box.reset2,
.calculator-box.control-buttons,
.calculator-box.apr,
.calculator-box.new-amount-input,
.calculator-box.new-month-input,
.calculator-box.add-remove-top-input,
.calculator-box.six,
.calculator-box.two.frequency-dropdown {
    display: flex;
    flex-basis: calc((100% - 16px) *.475);
    align-items: right;
    justify-content: right;
    z-index: 2;
    flex-direction: column;
    text-align: left;
}

.calculator-box.frequency {
    margin-top: 1px
}

.calculator-box.two.frequency-dropdown {
    flex-basis: calc((100% - 16px) *.25);
}
.calculator-box.reset2 {
    margin-top: 16px;
}

.calculator-box.container,
.calculator-box.container2 {
    flex-basis: calc((100% - 16px) *.499);
    z-index: 2;
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: flex-end;
}

.calculator-box.container2 {
    justify-content: flex-start;
}

.calculator-half-box-container {
    flex-basis: calc((50% - 8px));
    z-index: 2;
    display: flex;
    flex-direction: row;
    gap: 16px;
}

.calculator-inline-container {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: calc(50% - 8px * 4);
}

.right {
    justify-content: right;
}

.calculator-box.three,
.calculator-box.four {
    flex-basis: calc((100% - 16px) *.35);
}
 
.calculator-box.five {
    flex-basis: calc((100% - 16px) *.20);
}

.calculator-box.small {
    flex-basis: calc((100% - 16px) *.6);
}

.calculator-box.very-small {
    flex-basis: calc((100% - 16px) *.4);
}

.faq-container {
    display: flex;
    flex-direction: column;
    margin: 0px;
}

.section-header-calculator {
    display: flex;
    justify-content: left;
    text-align: left;
    width: 100%;
    color: var(--color-optimly-blue);
    position: relative;
    flex-direction: column;
    border-right: 1px solid var(--color-optimly-white);
    padding-right: 30px;
}

.calculator-header-container {
    display: flex;
    width: 100%;
    flex-direction: row;
    gap: 30px;
    margin-bottom: 8px;
}


.calculator-description-container {
    display: flex;
    width: 100%;
    flex-direction: column;
}

.sub-hero-subtext.calculator {    
    /* border-top: 1px solid var(--color-optimly-white); */
    padding: 20px 0 4px 0;
}

.related-content-container,
.related-to-text  {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 4px;
    position: relative; /* Needed for pseudo-element positioning */
    align-items: end;
  }
  
  /* .related-content-container::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 96%;
    width: 1px;
    background-color: var(--color-optimly-white);
  } */

.related-to-guide,
.related-to-text {
    position: relative;
    display: inline-block;
    }

    .related-to-text {
        position: relative;        
    }

    .related-to-guide {
    position: relative;
    padding: 0px;
    width: 140px;
    min-height: 105px;
    border-radius: 8px;
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
    justify-content: space-between; /* <-- This pushes text left, image right */
    }

    .related-to-guide:hover .related-text {
        background: #111a2e;
        }
        .related-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 12px;
        font-weight: bold;
        color: white;
        background: rgba(0, 0, 0, 0.6);
        padding: 2px 5px;
        text-align: center;
        width: fit-content;
        z-index: 20;
        transition: z-index 0.3s ease;
        }

.related-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--color-optimly-light-background);
transition: filter 0.3s ease, transform 0.3s ease;
}

.related-links {
    line-height: 25px;
    }
    .related-links, .guidebox-column-title, .guidebox-calculator-title, .guidebox-column-title-right {
    font-size: 14px;
    font-weight: 600;
    width: 100%;
    text-align: left;
    text-transform: uppercase;
    }

    .share-links-settings-container {
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        padding: 8px 0;
        align-items: center;
        border-top: 1px solid var(--color-optimly-white);
        border-bottom: 1px solid var(--color-optimly-white);
        margin-top: 16px
        }


        .guidebox-template-title-insert, .guidebox-template-title-insert2 {
            padding: 0 10px;
            }
            .guidebox-template-title-footer, .guidebox-template-title-footer2, .guidebox-template-title-insert, .guidebox-template-title-insert2, .guidebox-template-title-insert-last, .guidebox-template-title-date, .guidebox-template-title-date2, .guidebox-template-title-reading-time, .guidebox-template-title-reading-time2 {
            position: relative;
            margin-left: 0px;
            z-index: 2;
            font-size: 12px;
            font-family: "InterVariable", sans-serif;
            font-weight: 450;
            letter-spacing: .125px;
            display: block;
            }        
.calculator-accordian,
.guide-accordian,
.calculator-faq {
    display: flex;
    flex-direction: column;
    margin: 12px 0 0px 0;
    padding: 0px 16px;
    width: 100%;
    transition: all 0.3s ease-in-out;
    /* background-color: var(--color-optimly-light-background);     */
    border-radius: 6px;
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--color-optimly-white);
    border-bottom: 1px solid var(--color-optimly-white);
    border: 1px solid var(--color-optimly-white);
}

.calculator-faq {
    background-color: var(--color-white);
    border: 0px solid var(--color-optimly-white);
    border-top: 1px solid var(--color-optimly-white);
    border-radius: 0px;
    cursor: pointer;
}

.guide-accoridan-container {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
}

.guide-accordian {
    background-color: var(--color-white);
    border: 0px solid var(--color-optimly-white);
    border-radius: 0px;
    cursor: pointer;
    margin: 0px;
    padding: 0;
    text-transform: uppercase;

font-size: 13.5px;
color: var(--color-optimly-blue-lig);
text-transform: uppercase;
font-weight: 550;
line-height: 40px;
}

#amortizationTableContainer {
    width: 100%
}

.icon-padding {
    margin-left: 20px
}

.faq-active-title {
    color: var(--color-optimly-light-blue);
}

.calculator-accordian-btn,
.guide-accordian-btn,
.calculator-faq-btn {
    color: var(--color-optimly-blue);
    padding: 12px 0;    
    cursor: pointer;
    z-index: 2;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease-in-out;
}

.accordian-reset-button-container {
    display: flex;
    justify-content: center;
    position: absolute;    
    margin: 0;
    height: 60px;
    right: 50px;
    z-index: 3;
}

.reset-button-icon {
    border-radius: 4px;
    cursor: pointer;
    color: var(--color-optimly-blue);
    background-color: transparent;
    border: 0px solid var(--color-optimly-lighter-grey);
    font-weight: 450;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    padding: 0 16px;
    cursor: pointer;
}

.icon-reload-svg:active {
    transform: rotate(360deg); /* Shrink and rotate the button */
    transition: transform 0.4s ease-in-out; /* Smooth animation */
}

.icon-reload-svg {
    width: 22px;
}

.icon-delete-white-svg {
    height: 22px;
}

.calculator-faq-btn {
    padding: 12px 0 12px 0;
    justify-content: left;
}

.chevron-blue-calculator,
.chevron-blue-calculator-small,
.chevron-blue-back {
    transition: transform 0.3s ease-in-out;
    width: 20px;
    height: 20px;
    margin: 5px;
    transform: rotate(-90deg);
    transition: all 0.5s ease-in-out;
}

.chevron-blue-calculator-small {
    transition: transform 0.3s ease-in-out;
    width: 15px;
    height: 15px;
    margin: 5px;
    transform: rotate(-90deg);
    transition: all 0.5s ease-in-out;
}

.chevron-blue-calculator2 {
    margin-top: 5px;
    padding: 0px 15px;
    transform: rotate(90deg);
    transition: all 0.5s ease-in-out;
    transition: transform 0.3s ease-in-out;
}

.chevron-blue-back {
    transform: rotate(180deg);
}

.rotate {
    transform: rotate(90deg);
    transition: all 0.5s ease-in-out;
}

.icon-plus-blue-svg {
    transition: transform 0.625s ease;
}

.icon-plus-blue-svg.rotate {
    transform: rotate(180deg);
}

.calculator-accordian-content,
.guide-accordian-content,
.calculator-faq-content {
    max-height: 0;
    overflow: hidden;
    z-index: 2;
    transition: max-height 0.5s ease-in-out;
    width: 100%
}

.calculator-accordian-content.active,
.guide-accordian-content.active,
.calculator-faq-content.active {
    margin-bottom: 20px;
}

.active {
    max-height: 2000px;
}

.inline-container,
.flex-inline-container {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    margin: 0;
}

.flex-inline-container {
    display: flex;
}

.input-title,
.input-title-column-span {
    text-align: left;
    margin: 2px;
    font-size: 13px;
    font-family: "InterVariable", sans-serif;
    font-weight: 500;
    letter-spacing: 0.125px;
    color: var(--color-optimly-background-blue);
    white-space: nowrap;
    display: flex;
    text-transform: uppercase;
}
.sub-hero-date-of-update {
    display: flex;
    width: 100%;
    transition: font-size 0.5s ease-in-out;
    justify-content: left;
    text-align: left;
    margin-top: -5px;
    margin-bottom: 20px;
    color: var(--color-optimly-main-blue);
    font-weight: 600;
}

.input-title.frequency {
    width: 60%;
}

.input-title.transparent {
    color: transparent;
}

.input-title.cashflowday {
    width: 40%;
    position: relative;
    white-space: nowrap;
}

.select-wrapper {
    width: 100%;
    display: inline-flex;
    text-align: right;
}

.chevron-blue-calculator.small {
    width: 10px;
    height: 10px;
    margin-right: 5px;
    border-radius: 5px;
    transform: rotate(90deg);
    margin-right: 10px;
}

.calculator-input-icon.small {
    border-radius: 5px;
}

.calculator-icon-input-container,
.calculator-icon-result-container {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    text-align: right;
    height: 40px;
    border: 1px solid var(--color-optimly-lighter-grey);
    position: relative;
    border-radius: 4px;
    background: white;
}

.calculator-icon-result-container {
    background: transparent;
}

.input-explaination-container {
    height: 40px;
    width: 100%;
    margin-top: 5.5px;
    align-items: center;
    align-content: center;        
}

/* .calculator-icon-input-container.half-box {
    padding-left: 5px;
} */

.input-title.amount {
    width: 60%;
    margin-right: min(4vw, 50px);
    position: relative;
}

.calculator-icon-input-container.no-margin {
    margin-top: 0px;
    margin-right: min(4vw, 50px);
    display: flex;
    width: 55%;
}

.calculator-icon-input-container:focus-within,
.calculator-input-box.frequency-day:focus-within {
    border: 1.3px solid var(--color-optimly-light-blue);
    box-shadow: 0 0 5px rgba(0, 104, 249, 0.1);
    text-align: right;
}

.calculator-icon-input-container.error,
.calculator-icon-input-container.error2,
.calculator-button.contribution-frequency-button.error, 
.calculator-button.frequency-button.error,
.calculator-button.frequency-button2.error,
.calculator-button.contribution-type-button.error,
.calculator-button.withdrawal-type-button.error,
.contributionButton.unselected.error {
    border: 1.4px solid red;
    box-shadow: none;
}

.calculator-input-icon,
.calculator-input-icon.small,
.calculator-input-icon.large {
    display: inline-flex;
    /* width: 10%; */
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    background-color: var(--color-white);
    min-width: 45px;
}



.calculator-input-icon.small {
    min-width: 25px;
}
.icon-close-ss {
    height: 22px;
    margin: 0px;
    }

.calculator-input-icon.large {
    min-width: 40px;
}

#singleContributionsContainer {
    display: flex;
    flex-direction: column;
}

.calculator-input-box-container,
.calculator-input-box,
.calculator-input-box2,
.calculator-result-container {
    position: relative;
    border: transparent;
    display: flex;
    border-radius: 3px;
    padding: 0 12px 0 0;
    width: 100%;
    text-align: right;
    font-size: 14.5px;
    outline: none;
    margin: 0;
    color: var(--color-optimly-blue);
    background-color: var(--color-white);
    align-items: center;
    font-weight: 450;
}

.calculator-input-box[type="date"] {
    font-size: 14.5px;
    white-space: nowrap;
    display: flex;
    letter-spacing: -0.75px;
}

.calculator-input-box-container {
    justify-content: flex-start;
}

.calculator-input-box {
justify-content: flex-end;
}

.calculator-input-box2 {
    padding: 0;
}

.input-box-slider-container {
    display: none; /* Default to hidden */
}

.no-js .input-box-slider-container {
    display: none; /* Ensure visibility is off for non-JS users */
}

.input-box-slider-container {
    width: calc(100% + 18vw);
    padding: 0 2vw;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 0 3px 3px 0;;
    background-color: white;
    border-left: 1px solid var(--color-optimly-lighter-grey);
    z-index: 2;
    margin: 10px 0;
}

.input-box-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 5px;
    border-radius: 0px;
    outline: none;
    margin: 10px 0;
    width: 100%;
}

input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, #02a4ea 0%, #2565AC var(--slider-percentage, 50%), #f3f3f3 var(--slider-percentage, 50%));
    outline: none;
}

input[type="range"].slider-pink{
    background: linear-gradient(to right, #E20086 0%, #612B89 var(--slider-percentage, 50%), #f3f3f3 var(--slider-percentage, 50%));
}

input[type="range"].slider-green  {
    background: linear-gradient(to right, #F3E703 0%, #019D4D var(--slider-percentage, 50%), #f3f3f3 var(--slider-percentage, 50%));
}

input[type="range"].slider-purple {
    background: linear-gradient(to right, #02a4ea 0%, #612B89 var(--slider-percentage, 50%), #f3f3f3 var(--slider-percentage, 50%));
}


.input-box-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px; 
    height: 37px; 
    border-right: 5px solid white;
    border-top: 11px solid white;
    border-bottom: 11px solid white;
    border-left: 0px solid white;
    position: relative;
    background-color: var(--color-optimly-main-blue);
    cursor: pointer;
    z-index: 2;
    box-shadow: none;
    outline: none;
}

/* For Firefox */
.input-box-slider::-moz-range-thumb {
    width: 9px; 
    height: 37px; 
    border-right: 5px solid white;
    border-top: 12px solid white;
    border-bottom: 12px solid white;
    border-left: 0px solid white;
    background-color: var(--color-optimly-main-blue);
    cursor: pointer;
    position: relative;
    box-shadow: none;
    outline: none;
}

/* Pink thumb */
input[type="range"].slider-pink::-webkit-slider-thumb {
    background-color: #612B89;
}

input[type="range"].slider-pink::-moz-range-thumb {
    background-color: #612B89;
}

/* Green thumb */
input[type="range"].slider-green::-webkit-slider-thumb {
    background-color: #019D4D;
}

input[type="range"].slider-green::-moz-range-thumb {
    background-color: #019D4D;
}

/* Purple thumb */
input[type="range"].slider-purple::-webkit-slider-thumb {
    background-color: #612B89;
}

input[type="range"].slider-purple::-moz-range-thumb {
    background-color: #612B89;
}

.color-change-button-container {
    display: flex;
    flex-direction: row;
    gap: 8px;
    color: white
}

.color-change-button {
    color: var(--color-white);
    height: 30px;
    width: fit-content;
}


.cashflow-input input[type="date"],
.cashflow-input input[type="text"],
.cashflow-input input[type="number"],
.prize-input input[type="date"],
.prize-input input[type="text"],
.prize-input input[type="number"] {
    width: 100%;
    margin-right: 5vw;
    text-align: right;
    padding: 8px;
    display: flex;
    justify-content: flex-end;
    font-size: 14.5px;
    border: 1px solid var(--color-optimly-lighter-grey);
    border-radius: 4px;
    z-index: 1;
}

.calculator-input-box::placeholder,
.calculator-input-box2::placeholder {
    font-size: 14.5px;
    padding-right: 5px;
    font-family: "InterVariable", sans-serif;
    font-weight: 350;
}

.calculator-input-box.dropdown {
    height: 37px;
    background-color: var(--color-white);
    border-radius: 4px;
    font-size: 14px;
    -webkit-appearance: none;
    text-align: left;
    padding: 0 0 0 12px;
    cursor: pointer;
}

.calculator-input-box.dropdown select option {
    text-align: left;
}

.calculator-input-box.cashflowday {
    height: 40px;
    margin-top: 10px;
    width: calc(20% - 8px);
    margin-top: 10px;
    font-size: 13px;
    border: 1px solid var(--color-optimly-lighter-grey);
    border-radius: 4px;
}

.calculator-input-box.frequency-day {
    height: 40px;
    margin-top: 0px;
    width: calc(20% - 8px);
    font-size: 13px;
    border: 1px solid var(--color-optimly-lighter-grey);
    border-radius: 4px;
}


#totalCashFlows {
    display: none;
}

.cashflow-button-container-master {
    display: inline-flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 20px;
    z-index: 3;
}

.cashflow-button-container {
    display: inline-flex;
    justify-content: flex-end;
    gap: 8px;
    z-index: 3;
    width: 100%;
}

.cashflow-input,
.prize-input {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin: 25px 0;
    height: 40px;
}

.title-row {
    display: none;
}

.cashflow-input div,
.prize-input div {
    margin-bottom: 10px;
}

.cashflow-input label,
.prize-input label {
    margin-right: 10px;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-size: 14px;
}


.cashflow-input button.deleteButton:hover,
.prize-input button.deleteButton:hover {
    background-color: var(--color-optimly-mid-grey);
    color: var(--color-white);
}

.cashflows-hidden,
.prizes-hidden {
    height: 0px;
    opacity: 1;
    transition: all 0.3s ease;
}

.cashflows-visible,
.prizes-visible {
    max-height: auto;
    opacity: 1;
    transition: all 0.3s ease;

}

.decision-button-container,
.calculator-frequency-button-container,
.calculator-general-button-container {
    width: 100%;
    display: flex;
    gap: 8px;
    z-index: 2;
    height: 40px;
    margin-top: 10px;
}

.decision-button-container {
    gap: 20px
}

.calculator-button,
.color-button,
.contributionButton,
.withdrawalButton,
.prizeButton,
.deleteButton,
.deleteButtonIcon,
.contributionButton-blank {
    height: 40px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--color-optimly-blue);
    background-color: var(--color-white);
    border: 1px solid var(--color-optimly-lighter-grey);
    font-size: 13px;
    font-family: "InterVariable", sans-serif;
    font-family: "InterVariable", sans-serif;
    font-weight: 450;
    text-align: center;
    text-decoration: none;
    padding: 8px;
    padding: 0 10px;
    cursor: pointer;
    transition: background-color 0.3s;
}


.calculator-input-box.frequency-day {
    width: calc(40%);
    min-width: 80px;
    text-align: right;
}

.calculator-input-box.frequency-day::placeholder {
    text-align: left;
    padding: 0 4px;
    font-family: "InterVariable", sans-serif;
    font-weight: 350;
}

.calculator-button.frequency-button,
.calculator-button.frequency-button2 {
    width: calc(25%);
}


.calculator-button.general-button {
    width: calc(100%);
}

.calculator-button.decision-button,
.calculator-button.decision-button2 {
    width: calc(50%);
}

.calculator-button.reset-button,
.calculator-button.reset-button-half {
    width: calc(50% - 10px);
}

.calculator-button.reset-button2 {
    width: calc(50% - 10px);
}


.calculator-submit,
.modal-submit {
    width: 100%;
    display: flex;
    margin: 12px 0;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    font-family: "InterVariable", sans-serif;
    font-weight: 450;
    border-radius: 6px;
    height: 46px;
    background-color: var(--color-optimly-blue);
    border: 1px solid var(--color-optimly-blue);
    color: var(--color-white);
}

.modal-submit {
    margin: 0;
}

.calculator-submit:hover {
    background: linear-gradient(136deg, var(--color-optimly-main-blue) 0%, var(--color-optimly-light-blue) 100%);
    color: var(--color-white);
    border: 1px solid var(--color-optimly-light-blue);
    transition: all 0.3s ease;
    cursor: pointer;
}

.calculator-button:hover,
.color-button:hover,
.contributionButton-blank:hover {
    background-color: var(--color-optimly-mid-grey);
    border: 1px solid var(--color-optimly-mid-grey);
    color: var(--color-white);
    transition: all 0.3s ease;
    cursor: pointer;
}

.calculator-button:active,
.calculator-button.selected,
.color-button:active, 
.color-button.selected,
.calculator-submit.active {
    background-color: var(--active-btn-color);
    border: 1px solid var(--active-btn-color);
    color: var(--color-white);
    transition: all 0.3s ease;
}


.contributionButton,
.contributionButton-blank,
.contributionButton.unselected,
.withdrawalButton,
.title-row-column3,
.title-row-column4,
.prizeButton,
.deleteButton,
.deleteButtonIcon {
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    color: var(--color-white);
    min-width: 100px;
    height: 40px;
}


.deleteButton,
.deleteButtonIcon,
.title-row-column4 {
    margin-right: 0;
}

.contributionButton {
    background-color: var(--color-optimly-green);
    border: 1px solid var(--color-optimly-green);
}

.contributionButton.unselected {
    background-color: white;
    color: var(--color-optimly-main-blue);
    font-weight: 500;
    border: 1px solid var(--color-optimly-lighter-grey);
    max-width: 100px
}

.contributionButton.unselected:hover {
    background-color: var(--color-optimly-mid-grey);
    border:  var(--color-optimly-mid-grey);
    color: var(--color-white);

}

.contributionButton:hover {
    background-color: var(--color-optimly-green);
    border: 1px solid var(--color-optimly-green);
}

.prizeButton {
    background-color:  var(--color-optimly-yellow);
    color: var(--color-optimly-blue);
    cursor: default;
}

.withdrawalButton {
    background-color: var(--color-optimly-purple);
    border: 1px solid var(--color-optimly-purple);
}

.withdrawalButton:hover {
    background-color: rgb(58, 25, 81);
    border: 1px solid rgb(58, 25, 81);
}

.deleteButton,
.deleteButtonIcon,
.title-row-column4 {
    width: 80px;
    background-color: var(--color-optimly-lighter-grey);
    padding: 0 4px;
}

.deleteButtonIcon {
    width: auto;
    min-width: 45px;
    border: 0px solid white;
    justify-content: center;
    align-items: center;
    display: flex;
    border: 1px solid var(--color-optimly-lighter-grey);

}

.deleteButtonIcon:hover {
    background-color: var(--color-optimly-mid-grey);
    border: 1px solid var(--color-optimly-mid-grey);
}


.calculator-result-container-master {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    border: 1px solid var(--color-optimly-light-blue);
    width: 100%;
    border-radius: 5px;
    background: linear-gradient(136deg, var(--color-optimly-main-blue) 0%, var(--color-optimly-light-blue) 100%);
    color: var(--color-white);
    padding: 32px;
    text-align: left;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

.calculator-result-container-master.white {
    background: var(--color-white);
    color: var(--color-optimly-blue);
}

.calculator-result-container {
    display: flex;
    flex-direction: column;
    margin-top: 0px;
    border: 1px solid var(--color-optimly-light-blue);
    width: 100%;
    border-radius: 5px;
    background: linear-gradient(136deg, var(--color-optimly-main-blue) 0%, var(--color-optimly-light-blue) 100%);
    color: var(--color-white);
    padding: 32px;
    text-align: left;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
    height: 100%;
}

.calculator-results-container-investment-header {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 16px;
    transition: all 0.5s ease;
    background-color: var(--color-optimly-main-blue);

}

.calculator-result-container.reverse {
    background: linear-gradient(-136deg, var(--color-optimly-main-blue) 0%, var(--color-optimly-light-blue) 100%);
}


.calculator-result-container.light-blue {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    border: 1px solid var(--color-optimly-light-blue);
    width: 100%;
    border-radius: 5px;
    background: rgba(2, 164, 234, 0.05);
    color: var(--color-optimly-blue);
    padding: 16px;
    text-align: left;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

.calculator-result-container.white {
    display: flex;
    flex-direction: column;
    margin: 20px 0;
    border: 1px solid var(--color-optimly-light-blue);
    width: 100%;
    border-radius: 5px;
    background: var(--color-white);
    color: var(--color-optimly-blue);
    padding: 16px;
    text-align: left;
    transition: all 0.3s ease;
    overflow: hidden;
    position: relative;
}

.calculator-result-container.ammortisation-table {
    display: flex;
    flex-direction: column;
    margin-top: 32px;
    border: 0px solid var(--color-optimly-light-blue);
    width: 100%;
    border-radius: 5px;
    color: var(--color-optimly-blue);
    background: var(--color-white);
    padding: 0px;
    text-align: left;
    transition: all 0.3s ease;
}

.calculator-result-container.ammortisation-table.no-border {
    margin-top: 0px;
    border: 0px solid var(--color-optimly-white);
    width: 100%;
    border-radius: 5px;
    color: var(--color-optimly-blue);
    padding: 0;
    text-align: left;
    transition: all 0.3s ease;
}

.icon-birthday-svg {
    height: 25px;
}

.icon-heart-svg,
.icon-hash-svg {
    height: 18px;
}

.icon-gbp-blue-svg.large {
    margin-left: 1vw;
}

.icon-calendar-svg,
.icon-calendar-blue-svg {
    height: 20px;
}

.icon-percent-svg,
.icon-calendar-years-svg,
.icon-gbp-blue-svg,
.icon-gbp-blue-svg.large {
    height: 16px;
}

.icon-plus-blue-svg {
    height: 22px
}

.icon-target-svg {
    height: 1.2em;
}

.icon-children-svg {
    width: 22px;
    margin-left: 5px;
}

.icon-empty-bed-svg {
    height: 24px;
    margin-left: 5px
}

.calculator-result-header {
    margin: 5px 0px 10px 0px;
}

.result-body {
    margin: 18px 0;
}

.custom-select {
    position: relative;
    width: 100%;
}

.custom-select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 8px;
    font-size: 14px;
    border: 1px solid var(--color-optimly-lighter-grey);
    border-radius: 4px;
}

.custom-select select::-ms-expand {
    display: none;
}

.decimal {
    font-size: 12px;
}

.calculator-header-result {
    margin-bottom: 25px;
    width: 100%;
}

.calculator-header-result-2 {
    margin-bottom: 5px;
}


.calculator-header-result-3 {
    margin: 50px 0 20px 0;
}

.calculator-input-divider {
    display: none;
}

#toggleTableButton {
    min-width: 100px;
}

#cashflowAmount,
#cashflowDate,
#prizeAmount,
#prizeDate {
    border-radius: 4px;
    background-color: var(--color-white);
    color: var(--color-optimly-blue);
    text-decoration: none;
    z-index: 1;
    outline: none;
}

ul {
    padding-left: 16px;
}

.light-blue {
    border: 1px solid var(--color-optimly-light-blue);
}

.master-results-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 16px;
}

.resultNumber-container,
.resultNumber-container2,
.resultNumber-container-row2 {
    margin-top: 25px;
    display: flex;
    flex-direction: row;
    gap: 3vw;
    width: 100%;
}

.resultNumber-box {
    width: 100%;
    margin: 0;
    flex-direction: column;
    min-height: auto;
}

.resultNumber-box-title {
    text-align: left;
    width: 100%;
    line-height: 50px;
    font-size: 13px;
    font-family: "InterVariable", sans-serif;
    font-weight: 550;
    letter-spacing: 0.25px;
    text-transform: uppercase;
}

.faq-title {
    width: 100%;
    text-align: left;
    font-weight: 700;
    margin: 30px 0 16px 0;
}

.resultLargeNumbers {
    font-size: min(7.5vw, 42px);
    font-family: "InterVariable", sans-serif;
    font-weight: 400;
    letter-spacing: .1vw;
    
}

.result-table-row-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.result-table-row-title {
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    width: 100%;
    font-size: 14px;
    line-height: 26px;
    font-weight: 500;
    letter-spacing: -0.125px;
    text-decoration: underline;
    text-underline-offset: 10px;
    margin-bottom: 5px
}

.result-table-row {
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    width: 100%;
    font-size: 13px;
    line-height: 26px;
    font-weight: 500;
    letter-spacing: -0.125px;
}

.result-table-row span {
    display: inline-block;
    text-align: left;
    font-weight: 400;
}

.result-table-row-figure {
    font-size: 24px;
    margin: 0 5px;
    font-family: "InterVariable", sans-serif;
    display: inline-block;
    text-align: left;
    font-weight: 450;
}

.calculatorResultContainer {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.hyper-advanced-setting {
    display: none;
}

.select-button-container-master,
.select-button-container-master2 {
    gap: 8px;
    justify-content: flex-end;
    width: 100%;
    display: flex;
    margin: 0px 0 0 0;
    z-index: 2;
}

.select-button-container,
.select-button-container2,
.select-button-container3,
.guides-button-container {
    gap: 8px;
    justify-content: flex-end;
    width: 100%;
    display: flex;
    margin: 10px 0 0 0;
    z-index: 2;
}

.guides-button-container {
    margin: 0;
}

.for-growth-buttons {
    margin: 8px 0 0 0;
}
.calculator-icon-input-container,
.section6 {   
    margin-top: 9px;
}

.reset-button-container {
    display: flex;
    justify-content: flex-end;
}


.select-button-container2,
.guides-button-container {
    width: 50%;
}


/* check weighted averafge

} */
.button-inline-container,
.button-inline-container2,
.reset-button-inline-container,
.reset-button-inline-container2,
.control-button-inline-container,
.button-inline-container.bespoke {
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    margin-left: auto; /* <-- add this */
}



/* .reset-button-inline-container, check mortgage modeller advanced
.button-inline-container2 {
    margin-top: 10px
} */


.radio-inline {
    display: inline-block;
    margin-right: 20px;
}

#expand-secton,
#expand-secton2,
#expand-secton3 {
    width: 100%
}

.faq-box-container {
    align-content: left;
    justify-content: left;
    display: flex;
}

.faq-p {
    margin-top: 10px;
    margin-bottom: 5px;
    align-content: left;
    justify-content: left;
    display: flex;
}

.faq-inline-container {
    display: inline-block;
    width: 100%
}

.faq-ui {
    margin-left: 1px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.faq-li {
    padding: 12.5px 0;
}

.faq-li-first {
    padding: 0px 0 12.5px 0;
    margin-top: 0px;
}

.faq-li-last {
    padding: 12.5px 0 0 0
}

.faq-li-footer {
    padding: 5px 0 12.5px 0;
    }

.faq-li-title {
    font-weight: 600;
    font-size: 16px;
    color: 23406A;
}

.faq-number {
    font-weight: 700;
    width: 100%
}

.faq-number-body {
    width: 100%;
}


.calculator-result-header {
    margin: 11px 0px;
}

.pb-calculator-result {
    margin: 15px 0 10px 0;
    line-height: 26px;
    font-size: 15px;
}


/* 
#cashflowAmount,
#cashflowDate,
#prizeAmount,
#prizeDate {
    border-radius: 4px;
    background-color: var(--color-white);
    color: var(--color-optimly-blue);
    text-decoration: none;
    z-index: 1;
    outline: none;
} */

#prizeAmount:focus-within,
#prizeDate:focus-within,
#cashflowAmount:focus-within,
#cashflowDate:focus-within,
.out-of-range {
    border: 1.15px solid var(--color-optimly-light-blue);
    box-shadow: 0 0 5px rgba(0, 104, 249, 0.1);
    text-align: right;
}

#prizeAmount::placeholder,
#cashflowAmount::placeholder {
    font-size: 14.5px;
    font-family: "InterVariable", sans-serif;
    font-weight: 350;
}

.calculator-button {
    width: calc(100% - 0px);
    z-index: 2;
}

#yearButtonsContainer {
    display: flex;
    gap: 10px;
    flex-direction: column;
    padding: 0px;
    height: 100%;
    width: 35%;
}

.year-button {
    padding: 15px;
    border: 1px solid var(--color-white);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
    color: white;
    display: flex;
    justify-content: space-between;
    background-color: transparent;
    height: 100%;
}

.year-button:hover {
    background-color: rgba(0, 0, 0, 0.2);
}

.year-button.selected {
    background-color: rgba(0, 0, 0, 0.2);
}

#yearDetailContainer,
#errorContainer {
    padding: 20px;
    color: white;
    border: 1px solid #ddd;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.2);
    flex-direction: column;
}

#yearDetailContainer {
    display: none;
}

.error-message-title {
    text-align: left;
    font-size: 15.5px;
    font-weight: 600;
    width: 100%;
    text-decoration: underline;
    text-underline-offset: 10px;
    line-height: 24px;
    letter-spacing: 0.15px;
    margin: 10px 0 0 10px;
    margin-bottom: 35px;
}

.error-message-body {
    text-align: left;
    width: 100%;
    font-size: 15.5px;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 0.15px;
    margin: 10px 0 0 10px;
    margin-bottom: 30px;
}

.annual-return-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.annual-return-item {
    display: flex;
    justify-content: space-between;
    /* Align title on the left and value on the right */
    padding: 8px;
}

.annual-return-year {
    justify-content: center;
    width: 100%;
    display: flex;
    text-underline-offset: 10px;
    text-decoration: underline;
    margin-bottom: 12px;
    margin-top: 10px;
    font-size: 17px;
    font-weight: 500;
}

.annual-return-title {
    font-family: "InterVariable", sans-serif;
    font-weight: 450;
    font-size: 13px;
    flex: 1;
    text-transform: uppercase;
}

.annual-return-value {
    flex: 1;
    text-align: right;
}

.year-text {
    font-size: 14px;
    font-weight: 500;
    align-content: center;
    height: 100%;
}

.irr-text {
    font-size: 22px;
    font-family: "InterVariable", sans-serif;
    font-weight: 450;
    align-content: center;
    height: 100%;
    ;
}

/* #overpayment-column {
    display: none
}
     */

.table-cell-header-width {
    width: calc(100% / 5)
}


.calculator-box-container.new-inputs {
    display: inline-flex;
    flex-direction: row;
    width: 100%;
}


.calculator-button.contribution-frequency-button {
    width: 100%;
}

.calculator-button.expand-button {
    width: 50%;
}

/* .calculator-button.frequency-button {  changes MWRR
    width: 13%;
} */

/* .calculator-frequency-button-container {  check premium bond advanced calcualtor if changeg
    margin: 10px 0 30px 0;
} */

.calculator-general-button-container {
    width: 50%;
    margin-left: calc(50% + 32px);
    display: flex;
    justify-content: flex-end;
}


.calculator-button.general-button {
    width: calc(100% - 16px);
    z-index: 2;
}


.results-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 16px;
    transition: all 0.5s ease;
}


.modal-row-container,
.modal-row-container-switch {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}


.modal-text {
    justify-content: start;
    align-items: center;
    align-content: center;
    font-size: 15px;
}

.show-mobile,
.show-date-on-mobile,
.show-on-mobile,
.show-cell-on-mobile,
.show-date,
.show-min,
.show-on-narrow,
.show-when-600 {
    display: none
}

.hide-cell-on-mobile,
.hide-on-mobile,
.hide-on-mobile-auto,
.hide-mobile,
.hide-min,
.hide-date,
.hide-on-narrow {
    display: table-cell
}

.hide-date-on-mobile,
.hide-when-400,
.hide-when-600,
.hide-when-800 {
    display: flex;
}

.showOn900 {
    display: block;
}

.hideOn900 {
    display: none;
}

.table-cell-header-width {
    width: calc(100% / 6)
}

.flex-direction-row-container,
.flex-direction-row-container-left {
    display: flex;
    flex-direction: row;
    gap: 0;
    justify-content: space-between;
    width: 100%;
}

.flex-direction-row-container-left {
    justify-content: left;
}

.setting-button-text {
color: var(--color-optimly-blue);
display: none;
}


/* FROM FRL */

.repayment-table-header th {
    text-transform: uppercase;
}

.calculator-input-box.custom {
    position: relative;
    border: transparent;
    display: flex;
    justify-content: flex-end;
    border-radius: 4px;
    padding: 0 5px 0 10px;
    width: 100%;
    text-align: left;
    font-size: 14.5px;
    outline: none;
    margin: 0;
    color: var(--color-optimly-blue);
    background-color: var(--color-white);
}

.calculator-input-icon.custom {
    display: none;
}

.row-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-top: -10px;
    gap: 8px;
    z-index: 99;
}

.accordian-row-container {
    display: flex;
    flex-direction: row;
    gap: 4px;
    z-index: 2;
    position: absolute;
    bottom: 0;
    right: 0;
}

.settings-button {
    cursor: pointer;
}


.results-container.overpayment {
    display: none;
}

.row-container2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-between;
}

.benefit-container.white {
    width: 100%;
    background-color: var(--color-white);
    border-radius: 4px;
    background-color: var(--color-white);
}

.benefit-container-text {
    font-size: 13px;
    color: var(--color-white);
    max-width: 80%;
    transform: translate(10%, 0%);
    text-align: center;
    line-height: 20px;
}

/* Style for the benefit container */

.overpayment-calcualtions {
    margin: 10px 0;
}

.benefit-container {
    border: 1px solid rgba(255, 255, 255, 1);
    padding: 10px;
    width: 33%;
    border-radius: 10px;
    background: linear-gradient(136deg, var(--color-optimly-main-blue) 0%, var(--color-optimly-light-blue) 100%);
}

#overpayment-text {
    width: 90%;
    margin-left: 5%;
    line-height: 20px;
}

#overpayment-text2 {
    width: 100%;

}

.percentage-growth {
    width: 115px
}

/* Style for the benefit title header */
.benefit-title-header {
    background-color: var(--color-white);
    border-radius: 25px;
    margin-top: 20px;
    padding: 5px;
    margin: 30px;
    text-align: center;
    width: 70%;
    margin-left: 15%;
}

/* Style for the benefit title */
.benefit-title {
    font-size: 12px;
    color: var(--color-optimly-blue)
}

.benefit-container-value {
    font-size: 36px;
    color: var(--color-white);
    font-family: "InterVariable", sans-serif;
  font-weight: 450;
    padding: 20px 0;
    letter-spacing: 0.25px;
}

.regular-frequency-container {
    display: flex;
    flex-basis: calc((100% - 16px) *.475);
    gap: 10%;
}



.dropdown-container {
    position: relative;
    display: inline-block;
    width: 100%;
    /* padding-bottom: 16px; */
    /* border-bottom: 1px solid var(--color-optimly-white); */
}

/* Dropdown button */
.dropdown-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0px solid transparent;
    background-color: transparent;
    cursor: pointer;
    /* min-width: 400px; */
    color: var(--color-optimly-blue);
    text-align: left;
    white-space: nowrap;
}

/* Dropdown menu */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    min-width:  400px;
    width: fit-content;
    padding: 0;
    margin: 0;
    list-style: none;
    z-index: 10;
    display: none; /* Hidden by default */
    z-index: 99;
    
}

.dropdown-menu {
    display: block; /* Always block so height can transition */
    max-height: 0; /* Start with zero height */
    overflow: hidden;
    transition: max-height 1s ease;
    opacity: 0;
}

.dropdown-menu.show {
    max-height: 688px; /* Set a maximum height that is larger than the content */
    opacity: 1; /* Make it visible */
    padding: 0 10px 10px 10px;
    overflow-y: auto;
    margin-top: -10px;
}

.dropdown-menu li {
    padding: 10px;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.dropdown-menu li:hover {
    background-color: #e6f7ff7c; /* Highlight the selected item */
}

.dropdown-menu li a {
    text-decoration: none;
    color: var(--color-optimly-blue);
    flex-grow: 1;
}

/* Tick icon for selected option */
.dropdown-menu li.selected::after {
    content: '✔'; /* Unicode for tick */
    color: #28a745;
    margin-left: 8px;
    font-size: 14px;
}

/* Show dropdown menu */
.dropdown-container.open .dropdown-menu {
    display: block;
}

.chevron-blue-calculator2 {
    transform: rotate(-90deg); /* Rotate 90 degrees */
    transition: all 0.5s ease-in-out;
}

.chevron-blue-calculator2.rotateChevron2 {
    transform: rotate(90deg); /* Rotate 90 degrees */
}

/* Dropdown menu styles */
.dropdown-items {
    padding: 0;
}
.dropdown-menu li {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 500;
    cursor: pointer;
    font-size: 14.5px;
    line-height: 24px;
}

.dropdown-heading {
    font-family: "InterVariable", sans-serif;
    font-weight: 600;
    font-size: 14px;
    margin-top: 0px;
    padding: 15px 10px;
    color: var(--color-optimly-mid-grey);
    pointer-events: none; /* Makes it non-clickable */
    text-transform: capitalize;
    margin-top: 10px;
    background-color: #f5f5f5;
    margin-bottom: 10px;
}

.dropdown-menu li.selected {
    background-color: #e6f7ff; /* Highlight the selected item */
    font-weight: bold;
}

.dropdown-menu li.selected::after {
    content: '✔'; /* Add a tick */
    color: #28a745;
    font-size: 14px;
    margin-left: 8px;
}

.reset-button-inline-container2 {
    width: 100%;
    margin-top: 28px;
    justify-content: flex-end;
    display: flex;
}

/* Search bar styling */
.dropdown-search {
    margin: 10px 0;
    padding: 10px 5px 20px 5px;
    border-bottom: 1px solid #ddd;
}

.search-input {
    width: 100%;
    padding: 8px;
    height: 40px;
    border: 1px solid var(--color-optimly-lighter-grey);
    border-radius: 4px;
    font-size: 16px;
    box-sizing: border-box;
}

.search-input:focus {
    border: 1px solid #02a4ea; /* Change border to blue when focused */
    outline: none; /* Remove the default focus outline */
}

    /* General row styles */
    .styled-row {
        position: relative;
        padding-top: 0px;
        padding-bottom: 0px;
    }
    
    /* Styling for the first row */
    .first-row {
        border-top: none;
        padding-top: 0px;
        padding-bottom: 00px;
    }

        /* Border styles for rows */
    .styled-row-border {
        width: 85%; /* Adjust to desired percentage */
        border-top: 0px solid #02a4ea; /* Border color and style */
        position: absolute;
        left: 50%;
        transform: translateX(-50%); /* Center align */
        top: 0; /* Align at the top of the row content */
    }

    
    /* Styling for the first row */
    .first-container {
        border-top: none;
        padding-top: 10px;
        padding-bottom: 0px;
    }

    .styled-container {
        position: relative;
        padding-top: 80px;
        padding-bottom: 0px;
    }

    .styled-container-border {
        width: 50%; /* Adjust to desired percentage */
        margin-top: 30px;
        border-top: 0px solid #02a4ea; /* Border color and style */
        border-top: 1px solid #BEBEBE; /* Border color and style */
        position: absolute;
        left: 50%;
        transform: translateX(-50%); /* Center align */
        top: 0; /* Align at the top of the row content */
    }



    .calculator-action-container,
    .calculator-action-container.amount-input {
        display: flex;
        gap: 16px;
        justify-content: flex-end;
        width: calc((100% - 16px) * .475);
    }
    

    .calculator-box.two.expected-return {
        flex-basis: calc(100% - 45px - 8px);
    }

    .calculator-box.two.frequency-dropdown {
        flex-basis: calc(30%);

    }

    
    .calculator-box.two.delete-button {
        flex-basis: 0%;
    }
    
    #add-investment-title{
        margin-bottom: 8px
    }
    
    
    .calculator-default-container {
        position: relative;
        display: flex;
        justify-content: flex-end;
        padding: 0;
        margin-top: 8px;
        align-items: center;        
    }

    .calculator-box.two.toggle-button {
        width: 100px;
        flex-basis: calc((100% - 16px) *.1);
        align-items: right;
        justify-content: right;
        z-index: 2;
        flex-direction: column;
        text-align: left;
        margin-top: 1px;
    }
    
    .calculator-input-row-2-addInvestment {
        background-color: transparent;
    }

    .summary-row {
        font-weight: bold;
        text-align: center;
    }

    .ammortisation-table .income-tax-table-header-1,
    .ammortisation-table .income-tax-table-header,
    .income-tax-table-header-1,
    .income-tax-table-header {
        text-align: left;
        font-weight: bold;
        text-transform: uppercase;
        padding: 30px 0 15px 0;
    }

    .ammortisation-table .income-tax-table-header,
    .income-tax-table-header {
        padding: 40px 0 15px 0;
    }

@media screen and (max-width: 900px) {
    .showOn900 {
        display: none;
    }

    .hideOn900 {
        display: block;
    }
}

@media screen and (max-width: 800px) {

    .calculator-box-container, .faq-box-container, .calculator-box-container.ammortisation-table {
        margin: 15px 0 0 0;
        }

    .calculator-accordian, .guide-accordian, .calculator-faq {        
        margin: 12px 0 0px 0;
        padding: 0;
        width: 100%;
        transition: all 0.3s ease-in-out;
        border-radius: 0px;
        border: 0px solid var(--color-optimly-white);
        
        border-top: 1px solid var(--color-optimly-white);
        border-bottom: 1px solid var(--color-optimly-white);
        
        }

    .calculator-input-row-2-wrap {
        display: flex;
        flex-direction: column;
        gap: 26px;
        margin: 0;
    }

    .calculator-input-row-3 {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100%;
        gap: 16px 0;
        margin: 0;
        z-index: 2;
    }

    .calculator-box.apr,
    .calculator-box.three,
    .calculator-box.four,
    .calculator-box.five,
    .calculator-box.six {
        flex-basis: calc(100% *1);
    }

    .calculator-box.apr {
        margin-top: 25px;
    }

    .calculator-box.six {
        margin-top: 32px;
    }

    #toggleTableButton {
        min-width: auto;
    }

    .cashflow-input label,
    .prize-input label {
        display: none
    }

    .title-row {
        display: block;
        display: flex;
        width: 100%;
        justify-content: space-between;
        height: 25px;
        margin-bottom: -10px;
        align-items: left;
        justify-content: centstarter;
        font-size: 14px;
        font-family: "InterVariable", sans-serif;
        font-weight: 450;
        gap: 0px
    }

    .title-row-column1 {
        width: 50%;
        margin-right: 0;
    }

    .title-row-column2 {
        width: 50%;
        margin-right: 2vw;
    }

    .sub-hero-subtext.calculator {
        margin-bottom: 20px;
    }

    .title-row-column3,
    .title-row-column4 {
        color: var(--color-white);
        background-color: transparent;
    }

    .calculator-input-icon.large {
        max-width: 5%;
    }

    .icon-gbp-blue-svg.large {
        height: 16px;
        margin-left: 2vw;
    }

    .icon-empty-bed-svg {
        height: 22px;
        margin-left: 5px
    }

    .cashflow-button-container {
        display: inline-flex;
        justify-content: flex-start;
        gap: 8px;
        z-index: 3;
        width: 100%;
        margin: 0;
        margin-top: 15px;
    }

    .calculator-icon-input-container.no-margin {
        margin-right: 0;
        width: 60%;
    }

    .select-button-container-master,
    .select-button-container-master2 {
        gap: 8px;
        justify-content: flex-end;
        width: 100%;
        display: flex;
        margin: 0px 0 0 0;
        z-index: 2;
    }

    .select-button-container,
    .select-button-container2,
    .guides-button-container {
        gap: 8px;
        justify-content: flex-end;
        width: 100%;
        display: flex;
        z-index: 2;
    }

    .calculator-result-container {
        margin-top: 0px;
        padding: 22px 16px 32px 16px;
    }

    .calculator-input-icon,
    .calculator-input-icon.large {
        min-width: 40px;
    }

    .resultLargeNumbers {
        font-size: 36px;
        font-family: "InterVariable", sans-serif;
    }

    .resultNumber-box-title {
        line-height: 40px;
    }

    .icon-empty-bed-svg {
        height: 24px;
        margin-left: 5px
    }

    .show-date-on-mobile {
        display: flex
    }

    .show-on-mobile {
        display: table-cell;
    }

    .hide-date-on-mobile,
    .hide-on-mobile,
    .hide-on-mobile-auto {
        display: none
    }

    /* .calculator-box.one,
    .calculator-box.two,
    .calculator-box.control-buttons,
    .calculator-box.add-remove-top-input {
        flex-basis: calc((100% - 0px) * 1);
    } */


    .calculator-box.small {
        flex-basis: calc((100% - 16px) *.6);
    }

    .calculator-box.very-small {
        flex-basis: calc((100% - 16px) *.4);
    }

    .result-table-row-figure {
        font-size: 22px;
        font-weight: 400;
        white-space: nowrap;
    }

    .icon-target-svg {
        margin-left: 0.2em;
    }


    .select-button-container2,
    .guides-button-container,
    .button-inline-container,
    .button-inline-container2 {
        margin-top: 10px;  /* check weighted average page if changing */
        margin-bottom: 25px;
    }

    .button-inline-container.bespoke {
        margin: 25px 0;
    }

    .control-button-inline-container {
        margin: 0 0 10px 0;
    }

    .cashflow-input input[type="date"],
    .cashflow-input input[type="text"],
    .cashflow-input input[type="number"],
    .prize-input input[type="date"],
    .prize-input input[type="text"],
    .prize-input input[type="number"],
    .title-row-column1,
    .title-row-column2 .title-row-column3,
    .title-row-column4 {
        margin-right: 2vw;
    }

   


    .deleteButton,
    .deleteButtonIcon,
    .title-row-column4 {
        margin-right: 0;
    }

    .cashflow-input,
    .prize-input {
        margin: 15px 0;
        height: 40px;
    }

    .cashflow-input,
    .prize-input {
        margin: 15px 0 20px 0;
    }

    .accordian-row-container {
        position: relative;
        justify-content: flex-end;
        width: 100%;
        margin-top: -12px;
}
}

@media screen and (max-width: 600px) {

    .calculator-submit,
    .modal-submit {
        margin: 16px 0;
    }

    .calculator-box.one,
    .calculator-box.two,
    .calculator-action-container2,
    .calculator-box.frequency,
    .calculator-box.control-buttons,
    .calculator-box.add-remove-top-input {
        flex-basis: calc((100% - 0px) * 1);
    }

    .calculator-box.new-amount-input {
        flex-basis: 65%;
    }

    .calculator-box.new-month-input {
        flex-basis: 35%;
    }

    .cashflow-button-container-master {
        margin-bottom: 0px;
    }


    .button-inline-container,
    .button-inline-container2, 
    .reset-button-inline-container, 
    .reset-button-inline-container2, 
    .control-button-inline-container {
        width: 75%;
    }

    .last-box {
        margin-bottom: 20px;
    }

    .percentage-growth {
        width: 140px
    }

    /* check mortgage modeller advanced */
    .calculator-button.expand-button {
        width: calc(100%);
    }

    .calculator-button.reset-button-half {
        width: calc(50%);
    }

    .calculator-box.reset {
        flex-basis: calc((100% - 22px) *.5);
        }

    .calculator-input-divider {
        height: 0px;
        width: 100%;
        display: block;
    }

    .master-results-container {
        flex-direction: column;
    }

    .resultNumber-container,
    .resultNumber-container-row2 {
        margin-top: 25px;
        flex-direction: column;
        gap: 20px;
    }

    .resultNumber-container-row2 {
        margin-top: 10px;
    }

    .resultNumber-container2 {
        margin-top: -10px;
        margin-bottom: 40px;
    }


    .button-inline-container2 {
        margin-top: 10px
    }

    .mobile-column-reverse {
        display: flex;
        flex-direction: column-reverse;
    }



    .section-header-calculator {
        margin-bottom: 20px;
        margin-top: 0;
    }


    .calculator-input-row-1,
    .calculator-input-row-2,
    .calculator-input-row-last,
    .calculator-input-row-2-wrap,
    .calculator-input-row-4,
    .calculator-input-row-A,
    .calculator-input-row-B,
    .calculator-input-row-C,
    .calculator-input-row-new-input,
    .calculator-input-row-new-single-input,
    .calculator-input-row-input,
    .calculator-input-row-new-prize-input,
    .calculator-input-row-new-regular-input,
    .calculator-input-row-new-aer-input,
    .calculator-input-row-only {
        gap: 0;
        margin: 0;
        z-index: 2;
    }

    .calculator-input-row-only {
        margin: 0 0 16px 0;
    }

    .calculator-input-row-1,
    .calculator-input-row-2,
    .calculator-input-row-last,
    .calculator-input-row-2-wrap,
    .calculator-input-row-4,
    .calculator-input-row-A,
    .calculator-input-row-B,
    .calculator-input-row-C
    .calculator-input-row-only {
        display: block;
    }

    .calculator-input-row-A,
    .calculator-input-row-B,
    .calculator-input-row-C {
        margin: 0;
    }

    .calculator-input-row-new-input,
    .calculator-input-row-input,
    .calculator-input-row-new-single-input,
    .calculator-input-row-new-prize-input,
    .calculator-input-row-new-regular-input,
    .calculator-input-row-new-aer-input {
        margin: -20px 0 0 0;
        /* gap: 0px; */
    }

    .calculator-input-row-last {
        margin-bottom: 16px
    }

    .calculator-box.two,
    .calculator-action-container2,
    .calculator-box.frequency,
    .calculator-box.control-buttons,
    .calculator-box-100,
    .calculator-box.new-amount-input,
    .calculator-box.new-month-input,
    .calculator-box.six,
    .calculator-box.small,
    .calculator-box.very-small {
        margin-top: 25px;
    }

    .calculator-box.control-buttons {
        margin-top: 5.5px;
    }



    .calculator-box.add-remove-top-input {
        margin-top: 60px;
    }

    .calculator-box.three,
    .calculator-box.four,
    .calculator-box.five {
        margin: 10px 0 0px 0;
    }

    .calculator-box.five {
        margin: 10px 0 16px 0;
    }

    .reset-button-inline-container, /* check mortgage modeller reset button in mobile */
    .reset-button-inline-container2 {
        margin: 20px 0 5px 0;
    }

    .calculator-button.reset-button,
    .calculator-button.reset-button-half {
        width: calc(100%);
    }

    .calculator-box.container,
    .calculator-box.container2 {
    flex-basis: calc((100% - 8px) *.499);
    gap: 8px;
}

    /* .calculator-input-box {
        border-left: 1px solid var(--color-optimly-lighter-grey)
    } */


    /* .input-title.static {
    min-width: 200px;
    } */

    .input-title-column-span {
        margin-top: 0px;
    }

    .title-row {
        height: 40px;
        margin-bottom: -10px;
        align-items: left;
        justify-content: centstarter;
        font-size: 14px;
        font-family: "InterVariable", sans-serif;
        font-weight: 450;
    }


    .title-row-column1,
    .title-row-column2 {
        margin-top: 15px;
    }

    .accordian-reset-button-container{
        padding: 6px 0;
        margin: 0;
        width: 45px;
        right: 6vw;
    }

    .icon-reload-svg {
        width: 17px;
        }

    .calculator-button,
    .color-button,
    .contributionButton,
    .withdrawalButton,
    .deleteButton,
    .deleteButtonIcon,
    .contributionButton-blank,
    .title-row-column3,
    .title-row-column4 {
        font-size: 12px;
        padding: 0px 2px;
    }

    .calculator-button.overpayment-button {
        width: calc(33% - 4px);
        z-index: 3;
    }

    /* .calculator-button.frequency-button,
    .calculator-button.general-button,
    .calculator-button.frequency-day {
        width: calc(25% - 4px);
        padding: 8px 4px;
    } */

    .calculator-button.general-button {
        border-radius: 4px;
        height: 40px;
    }

    .calculator-general-button-container {
        margin: 10px 0 -10px 0;
    }

    /* .calculator-button.general-button {
        height: 35px;
    } */

    /* .cashflow-input input[type="date"],
    .cashflow-input input[type="text"],
    .cashflow-input input[type="number"],
    .prize-input input[type="date"],
    .prize-input input[type="text"],
    .prize-input input[type="number"] {
        width: 100%;
        margin-right: 2vw;
        padding: 8px 5px;
        font-size: 16px;
    } */

    .contributionButton,
    .withdrawalButton,
    .contributionButton.unselected, 
    .prizeButton,
    .deleteButtonIcon,
    .title-row-column3,
    .title-row-column4 .contributionButton-blank {
        min-width: 90px;
        max-width: 90px;
        width: auto;
        padding: 8px 2px;
        font-size: 14px;
    }

    .deleteButton,
    .title-row-column4 {
        width: auto;
        min-width: 60px;
    }

    #initialInvestment,
    #currentValuation {
        padding-right: 15px;
        font-size: 14px;
        letter-spacing: -0.125px;
    }

    .results-container {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }


    .select-button-container-master,
    .select-button-container-master2 {
        gap: 8px;
        /* flex-direction: column; */
        /* margin-bottom: 25px */
    }

    

    .hide-on-narrow {
        display: none;
    }

    .show-on-narrow {
        display: table-cell;
    }

    .show-when-600 {
        display: flex;
    }

    .hide-when-600 {
        display: none
    }

    .modal-row-container-switch {
        flex-direction: column;
    }
    .color-change-button-container {
        width: 100%;
        margin: 12px 0;
        }
    .color-button {
        width: 100%;
    }

    .calculator-input-row-new-single-input,
    .calculator-input-row-new-prize-input,
    .calculator-input-row-new-regular-input,
    .calculator-input-row-new-aer-input,
    .calculator-input-row-input {
        display: flex;
        flex-direction: column;
        gap: 16px; /* do not remove. check single overpayment in fixed rate loan overpay advanced */
    }

    .calculator-input-row-input {
        gap: 0px;
    }
    

    .full-text {
        display: none;
    }

    .abbr-text {
        display: inline;
    }

    .calculator-input-row-new-single-input, .calculator-input-row-new-prize-input, .calculator-input-row-new-regular-input, .calculator-input-row-new-aer-input {
        margin-bottom: 32px
    } 

    /* General row styles */
.styled-row {
    position: relative;
    padding-top: 10px;
    padding-bottom: 20px;
}

/* Styling for the first row */
.first-row {
    border-top: none;
    padding-bottom: 15px;
}

/* Border styles for rows */
.styled-row-border {
    width: 15%; /* Adjust to desired percentage */
    border-top: 1px solid var(--color-optimly-lighter-grey); /* Border color and style */
    position: absolute;
    left: 5%;
    transform: translateX(-50%); /* Center align */
    top: 0; /* Align at the top of the row content */
}

.search-input {
    font-size: 16px;
}


.first-container {
    padding-top: 0px;
}

}

@media screen and (max-width: 500px) {

    .table-cell-header-width {
        width: calc(100% / 5)
    }

    .show-mobile,
    .show-on-mobile,
    .show-cell-on-mobile,
    .show-date,
    .show-min {
        display: table-cell
    }

    .calculator-box.two.last-box.hide-on-mobile,
    .hide-cell-on-mobile,
    .hide-on-mobile,
    .hide-on-mobile-auto,
    .hide-mobile,
    .hide-date,
    .hide-min .hide-when-400 {
        display: none
    }

    
}


@media screen and (max-width: 450px) {

    /* .cashflow-input input[type="date"],
    .cashflow-input input[type="text"],
    .cashflow-input input[type="number"],
    .prize-input input[type="date"],
    .prize-input input[type="text"],
    .prize-input input[type="number"],
    .contributionButton,
    .contributionButton-blank,
    .withdrawalButton,
    .prizeButton {
        margin-right: 0;
    } */

    .calculator-box-container,
    .faq-box-container {
        margin: 20px 0 0 0;
    }

    .hide-when-400 {
        display: none
    }

    .calculator-result-header {
        margin: 5px 0px 20px 0px;
    }

    .calculator-input-row-Z {
        margin: -20px 0 0 0;
    }


    .premium-bond-master-container {
        flex-direction: column;
        margin: 10px 0 10px 0;
    }

    .chevron-blue-calculator,
    .chevron-blue-calculator-small {
        width: 15px;
        height: 15px;
    }

    .calculator-box.three,
    .calculator-box.four,
    .calculator-box.five {
        margin: 10px 0 0px 0;
    }

    .calculator-box.five {
        margin: 10px 0 16px 0;
    }

    .calculator-button.frequency-button,
    .calculator-button.frequency-day,
    .calculator-button frequency-button2 {
        width: calc(25% - 4px);
        padding: 8px 4px;
    }

    #prizeDate {
        letter-spacing: -0.5px;
    }


    .faq-li {
        padding: 10px 0 10px 0
    }

    .faq-li-first {
        padding: 10px 0 10px 0;
        margin-top: 0;
    }

    .faq-li-last {
        padding: 10px 0 0 0
    }


    /* .calculator-input-row-new-input,
    .calculator-input-row-new-single-input,
    .calculator-input-row-new-prize-input,
    .calculator-input-row-new-regular-input,
    .calculator-input-row-new-aer-input {
        margin: -16px 0 16px 0;
        gap: 8px;
    } */

    .calculator-box.new-amount-input {
        flex-basis: 70%;
    }

    .calculator-box.new-month-input {
        flex-basis: 30%;
    }


.calculator-icon-input-container:focus-within,
.calculator-input-box.frequency-day:focus-within {
    border: 1.4px solid var(--color-optimly-light-blue);
}


.calculator-icon-input-container.error,
.calculator-icon-input-container.error2,
.calculator-button.frequency-button.error,
.calculator-button.frequency-button2.error
{
    border: 1.4px solid red;
}

.dropdown-menu.show {
    max-height: 422px;
    
    }


    .icon-calendar-svg, .icon-calendar-blue-svg {
        height: 18px;
        }

        .accordian-row-container {
            margin-top: -22px;
    }        

}

@media screen and (max-width: 450px)

/* INPUT FONT SIZES FOR MOBILE. PREVENTS ZOOM */
    {
    .calculator-input-box,
    .calculator-input-box2,
    .cashflow-input input[type="text"],
    .cashflow-input input[type="number"],
    .prize-input input[type="text"],
    .prize-input input[type="number"] {
        font-size: 16px;
        min-width: 104px;
    }

    .calculator-input-box.investment-growth {
        min-width: 0px;
    }

    .cashflow-amount.calculator-input-box {
        min-width: 88px;
    }

    .calculator-input-box.dropdown {
        font-size: 15px;
    }


    .cashflow-input input[type="date"],
    .prize-input input[type="date"] {
        font-size: 14px;
    }

    .input-box-slider-container {
        width: calc(100% + 18vw);
        padding: 0 2vw;
        justify-content: center;
        align-items: center;
        display: flex;
        border-radius: 0 3px 3px 0;;
        background-color: white;
        border-left: 1px solid var(--color-optimly-lighter-grey);
        z-index: 2;
        margin: 10px 0;
    }
    
    .calculator-input-box::placeholder,
    .calculator-input-box2::placeholder,
    #prizeAmount::placeholder,
    #cashflowAmount::placeholder {
        font-size: 15px;
        padding-right: 0px;
        font-family: "InterVariable", sans-serif;
        font-weight: 350;
    }

    .calculator-button,
    .color-button {
        font-size: 14px;
    }

    .contributionButton,
    .withdrawalButton,
    .deleteButton,
    .contributionButton-blank,
    .title-row-column3,
    .title-row-column4 {
        font-size: 14px;
    }

    .accordian-row-container {
        gap: 8px;
    }

    .input-box-slider-container {
        padding: 0 4vw;
    }


    .calculator-input-icon.reduce-on-mobile {
        min-width: 10px;        
    }

    .calculator-input-box.cashflow-date {
        text-align: right;
        justify-content: flex-end;        
    }

}


@media screen and (max-width: 350px) {

    .result-table-row {
        height: 40px;
        font-size: 12px;
        line-height: 26px;
        font-family: "InterVariable", sans-serif;
        font-weight: 450;
        letter-spacing: -0.125px;
    }

    .result-table-row-figure {
        font-size: 18px;
        margin: 0 5px;
    }
}
/* WATERMARK */

/* .calculator-input-watermark {width: 900px;height: 900px; border-radius: 100%; position: absolute;border: 250px solid rgba(236, 8, 8, 0.918);z-index: 0;}
.calculator-input-watermark.sub-hero {top: -25px; left: -13%;border: 250px solid rgba(238, 10, 10, 0.92);} */

.calculator-input-watermark.sub-hero {top: 15px; left: -13%;border: 250px solid rgba(0, 0, 0, 0);}
.calculator-input-watermark {width: 900px;height: 900px; border-radius: 100%; position: absolute;border: 250px solid rgba(0, 0, 0, 0.02);z-index: 0;}

/* .calculator-input-watermark {width: 900px;height: 900px; border-radius: 100%; position: absolute;border: 250px solid rgba(244, 11, 11, 0.942);z-index: 0;}
.calculator-input-watermark.sub-hero {top: 30px; left: -13%;border: 250px solid rgba(235, 6, 6, 0.925);} */
.calculator-input-watermark.one {top: -375px; left: -13.1%;}
/* .calculator-input-watermark.one.child-benefit {top: -320px; left: -13.1%;} */
.calculator-input-watermark.one.savings-goal {top: -328px; left: -13.1%;}
.calculator-input-watermark.one.compare-two-mortgages {top: -320px; left: -13.1%;}
.calculator-input-watermark.one.aer-gross {top: -375px; left: -13.1%;}
.calculator-input-watermark.one.weighted-return {top: -375px; left: -13.1%;}
.calculator-input-watermark.one.stamp-duty {top: -400px; left: -13.1%;}
.calculator-input-watermark.one.stamp-duty {top: -375px; left: -13.1%;}
.calculator-input-watermark.one.personal-loan {top: -345px; left: -13.1%;}
.calculator-input-watermark.one.life-expectancy {top: -345px; left: -13.1%;}
.calculator-input-watermark.one.mmp {top: -375px; left: -13.1%;}
.calculator-input-watermark.one.sga {top: -375px; left: -13.1%;}
.calculator-input-watermark.one.state-ra {top: -345px; left: -13.1%;}
.calculator-input-watermark.one.future-value {top: -375px; left: -13.1%;}

.calculator-input-watermark.two {top: -690px;left: -13%;}
.calculator-input-watermark.two.rror {top: -655px;left: -13%;}
.calculator-input-watermark.two.cc-overpay {top: -690px;left: -13%;}
.calculator-input-watermark.two.lisa-growth {top: -795px;left: -13%;}
.calculator-input-watermark.two.mmp {top: -590px; left: -13.1%;}
.calculator-input-watermark.two.personal-loan {top: -690px; left: -13.1%;}
.calculator-input-watermark.two.save-grow {top: -450px; left: -13.1%;}
.calculator-input-watermark.two.pfa {top: -735px; left: -13.1%;}
.calculator-input-watermark.two.mop {top: -860px; left: -13.1%;}
.calculator-input-watermark.two.iga {top: -795px; left: -13.1%;}
.calculator-input-watermark.two.sga {top: -795px; left: -13.1%;}
.calculator-input-watermark.two.moa {top: -960px; left: -13.1%;}
.calculator-input-watermark.two.pension-forecast {top: -745px; left: -13.1%;}

.calculator-input-watermark.three.mwrr {top: -645px;left: -13%;}
.calculator-input-watermark.three {top: -415px;left: -13%;}
.calculator-input-watermark.three.premium-bonds {top: -755px;left: -13%;}
.calculator-input-watermark.three.compare-two-mortgages {top: -900px;left: -13%;}
.calculator-input-watermark.three.cc-overpay {top: -755px;left: -13%;}
.calculator-input-watermark.three.mwrr {top: -750px;left: -13%;}
.calculator-input-watermark.three.frl {top: -760px;left: -13%;}
.calculator-input-watermark.three.pfa {top: -960px;left: -13%;}
.calculator-input-watermark.three.moa {top: -960px; left: -13.1%;}
.calculator-input-watermark.three.iga {top: -860px; left: -13.1%;}
.calculator-input-watermark.three.sga {top: -860px; left: -13.1%;}
.calculator-input-watermark.three.personal-loan  {top: -755px;left: -13%;}
.calculator-input-watermark.three.save-grow {top: -520px;left: -13%;}

.calculator-input-watermark.four {top: -825px;left: -13%;}
.calculator-input-watermark.two {transition: transform 0.35s ease;}

/* @media screen and (max-width: 982px) {.calculator-input-watermark.one {top: -374px;} .calculator-input-watermark.two {top: -669px;}} */
/* @media screen and (max-width: 1000px) {.calculator-input-watermark.sub-hero {top: 30px;} .calculator-input-watermark.one {top: -346px;} .calculator-input-watermark.two {top: -665px;}}*/
@media screen and (max-width: 800px) {.calculator-input-watermark.sub-hero {display: none;} .calculator-input-watermark.one {display: none;} .calculator-input-watermark.two {display: none;} .calculator-input-watermark.three {display: none;} .calculator-input-watermark.four {display: none;}} 
@media screen and (max-width: 450px) {.calculator-input-watermark.sub-hero {display: none;} .calculator-input-watermark.one {display: none;} .calculator-input-watermark.two {display: none;} .calculator-input-watermark.three {display: none;} .calculator-input-watermark.four {display: none;}} 
/* @media screen and (max-width: 656px) {.calculator-input-watermark.one {top: -295px;} .calculator-input-watermark.two {top: -595px;} } */
/* @media screen and (max-width: 520px) {.calculator-input-watermark.one {top: -340px;} .calculator-input-watermark.two {top: -640px;}}
@media screen and (max-width: 511px) {.calculator-input-watermark.one {top: -370px;} .calculator-input-watermark.two {top: -665px;}} */
/* @media screen and (max-width: 450px) {.calculator-input-watermark.one {top: -312px;} .calculator-input-watermark.two {top: -745px;} .calculator-input-watermark.sub-hero {top: 155px;}} */
/*@media screen and (max-width: 400px) {.calculator-input-watermark.one {top: -330px;} .calculator-input-watermark.two {top: -760px;}}
@media screen and (max-width: 320px) {.calculator-input-watermark.one {top: -340px;} .calculator-input-watermark.two {top: -770px;}} */






@media screen and (max-width: 900px) {
    .benefit-container-text {
        font-size: 13px;
        color: var(--color-white);
        max-width: 90%;
        transform: translate(5%, 0%);
        text-align: center;
        line-height: 20px;
    }
}

@media screen and (max-width: 750px) {
    .results-container {
        flex-direction: column;
        gap: 16px;
        margin-top: 0px;
    }

    .benefit-container-text {
        margin: 10px 0 30px 0;
        line-height: 26px;
        font-size: 15px;
        display: flex;
        text-align: left;
        color: var(--color-white);
        max-width: 100%;
        transform: translate(0%, 0%);
    }

    .calculator-result-container.reverse {
        background: linear-gradient(136deg, var(--color-optimly-main-blue) 0%, var(--color-optimly-light-blue) 100%);
        transition: all 0.5s ease;
    }


    .overpayment-calcualtions {
        margin: 0;
    }

    .benefit-container {
        border: 1px solid rgba(255, 255, 255, 1);
        padding: 10px;
        width: 100%;
        border-radius: 10px;
        background: linear-gradient(136deg, var(--color-optimly-main-blue) 0%, var(--color-optimly-light-blue) 100%);
    }

    .results-container.overpayment {
        display: flex;
        transition: all 0.5s ease;
    }

    .overpayment-calcualtions {
        display: none;
        transition: all 0.5s ease;
    }

    #position3-content {
        margin-top: 0px;

    }
}

  
@media screen and (max-width: 600px) {
.dropdown-menu {
    min-width: calc(100% - 32px);
    }
}





.calculatorResultContainer{
    display: flex;
    opacity: 1;
    flex-direction: column;
    transition: opacity 1s ease-in-out 0s;
    width: 100%;
    }
    
    /* .master-results-container {
        display: flex;
        flex-direction: row;
        width: 100%;
        gap: 16px;
    } */
    
    .amortisation-table-container {
        display: flex;
        flex-direction: row;
        width: 100%;
        gap: 5vw;   
    }
    

    #amortisation-1,
    #amortisation-2,
    #ammortisationTable1,
    #ammortisationTable2 {
        width: 100%
    }
    
    .yellow-row {
        background-color: var(--color-optimly-yellow);
    }
    
    .odd-row-green {
        background-color: white;
        border-bottom: 1px solid var(--color-optimly-green);
    }
    
    .even-row-green {
        background-color: #f9f9f9;
        border-bottom: 1px solid var(--color-optimly-green);
    }
    
    .pink-yellow-row {
        background-color: var(--color-optimly-yellow);
        border-bottom: 1px solid var(--color-optimly-green);
    }
    
    .rectangle {
        margin-top: 20px;
        }
    
        
    
    @media screen and (max-width: 800px) {
    .amortisation-table-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 80px;   
    }

    .hide-when-800 {
        display: none;
    }
    }
    

    
    @media screen and (max-width: 800px) {
        .input-title {
            white-space: nowrap;
        }
    
        /* .calculator-box.two.delete-button {
            display: none;
        } */
    
        .calculator-box.two.expected-return,
        .calculator-box.two.new-month-input {
            margin: 0px
        }
    
        #additionalCashFlows,
        #premiumBondPrizeHistory {
            margin-top: 0px
        }

        .calculator-input-row-new-single-input,
        .calculator-input-row-new-regular-input,
        .calculator-input-row-new-prize-input,
        .calculator-input-row-new-aer-input,
        .calculator-input-row-input {
            /* padding: 0 0 20px 0; */
            margin: 0 0 20px 0
        }

        .calculator-input-row-input {
            margin: 0;
        }

        .calculator-box.two.delete-button {
            margin-top: 0px
        }
    
    }
    
    @media screen and (max-width: 600px) {

        .calculator-action-container.amount-input {
            margin-top: 15px;
        }
    
        .calculator-input-row-2-addInvestment {
            margin: 0 0 8px 0;
            gap: 16px;
        }
    
        .input-title.buttonContainer {
            padding-bottom: 10px;
        }
    
    
        .calculator-action-container,
        .calculator-action-container.amount-input {
            display: flex;
            flex-direction: row;
            gap: 8px;
            width: 100%;
            align-items: baseline;
        }
    }
    
    @media screen and (max-width: 423px) {    
    
    
        #investmentHistory {
            background-color: var(--color-optimly-white);
            padding: 8px 0
        }
    
        .calculator-input-row-2-addInvestment {
            gap: 0px;
            width: 100%;
            flex-direction: column;
            padding: 10px;
        }
    


    
    }