/* LISTING CALC LINK & ICONS */

.calcsContent {display: flex; flex-direction: column; gap: var(--gap);
	> div {order: 20}
}
.calcsInfo {order: 10; font-size: calc(var(--fontSizeSmall) - 0.2rem); color: var(--darkGrey); line-height: 1.2; max-width:  var(--formWidth); margin: 0 auto; text-align: justify}

#calc-listing {vertical-align: top; display: flex; order: 1; gap: calc(var(--gapSmall) + 8px); justify-content: center; flex-wrap: wrap; margin: var(--gapSmall) 0 0 0;
	a {font-size: calc(var(--fontSizeSmall) - 0.12rem); text-align: center; display: block; vertical-align: top; padding: calc(var(--gapSmall) + 8px) var(--gapSmall); border: 1px solid var(--tertiary); border-radius: var(--borderRadius); position: relative; flex: 1 1 calc(250px); min-width: 250px; max-width: 300px; background: white; line-height: 1.25; text-wrap: pretty}
	a:hover, a.current {text-decoration: none; border: 1px solid var(--secondary); z-index: 10; transform: scale(1.02); box-shadow: var(--materialShadow);}
	a:hover strong {color: #333;}
	a strong {font-size: calc(var(--fontSize) + 0.1rem); line-height: 23px; margin: 16px auto 6px auto; display: block;}
	a img {margin: 0 auto 14px auto; width: auto; height: 80px;}
}

body.calcListing .infoBox {order: 5; margin: 0 auto; font-size: var(--fontSizeSmall); color: var(--darkGrey);
	h4 {font-size: var(--fontSize)}
}



/* CALC ORDER IN ASIDE & IN LISTING BY MAIN ACTIVITY */

.calcListing aside section.filter-links {display: flex; flex-direction: column}
.calcListing aside .filter-links a, .calcListing #calc-listing a {order: 200}
.calcListing aside a.newCalc {font-weight: bold}




/* SAWMILLING */

.calcListing.mainActivity5 {
	.filter-links a.timber, #calc-listing a.timber {order: 20}
	 #calc-listing a.humid.drying.timber {order: 30}
	.filter-links a.log, #calc-listing a.log {order: 40}
	.filter-links a.cutting, #calc-listing a.cutting {order: 60}
	.filter-links a.plaining, #calc-listing a.plaining {order: 80}
	.filter-links a.humid, #calc-listing a.humid {order: 100}
	.filter-links a.tree, #calc-listing a.tree {order: 120}
}


/* JOINERY */

.calcListing.mainActivity10 {
	.filter-links a.large, #calc-listing a.paintConsumption {order: 10}
	.filter-links a.large, #calc-listing a.large {order: 20}
	#calc-listing a.edge {order: 30}
	.filter-links a.timber, #calc-listing a.timber {order: 40}
	.filter-links a.plaining, #calc-listing a.plaining {order: 50}
}


/* OTHER PRODUCT */

.calcListing.mainActivity12 {
	.filter-links a.pallet, #calc-listing a.pallet {order: 20}
	.filter-links a.firewood, #calc-listing a.firewood {order: 40}
	.filter-links a.timber, #calc-listing a.timber {order: 60}
	#calc-listing a.humid.drying.timber {order: 70}
	.filter-links a.log, #calc-listing a.log {order: 80}
	.filter-links a.cutting, #calc-listing a.cutting {order: 100}
	.filter-links a.plaining, #calc-listing a.plaining {order: 120}
	.filter-links a.humid, #calc-listing a.humid {order: 140}
	.filter-links a.tree, #calc-listing a.tree {order: 160}
}



/* SERVICES */

.calcListing.mainActivity15 {
	.filter-links a.log, #calc-listing a.log {order: 10}
	.filter-links a.timber, #calc-listing a.timber {order: 20}
	.filter-links a.pallet, #calc-listing a.pallet {order: 30}
	.filter-links a.firewood, #calc-listing a.firewood {order: 40}
	#calc-listing a.humid.drying.timber {order: 70}
	.filter-links a.cutting, #calc-listing a.cutting {order: 100}
	.filter-links a.plaining, #calc-listing a.plaining {order: 120}
	.filter-links a.humid, #calc-listing a.humid {order: 140}
	.filter-links a.tree, #calc-listing a.tree {order: 160}
}


/* SUPLIERS */

.calcListing.mainActivity20 {
	.filter-links a.large, #calc-listing a.large, #calc-listing a.paintConsumption {order: 10}
	#calc-listing a.edge {order: 15}
	.filter-links a.log, #calc-listing a.log {order: 25}
	.filter-links a.timber, #calc-listing a.timber {order: 20}
	.filter-links a.pallet, #calc-listing a.pallet {order: 30}
	.filter-links a.firewood, #calc-listing a.firewood {order: 40}
	#calc-listing a.humid.drying.timber {order: 70}
	.filter-links a.cutting, #calc-listing a.cutting {order: 100}
	.filter-links a.plaining, #calc-listing a.plaining {order: 120}
	.filter-links a.humid, #calc-listing a.humid {order: 140}
	.filter-links a.tree, #calc-listing a.tree {order: 160}
}


/* NEW CALC SIGN */

.newCalcSign {position: absolute; top: -12px; right: -12px; padding: 5px 12px; font-size: 14px; font-weight: bolder; color: white; background: red; border-radius: 24px; z-index: 2; border: 6px solid white;}



/* CALCULATOR WRAP */

.calcWrap {vertical-align: top; overflow: hidden; display: flex; flex-direction: row;}
.calcWrap > div {display: flex; flex-direction: column; vertical-align: top;}
.calcContainer {flex-grow: 1; overflow-x: hidden}
.calculator {margin: 0 auto; width: max(500px); text-align: left; position: relative;}



/* CALCULATOR */

.calcCalculator h1 p {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.calculator > div :is(input,select) {display: block; padding: 8px 10px; width: 100%; margin: 6px 0 0 0; border-width: 2px;}
.calculator > div :is(input,select,option,optgroup) {font-size: 21px; letter-spacing: .5px}

.calculator input[type="text"]:hover, .calculator input[type="number"]:hover, .calculator select:hover {color: #555; border: 2px solid rgba(0,0,0,0.3);}
.calculator input[type="text"]:focus, .calculator input[type="number"]:focus, .calculator select:focus {color: #111; border: 2px solid rgba(0,0,0,0.4); font-weight: 700;}

.calculator div.inputRange {align-self: end}
.calculator div.inputRange input {margin-bottom: 8px;}


.calculator > div > img, .calculator > div > a svg {display: inline-block; width: 21px; height: 21px; margin: 0 5px 0 0;}
.calculator > div > img {width: 24px; height: 20px}


.calculator .calcInput {margin: calc(var(--gap) - 8px) 0;}
.calculator .calcInput .flex > div {text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: bold; font-size: 18px; padding: 2px;}
.calculator .calcInput .flex {gap: var(--gapSmall); flex-wrap: wrap;}

.calculator .calcInput :is(.calc1InputInRow,.calc2InputsInRow) {margin: var(--gapSmall) auto}
.calculator .calcInput .calc1InputInRow > div {width: 100%; flex: 0 1 100%}
.calculator .calcInput :is(.calc2InputsInRow,.calc2InputsInRowResponsive) > div {width: calc(50% - var(--gapSmall) / 2); flex: 0 1 calc(50% - var(--gapSmall) / 2);}
.calculator .calcInput .calc3InputsInRow > div {width: calc(32% - var(--gapSmall) / 3); flex: 0 1 calc(32% - var(--gapSmall) / 3);}


/* RESPONSIVE 2 INPUTS TO 1 INPUT*/
@media screen and (max-width: 1024px) {
	.calculator .calcInput .calc2InputsInRowResponsive > div {width: 100%; flex: 0 1 100%}
	.calcCalculator h1 {margin: 0 0 8px 0;
		p {display: none;}
	}
}


@media screen and (max-width: 968px) {
	.calculator .calcInput.calcInputWrapAllowed .flex > div {width: 100%; flex: 0 1 100%}
}




.calculator div.btnbark {display: flex; text-align: center; padding: 4px 0; overflow: hidden; margin: 0 auto; width: auto; max-width: 300px; align-items: flex-end;}
.calculator .pref-button {margin: 0 0 0 10px; display: inline-block;}


.calcTabs {display: flex; gap: var(--gapSmall); margin: 20px 0 15px 0; justify-content: center;
	> div {flex: 1; text-align: left}
	> div:first-child {text-align: right}
}
.tabButton {padding: 10px 20px; background: none; cursor: pointer; font-size: 18px; font-weight: bold; color: var(--link); border: 3px solid transparent; margin: 0 auto}
.tabButton:hover {color: var(--linkHover); border: 3px solid var(--linkHover); background: none;}
.tabButton.active {color: #fff; background: var(--link); border: 3px solid var(--link);}
.tabContent {display: none; animation: fadeIn 0.3s ease;}
.tabContent.active {display: block;}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}




div.notice5 {margin: var(--gapLarge) auto var(--gapSmall) auto; font-size: calc( var(--fontSizeSmall) - 0.1rem); white-space: normal; font-weight: 400; text-align: center; color: var(--darkGrey);
	a {display: block; font-weight: bold; font-size: inherit; padding: 6px 12px;
		svg {margin-left: 6px; vertical-align: -2px; width: 16px; height: 16px;}
	}
}




.calculator input[type="radio"] {display: none;}
.calculator input[type="radio"] + label {color: #bb0000; font-size: 18px; transition: .4s; padding: 12px 4px; margin: 0px; box-sizing: border-box; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 50%; font-weight: 500; text-align: center}
.calculator input[type="radio"]:checked + label {color: #fff; border-radius: 24px; background: #bb0000; text-decoration: none; font-weight: 700;}
.calculator input[type="radio"] + label:hover {color: #ff0000;}
.calculator input[type="radio"]:checked + label:hover {background: #ff0000; color: #fff;}



.calculator .larg-label1 input[type="radio"] + label, .calculator .larg-label2 input[type="radio"] + label {width: 100%; max-width: 200px;}




/* MODAL INFOR FOR SHRINKAGE */

table.shrinkageInfo {border: 0; padding: 0 !important; background: none;

	tr, tr td, tr th {padding: 3px 2px !important; border: 0 !important; background: none !important; text-align: center; font-size: 15px; vertical-align: top}
	tr td b {font-weight: bold; font-size: 18px}
	
	tr.arrows {
		img {width: 20px; height: auto;}
		th {width: 20px;}
	}

	img {width: 100%; max-width: 300px; max-height: 100px; margin: 0 auto}
	&.firewoodType tr td small {font-size: calc( var(--fontSizeSmall) - 0.2rem); line-height: 1.2}
	&.firewoodType tr td b {font-size: var(--fontSizeSmall)}
	
	&.dbhInfo img {width: 150px; max-height: none; height: 150px; max-width: none; margin: 0 auto}

}





/* CALCULATOR - RESULT */

.calcResult {margin: 0 0 12px 0; padding: 20px 2px 16px 2px; border-radius: var(--borderRadiusLarge); box-shadow: 0 3px 14px #000 inset; white-space: nowrap; overflow: hidden; text-align: center; background: linear-gradient(to bottom, var(--fontColor), black);
	h5 {color: rgba(255,255,255,0.9); font-size: 21px; font-weight: normal; margin: 0 auto 4px auto; white-space: nowrap; display: block; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 3px black;
		img {margin-inline: auto}
	}
	div {padding: 0; font-size: 46px; color: white; font-weight: 500; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
	b {line-height: 62px; font-size: 52px; color: white; font-weight: 700; letter-spacing: 2px; text-shadow: 2px 2px #000;}
	.subResult {margin: 10px auto 0 auto;}
	.subResult:empty, .subResult span:empty {display: none}
	.subResult, .subResult * {font-size: calc( var(--fontSizeLarge) - 0.2rem); color: rgba(255,255,255,0.9)}
	.subResult span {margin-left: 8px; display: inline-block; font-weight: bold; }

	h6.bark, h6 span, h6 div {font-size: 18px;}
	h6.bark {color: rgba(255,255,255,0.9); border-top: 1px solid rgba(255,255,255,0.4); line-height: 18px; background: rgba(255, 255, 255, 0.2); margin: 10px -10px -16px -10px; font-weight: normal; padding: 12px 0;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
	h6.bark span {font-weight: bold; color: white;}
}

.calcEnergy {
	
	.calcResult {padding: 0 18px;
		
		calcresult {display: block; border-bottom: 1px solid rgba(255,255,255,0.25); padding-block: 18px;}
		calcresult:last-child {border-bottom: none}
		calcresult:not(:first-child) b {line-height: 54px; font-size: 42px;}
		h5 {margin: 0 auto;}

	}
	
}


.firewoodVolume {

	.tabSelector {display: flex; justify-content: space-between; gap: 8px; padding: 8px 0px !important;
		
		a {display: block; flex: 1 25%; text-align: center; border: 3px solid var(--lighterGrey); padding: 20px 12px; border-radius: 8px;

			img {width: auto; max-height: 70px; height: auto; margin: 0 auto;}
		
		}
		
		a:hover {border: 3px solid var(--linkHover); box-shadow: var(--materialShadow);}
		a.selected {border: 3px solid var(--link); box-shadow: var(--materialShadow);}

	}

}



.timberShrinkage .calcResult {display: flex;
	> div {width: 50%;}
}




/* CONVERTER */

.converter .calculator .calcInput {
	.calc3InputsInRow {align-items: center; gap: 0px}
	.calc3InputsInRow div {flex:1; width: auto;}
	div.arrowDiv {font-weight: bolder; font-size: 40px; flex: 0 1 auto; padding: 4px 2px;}
	.convertDiv {justify-content: center;}
	.convertDiv a {display: block; margin: 0 auto; text-align: center}
	.convertDiv a  svg {display: block; margin: 0 auto; width: 48px; height: 48px}
}




@media screen and (max-width: 1024px) {
div.calcResult {padding: 18px 4px 15px 4px;
	div {font-size: 34px;}
	b {line-height: 48px; font-size: 48px;}
	h5 {width: 100%; max-width: 300px;}
	h6.bark {margin: 7px -10px -15px -10px; padding: 10px 0;}
}

#calc-listing a strong {font-size: calc(var(--fontSize) + 0.2rem)}

}




/* CALC BOTTOM BAR */

.bottomBar li.calcMoreInfo {display: none;}
.bottomBar li.calcMoreInfo.showLink {display:flex;}





/* RESULT TABLE for Roundwood Volume - /calc-roundwood-volume.php */

.calcResultTable {width: auto; margin: var(--gap) auto 0 auto;

	table {margin: 0 auto; width: 100%; max-width: 820px; white-space: nowrap;

		thead :is(td,th) {font-size: calc(var(--fontSizeSmall) - 0.1rem);}

		tbody {
			* {font-size: calc(var(--fontSizeSmall) - 0.1rem); line-height: 1.2}
			small {display: block; font-size: calc(var(--fontSize) - 0.5rem); margin: 0}
			.actionCol {padding: 2px;}
		}

		tfoot {
			* {font-size: calc(var(--fontSize) + 0.0rem)}
		}

	}
}

.actTableFooter {justify-content: center;
	a {font-weight: bold;}
}


.calcResultTable:empty, .calcResultTable table tbody small:empty {display: none}


@media screen and (max-width: 1024px) {
	.calcResultTable {width: 100%; max-width: 600px}
	.tableFooter {flex-direction: row;}
}




/* LEFT PART - LEADER BANNER 2 */

.calcWrap .calcLeftContainer {width: 250px; text-align: left; display: block;
	.calcIcon {width: 150px; height: auto; margin: 0 auto var(--gap) 0;}
	#leader_banner2_app {display: block; margin: auto auto 0 auto;}
	#leader_banner2_app img {display: block; height: 210px; width: 210px;}
	a {text-wrap: pretty;}

	.calcInfo {background-color: var(--lightestGrey); padding: var(--gapSmall); margin: var(--gapSmall) 0; text-align: justify; border-radius: 12px;}
	.calcInfo, .calcInfo * {font-size: calc( var(--fontSizeSmall) - 0.12rem); color: var(--darkGrey);}
	.calcInfo sub {font-size: calc( var(--fontSizeSmall) - 0.25rem); line-height:1;}

}




/* ASIDE RIGHT */
a.android {padding:0}
a.android img {margin: var(--gapSmall) auto;}



@media screen and (min-width: 1920px) {
#calc-listing {gap: var(--gapSmall);}
.calculator {width: max(600px);}
}


	
@media screen and (max-width: 1024px) {

.calcWrap, .calculator {width: 100%; margin: 0 auto;}
.calcWrap {flex-wrap: wrap;}

.calculator > div :is(input,select) {font-size: 24px}
.calculator .calcInput {margin: calc(var(--gap) + 0px) 0;}

#calc-listing {margin: 0;
	a {padding: var(--gap); border: 2px solid var(--tertiary); flex: 0 1 calc(50% - 26px); margin-top: 4px;}
	a:hover {text-decoration: none; border: 2px solid var(--secondary); box-shadow: var(--materialShadow);}
	a:hover strong {color: #333;}
	img {float: none; clear: both; margin: 0 auto 14px auto; max-width: 200px; max-height: 80px;}
}


.calcWrap .calcLeftContainer {order: 3; text-align: center; width: 100%; max-width: none;
	#leader_banner2_app {margin: var(--gapLarge) auto;}
	#leader_banner2_app img {height: auto; width: auto;}
}


.calcListing .contentWrapper {flex-direction: row; justify-content: center;flex-wrap: wrap;}
.calcListing aside.asideHidden {order:1; flex: 0 0 50%; text-align: center;}
.calcListing .content {flex: 0 0 100%; order:3; padding-top: 0;}

.calcLeftContainer .calcIcon, .calcLeftContainer a.modalTrigger, .calcCalculator a.asideOpen {display: none}

}


@media screen and (max-width: 768px) {
	
#calc-listing a {padding: var(--gap); border: 2px solid var(--tertiary); flex-basis: 100%; max-width: none;}

}



/* BLOCKING CALCS when REACHING DAILY LIMIT */

#calcBlock {position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.7); backdrop-filter: blur(1.7px); display: flex; align-items: center; justify-content: center;}




/* ===== ARTICLES ===== */
/* ==================== */

.calcArticel {line-height: 1.4;

		block {padding: 24px; margin: 12px 0; background: var(--lightestGrey); font-size: calc( var(--fontSizeLarge) - 0.1rem); font-weight: bold; width: auto;}

		ul, ol {margin: 7px 0 7px var(--gap);}
		ul li {margin: 6px 0}
		ol li {margin: 10px 0; padding-inline: 8px}
		ol b {display: block;}
		ol li::marker {font-weight: bold; font-size: 1.8rem; color: var(--darkGrey);}
		
		img {float:right; max-width: 300px; width: 100%; height: auto; margin: 0 0 24px 24px;}
		img::after{content:""; display: block; clear: both;}

}

@media screen and (max-width: 768px) {

	.calcArticel {

			img {display: none}

	}

}




/* INFO AND QUIDES */

.calcQuideInfo .content {line-height: 1.5;

	* {line-height: 1.5}
	h2 {font-size: var(--fontSizeXLarge); margin: 0 0 var(--gapSmall) 0; font-weight: bold }
	h3 {font-size: var(--fontSizeXLarge); margin: var(--gap) 0 var(--gapSmall) 0 }
	h4 {font-size: var(--fontSizeLarge); margin: 24px 0 12px 0}
	h5 {font-size: calc(var(--fontSizeLarge) - 0.2rem); margin: 24px 0 0 0}
	p {margin: 14px 0; line-height: 1.5}
	ul {margin: 0 0 0 var(--gapSmall);
		li {margin: 12px 0; line-height: 1.5}
	}

	sup, sub {font-size: calc( var(--fontSizeSmall) - 0.2rem);}
	formula {background: var(--lightestGrey); padding: 8px 16px; display: block; margin: 4px auto 0 0; font-size: calc(var(--fontSizeLarge) - 0.3rem); width: fit-content}
	
	table {width: auto; margin: 8px auto}
	
	.infoBox ul li {margin: 4px 0}

}