/* ============================== Global =================================*/
.mh-90{
    max-height: 90%;
}
.z-99{
    z-index:99;
}
.f-family{
    font-family: Helvetica Neue;
}
.fw-700{
    font-weight: 700;
}
.f-34{
    font-size: 34px !important;
}
.f-40{
    font-size: 40px !important;
}
.f-45{
    font-size: 45px;
}
.f-50{
    font-size: 50px;
}
.f-64{
    font-size: 64px !important;
}
.left-20{
    left: 20%;
}
.start-25px{
    left: 25px;
}
.start-20{
    left: 20%;
}
.bottom-33{
    bottom: -33px;
}
.position-absolute.center{
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}
.mh-55{
    max-height: 55%;
}
.w-35{
    width: 35%;
}
.w-45{
    width: 45%;
}
.lh-normal{
    line-height: normal;
}

/* ============================ Calculation style ===============================*/
.calculation-progress {
    border-radius: 10px;
    background: #D9D9D9;
    height: 10px;
}

.calculation-progress-bar {
    border-radius: 10px;
    background: linear-gradient(90deg, #AA1B17 0%, #DA331E 100%);
    height: 8px;
    margin-left: 1px;
}

.calculation-progress-bar-wrapper {
    border-bottom-right-radius: 1.3rem;
    border-bottom-left-radius: 1.3rem;
}
/* ============================ Alert Effect ===============================*/
.alert-height{
    height: 40px;
}
.alert-position{
    bottom:107.5px;
}
/* ============================ Button Effect ===============================*/
/* button.choice:hover, 
button.choice:focus,
.button-needs[data-required="selected"],
.button-needs.selected {
    background-image: url('/images/needs/hover-coverage.png');
    background-repeat: no-repeat;
    background-position: center bottom 8%;
    background-size: 80%;
} */

/* ============================ Gender Selection ===============================*/
.left-center{
    bottom: 50%;
    left: 10%;
}
.right-center{
    bottom: 50%;
    right: 10%;
}
/* ============================ Needs Home ===============================*/
.bg-needs-home{
    background-image: url(/images/needs/background/bg-home-needs.png);
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
}
.needs-home-wrapper{
    display: grid;
    grid-template-columns: 100%;
    grid-gap: 0px;
    grid-template-areas: 
    "needs-home-contents";
    grid-template-rows: 85vh;
}
.needs-home-contents{
    grid-area: needs-home-contents;
    grid-template-columns: 100%;
    display: grid;
    grid-template-rows: 100%;
}
.needs-home-avatar-wrapper{
    display: grid;
    grid-template-columns: 100%;
    grid-gap: 0px;
    grid-template-areas: 
    "needs-home-avatars"
    "needs-home-text";
    grid-template-rows: 80% 20%;
}
.needs-home-avatars{
    grid-area: needs-home-avatars;
    display: grid;
    grid-template-columns: repeat(3, 15% 70% auto);
    grid-template-rows: 100%;
}
.needs-home-text{
    grid-area: needs-home-text;
    grid-template-columns: 100%;
}
.needs-stand-bg{
    padding:140px;
}
.needs-stand-bg.error-padding{
    padding:150px;
}
.bg-btn_bar{
    background-color: #E9E9E9;
}
/* =========== Protection Home Page ==============*/
#protection-home .needs-home-contents{
    grid-template-rows: 100%;
}
/* =========== Education Home Page ==============*/
#education-home .bg-needs-home-element{
    background-image: url(/images/needs/education/home/bg-education-home-element.png);
    background-repeat: no-repeat;
    background-position: center top 15%;
    background-size: 80%;
}
/* ============= Retirement Homepage =============*/
#retirement-home .needs-stand-bg{
    padding: 175px;
}
/* ============= Investment Home =================*/
#investment-home .needs-home-avatar-wrapper{
    grid-template-rows: 81% 19%;
}
#retirement-home .bg-needs-home{
    background-image: url(/images/needs/retirement/home/retirement-bg.png);
}

.bg-investment-home-element{
    background-image: url('/images/needs/investment/home/investment-home-ele.png');
    background-repeat: no-repeat;
    background-size: 25%;
    background-position: left 10% top 12%;
}
.inv_avatar{
    left: 50%;
    transform: translateX(-50%);
}
/* ============ Health and Medical  Home ==========*/
#health-medical-home .needs-stand-bg{
    padding: 155px;
}
#hospital-room-selection .bg-btn_bar{
    background-color: #D9D9D9;
}
.bg-hm-home-element{
    background-image: url('/images/needs/health-medical/home/hnm-home-ele.png');
    background-repeat: no-repeat;
    background-size: 65%;
    background-position: center top 10%;
}

/* ====== Health and Medical  & Debt Cancellation Home =====*/
#health-medical-home .needs-home-avatars,
#debt-cancellation-home .needs-home-avatars{
    grid-template-columns: 100%;
}
/* ===========  Debt Cancellation Home =========== */
#debt-cancellation-home .needs-stand-bg,
#investment-home .needs-stand-bg,
#education-home .needs-stand-bg{
    padding: 180px;
}

/* =============================== Needs Master Selection Plain Page ===============================*/
.wrapper-needs-master-full-default {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: 100%;
    grid-template-areas:
        "header-needs-default"
        "content-needs-default";
    grid-template-rows: 15% 85%;
}
.bg-needs-master-full{
    background-image: url('/images/needs/background/bg-master-needs-gap.png');
    background-repeat: no-repeat;
    background-size: 85%;
    background-position:center top 40%;
}
.header-needs-default {
    grid-area: header-needs-default;
    grid-template-columns: 100%;
}
.content-needs-default {
    grid-area: content-needs-default;
    grid-template-columns: 100%;
    display: grid;
    grid-template-areas:
        "content-block"
        "warning"
        "footer-needs-default";
    grid-template-rows:  auto 5.5vh 15vh;
}
.content-block{
    grid-area: content-block;
    grid-template-columns: 100%;
    display: grid;
    grid-template-areas:
    "header-content-coverage"
    "selection-content-coverage";
    grid-template-rows: 10% 90%;
}
.header-content-coverage{
    grid-area: header-content-coverage;
    grid-template-columns: 100%;
    display: grid;
}
.selection-content-coverage{
    grid-area: selection-content-coverage;
    grid-template-columns: 100%;
    display: grid;
    grid-template-rows: 100%;
}

/* ============================ Needs Coverage Page ======================================*/
/* .coverage_slick .slick-slide button,
.savings_coverage .slick-slide button{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 88% 12%;
    grid-template-areas:
        "coverage-image"
        "coverage-text";
    grid-gap: 0px;
    align-items: end;
} */
.slick-padding{
    padding: 3rem 3rem 0px 3rem;
}
.coverage-image {
    grid-area: coverage-image;
    grid-template-columns: 100%;
    
}
.coverage-text {
    grid-area: coverage-text;
    grid-template-columns: 100%;   
}
.coverage-text strong{
    line-height:1;
}
.warning{
    grid-area: warning;
    grid-template-columns: 100%;
}
.footer-needs-default {
    grid-area: footer-needs-default;
    grid-template-columns: 100%;
}
/* =========== Education Coverage ====================*/
#education-coverage .coverage_slick .slick-slide button{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 10% 80% 10%;
    grid-template-areas:
        "coverage-age"
        "coverage-image"
        "coverage-text";
    grid-gap: 0px;
    align-items: end;
}
.coverage-age{
    grid-area: coverage-age;
    grid-template-columns: 100%;
    font-size: 20px;
    border-radius: 17.5px;
    background:linear-gradient(90deg, #66B560 0%, #2272B6 100%);
    width: 100px;
    height: 35px;
}
/* ============= Health and Medical Selection =================*/
.hnm-selection button{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 90% 10%;
    grid-template-areas:
        "coverage-image"
        "coverage-text";
    grid-gap: 0px;
}
.plant .position-absolute.center{
    top:60%;
}
/* ========= Health and Medical Planning Hospital Selection =============*/
.hospital .position-absolute.center {
    top: 58%;
}

/* ============================  Needs Full Content Page =================================*/
.wrapper-needs-full-master-default{
    display: grid;
    grid-gap: 0px;
    grid-template-columns: 100%;
    grid-template-areas:
        "header-needs-default"
        "content-full-master-default";
    grid-template-rows: 19vh 67.5vh;
}
.content-full-master-default{
    grid-area: content-full-master-default;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: 100%;
    grid-template-areas:
    "full-content"
    "alert-support";
    grid-template-rows: 93% auto;
}
.full-content{
    grid-area: full-content;
    grid-template-columns: 100%;
    display: grid;
    grid-template-rows: 100%;
}

/* ============ Supporting Years - Calendar ========= */
#calendar .position-absolute.center{
    top: 55%;
}
.calendar{
    max-width: 36%;
}

/* ============================  Needs Half Content Page =================================*/
.bg-half-content{
    background-image: url('/images/needs/background/bg-half-master.png');
    background-repeat: no-repeat;
    background-size: 95%;
    background-position: bottom left;
}
.bg-half-master{
    background-image: url('/images/needs/background/bg-master-needs.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position:left center;
}
.wrapper-needs-half-master-default {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: 100%;
    grid-template-areas:
        "header-needs-default"
        "content-half-master-default";
    grid-template-rows: 19vh 67.5vh;
}
.content-half-master-default{
    grid-area: content-half-master-default;
    display: grid;
    grid-gap: 0px;
    grid-template-columns: 100%;
    grid-template-areas:
    "half-master-content"
    "alert-support";
    grid-template-rows: 93% auto;
}
.half-master-content{
    grid-area: half-master-content;
    grid-template-columns: 100%;
    display: grid;
    grid-template-rows: 100%;
}
.alert-support{
    grid-area: alert-support;
}
.needs-half-master-content {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: auto;
    grid-template-rows: 100%;
}
/* ============== Protection Existing Policy ========== */
#protection-existing-policy .image-content-spacing{
    grid-template-rows: 5% 93%;
}
.hide-content{
    opacity:0;
}
.image-content-spacing{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 5% 80%;
    grid-template-areas:
        "avatar-text"
        "avatar-img";
    grid-gap: 0px;
}
.avatar-img {
    grid-area: avatar-img;
    grid-template-columns: 100%;
}
/* .avatar-text {
    grid-area: avatar-text;
    grid-template-columns: 100%;
} */

/* =========== Risk Profile =========== */
#savings-risk-profile .image-content-spacing,
#investment-risk-profile .image-content-spacing{
    grid-template-rows: 5% 95%;
}

/* ===============================  Risk Profile =======================================*/
#savings-risk-profile .content-block,
#investment-risk-profile .content-block{
    grid-template-areas:
        "risk-header"
        "risk-selection"
        "risk-content";
    grid-template-rows: 10% 20% 70%;
}
.risk-header{
    grid-area: risk-header;
    grid-template-columns: 100%;
    display: grid;
}
.risk-selection{
    grid-area: risk-selection;
    grid-template-columns: 100%;
    display: grid;
}
.risk-content{
    grid-area: risk-content;
    grid-template-columns: 100%;
    display: grid;
}
.risk-btn{
    /* background:rgba(238, 238, 238, 1); */
    border:1px solid rgba(240, 240, 240, 1);
    color:rgba(10, 4, 60, 0.50);
    font-size: 22px;
    font-weight: 700;
    width: 301px;
    height: 85px;
}
.risk-btn:hover,
.risk-btn[data-required="selected"],
.risk-btn.selected{
    background: #C0232C;
    border: 1px solid #A0A0A0;
    color: #fff;
}
.risk-potential-title{
    font-size: 18px;
    font-family: 'Helvetica Neue';
    line-height: 22px;
}
.potential-btn{
    background-color: #fff;
    border: 1px solid #A0A0A0;
    width: 100px;
    height: 57px;
    font-size: 22px;
}
.potential-btn:hover,
.potential-btn[data-required="selected"],
.potential-btn.selected{
    border: 1px solid #C0232C;
}
.potential-btn.border-start-0.border-end-0:hover,
.potential-btn.border-start-0.border-end-0[data-required="selected"],
.potential-btn.border-start-0.border-end-0.selected{
    border-left: 1px solid #C0232C !important;
    border-right: 1px solid #C0232C !important;
}
/* =============================== Retirement Ideal Page ===============================*/
#retirement-ideal .coverage_slick .slick-slide button, .savings_coverage .slick-slide button {
    grid-template-rows: 85% 15%;
}
#retirement-ideal button.choice:hover, 
#retirement-ideal button.choice:focus, 
#retirement-ideal .button-needs[data-required="selected"], 
#retirement-ideal .button-needs.selected{
    background-position: center bottom;
}
#retirement-ideal .slick-padding{
    padding: 0px;
}
/* =============================== Retirement Retire Age Page ===============================*/
.bg-retire-age{
    background-image: url('/images/needs/retirement/retire-age/bg-retire-age.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position:left top;
}
/* ========================== Education Existing Fund ========================*/
#education-existing-fund p{
    font-size: 20px;
}
/* ========================== Education Others ========================*/
.bg-education-others{
    background-image: url('/images/needs/education/background/bg-education-other.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position:left bottom 28%;;
}
/* ==========================  Annual Return ====================*/
.tabung-wrapper{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 20% 80%;
    grid-template-areas:
        "tabung-title"
        "tabung-content";
    grid-gap: 0px;
}
.tabung-title{
    grid-area: tabung-title;
    grid-template-columns: 100%;
}
.tabung-content{
    grid-area: tabung-content;
    grid-template-columns: 100%;
}
/* =============================== Health and Medical Critical Monthly Support =======================================*/
.bg-hnm {
    background: url(/images/needs/health-medical/background/bg-critical-monthly-support.png);
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: top -22% left -2%;
}
/* ========================== Health and Medical Planning Hospital Selection ====================*/
#medical-hospital-selection .content-block {
    grid-template-rows: 15% 85%;
}

/* ===================== Health and Medical Planning Room Selection ======================*/
#hospital-room-selection .needs-stand-bg{
    padding: 100px;
}
.wrapper-room-selection{
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 15% 75%;
    grid-template-areas:
        "room-selection-title"
        "room-selection-content";
    grid-gap: 0px;
}
.room-selection-title{
    grid-area: room-selection-title;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
    display: grid;
}
.room-selection-content{
    grid-area: room-selection-content;
    display: grid;
    
    grid-template-rows: 100%;
}
.single.room-selection-content {
    grid-template-columns: 20% 55% 25%;
}
.couple.room-selection-content {
    grid-template-columns: 38% 24% 38%;
}
.roommate{
    padding: 0 12px;
    width: 100%;
    max-width: 100%;
    bottom: -22%;
}
.patient,
.patient-2 {
    grid-template-areas:
        "windows"
        "avatar-patient";
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 10% 90%;
}
.windows{
    grid-area: windows;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
}
.avatar-patient{
    grid-area: avatar-patient;
    grid-template-columns: 100%;
    grid-template-rows: 100%;
}
.single-patient,
.single-patient-2{
    display: flex;
    padding: 0;
}
.single-patient{
    justify-content: start;
}
.single-patient-2{
    justify-content: end;
}

/* ===================== Needs Master Summary Page ======================*/
.wrapper-needs-summary-default {
    display: grid;
    grid-gap: 0px;
    grid-template-columns: 100%;
    grid-template-areas:
        "header-needs-default"
        "content-summary-default";
    grid-template-rows: 13% 87%;
}
.content-summary-default{
    grid-area: content-summary-default;
    grid-template-columns: 100%;
    display: grid;
    grid-template-rows: 84.5%;
}
.graph-wrapper{
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 100%;
    grid-template-areas:
        "summary-graph"
        "summary-title";
    grid-template-rows: 90% 10%;
}
.summary-graph{
    grid-area: summary-graph;
    grid-template-columns: 100%;
}
.summary-title{
    grid-area: summary-title;
    grid-template-columns: 100%;
}
.summary-value{
    color:#C21B17;
    text-align: right;
}
.text-correct{
    color: #14A38B;
}
#gap .circle{
    filter: drop-shadow(0px 0px 6px #FFEEE2) drop-shadow(0px 20px 20px rgba(150, 217, 227, 0.3));
}
#gap .circle__medium{
    filter: none;
}
#gap .circle__small{
    filter: none;
}
.scrollable-content{
    overflow-x: hidden;
    overflow-y: auto;
}

/* ===================== Form Control Text Field ======================*/
.currencyinput {
    border-bottom: 3px solid #000;
    color: #C21B17;
    font-weight: 700;
}
.currencyinput input {
    border: 0;
}
.money::placeholder{
    font-size: 34px;
    color: #C21B17;
    font-weight: bold;
}
.form-control.money {
    color: #C21B17;
    font-weight: 500;
}
/* Hide the default radio buttons */
.needs-radio {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 0;
    height: 0;
    margin: 0;
}
  
/* Create the custom radio button using ::before pseudo-element */
.needs-radio + label {
    position: relative;
    padding-left: 40px; /* Space for the custom radio button */
    cursor: pointer;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
}
  
.needs-radio + label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 28px; /* Adjust the width and height to change the size */
    height: 28px;
    border: 1px solid #A0A0A0; /* Border color for the circular radio button */
    background-color: #fff; /* Background color when the radio button is not selected */
}
  
  /* Style the custom radio button when it is selected */
.needs-radio:checked + label::before {
    background-color: #fff;  /* Change the background color when selected */
}
  
/* Add a tick symbol using ::after pseudo-element when radio button is selected */
.needs-radio:checked + label::after {
    content: "\2713"; /* Unicode for the tick symbol */
    position: absolute;
    left: 6px; /* Adjust positioning of the tick symbol */
    top: 1px;
    font-size: 18px; /* Adjust font size to control the size of the tick symbol */
    color: #C21B17; /* Color of the tick symbol */
}

/* =============== Summary Overview ============= */
.chart-wrapper {
    display:grid;
    grid-auto-rows: 100%;
    grid-auto-columns:100%;
    grid-template-areas:
        "overview-graph";
}
.overview-graph{
    grid-area: overview-graph;
    grid-auto-rows: 100%;
    grid-auto-columns:100%;
    display: grid;
}
#overview-new h2.display-5{
    font-size: 26px;
    line-height: normal;
}

table {
    font-family: 'Helvetica Neue', sans-serif;
}
#overview-new .wrapper-overview{
    grid-template-rows: 16vh 69vh 15vh;
}
#overview-new .navbar-brand.py-md-5{
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}
#overview-table th{
    color: #707070;
    font-size: 18px;
    line-height: 22px;
}
#overview-table thead, #overview-table tbody, #overview-table tfoot, #overview-table tr, #overview-table td, #overview-table th{
    padding: 15px 10px;
}
#overview-needs tbody, #overview-needs tr, #overview-needs td{
    padding: 10px;
}
#overview-needs tbody td:first-child{
    font-size: 22px;
    line-height: 150%;
    padding-right: 32px;
}
#overview-table tbody tr:nth-child(odd) {
    background-color: #F3F3F3;
}
#overview-table tbody td,
#overview-needs tbody td:last-child{
    font-size: 22px;
    font-weight: 700;
    line-height: 150%;
}
#overview-table tbody td:last-child{
    color: #C0232C;
}

/* Media Query - Mobile (screen size max 767px) */
@media only screen and (max-width: 360px){
    .col-xs-10{
        flex: 0 0 auto;
        width: 83.33333333%;
    }
}
@media only screen and (max-width: 400px){
    #health-medical-home .needs-home-avatar-wrapper{
        grid-template-rows: 75% 25%;
    }
}
@media only screen and (max-width: 592px){
    #retirement-home .needs-home-avatar-wrapper{
        grid-template-rows: 85% 15%;
    }
    .mw-mob{
        max-width: 100% !important;
    }
    .saving-tabung{
        max-height: 100% !important;
    }
}
@media only screen and (max-width: 600px){
    .content-needs-default{
        grid-template-rows: auto 5vh 12vh;
    }
    #health-medical-selection .slick-padding{
        padding: 15px 15px 0px 15px;
    }
}
@media only screen and (min-width: 597px) and (max-width: 767px){
    .saving-tabung{
        height: 80% !important;
    }
}
@media only screen and (max-width: 600px) and (max-height: 699px){
    .content-needs-default {
       grid-template-rows: auto 7vh 16vh !important;
    }
}
@media only screen and (max-width: 600px) and (min-height: 700px) and (max-height: 760px){
    .content-needs-default {
        grid-template-rows: auto 6.5vh 14.5vh !important;
    }
}
@media only screen and (max-width: 600px) and (min-height: 761px) and (max-height: 798px){
    .content-needs-default {
        grid-template-rows: auto 5.5vh 14vh !important;
    }
}
@media only screen and (min-width: 600px) and (max-width: 797px) and (min-height: 800px){
    .content-needs-default  {
        grid-template-rows: auto 5vh 11vh;
    }
}
@media only screen and (min-width: 600px) and (max-width: 797px) and (min-height: 1000px){
    .content-needs-default  {
        grid-template-rows: auto 4.5vh 10.5vh;
    }
}
@media only screen and (max-width: 600px) and (min-height: 799px) and (max-height: 860px){
    .content-needs-default {
        grid-template-rows: auto 5.5vh 13vh !important;
    }
    .coverage_slick .slick-slide button{
        grid-template-rows: 92% 8%;
    }
}
@media only screen and (max-width: 700px){
    .pb-7{
        padding-bottom: 90px;
    }
}
@media only screen and (max-width: 767px){
    #health-medical-home .needs-stand-bg{
        padding: 180px;
    }
    #health-medical-home .needs-stand-bg.error-padding{
        padding: 190px;
    }
    .f-34{
        font-size: 25px;
    }
    #education-home .start-20{
        max-width: 100%;
        transform: translate(-50%, -50%);
        top: 58%;
        left: 50%;
    }
    .mob-align-top{
        align-items: start !important;
    }
    .money::placeholder{
        font-size: 16px;
    }
    .needs-monthly{
        grid-template-rows: 90%;
    }
    #education-existing-fund p{
        font-size: 16px;
    }
    .calculation-progress-bar-wrapper {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }
}
@media only screen and (max-width: 600px) and (min-height:861px) and (max-height: 900px){
    .coverage_slick .slick-slide button{
        grid-template-rows: 92% 8%;
    }
}

/* Media Query - Medium device (screen size max 1024px) */
@media only screen and (min-width: 768px) and (max-width: 1024px){
    .needs-home-wrapper{
        grid-template-rows: 90vh;
    }
    #retirement-home .needs-home-wrapper{
        grid-template-rows: 92vh;
    }
    .needs-stand-bg.error-padding {
        padding: 190px;
    }
    .needs-stand-bg{
        padding: 180px;
    }
    #investment-home .needs-stand-bg,
    #education-home .needs-stand-bg,
    #protection-home .needs-stand-bg {
        padding: 250px;
    }
    #investment-home .needs-stand-bg.error-padding,
    #education-home .needs-stand-bg.error-padding,
    #protection-home .needs-stand-bg.error-padding {
        padding: 270px;
    }
    #savings-home .needs-stand-bg{
        padding: 200px;
    }
    #savings-home .needs-stand-bg.error-padding{
        padding: 210px;
    }
    .content-needs-default {
        grid-template-rows: auto 4vh 8vh;
    }
    /* button.choice:hover, button.choice:focus, .button-needs[data-required="selected"], .button-needs.selected {
        background-position: center bottom 16%;
    } */
    .needs-monthly{
        grid-template-rows: 90%;
    }
}

/* Overview graph */
@media only screen and (max-width: 439px){
    #overview-new #gap svg{
        position: absolute;
    }
    #overview-new #gap .card-gap__percent{
        height: 390px;
    }
}
@media only screen and (min-width:768px) and (max-width: 850px){
    #overview-new #gap svg{
        position: absolute;
    }
    #overview-new #gap .card-gap__percent{
        height: 390px;
    }
    
}
@media only screen and (min-width: 768px) and (max-width: 992px) and (min-height: 1200px){
    #retirement-home .needs-home-avatar-wrapper {
        grid-template-rows: 85% 15%;
    }
    #retirement-home .needs-stand-bg{
        padding: 220px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) and (min-height: 900px){
    #savings-home .needs-stand-bg,
    #health-medical-home .needs-stand-bg {
        padding: 250px !important;
    }
    #savings-home .needs-stand-bg.error-padding,
    #health-medical-home .needs-stand-bg.error-padding {
        padding: 260px !important;
    }
    #savings-risk-profile .content-half-master-default,
    #investment-risk-profile .content-half-master-default{
        grid-template-rows: 94.6% auto;
    }
}
@media only screen and (max-width: 1199px){
    .first-order{
        order:1;
    }
    .second-order{
        order:2;
    }
}
@media only screen and (min-width:1100px) and (max-width: 1199px){
    .needs-monthly {
        grid-template-rows: 100%;
        height: 63%;
    }
}
@media only screen and (min-width: 768px) and (max-width: 992px) and (min-height: 800px) and (max-height: 1050px){
    .content-needs-default {
        grid-template-rows: auto 4vh 11vh !important;
    }
    .image-content-spacing{
        grid-template-rows: 10% 80% !important;
    }
    .needs-monthly{
        grid-template-rows: 68% !important;
    }
}
@media only screen and (min-width: 768px) and (max-width: 992px) and (min-height: 1059px) and (max-height: 1199px){
    .content-needs-default {
        grid-template-rows: auto 4.5vh 9.8vh !important;
    }
}
@media only screen and (min-width: 768px) and (max-width: 992px) and (min-height: 1200px){
    .content-needs-default {
        grid-template-rows: auto 4vh 8.5vh !important;
    }
}
@media only screen and (min-width: 900px) and (max-width: 1100px) and (max-height: 600px){
    .needs-home-wrapper{
        grid-template-rows: 80vh;
    }
    .content-needs-default {
        grid-template-rows: auto 8vh 18vh !important;
    }
    #needs-content .col-12.col-xl-6{    
        flex: 0 0 auto;
        width: 50%;
    }
    #needs-content .first-order{
        order: 2;
    }
    #needs-content .second-order{
        order: 1;
    }
    #needs-monthly-content .second-order{
        order: 1;
    }
}
@media only screen and (min-width: 900px) and (max-width: 1100px) and (min-height: 1200px){
    #retirement-home .needs-home-avatar-wrapper{
        grid-template-rows: 83% 17%;
    }
    #retirement-home .needs-stand-bg{
        padding: 250px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1100px) and (max-height:800px){
    .needs-home-wrapper{
        grid-template-rows: 86vh;
    }
    #retirement-home .needs-home-wrapper {
        grid-template-rows: 85vh;
    }
    #savings-home .needs-home-avatar-wrapper {
        grid-template-rows: 75% 15%;
    }
    #investment-home .mh-90 {
        max-height: 85%;
    }
    .needs-stand-bg{
        padding: 130px;
    }
    .needs-stand-bg.error-padding{
        padding: 140px;
    }
    #health-medical-selection .needs-stand-bg{
        padding: 180px;
    }
    #health-medical-selection .needs-stand-bg.error-padding{
        padding: 190px;
    }
    .content-needs-default {
        grid-template-rows: auto 6vh 14vh;
    }
    #needs-content .col-12.col-xl-6{    
        flex: 0 0 auto;
        width: 50%;
    }
    #needs-content .first-order{
        order: 2;
    }
    #needs-content .second-order{
        order: 1;
    }
    .needs-monthly{
        grid-template-rows: 100%;
        height: 65% !important;
    }
    #needs-monthly-content .col-12.col-xl-6{    
        flex: 0 0 auto;
        width: 50%;
    }
    #needs-monthly-content .first-order{
        order: 2;
    }
    #needs-monthly-content .second-order{
        order: 1;
    }
}
@media only screen and (max-width: 992px){
    .calendar-wrapper{
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: auto 60% auto;
        grid-template-areas:
            "calendar-text"
            "calendar-content"
            "calendar-text2";
        grid-gap: 0px;
    }
    .calendar-text {
        grid-area: calendar-text;
        grid-template-columns: 100%;
        justify-content: center !important;
    }
    .calendar-content {
        grid-area: calendar-content;
        grid-template-columns: 100%;
        display: grid !important;
        grid-template-rows: 100%;
    }
    .calendar-text2 {
        grid-area: calendar-text2;
        grid-template-columns: 100%;
        justify-content: center !important;
    }
}
@media only screen and (max-width: 1024px){
    .needs-home-avatars{
        grid-template-columns: repeat(3, 0% 100% 0%);
    }
    #hospital-room-selection .needs-stand-bg{
        padding: 140px;
    }
    #hospital-room-selection .needs-stand-bg.error-padding{
        padding: 150px;
    }
    .bg-needs-master-full{
        background-size: cover;
    }
    #debt-cancellation-home .coins{
        width: 35%;
    }
    #debt-cancellation-home .left-20{
        left: 3%;
    }
    #education-home .start-25px{
        left: 0px;
    }
    .bg-hm-home-element{
        background-size: 100%;
        background-position: center top 40%;
    }
    .single.room-selection-content {
        grid-template-columns: 0% 100% 0%;
    }
    .bg-half-content{
        background-size: cover !important;
    }
    .calendar{
        max-width: 70%;
    }
    .bg-retire-age{
        background-size: cover;
    }
    .bg-hnm{
        background-size: cover;
        background-position: top left 15%;
        background-repeat: no-repeat;
        background: linear-gradient(rgba(0, 0, 0, 0.03) 100%, rgba(255, 255, 255, 0) 0%),url(/images/needs/health-medical/critical-illness/monthly-support/bg-critical-monthly-support.png);
    }
    .p-mb-0{
        padding: 0px;
    }
}
@media only screen and (min-width: 768px){
    .w-md-50{
        width:50%;
    }
    .vh-md-100{
        height: 100vh;
    }
}
@media only screen and (min-width: 768px) and (max-width: 1200px){
    #debt-cancellation-home .needs-stand-bg {
        padding: 210px;
    }
    .slick-slide{
        max-height: 100%;
    }
    .mt-md-6{
        margin-top: 4rem;
    }
}

/* Media Query - Large device (screen size max 1500px) */
@media only screen and (min-width: 1025px) and (max-width: 1280px) and (max-height: 700px){
    .content-needs-default {
        grid-template-rows: auto 6.5vh 15.5vh;
    }
}
@media only screen and (min-width: 1025px) and (max-width: 1280px) and (max-height: 840px){
    .needs-home-avatars {
        grid-template-columns: repeat(3, 10% 75% auto);
    }
    #savings-home .needs-home-avatars {
        grid-template-columns: repeat(3, 8% 80% auto);
    }
    .content-needs-default {
        grid-template-rows: auto 5.5vh 13.5vh;
    }
    #needs-content .col-12.col-xl-6{    
        flex: 0 0 auto;
        width: 50%;
    }
    #needs-content .first-order{
        order: 2;
    }
    #needs-content .second-order{
        order: 1;
    }
}
@media only screen and (min-width: 1025px) and (max-width: 1280px) and (min-height: 900px){
    .needs-home-wrapper{
        grid-template-rows: 88vh;
    }
    .needs-home-avatar-wrapper {
        grid-template-rows: 85% 15%;
    }
    #savings-home .needs-home-avatars {
        grid-template-columns: repeat(3, 5% 90% auto);
    }
    .content-needs-default {
        grid-template-rows: auto 5.5vh 11.4vh;
    }
}
@media screen and (min-width: 1200px) and (max-width: 1400px) {
    .single.room-selection-content{
        grid-template-columns: 20% 50% 30%;
    }
}
@media screen and (min-width: 1250px) {
    #health-medical-selection .needs-stand-bg{
        padding: 155px;
    }
    #health-medical-selection .needs-stand-bg.error-padding{
        padding: 165px;
    }
}
@media only screen and (min-width: 1366px) and (max-width: 1399px) and (min-height: 1000px){
    .content-needs-default {
        grid-template-rows: auto 4.5vh 10.5vh !important;
    }
}
@media only screen and (min-width: 1400px) and (min-height: 900px){
    .content-needs-default {
        grid-template-rows: auto 5.5vh 12vh;
    }
}
@media screen and (min-width: 1600px) {
    .needs-home-wrapper{
        grid-template-rows: 88vh;
    }
    #protection-home .needs-home-wrapper {
        grid-template-rows: 86vh;
    }
    .needs-home-avatar-wrapper,
    #investment-home .needs-home-avatar-wrapper{
        grid-template-rows: 85% 15%;
    }
    #retirement-home .needs-stand-bg,
    #health-medical-home .needs-stand-bg.error-padding{
        padding: 200px;
    }
    #retirement-home .needs-stand-bg.error-padding{
        padding: 210px;
    }
    #health-medical-home .needs-stand-bg{
        padding: 190px;
    }
    .content-needs-default {
        grid-template-rows: auto 4.5vh 11.2vh;
    }
    .plant .position-absolute.center{
        top:70%;
    }
    .single.room-selection-content{
        grid-template-columns: 17% 60% 23%
    }
    .col-xxxl-5 {
        flex: 0 0 auto;
        width: 41.66666667%;
    }
}
@media screen and (min-width: 2000px) {
    .needs-home-wrapper{
        grid-template-rows: 90vh;
    }
    #protection-home .needs-home-wrapper{
        grid-template-rows: 91.5vh;
    }
    #protection-home .needs-home-avatar-wrapper {
        grid-template-rows: 90% 10%;
    }
    .needs-stand-bg,
    #hospital-room-selection .needs-stand-bg.error-padding{
        padding:190px;
    }
    .needs-stand-bg.error-padding{
        padding:230px;
    }
    #investment-home .needs-stand-bg,
    #education-home .needs-stand-bg,
    #retirement-home .needs-stand-bg,
    #debt-cancellation-home .needs-stand-bg{
        padding: 250px;
    }
    #hospital-room-selection .needs-stand-bg{
        padding: 180px;
    }
    #investment-home .needs-stand-bg.error-padding,
    #education-home .needs-stand-bg.error-padding,
    #retirement-home .needs-stand-bg.error-padding,
    #debt-cancellation-home .needs-stand-bg.error-padding{
        padding: 265px;
    }
    .content-needs-default {
        grid-template-rows: auto 5% 8.7%;
    }
    .plant .position-absolute.center{
        top:80%;
    }
    .hospital .position-absolute.center {
        top: 68%;
    }
    .single.room-selection-content{
        grid-template-columns: 15% 65% 20%;
    }
    .room-selection-content img{
        width:100%;
        height:100%;
    }
    img.roommate{
        width: 100%;
        height: auto;
    }
    .patient img.avatar-patient{
        width: 73%;
        height: auto;
    }
    .patient-2 img.avatar-patient{
        width: 100%;
        height: auto;
    }
    img.windows{
        width: 30%;
        height: auto;
    }
}