.nav-calc li a svg {height: 20px; width: 20px; display: inline-block; margin: -2px 7px 0 0;}

h1.cl img {max-height: 42px; width: auto; margin: 0px 10px 0px 0px;}

@media screen and (max-width: 1123px) {
h1.cl {font-size: 21px; font-weight: 700; margin: 15px 0px 8px 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
h1.cl img {display: none;}
}

input, textarea, button, select, label, a { -webkit-tap-highlight-color: rgba(0,0,0,0);}




/* --------- ITEMS OF ONLINE TOOLS ---------- */

.online-tools {margin: 30px auto; float: none; vertical-align: top; text-align: center;}
.online-tools strong {font-size: 18px; line-height: 23px; margin: 7px auto 6px auto; display: block; float: none; clear: both; color: #555;}
.online-tools a:hover strong {color: #333;}
.online-tools a {font-size: 14px; width: 240px; margin: 5px 15px 25px 15px; text-align: center; display: inline-block; vertical-align: top; line-height: 18px; padding: 26px 16px; border: 1.5px solid rgba(0,0,0,0.05); border-radius: 7px; min-height: 180px; position: relative;}
.online-tools a:hover {text-decoration: none; border: 1.5px solid #fff; box-shadow: 1px 2px 12px rgba(0,0,0,0.18);}
.online-tools img {float: none; clear: both; margin: 0px auto 14px auto; max-width: 180px; max-height: 80px;}

.new-calc {position: absolute; top: -8px; right: -8px; padding: 5px 12px; font-size: 13px; font-weight: bolder; color: white; background: red; border-radius: 24px; z-index: 10; border: 6px solid white;}
.online-tools a:hover .new-calc {display: none !important; color: white;}

.prefere {margin: 0px}
.prefere, .prefere:hover {font-size: 18px; float: right; font-weight: normal;}

@media screen and (max-width: 1123px) {
.online-tools a {font-size: 16px; width: 100%; max-width: 300px; line-height: 21px; margin: 0px 5px 20px 5px; padding: 20px 10px;}
}



.calc-wrap {vertical-align: top; overflow: hidden; display: flex; flex-direction: row;}

.calc-wrap > div {display: flex; flex-direction: column; vertical-align: top; line-height: 18px;}
  
.calc-container {flex-grow: 1;}
.calc-set {width: 140px; flex: 0 0 140px;}

.calculator {display: block; margin: 0px auto; width: 100%; max-width: 500px; text-align: left;}



.calculator > div input, .calculator > div select {display: block; color: #555; border: 2px solid rgba(0,0,0,0.15); padding: 8px 10px; font-size: 19px; width: 100%; background: rgba(255,255,255,0.6); border-radius: 7px; margin: 6px 0 0 0; letter-spacing: 1px;}

.calculator input[type="text"]:hover, .calculator input[type="number"]:hover, .calculator select:hover {color: #555; border: 2px solid rgba(0,0,0,0.3); background: rgba(255,255,255,1);}

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

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


.calculator div {display: block; text-align: left; color: #777; font-size: 16px; padding: 8px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.calculator div.calc-half {display: inline-block; width:50%;}
.calculator div.half1 {padding-right:8px;}
.calculator div.half2 {padding-left:8px;}

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

.notice5 {padding-top: 40px; line-height: 20px; white-space: normal; font-weight: 300; text-align: center;}


.calculator button#submit {font-size: 21px; font-weight: 700; padding: 15px; margin: 16px auto 15px auto; text-transform: uppercase; border-radius: 30px; border-width: 2px;}


.calculator input[type="radio"] {display: none;}
.calculator input[type="radio"] + label {color: #bb0000; font-size: 18px; transition: .4s; padding: 12px; margin: 0px; box-sizing: border-box; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 49%; font-weight:500;}
.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;}


@media screen and (max-width: 1123px) {
.calc-wrap, .calculator, .calc-set {width: 100%; margin: 0 auto;}
.calculator div {color: #777; font-size: 16px; font-weight: 700; width: 100%;}
.calc-wrap > div {width: 100%;}
.calc-wrap {flex-wrap: wrap;}
}






/* CALCULATOR - RESULT */

div.calculator-result {margin: 8px 0; padding: 20px 4px 16px 4px; border-radius: 20px; box-shadow: 0px 3px 14px #000 inset; white-space: nowrap; overflow: hidden; text-align: center !important;}

.calculator-result h5 {color: rgba(255,255,255,0.9); font-size: 18px; font-weight: normal; margin: 0px auto 8px auto; white-space: nowrap; display: block; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 0 3px black;}

.calculator-result div {padding: 0; font-size: 42px; color: rgba(255,255,255,0.8); font-weight: 500;text-align: center !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

.calculator-result b {line-height: 62px; font-size: 52px; color: white; font-weight: 700; letter-spacing: 2px; text-shadow: 2px 2px #000;}

.calculator-result #result-cf, .calculator-result #quantity2 {color: rgba(255,255,255,0.9); font-size: 18px; margin: 8px auto 0px auto;}

.calculator-result h6.bark, .calculator-result h6 span, .calculator-result h6 div {font-size: 18px;}

.calculator-result 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;}




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


.converter {max-width: 600px; display: grid;grid-template-columns: 50% auto;}
.converter div {text-align: center;}
.converter .calculator-result, .converter .converter-input, .converter .converter-revert {grid-column-start: 1; grid-column-end: 3;}

.converter option:nth-child(odd) {background: #f4f4f4;}

.converter .converter-revert a {display: block; margin: 0 auto;}
.converter .converter-revert a svg {display: block; margin: 0 auto; width: 48px; height: 48px;}

 
.calc-bottom-mobapp {text-align: center; margin: 0; padding: 0 140px 0 0;}
.calc-bottom-mobapp > div {width: fit-content; max-width: 900px; text-align: left; margin: 40px auto 70px auto; color: #999; line-height: 140%;}

.calc-bottom-mobapp h4 {font-size: 25px; color: #999; display: block; margin: 0 0 10px 0; font-weight: 400;  line-height: 125%;}

.calc-bottom-mobapp h4 strong {font-size: 27px; color: #777; font-weight: 700; white-space: nowrap;}

.calc-bottom-mobapp a img {max-height: 60px; margin: 15px auto 0px auto; vertical-align: middle; display: block;}


@media screen and (max-width: 1123px) {
.calc-bottom-mobapp h4 {font-size: 23px;}
.calc-bottom-mobapp h4 strong {font-size: 25px; white-space: normal;}
.calc-bottom-mobapp {padding: 0;}
}





/* INFO PART - SETTINGS */


.calc-set div {margin: 0px auto 30px auto; max-width: 130px;}
.calc-set a, .calc-set div {display: block; text-align: center; vertical-align: top; font-size: 14px;}
.calc-set a small {display: block; text-align: center; vertical-align: top; font-size: 12px; color: inherit; overflow: hidden; width: 100%;}
.calc-set a svg, .calc-set div svg, .calc-set div img {display: block; margin: 0px auto 7px auto; height: 28px; width: 28px;}
.calc-set a img, .calc-set div img {height: auto; width: 100%; max-width: 120px;}



@media screen and (max-width: 1123px) {
div.calc-set {vertical-align: top; overflow: hidden; display: block; width: 100%; flex: 0 1 auto; text-align: center;}

.calc-set > div {margin: 5px 10px; display: inline-block; vertical-align: top; width: 100%; max-width: 40%;}

.calc-set > div a {padding: 6px;}

.calc-set.items-1 > div {max-width: none;}
.calc-set.items-1 > div svg {display: inline-block; margin: 0 7px 0 0;}

.calc-set.items-3 > div {max-width: 27%;}
.calc-set .calc-set-app, .calc-set div img {display: none;}

}






/* RESULT TABLE*/

.calc-result-table {margin: 10px auto; padding: 15px 10px; line-height: 25px; text-align: center; clear: both; float: none; overflow-x: auto; width: 100%}

.calc-result-table table {margin: 0 auto; width: 100%; max-width: 500px; line-height: 115%; vertical-align: top !important;}

.calc-result-table th {text-align: left;}

.calc-result-table table thead td, .calc-result-table table thead th {font-weight: bold; font-size: 16px; border-bottom: 1.5px solid #777; padding: 8px 10px;line-height: 110%;}
.calc-result-table table tbody td, .calc-result-table table tbody th {font-size: 15px; border-bottom: 1px solid #eaeaea; padding: 10px 10px; white-space: nowrap;}
.calc-result-table table tbody a svg {vertical-align: -2px; width: 16px; height: 16px;}
.calc-result-table table tbody tr:nth-child(even){background:#fafafa;}
.calc-result-table table tbody tr:hover td, .calc-result-table table tbody tr:hover th {background:#eee;}
.calc-result-table table tfoot td {font-weight: bold; font-size: 18px; border-top: 2px solid #444; padding: 10px; white-space: nowrap;}
.calc-result-table table tfoot th {font-size: 18px; border-top: 2px solid #444; padding: 10px;}
.calc-result-table table tfoot th b {font-size: 18px;}



.cal-wood-calcs {border: 1px solid rgba(0,0,0,0.15); background: #fff; border-radius: 12px; box-shadow: 2px 3px 4px rgba(0,0,0,0.08) ; margin: 0px 20px 35px 20px; display: block; vertical-align: top; overflow: hidden; text-align: center; padding: 30px 20px; position: relative;}

.cal-wood-calcs > div {display: inline-block;vertical-align: top; line-height: 18px; width: auto; max-width: 300px; min-width: 150px; text-align: left;margin: 3px 15px 20px 5px;}

.cal-wood-calcs > div ul {list-style: none; margin: 5px auto 0 25px;}
.cal-wood-calcs > div ul li {text-align: left;}
.cal-wood-calcs > div ul li.current a {font-weight: bold; color: inherit !important;}
.cal-wood-calcs > div ul li a {display: block; text-align: left; padding: 3px 4px; font-size: 14px; background: none; }

.cal-wood-calcs h4 {font-size: 18px; display: block; margin: 0 5px 0 0; color: rgba(0,0,0,0.35);}

.cal-wood-calcs svg {width: 22px; height: 22px; display: inline-block; margin: 0 7px 0 0; fill: rgba(0,0,0,0.35); vertical-align: middle;}

.cal-wood-calcs a.fader {position: absolute; top: 10px; right: 10px;}
.cal-wood-calcs a.fader svg {width: 14px; height: 14px; fill: rgba(0,0,0,0.2);}


@media screen and (max-width: 1123px) {
.cal-wood-calcs {display: none !important;}
}

.bottom-messenger {bottom: 20px;}


/* LEADER BANNER 2 */

.calc-banner2 {width: 210px;}
.calc-banner2 #leader_banner2_app {display: block; margin: 25px auto;}
.calc-banner2 #leader_banner2_app img {display: block; height: 210px; width: 210px;}


@media screen and (max-width: 1123px) {
.calc-banner2 {order: 3; text-align: center; width: 100%;}
.calc-banner2 #leader_banner2_app img {height: auto; width: auto;}
}