@import url("/Style%20Library/mobile-table.css");
.container.main .right-menu.right-menu{
    display: none!important;
}
.container.main .right-menu + .left-content {
    width: 100%!important;
}

.main-container {
    padding: 0px 16px 60px 16px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-end;
    justify-content: flex-start;
    width: 100%;
    flex-shrink: 0;
    max-width: 1440px;
    position: relative;
    overflow: hidden;
}

.title {
    padding: 30px 0px 30px 0px;
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: flex-start;
    justify-content: flex-end;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.div {
    color: var(--h1, #003254);
    text-align: right;
    font-family: var(--h1-font-family, 'Rubik-Bold', sans-serif);
    font-size: var(--h1-font-size, 31px);
    font-weight: var(--h1-font-weight, 700);
    position: relative;
    flex: 1;
}

.main-content-container {
    /* display: flex; */
    /* flex-direction: row; */
    /* gap: 15px; */
    /* align-items: flex-start; */
    /* justify-content: flex-start; */
    /* flex-wrap: wrap; */
    /* align-content: flex-start; */
    /* align-self: stretch; */
    /* flex-shrink: 0; */
    /* position: relative; */
}

.income-source-container {
    border-radius: 7px;
    border-style: solid;
    border-color: var(--border-input, #cccccc);
    border-width: 1px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    justify-content: flex-start;
    /* flex: 1; */
    position: relative;
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.25);
    background: white;
}

.h-2 {
    padding: 10px 0px 10px 0px;
    display: block;
    color: var(--heading3);
    font-weight: bold;
    font-size: 1.2em;
}

.div2 {
    color: var(--h2, #0261a4);
    text-align: right;
    font-family: var(--h1-font-family, 'Rubik-Bold', sans-serif);
    font-size: var(--h1-font-size, 31px);
    font-weight: var(--h1-font-weight, 700);
    position: relative;
    flex: 1;
}

.question-header {
    background: var(--question-bg, #f0f8ff);
    padding: 10px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    align-self: stretch;
    flex-shrink: 0;
    height: 38px;
    position: relative;
}

.div3 {
    color: var(--txt, #333333);
    text-align: right;
    font-family: , sans-serif;
    font-size: 16px;
    font-weight: 700;
    position: relative;
}

.radio-group-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}

.radio-with-label {
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: flex-start;
    justify-content: flex-end;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}

.div4 {
    color: #333333;
    text-align: right;
    font-family: 'Rubik-Regular', sans-serif;
    font-size: 16px;
    font-weight: 400;
    position: relative;
    flex: 1;
}

.radio-buttons {
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 21px;
    height: 21px;
    position: relative;
}

.radio {
    border-radius: 100px;
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.state-layer {
    padding: 8px;
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}

.icon {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    position: relative;
    overflow: visible;
}

.icon2 {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    position: relative;
    overflow: visible;
}

.text-container {
    background: #ffffff;
    border-radius: 4px;
    border-style: solid;
    border-color: var(--border-input, #cccccc);
    border-width: 1px;
    padding: 10px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    align-self: stretch;
    flex-shrink: 0;
    height: 35px;
    position: relative;
    overflow: hidden;
}

.text {
    color: var(--txt, #333333);
    text-align: right;
    font-family:Rubik,  'Arimo', sans-serif;
    font-size: 16px;
    font-weight: 400;
    position: relative;
}

.month-selection-container {
    display: flex;
    gap: 0;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
    flex-direction: column;
}

.month-selection-container table {width:100%;}

button.monthBtn {
        background-color: white;
        border-color: var(--breadcrumbs)!important;
        color: #389dd8;
        border: 1px solid;
        min-width: unset;
        width: calc(100% - .3em);
        padding: .2em 1em;
        box-sizing: border-box;
        margin: 0.1em .3em;
        font-family: Rubik, Arimo,Arial!important;
        cursor: pointer;
    }


button.monthBtn:hover {background-color: var(--button1hoverBg);color: white;}    
    
 .monthBtn.selected {
    border-radius: 3px;
    border-style: solid;
    border-color: var(--border-input, #cccccc);
    border-width: 1px;
    /* padding: 6px 10px; */
    display: flex;
    flex-direction: row;
    /* gap: 10px; */
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    /* width: 92px; */
    position: relative;
    overflow: hidden;
    background: var(--button1bg);
    color: white;
    border-color: var(--button1bg);
}

._1 {
    color: var(--additionaldesc, #555555);
    text-align: right;
    font-family:Rubik,  'Arimo', sans-serif;
    font-size: 14.666000366210938px;
    font-weight: 700;
    position: relative;
}

.toggle-button2 {
    border-radius: 3px;
    border-style: solid;
    border-color: var(--border-input, #cccccc);
    border-width: 1px;
    padding: 6px 12px 6px 12px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 93px;
    position: relative;
    overflow: hidden;
}

.toggle-button3 {
    background: #327ab2;
    border-radius: 3px;
    border-style: solid;
    border-color: #327ab2;
    border-width: 1px;
    padding: 6px 12px 6px 12px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 93px;
    position: relative;
    overflow: hidden;
}

._12 {
    color: #ffffff;
    text-align: right;
    font-family:Rubik,  'Arimo', sans-serif;
    font-size: 14.666000366210938px;
    font-weight: 700;
    position: relative;
}

.question-header2 {
    background: #f5f5f1;
    padding: 10px;
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-content: center;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}

.text2 {
    color: var(--txt, #333333);
    text-align: right;
    font-family: Rubik,  'Arimo', sans-serif;
    font-size: 16px;
    font-weight: 700;
    position: relative;
    flex: 1;
}

.income-details-container {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}

.income-detail {
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    width: 2.7em;
    position: relative;
    padding: 2em;
    margin: 0.1em .3em .1em 0.8em;
}

.income-detail:last-child {margin-left:0}

.income-detail2 {
    background: #ffffff;
    border-radius: 4px;
    border-style: solid;
    border-color: var(--border-input, #cccccc);
    border-width: 1px;
    padding: 10px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
    height: 35px;
    position: relative;
    overflow: hidden;
}

.income-amount {
    color: var(--txt, #333333);
    text-align: right;
    font-family: Rubik, Arimo, sans-serif;
    font-size: 16px;
    font-weight: 400;
    position: relative;
}

.income-description {
    /* color: #333333; */
    text-align: right;
    font-family: Rubik, Arimo, sans-serif;
    font-size: 16px;
    font-weight: 400;
    position: relative;
    padding: 0.3em 0 .3em .3em;
}

.income-description2 {
    color: #333333;
    text-align: right;
    font-family: Rubik, Arimo, sans-serif;
    font-size: 16px;
    font-weight: 400;
    position: relative;
}

.icon3 {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    position: relative;
    overflow: visible;
}

.icon4 {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    position: relative;
    overflow: visible;
}

.toggle-button4 {
    background: #327ab2;
    border-radius: 3px;
    border-style: solid;
    border-color: #327ab2;
    border-width: 1px;
    padding: 6px 12px 6px 12px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 92px;
    position: relative;
    overflow: hidden;
}

.additional-info-container {
    padding: 10px 0px 0px 0px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}

.primary-button {
    background: var(--button2bg);
    border-radius: 3px;
    border-style: solid;
    border-color: var(--button2border);
    border-width: 1px;
    /* padding: 6px 12px 6px 12px; */
    /* display: flex; */
    /* flex-direction: row; */
    /* gap: 4px; */
    align-items: center;
    justify-content: center;
    /* flex-shrink: 0; */
    width: 503px;
    height: 42px;
    /* position: relative; */
    color: var(--button2txt);
    margin: auto;
}

.primary-button:hover {
    background: var(--button2hoverBg);
    color: white;
    border-color: var(--button2hoverBorder);
} 

.remove-income-btn {
    position: absolute;
    border: 0;
    box-shadow: none;
    left: 0.8em;
    padding: 0;
    width: 22px;
    font-size: 1.8em;
    min-width: unset!important;
    color: var(--breadcrumbs);
    font-weight: 400;
    top: 0.5em;
}
.remove-income-btn:hover {background:none; color:black;}


#addIncomeBtn {margin: 2em auto 0;display:flex;}

.div5 {
    color: #00416f;
    text-align: right;
    font-family: Rubik, Arimo, sans-serif;
    font-size: 14.666000366210938px;
    font-weight: 400;
    position: relative;
}

.plus-circle {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    position: relative;
    overflow: visible;
}

.button-container {
    padding: 20px 0px 0px 0px;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}

.primary-button2 {
    background: #327ab2;
    border-radius: 3px;
    border-style: solid;
    border-color: #327ab2;
    border-width: 1px;
    padding: 6px 12px 6px 12px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 100px;
    position: relative;
    overflow: hidden;
}

.calculator {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    position: relative;
    overflow: visible;
}

.div6 {
    color: #ffffff;
    text-align: right;
    font-family: Rubik, Arimo, sans-serif;
    font-size: 14.666000366210938px;
    font-weight: 700;
    position: relative;
}

.primary-button3 {
    background: #c0e5f2;
    border-radius: 3px;
    border-style: solid;
    border-color: #c0e5f2;
    border-width: 1px;
    padding: 6px 12px 6px 22px;
    display: flex;
    flex-direction: row;
    gap: 4px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 100px;
    position: relative;
    overflow: hidden;
}

.chevron-right {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    position: relative;
    overflow: visible;
}

.Frame6 
{display: flex;flex-direction: column;align-items: flex-start;padding: 20px;gap: 10px;max-width: 699px;/* height: 234px; *//* background: #F0F8FF; */border-radius: 7px;flex: none;order: 0;align-self: stretch;flex-grow: 0;}

.Frame6 > div {
    width: 100%;
}
.result-line {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin: .5em 0;
    border-bottom: 1px solid var(--separator);
    padding: 0 0 0.5em 0;
}

.result-line:nth-last-child(2) {
    color: green;
}

.exclamation-triangle
{
display: flex;
flex-direction: column;
align-items: center;
padding: 0px;
gap: 10px;
 
width: 16px;
height: 16px;
 
flex: none;
order: 1;
flex-grow: 0;
}
 
.Table1 
{
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: flex-start;
padding: 0px;
width: 1408px;
height: 600px;
overflow-y: scroll;
border: 1px solid #AAAAAA;
flex: none;
order: 5;
align-self: stretch;
flex-grow: 0;
}



.step3 #incomes {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 1.2em);
    margin: 0 -.6em;
}
.step3 > div:not(.CalcResult) > div {
    width: calc(50% - 1.2em);
    box-sizing:border-box;
    margin: 0.6em;
}
.step3 > div:not(.CalcResult) > div > div {width:100%;box-sizing: border-box;}




.step3 input[type="text"] {
    margin-right: 0px;
}


.Question_gray {background: aliceblue;width:100%;}


/*--------------------TABLE RESULTS------------------*/


.results-area .table1 * {
    font-family:Rubik, Arimo, Arial;
}


.results-area .table1 {
    border\:;
    border: 1px solid #aaa;
    margin-top: 1em;
}
.results-area .table1 th {
    text-align: right;
    color: #577293;
    font-weight: 500;
    padding: .7em .5em;
    background: #f9f9f9;
    border-bottom: 1px solid #aaa;
    font-size: .9em;
}
.results-area .table1 tr {flex-direction: row;flex-wrap: wrap;gap: .5em;}
.results-area .table1 td {
    padding: .7em .5em;
    border-top: 1px solid #eee;
}

.results-area .table1 td:last-child {font-weight:600}

.results-area .table1 tr:last-child td {font-weight:600; border-top-color:#aaa; background-color:#f9f9f9}

a.primary.button:hover {
	background: var(--button1hoverBg);
	color:white!important;
}
a.primary.button {
    display: flex;
    text-decoration: none!important;
    align-items: center;
    gap: 0.3em;
    background: var(--button1bg);
    border: 1px solid var(--button1border);
    padding: .2em .8em;
    border-radius: .5em;
    width: 11em;
    justify-content: center;
    margin-top: 1em;
    color: white;
}
.income-details-div {/* flex:1; */display: flex;gap: 0.2em;width: calc(33% - 0.6em);flex-direction: column;}
.income-details-div input {
    width: 100%;
}


span.average-note {
    display: flex;
    gap: 0.5em;
}

span.average-note .fas {
    color: orange;
}

/*______________________________MOBILE______________________________*/


@media (max-width:768px) {

.step3 > div:not(.CalcResult) > div {
    width:100%; 
    
}

.Calculator {
    padding: 1em .5em 5.5em;
 }
.step3 input[type="text"] ,
    .primary-button,
    .income-details-div {
    width: 100%;
}

.month-selection-container table tr {
    display: flex;
    flex-wrap: wrap;
}
    .month-selection-container table tr td{
    width: calc((100% / 3) - 4px);
}
}

@media (max-width: 500px) {

    table.btl-rteTable-default tbody tr th, 
	table.btl-rteTable-default tbody tr td {
        text-align: right!important;
        width: calc(50% - 1em)!important;
        padding: 0!important;
    }

	table.btl-rteTable-default tbody tr th br, 
	table.btl-rteTable-default tbody tr td br{
        display:none
    }

table.btl-rteTable-default tbody tr > *:nth-child(1) {
    font-weight: bold;
    text-align: center!important;
    padding: 0;
    width: 100%!important;
}
table.btl-rteTable-default tbody tr {}
	
table.btl-rteTable-default tbody tr > *:nth-child(1):before {
        /* content:"מקור הכנסה"; */
	
    }
	
table.btl-rteTable-default tbody tr > *:nth-child(2):before {
        content:"חודש 1"
    }

table.btl-rteTable-default tbody tr > *:nth-child(3):before {
	 content:"חודש 2"
}

table.btl-rteTable-default tbody tr > *:nth-child(4):before {
	 content:"3 חודש "
}
table.btl-rteTable-default tbody tr > *:nth-child(5):before {
	 content:"4 חודש "
}
table.btl-rteTable-default tbody tr > *:nth-child(6):before {
	 content:"5 חודש "
}
table.btl-rteTable-default tbody tr > *:nth-child(7):before {
	 content:"6 חודש "
}
table.btl-rteTable-default tbody tr > *:nth-child(8):before {
	 content:"7 חודש "
}
table.btl-rteTable-default tbody tr > *:nth-child(9):before {
	 content:"8 חודש "
}
table.btl-rteTable-default tbody tr > *:nth-child(10):before {
	 content:"9 חודש "
}
table.btl-rteTable-default tbody tr > *:nth-child(11):before {
	 content:"10 חודש "
}
table.btl-rteTable-default tbody tr > *:nth-child(12):before {
	 content:"11 חודש "
}
table.btl-rteTable-default tbody tr > *:nth-child(13):before {
	 content:"12 חודש "
}
table.btl-rteTable-default tbody tr > *:nth-child(14):before {
	 content:'סה"כ'
}
	table.btl-rteTable-default tbody tr > *:nth-child(14) {
    width: 100%!important;
}
}