/*
	(c)2021 - visuallizard.com

	Responsive styles based on browser breakpoints
*/

.mobile-menu-toggle {
	display: none;
	position: absolute;
	z-index: 1000;
	top: 15px;
	right: 15px;
	width: 30px;
	padding: 3px 0 0 0;
	border-top: 9px double #fff;
	border-bottom: 9px double #fff;
	line-height: 0;
}

@media only screen and (max-height: 650px) { /* form CHROMEBOOKs */

	body {
		font-size: 12px;
	}

	.site-title > a {
		width: 2.5em;
		height: 2.5em;
		border-width: 0;
	}

	.nav-link {
		padding: 0.65em 0 0.2em;

		font-weight: 700;
		line-height: 2em;
	}

	.table-list {
		font-size: 0.675rem;
	}

	.view-wrapper-header {
		padding: 0.5em 0.675em;
	}

	.view-wrapper-content {
	    padding: 0.5rem 0.5rem 0.25em;
	}

	.form-wrapper {
		margin-bottom: 0.25em;
	}

	.form-wrapper-content {
	    padding: 0.15rem 0.25rem;
	}

	.button {
	    padding: 0.25em 1em !important;
	}

}

@media only screen and (max-width: 1320px) {
	main .container { display: flex; flex-direction: column; max-width: 100%; }
	.w45 .view-wrapper-content > .view-wrapper-block { flex-basis: 50%; max-width: 50%; }
	.w25 .view-wrapper-content > .view-wrapper-block { flex-basis: 100%; max-width: 100%; }
}

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

}

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

	header { padding: .5rem 1rem; }

	main { padding: 1em; }

	.view-cell.w40,
	.view-cell.w45,
	.view-cell.w60 { width: 100%; }
	.view-cell.w15,
	.view-cell.w25,
	.view-cell.w30 { width: 50%; }

	table th { font-size: 12px; }
	table.table-list tbody tr td { vertical-align: top; }
	.w25 .view-wrapper-content > .view-wrapper-block.w33 { max-width: 33.3%; }

	.table-list td.right:not(:last-child) { padding-right: 0.5em; }

}

@media only screen and (max-width: 768px) {
	.mobile-menu-toggle { display: block; }

	.img-left,
	.img-right { float: none; margin: 0; }

	.flex-order-1 { order: 1; }
	.flex-order-2 { order: 2; }
	.flex-order-3 { order: 3; }
	.flex-order-4 { order: 4; }
	.flex-order-5 { order: 5; }
	.flex-order-99 { order: 99; }

	.cke > .c1,
	.cke > .c-first,
	.cke > .c2,
	.cke > .c3,
	.cke > .c4,
	.cke > .c5,
	.cke > .c6 { width: 100%; flex-basis: 100%; max-width: 100%; margin: 0; }

	body { overflow-x: hidden; }

	.site-header-profiles { width: 50%; }
	.main-nav {
		order: 3;
		width: 100%;
	}
	.main-nav { display: none; }
	.main-nav.show { display: block; }
	.main-nav .nav-1 { display: block; margin-top: 1rem; }
	.main-nav .nav-1 > li { margin: 0; }
	.main-nav .nav-1 > li > a,
	.nav-link { padding: .5rem .75em; text-align: left; border-bottom: none; line-height: 1.5; }
	.nav-link:focus { outline-offset: 0; }
	.main-nav .nav-1 > li[data-nav-status="active"] > a { background: rgba(0,0,0,0.2); }
	.main-nav .nav-link::before,
	.main-nav .nav-link::after { content: none; }

	.order-log-list-item.create-appointment { z-index: 1; }

	input,
	select,
	textarea,
	output { padding: 0.5em; }

	.filter-form form [class^='input-'] { max-width: 35%; margin: 0 0.825rem 0.825rem 0; }
	.filter-form form select,
	.filter-form form input,
	form select,
	form input { min-width: 0; }
	div.w50 div.input-select select { width: 95%; }
	ul.filter-pagination { display: none; }
	.filter-form .advanced-options.show { margin-top: 1em; }

	table.table-list { margin: 1em 0; border-radius: 0; box-shadow: none; }
	table.table-list thead,
	table.table-list tfoot { display: none; }
	table.table-list tbody tr { display: flex; flex-wrap: wrap; border-top: 1px solid #000; }
	table.table-list tbody tr th,
	table.table-list tbody tr td { flex-basis: 20%; max-width: 25%; border: none; line-height: 1.2; }
	body.users table.table-list tbody tr td { flex-basis: 20%; max-width: 20%; }
	body.delivery-sheets table.table-list tbody tr td[data-title="App Num(s)"] { flex-basis: 50%; max-width: 50%; }
	table.table-list td.with-squircle,
	table.table-list td.right { text-align: left; }
	table.table-list thead tr th:first-child,
	table.table-list tbody tr td:first-child { padding: 1em; }
	table.table-list th.right:not(:last-child),
	table.table-list td.right:not(:last-child) { padding: 1em; }


	table.table-list td dl dt,
	table.table-list td dl dd { line-height: 1.2; }
	table.table-list td[data-title="Size"] dl dd { width: 50%; }
	table.table-list dl dt { float: none; }
	table.table-list dl { display: flex; position: relative; flex-wrap: wrap; }
	table.table-list td.center { text-align: left; }
	table.table-list td:before { display: block; margin: 0 0 10px 0; line-height: 1.2; font-weight: 700; color: #000; }
	table.table-list td[data-title="App"]:before { content: "App Num:"; }
	table.table-list td[data-title="App Num"]:before { content: "App Num:"; }
	table.table-list td[data-title="Application"]:before { content: "Application:"; }
	table.table-list td[data-title="Hamper"]:before { content: "Hamper Size:"; }
	table.table-list td[data-title="Size"]:before { content: "Hamper Size:"; }
	table.table-list td[data-title="Bird"]:before { content: "Family:"; }
	table.table-list td[data-title="Applicant(s)"]:before { content: "Applicant:"; }
	table.table-list td[data-title="Primary"]:before { content: "Applicant:"; }
	table.table-list td[data-title="Name"]:before { content: "Name:"; }
	table.table-list td[data-title="Address"]:before { content: "Address:"; }
	table.table-list td[data-title="Distribution Method"]:before { content: "Distribution:"; }
	table.table-list td[data-title="Distribution"]:before { content: "Distribution:"; }
	table.table-list td[data-title="Applied"]:before { content: "Applied:"; }
	table.table-list td[data-title="Date"]:before { content: "Date:"; }
	table.table-list td[data-title="Status"]:before { content: "Status:"; }
	table.table-list td[data-title="User"]:before { content: "User:"; }
	table.table-list td[data-title="Role"]:before { content: "Role:"; }
	table.table-list td[data-title="Active"]:before { content: "Status:"; }
	table.table-list td[data-title="Created"]:before { content: "Created:"; }
	table.table-list td[data-title="Postal Code(s)"]:before { content: "Postal Code(s):"; }
	table.table-list td[data-title="App Num(s)"]:before { content: "Application Numbers:"; }
	table.table-list td[data-title="Sponsor"]:before { content: "Sponsor:"; }
	table.table-list td[data-title="Email"]:before { content: "Sponsor Email:"; }
	table.table-list td[data-title="Type"]:before { content: "Sponsor Type:"; }
	table.table-list td[data-title="Contact"]:before { content: "Contact Name:"; }
	table.table-list td[data-title="Contact Name"]:before { content: "Contact Name:"; }
	table.table-list td[data-title="Contact Email"]:before { content: "Contact Email:"; }
	table.table-list td[data-title="Phone - day"]:before { content: "Phone (Day):"; }
	table.table-list td[data-title="Phone - evening"]:before { content: "Phone (Evening):"; }
	table.table-list td[data-title="Hampers"]:before { content: "Hamper Size:"; }
	table.table-list td[data-title="Hamper Size"]:before { content: "Hamper Size:"; }
	table.table-list td[data-title="Households"]:before { content: "Households:"; }
	table.table-list td[data-title="No of Households"]:before { content: "Households:"; }

	.table-list td.with-squircle div.input-checkbox input[type="checkbox"] { margin: 0; }

	.summary > div.summary-people { width: 40%; }
	.summary > div.summary-hamper { width: 40%; }
	.summary > div.hamper-status { width: 15%; }

	.view-cell { width: 100%; }
	.view-layout.stretch > .view-cell,
	.form-layout.stretch > .form-cell,
	.form-layout.stretch > .view-cell,
	.view-layout > .view-cell,
	.form-layout > .form-cell,
	.form-layout > .view-cell { width: 100%; padding: 0; }


	#data-lookup-target.popup-left { width: 60%; margin-left: 20%; left: auto !important; }
	#data-lookup-target.popup-right { width: 60%; margin-left: 20%; left: auto !important; }
	#data-lookup-target:after { display: none; }

}

@media only screen and (max-width: 670px) {
	body { overflow-x: hidden; }
	.mobile-menu-toggle { display: block; }

	.main-nav {
		order: 3;
		width: 100%;
	}

	h2, .h2 { font-size: 1.875rem; }
	h3, .h3 { font-size: 1.625rem; margin-bottom: 0.75rem; }
	h4, .h4 { font-size: 1.375rem; }

	main { padding: 1em; }
	main ul.breadcrumbs { flex-wrap: wrap; }
	main ul.breadcrumbs li { width: 80%; margin: 0 auto; }

	.pagination-links { padding: 0; margin: 1em 0; font-size: 0.75rem; }
	.pagination-links a,
	.pagination-links .current { padding: 0 0.5em; }

	div.message-display { padding: 2em 1em; }

	.t-plain-hampers .site-title > a { background-size: contain; }
	.t-plain-hampers main, .t-plain-hampers .main-region { max-width: 100%; padding: 0 1em; }
	.t-plain-hampers .site-footer { max-width: 100%; padding: 1em; }

	.filter form div.input-text,
	.filter form div.input-select,
	.filter form div.input-datepicker,
	.filter form > button { display: none; }

	.view-wrapper,
	.form-wrapper { box-shadow: none; border-radius: 0; }

	table.table-list {  }
	table.table-list thead,
	table.table-list tfoot { display: none; }
	table.table-list tbody { display: block; width: 100%; }
	table.table-list tbody tr { border-top: 1px solid #999; }
	table.table-list tbody tr td {
		display: block;
		position: relative;
		flex-basis: 25%;
		max-width: 25%;
	}
	body.users table.table-list tbody tr td {
		flex-basis: 32%;
		max-width: 100%;
	}

	.form-wrapper-content > div.w20,
	.form-wrapper-content > div.w15 {
		flex-basis: 32%;
		max-width: 100%;
	}

	label, legend { font-size: .75rem; }

}

@media only screen and (max-width: 520px) {
	.mobile-menu-toggle { display: block; }

	header { padding: 0.5em 0; }
	.site-header-profiles { width: 70%; }
	.site-title { margin-left: 1em; }
	.site-header-member-wrapper { right: 60px; }


	.w20,
	.w25,
	.w30,
	.w33,
	.w35,
	.w40,
	.w45,
	.w50,
	.w55,
	.w60,
	.w65,
	.w66,
	.w70,
	.w75,
	.w80,
	.w85,
	.w90,
	.w95,
	.w100 { width: auto; }

    textarea.w100 { width: 100%; }

	div.view-cell.w65,
	div.view-cell.w33 { width: 100%; }

	div.input-text input[type="text"],
	div.input-email input[type="email"],
	div.input-password input[type="password"],
	div.input-datepicker input[type="date"],
	div.input-select select { width: 95%; }
	select { padding-right: 30px; }

	.view-top { flex-wrap: wrap; }
	.view-top > div { flex-basis: 100%; max-width: 100%; padding: 0 0 1em 0; }
	.view-wrapper-content,
	.form-wrapper-content { flex-wrap: wrap; padding: 1em; }
	.view-wrapper-content > div,
	.form-wrapper-content > div,
	.w45 .view-wrapper-content > .view-wrapper-block {  }

	.view-wrapper-content .flyout-card,
	.view-wrapper-content .flyout-card:first-child { margin: 0; padding: 1em 0; }
	.view-wrapper-content > div.w60,
	.view-wrapper-content > div.w40 { display: block; width: 100%; }
	.order-log-list-item .view-wrapper-figure,
	.order-log-list-item .squircle { margin-right: auto; }

	table.table-list tbody tr th,
	table.table-list tbody tr td { flex-basis: 49%; max-width: 100%; padding: 1em; }
	table.table-list tbody tr td:before { font-size: 1rem; }

}