@charset "utf-8";
@import '//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css';
/* CSS Document */


ul, li {
	margin: 0;
	padding: 0;
}

ul.indented {
	margin-left: 1rem;
}

.version-table li {
    margin-left: 15px;
}

.show-800 {
	display: none;
}


/* Structure
---------------------------------------- */

#content {
	padding: 40px 0;
}

.pagePopup #content {
	padding: 0;
}

#content .site-width {
	max-width: 760px;
}

.content-title {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 1em;
}

#leftCol {
	width: 240px;
	margin-left: 20px;
	margin-bottom: 20px;
	float: left;
}

#mainRight {
	width: 760px;
	margin-bottom: 20px;
	float: right;
	margin-right: 10px;
}


.block {
	float: left;
	width: 210px;
	height: 100%;
	border-top:none;
	border-bottom: none;
	border-left: none;
	border-right: 2px solid #e6781e;
	padding: 10px;
	margin-top: 15px;
}

.first {
	border-left: 2px solid #e6781e;
	width: 211px;
}

#main .block {
	width: 226px;
}

body.popup #content {
	padding-top: 0;
}

.tooltip-circle {
	border-radius: 10px;
	width: 20px;
	display: inline-block;
	text-align: center;
	margin-left: 5px;
	cursor: pointer;
	background-color: #e6781e;
	color: white;
	font-weight: bold;
	font-size: 13px;
	line-height: 20px;
}

#show-previous-orders {
	display: block;
	margin-top: 15px;
}

.accordion > .header {
	border-bottom: 2px solid #eee;
	padding: 10px 0;
	position: relative;
}

.accordion > .header:first-child {
	border-top: 2px solid #eee;
}

.accordion > .header h2 {
	font-weight: 300;
	font-size: 20px;
	margin: 0;
	color: inherit;
}

.accordion > .header h2 a {
	color: #555;
}

.accordion > .header h2 a:hover {
	color: #29abe2;
}

.accordion > .header span.error {
    text-transform: uppercase;
    font-weight: 700;
    color: #f00;
    font-size: 0.7em;
    margin-left: 2em;
}

.accordion > .header > .controls,
#deliveryAreaForm .controls {
	position: absolute;
	right: 0;
	top: 10px;
	width: 100%;
	
	display: flex;
	align-items: center;
	
	justify-content: flex-end;
}

#deliveryAreaForm .high-volume-alert {
	width: 0;
	height: 0;
	opacity: 0;

	transform: translateY(5px);
	transition: transform 0.25s ease;

	margin-right: auto;
	padding: 0.5rem;
	
	background-color: #e6781e;
	color: #fff;
}

#deliveryAreaForm .high-volume-alert.visible {
	width: auto;
	height: auto;
	opacity: 1;

	transform: translateY(0);
}

.high-volume-advisory {
	padding: 0.5rem;
	font-size: 0.75rem;
	background-color: #e6781e;
	color: #fff;
}

tr.high-volume-advisory td {
	border-bottom: 1px solid #e6781e;
}
tr.high-volume-advisory td:first-child {
	border-left: 1px solid #e6781e;
}
tr.high-volume-advisory td:last-child {
	border-right: 1px solid #e6781e;
}

tr.high-volume-selected td {
	border-bottom: 1px solid #e6781e;
}
tr.high-volume-selected td:first-child {
	border-left: 1px solid #e6781e;
}
tr.high-volume-selected td:last-child {
	border-right: 1px solid #e6781e;
}

.down-arrow {
	position: relative;
}

.down-arrow::after {
	content: '';
    position: absolute;
    bottom: -14px; 
    
    border-style: solid;

	border-left: 10px solid transparent;
  	border-right: 10px solid transparent;
  	border-top: 10px solid #e6781e;
}

#proof-revisions .accordion .controls {
	right: 30px;
}

#test-proof-links {
	margin: -2px -2px 0;
}

#test-proof-links a {
	background-color: #29abe2;
	color: white;
	padding: 10px 30px;
	text-align: center;
	display: block;
}

#test-proof-links a:hover {
	opacity: 0.8;
}

#proof-revisions-instructions {
	padding: 10px 30px;
	text-align: center;
	background-color: #99ca3c;
	color: white;
	font-size: 1.5em;
}

.action-button,
.controls .button,
.controls .button-sized,
.showAgent .button,
.clearAgent .button {
	border: 2px solid #888;
	color: #888;
	background-color: white;
	display: inline-block;
	border-radius: 4px;
	text-transform: uppercase;
	font-size: 0.75rem;
	font-weight: bold;
	padding: 3px 10px;
	margin-left: 0.5rem;
	text-align: center;
	min-width: 0;
	cursor: pointer;
}

.action-button {
	margin-left: 0;
	border-color: #29abe2;
	color: #29abe2;
	background-color: white;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.action-button:hover {
	background-color: #29abe2;
	color: white;
}

.edit-button-wrap {
	display: inline-block;
}

.controls .button-sized {
	border-color: transparent;
}

.controls .button:hover {
	background-color: #888;
	color: white;
}

.controls .button.hideOnLoad {
	display: none;
}

.controls .button.big {
	padding: 12px 24px;
	border-radius: 6px;
}

.controls .button.blue,
.controls input.button.blue,
.showAgent .button.blue,
.clearAgent .button.blue {
	border-color: #29abe2;
	color: #29abe2;
	background-color: white;
}

.controls .button.blue.active,
.controls .button.blue:hover,
.controls input.button.blue.active,
.controls input.button.blue:hover,
.showAgent .button.blue:hover {
	background-color: #29abe2;
	color: white;
}

.controls .button.blue.reversed,
.controls input.button.blue.reversed {
	background-color: #29abe2;
	color: white;
}

.controls .button.blue.reversed:hover,
.controls input.button.blue.reversed:hover {
	background-color: white;
	color: #29abe2;
}

.controls .button.light-gray,
.controls .button-sized.light-gray {
	border: 2px solid #bbb;
	color: #bbb;
}

.controls .button-sized.light-gray {
	border-color: transparent;
}

.controls .button.blue:hover {
	background-color: #29abe2;
	color: white;
	opacity: 1.0;
}

.controls .button.gray.reversed,
.controls input.button.gray.reversed {
	border: 2px solid #aaa;
	background-color: #aaa;
	color: white;
}

.controls .button.fixed-width {
	width: 5rem;
}

#agentBlock2 {
	margin-top: 30px;
	border-top: 2px solid #eee;
}

.order-step {
	border: 2px solid #eee;
	border-top: none;
	padding-bottom: 20px;
}

.order-step.no-border {
	border: none;
}

.order-step.no-bottom-border {
	border-bottom: none;
}

.order-step.border-bottom-blue {
	border-bottom: 2px solid #29abe2;
}

.order-step.border-top-blue {
	border-top: 2px solid #29abe2;
}

.order-step-header {
	background-color: #eee;
	padding: 15px 30px;
	display: flex;
	justify-content: space-between;
	gap: 2em;
}

/* Add a white gap below an order-step-header */
.order-step-header-gap {
	margin-bottom: 4px;
}

/* Allow an item in a fieldset to bleed to margins */
.bleed {
	margin-left: -1.5rem;
	margin-right: -1.5rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

fieldset.simple .order-step-header {
	background-color: transparent;
	padding: 0;
	align-items: end;
	border-bottom: 2px solid #eee;
	margin-top: -12px;
}

.order-step fieldset.simple .order-step-header h3 {
	border-bottom: none;
}

.order-step fieldset.simple .order-step-header .help-video-button-wrap {
	padding-bottom: 10px;
}

.help-video-button-outer-wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2em;
	padding: 4px 10px 4px 32px;
}

.checkout-addons-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2em;
	padding: 4px 10px 4px 32px;
}

.order-step-header.tabs-wrapper {
	background-color: transparent;
	padding: 0;
}

.tabs {
	display: flex;
}

.tab {
	flex: 1;
	background-color: #eee;
	padding: 15px 30px;
	position: relative;
}

.tab:hover {
	background-color: transparent;
}

.tab.selected {
	background-color: transparent;
}

.tab a {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.order-step-header h6 {
	margin-bottom: 0;
	font-size: 1.1em;
}

.order-step-header p,
.orderReview .order-step-header p {
	margin: .7em 0 0;
}

.full-width-help-video-button-wrap {
	background-color: #eee;
	text-align: center;
	padding: 12px;
	margin-top: 2px;
}

.help-video-button {
	width: 115px;
	height: auto;
	display: block;
}

.full-width-help-video-button-wrap .help-video-button {
	margin: 0 auto;
}

.order-step-header .help-video-button:hover {
	opacity: 0.8;
}

.order-step-header.tabs-wrapper .help-video-button {
	margin: 10px 20px 0 0;
}

.order-step fieldset.simple {
	padding: 1.6rem 24px 0;
	margin-bottom: 0;
}

/* CM: I need to remove padding from an element that originates from an include, and 
       which is shared between public and admin views. Public needs padding, admin does not */
.remove-fieldset-padding fieldset {
	padding: 0 !important
}

/* A .panel-item is already padded */
.order-step .panel-item fieldset.simple {
	padding: 0;
}

.order-step fieldset.simple h3 {
	color: inherit;
    font-size: 14px;
    margin: 0;
    background-color: inherit;
    padding: 0 6px 4px;
    border-bottom: 2px solid #eee;
    text-transform: uppercase;
}

.order-step fieldset.simple h3.no-border {
	border-bottom: none;
}

.bg-gray fieldset.simple h3 {
	border-bottom-color: #fff !important;
}

.order-step fieldset.simple h3 span {
	font-weight: normal;
	text-transform: none;
}

.order-step fieldset.simple .right-link {
	float: right;
}

.right-link.order-form-width {
	margin-right: 25%;
	font-size: .85em;
}

.order-step .field-group {
	width: 75%;
	padding-left: 6px;
	box-sizing: border-box;
}

.order-step .field-group.full-width {
	width: 100%;
	padding-right: 6px;
}

.field-group p {
	margin: 15px 0 0;
}

.field-group p.bottom-margin {
	margin-bottom: 15px;
}

.field-group p.selected-delivery-area {
	text-align: right;
	margin-top: 6px;
	font-weight: bold;
	font-size: 1.1em;
}

.field-group p.selected-delivery-area span.small {
	font-size: 0.8em;
}

.order-step .field-row {
	padding-top: 16px;
	padding-bottom: 0;
}

.order-step .field {
    width: 100%;
    margin-right: 0;
    box-sizing: border-box;
    float: none;
}

.order-step .field.disabled {
	opacity: 0.5;
}

.order-step .inline-block .field {
	width: auto;
	display: inline-block;
	vertical-align: top;
	padding-right: 10%;
}

.order-step fieldset a:not(.button):not(.typeahead-results-scroller-option):not(.ui-state-default) {
	text-decoration: underline;
}

.order-step input[type="password"],
.order-step input[type="tel"],
.order-step input[type="text"],
.order-step input[type="email"] {
    width: 100%;
    height: 28px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    padding: 2px;
}

.order-step textarea {
	box-sizing: border-box;
}

.order-step select {
    width: 100%;
    margin-right: 0;
    height: 24px;
    border: 1px solid #adadad;
    box-sizing: border-box;
}

.order-step input[type="text"].small-field {
	width: 80px;
}

.order-step input[type="radio"] {
	margin-right: 4px;
}

.order-step .field.header {
	padding-bottom: 4px;
}

.order-step .field.header h4 {
	margin: 0;
	color: #0c7ebd;
}

.order-step .field.header h4.label {
	color: inherit;
}

.order-step .field.header p {
	margin: 0;
}

.order-step .field.header em {
	color: #000;
}

.order-step label {
	font-weight: 700;
	color: #333;
	font-size: .84em;
}

.order-step .radio-stack p {
	margin: 0.3em 0 0.5em;
}

.agentBlock img.placeholder,
#imageAgentPhoto img.placeholder,
#imageAgentLogo img.placeholder {
	width: 100px;
	height: auto;
	margin: 1em 0;
	opacity: 0.7;
}

/* Don't apply a margin to an image that has no src attribute */
.agentBlock img.placeholder:not([src]),
#imageAgentPhoto img.placeholder:not([src]),
#imageAgentLogo img.placeholder:not([src]) {
	margin: 0;
}

.agent-thumbnail-wrapper {
	width: 90%;
}

.agent-thumbnail {
	display: grid;
	place-content: center;
	/* display: flex;
	align-items: center; */
	height: 130px;
	padding: 10px 0;
	
	border: 1px solid #ccc;
	text-align: center;
}

.agent-thumbnail img {
	display: block;
	object-fit: contain;
	width: 100%;
	height: 100%;

	max-height: 130px;
}

[data-crop-root] .agent-thumbnail img {
	max-width: 130px;
}

.action-block {
	position: relative;
	margin-top: 0.8em;
	padding: 10px 15px;

	background-color: #eee;
}

.action-block-crop {
	position: absolute;
	inset: 0 !important;
	z-index: 1;
	padding: 10px;

	display: flex;
	align-items: center;
	flex-wrap: wrap;
	column-gap: 0.5rem;
	row-gap: 0.25rem;

	background-color: #eee;
}

.action-block-crop button {
	white-space: nowrap;
}

.action-block-crop .crop-optout {
	margin-left: 0.5rem;
}

.action-block input[type=file] {
	width: 100%;
}

.submit-controls {
	position: relative;
	min-height: 45px;
	padding: 10px 30px;
	margin-top: 1.3rem;
}

.submit-controls.border-bottom {
	border-bottom: 2px solid #eee;
}

#deliveryAreaForm .submit-controls {
	margin-top: .5rem;
	margin-bottom: .5rem;
}

.submit-controls .controls {
	position: absolute;
	right: 30px;
}

.submit-controls .controls.disabled::after {
	content: '';
	inset: 0;
	position: absolute;
	background-color: rgba(255,255,255, 0.7);
}

.submit-controls .required-legend {
	position: absolute;
	bottom: 10px;
	font-size: 0.75rem;
}

.typeahead-results-scroller {
	max-width: 250px;
	max-height: 100px;
	overflow: auto;
	border: 1px solid #ccc;
	border-top: none;
}

.typeahead-results-scroller p {
	padding: 3px;
	margin: 0;
}

.typeahead-results-scroller a {
	color: inherit;
}

.typeahead-results-scroller p:hover,
.typeahead-results-scroller p.selected {
	background-color: #eee;
}


span.versions {
	font-size: .84em;
	margin-left: 1em;
	font-weight: normal;
}

span.versions.latest-version-changed {
	background-color: #ff0;
}


/* Areas popup */


#total {
	position: absolute;
	top: 0;
	right: 0;
	padding: 5px 15px 5px 12px;
	border-left: 1px solid #ccc;
	z-index: 100;
	display: none;
	background-color: #fff;
	font-size: 12px;
	height: 42px;
	box-sizing: border-box;
	align-items: center;
}

.strike {
	text-decoration: line-through;
}

#areas-state-top-controls {
	padding-top: 0;
}

#deliveryAreaForm .submit-controls#areas-state-bottom-controls {
	padding-bottom: 0;
	margin-bottom: 0;
}

#areas-state-top-controls .controls {
	top: 0;
}

/* Progress spinner */

.progress {
	margin-bottom: 10px;
	background-color: #d7d7d7;
}

.bar {
	width: 0;
	height: 20px;
	background-color: #ff6200;
	-webkit-transition: width .2s ease;
	-moz-transition: width .2s ease;
	-ms-transition: width .2s ease;
	-o-transition: width .2s ease;
	transition: width .2s ease;
}



.bannerBox {
	width: 100%;
}

.bannerBox h2 {
	font-weight: 300;
	font-size: 20px;
	margin: 0;
}

.bannerBox h2.disabled {
	color: #aaa;
}

.bannerBox .banner.orange h2 {
	color: #fff;
}

.bannerBox.main, 
.bannerBox.blurb,
.bannerBox.subscribe{
	width: 190px;
	height: 222px;
	color: #fff;
	padding: 20px;
	/*font-family: 'PT Sans Narrow';*/
	margin-bottom: 3px;
}

.bannerBox p {
	margin-bottom: 0;
	font-size: 12px;
}

.bannerBox fieldset.simple p {
	font-size: inherit;
}

.bannerBox p.right {
	float: right;
	max-width: 50%;
	font-size: 10px;
	font-weight: bold;
	margin-top: 11px;
}

.bannerBox p.big {
	font-size: 15px;
}

.bannerBox .banner.orange p.right {
	color: #fff;
}

.bannerBox.main {
	background: #309cd4 url(../images/index/blue_bg.jpg) no-repeat 0px 0px;
}

.bannerBox.main h2,
.bannerBox.blurb h2,
.bannerBox.subscribe h2 {
	/*font-family: 'PT Sans Narrow';*/
	padding: 0;
	margin-bottom: 10px;
	font-size: 26px;
}

.bannerBox.main h2 {
	font-size: 25px;
}

.bannerBox.blurb {
	background: #1fa94e url(../images/index/green_bg.jpg) no-repeat 0px 0px;
	padding-top:25px;
	height:259px;
}

.bannerBox.blurb p {
	font-size:17px;
	padding-bottom:10px;
}

.bannerBox.blurb ul li {
	font-size:16px;
	padding-bottom: 5px;
	list-style:none;
	background: url('../images/index/check-mark.png') no-repeat 0 2px;
	padding-left:18px;
}

.bannerBox.shareThis {
	border: 1px solid #007ec0;
	width: 220px;
	padding: 2px 4px;
	margin-bottom: 20px;
	/*font-family: 'PT Sans Narrow';*/
	color: #007ec0;
	text-align: center;
}

.bannerBox.shareThis span {
	font-size: 16px;
	vertical-align: middle;
	line-height: 20px;
	display: inline-block;
	padding-right: 2px;
}

.bannerBox.shareThis a {
	display: inline-block;
}

.bannerBox.subscribe {
	background-color: #e6781e;
	height: auto;
}

.bannerBox.subscribe p {
	margin-bottom: 6px;
}

.bannerBox.subscribe a {
	color: #fff;
}

.sourceOrderSelectWrapper {}

ul.selectItemTypeHeaders {
	list-style-type: none;
	display: flex;
	justify-content: space-between;
}

ul.selectItemTypeHeaders li {
	text-align: center;
	padding: 10px 2%;
	color: white;
	position: relative;
}

ul.selectItemTypeHeaders li.fast {
	background-color: #2b9f4c;
	width: 62.7%;
}

ul.selectItemTypeHeaders li.slow {
	background-color: #b20019;
	width: 29.3%;
}

ul.selectItemType {
	list-style-type: none;
	display: flex;
	justify-content: space-between;
}

ul.selectItemType--thirds {
	gap: 2px;
}


.selectItemType li {
	text-align: center;
	width: 21%;
	padding: 20px 2% 10px;
	background-color: #eee;
	position: relative;
}

.selectItemType--thirds li {
	width: 30%;
}

.selectItemType.no-background li {
	background-color: transparent;
}

.selectItemType li:has(input:checked), /* Click zones extending use of selectItemType, show active state when child radio button is active */
.selectItemType li.selected,
.selectItemType li:hover {
	background-color: transparent;
}

.selectItemType.no-background li:hover {
	background-color: #eee;
}

.selectItemType img {
	max-width: 100px;
	display: block;
	margin: 10px auto;
	cursor: pointer;
}

.selectItemType label:not(.static),
.selectItemType a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.selectMoxiType {

    position: relative;
    margin: 0;
    margin-top: 1px;
    padding: 1.2rem 0 1rem 0;

    display: flex;
    justify-content: center;

    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    
    border-bottom: 2px solid #eee;
	background-color: #eee;
    color: #444;
}

.selectMoxiType label {
    color: #444;
    cursor: pointer;
    transition: color 0.2s ease;
    font-size: 14px;
    text-align: center;
    display: inline-block;
    padding: 14px 0;
    line-height: 1;
}

.selectMoxiType:hover,
.selectMoxiType.selected {
    background-color: #fff;
}

.moxiworks-prompt {
    display: flex;
    align-items: center;
}

.moxiworks-logo {
    padding-right: 1.1rem;
    margin-right: 1rem;
    position: relative;
}

.moxiworks-logo img {
    display: block;
}

.moxiworks-logo::after {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    content: '';
    width: 1px;
    height: 30px;
    background-color: #aab1b2;
}

.is-loading {
    background: transparent url(/images/order/Uploading_Spinner.gif) center / 60px no-repeat;
    min-height: 120px;
}

.sourceOrder-options.is-loading fieldset {
    display: none;
}

.intro {
	padding-bottom: 1em;
}

.intro img {
	max-width: 100%;
}

#home .block {
	border: 0;
}

#home .block a {
	color:#e97904;
	text-decoration: none;
}

#home .block a:hover {
	color: #D35610;
}

.boxGreen {
	border: 2px solid #2b9f4c;
	border-top:none;
	padding: 0 10px 10px;
	margin-left: 9px;
	margin-right: 19px;
	margin-bottom: 15px;
}

.boxShare {
	border: 2px solid #0c7ebd;
	border-top: none;
	padding-top: 0;
	padding-bottom: 10px;
	margin-left: 9px;
	margin-right: 19px;
	margin-bottom: 15px;
}

.boxBlue {
	border: 2px solid #0c7ebd;
	border-top: none;
	padding: 0 10px 10px;
	margin-left: 9px;
	margin-right: 19px;
	margin-bottom: 15px;
}

.boxOrange {
	border: 2px solid #e6781e;
	border-top: none;
	padding: 0 10px 10px;
	margin-left: 9px;
	margin-right: 19px;
	margin-bottom: 15px;
}



#sideShare {
	border: 1px solid #0c7ebd;
	padding: 2px;
	width: 174px;
	margin-bottom: 6px;
}

.center {
	text-align: center;
}

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-bold { font-weight: bold; }
.text-normal { font-weight: normal; }


/* Theme scroller
-------------------------------------*/
.ui-noscroll {
	/*margin-bottom: 24px;*/
	overflow: auto;
}

.ui-noscroll .items {
	width: 52%;
	min-height: 400px;
	background-color: #eee;
	padding: 6px 1%;
	box-sizing: border-box;
	float: left;
}

.ui-noscroll .items.white {
	background-color: transparent;
	padding: 0;
}

.ui-noscroll .ui-iframe-previewer {
	width: 44%;
}

.ui-iframe-scroller { 
	/*height: 420px; */
	/*margin-bottom: 24px;*/
	overflow: hidden; 
	scroll: auto;
}
.ui-iframe-scroller .items img.ui-preview-me { 
	width: 100%;
	max-width: 100px;
}

.ui-iframe-previewer {
	/*background: transparent url("../images/order/flyerPreview.gif") top center no-repeat;
	background-size: contain;*/
	overflow: hidden;
	float: right;
	/*padding: 1%;
	border: 1px solid #ddd;*/
	width: 44%;
}

.ui-iframe-previewer img {
	max-width: 100%;
}

.scrollable {
	position: relative;
}

.scrollable .items { 
	position: absolute;
	height: 412px;
	overflow: auto;
	width: 52%;
	/*border: 1px solid #ddd;
	padding-left: 1.5%;*/
	background-color: #eee;
	padding: 6px 1%;
}

.items div.scrollerElement {
	display: inline-block;
	width: 30%;
	margin-left: 0;
	margin-right: 2%;
	text-align: center;
	padding-bottom: 6px;
}

.scrollerElement a {
	text-decoration: none;
}

.can-scroll {
	overflow: auto;
}

/* Typography & Colors
---------------------------------------- */

h3 {
    color: #2b9f4c;
    font-size: 16px;
    margin: 0 0 5px;
}

h4 {
    font-size: 14px;
    margin: 0 0 5px;
}

h4.label {
	font-size: 12px;
}

h3.blue, h4.blue {
    color: #0c7ebd;
}

h5 {
    font-size: 13px;
    font-weight: bold;
    left: 470px;
    margin: 0;
    position: absolute;
    text-transform: uppercase;
    top: 13px;
}

h6 {
    font-size: 14px;
    margin: 0 0 14px;
}

.big {
	font-size: 15px;
}

.bold {
	font-weight: bold;
}	

.green {
	color: #2b9f4c;
}

.black {
	color: #111;
}

.thirds {
	overflow: auto;
}

.thirds h6 {
	width: 33%;
	display: inline-block;
	text-align: center;
	vertical-align: bottom;
}

.thirds img {
	max-width: 100%;
}

.bannerGreen760 h2.disabled {
	color: #90c39e;
}

hr {
	border: 0;
	width: 100%;
	height: 1px;
	background-color: #ddd;
	color: #ddd;
	font-size: 0px;
}

hr.space {
	margin: 18px 0;
}

.addressCol h6 {
	margin: 6px 0 0 0;
	font-size: 1.4em;
	text-decoration: none;
	color: #8cce0a;
	font-weight: bold;
}

.addressCol p {
	color: #ffffff;
	font-size: 1.1em;
}

.addressCol a:link {
	color: #8cce0a;
	font-size: 1.1em;
	text-decoration: none;
}

.addressCol a:visited {
	color: #8cce0a;
	font-size: 1.1em;
	text-decoration: none;
}

.addressCol a:hover {
	color: #8cce0a;
	font-size: 1.1em;
	text-decoration: underline;
}

.addressCol a:active {
	color: #88cce0;
	font-size: 1.1em;
	text-decoration: underline;
}

.addressCol p {
	font-size: 1.1em;
}

.order-types {
	text-align: center;
}

.order-type {
	vertical-align: middle;
	display: inline-block;
	width: 40vw;
	max-width: 220px;
	text-align: center;
}



/* Lists
---------------------------------------- */




/* Images
---------------------------------------- */

.preLoad {
	display: none;
}

.bannerGreen240 {
	height: 40px;
	background-image: url(../images/common/bannerGreen240.jpg);
	background-repeat: no-repeat;
}

.bannerBlue240 {
	height: 40px;
	background-image: url(../images/common/bannerBlue240.jpg);
	background-repeat: no-repeat;
}

.banner {
	background-color: #eee;
	position: relative;
	padding: 8px 90px 6px 12px;
	margin-bottom: 16px;
}

.banner.help-video-button-outer-wrap {
	padding-right: 20px;
}

.order-steps .banner {
	padding: 8px 210px 6px 12px;
}

.order-steps h5,
.bannerBox h5.right,
.bannerBox .banner select.right {
	left: auto;
	right: 124px;
	top: auto;
	bottom: 11px;
}

.bannerBox h5.right {
	right: 5%;
}

.banner.right-link {
	padding-right: 130px;
}

.bannerBox .banner select.right {
	position: absolute;
	right: 0;
	bottom: 10px;
}


.banner a {
	display: block;
	position: absolute;
	font-size: 12px;
	bottom: 12px;
	right: 5%;
}

.banner.help-video-button-outer-wrap a {
	position: static;
}

.banner h5.right a {
	position: static;
	bottom: auto;
	right: auto;
}

.banner.orange a {
	color: #fff;
}

.banner.orange {
	background-color: #e6781e;
}

.banner.blue {
	background-color: #0d7dbc;
}

.banner.orange a,
.banner.blue,
.banner.blue a {
	color: #fff;
}


#postit {
	float: right;
	padding-left: 10px;
	margin-top: -5px;
}

#blockRow {
	background-image: url(../images/common/blockRow.gif);
	background-repeat: repeat-y;
}



/* Order Accordions
---------------------------------------- */

.box {
	padding: 0 20px 24px;
	margin: 0 auto;
}

.stepLast {
	margin-left: 9px;
	margin-right: 19px;
	margin-bottom: 0;
	margin-bottom: 15px;
}




/* Form Elements
---------------------------------------- */

form {
	margin: 0;
	display: inline;
	padding: 0;
}

label {
	font-size: .84em;
	font-weight: bold;
	padding-left: 1px;
}

label.standard {
	font-size: inherit;
	font-weight: inherit;
	padding-left: 0;
}

label span.standard,
label.normal-weight {
	font-weight: normal;
}

.link-right {
	float: right;
	padding-left: 30px;
}

label.pointer {
	cursor: pointer;
}

label.subtle {
	font-size: 12px;
	font-weight: normal;
}

.bannerBox form p {
	margin-bottom: 10px;
}

.bannerBox form p.no-bottom-margin {
	margin-bottom: 0;
}

.bannerBox form p.form-instructions {
	margin: 0.1em 0;
	font-size: 0.84em;
}

.bannerBox form .radio-stack {
	font-size: inherit;
	margin-bottom: 0;
	line-height: 1.7;
}

.small {
	font-size: 1em;
}

.smaller {
	font-size: 0.84em;
}

.subscribeCol td .small {
	font-size: .84em;
}

.orderFormTable {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	/*margin-bottom: 1em;*/
}

.orderFormTable td {
	padding: 0;
	vertical-align: top;
	width: 212px;
}

.orderFormTable td.rfCol1 {

}

.orderFormTable td.rfCol2 {

	padding-left: 11px;
}

.orderFormTable td.rfCol3 {

	padding-left: 11px;
}

/*
TODO - can any of these formCols be combined/replaced with classes?
*/

#formCol1,
#formCol2,
#formCol3 {
	float: left;
	width: 32%;
	margin-right: 1%;
}

#formCol4 {
	float: left;
	width: 436px;
	clear: both;
}

#formCol4h {
	float: left;
	width: 650px;
	clear: both;
}

#formCol5 {
	float: left;
	width: 212px;
	padding-left: 10px;
}

#formColCity {
	float: left;
	width: 48%;
	padding-right: 2%;
}

#formColState {
	float: left;
	width: 18%;
	padding-right: 4%;
}

.agentBlock #formColState {
	width: 24%;
}

#formColZip {
	float: left;
	width: 26%;
	padding-right: 1%;
}

.agentBlock #formColZip {
	width: 20%;
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="tel"]{
	margin: 0;
	border: 1px solid #80807A;
	/*font-family: "Trebuchet MS",Verdana,Tahoma,Arial,Helvetica,sans-serif;*/
	color: #341405;	
	padding: 2px 1%;
}

select {
	border: 1px solid #80807A;
	color: #341405;	
	width: 28%;
	height: 20px;
	margin-right: 2%;
}

select#state,
select#subscription_state,
select#shippingState,
select.agentState {
	width: 100%;
}

option {
	/*font-family: "Trebuchet MS",Verdana,Tahoma,Arial,Helvetica,sans-serif;*/
	color: #341405;
	font-size: 1em;	
}

option:disabled {
	color: #999;
}

input[type="email"]:focus,
input[type="password"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus {
	border: 1px solid #e6781e;
}

select:focus {
	border: 1px solid #e6781e;
}

.checkout-alert {
	background-color: #f00;
	color: white;
	padding: 10px;
}

.checkout-alert.orange-box {
	background-color: #e6781e;
}

.checkout-alert a {
	color: white;
	text-decoration: underline;
}

p.submitButton {
	text-align: right;
	margin-bottom: 0;
}

p.submitButton.center {
	text-align: center;
}

p.submitButton.left {
	text-align: left;
}

p.submitButton input[type=submit],
p.submitButton a {
	background-color: #99ca3c;
    border-radius: 6px;
    color: #fff;
    display: inline-block;
    font-size: 1.2rem;
    padding: 14px 40px;
    text-align: center;
    border: none;
    cursor: pointer;
    margin-left: 10px;
}

p.submitButton input[type=submit]:hover,
p.submitButton a:hover {
	background-color: #a7db46;
}

p.submitButton a.standard {
	background-color: transparent;
	border-radius: 0;
	color: #000;
	margin: 0 10px 0 0;
	padding: 0;
}

p.submitButton a.standard:hover {
	color: #999;
}

p.submitButton input[type=submit].button-orange {
	background-color: #e6781e;
}

p.submitButton input[type=submit].disabled {
	background-color: #adb0b2;
	cursor: default;
}

.order-steps p.submitButton {
	text-align: left;
}

.order-steps p.submitButton input[type=submit] {
	margin-left: 0;
	margin-right: 12px;
}

.indent-sides {
	margin-left: 6px;
	margin-right: 6px;
}

#dotloop-tip {
	position: absolute;
	display: none;
	z-index: 1;
	right: 7px;
	top: 22px;
	background-color: #fff;
	padding: 10px;
	border: 1px solid #e6781e;
	width: 275px;
	font-size: 12px;
}

.circled {
	display: inline-block;
	cursor: pointer;
	background-color: #0c7ebd;
	color: #fff;
	width: 20px;
	height: 19px;
	padding-top: 1px;
	text-align: center;
	border-radius: 10px;
	
}

button.button-link {
    border: none;
    padding: 0;
    cursor: pointer;
    background-color: transparent;
    appearance: none;
    color: #0d7dbc;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    outline: none;
}

/* ads */
#ads {
	float: right;
	width: 50%;
	text-align: right;
	position: relative;
	margin-bottom: 20px;
}

#ads img {
	width: 100%;
	height: auto;
}

#ads .owl-controls {
	position: absolute;
	top: auto;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 20px;
}

#ads .owl-dots {
	position: absolute;
	bottom: -25px;
	left: 0;
	width: 100%;
	text-align: center;
}

#ads .owl-dot {
	width: 10px;
	height: 10px;
	border-radius: 10px;
	background-color: rgba(0, 0, 0, .7);
	display: inline-block;
	margin: 0 5px;
}

#ads .owl-dot.active {
	background-color: #e6781e;
}







/* login / reset password */
.reset-password,
#login {
	float: left;
	width: 42%;
}

.reset-password .field,
#login .field {
	float: none;
	width: 100%;
}

#login input[type="email"],
#login input.email,
#resetPw input[type="email"],
#resetPw input.email {
	/*CM - added toggle-pwd-view elements and require these to be 100%. If there's fallout, apply the width constraint to the container, not the element */
	/* width: 96%; */
	width: 100%;
}

#login input[type="password"] {
	/*CM - added toggle-pwd-view elements and require these to be 100%. If there's fallout, apply the width constraint to the container, not the element */
	/* width: 96%; */
	width: 100%;
}

.reset-password label,
#login label,
#resetPw label,
.orderForm label {
	margin-top: 10px;
}

/*.orderForm .field label {
	font-size: 0.92em;
}*/

#login h6 {
	padding-bottom: 0;
}

#resetPw p.submitButton {
	margin-top: 10px;
}

#login p.submitButton input[type=submit] {
	margin-left: 0;
}


input.full-width,
.orderForm input[type="tel"].full-width,
.orderForm input[type="email"],
.orderForm input[type="password"],
.orderForm input[type="text"],
.orderForm input[type="tel"].sms,
.orderForm input.tel.sms {
	/*width: 96%;*/
}

::placeholder {
	opacity: 1.0;
	color: #bbb;
}

.orderForm .orderFormTable input[type="text"] {
	max-width: 200px;
}

.orderForm .orderFormTable select {
	width: 48%;
	max-width: 100px;
}

.orderForm input[type="tel"],
.orderForm input.tel {
	/*width: 64%;*/
}

.orderForm input[type="text"].autoWidth,
select.autoWidth  {
	width: auto;
	margin: 0;
}

.optional,
.required {
	font-size: 0.9em;
	font-weight: normal;
	float: right;
}

form p.optional,
form p.required {
	font-size: 9px;
	position: absolute;
	top: 2px;
	right: 0;
}

form p.required {
	font-weight: bold;
}

.required {
	color: #b20019;
}

.inline-required {
	color: #b20019;
}

input[type="checkbox"]:focus {
	border: 1px solid #e6781e;
}

.checkout-bar {
	margin-bottom: 10px;
}

.checkout-bar img {
	max-width: 100%;
}

.checkout-bar .alert-bar {
	background-color: #d00;
	color: white;
	padding: 6px;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
}

.checkout-banner {
	margin: 30px 0 10px;
	text-align: center;
}

.addon-title {
	text-align: center;
	font-weight: bold;
	color: #fff;
	background-color: #0d7dbc;
}
.addon-highlight {
	color: #fff;
	background-color: #e6781e;
}

.addon-highlight.center {
	text-align: center;
}

.public td.addon-title,
.public td.addon-highlight.big {
	font-size: 15px;
	padding: 6px;
}

.addon-available {
	background-color: #f9f0d7;
}

tr.addon-row.border-top {
	border-top: 2px solid #aaa;
}

div.add-on-details {
	display: none;
}

.add-on-details h3 {
	margin-bottom: 10px;
}

.add-on-details p {
	margin-bottom: 8px;
}

td.addon,
.public td.addon {
	padding: 8px 6px;
	vertical-align: top;
}

.public td.cart-item-divider {
	background-color: #666;
	padding: 1px;
}

input[type=submit].addon {
	/*background-color: #e6781e;*/
	background-color: #2b9f4c;
	border: none;
	color: #fff;
	border-radius: 4px;
	padding: 2px 6px;
	cursor: pointer;
}

input[type=submit].addon:hover {
	opacity: 0.8;
}

.addon-highlight input[type=submit].addon {
	border: 1px solid #125e28;
}

div.icon {
	position: absolute;
	left: 2px;
	top: 1px;
}

.icon img {
	width: 22px;
	height: auto;
}

.nested-addon-description-wrap {
	width: 42%;
}

.addon-description {
	padding-left: 32px;
}

.addon-description h3 {
	color: inherit;
	margin-bottom: 0;
}

.addon-description p {
	margin-top: 0.5em;
	margin-bottom: 0;
}

.addon-description p.subtitle {
	font-weight: bold;
	margin-top: 0;
}

.start-new-order {
	width: 100%;
	max-width: 300px;
}

.start-new-order:hover {
	opacity: 0.8;
}

/*
TODO - these next three are only used in orderChooseSource.tpl.php
*/

.newOrderCol {
	float: left;
	display: inline;
	padding: 0 5px;
	border-left: 2px solid #0c7ebd;
	width: 31%;
}

.newOrderCol.first {
	border-left: none;
}

.agent-left {
	float: left;
	width: 72%;
	display: inline;
}

.agent-left .small {
	font-size: .92em;
}

.agent-right {
	float: left;
	width: 22%;
	padding: 0 0 0 2%;
	margin: 0 0 10px 1%;
	display: inline;
	border-left:  2px solid #0c7ebd;
	height: 270px;
}


input[type="radio"].floatLeft {
	margin-top: 5px;
	float: left;
}

.radioLabel {
	padding-left: 25px;
}

.continue {
	clear: both;	
}

.spinner-variation {
	text-align: center;
	background-color: #fff;
	padding: 12px;

	/* override the default sizing applied to this element to accommodate the extra content which was added */
	min-width: 400px;
	max-width: 800px;
	width: auto !important;
}

.spinner-variation .spinner.standard {
	/* reduce the top padding to make room for the extra content that was just added */
	padding-top: 20px;
}


/* Bob additions */

.alert {
	color: #b20019;
	font-weight: bold;
}

.alert p.alert {
	margin-bottom: 0;
}

.gray {
	color: #666;
}

.light {
	font-weight: normal;
}

.message-obvious p.alert {
	font-size: 18px;
	margin-bottom: 4px;
}

form.view-cart-checkout {
	display: block;
	padding: 8px 0;
	overflow: auto;
}

.view-cart-checkout p.submitButton {
	float: right;
}

.cart-add-item {
	float: left;
	margin: 4px 0 0 18px;
}

.clear { 
	clear: both; 
	height: 1px; 
	font-size: 0; 
	overflow: hidden; 
}

fieldset {
	margin-top: 1em;
}

legend {
	font-weight: bold;
}

fieldset > p,
fieldset p.top-margin {
	margin-top: 1em;
}

fieldset table {
	width: 100%;
	border: 1px solid #eee;
	border-collapse: collapse;
	margin-bottom: 1em;
	background-color: #f9f9f9;
}

fieldset th {
	background-color: #ddd;
	padding: 2px 6px;
}

fieldset td {
	border: 1px solid #eee;
	padding: 3px 6px;
}

.half {
	width: 50%;
	float: left;
}


/* Ryan's UI additions - to be merged */

.boxTips {
	border: 2px solid #b20019;
	padding: 10px;
	margin-left: 9px;
	margin-right: 19px;
	margin-bottom: 15px;
	/*margin-top: 100px;*/
	font-size: 1.3em;
	color: #341405;
	background-color: #ffe5de;
	position:relative;
}

.boxTips:after {
	content: ' ';
	height: 0;
	position: absolute;
	width: 0;
	border: 12px solid transparent;
	border-left-color: #b20019;
	left: 100%;
	top: 6px;
}

.boxTips ul {
	margin-left: 1.3em;
}


input[type="number"] {
	margin: 0;
	border: 1px solid #80807A;
	/*font-family: "Trebuchet MS",Verdana,Tahoma,Arial,Helvetica,sans-serif;*/
	color: #341405;	
	padding: 2px;
}

.field {
	float: left;
	margin-right: 1%;
	width: 32%;
	/*display: block;*/
	position: relative;
}

.field.with-checkbox {
	padding-left: 20px;
	position: relative;
}

.field.with-checkbox .checkbox {
	position: absolute;
	top: 4px;
	left: 0;
}


.field.two-thirds {
	width: 65%;
}

.field.half {
	width: 49%;
}

.field.left {
	clear: both;
}

.photoUpload {
	margin-right: 10px;
	clear: both;
	margin-bottom: 20px;
}

.photoUpload .image-wrap {
	display: inline-block;
	vertical-align: top;
	width: 150px;
	margin: 0 15px 10px 0;
	font-size: 12px;
}

.photoUpload .image-wrap img {
	max-width: 100%;
	height: auto;
}

.photoUpload .text-wrap {
	display: inline-block;
	vertical-align: top;
	width: 170px;
}

.field.right {
	margin-right: 0;
}

.chars {
	font-size: 0.9em;
	font-weight: normal;
	float: right;
}

textarea {
	margin: 0;
	border: 1px solid #80807A;
	font-family: "Open Sans", Arial,sans-serif;
	color: #341405;	
	padding: 2px;
	display: block;
	overflow:auto;
	font-size:1em;
}

textarea:focus {
	border: 1px solid #e6781e;
}

input[type="url"] {
	margin: 0;
	border: 1px solid #80807A;
	/*font-family: "Trebuchet MS",Verdana,Tahoma,Arial,Helvetica,sans-serif;*/
	color: #341405;	
	padding: 2px;
	display: block;
	width: 205px;
}

input[type="url"]:focus {
	border: 1px solid #e6781e;
}

.agentScroll {
	max-height: 164px;
	overflow: auto;
}

.agentScroll p {
	padding-right: 18px;
	padding-top: 8px;
	padding-bottom: 8px;
	margin: 0 !important;
}

.bannerBox .form .agentScroll p {
	margin-bottom: 0;
}

.agentScroll p:nth-child(odd) {
	background-color: #f4f4f4;
}

.wrapBeforeCheckbox {
	position: relative;
	padding-left: 19px;
}

.agentScroll .wrapBeforeCheckbox {
	padding-left: 26px;
}

.wrapBeforeCheckbox input[type="radio"] {
	position: absolute;
	left: 0px;
	top: 3px;
}

.agentScroll .wrapBeforeCheckbox input[type="radio"] {
	left: 5px;
	top: 13px;
}

.wrapBeforeCheckbox input[type="checkbox"] {
	position: absolute;
	left: 0px;
	top: 3px;
}

.subOrderItems {
	margin-left: 24px;
	padding-top: 4px;
}

form .subOrderItems p {
	margin-bottom: .5em;
	margin-left: 2.2em;
	text-indent: -2.2em;
}

.orderReview p {
	margin-bottom: 1em;
}

.orderReview label {
	color: #0c7ebd;
	font-weight: bold;
}

.orderPrintingOptionHeader p {
	font-size: 1.1em;
	margin-bottom: 0;
}

.public {
	border: 1px solid #ddd;
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

.public tr.alt {
	background-color: #eee;
}

.public td {
	padding: 3px 6px;
	font-size: 12px;
}

.public.td-borders td {
	border: 1px solid #ddd;
}

.grid td {
	border: 1px solid #ddd;
}

.public th {
	background-color: #ddd;
	font-size: 14px;
	padding: 3px;
	font-weight: bold;
}

.public h6 {
	padding-bottom: 0;
	font-size: 1.2em;
}



ol.schedule {
	margin-top:0;
	margin-left:-16px;
	font-size:1.4em;
}

.displayOrderStep {
	padding-top: 12px;
}



.ui-state-highlight, 
.ui-widget-content .ui-state-highlight, 
.ui-widget-header .ui-state-highlight {
	background-color: #ccc;
}

.ui-state-active, 
.ui-widget-content .ui-state-active,
.ui-widget-content .ui-state-highlight.ui-state-active, 
.ui-widget-header .ui-state-active {
	background-color: #e6781e;
	background-image: none;
	font-weight: bold;
	color: #fff;
}



/* ---------------------------------
General Purpose Utilities 
*/

button.link {
	padding: 0;
	border: none;
	background-color: transparent;
	color: #0d7dbc;
	font-family: inherit;
	font-weight: inherit;
	font-size: inherit;
	cursor: pointer;
}

button.link:disabled {
	color: #666;
}

.flex-columns {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.flex-columns .width-10 { min-width: 10%; width: 10%; }
.flex-columns .width-20 { min-width: 20%; width: 20%; }
.flex-columns .width-30 { min-width: 30%; width: 30%; }
.flex-columns .width-40 { min-width: 40%; width: 40%; }
.flex-columns .width-50 { min-width: 50%; width: 50%; }
.flex-columns .width-60 { min-width: 60%; width: 60%; }
.flex-columns .width-70 { min-width: 70%; width: 70%; }
.flex-columns .width-80 { min-width: 80%; width: 80%; }
.flex-columns .width-90 { min-width: 90%; width: 90%; }
.flex-columns .width-100 { min-width: 100%; width: 100%; }

.flex-columns.justify-start {
	justify-content: flex-start;
}

.flex-columns.align-end {
	align-items: flex-end;
}

.flat-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* spacing utilities 
	mb1em was here when I began, and already had a px value, so I've stuck with that. But these could be converted to use 
	rem or em units */
.mb1em {margin-bottom: 10px;}
.mt1em { margin-top: 10px; }
.mtb1em { margin-top: 10px; margin-bottom: 10px; }

.mb1_2em {margin-bottom: 1.2em;}

.has-border { 
	border: 1px solid #ccc;
}

.pt1em { padding-top: 10px }
.pb1em { padding-bottom: 10px }
.ptb1em { padding-bottom: 10px; padding-bottom: 10px; }
.p1em { padding: 10px; }

.pl10 { padding-left: 10px ;}
.pl20 { padding-left: 20px ;}
.pl30 { padding-left: 30px ;}

.pr10 { padding-right: 10px ;}
.pr20 { padding-right: 20px ;}
.pr30 { padding-right: 30px ;}

.ml10 { margin-left: 10px ;}
.ml20 { margin-left: 20px ;}
.ml30 { margin-left: 30px ;}

.mr10 { margin-right: 10px ;}
.mr20 { margin-right: 20px ;}
.mr30 { margin-right: 30px ;}

.width-100 { width: 100%; }



/* ---------------------------------
END: General Purpose Utilities 
*/


.bannerBox p.mb1em {
	margin-bottom: 1em;
}


.productCat {
	float: left;
}

.strike {
	text-decoration: line-through;
}

input.submitAfterText {
	vertical-align: bottom;
	margin-left: 12px;
}

.submitPhoto {
	vertical-align: bottom;
	padding: 0 0 2px 6px;
}

.letter {
	background-color: #dad7cb;
	padding: 30px 30px 20px;
}

.letter p {
	margin-bottom: 1em;
}

.productLists {
	width: 710px;
	margin-left: 25px;
	margin-top: 1em;
}

.productList {
	border-top:none;
	border-left: 2px solid #2b9f4c;
	border-right: 2px solid #2b9f4c;
	padding-top: 0;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 5px;
	margin-left: 9px;
	margin-right: 19px;
	margin-bottom: 0;
}

.productThumb {
	float: left;
	text-align: center;
	width: 100px;
	margin-left: 8px;
	font-size: 1.16em;
	padding: 5px 0;
}

.productThumb img {
	margin-bottom: 3px;
}

#repeatFlyer {
	width: 700px;
	height: 500px;
	margin-bottom: 10px;
}

ul.terms {
	margin-left: 18px;
}

ul.terms li {
	margin-bottom: .6em;
}

ul.terms ul {
	padding-top: .6em;
}

ul.terms li li {
	margin-left: 2em;
	font-size: 1em;
}

/* loading icon */
.spinner {}

.spinner.standard {
	padding: 90px 0 20px 0;
}

.spinner-variation {
	display: none;
}

.spinner-variation.active {
	display: block;
}

#form_search button.btn_search {
	background:url("../images/index/button-search.gif") 0 0 no-repeat;
	width:21px;
	height:20px;
	display:block;
	border:0;
	float:right;
}

.hideOnLoad,
p.submitButton input[type="submit"].hideOnLoad {
	display: none;
}

.fieldHighlight {
	border: 1px solid #c00; 
	background-color: #fdd; 
	padding: 6px; 
	margin-bottom: 1em;
	margin-top: 15px;
}

.fieldHighlight.pad2 {
	padding: 12px 12px 0;
}

.fieldHighlight hr {
	margin: 12px 0;
	background-color: #999;
}

/* Proof Approval */


.mfp-bg.designerNotes {
	background-color: transparent !important;
}

.mfp-wrap.designerNotes.mfp-close-btn-in .mfp-close {
	color: #fff;
}

.designer-notes-lightbox {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 30px 100px;
	max-width: 640px;
	max-height: 480px;
	overflow: auto;

	background-color: rgba(11,11,11, 0.8);
	color: #fff;
}

.designer-notes-lightbox-body {
	margin-bottom: 2rem;
}

.designer-notes-lightbox h2 {
	color: #fff;
	text-align: center;
}

.designer-notes-lightbox .controls {
	padding-left: 0;
	text-align: center;
}

.designer-notes-lightbox .button {
	margin-left: 0;
	cursor: pointer;
}

#proof-revisions {
	display: none;
	margin-bottom: 20px;
}

#proof-revisions .accordion > .header {
	padding-left: 30px;
	padding-right: 30px;
	border-left: 2px solid #eee;
	border-right: 2px solid #eee;
}

#proof-revisions .accordion .order-step {
	display: none;
}

#proof-revisions .accordion .order-step.activeStep {
	display: block;
}


#approval {
	overflow: auto;
	max-width: 760px;
	margin: 0 auto;
}

/* approval-form */

#approval-form-left,
#approval-form-right {
	float: left;
	width: 48%;
	margin-right: 2%;
}

#approval-form textarea {
	width: 100%;
}

#approval-form .label {
	display: inline-block;
	width: 7em;
}
#approval-form input.email-subject {
	width: 84%;
}

#approval-form td {
	vertical-align: top;
	padding-bottom: 15px;
	padding-right: 5px;
}

#approval-form #send-options,
#approval-form #datetime-wrapper,
#approval-form #revisions-text,
#approval-form #approved-submit-controls {
	display: none;
}


#approval-form select {
	width: auto;
}

#approval-form p.submitButton input[type="submit"] {
	margin-left: 0;
}

#approval-form p.submitButton input[type="submit"].submitting {
	background-image: url(../images/icon-loading.svg);
	background-position: 0 0;
	background-repeat: no-repeat;
}

/* proof-review */
#proof-review {
	width: 100%;
}

#proof-review ul {
	list-style: none;
	margin: 0;
	border-bottom: 1px solid #ccc;
}

#proof-review li {
	display: inline-block;
	border: 1px solid #ccc;
	border-bottom: none;
	margin-right: 4px;
}

#proof-review li a {
	display: block;
	padding: 4px;
}

#proof-review li a.active,
#proof-review li a:hover {
	background-color: #ccc;
}

#iframe {
	border: 2px solid #eee;
	border-top: none;
}

#iframe.border-top {
	border-top: 1px solid #ccc;
}

#proof-review li#enlarge-container {
	float: right;
	background-color: #e6781e;
	text-align: center;
	transform: translateY(-18px);
	margin-right: 0;
	border: none;
}

#enlarge {
	color: #fff;
}

.display-errors,
.display-errors h3 {
	color: #f00;
}

#send-options .display-errors {
	padding: 10px 30px 0;
}

#confirmSend {
	display: none;
	border: 1px solid #ccc;
	background-color: #fff;
	padding: 0 1em 1em;
	margin-top: 1em;
	margin-bottom: 1em;
}

#proof-thumbnail {
	width: 20%;
	float: right;
	position: relative;
	padding-top: 38px;
}

#proof-thumbnail img {
	width: 100%;
	opacity: 0.5;
}

#proof-thumbnail .controls a {
	margin: 0;
}


/* end proof approval */

.file-upload {
    position: relative;
    transition: padding-left 0.5s ease;
    display: inline-block;
}

.file-upload.has-file {
    padding-left: 24px;
	overflow: hidden;
	max-width: 525px;
	box-sizing: border-box;
}

.file-upload::before {
    content: '\2713';
    
    position: absolute;
    top: 1px;
    left: 0;
    transform: translateX(-32px);
    transition: transform 0.5s ease;
    opacity: 0;
}

.file-upload.has-file::before {
    opacity: 1;
    transform: translateX(0);

    display: flex;
    justify-content: center;
    align-items: center;

    width: 1.3em;
    height: 1.3em;
    padding: 2px 0 0 0;
    box-sizing: border-box;

    border-radius: 100%;
    
    line-height: 1;
    font-size: 14px;
    color: #fff;
    background-color: #0d7dbc;
}

.hidden  {
	display: none;
}

.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* -----------------------
	Fancy Box styles
   ----------------------- */

.fancybox-content {
	padding: 15px !important;
	max-width: 98%;
	border-radius: 6px;
	box-sizing: border-box;

	-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);

	overflow: visible;
}

.fancybox-content .fancybox-toolbar {
	opacity: 1;
	visibility: visible;
	z-index: 20;
}

.fancybox-content .fancybox-button {
    background: #000;
    color: #fff;
    border-radius: 100%;
    height: 34px;
    padding: 5px;
    width: 34px;
    position: absolute;
    right: -14px;
    top: -14px;
    opacity: 1;
	border: 2px solid rgba(255, 255, 255, .9);
	box-shadow: 2px 2px 4px rgba(0, 0, 0, .5);
}

.fancybox-slide--html .fancybox-close-small {
	color: #fff;
}

.fancybox-content.add-on-details {
	max-width: 600px;
	width: 100%;
}

.fancybox-button .fancybox-button--close {
	outline: none;
}

/* -----------------------
	magnific lightbox adjustments to be more fancyboxish
   ----------------------- */

.mfp-iframe-holder .mfp-close {
	top: -14px;
	right: 31px;
	opacity: 1;
	display: block;
	text-indent: 60px;
	overflow: hidden;

	position: absolute;
	width: 36px;
	height: 36px;
	cursor: pointer;
	z-index: 8040;

	background: transparent url('../images/lightbox_close_sprite.png') 0 0 no-repeat;
}

.mfp-iframe-holder iframe {
	border-radius: 4px;
}

.center-captcha {
	text-align: center;
}

.center-captcha .captcha_wrapper {
	display: inline-block;
	margin: 0 auto;
}

.half-column {
	display: inline-block;
	width: 50%;
	vertical-align: top;
}

.half-column--pad-right {
	padding-right: 5%;
	box-sizing: border-box;
}

.half-column--pad-left {
	padding-left: 5%;
	box-sizing: border-box;
}

.checkbox-wrapper {
	position: relative;
	padding-left: 16px;
	line-height: 1.2;
	margin-bottom: 5px;
}

.checkbox-wrapper input[type="checkbox"] {
	position: absolute;
	left: 0;
	top: 2px;
}

.med-text {
	font-size: 22px;
}

input.button {
	border: none;
	border-radius: 6px;
	background-color: #99ca3c;
	padding: 14px 40px;
	text-align: center;
	color: #fff;
	font-size: 1.4em;
	display: inline-block;
}

/* Progress bar
---------------------------------------- */

.progress-bar {
    position: relative;
    display: none;
}

.progress-bar.is-visible {
    display: block;
    height: 8px;
    margin: 5px 0;
}

.progress-bar__bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 8px;
    width: 0;
    border-radius: 8px;
    background-color: #29abe2;
    transition: width 0.1s ease;
}


/* Toggle password fields visible/obscured
---------------------------------------- */

.toggle-pwd-view {
    position: relative;
    display: inline-block;
}

.toggle-pwd-view--input-block {
    display: block;
}

.toggle-pwd-view button {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-52%);
	line-height: 1;
	
	font-size: 16px;
	
	border: none;
	cursor: pointer;
	appearance: none;
	background-color: transparent;
}

.toggle-pwd-view button :hover {
	background-color: transparent;
}


/* Password requirements
---------------------------------------- */
.pwd-reqs { 
	margin-top: 15px; 
}

.pwd-reqs h2 {
    font-size: 14px;
}

.pwd-reqs  ul {
    list-style: none;
    margin: 0 0 1.6em 0;
    padding: 0;
}

.pwd-reqs li {
    position: relative;
    padding-left: 19px;
    color: #f00;
}

.pwd-reqs li::before {
    position: absolute;
    top: -1px;
    left: 0;
    width: 14px;
    height: 14px;

    content: '\f06a';
    font-family: 'FontAwesome';
    font-size: 14px;
}

.pwd-reqs li.is-fulfilled {
    color: #81B845;
}

.pwd-reqs li.is-fulfilled ::before {
    content: '\f058';
}


/* Animate Login button into view once recaptcha is loaded
---------------------------------------- */
.hidden-submit {
	width: 0;
	height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(-5px);
}

.hidden-submit.is-visible {
	width: auto;
	height: auto;
	transition: opacity 0.25s ease, transform 0.25s ease;
	opacity: 1;
	transform: translateY(0);
}

/* 800px */
@media screen and (max-width: 800px) {
	.field {
		float: none;
		width: auto;
		/*max-width: 300px;
		margin: 0 auto !important;*/
	}
	
	/*.orderReview .field {
		float: left;
		width: 32%;
		margin: 0 1% 0 0 !important;
		max-width: none;
	}
	
	.orderReview .field.half {
		width: 49%;
	}*/
	
	#approval-form-left, #approval-form-right {
		float: none;
		margin: 0;
		width: auto;
	}
	
	#proof-review li {
		display: block;
	}
	
	.show-800 {
		display: block;
	}

	.half-column {
		display: block;
		width: auto;
		max-width: 300px;
		margin: 0 auto;
	}

	.half-column.half-column--pad-left {
		padding-left: 0;
	}

	.half-column.half-column--pad-right {
		padding-right: 0;
	}
}


/* 700px */
@media screen and (max-width: 700px) {
	#login {
		display: block;
		float: none;
		margin: 0 auto 40px auto;

		width: 100%;
	}

	#login .field {
		text-align: left;
		width: 80%;
		margin: 0 auto;
	}

	#login .submitButton.left {
		text-align: center;
	}

	#ads {
		float: none;
		width: 80%;
		margin: 0 auto 30px auto;
	}
}


/* 600px */
@media screen and (max-width: 600px) {
	.box {
		padding-left: 0;
		padding-right: 0;
	}
	
	.half {
		float: none;
		width: auto;
		margin-bottom: 16px;
	}
	
	#approval-form p.submitButton input[type="submit"] {
		font-size: 1em;
		padding: 14px;
	}
	
	.ui-iframe-scroller {
		height: auto;
	}
	
	.ui-iframe-previewer,
	.scrollable .items {
		width: auto;
		position: static;
		float: none;
	}
	
	.ui-iframe-previewer {
		text-align: center;
	}
	
	.scrollable .items {
		height: 400px !important;
		margin-bottom: 12px;
	}
	
	.order-step-header {
		flex-direction: column;
	}
	
	.order-step-header .help-video-button-wrap {
		align-self: center;
	}
	
	.order-step-header.tabs-wrapper .help-video-button {
		margin: 0;
	}
}

@media (max-width: 560px) {
    .moxiworks-prompt {
        flex-direction: column;
    }
    .moxiworks-logo {
        padding: 0;
    }
    .moxiworks-logo::after {
        display: none;
    }
}

@media screen and (max-width: 480px) {
	#ads {
		width: 100%;
	}
}

@media print { 
	.noPrint {
		display: none;
	}
}