/* || Theme Overrides */
:root {
	--darkRed: #690020;
	--green: #0AE43A;
	--dashboard-max-width: 1100px;
	--content-max-width: 1500px;
}

/* || General */

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

html,
body {
	overflow-x: hidden;
}

/* Main Nav -------------------------------------------*/


nav .dash-link {
	position: relative;
	min-width: 148px;
}

nav .dash-link:before {
	border-radius: 6px;
	content: '';
	height: 100%;
	margin: -9px -16px;
	position: absolute;
	width: 100%;
}

nav {
	--navText: #fff;
}

nav.hide-nav,
nav .settings.show-message {
	--navText: #000;
}

nav.hide-nav .dash-link:before {
	border: 2px solid var(--navText);
}

nav .dash-link:before {
	border: 3px solid var(--navText);
}

nav .dash-link i {
	margin-left: -44%;
	opacity: 0;
	position: absolute;
	top: 40px;
	transition: .3s ease-in-out;
}

nav.hide-nav .dash-link:hover i {
	margin-top: 10px;
	opacity: 1;
	transition: .3s ease-in-out;
}

nav .collapse-menu {
	display: none;
}

nav .settings {
	display: inline-flex;
	justify-content: flex-end;
	min-width: 150px;
	position: relative;
}

nav .mobile-menu {
	display: none;
}

#search {
	background: transparent;
	border-bottom: 1px solid var(--navText);
	border-radius: 0;
	color: var(--navText);
	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(--darkGrey);
	transform: rotate(0deg);
	transition: .3s ease-in-out;
}

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

#alertBox {
	color: var(--navText);
	cursor: pointer;
	padding: 5px 10px;
	position: relative;
}

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

#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;
}

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

nav .dealer-location {
	border: 1px solid;
	border-radius: 4px;
	padding: 3px 10px 3px 5px;
	margin-right: 5px;
}

nav .dealer-location select {
	background: none;
	color: var(--navText);
	outline: none;
	padding: 6px 6px;
	text-overflow: ellipsis;
	width: 100%;
}

/* Safari fix */
_::-webkit-full-page-media, _:future, :root nav .dealer-location select {
	appearance: initial;
}

nav .dealer-location select option {
	background-color: #fff !important;
	color: var(--black) !important;
}

nav .dealer-location select option:hover {
	background-color: var(--mediumGrey) !important;
	color: var(--black) !important;
}

nav .dealer-location select:hover {
	cursor: pointer;
}

nav.show-mobile-menu .dealer-location select {
	min-width: 100%;
	width: initial;
}

nav.hide-nav .dealer-location,
nav .settings.show-message .dealer-location {
	border-color: transparent;
}

nav.hide-nav .dealer-location select,
nav .settings.show-message .dealer-location select {
	font-weight: 400;
}

nav .dealer-location select:focus {
	outline: none;
}

nav .dealer-location-message {
	background: #fff;
	border-bottom-left-radius: 35px;
	box-shadow: 0 0 10px -1px #0000003d;
	color: var(--grey);
	font-size: .9em;
	padding: 55px 12px 4px 21px;
	position: absolute;
	right: -5px;
	top: -12px;
	transition: .3s ease-in-out;
	z-index: 0;
}

nav .settings .nav-link {
	z-index: 1;
}

nav .settings:not(.show-message) .dealer-location-message {
	display: none;
}

nav .dealer-location-message a {
	color: var(--blue);
}

nav.show-mobile-menu .dealer-location {
	position: absolute;
	right: 183px;
}

nav:not(.hide-nav).show-mobile-menu .dealer-location {
	border-color: #fff;
}

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

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

/* Content ---------------------------------------------*/

.content {
	padding-top: 64px;
}

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

.editable,
.search-found {
	z-index: 401;
}

.form-item.search-found > label {
	color: #ffffffbd;
	z-index: inherit;
}

.form-item.search-found .radio-wrapper {
	z-index: inherit;
}

section.faq .search-found  {
	padding: 0 10px;
}

.admin-banner {
	background: #efd701;
	bottom: 0;
	left: 0;
	padding: 5px;
	position: fixed;
	text-align: center;
	transition: opacity .3s ease-in-out;
	width: 100%;
	z-index: 1000;
}

.admin-banner:hover {
	opacity: 1;
	transition: opacity .3s ease-in-out;
}

.admin-banner i {
	margin-left: 2em;
}
/* Extended Menu ---------------------------------------*/

.extended-menu {
	background: #fff;
	border-radius: 6px;
	display: none;
	flex-flow: column;
	left: 0;
	outline: 1px solid var(--mediumGrey);
	padding: 10px 13px;
	position: absolute;
	top: -2px;
}

.extended-menu.show {
	display: flex;
}

.extended-menu .menu-link {
	color: inherit;
	padding: 5px 0;
}

.extended-menu .menu-link:first-child {
	margin-top: 5px;
}

.extended-menu .menu-link i{
	color: var(--mediumGrey);
	margin-right: 5px;
}

.menu-link {
	cursor: pointer;
}

.menu-link span {
	color: var(--darkGrey);
}

.menu-link:hover span {
	color: var(--mediumGrey);
}

/* Slide Menu ------------------------------------------*/

#slideMenu {
	background-color: #fff;
	border-left: var(--border);
	border-right: none;
	box-shadow: 0 0 10px -5px #00000091;
	height: calc(100vh - 65px);
	max-width: 300px;
	position: fixed;
	right: -1px;
	text-align: right;
	top: 65px;
	transition: .8s ease-in-out;
	transition-property: background-color, border, box-shadow;
	width: auto;
	z-index: 100;
	overflow-y: auto;
	overflow-x: hidden;
}

#slideMenu > div {
	border-radius: 6px;
	display: none;
	margin-bottom: 10px;
	padding: 10px;
	min-width: 300px;
	max-width: 300px;
	width: 100%;
}



#slideMenu .close {
	color: var(--lightGrey);
	font-size: 1.2em;
	display: none;
	margin: 0;
	padding: 10px;
}


#slideMenu .options,
nav.top-nav .expanded .options {
	display: flex;
	flex-flow: column;
}

#slideMenu .box {
	font-weight: 300;
	text-align: left;
}


#slideMenu .box i {
	color: var(--mediumGrey);
}

#slideMenu .box:not(:last-child) {
	margin-bottom: 5px;
}

#slideMenu .box.success {
	color: #fff;
}

nav.top-nav .expanded a,
#slideMenu a {
	align-items: center;
	color: inherit;
	display: inline-flex;
}

#slideMenu .box.error span:not(.dot, .dot-value),
nav.top-nav .expanded .box.error span:not(.dot, .dot-value) {
	color: var(--error);
}

#slideMenu .files a {
	background: #fff;
	border-radius: 6px;
	color: var(--darkGrey);
	margin-bottom: 10px;
	padding: 5px;
	text-align: left;
	transition: transform .3s ease-in-out;
}

#slideMenu .files a:hover {
	transform: scale(1.03);
	transition: transform .3s ease-in-out;
}


#slideMenu .files .add-file {
	background: var(--red);
	border-radius: 6px;
	color: #fff;
	padding: 10px;
	width: 100%;
}

#slideMenu .files .add-file i {
	margin-right: 5px;
}

#slideMenu .add-files .content-row {
	padding: 1em 0 0;
}

#slideMenu .add-files button.primary {
	margin-top: 1em;
	text-align: center;
	width: 100%;
}

nav.hide-nav + #slideMenu {
	background: #ffffff8f;
	border-color: transparent;
	box-shadow: none;
	min-height: 100vh;
	padding-top: 65px;
	top: 0;
	transition: .8s ease-in-out;
	transition-property: background-color, border-color, box-shadow;
}

nav.hide-nav + #slideMenu a {
	background: transparent;
	border-color: var(--darkGrey);
	border-radius: 3px;
	border-width: 3px;
	color: var(--darkGrey) !important;
}

nav.hide-nav + #slideMenu .close {
	color: var(--darkGrey);
}


/* Box ------------------------------------------------*/

.box {
	background: #fff;
	border-radius: 6px;
	padding: 8px 13px;
	border: none;
	border: var(--border);
}

.box.md-box {
	padding: 13px;
}

.box.success {
	color: #fff;
	background: var(--mediumGreen);
}

a.box {
	padding: 10px 13px;
}

.box.error-box {
	color: #fff;
	background: var(--red);
	text-align: center;
	padding-left: 20px;
	margin: 15px 0
}

.box.error-box p{
	margin: 0
}

section .box.error-box {
	/*margin-right: -15px;*/
}

/* 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(--darkGrey);
	border-radius: 0;
}

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

.radio-wrapper input {
	display: none;
}

.radio-wrapper label {
	padding: 5px 12px;
	background: #fff;
	border-radius: 6px;
	color: var(--mediumGrey);
	cursor: pointer;
	border: var(--border);
}

.box .radio-wrapper label {
	/*background: var(--background);*/
}

.radio-wrapper label:not(.checked) {
	opacity: .8;
}

.radio-wrapper label.checked {
	color: var(--darkGrey);
	border: 2px solid var(--darkGrey);
}

.radio-wrapper.show-alert {
	border: 2px solid var(--red);
	border-radius: 4px;
	margin-left: 5px;
	padding: 5px 15px 5px 5px;
}

.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;
	/*margin-left: 5px;*/
	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%;
}

.call-to-action .form-item.in-line {
	justify-content: center;
}


/* Switch --------------------------*/

.switch {
	position: relative;
	display: inline-block;
	width: 45px;
	height: 25px;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.switch .slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	border-radius: 34px;
	-webkit-transition: .4s;
	transition: .4s;
}

.switch .slider:before {
	position: absolute;
	content: "";    
	height: 17px;
	width: 17px;
	left: 4px;
	bottom: 4px;
	background-color: #fff;
	border-radius: 50%;
	-webkit-transition: .4s;
	transition: .4s;
}

.switch input:checked + .slider {
	background-color: var(--blue);
}

.switch input:focus + .slider {
	box-shadow: 0 0 1px var(--blue);
}

.switch input:checked + .slider:before {
	-webkit-transform: translateX(20px);
	-ms-transform: translateX(20px);
	transform: translateX(20px);
}

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

#repoSection {
	width: 100%;
	max-width: var(--dashboard-max-width);
	margin: 0 auto;
}

#mobileNav {
	display: none;
}


#searchOverlay {
	position: fixed;
}

#editOverlay,
#searchOverlay,
.search-overlay-dashboard {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: #00000096;
	z-index: 400;
}

#editOverlay,
.search-overlay-dashboard {
	position: absolute;
}

#map {
	width: 100%;
	height: 100%;
	border-radius: 6px;
}

#printQuote,
#epoSchedule {
	color: var(--darkGrey);
	margin-right: 11px;
}

#printQuote i,
#epoSchedule i {
	color: var(--mediumGrey);
	margin-right: 5px;
}

#emptyResults {
	display: none;
}

#emptyResults > div {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--mediumGrey);
}

#emptyResults i {
	font-size: 2em;
	margin: 0 10px 10px 0;
}

#shedCostWarning {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	flex-flow: row wrap;
	padding: 1.2em;
}

#shedCostWarning.hide {
	display: none;
}

#shedCostWarning p {
	margin: 0 auto;
}
#shedCostWarning .form-item {
	max-width: 200px;
	text-align: left;
	margin-bottom: 0;
}
#shedCostWarning button {
	padding: 5px 13px;
}

/* Dots ---------------------*/

.dot {
	padding: 0 5px 0 6px;
	border-radius: 20px;
	font-size: .8em;
	margin-right: 5px;
}

@-moz-document url-prefix() {
	.dot {
		padding: 1px 5px 0px 6px;
	}
}

.dot .dot-value {
	margin-right: 1px;
}

.error .dot {
	background: var(--error);
	color: #fff;
}

.warning .dot {
	background: var(--yellow);
	color: var(--darkGrey);
}

.success .dot {
	background: var(--darkGreen);
	color: #fff;
}
/* Sections ---------------------------------------------*/

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

section.splash-screen {
	position: relative;
	height: 100vh;
	justify-content: center;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding: 0;
	scroll-snap-align: start;	
	flex-flow: column;
}

section.splash-screen .fp-overflow {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: -11vh;
}

section.splash-screen .btn-wrapper {
	display: flex;
	justify-content: center;
}

section.splash-screen .btn-container {
	display: flex;
	flex-flow: column;
}

section.splash-screen .btn-outline {
	padding: 13px 24px;
	font-size: 2.5em;
	color: var(--red);
	background: #ffffff8f;
	border: 5px solid var(--red);
	z-index: 100;
	width: auto;
}

section.splash-screen .btn-outline i {
	width: 0;
	overflow: hidden;
	margin-bottom: -7px;
	transition: width .3s ease-in-out;
}

section.splash-screen .btn-outline:hover i {
	width: 28px;
	transition: width .3s ease-in-out;
}

section.splash-screen .view-more {
	position: absolute;
	bottom: 30px;
	left: 45%;
	padding: 4px 15px 2px;
	cursor: pointer;
	z-index: 100;
	color: #ffffff;
	opacity: .8;
	background: #00000094;
	font-size: 1.2em;
	transition: color .3s ease-in-out;
	border-radius: 20px;
}

section.splash-screen .view-more:hover {
	transition: opacity .3s ease-in-out;
	opacity: 1;
}

section.splash-screen .view-more i {
	transition: .3s ease-in-out;
}

section.splash-screen .view-more:hover i {
	transition: .3s ease-in-out;
	transform: translateY(5px);
}

.dashboard-area {
	min-height: 100vh;
}

.dashboard-area .overview {
	padding-top: 80px;
}

.dashboard-area .fp-overflow {
	height: 100%;
	overflow-x: hidden;
	position: relative;
}

.contracts .section-title,
.repos .section-title {
	max-width: var(--dashboard-max-width);
}

section.overview .tile,
section.repos .tile {
	margin: 0 15px 15px 0;
}

section.overview .tile:last-child {
	margin: 0 0 15px 0;
}

#overviewSection .tile:last-child {
	margin: 0 15px 15px 0;
}

section.dark {
	background: var(--grey);
}

section.contracts {
	background: #fff;
}

#contractsSection {
	display: flex;
	flex-flow: row wrap;
	width: 100%;
	justify-content: space-between;
	margin: 0 auto;
	max-width: var(--dashboard-max-width);
}

#contractsSection > div,
section.repos > div {
	margin-bottom: 15px;
}

section.contract-edit {
	margin-bottom: 60px;
}

section.name-status .name-wrapper {
	align-items: center;
	display: flex;
	flex-flow: row wrap;
}

section.name-status h4 {
	margin-right: 5px;
}

section.name-status h5 {
	font-weight: 300;
}

section.contract-details .content-wrapper {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

section.contract-details .box {
	width: 100%;
	max-width: 49%;
	font-weight: 300;
	padding: 20px 30px;
	margin-bottom: 30px;
	text-transform: capitalize;
	border: 1px solid var(--lightGrey);
}

section.contract-details .box:last-child {
	margin-bottom: 0;
}

section.contract-details .box.full {
	max-width: 100%;
}

section.contract-details .row:first-child .col {
	display: inline-flex;
	margin-bottom: 5px;
	align-items: center;
}

section.contract-details .col i {
	color: var(--red);
	margin-right: 5px;
	margin-bottom: 8px;
	font-size: 1.2em;
}

section.contract-details .col:last-child {
	text-align: right;
}

section.contract-review .box {
	width: 100%;
	padding: 20px 30px;
}

section.contract-review p {
	margin-bottom: .4em;
	font-weight: 300;
}

section.steps {
	justify-content: center;
	padding: 25px 20px 15px;
	background: #fff;
}

section.contract-review {
	margin-bottom: 0;
}
section.payment {
	margin-top: 0;
}

section.thank-you {
	justify-content: center;
	flex-flow: column;
	align-items: center;
	text-align: center;
}

section.thank-you button.primary,
section.thank-you a.primary {
	background: var(--extraDarkGreen);
}

section.thank-you .form-item.grouped {
	max-width: 600px;
}

section.thank-you a.box {
	width: auto;
}

section.thank-you.wrap > div a:first-child {
	margin-right: 1em;
}

section.tooltip-section {
	padding: 0;
	margin: 0 auto;
}

section.inventory form > .border-box .form-item {
	margin-bottom: 0;
}

section.inventory .border-box .form-item {
	margin-right: 0;
}

section.map {
	width: 100%;
	height: 290px;
}

section.video {
	flex-flow: column;
}

section.guides {
	height: 135vw;
	max-height: 1200px;
}

section.faq .box {
	display: flex;
	flex-flow: column;
}

section.faq .help-container {
	border-radius: 4px;
}

/* Tiles ---------------------*/

.tile {
	position: relative;
	background: #fff;
	padding: 10px;
	width: 170px;
	min-width: 170px;
	height: 170px;
	border-radius: 6px;
	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);
}

.tile[data-enabled='0']:not(.editable) {
	display:none
}

a.tile:hover {
	color: inherit;
}

.tile.action {
	background: var(--red);
	color: #fff;
	transition: .3s ease-in-out;
}

.tile.action:hover {
	background: var(--lightRed);
	color: #fff;
	transition: .3s ease-in-out;
}

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

.tile.warning {
	border: 2px solid var(--error);
}

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

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

.tile h5 {
	color: var(--mediumGrey);
}

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


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

.tile .info {
	position: absolute;
	top: 9px;
	right: 10px;
	color: var(--background);
}
.tile.action .info {
	color: #fff;
	opacity: .8;
}

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

.icon.yellow {
	color: var(--yellow);
}
.icon.orange {
	color: var(--orange);
}
.icon.green {
	color: var(--darkGreen);
}
.icon.red {
	color: var(--red);
}
.icon.light-red {
	color: var(--lightRed);
}
.icon.bright-red {
	color: var(--error);
}
.icon.blue{
	color: var(--blue);
}
.icon.navy{
	color: var(--navy);
}

/* Radial / List Tile ------------*/

.tile.radial,
.tile.list {
	justify-content: center;
	align-items: center;
	text-align: center;
}

.tile.radial .overlay {
	margin-top: 56px;
	z-index: 3;
}

.tile.radial .overlay .percentage {
	margin-left: 10px;
}

.tile.radial .overlay .percentage span {
	font-size: .7em;
	font-weight: 300;
}

.tile.radial .overlay h6 {
	font-weight: 300;
	font-size: 1.1em;
	margin-top: 17px;
}

.tile.radial .radial {
	position: absolute;
	padding: 37%;
	background: conic-gradient(var(--blue) calc((var(--radialTile) / 100 * 72)*1%), var(--background) 0%);
	transform: rotate(-129deg);
	transition: --radialTile .5s;
	clip-path: circle(50% at 50% 50%);
	z-index: 0;
}

.tile.radial .radial-clip {
	position: absolute;
	padding: 32%;
	background: #fff;
	clip-path: circle(50% at 50% 50%);
	z-index: 1;
}

.tile.radial .radial-clip-bottom {
	position: absolute;
	bottom: 22px;
	padding: 43%;
	background: #fff;
	clip-path: polygon(51% 53%, 0% 100%, 100% 100%);
	z-index: 2;
}

.tile.radial .radial:hover {
	opacity: .8;
}

.tile.list h5 {
	font-weight: 400;
	font-size: 1em;
	color: var(--darkGrey);
	margin-bottom: 10px;
}

.tile.list .list-item {
	font-weight: 300;
	font-size: 1em;
	color: var(--darkGrey);
	margin-bottom: 5px;
}

.tile.list .list-item:last-of-type {
	margin-bottom: 0;
}

.tile.list .list-item:first-of-type {
	font-weight: 400;
	color: var(--red);
}

/* Edit Menu ----------------*/

.editable {
	position: relative;
	transition: none !important;
}
.dragging {
	opacity: 0;
}

.helper {
	z-index: 1000;
	box-shadow: 0 10px 10px 5px #0000002e;
}

.editable.allowed {
	animation: .3s linear infinite wiggle;
}

.edit-toggle {
	position: absolute;
	top: 6px;
	right: 5px;
}

.list-container .edit-toggle {
	top: 22px;
	right: 11px;
	padding-left: 87px;
	background: #fff;
}

.list-container:has(.empty-tile) .edit-toggle {
	background: none;
	padding: 0;
	top: 6px;
	right: -5px;
}

.list-container .highlight {
	text-align: right;
}

.edit-toggle .switch input:checked + .slider {
	background-color: #03d126;
}

.edit-toggle .switch input:focus + .slider {
	box-shadow: 0 0 1px #03d126;
}

.tile.editable .info {
	display: none;
}

/* Disabled tiles */
.list-container[data-enabled='0'].editable,
.graph-container[data-enabled='0'].editable,
.tile[data-enabled='0'].editable {
	opacity: .8;
}

.edit-dashboard {
	position: relative;
	width: 100%;
	max-width: var(--dashboard-max-width);
	margin: 0 auto;
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
}

.edit-dashboard button {
	display: inline-flex;
	align-items: center;
	margin: 0 1em 1em 0;
}

.edit-dashboard i {
	font-size: 1.2em;
	color: var(--mediumGrey);
	margin-right: 10px;
}
#editSave,
#editCancel {
	z-index: 401;
}

#editSave i {
	color: var(--darkGreen);
}

#editCancel i {
	color: var(--error);
}


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

.list-container,
.tile-container,
.graph-container {
	width: 100%;
	max-width: 355px;
	display: flex;
	flex-flow: column;
}

.list-container,
.graph-container {
	margin-top: 3px;
	border: var(--border);
}

.tile-container {
	max-width: 358px;
}

.tile-container.overflow:not(.editable) {
	display: none;
}

.tile-container.overflow:has([data-enabled='1']) {
	display: flex;
}

/* Firefox fix */
@-moz-document url-prefix() {
	.tile-container.overflow:not(.editable) {
		display: flex;
	}
}

.graph-container,
.list-container a {
	transition: transform .3s ease-in-out;
}

.graph-container:not(.editable):hover,
.list-container:not(.editable) a:not(:last-child):hover {
	transition: transform .3s ease-in-out;
	transform: scale(1.03);
}


.list-container[data-enabled='0']:not(.editable),
.graph-container[data-enabled='0']:not(.editable) {
	display:none
}

.list-container {
	flex-flow: column;
	background: #efefef;
	border-radius: 6px;
	height: 352px;
}

.list-container > a:first-child {
	margin-top: 10px;
}
.list-container > a:nth-child(5){
	margin-bottom: 6px;
}

.list-container > * {
	margin: 0 10px 15px;
	font-weight: 300;
	display: inline-flex;
	justify-content: space-between;
}

.list-container > *:not(:last-child) {
	margin-bottom: 12px;
}

.tile-container {
	flex-flow: row wrap;
	justify-content: space-between;
	margin-bottom: 15px;
}

.graph-container {
	height: 352px;
}


.graph-container .legend {
	width: 100%;
	display: inline-flex;
	margin-bottom: 10px;
}

.graph-container .legend > div {
	display: inline-flex;
	align-items: center;
	margin-right: 15px;
}

.graph-container .legend-key{
	display: block;
	width: 15px;
	height: 15px;
	background: var(--navy);
	margin-right: 5px;
	border-radius: 6px;
}

.graph-container .legend > div:last-child .legend-key{
	background: var(--blue);
}

.graph-container .legend-value {
	font-weight: 500;
	margin-right: 5px;
}

.graph-container .legend-title {
	font-weight: 300;
}

.graph-container .x-axis {
	display: flex;
	flex-flow: column;
	justify-content: space-around;
	width: 100%;
	height: 312px;
	color: var(--mediumGrey);
	font-weight: 400;
	font-size: .9em;
}

.graph-container .x-axis > div {
	position: relative;
	display: inline-flex;
}

.graph-container .x-axis .line {
	width: 100%;
	border-bottom: 1px solid var(--mediumGrey);
	display: block;
	margin-bottom: 10px;
	opacity: .3;
}

.graph-container .x-axis > div:not(:last-child) .line {
	margin-left: 5px;
}

.graph-container .x-axis > div:last-child .line {
	margin-left: 28px;
	padding-top: 3%;
	margin-bottom: 17px;
}

.graph-container .chart {
	position: relative;
	width: 100%;
	height: 312px;
}

.graph-container .bar-wrapper {
	position: absolute;
	top: 35px;
	left: 25px;
	width: 96%;
	bottom: 3px;
	display: inline-flex;
	justify-content: space-around;
	align-items: flex-end;
}
.graph-container .bars {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: flex-end;
	align-content: flex-end;
	height: 100%;
}

.graph-container .bars .title {
	width: 100%;
	text-align: center;
}

.graph-container .bars .bar {
	width: 36px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	background: var(--navy);
	transition: height .400s ease-in;
}

/* 2nd Column Color*/
.graph-container .bars .bar:nth-child(2) {
	background: var(--blue);
	transition: height .600s ease-in;
}

.border-container {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 2px solid var(--mediumGrey);
	border-radius: 6px;
	padding: 30px 40px;
}

.border-container .border-title {
	position: absolute;
	top: -15px;
	left: 15px;
	background: var(--background);
	padding: 0 10px;
	font-size: 1.1em;
}


.box .border-box {
	margin-right: 0;
}

.box .border-box .border-title {
	background: #fff;
}

.empty-tile {
	justify-content: center;
	background: #fff;
	color: var(--darkGrey);
	align-items: center;
	text-align: center;
	width: 100%;
	height: 100%;
	border-radius: 6px;
	font-size: 1.5em;
	margin: 0;
	margin-bottom: 0 !important;
}

.empty-row {
	border: var(--border);
	width: 100%;
	padding: 2em;
	text-align: center;
	border-radius: 6px;
	margin-top: 1em;
	font-size: 1.5em;
	grid-row-start: 1;
	grid-column-end: span 4;
}

/* Contract List -----------------------------------------*/


.search-bar {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.search-bar .list-dropdown {
	display: inline-flex;
	align-items: baseline;
}

.search-bar .list-details {
	display: inline-flex;
	color: var(--mediumGrey);
}

.search-bar .list-search {
	margin-right: 10px;
	position: relative;
}

.search-bar .clear-search {
	display: none;
	position: absolute;
	right: -4px;
	font-size: 1em;
	color: var(--mediumGrey);
}

.search-bar .clear-search:hover {
	color: var(--blue);
}

.contract-list {
	width: 100%;
	display: flex;
	flex-flow: column;
}

.contract-list .expand {
	display: none;
	color: var(--mediumGrey);
}

.contract-list .item {
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
	margin-bottom: 15px;
	font-weight: 300;
	transition: .3s ease-in-out;
	border: var(--border);
}

.contract-list .item:hover {
	transition: .3s ease-in-out;
	transform: scale(1.01);
}

.contract-list .item-container {
	width: 100%;
	display: flex;
	flex-flow: row nowrap;
}

.contract-list .item-container > div {
	width: 100%;
}

.contract-list .item-container span {
	font-weight: 500;
}

.contract-list .item-container .manage {
	border-left: 1px solid var(--mediumGrey);
	padding-left: 10px;
	max-width: 70px;
	text-align: center;
}

.item-container .status {
	position: relative;
}

.contract-list .item-container .sale span {
	color: var(--darkGreen);
}

.contract-list .name {
	font-weight: 400;
	max-width: 19%;
}

.contract-list .status {
	max-width: 20%;
}

.contract-list .next-step {
	max-width: 24%;
}

.contract-list .date {
	max-width: 17%;
}

.pickup-list .date {
	max-width: 26%;
}

.contract-list .sale {
	max-width: 15%;
}

.contract-list .completed .status {
	max-width: 42%;
}

.contract-list .completed .date {
	max-width: 22%;
}

.contract-list .show-button > button span {
	display: none;
}

.contract-list .cancelled  .status {
	max-width: 27%;
}

.pickup-list .item.focus {
	outline: 2px solid var(--blue);
}

.tag-filters,
.tag-sorts {
	display: flex;
	flex-flow: row wrap;
	flex-grow: 1;
}
.tag-sorts {
	padding: 0 1em;
	display: inline-flex;
	justify-content: flex-end;
	align-items: center;
}

.tag-filters h6 {
	width: 100%;
}

.tag-filters .tag,
.tag-sorts .tag {
	color: #fff;
	padding: 3px 6px;
	border-radius: 4px;
	background-color: var(--mediumGrey);
	transition: background-color .3s ease-in-out;
	margin-bottom: 1em;
}

.tag-sorts .tag {
	font-size: .9em;
	margin: 0 0 0 10px;
	background-color: var(--lightGrey);
}

.tag-sorts .tag.active {
	background-color: var(--lightGrey);
}

.tag-sorts h6 {
	margin: 0;
}


.tag-filters .tag.reset {
	color: var(--darkGrey);
	background-color: transparent;
}

.tag-filters .tag.reset:hover {
	color: var(--darkGrey);
	background-color: transparent;
}

.tag-sorts .tag.hover,
.tag-sorts .tag.active,
.tag-filters .tag:hover,
.tag-filters .tag.active {
	color: #fff;
	background-color: var(--blue);
	border-color: var(--blue);
	transition:background-color  .3s ease-in-out;
}

.tag-filters .tag:not(:last-of-type) {
	margin-right: 15px;
}

.tag-sorts .tag.up i {
	transform: rotate(180deg);
}

/* Inventory ---------------------------------------------*/

.inventory-list {
	width: 100%;
	margin-top: 10px;
	display: grid;
	grid-template-columns: [first] 33% [line2] 33% [line3] 33% [end];
}

.inventory-list > .item {
	width: 95%;
	min-width: 342px;
	font-weight: 300;
	justify-self: center;
	align-self: start;
	margin-bottom: 2em;
	flex-grow: 1;
	border: 1px solid var(--lightGrey);
}

.inventory-list .item-header {
	display: flex;
	border-bottom: 1px solid var(--lightGrey);
}

.inventory-list .item-header div:first-child {
	font-weight: 400;
}
.inventory-list .item-header div:last-child {
	text-transform: capitalize;
}

.inventory-list .resale_contract_information {
	border-bottom: 1px solid var(--lightGrey);
}

.inventory-list .item-row {
	display: flex;
	padding: 5px 0;
	flex-flow: column;
	border-bottom: 1px solid var(--lightGrey);
}

.inventory-list .expandable .item-row:last-child {
	border: none;
}

.inventory-list .item-row.inline {
	flex-flow: row nowrap;
	justify-content: space-between;
}

.inventory-list .options {
	display: flex;
}

.inventory-list .lengths {
	min-height: 127px;
}

.inventory-list .expand {
	color: var(--mediumGrey);
}

.inventory-list .expand {
	transition: .3s ease-in-out;
	color: var(--mediumGrey);
}

.inventory-list img {
	display: none;
}
.inventory-list .resale span {
	display: none;
}

.inventory-list .resale img {
	display: block;
	max-width: 47px;
	margin-top: -2px;
}

.inventory-list .item.expanded .expand {
	transition: .3s ease-in-out;
	transform: rotate(180deg);
}

.inventory-list .item .expandable {
	display: none;
}

.inventory-list .item-footer {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
}

.inventory-list .item-footer i {
	color: var(--mediumGrey);
}
.inventory-list .item-footer button,
.inventory-list .item-footer button i {
	transition: .3s ease-in-out;
}

.inventory-list .item-footer button:hover {
	transition: .3s ease-in-out;
	color: var(--red);
}

.inventory-list .item-footer button:hover i {
	transition: .3s ease-in-out;
	color: var(--red);
}

.inventory-list .item-footer .manage {
	font-weight: 400;
	color: var(--darkGrey);
}

.inventory-list .item-footer .manage:hover {
	color: var(--red);
}

.inventory-list .item-footer .delete i{
	color: var(--error);
}

.inventory-list .item-footer:not(.activate) .activate {
	display: none;
}

.inventory-list .item-footer.resale {
	justify-content: flex-start;
}

.inventory-list .item-footer.activate .rto,
.inventory-list .item-footer.activate .sold,
.inventory-list .item-footer.activate .print,
.inventory-list .item-footer.activate .delete {
	display: none;
}

.inventory-list .item-footer.resale .sold,
.inventory-list .item-footer.resale .manage,
.inventory-list .item-footer.resale .delete {
	display: none;
}

.inventory-lengths {
	display: flex;
	flex-flow: row wrap;
}

.inventory-lengths .length-option {
	background: var(--lightGrey);
	display: inline-flex;
	justify-content: space-between;
	border-radius: 6px;
	padding: 5px 10px;
	font-weight: 300;
	transition: .2s ease-in-out;
	border: var(--border);
}

.inventory-lengths .length-option:not(:last-child) {
	margin-right: 1em;
}

.inventory-lengths .length-option span:first-child {
	margin-right: 1em;
}

/* Calculator --------------------------------------------*/

.results-wrapper {
	position: relative;
	padding: 30px 40px;
	background: #f6f6f6;
	border-radius: 6px;
	min-height: 192px;
	border: var(--border);
}

.results-wrapper .loading-content,
.confirm-container .results-container {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.results-wrapper .loading-content.hide {
	display: none;
}

.border-container.empty {
	padding: 30px 20px 25px;
}

.results-wrapper .length-options,
.results-wrapper .results,
.confirm-container .results {
	display: flex;
	flex-flow: column;
	width: 100%;
}

.results-wrapper .length-options {
	max-width: 230px;
	min-height: 135px;
}

.results-wrapper .results {
	max-width: 305px;
}

.length-options .length-option {
	display: inline-flex;
	justify-content: space-between;
	background: #fff;
	border-radius: 6px;
	padding: 5px 10px;
	font-weight: 300;
	transition: .2s ease-in-out;
	border: var(--border);
}

.length-options .length-option.empty {
	height: 36px;
}

.length-options .length-option:not(:last-child) {
	margin-bottom: 15px;
}

.length-options .length-option:hover {
	background: var(--lightRed);
	color: #fff;
}

.length-options .length-option.active {
	background: var(--red);
	color: #fff;
}

.results-wrapper .results,
.confirm-container .results {
	justify-content: space-between;
}

.results-wrapper .results .item,
.confirm-container .results .item {
	display: none;
	justify-content: space-between;
	white-space: nowrap;
	font-size: .9em;
}

.results-wrapper .results .item.show,
.confirm-container .results .item.show {
	display: inline-flex;
}

.results-wrapper .results .item b {
	font-weight: 500;
}

#rtoPopup,
#invoicePopup {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	background: #00000059;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 500;
}

#rtoPopup #calculator {
	background: var(--background);
	max-width: 800px;
	border: 1px solid var(--darkGrey);
	border-radius: 6px;
	padding: 0 20px 20px;
}

#rtoPopup .header-row,
#invoicePopup .header-row {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 10px 0 0;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--lightGrey);
}

#rtoPopup .header-row .close,
#invoicePopup .header-row .close {
	color: var(--mediumGrey);
}

#rtoPopup #calculator .results-wrapper {
	background: #fff;
}

#rtoPopup .footer-row {
	display: flex;
	justify-content: flex-end;
}

#rtoPopup .length-options {
	max-width: 100%;
	min-height: 0;
	flex-flow: row;
	justify-content: space-between;
	align-items: start;
}

#rtoPopup .length-option {
	max-width: 24%;
	width: 100%;
}


#invoicePopup.hide {
	display: none;
}

#invoicePopup .header-row {
	align-items: baseline;
	padding: 0;
}


#invoicePopup .content-row {
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	margin: 2em 0;
}

#invoicePopup .rerent_invoice .content-row {
	justify-content: space-between;
}

#invoicePopup .content-row > * {
	max-width: 50%;
	margin: 0;
}

#invoicePopup .divider-or {
	position: relative;
}

#invoicePopup .divider-or span {
	position: absolute;
	top: -11px;
	right: 0;
	left: 0;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	background: #fff;
	width: 35px;
}

#invoicePopup .content-row input {
	max-width: 60%;
}

#invoicePopup .rerent_invoice .content-row span.dollar-field input.form-control {
	display: inline-block;
	
	max-width: 95%;
}

#invoicePopup .rerent_invoice .customer_search_box input{
	width: 85%;
	display: inline-block;
}

#invoicePopup .rerent_invoice .customer_result{
	border: 1px solid black;
	padding: 9px;
	text-align: center;
	cursor: pointer;
}

#invoicePopup .content-row button.cancel {
	max-width: 40%;
}

#submitContract {
	margin-right: 1rem;
}

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

button {
	border: none;
	background: transparent;
}

button.primary,
a.primary {
	background: var(--darkGreen);
	color: #fff;
	transition: opacity .3s ease-in-out;
}

button.warning,
a.warning {
	background: var(--red);
	color: #fff;
	transition: opacity .3s ease-in-out;
}

button.warning:hover,
a.warning:hover {
	opacity: .8;
	transition: opacity .3s ease-in-out;
}

button.primary i {
	opacity: .7;
}


button.primary:hover,
a.primary:hover {
	opacity: .8;
	transition: opacity .3s ease-in-out;
}

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

button.tooltip-btn{
	position: relative;
}

.contracts button.tooltip-btn i {
	font-size: .8em;
}

button.tooltip-btn.error {
	position: absolute;
	left: -23px;
	top: -1px;
}

/* Steps -------------------------------------------------*/

.steps.overview {
	padding: 30px 20px 40px;
	border-bottom: none !important;
	flex-flow: row wrap;
}

.step {
	align-items: center;
	cursor: default !important;
	display: inline-flex;
	margin-top: 20px;
	position: relative;
	transition: .3s ease-in-out;
}

.step i.icon {
	color: var(--mediumGrey);
	font-size: 1.2em;
	margin-right: 16px;
	margin-bottom: 7px;
	z-index: 1;
	transition: .3s ease-in-out;
}

.step.active i.icon {
	color: var(--darkGreen);
}

.step i:not(.icon) {
	font-size: 1.3em;
	color: var(--mediumGrey);
	margin-left: 10px;
	margin-bottom: 5px;
}

.step:before {
	content: '';
	position: absolute;
	top: -12px;
	left: -20px;
	display: block;
	background: var(--lightGrey);
	width: 40px;
	height: 40px;
	border-radius: 25px;
	z-index: 0;
	transition: .3s ease-in-out;
 }

.step.active:before {
	background: var(--lightGreen);
}

.step:first-child i.icon {
	margin-left: -14px;
	margin-top: -4px;
}

.step:nth-child(2) i.icon {
	margin-left: -12px;
	margin-top: -5px;
}

.step:nth-child(3) i.icon {
	margin-left: -17px;
	margin-top: -3px;
}

.step:nth-child(4) i.icon {
	margin-left: -17px;
	margin-top: -2px;
}

.step:nth-child(5) i.icon {
	margin-left: -13px;
	margin-top: -4px;
}

.step:not(:last-child) i:last-of-type {
	margin-right: 30px;
}

.step:last-child i.icon {
	margin-left: -17px;
	margin-top: -2px;
}

/*Firefox fix*/
@-moz-document url-prefix() {

	.step:first-child i.icon {
		margin-left: -12px;
	}

	.step:nth-child(2) i.icon {
		margin-left: -11px;
		margin-right: 22px;
	}

	.step:nth-child(3) i.icon {
		margin-left: -16px;
	}

	.step:nth-child(4) i.icon {
		margin-left: -16px;
	}

	.step:nth-child(5) i.icon {
		margin-left: -11px;
		margin-right: 22px;
	}

	.step:last-child i.icon {
		margin-left: -16px;
	}
}

/* Safari Fix */
@media not all and (min-resolution:.001dpcm) {

	.step:first-child i.icon {
		margin-left: -13px;
		margin-top: -7px;
		margin-right: 20px;
	}

	.step:nth-child(2) i.icon {
		margin-left: -12px;
		margin-top: -8px;
		margin-right: 22px;
	}

	.step:nth-child(3) i.icon {
		margin-left: -16px;
		margin-top: -7px;
	}

	.step:nth-child(4) i.icon {
		margin-left: -17px;
		margin-top: -7px;
	}

	.step:nth-child(5) i.icon {
		margin-left: -12.5px;
		margin-right: 22px;
		margin-top: -7px;
	}

	.step:last-child i.icon {
		margin-left: -17px;
		margin-top: -6px;
	}
}


/* Confirmation --------------------------------------------*/

.confirm-wrapper {
	position: absolute;
	background: white;
	width: 100%;
	height: 100%;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}
.confirm-wrapper.popup {
	position: fixed;
	top: 0;
	background: #0000005c;
}

.confirm-container {
	background: #fff;
	padding: 50px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	flex-flow: column;
	max-width: 700px;
}

.confirm-container .button-wrapper {
	margin-top: 2em;
}

.confirm-wrapper.alert button {
	width: 100%;
	max-width: 200px;
	margin-top: 2em;
}

.confirm-wrapper h4 {
	width: 100%;
}

.confirm-wrapper.popup h4 {
	margin: 5px 10px 0;
}

.confirm-wrapper button:first-of-type {
	margin-right: 10px;
}


/* Tooltip ------------------------------------------------*/

.tooltip-menu {
	position: absolute;
	bottom: 35px;
	right: -20px;
	width: auto;
	background: #fff;
	border: 1px solid var(--darkGrey);
	border-radius: 6px;
	padding: 10px;
	min-width: 221px;
}

div:not(.tile) > .tooltip-menu:before,
button > .tooltip-menu:before {
	content: "";
	position: absolute;
	right: 20px;
	bottom: 0;
	width: 0;
	top: 100%;
	height: 15px;
	border-top: 13px solid var(--darkGrey);
	border-bottom: 13px solid transparent;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
}

div:not(.tile) > .tooltip-menu:after,
button > .tooltip-menu:after {
	content: "";
	position: absolute;
	right: 20px;
	top: 98%;
	border-top: 13px solid #fff;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
}

.tooltip-menu i {
	color: var(--navy);
}

.tooltip-menu i {
	color: var(--navy);
}

.tooltip-menu.signature {
	width: 180px;
}

.tooltip-menu.signature button:not(:last-child) {
	border-right: 1px solid var(--lightGrey);
}

.tooltip-menu button[disabled='disabled'] i {
	color: var(--mediumGrey);
}

.tooltip-menu.signature .title {
	margin-bottom: 3px;
}

.tooltip-menu.print {
	min-width: 225px;
}

.tooltip-menu.print .container {
	min-width: 225px;
	justify-content: center;
}
div:not(.tile) .tooltip-menu.print button:not(:last-child)::after,
button .tooltip-menu.print button:not(:last-child)::after {
	content: '';
	border-right: 1px solid var(--lightGrey);
	height: 100%;
	padding-left: 8px;
}

.tile .tooltip-menu.print p {
	margin-bottom: 5px;
}

.tile .tooltip-menu.print .container {
	background: #fff;
	border-radius: 6px;
	max-width: fit-content;
	margin-left: 0;
	min-width: auto;
	padding: 10px 15px 10px 10px;
}

.tile .tooltip-menu.print button {
	margin-left: 2px;
	color: var(--mediumGrey);
	transition: color .3s ease-in-out;
}

.tile .tooltip-menu.print button:hover {
	transition: color .3s ease-in-out;
	color: var(--red);
}

.tile .tooltip-menu.print button::after {
	display: none;
}

.tooltip-menu.error {
	text-align: left;
}

.tooltip-menu.error .title {
	color: var(--error);
}

.tooltip-menu hr {
	color: #fff;
	margin: 2px 0;
}


.tile .info {
	cursor: pointer;
}

.tile .tooltip-menu {
	top: 0;
	left: 0;
	width: 100%;
	border: none;
	bottom: 0;
	z-index: 100;
}

.tile .tooltip-menu.signature {
	min-width: 0;
}

.tile.action .tooltip-menu.signature {
	background: var(--lightRed);
}

.tile .tooltip-menu.signature > div {
	flex-flow: column;
	justify-content: space-between;
}

.tile .tooltip-menu.signature p {
	margin-bottom: 3px;
}

.tile .tooltip-menu.signature button {
	border-right: none;
	color: #fff;
	margin-bottom: 5px;
	transition: opacity .3s ease-in-out;
}

.tile .tooltip-menu.signature button:hover {
	transition: opacity .3s ease-in-out;
	opacity: .7;
}

.tile .tooltip-menu.signature i {
	color: #fff;
}

.tile .tooltip-menu.signature .button-wrapper {
	display: inline-flex;
}

/* CSS specific to iOS devices */
@supports (-webkit-touch-callout: none) {
	.tile .tooltip-menu.signature .d-inline-flex {
		width: 100%;
	}
	.tile .tooltip-menu.signature .button-wrapper {
		justify-content: space-around;
	}
	.tile .tooltip-menu.signature .button-wrapper > button {
		padding: 0;
	}
}

.tile .tooltip-menu.info {
	width: 100%;
	display: flex;
	flex-flow: column;
	padding-left: 10px;
	text-align: left;
	top: 0;
	text-transform: initial;
	min-width: 0;
}

.tile .tooltip-menu.info .title{
	margin-bottom: 5px;
	color: var(--red);
}

.tile .tooltip-menu.info .description{
	margin-bottom: 5px;
	color: var(--mediumGrey);
}

.tile .tooltip-menu.info a{
	color: var(--blue);
}

.tile.action .tooltip-menu {
	background: var(--red);
}

.tile.action .tooltip-menu.info .title {
	font-weight: 600;
}

.tile.action .tooltip-menu.info .title,
.tile.action .tooltip-menu.info .description {
	color: #fff;
}

/* EPO/Fiance Schedule ------------------------------------------*/

.schedule-menu {
	display: flex;
	flex-flow: column;
	position: fixed;
	top: 64px;
	right: 0;
	width: auto;
	height: 100%;
	background-color: #fff;
	max-width: 320px;
	padding: 10px;
	overflow-x: hidden;
	overflow-y: auto;
	border: 1px solid var(--mediumGrey);
	z-index: 600;
	min-height: calc(100vh - 65px);
}

.schedule-menu .close {
	padding: 10px;
	font-size: 1.2em;
	color: var(--lightGrey);
	margin: 0;
	text-align: right;
}

.schedule-menu .header {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.schedule-menu .header i {
	color: var(--mediumGrey);
	font-size: 1.2em;
}

.schedule-menu .col-wrapper {
	display: inline-flex;
}

.schedule-menu .left-col,
.schedule-menu .right-col {
	display: flex;
	flex-flow: column;
}

.schedule-menu .left-col {
	width: 55%;
	padding-right: 2%;
}

.schedule-menu .right-col {
	width: 41%;
	padding: 0 3%;
}

.schedule-menu .left-col {
	border-right: 1px solid var(--mediumGrey);
}

.schedule-menu .month,
.schedule-menu .price {
	display: flex;
	flex-flow: column;
	text-align: right;
}
.schedule-menu .footer {
	margin: 1em 0 2em;
	text-align: center;
}

/* Misc --------------------------------------------------*/

.disabled {
	position: relative;
}

.disabled:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	opacity: .6;
	cursor: not-allowed;
}

.position-wrapper {
	position: relative;
}

.flex-start > * {
	margin-right: 12px;
}

.date-wrapper {
	position: relative;
}
.date-wrapper i {
	position: absolute;
	color: var(--mediumGrey);
	top: 10px;
	left: 10px;
}
.date-wrapper input {
	width: 100%;
	padding-left: 40px;
}

.dotted-line {
	width: 100%;
	border-bottom: 2px dotted var(--mediumGrey);
	margin: 0 5px 4px;
	opacity: .7;
}

.overflow {
	overflow: visible;
	display: flex;
	height: 100%;
	padding: 3px;
}

/* Scrollbar overrides*/
.overflow::-webkit-scrollbar {
	background-color: var(--background);
}
.overflow::-webkit-scrollbar-thumb {
	background-color: var(--lightGrey);
	border-radius: 10px;
}

.overflow-table {
	overflow: auto;
}

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

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

.fade-out {
	opacity: 0;
}

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

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

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

.pop {
	color: var(--blue);
}

b {
	font-weight: 500;
}

.asterisk {
	color: var(--mediumGrey);
}

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

.call-to-action {
	display: flex;
	padding: 40px 20px 26px;
	background: var(--blue);
	color: #fff;
	text-align: center;
	align-items: center;
	flex-flow: column;
}

.alert-banner {
	padding: 5px;
	color: var(--darkGrey);
	background: var(--yellow);
	border-color: var(--yellow);
	text-align: center;
}

.alert-banner .form-item {
	margin: 2px 15px 10px;
}

.print-only {
	display: none;
}

.mask {
	background: var(--lightGrey);
	color: var(--lightGrey);
	border-radius: 6px;
	animation: 1.5s linear infinite pulse;
}

.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;
}

/*Chosen overrides*/

.chosen-container {
	width: auto !important;
	padding: 5px 7px 0 0;
	border: 1px solid transparent;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
}

.chosen-container.chosen-with-drop {
	border-color: var(--darkGrey);
	box-shadow: 0 4px 5px rgb(0 0 0 / 15%);
}

.chosen-container-single .chosen-single {
	background: none;
	border: none;
	box-shadow: none;
	font-size: 25px;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	height: 30px;
	color: var(--blue);
}

.chosen-container-single .chosen-single span {
	height: 100%;
}

.chosen-container-single .chosen-single div {
	width: 20px;
}

.chosen-container-single .chosen-single div b {
	display: none;
}

.chosen-container-active.chosen-with-drop .chosen-single {
	border: none;
	background-image: none;
}

.chosen-container .chosen-drop {
	border: none;
}

.chosen-container .chosen-drop {
	width: calc(100% + 2px);
	border: 1px solid var(--darkGrey);
	border-top: 0;
	margin-left: -1px;
}

.chosen-container.chosen-with-drop,
section.contracts .chosen-container .chosen-drop {
	min-width: 165px;
}

.chosen-container .chosen-results {
	color: var(--mediumGrey);
	font-size: 25px;
}

.chosen-container .chosen-results li.result-selected {
	display: none;
}

.chosen-container .chosen-results li.active-result {
	padding: 10px 5px;
}

.chosen-container .chosen-results li.active-result.highlighted {
	color: var(--darkGrey);
	background: #fff;
}

/* Backup for mobile */
@media (pointer:none), (pointer:coarse) {	
	.inline-select {
		margin-left: 5px;
	}
	
	.inline-select select {
		appearance: auto;
	}
}

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

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

/* Help --------------------------------------------------*/

.help-container {
	margin-bottom: 2em;
	background-color: #fff;
}

.help-container a {
	color: var(--red);
}

.help-container .title {
	margin: .5em 0 1em 0;
}

.faq .help-container p:last-of-type {
	margin-bottom: 2em;
}

.faq .help-container:not(:last-of-type) {
	border-bottom: 1px solid var(--lightGrey);
}

/* Help Videos -------------------------------------------*/

.video iframe {
	height: 60vw;
	max-height: 500px;
	border-radius: 4px;
	margin-top: 6px;
}

.video .vid-list-wrapper {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}

.video .vid-list {
	display: flex;
	flex-flow: row nowrap;
	margin: 1em 30px;
	width: 100%;
	overflow-x: auto;
}

.video .vid-item {
	display: flex;
	flex-flow: column;
	max-width: 200px;
	padding: 10px;
	cursor: pointer;
	margin-left: 1em;
	background: transparent;
	transition: background-color .2s ease-in-out;
}

.video .vid-item:hover {
	background: #fff;
	transition: background-color .2s ease-in-out;
}

.video .vid-item .desc {
	display: flex;
	width: 100%;
	height: 100%;
	flex-flow: column;
	justify-content: center;
	align-items: center;
}

.video .vid-item .desc span{
	text-align: center;
}

.video .vid-item img{
	max-width: 180px;
	border-radius: 4px;
}

.video .vid-item:hover {
	color: var(--red);
}

.video .arrow-left,
.video .arrow-right {
	color: var(--red);
	font-size: 1.5em;
	cursor: pointer;
}

/* Contract Edit -----------------------------------------*/

.select-location-mask {    
	position: fixed;
	background: #fff;
	height: 100%;
	top: 0;
	width: 100%;
	z-index: 1;
	opacity: .9;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Account Page -------------------------------------------*/

.user-list .search-bar {
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: .5rem;
}

.user-list .search-bar h4 {
	 margin-bottom: 0;
 }

.user-list .search-bar i {
	color: var(--mediumGrey);
}

.user-list .search-bar input {
	border: none;
	background: none;
	border-bottom: 1px solid var(--darkGrey);
	border-radius: 0;
	height: 26px;
}

.accordion-location {
	background-color: #fff;
	border: 1px solid rgba(0,0,0,.125);
	margin-bottom: 1em;
}

.accordion-location,
.accordion-user {
	border-radius: 4px;
	overflow: hidden;
}

.accordion-user {
	margin-bottom: 10px;
}

.accordion-user.expanded {
	/* Set span row beyond rows  of its height */
	grid-row-end: span 11;
}

.accordion-location,
.accordion-user {
	border: 1px solid rgba(0,0,0,.125);
}

.accordion-location .accordion-button,
.accordion-user .accordion-button {
	background: #e9eaeb8c;
}

/* GM role*/
.accordion-user [data-role='18'] {
	background-color: var(--red);
	color: #fff;
}

/* Manager role */
.accordion-user [data-role='19'] {
	background-color: var(--blue);
	color: #fff;
}

/* Off location */
.accordion-user [data-role='na'] {
	background-color: #fff;
}

[data-role='18']::after,
[data-role='19']::after,
[data-role='18']:not(.collapsed)::after,
[data-role='19']:not(.collapsed)::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-user .location-select,
.accordion-user .location-list {
	width: 100%;
	flex-flow: row wrap;
}

.accordion-user .form-item.append button {
	padding: 0 10px;
}

.accordion-user .location-select select {
	width: calc(100% - 56px);
}

.accordion-user .location-select button {
	margin-right: 0;
	margin-left: 5px;
	padding: 0 10px;
}

.accordion-user .location-item {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	padding: 5px 18px 5px 10px;
	margin-bottom: 1em;
	margin-right: 15px;
	border-radius: 4px;
	background: #e9eaeb4f;
}

.accordion-user .location-item p {
	margin-bottom: 5px;
}

.add-user {
	max-width: 400px;
	padding: 10px;
	margin: 0 0 0 2em;
}

.legend .legend-item span {    
	padding: 0 0.59em;
	border-radius: 20px;
	margin-right: 5px;
	background: #e9eaeb8c;
	border: 1px solid rgba(0,0,0,.125);
}

.legend .legend-item span.blue {
	background: var(--blue);
	border: 1px solid var(--blue);
}

.legend .legend-item span.red {
	background: var(--red);
	border: 1px solid var(--red);
}

.legend .legend-item span.white {
	background: #fff;
}

.full-screen-loader {
	align-items: center;
	background: #000000a3;
	bottom: 0;
	color: #fff;
	display: flex;
	font-size: 5em;
	justify-content: center;
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 100;
}

/* Print Screens ------------------------------------------*/

@media print {
	.print-only {
		display: block;
	}
	
	html, body {
		overflow: hidden;
	}
	
	.schedule-menu {
		position: relative;
		max-width: 100%;
		border: none;
		height: 100%;
		max-height: 100%;
		overflow: visible;
	}
	
	.print-wrapper {
		height: 100%;
		margin-bottom: 1em;
		overflow: hidden;
	}
	
	.schedule-menu > .col-wrapper {
		display: none !important;
	}

	.schedule-menu .col-wrapper {
		display: inline-flex;
		width: 100%;
		max-width: 40%;
	}

	.schedule-menu .col-wrapper:not(:first-child) {
		margin-left: 1em;
	}

	.schedule-menu .title {
		margin-bottom: 0;
	}

	.schedule-menu .close {
		display: none;
	}

	.schedule-menu .header button {
		display: none;
	}
	
	.schedule-menu .footer {
		text-align: left;
	}

	.schedule-menu .left-col,
	.schedule-menu .right-col {
		padding-top: 1em;
	}
	
	.schedule-menu .month,
	.schedule-menu .price {
		border-top: 1px solid var(--mediumGrey);
		padding-top: 1px;
		font-size: .9em;
	}
	
	/* Quote Printout -----------------*/
	
	.form-row {
		width: 100%;
		margin: 0;
	}

	.form-item {
		margin: 0 0 1em;
		width: 25% !important;
		max-width: 100% !important;
	}
	
	.form-item.in-line {
		margin: 0 !important;
	}

	.form-item.in-line label {
		border: none;
		padding: 0;
	}

	.form-item.in-line label.checked {
		text-decoration: underline;
	}
	
	.form-item input,
	.form-item select {
		padding: 0 3px;
		border: none;
		color: #000;
	}

	.form-item label {
		color: var(--lightGrey);
	}
	
	.results-wrapper {
		border: none;
		padding: 0;
	}

	.results-wrapper .loading-content {
		padding: 0;
		margin: 0;
	}
	
	.results-wrapper .length-options {
		width: 100%;
		margin: 3em 0 0;
	}

	.results-wrapper .length-options button:not(.active) {
		display: none;
	}

	.results-wrapper .length-options .active {
		color: #000;
		font-size: 1.5em;
		background: transparent;
		border: none;
		border-radius: 0;
		margin: 0;
	}

	.results-wrapper .results {
		width: 50%;
		padding: 10px;
		margin-top: 0;
	}
	
	.dotted-line {
		border-color: var(--lightGrey);
	}

	.results-wrapper .results:first-child {
		padding-right: 10px;
	}

	.results-wrapper .results:last-child {
		padding-left: 10px;
	}
	
	#printQuote,
	#epoSchedule {
		display: none;
	}
}