html {position:relative; height:100%; scroll-behavior:smooth;}
body{width:100%; height:100%;  margin: 0; background-color:#fff; font-size:14px;  font-family: Arial, Helvetica, sans-serif; color: #0a0a0a;}

h1, h2, h3, h4 {color: #0a0a0a;}

a {color: #000; text-decoration:none; transition:0.15s; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.wrpr {margin:0 auto; max-width:1100px; min-width:280px; height:100%; padding:0 20px;}

.cntnt {background-color: #fff;}
.cntnt-blk{width:100%; min-height: calc(100vh - 191px); padding:0;}
/*header*/
.header {width: 100%; height: 70px; background-color: #333; border-bottom: 1px solid #ccc;}
.hd-block {display: flex; width: 100%; height: 100%; flex-direction: row; align-items: center; gap:30px; }
.hd-logo {display:flex; align-items: center; flex-direction: row; font-size: 24px; font-weight: bold; color: #fff; gap:6px;}
.hd-menu {display: flex; gap:20px; flex-grow: 1; justify-content: center; }
.hd-menu a {display: block; max-width: 85px; padding-bottom: 4px; border-bottom: 2px solid #444; text-align: center; color: #fff;}
.hd-a-act {border-bottom: 2px solid #006ede !important;}

/*Content*/
.calc-box {display: flex; width: 100%; gap:30px; margin: 30px 0 0;}
.clc-left {min-width: 336px;}
.clc-right {flex-grow: 1;}

.calc-enter {display: flex; flex-direction: column; width: 100%;}
.clc-titl {width: 100%; display: flex;  align-items: center;  height: 40px; justify-content: center; background-color: #333/*#006ede*/; border-top-left-radius: 2px; border-top-right-radius: 2px; text-align: center; box-sizing: border-box; border-bottom: 1px solid #ccc;}
.clc-titl h1 {margin: 0; font-size: 18px; color: #fff; font-weight: normal;}
.clc-body {width: 100%; border: 1px solid #ccc; border-top: none; background-color: #e5e5e5; border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; box-sizing: border-box;}

.calc-form {width: 100%; box-sizing: border-box; padding: 12px 36px;}
.clc-form-line {width: 100%; display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px;}
.clc-form-line lable {font-size: 16px;}
.size-box {display: flex; gap:4px; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; padding: 4px; background-color: #ccc; border-radius: 4px;}
.size-box select {flex-grow: 1; max-width: 75px; padding: 5px 4px; font-size: 17px; cursor: pointer;  border: 1px solid #666; border-radius: 2px; outline: 0; background-color: #fff;}
.sb-2 {background-color: #ffc038;}
.clc-form-line button {cursor: pointer; line-height: 38px; border: none; background-color: #006ede; color: #fff; font-size:18px; border-radius: 4px; margin-top: 4px; box-shadow: 0 1px 0 0 #0064cb;}

.calc-results {width: 100%; box-sizing: border-box; border: 1px solid #ccc; background-color: #e5e5e5; border-radius: 2px; margin-top: -1px;}
.result-form {width: 100%; box-sizing: border-box; padding: 12px 36px;}
.rslt-line {display: flex; align-items: center; margin-bottom: 6px;}
.rslt-line lable {flex-grow: 1;}
.box-sz1 {width: 48px; text-align: center;}
.box-sz2 {width: 144px; text-align: center;}
.box-sz3 {width: 82px;}
.rslt-line input {width: 46px; border: none; border-radius: 2px; font-size: 14px; padding: 0 0 0 4px; height: 22px; box-sizing: border-box; outline: none;}
.res-box-sz1 {margin-right: 2px; background-color: #ccc; color: #222;}
.res-box-sz2 {background-color: #ffc038; border-bottom-right-radius:0 !important; border-top-right-radius:0 !important; border-right: 1px solid #888 !important;}
.res-box-sz3 {width: 44px !important; background-color: rgb(252 209 116 / 80%); border-radius:0 !important; color: #222; border-right: 1px solid #888 !important; padding-left: 2px !important;}
.res-box-sz33 {width: 54px !important; background-color: rgb(252 209 116 / 80%); border-bottom-left-radius:0 !important; border-top-left-radius:0 !important; color: #222; padding-left: 2px !important;}
.res-box-sz4 {width: 82px !important; background-color: rgb(252 209 116 / 80%); color: #222;}
.toglle-box {width: 100%; display: flex; flex-direction: column; align-items: center; margin: 5px 0 20px;}
.toggle-button {display: flex; align-items: center; height: 20px;  border: 1px solid #ccc; border-radius: 3px; position: relative; cursor: pointer; background-color: #d5d5d5; font-size: 12px;}
.sz-2 {background-color: rgb(252 209 116 / 80%);}

.toggle-button span {padding: 0 6px; position: relative;}
.slid {background-color: #fff; border-radius: 2px; position: absolute; left: 0; width: 46px; height: 20px;}
.sldvis {width: 50px;}

.calc-visualizer {display: flex; flex-direction: column; width: 100%;}
.vislzr-titl {font-size: 18px; color: #fff;}
.vislzr-body {background-color: #EFEFEF;  padding-bottom: 10px;}

.vislzr-area {display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 50px 0;}
.compr-fr {display: flex; flex-direction: row; align-items: flex-end; padding: 0 34px; gap: 4px;}
.vis-tire {position: relative;}
#ft_frst img {width: 100%; height: 100%;}
#ft_scnd img {width: 100%; height: 100%;}
.tirewidth1 {border: 1px solid #888; border-top: none; position: absolute; bottom: -18px; height: 16px; width: 100%; box-sizing: border-box; text-align: center; -webkit-transition: width 1s, height 1s; transition: width 1s, height 1s;}
.viswidth1 {display: inline-block; padding: 0 6px 0; margin-top: 8px; background-color: #EFEFEF; font-size: 12px;}
.tireheight1 {border: 1px solid #888; border-right: none; position: absolute; left: -20px; top: 0px; height:100%; width: 15px; box-sizing: border-box; text-align: center; -webkit-transition: width 1s, height 1s; transition: width 1s, height 1s;}
.visheight1 {display: flex; flex-direction: column; justify-content: center; height: 100%; }
.visheight1 span {padding: 4px 0; margin-left:-16px; background-color: #EFEFEF; font-size: 12px;}
.fbadge {display: flex; flex-direction: column; justify-content: center; align-items: center; inset:0; position: absolute;} 
.fbadge span {display: block; width: 24px; line-height: 24px; border-radius: 12px; font-size: 18px; font-weight: bold; text-align: center; font-style: italic; background-color: #efefef; box-shadow: 0 2px 4px rgba(0,0,0,0.50);}
.tirewidth2 {border: 1px solid #ffae00; border-top: none; position: absolute; bottom: -18px; height: 16px; width: 100%; box-sizing: border-box; text-align: center; -webkit-transition: width 1s, height 1s; transition: width 1s, height 1s;}
.viswidth2 {display: inline-block; padding: 0 6px 0; margin-top: 8px; background-color: #EFEFEF; font-size: 12px;}
.tireheight2 {border: 1px solid #ffae00; border-left: none; position: absolute; right: -20px; top: 0px; height:100%; width: 15px; box-sizing: border-box; text-align: center; -webkit-transition: width 1s, height 1s; transition: width 1s, height 1s;}
.visheight2 {display: flex; flex-direction: column; justify-content: center; height: 100%; }
.visheight2 span {padding: 4px 0; margin-right:-16px; background-color: #EFEFEF; font-size: 12px;}

.compr-side {display: flex; flex-direction: row; align-items: flex-end; padding: 0 20px; gap: 4px;}
#st_frst img {width: 100%; height: 100%;}
#st_scnd img {width: 100%; height: 100%;}
.wheel1 {width: 185px; height: 185px; position: absolute; left: 0px; top: 0px; -webkit-transition: width 1s, height 1s, top 1s, left 1s; transition: width 1s, height 1s, top 1s, left 1s;}
.wheeldir1 {border: 1px solid #888; box-sizing: border-box; border-bottom: none; position: absolute;  right: 20px;  top: -15px; height: 115px; width: 100px; text-align: center; z-index: 2; -webkit-transition: width 1s, height 1s; transition: width 1s, height 1s, right 1s;}
.viswheel1 {display: flex; flex-direction: column; align-items: center; height: 100%; }
.viswheel1 span {padding: 0px 5px; background-color: #EFEFEF; width: 20px; margin-top: -8px; font-size: 12px; }
.sideheight1 {border: 1px solid #888; border-left: none; position: absolute; right: 10px; bottom: -1px; height: 50px; width: 85px; text-align: center; z-index: 2; -webkit-transition: width 1s, height 1s; transition: width 1s, height 1s;}
.vissideheight1 {display: flex; flex-direction: column; align-items: end; height: 100%;}
.vissideheight1 span{ padding: 4px 0; background-color: #EFEFEF; width: 20px; margin:4px -10px 0 0; font-size: 12px;}
.visrevs1 {position: absolute; bottom: -24px; width: 100%; text-align: center; font-size: 12px;}
.circum1 {position: absolute; left:-10px; bottom:8px; -webkit-transform: rotate(43deg); transform: rotate(43deg); font-size: 12px;}
.circum1 span::before {content: '\25C4'; margin-right: 2px; font-size: 10px; color: #444;}
.circum1 span::after {content: '\25BA'; margin-left: 2px; font-size: 10px; color: #444;}
.wheel2 {width: 185px; height: 185px; position: absolute; left: 0px; top: 0px; -webkit-transition: width 1s, height 1s, top 1s, left 1s; transition: width 1s, height 1s, top 1s, left 1s;}
.wheeldir2 {border: 1px solid #ffae00; box-sizing: border-box; border-bottom: none; position: absolute;  right: 20px;  top: -15px; height: 115px; width: 100px; text-align: center; z-index: 2; -webkit-transition: width 1s, height 1s; transition: width 1s, height 1s, right 1s;}
.viswheel2 {display: flex; flex-direction: column; align-items: center; height: 100%; }
.viswheel2 span {padding: 0px 5px; background-color: #EFEFEF; width: 20px; margin-top: -8px; font-size: 12px; }
.sideheight2 {border: 1px solid #ffae00; border-right: none; position: absolute; left: 10px; bottom: -1px; height: 50px; width: 85px; text-align: center; z-index: 2; -webkit-transition: width 1s, height 1s; transition: width 1s, height 1s;}
.vissideheight2 {display: flex; flex-direction: column; align-items: start; height: 100%;}
.vissideheight2 span{ padding: 4px 0; background-color: #EFEFEF; width: 20px; margin:4px 0 0 -10px; font-size: 12px;}
.visrevs2 {position: absolute; bottom: -24px; width: 100%; text-align: center; font-size: 12px;}
.circum2 {position: absolute; right:-10px; bottom:8px; -webkit-transform: rotate(-43deg); transform: rotate(-43deg); font-size: 12px;}
.circum2 span::before {content: '\25C4'; margin-right: 2px; font-size: 10px; color: #444;}
.circum2 span::after {content: '\25BA'; margin-left: 2px; font-size: 10px; color: #444;}

.wheel-fr {display: flex; flex-direction: row; align-items: center; padding: 0 34px; gap: 4px;}
#whl1 img {width: 100%; height: 100%;}

.calc-speed {width: 100%; box-sizing: border-box; border: 1px solid #ccc; background-color: #e5e5e5; border-radius: 2px; margin-top: -1px; min-height: 134px;}
.speed-titl {width: 100%; display: flex; align-items: center; height: 40px; justify-content: center; font-size: 16px;}
.speed-form {width: 100%; box-sizing: border-box; padding: 4px 30px;}
.speed-box {width: 100%; display: flex; flex-direction: column; gap: 3px;}
.speed-line {width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap:4px;}
.speed-line lable {min-width: 44px; font-size: 13px; font-weight: bold;}
.speed-line span {display: inline-block; text-align: center; width: 100%;}
.speed-line input {width: 100%; border: none; border-radius: 2px; font-size: 14px; text-align: center; background-color: rgb(252 209 116 / 80%); padding: 0; height: 22px; box-sizing: border-box; outline: none;}

.clc-info-block {display: flex; gap:30px; margin-top: 30px;}
.proscons, .alternative {display: flex; flex-direction: column; width: 100%;}
.prcn-titl {background-color: #e5e5e5; font-size: 16px; border: 1px solid #ccc;}
.prcn-body {background-color: #fff; padding-bottom: 20px;}
.prcn-box {display: flex; flex-direction: column; gap:10px; box-sizing: border-box; margin: 20px 20px 0;}
.prcn-list {display: flex; flex-direction: column; gap:14px;}
.prcn-line {display: flex; width: 100%; gap:6px; }
.pr-cn-icn {min-width: 20px; height: 20px; text-align: center; color: #fff; background-color: #66a136; line-height: 20px; border-radius: 15px; font-size: 18px; margin-top: -1px;}
.con-icn {background-color: #ff4925;}

.alt-table {display: flex; flex-direction: column; width: 100%; margin-bottom: -20px;}
.alt-linetop {display: flex; width: 100%; gap:6px; justify-content: space-around; height: 30px; align-items: center; padding: 0 6px; background-color: #efefef; box-sizing: border-box;}
.alt-linetop span {width: 100%; font-weight: bold; color: #444;}
.alt-line {display: flex; width: 100%;justify-content: space-around; height: 40px; align-items: center; box-sizing: border-box; border-top: 1px solid #d5d5d5;}
.alt-size-box {display: flex; align-items: center; gap:4px; width: 100%; height: 100%; justify-content: center; box-sizing: border-box; padding: 0 2px;}
.border-left { border-left: 1px solid #d5d5d5;}
.alt-size-box span {font-size: 11px;}
.alt-size-box a {color: #006ede; text-decoration: underline;}
.greenbg {background-color: #d9f9c8;}
.bluebg {background-color: #edf7ff;}

.howto-box {line-height: 1.5; margin: 40px 4px 0; box-sizing: border-box;} 
.howto-box h3 {margin: 10px 0;}

/*privacy*/
.text-box {width: 100%; margin-top: 40px; line-height: 1.5;}
.text-box h1 {font-size: 24px; margin: 24px 0;}
.text-box a {color: #006ede;}


/*footer*/
.footer {width: 100%; height: 40px; background-color: #d5d5d5; margin-top: 50px;}
.footer-box {display: flex; align-items: center; width: 100%; height: 100%; gap:20px;}


@media only screen and (max-width:1010px) {
    .vislzr-area {flex-direction: column; gap:60px;}
    .clc-info-block {flex-direction: column;}
}
@media only screen and (max-width:820px) {
    .compr-side {flex-direction: column; gap: 60px;}
    .speed-form {text-align: center;}
    .speed-box {flex-direction: row;}
    .speed-line {flex-direction: column;}
    .speed-line input {max-width: 60px;}
    .speed-line span {height: 18px;}    
}
@media only screen and (max-width:700px) {
    .calc-box {flex-direction: column; align-items: center;}
    .compr-side {flex-direction: row; gap: 4px;}
    .clc-left {width: 414px;}
    .size-box select {max-width: 100px;}
}
@media only screen and (max-width:605px) {
    .hd-logo span {display: none;}
    .hd-block {gap:0;}
}
@media only screen and (max-width:460px) {
    .compr-side {flex-direction: column; gap: 60px;}
    .clc-left {width: 100%; min-width: 310px;}    
    .clc-right {width: 100%; min-width: 310px;}
    .prcn-line {font-size: 15px; line-height: 1.5;}
}
@media only screen and (max-width:380px) {
    .calc-form {padding: 12px 28px;}
    .result-form {padding: 12px 28px;}
}