.mi-trash{
    width: 92px!important;
    margin-left: 12px;
    margin-bottom: 5px;
}
.rcfi-hour{
    position: relative;
    display: flex;
    gap: 40px;
}

.rcfi-hour span{
    display: block;
    width: calc((100% - 40px)/2);
}

/* myinfo */
.modal.sp-mi-popup{
    background-color: #F4F2EC!important;
    border-radius: 20px!important;
    padding: 48px!important;
    max-width: 486px!important;
}

.sp-mi-popup-wrapper{
    position: relative;
    display: flex;
    flex-direction: column;

}
.sp-mi-img{
    width: 100%;
    max-width: 36px;
    margin: 0 auto;
}
.sp-mi-header{
    color: #161616;
    font-size: 22px;
    font-weight: bold;
    margin-top: 32px;
}
.sp-mi-sub{
    margin-top: 8px;
}

.sp-mi-sub-ita{
    margin-top: 18px;
    font-style: italic;
    font-size: 14px;
}

.renhancement-section-wrapper .steps-text {
    position: relative;
    width: 100%;

    display: flex;
    align-items: center;
    gap: 6px;
}

.myinfo-wrapper{
    position: relative;
    display: inline-flex;
    margin-left: 12px;
        align-items: flex-end;
}

.myinfo-wrapper:hover{
    cursor: pointer;
}

.myinfo-wrapper img{
    width: 100%;
    max-width: 130px;
    max-height: 50px;
    height: 100%;
}


.ty-text-max-width{
max-width: 960px;
    margin: 0 auto;
}
.cfwfoot a{
    color: var(--keppel-red);
    display: initial
}

/* KDHCS */
.kdhcs-hero-wrapper{
    position: relative;
    margin-top: 0;
}

.kdhcs-hero-wrapper .header{
    font-size: 32px;
    margin-top: 18px;
}
.pb-48{
    padding-block: 48px!important;
}
.kdhcs-ps-wrapper{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.kdhcs-ps-wrapper .bolded-number{
    font-weight: 500;
    font-size: 17px;
}
.kdhcs-ps-wrapper .para-content-body{
    font-size: 17px;
}
.mail-to{
    color: black;
    text-decoration: underline;
    
}
/* Residential Sign up Enhancement Form */
.cfw-sub-checkboxes{
    display: flex;
    flex-direction: column!important;
        margin-left: 28px;
            gap: 5px;
}
.cfw-sub-checkboxes .checkbox-txt{
    margin-left: 8px !important;
    
}
  .popup-date-img{
    width: 100%;
  }
#signUpTableBanner.modal a.close-modal {
    top: 16px!important;
    right: 16px!important;
}    
  #signUpTableBanner{
    padding: 40px!important;
  }
.bold.cut-off-date{
	font-weight: 700;
	    text-underline-offset: 2px;
}
  .zoom-container {
    position: relative;
    overflow: hidden;
    display: inline-block;
    cursor: zoom-in;
  }

  .zoom-container img {
    display: block;
    width: 100%; 
    height: auto;
    transition: transform 0.2s ease-out;
    transform-origin: center center;
  }

.no-virtual-tour, .sp-headnote{
    color: #7E7E7E;
    font-size: 14px;
    font-style: italic;
    font-weight: bold;
    margin-top: 10px;
}

.steps-with-sib{
    display: flex;
    align-items: center;
    gap: 12px;
}
.kpl-grey-text.small.italic{
    font-size: 12px;
    font-style: italic;
    padding: 0;
    font-family: 400!important;
    color: #797979!important;
}
.rce-loading-wrapper{
    display: none;
    width: 100%;
    justify-content: flex-end;
}
.rce-loading-inner{
    position: relative;
    display: flex;
    width: auto;
}

#stepThreeLoader .rce-loading-inner{
	margin-top:20px;
}


.loader.rscooling-step-4-loader{
    display: block;
    right: unset !important;
    left: 0;
    top: -23px;
}

.loading-text{
    position: relative;
    margin-left: 35px;
    font-family: 'Fira Sans', sans-serif;
    font-size: 17px;
    font-weight: 400;
}

.autocomplete-suggestions{
    position: absolute;
    z-index: 9;
    background: white;
    width: 100%;
    border: 1px solid #ccc;
    padding: 20px;
    display: none;
    flex-direction: column;
    gap: 12px;
    max-height: 200px;
    overflow-y: scroll;
}
.autocomplete-suggestions.active{
    display: flex;
}

.autocomplete-suggestion:hover{
	cursor:pointer;
}


.contact-form .multiform-form-submit-btn:disabled{
	opacity :0.6;
}


.form-field-split .form-error-message-cntus {
    position: absolute;
    left: 0;
    bottom: -24px;
    font-size: 14px;
    color: #C8102E;
}

#residentialCoolingSignUp #streetName{
    font-size: 14px!important;
}
#residentialCoolingSignUp #blockNo{
    font-size: 14px!important;
}

.paynowwrapper{display: flex;margin-bottom: 32px;}

.paynowlabel{
	display:flex;
	font-weight: 500;
	width: 100%;
}
.paynowtext{
    width: 100%;
    display: flex;
    position: relative;	
	    align-items: center;
}

#paynowtestfield{
	min-height: 20px;
	display: flex;
	    width: 30px !important;
}

.form-field-split .form-error-message-cntus:before {
    content: '';
    background: url(../../default/images/form-field-error-32x32.png) no-repeat;
    width: 16px;
    height: 16px;
    position: relative;
    top: 3px;
    left: 0;
    display: inline-block;
    background-size: 16px 16px;
    margin-right: 5px;
}

.lease-upload-wrapper{
    display: flex;
    width: 100%;
    background-color: white;
    border: 1px solid #DEDEDE;
    border-radius: 4px;
    font-family: "Fira Sans", sans-serif;
    font-size: 17px;
    padding: 0 0 0 15px;
    justify-content: space-between;
    position: relative;
}

.lease-upload-wrapper.error{
    border: 1px solid #C8102E !important;
}

.lease-error-field{
    margin-top: 5px;
    position: relative;
}
.lease-error-message{
    font-size: 14px;
    color: #C8102E;   
}
.lease-error-field .lease-error-message:before {
    content: '';
    background: url(../../default/images/form-field-error-32x32.png) no-repeat;
    width: 16px;
    height: 16px;
    position: relative;
    top: 2px;
    left: 0;
    display: inline-block;
    background-size: 16px 16px;
    margin-right: 5px;
}

.upload-lease-btn:hover{
    cursor: pointer;
}

.upload-lease-btn{
    min-height: 46px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F4F2F2;
    padding: 12px 24px;
}
.upload-lease-btn img{
    margin-right: 8px;
}

.uploaded-lease-txt{
    display: flex;
    justify-content: center;
    align-items: center;
}

.hdb-lease-label{
    align-content: baseline!important;
}

.lease-footnote-wrapper{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 8px;
    gap: 4px;
}
.lease-footnote-header{
    color: #878787;
    font-size: 14px;
    font-style: italic;
    font-weight: 500;
}
.lease-footnote-sub{
    color: #878787;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
}



.kpl-black-text-small{
    max-width: 760px;
    margin: 0 auto;
}
.steps-indicator-wrapper{
    display: flex;
    justify-content: space-between;
    max-width: 1120px;
    margin: 0 auto;
}
.indicator-wrapper#stepsIndicatorText{
    position: relative;
    font-family: "Fira Sans", sans-serif;
    font-weight: 500;
    font-size: 17px;
}
.current-step-text{
     font-family: "Fira Sans", sans-serif;   
     font-weight: 600;
     color: #C8102E;
    font-size: 22px!important;     
    margin-left: 18px;
}

.number-progress-bar{
    position: relative;
    display: flex;
    gap: 60px;
    align-items: center;
}

.step-no{
    position: relative;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    border-radius: 50%;
    border: 1px solid #D5D5D5;
    color: #D5D5D5;
    font-size: 17px;
    font-weight: 500;
}
.step-no.active{
    background: #C8102E;
    border-radius: 50%;
    border: 1px solid #C8102E;
    color: white;
}
/* Line between steps */
.step-no:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    width: 60px;
    height: 1px;
    background-color: #D5D5D5;
    transform: translate(1%, -50%);
    z-index: 0;
}

/* Red line if current step is active */
.step-no.active::after {
    background-color: #C8102E;
}

.step-no.completed{
    background: white;
    border-radius: 50%;
    border: 1px solid #689E74;
    color: #689E74;
    position: relative;
}

.step-no.completed::before{
    content: '';
    background: url('/theme/default/images/multi-step-checked.svg') no-repeat;
    width: 13px;
    height: 10px;
    display: block;
        right: -0.01em;
    position: relative;
}

.step-no.completed span{
    display: none;
}

.step-no.completed::after {
    background-color: #689E74;
}


.red-hr{
    height: 1px;
    width: 100%;
    display: block;
    position: relative;
    background-color: #C8102E;
    max-width: 1120px;
    margin: 0 auto;
    margin-top: 24px;
}

.contact-form.enhancement {
    max-width: 1120px;

}

#residentialCoolingSignUp .step:first-child{
    position: relative;
    width: 100%;
    max-width: 680px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

#residentialCoolingSignUp .step:not(:first-child){
    position: relative;
    width: 100%;
    max-width: 1120px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

#residentialCoolingSignUp .step:first-child{
    margin-top: 30px;
}

.phone-country-code{
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-45%);
    pointer-events: none;
    color: black;
        font-size: 17px;
}

.phone-country-code:after{
    content: '';
    background-color: #DEDEDE;
    height: 45px;
    width: 1px;
    display: block;
    z-index: 999;
    position: absolute;
    right: -13px;
    top: 50%;
    transform: translate(50%, -53%);
}

.contact-form input#contactNumber{
    padding-left: 60px;
}

input.error-label + .phone-country-code:after{
       background-color: #C8102E;
}

.kpl-grey-text{
    font-weight: 500!important;
    color: #696969;
    font-size: 22px;
    font-family: 'Fira Sans', sans-serif;
}
.contact-form .steps-text p.kpl-grey-text:after {
    content: '';
    background: #D0D0D0;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
}
.input-split input#residentFloorNo {
    padding: 0 15px 0 30px;
}
.multistep-btn-wrap.one{
    justify-content: flex-end!important;
}

.multistep-btn-wrap.two{
    justify-content: flex-end!important;
}
.contact-form .multiform-form-submit-btn {
    width: auto;
    display: inline;
    padding: 10px 60px;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    background-color: #C8102E;
    border: none;
    cursor: pointer;
}
.contact-form .multiform-form-submit-btn-back{
    width: auto;
    display: inline;
    padding: 10px 51px;
    font-size: 16px;
    font-weight: 500;
    color: #C8102E;
    background-color: white;
    border: 1px solid #C8102E;
    cursor: pointer;    
}

/* Virtual Tour */
.virtual-tour-wrapper{
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    margin-top: 32px;
    text-align: center;
}
.virtual-tour-iframe{
    width: 100%;
    max-width: 780px;
    height: 400px;
}

.vt-footnote{
    color: #7D7D7D;
    margin-top: 20px;
        text-align: left;
            padding-bottom: 40px!important;
}

.virtual-tour-wrapper iframe .widget.scheme{
    display: none!important;
}
.scheme-kavftig {
    display: none!important;

}

/* Indoor Cooling */
.indoor-cooling-wrapper{
    position: relative;
    display: flex;
    gap: 20px;
    flex-wrap: wrap; 
    margin-top: 32px;  
}

.indoor-flex{
    position: relative;
    width: calc((100% - 20px)/2);
}

.indoor-flex .floor-plan{
    position: relative;
    width: 100%;
    max-width: 540px;
}
.floor-plan-note{
    font-size: 14px;
    text-align: center;
    margin-top: 12px;
}
.energy-rate-wrapper{
    position: relative;
    background-color: #F4F4F4;
    margin-top: 40px;
    display: block;
}
.energy-rate-wrapper.border-rad{
    border-radius: 10px;
}

.er-section-one, .er-section-two{
    padding: 40px;
}
.er-section-one{
    padding-bottom: 12px;
}
.er-section-two{
    padding-top: 14px;
}

.er-txt{
    font-family: 'Fira Sans', sans-serif;
    text-align: center;

}
.er-one{
    color: #C8102E;
    font-size: 17px;
    font-weight: 500;
}

.er-two{
    color: black;
    font-size: 14px;
    font-weight: 600;
    margin-top: 8px;
}

.er-three{
    color: #C8102E;
    font-size: 17px;
    font-weight: 500;
    margin-top: 24px;
}

.er-four{
    color: black;
    font-size: 22px;
    font-weight: 500;
    margin-top: 8px;
}

.er-five{
    color: black;
    font-size: 17px;
    font-weight: 500;
}

.er-six{
    color: black;
    font-size: 17px;
    font-weight: 400;
    margin-top: 8px;
    font-style: italic;
}

.er-seven{
    color: black;
    font-size: 17px;
    font-weight: 400;
    margin-top: 8px;
}

.er-sep{
    height: 1px;
    background-color: #CACACA;
    width: 100%;
}

.selected-room-type-text{
    color: #C8102E;
    font-size: 22px;
    font-weight: 600;
}
.selected-room-type-sub-text{
    margin-top: 6px;
    font-size: 14px;
}
.fcu-button-wrapper{
    position: relative;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.fcu-flex{
    position: relative;
    border: 0.02em solid #C8102E;
    color: #C8102E;
    font-size: 17px;
    font-family: 'Fira Sans', sans-serif;
    font-weight: 500;
    position: relative;
    background-color: white;
    border-radius: 4px;
    padding: 20px 40px 20px 40px;
    width: calc((100% - 20px) / 2);
    text-align: center;
    align-content: center;
}

.fcu-flex:hover{
    cursor: pointer;
}

.fcu-flex.active{
    background-color: #C8102E;
    color: white;
}
.fcu-flex.active span{
    position: relative;
}
.fcu-flex.active span:after{
    content: '';
    position: absolute;
	background: url('/theme/default/images/fcu-checked.svg') no-repeat;
    width: 20px;
    height: 20px;
	display: block;
    right: -15px;
    top: 70%;
    transform: translate(50%, -50%);    
}

.price-wrapper{
    margin-top: 60px;
    font-size: 24px;
}

.modal.indoor-cu-popup{
    background-color: #F4F2EC!important;
    border-radius: 20px!important;
    padding: 48px!important;
    max-width: 486px!important;
}

.indoor-cu-popup-wrapper{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}
.indoor-cu-img{
    width: 100%;
    max-width: 96px;
}
.indoor-cu-header{
    color: #161616;
    font-size: 22px;
    font-weight: bold;
    text-align: center;
}
.indoor-cu-sub{
    margin-top: 12px;
    text-align: center;
}

.indoor-flex-sep{
    height: 1px;
    background-color: #C4C4C4;
    width: 100%;
    display: block;
    margin-block: 40px;
}

.indoor-price-wrapper{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;    
    margin-bottom: 28px;
}
.prw-flex{
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 12px;
}
.fcu-base-price-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}
.fcu-base-text,.fcu-total-price{
    font-weight: 500;
    font-size: 22px;
}
.fcu-base-price{
    font-weight: 500;
    font-size: 22px;  
}

.indoor-price-footnote{
    font-size: 14px;
    font-weight: 500;
    color: #6C6C6C;
    font-style: italic;
    margin-bottom: 28px;
}

/* Step 4 */
.summary-wrapper{
    display: flex;
    position: relative;
    width: 100%;
    gap: 96px;
    margin-top: 32px;
}

.swrapper{
    position: relative;
    display: flex;
    flex-direction: column;
}
.swrapper.pinformation-wrapper{
    width: 100%;

}
.swrapper.psummary-wrapper{
    width: 50%;
    
}
.pflex{
    width: 100%;
}

.pinformation-flex-wrapper{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.pinformation-flex-wrapper.address{
    margin-block: 42px;
}

.pinformation-flex-wrapper.housing-project{
    margin-bottom: 22px;
}
.pinfo-flex{
    display: flex;
    width: 100%;
    font-size: 17px;
    font-family: "Fira Sans", sans-serif;

}
.pflex-left{
   font-weight: 600; 
}
.pflex-right{
   font-weight: 400; 
}


.hdb-lease-wra{
    position: relative;
    display: flex;
    flex-direction: row;
}
.appendedhdbtext{
    font-size: 17px;
    font-family: "Fira Sans", sans-serif; 
    font-weight: 600; 
    width: 100%;
}
.appendedhdblink{
    position: relative;
    width: 100%;
}

.appended-hdb-link{
    position: relative;
    color: #C8102E!important;
    font-size: 17px;
    font-family: "Fira Sans", sans-serif; 
    margin-left: 35px;
    text-decoration: underline;
}
.appended-hdb-link:before{
    content: '';
	background: url('/theme/default/images/red-clip.svg') no-repeat;
	background-size: 100%;
    width: 24px;
    height: 24px;
    left: -35px;
    top: 50%;
    transform: translateY(-50%);
	display: block;
	z-index: 10;
    position: absolute;
}
.check-field-wrapper {
    width: 100%;
    display: block;
    position: relative;
    margin-top: 32px;
}
.cf-text{
    width: 100%;
}
.cfw-text{
    font-size: 17px;
    font-weight: 700;
    margin-top: 20px;
}
.cfw-wrapper{
    display: flex;
    flex-direction: column;
    position: relative;
    margin-top: 8px;
    gap: 8px;
}

.cfw-checkbox-fields{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: start;
}

.cfw-checkbox-fields input{
    font-family: unset!important;
    font-size: unset!important;
    width: unset!important;
    padding: unset!important;
    min-height: unset!important;
    border-radius: unset!important;
    border: unset!important;
}
.cfw-checkbox-fields label{
    margin: unset!important;
    margin-left: 12px!important;
    font-weight: 400!important;
}
.cfw-checkbox-fields label.comm-means{
    margin-left: 5px!important;
}
.checkbox-txt.error-label{
    color: #F74E4E;
}
.checkbox-txt a{
    color: #C8102E!important;
    text-decoration: underline;
}

.cfw-footnote{
    font-size: 14px;
    font-weight: 500;
    color: #5D5D5D;
    font-style: italic;
    margin-top: 24px;
}
.cfw-footnote.indoor-price{
	margin-bottom: 24px;
}
.cfwfoot{
    display: block;
}

.cfw-footnote .bunderline{
    font-weight: bold;
    text-decoration: underline;
}


.cfw-sub-text{
    margin-top: 24px;
    font-weight: 600;
    font-size: 14px;
    position: relative;
    color: #CF0404;
    margin-left: 40px;
}
.cfw-sub-text:before{
    content: '';
	background: url('/theme/default/images/big-red-exc.svg') no-repeat;
    width: 29px;
    height: 29px;
    display: block;
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
}


.selected-fcu-fin-wrapper{
        border-radius: 10px;
    border: 1px solid #DCDCDC;
}

.ffcu-lists{
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 12px 24px 0 24px;
}
.ffcu-flex{
    width: 100%;
    position: relative;
}
.ffcu-sel{
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ffcu-selected-here{
    position: relative;
    font-size: 17px;
        margin-left: 28px;
}
.ffcu-selected-here:before{
    content: '';
	background: url('/theme/default/images/red-checker.svg') no-repeat;
    width: 19px;
    height: 14px;
    display: block;
    position: absolute;
    left: -28px;
    top: 50%;
    transform: translateY(-50%);
}
.ffcu-header{
    font-weight: 500;
    font-size: 17px;
    margin-block: 12px;
}
.fcu-separator{
    height: 1px;
    background-color: #DCDCDC;
    width: 100%;
    margin-block: 22px;
}
.fcu-total-amt{
  font-size: 18px; 
  font-weight: 500;

  position: relative;
  display: flex;
  justify-content: space-between;

  padding: 0px 24px 24px 24px;
}

.cfw-checkbox-fields .checkbox-txt{
    font-size: 17px;
}

.checkbox-error-label .checkbox-txt{
   color: #F74E4E;
}

.error-brick-wrapper{
    position: relative;
    padding: 20px 32px;
    color: white;
    border-radius: 4px;
    background-color: #BD3830;
        margin-top: 32px;
        width: 100%;
}
.error-brick-inner{
    color: white;
    position: relative;
    font-size: 17px;
    margin-left: 32px;
}
.error-brick-inner:before{
    content: '';
	background: url('/theme/default/images/step-4-warning.svg') no-repeat;
    width: 24px;
    height: 24px;
    display: block;
    position: absolute;
    left: -32px;
    top: 50%;
    transform: translateY(-50%);    
}
.desktop{
    display: block;
}
.mobile{
    display: none;
}
.fcu-base-text-small{
	font-size: 18px;
    font-weight: 500;
    color: #6D6D6D;
}

.cfw-checkbox-fields:hover,
.cfw-checkbox-fields .checkbox-check,
.cfw-checkbox-fields .checkbox-txt{
	cursor: pointer!important;
}

#residentialCoolingSignUpEnhBtn{
	padding: 10px 60px;
}
#residentialCoolingSignUpEnhBtn:disabled{
	opacity: 0.6;
}
/* End Of Residential Sign up Enhancement Form */

/* Tablet */
/* @media only screen and (max-width: 705px) {

} */


/* Mobile */
@media only screen and (max-width: 905px) {
.rcfi-hour{
    flex-direction: column;
    gap: 12px;
}

.rcfi-hour span{
    display: block;
    width: 100%;
}

 .renhancement-section-wrapper .steps-text {
        align-items: flex-start;
 }   
    .myinfo-wrapper {
        margin-top: 16px;
        margin-left: 0px;
    }    
    .indoor-flex .mobile{
        text-align: center;
    }
    #signUpTableBanner.modal a.close-modal {
        top: 10px !important;
        right: 9px !important;
    }
#signUpTableBanner {
        padding: 36px 10px !important;
    }
.cfw-checkbox-fields input{
	width: 20px!important;
height: 20px!important;
}	
.fcu-flex{
    border: 1px solid #C8102E;
}	
 .renhancement-section-wrapper{
	     padding-top: 20px!important;
 }
 .indicator-wrapper#stepsIndicatorNumber{
    display: none;
 }
 .virtual-tour-wrapper p:first-child{
    text-align: left;
 }
 .multistep-btn-wrap.two{
    /* justify-content: flex-start !important; */
    /* padding-inline: 20px; */
 }

    .contact-form .multiform-form-submit-btn-back {
        padding: 10px 40px;
    }
    .contact-form .multiform-form-submit-btn {
        padding: 10px 40px;
    }   
    
    .indoor-flex {
        width: 100%;
    }  
    .desktop{
        display: none;
    }
    .mobile{
        display: block;
    }    

    #roomTxtDynamic{
        text-align: center;
    }
    .selected-room-type-sub-text{
        text-align: center;
    }
    .fcu-flex{
        width: 100%;
        padding: 15px 30px 15px 30px;
    }
    .fcu-flex.active{
        padding: 15px 50px 15px 30px;
    }
    .energy-rate-wrapper.mobile{
        margin-bottom: 28px;
                margin-top: 28px;
                        width: 100%;
    }

    .indoor-price-wrapper{
        border: 1px solid #D9D9D9;
        border-radius: 4px;
        padding: 20px 12px;        
    }
    .fcu-base-text, .fcu-total-price {
        font-size: 22px;
    }  
    
    .summary-wrapper {
        gap: 20px;
            flex-wrap: wrap;
    }
    .pinfo-flex{
        flex-wrap: wrap;
        gap: 6px;
        padding-bottom: 16px;
        border-bottom: 1px solid #DFDFDF;
    }

    .pinformation-flex-wrapper .pinfo-flex:first-child .pflex-right{
        display: none;
    }
    .pinformation-flex-wrapper.address .pinfo-flex:first-child .pflex-right{
        display: block;
    } 
    .pinformation-flex-wrapper.housing-project .pinfo-flex:first-child .pflex-right{
        display: block;
    }        
    .pinformation-flex-wrapper.address {
        margin-block: 16px;
    }
    .hdb-lease-wra {
        border-bottom: 1px solid #DFDFDF;
        padding-bottom: 20px;
    }
    .selected-fcu-fin-wrapper.mobile  {
        margin-top: 32px;
        width: 100%;
    }
    .cfw-wrapper {

        gap: 16px;
    }
    .check-field-wrapper {

        margin-top: 12px;
    }   
    
    .hdb-lease-wra {
        flex-direction: column;
        gap: 12px;
    }    
}
@media only screen and (max-width: 632px) {
    .steps-with-sib{
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }
.kpl-grey-text.small.italic {
    padding-bottom: 12px;
}    
}


@media only screen and (max-width: 520px) {
    .current-step-text{
        display: block;
        margin-left: 0;        
    }
    .fcu-base-text{
        font-size: 17px;
    }     
    .fcu-total-price{
        font-size: 22px;
    } 

    #residentialCoolingSignUpEnhBtn {
        padding: 10px 40px;
    }
}

@media only screen and (max-width: 386px) {
    #residentialCoolingSignUpEnhBtn {
        padding: 10px 20px;
    }
}
/* End of Mobile */

/*Alex*/
.grecaptcha-badge{
	z-index: 999;
}

#header .nav-item-wrapper a {
    color: #000;
}

#content-hero {
    padding: 0 40px;
    position: relative;
}

#content-hero .hero-text-wrapper {
    position: absolute;
    padding: 0 60px;
    top: 45%;
    color: #FFF;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 800px;
}

#content-hero .hero-text-wrapper h6 {
    margin-top: 8px;
    font-weight: 400;
}

#content-hero .img-wrapper {
    width: 100%;
    object-fit: cover;
    overflow: hidden;
    max-height: 525px;
    position: relative;
}

#content-hero .img-wrapper img {
	display: block;
    max-height: 525px;
    width: 100%;
    object-fit: cover;
    object-position: center;
	position: relative;
}
.content-hero-credit.desktop-only {
    opacity: 0.6;
    color: white;
    z-index: 10;
    position: absolute;
    left: 1%;
    bottom: 2%;
    display: inline-block;
}
.mobile-only { display: none !important; }

#content-hero .img-wrapper.rsb-logo:before {
    content: '';
    position: absolute;
	background: url('/theme/default/images/HDB_CS1_white.svg') no-repeat;
	background-size: 100%;
    width: 200px;
    height: 69px;
    right: 15px;
    bottom: 18px;
	display: block;
	z-index: 10;
	opacity: 0.6;	
}

#content-hero .img-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
}

.enquire-now {

    display: none;

}

.about-us .content-section:nth-child(1) {
    padding-bottom: 0;
}

.about-us .content-wrapper .content-section.txt-left-img-flow-right {
    padding-top: 55px;
}

.about-us-swiper.swiper .content-section.txt-left-img-flow-right .image-wrapper {
    position: relative;
    height: 600px;
}

.about-us-swiper.swiper .content-section.txt-left-img-flow-right .image-wrapper::after {
    /* content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1), transparent); */
}

.about-us-swiper.swiper .swiper-button-next,
.about-us-swiper.swiper .swiper-button-prev {
    width: 60px;
    height: 60px;
}

.about-us-swiper.swiper .swiper-button-next:after,
.about-us-swiper.swiper .swiper-button-prev:after {
    content: ' ';
    width: 60px;
    height: 60px;
    background-image: url("../images/icon-back-to-top.svg");
    background-repeat: no-repeat;
    background-size: contain;
}

.about-us-swiper.swiper .swiper-button-next:after {
    transform: rotate(90deg);
}

.about-us-swiper.swiper .swiper-button-prev:after {
    transform: rotate(-90deg);
}

.about-us-swiper.swiper .content-section.txt-left-img-flow-right .image-wrapper h6 {
    position: absolute;
    color: white;
    top: 20px;
    left: 20px;
    font-size: 22px;
    font-weight: 500;
    z-index: 2;
}

.about-us.grid-wrapper {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(2, 1fr);
}

.about-us.grid-wrapper .grid-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 10px;
    background: #EDEDED;
    padding: 24px;
    border-radius: 4px;
}

.about-us.grid-wrapper .grid-item * {
    max-width: 500px;
}

.about-us.grid-wrapper .grid-item img {
    width: 67px !important;
}

.solar-panel .content-wrapper .content-section.txt-right-img-flow-left,
.solar-panel .content-wrapper .content-section.txt-left-img-flow-right {
    padding-bottom: 55px;
}

/* Enhancement */
.resi-cooling-enhancement{
	background: #9B1C1C;
}

.rs-enhance-wrapper{
    max-width: 1440px;
    margin: 0 auto;
}
.rc-enhance-header{
	color: #FFF;
    font-size: 32px;
    font-weight: 600;
    text-align: center;
}
.rc-enhance-sub-header{
	color: #FFF;
    font-size: 17px;
    font-weight: 400;
    text-align: center;
    margin-top: 12px;
}
.rc-booking-su-wrapper{
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    margin-top: 20px;
}
.rc-flex-item{
    width: calc((100% - 50px) / 2);
}
.rc-flex-item img{
    width: 100%;
    max-height: 400px;
    object-fit: cover;
}
.rcfi-header{
  	color: #FFF;
    font-size: 22px;
    font-weight: 600;
    margin-top: 12px;
}
.rcfi-sub-header{
  	color: #FFF;
    font-size: 17px;
    font-weight: 400;
    margin-top: 12px;
}

.resi-cooling-enhancement .cta-wrapper{
    display: flex;
    margin-top: 20px;  
}
.resi-cooling-enhancement .cta-wrapper .kpl-btn {
    border: 1px solid #FFF;
    background: unset;
}
.resi-cooling-enhancement .kpl-btn span {
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.energy-charge-sec{
    padding: 70px 20px;
    background-color: #F4F4F4;
}
.energy-charge-sec div{
    font-family: "Fira Sans", sans-serif;
    text-align: center;
}
.ecs-red-title{
    color: #C8102E;
    font-size: 32px;
    font-weight: 600;
}
.ecs-black-title{
    color: black;
    font-size: 46px;
    font-weight: 600;  
    margin-top: 22px;  
}
.hr-line{
    background-color: #CACACA;
    height: 1px;
    width: 100%;
    display: block;
    position: relative;

    max-width: 1440px;
    margin: 0 auto;
        margin-block: 22px;
}

.ecs-black-bold-sub-title{
    color: black;
    font-size: 17px;
    font-weight: 600;   
}

.ecs-black-italic{
    color: black;
    font-size: 17px;
    font-weight: 400; 
    margin-top: 8px;

    font-style: italic;     
}
.ecs-black-sub-title{
     color: black;
    font-size: 17px;
    font-weight: 400; 
        margin-top: 22px; 
}
/* End of enahncement */


.resi-cooling-appt {
	background: #9B1C1C;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #FFF;
	gap: 40px;
	padding: 40px 100px !important;
}
.resi-cooling-appt div.divider {
	border-top: 2px solid #AC2E2E;
	padding-bottom: 25px;
}
.resi-cooling-appt .cta-wrapper {
	display: flex;
	margin-top: 20px;
}
.resi-cooling-appt .cta-wrapper .kpl-btn {
	
	border: 1px solid #FFF;
	background: unset;
}
.project-brochure-sect {
	position: relative;
	width: 100%;
	background: #F8F9FA;
	margin: 0 0 -25px 0;
}
.project-brochure-sect .content-section {
	display: flex;
	flex-direction: column;
    justify-content: center;    
    align-items: center;
	padding: 60px 0;
}
.project-brochure-sect .content-section h4 {
	font-weight: 500;
	color: #000000;
	padding-bottom: 26px;
}
	
/* --------------------------- JP: Newsroom; Career; Contact Us --------------------------- */
/* ---- Newsroom page ---- */
.newsroom-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.newsroom-wrapper .news-filter {
    position: relative;
    display: flex;
    justify-content: flex-end;
}

/* .newsroom-wrapper .news-filter label {
    display: none;
}
.newsroom-wrapper .news-filter select {
    width: 100%;
    max-width: 200px;
    color: #C8102E;
    font-family: "Fira Sans", sans-serif;
    font-size: 17px;
    font-weight: 500;
    border: none;
    border-bottom: 1px solid #C8102E;
    padding: 0 0 9px 0;
    cursor: pointer;
    -moz-appearance:none; 
    -webkit-appearance:none; 
    appearance:none;
    background: transparent;
    background-image: url("../images/select-arrow.svg");
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 4px;
    background-size: 18px;
}
.newsroom-wrapper .news-filter select:focus {
    outline: none;
}
.newsroom-wrapper .news-filter select option {
    color: #C8102E;
    background-color: #ffffff;
} */
.newsroom-wrapper .news-filter label {
    position: relative;
    width: 100%;
    max-width: 200px;
    padding: 0 0 8px 0;
    color: #C8102E;
    font-family: "Fira Sans", sans-serif;
    font-size: 17px;
    font-weight: 500;
    border: none;
    border-bottom: 1px solid #C8102E;
    cursor: pointer;
}

.newsroom-wrapper .news-filter label::after {
    content: ' ';
    position: absolute;
    top: 4px;
    right: 0;
    width: 21px;
    height: 12px;
    background-image: url("../images/select-arrow.svg");
    background-repeat: no-repeat;
    transition: 0.3s all ease;
}

.newsroom-wrapper .news-filter label.active::after {
    transform: rotate(180deg);
}

.newsroom-wrapper .news-filter ul.active {
    display: block;
}

.newsroom-wrapper .news-filter ul {
    position: absolute;
    top: 32px;
    display: none;
    width: 100%;
    max-width: 200px;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #ffffff;
    color: #C8102E;
    font-family: "Fira Sans", sans-serif;
    font-size: 17px;
    font-weight: 500;
    z-index: 3;
}

.newsroom-wrapper .news-filter ul li {
    padding: 8px 0;
    cursor: pointer;
}

.newsroom-wrapper .news-filter ul li:hover {
    background-color: #EDEDED;
}

.newsroom-wrapper .news-listing {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.newsroom-wrapper .news-item {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid #E2E2E2;
}

.newsroom-wrapper .news-item:last-child {
    border-bottom: none;
}

.newsroom-wrapper .news-item .news-date {
    color: #575576;
    padding: 0;
}

.newsroom-wrapper .news-item .news-url {
    color: #000000;
    font-size: 22px;
    font-weight: 600;
    padding: 0 0 30px 0;
}

.newsroom-wrapper .news-item .news-url:hover {
    color: #C8102E;
}

.newsroom-wrapper .news-listing p {
    padding-bottom: 0;
    margin: 24px 0;
}

/* ---- Newsroom page ---- */
/* ---- Newsroom Detail page ---- */
.news-detail-item .content-wrapper {
    padding-top: 0;
}

.news-detail-item .content-section {
    padding-left: 0;
    padding-right: 0;
}

.news-detail-hero {
    position: relative;
}

.news-detail-item #MainContent .content-section {
    padding: 50px 100px 100px 100px;
}

.news-detail-item .share-icon-wrapper p {
    margin: 0;
    padding-bottom: 0;
}

.news-detail-hero .news-header-wrapper {
    max-width: 955px;
}

.news-detail-hero .news-date {
    color: #E7E6ED;
    font-size: 14px;
}

.news-detail-hero .hero-text-wrapper {
    color: #ffffff;
    padding: 50px 100px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    background-image: url(../images/news-detail-template-background.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom right;
}

.news-detail-hero .share-icon-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
}

.news-detail-hero .share-icon-wrapper a:hover {
    transform: translateY(-5px);
    transition-duration: .3s;
    transition-property: transform;
    transition-timing-function: ease-out;
}

.news-cnt {
    position: relative;
    width: 100%;
    max-width: 835px;
}

.news-cnt p {
    font-size: 17px;
    line-height: 130%;
    padding-bottom: 24px !important;
}

.news-cnt figure {
    position: relative;
    padding: 0 0 16px 0;
}

.news-cnt figure img {
    position: relative;
    width: 100%;
}

.news-cnt figcaption {
    color: #817F88;
    font-size: 14px;
    text-align: center;
    padding-top: 8px;
}

.news-cnt-end {
    position: relative;
    width: 100%;
    max-width: 835px;
}

.news-cnt-end p {
    font-size: 17px;
    line-height: 130%;
    text-align: center;
}

/* ---- Newsroom Detail page ---- */
/* ----- Career page ----- */
.unity-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    gap: 40px;
}

.unity-wrapper .unity-item {
    position: relative;
    width: 100%;
    max-width: calc((100% - 80px) / 3);
}

.unity-wrapper .unity-item h6 {
    color: #C8102E;
    margin: 0 0 6px 0;
}

.careers .content-section.txt-left-img-flow-right .text-wrapper p,
.careers .content-section.txt-right-img-flow-left .text-wrapper p {
    font-size: 17px;
}

.policy-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.policy-wrapper h4 {
    font-weight: 600;
    padding: 0;
}

.policy-wrapper .accordion {
    position: relative;
    background-color: #ffffff;
    cursor: pointer;
    padding: 0 24px 30px 0;
    width: 100%;
    border: none;
    border-bottom: 1px solid #E2E2E2;
    text-align: left;
    outline: none;
    font-size: 22px;
    line-height: 24px;
    transition: 0.4s;
}

.policy-wrapper .accordion:after {
    content: '\002B';
    font-size: 32px;
    position: absolute;
    right: 0;
}

.policy-wrapper .active:after {
    content: "\2212";
}

.policy-wrapper .panel {
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.policy-wrapper .panel p {
    padding: 15px 0;
}

/* ----- Career page ----- */
/* ----- Contact Us page ----- */

.contact-form {
    position: relative;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.contact-form .form-field {
    position: relative;
    width: 100%;
}

.contact-form .field-width-half {
    max-width: calc(50% - 12px);
}

.contact-form label {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    font-family: "Fira Sans", sans-serif;
    font-size: 17px;
    width: 100%;
    padding: 0 15px;
    min-height: 46px;
    border-radius: 4px;
    border: 1px solid #DEDEDE;
}

.contact-form textarea {
    padding: 12px;
    resize: vertical;
}

.contact-form .filed-submit {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

.contact-form .label-tnc {
    font-size: 14px;
    font-weight: 400;
    font-style: italic;
    display: inline;
    width: auto;
    margin: 0;
}

.contact-form .form-submit-btn {
    width: auto;
    display: inline;
    padding: 10px 30px;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
    background-color: #C8102E;
    border: none;
    cursor: pointer;
}

.contact-form select {
    color: #000000;
    cursor: pointer;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    background-image: url(../images/icon-select.svg);
    background-repeat: no-repeat;
    background-position-x: 98%;
    background-position-y: 18px;
    background-size: 16px;
}
.contact-form.booking select {
    color: #000000;
    cursor: pointer;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    background-image: url(../images/icon-select.svg);
    background-repeat: no-repeat;
    background-position-x: 94%;
    background-position-y: 15px;
    background-size: 16px;
}
.contact-form.booking select#time {
background-position-x: 88%;
}

.iti {
    width: 100%;
    --iti-path-flags-1x: url('/utility/intl-tel-input/img/flags.png');
    --iti-path-flags-2x: url('/utility/intl-tel-input/img/flags@2x.png');
    --iti-path-globe-1x: url('/utility/intl-tel-input/img/globe.png');
    --iti-path-globe-2x: url('/utility/intl-tel-input/img/globe@2x.png');
}

/* ----- Contact Us page ----- */

/* ----- Commercial Cooling page ----- */
.radio-btn-wrapper.form-field-split {
    justify-content: flex-start;
}

.radio-btn-wrapper.form-field-split span {
    width: 35%;
    align-content: center;
    padding-right: 20px;
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.radio-btn-wrapper.form-field-split label {
    width: auto;
    padding-right: 48px;
}

.radio-btn-wrapper.form-field-split label:last-child {
    padding-right: 0;
}

.radio-btn-wrapper.form-field-split input {
    width: 18px;
    height: 18px;
    min-height: unset;
    margin: 2px 8px 0 0px;
}

.radio-btn-wrapper.form-field-split input[type=radio] {
    accent-color: #C8102E;
}
/* ----- Commercial Cooling page ----- */
/* --------------------------- JP: Newsroom; Career; Contact Us --------------------------- */



/* Raymond Cooling CSS */
.cooling-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.cooling-item {
    display: flex;
}

.cooling-item img {
    object-fit: cover;
    width: 100%;
    max-height: 600px;
}

.cooling-item .cta-wrapper {
    display: flex;
    flex-direction: row;
    gap: 40px;
}

.cooling-wrapper .tp-btn .red-arrow-right {
    transition: 0.3s all ease;
    position: relative;
}

.cooling-wrapper .tp-btn .red-arrow-right::after {
    content: '';
    border: solid var(--keppel-red);
    border-width: 0 1px 1px 0;
    position: absolute;
    right: -14px;
    bottom: 7px;
    padding: 4px;
    transition: 0.3s all ease;

}

.cooling-wrapper .tp-btn:hover .red-arrow-right::after {
    right: -24px;
}
/*Residential Cooling 2-col */
.cooling-wrapper .cooling-item.cooling-w50 {
	width: calc((100% - 40px)/2);
	flex-direction: column;
	gap: 20px;
}
.cooling-wrapper .cooling-item.cooling-w50 .cooling-f-wrap {
	width: 100%;
}
/*Residential Cooling 2-col end*/

/*Uncomment this when Residential Cooling is ready to go live*/
/*.cooling-item:first-child {
    flex-direction: row;
    gap: 40px;
    width: 100%;
}*/

/*Comment this when Residential Cooling is ready to go live*/
.cooling-item {
    flex-direction: row;
    gap: 40px;
    width: 100%;
}

/* set the width to unset on tablet mode */
.cooling-f-wrap {
    display: flex;
    width: calc((100% - 40px) / 2);
}

.cooling-item.coming-soon img {
    filter: brightness(0.5);
}

.cooling-item.coming-soon {
    position: relative;
}

.cooling-item.coming-soon::after {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -30%);
    content: 'Coming Soon';
    font-size: 32px;
    font-weight: 500;
    color: #FFF;

}
/*Uncomment this when Residential Cooling is ready to ggo live*/
/*.cooling-item:first-child .text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}


.cooling-item:not(:first-child) {
    width: calc((100% - 40px) / 2);
    flex-direction: column;
}

.cooling-item:not(:first-child) .text-wrapper {
    margin-top: 16px;
}*/

/*Comment this when Residential Cooling is ready to goo live*/
.cooling-item .text-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cooling-txt-wrapper h4,
.cooling-txt-wrapper p {
    /*max-width: 580px;*/
}

.cooling-item.hide{
	display: none;
}

/* End of Cooling CSS */

.grey-bg{
	background: #FCFAF6;
	margin-block: 50px 30px;
	padding-bottom: 25px;
}
.grey-bg .pb-28{
	padding-bottom: 28px!important;
}
/* Residential Cooling Form */
.hero-form-title-text {
    padding-block: 60px 0px;
}

.hero-form-title-text h1,
.hero-form-title-text p {
    text-align: center;
}

.hero-form-title-text p {
    padding-top: 10px;
}

.contact-form .steps-text {
    position: relative;
    width: 100%;
}

.contact-form .steps-text.pt-20 {

    padding-top: 22px
}

.contact-form .steps-text p {
    padding-bottom: 6px;
    display: flex;
    gap: 6px;
    font-weight: 700;
}

.contact-form .red-seperator {
    border-right: 2px solid #C8102E;
    width: 1px;
    height: 15px;
    position: relative;
    bottom: -3px;
}

.contact-form .steps-text p:after {
    content: '';
    background: #C8102E;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0;
    left: 0;
}

.form-field-split {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.form-field-split label {
    width: 35%;
    align-content: center;
    padding-right: 20px;
}

.form-field-split .form-field-wrapper,
.form-field-split select {
    width: 65%;
}

/* .form-field-split input,
.form-field-split select,
.form-field-split div.iti {

} */

.form-field-split div.iti input[type="tel"],
.form-field-split .iti__dropdown-content input[type="text"] {
    width: 100%;
}

.form-field-split .input-split {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    width: 65%;
}

.form-field-split .form-field-wrapper {
    position: relative;
}

.form-field-split .form-error-message {
    position: relative;
    left: 0;
    bottom: -3px;
    font-size: 14px;
    color: #C8102E;
}

.form-field-split .form-error-message:before {
    content: '';
    background: url(../../default/images/form-field-error-32x32.png) no-repeat;
    width: 16px;
    height: 16px;
    position: relative;
    top: 3px;
    left: 0;
    display: inline-block;
    background-size: 16px 16px;
    margin-right: 5px;
}





.input-split input#floorNo{
    padding: 0 15px 0 30px;
}

.floor-symbol{
    position: absolute;
    top: 14px;
    left: 12px;
}

.contact-us-section .form-field-split {
    display: unset;
}
.contact-us-section .form-field-split .form-field-wrapper,
.contact-us-section .form-field-split select {
    width: 100%;
}
/* End of Residential Cooling Form */

/* Thank you */
.thank-you-wrap {
    margin: 0 auto;
    text-align: center;
    padding-block: 150px !important;
}

.thank-you-wrap img {
    width: 95px;
}

.thank-you-wrap h1 {
    padding-bottom: 12px;
}

.thank-you-wrap .cta-wrapper{
	display:flex;
	justify-content:center;
}

.rc-form-title {
    padding-block: 15px 0px;
}

.tac-modal .thank-you-wrap {
    padding-block: 0px !important;
}
.tac-modal .thank-you-wrap img {
    width: 65px;
}
.tac-modal .thank-you-wrap h1 {
    font-size: 32px!important;
}

.modal a.close-modal {
    background-image: url(../../default/images/booking-form-modal-close.svg) !important;
    width: 20px !important;
    height: 20px !important;
    right: 28px !important;
    top: 25px !important;
}

/* Terms and Conditions */
span.tac {
    color: #C8102E;
    position: relative;
}

span.tac::before {
    content: '';
    height: 1px;
    left: 0;
    background-color: #C8102E;
    position: absolute;
    bottom: 0px;
    width: 0%;
}

span.tac:hover {
    cursor: pointer;
}

span.tac:hover::before {
    animation: underline 0.3s forwards;
}

/* Popup Modal for Booking Form*/
.modal {
    z-index: 15 !important;
    padding: 30px !important;
    border-radius: 4px !important;
    max-width: 592px !important;
    -webkit-box-shadow: unset !important;
    -moz-box-shadow: unset !important;
    -o-box-shadow: unset !important;
    -ms-box-shadow: unset !important;
    box-shadow: unset !important;
}

.blocker {
    background-color: rgb(0 0 0 / 70%) !important;
    z-index: 444 !important;
    padding-block: 100px!important;
	padding: 70px 5px!important;
}

.tac-modal {
    display: none;
}

.tac-header {
    color: #C8102E;
    padding-bottom: 12px;
}

/* Contact Form Booking */
.contact-form.booking {
    position: relative;
}

.contact-form.booking .form-field-no-split{
    width: 100%;
    position: relative;
}
.contact-form.booking .form-field-no-split .form-field-wrapper{
    margin-top: 8px;
}
.contact-form.booking input,
.contact-form.booking select{
    min-height: 40px;
}

.contact-form.booking select#housingProject{
    margin-top: 8px;
}

.contact-form.booking select#time{
    margin-top: 0px;
}

.contact-form.booking .form-field-no-split .input-split{
    display: flex;
    justify-content: unset;
    gap: 15px;
    width: 100%;
}

.contact-form.booking .form-field-no-split:last-child .input-split{
    display: flex;
    justify-content: unset;
    gap: 0;
    width: 100%;
}

.contact-form.booking .form-field-no-split .input-split > .form-field-wrapper{
    position: relative;
    width: 50%;
}


.booking-floor-symbol{
    position: absolute;
    top: 11px;
    left: 12px;
}

/* Radio Button */
.contact-form.booking .form-field-no-split.radio-btn-wrapper{
    display: flex;
    position: relative;
    flex-direction: column;
}

.no-split-radio-title{
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 6px 0;
}

.no-split-radio-wrapper{
    display: flex;
    align-items: center;
}

.form-field-no-split.radio-btn-wrapper input {
    width: 18px;
    height: 18px;
    min-height: unset;
    margin: 2px 8px 0 0px;
}
.form-field-no-split.radio-btn-wrapper input[type=radio] {
    accent-color: #C8102E;
}
.form-field-no-split.radio-btn-wrapper label {
    width: auto;
    padding-right: 48px;
    margin-bottom: -3px;
}

.form-field-no-split .form-error-message {
    position: relative;
    left: 0;
    bottom: -3px;
    font-size: 14px;
    color: #C8102E;
}

.form-field-no-split .form-error-message:before {
    content: '';
    background: url(../../default/images/form-field-error-32x32.png) no-repeat;
    width: 16px;
    height: 16px;
    position: relative;
    top: 3px;
    left: 0;
    display: inline-block;
    background-size: 16px 16px;
    margin-right: 5px;
}

.form-field-no-split.customer-id-field.hidden{
    display: none;
}

.ui-datepicker {
    padding: 0 !important;
    z-index: 1200 !important;
}
.ui-widget-header {
    border: 1px solid #C8102E!important;
    background: #C8102E!important;
    color: white !important;
    font-weight: 600!important;
}
.ui-corner-all{
	border-radius: 0!important;
}
.ui-widget.ui-widget-content {
    border: 1px solid white !important;
}
.ui-datepicker th {
    font-weight: 500;
}

.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
    top: 11px!important;
}

.ui-datepicker .ui-datepicker-prev {
    background-image: url(../../default/images/calendar-left-white.png) !important;
    background-repeat: no-repeat;
}
.ui-datepicker .ui-datepicker-prev-hover {
    background-image: url(../../default/images/calendar-left-white.png)!important;
    background-repeat: no-repeat;
	background-color: unset!important;
}

.ui-datepicker .ui-datepicker-next {
    background-image: url(../../default/images/calendar-right-white.png) !important;
    background-repeat: no-repeat;
}
.ui-datepicker .ui-datepicker-next-hover {
    background-image: url(../../default/images/calendar-right-white.png)!important;
    background-repeat: no-repeat;
	background-color: unset!important;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover{
	border: unset!important;
	background-repeat: no-repeat!important;
	top: 11px!important;
	
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-prev-hover {
    left: 11px!important;
}

.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-next-hover {
    right: -10px!important;
}

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover{
	cursor: pointer!important;
}

.ui-state-hover .ui-icon{
	background-image: unset!important;
	background-repeat: no-repeat!important;
	background-color: unset!important;
}

.ui-state-default, .ui-widget-content .ui-state-default{
	border: 0px solid #c5c5c5!important;
	background: white!important;
	color: #7D7D7D!important;
}
.ui-datepicker td span,.ui-datepicker td a {
    text-align: center!important;
}

.ui-state-disabled, .ui-widget-content .ui-state-disabled{
	opacity: 0.15!important;
}
/* End Contact Form Booking */

/* Project Brochure */
.project-brochure-wrapper{
	position: relative;
	width: 100%;
    display: flex;
    flex-wrap: wrap;
	justify-content: space-between;
}

.p-brochure-item{
    width: calc((100% - 100px)/ 3);
    position: relative;
	text-align: center;
    
}

.p-brochure-item h6:before{
    content: '';
    background-image: url('/theme/default/images/brochure-download-red.svg');
    background-repeat: no-repeat;
    width: 18px;
    height: 27px;
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
}
.p-brochure-item h6{
    font-weight: 400;
    padding-bottom: 6px;
    transition: 0.3s all;
	color: #000000;
	width: 90%;
}
.p-brochure-item h6 span {
	display: inline-block;
    padding-inline-start: 40px;
}

.p-brochure-item .p-brochure-txt{
    transition: 0.3s all;
	color: #000000;
	width: 90%;
}
.p-brochure-item:hover h6,
.p-brochure-item:hover .p-brochure-txt{
    color: #9F8282;
}

.benifits-item ol {
    list-style: auto;
    font-size: 17px;
    padding: 8px 0 0 24px;
}
.for-more-info {
    color: var(--keppel-red);
    padding-bottom: 50px !important;
    text-align: center;
}
.for-more-info::before {
    display: inline-block;
    position: relative;
    top: 5px;
    right: 5px;
    content: ' ';
    width: 24px;
    height: 24px;
    background-image: url("/file/ev-charging/information-button-1.png");
    background-repeat: no-repeat;
    background-size: contain;
}
.for-more-info a {
    font-weight: 600;
    text-decoration: none;
}


@media only screen and (max-width: 1024px) {
    #content-hero {
        padding: 0 20px;
    }
}

@media only screen and (max-width: 910px) {
    .p-brochure-item {
        width: calc((100% - 100px) / 2);
    }

    .btw-text {
        padding-inline: 20px;
    }

    .solar-panel .content-wrapper .content-section.txt-right-img-flow-left,
    .solar-panel .content-wrapper .content-section.txt-left-img-flow-right {
        padding-bottom: 55px !important;
    }

    .solar-panel .content-wrapper .content-section.txt-right-img-flow-left.no-ptb {
        padding-bottom: 0 !important;
    }
}

@media only screen and (max-width: 767px) {
	/*Enahncement*/
	.rc-flex-item{
		width: 100%
	}
	
	
	
	/*Modal for Mobile*/
	.tac-modal .thank-you-wrap h1 {
		font-size: 25px!important;
	}
	.tac-modal .thank-you-wrap .ty-text {
		font-size: 14px;
	}
	
	
	
	.desktop-only {
		display: none !important;
	}
	
	.content-hero-credit.mobile-only{
    opacity: 0.6;
    color: #222;
    z-index: 10;
    position: relative;
    top: 12px;
	display: inline-block;
}

	.content-hero-credit {
		padding: 0 20px;
		font-size: 14px;
	}
	
	#content-hero .img-wrapper.rsb-logo:before {
		width: 120px;
        height: 40px;
		bottom: 8px;
		right: 8px;
	}	
    .project-brochure-wrapper {
        margin-top: 16px;
        gap: 20px;
    }
    .p-brochure-item {
        width: 100%;
    }
    /* Thank you */
    .thank-you-wrap {
        padding-block: 70px !important;
    }

    #content-hero .img-wrapper {
        max-height: 300px;
    }

    .content-wrapper h4.kpl-red-text {
        font-size: 26px;
    }

    #content-hero .img-wrapper img {
        height: 212px;
    }

    #content-hero .hero-text-wrapper {
        position: relative;
        padding: 0;
        top: initial;
        transform: initial;
        width: initial;
        max-width: initial;
    }

    #content-hero .hero-text-wrapper h2 {
        position: absolute;
        font-size: 32px;
        transform: translateY(calc(-100% - 20px));
        transform-origin: bottom;
        padding: 0 20px;
    }

    #content-hero .hero-text-wrapper h6 {
        color: #000;
        text-shadow: initial;
        font-size: 17px;
        padding-top: 20px;
    }

    .about-us.grid-wrapper {
        grid-template-columns: 1fr;
    }

    .about-us.grid-wrapper .grid-item {
        align-items: flex-start;
        text-align: left;
    }

    .content-wrapper {
        padding-top: 20px;
    }

    .newsroom-wrapper {
        gap: 38px;
    }

    .newsroom-wrapper .news-filter label,
    .newsroom-wrapper .news-filter ul {
        max-width: 425px;
    }

    .newsroom-wrapper .news-item .news-date {
        font-size: 16px;
    }

    .newsroom-wrapper .news-item .news-url {
        font-size: 17px;
        padding: 0 0 13px 0;
    }

    .contact-form {
        gap: 20px;
    }

    .contact-form .field-width-half {
        max-width: unset;
    }

    .contact-form .filed-submit {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 15px;
    }

    .unity-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    .unity-wrapper .unity-item {
        max-width: unset;
    }

    .careers .content-section {
        padding: 0 20px 44px 20px;
    }

    .careers .content-wrapper .content-section.txt-left-img-flow-right {
        gap: 20px;
    }

    .careers .content-section.txt-left-img-flow-right .text-wrapper,
    .careers .content-section.txt-right-img-flow-left .text-wrapper {
        padding: 0 20px 24px 20px;
    }

    .careers .content-wrapper .content-section.txt-right-img-flow-left {
        flex-direction: column;
        gap: 20px;
        padding: 0;
    }

    .careers .content-wrapper .content-section:nth-last-child(1) {
        padding: 24px 20px 60px 20px;
    }

    .policy-wrapper {
        gap: 24px;
    }

    .news-detail-hero .hero-text-wrapper {
        padding: 45px 20px;
        gap: 60px;
        background-position: 72% 100%;
    }

    .news-detail-hero .news-header-wrapper h2,
    .hero-form-title-text h1 {
        font-size: 32px;
    }

    .hero-form-title-text h1,
    .hero-form-title-text p {
        text-align: left;
    }

    .hero-form-title-text {
        padding-block: 24px 0;
    }

    .form-field-split {
        flex-direction: column;
    }

    .form-field-split label {
        width: 100%;
        align-content: unset;
        padding-right: unset;
    }

    .form-field-split .form-field-wrapper,
    .form-field-split select {
        width: 100%;
    }

    /* .form-field-split input,
    .form-field-split select,
    .form-field-split div.iti {
        width: 100%;
    } */

    .form-field-split .input-split {
        width: 100%;
    }

    .form-field-split .input-split.submit-wrap {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .form-field-split .form-error-message {
        font-size: 12px;
    }

    .cooling-item:first-child {
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }

    .cooling-f-wrap {
        width: 100%;
    }
.cooling-wrapper .cooling-item.cooling-w50 {
	width: 100%;
}
    .cooling-item:not(:first-child) {
        width: 100%;
        flex-direction: column;
    }

    .hero-form-title-text h1,
    .hero-form-title-text p {
        text-align: left;
    }

    .hero-form-title-text {
        padding-block: 15px 0px;
    }

    .radio-btn-wrapper.form-field-split {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .radio-btn-wrapper.form-field-split span {
        width: 100%;
    }

    .news-detail-hero .news-date {
        padding-bottom: 8px !important;
    }
	.news-detail-item #MainContent .content-section {
		padding: 20px;
	}
	.radio-btn-wrapper.form-field-split label {
		width: calc(100% - 30px);
	}
    .content-section.contact-us-section {
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
    }
	.resi-cooling-appt {
		padding: 46px 20px !important;
		flex-direction: column-reverse;
	}
	.resi-cooling-appt .left-wrapper,
	.resi-cooling-appt .right-wrapper {
		width: 100%;
	}
	.resi-cooling-appt .left-wrapper img {
		width: 100%;
		max-width: 225px;
	}
	.project-brochure-sect {
		margin: 0;
	}
	.project-brochure-sect .content-section {
		align-items: flex-start;
		padding: 60px 20px;
	}
	.p-brochure-item {
		text-align: left;
	}
}