@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
/* 20231205 */

/* --------------------------------
    CSS INDEX
-------------------------------- */
/*
1. COMMON
2. LAYOUTS
3. COMPANY MAIN
4. SCROLL
5. POPUP
6. MEDIA RULE
7. Z-INDEX
8. SPANISH
*/

:root {
    --defaultFont: "Open Sans",Arial,sans-serif;
    /*--colorSet1: #0381a2;
    --colorSet2: #0381a2;*/
    --default-shadow: 0 4px 10px -4px rgba(0, 0, 0, 0.25);
}
.landing-renewal  {
    /*--colorSet1: #ffc107;
    --colorSet2: #ffc107;*/
}

/* --------------------------------
    1. COMMON
-------------------------------- */

.text-truncate {
    /*multiple lines*/
    display: -webkit-box !important;
    overflow: hidden;
    -webkit-box-orient: vertical;
    white-space: normal;
    text-overflow: ellipsis;
    word-break: break-word;
}

input.wc_percent { min-width:120px; padding-left:20px; text-align:right; background:#fff; }
.fa-chevron-up:before { content: "\f077"; }
.fa-chevron-down:before { content: "\f078"; }
.fa-dollar-sign { font-size:calc(.88rem + .1vw); }
.fa-percent { font-size:.84rem; }
.fa-calculator { font-size:18px; vertical-align:-2px; }

/* --------------------------------
    2. LAYOUTS
-------------------------------- */

.calculator__container {
display: grid;
grid-template-columns: 225px 320px 225px;
grid-template-rows: auto repeat(1, 1fr);
grid-column-gap: 15px;
grid-row-gap: 0;
}
/*.schedule__show {
grid-template-rows: 100px repeat(2, .1fr);
grid-row-gap: 0;
}*/

.calculator__container .calculator__title { grid-area: 1 / 1 / 2 / 4; }
.calculator__container .calculator__data { grid-area: 2 / 1 / 3 / 2; }
.calculator__container .calculator__graph { grid-area: 2 / 2 / 3 / 3; }
.calculator__container .calculator__result { grid-area: 2 / 3 / 3 / 4; }
.calculator__container .calculator__schedule { grid-area: 3 / 1 / 4 / 4; }


/* -------------------------------
    Calculate for ADA
-------------------------------- */

.calculator__container .calculator__chart { grid-area: 2 / 2 / 3 / 3; }
.calculator__container .calculator__chart .calculator__graph{ grid-area:unset; }
.calculator__container .calculator__chart .calculator__summary{ margin: 0 5px; }
.calculator__container .calculator__chart .calculator__summary dl :is(dt,dd) { margin:0.84em 0; padding:0.2em 0; }
.calculator__container .calculator__chart .calculator__summary dl :is(dt,dd):is(:nth-child(1),:nth-child(2)){ padding-top:0; margin-top:0; }
.calculator__container .calculator__chart .calculator__summary dl :is(dt,dd) span { display:inline-block; }
.calculator__container .calculator__chart .calculator__summary dl dt{  text-align:left; }
.calculator__container .calculator__chart .calculator__summary dl dd{  text-align:right; white-space:nowrap; text-overflow:ellipsis; overflow:hidden }
.calculator__container .calculator__chart .calculator__summary dl dd .dollar {}
.calculator__container .calculator__chart .calculator__summary dl dd .percentage{  margin-left: .3em; }
.calculator__container .calculator__chart .calculator__summary dl :is(dt,dd).total { border-top:1px solid #a5a5a5; font-weight:bold; }
[role="tabpanel"].is-hidden { display: none !important; }

.grid-var { display:grid; grid-template-columns: var(--grid-var) 1fr; }





/**/
.calculator__button { color:var(--colorSet2); font-size:14px; cursor:pointer; }
.calculator__button button { padding:.52rem 5px; border:none; border-radius:.5rem; background:none; color:inherit; font-size:inherit; text-align:center; box-sizing:border-box; }
.calculator__button button i:not(.fa-calculator) { color:inherit; font-size:16px; }
.landing-classic .calculator__button { display:inline-block; margin-left:20px; }
.landing-renewal .calculator__button { display:block; margin-top:20px; }

.calculator__container { padding:50px 0 40px 0; font-size:14px; transition:.2s ease-out; }
.landing-classic .calculator__container { padding:50px 0 40px 0; border-bottom:none; }
.landing-renewal .calculator__container { padding:20px 0 50px 0; border-top:1px solid #c5c5c5; }

.landing-classic .calculator-wrap .calculator__container { border-bottom:1px solid #c5c5c5; }
.landing-classic .calculator-wrap.schedule__show .calculator__container { border-bottom:none; }

.landing-classic .calculator-wrap + .lo_info { border-top:none; }
.landing-classic .calculator-wrap.schedule__show + .lo_info { border-top:none; }

.landing-renewal .calculator-wrap.schedule__show + .lo_info { border-top:none; }
.landing-renewal .calculator-wrap + .lo_info { border-top:1px solid #c5c5c5; }

.calculator__button span { margin:0 0 0 3px; font-style:italic; }
.calculator__button span:is(:focus, :hover, :active) { text-decoration:underline; }

.calculator__container input[type='text'] { width:100%; height:36px; border-radius:0; font-size:1.15rem; box-sizing:border-box; }
.calculator__container select { width:100%; height:36px; padding:4px 2px 4px 1px; border-radius:0; font-size:1.15rem; text-align:right; box-sizing:border-box; }
@-moz-document url-prefix() {
    .calculator__container select { padding:4px 18px 4px 1px; }
}
.calculator__container.schedule__show { border-bottom:none; }

.calculator__container .calculator__title { min-height:100px; padding:0 2rem 10px 2rem; }
.calculator__container .calculator__title .txt_header { margin: 0 auto 10px auto; color:var(--colorSet3); font-size: calc(1.4rem + .1vw); font-weight: 400; text-align: center; }

.calculator__container .calculator__data li.title { margin-bottom:2px; text-indent:12px; text-align:left; letter-spacing:-0.5px; }
.calculator__container .calculator__data li.group__title { position:relative; margin-bottom:20px; text-align:left; text-indent:0;  }
.calculator__container .calculator__data li.group__title.deskTop__nowrap { white-space:nowrap; }
.calculator__container .calculator__data li { position:relative; margin-bottom:20px; text-align:left; }
.calculator__container .calculator__data .data_expand { margin:20px 0; padding-left:10px; font-weight:400; cursor:pointer; }
.calculator__container .calculator__data .data_expand button { width:100%; min-width:initial; min-height:initial; padding:0; border:none; background:none; color:inherit; font-size:inherit; text-align:left; font-style:italic; text-decoration:none; box-sizing:border-box; box-shadow:none; }
.calculator__container .calculator__data .data_expand button:is(:focus, :hover, :active) { text-decoration:underline; outline:4px solid rgba(0, 122, 255, 0.3); }
.calculator__container .calculator__data .data_expand span.btn__text { font-style:italic; }
.calculator__container .calculator__data .data_expand span.btn__icon { display: inline-block; margin-right:6px; border-radius: 100px; background:none; color:var(--colorSet3); font-size:20px; text-align: center; }
.calculator__container .calculator__data .data_expand span.btn__icon i { font-size:20px; vertical-align:-1px; }
.calculator__container .calculator__data .wc_percent { padding-right:22px; }
.calculator__container .calculator__data li .fa-dollar-sign { position:absolute; top:12px; left:7px; font-size:1rem; }
.calculator__container .calculator__data li .fa-percent { position:absolute; top:12px; right:7px; font-size:1rem; }
.calculator__container .calculator__data li.txt__APA { width:235px; letter-spacing:-0.1px; }

.calculator__container .calculator__graph { margin:0 5px; }

.calculator__container .calculator__result { }
.calculator__container .calculator__result li.title { margin-bottom:2px; text-indent:12px; text-align:left; color:var(--colorSet3); font-weight:400; }
.calculator__container .calculator__result li { position:relative; margin-bottom:20px; text-align:left; color:var(--defaultText); }
.calculator__container .calculator__result .btn-payment { min-width: 200px; padding: 0.52rem 1.5rem; border: 1px solid var(--colorSet3); border-radius: 0.382rem; background: var(--colorSet3); font-size: 1.12rem; color: #fff; box-shadow: none; }
.calculator__container .calculator__result .btn-payment i { margin-right:5px; }
.calculator__container .calculator__result li .fa-dollar-sign { position:absolute; top:12px; left:7px; }
.calculator__container .calculator__result li .fa-percent { position:absolute; top:12px; right:7px; }

.calculator__container .calculator__schedule { overflow:auto hidden; margin:20px 0 0 0; font-size:14px; }
.calculator__container .calculator__schedule table { width:100%; /*min-width:max-content;*/ border-collapse:collapse; }
.calculator__container .calculator__schedule table thead { display:table; width:99.5%; min-width:795px; }
.calculator__container .calculator__schedule table tbody { display:inline-block; overflow-y:auto; min-width:800px; max-height:480px; margin-left:-1px; }
.calculator__container .calculator__schedule table th { padding:6px 4px 6px 0; border-bottom:1px solid var(--colorSet3); color:var(--colorSet3); text-align:right; font-weight:400; }
.calculator__container .calculator__schedule table th span { color:var(--colorSet3); }
.calculator__container .calculator__schedule table td { padding:6px 4px 6px 0; border-bottom:1px solid #c5c5c5; text-align:right; }
.calculator__container .calculator__schedule table th:not(:first-of-type),
.calculator__container .calculator__schedule table td:not(:first-of-type) { min-width:120px; width:19%; box-sizing:border-box; }
.calculator__container .calculator__schedule table th:first-of-type,
.calculator__container .calculator__schedule table td:first-of-type { width:5%; min-width:50px; box-sizing:border-box; }
/*.calculator__container .calculator__schedule table th:last-of-type,
.calculator__container .calculator__schedule table td:last-of-type { padding-right:10px; }*/
.calculator__container .calculator__schedule table td i { padding-inline:0 .5em; font-size:.84rem; }
.calculator__container .calculator__schedule table td i.fa-percent { padding-inline:.2em 0; }
/*.calculator__container .calculator__schedule dl { display:none; }*/

.calculator__container .calculator__schedule .ico-payment { position:absolute; margin-top:calc((522px - 70px)/2); z-index:-1; max-height:100vmax; user-select:none; }
.calculator__container .calculator__schedule .ico-payment__left { left:5%; }
.calculator__container .calculator__schedule .ico-payment__right { right:5%; }
.calculator__container .calculator__schedule .ico-payment i { font-size:70px; color:var(--defaultText); opacity:.28; }


.calculator__container .calculator__tab { margin:0 7px 15px 7px; border-bottom:1px solid #c5c5c5; text-align:center; }
.calculator__container .calculator__tab li { display:inline-block; width:inherit; min-width:95px; margin-bottom:-1px; padding:6px 8px; border:1px solid #c5c5c5; border-radius:4px 4px 0 0; background:#fff; color:var(--colorSet2); font-size:1.12rem; font-weight:400; font-style:italic; text-align:center; line-height:20px; box-sizing:border-box; }
.calculator__container .calculator__tab li.on { border:1px solid var(--colorSet2); background:var(--colorSet2); color:#fff; }
.calculator__container .calculator__tab li:is(:focus, :hover, :active) { text-decoration:underline; cursor:pointer; }
.calculator__container .calculator__tab li button { width:100%; min-width:initial; min-height:initial; padding:0; border:none; background:none; color:inherit; font-size:inherit; text-align:center; text-decoration:none; box-sizing:border-box; box-shadow:none; }
.calculator__container .calculator__tab li.on button:is(:focus, :hover, :active) { outline:4px solid rgba(255, 255, 255, 0.3); }

.calculator__container .calculator__tab { margin:0 7px 15px 7px; border-bottom:1px solid #c5c5c5; text-align:center; }
.calculator__container .calculator__tab button { display:inline-block; width:inherit; min-width:95px; margin-bottom:-1px; padding:6px 8px; border:1px solid #c5c5c5; border-radius:4px 4px 0 0; background:#fff; color:var(--colorSet3); font-size:1.12rem; font-weight:400; font-style:italic; text-align:center; line-height:20px; box-sizing:border-box; }
.calculator__container .calculator__tab button.on { border:1px solid var(--colorSet2); background:var(--colorSet3); color:#fff; }
.calculator__container .calculator__tab button[ aria-selected="true"] { border:1px solid var(--colorSet3); background:var(--colorSet3); color:#fff; }
.calculator__container .calculator__tab button:is(:focus, :hover, :active) { text-decoration:underline; cursor:pointer; }
.calculator__container .calculator__tab button.on:is(:focus, :hover, :active) { outline:4px solid rgba(255, 255, 255, 0.3); }



/*company main*/
/*.company-wrap .calculator__container { --colorSet1: #fff; --colorSet2: #857460; }*/
.company-wrap .calculator__container .calculator__title .txt_header { color:var(--colorSet1); }
.company-wrap .calculator__container .calculator__data .data_expand button { color:var(--colorSet1); }
.company-wrap .calculator__container .calculator__data .data_expand span.btn__icon { color:var(--colorSet1); }
.company-wrap .calculator__container .calculator__tab li { color:var(--colorSet1); }
.company-wrap .calculator__container .calculator__tab li.on { border:1px solid var(--colorSet1); background:var(--colorSet1); color:#fff; }
.company-wrap .calculator__container .calculator__result li.title { color:var(--colorSet1); }
.company-wrap .calculator__container .calculator__result .btn-payment { background:var(--colorSet3); }
.company-wrap .calculator__container .calculator__schedule table th { border-bottom:1px solid var(--colorSet1); color:var(--colorSet1); }
.company-wrap .calculator__container .calculator__schedule table th span { color:var(--colorSet1); }



/* --------------------------------
    3. COMPANY MAIN
-------------------------------- */

.company-theme-A .calculator-wrap {
    --colorSet1: #857460;
    --colorSet2: #fff;
}
.company-theme-B .calculator-wrap {
    --colorSet1: #6d6d71;
    --colorSet2: #6d6d71;
}
.company-theme-C .calculator-wrap {
    --colorSet1: #528d73;
    --colorSet2: #528d73;
}

.company-wrap .calculator-wrap { max-width:800px; margin:0 auto; padding:0; }
.company-wrap .calculator__button { color:var(--colorSet2); margin-top:17px; }

.company-theme-B .calculator__button { color:var(--colorSet2); text-shadow:rgba(0, 0, 0, 0.3) 0px 0px 8px; }
.company-theme-B .calculator__button span { background:rgba(0, 0, 0, 0.01); }

.company-theme-C .calculator__button { display:inline-block; margin-left:20px; color:var(--colorSet1); }


/* --------------------------------
    4. SCROLL
-------------------------------- */
.calculator__schedule table tbody::-webkit-scrollbar { width:0.55em; height:8px; }
.calculator__schedule table tbody::-webkit-scrollbar-button:start:decrement,
.calculator__schedule table tbody::-webkit-scrollbar-button:end:increment { width:0px; height:0; display:block; background-color:#fff; }
.calculator__schedule table tbody::-webkit-scrollbar-button:horizontal:start:decrement,
.calculator__schedule table tbody::-webkit-scrollbar-button:horizontal:end:increment { height:0; display:block; background-color:#fff; }
.calculator__schedule table tbody::-webkit-scrollbar-track-piece { background-color:#eaeaea; border-radius:10px; }
.calculator__schedule table tbody::-webkit-scrollbar-thumb:vertical,
.calculator__schedule table tbody::-webkit-scrollbar-thumb:horizontal { background-color:#999; border:1px solid #fff; -webkit-border-radius:6px; }

.calculator__container .calculator__schedule::-webkit-scrollbar { width:0.55em; height:8px; }
.calculator__container .calculator__schedule::-webkit-scrollbar-button:start:decrement,
.calculator__container .calculator__schedule::-webkit-scrollbar-button:end:increment { width:0px; height:0; display:block; background-color:#fff; }
.calculator__container .calculator__schedule::-webkit-scrollbar-button:horizontal:start:decrement,
.calculator__container .calculator__schedule::-webkit-scrollbar-button:horizontal:end:increment { height:0; display:block; background-color:#fff; }
.calculator__container .calculator__schedule::-webkit-scrollbar-track-piece { background-color:#eaeaea; border-radius:10px; }
.calculator__container .calculator__schedule::-webkit-scrollbar-thumb:vertical,
.calculator__container .calculator__schedule::-webkit-scrollbar-thumb:horizontal { background-color:#999; border:1px solid #fff; -webkit-border-radius:6px; }


/* --------------------------------
    5. POPUP
-------------------------------- */



/* --------------------------------
    6. MEDIA RULE
-------------------------------- */

/*narrow screen*/
@media screen and (max-width:870px) {
    .landing-classic .calculator__button { display:block; margin:20px 0 0 0; }

    .calculator__container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto repeat(3, .1fr);
    grid-column-gap: 0px;
    grid-row-gap: 30px;
    }
    /*.schedule__show {
    grid-template-rows: repeat(5, .1fr);
    }*/

    .calculator__container .calculator__title { grid-area: 1 / 1 / 2 / 2; }
    .calculator__container .calculator__data { grid-area: 2 / 1 / 3 / 2; }
    .calculator__container .calculator__graph { grid-area: 3 / 1 / 4 / 2; }
    .calculator__container .calculator__chart { grid-area: 3 / 1 / 4 / 2; }
    .calculator__container .calculator__result { grid-area: 4 / 1 / 5 / 2; }
    .calculator__container .calculator__schedule { grid-area: 5 / 1 / 6 / 2; }

    /**/
    .calculator__container input[type='text'],
    .calculator__container select { width:100%; }
    .calculator__container .calculator__data .wc_percent { }

    .landing-classic .calculator-wrap.schedule__show { border-bottom:1px solid #c5c5c5; }

    .landing-renewal .calculator__container { margin-top:0; }
    .landing-renewal .calculator-wrap.schedule__show { border-bottom:1px solid #c5c5c5; }

    .calculator__container .calculator__title { min-height:auto; padding:0 1rem 20px 1rem; }
    .calculator__container .calculator__data,
    .calculator__container .calculator__result { max-width:320px; width:100%; margin:0 auto; padding:0; }

    .calculator__container .calculator__chart { text-align:center; margin:0 auto; }
    .calculator__container .calculator__chart:has( .calculator__graph.is-hidden ) { width:100%; max-width:350px; }
    .calculator__container .calculator__chart:has( .calculator__summary.is-hidden ) { width:100%; max-width:unset;  }
    .calculator__container .calculator__chart .calculator__summary { display:inline-block; width:100%; }

    .calculator__container .calculator__data li.title,
    .calculator__container .calculator__result li.title { text-indent: 12px; }

    .calculator__container .calculator__data li.group__title.deskTop__nowrap { text-indent:unset; white-space:unset; }

    .calculator__container .calculator__data li,
    .calculator__container .calculator__result li { text-align:center; }
    .calculator__container .calculator__data .data_expand { padding-left:10px; text-align:left; }
    
    .calculator__container .calculator__tab { margin-bottom:20px; }

    .calculator__container .calculator__graph canvas { max-width:350px; max-height:350px; margin:20px auto; }

    .calculator__container .calculator__schedule table thead { display:table; width:99.5%; min-width:710px; }
    .calculator__container .calculator__schedule table tbody { display:inline-block; overflow:hidden auto; width:100%; min-width:715px; max-height:480px; margin-left:-1px; }
    .calculator__container .calculator__schedule table th { padding:6px 4px 6px 0; border-bottom:1px solid var(--colorSet2); text-align:right; font-weight:400; }
    .calculator__container .calculator__schedule table th span {  }
    .calculator__container .calculator__schedule table td { padding:6px 4px 6px 0; border-bottom:1px solid #c5c5c5; text-align:right; }
    .calculator__container .calculator__schedule table th:not(:first-of-type),
    .calculator__container .calculator__schedule table td:not(:first-of-type) { min-width:120px; width:19%; box-sizing:border-box; }
    .calculator__container .calculator__schedule table th:first-of-type,
    .calculator__container .calculator__schedule table td:first-of-type { width:5%; min-width:50px; box-sizing:border-box; }

    /*.calculator__container .calculator__schedule table { display:none!important; }
    .calculator__container .calculator__schedule dl { display:block; max-width:340px; min-width:340px; margin:40px auto 0 auto; padding-top:40px; border-top:3px dotted #cbcbcb; text-align:left; }
    .calculator__container .calculator__schedule dl:first-of-type,
    .calculator__container .calculator__schedule dl:only-child { margin-top:0; padding:0; border-top:none; }
    .calculator__container .calculator__schedule li { margin-bottom:2px; padding:6px 0 6px 10px; font-size:1.15rem; }
    .calculator__container .calculator__schedule li.title { margin-bottom:10px; background:none!important; font-style:italic; }
    .calculator__container .calculator__schedule dl:not(:first-of-type) li.title { display:none; }
    .calculator__container .calculator__schedule li { margin-bottom:10px; padding-right:10px; color:var(--defaultText); font-size:1.15rem; text-align:right; }
    .calculator__container .calculator__schedule li i { font-size:1rem; }
    .calculator__container .calculator__schedule li i.fa-percent { font-size:.85rem; }*/
    

}

/*company main*/
@media screen and (max-width:895px) {
    .company-wrap .calculator__button { color:var(--colorSet2)!important; }
    .company-wrap .calculator__container {padding-top:0; }
    .company-wrap .calculator__container .calculator__title:not(.txt_header) { font-size:14px; }
    .company-wrap .calculator-wrap { border-bottom:1px solid #c5c5c5; }


    /*B*/
    .company-theme-B .calculator__button { text-shadow:none; }
    .company-theme-B .calculator__button span { background:none; }

    /*C*/
    .company-theme-C .calculator__button { display:block; margin:20px 0 50px 0; }

}



/*narrow mobile*/
@media screen and (max-width:400px) {
    table { min-width:100%; }
}
/*mobile*/
@media screen and (max-width:430px) {
    
    .calculator__container input[type='text'],
    .calculator__container select { width:90%; }
    .calculator__container .calculator__data .wc_money, 
    .calculator__container .calculator__data .wc_percent, 
    .calculator__container .calculator__data select { margin-left:calc(1rem + .1vw); }


    .calculator__container .calculator__data, 
    .calculator__container .calculator__result { max-width:100%; width:100%; min-width:28px; }
    .calculator__container .calculator__data li.title, 
    .calculator__container .calculator__result li.title, 
    .calculator__container .calculator__data li.group__title { text-indent:calc(1rem + .1vw); }

    .calculator__container .calculator__result .wc_money { margin-left:calc(1rem + .1vw); }
    .calculator__container .calculator__data li, 
    .calculator__container .calculator__result li { text-align:left; }
    /*.calculator__container .calculator__tab { text-align:left; }*/
    .calculator__container .calculator__tab li { text-align:center; }
    

}


/* --------------------------------
    7. Z-INDEX
-------------------------------- */

/*


    
*/



/* --------------------------------
    8. SPANISH
-------------------------------- */