:root {
    --marginTop: 20px;
    --marginBottom: 40px;
    --marginLeft: 40px;
    --marginRight: 40px;
    --yAxis-h: calc(100% - var(--marginTop) - var(--marginBottom));
    --xAxis-w: calc(100% - var(--marginLeft) - var(--marginRight));
    /* --xAxis-colW: calc(var(--xAxis-w) / 24); */
    --xAxis-colW: calc(100% / 24);

    --hcc-w: calc(100% + var(--xAxis-colW) );
    --hcc-colW: calc(100% / 24);

    --retail-color: lightgray;
    --gc60-color: rgb(71, 158, 227);
    --gc142-color: rgb(0, 50, 91);
    --focus-color: gold;

    --thumbW: 20px;

    /* background-color: rgb(71, 158, 227);
    background-color: rgb(111, 207, 250);
    background-color: rgb(221, 239, 248);
    background-color: rgb(238, 130, 62);
    background-color: rgb(247, 226, 211); */

    /* background-color: #479fe3;
    background-color: #93cffa;
    background-color: lightgray;
    background-color: aliceblue;
    background-color: white; */

    --chartCon-bg: aliceblue;
    --enCon-color: black;
    --tsukiCon-color: black;
    /* axisColor is set inside d3Chart.js */

}


/* * { */
    /* color: aliceblue; */
    /* color: black; */
    /* box-sizing: border-box; */
/* } */


/* body { */
    /* background-color: aliceblue; */
    /* background-color: rgb(45, 45, 45); */
/* } */

.costSim-titleCon {
    margin-top: 50px;
}

.costSim-titleCon > .subtext {
    margin: 0;
}

.costSim-titleCon > .section-title {
    padding-bottom: 0;
}

#costSim-varSelect-flexCon {
    width: 100%;
    margin: 20px 0 0 0;
    display: flex;
    gap: 20px;
    flex-direction: row;
    /* justify-content: space-evenly;
    align-items: flex-start; */
}

#costSim-banner-sec {
    width: 55%;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* border: 1px solid purple; */
}

#costSim-submitBtnCon {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#costSim-submitBtn {
    display: block;
    background-color: rgb(147, 207, 250);
    border-radius: 17px;
    border: none;
    /* color: black; */
    color: white;
    cursor: pointer;
    padding: 5px;
    font-size: 20px;
    margin: 10px 0 0 0;
    aspect-ratio: 7/1;
    /* relative width% = (desired width%/parent width%) * 100 */
    /* also -10px because of row gap */
    width: calc(60% - 10px);
}

#costSim-142L-bannerCon,
#costSim-60L-bannerCon {
    /* max-width: 800px;
    height: 150px; */
    min-height: 150px;
    aspect-ratio: 762/150;
    width: calc(100% - 20px);
    background-color: #d2ecff;
    border-radius: 20px;
    margin: 10px 0 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid red; */
    opacity: 1;
}

#costSim-142L-bannerCon.disabled {
    opacity: .2;
    align-items: center;
}

#costSim-142L-bannerCon > .l-flexItem,
#costSim-60L-bannerCon  > .l-flexItem {
    width: 80%;
    /* border: 1px solid blueviolet; */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
}
#costSim-142L-bannerCon > .l-flexItem *,
#costSim-60L-bannerCon  > .l-flexItem * {
    color: black;
}

#costSim-142L-bannerCon > .l-flexItem > .r1,
#costSim-60L-bannerCon  > .l-flexItem > .r1 {
    width: 100%;
}
#costSim-142L-bannerCon > .l-flexItem > .r1 > p,
#costSim-60L-bannerCon  > .l-flexItem > .r1 > p {
    margin: 15px 0 0 15px;
    font-size: 22px;
}
#costSim-142L-bannerCon > .l-flexItem > .r1 > p > span,
#costSim-60L-bannerCon  > .l-flexItem > .r1 > p > span {
    display: inline-block;
}

#costSim-142L-bannerCon > .l-flexItem > .r2,
#costSim-60L-bannerCon  > .l-flexItem > .r2 {
    width: 100%;
}
#costSim-142L-bannerCon > .l-flexItem > .r2.hidden,
#costSim-60L-bannerCon  > .l-flexItem > .r2.hidden {
    display: none;
}



#costSim-142L-bannerCon > .l-flexItem > .r2 > p,
#costSim-60L-bannerCon  > .l-flexItem > .r2 > p {
    margin: 0 0 0 15px;
    font-size: 22px;
    /* font-weight: 600; */
    /* text-shadow: 
        -1px -1px 0 white,
        1px -1px 0 white,
        -1px  1px 0 white,
        1px  1px 0 white; */
}

#costSim-142L-bannerCon > .l-flexItem > .r2 > p.hidden,
#costSim-60L-bannerCon  > .l-flexItem > .r2 > p.hidden {
    display: none;
}

#costSim-142L-bannerCon > .l-flexItem > .r2 > p > .topSpan1,
#costSim-60L-bannerCon  > .l-flexItem > .r2 > p > .topSpan1,
#costSim-142L-bannerCon > .l-flexItem > .r2 > p > .topSpan2,
#costSim-60L-bannerCon  > .l-flexItem > .r2 > p > .topSpan2,
#costSim-142L-bannerCon > .l-flexItem > .r2 > p > .topSpan3,
#costSim-60L-bannerCon  > .l-flexItem > .r2 > p > .topSpan3 {
    display: inline-block; /* works like white-space: no-wrap; */
}

#costSim-142L-bannerCon > .l-flexItem > .r2 > p > .topSpan3 > .c142L-banner-textFill,
#costSim-60L-bannerCon  > .l-flexItem > .r2 > p > .topSpan3 > .c60L-banner-textFill {
    text-decoration: none;
    margin: 0 10px;
    color: #c31433;
    font-weight: 800;
}

#costSim-142L-bannerCon > .l-flexItem > .r2 > p > .topSpan3 > .c142L-banner-textFill.underlined,
#costSim-60L-bannerCon  > .l-flexItem > .r2 > p > .topSpan3 > .c60L-banner-textFill.underlined {
    text-decoration: underline;
}

#costSim-142L-bannerCon > .l-flexItem > .r3,
#costSim-60L-bannerCon  > .l-flexItem > .r3 {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
#costSim-142L-bannerCon > .l-flexItem > .r3.hidden,
#costSim-60L-bannerCon  > .l-flexItem > .r3.hidden {
    display: none;
}

#costSim-142L-bannerCon > .l-flexItem > .r3 > p,
#costSim-60L-bannerCon  > .l-flexItem > .r3 > p {
    margin: 0 0 0 15px;
    font-size: 19px;
    /* font-weight: 600; */
    /* text-shadow: 
        -1px -1px 0 white,
        1px -1px 0 white,
        -1px  1px 0 white,
        1px  1px 0 white; */
}
#costSim-142L-bannerCon > .l-flexItem > .r3 > p > span,
#costSim-60L-bannerCon  > .l-flexItem > .r3 > p > span {
    display: inline-block;
}
#costSim-142L-bannerCon > .l-flexItem > .r3 > p > .expenseRecoveryTxt,
#costSim-60L-bannerCon  > .l-flexItem > .r3 > p > .expenseRecoveryTxt {
    margin: 0 10px;
    font-size: 50px;
    font-weight: 600;
    color: #c31433;
    /* text-shadow: 
        -1px -1px 0 white,
        1px -1px 0 white,
        -1px  1px 0 white,
        1px  1px 0 white; */
}

#costSim-142L-bannerCon > .l-flexItem > .r4,
#costSim-60L-bannerCon  > .l-flexItem > .r4 {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

#costSim-142L-bannerCon > .l-flexItem > .r4.hidden,
#costSim-60L-bannerCon  > .l-flexItem > .r4.hidden {
    display: none;
}

#costSim-142L-bannerCon > .l-flexItem > .r4 > p,
#costSim-60L-bannerCon  > .l-flexItem > .r4 > p {
    margin: 15px 0 0 15px;
    font-size: 18px;
    font-weight: 600;
}
#costSim-142L-bannerCon > .l-flexItem > .r4 > p > span,
#costSim-60L-bannerCon  > .l-flexItem > .r4 > p > span {
    display: inline-block;

}





#costSim-142L-bannerCon > .r-flexItem,
#costSim-60L-bannerCon  > .r-flexItem {
    width: 30%;
    height: 100%;
    min-height: 100%;
    /* border: 1px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
}


#costSim-142L-bannerCon > .r-flexItem > img {
    display: block;
    aspect-ratio: 663/2329;
    /* height: 93%; */
    width: 20%;
    margin: 0;

}
#costSim-60L-bannerCon  > .r-flexItem > img {
    display: block;
    aspect-ratio: 523/2329;
    /* height: 100%; */
    width: 15%;
    /* border: 1px solid goldenrod; */


}

#costSim-142L-bannerCon > .r-flexItem > p,
#costSim-60L-bannerCon  > .r-flexItem > p {
    color: black;
    text-decoration: underline;
    font-size: 12px;
    text-align: center;
    /* margin: 20px 10px 0 5px; */
    margin: 0 20px 0 10px;
    /* border: 1px solid purple; */
    white-space: nowrap;
}

/* #costSim-142L-bannerCon > .r-flexItem > p > span,
#costSim-60L-bannerCon  > .r-flexItem > p > span {
    display: inline-block;
    white-space: nowrap;
} */


/* SLIDER */
/* SLIDER */
#slider-sec {
    padding: 0px;
    width: 33%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#main-slider-con {
    width: 100%;
    aspect-ratio: 438/290;
    /* aspect-ratio: 388/255; */
    /* aspect-ratio: 2/1; */
    /* aspect-ratio: 460/260; */
    /* border: 1px solid greenyellow; */
    border-radius: 20px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
}

#main-slider-con > .r1 {
    width: 100%;
    /* border: 1px solid red; */
    padding: 10px 0;
}
#main-slider-con > .r1 > p {
    margin: 0;
}
#main-slider-con > .r1 > .stepCntTitle {
    font-size: 26px;
    text-align: center;
}
#main-slider-con > .r1 > .subtext {
    font-size: 20px;
    text-align: center;
}

#cs-mod-selectNPrice-con {
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    /* border: 1px solid black; */
}

#cs-mod-select-con {
    /* display: flex;
    justify-content: center;
    align-items: center; */
    padding: 10px 0;
}

#cs-mod-select {
    color: black;
    z-index: 99;
    font-size: 16px;
    /* font-size: 20px; */
    /* border-radius: 2px; */
}

#cs-mod-price-con {
    display: flex;
    justify-content: center;
    align-items: center;
}


#cs-mod-price-con {
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 10px 0; */
    /* background-color: rgb(255, 255, 255);
    border: 1px solid rgb(118, 118, 118); */
    border-radius: 2px;

}
#cs-mod-price-con > .price {
    color: black;
    /* font-size: 16px; */
    margin: 0;
    font-size: 20px;
    /* font-weight: 600; */
}
#cs-mod-price-con > .en {
    color: black;
    /* font-size: 16px; */
    margin: 0;
    margin-left: 5px;
    font-size: 20px;
    /* font-weight: 600; */
}





#costSim-timePeriod-con {
    display: none;
}

#slider-window-wrapper {
    --sliderFog-grad-0: rgba(240, 248, 255, .3);
    --sliderFog-grad-1: rgba(240, 248, 255, 1);
    
    min-width: 90%;
    width: 90%;
    position: relative;
    /* border: 1px solid green; */
}

/* gradient fog */
#sliderFog-l {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 30%;
    background-image: linear-gradient(to left, var(--sliderFog-grad-0), var(--sliderFog-grad-1));
    /* border: 1px solid black; */

}
#sliderFog-r {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 30%;
    background-image: linear-gradient(to right, var(--sliderFog-grad-0), var(--sliderFog-grad-1));
    /* border: 1px solid black; */
}

/* #bowl-hl-gradient {
    background-image: linear-gradient(to left, var(--bowl-gradientC-0), var(--bowl-gradientC-1));
    aspect-ratio: 1;
    width: 70px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 0;
}

#bowl-hr-gradient {
    background-image: linear-gradient(to right, var(--bowl-gradientC-0), var(--bowl-gradientC-1));
    aspect-ratio: 1;
    width: 70px;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
} */

#slider-window {
    /* border: 1px solid rgb(0, 255, 30); */
    background-color: aliceblue;
    min-width: 100%;
    width: 100%;
    /* height generated by JavaScript */
    /* flex-shrink: 0; */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    /* overflow: visible; */
    position: relative;
    pointer-events: none; /* Makes the element unclickable */
    user-select: none; /* Prevents text selection/highlighting */

}

/* p == product */
.p-slider,
.p-slider-clone {
    /* border: 1px solid green; */
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 90%; */
    position: absolute;
    /* transform: translateX(calc(100% / 8 * 3)); */
    transition: all .25s ease-out;

    width: calc((100%/3)*8);
}

.p-slider-imgCon {
    /* border: 1px solid red; */
    aspect-ratio: 1/1;
    /* width: 150px;
    min-width: 150px; */
    position: relative;
    perspective: 1000px;
    width: calc(100%/8);
    min-width: calc(100%/8);
}

.p-slider-img {
    display: block;
    aspect-ratio: 1/1;
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Add transition for rotation and centering */
    /* transition: transform 0.25s ease-out; */
    /* transition: opacity 0.25s ease-out; */
    transition: all 0.25s ease-out;
    /* transition: transform 0.3s ease-out, opacity 0.3s ease-out; */
    /* will-change: transform, opacity; */
    opacity: 1;
    box-shadow: 0px 50px 70px rgba(255,255,255,.3), 0px 10px 10px rgba(255,255,255,.1);
}

.p-slider-img,
.img-reflection,
.img-reflection-cover {
    display: block;
    aspect-ratio: 1/1;
    width: 80%;
    position: absolute;
}
/* .p-slider-img {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.25s ease-out;
} */

.p-slider-img.focusL {
    /* border: 3px solid red; */
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateY(-50deg) translateZ(10px);
    /* opacity: 1; */
}
.p-slider-img.focusM {
    /* border: 3px solid blue; */
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateY(0deg) translateZ(100px);
    /* opacity: 1; */
}
.p-slider-img.focusR {
    /* border: 3px solid red; */
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateY(50deg) translateZ(10px);
    /* opacity: 1; */
}

.p-slider-img.focusL2 {
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateY(-90deg) translateZ(-60px);
    opacity: 0;
}

.p-slider-img.focusR2 {
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateY(90deg) translateZ(-60px);
    opacity: 0;
}

.img-reflection,
.img-reflection-cover {
    /* top: 50%; */
    top: 51%;
    left: 50%; /* Changed from top: 100% to align with main image */
    transform: translate(-50%, 50%) scaleY(-1); /* Flip vertically and offset downward */
    transition: transform 0.25s ease-out; /* Add transition for rotation and centering */
    opacity: .05;

}

/* .img-reflection { */
    /* opacity: .5; */
    /* opacity: .1; */
/* } */

.img-reflection-cover {
    /* background: linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,1)); */
    background: linear-gradient(to bottom, rgba(255,255,255,.3), rgba(255,255,255,1));
}


.p-slider-img.focusL + .img-reflection,
.p-slider-img.focusL + .img-reflection + .img-reflection-cover {
    /* border: 3px solid red; */
    transform-style: preserve-3d;
    transform: translate(-50%, 50%) scaleY(-1) rotateY(-50deg) translateZ(10px);
}
.p-slider-img.focusM + .img-reflection,
.p-slider-img.focusM + .img-reflection + .img-reflection-cover {
    /* border: 3px solid blue; */
    transform-style: preserve-3d;
    transform: translate(-50%, 50%) scaleY(-1) rotateY(0deg) translateZ(100px);
}
.p-slider-img.focusR + .img-reflection,
.p-slider-img.focusR + .img-reflection + .img-reflection-cover {
    /* border: 3px solid red; */
    transform-style: preserve-3d;
    transform: translate(-50%, 50%) scaleY(-1) rotateY(50deg) translateZ(10px);
}

.p-slider-img.focusL2 + .img-reflection,
.p-slider-img.focusL2 + .img-reflection + .img-reflection-cover {
    transform-style: preserve-3d;
    /* transform: translate(-50%, -50%) rotateY(-90deg) translateZ(-10px); */
    transform: translate(-50%, 50%) scaleY(-1) rotateY(-90deg) translateZ(-60px);
}

.p-slider-img.focusR2 + .img-reflection,
.p-slider-img.focusR2 + .img-reflection + .img-reflection-cover {
    transform-style: preserve-3d;
    /* transform: translate(-50%, -50%) rotateY(90deg) translateZ(-10px); */
    transform: translate(-50%, 50%) scaleY(-1) rotateY(90deg) translateZ(-60px);
}


.p-slider-clone {
    border: 1px solid pruple;
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 90%; */
    position: absolute;
    /* transform: translateX(calc(100% / 8 * -1)); */
    transition: all .25s ease-out;
}

.prevNext-btnCon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.p-slider-prevBtn {
    display: block;
    aspect-ratio: 1/1;
    width: 25px;
    color: black;
    cursor: pointer;
    border-radius: 50%;
    padding: 0;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 25.5%;

    /* prevent zooming when double tapping slider prev and nexts button */
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;

}
.p-slider-nextBtn {
    display: block;
    aspect-ratio: 1/1;
    width: 25px;
    color: black;
    cursor: pointer;
    border-radius: 50%;
    padding: 0;

    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 25.5%;

    /* prevent zooming when double tapping slider prev and nexts button */
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}

/* .prevNext-btnCon > .p-slider-prevBtn {
    margin-right: 10px;
}
.prevNext-btnCon > .p-slider-nextBtn {
    margin-left: 10px;
} */







/* CHART */

#chart {
    position: relative; /* Required for z-index to take effect */
    z-index: 1; /* Above #hoverColsCon-abs */
}

#tooltip {
    position: absolute;
    top: 20px;
    left: 50px;
    /* background-color: rgba(246, 249, 253, 1); */
    background-color: rgb(210, 236, 255);
    /* background-color: rgba(0, 0, 0, 0.5); */
    /* color: white; */
    /* color: black; */
    border-radius: 3px;
    border: 1px solid black;
    box-shadow: 3px 3px 1px rgba(0, 0, 0, .5);
    /* prevent tooltip from intercepting mouse events */
    pointer-events: none;
    /* display: block; */
    display: none;
    z-index: 2;
    margin: 0;
    padding: 0 5px;
    width: fit-content;
}

.tt-textCon {
    display: flex;
    align-items: center;
    /* justify-content: center; */
    margin: 0;
    padding: 0;
}

.tt-textCon.tt-tc-gc142.vis {
    display: flex;
}
.tt-textCon.tt-tc-gc142 {
    display: none;
}

.tt-textCon > .tt-ballCon {
    aspect-ratio: 2/1;
    width: 25px;
    /* width: 35px; */
    /* border: 1px solid red; */
    position: relative;
    margin: 0 10px 0 0;
    padding: 0;
}

.tt-textCon > .tt-ballCon > .bgBall,
.tt-textCon > .tt-ballCon > .ball {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    aspect-ratio: 1/1;
    margin: 0;
    padding: 0;
}
.tt-ballCon > .bgBall {
    width: 14px;
    margin: 0;
    padding: 0;
}
/* .tt-ballCon > .bgBall.focus {
    background-color: gold;
} */

.tt-ballCon > .ball {
    width: 8px;
    /* border: 1px solid black; */
}
.tt-ballCon > .ball.focus {
    width: 12px;
    width: 40%;
    border: 1px solid black;
}

.tt-ballCon > .ball.retailBall {
    background-color: var(--retail-color);
}
.tt-ballCon > .ball.gc60Ball {
    background-color: var(--gc60-color);
}
.tt-ballCon > .ball.gc142Ball {
    background-color: var(--gc142-color);
}





/* version 2 */
.tt-ballCon > .retailIconCon,
.tt-ballCon > .gc60IconCon,
.tt-ballCon > .gc142IconCon {
    /* border: 1px solid red; */
    position: relative;
    width: 100%;
    height: 100%;
}

.tt-ballCon > .retailIconCon > .retailLine,
.tt-ballCon > .gc60IconCon > .gc60Line,
.tt-ballCon > .gc142IconCon > .gc142Line {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    height: 25%;
}
.tt-ballCon > .retailIconCon > .retailLine.focus,
.tt-ballCon > .gc60IconCon > .gc60Line.focus,
.tt-ballCon > .gc142IconCon > .gc142Line.focus {
    width: 100%;
    height: 35%;
}

.tt-ballCon > .retailIconCon > .retailCircle,
.tt-ballCon > .gc60IconCon > .gc60Circle,
.tt-ballCon > .gc142IconCon > .gc142Circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 1/1;
    height: 65%;
    border-radius: 50%;
}
.tt-ballCon > .retailIconCon > .retailCircle.focus,
.tt-ballCon > .gc60IconCon > .gc60Circle.focus,
.tt-ballCon > .gc142IconCon > .gc142Circle.focus {
    height: 85%;
}



/* icon outlines */
.tt-ballCon > .retailIconCon > .retailLine-outline,
.tt-ballCon > .gc60IconCon > .gc60Line-outline,
.tt-ballCon > .gc142IconCon > .gc142Line-outline {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(90% + 1px);
    height: calc(25% + 1px);
    background-color: black;
}
.tt-ballCon > .retailIconCon > .retailLine-outline.focus,
.tt-ballCon > .gc60IconCon > .gc60Line-outline.focus,
.tt-ballCon > .gc142IconCon > .gc142Line-outline.focus {
    width: calc(100% + 1px);
    height: calc(35% + 1px);
}

.tt-ballCon > .retailIconCon > .retailCircle-outline,
.tt-ballCon > .gc60IconCon > .gc60Circle-outline,
.tt-ballCon > .gc142IconCon > .gc142Circle-outline {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 1/1;
    height: calc(65% + 1px);
    border-radius: 50%;
    background-color: black;
}
.tt-ballCon > .retailIconCon > .retailCircle-outline.focus,
.tt-ballCon > .gc60IconCon > .gc60Circle-outline.focus,
.tt-ballCon > .gc142IconCon > .gc142Circle-outline.focus {
    height: calc(85% + 1px);
}







.tt-ballCon > .retailIconCon > .retailLine {
    background-color: var(--retail-color);
}
.tt-ballCon > .gc60IconCon > .gc60Line {
    background-color: var(--gc60-color);
}
.tt-ballCon > .gc142IconCon > .gc142Line {
    background-color: var(--gc142-color);
}

.tt-ballCon > .retailIconCon > .retailCircle {
    background-color: var(--retail-color);
}
.tt-ballCon > .gc60IconCon > .gc60Circle {
    background-color: var(--gc60-color);
}
.tt-ballCon > .gc142IconCon > .gc142Circle {
    background-color: var(--gc142-color);
}



.retail-p,
.gc60-p,
.gc142-p {
    margin: 0;
    padding: 5px 0;
    /* border: 1px solid blue; */
    white-space: nowrap;
    /* width: 70%; */
    font-size: 12px;
    color: black;
}

/* last span inside these tooltip p's turn bold */
.retail-p > span:last-child.focus,
.gc60-p > span:last-child.focus,
.gc142-p > span:last-child.focus {
    font-weight: bold;
}




/* #costSim-chartNBanners-sec * {
    color: white;
} */

#costSim-chartNBanners-sec {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: row;
    /* border: 1px solid blue; */
    padding: 0;
    /* padding-bottom for scrollIntoView so it's not riding right on the bottom of the banners */
    padding-bottom: 10px;
}

#costSim-chartNBanners-left {
    width: 45%;
    overflow: hidden;
    flex-shrink: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

}

#chart-helperIcons-mainCon {
    width: 100%;
    max-width: 700px;
    height: fit-content;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#chart-helperIcons-mainCon > .retailCon,
#chart-helperIcons-mainCon > .gc60Con,
#chart-helperIcons-mainCon > .gc142Con {
    width: 33%;
    /* border: 1px solid purple; */
    display: flex;
    justify-content: center;
    align-items: center;
}

#chart-helperIcons-mainCon > .retailCon > .retailIconCon,
#chart-helperIcons-mainCon > .gc60Con > .gc60IconCon,
#chart-helperIcons-mainCon > .gc142Con > .gc142IconCon {
    /* border: 1px solid red; */
    position: relative;
    width: 20%;
    height: 25px;
}

#chart-helperIcons-mainCon > .retailCon > .retailIconCon > .retailLine,
#chart-helperIcons-mainCon > .gc60Con > .gc60IconCon > .gc60Line,
#chart-helperIcons-mainCon > .gc142Con > .gc142IconCon > .gc142Line {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 3px;
}

#chart-helperIcons-mainCon > .retailCon > .retailIconCon > .retailCircle,
#chart-helperIcons-mainCon > .gc60Con > .gc60IconCon > .gc60Circle,
#chart-helperIcons-mainCon > .gc142Con > .gc142IconCon > .gc142Circle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    aspect-ratio: 1/1;
    width: 12px;
    border-radius: 50%;
}

#chart-helperIcons-mainCon > .retailCon > .retailIconCon > .retailLine {
    background-color: var(--retail-color);
}
#chart-helperIcons-mainCon > .gc60Con > .gc60IconCon > .gc60Line {
    background-color: var(--gc60-color);
}
#chart-helperIcons-mainCon > .gc142Con > .gc142IconCon > .gc142Line {
    background-color: var(--gc142-color);
}

#chart-helperIcons-mainCon > .retailCon > .retailIconCon > .retailCircle {
    background-color: var(--retail-color);
}
#chart-helperIcons-mainCon > .gc60Con > .gc60IconCon > .gc60Circle {
    background-color: var(--gc60-color);
}
#chart-helperIcons-mainCon > .gc142Con > .gc142IconCon > .gc142Circle {
    background-color: var(--gc142-color);
}

#chart-helperIcons-mainCon > .retailCon > .retailTextCon,
#chart-helperIcons-mainCon > .gc60Con > .gc60TextCon,
#chart-helperIcons-mainCon > .gc142Con > .gc142TextCon {
    width: calc(80%); /* 50px == width of IconCon */
    margin-left: 5px;
}

#chart-helperIcons-mainCon > .retailCon > .retailTextCon > p,
#chart-helperIcons-mainCon > .gc60Con > .gc60TextCon > p,
#chart-helperIcons-mainCon > .gc142Con > .gc142TextCon > p {
    text-align: left;
    /* border: 1px solid black; */
    margin: 0;
    font-size: 11px;
}
#chart-helperIcons-mainCon > .retailCon > .retailTextCon > p {
    color: var(--retail-color);
}
#chart-helperIcons-mainCon > .gc60Con > .gc60TextCon > p {
    color: var(--gc60-color);
}
#chart-helperIcons-mainCon > .gc142Con > .gc142TextCon > p {
    color: var(--gc142-color);
}

#chart-helperIcons-mainCon > .retailCon > .retailTextCon > p > span,
#chart-helperIcons-mainCon > .gc60Con > .gc60TextCon > p > span,
#chart-helperIcons-mainCon > .gc142Con > .gc142TextCon > p > span {
    display: inline-block;
}





/* #chart-helperIcons-mainCon > .gc60Con {
    width: 33%;
}

#chart-helperIcons-mainCon > .gc142Con {
    width: 33%;
} */





#chartCon {
    width: 100%;
    /* max-width: 700px; */
    aspect-ratio: 640/400;
    overflow: hidden;
    position: relative;

    border: 1px solid gray;
    border-radius: 15px;
    background-color: var(--chartCon-bg);
    touch-action: none;/* Disables default touch behaviors like scrolling */
}

#chartCon .svg {
    display: block;
    height: 100%;
    width: 100%;
    min-height: 100%;
    min-width: 100%;
}

#hoverCols-overflowWrap-abs {
    /* border: 1px solid blue; */
    position: absolute;
    left: 40px;
    top: 20px;
    width: var(--xAxis-w);
    height: var(--yAxis-h);

    display: flex;

    overflow: visible;
}

#hoverCols-overflowWrap-rel {
    width: 100%;
    height: 100%;
    /* border: 1px solid green; */
    position: relative;
}

#hoverColsCon-abs {
    position: absolute;
    top: -5px;
    left: calc(var(--xAxis-colW) * -.5 - 2px);
    /* border: 1px solid purple; */
    width: calc(100% + 2px);
    height: calc(100% + 4px);

    display: flex;
    flex-wrap: nowrap; /* Prevent wrapping to allow overflow */
    overflow: visible;
    z-index: 0;
}

.testCol {
    flex: 0 0 auto; /* No grow, no shrink, auto basis */
    /* border: 1px solid red; */
    /* background-color: rgba(102, 51, 153, .5); */
    width: calc(100%/24);
    height: 100%;
}

.testCol:hover {
    background-color: rgba(102, 51, 153, 1);
}

#enCon {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 5px;
    left: 50px;
    aspect-ratio: 1/1;
}

#enCon p {
    margin: 0;
    color: var(--enCon-color);
}


#tsukiCon {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 5px;
    right: 10px;
    aspect-ratio: 1/1;
}

#tsukiCon p {
    margin: 0;
    color: var(--tsukiCon-color);
}



#costSim-right {
    border: 1px solid purple;
    height: 100%;
}

#costSimPage-sec {
    /* display: flex; */
    display: none;
    width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

#costSim-form {
    margin: 0 50px;
    width: 100vw;
}

#costSim-dataSec * {
    font-size: 25px;
}

#costSim-dataSec {
    display: none;
}
#cs-table {
    display: none;
}

#gc-flexCon {
    width: 100%;
    min-height: 500px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    border: 1px solid purple;
}

#gc-60-con, 
#gc-142-con {
    border: 1px solid red;
    width: 50%;
}

.retail-line,
.gc60-line,
.gc142-line {
    /* --strokeIncrement: 0;
    --strokeCalc: 0; */
    /* 1.5s cubic-bezier(0.645,0.045,0.355,1) forwards */
    --strokeLength: 0; /* value updated based off of target line lengths */
    stroke-dasharray: var(--strokeLength);
    stroke-dashoffset: var(--strokeLength);
    animation: changeOffset .75s linear forwards;
}

@keyframes changeOffset {
    100% {
        stroke-dashoffset: 0;
    }
}

.retail-line.focus {
    stroke-width: 2.5;
    /* filter: drop-shadow(2px 2px 3px rgba(255, 255, 255, 1)); */
    filter: drop-shadow(0px 0px 3px rgb(255, 215, .5));
}

.gc60-line.focus {
    stroke-width: 2.5;
    /* filter: drop-shadow(2px 2px 3px rgba(255, 255, 255, 1)); */
    filter: drop-shadow(0px 0px 3px rgb(255, 215, .5));
}

.gc142-line.focus {
    stroke-width: 2.5;
    /* filter: drop-shadow(2px 2px 3px rgba(255, 255, 255, 1)); */
    filter: drop-shadow(0px 0px 3px rgb(255, 215, .5));
}

.retail-bg > circle.focus,
.gc60-bg > circle.focus,
.gc142-bg > circle.focus {
    fill: rgb(255, 225, 55);
    z-index: 5;
}

.retail > circle.invisible,
.gc60 > circle.invisible,
.gc142 > circle.invisible {
    display: none;
}

.retail > circle.visible,
.gc60 > circle.visible,
.gc142 > circle.visible {
    display: block;
}




/* BPD SELECT SECTION */
/* BPD == BOTTLES PER DAY */

#bpd-sec {
    padding: 0px;
    width: 33%;
    /* border: 1px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
}

#bpd-con {
    /* aspect-ratio: 3/2; */
    width: 100%;
    aspect-ratio: 438/290;
    /* aspect-ratio: 467/260; */
    /* width: 438px;
    height: 290px; */
    /* border: 1px solid greenyellow; */
    border-radius: 20px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
}

#bpd-con > .r1,
#bpd-con > .r2,
#bpd-con > .r3 {
    width: 100%;
    /* border: 1px solid red; */
    padding: 5px 0;
}

#bpd-con > .r1 > p {
    margin: 0;
}
#bpd-con > .r1 > .stepCntTitle {
    font-size: 26px;
    text-align: center;
}
#bpd-con > .r1 > .subtext {
    font-size: 20px;
    text-align: center;
}

#bpd-con > .r2 {
    display: flex;
    justify-content: center;
    align-items: center;
}

#bpd-con > .r2 > #bpd-select-label {
    font-size: 20px;
    font-weight: 500;
    margin: 0;
    margin-right: 10px;
}

#bpd-select {
    color: black;
    font-size: 16px;
    /* font-size: 20px; */
}

/* for (本(500mL) text */
#bpd-con > .r2 > span {
    font-size: 16px;
    /* font-size: 20px; */
}

#bpd-con > .r3 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.singleB-con {
    border: 1px solid white;
    width: fit-content;
    margin: 0 5px;
    cursor: pointer;
    width: calc(100%/5);
    aspect-ratio: 52/148;
    max-width: 32px;
    /* max-height: 148px; */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Bs former dimensions width="52" height="148" */

.emptyB,
.filledB {
    display: none;
    aspect-ratio: 52/148;
    /* max-width: 52px; */
    /* max-height: 148px; */
    width: 100%;
    height: 100%;
}

.emptyB {
    opacity: .4;
}

.emptyB.vis,
.filledB.vis {
    display: block;
}



/* RPPB */
/* RPPB == RETAIL PRICE PER BOTTLE */

#rppb-sec {
    padding: 0px;
    width: 33%;
    /* border: 1px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
}

#rppb-con {
    width: 100%;
    aspect-ratio: 438/290;
    /* aspect-ratio: 460/260; */
    /* border: 1px solid greenyellow; */
    border-radius: 20px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
}

#rppb-con > .r1,
#rppb-con > .r2,
#rppb-con > .r3,
#rppb-con > .r4 {
    width: 100%;
    /* border: 1px solid red; */
    padding: 10px 0;
}

#rppb-con > .r1 > p {
    margin: 0;
}
#rppb-con > .r1 > .stepCntTitle {
    font-size: 26px;
    text-align: center;
}
#rppb-con > .r1 > .subtext {
    font-size: 20px;
    text-align: center;
}

#rppb-con > .r2 {
    display: flex;
    justify-content: center;
    align-items: center;
}
#rppb-con > .r2 > #rppb-select-label {
    font-size: 20px;
    font-weight: 500;
    margin: 0;
    margin-right: 10px;
}

#rppb-select {
    color: black;
    font-size: 16px;
    /* font-size: 20px; */
}

/* for the en symbol */
#rppb-con > .r2 > span {
    font-size: 16px;
    /* font-size: 20px; */
}


#rppb-con > .r3 {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    /* flex-wrap: wrap; */
    flex-wrap: nowrap;
}

/* 10s former dimensions width="75" height="75" */
/* 50s width="71" height="71" */

.singleC-con {
    /* border: 1px solid white; */
    margin: 0 5px;
    cursor: pointer;
    aspect-ratio: 1/1;
}

.singleC-con.for10 {
    display: none;
    max-width: 54px;
    /* max-height: 75px; */
}

.singleC-con.for50 {
    display: none;
    width: calc((100%/6)-4px);
    /* border: 1px solid red; */
    max-width: 50px;
    /* max-height: 71px; */
}

.singleC-con.for100 {
    display: none;
    width: calc((100%/6)-2px);
    /* border: 1px solid red; */
    max-width: 52px;
    /* max-height: 71px; */
}

.singleC-con.for10.vis,
.singleC-con.for50.vis,
.singleC-con.for100.vis {
    display: block;
}


.empty10,
.filled10 {
    display: block;
    aspect-ratio: 1/1;
    width: 100%;
}
.empty50,
.filled50 {
    display: block;
    aspect-ratio: 1/1;
    width: 100%;
}
.empty10,
.empty50 {
    opacity: .4;
}

.filled100 {
    display: block;
    aspect-ratio: 1/1;
    width: 100%;
}

/* .empty10.vis,
.filled10.vis,
.empty50.vis,
.filled50.vis,
.filled100.vis {
    display: block;
} */

#rppb-con > .r4,
#bpd-con > .r4 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}

.range-con {
    height: 7px;
    width: 300px;
    /* border: 1px solid blue; */
    position: relative;
    cursor: pointer;
    padding: 0;
}

.range-con.c {
    height: 7px;
    width: 90%;
    /* border: 1px solid blue; */
    position: relative;
    cursor: pointer;
    padding: 0;

    user-select: none;
    -webkit-user-select: none;
}

.range-track {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    border: 1px solid black;
    background-color: lightgray;
    display: flex;

    justify-content: center;
    align-items: center;
}


.big-divi.c {
    width: calc(100%/15);
    /* border: 1px solid red; */
    height: 100%;
    position: relative;
}
.big-divi.b {
    width: calc(100%/4);
    /* border: 1px solid red; */
    height: 100%;
    position: relative;
}
.big-divi.m {
    width: calc(100%/7);
    /* border: 1px solid red; */
    height: 100%;
    position: relative;
}

.big-divi.first-bd {
    border-radius: 10px 0 0 10px;
}

.big-divi.last-bd {
    border-radius: 0 10px 10px 0;
}

.big-divi.filled {
    /* background-color: #479fe3; */
    background-color: rgb(147, 207, 250);
}

.small-divi-con {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    width: calc(100% - 2px);
    height: 100%;
    /* border: 1px solid blue; */
    display: flex;
}

.small-divi.c {
    height: 100%;
    width: calc(100%/30);
    /* border: 1px solid rgba(6, 255, 180, .5); */
}
.small-divi.b {
    height: 100%;
    width: calc(100%/8);
    /* border: 1px solid rgba(6, 255, 180, .5); */
}
.small-divi.m {
    height: 100%;
    width: calc(100%/14);
    /* border: 1px solid rgba(6, 255, 180, .5); */
}

.thumb {
    display: none;
}

.thumb.vis {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    aspect-ratio: 1/1;
    width: var(--thumbW);
    background-color: #479fe3;
    border: 1px solid aliceblue;
    border-radius: 50%;
}

.thumb.leftEdge {
    left: 0;
}
.thumb.rightEdge {
    right: 0;
}
.thumb.right {
    right: calc(var(--thumbW) * -.5);
}

/* @media only screen and (max-width: 1441px) {
    #costSim-142L-bannerCon > .l-flexItem > .r1 > p,
    #costSim-60L-bannerCon  > .l-flexItem > .r1 > p {
        font-size: 20px;
    }
    #costSim-142L-bannerCon > .l-flexItem > .r2 > p,
    #costSim-60L-bannerCon  > .l-flexItem > .r2 > p {
        font-size: 20px;
    }
    #costSim-142L-bannerCon > .l-flexItem > .r3 > p,
    #costSim-60L-bannerCon  > .l-flexItem > .r3 > p {
        font-size: 20px;
    }
    #costSim-142L-bannerCon > .l-flexItem > .r3 > p > .expenseRecoveryTxt,
    #costSim-60L-bannerCon  > .l-flexItem > .r3 > p > .expenseRecoveryTxt {
        font-size: 58px;
    }
} */

/* MAX WIDTH */
@media only screen and (max-width: 1450px) {
    #costSim-142L-bannerCon > .l-flexItem > .r1 > p,
    #costSim-60L-bannerCon  > .l-flexItem > .r1 > p {
        font-size: 18px;
    }
    #costSim-142L-bannerCon > .l-flexItem > .r2 > p,
    #costSim-60L-bannerCon  > .l-flexItem > .r2 > p {
        font-size: 18px;
    }
    #costSim-142L-bannerCon > .l-flexItem > .r3 > p,
    #costSim-60L-bannerCon  > .l-flexItem > .r3 > p {
        font-size: 15px;
    }
    #costSim-142L-bannerCon > .l-flexItem > .r3 > p > .expenseRecoveryTxt,
    #costSim-60L-bannerCon  > .l-flexItem > .r3 > p > .expenseRecoveryTxt {
        font-size: 46px;
    }

    #costSim-142L-bannerCon > .l-flexItem > .r4 > p,
    #costSim-60L-bannerCon  > .l-flexItem > .r4 > p {
        margin: 15px 0 0 15px;
        font-size: 14px;
        font-weight: 600;
    }
}



/* MAIN TRANSITION TO MOBILE */
@media only screen and (max-width: 1220px) {

    #costSim-varSelect-flexCon {
        display: flex;
        justify-content: center;
        align-items: center;
        /* flex-direction: column; */
        flex-wrap: wrap;
    }

    #slider-sec {
        /* width: 90%; */
        width: fit-content;
    }
    #bpd-sec {
        /* width: 90%; */
        width: fit-content;
    }
    #rppb-sec {
        /* width: 90%; */
        width: fit-content;
    }

    #main-slider-con {
        /* width: 100%; */
        /* aspect-ratio: 438/290; */
        max-width: 410px;
        width: 410px;
    }
    #rppb-con {
        max-width: 410px;
        width: 410px;
    }
    #bpd-con {
        max-width: 410px;
        width: 410px;
    }


    #costSim-chartNBanners-left {
        width: 100%;
    }

    #chartCon {
        max-width: 700px;
    }
    #costSim-banner-sec {
        max-width: 700px;
    }

    #costSim-142L-bannerCon,
    #costSim-60L-bannerCon {
        /* min-height: 220px; */
        min-height: 180px;
        margin: 10px 0 0 0;
    }

    #costSim-142L-bannerCon > .l-flexItem > .r1 > p,
    #costSim-60L-bannerCon  > .l-flexItem > .r1 > p {
        font-size: 18px;
    }
    #costSim-142L-bannerCon > .l-flexItem > .r2 > p,
    #costSim-60L-bannerCon  > .l-flexItem > .r2 > p {
        font-size: 18px;
    }
    #costSim-142L-bannerCon > .l-flexItem > .r3 > p,
    #costSim-60L-bannerCon  > .l-flexItem > .r3 > p {
        font-size: 15px;
    }
    #costSim-142L-bannerCon > .l-flexItem > .r3 > p > .expenseRecoveryTxt,
    #costSim-60L-bannerCon  > .l-flexItem > .r3 > p > .expenseRecoveryTxt {
        font-size: 46px;
    }


    #costSim-submitBtnCon {
    justify-content: center;
    }

    #costSim-submitBtn {
        width: 500px;
        /* margin: 15px 0 15px 0; */
        margin: 15px;

    }

    #costSim-form {
        margin: 0 25px;
    }

    #costSim-banner-sec {
        width: 100%;
    }

    #costSim-chartNBanners-sec {
        flex-direction: column;
    }

}

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

    #slider-sec {
        width: 90%;
        /* width: fit-content; */
    }
    #bpd-sec {
        width: 90%;
        /* width: fit-content; */
    }
    #rppb-sec {
        width: 90%;
        /* width: fit-content; */
    }
}

@media only screen and (max-width: 650px) {
    #costSim-142L-bannerCon > .l-flexItem > .r1 > p,
    #costSim-60L-bannerCon  > .l-flexItem > .r1 > p {
        font-size: 16px;
    }
    #costSim-142L-bannerCon > .l-flexItem > .r2 > p,
    #costSim-60L-bannerCon  > .l-flexItem > .r2 > p {
        font-size: 16px;
    }
    #costSim-142L-bannerCon > .l-flexItem > .r3 > p,
    #costSim-60L-bannerCon  > .l-flexItem > .r3 > p {
        font-size: 13px;
    }
    #costSim-142L-bannerCon > .l-flexItem > .r3 > p > .expenseRecoveryTxt,
    #costSim-60L-bannerCon  > .l-flexItem > .r3 > p > .expenseRecoveryTxt {
        font-size: 44px;
    }

    #costSim-142L-bannerCon > .l-flexItem > .r4 > p,
    #costSim-60L-bannerCon  > .l-flexItem > .r4 > p {
        margin: 15px 0 0 15px;
        font-size: 12px;
        font-weight: 600;
    }
}


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

    .retail-p,
    .gc60-p,
    .gc142-p {
        margin: 0;
        padding: 0 0;
        font-size: 9px;
    }

    .tt-textCon > .tt-ballCon {
        aspect-ratio: 1/1;
        width: 15px;
        margin: 0 10px 0 0;
        padding: 0;
    }

    .tt-ballCon > .retailIconCon > .retailLine,
    .tt-ballCon > .gc60IconCon > .gc60Line,
    .tt-ballCon > .gc142IconCon > .gc142Line {
        width: 90%;
        /* height: 25%; */
        height: 10%;
    }
    .tt-ballCon > .retailIconCon > .retailLine.focus,
    .tt-ballCon > .gc60IconCon > .gc60Line.focus,
    .tt-ballCon > .gc142IconCon > .gc142Line.focus {
        width: 100%;
        height: 15%;
    }

    .tt-ballCon > .retailIconCon > .retailCircle,
    .tt-ballCon > .gc60IconCon > .gc60Circle,
    .tt-ballCon > .gc142IconCon > .gc142Circle {
        height: 40%;
    }
    .tt-ballCon > .retailIconCon > .retailCircle.focus,
    .tt-ballCon > .gc60IconCon > .gc60Circle.focus,
    .tt-ballCon > .gc142IconCon > .gc142Circle.focus {
        height: 50%;
    }

    /* icon outlines */
    .tt-ballCon > .retailIconCon > .retailLine-outline,
    .tt-ballCon > .gc60IconCon > .gc60Line-outline,
    .tt-ballCon > .gc142IconCon > .gc142Line-outline {
        width: calc(90% + 2px);
        height: calc(10% + 2px);
    }
    .tt-ballCon > .retailIconCon > .retailLine-outline.focus,
    .tt-ballCon > .gc60IconCon > .gc60Line-outline.focus,
    .tt-ballCon > .gc142IconCon > .gc142Line-outline.focus {
        width: calc(100% + 2px);
        height: calc(15% + 2px);
    }

    .tt-ballCon > .retailIconCon > .retailCircle-outline,
    .tt-ballCon > .gc60IconCon > .gc60Circle-outline,
    .tt-ballCon > .gc142IconCon > .gc142Circle-outline {
        height: calc(40% + 2px);
    }
    .tt-ballCon > .retailIconCon > .retailCircle-outline.focus,
    .tt-ballCon > .gc60IconCon > .gc60Circle-outline.focus,
    .tt-ballCon > .gc142IconCon > .gc142Circle-outline.focus {
        height: calc(50% + 2px);
    }

    #costSim-142L-bannerCon,
    #costSim-60L-bannerCon {
        height: 200px;
        align-items: stretch;
    }

    #costSim-142L-bannerCon > .r-flexItem,
    #costSim-60L-bannerCon  > .r-flexItem {
        width: 15%;
    }

    #costSim-142L-bannerCon > .r-flexItem > img {
        width: 70%;
    }
    #costSim-60L-bannerCon  > .r-flexItem > img {
        width: 65%;
    }

    #costSim-142L-bannerCon > .r-flexItem > p,
    #costSim-60L-bannerCon  > .r-flexItem > p {
        display: none;
    }


    #costSim-142L-bannerCon > .l-flexItem > .r1 > p,
    #costSim-60L-bannerCon  > .l-flexItem > .r1 > p {
        font-size: 16px;
    }
    #costSim-142L-bannerCon > .l-flexItem > .r2 > p,
    #costSim-60L-bannerCon  > .l-flexItem > .r2 > p {
        font-size: 16px;
    }
    #costSim-142L-bannerCon > .l-flexItem > .r3 > p,
    #costSim-60L-bannerCon  > .l-flexItem > .r3 > p {
        font-size: 12px;
    }
    #costSim-142L-bannerCon > .l-flexItem > .r3 > p > .expenseRecoveryTxt,
    #costSim-60L-bannerCon  > .l-flexItem > .r3 > p > .expenseRecoveryTxt {
        font-size: 40px;
    }

}




@media only screen and (max-width: 417px) {
    #chart-helperIcons-mainCon > .retailCon > .retailIconCon > .retailLine,
    #chart-helperIcons-mainCon > .gc60Con > .gc60IconCon > .gc60Line,
    #chart-helperIcons-mainCon > .gc142Con > .gc142IconCon > .gc142Line {
        height: 2px;
    }

    #chart-helperIcons-mainCon > .retailCon > .retailIconCon > .retailCircle,
    #chart-helperIcons-mainCon > .gc60Con > .gc60IconCon > .gc60Circle,
    #chart-helperIcons-mainCon > .gc142Con > .gc142IconCon > .gc142Circle {
        width: 9px;
    }
}




@media only screen and (max-width: 417px) {
    #costSim-142L-bannerCon,
    #costSim-60L-bannerCon {
        height: 220px;
        align-items: stretch;
    }
    /* #costSim-142L-bannerCon > .r-flexItem,
    #costSim-60L-bannerCon  > .r-flexItem {
        width: 15%;
    } */

    #costSim-142L-bannerCon > .r-flexItem > img {
        width: 100%;
    }
    #costSim-60L-bannerCon  > .r-flexItem > img {
        width: 90%;
    }


    #main-slider-con > .r1 > .stepCntTitle {
        font-size: 24px;
        text-align: center;
    }
    #main-slider-con > .r1 > .subtext {
        font-size: 18px;
        text-align: center;
    }
    #bpd-con > .r1 > .stepCntTitle {
    font-size: 24px;
    text-align: center;
    }
    #bpd-con > .r1 > .subtext {
        font-size: 18px;
        text-align: center;
    }
    #rppb-con > .r1 > .stepCntTitle {
        font-size: 24px;
        text-align: center;
    }
    #rppb-con > .r1 > .subtext {
        font-size: 18px;
        text-align: center;
    }


    #cs-mod-select {
        font-size: 14px;
    }
    #cs-mod-price-con > .price {
        font-size: 18px;
    }
    #cs-mod-price-con > .en {
        font-size: 18px;
    }


    #rppb-con > .r2 > #rppb-select-label {
        font-size: 18px;
    }
    #rppb-select {
        font-size: 14px;
    }
    #rppb-con > .r2 > span {
        font-size: 14px;
    }

    #bpd-con > .r2 > #bpd-select-label {
        font-size: 18px;
    }

    #bpd-select {
        color: black;
        font-size: 14px;
    }
    #bpd-con > .r2 > span {
        font-size: 14px;
    }




}
@media only screen and (max-width: 350px) {

    #chart-helperIcons-mainCon > .retailCon > .retailTextCon > p,
    #chart-helperIcons-mainCon > .gc60Con > .gc60TextCon > p,
    #chart-helperIcons-mainCon > .gc142Con > .gc142TextCon > p {
        font-size: 10px;
    }

    #costSim-142L-bannerCon,
    #costSim-60L-bannerCon {
        height: 250px;
    }
    /* #costSim-142L-bannerCon > .r-flexItem > img {
        width: 100%;
    }
    #costSim-60L-bannerCon  > .r-flexItem > img {
        width: 95%;
    } */
    /* #costSim-142L-bannerCon > .r-flexItem > img {
        width: 70%;
    }
    #costSim-60L-bannerCon  > .r-flexItem > img {
        width: 65%;
    } */



    #main-slider-con > .r1 > .stepCntTitle {
        font-size: 22px;
        text-align: center;
    }
    #main-slider-con > .r1 > .subtext {
        font-size: 16px;
        text-align: center;
    }
    #bpd-con > .r1 > .stepCntTitle {
        font-size: 22px;
        text-align: center;
    }
    #bpd-con > .r1 > .subtext {
        font-size: 16px;
        text-align: center;
    }
    #rppb-con > .r1 > .stepCntTitle {
        font-size: 22px;
        text-align: center;
    }
    #rppb-con > .r1 > .subtext {
        font-size: 16px;
        text-align: center;
    }

    /* select inputs and spans stay the 14px... they don't need to shrink to smaller */
    #cs-mod-select {
        font-size: 14px;
    }
    #cs-mod-price-con > .price {
        font-size: 16px;
    }
    #cs-mod-price-con > .en {
        font-size: 16px;
    }


    #rppb-con > .r2 > #rppb-select-label {
        font-size: 16px;
    }
    #rppb-select {
        font-size: 14px;
    }
    #rppb-con > .r2 > span {
        font-size: 14px;
    }
    #bpd-con > .r2 > #bpd-select-label {
        font-size: 16px;
    }
    #bpd-select {
        color: black;
        font-size: 14px;
    }
    #bpd-con > .r2 > span {
        font-size: 14px;
    }



}






/* MIN WIDTH */
/* for large monitors and for 4k (2560px) */


@media only screen and (min-width: 1400px) {
    #costSimPage-sec {
    display: flex;
}
    #costSim-form {
        margin: 0 50px;
        width: 1440px;
    }
}

@media only screen and (min-width: 2200px) {

    #costSimPage-sec {
        display: flex;
    }
    #costSim-form {
        margin: 0 50px;
        width: 1900px;
    }


    #main-slider-con > .r1 > .stepCntTitle {
        font-size: 36px;
    }
    #main-slider-con > .r1 > .subtext {
        font-size: 30px;
    }
    #rppb-con > .r1 > .stepCntTitle {
        font-size: 36px;
    }
    #rppb-con > .r1 > .subtext {
        font-size: 30px;
    }
    #bpd-con > .r1 > .stepCntTitle {
        font-size: 36px;
    }
    #bpd-con > .r1 > .subtext {
        font-size: 30px;
    }

    #cs-mod-select {
        font-size: 30px;
    }
    #cs-mod-price-con > .price {
        font-size: 30px;
    }
    #cs-mod-price-con > .en {
        font-size: 30px;
    }

    #rppb-con > .r2 > #rppb-select-label {
        font-size: 30px;
    }

    #rppb-select {
        font-size: 30px;
    }

    #rppb-con > .r2 > span {
        font-size: 30px;
    }


    #bpd-con > .r2 > #bpd-select-label {
        font-size: 30px;
    }

    #bpd-select {
        font-size: 30px;
    }

    #bpd-con > .r2 > span {
        font-size: 30px;
    }

    .singleC-con.for100 {
        max-width: 72px;
    }

    .singleC-con.for50 {
        max-width: 70px;
    }
    .singleC-con.for10 {
        max-width: 74px;
    }

    .singleB-con {
        max-width: 52px;
    }

    #costSim-submitBtn {
        font-size: 40px;
    }

    #costSim-142L-bannerCon > .l-flexItem > .r1 > p,
    #costSim-60L-bannerCon  > .l-flexItem > .r1 > p {
        font-size: 26px;
    }
    #costSim-142L-bannerCon > .l-flexItem > .r2 > p,
    #costSim-60L-bannerCon  > .l-flexItem > .r2 > p {
        font-size: 26px;
    }
    #costSim-142L-bannerCon > .l-flexItem > .r3 > p,
    #costSim-60L-bannerCon  > .l-flexItem > .r3 > p {
        font-size: 23px;
    }
    #costSim-142L-bannerCon > .l-flexItem > .r3 > p > .expenseRecoveryTxt,
    #costSim-60L-bannerCon  > .l-flexItem > .r3 > p > .expenseRecoveryTxt {
        font-size: 54px;
    }

    #costSim-142L-bannerCon > .r-flexItem > p,
    #costSim-60L-bannerCon  > .r-flexItem > p {
        font-size: 18px;
    }
}