a:hover{
	text-decoration: none;
}

body{
	 font-family: 'Zen Maru Gothic', serif;
 	font-weight: 500;
	background: #FAF8EE;
	padding-top:0;
}

.b-blue{
	background:#0066FF;	
}

.b-orange{
	background: #F97F0E;
}

.b-red{
background:#F30A07;
}

.img-banners a{
	width: 50%;
	
}

.text-orange{
	color:#F97F0E;
}

.text-red{
	color:#F30A07
}




.icons small, .menu-text{
	color:#333;
}
.help{
	background: #fff !important;
	border:2px solid #E14F5F;
	padding:0;
	color:#333 !important
}

.help svg {
    background: #e14f5f;
}

 .btn.btn-book {
    font-size: 16px;
    margin: 0 auto;
    padding: 8px 16px;
    font-weight: bold;
    display: flex;
    position: relative;
  
}

a.btn.btn-book {
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    display: flex !important;
    /* width: 50%; */
    min-height: 25px;
    align-items: center;
    justify-content: center;
	  border-radius: 4px;
	 background: #ff6600;
	 max-width: 300px;
}

a.btn.btn-book:after {
    content: "";
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 5px 0 5px 10px;
    border-color: transparent transparent transparent #fff;
    transform: rotate(0deg);
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.book-lesson.help:after {
    content: url('../../images/arrow-with-circle-red.svg');
    display: block;
    transform: translateY(10%);
	    position: relative;
    right: 5px;
}

.book-lesson{
	background:#F97F0E;
	border-radius: 8px;
	 font-size: 18px;
	color:#fff;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap:5px;
	position: relative;
	    min-height: 70px;
}

.book-lesson:hover{
	color:#fff
}

.book-lesson:after {
    content: url('../../images/arrow-with-circle.svg');
    display: block;
    transform: translateY(10%);
}

.sub-title {
    color: #333333;
    font-size: 20px;
    font-weight: bold;
    border-bottom: 2px solid #E6E6E6;
	margin:20px 0;
}

.notification-sec .border-box{
	border:2px solid #FBB03B;
	border-radius: 4px;
}

.arrow-icon.rotate-180 {
    transform: rotate(90deg);
	color:#fff;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link,.title-info .nav-item:has(.active) {
    background-color: #FBB03B !important;
	    border-radius: 5px 5px 0 0;
}

.title-info .nav-item:first-child a{
	border-radius: 5px 5px 0 0 !important;
}

.title-info {
    background: transparent;
}

.accordion-sec .nav-item a{
	display: flex;
	align-items: center;
	justify-content: center;
	
}

.information-table #accordion {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.notice {
			background: #4B53BC;
			display: flex;
			justify-content: center;
		}
		
		.notice div:first-child {
			width: 20%;
		}

		.notice p{
			font-size:20px;
		}
		
		.notice a{
			text-decoration:underline;
		}
			.tri {
				color: #00AFF0;
				vertical-align: baseline;
			}

			.circle, .circle-zoom  {
				display: inline-flex;
				border-radius: 50%;
				background: #00AFF0;
				min-width: 20px;
				height: 20px;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #fff;
				font-size: 14px;
			}
			.no-call {
				font-family: 'Zen Maru Gothic' , sans-serif;
				border: 10px solid #0094D7;
				border-radius: 16px;
				padding: 20px 40px;
			}

			/* .no-call a, .no-zoom a{
				color:#333 !important
			} */

			.no-call h2, .no-zoom h2  {
				background: transparent;
				color: #0094D7;
				font-size: 22px;
				font-weight: bold;
				text-align: center;
				padding-top:0
			}

			.no-call ul,.no-zoom ul {
				font-weight: 500;
				display: flex;
				flex-direction: column;
				gap: 5px;
			}
			
			
			
			
			.no-zoom {
				font-family: 'Zen Maru Gothic' , sans-serif;
				border: 10px solid #3457DA;
				border-radius: 16px;
				padding: 20px 40px;
			}

			.no-zoom h2 {
				color: #3457DA !important;
			}

			.circle-zoom {
				background: #3457DA !important;
			
			}


		.modal { overflow: auto !important; }

		.line-img, .annual-img, .skype-audio-test , .zoom{
    		width: 180px !important;
		}

		
		
		
	
	
				.annual-wrap {
					display: flex;
					gap: 10px;
					flex-direction: column;
					width: 100%;
				}

				.annual-wrap h2 {
					background: transparent;
					font-size: 25px;
					color: #F97F0E;
					font-weight: bold;
					text-align: center;
					font-family: 'Zen Maru Gothic' , sans-serif;
					padding: 0;
				}

				.header-title {
					display: flex;
					flex-direction: column;
					text-align: center;
				}

				.header-title small{
					color: #F97F0E;
				}

				.inner-wrap {
					border:1px solid #eee;
					background: #fff;
					border-radius: 24px;
					text-align: left;
					position: relative;
					padding: 10px 20px;
				}

				.inner-wrap ul li span{
					word-break: keep-all;
				}
				.inner-wrap .title h2 {
					font-family: 'Zen Maru Gothic' , sans-serif;
					font-size: 23px;
					font-weight: 700;
					line-height: normal;
					text-align: left;
					color: #222222;
					display: flex;
					align-items: center;
					gap: 8px;
					margin-top: 0;
					padding:0 10px 10px 0;
					margin: 0;
					background: transparent;
				}

				.inner-wrap ul li {
					margin-left: 0;
					display: flex;
					gap: 24px;
				}

				.inner-wrap:nth-child(even) .title h2 span {
					color: #31AB48;
				}

				.inner-wrap .grid-2 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					gap: 20px;
				}

				.inner-wrap .grid-2 img{
					max-width:100%;
				}

				.inner-wrap .title h2 span {
					line-height: normal;
					color: #AFDE46;
				}
				
				
				

				@media only screen and (max-width:991px) {
					.inner-wrap .grid-2 img {
						max-width: 50px;
						height: 50px;
						position: absolute;
						top: 5px;
						right: 20px;
					}

					.no-call, .no-zoom {
						padding:10px;
					}
					
						.accordion-sec.mobile .title-info .nav-item {
							width: 33%;
						}
				}


		.sidenav-info{
			cursor: pointer;
		}
		
		.btn-action {
		background: #FBB03B;
		border-radius: 5px;
		padding: 0 5px;
		font-size: 12px;
		color: #fff;
		min-height: 32px;
		display: flex;
		align-items: center;
	}

		.btn-action:hover{
			text-decoration:none;
			color:#fff;
		}
			#pills-tab2 .nav-item:first-child a{
					border-top-left-radius:0 !important;
				}

			.item.text img {
				transform: translateY(-2px);
			}
		.note {
			background: #f9e9e9;
			padding: 10px;
			border-radius: 5px;
			margin:10px 0;
		}

		.note ul li {
			margin-bottom: 5px;
			margin-left: 5px;
		}

		.btn-how {
			text-align: center;
			color: #31AB48;
			border-radius: 4px;
			background: transparent;
			cursor: pointer;
			font-size: 15px;
			padding: 0 5px;
			align-self: center;
			min-width: 50px;
			border: 1px solid #31AB48;
			min-height: 32px;
			width: 72px;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.readMore {
			background: #ff6600;
			padding: 7px;
			text-align: center;
			margin: 0px auto 10px;
			font-size: 12px;
			color: #fff;
			border-radius: 30px;
			width: 180px;
			display:none;
			
		}

		.wrap-content{
			display:flex;
			align-items:flex-start;
			justify-content:center;
			flex-wrap:wrap;
		}

		.wrap-content .item{
			padding:0px 10px 20px;
			width: 33.33%;
		}
		.wrap-content .item p{
			margin-top:10px;
		}

		.btn-confirmed{
			font-size:1em;
		}
		.orange-text{
			color:#ff6600;
		}

		.pink{
			background:#f770d3 !important;
		}
		
		select#schedule-request-time {
			padding: 0 40px 0 5px;
			border: 1px solid #f00;
			color: #f00;
		}

		select#schedule-request-date {
			padding: 0 30px 0 5px;
			border: 1px solid #f00;
			color: #f00;
		}

		.about-schedule-request{
			background:#fff;
			padding:5px 30px 30px;
		}

		.about-schedule-request p{
			color:inherit;
		}

		.about-schedule-request a {
				background: #0e76cd;
				color: #fff;
				font-size: 14px;
				padding: 6px 20px;
				margin: 10px 0 0;
				display: inline-block;
				border-radius: 10px;
				margin-top:0
			}

			.about-schedule-request hr{
				background:none;
				border-bottom:1px solid #eee;
				margin-top:0;
			}

			.consecutive_reservation {
				background: #ff6600;
				color: #fff !important;
				border: none;
				padding: 10px 30px;
				display: inline-block;
				margin: 5px auto 0;
				text-align: center;
				border-radius: 5px;
				cursor: pointer;
			}

			button:focus {
		border-color: inherit;
		-webkit-box-shadow: none;
		box-shadow: none;
		}
		


		.children-lesson button.close {
			left: -5px;
			top: 5px;
			padding: 0 !important;
		}
		
		.block2 {
				background: #FAF8EE;
				border:none !important;
			}

		.block2 .wrapper {
    		border: 3px solid #A1D037 !important;
		}

		.block2 .wrap{
			background:#A1D037;
			border-radius: unset;
		}
		
		.block2 .wrapper.t-g-border {
				border: 3px solid #31AB48 !important;
			}
			
			.block2 .wrapper.t-g-border .wrap {
				background: #31AB48;
			}
			
		.block2 .bg-orange, 
	.block2  .wrapper.t-o-border .btn-book {
				background: #F97F0E;

			}
			
			.block2  .wrapper.t-o-border {
				border: 3px solid #FBB03B !important;
			}
			
			.block2 label, .block2 .wrapper.t-g-border label {
 
				font-size: 16px !important;
				color: #333 !important;
			}
		
		.inner p {
			line-height: 25px;
			font-size: 14px;
		}
		.girl {
			background: #feedf7;
		}

		.boy {
			background: #edf5fe;
		}
		
		.info {
		background: #00aef0 !important;
		padding: 5px !important;
		color: #fff;
		text-decoration: none;
		border-radius: 50% !important;
		width: 20px !important;
		height: 20px !important;
		display: inline-block;
		line-height: 12px;
		font-size: 12px;
		text-align:center;
		cursor: pointer;
		}

		.info-block p{
			margin-bottom:0;
		}

		.content-slider-2 h5 strong
		{
			line-height: 26px;
  			font-size: 16px;
		}

		.management button{
			font-size:16px;
		}

		.star{
			max-width:unset;
		
		}

		.nav-pills.tab2 {
			width:410px;

		}

		a.cancel-btn {
		background: #fff126 !important;
		color: #222;
		border-radius: 0.25em;
		font-size: 1.6rem;
		}

			a.cancel-btn:hover{
				text-decoration:none;
				background: #fff126 !important;
				opacity: 0.7;
			
			}

			.card-header{
				padding:0;
				background: #fff;
				border-bottom: 1px solid #f0f0f0;
			}
			
			.card-header:last-child{
				border-bottom: none;
			}
			
			.card-header .title .text-primary{
				color:#333 !important
			}
			
			.card-header .title small{
				font-size:14px;
				font-weight: 600;
			}
			
			.card-body small{
				font-size:14px;
			}

			.card-header a.news{
			
				border-radius: 0px;
				white-space: inherit;
				display:block;
				padding:1rem;
				opacity: 1;
				}

			.card-header a.news.collapsed{
				
			
				color:#232323;
				display:block;
			}

			.card{
				border:1px solid #E6E6E6;
				border-radius: 4px;
			}
			
				.block1 .container{
					padding: 0.5rem;
				}

				.desktop.top-page table{
					margin-bottom:0;
				}

				.management .btn{
					padding:1px 0;
				}

				.accordion-sec.news-content .information-table{
				
					height: 140px !important;
					overflow-y: scroll !important;
				}
				
				.accordion-sec .information-table{
				
					height: unset !important;
					overflow-y: hidden !important;
				}
				
				/*override file-content*/
				


				.file-content{
					gap:10px
				}
				.file-content .upload .items {
					align-items: center !important;
				}
				
				#attachment {
					font-size: 12px !important;
					border-radius: 5px !important;
					font-weight: 600;
				}
				
				.file-chooser {
					font-size: 12px;
				background: transparent; 
					 color:transparent; 
					cursor: pointer;
				}
				
				#attachment::before {
						background: #AFDE46 !important;
					line-height:unset !important;
					display: flex !important;
						align-items: center;
						justify-content: center;

					}
					
					.file-chooser__input {
						height: 32px !important;
					}
				
				/*modal css */
				.rerequest.request_title:before {
					content: none;
					line-height: 1em;
				}

				.rerequest{
					display: block !important;
				}

				.rerequest .text:first-child:before {
					content: url('../../images/star-icon.png');
					line-height: 1em;
					position: relative;
    				bottom: -3px;
				}

				.book-a-lesson {
					width: 350px;
					max-width: 100%;
					height: 65px;
					border-radius: 40px;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #F97F0E;
					margin: 0 auto;
					color: #fff;
					font-size: 20px;
					position: relative;
					text-decoration: none;
				}
				
				.book-a-lesson:after {
					content: " ";
					position: absolute;
					right: 10px;
					top: 50%;
					width: 0px;
					height: 0px;
					border-style: solid;
					border-width: 6px 0px 6px 12px;
					border-color: transparent transparent transparent #fff;
					transform: translateY(-50%);
				}
				


				.item.text {
					margin-top: -7px;
				}
					
				
				
				.text.activities {
					min-width: 100%;
				
					border: 1px solid #F97F0E;
					color: #F97F0E;
					min-height: 32px;
					display: flex;
					align-items: center;
					padding: 0 5px;
					border-radius: 4px;
					font-size: 15px;
				}
				
				
				
				.search-result {
					border: #F97F0E 4px solid;
					border-radius: 6px;
					background: #fff;
					margin: 10px 0;
					box-sizing: border-box;
					padding:16px;
				}

				.lessonInfo #teacher_photo {
				height: 80%;
				max-width: 110px;
				margin-top: 10px;
				}

				.lessonInfo #teacher_photo {
				width: 80px;
				float: none;
				margin-left: 0;
				}
				
			

				.search-result .photo {
				border-radius: 100%;
				width: 110px;
				}
				
				.t-name {
					line-height: 2.1em;
				}

				.t-name p {
					font-size: 28px;
					margin: 0;
					padding: 0;
					color: #222;
					font-weight: bold;
				}
			

				#lesson_title {
				font-size: 18px;
				}

				#lesson_date, #lesson_starttime {
				color: #EB5416;
				font-size: 18px;
				font-weight: bold;
				}


				#lesson table tr {
				display: inline-block;
				padding-right: 18px;
				
				}

				.lesson-title h2 {
					font-weight: 700;
					font-size: 32px;
					line-height: 140%;
					text-align: center;
					background: transparent;
					padding:0;
					display: flex;
					align-items: center;
					justify-content: center;
					gap:10px;
					margin:0
				}

				.lesson-title h2::after,.lesson-title h2::before{
					content: url(../../images/flower-icon.png);
				}
				
			
			.lessonInfo table .request_title {
				font-size: 18px!important;
				display: flex;
				align-items: center;
				gap: 5px;
				margin: 20px 0 5px;
			}
			
				
				.request_title:before {
		content: url('../../images/star-icon.png');
		line-height: 1em;
	}
				#reqMore {
					width: 98%;
					min-height: 9em;
					/* margin: 5px 1em 0 1em; */
					border-style: none;
					border: solid 1px silver;
					padding:0 5px;
					margin: 0 auto;
					display: block;
					
				}
				.lessonInfo select {
					margin: 0;
					font-size: 16px;
					height: 40px !important;
					color: #222;
				
					border: 1px solid #FAF8EE;
				}

				select.form-control {
				border: none;
				font-weight: normal;
				height: 2em;
				padding-left: 1em;
				margin-bottom: 10px;
				-webkit-appearance: none;
				-moz-appearance: none;
				appearance: none;
				background: url(../img/select-icon.png) #FAF8EE right no-repeat;
				background-position: calc(100% - 10px) 15px;
				}

				.imgBtn img{
				max-width:100%;
				}

				.imgBtn {
				border: none;
				background: none;
				width: 210px;
				transition: 100ms;
				cursor: pointer;
				}

				.msg{
				border: 3px solid #ff5a5c;
				border-radius: 10px;
				margin-bottom: 5px;
				padding: 10px;
				background:#ffebec;
				}

				.msg p{
				color:#706f6f;
				font-size:14px;
				}

				.msg p.red{
				color:#d9323c;
				font-size:18px;
				}

				.msg p:last-child, .msg h4:last-child{
				margin-bottom:0;
				}

				.msg h4{
					line-height:1.7em
				}

				button.close {
				position: relative;
				left: 25px;
				top: -26px;
				background: #f00;
				border-radius: 50%;
				font-size: 15px;
				width: 25px;
				height: 25px;
				color: #fff;
				opacity: 1;
				line-height: unset;
				}

				button.close:hover{
				color:#fff
				}

				.s-skype{
					color:#324604;
				}

				.desktop a.btn-green {
						font-size: 12px;
						margin: 0;
						padding: 5px 0;
					}

			

					ul.lightSlider.lSSlide {
					height: unset !important;
				}

		.btn{
			white-space: inherit;
		}

	
		.buttons{
			margin-top:-5px;
		}

		.buttons .btn{
			width: 180px;
			font-size: 12px;
			margin: -5px auto;
			padding: 8px 0;
			background:#ff6600;
			color:#fff;
			margin:10px 0;
			border-radius:5px;
		}

		.error{
			font-size: 12px;
			color:#333
		} 

		.col-lg-9 {
		max-width: 75% !important;
		flex: 0 0 75% !important;
		}

		.t-photo {
			border-radius: 100%;
			border: 3px solid #2eb042;
			margin:0 auto;
			display: block;
			max-width: 120px;
		}

		.youtube-icon{
			margin-top:-25px;
		}

		.t-popup h1{
			color:#81ba0c;
			font-size:18px;
		}

		.t-popup .t-level span{
			font-size:13px;
		}

		.t-popup .green{
			color:#81ba0c;
		}

		.t-popup .grey{
			color: #777 !important;
		}

		.t-popup .fav{
			color:#ec5569;
		}

		.t-popup .fav span{
			color:#ec5569;
		}

		.t-popup button.fav{
			border:2px solid #ec5569;
			border-radius:1rem;
			background:#fff;
			font-size:13px;
			cursor: pointer;
		}

		.t-popup button.fav:hover{
			background:#ec5569;
			color:#fff;
		}

		.t-popup .fav:hover span{
			color:#fff;
		}


		.t-popup button.donot-show{
			background:#0f76cd;
			color:#fff;
			border:2px solid #0f76cd;
			border-radius:1rem;
			font-size:13px;
			cursor: pointer;
		}

		.t-popup button.donot-show:hover{
			background:#065aa1;
			border:2px solid #065aa1;
		}

		.t-popup .modal-body p{
			font-size:12px;
		}

		.t-popup h3{
			margin:0.5rem;
			font-size:13px;
			color:#81ba0c;
			font-weight:bold;
		}

		.popup-icon{
			width:45px;
		}

		.t-table {
			border: 3px solid #2eb042;
			background: #fff;
			border-radius: 10px;
			padding: 10px;
			
		}

		.t-table p{
			color:#fb701c;
		}

		.t-table hr{
			border-bottom:1px solid #c3c3c3 !important;
			background:none !important;
			height: unset;
		}

		.t-content{
			display:flex;

		}

		.t-content p{
			font-weight:bold;
			margin-bottom:0px;
			
		}

		/*tabs */
		.t-popup .nav-tabs li a.active{
			color:#2eb042;
			border-bottom:1px solid #2eb042;
		}

		.t-popup .nav-tabs li a{
			color:#777777;
			margin-right:2em;
			font-size:12px;
		}
		.t-popup .nav-tabs li a.active span.circle {
			background: #2eb042;
		}
		.t-popup .nav-tabs li a span.circle {
			background: #777;
			border-radius: 50%;
			height: 15px;
			width: 15px;
			display: inline-block;
			line-height: 17px;
		}

		.t-popup .nav-tabs{
			height: 30px;
		}

		.teacher_reserve tr {
			line-height: 1.5em;
			margin: 5px 0;
			display: block;
			background: #5ac068;
			color: #fff;
			padding: 10px;
			font-size: 13px;
		}

		.teacher_reserve-date tr {
			line-height: 1.5em;
			margin: 5px 0;
			display: block;
			background: #fff;
			border: 1px solid #e0e0e0;
			padding: 20px;
		}



		.t-popup .teacher_reserve-date .btn{
			margin:5px 0;
			font-size: 16px;
		}

		.skype-color{
			color:#1c8b2b;
		}

		.note-fav{
			background:#5ac068;
			border-top-left-radius:2px;
			border-top-right-radius:2px;
			display:none;
		}

		/*modal for teacher adjustment */
		.t-popup .modal-lg {
			max-width: 1200px;
			z-index: 0;
			position: relative;
		}

		#schedule-request .modal-lg{
			position: relative;
			z-index: 1;
		}

		.t-popup .modal-header{
			border-bottom:none;
		}


		table.teacher_reserve-date tr th {
			position: absolute;
			top: -10px;
			left: 48%;
			background:#fff;
			padding:0 10px;
		}

		table.teacher_reserve-date tr{
			position: relative;
			margin-bottom:20px;
		}

		.lSSlideWrapper .wrapper{
			position: relative;
		}

		.beginner {
			width: 20px !important;
			height: 20px !important;
			position: absolute;
			top: 20px;
			left: 50%;
			transform: translateX(-50px);
		}

		.calendar-icon {
				width: 30px !important;
				height:auto !important;
				left:45%;
			}
			
			
			/*carousel*/
			.lSAction {
				display: flex;
				justify-content: center;
				gap:150px
			}
			
			.lSAction > a {

				 position: unset;
				
				 margin-top: 10px; 
				 background-image: url(../img/controls2025.png) !important;
			}
			
			.lSSlideOuter .lSPager.lSpg {
					position: relative;
					top: -35px;
				}
				
				.lSSlideOuter .lSPager.lSpg > li a {
					background: #BFBFBF;
				}
				
				.lSSlideOuter .lSPager.lSpg > li:hover a, .lSSlideOuter .lSPager.lSpg > li.active a{
					background: #31AB48;
				}

				/* .optional-purchase-wrapper{
					display: none;
				} */
				
				
		/*mobile*/	
		
		.icons div {
			width: 60px;
		}
		
			.btn-nav {
				background: #F97F0E;
				border-radius: 4px;
				flex-basis: 90px;
				font-size: 12px;
				text-decoration: none;
				text-align: center;
				gap: 3px;
			}
		
	 	.count {
			position: absolute;
			top: -6px;
			right: 6px;
			background: #ff0000;
			color: #fff;
			font-size: 13px;
			width: 20px;
			height: 20px;
			border-radius: 50%;
			text-align: center;
			line-height: 20px;
		}
				
		.bg-light-custom {
			background: #AFDE46;
		}		
				
		.burger-menu{
			height: 30px;
			cursor: pointer;
		}	
		
		.burger-menu .burger-menu-icon {
			height: 1px;
			margin: 6px auto;
		}
				
		.student-switch {
			background: #FBB03B;
			width: 100px;
			padding: 4px 8px;
			border-radius: 4px;
			color:#fff;
			appearance: none;
			border:1px solid #FBB03B;
			 position: relative;
			height: 43px;
			
			margin: 0;      
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			-webkit-appearance: none;
			-moz-appearance: none;
		
			background-image:
				linear-gradient(45deg, transparent 50%, #fff 50%),
				linear-gradient(135deg, #fff 50%, transparent 50%),
				linear-gradient(to right, transparent, transparent);
			background-position:
				calc(100% - 10px) calc(1em + 2px),
				calc(100% - 5px) calc(1em + 2px),
				100% 0;
			background-size:
				5px 5px,
				5px 5px,
				2.5em 2.5em;
			background-repeat: no-repeat;
			 cursor: pointer;  
			}

			.student-switch:focus {
			background-image:
				linear-gradient(45deg, white 50%, transparent 50%),
				linear-gradient(135deg, transparent 50%, white 50%),
				linear-gradient(to right, transparent, transparent);
			background-position:
				calc(100% - 5px) 1em,
				calc(100% - 10px) 1em,
				100% 0;
			background-size:
				5px 5px,
				5px 5px,
				2.5em 2.5em;
			background-repeat: no-repeat;
			
			outline: 0;
			}
			
			
		
		.student-switch option {
			background: #fff;
			color: #222;
		}
		
		
		
		.student-number{
			padding: 4px 8px;
			background: #FFFFFF;
			border: 1px solid #F97F0E;
			border-radius: 4px;
		}
		
		.useful-information .item {
			border-radius: 4px;
			display: flex;
			width: 50%;
			justify-content: center;
			padding: 5px;
		}
		
			.useful-information .item .icon-img {
			width: 25%;
			
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.useful-information .item .text {
			padding: 4px;
			font-size: 14px;
			text-align: center;
			width: 75%;
			align-items: center;
    		display: flex;
			justify-content: center;
		}
		
			.notice-sp{
			background: #FFF652;
			padding: 8px 16px;
			text-align: center;
			display: flex;
       		 justify-content: center;
			
		}
		
		.notice-sp p {
			font-size: 12px;
			color: #222;
			font-weight: bold;
			border-bottom: 1px solid #F30A07;
		}
			.notice-sp p span{
				color:#F30A07;
			}
		
			
		.title-info .nav-item {
			width: 33%;
			border-right: transparent;
		    background: #BFBFBF;
			    border-radius: 5px 5px 0 0;
			
		}
		
		 .btn-reg{
			display: none !important;
		}
		
				.wrapper a.btn.no-arrow:after{
					display:none !important;
					}

					.wrapper a.btn{
					width: 95% !important;
					}
	

		
		/*non-member*/
		.non-member .optional-purchase-wrapper,	.non-member .notice-sp {
			display: none !important;
		}
		
	.non-member .btn-reg{
			display: none !important;
		}
		
	.non-member .button-link{
		border:1px solid #4950B7;
		border-radius: 4px;
		color:#333
	}
		.non-member .button-link .image{
			background: #4950B7;
			
		}
		
			.non-member .button-link.green .image{
			background: #68C279;
			
		}
		
	.non-member .button-link.green{
		border:1px solid #68C279;
	}
	
	.solve-problem .item {
    border-radius: 4px;
    display: flex;
    width: 50%;
    justify-content: center;
    padding: 5px;
}

	.solve-problem .button-link{
		border:1px solid #FBB03B;
		border-radius: 4px;
		color:#333;
		    width: 100%;
	}
	
	.solve-problem .button-link .image {
		background: #FBB03B;
		min-width: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
		.solve-problem .text{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
		}
			
		.non-member	.navigation li:nth-child(n+9):nth-child(-n+12),	.non-member	.navigation li:nth-child(14),
		.non-member div#bsDrawer ul li:nth-child(n+9):nth-child(-n+12),.non-member div#bsDrawer ul li:nth-child(14){
			display: none;
		}
	
			
		/*media */
		@media only screen and (max-width: 1200px) {
			.notice div:first-child{
				display:none;
			}
		}
		
			/* @media only screen and (max-width: 991px) {
		
			.optional-purchase-wrapper{
					display: block;
				}
			} */
			
		@media only screen and (max-width: 768px) {
		.t-popup button.fav, .t-popup button.donot-show{
			width:49% !important;
			font-size:12px;
			
		}
		
		.t-popup {
			padding: 0 !important;
		}
		.t-popup button.close{
			
			position: absolute;
			right:10px;
			top: 10px;
		}

		.lessonInfo #lesson {
			margin: 0 0 1em 0;
		}

		.wrap-content .item{
			width: 100%;
		}

		.no-call{
			
			border:8px solid #0094D7;
		}
			.no-call h2, .no-zoom h2{
						font-size:16px;
					}

					.no-call ul li, .no-zoom ul li{
						font-size:14px;
					}

					#no-call-skype .container, 	#no-call-zoom .container, #zoom-setting .container{
						padding:16px 0;
					}
					
					.no-zoom{
			
			border:8px solid #3457DA;
		}
		
		
		.block2{
			margin-bottom: 0;
			min-height:unset
		}
		
	
		
		.accordion-sec.mobile .nav-pills .nav-link.active, .accordion-sec.mobile .nav-pills .show>.nav-link, .accordion-sec.mobile .title-info .nav-item:has(.active){
			background: #AFDE46 !important;
		}
		
		.accordion-sec.mobile .title-info{
			background: transparent;
		}
		
		.accordion-sec.mobile .nav-item{
			background:#BFBFBF;
			
		}
		
		.accordion-sec.mobile .nav-item a.active h3{
			color:#fff;
			font-size: 14px;
		}
		
		.accordion-sec.mobile .nav-item a h3{
			color:#fff;
			font-size: 14px;
			margin: 0 !important;
		}
		
		.accordion-sec.mobile .title-info .nav-item{
			border-right:unset;
			border-radius: 5px 5px 0 0;
		}
		
		.accordion-sec.mobile ul.nav  {
				border-bottom: 2px solid #AFDE46;
			
			}
				

		}

		@media only screen and (max-width: 600px) {
			.notice p{
			font-size:15px;
		}
			.wrap-content .item{
				display:none;
			}

			.readMore{
				display:block;
			}
		

			.truncate .item:first-child p {
				position: relative;
				max-height:35px;
				overflow: hidden;
				padding-right: 1rem;
				}

				.truncate .item:first-child p::before {
				position: absolute;
				content: "...";
				bottom: 0;
				right: 0;
				}
				.truncate .item:first-child p::after {
				content: "";
				position: absolute;
				right: 0;
				width: 1rem;
				height: 1rem;
				background: white;
				}

		.lessonInfo table .request_title{
			padding-left:3px;
		}

		button.close {
			left: 5px;
			top: -4px;
			z-index: 999;
		}
		.star{
			width:20px;
		}

		.modal-content p ,	.lessonInfo select, #lesson_date, #lesson_starttime, .lesson-title, #lesson_title, .lessonInfo table .request_title, #reqMore{
			font-size:16px !important;
			
		}

		#reqMore{
			color:#222;
		}

		.lessonInfo #teacher_name{
			margin-left:0
		}

		.children-lesson button.close{
			padding:5px !important;
		}

		.title-info{
		margin-left:0px;
		}

		.t-popup .modal-body p {
			font-size: 12px !important;
		}

		.btn-confirmed {
			width: 100% !important;
		}

		table.teacher_reserve-date tr th {
			left: 39%;
		}

	

		.buttons .btn{
			margin-top:5px;
			width:150px;
		}

		.beginner {
			width: 18px !important;
			top: 0;
		}

		.calendar-icon {
				width: 23px !important;
				left:50%;
			}


		.file-block {
			width:268px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.profile-wrap {
			display: flex;
			gap:10px;
			align-items:center;
		}
		.d-skype{
			display:flex;
			align-items:flex-start;
			justify-content:center;
		}

		.d-skype span {
			width: 185px;
			word-break: break-word;
		}

		.d-skype img{
			width: 30px;
		}

		.about-schedule-request {
			margin-bottom:10px;
			padding: 5px 10px;
		}


		.teacher_reserve-date tr{
			padding:10px 5px;
		}
		
		.modal-body {
			padding: 0;
		}
		
		.t-name p {
			line-height: 20px;
		}
		
		.search-result {
			padding: 10px;
		}
		
		.lesson-title h2 {
			font-size: 22px;

		}
		
		.file-content {
				flex-direction: column;
			}
		.file-content .upload {
			width: 100% !important;
		}
		
		.wrapper a.btn:after{
			display: none;
		}
	
	
		.block2 .wrapper .btn-book {
			line-height: 11px;
			display: flex !important;
			align-items: center;
			justify-content: center;
			font-size: 11px;
		}
		
		a.btn.btn-book.bg-yellow {
    font-size: 12px !important;
}
		
		
		.non-member .book-lesson {
			font-size: 16px !important;
			width: 300px !important;
		}
		
		.non-member .book-lesson:after {
			right: 10px;
		}
		
	.book-lesson{
		font-size: 14px;
	}
	
	
		.s-name {
			font-size: 20px;
		}
		
		.student-number{
			font-size: 12px;
		}
		
		.fix-box{
			width: 60px;
			height: 60px;
		}
		
		.sub-title{
			font-size: 16px;
			margin: 10px 0;
		}
		
		.student-switch {
			height: 37px;
			font-size: 15px;
		}
		
		.addition {
				padding: 2px 8px;
				font-size: 14px;
			}
			
			.block2 .wrapper .wrap span {
				font-size: 13px;
			}
			
			.detail {
					font-size: 12px;
				}

			.arrow-icon {
					font-size: 16px;
				}
				
				.nav-link {
					padding: 0px 5px;
				}
				
				.dropdown-drawer__title{
					font-size: 13px;
				}
				
				.side-nav p{
						font-size: 13px;
				}
				
				.tab3 h3{
					font-size: 15px;
				}
				
					.title-info .nav-item {
						height: 30px;
					}
					
					.accordion-sec .nav-item a {
						gap: 5px;
					}
					
					a.btn.btn-book {
						font-size: 14px;
					}
					
					.block2 label, .block2 .wrapper.t-g-border label {
						font-size: 11px !important;
					}
					
					
					
					.card-header a.news{
						padding:0.5em
					}
					
						.non-member .btn-reg{
							display: block !important;
						}
						
						.block2 .wrapper .btn-book, .block2 .wrapper a.btn {
							height: 30px;
							padding: 0;
							display: flex !important;
							align-items: center;
							justify-content: center;
						}
		}