/*fonts*/
@font-face{
	font-family: sevenSegment;
	src: url(../../fonts/7-Segment.ttf);
}

#codeTime {
	font-family: sevenSegment;
	width: 100%;
	text-align: center;
  	font-size:28px;
  	color:#343a40;
}
/*end_fonts*/

/*progress*/
	.progresss {
      position: relative;
      height: 45px;
    }

    .round {
      position: absolute;
      left: 50%;
      transform: translate(-50%);
    }

    .round strong{
      position: absolute;
      top: 50%;
      left: 50%;
      /*margin-top: -50px;*/
      transform: translate(-50%, -50%);
      font-size: 12px;
    }
/*endProgress*/
.not-rate-icon{
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
}

.icon-rate-success{
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
}

.close-popover{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	height: 30px;
	width: 30px;
	cursor: pointer;
}

.popover{
	max-width: 380px;
	z-index: 9999;
}

.show-kpi-modal,
.chart-kpi-modal{
	cursor: pointer;
	opacity: 0.5;
}

.modal-xl{
	max-width: 920px;
}

.kpi-modal-info_user img{
	width: 50px;
	height: 50px;
	border-radius: 50%;
}

.info-kpi-list_item *{
	width: 50%;
}

.info-kpi-list_item *::first-letter{
	text-transform: uppercase;
}

.evaluate-kpi-point,
.choise {
	cursor: pointer;
}

.form-control-w40{
	width: 42.5%;
}

.select-kpi-add{
	height: 34px;
}

.target-table-content,
.collpase-kpi-table,
.collpase-kpi-table i{
	-webkit-transition: 0.3s all ease;
	-o-transition: 0.3s all ease;
	transition: 0.3s all ease;
}

.collpase-kpi-table.toggle i{
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

.target-table-content.hide{
	height: 0px;
}

.rate-question-item{
	height: 50px;
	border-bottom: 1px solid #dee2e6;
}

.rate-question-item:last-child{
	border:none;
}

.rate-question-item select{
	height: 34px;
}
.table-create-personal,
.table-create-chapter,
.table-create-lessons,
.table-create-student,
.table-create-document {
	display: none;
}

.document-info {
	max-height: 500px;
    overflow-y: auto;
}

.personal-info,
.chapter-info,
.lesson-info,
.student-info {
    max-height: 300px;
    overflow-y: auto;
}

.deleteProduct,
.deletePersonal,
.deleteChapter,
.deleteLesson,
.deleteStudent,
.deleteDocument {
	cursor: pointer;
}

.addNewQuiz {
	display: none;
	cursor: pointer;
}

.chapter-show {
	width: 100%;
	text-align: left;
	color: #000 !important;
}

/**/ 
.service-create-deal {
	display: none;
}

.service-deal-info {
    max-height: 300px;
    overflow-y: auto;
}

.deleteService{
	cursor: pointer;
}

.addNewService{
	display: none;
	cursor: pointer;
}

.table-create-service {
	display: none;
}
/**/

.play,
.collapse {
	cursor: pointer;
}

.line-span {
    background: transparent;
    border: none;
        border-bottom-color: currentcolor;
        border-bottom-style: none;
        border-bottom-width: medium;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    border-radius: 0px;
    width: 100%;
    padding-bottom: 2px;
}

.arrow-down {
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
	-webkit-transition: 2ms ease;
	-o-transition: 2ms ease;
	transition: 2ms ease;
}

.content-lesson .readLesson p,
.content-lesson .readLesson h1,
.content-lesson .readLesson h2,
.content-lesson .readLesson h3,
.content-lesson .readLesson h4,
.content-lesson .readLesson h5,
.content-lesson .readLesson h6, 
.view-content-lesson .readLesson p, 
.view-content-lesson .readLesson h1, 
.view-content-lesson .readLesson h2, 
.view-content-lesson .readLesson h3, 
.view-content-lesson .readLesson h4, 
.view-content-lesson .readLesson h5,
.view-content-lesson .readLesson h6 {
	 width: 100%;
	 display: block;
}

.content-lesson .readLesson img,
.view-content-lesson .readLesson img {
	 width: 80% !important;
	 margin: 0 auto;
	 display: block;
}


.view-course-container .card:first-child .view-course-item .list-group .list-group-item:last-child{
	border-bottom: 1px solid rgba(0,0,0,0.1)!important;
}

.view-course-container .card .view-course-item .list-group .list-group-item:hover{
	background: rgba(0,0,0,0.05);
}

.view-course-container .card{
	margin-bottom: 0px!important;
}

/*.sidebar-item {
	min-height: calc(100vh - 110px);
	overflow: hidden;
}*/

.view-course-container {
	/*min-height: auto;*/
	height: calc(90vh - 170px);
	overflow-y: auto;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
}

.title-course::before {
	content: '';
	width: 100%;
	height: 2px;
	background-color: red;
	position: absolute;
	z-index: 9;
	left: 0;
	right: 0;
	bottom: 0;
}

.active h6 {
	color: red
}

.sidebar-sticky {
	position: fixed;
	top: 60px;
	margin: 0 25px 0 0;
	overflow-x: hidden !important;
}

/* trim css*/
.cutText {
    text-overflow: ellipsis;   /* IE, Safari (WebKit) */
    overflow:hidden;              /* don't show excess chars */
    white-space:nowrap;           /* force single line */
    width: 20rem;  /*This property playing a major role just showing the first 2 letter*/
    margin-bottom: 0;
}
/* end trim css*/

.active-lesson {
	background: rgba(0,0,0,0.05);
}

/*image avt Course*/
.img-responsive {
	height: 250px;
	width: auto;
}

/*add student arr-down wher*/
.toggle-slide-btn i{
	position: absolute;
	right: 8px;
}

.toggle-slide-btn i.rotate180{
	-webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
}

.change-quote-status .dropdown-item:active{
	background-color: rgba(0,0,0,0.1);
}


@media screen and (max-width: 992px) {
    .content-lesson .readLesson img,
    .view-content-lesson .readLesson img {
		 width: 100% !important;
		 margin: 0 auto;
		 display: block;
	}
}