@media only screen and (min-width: 991px) and (max-width: 1199px) {

}

@media only screen and (min-width: 991px) and (max-width: 1024px) {

	.login-panel .info-panel .content,
	.login-panel .helpers-panel .content {
		max-width: 75%;
		width: 75%;
	}

	.login-panel .info-panel .copyright {
		width: 90%;
	}

	.login-panel .helpers-panel .social-media {
		width: 88%;
	}

}

@media only screen and (min-width: 320px) and (max-width: 992px) {

}

@media (max-width:812px) { 

}

@media only screen and (min-width: 320px) and (max-width: 992px) {

}

@media only screen and (max-width: 768px) {

	.sidebar {
		margin-left: -100%;
		width: 50%;
		box-shadow: 12px 0 12px -12px rgba(0,0,0,.4);
		transition: all .8s ease-in-out;
	}

	.show-sidebar {
		margin-left: 0;
	}

	.show-overlay {
		z-index: 98;
		opacity: 1;
	}

	.main-content {
		width: 100%;
		margin-left: 0;
	}

	.modal-xl {
	    width: 640px;
	}

	.data-content,
	.item-default {
		padding: 24px;
	}

	.notif {
		margin-bottom: 24px;
	}

	.topband .btn-nav button {
		display: inline-block;
	}

	.sidebar button {
		display: block;
		position: absolute;
		top: 16px;
		right: 16px;
		width: 32px;
		height: 32px;
		box-shadow: 0 8px 8px -8px rgba(0,0,0,.4);
		border-radius: 16px;
	}

	.sidebar button i {
		line-height: 32px;
	}

	footer {
		padding: 0 24px 24px 24px;
	}

	.login-panel {
		flex-direction: column;
	}

	.login-panel .info-panel,
	.login-panel .helpers-panel {
		width: 100%;
	}

	.login-panel .info-panel {
		padding: 40px 0;
		height: auto;
	}

	.login-panel .info-panel .copyright,
	.login-panel .info-panel .content h2,
	.login-panel .info-panel .content article,
	.login-panel .info-panel .content a {
		display: none;
	}

	.login-panel .info-panel img {
		margin-bottom: 0;
	}

	.login-panel .helpers-panel {
		height: calc(100vh - 144px);
	}

	.login-panel .helpers-panel .social-media {
		width: 100%;
		padding: 40px 0;
		border: none;
	}

	.login-panel .helpers-panel .social-media ul {
		text-align: center;
	}

}

@media only screen and (max-width: 480px) {

	.topband,
	.header {
		padding: 16px;
	}

	.sidebar {
		width: 80%;
	}

	.data-content,
	.item-default {
		padding: 16px;
	}

	.notif {
		margin-bottom: 16px;
	}

	.item-default .field-row {
		flex-direction: column;
	}

	.item-default .field-row .item-field {
		width: 100%;
	}

	.modal-xl {
		width: auto;
	}

	footer {
		padding: 8px 0 24px 0;
		text-align: center;
	}

	.header .title,
	.header .btn-panel {
		width: 50%;
	}

	.topband .helpers a {
		padding: 8px 12px;
	}

	.data-panel-header .info li {
		display: block;
		padding: 0;
		border: none;
	}

	.data-panel-header .info li:last-child {
		display: none;
	}

	.panel-content .card-date,
	#modal-addsupp .info-supp-row,
	.item-default .field-row, #modal-update .info-supp-row {
	    flex-direction: column;
	}

	.panel-content .card-date .date-content,
	#modal-addsupp .info-supp-row .item-field,
	#modal-update .info-supp-row .item-field {
		width: 100%;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.panel-content .card-date .date-content:last-child {
		margin-left: 0;
		margin-top: 8px;
	}

	.panel-content .card-date .date-content small {
		display: block;
		margin-right: 0;
		margin-bottom: 4px;
	}

	.tbl-main,
	.tbl-supp {
		overflow-x: auto;
	}

	.tbl-main table,
	.tbl-supp table {
		width: 720px;
	}

	.modal .modal-body {
		padding: 24px;
	}

	.card-img {
		display: block;
	}

	.login-panel .helpers-panel .content {
		width: 80%;
	}
	
	/* Additionals */

	.btn-series .btn-dim {
		width: 100%;
	}

}

@media (max-width:360px) { 

}

@media (max-width:320px) { 

}