.main-bonus-wrapper {
    background: var(--dark-green) !important;
    padding:46px 0;padding-top: 110px;

}

body .main-bonus-wrapper .main_title{
    font-size: 38px !important;
    text-align: center; color:#fff;
}
.main-bonus-wrapper .main_title_sub{
    font-size: 18px !important;
    text-align: center;
}
.gov-bonus-cal-wrapper{
    width: 75%;
    max-width: 90%;
    margin: 40px auto;
}
.colum-left {
    margin-right: 32px;
    margin-left: -16px;
}
.calculator_wrapper .input_warpper{
    padding:32px;
    background:#fff;
    border-radius: 20px;
}

.calculator_wrapper .accordian { border-radius: 0;  padding: 0;  background: none;}

.app_download .button  {background:var(--dark-green); color:var(--teal)}
#gov-bonus-cal-wrapper {
    width: 87%;
    margin: 0 auto;
}
.input_warpper p {
    overflow:hidden;
}
.input_warpper p label {
    font-size: 20px;
    font-weight: bold;
    float: left;
    width: 300px !important;
}

.input_warpper #deposit_val,
.input_warpper #income_val,
.input_warpper #outgoings_val {
    float: right;
    background: #EBF3F5;
    padding: 4px 15px;
    letter-spacing: -0.24px;
    color: #006279;
    font-weight: normal;
    outline:none;
    text-align: center;
    font-size: 24px;
    width:100px;
    border-radius: 8px !important;
}

.help-btn {
    color: #00c2b5;
    border: 1px solid #00c2b5 !important;
    padding: 10px 1em;
    height: auto;
    line-height: 1;
}

#calculator .ui-slider-horizontal {
    height: 0.5em;
}

body .calculator_wrapper .pension-calc-input {
    float: right;
    border-radius: 20px;
    background: var(--seafoam);
    padding: 9px 32px;
    letter-spacing: -0.14px;
    color: #022828;
    font-weight: bold;
    outline: none;
    border: 2px solid transparent;
    text-align: center;
    font-size: 28px;
	width: 132px;}

.rangeslider--horizontal {
    height: 10px !important;
    background: #b3e7e4 !important;
    border-radius: 3px !important;
}

#calculator .rangeslider--horizontal .rangeslider__handle {
    background: #00c2b5 !important;
    width: 29px !important;
    top: -10px !important;
    height: 29px !important;
}

.rangeslider__fill {
    background: #00c2b5 !important;
}

.rangeslider__handle {
    width: 30px;
    top: -12px !important;
    height: 30px;
    box-shadow: none !important;
}

input:focus + .ui-slider-handle, input:focus + .rangeslider__handle {border:2px solid;}

.pension-income-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 40px;
}

.input_warpper p input#mc_deposit_help_popup,
.input_warpper p input#mc_income_help_popup,
.input_warpper p input#mc_outgoings_help_popup {
    color: #00c2b5;
    border: 1px solid #00c2b5;
    height: 36px;
    line-height: 17px;
    font-size: 17px;
    background: #fff;
    float: left;
    padding: 8px;
    cursor: pointer;
    -webkit-appearance: none;
    outline:none;
    border-radius: 8px;
    width:177px;
    transition:all 0.4s ease;
    font-weight: bold;
}

body .input_warpper p input[type=button]:hover{
    background:var(--dark-green)  !important;
	color:white !important;
}


.main-mortgage-wrapper hr {
    background: var(--dark-green);
    height: 1px;
    border: none;
    margin: 30px 0 30px;
}

.main-mortgage-wrapper .result_explained hr {
    margin: 15px 0;
}

.main-mortgage-wrapper .calculator_wrapper .app_desc .text-wrapper,
.main-mortgage-wrapper .calculator_wrapper .app_download .text-wrapper {
    width: 80%;
}

.main-mortgage-wrapper .calculator_wrapper .app_desc {
    padding-bottom: 20px !important;
/*     background-image:url(../images/mb-mortgage-calc-owl.png); */
    background-position: bottom 0px right 30px;
    background-size: 60px;
    background-repeat: no-repeat;
}

.main-mortgage-wrapper .calculator_wrapper .app_download {
    padding-top: 0px !important;
}

.calculator_wrapper .govt_policy {
    background: #fff;
    border-radius: 20px;
    padding: 18px 32px;
    margin: 20px 0;
}
.calculator_wrapper .govt_policy p {
    margin: 0;
    font-size: 17px;
}

[class*="loader-"] {
    display: inline-block;
    width: 1em;
    height: 1em;
    color: inherit;
    vertical-align: middle;
    pointer-events: none;
    margin-left: 10px;
}

.loader-03 {
    border: .2em solid #B3E8E5;
    border-bottom-color: transparent;
    border-radius: 50%;
    animation: 1s loader-03 linear infinite;
    position: relative;
}

@keyframes loader-03 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.calculator_wrapper .result_wrapper {
    padding: 30px !important;
    border-radius: 0 !important;
    background-color: #ffffff !important;
}

.calculator_wrapper > .result_wrapper:last-child {
    padding: 50px 0 0 !important;
}

.calculator_wrapper .result_wrapper--image {
    text-align: center !important;
    background-position: center bottom !important;
    background-size: 101% !important;
    background-repeat: no-repeat !important;
}

.calculator_wrapper .result_wrapper--top {
    border-radius: 20px 20px 0 0 !important;
}

body .calculator_wrapper .result_wrapper--bottom {
    border-radius: 0 0 20px 20px !important;
    background: var(--teal) !important;
    color: var(--dark-green) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.calculator_wrapper .result_wrapper--bottom .linkTextingWidget .linkTextingInput {
    border: 0 !important;
    border-radius: 10px !important;
    height: 56px !important;
}

.calculator_wrapper .result_wrapper--bottom .promptWrapper .linkTextingButton {
    top: 9px !important;
    min-width: 108px !important;
    font-size: 11pt !important;
    border-radius: 7px !important;
    height: 38px !important;
    line-height: 30px !important;
    width: 136px !important;
}

.calculator_wrapper .result_wrapper--bottom > div {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 30px;
    padding-right: 30px;
    text-align: left;
}


.calculator_wrapper .result_wrapper--bottom h3 span {
text-decoration: underline;
}

.calculator_wrapper .result_wrapper--bottom h3,
.calculator_wrapper .result_wrapper--bottom p {
    color: var(--dark-green) !important;
}

.calculator_wrapper .result_wrapper--topbot {
    border-radius: 20px !important;
}

.calculator_wrapper .result_wrapper .the_results .divider {width: 2px; height: 146px;background: #ebf3f5;align-self: center; position: relative;  display: none; }
.calculator_wrapper .result_wrapper .the_results .divider:before {content: '+';background: white; padding: 5px; align-self: center; font-weight: bold; font-size: 30px; margin: -12px; line-height: 1;}
.calculator_wrapper .result_wrapper .the_results { margin-top:20px; display: flex; justify-content: space-between; _align-items: center; gap:30px;  }
.calculator_wrapper .result_wrapper .additional_result { display: none; }

.calculator_wrapper .total_you_get{
    padding: 32px 32px 1px;

    color:#fff;
    border-radius:0 0 20px 20px;
    font-weight:bold;
    position:relative;
    background: #e34592;
    background: -moz-linear-gradient(45deg,  #e34592 0%, #873dad 100%);
    background: -webkit-linear-gradient(45deg,  #e34592 0%,#873dad 100%);
    background: linear-gradient(45deg,  #e34592 0%,#873dad 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e34592', endColorstr='#873dad',GradientType=1 );

}
.calculator_wrapper .total_you_get .text-wrapper{
    background: url(../images/brank@2x.png)no-repeat;
    background-position: bottom right;
    background-size: 50%;
    padding-bottom: 40px;

}
.calculator_wrapper h2{
    font-size: 30px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
}
.calculator_wrapper p.small_desc{
    font-size: 20px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
}
.calculator_wrapper span.currency { margin-right: -7px;}

.calculator_wrapper h2.weekly_deposit , .calculator_wrapper h2.additional_weekly_deposit {
    font-size: 40px !important;
    margin: 22px 0 14px;
}
.calculator_wrapper p.desc_result {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
}
.calculator_wrapper .total_you_get p.small_desc{
    font-size: 20px;
    font-weight: bold;
}
.calculator_wrapper .total_you_get .total_bonus{
    font-size: 40px;
    color:#fff;
}
.calculator_wrapper .total_you_get #view_breakdown {
    font-size: 17px;
    padding: 0px 20px;
    line-height: initial;
    background: transparent;
    font-weight: 500;
    color: #fff;
    border: 1px solid #fff;
    cursor: pointer;
    outline:none;
    font-weight:bold;
    height: 36px;
    width:177px;
    border-radius:8px;
}
.calculator_wrapper .total_you_get #view_breakdown:hover { background: #ffffff24;}

.calculator_wrapper .total_you_get .promptWrapper .linkTextingButton {
    top: 12px;border-radius:9px;
}
.calculator_wrapper .total_you_get .promptWrapper .linkTextingInput{
    height: 60px;color:var(--dark-green); border-radius:9px;
}
.calculator_wrapper .total_you_get .linkTextingWidget .linkTextingError {
    font-family: inherit;
    color: #fff;
}
.calculator_wrapper .promptWrapper .promptContent{
    margin: 0;
}
.calculator_wrapper .linkTextingWidget{
    margin: 0px 0 30px;
}
.calculator_wrapper .break_btn{
    margin: 0;
}
.rangeslider--horizontal {
    height: 14px;
    background: #a4dce0;
    box-shadow: none;
    margin: 32px 0 30px;
}
.rangeslider__fill {
    background: #00C2B5;
    box-shadow: none;
}
.rangeslider__handle:after {
    display: none;
}
.rangeslider--horizontal .rangeslider__handle {
    width: 40px;
    top: -15px !important;
    height: 40px;
    background: #00C2B5;
    border: 1px solid #00C2B5;
    -webkit-transition: -moz-transform 0.3s ease;
    -moz-transition: -webkit-transform 0.3s ease;
    transition: transform 0.1s ease, box-shadow 0.2s ease-out;
    -moz-box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);

}

.rangeslider--horizontal .rangeslider__handle:hover {transform: scale(1.05);background:#05aaa1;box-shadow: 0px 0 0px 7px #ebf3f5c7;}

.dep_errmsg,
.inc_errmsg,
.out_errmsg{
    display: none;
    color: red;
    font-size: 12px;
    text-align: center;
    padding: 5px 0 0;
    clear: both;
}

.calculator_wrapper .the_results .result{
    width: 40%;
}
.calculator_wrapper .result_wrapper .additional_result {
    width: 45%;
}

.tooltip { max-width: 24px;
    background: #00c2b5;
    width: 24px;
    height: 24px;
    line-height: 25px;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    color: white;
    vertical-align: 10px;
    padding-right: 1px;}

/* *********** Popup Design ********** */

.breakdown h3 {font-size:38px}
.breakdown h4 {margin-bottom:5px; font-size:17px !important; color:#006179; font-weight: 200; }
.breakdown .swal2-title {text-align:center !important}
.breakdown .swal2-title p { margin-bottom: 7px; font-size: 20px;}

.swal2-header{
    width: 82%;
}
.swal2-close {
    color: #00c2b5 !important;
    font-size: 40px !important;
    margin: 10px !important;
    outline: none !important
}
.swal2-popup {
    border-radius: 9px !important;
}

.swal2-terms #swal2-content {
    font-size: 14px !important;
}

.swal2-terms #swal2-content h3 {
    font-size: 24px !important;
    margin-bottom: 9px !important;
    margin-top: 22px;
}

.swal2-terms #swal2-content hr {
    height: 1px !important;
}


body div#swal2-content {
    font-size: 17px !important;
    line-height: 26px !important;
    color: var(--dark-green) !important;
    text-align:left;
}
body .swal2-styled.swal2-confirm {
    border-radius: 9px !important;
    background-color: var(--teal) !important;
    font-size: 16px !important;
    width: 100% !important;
    padding: 0 !important;
}
.swal2-title {
    display: block !important;
    width: 100%;
    margin-bottom: 20px !important;
    font-size: 28px !important;
    text-align: left !important;
    margin: 12px 0 .4em !important;
    color: var(--dark-green) !important;

}
.swal2-title hr, #swal2-content hr{
    background: #B2CFD6 ;
    height: 2px;
    border: none;margin-bottom: 5px;
}
.breakdown_popup_content{
    display: none;
}
.your_setting h4{
    text-align: left !important;
    font-size: 20px !important;
    margin-bottom: 5px;
  
}
.your_setting p{

    text-align: left;
}

.popup_weekly_deposit {
    padding: 16px 0px;
    overflow: hidden;
}
.popup_weekly_deposit .left{
    float: left;
    color: #006179;
    font-size: 16px;
    margin: 0;
}
.popup_weekly_deposit .right {
    float: right;
    font-weight: bold;
    font-size: 20px;
    color: #006179;
    margin: 0;
}
.popup_mortgage{
    color: #fff;
    padding: 17px 27px;
    overflow: hidden;
    background: #ab40a2;
    /* background: -moz-linear-gradient(bottom,  #873dad 0%, #e34592 100%);
    background: -webkit-linear-gradient(bottom,  #873dad 0%,#e34592 100%);
    background: linear-gradient(to bottom,  #873dad 0%,#e34592 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#873dad', endColorstr='#e34592',GradientType=1 ); */
    position: relative;
    margin: 0 -31px;
}
.popup_mortgage:before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    /* border-left: 20px solid #873dad;
    border-right: 0px solid transparent;
    border-bottom: 40px solid transparent;
    border-top: 40px solid transparent; */
    border-left: 13px solid #873dad;
    border-right: 0px solid transparent;
    border-bottom: 46px solid transparent;
    border-top: 46px solid transparent;
    height: 0px;
}
.popup_mortgage .left{
    float: left;
    margin: 0;
    font-size: 16px;
    padding-left: 4px;
}
.popup_mortgage .left p{
    margin: 0; margin-bottom:5px;
}
.popup_mortgage .right,.popup_interest .right{
    margin: 0;
    float: right;
    color: #006179;
    font-size: 20px;
    font-weight:bold;
}
.popup_mortgage .right {
    margin: 0;
    font-size: 20px;
    color: #fff;
}
.popup_interest {
    overflow: hidden;
    padding: 20px 0;
}
.popup_interest .left{
    float: left;
    margin: 0;
    font-size: 16px;
    width:70%
}
.popup_interest .left p {
    color: #66a0af;
    margin: 0;
}
.popup_interest .left p.interest_subtitle,.popup_interest .left p.other_interest_subtitle  {
    color: #66a0af;
    margin: 0;
    font-size: 14px;
}
#swal2-content hr.bold {
    height: 2px !important;
}
.desktop_view{
    display:block;
}
.mobile_view{
    display:none;
}
.text_fine {font-size: 14px; max-width: 100%; margin-top: 15px;}





.main-mortgage-wrapper .calculator_wrapper .result_wrapper--image h2 {
    font-size: 46px;
}

.main-mortgage-wrapper .calculator_wrapper .result_wrapper--image h4 {
    font-size: 20px;
}

.mortgage_ltv_info i {
    color: #ffffff;
    background-color: #00c2b5;
    height: 21px;
    width: 21px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    font-size: 13px;
    float: right;
}
@media (max-width: 767px){
    .result_wrapper--bottom .bg-image {
        position: unset !important;
        margin-top: 40px;
        border-radius: 0;
    }

    .calculator_wrapper .result_wrapper--image {
        text-align: center !important;
        background-position: bottom !important;
        background-size: 100% !important;
        background-repeat: no-repeat !important;
    }

    .colum-right {
        margin-top: 30px;
    }

    .app_download {
        display: none !important;
    }

    .main-mortgage-wrapper .calculator_wrapper .result_wrapper.app_desc {
        border-radius: 20px !important;
    }

    .grid {
        flex-direction: column;
    }
    .desktop_view{
        display:none;
    }
    .mobile_view{
        display:block;
    }
    .gov-bonus-cal-wrapper{
        width: 90%;
    }
    .main-bonus-wrapper .top_header {
        background: none !important;
        padding: 0 8px 0 10px;
    }
    .main-bonus-wrapper .main_title {
        font-size: 30px;
    }
    .col-md-6 {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .colum-left {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
    .calculator_wrapper .input_warpper {
        padding: 15px;
        box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.1);
        position: relative;
        border-radius: 10px;    padding-bottom: 2px;
    }
    .input_warpper p label {
        font-size: 15px !important;
        width: 60% !important;
    }

    .pension-calc-input {
        font-size: 20px !important;
        width: 80px !important;
        height: 30px !important;
        line-height: 30px !important;
    }

    .input_warpper #deposit_val,
    .input_warpper #income_val,
    .input_warpper #outgoings_val {
        font-size: 20px;
        width: 90px;
        padding: 0;
        text-align: center;
    }

    .rangeslider--horizontal .rangeslider__handle {
        width: 30px;
        top: -10px !important;
        height: 30px;}

    .rangeslider--horizontal { height: 11px; }

    .calculator_wrapper .result_wrapper {
        padding: 30px 20px 25px 20px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        margin-top: -8px;
    }
    .calculator_wrapper h2 {
        font-size: 20px;
        letter-spacing: 0;
    }
    .calculator_wrapper p.small_desc {
        font-size: 16px;
    }
    .calculator_wrapper h2.weekly_deposit, .calculator_wrapper h2.additional_weekly_deposit {
        font-size: 30px !important;
    }
    .calculator_wrapper .total_you_get .total_bonus { font-size: 30px;  width: 36%;  position: absolute; right: 0;  top:15%	}

    .main-bonus-wrapper {background-image:none}
    .calculator_wrapper .govt_policy p {font-size:14px !important}
    h2.swal2-title {font-size:24px !important}
    .swal2-content, .swal2-header, .swal2-actions { padding: 0 8px 8px 8px!important;}
    .swal2-close {  font-size: 34px !important;}
    .input_warpper p input#deposit_help_popup, .input_warpper p input#deposit_year_popup, .calculator_wrapper .total_you_get #view_breakdown {font-size:12px !important; height: 28px !important;  width: 140px; line-height: 11px;}
    .calculator_wrapper .govt_policy {padding: 18px 20px !important;}
    .calculator_wrapper .total_you_get {padding: 24px 20px 0px;}
    .calculator_wrapper .total_you_get .text-wrapper { background-size: 153px;}
    .main-mortgage-wrapper .text_desc {font-size: 16px; max-width: 100%;}
    .main-mortgage-wrapper h3.text_desc {
        font-size: 20px;
    }
    .main-mortgage-wrapper .text_fine {font-size: 14px; max-width: 100%; margin-top: 15px;}
    .popup_mortgage {margin: 0 -20.5px; padding:17px 18px}
    .calculator_wrapper .result_wrapper .the_results {display:block}
    .calculator_wrapper .result_wrapper .the_results .divider {  height: 2px;  width: 100%; display: block;  margin: 30px 0;}
    .calculator_wrapper .result_wrapper .the_results .divider:before{margin: 0 auto;  display: block;  width: 17px;  height: 10px;  padding: 11px;   line-height: 11px;
        margin-top: -15px;  position: absolute;  left: 42%;}
    .text-prompt { display: none;}
    .calculator_wrapper .the_results .result, .calculator_wrapper .result_wrapper .additional_result {  width: 90%; }
}



@media (max-width: 320px)
{
    .calculator_wrapper .total_you_get .text-wrapper { background-size: 120px;}
    .input_warpper p label { font-size: 15px;   width: 163px;}

}


@media only screen and (min-device-width : 500px) and (max-device-width : 1500px) {
    .gov-bonus-cal-wrapper {
        width: 90%;
    }

    .colum-left {
        margin-right: 20px;
        margin-left: -10px;
    }

    .input_warpper p label {
        width: 50%;
    }

    .input_warpper p .pseudo-element {
        position: relative;
    }

    .input_warpper p .pseudo-element {
        width: 32%;
        display: block;
        float: right;
    }

    .input_warpper #deposit_val,
    .input_warpper #income_val,
    .input_warpper #outgoings_val {
        font-size: 22px;
        padding: 6px 14px;
        height: 30px;
        font-family: inherit;
        width: 85%;
    }

    .calculator_wrapper .text-prompt {
        display: none;
    }
}

.ui-slider-horizontal .ui-slider-handle {
    width: 29px !important;
    top: -10px !important;
    height: 29px !important;
    background: #00C2B5 !important;
    transition: transform 0.1s ease, outline 0.2s ease-in, box-shadow 0.2s ease-out !important;
    border-radius: 40px !important;
    border: 0 !important;
    
}

.ui-slider-horizontal .ui-slider-handle:hover {
    outline: 8px solid rgba( 255, 255, 255, 0 ) !important;
    transform: scale(1.05);
}

.ui-widget.ui-widget-content {
    border: 0 !important;
}

.ui-slider-horizontal .ui-slider-range {
    background-color: #00C2B5 !important;
}

.ui-widget-content {
    background: #B3E8E5 !important;
}

#calculator .top_header {
    margin-top: 50px;
    margin-bottom: 80px;
}

#calculator .main_title_sub {
    max-width: 1000px;
    margin: 0 auto;
}

h1 { color:#fff}

/**
 * Chart legend
 */

.chart-legend {

}

.chart-legend__item {
    display: inline-flex;
    align-items: center;
    margin-right: 30px;
    margin-top: 30px;
    font-size: 15px;
}

.chart-legend__item__indicator {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 22px;
    background-color: #d9d9d9;
}

.chart-legend__item.projected-pot .chart-legend__item__indicator {
    background-color: #FF6385;
}

.chart-legend__item.target-pot .chart-legend__item__indicator{
    background-color: #62A1FF;
}

.chart-legend__item__pot {
    margin-left: 10px;
    line-height: 1;
}

/* Customize the label (the container) */
.radio-containers {
    display: flex;
    align-items: center;
}

.radio-container {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 12px;
    cursor: pointer;
    /* font-size: 17px; */
    line-height: 1;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-right: 20px;
}

/* Hide the browser's default radio button */
.radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom radio button */
.checkmark {
    /* position: absolute; */
    /* top: 0; */
    /* right: 0; */
    height: 25px;
    width: 25px;
    border: 2px solid var(--dark-green);
    border-radius: 50%;
    display: flex;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    margin-left: 13px;
    flex-shrink: 0 !important;
}



/* On mouse-over, add a grey background color */
.radio-container:hover input ~ .checkmark {
    background-color: transparent;
}

/* When the radio button is checked, add a blue background */
.radio-container input:checked ~ .checkmark {
    background-color: white;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio-container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radio-container .checkmark:after {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--dark-green);
    border: 3px solid var(--teal);
}

.radio-container.dark input:checked ~ .checkmark {
    background-color: var(--dark-green);
}

.radio-container.dark .checkmark {
    border-color: var(--dark-green) !important;
}

.radio-container.dark .checkmark:after {
    border-color: white !important;
    background: var(--dark-green) !important;
}

.input_warpper p input#two_thirds_popup, .input_warpper input#terms_explained, .input_warpper p input#two_thirds_popup {
    color: var(--dark-green);
    background: var(--teal);
    height: 36px;
    line-height: 17px;
    font-size: 17px;
    float: left;
    padding: 8px 16px;
    cursor: pointer;
    -webkit-appearance: none;
    outline: none;
    border-radius: 28px;
    border: 2px solid transparent;
    font-weight: bold;
}

#calculator .accordian {
    border: 0 !important;
}

#calculator .accordian_single {
    border-radius: 8px !important;
    border: 1px solid #BAD5DB;
    box-sizing: border-box;
}

#calculator .accordian_single:focus-within { border: 2px solid var(--dark-green);}

#calculator .radio-container:focus-within { outline: 1px solid var(--teal);  outline-offset: 10px;}
#calculator .toggle:focus-within label  {border: 2px solid var(--dark-green);}

#calculator .accordian_single .accordian-label {
    background: #fff !important;
    font-size: 16px !important;
    padding: 20px !important;
    border-radius: 8px !important;
    border: 0 !important;
    color: var(--dark-green) !important;
    align-items: center !important;
}

#calculator .toggle input[type=checkbox]{
    height: 0;
    width: 0;
    opacity:0;
   
}

#calculator .toggle label {
    cursor: pointer;
    text-indent: -9999px;
    width: 60px !important;
    height: 32px;
    background: grey;
    display: block;
    border-radius: 100px;
    position: relative;
}

#calculator .toggle label:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 28px;
    height: 28px;
    background: #fff;
    border-radius: 90px;
    transition: 0.3s;
    box-shadow: 0 0 4px rgb(0 0 0 / 30%);
}

#calculator .toggle input:checked + label {
    background: var(--teal) ;
}

#calculator .toggle input:checked + label:after {
    left: calc(100% - 2px);
    transform: translateX(-100%);
}

#calculator .toggle label:active:after {
    width: 26px;
}

#calculator .accordian-content table {
    width: 100%;
    border-spacing: 0px;
}

#calculator .accordian-content table thead {
    background-color: var(--dark-green);
    color: #fff;
}

#calculator .calculator_wrapper {
    display:flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

.result_wrapper--bottom {
    overflow: hidden !important;
}

.result_wrapper--bottom .results_wrapper_image {
    position: relative;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
    height: 100%;
}

.result_wrapper--bottom .bg-image {
    position: absolute;
    bottom: 0 !important;
    height: auto;
    width: 100%;
    left: 0;
    border-radius: 18px;
}

#calculator .calculator_wrapper > .result_wrapper--bottom {
    flex: 1;
}

#calculator .accordian-content table tbody td,
#calculator .accordian-content table thead th {
    padding: 0.6em 1em;
}

#calculator .accordian-content table thead th:not(:last-child) {
    border-right: 1px solid var(--dark-green);
}

#calculator .accordian-content table tbody td {
    border-right: 1px solid #BAD5DB;
    border-bottom: 1px solid #BAD5DB;
}

#calculator .accordian-content table tbody tr td:last-child {
    border-right: 0;
}

#calculator .accordian-content table tbody tr:last-child td {
    border-bottom: 0 solid var(--teal);
}

#calculator .what-do-others-spend-in-retirement p {
    padding: 0.1em 1em;
}

#calculator .accordian_single .accordian-label::after {
   
}

#calculator .accordian_single .accordian-label:hover::after {
 color: var(--teal) !important;
}

#calculator .what-do-others-spend-in-retirement .accordian-content {
    padding: 0 !important;
}

#calculator .what-is-the-state-pension {
    margin-top: 30px;
}

#calculator .accordian_single input:checked ~ .accordian-content {color:var(--dark-green); border:0}

.swal2-popup {
    padding: 30px 20px !important;
}

.swal2-styled.swal2-confirm {
    /*margin-top: 30px;*/
}

.accordian_single input:checked + .accordian-label::after,
.accordian_single .accordian-label:hover::after {
    color: var(--dark-green)  !important;
}

#layout_accordian .accordian_single input:checked + .accordian-label::after,
#layout_accordian .accordian_single .accordian-label:hover::after {
    color: #66A0AF  !important;
}

#calculator .scroll-to-top {
    display: none;   color: #00c2b5;    text-decoration: none;}

#calculator .col-5 {
    width: 50% !important;
}

@media only screen and ( min-width: 768px ) and ( max-width: 1300px ) {
    .input_warpper p label {
        font-size: 16px !important;
    }
}

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

    #calculator .scroll-to-top {
        font-weight: 600;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        position: fixed;
        bottom: 100px;
        padding: 15px 30px;
        color: #00b4a9;
        border-radius: 50px;
        left: 0;
        right: 0;
        margin: 0 auto;
        background: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        max-width: 160px;
        line-height: 1;
        font-size: 0.9em;
    }

    #calculator .scroll-to-top svg {
        margin-left: 7px;
    }

    .pension-income-wrapper.contributions .radio-containers {
        justify-content: space-between;
    }
    .pension-income-wrapper.contributions .radio-container {
        flex-shrink: 0;
    }
    .pension-income-wrapper.contributions .radio-container .checkmark {
        width: 20px !important;
        height: 20px !important;
    }
    .pension-income-wrapper.contributions .radio-container .checkmark:after {
        width: 10px !important;
        height: 10px !important;
    }
    .pension-income-wrapper.contributions label {
        font-size: 15px;
    }

    .pension-income-wrapper.contributions {
        flex-wrap: wrap;
    }

    .pension-income-wrapper.contributions .pseudo-element {
        margin-left: auto;
    }

    .calculator_wrapper .input_warpper {
        padding-bottom: 20px !important;
    }
}

@media only screen and ( min-width: 1200px ) {
    .results_wrapper_image {
        padding-bottom: 160px !important;
    }
}

@media only screen and ( min-width: 1400px ) {
    .results_wrapper_image {
        padding-bottom: 190px !important;
    }
}

#calculator input::-webkit-outer-spin-button,
#calculator input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
#calculator input[type=number] {
    -moz-appearance: textfield;
}

@media only screen and (min-width: 768px) and (max-width: 968px) {

}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    #calculator .radio-containers .radio-container {
        font-size: 15px;
    }

    #calculator .pension-calc-input {
        float: right !important;
        background: #EBF3F5 !important;
        padding: 4px 14px !important;
        letter-spacing: -0.24px !important;
        color: #006279 !important;
        outline: none !important;
        text-align: center !important;
        font-size: 21px !important;
        width: 80px !important;
        border-radius: 9px !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 900px) {
    #calculator .pension-income-wrapper.contributions {
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
    }

    #calculator #workplace-contributions {
        margin-top: 15px;
    }

    #calculator .calc-header {
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1248px) {
    #calculator .input_warpper p .pseudo-element {
        width: 55%;
    }

    #calculator .pseudo-element.toggle label {
        float: right;
    }

    #calculator .radio-containers {
        flex-wrap: wrap;
    }

    .pension-income-wrapper.contributions {
        flex-wrap: initial !important;
    }
    #calculator .radio-containers .radio-container {
        text-align: left;
        display: block;
    }

    #calculator .radio-containers .radio-container .checkmark {
        margin-right: 10px;
        margin-left: 0;
        float: left;
        position: relative;
        top: -6px;
    }

    #calculator .radio-containers .radio-container:last-child {
        margin-bottom: 0;
    }
}