@import url(../../../css/cckm-box.css);
@import url(../../../css/cmn/wizard-progress.css);
@import url(../../../css/cmn/timeline.css);	

/** 背景 **/
.retire-plan > .bg-container {
	background-image:url(https://d1r4509tniam8v.cloudfront.net/img/fm-retired-plan-bg.png);
    background-size: cover; background-position: center 25%; background-repeat: no-repeat; opacity: 0.2;
	position: absolute; height: 200px; width: 100%; border-bottom-left-radius: 50% 30%; border-bottom-right-radius: 50% 30%;
} 
@media (max-width:767px) {
	.retire-plan > .bg-container { height: 230px; border-bottom-left-radius: 50% 20%; border-bottom-right-radius: 50% 20%; }
}

.retire-plan small { color:#888; /* 20230424 畫面感覺字太小暫時mark font-size: 14px */ }
.retire-plan .input-lg { padding-left: 8px; padding-right: 8px; }
.retire-plan .input-group-addon { padding-left: 10px; padding-right: 10px; }

.retire-plan .border-default { border: 2px dashed rgba(var(--default-color), 0.5); }
.retire-plan .border-success { border: 2px dashed rgba(var(--success-color), 0.5); }

.retire-plan .unit { margin-left: 3px; font-size: 40%; }
.retire-plan fieldset { border: 2px dashed rgba(var(--default-color), 0.3); padding: 10px }
.retire-plan fieldset legend { font-size: inherit; color: rgb(var(--default-color)); width: auto; padding-left: 10px;  padding-right: 10px; border-bottom: none; margin-bottom: 5px; }
.retire-plan fieldset .small-box.end { margin-bottom: 0; }

.retire-plan .no-data { font-size: 16px; padding: 10px; }
.retire-plan .no-data img { width: 100px; height: 100px; }

/** 覆寫 cckm cc-div-table **/
.retire-plan .cc-div-table-cell { padding: 7px; }
.retire-plan .cc-div-table-cell.border-bottom-dotted { border-bottom-color: #ccc }
.retire-plan .cc-div-table-cell.border-bottom-double { border-bottom-color: #ccc; border-bottom-style: double; }
.retire-plan .border-bottom-dotted.no-border { border-bottom: none; }
.retire-plan .cc-div-table-caption > p { margin: 10px 7px; }
@media (max-width:767px) {
	.retire-plan .cc-div-table-row { font-size: 14px; }
}
.retire-plan .cc-div-table { margin: 0 auto; }
.retire-plan .cc-div-table tr th, .retire-plan .cc-table tr td { font-size: 18px !important; vertical-align:middle; }
.retire-plan .cc-div-table input[type='text'], .retire-plan .cc-div-table input[type='tel'] { width: 100% !important; }
.retire-plan .cc-div-table input[type='select'] { min-width: 180px }
.retire-plan .cc-div-table .btn-remove { border-style: dashed; background-color: rgba(var(--danger-color), 0.5); width: 50px }
.retire-plan .cc-div-table .btn-remove:hover { background-color: rgba(var(--danger-color))}
.retire-plan .cc-div-table .cc-btn-primary.btn-add { border-style: dashed; background-color: rgba(var(--primary-color), 0.5) }
.retire-plan .cc-div-table .cc-btn-primary.btn-add:hover { background-color: rgba(var(--primary-color)) }
.retire-plan .cc-div-table .cc-btn-success.btn-add { border-style: dashed; background-color: rgba(var(--success-color), 0.5) }
.retire-plan .cc-div-table .cc-btn-success.btn-add:hover { background-color: rgba(var(--success-color)) }
.retire-plan .cc-div-table .cc-btn-default.btn-hint { border-style: dashed; background-color: rgba(var(--default-color), 0.5); width: 50px; }
.retire-plan .cc-div-table .cc-btn-default.btn-hint:hover { background-color: rgba(var(--default-color))}

/** 試算 **/
.retire-plan .trial .trial-step-content {padding-top:0px; margin: 10px auto; width: 95%; }
@media (max-width: 991px) {
	.retire-plan .trial .trial-step-content { width: 95%; }
}

.retire-plan blockquote.primary { font-size: inherit; border-left-color: rgb(var(--primary-color)); background:rgba(var(--primary-color),0.1); margin:0; margin-bottom: 20px; border-radius: 20px; text-align:center; }
.retire-plan blockquote small { display: inline-block; }
.retire-plan blockquote small:before { content: "" }
.retire-plan blockquote > ul > li { padding-bottom: 5px; }
@media (max-width:767px) {
	.retire-plan blockquote { text-align: left; }
	.retire-plan blockquote > ul > li { display: block; }
}

 .retire-plan .small-box-group [class*="col-md"]  { padding-left: 0; padding-right: 0;  }
@media (min-width:768px) and  (max-width:991px) {
	.retire-plan .small-box-group [class*="col-sm"]:nth-child(odd) { padding-right: 6px; }
	.retire-plan .small-box-group [class*="col-sm"]:nth-child(even) { padding-left: 6px;  }
}
.retire-plan .small-box-group .small-box .icon { left: 15px; right: 0;}
.retire-plan .small-box-group .small-box > .inner { text-align: right; padding-top:20px; padding-bottom:20px }
@media (max-width:767px) { .retire-plan .small-box-group > [class^="col-"] { padding-left: 0; padding-right: 0; }}
 
/** 填寫資料 **/
.retire-plan .edit .reset { position: absolute; right: 20px; }
@media (max-width:767px) { .retire-plan .edit .reset { right: 0px; } }
.retire-plan .edit uib-accordion .accordion.panel-info .panel-heading { background: rgb(var(--info-color)) }
.retire-plan .edit uib-accordion .accordion.panel-success .panel-heading { background: rgb(var(--success-color)) }
.retire-plan .edit uib-accordion .accordion.panel-primary .panel-heading { background: rgb(var(--primary-color)) }
.retire-plan .edit uib-accordion .accordion .panel-heading { padding:0; margin-bottom: 10px; }
.retire-plan .edit uib-accordion .accordion .panel-heading .heading-text { font-size: 18px; width: 100%; padding:20px 15px; }
.retire-plan .edit uib-accordion .accordion .panel-heading a { color: white !important; }
.retire-plan	.edit uib-accordion .accordion .panel-heading .sub-total { /* display: grid; grid-template-columns: auto auto; justify-self: center; */ margin-top: -10px; text-align: right; }
.retire-plan	.edit uib-accordion .accordion .panel-heading .sub-total .item { font-size: 75%; color: white; }
.retire-plan .edit uib-accordion .accordion .panel-body { padding: 10px 0px; }
@media (max-width:767px) {
	.retire-plan .edit >  [class*="col-"] { padding-left: 0; padding-right: 0; }
	.retire-plan .edit uib-accordion .accordion .panel-heading .heading-text { font-size: 16px; padding: 15px 8px; }
	.retire-plan .edit uib-accordion .accordion .panel-heading .sub-total { font-size: 14px; margin-top: -5px; }
}
@media (max-width:374px) {
	.retire-plan .edit uib-accordion .accordion .panel-heading .heading-text { font-size: 14px; }
	.retire-plan .edit uib-accordion .accordion .panel-heading .sub-total { font-size: 12px; }
}

.summary-container { padding: 10px 10px; margin: -8px auto 8px; background-color: rgba(var(--default-color), 0.08); color: rgb(var(--default-color)); }
.summary-container.info { background-color:  rgba(var(--info-color), 0.08);}
.summary-container.success { background-color:  rgba(var(--success-color), 0.08); } 
.summary-container.primary { background-color:  rgba(var(--primary-color), 0.08); }
.summary-container span.value { font-weight: 600; font-size: 110%; padding-left: 5px; padding-right: 5px; }
.summary-container.info span.value { color: rgb(var(--info-color));  }
.summary-container.success span.value { color: rgb(var(--success-color));  }
.summary-container.primary span.value { color: rgb(var(--primary-color));  }
.summary-container  [class*="col"] { padding-left: 8px; padding-right: 8px; }
.summary-container h3 { margin: 5px auto 0; }
.summary-container legend { margin: 0 !important; font-size: 16px !important; }
.summary-container ol > li, .summary-container ul > li { border-bottom: 1px dashed #ddd; padding-left: 10px; padding-bottom: 10px; margin-bottom: 10px; }
.summary-container ol > li:last-child, .summary-container ul > li:last-child { border-bottom: none; }
.summary-container blockquote { margin: 0 auto; padding-left: 10px; padding-right: 10px; }
.summary-container.info blockquote { border-left-color: rgba(var(--info-color), 0.3); }
.summary-container.success blockquote { border-left-color: rgba(var(--success-color), 0.3); }
.summary-container.primary blockquote { border-left-color: rgba(var(--primary-color), 0.3); }
@media (max-width:767px) { 
	.summary-container fieldset:first-child { margin-bottom: 15px; }
}
.retire-plan .edit uib-accordion .accordion .cc-div-table .cc-div-table-cell { padding: 10px; } 
.retire-plan .edit uib-accordion .accordion .cc-div-table .cell-container .item { padding: 6px 8px; }
.retire-plan .edit uib-accordion .accordion .cc-div-table .cell-container .item:nth-child(odd) { padding-left: 0; }
.retire-plan .edit uib-accordion .accordion .cc-div-table .cell-container .item:nth-child(even) { padding-right: 0;  }
.retire-plan .edit uib-accordion .accordion .cc-div-table .cell-container .item a { color: rgb(var(--primary-color)); font-size:85%; }
.retire-plan .edit uib-accordion .accordion .cc-div-table .cell-container .item a:hover { text-decoration: underline; }
@media (max-width:767px) {
	.retire-plan .edit uib-accordion .accordion .cc-div-table .cell-container .item { padding-left: 0; padding-right: 0; }
}

/** 追蹤 - widget **/
.retire-plan .track .box.widget:before { content: ''; position: absolute; right: 10px; top:-10px; font-size: 12rem; opacity: 0.1; }
.retire-plan .track .box.target:before { content: '\f11e'; }
.retire-plan .track .box.ready:before { content: '\f291'; }
.retire-plan .track .box.lack:before { content: '\f1ce'; }
.retire-plan .track .box.widget:after { content: ''; position: absolute; right: -40px; top:30px; font-size: 6rem; color:rgba(var(--gray-888-color),0.3); z-index: 1; }
.retire-plan .track .box.target:after { content: '\f056'; }
.retire-plan .track .box.ready:after { content: '\f0a9'; }
.retire-plan .track .box.widget .box-body h2 { margin: 10px auto 20px; }
@media (min-width: 768px) and (max-width: 991px) {
	.retire-plan .track .box.widget .box-body h2 { font-size: 26px }
}
@media (max-width:767px) {
	.retire-plan .track .box.widget:after { right:unset; top:unset; bottom: -55px; left: calc( 100% / 2 - 20px); }
	.retire-plan .track .box.ready:after { content: "\f0ab"; }
	.box { margin-bottom: 30px; }
}
@media (max-width:374px) {
	.retire-plan .track .box.widget .box-body h2 { font-size: 26px }
}

/** 追蹤 - diff-analysis **/
.retire-plan .track .diff-analysis { position: relative; overflow:hidden; background: rgba(var(--primary-color), 0.05); padding: 30px 0; margin: 20px 0 40px; }
.retire-plan .track .diff-analysis:after { content: '';  position: absolute;  top: 0; width: 0; height: 0;  border-style: solid; border-width: 24px 24px 0 24px; border-color: #ffffff transparent transparent transparent; left: 50%; transform: translateX(-50%) translateY(0%); }
.retire-plan .track .diff-analysis:before { content: '\f24e'; position: absolute; top: -30px; right: 20px; font-size: 18rem; color: rgba(var(--default-color), 0.15); }
.retire-plan .track .diff-analysis .title { margin: 30px auto; text-align:center; color: rgb(var(--primary-color))}
.retire-plan .track .diff-analysis .title small { font-size: 16px; }
.retire-plan .track .diff-analysis .list { padding-left: 15px; padding-right: 15px; margin: 10px auto; }
.retire-plan .track .diff-analysis .box.widget:before { font-size: 6.5rem; top: 10px; }
.retire-plan .track .diff-analysis .box.widget.first:before { top: -4px; }
.retire-plan .track .diff-analysis .box.widget:after { top: 10px; }
.retire-plan .track .diff-analysis .box.widget.first:after { top: 0px; }
.retire-plan .track .diff-analysis .box.widget .box-body { padding-top: 0; }
.retire-plan .track .diff-analysis .box.widget .box-body h2 { margin: 0 auto 10px; font-size:26px; }
.retire-plan .track .diff-analysis .box.widget .box-body h2 small { font-size: 14px; }
.retire-plan .track .diff-analysis .box.widget .box-body .label { font-size: 105%; white-space: break-spaces; }
@media (max-width: 991px) {
	.retire-plan .track .diff-analysis .box.widget .box-body h2 { font-size: 22px; }
	.retire-plan .track .diff-analysis .timeline-item .content > [class*="col-"] { padding-left: 5px; padding-right: 5px; }
	.retire-plan .track .box.widget:after { right: -30px; }
}
@media (max-width:767px) {
	.retire-plan .track .diff-analysis .box.widget:after,
	.retire-plan .track .diff-analysis .box.widget.first:after { right:unset; top:unset; }
	.retire-plan .track .diff-analysis .timeline-item .content > [class*="col-"] { padding-left: 0; padding-right: 0; }
}

/** 追蹤 - record **/
.retire-plan .track .record { position: relative; overflow:hidden; background: rgba(var(--primary-color), 0.05); padding: 30px 0; margin: 30px 0; }
.retire-plan .track .record:after { content: '';  position: absolute;  top: 0; width: 0; height: 0;  border-style: solid; border-width: 24px 24px 0 24px; border-color: #ffffff transparent transparent transparent; left: 50%; transform: translateX(-50%) translateY(0%); }
.retire-plan .track .record:before { content: '\f1da'; position: absolute; top: -60px; right: 20px; font-size: 22rem; color: rgba(var(--default-color), 0.15); }
.retire-plan .track .record h2 { margin: 30px auto; text-align:center; color: rgb(var(--primary-color))}
.retire-plan .track .record h2 small { font-size: 16px; }

.retire-plan .track .record .list { padding-left: 15px; padding-right: 15px; margin: 10px auto; }
.retire-plan .track .record .list .track-box-group .track-box { margin: 5px 5px 10px; padding: 8px; border:1px dashed #ddd; border-radius: 6px; }
.retire-plan .track .record .list .track-box-group .track-box:hover { border-style: solid; border-color: rgb(var(--primary-color)); background: rgba(var(--primary-color), 0.1); }

.retire-plan .track .record .history { padding-left: 30px; padding-right: 30px; }
.retire-plan .track .record .history > [class*="col-"]:nth-child(odd) { padding-left: 0; }
.retire-plan .track .record .history > [class*="col-"]:nth-child(even) { padding-right: 0; }
.retire-plan .track .record .history .box .box-header { padding: 5px 15px; }
.retire-plan .track .record .history .box .box-body { padding: 15px; }
.retire-plan .track .record .history .box .box-body .timeline-item.info:hover { background: rgba(var(--info-color), 0.1)}
.retire-plan .track .record .history .box .box-body .timeline-item.blue:hover { background: rgba(var(--primary-color), 0.1)}
.retire-plan .track .record .history .box .box-body .timeline-item .cc-div-table-cell { padding-top:0; }
.retire-plan .track .record .history .box .box-body .timeline-item .cc-div-table-cell:first-child { padding-left: 0 }
.retire-plan .track .record .history .box .box-body .item { padding: 15px 0; border-bottom: 1px dotted #ccc; }
.retire-plan .track .record .history .box .box-body .item:first-child { padding-top: 0 }
.retire-plan .track .record .history .box .box-body .item:last-child { padding-bottom: 0; border-bottom: none }
@media (max-width: 991px) {
	.retire-plan .track .record .history > [class*="col-"] { padding-left: 0; padding-right: 0; }
}
@media (max-width: 767px) {
	.retire-plan .track .record .list, .retire-plan .track .record .history { padding-left: 15px; padding-right: 15px; }
	.retire-plan .track .record .history .box .box-body { padding: 15px 10px; }
	.retire-plan .track .record .history .box .box-body .timeline-item .cc-div-table-cell { padding-left: 5px; padding-right:5px; }
	.retire-plan .track .record .history .box .box-body .timeline-item .cc-div-table-cell:last-child { padding-right: 0; }
}

/** 查詢 **/
.retire-plan .query .custs  .cust { padding: 0; }
.retire-plan .query .custs  .cust > .media { margin: 3px; padding: 8px 5px 5px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; border: 1px dashed #ccc; }
.retire-plan .query .custs  .cust > .media .media-left { position: relative; }
.retire-plan .query .custs  .cust > .media .medal { width: 18px; position: absolute; right: 0; bottom: 0; }
.retire-plan .query .custs  .cust > .media .cust-img { width: 32px } 
.retire-plan .query .custs  .cust > .media .media-body .media-heading { font-size:85%; margin-bottom: 0; }
.retire-plan .query .custs .cust > .media .media-body .media-heading small { font-size:80%; }
.retire-plan .query .custs  .cust > a { cursor:pointer; color:rgb(var(--color)); background:white; display: block; visibility: visible; position: relative;  padding-bottom: 100%;}
.retire-plan .query .custs  .cust > a:hover { background: #ccc; }

.retire-plan .query .list { font-size: 16px; }
.retire-plan .query .list .col-name, .inheritance-tax .query .list .col-title { cursor: pointer }
.retire-plan .query .list .col-name { width: 150px; white-space:nowrap }
.retire-plan .query .list .col-remove { width: 60px; text-align:center } 
@media (max-width:991px) {
	.retire-plan .query .list .col-name { white-space: normal; }
}