/*-----------------------------------------------------------------------------------*/
/*  Max Width 1366px
/*-----------------------------------------------------------------------------------*/
@media only screen and (max-width: 1366px) {

}

/*-----------------------------------------------------------------------------------*/
/*  Max Width 1280px
/*-----------------------------------------------------------------------------------*/
@media only screen and (max-width: 1280px) {

}

/*-----------------------------------------------------------------------------------*/
/*  Max Width 1024px
/*-----------------------------------------------------------------------------------*/
@media only screen and (max-width: 1024px) {

	.skwp-user-area {
		padding: 10px 20px;
	}

	.skwp-menu-item a {
		padding: 12px 20px;
	}

	.sakolawp-inner-content {
		padding: 20px;
	}

	.skwp-navigation-inner .skwp-user-img img {
		width: 60px;
   		height: 60px;
	}

	.skwp-back i {
		font-size: 12px;
	}

	.skwp-back a {
		padding: 7px 15px;
		font-size: 15px;
	}

}

/*-----------------------------------------------------------------------------------*/
/*  Max Width 768px
/*-----------------------------------------------------------------------------------*/
@media only screen and (max-width: 768px) {

	.skwp-column-main {
		width: 100%;
	}

	.skwp-column-2 {
		-webkit-box-flex: 0;
	    -ms-flex: 0 0 100%;
	    flex: 0 0 100%;
	    max-width: 100%;
	}

	.skwp-column-3 {
		-webkit-box-flex: 0;
	    -ms-flex: 0 0 100%;
	    flex: 0 0 100%;
	    max-width: 100%;
	}

	.skwp-column-4 {
		-webkit-box-flex: 0;
	    -ms-flex: 0 0 100%;
	    flex: 0 0 100%;
	    max-width: 100%;
	}

	.skwp-column-5 {
		-webkit-box-flex: 0;
	    -ms-flex: 0 0 100%;
	    flex: 0 0 100%;
	    max-width: 100%;
	}

	.skwp-column-6 {
		-webkit-box-flex: 0;
	    -ms-flex: 0 0 100%;
	    flex: 0 0 100%;
	    max-width: 100%;
	}

	.ulangan-card .analisis-detail .card {
		margin-bottom: 0;
	}

	.ulangan-card-inner .ulangan-info .skwp-column {
		margin-bottom: 0;
	}

	.ulangan-card-inner .analisis-ulangan .skwp-column {
		margin-bottom: 20px;
	}

	.skwp-column-nav {
	    width: 250px;
	    height: 100vh;
	    position: fixed;
	    top: 0;
	    left: 0;
	    transform: translate3d(-300px, 0px, 0px);
	    padding: 0;
	    z-index: 23456;
	    background: #fff;
	    transition: transform .3s ease-in-out;
	}

	.skwp-column-nav.open {
	    transform: translate3d(0px, 0px, 0px);
	    z-index: 12;
	    transition: transform .3s ease-in-out;
	}

	.skwp-menu-btn {
		width: 40px;
	    height: 40px;
	    position: fixed;
	    top: 100px;
	    left: 0;
	    cursor: pointer;
	    transition: transform .3s ease-in-out;
	    background: #fff;
	    box-shadow: 0px 0px 10px -2px #aaa;
	    z-index: 13;
	    border-top-right-radius: 5px;
	    border-bottom-right-radius: 5px;
	    transition: all .3s ease-in-out;
	}

	.skwp-menu-btn.active {
		left: 250px;
	    box-shadow: 0px 0px 5px -2px #aaa;
	    transition: all .3s ease-in-out;
	}

	.skwp-menu-btn span {
		display: block;
	    width: 25px;
	    height: 3px;
	    background-color: #7ba1ea;
	    position: absolute;
	    top: 19px;
	    left: 8px;
	    border-radius: 2px;
	    transition: background-color .3s ease-in-out;
	}

	.skwp-menu-btn span.top {
		top: 11px;
	}

	.skwp-menu-btn span.bot {
	    top: 27px;
	}

	.skwp-menu-btn.active .mid {
		opacity: 0;
	}

	.skwp-menu-btn.active span.top {
		transform: rotate(45deg);
		top: 18px;
	}

	.skwp-menu-btn.active span.bot {
		top: 18px;
		transform: rotate(-45deg);
	}

	.skwp-navigation-inner {
		box-shadow: none;
	}

	.skwp-masking {
		position: absolute;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    background: rgba(0,0,0,0.6);
	}

	.skwp-masking {
		position: fixed;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    background: rgba(0,0,0,0.6);
	    z-index: -1;
    	display: none;
	}

	.skwp-masking.open {
		position: fixed;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    background: rgba(0,0,0,0.6);
	    z-index: 11;
    	display: block;
	}

	.skwp-menu-item.active:after {
		display: none;
	}

	.dataTables_wrapper {
		overflow: auto;
		white-space: nowrap;
	}

	.news-wrap .skwp-dash-widget-title {
		margin-bottom: 20px;
	}

	.skwp-dash-loop .skwp-column-3,
	.grid-loop .skwp-column-2 {
		-webkit-box-flex: 0;
	    -ms-flex: 0 0 50%;
	    flex: 0 0 50%;
	    max-width: 50%;
	}

	.dashboard-inner .skwp-hello, 
	.dashboard-inner .skwp-hello ~ span {
		position: relative;
		z-index: 1;
	}
	.img-account-hello {
		opacity: 0.8;
	}

	.event-meta-txt.skwp-column.skwp-column-3 {
		-webkit-box-flex: 0;
	    -ms-flex: 0 0 33.33333%;
	    flex: 0 0 33.33333%;
	    max-width: 33.33333%;
	}

	.event-meta-detail.skwp-column.skwp-column-2of3 {
		-webkit-box-flex: 0;
	    -ms-flex: 0 0 66.66667%;
	    flex: 0 0 66.66667%;
	    max-width: 66.66667%;
	}

	.skwp-table.table-responsive {
		overflow: auto;
	}

	.skwp-table.table-responsive .table {
		width: 100%;
		max-width: 100%;
		white-space: nowrap;
	}

	.routines-page {
		overflow: auto;
	}
	.routines-page table {
		white-space: nowrap;
	}
	.routines-page table td {
		padding: 15px;
	}

	.skwp-column-80 {
		-webkit-box-flex: 0;
	    -ms-flex: 0 0 100%;
	    flex: 0 0 100%;
	    max-width: 100%;
	}

	.homeworkroom-page button {
		margin-top: 10px;
		margin-bottom: 20px;
	}

	.skwp-column-20 {
	    -webkit-box-flex: 0;
	    -ms-flex: 0 0 100%;
	    flex: 0 0 100%;
	    max-width: 100%;
	}
}

/*-----------------------------------------------------------------------------------*/
/*  Max Width 640px
/*-----------------------------------------------------------------------------------*/
@media only screen and (max-width: 640px) {
	.question-result-table .table-responsive,
	.list-pertanyaan-ujian,
	.tugas-wrap  {
		overflow: auto;
	}
	.ulangan-card .table {
		table-layout: fixed;
	}
	.ulangan-card .table tr > th:nth-child(1),
	.ulangan-card .table tr > td:nth-child(1) {
		width: 30px;
	}
	.ulangan-card .table tr > th:nth-child(3),
	.ulangan-card .table tr > td:nth-child(3) {
		width: 80px;
	}
	.ulangan-card .table tr > th:nth-child(4),
	.ulangan-card .table tr > td:nth-child(4) {
		width: 120px;
	}
	.ulangan-card .table tr > th:nth-child(5),
	.ulangan-card .table tr > td:nth-child(5) {
		width: 80px;
	}
	.tugas-wrap table {
	    white-space: nowrap;
	}
}

/*-----------------------------------------------------------------------------------*/
/*  Max Width 420px
/*-----------------------------------------------------------------------------------*/
@media only screen and (max-width: 480px) {
	.skwp-dash-loop .skwp-column-3,
	.grid-loop .skwp-column-2 {
		-webkit-box-flex: 0;
	    -ms-flex: 0 0 100%;
	    flex: 0 0 100%;
	    max-width: 100%;
	}
}

/*-----------------------------------------------------------------------------------*/
/*  Max Width 420px
/*-----------------------------------------------------------------------------------*/
@media only screen and (max-width: 420px) {
	.welcome-wrap {
	    height: 400px;
	    overflow: hidden;
	}
	.dashboard-inner .img-account-hello {
		top: unset;
		bottom: -15px;
		width: 100%;
	    height: 220px;
	    background-size: contain;
    	background-position: center center;
	}

	.dashboard-inner .skwp-hello {
		font-size: 45px;
	}

	.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
		text-align: left;
	}

	.routines-table {
		overflow: auto;
	}

	.table.table-schedule {
		white-space: nowrap;
	}

	.single-event-meta-time .event-meta-txt.skwp-column.skwp-column-3 {
		-webkit-box-flex: 0;
	    -ms-flex: 0 0 35%;
	    flex: 0 0 35%;
	    max-width: 35%;
	}

	.single-event-meta-time .event-meta-detail.skwp-column.skwp-column-2of3 {
		-webkit-box-flex: 0;
	    -ms-flex: 0 0 60%;
	    flex: 0 0 60%;
	    max-width: 60%;
	}

	.single-event-meta-time .text-event-inner {
		padding-left: unset;
	}

	.single-event-meta-time .text-event-inner-text {
		top: 50%;
	    position: relative;
	    transform: translateY(-15%);
	    display: inline-block;
	    left: 40px;
	    text-align: center;
	}

	.single-event-meta-time .event-meta-txt span {
		font-size: 18px;
	}

	.single-event-meta-time .text-event-inner:after {
		width: 80px;
    	height: 80px;
	}

	.single-event-meta-time .detail-event-wrap {
		top: 50%;
    	transform: translateY(-20%);
	}

	.single-event-meta-time .detail-title {
		min-width: 45px;
	}
}