/* Theme Overrides */
:root {
	--darkRed: #690020;
	--green: #0AE43A;
	--border: 1px solid #B6B6B5;
	--content-max-width: 1100px;
}

.error {
	color: var(--error);
}

body {
	background-color: #fff;
	height: 100%;
	width: 100%;
}

html,
body {
	overflow-x: hidden;
}

.collapsable {
	height: 0;
}

#mainContent {
	min-height: 100vh;
	display: flex;
	flex-flow: column;
}

.btn-primary:active,
.btn-primary:focus,
.btn-primary {
	background: var(--black);
	color: #fff;
	border-color: var(--black);
}

.btn-primary:disabled {
	background: #bababa;
	color: #fff;
	border-color: #bababa;
}

.btn-primary:hover {
	background: var(--darkGrey);
	border-color: var(--darkGrey);
}

.btn-secondary:active,
.btn-secondary:focus,
.btn-secondary {
	background: #fff;
	color: var(--black);
	border-color: var(--black);
}

/* || Nav ----------------------------*/

#search {
	background: transparent;
	border-bottom: 1px solid #fff;
	border-radius: 0;
	color: #fff;
	margin-left: 5px;
	width: 100%;
}

#accountBox {
	position: relative;
	z-index: 300;
}

#accountBox button {
	transition: .2s ease-in-out;
}

#accountBox:hover button {
	color: var(--mediumGrey);
	transition: .2s ease-in-out;
}

#settings {
	cursor: pointer;
}

#settings i {
	color: var(--black);
	transform: rotate(0deg);
	transition: .3s ease-in-out;
}

#settings:hover i {
	color: var(--mediumGrey);
	transform: rotate(180deg);
	transition: .3s ease-in-out;
}

#alertBox {
	color: #fff;
	cursor: pointer;
	padding: 5px 10px;
	position: relative;
}

nav.hide-nav:not(.show-search) #alertBox {
	color: #000;
}

#alertBox i {
	opacity: .8;
	transition: opacity .3s ease-in-out;
}

#alertBox:hover i {
	opacity: 1;
	transition: opacity .3s ease-in-out;
}

#alertBox.error i,
#alertBox.warning i,
#alertBox.success i {
	animation: 10s linear ring-bell infinite;
}

.navlinks:not(.expanded) #alertBox.error:hover i {
	color: #ffffffad;
}

/* || Main ----------------------------*/

main {
	color: var(--black);
	height: 100%;
	min-height: 100vh;
	position: relative;
	width: 100%;
}

.content {
	padding-top: 64px;
}

/* || Sections ----------------------------*/

section.overview {
	background: #fff;
	border-bottom: 1px solid transparent;
	display: flex;
	flex-flow: row nowrap;
	justify-content: center;
	margin: 0;
	opacity: 0;
	overflow: hidden;
	padding: 16px 20px 0;
	transform: translateX(100%);
	transition: .8s;
}

section.overview.slide-in {
	opacity: 1;
	transform: initial;
}

section.overview.add-bg {
	background: var(--background);
	border-bottom: var(--border);
	transition: .8s;
}

section.overview .tile {
	font-size: .8em;
	height: 100%;
	min-width: 250px;
	width: auto;
}
section.overview .tile h3 {
	margin: 0.1em 0;
}


/* || Footer ----------------------------*/

footer {
	width: 100%;
	padding-top: 4px;
	background: #fff;
	color: var(--black);
}

.footer-row {
	max-width: var(--content-max-width);
	margin-left: auto;
	margin-right: auto;
}

.footer a {
	color: var(--black);
	opacity: 1;
}

.footer .footer-row > *:not(:last-child){
	margin-right: 2em;
}

.footer .phone {
	font-weight: 400;
}

.footer .phone:hover {
	color: var(--black);
}

/* || Inputs ----------------------------*/

input,
select {
	font-weight: 300;
	padding: 0;
	border: none;
	border-radius: 6px;
}

input::placeholder,
select::placeholder {
	color: var(--mediumGrey);
}

input.underline {
	background: none;
	border-bottom: 1px solid var(--black);
	border-radius: 0;
}

input.error,
select.error {
	outline: 2px solid var(--error);
}

.inline-select {
	display: inline-flex;
	align-items: baseline;
	cursor: pointer;
}

.inline-select select {
	font-size: 1.5em;
	font-weight: 500;
	color: var(--blue);
	padding: 0;
	cursor: pointer;
	background: none;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	outline: none;
}

.inline-select i {
	font-size: 1em;
	color:var(--mediumGrey);
	display: inline-block;
	margin: 0;
	padding: 0;
}

.results-limit {
	width: 100%;
}

.results-limit select {
	width: auto;
	border: none;
	padding-top: 8px;
	padding-bottom: 8px;
	border-radius: 6px;
	margin-left: auto;
}

/* || Forms ----------------------------*/

form {
	width: 100%;
}

.form-item.grouped.wrap {
	flex-flow: row wrap;
}

.form-item.grouped.wrap > *:last-child {
	margin-right: 0;
}

.form-item.append input {
	flex-grow: 1;
	/*border-top-right-radius: 0;*/
	/*border-bottom-right-radius: 0;*/
}

.form-item.append .input-group-text {
	/*max-width: 130px;*/
	/*margin-left: -20px;*/
	/*border-top-left-radius: 0;*/
	/*border-bottom-left-radius: 0;*/
	/*border-color: #b6b6b5;*/
	/*padding: 8px 2px 3px;*/
}

.card-wrapper button[type=submit] {
	margin: 1% 0 1% auto;
	display: block;
	padding: .5em 2em;
}

#submitPayment {
	margin-bottom: 5em;
}

.form-item.dollar-field {
	position: relative;
}

.form-item.dollar-field input {
	padding: 0 7px 0 24px;
}

.form-item.dollar-field:after {
	content: '$';
	font-size: 1em;
	position: absolute;
	left: 10px;
	top: 32px;
}

.form-item label .check {    
	background: #dfdfdf;
	-webkit-clip-path: circle(44%);
	clip-path: circle(44%);
	display: inline;
	padding: 0 9px;
	position: relative;
	margin-left: 5px;
	/*Safari fix*/
	border-radius: 20px;
}

.form-item label .check i{
	color: #fff;
	display: none;
	margin-left: 5px;
	font-size: .9em;
}

.form-item label.checked .check {
	background: var(--darkGreen);
}

.form-item label.checked .check i {
	display: block;
	font-size: .7em;
	position: absolute;
	right: 3px;
	top: 4px;
}

/* IDs -------------------------------------------------*/

#mobileNav {
	display: none;
}

#searchOverlay {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #00000096;
	z-index: 400;
}

/* Sections ---------------------------------------------*/

section {
	display: flex;
	flex-flow: row wrap;
	padding: 20px;
}

section.max-width > * {
	width: 100%;
	max-width: var(--content-max-width);
	margin-left: auto;
	margin-right: auto;
}

section.max-width.sm > * {
	max-width: 1000px;
}

section.cards {
	align-items: stretch;
	flex-flow: column;
	flex-grow: 2;
}

section.error {
	height: calc(100vh - 65px);
	align-items: stretch;
	flex-flow: column;
	justify-content: center;
}

section.error {
	height: calc(100vh - 65px);
	align-items: center;
	flex-flow: column;
	justify-content: center;
}

section.error h1 {
	font-size: 10em;
}

section.error p {
	font-size: 2em;
}

section.error a {
	font-size: 2em;
	color: var(--lightRed);
}
/* Tiles ---------------------*/

.tile {
	position: relative;
	background: #fff;
	padding: 10px;
	width: 170px;
	min-width: 170px;
	height: 170px;
	border-radius: 4px;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	align-items: flex-start;
	text-align: left;
	text-transform: capitalize;
	transition: transform .3s ease-in-out;
	border: var(--border);
}

.tile.wide {
	padding: 0;
	min-width: 355px;
}

.tile:not(.editable):hover {
	transition: transform .3s ease-in-out;
	transform: scale(1.03);
}

a.tile:hover {
	color: inherit;
}

.tile.action:hover {
	transition: .3s ease-in-out;
	color: #fff;
}

.tile.basic {
	justify-content: center;
	align-items: center;
	text-align: center;
}

.tile.action {
	background: #000;
	color: #fff;
}

.tile h4 {
	font-size: 1.7em;
}

.tile h4,
.tile h5 {
	font-weight: 500;
	margin: 0;
}

.tile .icon {
	font-size: 1.7em;
}

.tile.basic .icon {
	font-size: 2.2em;
}

.tile.disabled {
	cursor: not-allowed;
}

/* Containers ----------------*/

.row {
	width: 100%;
}

/* Cards -------------------------------------------------*/

.card > .list-group:first-of-type {
	border-top: none;
}

.card-wrapper {
	display: flex;
	flex-flow: row wrap;
	width: 100%;
}

.card {
	padding: 1em;
	margin: 1% 0;
	/*flex: 1;*/
	min-width: 400px;
	border: var(--border);
}

.disclaimers {
	width: 100%;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column;
	flex-grow: 1;
}


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

li.flex-inline,
li > .flex-inline,
.payment-list li {
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
}

li.flex {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
}

.list-group-item {
	border-color: rgb(0 0 0 / 7%);
	color: var(--black);
}

li.surcharge-percentage.hide {
	display: none;
}

/* Buttons -----------------------------------------------*/

button {
	border: none;
	background: transparent;
}

button.cancel {
	background: var(--lightGrey);
	color: var(--black);
	transition: .3s ease-in-out;
}

button.cancel:hover {
	color: #000;
	transition: .3s ease-in-out;
}

.btn-cancel {
	position: absolute;
	right: 24px;
	top: 32px;
}

/* || Toastify --------------------------------------------*/

.toastify.success {
	color: #fff;
	background: #000;
}

.overflow-table {
	overflow: auto;
}

.overflow-table table {
	min-width: 800px;
}

.overflow-table td {
	padding: 1px 5px;
}

.error-message {
	width: 100%;
	text-align: center;
	margin-top: 43px;
	color: var(--lightRed);
}

.form-item .error-message {
	margin-top: 1em;
	text-align: left;
}

.error-message .additional-errors p:first-child {
	margin-top: 1rem;
}

.error-message .additional-errors {
	font-size: 1.5em;
}

.divider {
	color: var(--mediumGrey);
	padding: 0 11px 0 0;
	font-size: 1.6em;
	margin-bottom: 13px;
}

.warning-outline {
	align-items: center;
	border: 1px solid var(--red);
	border-radius: 6px;
	color: var(--red);
	display: inline-flex;
	padding: 5px 5px 5px 10px;
}

.warning-outline i {
	font-size: 1.2em;
	margin-right: .6em;
}

.max-height-scroll > div {
	border-radius: 6px;
}

.flex-row .col:first-child > div {
	padding-left: 5px;
}

.error-404-wrapper {
	margin-top: 2em;
	width: 100%;
	padding: 2em;
	font-size: 2em;
	text-align: center;
}

.error-404-wrapper h1 {
	font-size: 5em;
}

/* || Home Page -------------------- */

.payment-method-card i {
	color: var(--lightGrey);
	font-size: 1.3em;
}

.payment-method-card i.active {
	color: var(--darkGrey);
}

.customer-info {
	padding: 1em 0 0;    
	overflow: hidden;
}

.customer-info > *:not(.collapse-wrapper) {
	padding-left: 1em;
	padding-right: 1em;
}

.btn-collapse {
	background: #c9c9c9;
	border-radius: 50px;
	padding: 1px 5px 0;
}

.collapse-wrapper {
	margin-top: 1em;
	background: var(--background);
}

.additional-info {
	width: 100%;
	display: inline-flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5em 1em;
}

.additional-info p {
	margin: 0;
}

.collapse-wrapper .collapsable li {
	padding-left: 2em;
	padding-right: 2em;
}

.collapse-wrapper .collapsable .list-group-item:first-child {
	padding-top: 1em;
}

.collapse-wrapper .collapsable .list-group-item:last-child {
	padding-bottom: 1em;
}

.cc-icon-wrapper {
	position: relative;
}

.cc-icon:not(.active){
	display: none;
}

.cc-icon  {
	position: absolute;
	background-size: contain;
	width: 44px;
	height: 29px;
	right: 5px;
	bottom: 3px;
}

.cc-icon.Visa {
	background: url("../../images/cc-icon-visa.png") no-repeat;
	background-size: contain;
}

.cc-icon.MasterCard {
	background: url("../../images/cc-icon-mastercard.png") no-repeat;
	background-size: contain;
}

.cc-icon.Amex {
	background: url("../../images/cc-icon-amex.png") no-repeat;
	background-size: contain;
}

.cc-icon.Discover {
	background: url("../../images/cc-icon-discover.png") no-repeat;
	background-size: contain;
}

.surcharge-fee {
	align-items: center;
	display: flex;
	margin-bottom: 0.5em;
	flex-flow: column;
}

.surcharge-fee .box {
	display: flex;
	padding: 3px 0;
	width: 100%;
}

.surcharge-fee .box .dot {
	flex-grow: 2;
	border-bottom: 1px dotted #c4c4c4;
	margin: 0 5px 5px;
}

.surcharge-fee .box:last-child {
	font-size: 1.2em;
	font-weight: 500;
}

#paymentMethod.cc-selected label[for=cc_num] .check {
	display: none;
}

/* || Signup Page ------------------ */

.logo-wrapper {
	max-width: 500px;
	margin: 2em auto;
	padding: 1em;
}

.logo-wrapper img {
	width: 100%;
}

.icon-wrapper {
	width: 100%;
	display: inline-flex;
	justify-content: center;
	font-size: 3em;
	color: var(--red);
	margin-bottom: 1em;
}

.icon-wrapper i {
	transition: .3s ease-in-out;
}

.icon-wrapper i:hover {
	opacity: .8;
}

.icon-wrapper i:nth-child(2) {
	margin: 0 1em
}

.info-wrapper {
	width: 100%;
	background: #f6f6f6;
	padding: 3em 1em;
}

.info-wrapper p {
	margin: 0;
}

#formLogin {
	max-width: 700px;
	margin: 0 auto 5em;
	padding: 0 1em;
}

/* || Signature Page -------------------- */

.sign-section,
.additional-signature {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.sign-section {
	margin-bottom: 2em;
	padding-top: 1.5em;
}

.sign-section .content-wrapper {
	margin-right: 1em;
}

.sign-section .content-wrapper.full-row {
	flex-grow: 1;
	text-align: end;
}

.sign-section.flow-column {
	flex-flow: column;
}

.sign-section.flow-column > * {
	width: 100%;
	margin-right: 0;
}

.sign-section:not(.flow-column) .form-row {
	flex-flow: column;
}

.sign-section.grid {
	display: grid;
	grid-template-columns: [first] 33% [line2] 33% [line3] 33% [end];
	margin-bottom: 1em;
}
.sign-section.grid.end {    
	display: flex;
	justify-content: end;
}

.sign-section.grid > .signature-wrapper {
	margin-bottom: 1em;
}

.sign-section:not(:first-child) {
	border-top: var(--border);
}

.sigPad,
.sign-section input[type=file] {
	max-width: 322px;
}

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

.sigNav p,
.sigPad p {
	margin: 0;
}

.clearButton i {
	margin-left: 5px;
}

.sigWrapper .pad {
	border-radius: 4px;
}

.sigWrapper,
.sign-section .signature {
	border: var(--border);
	border-radius: 4px;
	margin-bottom: .5em;
}

.sign-section > p,
.sign-section .dl-item {
	margin: 0;
}

.sign-section .signature-wrapper {
	max-width: 319px;
}

.sign-section .signature {
	width: 318px;
	height: 130px;
	background: #fff;
}

.sign-section .signature img.show-image {
	height: 100%;
	width: 100%;
	border-radius: 4px;
}

.sign-section .checkbox-wrapper {
	display: inline-flex;
	align-items: baseline;
	margin-bottom: .5em;
}

.sign-section .checkbox-wrapper input {
	margin-right: 5px;
}