/* LISTING CALC LINK & ICONS */

.calcsContent {display: flex; flex-direction: column; gap: var(--gap);}
.calcsContent > 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;}
#calc-listing 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}
#calc-listing a:hover,#calc-listing a.current {text-decoration: none; border: 1px solid var(--secondary); z-index: 10; transform: scale(1.02); box-shadow: var(--materialShadow);}
#calc-listing a:hover strong {color: #333;}
#calc-listing a strong {font-size: calc(var(--fontSize) + 0.1rem); line-height: 22px; margin: 16px auto 6px auto; display: block;}
#calc-listing 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);}
body.calcListing .infoBox 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,.calcListing.mainActivity5 #calc-listing a.timber {order: 20}
.calcListing.mainActivity5 #calc-listing a.humid.drying.timber {order: 30}
.calcListing.mainActivity5 .filter-links a.log,.calcListing.mainActivity5 #calc-listing a.log {order: 40}
.calcListing.mainActivity5 .filter-links a.cutting,.calcListing.mainActivity5 #calc-listing a.cutting {order: 60}
.calcListing.mainActivity5 .filter-links a.plaining,.calcListing.mainActivity5 #calc-listing a.plaining {order: 80}
.calcListing.mainActivity5 .filter-links a.humid,.calcListing.mainActivity5 #calc-listing a.humid {order: 100}
.calcListing.mainActivity5 .filter-links a.tree,.calcListing.mainActivity5 #calc-listing a.tree {order: 120}


/* JOINERY */

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


/* OTHER PRODUCT */

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


/* SERVICES */

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


/* SUPLIERS */

.calcListing.mainActivity20 .filter-links a.large,.calcListing.mainActivity20 #calc-listing a.large,.calcListing.mainActivity20 #calc-listing a.paintConsumption {order: 10}
.calcListing.mainActivity20 #calc-listing a.edge {order: 15}
.calcListing.mainActivity20 .filter-links a.log,.calcListing.mainActivity20 #calc-listing a.log {order: 25}
.calcListing.mainActivity20 .filter-links a.timber,.calcListing.mainActivity20 #calc-listing a.timber {order: 20}
.calcListing.mainActivity20 .filter-links a.pallet,.calcListing.mainActivity20 #calc-listing a.pallet {order: 30}
.calcListing.mainActivity20 .filter-links a.firewood,.calcListing.mainActivity20 #calc-listing a.firewood {order: 40}
.calcListing.mainActivity20 #calc-listing a.humid.drying.timber {order: 70}
.calcListing.mainActivity20 .filter-links a.cutting,.calcListing.mainActivity20 #calc-listing a.cutting {order: 100}
.calcListing.mainActivity20 .filter-links a.plaining,.calcListing.mainActivity20 #calc-listing a.plaining {order: 120}
.calcListing.mainActivity20 .filter-links a.humid,.calcListing.mainActivity20 #calc-listing a.humid {order: 140}
.calcListing.mainActivity20 .filter-links a.tree,.calcListing.mainActivity20 #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);}

.calculator .calcInput .calc3InputsInRow.newton {
display: flex;
flex-wrap: wrap;
gap: var(--gapSmall);}

.calculator .calcInput .calc3InputsInRow.newton > div {
flex: 1 0 calc(50% - var(--gapSmall) / 2);}

.calculator .calcInput .calc3InputsInRow.newton > div:last-child {
flex: 1 0 100%;}


/* 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;}
.calcCalculator h1 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;}
.calcTabs > div {flex: 1; text-align: left}
.calcTabs > 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); line-height: 1.25;}
div.notice5 a {display: block; font-weight: bold; font-size: inherit; padding: 6px 12px;}
div.notice5 a 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; font-weight: bold}
.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;

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

table.shrinkageInfo tr.arrows img {width: 20px; height: auto;}
table.shrinkageInfo tr.arrows th {width: 20px;}

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

table.shrinkageInfo.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);}
.calcResult 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;}
.calcResult h5 img {margin-inline: auto}
.calcResult div {padding: 0; font-size: 46px; color: white; font-weight: 500; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.calcResult b {line-height: 62px; font-size: 52px; color: white; font-weight: 700; letter-spacing: 2px; text-shadow: 2px 2px #000;}
.calcResult .subResult {margin: 4px auto 0 auto;}
.calcResult .subResult:empty,.calcResult .subResult span:empty {display: none}
.calcResult .subResult,.calcResult .subResult * {font-size: calc( var(--fontSizeLarge) - 0.2rem); color: rgba(255,255,255,0.9)}
.calcResult .subResult span {margin-left: 8px; display: inline-block; font-weight: bold; }

.calcResult h6.bark,.calcResult h6 span,.calcResult h6 div {font-size: 18px;}
.calcResult 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;}
.calcResult h6.bark span {font-weight: bold; color: white;}


.calcEnergy .calcResult {padding: 0 18px;

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


.firewoodVolume .tabSelector {display: flex; justify-content: space-between; gap: 8px; padding: 8px 0px !important;

}
.firewoodVolume .tabSelector a {display: block; flex: 1 25%; text-align: center; border: 3px solid var(--lighterGrey); padding: 20px 12px; border-radius: 8px;

}
.firewoodVolume .tabSelector a img {width: auto; max-height: 70px; height: auto; margin: 0 auto;}


.firewoodVolume .tabSelector a:hover {border: 3px solid var(--linkHover); box-shadow: var(--materialShadow);}
.firewoodVolume .tabSelector a.selected {border: 3px solid var(--link); box-shadow: var(--materialShadow);}


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


/* CONVERTER */

.converter .calculator .calcInput .calc3InputsInRow {align-items: center; gap: 0px}
.converter .calculator .calcInput .calc3InputsInRow div {flex:1; width: auto;}
.converter .calculator .calcInput div.arrowDiv {font-weight: bolder; font-size: 40px; flex: 0 1 auto; padding: 4px 2px;}
.converter .calculator .calcInput .convertDiv {justify-content: center;}
.converter .calculator .calcInput .convertDiv a {display: block; margin: 0 auto; text-align: center}
.converter .calculator .calcInput .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.calcResult div {font-size: 34px;}
div.calcResult b {line-height: 1; font-size: 42px;}
div.calcResult h5 {width: 100%; max-width: 300px; font-size: 19px; }
div.calcResult h6.bark {margin: 7px -10px -15px -10px; padding: 10px 0;}

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

.calculator input[type="radio"] + label {font-size: 16px}

}


/* 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;

}
.calcResultTable table {margin: 0 auto; width: 100%; max-width: 820px; white-space: nowrap; border: 1px solid var(--grey);

}
.calcResultTable table thead td,.calcResultTable table thead th {font-size: calc(var(--fontSizeSmall) - 0.05rem); background: var(--lightestGrey); padding: 8px 10px; font-weight: bold; border: 1px solid var(--lighterGrey);}


.calcResultTable table tbody td,.calcResultTable table tbody th {padding: 10px 10px; border: 1px solid var(--lighterGrey);}
.calcResultTable table tbody * {font-size: calc(var(--fontSize) - 0.2rem); line-height: 1.2}
.calcResultTable table tbody small {display: block; font-size: calc(var(--fontSize) - 0.5rem); margin: 0}
.calcResultTable table tbody .actionCol {padding: 0px;}
.calcResultTable table tbody .actionCol a {padding: 6px 10px;}
.calcResultTable table tbody .actionCol a svg {width: 16px; height: 16px;}

.calcResultTable table tfoot * {font-size: calc(var(--fontSize) - 0.1rem); background: var(--darkGrey); color: white; padding: 6px 10px; font-weight: bold;}


.actTableFooter {justify-content: center; gap: 36px !important}
.actTableFooter 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;}
.calcWrap .calcLeftContainer .calcIcon {width: 150px; height: auto; margin: 0 auto var(--gap) 0;}
.calcWrap .calcLeftContainer #leader_banner2_app {display: block; margin: auto auto 0 auto;}
.calcWrap .calcLeftContainer #leader_banner2_app img {display: block; height: 210px; width: 210px;}
.calcWrap .calcLeftContainer a {text-wrap: pretty;}

.calcWrap .calcLeftContainer .calcInfo {background-color: var(--lightestGrey); padding: var(--gapSmall); margin: var(--gapSmall) 0; text-align: justify; border-radius: 12px;}
.calcWrap .calcLeftContainer .calcInfo,.calcWrap .calcLeftContainer .calcInfo * {font-size: calc( var(--fontSizeSmall) - 0.12rem); color: var(--darkGrey);}
.calcWrap .calcLeftContainer .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) {

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

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

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

#calc-listing {margin: 0;}
#calc-listing a {padding: var(--gap); border: 2px solid var(--tertiary); flex: 0 1 calc(50% - 26px); margin-top: 4px;}
#calc-listing a:hover {text-decoration: none; border: 2px solid var(--secondary); box-shadow: var(--materialShadow);}
#calc-listing a:hover strong {color: #333;}
#calc-listing 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;}
.calcWrap .calcLeftContainer #leader_banner2_app {margin: var(--gapLarge) auto;}
.calcWrap .calcLeftContainer #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}

.calcResultTable {margin: var(--gapSmall) auto 0 auto;}

}


@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;} */


.calcBlocked .calcBlockedWrapper {max-width: var(--formWidth); width: 100%; display: flex; flex-direction: column; gap: var(--gapLarge); margin: var(--gap) auto;}

.calcBlocked .progressBarLimitContainer {margin: 0 auto; padding: 16px 24px; width: 100%; border-radius: 12px; border: 1px solid var(--lightGrey); box-shadow: var(--materialShadow); background: var(--lightBrown);}
.calcBlocked .progressBarLimitContainer .progressBarLimit {display: flex; flex-wrap: nowrap; flex-direction: row; align-items: center; justify-content: center; gap: 12px;}
.calcBlocked .progressBarLimitContainer .progressBarLimit svg {width: 14px; height: 16px; fill: var(--grey);}
.calcBlocked .progressBarLimitContainer .progressBarLimit * {font-size: var(--fontSizeSmall); color: var(--darkGrey); text-align: center;}
.calcBlocked .progressBarLimitContainer .progressBarLimit .progressBar {flex:1; height: 14px; background: linear-gradient(to bottom, #ff5555 0%, #ff0000 50%, #cc0000 100%); border-radius: 8px; border: 1px solid var(--lightGrey); box-shadow: var(--materialShadow)}

.calcBlocked .warning {margin: 0; width: 100%;}
.calcBlocked .warning p {font-size: var(--fontSize)}

.calcBlocked .calcBlockedBody {display: flex; flex-direction: row; gap: var(--gap);

}
.calcBlocked .calcBlockedBody h4 {font-size: calc(var(--fontSizeXLarge) + 0.2rem);}

.calcBlocked .calcBlockedBody ul {list-style: none; padding-left: 0;}
.calcBlocked .calcBlockedBody ul li {display: flex; align-items: flex-start; gap: 10px; padding: 8px 0;}
.calcBlocked .calcBlockedBody ul li > div {font-size: calc(var(--fontSizeLarge) - 0.1rem); font-weight: bold; line-height: 1.2}
.calcBlocked .calcBlockedBody ul li small {font-size: var(--fontSizeSmall); font-weight: normal; margin: 0; display: block;}
.calcBlocked .calcBlockedBody ul li::before {content: ''; display: inline-block; min-width: 24px; height: 24px;
margin-top: 2px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='9' fill='%233a9e4e'/%3E%3Cpolyline points='6,10 9,13 14,7' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;}

.calcBlocked .calcBlockedBody .calcBlockedBodyLeft {flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 24px;

}
.calcBlocked .calcBlockedBody .calcBlockedBodyLeft h4 {margin: calc(var(--gapSmall) + 10px) 0 0 0}
.calcBlocked .calcBlockedBody .calcBlockedBodyLeft ul li {font-size: calc(var(--fontSizeLarge) - 0.3rem);}
.calcBlocked .calcBlockedBody .calcBlockedBodyLeft .calcBlockedActivate {flex: 1; align-items: center; display: flex; flex-direction: column;  justify-content: center; gap: 12px; background: var(--lightestGrey); padding: 24px;}
.calcBlocked .calcBlockedBody .calcBlockedBodyLeft .calcBlockedActivate .calcBlockedPrice {font-size: calc(var(--fontSizeLarge) - 0.3rem); display: flex; flex-direction: row; gap: 12px; align-items: center; justify-content: center;}
.calcBlocked .calcBlockedBody .calcBlockedBodyLeft .calcBlockedActivate .calcBlockedPrice b {font-size: 50px;}
.calcBlocked .calcBlockedBody .calcBlockedBodyLeft .calcBlockedActivate .calcBlockedPrice p {display: block; font-size: var(--fontSizeLarge); line-height: 1;}

.calcBlocked .calcBlockedBody .calcBlockedBodyLeft a.actionButton {font-size: var(--fontSizeLarge); padding: 16px 42px; margin: 0 auto;}


.calcBlocked .calcBlockedBody .calcBlockedBodyRight {background: #d96c00; border-radius: 24px; padding: calc(var(--gapSmall) + 10px)  var(--gap);; color: white; flex: 0 48%;}
.calcBlocked .calcBlockedBody .calcBlockedBodyRight * {color: white;}


.calcBlocked .calcBlockedFooter {background: #ffffea; padding: calc(var(--gapSmall) + 10px) var(--gap); border-radius: 16px; line-height: 1.5; font-size: var(--fontSizeLarge);}
.calcBlocked .calcBlockedFooter h5 {margin: 0 0 8px 0}

.calcBlocked .calcBlockedContactLink {text-align: center; font-size: var(--fontSizeLarge);

}


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


.calcBlocked .calcBlockedWrapper {gap: var(--gapXLarge);}

.calcBlocked .calcBlockedBody {display: flex; flex-direction: column; gap: var(--gapXLarge);

}
.calcBlocked .calcBlockedBody .calcBlockedBodyLeft h4 {margin: 0}
}


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


.calcBlocked .progressBarLimitContainer .progressBarLimit .progressBarIcon {display: none}
}


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

.calcBlocked .progressBarLimitContainer .progressBarLimit {flex-direction: column; gap: 6px;}
.calcBlocked .progressBarLimitContainer .progressBarLimit .progressBar {width: 100%; flex: auto}
}


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

.calcArticel {line-height: 1.4;

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

.calcArticel ul,.calcArticel ol {margin: 7px 0 7px var(--gap);}
.calcArticel ul li {margin: 6px 0}
.calcArticel ol li {margin: 10px 0; padding-inline: 8px}
.calcArticel ol b {display: block;}
.calcArticel ol li::marker {font-weight: bold; font-size: 1.8rem; color: var(--darkGrey);}

.calcArticel img {float:right; max-width: 300px; width: 100%; height: auto; margin: 0 0 24px 24px;}
.calcArticel 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;

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

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

.calcQuideInfo .content table {width: auto; margin: 8px auto}

.calcQuideInfo .content .infoBox ul li {margin: 4px 0}