.color1{
	color: #00aa5b;
	color: #038448;
	color: #036048;
	color: rgba(255,150,0,0.5);
	color: #ee5555;
	color: #a22;
	color: rgba(0,0,0,0.5);
	color:  #3454a2;
	color: #2c2e3e;
}
.btn-green1{
	color:#fff;

	background-color: #00aa5b;
	border-color:#07cc70
}
.res-hidden-menu{
	display: none;
}
.btn-green1:hover{
	background-color: #038448!important;
	border: 1px solid #036048!important;
	color: white;
}
.m-subheader{
	padding: 0 3em;
}
.m-brand{
	padding: 0 0!important;
}
.btnMenu{
	padding: 8px 2em;
	font-size: 15pt;
	color: #7e47ef;
	margin: 0px auto;
	text-decoration: none;
	border-right: 1px solid rgb(200,200,200);
	border-left: 1px solid rgb(200,200,200);
	vertical-align: middle;
	transition: all .3s ease .3s;
}
.btnMenu:hover{
	color: navy;
	text-decoration: none!important;
}
.identity{
	background: white;
	max-width: 100%;
	width: 100%;
	height: 40px;
	vertical-align: middle;
	text-align: center;
	line-height: 40px;
	padding:0 3em;
	box-shadow: 0px 6px 10px 1px rgba(69,65,78,0.08);
	border-top: 1px solid rgb(200,200,200);

}
@media only screen and (min-device-width: 360px) and (max-device-width: 575px) { 
	.identity{
		display: none!!important;
	}
	.mobile-hide{
		display: none!important;
	}
	.m-subheader{
		padding: 0!important;
	}
	.row-responsive{
		display: block!important;
		margin: 0 1em 0 0;
	}
}
@media only screen and (min-device-width: 576px) and (max-device-width: 767px) { 

	.row-responsive{
		display: block!important;
	}
	.m-subheader{
		padding: 0!important;
	}
	.identity{
		display: none!!important;
	}
	.mobile-hide{
		display: none!important;
	}
	header{
		height: 100px;
	}
	.btnMenu{
		padding: 0 10px;
	}
}
@media only screen and (max-width: 760px){

	.container-desktop-logo *,.identity *{
		display: none!important;
	}
}


@media only screen and (min-device-width: 768px) and (max-device-width: 991px) { 
	.identity-name{
		display: none!important;
	}
	header{
		height: 100px;
	}
	.container-desktop-logo{
		display: none!important;
	}
}
@media only screen and (max-device-width: 800px){
	.tablet-show{
		display: block;
	}
}
@media only screen and (min-device-width: 801px){
	.tablet-hide{
		display: none;
	}
}


@media only screen and (min-device-width: 992px) and (max-device-width: 1199px) { 
	.desktop-elearning-text{
		font-size: 10pt!important;
	}
}
@media only screen and (max-device-width: 1020px){
	.identity{
		display: none;
	}
	.res-hidden-menu{
		display: visible;
	}
}


@media only screen and (min-device-width: 1200px) { 

}
.slick-prev::before,.slick-next::before{
	color: orange!important;
	font-size: 25pt!important;
	opacity: 1;
}
.slick-prev,.slick-next{
	height: 33px!important;
	width: 33px!important;
	background: white!important;
	border-radius: 50%;
	opacity: 1;
}
.title-menu{
	font-size: 11pt;
	letter-spacing: 2px;
	font-weight: 400;
	text-align: center;
	border-right: 2px solid #eee;
	height: 3.5rem;
	padding: 10px 0;
	/*line-height: 2em;*/
}
.title-menu a {
	text-decoration: none;
}
ul.hidden_menu{
	margin: 0;
	padding: 0;
}
ul.hidden_menu li {
	display: relative;
	margin: 0;
	color: white;
	letter-spacing: 3px;
	list-style-type: none;
}

.container-expand-menu{
	position: absolute;
	top:40px;
	bottom: 0;
	left:-5px;
	width: 240px;
	display: none;
	box-shadow:0px 10px 10px 0px grey;
	overflow-y:auto
	scroll-behavior: smooth;
	scrollbar-width: thin;
}
.btnMenuEx{
	background: transparent;
	color: white;
	text-align: left;
	padding: 10px 0px 0 2em;
	font-size: 10pt;
	display: table;
	table-layout: fixed;
	width: 100%;
	margin: 0;
	text-decoration: none;
	position: relative;
}
.btnMenuEx.active{
	background: rgba(0,0,0,0.3);
}
.btnMenuEx:hover{
	background: rgba(255,255,255,.2);
	text-decoration: none;
	color: white;
}
.titleDashboard{
	margin: 0 -15px!important;
}
.margin-15{
	margin: 0 -15px!important;
}
.container-portlet{
	margin: 4em 0 0 0 ;
	padding: 1em;
	box-shadow: 0px 1px 10px 1px #eee;
}
.container-title-portlet{
	position:relative;
	top:-2rem;
	left:2em;
	text-align: center;
	height:50px;
	line-height:50px;
}
.title-portlet{
	width: 200px;
	box-shadow: 0px 1px 10px 1px #ccc;
	font-size:13pt;
	margin:0 1em;
	padding:1em 0;
	font-weight: 800;
	letter-spacing: 2px;
	color: white;
}
.container-content-slider-h{
	max-width: 100%;
	overflow-x: auto;
	white-space: nowrap;
	scrollbar-width: thin;
	-webkit-scrollbar-width:thin
}
.content-body-portlet{
	display: inline-block;
	height:150px;
	width: 300px;
	box-shadow: 0px 1px 8px 1px #eee;
	margin-right: 2em;
	border: 1px solid #fef;
}
.slick-content-dashboard{
	height:100px!important;
	padding:10px;
	border-bottom: 1px solid #eee;
	background: #ffe;
	box-shadow: 0 1px 10px 2px #eef;
}
.content-announcements{
	padding: 10px 20px;
}
.container-recent-course{
	width: 100%;
	background: #eee;
	border: 5px solid #eaeaea;
	box-shadow: 0px 10px 10px 1px #ddd;
}
.course-thumbnail{
	background: white;
	background-image: url("../images/dashboard/paintbackground.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	letter-spacing: 2px;
	display: table;
	width: 100%;
}
.course-menu{
	padding: 5px 10px;
	line-height: 40px;
	height: 40px;
	border-top:1px solid white;
	border-bottom:1px solid white;
	color: #3454a2;
	letter-spacing: 2px;
}

#container {
	width: 200px;
	height: 100px;
}

.title-menu-active{
	border-bottom: 5px solid orange;
}
.container-triangle{
	position:relative;
	bottom:0px;
	border-bottom: 2px solid orange;
}
.triangle{
	height:12px;width:12px;background:orange;transform: rotate(45deg);margin: 0 auto;position: relative;bottom: -7px;

}
.hide{
	display: none!important;
}
.margin-bottom{
	margin-bottom: 1.2em!important;
}
.margin-top{
	margin-top: 1.2em!important;
}
.bottom-border-only-input{
	border: none!important;
	border-bottom: 1px solid rgb(126, 71, 239,0.5)!important;
	letter-spacing: 1px;
}
.content-vertical-center{
	margin: auto 0!important;
}
#nav-tab a.active {
	border: 1px solid #7e47ef;
	border-bottom: none!important;
}
.btn.btn-warning{
	color: white!important;
}
.btn.btn-warning:hover:not(.disabled){
	color: white!important;
}
.btn{
	letter-spacing: 2px;
}
.container-profile{
	border-radius: 50%;
	overflow: hidden;
	height: 200px;
	width: 200px;
	box-shadow: 0px 1px 10px 1px black;
}
.btn-out{
	color: #ee5555;
}
.btn-out:hover{
	color: #a22;
}
.desktop-elearning-text{
	font-size: 14pt;
	letter-spacing: 3px;
	margin-left: 10px;
	font-weight: bold;
}
.btn-link { 
	text-decoration: none!important;
}
.btnThumbnail{
	transition: all 2s ease-in-out;
	height: 130px;
	overflow: hidden;
	text-align: center;
	text-decoration: none!important;
	display: block;
}
.thumbnail-hover-overlay{
	/*background: rgba(4,4,4,0.3);*/
	height:130px;
	display: table-cell;
	vertical-align: middle;
}
.btnThumbnail:hover .thumbnail-hover-overlay{
	/*background: rgba(0,0,0,0.5)!important;*/
	color: #eee;
}
.thumbnail-hover-overlay > h4 {
	background: rgba(100,100,100,.5);
	color:white;
	padding:10px 0;
}
.btnThumbnail:hover .thumbnail-hover-overlay > h4{
	background: rgba(0,0,0,.5)!important;
	color: white!important;
}
.btnThumbnail:hover .course-thumbnail{
	border: 1px solid red;
	transform: scale(1.1);
}
.btnMateri{
	text-decoration: none!important;
	color: #222;
}
.btnMateri:hover{
	color: black;
}
.container-outer-title-materi{
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border-radius: 10px;
	display: table-cell!!important;
	text-align: center!important;
	vertical-align: middle!important;
}
.btnMateri:hover .container-outer-title-materi{
	background: rgba(0,0,0,0.15);
	border-radius: 10px;
	left: 0;
	right: 0;
	top: 0px;
	bottom: 0px;
}
.btnMateri:hover .thumbnail-materi{
	transform: scale(1.06);
}
.title-list{
	color : #aaa;
	font-size: 1rem;
	padding: 1rem;
	border-bottom:1px solid white;
	text-align: center;
	letter-spacing: 2px;
}
.container-title-content{
	padding: 1em;
}
.btnContent{
}
.btnContent:hover .title-content{
	text-decoration: none;
	background: rgba(200, 200, 200, .3);
}
.title-content{
	font-size: 1.1rem;
	font-weight: 400;
	padding:1em;
	padding-right: 0;
	color: white;
	border-bottom: 1px solid white;
}
.container-list-chapter{
	position: absolute;
	top:-20px;
	right:0;
	background: white;
	box-shadow: 0 1px 10px 1px rgba(55,55,55,0.2);
	padding:10px;
	z-index: 10;
}
.dataTables_wrapper .dataTables_paginate .pagination .page-item > .page-link{
	border-radius: 0;
}
.margin-bottom-4{
	margin-bottom: 4rem;
}
.btn_active {
	background: black;
	padding: 2px;
	color: white;
}
.btn-sm{
	/*padding: .4rem!important;*/
}
.modal-container-date{
	padding: 1.3rem 0;
	margin-right:1rem;
	width:200px!important;
	min-width: 100px;
	background:#7e47ef;
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	font-weight: 400;color:white
}
.modal-container-description{	
	padding: 1.3rem 0;
	display:table-cell;
	vertical-align: middle;
	text-align: left;
	min-width: 100px;
	padding-left: 1rem;
	border:1px solid #7e47ef
}
.modal-container-schedule{
	margin-top: 1rem;
}
.thumbnail-materi{
	height: 200px;
	max-height: 200px;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 10px;
	transition: all 0.5s ease-in-out;
}
.container-title-material{
	display: table;
	height:100%;
	width:100%;	
}
.p-detailCourse-material{
	display:table-cell;
	vertical-align: middle;
	text-align: center;
	font-family: Poppins;
	font-weight: bold;
	font-size: 1.5rem;
	letter-spacing: 2px;
}
.table-container-second td{
	background: grey;
	color: white;
}
.table-container-second th{
	background: rgb(100, 100, 100);
	color: white;
}
.status-login{
	color:white;
	font-weight: 800;
	letter-spacing: 2px;
	font-size: 11pt;
}
.bg-ln-gradient1{
	/*orange*/
	background: -moz-linear-gradient(45deg, #ffb76b 0%, #ffa73d 24%, #ffa73d 42%, #ffa73d 42%, #ffa73d 42%, #ff7c00 80%, #ff7f04 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, #ffb76b 0%,#ffa73d 24%,#ffa73d 42%,#ffa73d 42%,#ffa73d 42%,#ff7c00 80%,#ff7f04 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, #ffb76b 0%,#ffa73d 24%,#ffa73d 42%,#ffa73d 42%,#ffa73d 42%,#ff7c00 80%,#ff7f04 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bg-ln-gradient2{
	/*hejo*/
	background: -moz-linear-gradient(45deg, #18f200 2%, #58b253 33%, #00a508 72%, #18f200 100%, #18f200 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, #18f200 2%,#58b253 33%,#00a508 72%,#18f200 100%,#18f200 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, #18f200 2%,#58b253 33%,#00a508 72%,#18f200 100%,#18f200 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bg-ln-gradient3{
	/*biru muda*/
	background: -moz-linear-gradient(45deg, #bce0ee 0%, #3be2d7 4%, #3be2d7 6%, #29b8e5 38%, #29b8e5 62%, #3be2d7 96%, #3be2d7 96%, #bce0ee 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, #bce0ee 0%,#3be2d7 4%,#3be2d7 6%,#29b8e5 38%,#29b8e5 62%,#3be2d7 96%,#3be2d7 96%,#bce0ee 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, #bce0ee 0%,#3be2d7 4%,#3be2d7 6%,#29b8e5 38%,#29b8e5 62%,#3be2d7 96%,#3be2d7 96%,#bce0ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bg-ln-gradient4{
	/*biru tua*/
	background: -moz-linear-gradient(45deg, rgba(30,87,153,1) 0%, rgba(30,87,153,1) 20%, rgba(41,137,216,1) 50%, rgba(30,87,153,1) 80%, rgba(30,87,153,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, rgba(30,87,153,1) 0%,rgba(30,87,153,1) 20%,rgba(41,137,216,1) 50%,rgba(30,87,153,1) 80%,rgba(30,87,153,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bg-ln-gradient5{
	/*purple*/
	background: -moz-linear-gradient(45deg, rgba(120,72,150,1) 0%, rgba(121,26,140,1) 33%, rgba(121,28,140,1) 71%, rgba(120,72,150,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, rgba(120,72,150,1) 0%,rgba(121,26,140,1) 33%,rgba(121,28,140,1) 71%,rgba(120,72,150,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, rgba(120,72,150,1) 0%,rgba(121,26,140,1) 33%,rgba(121,28,140,1) 71%,rgba(120,72,150,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bg-ln-gradient6{
	/*purple second */
	background: -moz-linear-gradient(45deg, rgba(229,112,231,1) 0%, rgba(200,94,199,1) 47%, rgba(168,73,163,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, rgba(229,112,231,1) 0%,rgba(200,94,199,1) 47%,rgba(168,73,163,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, rgba(229,112,231,1) 0%,rgba(200,94,199,1) 47%,rgba(168,73,163,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bg-ln-gradient7{
	/*orange */
	background: -moz-linear-gradient(45deg, rgba(255,219,112,1) 0%, rgba(255,153,0,1) 30%, rgba(255,153,0,1) 65%, rgba(255,219,112,1) 96%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, rgba(255,219,112,1) 0%,rgba(255,153,0,1) 30%,rgba(255,153,0,1) 65%,rgba(255,219,112,1) 96%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, rgba(255,219,112,1) 0%,rgba(255,153,0,1) 30%,rgba(255,153,0,1) 65%,rgba(255,219,112,1) 96%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bg-ln-gradient8{
	/*blue purple*/
	background: -moz-linear-gradient(45deg, rgba(193,101,221,1) 0%, rgba(92,39,254,1) 96%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, rgba(193,101,221,1) 0%,rgba(92,39,254,1) 96%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, rgba(193,101,221,1) 0%,rgba(92,39,254,1) 96%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bg-ln-gradient9{
	/*turquoise blue */
	background: -moz-linear-gradient(45deg, rgba(181,136,247,1) 0%, rgba(29,229,226,1) 96%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, rgba(181,136,247,1) 0%,rgba(29,229,226,1) 96%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, rgba(181,136,247,1) 0%,rgba(29,229,226,1) 96%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bg-ln-gradient10{
	/*hijau metalic */
	background: -moz-linear-gradient(45deg, rgba(0,119,61,1) 10%, rgba(39,170,83,1) 50%, rgba(0,119,61,1) 86%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, rgba(0,119,61,1) 10%,rgba(39,170,83,1) 50%,rgba(0,119,61,1) 86%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, rgba(0,119,61,1) 10%,rgba(39,170,83,1) 50%,rgba(0,119,61,1) 86%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bg-ln-gradient11{
	/*red purple */
	background: -moz-linear-gradient(45deg, rgba(242,12,70,1) 0%, rgba(164,0,128,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, rgba(242,12,70,1) 0%,rgba(164,0,128,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, rgba(242,12,70,1) 0%,rgba(164,0,128,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bg-ln-gradient12{
	/*red orange pink*/
	background: -moz-linear-gradient(45deg, rgba(216,58,0,1) 0%, rgba(219,10,91,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg, rgba(216,58,0,1) 0%,rgba(219,10,91,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg, rgba(216,58,0,1) 0%,rgba(219,10,91,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.bg-ln-gradient13{
	background: -moz-linear-gradient(45deg, rgba(255,103,0,1) 10%, rgba(255,167,61,1) 50%, rgba(255,103,0,1) 86%);
	background: -webkit-linear-gradient(45deg, rgba(255,103,0,1) 10%, rgba(255,167,61,1) 50%, rgba(255,103,0,1) 86%);
	background: linear-gradient(45deg, rgba(255,103,0,1) 10%, rgba(255,167,61,1) 50%, rgba(255,103,0,1) 86%);
}
.bg-ln-gradient14{
	background: -moz-linear-gradient(45deg, rgba(11,100,2,1) 10%, #41bf4d 50%, rgba(11,100,2,1) 86%);
	background: -webkit-linear-gradient(45deg, rgba(11,100,2,1) 10%, #41bf4d 50%, rgba(11,100,2,1) 86%);
	background: linear-gradient(45deg, rgba(11,100,2,1) 10%, #41bf4d 50%, rgba(11,100,2,1) 86%);
}
.bg-ln-gradient15{
	background: -moz-linear-gradient(45deg, #1296c0 10%, #53c5d1 50%, #1296c0 86%);
	background: -webkit-linear-gradient(45deg, #1296c0 10%, #53c5d1 50%, #1296c0 86%);
	background: linear-gradient(45deg, #1296c0 10%, #53c5d1 50%, #1296c0 86%);
}
.bg-ln-gradient16{
	background: -moz-linear-gradient(45deg, rgba(30,87,153,1) 10%, rgba(137,223,213,1) 50%, rgba(30,87,153,1) 86%);
	background: -webkit-linear-gradient(45deg, rgba(30,87,153,1) 10%, rgba(137,223,213,1) 50%, rgba(30,87,153,1) 86%);
	background: linear-gradient(45deg, rgba(30,87,153,1) 10%, rgba(137,223,213,1) 50%, rgba(30,87,153,1) 86%);
}
.bg-ln-gradient17{
	background: -moz-linear-gradient(45deg, rgba(121,26,140,1) 10%, rgba(154,154,221,1) 50%, rgba(121,26,140,1) 86%);
	background: -webkit-linear-gradient(45deg, rgba(121,26,140,1) 10%, rgba(154,154,221,1) 50%, rgba(121,26,140,1) 86%);
	background: linear-gradient(45deg, rgba(121,26,140,1) 10%, rgba(154,154,221,1) 50%, rgba(121,26,140,1) 86%);
}
.bg-ln-gradient18{
	background: -moz-linear-gradient(45deg, rgba(242,12,70,1) 10%, rgba(205,177,220,1) 50%, rgba(242,12,70,1) 86%);
	background: -webkit-linear-gradient(45deg, rgba(242,12,70,1) 10%, rgba(205,177,220,1) 50%, rgba(242,12,70,1) 86%);
	background: linear-gradient(45deg, rgba(242,12,70,1) 10%, rgba(205,177,220,1) 50%, rgba(242,12,70,1) 86%);
}
.bg-ln-gradient19{
	background: -moz-linear-gradient(45deg, rgba(242,12,12,1) 10%, rgba(249,169,76,1) 50%, rgba(242,12,12,1) 86%);
	background: -webkit-linear-gradient(45deg, rgba(242,12,12,1) 10%, rgba(249,169,76,1) 50%, rgba(242,12,12,1) 86%);
	background: linear-gradient(45deg, rgba(242,12,12,1) 10%, rgba(249,169,76,1) 50%, rgba(242,12,12,1) 86%);
}
.container-notification{
	position: absolute;
	bottom: -50vh;
	top: 41px;
	left:0;
	right:0;
	width:50%;
	border:1px solid #eaeaea;
	background:white;
	overflow-y: auto;
	scrollbar-width: thin;
	-webkit-scrollbar-width:thin
}
.container-notification-mobile{
	position: absolute;
	height: 200px;
	top: 3rem;
	left:21vw;
	right:5vw;
	width:50%;
	border:1px solid #eaeaea;
	background:white;
	z-index: 99;
	overflow-y: auto;
	scrollbar-width: thin;
	-webkit-scrollbar-width:thin
}