@charset "UTF-8";
.t-page-appreciation *,
.t-page-appreciation *:before,
.t-page-appreciation *:after {
	box-sizing: border-box;
}
.t-page-appreciation img {
	display: block;
	width: 100%;
}
.appr-btn {
	display: inline-flex;
	align-content: center;
	justify-content: center;
	text-align: center;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.6;
	color: #fff;
	padding: .5rem 1.5rem;
	background-color: #14A9B2;
	border: 2px solid #14A9B2;
	border-radius: .5rem;
}
.appr-btn.disabled,
.appr-btn.disable,
.appr-btn[disabled],
.appr-btn:disabled {
	background-color: #ddd !important;
	border-color: #ddd !important;
	pointer-events: none;
}
.appr-btn.btn-big {
	font-size: 2rem;
	padding: 1rem 2rem;
	min-width: 18rem;
}
.appr-btn.btn-blue {
	/*background-color: #0475FE;
	border-color: #0475FE;*/
	background-color:#16A9B2;
	border-color:#16A9B2;
}
.t-page-appreciation,
.page_contents.t-page-appreciation {
	box-sizing: border-box;
	padding: 0;
}
.t-page-appreciation > .page-inner {
	font-size: 1.6rem;
	line-height: 1.6;
	color: #555;
	padding: 4rem 2rem 8rem;
	max-width: 1140px;
	margin: 0 auto;
}
.t-page-appreciation .page-title {
	font-size: 2.6rem;
	font-weight: bold;
}
.t-page-appreciation .page-desc {
	
}
.t-page-appreciation .reply-template-area {

}
.t-page-appreciation .reply-template-area > .area-inner {
	padding: 3rem;
	border: 1px solid #ccc;
	border-radius: 1rem;
}
.t-page-appreciation .reply-template-area .area-title {

}
.t-page-appreciation .reply-template-area .area-desc {
	
}
.t-page-appreciation .template-edit {
	
}
.t-page-appreciation .template-edit > .template-edit-inner {
	width: 375px;
	margin: 0 auto;
}
.t-page-appreciation .template-edit .phone-border {
	position: relative;
	padding: 3rem 2rem 22rem;
	border: 1px solid #ccc;
	border-radius: 1rem;
}
.t-page-appreciation .template-edit .template-head {
	
}
.t-page-appreciation .template-edit .template-head .nc-logo {
	width: 16.2rem;
	margin: 0 auto;
}
.t-page-appreciation .template-edit .template-detail {
	position: relative;
	margin-top: 7.5rem;
}
.t-page-appreciation .template-edit .template-detail .teacher-avatar {
	position: absolute;
	display: block;
	width: 8rem;
	height: 8rem;
	border-radius: 50%;
	overflow: hidden;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0 0 .5rem rgba(0,0,0,.15);
}
.t-page-appreciation .template-edit .template-input-wrap > .input-default {
	display: none;
}
.t-page-appreciation .template-edit .template-input-wrap > .input-textarea {
	display: block;
}
.t-page-appreciation .template-edit .template-input-wrap.show-default > .input-default {
	display: block;
}
.t-page-appreciation .template-edit .template-input-wrap.show-default > .input-textarea {
	display: none;
}
.t-page-appreciation .template-edit .input-default {
	text-align: center;
	color: #ccc;
	border: 1px solid #ccc;
	border-radius: 1rem;
	padding: 5rem 2rem 7rem;
	height: 421.13px;
	overflow: auto;
}
.t-page-appreciation .template-edit .input-default .default-title {
	font-size: 2.2rem;
	font-weight: bold;
	margin-bottom: 2rem;
}
.t-page-appreciation .template-edit .input-textarea {

}
@import url('https://fonts.nativecamps.com/css2?family=Kalam:wght@300;400;700&display=swap');
.t-page-appreciation .template-edit .input-textarea > textarea {
	display: block;
	font-family: 'Kalam', cursive;
	font-weight: 700;
	font-size: 2.2rem;
	color: #555;
	line-height: 1.7;
	text-align: center;
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 1rem;
	padding: 5rem 2rem 7rem;
}
.t-page-appreciation .template-edit .thank-animation {
	display: block;
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	background-image: url(../images/appreciation/teddy-thank-you-ios.gif);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: right bottom;
}
.t-page-appreciation .template-edit .thank-animation:after {
	content: '';
	display: block;
	padding-top: 73.31%;
}
.t-page-appreciation .template-edit .template-save {

}
.appr-template-save-success {
	position: fixed;
	width: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #0475FE;
	text-align: center;
	color: #fff;
	font-size: 1.6rem;
	font-weight: bold;
	padding: 2rem 4rem;
	max-width: 50rem;
	border-radius: 1rem;
}
.t-page-appreciation .appr-list-filter {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	margin: -1rem;
}
.t-page-appreciation .appr-list-filter > .filter-item {
	padding: 1rem;
}
.t-page-appreciation .appr-list-wrap {
	padding: 3rem;
	border-radius: 1rem;
	background: #fff;
}
.t-page-appreciation .appr-list {

}
.t-page-appreciation .appr-list > li {
	
}
.t-page-appreciation .appr-list > li + li {
	margin-top: 3rem;
}
.t-page-appreciation .appr-msg-box > .box-inner {
	position: relative;
	/* padding: 3rem 5rem 3rem 7rem; */
}
.t-page-appreciation .appr-msg-box .area-user-info {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin: -1rem;
}
.t-page-appreciation .appr-msg-box .area-user-info > * {
	padding: 1rem;
}
.t-page-appreciation .appr-msg-box .area-user-info .item-avatar {

}
.t-page-appreciation .appr-msg-box .area-user-info .user-img {
	width: 4.8rem;
	height: 4.8rem;
	border-radius: 50%;
	overflow: hidden;
}
.t-page-appreciation .appr-msg-box .area-user-info .user-img img{
	display: block;
	width: 100%;
	height: 100%;
}
.t-page-appreciation .appr-msg-box .area-user-info .item-name .t--1 {
	font-size: 1.6rem;
	color: #555;
}
.t-page-appreciation .appr-msg-box .area-user-info .item-name .t--2 {
	font-size: 1.4rem;
	color: #999;
}
.t-page-appreciation .appr-msg-box .area-lesson-info {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin: 1rem -1rem -1rem;
}
.t-page-appreciation .appr-msg-box .area-lesson-info > * {
	padding: 1rem;
}
.t-page-appreciation .appr-msg-box .area-lesson-info > .sub-item > label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 1.4rem;
	line-height: 1;
	font-weight: bold;
	color: #fff;
	background-color: #999;
	padding: .5rem 1rem;
	border-radius: .3rem;
}
.t-page-appreciation .appr-msg-box .area-lesson-info > .sub-item > b {
	font-size: 1.4rem;
	font-weight: normal;
	/*color: #555;*/
	color:#2980b9;
}
.t-page-appreciation .appr-msg-box .area-expire-date {
	text-align: right;
	font-size: 1.4rem;
	margin-top: 1rem;
}
.t-page-appreciation .appr-msg-box[data-read="false"] .area-expire-date {
	color: #f00;
}
.t-page-appreciation .appr-msg-box .area-see-more {
	position: absolute;
	top: 50%;
	right: 3rem;
	transform: translateY(-50%);
}
.t-page-appreciation .appr-msg-box .icon-fav {
	display: none;
	position: absolute;
	width: 4rem;
	height: 5.3rem;
	top: 0;
	left: 3.5rem;
	transform: translate(-50%, -2px);
	background-image: url(../images/appreciation/icon-fav-yellow.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.t-page-appreciation .appr-msg-box[data-fav="true"] .icon-fav {
	display: block;
}
.t-page-appreciation .appr-msg-box[data-fav="false"] .icon-fav {
	display: block;
	background-image: url(../images/appreciation/icon-fav-grey.svg);
}
.t-page-appreciation .appr-msg-box .icon-status {
	display: block;
	position: absolute;
	top: 50%;
	left: 3.5rem;
	width: 3rem;
	height: 3rem;
	transform: translate(-50%, -50%);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.t-page-appreciation .appr-msg-box[data-read="true"] .icon-status {
	background-image: url(../images/appreciation/icon-read-grey.svg);
}
.t-page-appreciation .appr-msg-box[data-read="false"] .icon-status {
	background-image: url(../images/appreciation/icon-read-blue.svg);
}
/* detail modal */
.modal_window.dialog.dialog_appreciation_detail {
	box-sizing: border-box;
	padding: 0;
	width: calc(100% - 4rem);
	max-width: 960px;
}
.modal_window.dialog.dialog_appreciation_detail {
	font-size: 1.6rem;
	line-height: 1.6;
}
.modal_window.dialog.dialog_appreciation_detail p {
	font-size: inherit;
	line-height: inherit;
}
.dialog_appreciation_detail .appr-msg-box {
	box-sizing: border-box;
	background-color: #fff;
	border-radius: 1rem;
	width: 100%;
	min-width: 400px;
	max-width: 960px;
	max-height: calc(100vh - 4rem);
	overflow: auto;
}
.dialog_appreciation_detail .appr-msg-box > .box-inner {
	position: relative;
	padding: 2rem;
}
.dialog_appreciation_detail .appr-msg-box .area-user-info {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin: -1rem;
}
.dialog_appreciation_detail .appr-msg-box .area-user-info > * {
	padding: 1rem;
}
.dialog_appreciation_detail .appr-msg-box .area-user-info .item-avatar {

}
.dialog_appreciation_detail .appr-msg-box .area-user-info .user-img {
	width: 4.8rem;
	height: 4.8rem;
	border-radius: 50%;
	overflow: hidden;
}
.dialog_appreciation_detail .appr-msg-box .area-user-info .user-img > img {
	display: block;
	width: 100%;
	height: 100%;
}
.dialog_appreciation_detail .appr-msg-box .area-user-info .item-name .t--1 {
	font-size: 1.6rem;
	color: #555;
}
.dialog_appreciation_detail .appr-msg-box .area-user-info .item-name .t--2 {
	font-size: 1.4rem;
	color: #999;
}
.dialog_appreciation_detail .appr-msg-box .area-user-info .item-value {
	display: flex;
	align-items: center;
	justify-content: center;
}
.dialog_appreciation_detail .appr-msg-box .area-user-info .item-value > .value-img {
	width: 4.8rem;
	height: 4.8rem;
	border-radius: 50%;
	overflow: hidden;
}
.dialog_appreciation_detail .appr-msg-box .area-user-info .item-value > .value-img > img {
	display: block;
	width: 100%;
}
.dialog_appreciation_detail .appr-msg-box .area-user-info .item-value > .value-text {
	font-size: 1.4rem;
	font-weight: bold;
	padding-left: 2rem;
}
.dialog_appreciation_detail .appr-msg-box .area-lesson-info {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin: 1rem -1rem -1rem;
}
.dialog_appreciation_detail .appr-msg-box .area-lesson-info > * {
	padding: 1rem;
}
.dialog_appreciation_detail .appr-msg-box .area-lesson-info > .sub-item > label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-size: 1.4rem;
	line-height: 1;
	font-weight: bold;
	color: #fff;
	background-color: #999;
	padding: .5rem 1rem;
	border-radius: .3rem;
}
.dialog_appreciation_detail .appr-msg-box .area-lesson-info > .sub-item > b {
	font-size: 1.4rem;
	font-weight: normal;
	/*color: #555;*/
	color:#2980b9;
}
.dialog_appreciation_detail .appr-msg-box .area-message {
	line-height: 2;
	margin-top: 2rem;
}
.dialog_appreciation_detail .appr-msg-box .area-message > p {
	font-size: inherit;
	line-height: inherit;
}
.dialog_appreciation_detail .appr-msg-box .area-btn {
	text-align: right;
	margin-top: 1rem;
}
.dialog_appreciation_detail .appr-msg-box .area-expire-date {
	text-align: right;
	font-size: 1.4rem;
	margin-top: 2rem;
}
.dialog_appreciation_detail .appr-msg-box[data-read="false"] .area-expire-date {
	color: #f00;
}
.dialog_appreciation_detail .appr-msg-box .area-fav {
	position: absolute;
	bottom: 2rem;
	left: 2rem;
	font-size: 0;
}
.dialog_appreciation_detail .appr-msg-box .fav-btn {
	display: inline-block;
	width: 4rem;
	height: 4rem;
	border-radius: .5rem;
	overflow: hidden;
	font-size: 0;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
}
.dialog_appreciation_detail .appr-msg-box .fav-btn[data-fav="true"] {
	background-image: url(../images/appreciation/btn-fav-yellow.svg);
}
.dialog_appreciation_detail .appr-msg-box .fav-btn[data-fav="false"] {
	background-image: url(../images/appreciation/btn-fav-grey.svg);
}

/* NJ-28041 */
.t-page-appreciation .appr-list-wrap .data-header ul {
    display: flex;
    justify-content: space-between;
}

.t-page-appreciation .appr-msg-box > .box-inner ul {
    display: flex;
    justify-content: space-between;
	align-items: center;
}	
.t-page-appreciation .appr-list-wrap .data-header ul li{
	color: #999999;
}

.t-page-appreciation .appr-list-wrap .data-header ul li, .t-page-appreciation .appr-msg-box > .box-inner ul li{
    width: 300px;
	padding-right: 23px;
}

.t-page-appreciation .appr-list-wrap .data-header ul li:first-child, .t-page-appreciation .appr-msg-box > .box-inner ul li:first-child {
	width: 450px;
}

.t-page-appreciation .appr-msg-box > .box-inner ul li:nth-child(2){
    width: 317px;
}


.t-page-appreciation .appr-list-wrap .data-header ul li:nth-child(4), .t-page-appreciation .appr-msg-box > .box-inner ul li:nth-child(4) {
    width: 400px;
}

.t-page-appreciation .appr-list-wrap .data-header ul li:nth-child(5), .t-page-appreciation .appr-msg-box > .box-inner ul li:nth-child(5) {
    width: 410px;
}

.t-page-appreciation .appr-list-wrap .data-header ul li:last-child, .t-page-appreciation .appr-msg-box > .box-inner ul li:last-child {
    width: 261px;
}


.t-page-appreciation .appr-msg-box > .box-inner ul li .area-message .t_truncate{
	white-space: wrap;
	color: #00ACEE;
}

.t-page-appreciation .appr-msg-box > .box-inner ul li .con-status span{
    border-radius: 20px;
    padding: 5px 25px;
	width: 101px;
	display: block;
}
.t-page-appreciation .appr-msg-box > .box-inner ul li .con-status .unread{
    background: #E4FAFC;
	color: #2DA9B2;
}
.t-page-appreciation .appr-msg-box > .box-inner ul li .con-status .favorite{
    background: #FFF3E5;
	color: #F1890E;
}
.t-page-appreciation .appr-msg-box > .box-inner ul li .con-status .read{
    background: #EFEFEF;
	color: #898989;
}

.applist-results {
    position: relative;
    top: 20px;
}

.t-page-appreciation .appr-list-wrap .data-header {
	position: relative;
}
.t-page-appreciation .appr-list-wrap .data-header:after {
	content: '';
	position: absolute;
	top: 38px;
	width: 1040px;
	height: 1px;
	background: #DDDDDD;
	opacity: 1;
  }
/* NJ-28041 End*/