/* =Variables
-------------------------------------------------------------- */

:root {
	--ismPadding10: clamp(5px, .76vw, 10px);
	--ismPadding20: clamp(10px, 1.53vw, 20px);
	--ismPadding30: clamp(15px, 2.29vw, 30px);
	--ismPadding40: clamp(20px, 3.06vw, 40px);
	--ismPadding60: clamp(30px, 4.61vw, 60px);
	--ismPadding80: clamp(40px, 6.12vw, 80px);
	--ismPadding100: clamp(60px, 7.69vw, 100px);
	--ismPadding120: clamp(60px, 9.22vw, 120px);
	--ismFont16: clamp(12px, 1.23vw, 16px);
	--ismFont18: clamp(14px, 1.5vw, 18px);
	--ismFont20: clamp(16px, 1.53vw, 20px);
	--ismFont30: clamp(20px, 2.3vw, 30px);
	--ismFont40: clamp(24px, 3.06vw, 40px);
	--ismFont60: clamp(36px, 4.61vw, 60px);
	--ismFont70: clamp(40px, 5.38vw, 70px);
	--ismFont80: clamp(48px, 6.12vw, 80px);
	--taxfloBlue: #0f1c45; /* TaxFlo Blue */
	--taxfloDarkGrey: #1c1c1c; /* TaxFlo Dark Grey */
	--taxfloGold: #deb07a; /* TaxFlo Gold */
	--taxfloLightGrey: #f2f2f5; /* TaxFlo Light Grey */
}

.tf-calc-wrapper {
    width: calc(100% - var(--ismPadding60));
    max-width: calc(1300px - var(--ismPadding60));
    margin: 0 auto;
}
ul.tf-calc-tabs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 2px;
}
ul.tf-calc-tabs > li {
    color: var(--taxfloDarkGrey);
    padding: 1em 2em .25em 2em;
    font-size: var(--ismFont16);
    background-color: var(--taxfloLightGrey);
    margin: .25em 0 0;
    border-radius: 4px 4px 0 0;
    cursor: pointer;
	transition: padding .25s ease, margin .25s ease;
}
@media (hover: hover) {
	ul.tf-calc-tabs > li:hover {
	    margin: 0;
		padding: 1em 2em;
	}
}
ul.tf-calc-tabs > li.active {
    color: var(--taxfloGold);
    background-color: var(--taxfloBlue);
    padding: 1em 2em;
    margin-top: 0;
}
ul.tf-calc-screens {
    background-color: var(--taxfloBlue);
    margin: 0;
    padding: var(--ismPadding60);
	list-style: none;
}
ul.tf-calc-screens > li {
    display: none;
}
ul.tf-calc-screens > li.active {
    display: block;
}
.tf-calc-inner {
    display: flex;
    gap: var(--ismPadding40);
}
.tf-calc-panel {
    width: calc(50% - var(--ismPadding20));
}
.tf-calc-panel-inner {
    background-color: #FFF;
    border-radius: 4px;
    padding: var(--ismPadding30);
	font-size: var(--ismFont16);
}
.tf-calc-panel-inner h3 {
    margin: 0;
    font-size: 1.5em;
}
.tf-calc-panel-inner h3 span {
    font-size: .75em;
    color: #999;
    font-weight: normal;
}
.tf-calc-row {
    margin-top: 1.5em;
}
.tf-calc-row h4 {
    margin: 0;
    font-size: 1em;
}
.tf-calc-row p {
    margin: .5em 0 0;
    color: #999;
}
.tf-calc-row select,
.tf-calc-row input[type=number] {
    margin: .5em 0 0;
    border: solid 2px var(--taxfloDarkGrey);
    font-size: var(--ismFont20);
    height: var(--ismPadding60);
    line-height: var(--ismPadding60);
    font-family: 'Outfit', sans-serif;
    color: var(--taxfloBlue);
    padding: 0 var(--ismPadding20);
    width: 100%;
	transition: border-color .25s ease;
}
.tf-calc-row select {
	background-image: url('img/select-arrow.jpg');
	background-size: contain;
	background-position: center right;
	background-repeat: no-repeat;
	-moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
}
.tf-calc-row input[type=number] {
  position: relative;
}
.tf-calc-row select:focus,
.tf-calc-row input[type=number]:focus {
    outline: none;
    border-color: var(--taxfloGold);
}
.tf-calc-row input[type=number]::-webkit-inner-spin-button, 
.tf-calc-row input[type=number]::-webkit-outer-spin-button {
	-moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
	background: url(img/number-arrows.jpg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
	width: var(--ismPadding60);
	opacity: 1;
	color: var(--taxfloBlue);
	font-size: var(--ismFont16);
	cursor: pointer;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
}
.tf-calc-checklist {
    font-size: var(--ismFont20);
    margin-top: .5em;
	display: flex;
	gap: 1.5em;
	flex-wrap: wrap;
}
.tf-calc-checklist label {
    display: inline-flex;
    gap: .5em;
	align-items: center;
}
.tf-calc-checklist input[type=radio] {
    height: 2em;
    width: 2em;
    border: solid 2px var(--taxfloBlue);
    margin: 0;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    border-radius: 100%;
	position: relative;
}
.tf-calc-checklist input[type=radio]:checked:before {
    content: '';
    display: block;
    width: 1em;
    height: 1em;
    position: absolute;
    top: calc(.5em - 2px);
    left: calc(.5em - 2px);
    background-color: var(--taxfloBlue);
    border-radius: 100%;
}
.tf-calc-panel-inner header {
    display: flex;
}
.tf-calc-summary-toggle {
    font-family: 'ISM Icons';
    align-self: center;
    margin-left: auto;
	transition: transform .4s;
}
.tf-calc-summary-toggle.collapsed {
	transform: rotate(540deg)
}
.tf-calc-summary-table-header {
    margin-top: 1.5em;
    padding: .5em 1em;
    display: flex;
    gap: 2em;
    background-color: var(--taxfloGold);
    font-weight: bold;
    color: var(--taxfloBlue);
}
.tf-calc-summary-table-row {
    padding: .5em 0;
	margin: .5em 0 0;
    display: flex;
	flex-wrap: wrap;
    gap: 0 2em;
	border-bottom: dashed 1px #999;
}
.tf-calc-summary-table-header-label,
.tf-calc-summary-table-row-label {
    flex: 1;
}
.tf-calc-summary-table-header-amount,
.tf-calc-summary-table-row-amount {
    min-width: 8em;
    text-align: right;
}
.tf-calc-summary-table-row-selection {
    width: 100%;
    font-size: .9em;
    color: #999;
}
.tf-calc-summary-table-total {
    padding: .5em 0;
    display: flex;
	transition: all .4s;
}
.tf-calc-summary-table-rows[style*="display: none;"] + .tf-calc-summary-table-total {
	margin-top: 1em;
	border-top: solid 1px var(--taxfloDarkGrey);
}
.tf-calc-summary-table-total * {
    font-size: 1.5em;
    font-weight: 900;
	text-transform: uppercase;
}
.tf-calc-summary-total {
    margin-left: auto;
}
.tf-calc-bic-book-row.hidden {
	display: none;
}

@media only screen and (max-width:600px) {
	ul.tf-calc-tabs > li {
		padding: .75em 1.5em .375em 1.5em;
		margin: .375em 0 0;
	}
	ul.tf-calc-tabs > li.active {
		padding: .75em 1.5em;
	}
	.tf-calc-inner {
		flex-wrap: wrap;
	}
	.tf-calc-panel {
		width: 100%;
	}

}