@import "variables.css";

.widget-root select,
.d2c-root select {
    max-width: 80% !important;
}

.spinner {
    background: var(--iSpinner) no-repeat center !important;
}

.welcome .header {
    font-size: 1.125rem;
    font-weight: 600;
    padding: 0.2em 0 0.2em 0;
    color: var(--cFourth);
    text-align: center !important;
    font-family: var(--fSecondary), sans-serif !important;
    text-transform: uppercase !important;
}


.d2c-root .form-group [for*="_info"]+div:before {
    font-family: 'Font Awesome 5 Free';
    content: "";
    font-weight: 900;
    font-size: 100%;
    position: absolute;
    padding-top: 3px;
    color: var(--cFirst);
    border-radius: 50%;
}

.d2c-root .form-group label[for*="r_accident"]~div .switch .switch-label,
.d2c-root .form-group label[for*="r_illness"]~div .switch .switch-label,
.d2c-root .form-group label[for*="r_unemployment"]~div .switch .switch-label,
.d2c-root .form-group label[for*="p_singlelife"]~div .switch .switch-label,
.d2c-root .form-group label[for*="p_jointlife"]~div .switch .switch-label,
.d2c-root .form-group label[for*="p_duallife"]~div .switch .switch-label,
.d2c-root .form-group label[for*="r_life_single"]~div .switch .switch-label,
.d2c-root .form-group label[for*="r_life_dual"]~div .switch .switch-label,
.d2c-root .form-group label[for*="r_life_joint"]~div .switch .switch-label,
.d2c-root .form-group label[for*="r_pay_lumpsum"]~div .switch .switch-label,
.d2c-root .form-group label[for*="r_pay_monthly"]~div .switch .switch-label
 {
    width: 50px;
    height: 50px;
    text-align: center;
}

.d2c-root .form-group label[for*="r_accident"]~div .switch .switch-label,
.d2c-root .form-group label[for*="r_illness"]~div .switch .switch-label,
.d2c-root .form-group label[for*="r_unemployment"]~div .switch .switch-label,
.d2c-root .form-group label[for*="p_singlelife"]~div .switch .switch-label,
.d2c-root .form-group label[for*="p_jointlife"]~div .switch .switch-label,
.d2c-root .form-group label[for*="p_duallife"]~div .switch .switch-label,
.d2c-root .form-group label[for*="r_life_single"]~div .switch .switch-label,
.d2c-root .form-group label[for*="r_life_dual"]~div .switch .switch-label,
.d2c-root .form-group label[for*="r_life_joint"]~div .switch .switch-label,
.d2c-root .form-group label[for*="r_pay_lumpsum"]~div .switch .switch-label,
.d2c-root .form-group label[for*="r_pay_monthly"]~div .switch .switch-label {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-color: var(--cBackground);
    border-radius: 5px;
    box-shadow: none;
    border: 0px solid var(--cBackground);
    z-index: 5;
    box-sizing: border-box;
    padding: 5px;
    background-origin: content-box;
    width: 100px;
    height: 100px;
}

.d2c-root .form-group label[for*="r_accident"]~div .switch .switch-input~.switch-label {
    background-image: url(../assets/images/IPACCIDENT.svg);
}

.d2c-root .form-group label[for*="r_illness"]~div .switch .switch-input~.switch-label {
    background-image: url(../assets/images/IPILLNESS.svg);
}

.d2c-root .form-group label[for*="r_unemployment"]~div .switch .switch-input~.switch-label {
    background-image: url(../assets/images/IPUNEMPLOYED.svg);
}

.d2c-root .form-group label[for*="r_life_single"]~div .switch .switch-input~.switch-label,
.d2c-root .form-group label[for*="p_singlelife"]~div .switch .switch-input~.switch-label {
    background-image: url(../assets/images/SINGLELIFE.svg);
}

.d2c-root .form-group label[for*="r_life_joint"]~div .switch .switch-input~.switch-label,
.d2c-root .form-group label[for*="p_jointlife"]~div .switch .switch-input~.switch-label {
    background-image: url(../assets/images/JOINTLIFE.svg);
}

.d2c-root .form-group label[for*="r_life_dual"]~div .switch .switch-input~.switch-label,
.d2c-root .form-group label[for*="p_duallife"]~div .switch .switch-input~.switch-label {
    background-image: url(../assets/images/DUALLIFE.svg);
}


.d2c-root .form-group label[for*="r_pay_lumpsum"]~div .switch .switch-input~.switch-label {
    background-image: url(../assets/images/LumpSum.svg);
}


.d2c-root .form-group label[for*="r_pay_monthly"]~div .switch .switch-input~.switch-label {
    background-image: url(../assets/images/Monthly.svg);
}

.d2c-root .form-group label[for*="r_accident"]~div .switch .switch-input:checked~.switch-label,
.d2c-root .form-group label[for*="r_illness"]~div .switch .switch-input:checked~.switch-label,
.d2c-root .form-group label[for*="r_unemployment"]~div .switch .switch-input:checked~.switch-label,
.d2c-root .form-group label[for*="p_singlelife"]~div .switch .switch-input:checked~.switch-label,
.d2c-root .form-group label[for*="p_jointlife"]~div .switch .switch-input:checked~.switch-label,
.d2c-root .form-group label[for*="p_duallife"]~div .switch .switch-input:checked~.switch-label,
.d2c-root .form-group label[for*="r_life_single"]~div .switch .switch-input:checked~.switch-label,
.d2c-root .form-group label[for*="r_life_joint"]~div .switch .switch-input:checked~.switch-label,
.d2c-root .form-group label[for*="r_life_dual"]~div .switch .switch-input:checked~.switch-label,
.d2c-root .form-group label[for*="r_pay_lumpsum"]~div .switch .switch-input:checked~.switch-label,
.d2c-root .form-group label[for*="r_pay_monthly"]~div .switch .switch-input:checked~.switch-label {
    border: 1px solid var(--cFirst);
    box-shadow: none !important;
    color: black !Important;
    background-color: var(--cSixth) !Important;
    width: 100px;
    height: 100px;
}

.d2c-root .form-group label[for*="r_accident"]~div .switch .switch-label:after,
.d2c-root .form-group label[for*="r_illness"]~div .switch .switch-label:after,
.d2c-root .form-group label[for*="r_unemployment"]~div .switch .switch-label:after,
.d2c-root .form-group label[for*="p_singlelife"]~div .switch .switch-label:after,
.d2c-root .form-group label[for*="p_jointlife"]~div .switch .switch-label:after,
.d2c-root .form-group label[for*="p_duallife"]~div .switch .switch-label:after,
.d2c-root .form-group label[for*="r_life_single"]~div .switch .switch-label:after,
.d2c-root .form-group label[for*="r_life_joint"]~div .switch .switch-label:after,
.d2c-root .form-group label[for*="r_life_dual"]~div .switch .switch-label:after,
.d2c-root .form-group label[for*="r_pay_lumpsum"]~div .switch .switch-label:after,
.d2c-root .form-group label[for*="r_pay_monthly"]~div .switch .switch-label:after {
    opacity: 100%;
    color: Black;
    left: 120%;
    font-size: 25px;
    color: #00B3CD;
    font-weight: lighter;
    display: none;
}

.d2c-root .form-group label[for*="r_accident"]~div .switch .switch-handle,
.d2c-root .form-group label[for*="r_accident"]~div .switch .switch-label:before,
.d2c-root .form-group label[for*="r_illness"]~div .switch .switch-handle,
.d2c-root .form-group label[for*="r_illness"]~div .switch .switch-label:before,
.d2c-root .form-group label[for*="r_unemployment"]~div .switch .switch-handle,
.d2c-root .form-group label[for*="r_unemployment"]~div .switch .switch-label:before,
.d2c-root .form-group label[for*="p_singlelife"]~div .switch .switch-handle,
.d2c-root .form-group label[for*="p_singlelife"]~div .switch .switch-label:before,
.d2c-root .form-group label[for*="p_jointlife"]~div .switch .switch-handle,
.d2c-root .form-group label[for*="p_jointlife"]~div .switch .switch-label:before,
.d2c-root .form-group label[for*="p_duallife"]~div .switch .switch-handle,
.d2c-root .form-group label[for*="p_duallife"]~div .switch .switch-label:before,
.d2c-root .form-group label[for*="r_life_single"]~div .switch .switch-handle,
.d2c-root .form-group label[for*="r_life_single"]~div .switch .switch-label:before,
.d2c-root .form-group label[for*="r_life_dual"]~div .switch .switch-handle,
.d2c-root .form-group label[for*="r_life_dual"]~div .switch .switch-label:before,
.d2c-root .form-group label[for*="r_life_joint"]~div .switch .switch-handle,
.d2c-root .form-group label[for*="r_life_joint"]~div .switch .switch-label:before,
.d2c-root .form-group label[for*="r_pay_lumpsum"]~div .switch .switch-handle,
.d2c-root .form-group label[for*="r_pay_lumpsum"]~div .switch .switch-label:before,
.d2c-root .form-group label[for*="r_pay_monthly"]~div .switch .switch-handle,
.d2c-root .form-group label[for*="r_pay_monthly"]~div .switch .switch-label:before  {
    display: none;
}


.life-insurance-policy-type .questions form.ng-valid.ng-star-inserted.ng-dirty,
.life-insurance-policy-type .questions form.ng-valid.ng-star-inserted.ng-dirty.ng-touched,
.life-insurance-policy-type .questions form.ng-untouched.ng-pristine.ng-valid.ng-star-inserted
.policy-type .questions form.ng-valid.ng-star-inserted.ng-dirty,
.policy-type .questions form.ng-valid.ng-star-inserted.ng-dirty.ng-touched,
.policy-type .questions form.ng-untouched.ng-pristine.ng-valid.ng-star-inserted {
    display: flex !Important;
	flex-direction: column;
	    align-content: center;
    justify-content: center;
}

.life-insurance-policy-type .questions gc-question.lookup-select,
.policy-type .questions gc-question.lookup-select {
    width: 100%;
    padding-top: 20px;
    max-width: 100%;
    margin-left: 50px;
    margin-right: 50px;
}
.life-insurance-policy-type .questions .gc-question.lookup-select.ng-star-inserted.show,
.policy-type .questions .gc-question.lookup-select.ng-star-inserted.show {
    width: 100%;
}

d2c-root .form-group [for*="r_accident"]~*,
d2c-root .form-group [for*="r_illness"]~*,
d2c-root .form-group [for*="r_unemployment"]~*,
d2c-root .form-group [for*="p_singlelife"]~*,
d2c-root .form-group [for*="p_jointlife"]~*,
d2c-root .form-group [for*="p_duallife"]~*,
d2c-root .form-group [for*="r_life_single"]~*,
d2c-root .form-group [for*="r_life_dual"]~*,
d2c-root .form-group [for*="r_life_joint"]~*,
d2c-root .form-group [for*="r_pay_lumpsum"]~*,
d2c-root .form-group [for*="r_pay_monthly"]~*
 {
    width: 100px !Important;
    height: 100px !Important;
    justify-content: center;
	margin: auto;
}
.quote-result .questions label[for*="r_annualincome"]+div, 
.quote-result .questions label[for*="r_monthlyincome"]+div {
    pointer-events: none;
}
.questions label[for*="r_accident"].col-sm-10.col-form-label,
.questions label[for*="r_illness"].col-sm-10.col-form-label,
.questions label[for*="r_unemployment"].col-sm-10.col-form-label,
.questions label[for*="p_singlelife"].col-sm-10.col-form-label,
.questions label[for*="p_jointlife"].col-sm-10.col-form-label,
.questions label[for*="p_duallife"].col-sm-10.col-form-label {
    
}

.quote-result .questions label[for*="r_annualincome"]+div, .quote-result .questions label[for*="r_monthlyincome"]+div {
    pointer-events: none;
    /* background: aliceblue; */
}

.life-insurance-policy-type .questions,
.policy-type .questions{
	justify-content: center;
}
.life-insurance-policy-type .row,
.policy-type .row {
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
}


label[for*="r_accident"],
label[for*="r_illness"],
label[for*="r_unemployment"],
label[for*="p_singlelife"],
label[for*="p_jointlife"],
label[for*="p_duallife"],
label[for*="r_life_single"],
label[for*="r_life_dual"],
label[for*="r_life_joint"],
label[for*="r_pay_lumpsum"],
label[for*="r_pay_monthly"]
 {
    display: none;
}

.quote-result label[for*="r_annualincome"]~.input-group .form-control,
.quote-result [for*="r_annualincome"]~.input-group .input-group-prepend .currency,
.quote-result label[for*="r_monthlyincome"]~.input-group .form-control,
.quote-result [for*="r_monthlyincome"]~.input-group .input-group-prepend .currency {
    background-color: var(--cFirst) !Important;
    color: var(--cSecond) !Important;
    
}

.d2c-root .form-group [for*="levelcover_info"]+div:before {
    content: "Level Cover" !Important;
}

.d2c-root .form-group [for*="decreasecover_info"]+div:before {
    content: "Decrease Cover" !Important;
}

.d2c-root .form-group [for*="increasecover_info"]+div:before {
    content: "Increase Cover" !Important;
}

.d2c-root .form-group [for*="familycover_info"]+div:before {
    content: "Family Cover" !Important;
}

.d2c-root .form-group [for*="levelcover_info"]+div:before,
.d2c-root .form-group [for*="decreasecover_info"]+div:before,
.d2c-root .form-group [for*="increasecover_info"]+div:before,
.d2c-root .form-group [for*="familycover_info"]+div:before {
    left: -20%;
	font-family: var(--fSecondary);
	font-size: 70%;
}