@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,700;1,400;1,700&family=Sen:wght@400;700;800&display=swap&family=Alegreya+Sans+SC:wght@700&display=swap');

/*********************************************

	HEADER
	these are the classes for the header
	image and menu at the top of the page

**********************************************/

.header_div_flex
{
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	align-content: stretch;
	border: 0px;
	padding: 0.25em 0.5em;
	margin-bottom: 1em;
	box-sizing: border-box;
	position: relative;
}

.header_left
{
	border: 0px;
	padding: 0px;
}

.header_right_flex
{
	display: flex;
	/*
	flex-direction: column;
	justify-content: space-between;
	align-items: space-between;
	align-content: flex-end;
	*/
	justify-content: flex-end;
	align-items: flex-end;
	align-content: flex-end;
	border: 0px;
}

.running_total_div
{
	/*
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	*/
	font-family: 'Alegreya Sans SC', sans-serif;
	text-align: right;
	color: #515151;

	position: absolute;
	right: 0.2em;
	top: 0.2em;
}

.menu_div
{
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	font-family: 'Alegreya Sans SC', sans-serif;
	white-space: nowrap;
	text-align: right;
	font-size: 130%;
	color: #515151;
}

.menu_div a, .menu_div a:visited
{
	text-decoration: none;
	color: inherit;
}

img.dfm_logo
{
	/*
	max-width: 55%;
	min-width: 200px;
	*/
	width: 200px;
	height: auto;
}

/* these are the whole-page container boxes of varying sizes */
.pw50, .pw55, .pw60, .pw65, .pw70, .pw75, .pw80, .pw85, .pw90, .pw95, .pw100, .pw800px, .pw1000px
{
	padding: 1em;
	box-sizing: border-box;	
	position: relative;
}

.pw50
{ width: 50%; }
.pw55
{ width: 55%; }
.pw60
{ width: 60%; }
.pw65
{ width: 65%; }
.pw70
{ width: 70%; }
.pw75
{ width: 75%; }
.pw80
{ width: 80%; }
.pw85
{ width: 85%; }
.pw90
{ width: 90%; }
.pw95
{ width: 95%; }
.pw100
{ width: 100%; }
.pw800px
{ width: 800px; }
.pw1000px
{ width: 1000px; }


@media screen and (max-width: 1000px)
{
	.pw50, .pw55, .pw60, .pw65, .pw70, .pw75, .pw80, .pw85, .pw90, .pw95, .pw100
	{ padding: 0.5em; }

	.pw50, .pw55
	{ width: 85%; }
	.pw60, .pw65
	{ width: 90%; }
	.pw70, .pw75
	{ width: 95%; }
	.pw80, .pw85, .pw90, .pw95
	{ width: 100%; }

	.header_div_flex
	{ flex-wrap: wrap; }

	.header_right_flex
	{
		align-items: flex-end;
		align-content: flex-end;
		justify-content: flex-end;
	}

}


@media screen and (max-width: 850px), @media screen and (max-aspect-ratio: 1/1)
{
	.pw50, .pw55, .pw60, .pw65, .pw70, .pw75, .pw80, .pw85, .pw90, .pw95, .pw100, .pw800px, .pw1000px
	{
		width: 100%;
		padding: 0.5em;
	}
}

.submenu_div
{
	display: inline-block;
	white-space: nowrap;
	width: 60%;
	font-weight: 700;
	text-align: center;
	color: #515151;
	margin-top: -1.5em;
	font-size: 13px;
	margin-left: auto;
	margin-right: auto;
	background-color: #70b0b8;
	padding: 0.3em;
	border-radius: 5px;
}

.submenu_div a, .submenu_div a:visited
{
	text-decoration: none;
	color: inherit;
}

@media screen and (min-width: 320px)
{
  .submenu_div
  { font-size: calc(13px + 4 * ((100vw - 320px) / 480)); }
}

@media screen and (min-width: 800px)
{
  .submenu_div
  { font-size: 17px; }
}

@media screen and (max-width: 700px)
{
	.submenu_div
	{ width: 81%; }
}
@media screen and (max-width: 650px)
{
	.submenu_div
	{ width: 85%; }
}
@media screen and (max-width: 600px)
{
	.submenu_div
	{ width: 89%; }
}
@media screen and (max-width: 550px)
{
	.submenu_div
	{ width: 93%; }
}
@media screen and (max-width: 500px)
{
	.submenu_div
	{ width: 97%; }
}

/* here comes the basic stuff...
//
// i want all the fonts to be normal weight, use google's "Karla" font, and
// be a dark grey (not black) so it's not harsh like black text 
//
// give me 15px margins on my divs and use "block" to keep content narrow
//
// and using the bold <b> tag gives me the 700 weight (not 800) */


body.fabric
{
	font-family: 'Karla', sans-serif;
	font-weight: 400;
	color: #111111;
	background-image: url("img/fabric.png");
}

body.plain
{
	font-family: 'Karla', sans-serif;
	font-weight: 400;
	color: #111111;
	background-color: #fbfbfb;
}

a, a:visited
{
	color: #4196a1;
}

p
{
	display: block;
}

.block
{
	width: 100%;
	background-color: #fbfbfb;
	padding: 1.5em;
	border-radius: 13px;
	border: 4px dashed #515151;
	box-sizing: border-box;
	position: relative;
}


.admin_pages
{
	width: 100%;
	background-color: #fbfbfb;
	padding: 1.5em;
	border-radius: 13px;
	border: 4px dashed #515151;
}

.time_to_sew
{
	width: 100%;
	padding: 2em;
	box-sizing: border-box;
}

b
{
	font-weight: 700;
}

.slim_box
{
	margin: 0px;
	padding: 0px;
}

.full_width, div.full_width
{
	width: 100%;
}


/* here are some special font sizes, colors, weights for me to use in
// various specialized places*/

/* medium grey small font */
.commenting
{
	font-size: 75%;
	color: #bbbbbb;
}

/* same color font as containing element but make it small*/
.tiny_text
{
	font-size: 80%;
}

/* all the fonts in the form, make them a bit smaller */
form
{
	font-size: 85%;
}

/* in case i want to add even smaller (than the already-small form font)
// within the form this allows me to write notes about the fields that
// normal-sized font would hog too much space */
.form_notes_tiny
{
	font-size: 80%;
	width: 70%;
}

.big
{
	font-size: 110%;
}

.bigger
{
	font-size: 125%;
}

.small
{
	font-size: 90%;
}



/* big headers we'll give a snazzy font (for the meantime, google's "Sen"
// font) and choose the boldest font weight.
//
// smaller headers we'll use "Karla" (since it looks good smaller)
//
// H5 we'll use for small-caps labels
//
// i've also taken away margin and padding so small fonts displayed below
// them won't be super far below, but might want to change this later!
//
// in fact, i may wish to use IDs for elements i want to do this to */

h1, h2
{
	font-family: 'Sen', sans-serif;
	color: #111111;
	font-weight: 800;
	margin: 0px;
	padding: 0px;
}

h3, h4
{
	font-family: 'Karla', sans-serif;
	color: #111111;
	font-weight: 700;
	margin: 0px;
	padding: 0px;
}

h5
{
	font-family: 'Karla', sans-serif;
	font-variant: small-caps;
	color: #111111;
	font-weight: 400;
	margin: 0px;
	padding: 0px;
}



/* this is a class i assigned to the fonts inside the topbox to let them be
// links back to the homepage but without them being underlined or appearing
// differently */

.discreet
{
	text-decoration: none;
}


/* built-in buttons are ugly so i'm creating my own, large rounded-edge
// buttons
//
// and some rounded-corner boxes of various colors */

.button, button, a.button, .unbutton, [id^="hidden_confirm"]
{
	font-family: 'Alegreya Sans SC', sans-serif;
	border-radius: 7px;
	padding: 5px 11px;
	font-size: 130%;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-decoration: none;
	white-space: nowrap;
	display: inline-block;
}

.button, button, a.button, [id^="hidden_confirm"]
{
	font-weight: 700;
	border: 0px;
	cursor: pointer;
}

.button, button, a.button
{

	background-color: #4196a1;
	color: #ffffff;
}

/* this is for a button that will be hidden that later asks user to confirm
// when another button is clicked (this will then replace other button) */
[id^="hidden_confirm"]
{
	background-color: #ddaa99;
	color: #993333;
}

.unbutton, button.unbutton
{
	background-color: #ececec;
	color: #404040;
	font-weight: 400;
	border: 1px solid #404040;
	cursor: default;
}

[id^="shipped_button_label"], [id^="shipped_button"], [id^="hidden_confirm"], [id^="shipped_button_label"]:focus, [id^="shipped_button"]:focus, [id^="hidden_confirm"]:focus
{
	margin: 3px;
	outline:none;
}

[id^="modify_qty"]
{
	margin: 11px;
}

.grey_box
{
	background-color: #bfcbcc;
	border-radius: 7px;
}


/*
because default table styling is always ugly, get rid of all the stuff
and set my own stuff as a better default starting point!
*/

table, tr, th
{
	border: 0px;
}

td
{
	border: 0px;
	padding: 20px;
	text-align: left;
	vertical-align: top;
}



/* i want the form on the "need masks" page to look all pretty (like a
// shopify form) so i'm making input boxes with rounded edges, and 
// lighter-colored borders to look extra thin, specifying fonts again
// and giving them padding and margins to make it all look good
//
// also setting the width of the form as a whole to 70%
// and then every element that's on its own line is the full width of
// that 70% - it's not too big but definitely big enough to fit any amt
// of text someone may enter for name or address fields */

/* using inline-block so some inputs can share a line 
// but this also means i have to size them or they're all narrow */
input[type=text], input[type=tel], input[type=number], input[type=email], select, textarea
{
	padding: 8px 13px;
	font-size: 90%;
	border: 1px solid #555555;
	color: #666666;
	border-radius: 5px;
	margin: 6px;
	font-family: 'Karla', sans-serif;
	font-weight: 400;
	box-sizing: border-box;
	display: inline-block;
}

textarea
{
	resize: none;
	height: 9em;
	vertical-align: middle;
	padding: 0.78em 0.89em;
	line-height: 1.25em;
}

/* put all elements in form into this, and the elements will be set to 100%
// width so they'll all be the full width of the form, whatever this % ends
// up being */

.form_container
{ width: 90%; }

/* this is to make form fields spread out to the full width of the container */
.form_width
{ width: 100%; }

/* this doesn't work to fix sizing of tds
.td-phone_number, .td-extension, .td-state, .td-zipcode, td.spacer
{ display: inline-block; }
*/

/* phone & ext share a line so make them fit next to each other */
.td-phone_number
{ width: 70%; }
.td-extension
{ width: 27%; }

/* state & zipcode share a line so make them fit next to each other */
.td-state
{ width: 67%; }
.td-zipcode
{ width: 30%; }

td.spacer
{ width: 3%; }

input.phone_number, input.extension, select.state, input.zipcode
{ width: 100%; }

/* don't display edit_blocks until js tells them to appear */
[id*="edit_block"]
{ display: none; }

/* on 2nd two visit types of "need.php", don't show form fields until
// they click the edit button, then js will tell them to appear */
[id$="updating"], [id$="badphone"]
{ display: none;}

/* won't ask this age unless they check immunocompromised box */
#immuno-age-block
{ display: none; }

/* order mgmt page */
#order_mgmt_qty_block
{ width: 40%; }

#age1, #age2
{
	width: 5em;
	height: 3em;
	line-height: 1em;
}

.td-age
{
	vertical-align: middle;
	text-align: right;
	margin: 5px 0px 5px 5px;
	padding: 7px 0px 7px 7px;
}


/*************************************************************************************
// this next group is all just to make the 3 quantity fields on need.php display
// so that the 3 boxes adjust in size relative to the container (which makes them
// mobile responsive) but still fill the full width by justifying them (they're
// inline-block) by putting them plus a single empty <p> element (p.justify-fixer)
// all inside a div that is using text-align: justify - then b/c it never justifies
// the final line of text, only the lines above it, that <p> element is the last
// line (and never allows anything else on the line with it, since it's 100% width) */

.justified
{
	text-align: justify;
}

.qty_box, .justify_fixer, .qty_display
{
	display: inline-block;
}

.qty_box
{
	width: 31%;
	margin: 10px 0px 0px 0px;
}

p.qty_box
{
	text-align: left;
}

.qty_display
{
	padding: 0px 25px;
	text-align: right;
}


.justify_fixer
{
	width: 100%;
	height: 1px;
	margin:0px;
	padding: 0px;
}

.qty_fields, select.qty_fields
{
	width: 100%;
	margin: 10px 0px;
}
/************************************************************************************/

/* got this from someone online who claims it maximizes cross-browser
// compatibility for lining up a checkbox and its corresponding text
// NOTE: i am only using the label tag for next to checkboxes, and i'm
// using their specific implementation of nesting the checkbox element
// inside the label tag.  honestly not sure if it's working but it's 
// also not hurting anything so i'm going to leave it alone. */

label
{
	display: block;
	padding-left: 7px;
	text-indent: -7px;
}

/********************
	quote wall
*********************/

.quote_wall_container
{
	width: 100%;
}

.quote_box
{
	padding: 1.5em;
	background-color: #fbfbfb;
	border-radius: 13px;
	border: 2px solid #979797;
	box-sizing: border-box;
}

.padded_box
{
	padding: 1em;
}


@media screen and (max-width: 600px)
{	.quote_wall_container
	{ width: 100%;
	  font-size: 65%; }

	.quote_box
	{
		margin: 5px;
	}
}


@media screen and (max-aspect-ratio: 1/1)
{
	.quote_wall_container
	{
		width: 100%;
		font-size: 65%;
		padding-right: 2%;
		box-sizing: border-box;	
	}

	.quote_box
	{
		margin: 5px;
		flex-grow: 1;
	}
}