.custom-p{
	 user-select: none;
}
.alert{
	font-size: 14px !important;
}
.btn{
	user-select: none;
}
.btn:after{
	margin-left: 5px;
}
.custom-login-btn{
    font-size: 14px; 
    background: rgb(42,235,198);
    background: linear-gradient(90deg, rgba(42,235,198,1) 4%, rgba(107,126,229,1) 100%);
    border: none; 
    padding: 10px 20px; 
    border-radius: 20px; 
    color: white; 
    height: 50px;
    /*background-color: #511877;*/
    background-size: 200% 200%;
    -webkit-animation: bg-animation 5s ease infinite;
    -moz-animation: bg-animation 5s ease infinite;
    -o-animation: bg-animation 5s ease infinite;
    animation: bg-animation 5s ease infinite;
    transition: 0.3s;
}
@keyframes bg-animation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
.half-background{
	position: fixed;
    top: 0;
    left: -300px;
    width: 200%;
    height: 30vh;
    background-color: #033E8A; 
    z-index: 1;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
}

.rounded-btn-sm{
	border-radius: 10px !important;
	padding: 5px 15px !important;
}

.star-hover{
	color: orange;
}

.bg-blue{
	background-color: #033E8A;
}
.color-blue{
	color: #033E8A;
}
.custom-login-waiting{
	font-weight: 600; 
	font-size: 1.3rem; background: rgb(89,188,255);
	background: linear-gradient(90deg, rgba(89,188,255,1) 0%, rgba(14,182,241,1) 22%, rgba(226,101,232,1) 38%, rgba(222,87,231,1) 43%, rgba(186,102,225,1) 56%, rgba(45,201,118,1) 100%);
  	-webkit-background-clip: text;
  	-webkit-text-fill-color: transparent;
}
.br-20-ex-br{
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
}
.br-20-ex-bl{
	border-top-right-radius: 20px;
	border-top-left-radius: 20px;
	border-bottom-right-radius: 20px;
}
.br-20-ex-t{
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 20px;
}
.br-20-ex-tl{
	border-top-right-radius: 20px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}
.br-20-ex-tr{
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}


.btn-blue{
	background-color: #033E8A !important;
	color: white !important;
}
.course-nav-bar{
	padding: 5px 20px !important;
	border-radius: 10px !important;
}

.course-detail-list{
	list-style: none;
	margin-left: -30px;
}
.course-detail-list li{
	display: inline-block;
	/*border: 0.2px solid grey;*/
	padding: 10px 20px;
	margin-right: 10px;
	border-radius: 7px;
	background-color: #343A40;
	margin-bottom: 10px;
	font-size: 14px;
	text-align: center;
	color: white;
}
.class-detail-list{
	list-style: none;
	margin-left: -40px;
}
.class-detail-list li{
	display: inline-block;
	font-size: 12px;
}

.bg-purple{
	background-color: #511877;
}
.modal{
	z-index: 99;
}
.modal-dark{
	background-color: rgb(0,0,0,0.4);
}
.loader {
  border: 5px solid #51C4D3;
  border-top: 5px solid #EAEBED;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
  /*margin: auto auto;*/
}

.box-loader{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 10px solid #88C1FF;
	border-top: 10px solid #033E8A;
	animation: spin 2s linear infinite;
  	display: inline-block;
}

.loader-inline{
  border: 2px solid #033E8A;
  border-top: 2px solid #FFF;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  animation: spin 2s linear infinite;
  display: inline-block;
  /*margin: auto auto;*/
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.content-box{
	max-width: 1000px;
}
.custom-shape-divider-top-1636970682 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top-1636970682 svg {
    position: relative;
    display: block;
    width: calc(300% + 1.3px);
    height: 96px;
}

.custom-shape-divider-top-1636970682 .shape-fill {
    fill: #511877;
}
.video-card{
	padding: 20px;
	transition: 0.3s;
}
.video-card:hover{
	color: white;
	background-color: #343A40;
	transition: 0.3s;
}
.video-card header{
	font-size: 14px;
	font-weight: 500;
	
}
.ver-list{
	margin: 0 20px;
}
.ver-list-li{
	display: inline-block;
	margin-right: 10px;
	cursor: pointer;
	position: relative;
	padding: 10px 0;
	font-size: 14px;
	color: grey;
	transition: 0.2s;
	overflow: hidden;
}

.ver-list-li-underline {
	/*display: none;*/
  	content:'';
  	position:absolute;
  	bottom:0;
  	left:0;
  	right:0;
 	background: grey;
 	width: 0;
  	height: 1px;
  	transition-delay: 0.7s;
  	transition: 0.3s;
}
.ver-list-li-active{
	font-weight: 600;
	color: black;
	transform: scale(1.1);
}
.ver-list-li-underline-active {
	width: 70px;
	transition: 0.3s;
}
.ver-list-li:hover{
	/*font-weight: 600;*/
	color: black;
	transition: 0.2s;
}

/*.ver-list-li:hover .ver-list-li-underline{
	width: 70px;
	transition: 0.3s;
}*/

.all-course-card{
	padding: 20px; 
	margin: 10px 20px; 
	border-radius: 25px; 
	background-color: #2A4766;
}
.all-course-card p{
	font-size: 12px; 
	/*transition: 0.3s;*/
	/*height: 0;
	overflow: hidden;*/
	user-select: none;
}
/*.all-course-card:hover p{
	height: 150px;
	transition: 0.3s;
}*/
.db-setting-gear{
	text-decoration: none; 
	color: black;
	transition: 1s;
  	/*background-color: white;*/
  	display: inline-block;
  	width: 40px;
  	height: 40px;
  	padding: 0;
}
.db-setting-gear:hover{
	/*text-decoration: none; */
	color: black;
	/*transform: rotate(90deg);*/
	/*transition: 1s;*/
	animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.mapel-class-card{
	width: 175px; 
	margin-right: 10px; 
	padding: 0; 
	display: inline-block; 
	background: rgb(255,255,255,1); 
	backdrop-filter:blur(5px);
	transition: 0.3s;
	color: black;
}
.mapel-class-card:hover{
	background-color: black;
	color: white;
	transition: 0.3s;
}
.custom-margin{
	margin-top: 85px; 
	margin-bottom: 105px;
}
.all-course-subbab-icon{
	display: flex;
	margin: 20px;
}
.all-course-subbab-icon-content{
	padding: 20px;
	border-radius: 10px;
	background-color: white;
	margin: 5px;
	transition: 0.3s;
	height: 100px;
	width: 33%;
	text-align: center;
}
.all-course-subbab-icon-content header{
	font-size: 12px;
}
.all-course-subbab-icon-content h5{
	font-size: 2rem;
}
.all-course-subbab-icon-content:hover{
	padding: 20px;
	/*border-radius: 5px;*/
	transform: scale(1.05);
	background-color: black;
	color: white;
	transition: 0.3s;
}
.paid-mapel-card{
	width: 100%;
	/*padding: 10px;*/
	position: relative;
	/*border: 1px solid black;*/
	/*border-bottom: 1px solid #EAEBED;*/
	overflow: hidden;
	height: 90px;
}
.paid-mapel-card:hover{
	/*background-color: #FFC107;*/
	/*background-color: #343A40;*/
}

.mapel-card-body{
	width: 100%;
	/*background-color: #88C1FF;*/
	background-color: #ffffff;
	transition: 0.4s;
	position: absolute;
	top: 0px;
	left: 0;
	height: 90px;
	padding: 10px 20px;
	/*padding: 20px;*/
}
.mapel-card-action{
	padding: 10px;
	/*display: none;*/
	width: 50px;
	margin-left: auto;
	margin-right: -50px;
	height: 90px;
	transition: 0.3s;
	background-color: white;
}
.paid-mapel-card:hover .mapel-card-body{
	/*margin-left: -50px;*/
	width: calc(100% - 50px);
	transition: 0.4s;
	/*background-color: #EAEBED;*/
	/*background: rgb(0,0,0,0);*/
	background-color: #FFC107;
	margin-right: 10px;
	transition: 0.3s;
	color: black;
	/*border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;*/
}

.paid-mapel-card:hover .mapel-card-action{
	margin-right: 0;
	transition: 0.3s;
}
.custom-list-left{
	/*list-style: none;*/
	list-style-type: circle;
	margin-left: -20px;
	text-align: left;
}
.custom-list-left li{
	margin-bottom: 5px;
	font-weight: 350;
	font-size: 13px;
}

.custom-list-left li a{
	color: black;
}

.br10{
	border-radius: 10px !important;
}
.br20{
	border-radius: 20px !important;
}
.br25{
	border-radius: 20px !important;
}
.br0{
	border-radius: 0px !important;
}
.br-w-lt-10{
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
.br-w-lt-20{
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}
@-moz-keyframes bg-animation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes bg-animation {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

.sub-bab-card{
	padding: 20px 10px 20px 10px; 
	color: black;
	transition: 0.3s;
	margin: 0;
	/*background-color: #864879;*/
	background-color: #ffffff;
	position: relative;
	display: flex;
	user-select: none;
}
.sub-bab-card:hover{
	background-color: #EAEBED;
	color: black;
	transition: 0.3s;
}
.top-nav{
    padding: 20px 30px 20px 20px; 
    text-align: center; 
    color: #FFF; 
    background-color: #033E8A;
    /*bg-light*/
    /*background-color: #F8F9FA; */
     /*background-color: #4DA3FF;*/
     /*background-color: #511877;*/
    /*yellow*/
    /*background-color: #FFC107;*/
    font-weight: 400;
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%;
    z-index: 98;
    font-size: 14px;
    box-shadow: -1px 4px 9px -1px rgba(0,0,0,0.3);
-webkit-box-shadow: -1px 4px 9px -1px rgba(0,0,0,0.3);
-moz-box-shadow: -1px 4px 9px -1px rgba(0,0,0,0.3);
}
.center{
	margin: 0 auto !important; 
	width: 100% !important;
	display: block !important;
}
.input-container {
  display: flex;
  width: 100%;
  margin-bottom: 15px;
}
.input-container button{
	border: none;
	/*border-radius: 0;*/
	padding: 0 10px;
}
.btn-right{
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
.input-field{
    width: 100%;
    height: 50px;
    padding: 5px 10px;
    border: none;
    /*border-bottom: 1px solid grey;*/
    /*color: grey;*/
    transition: 0.3s;
    margin: 0 auto;
    display: block;
    font-size: 14px;
    color: black;
    padding: 15px 20px;
    border-radius: 25px;
    background-color: #F8F9FA;
}

.input-field-sm{
    height: 30px !important;
    font-size: 12px !important;
}
.input-field:focus {
	/*height: 48px;*/
    /*outline: 1px solid grey;*/
    /*border: 1px solid #E4E4E6;*/
    /*border: 1px solid black;*/
    outline: 1px solid #DEE2E6 !important;
    transition: 0.3s;
    /*box-shadow: none;*/
}
.input-search{
    background-image: url('public/ionicons/png/512/android-search.png');
    box-sizing: border-box; 
    background-position: 10px 10px; 
    background-repeat: no-repeat; 
    background-color: white;
    font-size: 14px;
}
.account-set-list{
	list-style: none;
}
.account-set-list li{
	cursor: pointer;
	margin-left: -40px;
	/*margin-bottom: px;*/
	font-size: 14px;
	/*border: 1px solid grey;*/
	/*border-bottom: 1px solid #CBEAEF;*/
	transition: 0.3s;
	padding: 10px 20px;
	display: block;
	font-weight: 400;
	color: grey;
}
.account-set-list li:hover{
	transition: 0.3s;
	background-color: #F8F9FA;
}
.account-set-list li i{
	color: #033E8A !important;
	font-size: 15px;
	margin-right: 30px;
}
.account-set-list li a{
	background-color: white;
	color: inherit;
	text-decoration: none;
}
.a-navigate{
	text-decoration: none;
	/*background-color: */
	color: white;
	padding: 3px 10px;
	border-radius: 10px;
	font-size: 0.8rem;
	/*background-color: rgb(255,255,255,0.9);*/
	transition: 0.3s;
	cursor: pointer;
}
.a-navigate:hover{
	color: #033E8A;
	text-decoration: none;
	/*background-color: white;*/
	background-color: white;
}

.a-navigate-light{
	text-decoration: none;
	/*background-color: */
	color: black;
	padding: 3px 10px;
	border-radius: 10px;
	font-size: 0.8rem;
	/*background-color: rgb(255,255,255,0.9);*/
	transition: 0.3s;
	cursor: pointer;
}
.a-navigate-light:hover{
	color: white;
	text-decoration: none;
	background-color: black;
}
.navigator{
	cursor: pointer;
}
.bottom-bar{
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 0 10px;
    /*right: auto;*/
    /*background: rgb(0,0,0,0.4);*/
    background-color: #FFF;
    backdrop-filter: blur(5px);
    display: flex;
  	justify-content: center;
  	z-index: 99;
  	height: 80px;
}
.bottom-bar-component{
	border-radius: 25px;
	width: 20%;
	color: grey;
	display: grid;
	place-items:center;
	padding: 10px;
	margin: 5px;
	text-align: center;
	transition: 0.3s;
	text-decoration: none;
}

.bottom-bar-component:hover{
	color: #033E8A;
	text-decoration: none;
}

.bottom-bar-component-active{
	/*background-color: #282923;*/
	/*background-color: #511877;*/
	transform: translateY(-10px) scale(1.1);
	background-color: white;
	transition: 0.3s;
	color: #033E8A !important;
	text-decoration: none;
	border-radius: 20px;
}

.bottom-bar-component i{
	font-size: 1.4rem;
	color: inherit;
	margin-bottom: 0;
}

.bottom-bar-desc{
	/*display: none;*/
	font-size: 10px;
	text-align: center;
}

/*start*/
.custom-shape-divider-bottom-1636090972 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-bottom-1636090972 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 86px;
}

.custom-shape-divider-bottom-1636090972 .shape-fill {
    fill: #FFFFFF;
}
/*end*/
.pointer{
	cursor: pointer;
}
.msg-container{
	border: 1px solid black;
}
.msg-box{
	/*border: 1px solid black;*/
	display: block;
	padding: 0 20px;
	font-size: 12px;
	user-select: none;
	padding: 15px; 
	border-bottom: 1px solid #EAEBED;
}
.msg{
	display: flex;
}
.msg-user{
	width: 70px;
	display: grid;
	place-items: center;
}
.msg-body{
	width: calc(100% - 70px);
}
.msg-body span{
	font-weight: 400;
	font-size: 11px;
	color: grey;
}
.msg-body header{
	font-size: 13px;
	font-weight: 600;
}
.msg-out{
	/*border: 1px solid #DEE2E6;*/
	overflow-wrap: break-word;
	word-wrap: break-word;
}
.msg-in{
	/*border: 1px solid #DEE2E6;*/
	overflow-wrap: break-word;
	word-wrap: break-word
}
.thumbnail-img{
	width: 40px;
	height: 40px;
	border: 1px solid grey;
	overflow: hidden;
	background-color: grey;
	border-radius: 50%;
}
.thumbnail-img img{
	width: 100%;
	margin: 0 auto;
	display: block;
}
.coms_body{
	font-size: 14px; 
	/*max-height: 100vh;*/
	overflow: auto;
}

.coms_body::-webkit-scrollbar {
  width: 1px;
}
 
.coms_body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3);
}
 
.coms_body::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}