@charset "utf-8";

/*=========================================================================================================================================================*/
/* Default font(s) and text size
/*=========================================================================================================================================================*/
html
{	font-size: 14px;
	line-height: 1.6em;
}

body
{	background-color: #FFF;
	width: 100%;
	min-width: 320px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	color: #4C4C4C;
	font-size: inherit;
	line-height: inherit;
	font-weight: normal;
	font-style: normal;
	text-align: justify;
	word-wrap: break-word;
}

html[lang=en] body
{	text-align: left;
}

body,
.sans-serif,
.gothic
{	font-family: "Verdana", "Arial", "Helvetica", "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif;
}

.serif,
.mincho
{	font-family: "ヒラギノ明朝 Pro W4","Hiragino Mincho Pro","HGS明朝B","MingLiU","SimSun","ＭＳ Ｐ明朝",serif;
}

/* English */
.eng-sans
{	font-family: Verdana, Geneva, Arial, sans-serif;
}

.times
{	font-family: "Times New Roman", Times, serif;
}

@media screen and (max-width: 599px)
{	html
	{	font-size: 13px;
	}
}

@media screen and (max-width: 399px)
{	html
	{	font-size: 12px;
	}
}

/*==========================================================================================================================================================*/
/* Base tags - Redefinition */
/*==========================================================================================================================================================*/
h1, h2, h3, h4, h5, h6, p,
div,
img, a,
ol, ul, li, dl, dt, dd,
table, tbody, tfoot, thead, tr, th, td,
span, small, strong, em,
b, i, u, var,
iframe, object, button,
fieldset, legend,
input[type=text], input[type=password], input[type=number],
textarea,
select, option,
form, sub, sup, address, blockquote, time
{	margin: 0;
	padding: 0;
	border: 0;
	font-size: 1em;
	line-height: 1.6em;
	color: inherit;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	text-indent: 0;
}
a,
span, small, strong, em,
b, i, u
{	line-height: inherit;
}

::before, ::after
{	text-indent: 0;
}


/* HTML5 resets */
/*=========================================================================================================================================================*/
header, main, footer,
nav, aside,
figure, figcaption,
section, article,
address
{	display: block;
	padding: 0;
	margin: 0;
}

/*==========================================================================================================================================================*/
/* Tag-specific */
/*==========================================================================================================================================================*/

/* Links - may or may not want to define default colors depending on design */
/*==========================================================================================================================================================*/
a, button, label,
input[type=checkbox], input[type=radio],
input[type=submit], input[type=reset],
[onclick]
{	cursor: pointer;
}

a:not([href]):not([onclick]),
button:not([onclick])
{	cursor: default;
}
input[type=text][onclick],
input[type=password][onclick]
{	cursor: text;
}

button,
input[type=submit], input[type=reset]
{	-webkit-appearance: none;
	-webkit-border-radius: 0;
}

/* Give links no special treatment by default */
a
{	color: inherit;
	text-decoration: none;
}

a:hover
{	text-decoration: none;
}

/* In general, links in a P tag should look a different color than text. For other tags, use .text-link */
p a,
.text-link a, a.text-link
{	color: #0071BC;
}

p a:hover,
.text-link a:hover, a.text-link:hover,
label:hover
{	color: #0091DC;
	text-decoration: underline;
}

/* For some links (e.g. images), this will provide a simple hover animation */
.img-link a:hover,
a.img-link:hover
{	opacity: 0.75;
}

/* Images - these settings are suitale for responsive design and scaling. Emoji should still be inline, however.
/*==========================================================================================================================================================*/
img
{	max-width: 100%;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.emoji img,
img.emoji
{	display: inline;
}

/* Lists */
/*==========================================================================================================================================================*/
ol, ul, li,
dl, dt, dd
{	list-style: none;
	list-style-type: none;
}

/* Tables */
/*==========================================================================================================================================================*/
table
{	border-spacing: 0;
	empty-cells: show;
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
}

table tr th, table tr td
{	word-wrap: break-word;
	vertical-align: top;
}

/* Inputs */
/*==========================================================================================================================================================*/
input[type=text], input[type=password], input[type=number],
textarea, select
{	box-sizing: border-box;
	border: 1px solid;
	font-size: 16px;	/* Done to ensure no auto zooming on iPhones */
	color: #000;
}

input[type=checkbox], input[type=radio]
{	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
}

input[type=file]
{	background-color: #EFD;
	display: block;
	color: #000;
	cursor: pointer;
	padding: 5px;
	border: 1px solid #888;
	box-sizing: border-box;
}

input[type=file]:hover
{	background-color: #EFC;
	border-color: #8F8;
}

textarea
{	max-width: 100%;
	resize: vertical;
}

/* text input/textarea */
.input-holder-caption
{	position: relative;
	overflow: hidden;
	text-align: left;
}

.input-holder-caption > .fr
{	padding-left: 0.5em;
}
.input-holder-caption > .fl
{	padding-right: 0.5em;
}

/* */
.input-holder
{	overflow: hidden;
	padding: 1px;
	box-sizing: border-box;
}

.input-holder > input,
.input-holder > textarea,
.input-holder > select
{	width: 100%;
	display: block;
}

.input-holder > textarea
{	min-height: 8em;
}

/* */
.name-inputs
{}

.name-inputs > div
{	display: inline-block;
	vertical-align: top;
	width: 49%;
	margin-right: 2%;
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
}
.name-inputs > div:nth-child(2n)
{	margin-right: 0;
}
.name-inputs > div > p
{	float: left;
	min-width: 2em;
	text-align: left;
	margin-right: 0.5em;
}

/* For phone numbers, this will put 3 boxes of equal width complete with dashes in the middle.
/* FORMAT: Main tag is .phone-inputs-wrap, next is .phone-inputs, then div children containing text inputs.
/* (Should generally only use 3 total divs) */
.phone-inputs-wrap
{	overflow: hidden;
					 
}

/* Children divs have padding on either side, but this will extend them to the edge for perfect, equal width. */
.phone-inputs
{	margin-left: -0.5em;
	margin-right: -0.5em;
}

	 
.phone-inputs > div
{	display: inline-block;
	vertical-align: top;
	width: 6em;
	max-width: 33.3333%;
	max-width: calc(100% / 3);
	box-sizing: border-box;
					
	position: relative;
	padding-right: 0.5em;
	padding-left: 0.5em;
}
.phone-inputs > div::after
{	content: "-";
	line-height: 1.2em;
	width: 1em;
	right: -0.5em;
	top: 50%;
	margin-top: -0.6em;
	position: absolute;
	text-align: center;
}

.phone-inputs > div:nth-child(3n)::after,
.phone-inputs > div:last-child::after
{	content: none;
}
.phone-inputs > div > input
{	width: 100%;
	display: block;
}

/* For dates, this will assume the format of:  (Jan, 01, 2XXX)
/* FORMAT: Main tag is .date-inputs-wrap, next is .date-inputs, then div children containing selects. */
.date-inputs-wrap
{	overflow: hidden;
}

/* Children divs have padding on either side, but this will extend them to the edge for perfect, equal width. */
.date-inputs
{	margin-left: -0.5em;
	margin-right: -0.5em;
}

.date-inputs > div
{	display: inline-block;
	vertical-align: top;
	padding: 0 0.5em;
	box-sizing: border-box;
}

.date-inputs > div:nth-child(1)
{	max-width: 32.5%;
}
.date-inputs > div:nth-child(2)
{	max-width: 32.5%;
}
.date-inputs > div:nth-child(3)
{	max-width: 35%;
}

.date-inputs > div > select
{	display: block;
	width: 100%;
}

.date-inputs > div > select option
{	padding-right: 1em;
}

/* radio/checkbox */
.multi-inputs
{}
.multi-inputs > div
{	display: inline-block;
	vertical-align: top;
}
.multi-inputs > div:not(:last-child)
{	margin-right: 1em;
}

.multi-inputs > div > label
{	display: inline-block;
}

.multi-inputs.use-mt
{	margin-top: -1em;
}
.multi-inputs.use-mt > div
{	margin-top: 1em;
}

/*=========================================================================================================================================================*/
/*=========================================================================================================================================================*/
/* Common formatting */
/*=========================================================================================================================================================*/
/*=========================================================================================================================================================*/
.items2 > li,
.items2 > div,
.items3 > li,
.items3 > div,
.items4 > li,
.items4 > div
{	display: inline-block;
	vertical-align: top;
	margin-right: 2%;
	box-sizing: border-box;
}

.items2 > li,
.items2 > div
{	width: 49%;
}
.items2.full-width > li,
.items2.full-width > div
{	width: 50%;
	margin-right: 0;
}

.items3 > li,
.items3 > div
{	width: 32%;
}
.items3.full-width > li,
.items3.full-width > div
{	width: 33.3333%;
	width: calc(100% / 3);
	margin-right: 0;
}

.items4 > li,
.items4 > div
{	width: 23.5%;
}

.items2 > li:nth-child(2n),
.items2 > div:nth-child(2n),
.items3 > li:nth-child(3n),
.items3 > div:nth-child(3n),
.items4 > li:nth-child(4n),
.items4 > div:nth-child(4n)
{	margin-right: 0;
}

.items2:not(.no-margin) > li:nth-child(n+3),
.items2:not(.no-margin) > div:nth-child(n+3),
.items3:not(.no-margin) > li:nth-child(n+4),
.items3:not(.no-margin) > div:nth-child(n+4),
.items4:not(.no-margin) > li:nth-child(n+5),
.items4:not(.no-margin) > div:nth-child(n+5)
{	margin-top: 2%;
}

@media screen and (max-width: 799px)
{	.items2:not(.leave) > li,
	.items2:not(.leave) > div,
	.items2.full-width:not(.leave) > li,
	.items2.full-width:not(.leave) > div,
	.items3:not(.leave) > li,
	.items3:not(.leave) > div,
	.items3.full-width:not(.leave) > li,
	.items3.full-width:not(.leave) > div,
	.items4:not(.leave) > li,
	.items4:not(.leave) > div
	{	display: block;
		vertical-align: baseline;
		margin-right: auto;
		margin-left: auto;
		width: auto;
	}
	.items2:not(.leave) > li:nth-child(n+3),
	.items2:not(.leave) > div:nth-child(n+3),
	.items3:not(.leave) > li:nth-child(n+4),
	.items3:not(.leave) > div:nth-child(n+4),
	.items4:not(.leave) > li:nth-child(n+5),
	.items4:not(.leave) > div:nth-child(n+5)
	{	margin-top: 0;
	}
	.items2:not(.no-margin):not(.leave) > li:not(:last-child),
	.items2:not(.no-margin):not(.leave) > div:not(:last-child),
	.items3:not(.no-margin):not(.leave) > li:not(:last-child),
	.items3:not(.no-margin):not(.leave) > div:not(:last-child),
	.items4:not(.no-margin):not(.leave) > li:not(:last-child),
	.items4:not(.no-margin):not(.leave) > div:not(:last-child)
	{	margin-bottom: 20px;
	}

	.items4.leave.leave2 > li,
	.items4.leave.leave2 > div
	{	width: 49%;
	}
	.items4.leave.leave2 > li:nth-child(4n),
	.items4.leave.leave2 > div:nth-child(4n)
	{	margin-right: 2%;
	}
	.items4.leave.leave2 > li:nth-child(2n),
	.items4.leave.leave2 > div:nth-child(2n)
	{	margin-right: 0;
	}
	.items4.leave.leave2:not(.no-margin) > li:nth-child(n+3),
	.items4.leave.leave2:not(.no-margin) > div:nth-child(n+3)
	{	margin-top: 2%;
	}
}

/*=========================================================================================================================================================*/
/*=========================================================================================================================================================*/
/* Bullet lists */
/*=========================================================================================================================================================*/
/*=========================================================================================================================================================*/
ul.bullet-list-text:not(:last-child),
ul.bullet-list-link:not(:last-child),
ul.triangle-list-text:not(:last-child),
ul.triangle-list-link:not(:last-child),
ul.arrow-list-text:not(:last-child),
ul.arrow-list-link:not(:last-child)
{	margin-bottom: 20px;
}

ul.bullet-list-text > li,
ul.bullet-list-link > li > a
{	padding-left: 1em;
	text-indent: -1em;
	box-sizing: border-box;
}

ul.bullet-list-text.use-margin > li:not(:last-child)
{	margin-bottom: 20px;
}


ul.bullet-list-text.same-line > li
{	display: inline-block;
	vertical-align: top;
}

ul.bullet-list-text.same-line > li:not(:last-child)
{	margin-right: 1em;
}

ul.bullet-list-link > li > a
{	display: block;
}

ul.bullet-list-text > li::before,
ul.bullet-list-link > li > a::before
{	background-color: currentColor;
	content: "";
	width: 0.6em;
	height: 0.6em;
	margin: 0 0.2em;
	display: inline-block;
	border-radius: 50%;
}

ul.bullet-list-text.no-icon > li::before,
ul.bullet-list-link.no-icon > li > a::before,
ul.bullet-list-text > li.no-icon::before,
ul.bullet-list-link > li.no-icon > a::before
{	content: none;
}

/* dots */
ul.bullet-list-text.gold-dot > li::before,
ul.bullet-list-link.gold-dot > li > a::before,
ul.bullet-list-text > li.gold-dot::before,
ul.bullet-list-link > li.gold-dot > a::before
{	background-color: #B09B7C;
}

ul.bullet-list-text.pink-dot > li::before,
ul.bullet-list-link.pink-dot > li > a::before,
ul.bullet-list-text > li.pink-dot::before,
ul.bullet-list-link > li.pink-dot > a::before
{	background-color: #FFB8B8;
}

/* triangle */
/* ================================= */
ul.triangle-list-text > li,
ul.triangle-list-link > li > a
{	padding-left: 1em;
	text-indent: -1em;
	box-sizing: border-box;
}
ul.triangle-list-link > li > a
{	display: block;
}
ul.triangle-list-text > li::before,
ul.triangle-list-link > li > a::before
{	content: "";
	border-left: 0.5em solid currentColor;
	border-top: 0.4em solid transparent;
	border-bottom: 0.4em solid transparent;
	margin-right: 0.25em;
	margin-left: 0.25em;
	display: inline-block;
	vertical-align: 0.1em;
	box-sizing: border-box;
}

ul.triangle-list-text > li.no-icon::before,
ul.triangle-list-link > li.no-icon > a::before
{	content: none;
}

/* arrow */
/* ================================= */
ul.arrow-list-text > li,
ul.arrow-list-link > li > a
{	padding-left: 1em;
	text-indent: -1em;
	box-sizing: border-box;
}
ul.arrow-list-link > li > a
{	display: block;
}
ul.arrow-list-text > li::before,
ul.arrow-list-link > li > a::before
{	content: "";
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	border-radius: 0;
	margin-left: 0;
	margin-right: 0.5em;
	width: 0.5em;
	height: 0.5em;
	display: inline-block;
	vertical-align: 0.1em;
	box-sizing: border-box;
}

ul.arrow-list-text > li.no-icon::before,
ul.arrow-list-link > li.no-icon > a::before
{	content: none;
}

/* */
ul.bullet-list-link > li > a:hover,
ul.triangle-list-link > li > a:hover,
ul.arrow-list-link > li > a:hover
{	background-color: #EEE;
}

/*=========================================================================================================================================================*/
/*=========================================================================================================================================================*/
/* Numeric lists */
/*=========================================================================================================================================================*/
/*=========================================================================================================================================================*/
ol.numeric-list
{	counter-reset: counter0;
}
ol.numeric-list > li
{	padding-left: 1.5em;
	text-indent: -1.5em;
	counter-increment: counter0;
}

ol.numeric-list > li:not(:last-child)
{	margin-bottom: 0.8em;
}

ol.numeric-list > li::before
{	content: counter(counter0) ".";
	display: inline-block;
	min-width: 1.5em;
	text-align: right;
	box-sizing: border-box;
	padding-right: 0.5em;
}

ol.numeric-list > li:nth-child(1):nth-last-child(n+10),
ol.numeric-list > li:nth-child(2):nth-last-child(n+9),
ol.numeric-list > li:nth-child(3):nth-last-child(n+8),
ol.numeric-list > li:nth-child(4):nth-last-child(n+7),
ol.numeric-list > li:nth-child(5):nth-last-child(n+6),
ol.numeric-list > li:nth-child(6):nth-last-child(n+5),
ol.numeric-list > li:nth-child(7):nth-last-child(n+4),
ol.numeric-list > li:nth-child(8):nth-last-child(n+3),
ol.numeric-list > li:nth-child(9):nth-last-child(n+2),
ol.numeric-list > li:nth-child(n+10)
{	padding-left: 2em;
	text-indent: -2em;
}
ol.numeric-list > li:nth-child(1):nth-last-child(n+10)::before,
ol.numeric-list > li:nth-child(2):nth-last-child(n+9)::before,
ol.numeric-list > li:nth-child(3):nth-last-child(n+8)::before,
ol.numeric-list > li:nth-child(4):nth-last-child(n+7)::before,
ol.numeric-list > li:nth-child(5):nth-last-child(n+6)::before,
ol.numeric-list > li:nth-child(6):nth-last-child(n+5)::before,
ol.numeric-list > li:nth-child(7):nth-last-child(n+4)::before,
ol.numeric-list > li:nth-child(8):nth-last-child(n+3)::before,
ol.numeric-list > li:nth-child(9):nth-last-child(n+2)::before,
ol.numeric-list > li:nth-child(n+10)::before
{	min-width: 2em;
}

/*=========================================================================================================================================================*/
/*=========================================================================================================================================================*/
/* Pagination (general) */
/*=========================================================================================================================================================*/
/*=========================================================================================================================================================*/
.pagination
{	text-align: center;
	overflow: hidden;
	padding: 1px 0;
	font-size: 1em;
	line-height: 1.4em;
}

.pagination a
{	background-color: #E0E0E0;
	line-height: inherit;
}

.pagination a:hover
{	background-color: #F0F0F0;
}

.pagination > a,
.pagination > ol,
.pagination > ol > li
{	box-sizing: border-box;
	display: inline-block;
	vertical-align: top;
	line-height: inherit;
}

.pagination > ol > li > a
{	display: block;
}

.pagination > ol > li > a.current
{	background-color: #EEE;
}

/*=========================================================================================================================================================*/
/*=========================================================================================================================================================*/
/* Buttons (general) */
/*=========================================================================================================================================================*/
/*=========================================================================================================================================================*/
.btns
{	text-align: center;
	margin: 0 auto;
}

.btns:not(:last-child)
{	margin-bottom: 20px;
}

.btns > a,
.btns > button
{	background-color: #E0E0E0;
	display: inline-block;
	vertical-align: top;
	padding: 15px 35px 15px 15px;
	color: #323644;
	width: 200px;
	max-width: 48%;
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
}
.btns > a:hover,
.btns > button:hover
{	background-color: #F0F0F0;
}

.btns > a:not(:last-child),
.btns > button:not(:last-child)
{	margin-right: 4%;
}

.btns > a:only-child,
.btns > button:only-child
{	width: 400px;
	max-width: 100%;
}

/* max-size */
.btns.max-size > a,
.btns.max-size > button
{	width: 48%;
}
.btns.max-size > a:only-child,
.btns.max-size > button:only-child
{	width: 100%;
}

/* auto-size */
.btns.auto-size > a,
.btns.auto-size > button
{	width: auto;
}
.btns.auto-size > a:only-child,
.btns.auto-size > button:only-child
{	width: auto;
}

/* arrow */
.btns > a::after,
.btns > button::after
{	content: "";
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	width: 0.5em;
	height: 0.5em;
	margin-top: -0.25em;
	position: absolute;
	right: 15px;
	top: 50%;
	box-sizing: border-box;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	z-index: 2;
}

/* no-icon */
.btns > a.no-icon,
.btns > button.no-icon
{	padding-right: 15px;
}

.btns > a.no-icon::after,
.btns > button.no-icon::after
{	content: none;
}

.btns > a > .pic,
.btns > button > .pic
{	display: inline-block;
}

.btns > a > .pic::before,
.btns > button > .pic::before
{	background-repeat: none;
	background-position: center center;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	content: "";
	width: 1.5em;
	height: 1.5em;
	display: inline-block;
	vertical-align: middle;
	margin-right: 0.5em;
}

.btns > a > .pic:empty::before,
.btns > button > .pic:empty::before
{	margin-right: 0;
}

@media screen and (max-width: 799px)
{	.btns.smt-break > a,
	.btns.smt-break > button
	{	display: block;
		width: auto;
		max-width: none;
		margin: 0 auto 20px;
	}
	.btns.smt-break > a:last-child,
	.btns.smt-break > button:last-child
	{	margin-bottom: 0;
	}
}

/*=========================================================================================================================================================*/
/*=========================================================================================================================================================*/
/* Boxes (general) */
/*=========================================================================================================================================================*/
/*=========================================================================================================================================================*/
.box
{	background-color: #F2F2F2;
	padding: 15px;
	overflow: hidden;
	color: #4C4C4C;
}
.outline-box
{	background-color: #FFF;
	padding: 15px;
	border: 1px solid currentColor;
	overflow: hidden;
	color: #4C4C4C;
}

.box:not(:last-child),
.outline-box:not(:last-child)
{	margin-bottom: 20px;
}

/*=========================================================================================================================================================*/
/*=========================================================================================================================================================*/
/* iframe holders (YT videos, Google Maps, etc.) */
/*=========================================================================================================================================================*/
/*=========================================================================================================================================================*/
.iframe-holder
{	background-color: #AAA;
	padding-top: 50%;
	position: relative;
}

.iframe-holder > iframe
{	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

/*=========================================================================================================================================================*/
/*=========================================================================================================================================================*/																																							 
/* Common text colors */
/*=========================================================================================================================================================*/
/*=========================================================================================================================================================*/
.red-text
{	color: #F00;
}
.red-text2
{	color: #F40;
}

/*=========================================================================================================================================================*/
/*=========================================================================================================================================================*/																																							 
/* Other common */
/*=========================================================================================================================================================*/
/*=========================================================================================================================================================*/
/* Simple inline block formatting with b tags */
.b-ib b,
.b-ib-smt-i b
{	display: inline-block;
	font-weight: inherit;
}

@media screen and (max-width: 799px)
{	.b-ib-smt-i b
	{	display: inline;
	}
}

/* Tag margins */
.not-last-mb10:not(:last-child)
{	margin-bottom: 10px;
}

.not-last-mb20:not(:last-child),
.p-mb p:not(:last-child),
.p-mb-direct > p:not(:last-child),
.oh-mb > .oh:not(:last-child)
{	margin-bottom: 20px;
}

small
{	font-size: 0.8em;
}

/* width */
.w100percent
{	width: 100%;
}
.w-auto
{	width: auto !important;
}

/* */
.max1200px,.max1100px,.max1000px,
.max900px,.max800px,.max700px,.max600px,.max500px,
.max400px,.max300px,.max250px,.max200px,.max150px,.max100px,
.max75px,.max50px
{	margin-left: auto;
	margin-right: auto;
}

.max1200px
{	max-width: 1200px;
}
.max1100px
{	max-width: 1100px;
}
.max1000px
{	max-width: 1000px;
}
.max900px
{	max-width: 900px;
}
.max800px
{	max-width: 800px;
}
.max700px
{	max-width: 700px;
}
.max600px
{	max-width: 600px;
}
.max500px
{	max-width: 500px;
}
.max400px
{	max-width: 400px;
}
.max300px
{	max-width: 300px;
}
.max250px
{	max-width: 250px;
}
.max200px
{	max-width: 200px;
}
.max150px
{	max-width: 150px;
}
.max100px
{	max-width: 100px;
}
.max75px
{	max-width: 75px;
}
.max50px
{	max-width: 50px;
}

/* min-widths */
.min1em, .min2em, .min3em, .min4em, .min5em,
.min6em, .min7em, .min8em, .min9em, .min10em
{	display: inline-block;
}

.min1em
{	min-width: 1em;
}
.min2em
{	min-width: 2em;
}
.min3em
{	min-width: 3em;
}
.min4em
{	min-width: 4em;
}
.min5em
{	min-width: 5em;
}
.min6em
{	min-width: 6em;
}
.min7em
{	min-width: 7em;
}
.min8em
{	min-width: 8em;
}
.min9em
{	min-width: 9em;
}
.min10em
{	min-width: 10em;
}


/* MT */
.mt0
{	margin-top: 0 !important;
}
.mt5
{	margin-top: 5px !important;
}
.mt10
{	margin-top: 10px !important;
}
.mt15
{	margin-top: 15px !important;
}
.mt20
{	margin-top: 20px !important;
}
.mt30
{	margin-top: 30px !important;
}
.mt40
{	margin-top: 40px !important;
}

/* MB */
.mb0
{	margin-bottom: 0 !important;
}
.mb5
{	margin-bottom: 5px !important;
}
.mb10
{	margin-bottom: 10px !important;
}
.mb15
{	margin-bottom: 15px !important;
}
.mb20
{	margin-bottom: 20px !important;
}
.mb30
{	margin-bottom: 30px !important;
}
.mb40
{	margin-bottom: 40px !important;
}

/* MLR */
.mlr0,.mrl0
{	margin-left: 0 !important;
	margin-right: 0 !important;
}
.mlr-auto,.mrl-auto
{	margin-left: auto !important;
	margin-right: auto !important;
}

/* PT */
.pt0
{	padding-top: 0 !important;
}
/* PB */
.pb0
{	padding-bottom: 0 !important;
}

/* */
.tl
{	text-align: left !important;
}
.tc
{	text-align: center !important;
}
.tr
{	text-align: right !important;
}
.tj
{	text-align: justify !important;
}

.va-t
{	vertical-align: top;
}
.va-m
{	vertical-align: middle;
}
.va-b
{	vertical-align: bottom;
}

/* */
.oh
{	overflow: hidden;
}
.ov
{	overflow: visible;
}

/* */
.fl
{	float: left;
}
.fr
{	float: right;
}

/* */
.indent1
{	padding-left: 1em;
	text-indent: -1em;
}
.indent2
{	padding-left: 2em;
	text-indent: -2em;
}
.indent3
{	padding-left: 3em;
	text-indent: -3em;
}
.indent4
{	padding-left: 4em;
	text-indent: -4em;
}
.indent5
{	padding-left: 5em;
	text-indent: -5em;
}

/* */
.indent-input
{	padding-left: 25px;
	text-indent: -25px;
}
.indent-input input[type=checkbox],
.indent-input input[type=radio]
{	width: 20px;
	display: inline-block;
	margin: 0 5px 0 0;
	text-indent: 0;
}

.bold
{	font-weight: bold !important;
}
.italic
{	font-style: italic !important;
}
.strike
{	text-decoration: line-through !important;
}
.underline
{	text-decoration: underline !important;
}

/* Device display classes */
/*=========================================================================================================================================================*/
.force-display-none
{	display: none !important;
}
.force-inline
{	display: inline !important;
}
.force-block
{	display: block !important;
}
.force-inline-block, .ib
{	display: inline-block !important;
}

/* --- */
.pc, .pc-block
{	display: block;
}
.pc-inline
{	display: inline;
}
.pc-inline-block
{	display: inline-block;
}
.smt, .smt-block, .smt-inline, .smt-inline-block
{	display: none;
}

@media screen and (max-width: 799px)
{	.pc, .pc-block, .pc-inline, .pc-inline-block
	{	display: none;
	}
	.smt, .smt-block, .smt-force-block
	{	display: block;
	}
	.smt-inline, .smt-force-inline
	{	display: inline;
	}
	.smt-inline-block, .smt-force-inline-block
	{	display: inline-block;
	}
}

/*=========================================================================================================================================================*/
/*=========================================================================================================================================================*/
/*=========================================================================================================================================================*/
/* common.css */
/*=========================================================================================================================================================*/
/*=========================================================================================================================================================*/
/*=========================================================================================================================================================*/
body
{	background-color: #F2FFCC;
}

/* ----- */
header
{	margin-bottom: 30px;
}

/* */
header h1
{	background-color: #1E3200;
	color: #FFF;
	text-align: center;
	padding: 5px 10px;
	margin: 0 auto;
}
header h2
{	background-color: #8EA250;
	color: #FFF;
	margin: 0 auto;
	padding: 5px 10px;
}
header h2 > span
{	display: inline-block;
	vertical-align: middle;
	width: 48%;
	margin-right: 4%;
	box-sizing: border-box;
}
header h2 > span:nth-child(2n)
{	margin-right: 0;
}
header h2 > span:nth-child(1)
{	text-align: left;
}
header h2 > span:nth-child(2)
{	text-align: right;
}

header h2 > span a
{	display: inline-block;
	padding: 3px 10px;
	color: #FFF;
	border-radius: 3px;
}

header h2 > span a:hover
{	background-color: #682;
}

header h2 > span a.active
{	background-color: #DF4;
	font-weight: bold;
	color: #000;
}

header h2 > span a.logout
{	background-color: #242;
	color: #FFF;
}
header h2 > span a.logout:hover
{	background-color: #464;
}
header h2 > span a.other
{	background-color: #341;
	color: #FFF;
	font-size: 0.95em;
}
header h2 > span a.other:hover
{	background-color: #563;
}
header h2 > span a.other:not(:last-child)
{	margin-right: 10px;
}

header h2 > span a.other img
{	width: auto;
	height: 1em;
	display: inline-block;
	vertical-align: middle;
}
header h2 > span a.other img:not(:only-child),
header h2 > span a.other img:not(:last-child)
{	margin-right: 0.5em;
}

/* */
#header-main
{	position: relative;
	padding: 10px 10px 0;
}

#header-logos
{	max-width: 300px;
	margin: 0 auto;
	padding: 10px 10px;
	display: block;
}

#header-logos img
{	margin: 0 auto;
}

#header-logos img:not(:last-child)
{	margin-bottom: 10px;
}

#header-logos img:nth-child(1)
{	width: 100%;
}
#header-logos img:nth-child(2)
{	width: 90%;
}
#header-logos img:nth-child(3)
{	width: 75%;
}


#header-logos svg
{	margin: 0 auto;
	max-width: 100%;
	display: block;
	height: auto;
}
#header-logos svg:not(:last-child)
{	margin-bottom: 10px;
}
#header-logos svg:nth-child(1)
{	width: 100%;
}
#header-logos svg:nth-child(2)
{	width: 90%;
}
#header-logos svg:nth-child(3)
{	width: 75%;
}

#header-logos svg:nth-child(1) .a
{	fill: #1E3200;
}
#header-logos svg:nth-child(2) .a
{	fill: #5A7A07;
}
#header-logos svg:nth-child(3) .a
{	fill: #35FF00;
}


/*=========================================================================================================================================================*/
main
{	padding: 0 10px 30px;
	min-height: 65vh;
}

#main-content
{	background-color: #FFFFE8;
	border: 1px solid #484;
	padding: 15px;
	border-radius: 10px;
	max-width: 1000px;
	margin: 0 auto;
}

#main-content section
{	overflow: hidden;
}
#main-content section:not(:last-child)
{	margin-bottom: 60px;
}

/* */
.btns > a
{	border-radius: 5px;
	font-weight: bold;
}

.btns > a.green,
.btns > button.green,
.btns > a.auto-color,
.btns > button.auto-color
{	background-color: #5A7A07;
	color: #FFF;
}
.btns > a.green:hover,
.btns > button.green:hover,
.btns > a.auto-color:hover,
.btns > button.auto-color:hover
{	background-color: #7A9A27;
}

.btns > a.red,
.btns > button.red
{	background-color: #CA2A07;
	color: #FFF;
}
.btns > a.red:hover,
.btns > button.red:hover
{	background-color: #EA4A27;
}

.btns > a.return,
.btns > button.return
{	background-color: #7A7A47;
	color: #FFF;
}
.btns > a.return:hover,
.btns > button.return:hover
{	background-color: #9A9A47;
}

.btns > a.dark-gray,
.btns > button.dark-gray
{	background-color: #555;
	color: #FFF;
}
.btns > a.dark-gray:hover,
.btns > button.dark-gray:hover
{	background-color: #888;
	color: #FFF;
}

.btns > a.navy,
.btns > button.navy
{	background-color: #000066;
	color: #FFF;
}
.btns > a.navy:hover,
.btns > button.navy:hover
{	background-color: #303096;
	color: #FFF;
}

/* icons on buttons */
.btns > a > .pic.add::before,
.btns > button > .pic.add::before
{	background-image: url("./img/btn-icons/icon-add.svg");
}
.btns > a > .pic.cancel::before,
.btns > button > .pic.cancel::before
{	background-image: url("./img/btn-icons/icon-cancel.svg");
}
.btns > a > .pic.delete::before,
.btns > button > .pic.delete::before
{	background-image: url("./img/btn-icons/icon-delete.svg");
}
.btns > a > .pic.download::before,
.btns > button > .pic.download::before
{	background-image: url("./img/btn-icons/icon-download.svg");
}
.btns > a > .pic.edit::before,
.btns > button > .pic.edit::before
{	background-image: url("./img/btn-icons/icon-edit.svg");
}
.btns > a > .pic.email::before,
.btns > button > .pic.email::before
{	background-image: url("./img/btn-icons/icon-email.svg");
}
.btns > a > .pic.info::before,
.btns > button > .pic.info::before
{	background-image: url("./img/btn-icons/icon-info.svg");
}
.btns > a > .pic.invoice::before,
.btns > button > .pic.invoice::before
{	background-image: url("./img/btn-icons/icon-invoice.svg");
}
.btns > a > .pic.login::before,
.btns > button > .pic.login::before
{	background-image: url("./img/btn-icons/icon-login.svg");
}
.btns > a > .pic.orders::before,
.btns > button > .pic.orders::before
{	background-image: url("./img/btn-icons/icon-orders.svg");
}
.btns > a > .pic.pay::before,
.btns > button > .pic.pay::before
{	background-image: url("./img/btn-icons/icon-pay.svg");
}
.btns > a > .pic.print::before,
.btns > button > .pic.print::before
{	background-image: url("./img/btn-icons/icon-print.svg");
}
.btns > a > .pic.shipped::before,
.btns > button > .pic.shipped::before
{	background-image: url("./img/btn-icons/icon-shipped.svg");
}
.btns > a > .pic.received::before,
.btns > button > .pic.received::before
{	background-image: url("./img/btn-icons/icon-received.svg");
}
.btns > a > .pic.upload::before,
.btns > button > .pic.upload::before
{	background-image: url("./img/btn-icons/icon-upload.svg");
}

/* ---- */
.midasi1
{	font-size: 1.25em;
	font-weight: bold;
	margin: 0 auto;
}
.midasi1:not(:last-child)
{	margin-bottom: 20px;
}

.midasi2
{	background-color: #6A7A57;
	color: #FFF;
	font-size: 1.1em;
	font-weight: bold;
	margin: 0 auto;
	padding: 5px 10px;
}
.midasi2:not(:last-child)
{	margin-bottom: 20px;
}

.midasi3
{	background-color: #DFC;
	font-size: 1.05em;
	margin: 0 auto;
	padding: 3px 10px;
	color: #3F3F3F;
}
.midasi3:not(:last-child)
{	margin-bottom: 10px;
}


/* ---- */
.box.error
{	background-color: #FCC;
	color: #F20;
	font-weight: bold;
}
.box.success
{	background-color: #CFC;
	color: #180;
	font-weight: bold;
}

.box.warning-icon::before
{	background: url("./img/btn-icons/icon-warning.svg") no-repeat center center;
	-webkit-background-size: 100% 100%;
	background-size: 100% 100%;
	content: "";
	display: block;
	float: left;
	width: 2.5em;
	height: 2.5em;
	margin-right: 10px;
}

.box.error.warning-icon::before
{	background-image: url("./img/btn-icons/icon-warning-red.svg");
	
}

/* --- */
.green-select
{	background-color: #080;
	border: 1px solid #000;
	border-radius: 3px;
	overflow: hidden;
	position: relative;
}

.green-select::before
{	content: "";
	box-sizing: border-box;
	width: 8px;
	height: 8px;
	border-top: 2px solid #FFF;
	border-left: 2px solid #FFF;
	position: absolute;
	top: 50%;
	margin-top: -6px;
	transform: rotate(45deg);
	right: 10px;
}

.green-select select
{	background-color: transparent;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	padding-right: 20px;
	background-image: none;
	border: none;
	color: #FFF;
}

/* */
.order-table-set
{	color: #000;
}

.order-table-set:not(:last-child)
{	margin-bottom: 20px;
}

.order-table th,
.order-table td
{	padding: 10px;
	border-top: 1px solid #CCC;
	border-bottom: 1px solid #CCC;
	vertical-align: middle;
	box-sizing: border-box;
}

.order-table th
{	width: 40%;
}
.order-table td
{	width: 20%;
	border-left: 1px solid #CCC;
}

.order-table thead th,
.order-table thead td
{	background-color: #E0E0E0;
	text-align: center;
}

.order-table tbody th,
.order-table tbody td
{	background-color: #FFF;
	text-align: left;
}

.order-table tbody th
{	font-weight: bold;
}

/* */
.order-btns
{	overflow: hidden;
	position: relative;
}

.order-btns > div
{	position: relative;
	padding-right: 30px;
}

/* red X */
.order-btns > div a.redX
{	background-color: #EEE;
	position: absolute;
	right: 0;
	top: 50%;
	color: #F21;
	width: 25px;
	height: 25px;
	border-radius: 2px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.order-btns > div a.redX::before,
.order-btns > div a.redX::after
{	content: "";
	height: 4px;
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	margin-top: -2px;
	background-color: currentColor;
}
.order-btns > div a.redX::before
{	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.order-btns > div a.redX::after
{	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.order-btns > div a.redX:hover
{	background-color: #F21;
	color: #FFF;
}

/* */
#total-price-box
{	background-color: #CF0;
	font-size: 1.25em;
	font-weight: bold;
}

/* --------------- */
.order-table-extras
{	margin: 0 auto;
}
.order-table-extras:not(:last-child)
{	margin-bottom: 20px;
}
.order-table-extras > dl
{	background-color: #FFF;
	border-bottom: 1px solid #CCC;
}

.order-table-extras > dl > dt,
.order-table-extras > dl > dd
{	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
	padding: 10px;
}
.order-table-extras > dl > dt
{	width: 80%;
	border-right: 1px solid #CCC;
	font-weight: bold;
}
.order-table-extras > dl > dd
{	width: 20%;
}

.order-table-extras > dl.total
{	background-color: #CF8;
	font-size: 1.1em;
	font-weight: bold;
}
.order-table-extras > dl.subtotal
{	background-color: #F2F2F2;
	font-size: 1.05em;
	font-weight: bold;
}

/* -----------------------------------------
/* View Orders/Order History Page
/* ----------------------------------------- */
.list-radio-selector
{}

.list-radio-selector > li
{	position: relative;
	overflow: hidden;
}

.list-radio-selector > li:not(:last-child)
{	border-bottom: 1px solid #CCC;
	padding-bottom: 5px;
	margin-bottom: 5px;
}

.list-radio-selector > li input[type=radio]
{	position: absolute;
	top: 50%;
	left: 15px;
	margin: 0;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

.list-radio-selector > li label
{	background-color: #F8F8F8;
	display: block;
	min-height: 30px;
	padding: 10px 10px 10px 10px;
	border-left: 30px solid #EEE;
	border-radius: 5px;
	color: #4D4D4D;
}
.list-radio-selector > li label:hover,
.list-radio-selector > li input[type=radio]:hover ~ label
{	background-color: #F2FFF2;
	text-decoration: none;
	color: #060;
	border-left-color: #DFD;
}

.list-radio-selector > li input[type=radio]:checked ~ label
{	background-color: #EFE;
	border-left-color: #CEC;
	color: #040;
}

.list-radio-selector > li input[type=radio]:disabled
{	cursor: not-allowed;
}

.list-radio-selector > li input[type=radio]:disabled ~ label
{	background-color: #E4E4E4;
	color: #AAA;
	border-left-color: #D0D0D0;
}

.list-radio-selector > li input[type=radio]:disabled:hover ~ label,
.list-radio-selector > li input[type=radio]:disabled ~ label:hover
{	cursor: not-allowed;
	opacity: 1;
}

.admin.color2 .list-radio-selector > li select
{	background-color: #FFF;
	color: #000;
	border-color: #888;
}

.admin.color2 .list-radio-selector > li select:disabled
{	background-color: #999;
	color: #666;
}


/* -----------------------------------------
/* View Orders/Order History Page
/* ----------------------------------------- */
.order-history-list-wrap
{	border: 4px solid #000;
	border-radius: 4px;
	overflow: hidden;
	margin: 0 auto;
}
.order-history-list-wrap:not(:last-child)
{	margin-bottom: 20px;
}

/* ----- */
.order-histroy-labels
{	background-color: #000;
	padding: 0;
	position: relative;
	color: #FFF;
}

.order-histroy-labels:first-child
{	padding-bottom: 5px;
}
.order-histroy-labels:last-child
{	padding-top: 5px;
}

.order-histroy-labels > h4
{	display: block;
	text-align: left;
	box-sizing: border-box;
	padding: 5px;
}
.order-histroy-labels > nav
{	background-color: #666;
	text-align: left;
	box-sizing: border-box;
	padding: 5px;
	font-size: 0.9em;
}
.order-histroy-labels > nav > p,
.order-histroy-labels > nav > div
{	display: inline-block;
	vertical-align: middle;
}
.order-histroy-labels > nav > div a
{	background-color: #CCC;
	display: inline-block;
	vertical-align: middle;
	color: #000;
	padding: 4px 8px;
	border-radius: 5px;
}
.order-histroy-labels > nav > div a:hover
{	background-color: #EEE;
}

.order-histroy-labels > nav select
{	color: #000;
}

/* ----- */
.order-history-list
{	background-color: #FFF;
	margin: 0 auto;
}
.order-history-list > li:not(:last-child)
{	border-bottom: 2px dotted #333;
}

/* --- */
.order-history-item input[type="checkbox"]
{	display: none;
}

.order-history-item
{	padding: 0;
	color: #000;
}

/* --- */
.order-summary
{}

.order-summary label
{	background-color: #E4E4E4;
	display: block;
	padding: 0 16px 0 10px;
	position: relative;
}
.order-summary label::after
{	background-color: #C4C4C4;
	content: "";
	width: 40px;
	right: 0;
	top: 0;
	bottom: 0;
	display: block;
	position: absolute;
	z-index: 1;
}

.order-summary label:hover
{	background-color: #C0FF60;
	color: inherit;
	text-decoration: none;
}
.order-summary label:hover::after
{	background-color: #A0DF40;
}

input[type="checkbox"]:checked ~ .order-summary label
{	background-color: #D0FF70;
}
input[type="checkbox"]:checked ~ .order-summary label::after
{	background-color: #B0DF50;
}

/* */
.order-summary h4
{	position: relative;
	padding: 8px 35px 8px 10em;
	line-height: 1.5em;
	z-index: 2;
}

.order-summary h4::after
{	content: "";
	position: absolute;
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	border: 0px solid #686;
	right: 0px;
	top: 50%;
	margin-top: -6px;
	border-right-width: 3px;
	border-top-width: 3px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

input[type="checkbox"]:checked ~ .order-summary h4::after
{	border-bottom-width: 3px;
	border-top-width: 0;
	margin-top: -9px;
	right: -1px
}

/* - */
.order-summary h4 > em
{	position: absolute;
	width: 10em;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 0;
	color: #080;
	text-align: left;
	font-weight: bold;
}

/* */
.order-summary h4 > span
{	display: block;
}
.order-summary h4 > span strong
{	display: block;
}
.order-summary h4 > span strong:not(:last-child)
{	margin-bottom: 5px;
}
.order-summary h4 > span small
{	background-color: #F2F2F2;
	font-size: 0.875em;
	line-height: 1.4em;
	border-radius: 5px;
	padding: 2px 7px;
	display: inline-block;
}
.order-summary h4 > span small.white
{	background-color: #FFF;
}

.order-summary h4 > span small.long
{	font-size: 0.85em;
	display: block;
}

/* */
.order-summary h4 > span small.store-color
{	color: #4A0;
}

/* */
.order-summary h4 > span small.status-color1
{	background-color: #CCC;
}
.order-summary h4 > span small.status-color2
{	background-color: #D2D2F2;
	color: #026;
}
.order-summary h4 > span small.status-color3
{	background-color: #FFFFE2;
	color: #661;
}
.order-summary h4 > span small.status-color4
{	background-color: #D2FFEF;
	color: #062;
}
.order-summary h4 > span small.status-color5
{	background-color: #E2FFE2;
	color: #260;
}
.order-summary h4 > span small.status-color6
{	background-color: #DDFF99;
	color: #040;
}
.order-summary h4 > span small.status-color7
{	background-color: #FFE2E2;
	color: #F40;
}
.order-summary h4 > span small.status-color8
{	background-color: #FFE2E8;
	color: #F46;
}

.order-summary h4 > span small.blink-status-mod
{	background-color: #FF8C00;
	animation-name: blinkerStatusUpdate;
	color: #000;
	font-size: 1em !important;
	padding: 4px 10px;
	animation-duration: 1.5s;
	animation-timing-function: linear;
	animation-iteration-count: 2;
}
@keyframes blinkerStatusUpdate
{	50% {background-color: rgba(255,140,0,0.0);}
	75% {background-color: #FF8C00;}
}


.order-summary h4 > span em
{	display: inline-block;
	font-size: 0.85em;
	font-style: italic;
}

/* */
.blink-updated
{	background-color: #6C0;
	animation-name: blinkerUpdate;
	color: #000;
	padding: 3px 8px;
	border-radius: 5px;
	font-weight: bold;
	animation-duration: 1.5s;
	animation-timing-function: linear;
	animation-iteration-count: 2;
}

@keyframes blinkerUpdate
{	50% {background-color: rgba(96,192,0,0);}
	75% {background-color: #6C0;}
}


.order-summary label:hover h4 > span small
{	background-color: #E0FF80;
}

input[type="checkbox"]:checked ~ .order-summary label h4 > span small
{	background-color: #F0FF90;
}

/* --- */
.order-details-wrap
{	background-color: #FFF;
	padding: 20px 10px;
	display: none;
	border-top: 1px solid #CCC;
}

input[type="checkbox"]:checked ~ .order-details-wrap
{	display: block;
}

/* */
.order-details
{	background-color: #FCFFF0;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid #CCC;
	margin: 0 auto;
	color: #3F3F3F;
}

.order-details:not(:last-child)
{	margin-bottom: 20px;
}


.order-details .gray-header
{	background-color: #F2F2F2;
	font-weight: bold;
	margin-bottom: 5px;
	text-align: center;
	padding: 5px;
}
.order-details .action-area
{	margin-top: 30px;
	padding-top: 30px;
	border-top: 1px dashed #999;
}

.order-details .action-header
{	background-color: #876;
	color: #FFF;
	font-weight: bold;
	padding: 8px 15px;
	border-radius: 5px 5px 0 0;
	border: 1px solid #000;
	border-bottom-width: 0;
}
.order-details .action-body
{	background-color: #FFF;
	border: 1px solid #000;
	border-radius: 0 0 5px 5px;
	padding: 15px;
	overflow: hidden;
	color: #000;
}
.order-details .action-body:not(:last-child)
{	margin-bottom: 20px;
}

.order-details ul:not(:last-child)
{	margin-bottom: 20px;
}

.order-details ul > li
{	padding: 3px 5px;
}
.order-details ul > li:last-child
{	font-weight: bold;
}
.order-details ul > li:not(:last-child)
{	border-bottom: 1px solid #DDD;
}

.order-details ul > li p
{	display: inline-block;
	vertical-align: middle;
	box-sizing: border-box;
}
.order-details ul > li p:first-child
{	text-align: left;
	width: 60%;
}
.order-details ul > li p:last-child
{	text-align: right;
	width: 40%;
}


.order-details.canceled
{	background-color: #FFD0C0;
	color: #C40;
}
.order-details.canceled .gray-header
{	background-color: #FFE0E0;
}
.order-details.canceled ul > li:not(:last-child)
{	border-bottom-color: #D99;
}

.canceled-notice
{	background-color: #E40;
	font-weight: bold;
	font-size: 1.15em;
	line-height: 1.6em;
	color: #FFF;
	text-align: center;
	margin: 0 auto;
	padding: 5px 3px;
}
.canceled-notice:not(:last-child)
{	margin-bottom: 10px;
}


/* ---- */
.long-email textarea
{	min-height: 38em;
}

/* -----------------------------------------
/* Store account's summary
/* ----------------------------------------- */
.account-summary-table
{}

.account-summary-table th,
.account-summary-table td
{	padding: 5px 10px;
}
.account-summary-table th
{	background-color: #F2FFCC;
	color: #000;
	font-weight: bold;
	text-align: right;
	width: 45%;
}
.account-summary-table td
{	width: 55%;
	text-align: left;
}
.account-summary-table tr:not(:last-child) th,
.account-summary-table tr:not(:last-child) td
{	border-bottom: 1px solid #080;
}


/* ---------- */
#store-account-table-wrap
{	overflow: auto;
	padding: 0 10px;
}

.store-account-table
{	min-width: 800px;
	font-size: 0.95em;
}

.store-account-table th,
.store-account-table td
{	padding: 5px;
	vertical-align: middle;
}

.store-account-table th
{	font-size: 0.9em;
	width: 100px;
}

.store-account-table th a
{	background-color: #000;
	text-align: center;
	display: block;
	color: #FFF;
	padding: 8px;
	border-radius: 5px;
}
.store-account-table th a:not(:last-child)
{	margin-bottom: 10px;
}

.store-account-table th a:nth-child(1)
{	background-color: #988;
}
.store-account-table th a:nth-child(2)
{	background-color: #897;
}

.store-account-table th a:nth-child(1):hover
{	background-color: #C88;
}
.store-account-table th a:nth-child(2):hover
{	background-color: #8C7;
}

/* */
.store-account-table td:nth-child(2)
{	width: 3em;
}

/* --- */
.store-account-table thead th,
.store-account-table thead td
{	background-color: #DDD;
}

.store-account-table thead th
{	visibility: hidden;
}

/* --- */
.store-account-table tbody th,
.store-account-table tbody td
{	border: 1px solid #888;
}

/* -----------------------------------------
/* Accept inputs for searching
/* ----------------------------------------- */
.store-info-input
{	text-align: center;
}
.store-info-input > div:nth-child(2n)
{	text-align: left;
	width: 68%;
	padding: 5px 0 0;
}

.store-info-input > div:nth-child(2n+1)
{	background-color: #DFC;
	text-align: right;
	width: 30%;
	padding: 5px 10px;
	box-sizing: border-box;
	color: #000;
	font-weight: bold;
}


.date-clr-pad
{	padding-right: 40px;
	box-sizing: border-box;
	width: 280px;
	max-width: 100%;
	display: inline-block;
	position: relative;
}

.date-clr-pad > a
{	background-color: #EEE;
	color: #F21;
	width: 24px;
	height: 24px;
	display: block;
	position: absolute;
	top: 50%;
	right: 10px;
	border-radius: 3px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.date-clr-pad > a::before,
.date-clr-pad > a::after
{	background-color: currentColor;
	content: "";
	position: absolute;
	left: 4px;
	right: 4px;
	height: 3px;
	top: 50%;
	margin-top: -2px;
}
.date-clr-pad > a::before
{	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
.date-clr-pad > a::after
{	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.date-clr-pad > a:hover
{	color: #FFF;
	background-color: #F21;
}

/* -----------------------------------------
/* For pages with searches
/* ----------------------------------------- */
.search-wrap
{}

.search-wrap > input[type=checkbox]
{	display: none;
}

.search-wrap > label
{	display: block;
	margin: 0 auto;
}

.search-wrap > label i
{	display: inline;
}
.search-wrap > label em
{	display: none;
}

.search-wrap > input[type=checkbox]:checked ~ label i
{	display: none;
}
.search-wrap > input[type=checkbox]:checked ~ label em
{	display: inline;
}


.search-wrap > label:hover
{	text-decoration: none;
}

.search-wrap > label .midasi2
{	position: relative;
	padding-right: 40px;
}

.search-wrap > label:hover .midasi2
{	background-color: #7ABA27;
}

.search-wrap > label .midasi2::after
{	content: "";
	width: 8px;
	height: 8px;
	right: 10px;
	top: 50%;
	margin-top: -4px;
	position: absolute;
	box-sizing: border-box;
	border: 0px solid currentColor;
	border-top-width: 2px;
	border-right-width: 2px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.search-wrap > input[type=checkbox]:checked ~ label .midasi2::after
{	border-top-width: 0;
	border-bottom-width: 2px;
	margin-top: -5px;
}

.search-wrap > fieldset
{	background-color: #FFF;
	padding: 20px 10px;
	border: 1px solid #080;
	border-top: none;
	border-radius: 0 0 10px 10px;
	display: none;
}

.search-wrap > input[type=checkbox]:checked ~ fieldset
{	display: block;
}

/* Store select */
.store-select-wrap-wrap:not(:last-child),
.store-select-wrap:not(:last-child),
.store-select-number:not(:last-child)
{	margin-bottom: 20px;
}

.store-select-number
{	font-size: 0.8em;
	margin-top: 10px;
}

.store-select-filters-list
{	background-color: #EEE;
	color: #000;
	border: 1px solid;
	padding: 10px;
}

.store-select-filters-list > li
{	overflow: hidden;
	position: relative;
	padding-left: 200px;
}
.store-select-filters-list > li:not(:last-child)
{	border-bottom: 1px solid;
}
.store-select-filters-list > li::before,
.store-select-filters-list > li .filter-title
{	background-color: #AAA;
	left: 0;
	top: 0;
	bottom: 0;
	width: 200px;
	padding: 5px 10px;
	position: absolute;
	box-sizing: border-box;
}
.store-select-filters-list > li::before
{	content: "";
	z-index: 1;
}

.store-select-filters-list > li .filter-title
{	text-align: right;
	z-index: 2;
}
.store-select-filters-list > li .oh
{	padding: 5px;
	margin-left: 1em;
}
.store-select-filters-list > li .oh label
{	display: inline-block;
}
.store-select-filters-list > li .oh label:not(:last-child)
{	margin-right: 1em;
}

/* -----------------------------------------
/* View Monthly Fees Page
/* ----------------------------------------- */
.view-fee-list
{	color: #000;
}
.view-fee-list > li
{	background-color: #E4E4E4;
}
.view-fee-list > li:not(:last-child)
{	border-bottom: 2px solid #EEE;
}

/* */
.fee-store-header
{	background-color: #FFF;
	text-align: center;
	font-weight: bold;
	font-size: 0.85em;
	padding: 3px 5px;
	margin: 0 auto;
}

/* */
.fee-term-header
{	background-color: #333;
	text-align: left;
	color: #FFF;
	font-weight: bold;
	font-size: 1.05em;
	padding: 4px 10px;
	margin: 0 auto;
}

.fee-term-header.bad
{	background-color: #F40;
	color: #300;
}

/* */
.view-fee-list .fee-entry
{}

.view-fee-list .fee-entry-top
{	background-color: #F2F2F2;
	position: relative;
	padding: 10px;
	margin: 0 auto;
}

/* */
.view-fee-list .fee-entry figure
{	left: 10px;
	width: 40px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	position: absolute;
}

.view-fee-list .fee-entry figure img
{	width: 100%;
}

/* */
.view-fee-list .fee-entry .text
{	padding-left: 50px;
	font-size: 0.95em;
}
.view-fee-list .fee-entry .text strong
{	display: inline-block;
	font-size: 1.25em;
	line-height: 1.4em;
	font-weight: bold;
}

.view-fee-list .fee-entry .text .overdue
{	color: #F41;
	font-weight: bold;
}

/* */
.view-fee-list .fee-entry .fee-admin-controls
{	position: absolute;
	right: 10px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align: right;
}
.view-fee-list .fee-entry .fee-admin-controls > div
{	display: inline-block;
	vertical-align: middle;
}
.view-fee-list .fee-entry .fee-admin-controls > div:not(:last-child)
{	margin-right: 10px;
}
.view-fee-list .fee-entry .fee-admin-controls .btns
{	font-size: 0.9em;
}
.view-fee-list .fee-entry .fee-admin-controls .btns:not(:last-child)
{	margin-bottom: 10px;
}
.view-fee-list .fee-entry .fee-admin-controls .btns > a
{	padding: 10px 12px;
}

/* */
.view-fee-list .fee-online-pay-area
{	background-color: #E2E2E2;
	position: relative;
	padding: 10px;
	margin: 0 auto;
}

/* */
.view-fee-list .fee-entry-details
{	background-color: #222;
	color: #FFF;
	position: relative;
	margin: 0 auto;
	padding: 2px 10px;
	font-size: 0.75em;
	line-height: 1.4em;
	border-top: 1px solid #AAA;
}
.view-fee-list .fee-entry-details p
{	font-style: italic;
	display: inline-block;
}
.view-fee-list .fee-entry-details p:not(:last-child)
{	margin-right: 1em;
}

/* */
.view-fee-list .fee-entry-comment
{	background-color: #E8EFE8;
	color: #000;
	margin: 10px auto;
	padding: 2px 10px;
	line-height: 1.4em;
	border-radius: 3px;
}

/* Colors - late */
.late .fee-term-header
{	background-color: #622;
}

.late .fee-store-header
{	background-color: #FFEFEF;
}

.view-fee-list .late .fee-entry-top
{	background-color: #F2E4E4;
	border-color: #A66;
}

/* Colors - paid */
.paid .fee-term-header
{	background-color: #262;
}

.paid .fee-store-header
{	background-color: #EFFFEF;
}

.view-fee-list .paid .fee-entry-top
{	background-color: #E4F2E4;
	border-color: #6A6;
}

/* --- */
.alternate-bg-list
{	overflow: hidden;
	border: 1px solid #888;
	border-radius: 5px;
}
.alternate-bg-list > li
{	background-color: #EFF;
	overflow: hidden;
	padding: 5px;
}
.alternate-bg-list > li:nth-child(2n)
{	background-color: #FFE;
}

/* ------------------------------------------------ */
.paypal-wrap
{	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/*=========================================================================================================================================================*/
@media screen and (max-width: 1199px)
{	header h2 > span
	{	display: block;
		width: auto;
		margin: 0;
	}
	
	header h2 > span:nth-child(n+2)
	{	margin-top: 10px;
	}
}

/*=========================================================================================================================================================*/
@media screen and (max-width: 799px)
{	header h2 > span:nth-child(n+2)
	{	display: none;
	}
	
	main
	{	padding-left: 0;
		padding-right: 0;
	}

	#main-content
	{	border-left-width: 0;
		border-right-width: 0;
		padding: 15px 10px;
		border-radius: 0;
	}

	#main-content section:not(:last-child)
	{	margin-bottom: 40px;
	}

/* ======= */
	.order-table,
	.order-table tr,
	.order-table thead,
	.order-table tbody,
	.order-table tfoot,
	.order-table th,
	.order-table td
	{	display: block;
		width: auto;
	}
	.order-table tbody
	{	margin-bottom: 30px;
	}
	
	.order-table tbody tr
	{	background-color: #FFF;
		border: 1px solid #000;
		overflow: hidden;
		border-radius: 6px;
		position: relative;
	}
	.order-table tbody tr:not(:last-child)
	{	margin-bottom: 20px;
	}
	
	.order-table th,
	.order-table td
	{	padding: 5px 10px;
	}
	
	.order-table tbody th,
	.order-table tbody td
	{	background-color: transparent;
	}
	
	.order-table tbody th
	{	background-color: #8F4;
		border: 1px none;
		border-bottom-style: solid;
	}
	.order-table tbody td
	{	border: 1px none;
	}
	
	

/* */
	.order-table tbody td.per-unit
	{	position: absolute;
		bottom: 0;
		left: 0;
	}

/* */
	.order-btns .max100px
	{	max-width: none;	
	}
	.order-btns > div
	{	padding-right: 40px;
	}
	.order-btns > div a.redX
	{	width: 30px;
		height: 30px;
	}

/* */	
	.order-table tbody td.total
	{	background-color: #E8FFE0;
		text-align: right;
		font-weight: bold;
		font-size: 1.1em;
		border-top: 1px solid #000;
	}


/* ---- */
	.order-table-extras > dl
	{	border: 1px solid #000;
		border-top-width: 0;
	}
	.order-table-extras > dl:first-of-type
	{	border-top-width: 1px;
	}
	.order-table-extras > dl > dt,
	.order-table-extras > dl > dd
	{	width: 50%;
	}
	.order-table-extras > dl > dt
	{	border-right-color: #000;
	}
	
	
/* --- */
	.store-info-input
	{	text-align: center;
	}
	.store-info-input > div:nth-child(2n)
	{	width: auto;
	}

	.store-info-input > div:nth-child(2n+1)
	{	text-align: center;
		width: auto;
		margin-bottom: 10px !important;
	}

/* --- */
	.store-select-filters-list > li
	{	padding: 0;
	}
	.store-select-filters-list > li:not(:last-child)
	{	border-bottom-width: 0;
		margin-bottom: 5px;
	}
	.store-select-filters-list > li::before
	{	content: none;
	}
	
	.store-select-filters-list > li .filter-title
	{	width: auto;
		position: static;
		margin: 0 auto 5px;
		text-align: center;
	}
	
	.store-select-filters-list > li .oh
	{	padding: 5px;
		margin: 0 auto;
	}
	.store-select-filters-list > li .oh label
	{	padding: 3px;
	}
}

/*=========================================================================================================================================================*/
@media screen and (max-width: 479px)
{	.order-summary h4
	{	padding-left: 0px;
	}

	.order-summary h4 > em
	{	position: static;
		width: auto;
		display: block;
		-webkit-transform: none;
		transform: none;
		text-align: center;
		margin: 0 auto 5px;
	}
}

/*=========================================================================================================================================================*/
/* Admin's color theme */
/*=========================================================================================================================================================*/
body.admin
{	background-color: #FFE6CC;
}

/* */
.admin #header-logos svg:nth-child(1) .a
{	fill: #8B0000;
}
.admin #header-logos svg:nth-child(2) .a
{	fill: #FF4500;
}
.admin #header-logos svg:nth-child(3) .a
{	fill: #FF3500;
}

/* */
.admin header h1
{	background-color: #661A00;
}
.admin header h2
{	background-color: #E62E00;
}
.admin header h2 > span a:hover
{	background-color: #862;
}
.admin header h2 > span a.active
{	background-color: #FFE699;
}
.admin header h2 > span a.logout
{	background-color: #422;
}
.admin header h2 > span a.logout:hover
{	background-color: #644;
}
.admin header h2 > span a.other
{	background-color: #332;
}
.admin header h2 > span a.other:hover
{	background-color: #554;
}

/* */
.admin #main-content
{	border-color: #844;
}
.admin .btns > a.auto-color,
.admin .btns > button.auto-color
{	background-color: #CA2A07;
	color: #FFF;
}
.admin .btns > a.auto-color:hover,
.admin .btns > button.auto-color:hover
{	background-color: #EA4A27;
}
.admin .btns > a.return,
.admin .btns > button.return
{	background-color: #7A6A47;
	color: #FFF;
}
.admin .btns > a.return:hover,
.admin .btns > button.return:hover
{	background-color: #9A8A47;
}

/* */
.admin .midasi2
{	background-color: #FF4500;
}
.admin .midasi3
{	background-color: #FDC;
}

/* */
.admin .order-summary label:hover
{	background-color: #FFC060;
}
.admin .order-summary label:hover::after
{	background-color: #DFA040;
}
.admin .order-summary h4::after
{	border-color: #866;
}
.admin .order-summary h4 > em
{	color: #C22;
}
.admin .order-summary h4 > span small.store-color
{	color: #A60;
}
.admin .order-summary label:hover h4 > span small
{	background-color: #FFE080;
}

.admin input[type="checkbox"]:checked ~ .order-summary label
{	background-color: #FFD070;
}
.admin input[type="checkbox"]:checked ~ .order-summary label::after
{	background-color: #DFB050;
}

.admin input[type="checkbox"]:checked ~ .order-summary label h4 > span small
{	background-color: #FFF090;
}

/* */
.admin .account-summary-table th
{	background-color: #FFF2CC;
}

.admin .account-summary-table tr:not(:last-child) th,
.admin .account-summary-table tr:not(:last-child) td
{	border-bottom-color: #800;
}

/* */
.admin .store-info-input > div:nth-child(2n+1)
{	background-color: #FDC;
}
.admin .search-wrap > label:hover .midasi2
{	background-color: #FF7530;
}
.admin .search-wrap > fieldset
{	border-color: #FF4500;
}

/* ------------------------------------ */
@media screen and (max-width: 799px)
{	.admin .order-table tbody th
	{	background-color: #FA6;
	}
	.admin .order-table tbody td.total
	{	background-color: #FFE8E0;
	}
}

/*=========================================================================================================================================================*/
/* Admin's color theme - alt */
/*=========================================================================================================================================================*/
body.admin.color2
{	background-color: #202020;
}

.admin.color2 select,
.admin.color2 input[type=text], .admin.color2 input[type=password],
.admin.color2 textarea
{	background-color: #000;
	color: #FFF;
}


/* */
.admin.color2 #header-logos svg:nth-child(1) .a
{	fill: #55FF55;
}
.admin.color2 #header-logos svg:nth-child(2) .a
{	fill: #00AA00;
}
.admin.color2 #header-logos svg:nth-child(3) .a
{	fill: #55AAAA;
}

/* */
.admin.color2 header h1
{	background-color: #005555;
}
.admin.color2 header h2
{	background-color: #007777;
}
.admin.color2 header h2 > span a:hover
{	background-color: #862;
}
.admin.color2 header h2 > span a.active
{	background-color: #FFE699;
}
.admin.color2 header h2 > span a.logout
{	background-color: #808;
}
.admin.color2 header h2 > span a.logout:hover
{	background-color: #A2A;
}
.admin.color2 header h2 > span a.other
{	background-color: #406;
}
.admin.color2 header h2 > span a.other:hover
{	background-color: #608;
}

/* */
.admin.color2 #main-content
{	background-color: #333;
	border-color: #A0A;
	color: #FFF;
}
.admin.color2 .btns > a.auto-color,
.admin.color2 .btns > button.auto-color
{	background-color: #5555FF;
	color: #FFF;
}
.admin.color2 .btns > a.auto-color:hover,
.admin.color2 .btns > button.auto-color:hover
{	background-color: #7777FF;
}
.admin.color2 .btns > a.return,
.admin.color2 .btns > button.return
{	background-color: #A50;
	color: #FFF;
}
.admin.color2 .btns > a.return:hover,
.admin.color2 .btns > button.return:hover
{	background-color: #C70;
}

/* */
.admin.color2 .midasi2
{	background-color: #AA0077;
}
.admin.color2 .midasi3
{	background-color: #80C;
	color: #FFF;
}
.admin.color2 .outline-box
{	background-color: #282828;
	color: #FFF;
	border-color: #F5F;
}
.admin.color2 .outline-box a.text-link
{	color: #5FF;
}
.admin.color2 .outline-box a.text-link:hover
{	color: #7FF;
}

/* */
.admin.color2 .order-table tbody th,
.admin.color2 .order-table tbody td
{	background-color: #555;
	color: #FFF;
}
.admin.color2 .order-table-extras > dl
{	background-color: #555;
	color: #FFF;
}

.admin.color2 .order-table-extras > dl.subtotal
{	background-color: #055;
}

.admin.color2 .order-table-extras > dl.total
{	background-color: #350;
}



/* */
.admin.color2 .order-summary label:hover
{	background-color: #FFC060;
}
.admin.color2 .order-summary h4::after
{	border-color: #866;
}
.admin.color2 .order-summary h4 > em
{	color: #C22;
}
.admin.color2 .order-summary h4 > span small.store-color
{	color: #A60;
}
.admin.color2 .order-summary label:hover h4 > span small
{	background-color: #FFE080;
}

.admin.color2 input[type="checkbox"]:checked ~ .order-summary label
{	background-color: #FFD070;
}
.admin.color2 input[type="checkbox"]:checked ~ .order-summary label h4 > span small
{	background-color: #FFF090;
}

/* */
.admin.color2 .account-summary-table th
{	background-color: #AFF;
}

.admin.color2 .account-summary-table tr:not(:last-child) th,
.admin.color2 .account-summary-table tr:not(:last-child) td
{	border-bottom-color: #0AA;
}

/* */
.admin.color2 .store-info-input > div:nth-child(2n+1)
{	background-color: #377;
	color: #FFF;
}
.admin.color2 .search-wrap > label:hover .midasi2
{	background-color: #CC2299;
}
.admin.color2 .search-wrap > fieldset
{	background-color: #333;
	border-color: #AA0077;
}

/* ------------------------------------ */
@media screen and (max-width: 799px)
{	.admin.color2 .order-table tbody th
	{	background-color: #580;
	}
	.admin.color2 .order-table tbody td.total
	{	background-color: #008000;
	}
}



 /* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */   
  height: 100%;
  width: 100%;
  position: fixed; /* Stay in place */
  z-index: 999; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: rgba(0,0,0, 0.8); /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay p {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #818181;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}

/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #f1f1f1;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay p {font-size: 20px}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}