.cl-calculator {
display: grid;
grid-template-columns: 47% 47%;
grid-gap: 71px;
}

.left-bar h3 {
font-size: 24px !important;
font-family: "Inter", Sans-serif !important;
color: #34415B !important;
}

.left-bar h4 {
font-size: 20px !important;
font-family: "Inter", Sans-serif !important;
color: #34415B !important;
}

.input-area {
margin-top: 25px;
}

.radio-buttons {
display: grid;
grid-template-columns: 32% 32% 32%;
width: 100%;
grid-gap: 20px;
margin-bottom: 30px;
}

.custom-radio input {
display: none;
}

.radio-btn {
width: 100%;
height: 135px;
border: 1px solid #E5E5E59C;
display: inline-block;
border-radius: 12px;
position: relative;
text-align: center;
cursor: pointer;
background: #ffffff;
}

.radio-btn .hobbies-icon {
width: 100%;
height: auto;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}

.radio-btn .hobbies-icon h3 {
color: #1a1a1a;
font-size: 16px !important;
font-weight: 600;
}

.radio-btn>i {
color: #ffffff;
background-color: #ffffff;
position: absolute;
top: 70%;
left: 50%;
transform: translateX(-50%) scale(2.3);
border-radius: 50px;
padding: 4px;
transition: 0.5s;
pointer-events: none;
opacity: 1;
border: 1px solid #cccccc;
}

.custom-radio input:checked+.radio-btn>i {
background: #dafad1;
border-color: #48E61A;
}

.custom-radio input:checked+.radio-btn {
border: 2px solid #49E81A;
}

.radio-btn .hobbies-icon i {
color: #FFDAE9;
line-height: 80px;
font-size: 60px;
}

.check-box {
transform: scale(2);
width: fit-content;
}

.left-bar input[type="checkbox"] {
position: relative;
appearance: none;
width: 25px;
height: 12px;
background: #EBE7E3;
border-radius: 50px;
cursor: pointer;
transition: 0.4s;
}

.left-bar input:checked[type="checkbox"] {
background: #49E81A;
}

.left-bar input[type="checkbox"]::after {
position: absolute;
content: "";
width: 8px;
height: 8px;
top: 2px;
left: 2px;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
transform: scale(1.1);
transition: 0.4s;
}

.left-bar input:checked[type="checkbox"]::after {
left: 60%;
top: 2px;
}

.battery-checkbox {
display: grid;
grid-template-columns: auto auto;
margin-top: 15px;
align-items: flex-start;
gap: 30px;
padding-left: 12px;
}

.battery-txt h5 {
margin-top: 0px !important;
margin-bottom: 5px !important;
font-size: 18px !important;
font-family: "Inter", Sans-serif !important;
color: #34415B !important;
}

.battery-txt p {
font-size: 16px !important;
color: #555555 !important;
font-family: "Inter", Sans-serif !important;
color: #34415B !important;
}

.tabs #tab1 label {
padding-right: 15px;
}

.tabs #tab2 label {
padding-left: 15px;
}

.right-bar .tabs {
display: flex;
background: #EBE7E3;
padding: 5px;
max-width: 342px;
margin: 0px auto;
border-radius: 100px;
justify-content: space-around;
}

.right-bar .dark .tabs {
background: #26282c;
}

.right-bar .tabs input {
display: none;
}

.right-bar .tabs label {
display: block;
padding: 0;
line-height: 45px;
font-weight: 500;
font-size: 15px;
font-family: "Inter", Sans-serif !important;
color: #34415B !important;
position: relative;
z-index: 2;
cursor: pointer;
}

.right-bar .dark .tabs label {
color: #72767d;
}

.right-bar .tabs input:checked+label {
transition: all 0.33s ease-in-out;
font-family: "Inter", Sans-serif !important;
color: #34415B !important;
}

.right-bar .dark .tabs input:checked+label {
font-family: "Inter", Sans-serif !important;
color: #34415B !important;
}

.right-bar .tabs::before {
content: '';
background: #fff;
border-radius: 100px;
position: absolute;
top: 43px;
left: var(--left);
height: 47px;
width: 159px;
z-index: 1;
transition: left 400ms 
cubic-bezier(0.05, 1, 0.4, 1);
box-shadow: rgba(0, 0, 0, 0.2) 0px 0.6px 0.6px -1.25px, rgba(0, 0, 0, 0.2) 0px 2px 2px -2.5px, rgba(0, 0, 0, 0.075) 0px 10px 10px -3.75px;
margin-left: -26px;
}

.right-bar .dark .tabs::before {
background: #3d4148;
}

.right-bar .tab1,
.right-bar .tab2 {
display: none;
}

.right-bar .tab1.active,
.right-bar .tab2.active {
display: block;
}

.right-bar .tab-contents {
width: 100%;
margin-top: 40px;
}

.right-bar {
border-radius: 2.2rem;
width: 100%;
padding: 2.4rem;
box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.04);
background: #ffffff;
border: 1px solid #E5E5E59C;
}

.tab-contents h3 {
font-size: 30px !important;
display: flex;
gap: 10px;
font-family: "Inter", Sans-serif !important;
color: #34415B !important;
}

.tab-contents h3 img {
width: 35px !important;
}

.tab-contents p {
font-size: 15px !important;
font-family: "Inter", Sans-serif !important;
color: #34415B !important;
line-height: 26px;
}

.tab1 ul,
.tab2 ul {
margin-top: 25px;
padding: 0px;
}

.tab1 ul li {
list-style: none;
}

.tab1 ul li h5 {
font-size: 18px !important;
margin-bottom: 0px;
margin-top: 15px;
font-family: "Inter", Sans-serif !important;
color: #34415B !important;
}

.tab1 ul li span,
.years {
font-size: 42px !important;
font-weight: 900 !important;
color: #41d115 !important;
letter-spacing: -1px !important;
padding-right: 5px;
font-family: "Inter", Sans-serif !important;
}

.tab2 ul li {
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #E5E5E59C;
padding-bottom: 10px;
margin-bottom: 10px;
padding-top: 15px;
}

.tab2 ul li h6 {
margin: 0px !important;
font-size: 20px !important;
font-family: "Inter", Sans-serif !important;
color: #34415B !important;
}

.tab2 ul li h5 {
font-size: 18px !important;
font-weight: normal !important;
margin: 0px !important;
font-family: "Inter", Sans-serif !important;
color: #34415B !important;
}

.rep-txt {
font-family: "Inter", Sans-serif !important;
color: #34415B !important;
font-size: 15px !important;
margin-top: 30px;
}

.hobbies-icon1 img {
width: 18px;
}

.hobbies-icon2 img {
width: 22px;
}

.hobbies-icon3 img {
width: 26px;
}

#cost1, #cost2, #cost3,
#years5, #years10, #years20 {
transition: opacity .25s ease-in-out;
}

@media screen and (max-width: 1024px) {
.cl-calculator {
display: block;
}

.battery-checkbox {
grid-template-columns: 7% 92%;
gap: 10px;
}

.right-bar {
margin-top: 20px;
}

.right-bar .tabs {
max-width: 300px;
}

.right-bar .tabs::before {
height: 45px !important;
width: 135px !important;
margin-left: -15px !important;
top: inherit !important;
}
}


@media screen and (max-width: 767px) {
.radio-buttons {
grid-gap: 7px;
}

.battery-checkbox {
grid-template-columns: 10% 86% !important;
gap: 15px !important;
}

.tab-contents h3 {
font-size: 24px !important;
}

.tab-contents h3 img {
width: 30px !important;
}

.tab1 ul li span, .years {
font-size: 30px !important;
}

.tab1 ul li h5 {
font-size: 17px !important;
}

.right-bar {
padding: 2rem;
}

.radio-btn .hobbies-icon h3 {
font-size: 14px !important;
}

.right-bar .tabs::before {
height: 45px !important;
width: 135px !important;
margin-left: -15px !important;
top: inherit !important;
}
}