:root {
    --background-color: #f9f9f9;
    --primary-text-color: #333333;
    --secondary-text-color: #4598db;
    --border-color: rgba(69, 152, 219, 0.2);
    --box-shadow-color: rgba(0, 0, 0, 0.08);
    --header-background: #eef7ff;
    --title-color: #ffffff;
    --odd_loan_color: #eef7ff;
    --emphasis_color: #ffa500;
}

body {
    background-color: var(--background-color);
    font-family: myFirstFont, sans-serif;
    margin-left: 40px;
    margin-right: 40px;
    color: var(--primary-text-color);
    height: 95vh;
}

.bottom-left { position: absolute; bottom: 0; left: 0; height: 300px; }
.descriptive_text { font-size: 18px; color: var(--primary-text-color); margin: 2px 0; text-align: right; }
.properties_text { color: var(--primary-text-color); text-align: right; font-weight: 600; }
#properties_text_header { font-size: 25px; }
#properties_text_explenation { font-size: 16px; font-weight: 300; height: 45%; }
.company_info { position: absolute; right: 1%; bottom: 1%; font-weight: 500; color: var(--secondary-text-color); }
.top-left { position: absolute; top: 0; left: 0; }
.nis_symbol { color: var(--primary-text-color); font-size: 15px; }
.benefit_symbol { color: var(--primary-text-color); font-size: 25px; }

.main_section { box-shadow: 20px 20px 5px var(--box-shadow-color); background-color: var(--header-background); border-radius: 10px; margin-top: 20px; margin-bottom: 20px; height: 45%; display: flex; flex-direction: row-reverse; justify-content: space-around; align-items: stretch; }

.gauge_and_text_container { direction: rtl; display: flex; flex-direction: column; justify-content: center; padding: 20px; flex: 1; }
.gauge_result { font-size: 18px; color: var(--emphasis_color); margin: auto auto; font-weight: 600; text-align: right; }
.seperating_line { width: 100%; margin: 5px auto; height: 2px; background-color: var(--primary-text-color); border-radius: 2px; }
.refinance_gauge { display: flex; flex-direction: column; justify-content: center; padding: 10px 40px; margin: 0 auto; }
.attribute_detail { padding: 10px; height: 100%; }
.coverage_indicator { display: flex; flex-direction: row; justify-content: center; align-items: flex-end; width: 320px; height: 100%; margin: 00px 0; }
.coverage_level { border-radius: 4px; margin-right: 10px; width: 60px; height: 100%; transition: all 0.3s ease; }
.coverage_level_4 { height: 100%; background-color: #2E7D32; }
.coverage_level_3 { height: 80%; background-color: #7CB342; }
.coverage_level_2 { height: 60%; background-color: #F9A825; }
.coverage_level_1 { height: 40%; background-color: #B71C1C; }
.coverage_inactive .coverage_level { opacity: 0.1; }
.coverage_active_4 .coverage_level_4,
.coverage_active_3 .coverage_level_3,
.coverage_active_2 .coverage_level_2,
.coverage_active_1 .coverage_level_1 { opacity: 1; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3); }
.coverage_label { font-size: 14px; font-weight: 600; color: var(--primary-text-color); text-align: right; margin-bottom: 6px; }

.benefits_summary { display: flex; flex-direction: column; justify-content: flex-start; flex: 1; padding: 10px; direction: rtl; }
.single_benefit_container { background-color: var(--title-color); padding: 15px; border-radius: 15px; flex: 1 1 220px; max-width: 300px; min-width: 220px; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); }
.multiple_benefits_container { display: flex; flex-direction: row; flex-wrap: wrap; gap: 30px; padding: 20px; justify-content: center; height: 100%; }

#mortgage_properties_color { color: var(--primary-text-color); font-size: 25px; margin: auto auto; }
#mortgage_benefits_color { color: var(--emphasis_color); font-size: 30px; }
.mortgage_text { font-weight: 600; text-align: center; }
.benefit_text { font-size: 30px; color: var(--secondary-text-color); font-weight: 600; display: flex; flex-direction: row; column-gap: 15px; align-items: baseline; }
.benefit_description_container { display: flex; flex-direction: column; align-items: center; }

.curr_mortgage_container { display: flex; direction: rtl; flex-direction: row; justify-content: space-between; padding-left: 2.5%; background-color: var(--header-background); border-radius: 20px; }
.current_mortgage_properties_container { display: flex; flex-direction: row; justify-content: space-between; gap: 60px; border-radius: 10px; }
.properties_header_container { display: flex; gap: 10px; flex-direction: row; align-items: center; }

.header { display: grid; grid-template-columns: 6fr 3fr 200px; text-align: center; margin-top: 00; padding-top: 15px; align-items: center; }
.header_logo { width: 180px; padding-left: 25px; display: block; margin: auto; align-self: center; }
.general_logo { width: 40px; margin: 0px 0; }
.properties_logo { width: 20px; }
.properties_container { display: flex; flex-direction: row; gap: 10px; justify-content: space-around; }
.properties_item { padding-right: 5px; padding-left: 5px; display: flex; flex-direction: row-reverse; gap: 10px; }
.properties_logo { width: 30px; height: 30px; margin: 0px 0; }

#mixture_title_header { padding: 5px 15px; font-weight: 600; display: flex; flex-direction: row; justify-content: center; direction: rtl; gap: 15px; background-color: var(--header-background); padding: 10px; border-radius: 10px; }
.current_mortgage_mixture_container { display: grid; direction: rtl; grid-template-columns: 33% 33% 33%; column-gap: 15px; }
.single_mixture_container { display: flex; flex-direction: row; justify-content: center; direction: rtl; gap: 15px; background-color: var(--header-background); padding: 8px 10px; border-radius: 10px; font-weight: 500; }
.single_mixture_container:nth-child(odd) { background-color: var(--title-color); }
.loan_property { width: 130px; color: var(--secondary-text-color); }
.loan_property_header { width: 130px; }
#loan_type { width: 170px; }
.current_mortgage_full_container { background-color: var(--header-background); border-radius: 20px; padding: 20px; margin-top: 10px; display: flex; flex-direction: column; gap: 10px; box-shadow: 2px 2px 8px var(--box-shadow-color); }
.mixture_section_title { font-size: 20px; font-weight: 600; color: var(--primary-text-color); text-align: center; }
.amount_cell { display: inline-flex; justify-content: flex-start; align-items: baseline; text-align: right; justify-content: space-between; }
.amount_value { direction: ltr; unicode-bidi: plaintext; white-space: nowrap; }
.estimate-badge { font-size: 12px; line-height: 1.1; border: 1px dashed var(--emphasis_color, #888); color: var(--emphasis_color, #888); border-radius: 6px; padding: 0 6px; white-space: nowrap; opacity: 0.9; }

.bank_logo { width: 120px; padding: 0px 3px; max-height: 30px; max-width: 120px; margin: 0px 0; }
.general_data { padding: 10px 0; display: flex; flex-direction: column; align-items: flex-start; text-align: center; }
.general_text { font-size: 20px; color: var(--secondary-text-color); font-weight: 600; display: flex; flex-direction: row; gap: 5px; align-items: baseline; }
.general_info { display: flex; flex-direction: row; align-items: flex-end; gap: 8px; }
.header_common { display: flex; justify-content: center; align-items: center; border-top-style: solid; border-bottom-style: solid; border-width: 1px; border-color: var(--border-color); box-shadow: 2px 2px 4px var(--box-shadow-color); font-weight: 600; font-size: 26px; min-height: 80px; height: 100%; border-radius: 6px; margin-left: 10px; }
.header_description { border-top-left-radius: 20px; border-bottom-left-radius: 20px; background-color: var(--header-background); border-left-style: solid; border-color: var(--border-color); color: var(--secondary-text-color); display: flex; flex-direction: row; justify-content: space-around; align-items: center; font-size: 16px; height: 100%; padding: 0px; margin: 0; }
.header_abstract { border-top-right-radius: 20px; border-bottom-right-radius: 20px; background-color: var(--secondary-text-color); border-right-style: solid; border-color: var(--border-color); color: var(--title-color); display: flex; flex-direction: row-reverse; gap: 10px; justify-content: center; align-items: center; }

.company_info { font-size: 14px; text-align: center; margin-top: 0px; }
.powered_by { position: absolute; right: 2.5%; bottom: 1%; display: flex; align-items: center; font-weight: 500; font-size: 1rem; color: var(--secondary-text-color); gap: 0.5rem; }
.finwiz_logo { height: 26px; }