@import url(../../css/cckm-box.css);
@import url(../../css/cmn/choice-cust.css);

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

.regular-contact .badge, .regular-contact .label { font-weight: normal; }
.regular-contact label { font-weight: normal; }
.regular-contact small, .modal-dialog small { color:#888; font-size: 14px }
.regular-contact small.required, .modal-dialog small.required { color:red; font-size: 12px }
.regular-contact .box { margin-bottom: 15px; }
.regular-contact .box-left { border-left-width: 3px; }
.regular-contact .rc-dashboard > section:nth-child(even),
.regular-contact .rc-topic > section:nth-child(even),
.regular-contact .rc-analysis > section:nth-child(even) { background: #a8e6f022; }

.regular-contact .box-rc { /*height: 85px;*/ overflow:hidden; }
.regular-contact .box-rc .inner .title { display: inline-block; font-size: 16px; color: #666; padding-right: 25px }
.regular-contact .box-rc .inner .title .name {overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; padding-right: 6px; }
.regular-contact .box-rc .inner .title .badge { font-weight: normal; padding: 3px 7px;  }
.regular-contact .box-rc .inner .content { display: block; font-size: 14px; color: #666; margin-bottom: 0 }
.regular-contact .box-rc .inner .cc-div-table-cell > span { padding: 0 }
.regular-contact .box-rc .inner:before { content:"" ; position: absolute; font-size: 120px; right: -30px; bottom: -50px; }
.regular-contact .box-rc .inner.success:before { content:"\f058"; color: #00a65a33; position: absolute; font-size: 120px; right: -30px; bottom: -50px; }
.regular-contact .box-rc .inner.warning:before { content:"\f06a" ; color: #f39c1233; position: absolute; font-size: 120px; right: -30px; bottom: -50px; }
.regular-contact .box-rc .inner.danger:before  { content:"\f057" ; color: #f5695433; }

.regular-contact .icon-btn-group { z-index: 10; position: absolute; right: 9px; top: 8px; }
.regular-contact .icon-btn-group .more { color:#aaa !important; margin-right: 12px; }
.regular-contact .icon-btn-group .more:hover { color:#333 !important; }
.regular-contact .icon-btn-group .more:hover > .fa:before { position: absolute; width: 30px; height: 30px; background: #3333; right: 0; top: -5px; text-align: center; padding-top: 6px; border-radius: 100%; }

/** dashboard **/
@media (max-width: 767px)  { 
	.regular-contact .rc-dashboard .small-box p { font-size: 15px; }
}
@media (max-width: 424px)  { 
	.regular-contact .rc-dashboard .small-box p { font-size: 13px; }
	.regular-contact .rc-dashboard .small-box p > small { font-size: 10px; }
}
.regular-contact .rc-dashboard { position: relative; display: block; }
.regular-contact .rc-dashboard .widget .count > .item,
.regular-contact .rc-dashboard .widget .detail > .item { padding-left: 5px; padding-right: 5px; }
.regular-contact .rc-dashboard .widget .count > .item:first-child { padding-left: 10px; }
.regular-contact .rc-dashboard .widget .count > .item:last-child { padding-right: 10px; }
.regular-contact .rc-dashboard .widget .count > .item > .small-box,
.regular-contact .rc-dashboard .widget .detail > .item > .box { margin-top: 5px; margin-bottom: 5px; } 
@media (min-width:768px) {
	.regular-contact .rc-dashboard .widget .detail > .item:nth-child(4n-2) { padding-left: 10px; }
	.regular-contact .rc-dashboard .widget .detail > .item:nth-child(4n+1) { padding-right: 10px; } 
}
@media (max-width: 767px) {
	.regular-contact .rc-dashboard .widget .count > .item .small-box .icon { font-size: 60px; bottom: -10px; }
	.regular-contact .rc-dashboard .widget .detail > .item:nth-child(3n-1) { padding-left: 10px; }
 	.regular-contact .rc-dashboard .widget .detail > .item:nth-child(3n+1) { padding-right: 10px; } 
}
.regular-contact .rc-dashboard .widget .name-list .panel { margin-left: 10px; margin-right: 10px; }
.regular-contact .rc-dashboard .widget .name-list .panel .panel-body { margin-bottom: 15px; padding-left: 5px; padding-right: 5px; }
.regular-contact .rc-dashboard .widget .name-list .box-rc { height: auto; margin-bottom: 8px; }
.regular-contact .rc-dashboard .widget .name-list .box-rc .box-body { padding-top:5px; padding-bottom:5px; }
.regular-contact .rc-dashboard .widget .name-list .box-rc .inner  { font-size:12px;  color: #888; }
.regular-contact .rc-dashboard .widget .name-list .box-rc .inner .title { font-size:14px; }

.regular-contact .name-list .accu-count { padding-left: 10px; padding-right: 10px;}
.regular-contact .name-list .accu-count .code { padding:8px; background:#39cccc; color:white; }
.regular-contact .name-list .accu-count .value { padding:8px; background:#39cccc25; font-size: 18px }
.regular-contact .name-list .accu-count  *[class^="col-"] { padding-left: 5px; padding-right: 5px; }

.regular-contact .rc-dashboard .rc-this-week,
.regular-contact .rc-dashboard .rc-before { padding: 10px 0 30px}
.regular-contact .rc-dashboard .icon-btn-group .dropdown-menu  > li > a { padding: 5px 15px; }
.regular-contact .rc-dashboard .icon-btn-group .dropdown-menu  > li > a > .fa { margin-right: 8px; }

/** name list 名單 **/
	.regular-contact .rc-name-list { margin-left: 20px; margin-right: 20px; }
	@media (max-width: 767px) {
		.regular-contact .rc-name-list { margin-left: 5px; margin-right: 5px; }
		.regular-contact .choice-cust .unselected .condition .add-cust { vertical-align: top; }
	}
	

/** ****************** **/
/** **      話題         ** **/
/** ***************** **/
	.regular-contact .rc-topic .mask { z-index: 99}
	.regular-contact .rc-topic .topic-tp-wrap {  overflow: auto; white-space: nowrap; padding: 10px 15px 20px; }
	.regular-contact .rc-topic .topic-tp-wrap .item { position: relative; cursor: pointer; width: 150px; margin: auto 8px; padding: 30px 0;  border-radius: 100%; overflow:hidden; box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.3);  }
	.regular-contact .rc-topic .topic-tp-wrap .item:before { transition: color 0.3s ease 0s, box-shadow 0.3s ease 0s, transform 0.3s ease 0s; }
	.regular-contact .rc-topic .topic-tp-wrap .item .icon { position: absolute;bottom: 0; right: -5px; opacity: 0.1;}
	.regular-contact .rc-topic .topic-tp-wrap .item .icon>img {  width: 72px }
	.regular-contact .rc-topic .topic-tp-wrap .item:hover, 
	.regular-contact .rc-topic .topic-tp-wrap .item.active { padding-left: 12px; box-shadow:4px 4px 10px -2px rgba(20%,20%,40%, 0.8) }
	.regular-contact .rc-topic .topic-tp-wrap .item:hover .inner, 
	.regular-contact .rc-topic .topic-tp-wrap .item.active .inner { text-align: left; }
	.regular-contact .rc-topic .topic-tp-wrap .item .inner h4 { margin-top: 0; margin-bottom: 0;}
	.regular-contact .rc-topic .topic-tp-wrap .item:hover .icon, 
	.regular-contact .rc-topic .topic-tp-wrap .item.active .icon { opacity:0.8  }
	.regular-contact .rc-topic .topic-search-wrap { padding: 40px 0px; }
	.regular-contact .rc-topic .topic-list-wrap { padding: 30px 0px 0px; }
	.regular-contact .rc-topic .topic-list-wrap .topic-list { cursor:pointer; margin: 0; padding: 10px 0; }
	.regular-contact .rc-topic .topic-list-wrap .topic-list .cc-div-table-cell { padding: 10px; }
	.regular-contact .rc-topic .topic-list-wrap .topic-list .cc-div-table-cell:first-child { padding-left: 10px; }
	.regular-contact .rc-topic .topic-list-wrap .topic-list .cc-div-table-cell.img-cell { width: 200px; }
	.regular-contact .rc-topic .topic-list-wrap .topic-list .cc-div-table-cell.img-cell img,
	.regular-contact .rc-topic .topic-list-wrap .topic-list .cc-div-table-cell.img-cell video {  height: 80px; width: 200px; object-position: top; object-fit: cover; }
	.regular-contact .rc-topic .topic-list-wrap .topic-list .cc-div-table-cell .img-bg {  background-size:cover; background-position:center top;  }

	.regular-contact .rc-topic .topic-list-wrap .topic-list .title { font-size:16px; margin: 5px auto 8px;  }
	.regular-contact .rc-topic .topic-list-wrap .topic-list .title,
	.regular-contact .rc-topic .topic-list-wrap .topic-list .brief { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
	.regular-contact .rc-topic .topic-list-wrap .topic-list .info,
	.regular-contact .rc-topic .topic-list-wrap .topic-list .brief { margin: 6px auto; font-size:75%; color:#888; }

	@media (max-width:767px) {
		.regular-contact .rc-topic .topic-list-wrap .topic-list .cc-div-table-cell { padding: 10px 5px; }
		.regular-contact .rc-topic .topic-list-wrap .topic-list .cc-div-table-cell.img-cell { width: 100px; }
		.regular-contact .rc-topic .topic-list-wrap .topic-list .cc-div-table-cell.img-cell img { width: 100px; }
	}
	
/** ****************** **/
/** **      分析         ** **/
/** ***************** **/
	@media (min-width: 1200px) {
		.regular-contact .rc-analysis { padding-left: 80px; padding-right: 80px; }
	}
	@media (max-width: 991px) {
		.regular-contact .rc-analysis { padding-left: 5px; padding-right: 5px; }
	}
	.regular-contact .rc-analysis .percent-wrapp small { font-size: 80% }
	.regular-contact .rc-analysis .box.box-percent { margin-bottom: 20px }
	.regular-contact .rc-analysis .box.box-percent > .box-body { padding-left:0; padding-right: 0; max-height: 240px; height: 240px; }
	.regular-contact .rc-analysis .box.box-percent .percent-wrapp > .header { padding: 0 0 0 10px; border-left: 8px solid #00a65a55; margin-bottom: 15px; }
	.regular-contact .rc-analysis .box-green.box-percent .percent-wrapp > .header { border-left-color: #00a65a55; }
	.regular-contact .rc-analysis .box-primary.box-percent .percent-wrapp > .header { border-left-color: #3c8dbc55; }
	.regular-contact .rc-analysis .box-warning.box-percent .percent-wrapp > .header { border-left-color: #f39c1255; }
	.regular-contact .rc-analysis .box-danger.box-percent .percent-wrapp > .header { border-left-color: #f5695455; }
	.regular-contact .rc-analysis .box-info.box-percent .percent-wrapp > .header { border-left-color: #00c0ef55; }
	.regular-contact .rc-analysis .box.box-percent .percent-wrapp > .header .btn-group { position: absolute; right: 10px; }
	.regular-contact .rc-analysis .box.box-percent .percent-wrapp > .content .title h2 { padding: 0; padding-bottom: 10px; margin: 0; font-size: 42px; text-align: center; }
	.regular-contact .rc-analysis .box.box-percent .percent-wrapp > .content .unit { margin-left:3px; font-size:20px }
	.regular-contact .rc-analysis .box.box-percent .percent-wrapp > .content .detail,
	.regular-contact .rc-analysis .box.box-percent .percent-wrapp > .content .progress { margin-left:10px; margin-right:10px }
	.regular-contact .rc-analysis .box.box-percent .percent-wrapp > .content .detail { padding: 5px 0; }
	.regular-contact .rc-analysis .box.box-percent .percent-wrapp > .content .detail p { padding: 0; padding-bottom: 5px; margin: 0; }
	.regular-contact .rc-analysis .box.box-percent .percent-wrapp > .content .detail .value { font-size: 20px; }
	.regular-contact .rc-analysis .box.box-percent .percent-wrapp > .content .chart-content { margin: 8px; }
	.regular-contact .rc-analysis hr { margin-top:15px; margin-bottom: 30px; }
	
	.regular-contact .rc-analysis .export .inner { position: relative; background: #5f9ea022; padding: 30px 30px 50px; margin-bottom: 20px }
	.regular-contact .rc-analysis .export .inner:before { content: '';  position: absolute;  top: 0; width: 0; height: 0;  border-style: solid; border-width: 24px 24px 0 24px; border-color: #f9f9f9 transparent transparent transparent; left: 50%; transform: translateX(-50%) translateY(0%); }
	.regular-contact .rc-analysis .export h2 { margin: 40px auto; }
	.regular-contact .rc-analysis .export h2 small { font-size: 16px; }
	.regular-contact .rc-analysis .export .cc-div-table-cell { padding: 15px; }
	.regular-contact .rc-analysis .export .cc-div-table.striped .cc-div-table-row:nth-child(odd) { background: #ffffff99; }
	.regular-contact .rc-analysis .export .cc-div-table.striped .cc-div-table-row:nth-child(even) { background: #f9f9f999; }

	.regular-contact .rc-analysis .condition { position: relative; padding: 10px 0; min-height:70px; text-align: center; }
	.regular-contact .rc-analysis .condition > div { padding-top:10px; padding-bottom: 10px; }
	
	.regular-contact .rc-analysis .condition > .action-btn { margin-top: 5px; text-align: left; }
	.regular-contact .rc-analysis .condition > .rc-tp { text-align: right; white-space: nowrap; }
	.regular-contact .rc-analysis .condition > .rc-tp .radio-inline { padding-left: 0; }
	.regular-contact .rc-analysis .condition > .rc-tp .radio-inline > label:first-child { margin-right: 8px; }
	@media(max-width:767px) {
		.regular-contact .rc-analysis .condition { min-height: auto; }
		.regular-contact .rc-analysis .condition > .action-btn { text-align: center; }
		.regular-contact .rc-analysis .condition > .rc-tp { text-align: center; }
	}
	/* 要求把字放大 */
	 .rc-analysis .info-box .info-box-text,
 	.rc-analysis .small-box .cc-font-size-85 { font-size: 18px; }
 	.rc-analysis .small-box .icon { font-size: 80px; }

/** ************************** **/
/** **  分析 - 等級異動分析  ** **/
/** ************************** **/
	/* 要求把字放大 */
 	.rc-analysis .level-change .table tr td:not(:first-child) { font-size: 20px; }
 	.rc-analysis .level-change .table tr td .badge { font-size: 85%; }

/** ********************** **/
/** **  分析 - 週數分析  ** **/
/** ********************** **/
	/* .regular-contact .rc-analysis .weekly .data { font-size: 15px; } */
	.regular-contact .rc-analysis .weekly .data .panel-cadetblue { border-color: rgba(var(--cadetblue-color), 0.5); }
	.regular-contact .rc-analysis .weekly .data .panel-cadetblue>.panel-heading { color: white; background-color: rgb(var(--cadetblue-color)); border-color: rgba(var(--cadetblue-color), 0.5); }
	
/** ********************** **/
/** **  分析 - 已聯紀錄  ** **/
/** ********************** **/
	.regular-contact .rc-analysis .contacted-record .record-data .cc-div-table .cc-div-table-cell.cust-name { width:auto; max-width:120px; }
	@media(max-width:767px) {
		.regular-contact .rc-analysis .contacted-record .record-data .cc-div-table .cc-div-table-cell.cust-name { max-width:none; }
	}
	.regular-contact .rc-week-setting { padding: 50px 15px; background:#f0f0f0; text-align:center}
	
/** ********************** **/
/** **  分享  ** **/
/** ********************** **/
	@media (min-width: 1200px) {
		.regular-contact .rc-share { padding-left: 80px; padding-right: 80px; }
	}
	@media (max-width: 991px) {
		.regular-contact .rc-share { padding-left: 5px; padding-right: 5px; }
	}
	/* panel 右上角的圖示 */
	.regular-contact .rc-share .member-invite { position: relative; overflow: hidden; }
	.regular-contact .rc-share .member-invite .icon { width: 160px; height: 160px; position: absolute; bottom: 20px; right: 20px; opacity: 0.2; }
	.regular-contact .rc-share .member-invite:hover .icon { opacity: 1; }
	.regular-contact .rc-share .member-invite .desc { padding-right: 30px; }	
	@media (max-width:1200px) {
		.regular-contact .rc-share .member-invite { padding-left: 150px; padding-right: 150px; }
	} 
	@media (max-width: 991px) {
		.regular-contact .rc-share .member-invite { padding-left: 30px; padding-right: 30px; }
		.regular-contact .rc-share .member-invite .desc { padding-right: 120px; }
		.regular-contact .rc-share .member-invite:hover .icon { opacity: 0.4; }
	}
	@media (max-width: 767px) {
		.regular-contact .rc-share .member-invite { padding-left: 0px; padding-right: 0px; }
		.regular-contact .rc-share .member-invite .desc { padding-right: 0px; }
		.regular-contact .rc-share .member-invite:hover .icon { opacity: 0.2; }
	}

	
/** ***************** **/
/** **      Modal      ** **/
/** ***************** **/
	.modal-body { padding-left: 15px; padding-right: 15px; }
	.modal-body a { color: #666; }
	.modal-body .alert { padding: 15px; padding-right: 35px; margin-bottom: 0;  }
	.modal-body [class*="col-"] { padding-left: 6px; padding-right: 6px; }
	.modal-body ul li img, 	.modal-body ul li video { border: 1px solid #eee; border-radius:10px; min-height: 200px }
	.modal-body .img-src a > span { font-size: 85%; padding: 8px 0 3px; border-bottom: 1px solid #FFE100 }
	.modal-body .img-src a:hover > span { border-bottom-width: 3px; }
	.modal-body .cc-btn-circle { font-size: 16px !important; }
	.modal-body .section .topic-text { position: relative; }
	.modal-body .section .topic-text .level { position: absolute; top: -10px; left: -10px; width: 35px; height: 35px; border: 3px double #fff; border-radius: 100%; text-align: center; font-size: 14px; color: white; background: #aaa; padding-top: 5px; }
	.modal-body .section .topic-text .content { border: 1px solid #aaa; border-radius: 12px; padding: 8px; padding-left: 25px; font-size: 90%; background: #f5f5f5; width: fit-content; }
	.modal-body hr {margin-top: 15px; margin-bottom: 15px; }
	
	.modal-body .uib-btn > label { margin: 4px 0 4px 6px; }
	.modal-body .uib-btn > label:first-child { margin-left: 0}
	.modal-body .uib-btn > label:last-child { margin-right: 0}
	@media (min-width:768px) {
		.modal-body .cust-level { margin-left: calc(100%/5) }
	}	

/** *********************** **/
/** **      Modal - 話題     ** **/
/** *********************** **/
	.modal-body .rc-topic-edit { border-left: 1px solid #eee; }
	.nav-tabs>li.active>a, 
	.nav-tabs>li.active>a:focus, 
	.nav-tabs>li.active>a:hover { background: #eee; }
	@media (max-width: 991px) {
		.modal-body .rc-topic-edit { border-left: none; border-top:1px solid #eee; margin: 10px 0; padding-top: 15px; }
	}
	
/** *********************** **/
/** **      Modal - 案例     ** **/
/** *********************** **/
	.modal-header.rc-case-header .modal-title small { font-size: 14px } 
	.modal-body.rc-case-body { max-height: 420px; overflow: hidden; overflow-y: auto }
	.modal-body.rc-case-body .img-panel-body { padding:0; margin:5px; }
	.modal-body.rc-case-body .case-panel .panel-title > a > span { display: block; width: 100%; }
	.modal-body.rc-case-body .case-panel .panel-body { font-size: 15px; line-height: 26px; font-weight: 300; letter-spacing: 3px; color: #333; white-space: pre-line; }
	@media (max-width: 991px) {
		.modal-body.rc-case-body { max-height: none; }
	}
	
/** **************************** **/
/** **      Modal - 確認移除     ** **/
/** **************************** **/	
	.modal-body.rc-remove-body:before {
		content: '';
		background: url(https://d1r4509tniam8v.cloudfront.net/img/svg/businessman-blind.svg);
		position: absolute;
	    width: 140px;
	    height: 140px;
	    background-size: cover;
	    top: -50px;
	    right: 10px;
	    opacity: 0.1;
	}

/** ********************************** **/
/** **      Modal - 確認移除或編輯     ** **/
/** ********************************** **/	
	.modal-body.rc-remove-edit-body:before {
		content: '';
		background: url(https://d1r4509tniam8v.cloudfront.net/img/svg/businessman-time.svg);
		position: absolute;
	    width: 140px;
	    height: 140px;
	    background-size: cover;
	    top: -50px;
	    right: 10px;
	    opacity: 0.1;
	}