/*------------------------------------------*/
/* schedule
/*------------------------------------------*/
.page-contents--schedule{
	padding: 1.5rem 4rem 3.5rem 4rem;
}
.page-contents--schedule .page-ttl{
	font-size: 3rem;
	font-weight: 600;
	color: #404040;
}
.page-contents--schedule .contents-desc{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.sec-schedule .page-links{
	padding-top: 20px;
	font-weight: bold;
}
.page-linkFixed {
	background-color: #F5F6F8;
	position: sticky;
	top: 0px;
	z-index: 3;
}
.sec-schedule .page-links ul{
	display: flex;
    justify-content: space-between;
    align-items: center;
}
.page-links div{
	margin-bottom: 20px;
}
.sec-schedule .page-links li.calendar-month{
	text-align: center;
}
.sec-schedule .page-links li.center{
	text-align: center;
}
.sec-schedule .page-links li.prev{
	text-align: left;
}
.sec-schedule .page-links li.next{
	text-align: right;
}
.sec-schedule .page-links .cur-month{
	font-weight: bold;
}
.sec-schedule .page-links ul > li{
	display: flex;
	align-items: center;
}
.sec-schedule .page-links li .box-arrow{
	display: block;
	border: 1px solid #E4E6E9;
	border-radius: 4px;
	width: 35px;
	height: 35px;
	transition: .2s all linear;
	background: url(../images/icon/box-arrow-left.svg) #FFF no-repeat center;
}
.sec-schedule .page-links li .box-arrow:hover{
	opacity: .6;
}
.sec-schedule .page-links li.prev .box-arrow{
	margin-right: 14px;
}
.sec-schedule .page-links li.next .box-arrow{
	transform: scale(-1, 1);
	margin-left: 14px;
}
/*----------------------------------------------*/
/* schedule table detail
/*----------------------------------------------*/
.schedule-table-2{
	max-width: 100%;
	width: 100%;
	border: #ccc solid 1px;
	table-layout: fixed;
	background: #fff;
}
.schedule-table-2 tr{
	height: 58px;
}
.schedule-table-2:not(.sec-peak-time-desc) tr:first-child td{
	color: #555;
	height: 76px;
	vertical-align: middle;
}
.schedule-table-2 tr:first-child td.date{
	/* padding: 36px 0; */
}
.schedule-table-2 tr:first-child td.date.on{
	color: #01AEB5;
}
.schedule-table-2 tr:first-child td.date.weekend{
	color: #E50000;
}
.schedule-table-2 tr:first-child td.date .day-of-week{
	display: block;
	margin-bottom: 5px;
	font-size: 1.4rem;
}
.schedule-table-2 tr:first-child td.date .month{
	font-weight: bold;
}
.schedule-table-2 tr:first-child td.date .day{
	font-weight: 600;
	font-size: 32px;
	font-size: 3.2rem;
	line-height: 1;
}
.schedule-table-2 td.times{
	font-size: 18px;
	font-size: 1.8rem;
	line-height: 1.5;
	/* padding: 53px 0; */
}
.schedule-table-2 td.past{
	/* background: #ececec; */
}
.schedule-table-2 td{
	padding: 5px;
	border: #E4E6E9 solid 1px;
	text-align: center;
	overflow: hidden;
	vertical-align: middle;
	height: 124px;
	width: 170px;
}
.schedule-table-2 td.times-ph{
	width: 12%; /* fix for safari */
	color: #555;
	font-size: 16px;
	font-size: 1.6rem;
}
.schedule-table-2 td .pht-label{
	color: #555;
}
.schedule-table-2 td:first-child span{
	color: #555;
}
.schedule-table-2 .user .thumb{
	margin-bottom: 5px;
}
.schedule-table-2 .user .thumb img{
	display: block;
	width: 68px;
	margin:  0 auto;
	border: #ccc 1px solid;
}
.schedule-table-2 .user .name{
	font-size: 11px;
	font-size: 1.1rem;
	font-weight: normal;
	color: #999;
}

/*----------------------------------------------*/
/* schedule table 2 reserve status buttons
/*----------------------------------------------*/
.schedule-table-2 .status{
	display: block;
	width: 76px;
	height: 28px;
	line-height: 28px;
	margin: 0 auto;
	font-size: 14px;
	font-size: 1.4rem;
	font-weight: bold;
	border-radius: 4px;
	color: #fff;
	-webkit-transition: all 0.2s linear;
	transition: all 0.2s linear;
	cursor: default;
}
.schedule-table-2 .status.reserved{
	background: #ed1543;
}
.schedule-table-2 .status.accept{
	background: #16a9b2;
	cursor: pointer;
	box-shadow: 1px 1px 0 0 rgba(0,0,0,0.2);
}
.schedule-table-2 .status.reserved.disable,
.schedule-table-2 .status.accept.disable{
	width: 78px;
	height: 24px;
	line-height: 24px;
	background: #f5f5f5;
	color: #ccc;
	border: 2px solid #ccc;
	box-shadow: none;
	cursor: default;
}

/*----------------------------------------------*/
/* schedule table detail
/*----------------------------------------------*/
.schedule-table-3{
	width: 100%;
	max-height: 800px;
	border: #ccc solid 1px;
	table-layout: fixed;
}
.schedule-table-3 th,
.schedule-table-3 td{
	border: #ccc solid 1px;
	padding: 0 10px;
	text-align: center;
}
.schedule-table-3 th{
	padding: 10px;
}
.schedule-table-3 tr:first-child th{
	background: #f5f5f5;
	color: #999;
}
.schedule-table-3 td{
	padding: 5px;
}
.schedule-table-3 select{
	width: 100%;
	padding: 2px 5px;
}
.schedule-table-3 select:disabled{
	opacity: 0.5;
	border-color: #eee;
	background: #eee;
}
.schedule-table-3 .col-date{
	width: 10%;
}
.schedule-table-3 .status-schedule{
	display: inline-block;
	min-width: 56px;
	height: 26px;
	line-height: 28px;
	font-weight: bold;
	font-size: 14px;
	font-size: 1.4rem;
	padding: 0 10px;
	border: dotted 2px #aaa;
	color: #555;
	border-radius: 38px;
	text-align: center;
}
.schedule-table-3 .status-schedule--approved{
	border-color: #37AE45;
	border-style: solid;
	color: #37AE45;
}

/*----------------------------------------------*/
/* note list
/*----------------------------------------------*/
.note-list{
	padding: 15px 20px;
	background: #f5f5f5;
	border-radius: 8px;
}
.note-list .note-list-ttl{
	font-weight: bold;
	font-size: 14px;
	font-size: 1.4rem;
	margin-bottom: 5px;
}
.note-list li{
	margin-top: 2px;
	line-height: 1.5;
	padding-left: 1.5em;
	text-indent: -1.5em;
	font-size: 14px;
	font-size: 1.4rem;
}
.note-list li:first-child{
	margin-top: 0;
}

/*----------------------------------------------*/
/* schedule complete
/*----------------------------------------------*/
.sec-schedule-complete > p{
	line-height: 1.5;
}

/* maintenance */
.schedule-table-2 td.maint {
    background: #EEF0F5;
	padding: 0;
}
.sched.sched_maint{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.sched.sched_maint .text{
	text-align: center;
	font-size: 14px;
	line-height: 1.5;
}
.sched.sched_maint:before{
	content: " ";
	background: url('../images/icon/settings.svg') no-repeat;
	background-size: 100%;
	width: 2.2rem;
	height: 2.2rem;
	margin-bottom: 6px;
}

/*----------------------------------------------*/
/* congestion display
/*----------------------------------------------*/
.sec-schedule .dot{
	height: 6px;
	width: 6px;
	border-radius: 50%;
	display: inline-flex;
	margin: 1.5px;
	padding: 0;
}
.sec-schedule .c-on-peak{
	color: #DC143C;
}
.sec-schedule .c-mid-peak{
	color: #00008B;
}
.sec-schedule .c-off-peak{
	color: #87CEFA;
}
.sec-schedule .dot.red{
	background-color: #DC143C;
}
.sec-schedule .dot.darkblue{
	background-color: #00008B;
}
.sec-schedule .dot.skyblue{
	background-color: #87CEFA;
}
.sec-peak-time-desc .peak-time-desc{
	line-height: 1.5;
	margin: 0rem 0 2rem;
	font-weight: bold;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 1.25;
}
.sec-peak-time-desc .peak-time-desc td{
    padding: 10px 20px;
    border: #ccc solid 1px;
}
.sec-peak-time-desc .peak-time-desc .tbl-ttl{
    width: 16rem;
	text-align: center;
	background: #f5f5f5;
}
.sec-peak-time-desc .peak-time-desc .tbl-details ul{
	line-height: 2.2;
	font-weight: normal;
	font-size: 0;
}
.sec-peak-time-desc .peak-time-desc .tbl-details ul li .status{
	display: inline-block;
	min-width: 70px;
	font-size: 1.2rem;
}
.sec-peak-time-desc .peak-time-desc .slash:after{
	content: " / ";
	padding: 3px 6px 3px 2px;
	font-size: 1.2rem;
}
.sec-peak-time-desc .peak-time-desc .dot.red{
	background-color: #DC143C;
}
.sec-peak-time-desc .peak-time-desc .dot.darkblue{
	background-color: #00008B;
}
.sec-peak-time-desc .peak-time-desc .dot.skyblue{
	background-color: #87CEFA;
}
.sec-schedule .schedule-table-wrap .btn-sched{
	color: #404040;
	box-shadow: 0px 0px 6px #DDEAF7;
	border-radius: 5px;
	background: #DDEAF7;
	margin: 5px auto;
	padding: 5px;
	font-size: 14px;
	font-size: 1.4rem;
	max-width: 96px;
	min-width: 70px;
	width: 100%;
	height: 30px;
	font-weight: 600;
	border: none;
	cursor: pointer;
	position: relative;
	z-index: 2; 
}
.sec-schedule .schedule-table-wrap .btn-sched[value="Off"]{
	color: #404040;
	background: #DDEAF7 !important;
	box-shadow: 0px 0px 6px #DDEAF7;
}
.sec-schedule .schedule-table-wrap .btn-sched[value="Meal Break"],
.sec-schedule .schedule-table-wrap .btn-sched[value=Live],
.sec-schedule .schedule-table-wrap .btn-sched[value=Available]{
	color: #FFF;
	background: #3582CF !important;;
	box-shadow: 0px 0px 8px #00000029;
}
.sec-schedule .schedule-table-wrap .btn-sched[data-campaign-value="Live Available"] {
	color: #FFF;
    background: #EE47C5 !important;
    box-shadow: 0px 0px 8px #00000029;
}

.sec-schedule .schedule-table-wrap .btn-sched[data-value="Meal Break"].btn-sched[data-campaign-value="Live Available"] {
	color: #FFF;
    background: #3582CF !important;
    box-shadow: 0px 0px 8px #00000029;
}

.sec-schedule .schedule-table-wrap .btn-sched.btn-available{
	color: #FFF;
	background: #3582CF;
	box-shadow: 0px 0px 8px #00000029;
}
.sec-schedule .schedule-table-wrap .btn-sched.btn-closed{
	color: #CBCBCB;
	background: #F8F8F8;
	box-shadow: 0px 0px 8px #00000029;
	cursor: default;
	pointer-events: none;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sec-schedule .schedule-table-wrap .reserved-wrap {
	position: relative;
	padding: 12px 0 12px;
}
.sec-schedule .schedule-table-wrap .reserved-wrap .student-wrap {
	display: flex;
    align-items: center;
	justify-content: center;
}
.sec-schedule .schedule-table-wrap .reserved-wrap .btn_wrap {
	width: 100%;
}
.sec-schedule .schedule-table-wrap .reserved-wrap .btn_wrap > ul {
    display: flex;
    justify-content: space-between;
}
.sec-schedule .schedule-table-wrap .reserved-wrap .btn_half .btn_style {
    min-width: 75px;
    height: 30px;
    line-height: 30px;
    font-size: 12px;
}
.sec-schedule .schedule-table-wrap .reserved-wrap .btn-cancel{
	color: #7E7E7E;
	font-size: 1rem;
	display: flex;
	align-items: center;
	position: absolute;
	top: 0px;
	right: 0px;
	cursor: pointer;
	transition: 0.2s all linear;
	z-index: 2;
}
.sec-schedule .schedule-table-wrap .reserved-wrap .btn-cancel:after{
	content: url('../images/icon/cancel.png');
	margin-left: 5px;
}
.sec-schedule .schedule-table-wrap .reserved-wrap .btn-cancel:hover{
	opacity: 0.6;
}
.sec-schedule .schedule-table-wrap .reserved-wrap .student-wrap .thumb-wrap{
	width: 60px;
	height: 60px;
	margin-right: 10px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 3px 6px rgba(0,0,0,0.29);
	flex-shrink: 0;
}
.sec-schedule .schedule-table-wrap .reserved-wrap .student-wrap .thumb-wrap > img{
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.sec-schedule .schedule-table-wrap .reserved-wrap .student-wrap .name{
	font-size: 1.4rem;
	font-weight: 600;
	width: 100px;
}
/*----------------------------------------------*/
/* end of congestion display
/*----------------------------------------------*/

/* sec-peak-time-desc */
.sec-peak-time-desc .title{
	font-weight: bold;
}
.sec-peak-time-desc .details{
	background: #FFF;
	padding: 40px;
	margin-top: 10px;
	width: max-content;
	box-shadow: 1px 3px 6px rgb(0 0 0 / 20%);
}
.sec-peak-time-desc .note + .note{
	padding-top: 22px;
	margin-top: 20px;
	border-top: #ccc 1px solid;
}
.sec-peak-time-desc label.note,
.sec-peak-time-desc .c-on-peak.note,
.sec-peak-time-desc .c-mid-peak.note,
.sec-peak-time-desc .c-off-peak.note,
.sec-peak-time-desc .traffic-user{
	display: flex;
	align-items: center;
	color: #555555;
}
.sec-peak-time-desc .note .status{
	padding-right: 8px;
}
.sec-peak-time-desc .traffic-user{
	display: flex;
	justify-content: center;
	padding-top: 3px;
}
.sec-peak-time-desc span.dot-traffic {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	display: inline-block;
	margin: 0 0.5px;
	position: relative;
}
.sec-peak-time-desc span.dot-traffic:before{
	content: " ";
	background: url(../images/icon/traffic-mid.svg) no-repeat;
	width: 16px;
	height: 16px;
	background-size: 100%;
	position: absolute;
	left: 0;
}
.sec-peak-time-desc span.dot-traffic.high:before{
	background: url(../images/icon/traffic-high.svg) no-repeat;
}
.sec-peak-time-desc span.dot-traffic.mid:before{
	background: url(../images/icon/traffic-mid.svg) no-repeat;
}
.sec-peak-time-desc span.dot-traffic.low:before{
	background: url(../images/icon/traffic-low.svg) no-repeat;
}

.live-label-wrap {
	padding: 0;
}

.live-label{
	position: relative;
	z-index: 1;
	display:block;
	font-size: 1.2rem;
	line-height: 0.9;
	font-weight: bold;
	color: #fff;
	/* background-color: #EE47C5; */
	padding: .7rem .5rem;
	border-radius: .5rem;
}
.choosable-label{
	position: relative;
	z-index: 1;
	display:block;
	font-size: 1.2rem;
	line-height: 0.9;
	font-weight: bold;
	color: #fff;
	/* background-color: #ffa500; */
	padding: .7rem .5rem;
	border-radius: .5rem;	
	/*font-weight: 350;
	color: white;
	background-color: #ffa500;
	padding: 4px 22px;
	z-index: 1;
	top: -11px;
	position: relative;
	margin-bottom:5px;
	display:block;*/
}
.normal-label{
	position: relative;
	z-index: 1;
	display:block;
	font-size: 1.2rem;
	line-height: 0.9;
	font-weight: bold;
	color: #fff;
	background-color: #404040;
	padding: .7rem .5rem;
	border-radius: .5rem;	
	/*font-weight: 350;
	color: white;
	background-color: #404040;
	padding: 4px 22px;
	z-index: 1;
	top: -11px;
	position: relative;
	margin-bottom:5px;
	display:block;*/
}
.reserved_label {
	width: 100px;
    margin: 0px auto;
    padding: 4px 0px;
    background: red;
    border-radius: 5px;
    color: white;
    font-weight: 600;
}
.request_label {
	font-weight: 600;
}
.bg_yellow {
	background-color: #fffcef!important;
}
.btn_trigger_cancel_modal, .btn_trigger_request_modal {
	border-radius : 6px!important;
}
.btn_trigger_cancel_modal {
	background: #cccccc!important;
}

/* NJ-9944 : control multiple slots at the same time */
.schedule-table-2 td {
	position: relative;
	overflow: visible;
	transition: all .2s linear;
	user-select: none;
}
.schedule-table-2 td.selected:before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(136, 195, 255, .7);
}
.schedule-table-2 td[data-select-start="true"]:not(.selected):not(.past):hover {
	background-color: #f2f9ff;
}

.page_contents--schedule .container-sec-peak-time-desc {
	display: flex;
}
.page_contents--schedule .green {
	color: #16A9B9;
}
.page_contents--schedule .schedule-example-img {
	max-width: 350px;
	margin-left: -10px;
}
.page_contents--schedule .slot-count {
	font-weight: normal !important;
	color: #555 !important;
}

.page_contents--schedule .schedule-table-2.slot-count tr {
	height: 30px !important;
}

.page_contents--schedule .schedule-table-2.slot-count td {
	height: 30px !important;
	padding: 0 !important;
}

/* NJ:23088 Start */
.schedule_cancelation_info_icon{
	width: fit-content !important;
    position: absolute;
    top: 1px;
    right: -2px;
	z-index: 2;
}

/* The global dashboard_info_display_area::before is a 25rem wide hover-bridge that bleeds
   into adjacent cells on the schedule grid and blocks their cancel (X) buttons. */
.schedule_cancelation_info_icon .dashboard_info_display_area:before {
    pointer-events: none;
}

/* The tooltip (z-index 9999) renders upward into the cell above; pointer-events:none
   lets clicks pass through to the X button underneath. */
.schedule_cancelation_info_icon .info_lesson_incentive_top_ratings_wrap {
    pointer-events: none;
}

.schedule-table-2 td.disable{
}
.schedule-table-2 td.disable:before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(124, 124, 124, 0.5);
	z-index: 1;
}
/* NJ:23088 End */

.schedule-promo-highlight{
	background: #fb9a02;
}

/* NJ-12268 */
.promo_tag {
	background: url(../images/schedule/promo_tag.png);
	background-repeat: no-repeat;
	z-index: 2;
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	max-width: 62px;
	max-height: 62px;
	top: 0;
	left: 0;
}

.btn-promo-redirect {
	cursor: pointer;
}

/* NJ-19429 start */

.schedule-table-2 .promo::before {
	background: url(../images/schedule/promo_tag.svg) no-repeat;
}


.schedule-table-2 .campaign::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 40px;
}

.schedule-table-2 .campaign:after {
	display: block;
	font-size: 14px;
	font-weight: bold;
	line-height: 17px;
	/* new design */
	width: 40px;
    height: 40px;

	/* for text */
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 20px 0 0 15px;
	color: #fff;
}

.schedule-table-2 .campaign.full:after {
	background: linear-gradient(to top left, #F8495F 50%, transparent 50%);
}

.schedule-table-2 .campaign.half:after {
	background: linear-gradient(to top left, #FF7F00 50%, transparent 50%);
}

.schedule-table-2 .campaign.live:after{
	background: linear-gradient(to top left, #EE47C5 50%, transparent 50%);
}

.schedule-table-2 .campaign.full:not(.callan):after {
	content: " ";
}

.schedule-table-2 .campaign.half:not(.callan):after {
	content: " ";
}

.schedule-table-2 .campaign.full.callan:after {
	content: "C";
}

.schedule-table-2 .campaign.half.callan:after {
	content: "C";
}

/* NJ-19429 end */

/* NJ-55190 start */

.btn_sync_hide{display: none;}

/* NJ-55190 end*/