@media screen and (max-width: 1100px) {
	.tally.grid-wrapper {
		grid-template-columns: 1fr 1fr;
	}

	#summary .grid-wrapper {
		grid-template-columns: 1.8fr 1fr 1fr;
	}

	.fa-cloud-upload-alt {
		font-size: 70px;
	}

	#drop-area > div:nth-of-type(2) {
		font-size: 25px;
	}

	#drop-area > div:nth-of-type(3) {
		font-size: 20px;
		margin: 20px 0;
	}

	#drop-area button {
		font-size: 15px;
		font-weight: unset;
	}

	p.total {
		width: 40%;
	}

	#user-settings .grid-wrapper {
		grid-template-columns: 1fr;
		grid-gap: 15px;
	}
}

@media screen and (max-width: 960px) {
	#collateral {
		width: 90%;
	}

	p.total {
		width: 50%;
	}
}

@media screen and (max-width: 920px) {
	.tingle-modal-box {
		width: 75%;
	}

	form .flex-wrapper {
		display: block;
	}

	form .flex-wrapper .flex-item {
		margin: 10px 0;
		padding: unset;
	}

	form .flex-wrapper .flex-item:not(:last-child) {
		border-right: unset;
	}

	#summary .grid-wrapper {
		grid-template-columns: 1fr 1fr;
	}

	#summary table {
		grid-column: 1/3;
	}

	.grid-wrapper > div {
		margin-top: 20px;
	}

	#loan {
		height: auto !important;
	}

	#tabbed-panel > label {
		display: none;
	}

	#content-wrapper .tab-content {
		border: 0;
		height: auto !important;
		margin-bottom: 60px;
		opacity: 1;
		overflow: visible;
		padding: 0;
		position: unset;
		transform: none;
	}

	#content-wrapper header {
		display: block;
		height: auto;
		margin: 0 10% 20px 10%;
	}

	.step-container {
		background-color: unset;
		border-radius: unset;
		overflow: visible;
		position: static;
	}

	.step-container::after {
		content: none;
	}

	.step-item {
		display: block;
	}

	.step-item.number {
		background-color: var(--eden);
		border-radius: 15px 15px 0 0;
	}

	.step-item.description {
		background-color: var(--botticelli);
		border-radius: 0 0 15px 15px;
	}

	.empty-state {
		background-image: url("../img/others/wavy-bg.svg");
		background-size: cover;
	}

	.empty-state div {
		width: 100%;
	}
}

@media screen and (max-width: 850px) {
	p.total {
		width: 60%;
	}
}

@media screen and (max-width: 800px) {
	.tally.grid-wrapper {
		grid-template-columns: 1fr;
	}
}

/* Tablet */
@media only screen and (max-width: 769px) {
	.login-container .headline {
		padding-bottom: 20px;
	}

	p.total {
		width: 80%;
	}

	p.total span.amount {
		font-size: 22px;
		font-weight: unset;
	}
}

@media screen and (max-width: 768px) {
	header.modal {
		font-size: 25px;
	}

	form .grid-wrapper {
		grid-template-columns: 1fr;
	}

	.tingle-modal-box {
		width: 60%;
	}

	.tingle-modal-box th,
	.tingle-modal-box td {
		display: block;
		text-align: center !important;
	}

	table.pattern-bg tr th {
		padding-top: 10px;
	}

	table.pattern-bg tr:last-child th {
		padding-bottom: unset;
	}

	#claimed-fund th {
		width: unset;
	}

	#content-wrapper header {
		margin: 0 0 20px 0;
	}

	.fa-cloud-upload-alt {
		font-size: 60px;
		margin-bottom: 5px;
	}

	#drop-area > div:nth-of-type(2) {
		font-size: 16px;
	}

	#drop-area > div:nth-of-type(3) {
		font-size: 14px;
		margin: 14px 0;
	}

	#drop-area button {
		padding: 8px 22px;
	}
}

@media screen and (max-width: 600px) {
	.dataTables_filter input {
		display: block;
		margin: 5px auto 0 auto;
	}

	.fa-cloud-upload-alt {
		font-size: 50px;
		margin-bottom: 3px;
	}

	#drop-area > div:nth-of-type(3) {
		margin: 5px;
	}

	#drop-area button {
		padding: 5px 20px;
	}

	p.total {
		width: 100%;
	}
}

@media screen and (max-width: 540px) {
	header.modal {
		margin-top: 48px;
	}

	footer {
		padding-bottom: 20px;
	}

	.tingle-modal-box {
		width: 100%;
		position: absolute;
		top: 0;
	}

	.tingle-modal-box .info {
		padding-top: 90px;
	}

	.tingle-modal--overflow {
		padding: 0;
	}

	section {
		margin: 30px;
	}
}

/* For Mobile L */
@media only screen and (max-width: 426px) {
	.login-container .headline {
		font-size: 35px;
		padding-bottom: 15px;
	}
	
	.login-container form {
		max-width: 322px;
	}
}

@media screen and (max-width: 420px) {
	nav.closed .nav-links li .sub-menu{
		display: none;
	}
}

/* For Mobile M */
@media only screen and (max-width: 376px) {
	.login-container .headline {
		font-size: 30px;
		padding-bottom: 12px;
	}
	
	.login-container form {
		max-width: 280px;
	}
	
	.login-container label {
		font-size: 15px;
	}
}

/* For Mobile S */
@media only screen and (max-width: 320px) {
	.login-container .headline {
		font-size: 25px;
		padding-bottom: 6px;
	}
	
	.login-container form {
		max-width: 250px;
	}
	
	.login-container .forget-password {
		font-size: 13px;
	}
	
	.login-container label {
		font-size: 15px;
	}
}