.img-center{
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.no-border{
	border: 0px;
}
.sort-by{
	width: 30%;
}
@media (max-width: 720px){
	.sort-by{
		width: 50%;
	}
}

.card-border-sb{
	
	    border: 1px solid rgba(213, 217, 248, 0.6);
}

.card-bg-sb{
	
	  background: rgba(213, 217, 248, 0.1);
}
.text-image{
	position: absolute;
    width: 100%;
    padding: 7px 1.25rem 0px 1.25rem;
	font-size: 18px;
    color: white;
	font-weight: 500;
}
.content-backgroud{
	height: 15rem;
    position: relative;
    width: 100%;
}
.content-backgroud-text{
	background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
	border-radius: .25rem;
}
.content-text{
	padding: 1.5rem;
}
.bg-white{
	background: white !important;
}
.pl-content{
	overflow: auto;
	height: 350px;
}
.pl-imgcontent{
	padding: 1px;
}
.pl-imgcontent:hover{
	opacity: 0.8;
	cursor: pointer;
}
.pl-imgcontent:focus{
	border: 1px solid #000000;
}
.pl-imgcontent img{
	width: 100%;
}
.cekicon{
	position: absolute;
    top: 15px;
    left: 15px;
}
.icontitle{
	background: #4a4a4a;
    border-radius: 50%;
    border: 2px solid #ffffff;
    color: white;
    display: flex;
    width: 100%;
    height: 100%;
}
.card.repository{
	box-shadow: none;
	border-radius: 8px;
}
.card.repository img{
	height: 166px;
	border-top-left-radius: inherit;
    border-top-right-radius: inherit;
}
.card.repository .card-body{
	padding: 13px 16px;
}
.card.repository h4{
	font-size: 13px;
	font-weight: 500!important;
}
.card.repository i.image{
	color: #d93025;
    font-size: 22px;
}
i.image{
	color: #d93025 !important;
    font-size: 22px;
}
i.file-doc{
	color: #4285f4;
    font-size: 22px;
}
i.file-slides{
	color: #f4b400;
    font-size: 22px;
}
i.file-excel{
	color: #0f9d58;
    font-size: 22px;
}
i.folder{
	color: #5f6368;
    font-size: 22px;
}
.width-40{
	width: 40%;
}
.width-20{
	width: 20%;
	white-space: nowrap;
}
.width-10{
	width: 10%;
	white-space: nowrap;
}
.img-tr{
	width: 22px;
	height:22px;
}
.table.repository td{
	vertical-align: middle;
}
.border-top{
	border-top: 1px solid rgba(213, 217, 248, 0.6);
}
@media (max-width:720px){
	table.repository tbody tr th{
		width: 260px !important;
	}
	.width-40{
		width: 20% !important;
	}
}
table.repository tbody tr th{
	width: 555px;
}
table.repository tbody tr td{
	white-space: nowrap;
}

.thumbnail-grid {
    display: block;
    margin: auto;
}
.thumbnail-grid img{
    width: 100%;
	height: 157px;
	object-fit: cover;
}

.thumbnail-grid i {
    font-size: 100px !important;
}

.card.thumbnail-video .card-body{
	padding: 10px;
}
.card.thumbnail-video .card-body img{
	width: 100%;
}
 .play-icon {
     opacity: 0;
     position: absolute;
}
 .play-icon .mdi {
     bottom: 0;
     height: 40px;
     left: 0;
     margin: auto;
     position: absolute;
     right: 0;
     top: 0;
     width: 40px;
}
.thumbnail-img{
	position: relative;
	height: 157px;
	text-align: center;
}
.thumbnail-img img{
	width: 100%;
    height: 100%;
    object-fit: cover;
}
.thumbnail-img i.icon-notb{
	font-size: 100px;
}
.thumbnail-img:hover .play-icon {
     background: #000 none repeat scroll 0 0;
     border-radius: 2px;
     bottom: 0;
     color: #fff;
     font-size: 35px;
     left: 0;
     opacity: 0.4;
     position: absolute;
     right: 0;
     text-align: center;
     top: 0;
     transition-duration: 0.4s;
}

.modal-custom{
	background: #1f1f1ff2 !important
}
.bar-custom{
	position: fixed;
    background: linear-gradient(to bottom,rgba(0,0,0,0.65) 0%,transparent 100%);
    width: 100%;
	z-index: 1;
}
.font-size-22{
	font-size: 22px;
}
.bar-custom a{
	cursor: pointer;
}
.bar-custom{
	color: white !important;
}
.menu-right{
	color: #ffffff;
}
.menu-right i{
	padding: 5px 8px;
}
.menu-right i:hover{
    background: #8b8787ba;
    border-radius: 3px;
	color: #ffffff;
}
/* .modal-content-show{ */
	/* margin-top: 100px; */
    /* height: 500px; */
    /* padding-left: 20px; */
/* } */
.modal-content.custom{
	margin-top: 55px;
	border-radius: 0px;
	background-color: transparent !important;
	border:none !important;
}
.modal-dialog.custom{
	max-width: 60%;
    padding-left: 15px;
	height: 500px;
}
.height-500{
	height: 570px;
}
@media (max-width: 720px){
	.modal-dialog.custom{
		max-width: 92%;
	}
	.pilihkelas{
		height: auto !important;
		margin-top: 5px;
	}
	.reusepost .header-list{
		display: none;
	}
	.reusepost .tanggal{
		display: none;
	}
	.reusepost .tanggal.detail{
		display: block;
		margin-left: 3rem!important;
	}
	.reusepost .guru{
		margin-left: 3rem!important;
	}
	.reusepost .guru .avatar-xs{
		display: none;
	}
	.reusepost .list{
		border-bottom: .0625rem solid #e0e0e0;
		padding-bottom: .5rem!important;
		margin-bottom: 0px !important
	}
}
.reusepost{
	border: none;
}
.reusepost .modal-header{
	background: #616161;
}
.reusepost button{
	color: white;
    text-shadow: none;
    font-size: 25px;
    opacity: inherit;
}
.pilihkelas{
	display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    flex-direction: column-reverse;
    height: 5rem;
    -webkit-justify-content: space-between;
    justify-content: space-between;
	color: white;
	font-size: 15px;
	font-weight: 400;
}
.reusepost .hidden{
	overflow-x: hidden;
    height: 25.25rem;
}
.reusepost .hidden.detail{
	overflow-x: hidden;
    height: 21.25rem;
}
.reusepost .list:hover{
	cursor: pointer;
}
.pilihkelas .back{
	position: absolute;
    color: white;
    height: 1.5rem;
    width: 1.5rem;
    top: 12px;
	font-size: 25px;
	opacity: 4;
}
.pilihkelas .back:hover{
    color: black;
	cursor: pointer;
}
.font-size-25{
	font-size: 25px;
}
.font-size-31{
	font-size: 31px;
}
#footer-reuse{
	width: 100%;
}
#footer-reuse button{
	font-size: 15px;
	text-transform: uppercase;
}

.row-course:hover {
	background-color: #dedede;
}
.row-classwork:hover {
	background-color: #dedede;
}
.row-classwork.active {
	background-color: #aaf6f8;
}
.video-js{
	max-width: 100% !important;
}
.border-none{
	border: none;
}
.badge-custom{
	border-radius: 30px;
    font-weight: 400;
	color: #4b4f56;
    background-color: #f5f6f7;
	cursor: pointer;
	font-size: 14px;
}
.badge-custom i{
	font-size: 17px;
}
.custom-bar-text{
	width : fit-content;
}
@media (max-width:720px){
	.custom-bar-text{
		width : 300px;
	}
	.badge-custom{
		margin-bottom: 10px;
	}
}
.cursor-pointer {
	cursor: pointer;
}

.card.link{
	box-shadow: none;
	border-radius: 0.5rem;
    border: .0625rem solid #dadce0;
    overflow: hidden;
	margin-bottom: 24px;
}
.card.link .card-body{
	padding: 0px;
}
.border-bottom-none{
	border-bottom: none;
}
.border-bottom-blue{
	border-bottom: 2px solid #556ee6;
}
.sisipkan-video ul{
	width: fit-content;
}
.sisipkan-video .nav-justified .nav-item{
	flex-basis: inherit;
}
.mt-5{
	margin-top: 5.5rem!important
}
.head-tabs-yt{
	box-shadow: 0px 3px 3px 0px #e1e1e1;
    border-bottom: 1px solid #e1e1e1;
}
.label-url{
	font-size: 13px;
}
@media (max-width: 720px){
	.label-url{
		padding-left: 0px !important;
	}
}
.label-logo-yt img{
	width: 100px;
    height: 25px;
    object-fit: cover;
}
.custom-comment textarea{
	resize: none;
	overflow: hidden;
	border-right: none;
}
.custom-comment .input-group-text{
	background: none !important;
    padding: 0px 10px;
}
.custom-comment .input-group-text i{
	font-size: 17px;
    color: #818181;
}
.modal-with-comment{
	max-width: 85% !important;
}
.modal-with-comment .content-comment{
	height:540px;
	padding-left: 0px;
	padding-right: 0px;
}
.modal-with-comment .content-comment .card{
	height:100%;
}
.modal-with-comment .content-comment .card-header{
	background: white; 
	border-bottom: 1px solid #e1e1e1;
}
.modal-with-comment .content-comment .card-body{
	overflow-x: auto;
}
@media (max-width: 720px){
	.modal-with-comment{
		max-width: 93% !important; 
	}
	.modal-with-comment .content-comment{
		padding-left: 12px;
		padding-right: 12px;
	}
	.modal-with-comment .content-comment{
		height: 300px;
	}
	.arrow-left-modal-comment{
		top: 40% !important;
	}
	.arrow-right-modal-comment{
		top: 40% !important;
	}
}
.arrow-left-modal-comment{
	color: #6e6e6e; 
	font-size: 30px; 
	position: absolute;  
	top: 50%; 
	left: 1.5%
}
.arrow-right-modal-comment{
	color: #6e6e6e; 
	font-size: 30px; 
	position: absolute;  
	top: 50%; 
	right: 1.5%
}
.in-modal{
	overflow: initial !important;
}
.btn-secondary.custom{
	background-color: #f8f9fa;
    border-color: #f8f9fa;
	color: #74788d !important;	
}
.btn-secondary.custom:focus{
	background-color: #f8f9fa;
    border-color: #f8f9fa;
	color: #74788d !important;	
}
.img-add-file{
	border-top-left-radius: 0.4rem;
    background: #f8f9fa;
    border-bottom-left-radius: 0.4rem;
    text-align: center;
}
.img-add-file i{
	font-size: 60px;
    color: #4285f4;
    opacity: 0.8;
}
.slider-loading{
	position: absolute;
	width: 100%;
	height: 5px;
	overflow-x: hidden;
	bottom: 0
}

.line-docs{
    position: absolute;
    opacity: 0.8;
    background: #4285f4;
    width: 150%;
    height: 5px;
}
.line-excel{
    position: absolute;
    opacity: 0.8;
    background: #0f9d58;
    width: 150%;
    height: 5px;
}
.line-slides{
    position: absolute;
    opacity: 0.8;
    background: #f4b400;
    width: 150%;
    height: 5px;
}

.subline{
  position:absolute;
  background: aliceblue;
  height:5px; 
}
.inc{
  animation: increase 2s infinite;
}
.dec{
  animation: decrease 2s 0.5s infinite;
}

@keyframes increase {
   from { left: -5%; width: 5%; }
   to { left: 130%; width: 100%;}
}
@keyframes decrease {
   from { left: -80%; width: 80%; }
   to { left: 110%; width: 10%;}
}

iframe {
	border:none;
}
iframe.youtube{
	width: 385.667px;
    height: 225px;
}
.color-docs{
	color: #4285f4 !important;
}
.color-excel{
	color: #0f9d58 !important;
}
.color-slides{
	color: #f4b400 !important;
}
.element{
	border-radius: 10px;
	animation : example 5s;
}
@keyframes example {
  from {background-color: #fffbd3;}
  to {background-color: transparent;}
}

/* Quill Custom */
.quill-fix.ql-container{
	height: auto !important;
}
.quill-fix .ql-editor{
	height: 200px;
}
.ql-align-center {
	text-align: center;
}
.ql-align-left {
	text-align: left;
}
.ql-align-right {
	text-align: right;
}
.ql-align-justify {
	text-align: justify;
}
.ql-remove::after{
    content: "X";
}

/* Quill Custom */
.pengumuman{
	padding: 20px;
	box-shadow: 10px 10px 0rem 0px rgb(85 110 230);
    border: 1px solid #556ee6;
	border-radius: 3px;
}
.pengumuman p.desc{
	text-align: justify;
	margin-top: 18px;
}

.question-desc img, .card-quest img, .student-choice img, .exam-choice img {
	max-width: 100%;
}

.card-quest-exam:hover {
	background-color: #eee;
}

.student-answers img {
	max-width: 25%;
}

#total-grade {
    position: fixed;
    font-size: 15px;
    top: 95px;
    right: 10px;
    z-index: 9999;
    text-align: center;
    line-height: 30px;
    border: 0;
    border-radius: 2px;
    padding-top: 7px;
    text-decoration: none;
}

#back-to-top {
    position: fixed;
    font-size: 20px;
    bottom: 70px;
    right: 40px;
    z-index: 9999;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 30px;
    background: #dddddd;
    color: #444;
    cursor: pointer;
    border: 0;
    border-radius: 2px;
    padding-top: 7px;
    text-decoration: none;
    transition: opacity 0.2s ease-out;
    opacity: 0;
}
#back-to-top:hover {
    background: #e9ebec;
}
#back-to-top.show {
    opacity: 1;
}

/* Chrome, Safari, Edge, Opera */
.numberval::-webkit-outer-spin-button,
.numberval::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
.numberval {
  -moz-appearance: textfield;
}

/* Setup MQ modal */
.mq-body .keypad{
	padding: 16px;
    overflow-x: scroll;
}
.mq-body .keypad .basic-keypad-inner{
	height: 240px;
    width: 705px;
}
.mq-body .keypad .basic-keypad-inner .column{
	display: inline-table;
    margin-right: 18px;
}
.mq-body .keypad .basic-keypad-inner .column .key{
	display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    line-height: 20px;
    text-align: center;
    margin-right: 4px;
    margin-top: 4px;
    overflow: hidden;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
.mq-body .keypad .basic-keypad-inner .column .key.grey{
	background-color: #F2F2F2;
}
.mq-body .keypad .basic-keypad-inner .column .key.orange{
	background-color:#fdf2df;
}
.mq-root-block{
	padding-top: 5px !important;
}

.katex-display {
	display: inline-block !important;
}
.katex-display .katex {
    display: inline-flex !important;
    max-width: 100% !important;
}
/* Setup MQ modal */

/* Setup Selec2 */
.select2-box .select2-container--default .select2-selection--single .select2-selection__arrow,
.select2-box .select2-container--default .select2-selection--multiple .select2-selection__arrow {
	top: 5px !important;
    right: 10px !important;
}

.select2-box.round .select2-container--default .select2-selection--single,
.select2-box.round .select2-container--default .select2-selection--multiple {
	min-height: calc(1.5em + .94rem + 2px) !important;
	border-radius: 30px !important;
	border: 1px solid #ced4da !important;
}

.select2-box.box .select2-container--default .select2-selection--single,
.select2-box.box .select2-container--default .select2-selection--multiple {
	min-height: calc(1.5em + .94rem + 2px) !important;
	border: 1px solid #ced4da !important;
}

.select2-box .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 35px !important;
	padding-left: 20px !important;
}

.select2-box .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 35px !important;
	padding-left: 20px !important;
}

.select2-box .select2-container--default .select2-selection--multiple .select2-selection__rendered {
	line-height: 22.5px !important;
}

.select2-container--open .select2-dropdown--below {
	border-radius: 5px !important;
	border: 1px solid #ced4da !important;
}
.select2-container--default .select2-search--dropdown {
	background-color: unset !important;
}

/* Virtual */
.papan{
	background: #486e42;
    height: 10px;
    width: 80%;
    margin: auto;
}
.papan2{
	background: #753d16;
    height: 10px;
    width: 75%;
    margin: auto;
}
.nama-siswa{
	margin-bottom: 0px;
    font-weight: bold;
	font-size: 12px;
}
.nama-guru{
	margin-bottom: 0px;
    font-weight: bold;
	font-size: 15px;
	color: #4e7349;
}
.hadir{
	color: #3ccb10;
}
.tidak-hadir{
	color : #ed3523;
}
.opacity-6{
	opacity: 0.6;
}
.mapel{
	margin: 0px;
	margin-top: 10px;
}
.col-md-1.custom{
	width: 12.5% !important;
	max-width: 12.5% !important;
	flex: unset;
}
.btn-control.left{
	left: 50px;
}
.btn-control.right{
	right: 5px;;
}
.btn-control{
    color: #000000;
    font-size: 35px;
    height: 50px;
    line-height: 50px;
    margin-top: -25px;
    opacity: 1;
    padding: 0;
    position: absolute;
    text-shadow: inherit;
    top: 50%;
    width: 50px;
    z-index: 1;
}
/* Virtual */

.bg-score-1 {
	background-color: #ffb4bb;
}

.bg-score-2 {
	background-color: #ffdfb9;
}

.bg-score-3 {
	background-color: #ffffb9;
}

.bg-score-4 {
	background-color: #baffc9;
}

.bg-score-5 {
	background-color: #bae1ff;
}
@media (max-width: 720px){
	.great-presensi{
		font-size: 11px !important;
	}
}
.choose-theme{
	background: #ffffff;
    padding: 8px;
    border-radius: 3px;
    box-shadow: 0 5px 10px 1px rgba(0,0,0,.08);
}
.content-text.v-mobile .icon-theme{
	display: none;
}
.content-text.v-mobile .d-mobile-none{
	display: block;
}
@media (max-width: 720px){
	.font-size-10-mobile{
		font-size: 10px !important;
	}
	.font-size-11-mobile{
		font-size: 11px !important;
	}
	.font-size-12-mobile{
		font-size: 12px !important;
	}
	.font-size-13-mobile{
		font-size: 13px !important;
	}
	.font-size-14-mobile{
		font-size: 14px !important;
	}
	.font-size-15-mobile{
		font-size: 15px !important;
	}
	.font-size-16-mobile{
		font-size: 16px !important;
	}
	.font-size-17-mobile{
		font-size: 17px !important;
	}
	.font-size-18-mobile{
		font-size: 18px !important;
	}
	.font-size-19-mobile{
		font-size: 19px !important;
	}
	.font-size-20-mobile{
		font-size: 20px !important;
	}
	.content-text.v-mobile{
		padding: 16px !important;
	}
	.content-text.v-mobile h1{
		font-size: 20px !important;
	}
	.content-text.v-mobile h4.f-kelas{
		font-size: 15px !important;
	}
	.content-text.v-mobile h4.f-code{
		font-size: 12px !important;
	}
	.content-text.v-mobile .choose-theme{
		font-size: 18px;
		color: #495057;
		padding: 4px 9px;
	}
	.content-text.v-mobile .icon-theme{
		display: block !important;
	}
	.content-text.v-mobile .d-mobile-none{
		display: none !important;
	}
}
.modal-fullscreen {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0;
}
.modal-fullscreen .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0;
}
.modal-fullscreen .modal-header {
    border-radius: 0;
}
.modal-fullscreen .modal-body {
    overflow-y: auto;
}
.modal-fullscreen .modal-footer {
    border-radius: 0;
}
.table.custom-angket thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #cccccc;
}
.table.custom-angket thead th:hover {
    background: #cccccc !important;
}
.table.custom-angket thead th.active-block {
    background: #34c38f;
	color: #ffffff;
	border-color: #34c38f;
}
.table.custom-angket thead th.active-block:hover {
    background: #34c38f !important;
	color: #ffffff;
	border-color: #34c38f;
}
.table-bordered.custom-angket td, .table-bordered.custom-angket th {
    border: 1px solid #cccccc;
}
.floating { 
    animation-name: floating; 
    animation-duration: 1.5s; 
    animation-iteration-count: infinite; 
    animation-timing-function: ease-in-out; 
} 

.floating:hover{
	animation: none;
}

@keyframes floating { 
	0% { transform: translate(0,  0px); } 
	50%  { transform: translate(0, 7.5px); } 
	100%   { transform: translate(0, -0px); }     
}