/*------------------------------------------------------------------------------------------------------------------------*/
/* site css */
/*------------------------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------*/
/* elements */
/*------------------------------------------------------------------------*/

:root {
	--white: hsl(0, 0%, 100%);
	--black: hsl(0, 0%, 0%);
	--dc-primary: hsl(229, 100%, 33%);
	--dc-litprimary: hsl(229, 100%, 50%);
	--dc-green: hsl(140, 100%, 35%);
	--dc-fadedgreen: hsl(140, 100%, 35%, 0.3);
	--dc-red: hsl(0, 100%, 37%);
	--dc-fadedtext: hsl(0, 0%, 59%);
	--dc-elementgrey: hsl(0, 0%, 85%);
	--dc-linkgrey: hsl(0, 0%, 32%);
	--dc-shadowgrey: hsla(0, 0%, 0%, 0.1);
	--dc-shadowgreydark: hsla(0, 0%, 0%, 0.3);
	--dc-imagegrey: hsla(0, 0%, 46%);
	--dc-togglegreyon: hsl(0, 0%, 32%);
	--dc-togglegreyoff: hsl(0, 0%, 85%);
	--dc-cyan: hsl(180, 100%, 50%);
	--dc-magenta: hsl(300, 100%, 50%);
	--dc-magenta-dark: hsl(300, 50%, 50%);
	--dc-yellow: hsl(60, 100%, 50%);
}

body {
	font-family: "Rubik", sans-serif;
	font-optical-sizing: auto;
	font-weight: 350;
	font-style: normal;
	font-size: 1rem;
	line-height: 1.8;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

a:link,
a:visited,
.a {
	color: var(--dc-primary);
	text-decoration: none;
}

a:hover,
a:active,
.a:hover,
.a:active {
	color: var(--dc-litprimary);
	text-decoration: none;
	cursor: pointer;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid var(--dc-elementgrey);
	margin: 15px 0;
	padding: 0;
}

table {
	border-collapse: collapse;
	border: 1px solid var(--black);
}
table td {
	border: 1px solid var(--black);
	padding: 5px;
}
table td:first-child {
	border-left: 0px solid var(--black);
}

hr.hcHRSmall {
	border-top: 1px solid var(--dc-elementgrey);
}

hr.hcHRSmallDashed {
	border-top: 1px dashed var(--dc-elementgrey);
}

hr.hcHRBig {
	border-top: 2px solid var(--dc-elementgrey);
}

hr.hcHRSmallBlack {
	border-top: 1px solid var(--black);
}

hr.hcHRSmallBlackShadow {
	border: none;
	height: 20px;
	width: 100%;
	height: 50px;
	margin-top: 0;
	border-bottom: 1px solid var(--black);
	box-shadow: 0 10px 10px -10px var(--dc-shadowgreydark);
	margin: -40px auto 10px;
}

input,
textarea,
select {
	font-family: inherit;
	font-size: inherit;
}

.hcForceSubmitInput {
	display: none;
}

/*------------------------------------------------------------------------*/
/* site colors */
/*------------------------------------------------------------------------*/

.hcColorRed {
	color: var(--dc-red);
}

.hcColorGreen {
	color: var(--dc-green);
}

.hcColorBlack {
	color: var(--black);
}

.hcColorGrey {
	color: var(--dc-fadedtext);
}

.hcColorWhite {
	color: var(--white);
}

/*------------------------------------------------------------------------*/
/* site classes */
/*------------------------------------------------------------------------*/

.hcViewLargeOnly {
	display: none;
}

.hcTable {
	display: table;
	padding: 5px;
}

.hcTableRow {
	display: table-row;
	padding: 5px;
}

.hcTableCell {
	display: table-cell;
	padding: 5px;
}

.hcTableBordered {
	border: 1px solid var(--dc-elementgrey);
}

.hcStopRowShow {
	display: table-row;
	line-height: 1;
}

.hcStopRowHidden {
	display: none;
}

.hcGeneralButton,
.hcDropButton,
.hcMarkButton {
	font-family: inherit;
	font-size: inherit;
	background-color: var(--dc-primary);
	border: none;
	color: var(--white);
	padding: 8px 16px;
	text-decoration: none;
	margin: 4px 2px;
	cursor: pointer;
}

.hcGreyButton {
	font-family: inherit;
	font-size: inherit;
	background-color: var(--dc-elementgrey);
	border: none;
	color: var(--white);
	padding: 8px 16px;
	text-decoration: none;
	margin: 4px 2px;
	cursor: pointer;
}

.hcRedButton,
.hcDeleteLocationButton,
.hcDeleteCircuitButton,
.hcDeleteBranchButton,
.hcDeleteContractorButton {
	font-family: inherit;
	font-size: inherit;
	background-color: var(--dc-red);
	border: none;
	color: var(--white);
	padding: 8px 16px;
	text-decoration: none;
	margin: 4px 2px;
	cursor: pointer;
}

.hcToggleButtonOn {
	font-family: inherit;
	font-size: inherit;
	background-color: var(--dc-togglegreyon);
	border: none;
	color: var(--white);
	padding: 8px 16px;
	text-decoration: none;
	margin: 4px 2px;
	cursor: pointer;
}

.hcToggleButtonOff {
	font-family: inherit;
	font-size: inherit;
	background-color: var(--dc-togglegreyoff);
	border: none;
	color: var(--white);
	padding: 8px 16px;
	text-decoration: none;
	margin: 4px 2px;
	cursor: pointer;
}

.hcFloatRight {
	float: right;
	width: 10%;
}

.hcFloatRightBig {
	float: right;
	width: 20%;
}

.hcCreditCardImage {
	vertical-align: middle;
}

.hcLogoHeader {
	line-height: 0;
	text-align: center;
}

.hcLogoHeaderContainer {
	position: sticky;
	top: 0;
	background-color: var(--white);
	z-index: 5000;
}

.hcHeader {
	display: inline;
	font-weight: 600;
	font-size: 1.5rem;
}

.hcHeaderSub {
	font-weight: 600;
	font-size: 1.1rem;
}

.hcSmallDetail {
	font-weight: 200;
	font-size: 0.75rem;
}

.hcSmallDetailEnlarging {
	font-weight: 200;
	font-size: 0.75rem;
}

.hcSmallDetailBold {
	font-weight: 400;
	font-size: 0.75rem;
}

.hcSmallDetailBoldEnlarging {
	font-weight: 400;
	font-size: 0.75rem;
}

.hcSmallDetailRed {
	color: var(--dc-red);
	font-weight: 200;
	font-size: 0.75rem;
}

.hcTinyText {
	font-weight: 200;
	font-size: 0.6rem;
}

.hcTinyTableDecriptionText {
	font-weight: 200;
	font-size: 0.6rem;
	line-height: 0.5;
}

.hcErrorText {
	color: var(--dc-red);
	line-height: 1.2;
}

.hcSuccessText {
	color: var(--dc-green);
	line-height: 1.2;
}

.hcSuccessAdditionalText {
	padding-top: 10px;
	color: var(--black);
	line-height: 1.2;
}

.hcErrorInput {
	color: var(--dc-red);
	border: 1px solid var(--dc-red);
}

.hcErrorLarge {
	width: 95%;
	background-color: var(--dc-red);
	color: var(--white);
	font-weight: 400;
	font-size: 1rem;
	padding: 10px;
	display: none;
}

.hcLocationBarNewItemInput {
	width: 280px;
}

.hcAddressText {
	line-height: 1.2;
	padding-top: 0.55rem;
	padding-bottom: 0.55rem;
}

.hcCompressedText {
	line-height: 1.2;
	padding-bottom: 0.55rem;
}

.hcNavSquare {
	display: inline-flex; /* Use flexbox to align items */
	align-items: center; /* Center items vertically */
	justify-content: center; /* Center items horizontally */
	padding: 10px; /* Add some padding around the content */
	border: 1px solid var(--dc-elementgrey); /* Very light grey border */
	box-shadow: 0px 2px 4px var(--dc-shadowgrey); /* Subtle drop shadow */
	background-color: var(--white); /* Optional: Background color */
	max-width: fit-content;
}

.hcNavSquare a {
	display: flex; /* Ensure the link also uses flexbox */
	align-items: center; /* Align the link's contents vertically */
	color: var(--dc-linkgrey); /* Text color for the link */
	text-decoration: none; /* Remove underline from the link */
}

.hcNavSquareSmall {
	display: inline-flex; /* Use flexbox to align items */
	align-items: center; /* Center items vertically */
	justify-content: center; /* Center items horizontally */
	padding: 5px; /* Add some padding around the content */
	border: 1px solid var(--dc-elementgrey); /* Very light grey border */
	box-shadow: 0px 1px 2px var(--dc-shadowgrey); /* Subtle drop shadow */
	background-color: var(--white); /* Optional: Background color */
	max-width: fit-content;
}

.hcNavSquareSmallDisabled {
	color: var(--dc-red);
	display: inline-flex; /* Use flexbox to align items */
	align-items: center; /* Center items vertically */
	justify-content: center; /* Center items horizontally */
	padding: 5px; /* Add some padding around the content */
	border: 1px solid var(--dc-elementgrey); /* Very light grey border */
	background-color: var(--white); /* Optional: Background color */
	max-width: fit-content;
}

.hcNavSquareHeader {
	display: inline-flex; /* Use flexbox to align items */
	align-items: center; /* Center items vertically */
	justify-content: center; /* Center items horizontally */
	padding: 0px 15px 5px 0px; /* Add some padding around the content */
	max-width: fit-content;
	vertical-align: middle;
}

.hcDropsOnDate {
	display: inline-flex; /* Use flexbox to align items */
	padding-right: 10px;
	padding-left: 10px;
}

.hcNavLink {
	color: var(--dc-linkgrey);
	font-weight: 700;
	font-size: 1rem;
}

.hcLoginEmail,
.hcLoginPassword,
.hcContractorFirstName,
.hcContractorLastName,
.hcContractorEmail,
.hcContractorPhone,
.hcContractorAddress1,
.hcContractorAddress2,
.hcContractorCity,
.hcContractorState,
.hcCompanyZipcode,
.hcCompanyName,
.hcCompanyFirstName,
.hcCompanyLastName,
.hcCompanyEmail,
.hcCompanyPhone,
.hcCompanyAddress1,
.hcCompanyAddress2,
.hcCompanyCity,
.hcCompanyState,
.hcContractorZipcode,
.hcCompanyLogin,
.hcCompanyPassword,
.hcBranchName,
.hcLocationName,
.hcLocationDescription,
.hcLocationAddress,
.hcEmailBounce {
	width: 250px;
}

.hcResetContractorLink {
	width: 300px;
}

.hcLoginRow {
	padding-top: 10px;
	padding-bottom: 10px;
}

.hcNoteText {
	width: 95%;
	max-width: 500px;
	height: 4em;
	display: block;
}

.hcNoteTextDisplay {
	font-size: 0.8rem;
	word-wrap: break-word;
}

.hcLocationDescriptionDisplay,
.hcLocationAddressDisplay {
	word-wrap: break-word;
}

.hcCircuitBar,
.hcDropsContractorBar {
	background-color: var(--dc-elementgrey);
	padding: 10px;
	margin-top: 5px;
	scroll-margin-top: 40px;
}

.hcSearchBar {
	background-color: var(--white);
	padding: 10px;
	margin-top: 5px;
}

.hcSearchInput {
	width: 90%;
	border: 1px solid var(--black);
}

.hcSearchInputActive {
	background-color: var(--dc-fadedgreen);
}

.hcCircuitToggles {
	display: flex;
	width: 90%;
	padding: 10px;
}

.hcCircuitToggleUngroup {
	flex: 1;
}

.hcCircuitToggleSort {
	flex: 1;
	text-align: right;
	white-space: nowrap;
}

.hcChooseBranchList {
	width: 75%;
}

.hcCircuitLocationsName,
.hcDropsContractorName {
	display: inline-block;
	cursor: pointer;
}

.hcCircuitEdit,
.hcCircuitEditClose,
.hcLocationEdit,
.hcLocationEditClose,
.hcLocationPhotoLink,
.hcStopInfoImage,
.hcStopMapImage,
.hcShowStopsLink,
.hcStopInfoModalCloser,
.hcStopMapModalCloser,
.hcBranchBar,
.hcMapNavLink,
.hcCompanyBranchEdit,
.hcCompanyBranchEditClose,
.hcCompanyContractorEdit,
.hcCompanyContractorEditClose {
	cursor: pointer;
}

.hcCircuitEditContainer {
	display: none;
}

.hcNewLocationBar {
	padding: 10px 0px 10px 0px;
}

.hcLocationContainer {
	display: flex; /* Align children in a row */
	width: 98%;
}

.hcLocationBarDetail {
	position: relative;
	flex-grow: 1; /* Takes up any remaining space */
	cursor: pointer;
	margin: 3px;
}

.hcLocationBarLastDrop,
.hcLocationBarNextDrop,
.hcLocationBarMarkDrop {
	width: 15%; /* Adjust the width as necessary */
	flex-shrink: 0; /* Prevents the div from shrinking */
	cursor: pointer;
	min-width: 60px;
	margin: 3px;
}

.hcLocationBarMarkDrop {
	padding-right: 7px;
}

.hcLocationBarHeader {
	padding: 0px;
	font-weight: 600;
	font-size: 0.75rem;
	cursor: default;
}

.hcLocationMapLinksContainer {
	padding-top: 30px;
}

.hcCircuitLocationsContainer {
	display: none;
}

.hcCircuitLocationsToggle {
	cursor: pointer;
	vertical-align: middle;
}

.hcSearchIcon {
	cursor: pointer;
	vertical-align: middle;
}

.hcLocationPhotoContainer {
	display: none;
}

.hcLocationMapContainer {
	display: block;
	width: 350px;
	height: 350px;
}

.hcAppStoreButtons {
	padding-top: 20px;
}

.hcAppStoreButton {
	cursor: pointer;
}

.hcSalesBox {
	background-color: var(--dc-yellow);
	border: 3px solid var(--black);
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
	padding: 20px; /* optional, for spacing inside */
	width: 85%;
	max-width: 500px;
	margin-bottom: 30px;
}

/*------------------------------------------------------------------------*/
/* specific: stripe */
/*------------------------------------------------------------------------*/

.hcStripeForm {
	max-width: 500px;
}

.hcStripeNewCardElement {
	padding-top: 20px;
	padding-bottom: 20px;
}

.hcReceipt {
	max-width: 500px;
}

/*------------------------------------------------------------------------*/
/* specific: photo taker */
/*------------------------------------------------------------------------*/

.hcPicTakerVideo {
	border: 1px solid var(--black);
	width: 320px;
	height: 240px;
}

.hcPicTakerPhoto {
	border: 1px solid var(--dc-green);
	width: 320px;
	height: 240px;
}

.hcPicTakerCanvas {
	display: none;
	/* display: block; */
}

.hcPicTakerCamera {
	width: 340px;
	display: inline-block;
}

.hcPicTakerOutput {
	width: 340px;
	display: inline-block;
}

.hcPicTakerTakeButton {
	display: inline-block;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	bottom: 36px;
	padding: 5px;
	background-color: var(--dc-primary);
	border: 1px solid var(--white);
	font-size: 14px;
	color: var(--white);
	cursor: pointer;
}

.hcPicTakerClearButton {
	display: inline-block;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	bottom: 36px;
	padding: 5px;
	background-color: var(--dc-red);
	border: 1px solid var(--white);
	font-size: 14px;
	color: var(--white);
	cursor: pointer;
}

.hcPicTakerSubmitButton {
	display: inline-block;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	bottom: 36px;
	padding: 5px;
	background-color: var(--dc-green);
	border: 1px solid var(--white);
	font-size: 14px;
	color: var(--white);
	cursor: pointer;
}

.hcPicTakerSaveDisplay {
	width: 200px;
	display: inline-block;
	position: relative;
	margin-left: auto;
	margin-right: auto;
	bottom: 136px;
	padding: 5px;
	background-color: var(--white);
	border: 1px solid var(--black);
	font-size: 14px;
	color: var(--black);
	opacity: 0.75;
}

.hcPicTakerContainer {
	font-size: 16px;
	font-family: Arial;
	text-align: center;
	padding-top: 40px;
	padding-bottom: 40px;
}

/*------------------------------------------------------------------------*/
/* specific: modals */
/*------------------------------------------------------------------------*/

.hcStopImageContainer {
	width: 320px;
	height: 240px;
	display: flex; /* Ensures that the child elements are centered */
	justify-content: center; /* Center horizontally */
	overflow: hidden; /* Prevents any overflow outside the container */
	background-color: var(--dc-imagegrey);
}

.hcStopImage {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain; /* Scales the image to fit the container without cropping */
	display: block; /* Removes the extra space below the image typical of inline elements */
}

.hcStopInfoModalBillingText,
.hcStopMapModalBillingText {
	line-height: 1.2;
	font-weight: 400;
	font-size: 0.75rem;
}

.hcStopInfoModalDataText,
.hcStopMapModalDataText {
	padding-top: 5px;
	line-height: 1.2;
}

.hcStopInfoModalNav,
.hcStopMapModalNav {
	padding-top: 10px;
	padding-bottom: 10px;
	display: flex;
	justify-content: space-between;
}

.hcStopInfoModalNavItem,
.hcStopMapModalNavItem {
	flex: 1;
	text-align: center;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

.hcConfirmDeleteModal,
.hcStopInfoModal,
.hcStopMapModal,
.hcConfirmDeleteAccountModal,
.hcConfirmCancelAccountModal,
.hcConfirmChangeAccountModal,
.hcErrorChangeAccountModal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: none;
	background-color: var(--white);
	padding: 20px;
	box-shadow: 0 4px 6px var(--dc-shadowgrey);
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
	z-index: 500;
}

.hcStopInfoModalOverlay,
.hcStopMapModalOverlay {
	background-color: transparent;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: none;
}

.hcStopInfoModal img,
.hcStopMapModal img {
	display: block; /* Ensures no extra space below the image */
	max-width: 90vw; /* Limits image size, maintains aspect ratio */
	max-height: 90vh;
}

.hcConfirmDeleteModal a,
.hcStopInfoModal a,
.hcStopMapModal a {
	display: block;
	text-align: center;
	margin-top: 20px;
	color: var(--dc-primary);
	text-decoration: none;
}

.hcGlobalMenu {
	position: fixed;
	top: 57px;
	left: 0px;
	height: 100%;
	width: 300px;
	display: none;
	padding: 13px 17px 17px 10px;
	background-color: var(--white);
	box-shadow: 0 8px 6px var(--dc-shadowgrey);
}

.hcGlobalMenuText {
	font-weight: 600;
	font-size: 1.1rem;
}

/*------------------------------------------------------------------------*/
/* specific: dash */
/*------------------------------------------------------------------------*/

.hcDashControls {
	display: flex;
	justify-content: space-between;
	gap: 5px;
	align-items: center;
	width: 95%;
}

.hcDashBatchStatus {
	width: 95%;
	height: 350px;
	font-family: monospace;
	font-size: 10px;
}

.hcDashProgress {
	width: 95%;
}

.hcDashProgressBottom {
	margin-left: auto;
	width: 5%;
	text-align: center;
}

.hcDashNumbersBottom {
	margin-left: auto;
	width: 10%;
	text-align: center;
}

/*------------------------------------------------------------------------*/
/* vendor: google fonts and icons */
/*------------------------------------------------------------------------*/

.material-symbols-outlined {
	color: var(--dc-linkgrey);
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.material-symbols-outlined-disabled {
	color: var(--dc-fadedtext);
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/*------------------------------------------------------------------------*/
/* specific: help */
/*------------------------------------------------------------------------*/

.ahelp {
	color: var(--dc-magenta);
	text-decoration: none;
}

.ahelp:hover,
.ahelp:active {
	color: var(--dc-magenta-dark);
	text-decoration: none;
	cursor: pointer;
}

.hcSupportQuickstartOpen {
	vertical-align: middle;
}

.hcTextDescription {
	max-width: 500px;
	padding-bottom: 10px;
}

.hcSupportQuickstartImages {
	padding-top: 20px;
	display: flex;
	flex-wrap: wrap;
	justify-content: left;
	vertical-align: top;
}

.hcSupportQuickstartImageContainer {
	padding: 10px;
}

.hcHeadlineSub {
	font-weight: 600;
	font-size: 1.5rem;
}

/*------------------------------------------------------------------------*/
/* media desktop */
/*------------------------------------------------------------------------*/

@media screen and (min-width: 1025px) {
	body {
		-webkit-user-select: auto; /* Safari */
		-ms-user-select: auto; /* IE 10 and IE 11 */
		user-select: auto; /* Standard syntax */
	}

	.hcViewLargeOnly {
		display: block;
	}

	.hcSmallDetailEnlarging {
		font-weight: 200;
		font-size: 1rem;
	}

	.hcSmallDetailBoldEnlarging {
		font-weight: 400;
		font-size: 1rem;
	}
}