/* Hide/Show Small (s) */
@media only screen and (max-width: 640px) {
	.hide-s,
	.hide-s-only,
	.hide-s-down,
	.hide-on-small,
	.hide-on-small-only,
	.hide-on-small-and-down {
		display: none !important;
	}
	.show-s,
	.show-s-only,
	.show-s-down,
	.show-on-small,
	.show-on-small-only,
	.show-on-small-and-down {
		display: block !important;
	}
	/* .center-on-small-only {
		text-align: center;
	} */
	/* Position Small */
	.s-left, .s-float-left { float:left; }
	.s-right, .s-float-right { float:right; }
	.s-center {
		float: none !important;
		display: block;
		margin-left: auto !important;
		margin-right: auto !important;
		clear: both;
	}
}

/* "Small and Up" não faz sentido porque isso seria só "hide-all". */

/* Hide/Show Medium (m) */
@media only screen and (min-width: 641px) {
	.hide-m-up,
	.hide-on-med-and-up,
	.hide-on-medium-and-up {
		display: none !important;
	}
	.show-m-up,
	.show-on-med-and-up,
	.show-on-medium-and-up {
		display: block !important;
	}
}
@media only screen and (min-width: 640px) and (max-width: 960px) {
	.hide-m,
	.hide-m-only,
	.hode-on-med,
	.hode-on-medium,
	.hide-on-med-only,
	.hide-on-medium-only {
		display: none !important;
	}
	.show-m,
	.show-m-only,
	.show-on-med,
	.show-on-medium,
	.show-on-med-only,
	.show-on-medium-only {
		display: block !important;
	}
	/* Position Medium */
	.m-left, .m-float-left { float:left; }
	.m-right, .m-float-right { float:right; }
	.m-center {
		float: none !important;
		display: block;
		margin-left: auto !important;
		margin-right: auto !important;
		clear: both;
	}
}
@media only screen and (max-width: 960px) {
	.hide-m-down,
	.hide-on-med-and-down,
	.hide-on-medium-and-down {
		display: none !important;
	}
	.show-m-down,
	.show-on-med-and-down,
	.show-on-medium-and-down {
		display: block !important;
	}
}
/* Hide/Show Large (l) */
@media only screen and (min-width: 961px) {
	.hide-l,
	.hide-l-up,
	.hide-on-large,
	.hide-on-large-and-up {
		display: none !important;
	}
	.show-l,
	.show-l-up,
	.show-on-large,
	.show-on-large-and-up {
		display: block !important;
	}
	/* Position Small */
	.l-left, .l-float-left { float:left; }
	.l-right, .l-float-right { float:right; }
	.l-center {
		float: none !important;
		display: block;
		margin-left: auto !important;
		margin-right: auto !important;
		clear: both;
	}
}
@media only screen and (max-width: 1200px) {
	.hide-l-down,
	.hide-on-large-and-down {
		display: none !important;
	}
	.show-l-down,
	.show-on-large-and-down {
		display: block !important;
	}
}
/* Hide/Show Extra Large (xl) */
@media only screen and (min-width: 1201px) {
	.hide-xl,
	.hide-xl-up,
	.hide-on-extra-large,
	.hide-on-extra-large-and-up,
	.hide-on-extra-large-only {
		display: none !important;
	}
	.show-xl,
	.show-xl-up,
	.show-on-extra-large,
	.show-on-extra-large-and-up,
	.show-on-extra-large-only {
		display: block !important;
	}
	/* Position Small */
	.xl-left, .xl-float-left { float:left; }
	.xl-right, .xl-float-right { float:right; }
	.xl-center {
		float: none !important;
		display: block;
		margin-left: auto !important;
		margin-right: auto !important;
		clear: both;
	}
}

/* @media only screen and (min-width: 1201px) {
	.hide-on-large-only {
		display: none !important;
	}
	.show-on-large {
		display: block !important;
	}
} */
/* @media only screen and (max-width: 640px) {
	.show-on-small {
		display: block !important;
	}
} */

/* @media only screen and (max-width: 640px) {
	.center-on-small-only {
		text-align: center;
	}
} */

/* @media only screen and (min-width: 641px) {
	.show-on-medium-and-up {
		display: block !important;
	}
} */

/* @media only screen and (max-width: 960px) {
	.hide-on-medium-and-down,
	.hide-on-med-and-down {
		display: none !important;
	}
} */

/* @media only screen and (min-width: 961px) {
	.show-on-large {
		display: block !important;
	}
} */

/* @media only screen and (min-width: 640px) and (max-width: 960px) {
	.hide-on-med-only {
		display: none !important;
	}
} */

/* @media only screen and (min-width: 1201px) {
	.show-on-extra-large {
		display: block !important;
	}
} */

@media only screen and (max-width: 960px) {
	table.responsive-table {
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;
		display: block;
		position: relative;
		/* sort out borders */
	}

	table.responsive-table td:empty:before {
		content: '\00a0';
	}

	table.responsive-table th,
	table.responsive-table td {
		margin: 0;
		vertical-align: top;
	}

	table.responsive-table th {
		text-align: left;
	}

	table.responsive-table thead {
		display: block;
		float: left;
	}

	table.responsive-table thead tr {
		display: block;
		padding: 0 10px 0 0;
	}

	table.responsive-table thead tr th::before {
		content: "\00a0";
	}

	table.responsive-table tbody {
		display: block;
		width: auto;
		position: relative;
		overflow-x: auto;
		white-space: nowrap;
	}

	table.responsive-table tbody tr {
		display: inline-block;
		vertical-align: top;
	}

	table.responsive-table th {
		display: block;
		text-align: right;
	}

	table.responsive-table td {
		display: block;
		min-height: 1.25em;
		text-align: left;
	}

	table.responsive-table tr {
		border-bottom: none;
		padding: 0 10px;
	}

	table.responsive-table thead {
		border: 0;
		border-right: 1px solid rgba(0, 0, 0, 0.12);
	}
}

@media only screen and (min-width: 961px) {
	nav a.sidenav-trigger {
		display: none;
	}
}

@media only screen and (max-width: 960px) {
	nav .brand-logo {
		left: 50%;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}

	nav .brand-logo.left,
	nav .brand-logo.right {
		padding: 0;
		-webkit-transform: none;
		transform: none;
	}

	nav .brand-logo.left {
		left: 0.5rem;
	}

	nav .brand-logo.right {
		right: 0.5rem;
		left: auto;
	}
}

@media only screen and (min-width: 641px) {
	nav.nav-extended .nav-wrapper {
		min-height: 64px;
	}

	nav,
	nav .nav-wrapper i,
	nav a.sidenav-trigger,
	nav a.sidenav-trigger i {
		height: 64px;
		line-height: 64px;
	}

	.navbar-fixed {
		height: 64px;
	}
}

@media only screen and (max-width: 960px) {
	.pagination {
		width: 100%;
	}

	.pagination li.prev,
	.pagination li.next {
		width: 10%;
	}

	.pagination li.pages {
		width: 80%;
		overflow: hidden;
		white-space: nowrap;
	}
}

/* @media only screen and (min-width: 0) {
	html, body {
		font-size: 0.8rem;
	}
}

@media only screen and (min-width: 640px) {
	html, body {
		font-size: 0.9rem;
	}
}

@media only screen and (min-width: 960px) {
	html, body {
		font-size: 1rem;
	}
} */

/* @media only screen and (min-width: 360px) {
	.flow-text {
		font-size: 1.2rem;
	}
}

@media only screen and (min-width: 390px) {
	.flow-text {
		font-size: 1.224rem;
	}
}

@media only screen and (min-width: 420px) {
	.flow-text {
		font-size: 1.248rem;
	}
}

@media only screen and (min-width: 450px) {
	.flow-text {
		font-size: 1.272rem;
	}
}

@media only screen and (min-width: 480px) {
	.flow-text {
		font-size: 1.296rem;
	}
}

@media only screen and (min-width: 510px) {
	.flow-text {
		font-size: 1.32rem;
	}
}

@media only screen and (min-width: 540px) {
	.flow-text {
		font-size: 1.344rem;
	}
}

@media only screen and (min-width: 570px) {
	.flow-text {
		font-size: 1.368rem;
	}
}

@media only screen and (min-width: 600px) {
	.flow-text {
		font-size: 1.392rem;
	}
}

@media only screen and (min-width: 630px) {
	.flow-text {
		font-size: 1.416rem;
	}
}

@media only screen and (min-width: 660px) {
	.flow-text {
		font-size: 1.44rem;
	}
}

@media only screen and (min-width: 690px) {
	.flow-text {
		font-size: 1.464rem;
	}
}

@media only screen and (min-width: 720px) {
	.flow-text {
		font-size: 1.488rem;
	}
}

@media only screen and (min-width: 750px) {
	.flow-text {
		font-size: 1.512rem;
	}
}

@media only screen and (min-width: 780px) {
	.flow-text {
		font-size: 1.536rem;
	}
}

@media only screen and (min-width: 810px) {
	.flow-text {
		font-size: 1.56rem;
	}
}

@media only screen and (min-width: 840px) {
	.flow-text {
		font-size: 1.584rem;
	}
}

@media only screen and (min-width: 870px) {
	.flow-text {
		font-size: 1.608rem;
	}
}

@media only screen and (min-width: 900px) {
	.flow-text {
		font-size: 1.632rem;
	}
}

@media only screen and (min-width: 930px) {
	.flow-text {
		font-size: 1.656rem;
	}
}

@media only screen and (min-width: 960px) {
	.flow-text {
		font-size: 1.68rem;
	}
}

@media only screen and (max-width: 360px) {
	.flow-text {
		font-size: 1.2rem;
	}
} */

@media only screen and (max-width: 640px) {
	#toast-container {
		min-width: 100%;
		bottom: 0%;
	}
}

@media only screen and (min-width: 641px) and (max-width: 960px) {
	#toast-container {
		left: 5%;
		bottom: 7%;
		max-width: 90%;
	}
}

@media only screen and (min-width: 961px) {
	#toast-container {
		top: 10%;
		right: 7%;
		max-width: 86%;
	}
}

@media only screen and (max-width: 640px) {
	.toast {
		width: 100%;
		border-radius: 0;
	}
}

@media only screen and (max-width: 960px) {
	.tabs {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
	}

	.tabs .tab {
		-webkit-box-flex: 1;
		-webkit-flex-grow: 1;
		-ms-flex-positive: 1;
		flex-grow: 1;
	}

	.tabs .tab a {
		padding: 0 12px;
	}
}

@media only screen and (max-width: 960px) {
	.modal {
		width: 80%;
	}
}

@media only screen and (max-width: 960px) {
	.input-field .prefix~input {
		width: 86%;
		width: calc(100% - 3rem);
	}
}

@media only screen and (max-width: 640px) {
	.input-field .prefix~input {
		width: 80%;
		width: calc(100% - 3rem);
	}
}

@media only screen and (max-width: 960px) {
	.sidenav.sidenav-fixed {
		-webkit-transform: translateX(-105%);
		transform: translateX(-105%);
	}

	.sidenav.sidenav-fixed.right-aligned {
		-webkit-transform: translateX(105%);
		transform: translateX(105%);
	}

	.sidenav>a {
		padding: 0 16px;
	}

	.sidenav .user-view {
		padding: 16px 16px 0;
	}
}

@media only screen and (max-width: 640px) {
	.tap-target,
	.tap-target-wrapper {
		width: 600px;
		height: 600px;
	}
}

@media only screen and (min-width: 641px) {
	.datepicker-modal {
		max-width: 625px;
	}

	.datepicker-container.modal-content {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
	}

	.datepicker-date-display {
		-webkit-box-flex: 0;
		-webkit-flex: 0 1 270px;
		-ms-flex: 0 1 270px;
		flex: 0 1 270px;
	}

	.datepicker-controls,
	.datepicker-table,
	.datepicker-footer {
		width: 320px;
	}

	.datepicker-day-button {
		line-height: 44px;
	}
}

@media only screen and (min-width: 641px) {
	.timepicker-modal {
		max-width: 640px;
	}

	.timepicker-container.modal-content {
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
	}

	.timepicker-text-container {
		top: 32%;
	}

	.timepicker-display-am-pm {
		position: relative;
		right: auto;
		bottom: auto;
		text-align: center;
		margin-top: 1.2rem;
	}
}