@import url("https://d1r4509tniam8v.cloudfront.net/lib/angular-slick-carousel/css/slick.css");
@import url("https://d1r4509tniam8v.cloudfront.net/lib/angular-slick-carousel/css/slick-theme.css");
@import url("https://d1r4509tniam8v.cloudfront.net/lib/angular-calendar/css/angular-bootstrap-calendar.min.css");

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


.remind { padding: 0px 10px 40px; }
.remind:before { 
	height: 600px; width: 100%; position: absolute; content: ""; top: 20px; left: 0; z-index: -1; opacity: 0.1;
    background-image:url(https://d1r4509tniam8v.cloudfront.net/img/user/guguRemindBg.png); background-size: 200%; background-position: right top; background-repeat: no-repeat;
}
@media (min-width: 992px) { .remind:before { background-size: 100%; } } 

/**********************************/
/*        提醒通知設定                      */
/**********************************/
.remind .dayRemiSetting { display: table; padding: 15px 20px; border-radius:0; border:none; border-top:4px dotted #f56954; border-bottom: 4px dotted #f56954; background: #f5695411; }
.remind .dayRemiSetting .desc { display: table-cell; vertical-align: middle; width: 100%; }
.remind .dayRemiSetting .btn { display: table-cell; vertical-align: middle; }

.remind .day-remi-block { display:flex; align-items:center; justify-content:center; padding: 10px; margin-bottom: 3rem; border-radius:0; border:none; border-top:4px dotted rgb(var(--danger-color)); border-bottom: 4px dotted rgb(var(--danger-color)); background: rgba(var(--danger-color), 0.05); } 
.remind .day-remi-block.success { border-top:4px dotted rgb(var(--success-color)); border-bottom: 4px dotted rgb(var(--success-color)); background: rgba(var(--success-color), 0.05);}
.remind .day-remi-block.primary { border-top:4px dotted rgb(var(--primary-color)); border-bottom: 4px dotted rgb(var(--primary-color)); background: rgba(var(--primary-color), 0.05);}
.remind .day-remi-block.warning { border-top:4px dotted rgb(var(--warning-color)); border-bottom: 4px dotted rgb(var(--warning-color)); background: rgba(var(--warning-color), 0.05);}
.remind .day-remi-block.info { border-top:4px dotted rgb(var(--info-color)); border-bottom: 4px dotted rgb(var(--info-color)); background: rgba(var(--info-color), 0.05);}
.remind .day-remi-block.danger {}

.remind .day-remi-block .img-thumbnail { width: 100%; background-color: transparent; border-radius: 10px; padding: 8px; }
.remind .day-remi-block .cc-div-table-cell { padding-left: 8px; padding-right: 8px; }
.remind .day-remi-block .cc-div-table-cell:first-child {padding-left: 0;}
.remind .day-remi-block .cc-div-table-cell:last-child {padding-right: 0;}
.remind .day-remi-block .cc-div-table-cell.div-img { width: 80px; }
@media (max-width: 767px) {
	.remind .day-remi-block { display: block; }
	.remind .day-remi-block .cc-div-table-row  { display: block; }
	.remind .day-remi-block .cc-div-table-cell { padding-bottom: 8px; }
	.remind .day-remi-block .cc-div-table-cell.div-btn { display: grid; }
	.remind .day-remi-block .cc-div-table-cell.div-img { width: 70px; }
	
}

.remind .remind-select { font-size: 2em; font-weight:500; line-height:2; margin-bottom: 10px; }
.remind .remind-widget [class*=col-md], .remind .remind-event [class*=col-md] { padding-left: 8px; padding-right:8px }

/**  widget **/
.remind .remind-widget { padding: 15px 0;  margin: 10px 0}
/* .remind .remind-widget .col-md-3 { padding-left: 8px; padding-right:8px; } */
.remind .remind-widget .widget { padding: 0 15px; display: flex!important; align-items: center!important; }
.remind .remind-widget .small-box .icon { color: rgba(0,0,0,0.1); bottom: 0px; font-size:60px; }
.remind .remind-widget .small-box:hover { box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.3); }
.remind .remind-widget .small-box:hover .icon { animation-duration: .2s; }
@keyframes tansformAnimation { from { font-size: 60px; } to { font-size: 80px; } }
@media screen and (max-width: 480px) { .small-box .icon { display: inline; } }
@media screen and (max-width: 424px) { .remind .remind-widget .col-md-3 { padding-left: 5px; padding-right:5px; } }
.remind .remind-widget .slick-active:focus { outline:none; }
.remind .remind-widget .slick-active:focus .small-box { border: 2px dotted #eee;  }

.remind .remind-event .box { padding: 10px 15px; margin: 0 5px; }
.remind .remind-event .box .box-header .box-tools { padding-right: 0; }
.remind .remind-event .box .box-header .box-tools .btn-arrow { font-size: 1.4em; padding: 0 8px; line-height: 0}
.remind .remind-event .box .box-header .box-tools .btn-filter { padding: 3px 8px;}
.remind .remind-event .box .box-body { padding-left:0; padding-right:0; }
.remind .remind-event .box .box-body .content { height: 440px; overflow: hidden; overflow-y: auto; margin-right: -10px; }
@media (max-width:991px) { .remind .remind-event .box .box-body .content { height: 340px; margin-right: 0;} }
@media (max-width:767px) { .remind .remind-event .box .box-body .content { height: auto; margin-right: 0;} }
.remind .remind-event .timeline-xs { font-size: .8em; margin-left:5px }
.remind .remind-event .emphasize { font-weight: bold; padding: 0 2px; font-size: 1.2em; }
.remind .remind-event .dropdown-menu{ min-width: 140px; }
.remind .remind-event > [class*=col-sm] { margin-bottom: 20px; }

.remind .remind-event .sche-active { border-radius: 10px; font-size:85%; padding: 3px 5px; margin:auto 5px; background:rgb(var(--gray-888-color)) }
.remind .remind-event .sche-active.reach { background:rgb(var(--success-color)) }
.remind .remind-event .timeline-xs .sche-active { background:rgba(var(--default-color), 0.3); color: rgb(var(--color)); }
.remind .remind-event .timeline-xs .sche-active.reach { background:rgba(var(--success-color), 0.3); color: rgb(var(--color)); }

/**********************************/
/* 日期套件                                     */
/**********************************/
.remind mwl-calendar .cal-month-day { position: relative; height: auto; text-align:center; min-height: 80px; /* 一定要指定高度, 底色才能顯示出來*/ }
/*把高度縮短點*/
.remind mwl-calendar .cal-month-box [class*=cal-cell], 
.remind mwl-calendar .cal-year-box [class*=span] { min-height: 80px; }
.remind mwl-calendar #cal-week-box { display: none; }
.remind mwl-calendar .cal-day-tick { font-size: 14px; }
.remind mwl-calendar .events-list { right: 0; left: initial;}
/** 週未背景色 **/
.remind mwl-calendar .cal-weekend-cell {  background-color: #f3f9e8; }
.remind mwl-calendar .cal-slide-content { padding : 15px; }
.remind mwl-calendar span[data-cal-date] { text-align: center; background: transparent; padding: 5px 8px; margin:0; border-radius: 50%; }
/** 今天日期 **/
mwl-calendar .cal-day-today { background: transparent; }
.remind mwl-calendar .cal-day-today span[data-cal-date] { font-size: 1em; margin-right:5px; margin-top:5px; width:35px; height:35px; color: #fff !important; background: red; opacity: 1; }
.remind mwl-calendar .cal-day-weekend span[data-cal-date] { color: #648420; }
.remind mwl-calendar .cal-month-day .cal-events-num { margin-top: 10px; background: #648420; }
mwl-calendar .badge-important { color: #fff !important }

.remind mwl-calendar .cal-slide-content a.event-item { font-size: 0.8em; }
.remind mwl-calendar .cal-slide-content a:hover.event-item { text-decoration: underline; }
.remind mwl-calendar .cal-event-list .event.pull-left { margin-top: 8px; }

@media(max-width:991px) { 	/** 行動裝置時，將其關閉 **/
	.remind mwl-calendar .events-list { display:none; }
	.remind mwl-calendar .cal-month-day .cal-events-num { position: absolute; bottom:0; right:0; left:0; margin: 5px; }
	.remind mwl-calendar span[data-cal-date] { float: none !important; line-height: 2.5; font-size:1em; padding:8px; margin:0  }
	.remind mwl-calendar .cal-day-today span[data-cal-date]  { font-size:1em; margin: 0; }
	.remind mwl-calendar .cal-month-day,
	.remind mwl-calendar .cal-month-box [class*=cal-cell], 
	.remind mwl-calendar .cal-year-box [class*=span] { min-height: 60px; }
}