/*body {
    width: 100%;
    margin: 0;
    max-width: 100%;
    box-sizing: border-box;
}*/
.container {
    overflow: visible !important;
    overflow: initial !important;
}
.container--cn {
    box-sizing: border-box;
    vertical-align: initial;
    width: 100%;
    max-width: 100%;
    position: relative;
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}
.--cn {
    --fnt: 'Open Sans', system-ui, arial, Helvetica, tahoma, 'PT Sans', 'Trebuchet MS' !important;
    
    --fs-xsm: 12px;
    --fs-sm: 14px;
    --fs: 16px;
    --fs-md: 18px;
    --fs-md-2: 20px;
    --fs-md-3: 24px;
    --fs-lg-1: 30px;
    --fs-lg-2: 40px;
    --fs-lg-3: 42px;
    --fs-ulg: 60px;
    
    --rad-el: 1rem;
    --rad-el-50: .5rem;
    --rad-el-150: 1.5rem;
    --rad-el-x2: 2rem;
    
    --shadow-10: 0 1rem 1rem rgba(10,15,63,.1);
    --shadow-02: 0 .5rem .5rem rgba(10,15,63,.02);
    --shadow-20: 0 .5rem .5rem rgba(10,15,63,.2);
    
    --clr-blue-light: #6d92ff;
    --clr-green-dark-pastel: rgba(60,145,96,1);
    --clr-green-toxic: rgba(211,255,79,1);
    --clr-yellow-toxic: rgba(255,235,87,1);
    --clr-grad-green: linear-gradient( 80deg, rgba(30,159,74,1) 0%, rgba(230,242,0,1) 100);
    
    --clr-black: rgba(0,0,0,1);
    --clr-white: rgba(255,255,255,1);
    --clr-gray: rgba(0,0,0,.4);
    --clr-gray-dark: rgba(214,221,229,1);
    
    --clr-text-sub: var(--clr-black);
    --clr-text: var(--clr-gray);
    --clr-acnt: rgba(255,139,1,1);
    --clr-acnt-2: var(--clr-green-dark-pastel);
    
    --clr-head-grad-1: #1e9f4a;
    --clr-head-grad-2: #e6f200;
    --clr-circle-bg: #ffffff;
    
    --space: 1rem;
    --space-50: .5rem;
    --space-25: .25rem;
    --space-10: .1rem;
    --space-x2: 2rem;
    --space-x3: 3rem;
    --space-x4: 4rem;
    
    --bg-clr: rgba(247,247,249,1);
    --bg-clr-sub: var(--clr-white);
    
    --bg-grad-1: linear-gradient( 180deg, rgba(245,246,250,1) 0%, rgba(241,243,247,1) 100%);
    --bg-grad-2: linear-gradient( -135deg, rgba(248,248,250,1) 0%, rgba(244,244,247,1) 100%);
    --bg-grad-3: linear-gradient( 170deg, rgba(248,248,250,1) 0%, rgba(243,242,247,1) 100%);
    
    --trns-15: all .15s ease;
    

    font-family: var(--fnt);
    font-size: var(--fs);
    color: var(--clr-text);
    background: var(--bg-clr);
    line-height: 1.25;
}
.row {
    display: flex;
    width: calc(100% + var(--space));
    max-width: calc(100% + var(--space));
    margin: 0 calc(-1 * var(--space-50));
    flex-flow: wrap;
}
.row div[class*="col-12"] {
    width: 100%;
    padding: 0 var(--space-50);
    display: flex;
    flex-flow: column;
    width: 100%;
}

.--cn h1, .--cn h2, .--cn h3 { margin: 0 !important; padding: 0; line-height: 1.15 !important;}
.--cn h2 { font-size: var(--fs-lg-1) !important;}
.--cn h3 { font-size: var(--fs-md-2) !important; background: transparent !important;}
.--cn h1 { text-align: center; font-size: var(--fs-lg-2) !important;}
.--cn h2 + [class*="-subtitle"] {
    color: var(--clr-text-sub);
    font-size: var(--fs-md);
    padding-top: var(--space);
}
.sidebar-title { font-size: var(--fs-md);}
.--cn * { box-sizing: border-box;}
.--cn div[class*="spacer"] {
    display: flex;
    width: 100%;
    height: var(--spacer-height);
}
.spacer { --spacer-height: var(--space)}
.spacer-lg { --spacer-height: var(--space-x2)}
.spacer-xlg { --spacer-height: var(--space-x3)}
.spacer-ulg { --spacer-height: var(--space-x4)}
.spacer-sm { --spacer-height: var(--space-50)}
.spacer-xsm { --spacer-height: var(--space-10)}

.--cn [class*="-title"] { color: var(--clr-text-sub); width: 100%; font-weight: 600;}   
.--cn [class*="-subtitle"] { width: 100%; font-weight: 400;}
.--cn h1[class*="-title"] { font-weight: 700;}
.--cn [class*="-title"] em, .--cn [class*="-subtitle"] em {
    text-decoration: none;
    font-style: normal;
    color: var(--clr-acnt);
    font-weight: 700;
}
.--cn [class*="box"], .wrap {
    display: flex;
    width: 100%;
    gap: var(--space);
}
.--cn [class*="box"] {
    border-radius: var(--rad-el-150);
    box-shadow: var(--shadow-10);
    padding: var(--space);
}
.--cn [class*="box"] .box {
    border-radius: var(--rad-el);
    box-shadow: var(--shadow-02);
    gap: 0;
}
.--cn [class*="box"] .box [class*="input"] {
    border-radius: var(--rad-el-50);
    padding: var(--space-50);
    width: 100%;
}
.box [class*="input"] {
    --bg-input: rgba(255,255,255,0);
    box-shadow: var(--shadow-10);    
    border: 1px solid var(--clr-gray-dark);
    background: var(--bg-input);
    position: relative;
    transition: var(--trns-15);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 1rem;
    line-height: 1;
    color: var(--clr-text-sub);
    
    z-index: 1;
}
.box [class*="input"]:hover, .box [class*="input"]:not(:empty), .box [class*="input"]:focus, .box [class*="input"]:focus-visible, .box [class*="input"]:active, .box input.input:not(:placeholder-shown) {
    --bg-input: rgba(255,255,255,1);
}
.box [class*="input"]:focus, .box [class*="input"]:focus-visible, .box [class*="input"]:active {
    outline-color: #86afff;
    border-color: #86afff;
}
.box [class*="input"] + .placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: var(--fs-xsm);
    display: flex;
    padding: var(--space-50);
    justify-content: center;
    align-items: center;
    z-index: 0;
    background: white;
    border-radius: var(--rad-el-50);
    line-height: 1;
}
.--cn [class*="box"] .box.list-item {
    padding: var(--space-50);
    transition: var(--trns-15);
    position: relative;
    z-index: 1;
}
.--cn [class*="box"] .box.list-item:hover { box-shadow: var(--shadow-20); transform: translateY(-5%);}
.--fw { max-width: 100%;}
.main-calc-box {
    flex-flow: wrap;
    max-width: 1024px;
    width: 100%;
    margin: 0 auto;
    background: var(--bg-clr-sub);
}
.--cn p { margin: 0;}
.--cn small, .--cn p small { font-size: var(--fs-xsm);}
.--cn ol {
    list-style: disc;
    padding-left: 1.5em;
    margin: 0;
}
.--cn .text, .box.--list, .wrap.--list { max-width: 660px;}
.box.--sidebar { max-width: calc(100% - 660px - 1rem);}
.box.--list, .wrap, .box.--sidebar { flex-flow: column;}
.sidebar-stiky {
    position: sticky;
    top: var(--space-x4);
}
[data-bg-grad] { background: var(--bg-grad);}
[data-bg-grad="1"] { --bg-grad: var(--bg-grad-1);}
[data-bg-grad="2"] { --bg-grad: var(--bg-grad-2);}
[data-bg-grad="3"] { --bg-grad: var(--bg-grad-3);}

.list-header {
    display: flex;
    flex-flow: wrap;
    width: 100%;
    font-size: var(--fs-xsm);
    color: rgba(0,0,0,.65);
    height: 36px;
    margin-top: -44px;
    margin-bottom: -.5rem;
    justify-content: flex-start;
    align-items: center;
    line-height: 1;
    padding: 0 var(--space-50);
}
.list-item .col, .list-header .col {
    display: flex;
    width: 100%;
    max-width: var(--col-size);
    min-height: 50px;
}
.list-item .col:nth-child(1), .list-header .col:nth-child(1) {
    --col-size: 50px;
    background: var(--bg-icn);
    border-radius: 50%;
    height: 50px;
    margin: auto 0;
}
.list-item .col:nth-child(2), .list-header .col:nth-child(2) { --col-size: calc(100% - 50px - 112px - (80px * 2));}
.list-item .col:nth-child(3), .list-header .col:nth-child(3),
.list-item .col:nth-child(4), .list-header .col:nth-child(4)
{ --col-size: 80px;}
.list-item .col:nth-child(5), .list-header .col:nth-child(5)
{ --col-size: 112px;}
.list-item-icn { --bg-icn: attr(data-bg-color);}
.list-item-icn img {
    display: flex;
    margin: auto;
    width: 50px;
    height: 50px;
    /*border-radius: 50%;*/
    justify-content: center;
    align-items: center;
    /*background-color: var(--bg-icn);*/
    /*overflow: visible;*/
    transform: scale(var(--img-scale));
}
.list-item-title, .list-item-price-home, .list-item-price-store {
    justify-content: flex-start;
    align-items: center;
}
.list-item-price-home, .list-item-price-store { padding-left: var(--space-25); color: var(--clr-text-sub);}
.list-item-title, .list-item-price-home {
    font-size: var(--fs-md-3);
    color: var(--clr-text-sub);
}
.list-item-title { padding: 0 1rem; position: relative; z-index: 1;}
.list-item-price-store { border-left: 1px solid white; line-height: 1;}
.list-item-price-home { font-weight: 700; border-right: 1px solid rgba(0, 0, 0, .1);}
.list-item-val { position: relative;}

.result {
    font-size: var(--fs-lg-2);
    font-weight: 700;
    color: var(--clr-green-dark-pastel);
}
svg#circle { filter: drop-shadow(var(--shadow-10));}
.result-area {
    display: flex;
    flex-flow: wrap;
    gap: .5rem;
}

.inyear-area {
    max-width: 32rem;
    margin: 0 auto;
}
.inyear-values {
    display: flex;
    flex-flow: column;
    width: 100%;
    max-width: calc(100% - 140px - 1rem);
}

.inyear-title {
    text-align: center;
}

.inyear-total {
    display: flex;
    flex-flow: row;
    gap: 1rem;
    justify-content: flex-start;
    align-items: center;
    line-height: 1;
}
.inyear {
    --inhead-circle-size: 140px;
    color: var(--clr-text);
}
.inyear-total svg {
    max-width: var(--inhead-circle-size);
    max-height: var(--inhead-circle-size);
}
.inyear .inyear-total .value {
    font-weight: 700;
    font-size: var(--fs-ulg);
    color: transparent;
    
    background: linear-gradient(30deg, var(--clr-head-grad-1), var(--clr-head-grad-2));
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -ms-background-clip: text;
    -o-background-clip: text;
    background-clip: text;
}
.summary {
    display: flex;
    width: 100%;
    flex-flow: column;
    font-size: var(--fs-xsm);
}
.cn-banner {
    display: flex;
    width: 100%;
    position: relative;
    border-radius: var(--rad-el-50);
    overflow: hidden;
    box-shadow: var(--shadow-02);
    transition: var(--trns-15);
    max-width: 20rem;
    margin: 0 auto;
}
.cn-banner:hover {
    box-shadow: var(--shadow-20);
    transform: translateY(-.25rem);
}
.cn-banner img {
    display: flex;
    width: 100%;
}
.cn-banner-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: var(--space);
    color: var(--clr-white);
    font-weight: 600;
    font-size: var(--fs-md);
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    text-decoration: none;
}
.cn-banner-text em {
    font-style: normal;
    color: var(--clr-acnt);
    font-weight: 900;
    font-size: var(--fs-lg-1);
}
[data-tips-anhor]:before {
    content: "["attr(data-tips-anhor)"]";
    color: var(--clr-blue-light);
    cursor: pointer;
    transition: var(--trns-15);
}
[data-tips]:after {
    content: "[" attr(data-tips) "]";
    color: var(--clr-blue-light);
    cursor: pointer;
    transition: var(--trns-15);
    font-size: var(--fs-xsm);
    vertical-align: top;
    font-style: normal;
}
[data-tips-anhor]:hover:before, [data-tips]:hover:after {
    color: var(--clr-acnt);
}
.tip-popup {
    display: none;
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    padding: var(--space-50);
    transform: translateY(-100%);
    font-size: var(--fs-xsm);
    border-radius: var(--rad-el-50);
    background: var(--clr-gray-dark);
    border: 0;
    box-shadow: var(--shadow-10);
    z-index: 10;
}

.list-item-title.tip-active .tip-popup {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-80%);
    }
    to {
        opacity: 1;
        transform: translateY(-100%);
    }
}

/* UG STYLE SET */

.--cn.--ug {
    --bg-clr: rgba(255,255,255,1);
    
    --rad-el: 6px;
    --rad-el-50: 4px;
    --rad-el-150: 0;
    --rad-el-x2: 12px;
    --shadow-10: 0;
    --shadow-20: 0;
    --shadow-02: 0;
    
    --clr-text: rgba(0,0,0,.5);
    --clr-text-sub: rgba(0,0,0,1);
}
.--cn.--ug [data-bg-grad="1"], .--cn.--ug [data-bg-grad="2"], .--cn.--ug [data-bg-grad="3"]{
    --bg-grad: rgba(240,240,240,1);
}
.--cn.--ug .cn-banner:hover { transform: scale(1.025);}

/* UG RD STYLE SET */

.--ug.--rd { --clr-acnt: rgba(255,139,1,1);}
.--ug.--rd [class*="box"] .box.list-item:hover {
    transform: none;
    background: rgba(223,223,223,1);
}
.--ug.--rd .tip-popup { background: rgba(255,232,202,1);}
.--ug.--rd .box [class*="input"]:focus, .--ug.--rd .box [class*="input"]:focus-visible, .--ug.--rd .box [class*="input"]:active {
    outline-color: var(--clr-acnt);
    border-color: var(--clr-acnt);
}

/* UG KLB STYLE SET */

.--ug.--klb {
    --clr-acnt: rgba(255,221,0,1);
    --fnt: Roboto, system-ui, sans-serif !important;
}
.--ug.--klb [data-tips-anhor]:before, .--ug.--klb [data-tips]:after {
    color: var(--clr-text);
}
.--ug.--klb [data-tips-anhor]:hover:before, .--ug.--klb [data-tips]:hover:after {
    color: var(--clr-blue-light);
}
.--ug.--klb [class*="box"] .box.list-item {
    outline: 2px solid white;
}
.--ug.--klb [class*="box"] .box.list-item:hover {
    background: #f9f9f9;
    outline: 2px solid var(--clr-acnt);
    transform: none;
}
.--ug.--klb .tip-popup { background: rgba(255,221,0,1); color: black;}
.--ug.--klb .box [class*="input"]:focus, .--ug.--klb .box [class*="input"]:focus-visible, .--ug.--klb .box [class*="input"]:active {
    outline-color: var(--clr-acnt);
    border-color: var(--clr-acnt);
}

.--cn [class*="-title"] em, .--cn [class*="-subtitle"] em {
    font-weight: 600;
    color: var(--clr-text-sub);
}
.--cn.--klb .sidebar-title { font-weight: 400;}
.--ug.--klb .cn-banner-text em { font-weight: 700;}
.--cn.--klb .text { max-width: 620px;}
.--cn.--klb [class*="box"] .box [class*="input"] { color: black;}
.--cn.--klb .inyear, .--cn.--klb [class*="box"] .box.--fixedbar {
    --clr-text: rgba(255,255,255,.5);
    --clr-text-sub: rgba(255,255,255,1);
    
    --clr-head-grad-1: #ffb100;
    --clr-head-grad-2: #d8ff00;
    --clr-circle-bg: #595959;
    
    background: rgba(41, 41, 41, 1);
    color: var(--clr-text);
}

/* MEDIA */

@media screen and (max-width: 960px) {
    .--cn .text, .box.--list, .wrap.--list { max-width: 500px;}
    .box.--sidebar { max-width: calc(100% - 500px - 1rem);}
    .--cn [class*="box"].main-calc-box { padding: 0;}
    .list-item-title, .list-item-price-home { font-size: var(--fs-md);}
}
@media screen and (min-width: 769px) {
   .--hide-in-d {display: none!important;} 
}
@media screen and (max-width: 768px) {
    .container--cn { padding: var(--space);}
    .--cn {
        --shadow-10: 0 .35rem .5rem rgba(10, 15, 63, .25);
        --shadow-02: 0 .25rem .25rem rgba(10, 15, 63, .1);
        background: transparent;
    }
    .inyear { --inhead-circle-size: 80px;}
    .--cn .text, .box.--list, .wrap.--list, .box.--sidebar { max-width: 100%;}
    .--cn h1 { font-size: var(--fs-md-3) !important;}
    .--cn h2 { font-size: var(--fs-md-2) !important;}
    .--cn h2 + [class*="-subtitle"] {font-size: var(--fs) !important;}
    .--cn h3 { font-size: var(--fs-md-1) !important;}
    .--cn [class*="box"].main-calc-box {
        position: relative;
        overflow: visible;
        display: flex;
        flex-flow: column;
        min-height: 100vh;
        box-shadow: none;
    }
    .--cn [class*="box"] .box.list-item { flex-flow: wrap;}
    .--hide-in-m {display: none!important;}
    [class*="box"] .box.list-item { gap: 1rem;}
    .--cn [class*="box"] .box.--fixedbar {
        position: fixed;
        bottom: 0;
        left: 0;
        flex-flow: column;
        z-index: 100;
        transition: var(--trns-15);
        transform: translateY(100%);
        opacity: 1;
        padding: .5rem 1rem;
        box-shadow: 0 .25rem 1.5rem;
    }
    .--cn.--rd [class*="box"] .box.--fixedbar, .--cn.--clb [class*="box"] .box.--fixedbar { bottom: 3rem;}
    .--cn [class*="box"] .box.--fixedbar { border-radius: var(--rad-el) var(--rad-el) 0 0; background: #d2e8ff;}
    .--cn [class*="box"] .box.--fixedbar[data-active="false"] { transform: translateY(100%); opacity: 0;}
    .--cn [class*="box"] .box.--fixedbar[data-active="true"] { transform: translateY(0); opacity: 1;}
    .sidebar-title { font-size: var(--fs-sm);}
    .summary { flex-flow: row; gap: 1rem;}
    .--cn [class*="box"] .box.--fixedbar, .summary, .result-area {
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .result { line-height: 1;}
    
    .inyear-total {
        flex-flow: column;
        text-align: center;
    }
    .inyear-values {
        max-width: 100%;
    }
    .inyear .inyear-total .value {
        font-size: var(--fs-lg-3);
    }
    .list-item .col:nth-child(2) {
        max-width: calc(100% - 50px - 1rem);
        padding: 0;
    }
    .list-item .col:nth-child(1) { order: 1;}
    .list-item .col:nth-child(2) { order: 2;}
    .list-item .col:nth-child(3) { order: 4; --col-size: calc(40% - .5rem);}
    .list-item .col:nth-child(4) { order: 3; --col-size: calc(60% - .5rem);}
    .list-item .col:nth-child(5) { order: 5;}
    .list-item .col:nth-child(3), .list-item .col:nth-child(4) {
        border: 0;
        padding: 0;
    }
    .list-item-price-home {
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: flex-start;
        font-size: var(--fs);
    }
    .list-item-price-home span:last-child {
        font-weight: 400;
        font-size: var(--fs-xsm);
    }
    .--cn .sidebar-stiky small, .--cn .sidebar-stiky p small{ font-size: var(--fs);}
    
    
    .--cn.--klb .result { color: var(--clr-acnt);}
    .--cn.--rd { --fs-xsm: 11px;}
    .--cn.--rd [class*="box"] .box.--fixedbar, .--cn.--klb [class*="box"] .box.--fixedbar {
        border-radius: 0;
    }
}