:root {
    --orange: #A15400;
    /*    --orange: #e67800; #8A4800;B86000
*/
    --petrol: #2f3045;
    --dark-petrol: #272539;
    --cream: #f4eede;
    --secondary-dark-petrol: #272539;
    --secondary-dark-grey: #1d1d1b;
    --secondary-mid-grey: #333331;
    --secondary-pale-purple: #ebeaf1;
    --secondary-light-purple: #d6d4e2;
    --secondary-mid-purple: #d0cbde;
    --purple: #91388c;
    --light-purple: #d6d4e2;
    --pale-purple: #ebeaf1;
    --validation: #dd0303;
    --background: #f8f8f9;
    --green: #007A64;
    --body-background: #2f3045;
    --background-image: url('../i/ipp/pattern-bg-white.svg');
    --footer-background: #2f3045;
    --brand-logo: url('../i/ipp/main-logo-reversed.png');
}

.brand-logo {
    background-image: var(--brand-logo);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 200px !important;
    height: 107px !important;
    display: none;
}


html {
    height: 100%;
}

body {
    font-family: 'Santral-family', Arial, sans-serif;
    background-color: var(--body-background);
    color: #FFFFFF;
    background-image: var(--background-image);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.spnmodal {
    display: none;
    position: fixed;
    z-index: 2000000002;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(256,256,256); /* Fallback color */
    background-color: rgba(256,256,256,0.95);
}

/* Modal Content */
.spnmodal-content {
    background-color: rgb(256,256,256); /* Fallback color */
    background-color: rgba(256,256,256,0);
    margin: auto;
    padding: 20px;
    border: none;
    width: 80%;
    color: #000;
}

/* The Close Button */
.spnclose {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

    .spnclose:hover,
    .spnclose:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
    }


.msgfadein {
    opacity: 0;
}

.msgfadein-o {
    opacity: 1;
    transition: opacity 2s ease-in-out;
    -webkit-transition: opacity 2s ease-in-out;
    -moz-transition: opacity 2s ease-in-out;
    -o-transition: opacity 2s ease-in-out;
}

.bold {
    font-size: 24px;
}



.modal-dialog {
    margin-top: 250px;
}

.dropdown-menu {
    z-index: 2000000010;
}


table, td, th {
    color: #FFFFFF;
}

.navbar-collapse {
    flex-grow: unset;
}

.form-control {
    color: #FFFFFF;
    border: solid 2px;
    border-radius: 25px;
    border-color: #FFFFFF;
    background-color: var(--petrol);
    padding-left: 1.2rem !important;
    padding-top: 1px !important;
    padding-bottom: 1px !important;
    height: 50px;
    font-weight: 500;
}

    .form-control:focus {
        border-width: 2px !important;
        border-color: var(--petrol) !important;
        box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.075), 0 0 0 rgba(0, 0, 0, 0.6) !important;
    }


.form-control-white {
    color: var(--dark-petrol);
    border: solid 2px;
    border-radius: 5px;
    border-color: var(--light-purple);
    background-color: #FFFFFF;
}

    .form-control-white:focus {
        border-color: var(--light-purple) !important;
        background-color: var(--pale-purple) !important;
    }

.form-control-light form-control {
    color: var(--dark-petrol);
    border: solid 2px;
    border-radius: 5px;
    border-color: var(--light-purple);
    background-color: #FFFFFF;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-bottom: 20px;
}

.padded-split-row {
    padding-bottom: 10px;
}

.full-height {
    height: 100%;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

.iodropdownBox {
    height: 30px;
}

.card {
    margin-top: 0px;
    border: 0px;
    background-color: white;
}

.card-body {
    padding-left: 0px;
    padding-right: 0px;
}

.card-front {
    margin-top: 0px;
    border: 0px;
    background-color: white;
    color: black;
}

.card-shade {
    margin: 5px;
    border: 0px;
    background-color: white;
    color: black;
    border-radius: 20px;
    padding: 10px;
}

.valign {
    margin-top: auto;
    margin-bottom: auto;
    padding: 0px;
}

.table td, .table th {
    padding-left: 0px;
}

.nomargin {
    margin: 0px;
}

.row-fixedmargin {
    margin: 5px;
}

.card-warning {
    margin-top: 5px;
    border: 0px;
    background-color: orange;
}

.card-danger {
    margin-top: 5px;
    border: 0px;
    background-color: red;
}

.card-middle {
    margin-top: 0px;
    border: 0px;
    background-color: white;
}

.card-rear {
    margin-top: 0px;
    border: 0px;
    background-color: white;
}

.card-nav1 {
    margin-top: 5px;
    margin-bottom: 10px;
    border: none;
    background-color: #ffffff;
    border-radius: 20px;
}

.card-nav2 {
    margin-top: 5px;
    border: none;
    background-color: #ffffff;
    border-radius: 20px;
}

.card-nav3 {
    margin-top: 0px;
    border: 0px;
    background-color: #ffffff;
    border-radius: 20px;
}

.card-border {
    margin-top: 5px;
    padding: 10px;
    border: solid thin;
    background-color: #ffffff;
    border-radius: 5px;
}

.card-body-nopadding {
    padding: 0px;
}

.card-body-rear {
    padding-left: 0px;
    padding-right: 2px;
    padding-bottom: 0px;
    padding-top: 0px;
}

.col-nopadding {
    padding: 0px;
}

.nopadding {
    padding: 0px;
}

.border-card {
    margin-top: 0px;
    border: 1px solid #808080;
}

.icon-btn {
    width: 110px;
    height: 60px;
    padding: 5px;
}

a:hover {
    text-decoration: none;
}

.font-size20 {
    font-size: 20px;
}

.font-size24 {
    font-size: 24px;
}

.font-size30 {
    font-size: 30px;
}

.table-right {
    text-align: right;
}

.table-center {
    text-align: center;
}

.font-light {
    color: #ffffff !important;
}

.font-anchor-light {
    color: #ffffff;
}

    .font-anchor-light:hover {
        color: var(--orange);
    }

.font-nav1 {
    color: #009DBC;
}

.backcolor-red {
    background-color: red;
}

.backcolor-green {
    background-color: green;
}

.backcolor-orange {
    background-color: orange;
}

.border-right {
    border-right: 1px solid;
}

.small-text {
    font-size: 14px;
    line-height: 20px;
}

.large-text {
    font-size: 24px;
}

.extra-large-text {
    font-size: 30px;
}

.watermark {
    background-image: url(i/pattern-01.svg);
    background-repeat: no-repeat;
    background-position: right bottom;
}

.watermarkpensionpotential {
    background-image: url(i/pensionpotential.png);
    background-repeat: no-repeat;
    background-position: right bottom;
}

.transparent {
    background-color: transparent;
}

a.home {
    background: url(../i/psahomev2.png);
    width: 150px;
    text-indent: -9999px; /* hides the link text */
}

.blankbtn {
    border: none;
    background-color: white !important;
    color: black;
}

    .blankbtn:hover {
        color: blue;
    }


.box, .box_wideandtall, .box-red, .box-grey, .box-white, .box-white-wide, .box-white-red, .box-white-red-wide, .box-shallow, .box-red-shallow, .box-small, .box-lightblue, .box-wide, .box-red-wide, .box-lightblue-wide {
    position: relative;
    width: 160px;
    height: 160px;
    border: solid 1px #2D3081;
    overflow: hidden;
    white-space: nowrap;
    background-color: #2D3081;
    color: white;
    display: inline-flex;
    justify-content: center; /* center items vertically, in this case */
    align-items: center; /* center items horizontally, in this case */
    text-align: center;
    padding: 2px;
    font-size: 1.1rem;
}

.box_wideandtall {
    width: 300px;
    height: 250px;
    justify-content: center;
    margin: auto;
    display: grid;
    padding-top: 40px;
    padding-bottom: 40px;
}

.box:hover {
    background-color: lightblue;
    color: #2D3081;
}

.box-white:hover {
    background-color: lightblue;
    color: #2D3081;
}

.box-wide {
    width: 100%;
    height: 70px;
}

.box-red, .box-red-shallow, .box-red-wide {
    background-color: #AD0A40;
    color: white;
}

.box-grey {
    border: solid 2px #2D3081;
    background-color: lightgray;
    color: #2D3081 !important;
}

.box-white, .box-white-wide {
    border: solid 2px #2D3081;
    background-color: white;
    color: #2D3081 !important;
}

.box-white-wide {
    width: 100%;
    height: 70px;
}

.box-red-wide {
    width: 100%;
    height: 70px;
}

.box-lightblue, .box-lightblue-wide {
    border: solid 2px #009DBC;
    background-color: #009DBC;
    color: white !important;
}

.box-lightblue-wide {
    width: 100%;
    height: 70px;
}

.box-white-red, .box-white-red-wide {
    border: solid 2px #AD0A40;
    background-color: white;
    color: #AD0A40 !important;
}

.box-white-red-wide {
    width: 100%;
    height: 70px;
}

.box-shallow {
    height: 50px;
}

.box-red-shallow {
    height: 50px;
}


.box-small {
    height: 38px;
    width: 28px;
}

.box-child {
    background-color: darkgray;
    border: solid 1px darkgray;
}

.box-child-light {
    background-color: white;
    color: darkgray;
    border: solid 2px darkgray;
}

/*
    SITE BLUE var(--petrol)
    Green colour = var(--green) -- ANNUITY
    Burnt yellow = var(--orange) #FF8500 #ff8400 -- CASH
    Purple colour = var(--purple) #91388C --- DRAWDOWN

*/

.modal-content {
    margin-top: 200px;
    padding-left: 30px;
    padding-right: 30px;
}

.header-menu-fixed {
    position: fixed;
    z-index: 1000;
    top: 0px;
    left: 0px;
    width: 100%;
    margin-left: 0px;
    margin-right: 0px;
}

.modal-backdrop {
    z-index: 900;
}


/*.mr-auto {
    margin-right: 0px !important;
}
*/
.btn {
    font-size: 18px;
    padding-top: 7px;
    padding-left: 50px;
    padding-right: 50px;
    padding-bottom: 7px;
    margin-top: 5px;
    margin-bottom: 10px;
}

.btn-primary {
    background-color: var(--green);
    border-color: var(--green);
    border-radius: 25px;
    min-height: 50px;
}

    .btn-primary:hover {
        background-color: #99DCD1;
        border-color: #99DCD1;
        color: white;
    }

    .btn-primary:disabled {
        background-color: #99DCD1;
        border-color: #99DCD1;
        color: white;
    }

.btn-next {
    font-size: 20px;
    padding-bottom: 7px;
    padding-top: 7px;
}

.btn-primary-annuity {
    background-color: var(--green);
    border-color: var(--green);
    color: #FFFFFF;
    border-radius: 30px;
    margin: auto;
    margin-top: 10px;
}

    .btn-primary-annuity:hover {
        background-color: #FFFFFF;
        border-color: var(--green);
        color: var(--green);
        border-radius: 30px;
        margin: auto;
        margin-top: 10px;
    }

.btn-primary-cash {
    background-color: var(--orange);
    border-color: var(--orange);
    color: #FFFFFF;
    border-radius: 30px;
    margin: auto;
    margin-top: 10px;
}

    .btn-primary-cash:hover {
        background-color: #FFFFFF;
        border-color: var(--orange);
        color: var(--orange);
        border-radius: 30px;
        margin: auto;
        margin-top: 10px;
    }

.btn-primary-drawdown {
    background-color: var(--purple);
    border-color: var(--purple);
    color: #FFFFFF;
    border-radius: 30px;
    margin: auto;
    margin-top: 10px;
}

    .btn-primary-drawdown:hover {
        background-color: #FFFFFF;
        border-color: var(--purple);
        color: var(--purple);
        border-radius: 30px;
        margin: auto;
        margin-top: 10px;
    }

.btn-primary-mix {
    background-color: var(--petrol);
    border-color: var(--petrol);
    color: #FFFFFF;
    border-radius: 30px;
    margin: auto;
    margin-top: 10px;
}

    .btn-primary-mix:hover {
        background-color: #FFFFFF;
        border-color: var(--petrol);
        color: var(--dark-petrol);
        border-radius: 30px;
        margin: auto;
        margin-top: 10px;
    }

.btn-primary-blue {
    background-color: var(--petrol);
    border-color: var(--petrol);
    color: #FFFFFF;
    border-radius: 30px;
    margin: auto;
}

    .btn-primary-blue:hover {
        background-color: #FFFFFF;
        border-color: var(--petrol);
        color: var(--dark-petrol);
        border-radius: 30px;
        margin: auto;
    }

.btn-outline-primary {
    border-color: var(--green);
    color: var(--green);
    border-radius: 25px;
    min-height: 50px;
}

    .btn-outline-primary:hover {
        background-color: #99DCD1;
        border-color: #99DCD1;
        color: white;
    }

    .btn-outline-primary:disabled {
        background-color: #99DCD1;
        border-color: #99DCD1;
        color: white;
    }



.btn-outline:hover {
    background-color: #99DCD1;
    border-color: #99DCD1;
    color: white;
}

.btn-primary-rounded {
    background-color: var(--green);
    border-color: var(--green);
    border-radius: 25px;
    text-align: center;
    margin: auto;
    color: white;
    min-height: 50px;
}

    .btn-primary-rounded:hover {
        background-color: #99DCD1;
        border-color: #99DCD1;
        color: white;
    }

.btn-primary-outline-rounded {
    background-color: #ffffff;
    border-color: var(--green);
    border-radius: 25px;
    min-height: 50px;
    text-align: center;
    margin: auto;
    color: var(--green);
}

    .btn-primary-outline-rounded:hover {
        background-color: #99DCD1;
        border-color: #99DCD1;
        color: white;
    }


.btn-primary-rounded-purple {
    background-color: var(--purple);
    border-color: var(--purple);
    border-radius: 25px;
    text-align: center;
    margin: auto;
    color: white;
    min-height: 50px;
}

    .btn-primary-rounded-purple:hover {
        background-color: #99DCD1;
        border-color: #99DCD1;
        color: white;
    }

.btn-danger {
    background-color: var(--green);
    border-color: var(--green);
    border-radius: 25px;
    min-height: 50px;
}

    .btn-danger:hover {
        background-color: #99DCD1;
        border-color: #99DCD1;
        color: white;
    }

.btn-outline-danger {
    border-radius: 25px;
    background-color: #ffffff;
    border-color: #FF0000;
    min-height: 50px;
}

.btn-outline:hover {
    background-color: #99DCD1;
    border-color: #99DCD1;
    color: white;
}

.btn-cancer {
    background-color: var(--green);
    color: #ffffff;
    width: 100%;
    padding: 10px;
    border-radius: 25px;
    min-height: 50px;
}

.btn-cancer-selected {
    background-color: var(--orange);
    color: #ffffff;
    width: 100%;
    padding: 10px;
    border-radius: 25px;
    min-height: 50px;
}

    .btn-cancer-selected:hover {
        background-color: #99DCD1;
        border-color: #99DCD1;
        color: var(--dark-petrol);
    }

.btn-cancer:hover {
    background-color: #99DCD1;
    border-color: #99DCD1;
    color: var(--dark-petrol);
}

.btn-primary-pop-selected {
    height: 50px;
    border-radius: 0px;
    background-color: #99DCD1;
    border-color: var(--green);
    border-bottom: solid 5px var(--petrol);
}

.min-table-row {
    height: 60px;
}

.padding-top {
    padding-top: 15px;
}

.padding-left {
    padding-left: 15px;
}

.padding {
    padding: 5px;
}

.padding-left-right {
    padding-left: 30px;
    padding-right: 30px;
}

/* SANTRAL FONT FAMILY */

@font-face {
    font-family: 'Santral-family';
    src: url(../fonts/Santral-Regular.woff) format("woff"), url(../fonts/Santral-Regular.ttf) format("truetype");
    font-weight: 400;
    font-style: normal;
    font-stretch: normal;
}

@font-face {
    font-family: 'Santral-family';
    src: url(../fonts/Santral-Medium.woff) format("woff"), url(../fonts/Santral-Medium.ttf) format("truetype");
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
}

@font-face {
    font-family: 'Santral-family';
    src: url(../fonts/Santral-SemiBold.woff) format("woff"), url(../fonts/Santral-SemiBold.ttf) format("truetype");
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
}

@font-face {
    font-family: 'Santral-family';
    src: url('../fonts/santral-medium-italic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
}

.font-semibold {
    font-weight: 600;
}

label {
    font-weight: 600;
}

.btn {
    font-weight: 600;
}

.MultiLineTextBox {
    height: 200px !important;
}

.red-text {
    color: red;
}

.progress-bar {
    display: none;
    padding: 5px;
    background-color: lightgray;
    color: white;
}


.ganavbaradmin {
    border: 0px;
    padding: 0px;
    padding-top: 100px;
    background-color: var(--green);
    color: white;
}


/*
    SITE BLUE var(--petrol)
    Green colour = var(--green) -- ANNUITY
    Burnt yellow = #FF8500 #ff8400 -- CASH
    Purple colour = #91388C --- DRAWDOWN

*/

/*Dark grey PP colour = #2F3045 top meny bar
Beige PP colour = #DFCEA1
Lilac PP colour = #D7D5E3*/

.hr-dark {
    border-color: var(--petrol);
}

.hr-light {
    border-color: #FFFFFF;
}

.h-bolder {
    font-weight: 600;
}

.font-white {
    color: #FFFFFF;
}

.font-dark {
    color: var(--dark-petrol);
}

.font-anchor-dark {
    color: var(--dark-petrol);
}

    .font-anchor-dark:hover {
        color: blue;
    }

.font-anchor-annuity {
    color: var(--green);
}

    .font-anchor-annuity:hover {
        color: blue !important;
        cursor: pointer;
    }

.font-black {
    color: #000000;
}

.font-annuity {
    color: var(--green);
}

.font-drawdown {
    color: var(--purple);
}

.font-purple {
    color: var(--purple);
}

.font-purple-strong {
    color: var(--purple);
    font-weight: 700;
}

.font-dark-petrol {
    color: var(--dark-petrol);
}

.font-anchor-drawdown {
    color: var(--purple);
}

    .font-anchor-drawdown:hover {
        color: var(--orange) !important;
        cursor: pointer;
    }

.font-cash {
    color: var(--orange);
}

.font-anchor-cash {
    color: var(--orange);
}

    .font-anchor-cash:hover {
        color: blue !important;
        cursor: pointer;
    }


.font-medication {
    color: var(--secondary-dark-petrol);
}

.ganavbaritemadmin, .ganavbaritemadminchild {
    position: relative;
    margin-top: 0px;
    width: 100%;
    height: 50px;
    border: solid 1px var(--green);
    overflow: hidden;
    white-space: nowrap;
    background-color: var(--green);
    color: white;
    display: inline-flex;
    /*flex-direction: column; /* make main axis vertical */
    justify-content: left; /* center items horizontally, in this case */
    align-items: center; /* center items vertically, in this case */
    text-align: center;
    padding: 2px;
    padding-left: 30px;
    font-size: 1.3rem;
}

.ganavbaritemadminchild {
    padding-left: 90px;
    font-size: 1.2rem;
}

.ganavbaritemadmin_selected {
    background-color: var(--green);
    border-radius: 10px;
    border: solid 5px var(--petrol);
}

.btn_pp_purple {
    background-color: var(--green);
    border-color: var(--green);
    color: white;
    width: 200px;
}

    .btn_pp_purple:hover {
        background-color: #99DCD1;
        border-color: #99DCD1;
        color: white;
    }

.navbarpp {
    background-color: var(--petrol);
    color: white;
    /*    padding-bottom: 30px;
    padding-top: 30px;*/
}

.navbarpp-white {
    background-color: white;
    color: var(--dark-petrol);
    /*    padding-bottom: 30px;
    padding-top: 30px;*/
}


.navbarpp .navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e")
}

.navbarpp-white .navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: 100% 100%;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbarpp .navbar-toggle {
    background: none;
    border: none;
    color: #f8f8ff;
}

.navbarpp .navbar-toggler {
    color: #f8f8ff;
}

.navbarpp a:link, a:visited, a:active {
    background-color: transparent;
    text-decoration: none;
}

.a-nav-pp {
    color: #f8f8ff !important;
}

.a-nav-pp-white {
    color: var(--dark-petrol) !important;
    font-size: 1rem;
}

.navbarpp a:hover {
    color: var(--orange);
    background-color: transparent;
    text-decoration: underline;
}

.navbarpp .navbar-toggle {
    color: #f8f8ff;
    background: yellow !important;
}

.nav-item {
    padding-right: 10px;
}

.ganavbar {
    border: 0px;
    padding: 0px;
    background-color: transparent;
    color: white;
}

.ganavbarcontainer {
    position: relative;
}

.ganavbarcontaineritem {
    text-align: center;
    width: 135px;
    min-width: 90px;
    height: 70px;
    color: var(--dark-petrol);
}

.ganavbaritem_unlocked {
    position: relative;
    margin-top: 0px;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    border: solid 1px var(--green);
    overflow: hidden;
    white-space: nowrap;
    background-color: var(--green);
    color: white;
    display: inline-flex;
    justify-content: center; /* center items vertically, in this case */
    align-items: center; /* center items horizontally, in this case */
    text-align: center;
    padding: 2px;
    font-size: 1.5rem;
    top: -37px;
}

    .ganavbaritem_unlocked:hover {
        width: 60px;
        height: 60px;
        border-radius: 30px;
        font-weight: 500;
        font-size: 1.8rem;
    }

.ganavbaritem_selected {
    position: relative;
    margin-top: 0px;
    width: 70px;
    height: 70px;
    border-radius: 35px;
    border: solid 6px var(--green);
    overflow: hidden;
    white-space: nowrap;
    background-color: var(--cream);
    color: var(--dark-petrol);
    display: inline-flex;
    justify-content: center; /* center items vertically, in this case */
    align-items: center; /* center items horizontally, in this case */
    text-align: center;
    padding: 2px;
    font-size: 2rem;
    top: -37px;
}

.ganavbaritem_locked {
    position: relative;
    margin-top: 0px;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    border: solid 1px var(--petrol);
    overflow: hidden;
    white-space: nowrap;
    background-color: var(--cream);
    color: var(--dark-petrol);
    display: inline-flex;
    justify-content: center; /* center items vertically, in this case */
    align-items: center; /* center items horizontally, in this case */
    text-align: center;
    padding: 2px;
    font-size: 1.5rem;
    top: -37px;
}

.ganavbaritem_incomplete {
    position: relative;
    margin-top: 0px;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    border: solid 1px var(--green);
    overflow: hidden;
    white-space: nowrap;
    background-color: var(--green);
    color: white;
    display: inline-flex;
    justify-content: center; /* center items vertically, in this case */
    align-items: center; /* center items horizontally, in this case */
    text-align: center;
    padding: 2px;
    font-size: 1.5rem;
    top: -37px;
}

    .ganavbaritem_incomplete:hover {
        width: 60px;
        height: 60px;
        border-radius: 30px;
        font-weight: 500;
        font-size: 1.8rem;
    }

.ganavbaritem_label {
    color: var(--dark-petrol);
}

.ganavbaritem_table {
    text-align: center;
    padding: 0px;
}


.btn-group, .btn-group-vertical {
    display: block;
}

.center-image-ganavbaritem {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40px;
}

.field-validation-valid {
    display: none;
}

.validation-summary-valid {
    display: none;
}

.annuity_tab_background {
    background-color: #ffffff;
    padding: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
}

.annuity_background {
    background-color: #ffffff;
    padding: 20px;
    border: solid 1px #fff;
    border-radius: 10px;
}

.annuity_tab {
    background-color: #ffffff;
    color: var(--dark-petrol);
    padding: 0px;
    padding-right: 0px;
}

.annuity_tab_button {
    position: relative;
    margin-top: 0px;
    margin-right: 3px;
    width: 150px;
    height: 50px;
    border: solid 2px var(--green);
    border-bottom: solid 1px var(--green);
    overflow: hidden;
    white-space: nowrap;
    background-color: var(--green);
    color: #ffffff;
    display: inline-flex;
    justify-content: center; /* center items vertically, in this case */
    align-items: center; /* center items horizontally, in this case */
    text-align: center;
    padding: 2px;
    font-size: 1.1rem;
    cursor: pointer;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.annuity_tab_button_selected {
    position: relative;
    margin-top: 0px;
    margin-right: 3px;
    width: 150px;
    height: 50px;
    border: none;
    overflow: hidden;
    white-space: nowrap;
    background-color: var(--petrol);
    color: #ffffff;
    display: inline-flex;
    justify-content: center; /* center items vertically, in this case */
    align-items: center; /* center items horizontally, in this case */
    text-align: center;
    padding: 2px;
    font-size: 1.1rem;
    cursor: pointer;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.annuity_tab_button_short {
    width: 160px;
}

.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 0px;
}

    .fileUpload input.upload {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
        padding: 0;
        font-size: 20px;
        cursor: pointer;
        opacity: 0;
        filter: alpha(opacity=0);
    }

.scroll_fix {
    overflow: hidden;
    position: fixed;
    top: 63px;
    width: 100%;
    z-index: 2000000000;
    background-color: #FFFFFF;
}


footer {
    position: relative;
    background-color: #efeef3;
    text-align: center;
    width: 100%;
    padding-top: 0px;
}

.life-expectancy {
    width: 100%;
    height: 1050px;
    display: block;
    margin: auto;
    overflow: visible;
    border: none;
}

.life_table {
    text-align: left;
    padding: 0px;
}

.life-bar {
    position: relative;
    margin-top: 0px;
    height: 30px;
    border-radius: 0px;
    overflow: hidden;
    white-space: nowrap;
    background-color: var(--green);
    color: white;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 2px;
    font-size: 1.1rem;
}

.text-danger {
    color: var(--orange) !important;
}

option:disabled {
    color: white;
}

input[type="text"]::-webkit-input-placeholder {
    color: white;
}

input[type="text"]::-moz-placeholder { /* Firefox 19+ */
    color: white;
}

input[type="text"]::-ms-input-placeholder { /* IE 10+ */
    color: white;
}

input[type="text"]::-moz-placeholder { /* Firefox 18- */
    color: white;
}

input[type="email"]::-webkit-input-placeholder {
    color: white;
}

input[type="email"]::-moz-placeholder { /* Firefox 19+ */
    color: white;
}

input[type="email"]::-ms-input-placeholder { /* IE 10+ */
    color: white;
}

input[type="email"]::-moz-placeholder { /* Firefox 18- */
    color: white;
}

.wonky-rect-white {
    background-color: #FFFFFF;
    transform: rotate(1.5deg);
}

.unwonky-rect-white {
    background-color: #FFFFFF;
    transform: rotate(-1.5deg);
}

.wonky-rect-green {
    background-color: var(--green);
    transform: rotate(1.5deg);
}

.unwonky-rect-green {
    background-color: var(--green);
    transform: rotate(-1.5deg);
}

.wonky-rect-blue {
    background-color: var(--petrol);
    transform: rotate(1.5deg);
    margin-left: 10px;
    margin-right: 10px;
}

.wonky-top-blue {
    background-color: var(--petrol);
    color: white;
    border-bottom-color: var(--petrol);
    padding: 0px;
    clip-path: polygon(0% 101%,100% 101%,0% 0%);
}

.unwonky-rect-blue {
    background-color: var(--petrol);
    transform: rotate(-1.5deg);
    color: white;
    margin-left: 10px;
    margin-right: 10px;
}

.jump-menu {
    background-color: var(--green);
    position: relative;
}

.jump-menu-fixed {
    background-color: var(--green);
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 10;
    margin-left: 0px;
    margin-right: 0px;
}

.sticky-pdf {
    background-color: var(--petrol);
    color: #ffffff;
    position: fixed;
    transform: rotate(-90deg);
    top: 50%;
    right: -90px;
    width: 230px;
    height: 50px;
    z-index: 2000000000;
    border: solid 1px #ffffff;
    border-bottom: none;
    padding: 20px;
    padding-top: 10px;
}

    .sticky-pdf a {
        color: #ffffff;
    }

.help-button {
    font-size: 1.25rem;
    text-decoration: none;
}

.sticky-help {
    background-color: transparent;
    color: #ffffff;
    position: fixed;
    transform: rotate(0deg);
    top: 50%;
    right: 15px;
    width: 80px;
    height: 80px;
    z-index: 2000000000;
    border: none;
    padding: 0px;
    padding-top: 0px;
}

    .sticky-help a {
        color: #ffffff;
    }

    .sticky-help:active {
        border: none;
    }


.scroll-to-view {
    padding-top: 100px;
}

.body-white {
    background-color: var(--pale-purple);
    color: var(--dark-petrol);
}

.body-green {
    background-color: var(--green);
    color: #FFFFFF;
}

.body-grey {
    background-color: #ececec;
    color: var(--dark-petrol);
}

.body-shade {
    background-color: #f4eede;
    color: var(--dark-petrol);
}

.body-blue {
    background-color: var(--petrol);
    color: #ffffff;
}

.body-transparent {
    color: #ffffff;
}

.body-purple {
    background-color: var(--purple);
    color: #ffffff;
}

.table-light td {
    color: var(--dark-petrol);
    background-color: #FFFFFF;
}

.medical-condition-title {
    background-color: var(--petrol);
    color: #ffffff;
    text-align: left;
    border: solid 1px;
    border-radius: 10px;
    border-color: var(--petrol);
    padding: 20px;
}

.medical-condition-subtitle {
    background-color: #cccccc;
    color: #ffffff;
    text-align: left;
    border: solid 1px;
    border-radius: 20px;
    border-color: #cccccc;
    padding: 20px;
}

.infobutton {
    display: -webkit-flex; /* For older iOS Safari versions */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    top: 0px;
    left: 0px;
    color: var(--purple);
    border: solid 1px var(--purple);
    border-radius: 17px;
    height: 34px;
    width: 34px;
    font-size: 22px;
    margin: auto;
    padding-top: 0px;
}

@media screen and (max-width: 765px) {
    .infobutton {
        padding-top: 2px;
    }
}

.leftToCenter {
    text-align: left;
}

@media screen and (max-width: 765px) {
    .leftToCenter {
        text-align: center;
    }
}


.infotext {
    display: inline-block; /* Ensures the anchor respects its own box model */
    line-height: 22px; /* Reset the default line height */
    height: 22px; /* Match the height of the parent if needed */
    font-size: 22px;
    padding: 0; /* Remove any potential padding affecting the alignment */
}

.circle {
    width: 34px;
    height: 34px;
    border: 2px solid black;
    border-radius: 50%; /* Makes the div round */
    display: flex;
    justify-content: center; /* Horizontally centers the content */
    align-items: center; /* Vertically centers the content */
}

    .circle span {
        font-size: 22px;
    }

.infobuttonlight {
    top: 0px;
    left: 0px;
    background-color: #FFFFFF;
    color: var(--green);
    border: none;
    border-radius: 17px;
    height: 34px;
    width: 34px;
    text-align: center;
    font-size: 22px;
    margin: auto;
    margin-right: 20px;
}


.infobuttonlarge {
    background-color: var(--green);
    color: #FFFFFF;
    border: none;
    border-radius: 25px;
    height: 50px;
    width: 50px;
    text-align: center;
    font-size: 32px;
    margin: auto;
    margin-left: 0px;
    line-height: 48px;
}


.infobuttonwithtext {
    top: 0px;
    left: 0px;
    background-color: var(--green);
    color: #FFFFFF;
    border: none;
    border-radius: 28px;
    height: 56px;
    padding: 10px;
    text-align: center;
    font-size: 20px;
    margin: auto;
}

.a-white {
    color: #cccccc !important;
}

    .a-white:hover {
        color: #cccccc;
    }

.select2-container--default .select2-selection--single {
    background-color: #fff !important;
    border: 1px solid var(--light-purple) !important;
    border-radius: 5px !important;
    height: 50px !important;
}

.select2-selection__arrow b {
    border-color: var(--petrol) transparent transparent transparent !important;
}

.select2-selection__arrow {
    height: 45px !important;
    top: 1px !important;
    right: 15px !important;
    width: 20px !important;
}

.select2-container--open b {
    border-color: transparent transparent var(--light-purple) transparent !important;
    border-width: 0 4px 5px 4px !important;
}

.select2-search__field {
    border: 1px solid #ccc !important;
}

.select2-dropdown {
    border: 1px solid var(--light-purple);
    border-radius: 0px;
}

.select2-container--default .select2-selection--single {
    border-bottom-left-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
}

.select2-selection__rendered {
    color: var(--dark-petrol) !important;
    line-height: 45px !important;
    padding-left: 20px !important;
}

.select2-dropdown--below {
    margin-top: 2px !important;
    border: 1px solid var(--light-purple) !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.select2-results__option--selected {
    background-color: #ccc !important;
}

.select2-results__option--highlighted .select2-results__option--selectable {
    background-color: #5897fb !important;
    color: white;
}

.select2-results > .select2-results__options {
    max-height: 600px;
    overflow-y: auto;
    color: var(--dark-petrol);
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.label_h5 {
    font-size: 18px;
    font-weight: 400;
    color: var(--purple);
}

.label_h5_light {
    font-size: 18px;
    font-weight: 400;
    color: var(--purple);
}

.label_h3 {
    font-size: 28px;
    font-weight: 600;
}

.label_h2 {
    font-size: 32px;
    font-weight: 600;
    color: var(--dark-petrol);
}

.label_h1 {
    font-size: 40px;
    font-weight: 600;
}

@media screen and (max-width: 850px) {
    .label_h1 {
        font-size: 30px;
    }
}

.footer {
    background-color: var(--footer-background);
    padding-top: 80px;
}

.footer-wrapper {
    display: flex;
    gap: 20px;
}

@media screen and (max-width: 850px) {
    .footer-wrapper {
        flex-direction: column;
    }
}

.footer-left {
    flex: 1;
    display: flex;
    min-height: 50px;
    gap: 32px;
}

.footer-right {
    flex: 1;
    display: flex;
    min-height: 50px;
}

.footer-left .footer-right {
    color: #fff;
}

.footer-right p {
    font-size: 14px;
    color: #fff;
}

@media screen and (max-width: 850px) {
    .footer-right p {
        font-size: 12px;
    }
}


.footer-nav-col {
    flex: 1;
    flex-direction: column;
    display: flex;
    text-decoration: none;
    color: #fff;
    text-align: left;
}

.footer-heading {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 32px;
}

@media screen and (max-width: 850px) {
    .footer-heading {
        font-size: 12px;
        margin-bottom: 15px;
    }
}

.footer ul {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-inline-start: 0px;
}

@media screen and (max-width: 850px) {
    .footer ul {
        gap: 15px;
    }
}

.footer li {
    list-style-type: none;
}

.footer-nav-col a {
    color: #fff !important;
    font-size: 14px;
    font-weight: 400;
}

    .footer-nav-col a:hover {
        color: #fff;
    }

@media screen and (max-width: 850px) {
    .footer-nav-col a {
        color: #fff !important;
        font-size: 12px;
    }
}

ul.no-bullets {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.lead {
    font-weight: 400;
    font-size: 18px;
}









/* Custom bullet styling only for .round-bullets ul */
ul.round-bullets {
    list-style: none;
    padding-left: 0px;
    padding-right: 0px;
}

    ul.round-bullets.extra-padding {
        padding-left: 40px;
        padding-right: 40px;
    }

    ul.round-bullets li {
        margin: 20px 0;
        padding-left: 56px;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: flex-start; /* Default top alignment */
    }

        /* Left-aligned text block */
        ul.round-bullets li .left-text {
            flex-grow: 1;
        }

        /* Bullet marker base styling for .round-bullets li */
        ul.round-bullets li::before {
            content: "";
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: var(--orange);
            border: 2px solid var(--orange);
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
            line-height: 18px;
            font-size: 18px;
            color: white;
            padding-top: 10px;
        }

    /* Number bullet */
    ul.round-bullets .bullet-1::before {
        content: "1";
    }

    ul.round-bullets .bullet-2::before {
        content: "2";
    }

    ul.round-bullets .bullet-3::before {
        content: "3";
    }

    ul.round-bullets .bullet-4::before {
        content: "4";
    }

    ul.round-bullets .bullet-5::before {
        content: "5";
    }

    ul.round-bullets .bullet-6::before {
        content: "6";
    }


    /* Text bullet */
    ul.round-bullets .bullet-a::before {
        content: "A";
    }

    /* Image bullet */
    ul.round-bullets .bullet-imgp::before {
        content: "";
        background: url('../images/pound.svg') no-repeat center center;
        background-size: 35%;
        background-color: var(--orange);
    }

    ul.round-bullets .bullet-imgm::before {
        content: "";
        background: url('../images/menu.svg') no-repeat center center;
        background-size: 50%;
        background-color: var(--orange);
    }

    /* Right-aligned group: Image and text */
    ul.round-bullets .right-group {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start; /* Default top alignment */
        min-width: 120px;
    }

        ul.round-bullets .right-group img {
            width: 30px;
            height: 30px;
            margin-right: 10px;
        }

        ul.round-bullets .right-group .right-text {
            font-size: 16px;
            /*line-height: 40px;*/ /* Align text with image top by default */

            white-space: nowrap;
        }

/* Media query for narrow viewports */
@media (max-width: 720px) {
    ul.round-bullets.extra-padding {
        padding-left: 0px;
        padding-right: 0px;
    }

    ul.round-bullets li {
        padding-left: 35px;
        margin: 10px 0;
    }

        ul.round-bullets li::before {
            width: 25px;
            height: 25px;
            border: 1px solid var(--orange);
            line-height: 11px;
            padding-top: 7px;
        }

    ul.round-bullets .bullet-1::before,
    ul.round-bullets .bullet-2::before,
    ul.round-bullets .bullet-3::before,
    ul.round-bullets .bullet-4::before,
    ul.round-bullets .bullet-5::before,
    ul.round-bullets .bullet-6::before,
    ul.round-bullets .bullet-a::before {
        font-size: 12px;
    }

    ul.round-bullets .bullet-imgp::before {
        background-size: 35%;
    }

    ul.round-bullets .bullet-imgm::before {
        background-size: 50%;
    }

    ul.round-bullets .right-group img {
        width: 20px;
        height: 20px;
    }

    ul.round-bullets .right-group .right-text {
        font-size: 14px;
        line-height: 25px;
    }
}

/* Center-aligned class for optional vertical centering */
ul.round-bullets.center-align li {
    align-items: center; /* Center-align the entire li content */
}

    ul.round-bullets.center-align li::before {
        top: 50%;
        transform: translateY(-50%); /* Center the bullet marker */
    }

ul.round-bullets.center-align .right-group {
    align-items: center; /* Center-align the image and text */
    justify-content: flex-start;
    min-width: 120px;
}

    ul.round-bullets.center-align .right-group .right-text {
        line-height: normal; /* Normal line height for centering */
    }

.centered-content {
    width: 60%; /* Default width for larger viewports */
    margin: 0 auto; /* Centers the content horizontally */
}

@media (max-width: 760px) {
    .centered-content {
        width: 100%; /* Full width for viewports less than 760px */
    }
}




.button-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding-top: 0;
    flex-wrap: wrap; /* Allows items to wrap for smaller viewports */
}

    .button-container > div {
        /*flex: 1 1 280px;*/ /* Ensures items can shrink, grow, and have a base width */

        max-width: 280px; /* Prevents the buttons from growing too large */
    }

@media (max-width: 768px) {
    .button-container {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items horizontally */
    }

        .button-container > div {
            max-width: none; /* Allows full width for stacking */
            width: 100%; /* Optional: Stretch to full container width */
        }
}

/* Grid container */
.custom-checkbox-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center; /* ✅ Vertically center checkbox and first line of label */
    max-width: 100%;
    position: relative; /* Needed for absolute positioning of input */
}

    .custom-checkbox-grid input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        width: 40px;
        height: 40px;
        z-index: 2;
        cursor: pointer;
    }

    /* Custom checkbox box */
    .custom-checkbox-grid .checkmark {
        width: 40px;
        height: 40px;
        background-color: white;
        border: 2px solid var(--light-purple);
        border-radius: 5px;
        position: relative;
        transition: all 0.2s ease;
        position: relative;
        z-index: 1;
        pointer-events: none; /* Let clicks go through to the input */
    }

    /* Checked state */
    .custom-checkbox-grid input[type="checkbox"]:checked + .checkmark {
        background-color: var(--pale-purple);
        border-color: var(--light-purple);
    }

    /* Checkmark tick */
    .custom-checkbox-grid .checkmark::after {
        content: '';
        position: absolute;
        display: none;
        top: 50%;
        left: 50%;
        width: 8px;
        height: 14px;
        border: solid var(--dark-petrol);
        border-width: 0 3px 3px 0;
        border-radius: 1px;
        transform: translate(-50%, -60%) rotate(45deg);
    }

    /* Show tick when checked */
    .custom-checkbox-grid input[type="checkbox"]:checked + .checkmark::after {
        display: block;
    }

    /* Label text */
    .custom-checkbox-grid .checkbox-text {
        line-height: 1.4;
    }

    .custom-checkbox-grid input[type="checkbox"]:focus + .checkmark {
        outline: 3px solid var(--dark-petrol);
        outline-offset: 2px;
    }


.btn-with-arrow {
    margin: 0 auto; /* Center the button horizontally */
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 200px; /* Set your min width here */
    padding: 0.5em 0.5em;
    background-color: var(--green);
    color: white;
    border: solid 1px var(--green);
    border-radius: 25px;
    height: 50px;
    font-size: 1rem;
    cursor: pointer;
}

.btn-label {
    padding-left: 0.5em; /* Space from left edge */
    flex-grow: 1;
    text-align: left;
    font-weight: 600;
}

.arrow-icon {
    display: flex;
    align-items: center;
    padding-left: 0.5em; /* Space between text and arrow */
    padding-right: 0.25em; /* Right padding inside button */
}

.btn-with-arrow:hover {
    background-color: #99DCD1;
    border-color: #99DCD1;
    color: white;
}

.btn-with-arrow-css {
    position: relative;
    padding-right: 2em; /* space for arrow */
    background-color: #007bff;
    color: white;
    border: none;
    padding: 0.5em 1em;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml;utf8,<svg fill='white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M1 8a.75.75 0 0 1 .75-.75h10.19L8.72 4.03a.75.75 0 0 1 1.06-1.06l4.5 4.5a.75.75 0 0 1 0 1.06l-4.5 4.5a.75.75 0 0 1-1.06-1.06l3.22-3.22H1.75A.75.75 0 0 1 1 8z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.75em center;
    background-size: 1em;
}






/* Container for the custom radio */
.custom-radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-right: 1.5em;
    position: relative;
}

    /* Hide the native radio input */
    .custom-radio input[type="radio"] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }

/* The outer circle */
.radio-mark {
    min-width: 40px;
    height: 40px;
    border: 2px solid var(--light-purple);
    background-color: #fff;
    border-radius: 50%;
    position: relative;
    margin-right: 0.5em;
    box-sizing: border-box;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The inner dot - now a real element instead of pseudo-element */
.radio-dot {
    width: 20px;
    height: 20px;
    background-color: var(--dark-petrol);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.2s ease;
}

/* Show the dot when checked */
.custom-radio input[type="radio"]:checked + .radio-mark .radio-dot {
    transform: scale(1);
}

/* Optional: focus outline */
.custom-radio input[type="radio"]:focus + .radio-mark {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Label text */
.radio-label {
    font-size: 1rem;
    color: var(--dark-petrol);
}

/* Container for the custom radio */
/*.custom-radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    margin-right: 1.5em;
    position: relative;
}*/

    /* Hide the native radio input */
    /*.custom-radio input[type="radio"] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
    }*/

/* The outer circle */
/*.radio-mark {
    min-width: 40px;*/ /* Outer diameter */
    /*height: 40px;
    border: 2px solid var(--light-purple);*/ /* Border color */
    /*background-color: #fff;*/ /* Background color */
    /*border-radius: 50%;
    position: relative;
    margin-right: 0.5em;
    box-sizing: border-box;
    transition: all 0.2s ease;
}*/

    /* The inner dot, shown only when checked */
    /*.radio-mark::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 20px;*/ /* Inner dot size */
        /*height: 20px;
        background-color: var(--dark-petrol);*/ /* Dot color */
        /*border-radius: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition: transform 0.2s ease;
    }*/

/* Show the dot when checked */
/*.custom-radio input[type="radio"]:checked + .radio-mark::after {
    transform: translate(-50%, -50%) scale(1);
}*/

/* Optional: focus outline */
/*.custom-radio input[type="radio"]:focus + .radio-mark {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}*/

/* Label text */
/*.radio-label {
    font-size: 1rem;
    color: var(--dark-petrol);
}*/



.quoteinputcontainer {
    display: grid;
    grid-template-columns: 4fr 2fr;
    gap: 1rem;
}

/* Stack panels for small screens */
@media (max-width: 768px) {
    .quoteinputcontainer {
        grid-template-columns: 1fr;
    }

    #RHSPanel {
        order: -1; /* Move RHS above LHS */
    }
}

/* Make RHSPanel take full width when LHS is hidden */
#LHSPanel.hidden {
    display: none;
}

    #LHSPanel.hidden + #RHSPanel {
        grid-column: 1 / -1;
    }

.display-none {
    display: none;
}

.display-flex {
    display: flex;
}


.img-container {
    width: 100%; /* or any dynamic size like %, vw, etc. */
    max-width: 200px; /* optional, to limit scaling */
}

    .img-container img {
        width: 100%;
        height: auto;
        display: block; /* remove extra spacing below image */
    }

.logo-row {
    display: flex;
    flex-wrap: wrap;
}

.logo-left,
.logo-right {
    flex: 1 1 50%;
    display: flex;
    align-items: center;
    padding: 10px;
}

.logo-left {
    justify-content: flex-start;
}

.logo-right {
    justify-content: flex-end;
}

.business-logo {
    width: 250px; /* Default width */
    height: auto; /* Maintain aspect ratio */
}


@media (max-width: 720px) {
    .logo-left,
    .logo-right {
        flex: 1 1 100%;
        justify-content: center;
    }
}

@media (min-width: 720px) {
    .mintitleheight {
        min-height: 85px;
    }
}

.lifestylespace {
    margin-top: 40px;
}

@media (max-width: 720px) {
    .lifestylespace {
        margin-top: 0px;
    }
}


/* WCAG 2.2 compliant styles */
.form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.required-field::after {
    content: " *";
    color: #dc3545;
    font-weight: bold;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: inherit !important;
    margin: inherit !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: inherit !important;
}

.form-text {
    margin-top: 0.25rem;
    font-size: 0.875em;
    color: #6c757d;
}

/* Focus indicators for better accessibility */
.form-control:focus,
.btn:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
    box-shadow: 0 0 0 0.2rem rgba(0, 102, 204, 0.25);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .form-control,
    .btn {
        border: 2px solid;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}



.legend-height {
    min-height: 65px;
}

@media (max-width: 720px) {
    .legend-height {
        min-height: 40px;
    }
}


/*
    WCAG
*/

.ganavbar-list {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
    gap: 10px; /* Optional: spacing between steps */
}

.ganavbarcontaineritem {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    width: 135px;
    min-width: 90px;
    height: 70px;
    color: var(--dark-petrol);
}


/* Skip Navigation Link */
.skip-link {
    position: absolute;
    top: -100px; /* Hide completely off-screen */
    left: 50%;
    transform: translateX(-50%); /* Center horizontally */
    background: #000000;
    color: #ffffff;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 10000; /* Higher z-index to ensure it appears above everything */
    border-radius: 0 0 4px 4px;
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
    transition: top 0.2s ease-in-out;
    /* Ensure it's completely hidden from screen readers when not focused */
    clip: rect(0 0 0 0);
    overflow: hidden;
}

    .skip-link:focus {
        top: 10px; /* Position at top of viewport when focused */
        clip: auto; /* Make visible to screen readers */
        outline: 2px solid #ffffff;
        outline-offset: 2px;
    }

    .skip-link:hover:focus {
        background: #333333;
        color: #ffffff;
    }


.hiddenLabel {
    display: block;
    visibility: hidden;
}

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



.quotes-section {
    margin-bottom: 2rem;
}

.annuity-quotes-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1rem;
    border: 2px solid #000;
}

    .annuity-quotes-table th,
    .annuity-quotes-table td {
        border: 1px solid #000;
        padding: 0.75rem;
        text-align: left;
        vertical-align: top;
    }

    .annuity-quotes-table th {
        background-color: #f8f9fa;
        font-weight: bold;
    }

    .annuity-quotes-table thead th {
        background-color: #e9ecef;
    }

    .annuity-quotes-table tbody th {
        background-color: #f8f9fa;
        font-weight: normal;
    }

    /* Focus indicators for keyboard navigation */
    .annuity-quotes-table th:focus,
    .annuity-quotes-table td:focus {
        outline: 3px solid #005fcc;
        outline-offset: 2px;
    }

.quotes-table-footnote {
    font-size: 0.9rem;
    color: #666;
    margin-top: 0.5rem;
}

.quotes-section abbr {
    text-decoration: underline dotted;
    cursor: help;
}

/* Ensure minimum target size of 44x44px for interactive elements */
.quotes-section abbr {
    min-height: 44px;
    min-width: 44px;
    display: inline-block;
    text-align: center;
    line-height: 44px;
    padding: 0 0.25rem;
}

/* High contrast support */
@media (prefers-contrast: high) {
    .annuity-quotes-table,
    .annuity-quotes-table th,
    .annuity-quotes-table td {
        border-color: #000;
        border-width: 2px;
    }

        .annuity-quotes-table th {
            background-color: #000;
            color: #fff;
        }

        .annuity-quotes-table tbody th {
            background-color: #333;
            color: #fff;
        }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .quotes-section * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Responsive design for mobile */
@media (max-width: 768px) {
    .annuity-quotes-table {
        font-size: 0.9rem;
    }

        .annuity-quotes-table th,
        .annuity-quotes-table td {
            padding: 0.5rem;
        }
}

/* Primary sticky positioning */
.quotes-sticky-container {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 1rem;
    margin-bottom: 1rem;
    width: 100%;
    transition: box-shadow 0.2s ease-in-out;
}


    .quotes-sticky-container table, .quotes-sticky-container td, .quotes-sticky-container th {
        color: var(--dark-petrol);
    }


    /* JavaScript sticky fallback - this will override CSS sticky when applied */
    .quotes-sticky-container.js-sticky {
        position: fixed !important;
        top: 0 !important;
        left: 0;
        right: 0;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        margin-bottom: 0;
    }

/* Ensure container allows proper positioning */
#exampleQuotes {
    position: relative;
    overflow: visible;
}

/* Add space when sticky to prevent content jump */
body.sticky-active {
    padding-top: 0; /* Will be set dynamically by JavaScript */
}

/* Rest of your existing styles... */
.quotes-sticky-container[aria-live] {
    aria-live: polite;
}

/*.quotes-sticky-container:focus-within {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}*/

.quotes-sticky-container .quotes-section {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .quotes-sticky-container {
        padding: 0.5rem;
    }
}

@media (prefers-contrast: high) {
    .quotes-sticky-container {
        background-color: #fff;
        border-bottom: 3px solid #000;
    }

        .quotes-sticky-container.js-sticky {
            border-bottom: 3px solid #000;
            box-shadow: none;
        }
}






/* Sticky container: sticky only when scrolled to top in expanded mode, always fixed in collapsed mode */
.quotes-sticky-container {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.13);
    padding: 1rem;
    transition: box-shadow 0.2s, min-height 0.2s;
    width: 100%;
}

    /* Collapsed: only toggle button shown, always fixed at top */
    .quotes-sticky-container.collapsed {
        position: static; /* Let child button handle fixed positioning */
        padding: 0;
        min-height: 0;
        box-shadow: none;
    }

        /* In collapsed mode, toggle button is always fixed at top */
        .quotes-sticky-container.collapsed .quotes-toggle-btn {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1100;
            margin: 0;
            border-radius: 0;
            /*            box-shadow: 0 2px 8px rgba(0,0,0,0.18);
*/
            width: 100%;
            min-height: 44px;
        }

        /* Hide details section when collapsed */
        .quotes-sticky-container.collapsed #quotesDetailsSection {
            display: none;
        }

#quotesDetailsSection {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    /* Optional: Add horizontal padding for small screens */
    padding-left: 1rem;
    padding-right: 1rem;
}

.quotes-sticky-container.expanded .quotes-toggle-btn {
    position: static;
    width: 100%;
    margin-bottom: 1em;
    /*        border-radius: 0.25em;
*/
    box-shadow: none;
}

.quotes-toggle-btn {
    background: var(--green);
    color: #fff;
    border: none;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 0.7em 1em;
    cursor: pointer;
    transition: background 0.2s;
}

    .quotes-toggle-btn:focus, .quotes-toggle-btn:hover {
        outline: 1px solid var(--green);
        background: var(--green);
    }

/* Responsive for mobile */
@media (max-width: 768px) {
    .quotes-sticky-container {
        padding: 0.5rem;
    }

    .quotes-toggle-btn {
        font-size: 1rem;
        padding: 0.5em 0.8em;
    }
}


#btnHelp:focus {
    outline: 2px solid var(--dark-petrol); /* High contrast blue */
    outline-offset: 2px;
    border-radius: 4px;
}





/* RECITE styling */

/*.recite-button {
    background: transparent;
    color: white;
    border: 2px solid white;  
    padding: 10px 20px; 
    border-radius: 5px; 
    cursor: pointer;
    font-size: 16px;
    margin-left: 20px;
}

    .recite-button:hover {
        background: rgba(255,255,255,0.1);  
    }
*/


.custom-access-btn-container {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    pointer-events: auto;
}

.custom-access-btn {
    background: var(--dark-petrol);
    color: white;
    border: 2px solid white;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    margin: 0;
    outline: 2px solid #fff;
    transition: background 0.2s;
}

    .custom-access-btn:focus {
        outline: 3px solid #00bfff;
        background: rgba(255,255,255,0.2);
    }

    .custom-access-btn:hover {
        background: rgba(255,255,255,0.1);
    }


/*.question-info-toggle {
    cursor: pointer;
    position: relative;
    user-select: none;
    transition: color 0.2s ease;
}
*/








    /*.question-info-toggle:hover {
        color: var(--dark-petrol);
        text-decoration: underline;
    }

    .question-info-toggle:focus {
        outline: 2px solid var(--dark-petrol);
        outline-offset: 2px;
        border-radius: 5px;
    }

    .question-info-toggle::before {
        content: " ▼";
        font-size: 1.0em;
        color: #666;
        margin-right: 10px;
        transition: transform 0.3s ease;
        display: inline-block;*/ /* Important for transform to work */
    /*}*/

    /* Default state - arrow points down */
    /*.question-info-toggle[aria-expanded="false"]::before {
        transform: rotate(0deg);*/ /* Down arrow */
    /*}*/

    /* Expanded state - arrow points up */
    /*.question-info-toggle[aria-expanded="true"]::before {
        transform: rotate(180deg);*/ /* Up arrow */
    /*}*/


.question-info-block {
    max-height: 2000px;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 1;
    padding-top: 0px;
}

    /* Ensure info blocks have consistent behavior */
    .question-info-block.collapsed {
        max-height: 0;
        opacity: 0;
        transition: max-height 0.3s ease-in, opacity 0.3s ease-in;
    }

    .question-info-block:not(.collapsed) {
        display: flex !important;
    }


.question {
    position: relative;
    scroll-margin-top: 20px;
}

.scroll-anchor {
    position: absolute;
    top: -20px;
    visibility: hidden;
    pointer-events: none;
    height: 1px;
    width: 1px;
}


.question-info-card {
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
    margin-top: 20px;
    margin-left: 40px;
    margin-right: 40px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .question-info-card {
        margin-left: 20px;
        margin-right: 20px;
    }
}