::selection {
	background: grey;
	color: white;
}

body {
	color: white;
	background: black;
	margin: 0;
	padding: 0;
}
* {
	font-family: Arial, sans-serif;
	user-drag: none;
	-webkit-user-drag: none;
	-ms-user-select: none;
}

nav {
	display: flex;
	background-color: #222;
	border-bottom: 1px solid grey;
	align-items: center;

	height: 40px;
	margin: 0 0 10px 0;
	padding: 5px 0 2px 5px;
}
nav h1 {
	margin-left: 10px;
}
nav .button-holder {
	position: absolute;
	height: 40px;
	margin: 0;
	padding: 6px 10px;
	top: 0;
	right: 0;
}
nav .button-holder-mid {
	position: absolute;
	height: 40px;
	margin: 0;
	padding: 6px 10px;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
}
nav .button-holder-mid .selected {
	opacity: 1;
	cursor: default;
}
nav .button-holder-mid .unselected {
	opacity: 0.3;
}
nav img {
	width: 32px;
	height: 32px;
}
nav .nav-button {
	cursor: pointer;
	margin: 0 5px;
	opacity: 0.7;
	transition: opacity 150ms ease-in;
}
nav .nav-button:hover {
	opacity: 1;
}

.body-content {
	margin-left: 10px;
}

input:focus,
select:focus,
textarea:focus,
button:focus,
date:focus,
submit:focus {
	outline: none;
}

section {
	width: 100%;
	height: fit-content;
}

.hidden {
	display: none;
}

/* LOGIN */
.login-holder {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.login-box-holder {
	border: 1px solid white;
	height: 130px;
	width: 260px;
	margin-top: -100px;
	background: black;
	justify-content: center;
	align-items: center;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
.login-box-holder img {
	width: 14px;
	height: 14px;
	padding: 5px;
}
.login-box {
	width: 260px;
	height: 130px;
	background: black;
	display: flex;
	justify-content: center;
	align-items: center;
	outline: 1px solid white;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
.login-box input[type=text],
.login-box input[type=password] {
	width: 200px;
	height: 22px;
	padding: 4px;
	background: black;
	color: white;
	border: 1px solid white;
	margin: 3px 0;
}
.login-box input[type=submit] {
	width: 75px;
	height: 25px;
	background: black;
	color: white;
	border: 1px solid white;
	margin: 8px 0 4px 0;
	cursor: pointer;
}
.login-box input[type=submit]:hover {
	background: #333;
}
.login-box input[type=submit]:focus {
	background: #666;
}
.login-error {
	border: 1px solid red;
	color: red;
	width: fit-content;
	background: black;
	border-radius: 10px;
	padding: 10px 15px;
	margin-top: 15px;
	opacity: 0;
	-webkit-animation: fadeout 2s; /* Safari, Chrome and Opera > 12.1 */
	   -moz-animation: fadeout 2s; /* Firefox < 16 */
		-ms-animation: fadeout 2s; /* Internet Explorer */
		 -o-animation: fadeout 2s; /* Opera < 12.1 */
			animation: fadeout 2s;
}


.job-line {
	position: relative;
	background: #333;
	border-radius: 20px;
	padding: 10px 15px;
	margin: 10px;
	height: fit-content;
	width: auto;
	max-width: 750px;
}
.job-line .icon-holder {
	position: absolute;
	right: 24px;
	background: none;
	display: flex;
	align-items: center;
}
.job-line .icon {
	cursor: pointer;
	width: 22px;
	float: right;
	margin-left: 8px;
}
.job-line .pdf-icon {
	width: 24px;
	margin-left: 6px;
}
.job-line h3 {
	padding: 0;
	margin: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	width: 100%;
}
.job-line a {
	display: flex;
	align-items: center;
}
.job-line h3 img {
	height: 26px;
	margin-right: 8px;
}
.job-line h3 .title {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	width: fit-content;
	max-width: 500px;
}
.job-line h3 .total {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	width: fit-content;
	max-width: 200px;
}
.collapse-button {
	transition: transform 0.15s ease-in;
	position: absolute;
	width: 24px;
	height: auto;
	right: 10px;
}
.job-line-icons {
	position: absolute;
	right: 50px;
	display: flex;
	align-items: center;
}
.job-line-icons a {
	display: inline-flex;
	margin: 0 4px;
}
.job-line-icons .counter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	margin: 0 1px;
	background: grey;
	overflow: hidden;
}
.job-line-icons .csv-export {
	cursor: pointer;
	height: 30px;
	margin-right: 4px;
}

.button-line {
	border-radius: 20px;
	padding-top: 10px;
}
.button-line div {
	display: inline;
	cursor: pointer;
	width: fit-content;
	background: #555;
	border-radius: 20px;
	padding: 5px 15px;
	margin-right: 10px;
	transition: all 50ms ease-in-out;
	user-select: none;
}
.button-line div:hover { background: #666; }
.button-line div:active { background: #777; }
.button-line select {
	display: inline;
	cursor: pointer;
	color: white;
	width: 250px;
	background: #555;
	border-radius: 20px;
	padding: 5px 10px;
	margin-right: 10px;
	border: none;
	outline: none;
	user-select: none;
}
.button-line select:hover { background: #666; }
.button-line select:active { background: #777; }

.job-warning-badge {
	position: absolute;
	top: -3px;
	left: -3px;
	background: red;
	width: 16px;
	height: 16px;
	border-radius: 50%;
}


.po-container {
	padding-top: 10px;
}

.po-container .line {
	background: #555;
	border-radius: 20px;
	padding: 5px 15px;
	margin: 5px 0;
	height: 28px;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.po-container .line a {
	display: inline-block;
	margin: 0;
	margin-right: 10px;
}

.po-container .line .number {
	width: fit-content;
	max-width: 80px;
}
.po-container .line .name {
	font-weight: bold;
	width: fit-content;
	max-width: 420px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.po-container .line .total {
	width: fit-content;
	max-width: 150px;
	position: absolute;
	right: 110px;
}


.po-holder {
	background: #222;
	border: 1px solid grey;
}


.button {
	outline: 1px solid white;
	width: fit-content;
	padding: 6px;
	cursor: pointer;
	margin: 5px;
	border-radius: 10px;
	transition: all 50ms ease-in-out;
	user-select: none;
}
.button:hover { background: #222; }
.button:active { background: #666; }


.title-full {
	position: absolute;
	top: 0;
	left: 0;
	height: 50px;
	width: 100%;
	min-width: fit-content;
	display: flex;
	align-items: center;
	justify-content: center;
	background: black;
	border-bottom: 1px solid white;
	justify-content: center;
}
.title-full h1 {
	padding: 5px;
	width: 100%;
	text-align: center;
}

.button-full {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 30px;
	width: 100%;
	min-width: fit-content;
	display: flex;
	align-items: center;
	justify-content: center;
	background: black;
	border-top: 1px solid white;
	cursor: pointer;
}
.button-full a { justify-content: center; }
.button-full:hover { background: #222; }
.button-full:active { background: #666; }

.admin-modal-user-list {
	margin-top: 40px;
	margin-bottom: 20px;
	padding: 0 40px 0 0;
	max-height: calc(90vh - 150px);
	overflow-y: scroll;
}


.background-fade {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	display: none;
	z-index: 1;
}

.modal {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 1px solid #bbb;
	background: black;
	z-index: 2;
	padding: 20px;
	padding-right: 20px;
	width: fit-content;
	height: fit-content;
	min-width: 64px;
	min-height: 32px;
	max-height: 90vh;
	max-width: calc(100vw - 200px);
	overflow: auto;
	display: none;
	border-radius: 10px;
}
.modal * {
	display: inline-block;
}
.modal h1 {
	display: block;
	font-size: 18px;
	font-weight: bold;
	user-select: none;
	margin-top: 0;
	margin-bottom: 10px;
}
.modal h2 {
	display: block;
	font-size: 14px;
	font-weight: normal;
	user-select: none;
	margin-top: 0;
}
.modal input,
.modal select,
.modal textarea {
	display: inline-block;
	outline: none;
	border: none;
	color: #aaa;
	background: #222;
	margin: 15px 0;
	outline: 1px solid grey;
	border-radius: 5px;
	padding: 5px;
	width: fit-content;
}
.modal input:focus,
.modal select:focus,
.modal textarea:focus {
	outline: 1px solid white;
	border-right: 2px solid white;
	/* margin-right: 2px; */
	/* margin-left: -2px; */
}
.modal input:focus,
.modal select:focus,
.modal textarea:focus {
	background: #292929;
	color: white;
}
.modal input { height: 25px; }
.modal .full-line-input { width: 250px; }

.modal textarea {
	/* notes field  */
	display: block;
	width: 520px;
	max-width: 520px;
	min-width: 520px;
}

.modal select {
	display: inline-block;
	height: 25px;
	appearance: none;
	-webkit-appearance: none;
}

.modal .vendor-line-container {
	min-width: 500px;
	margin-bottom: 20px;
	background: #111;
	padding: 5px 10px;
	margin-bottom: 0;
	outline: 1px solid #333;
	border-radius: 5px;
}
.modal .vendor-line-container * {
		margin: 0;
display: inline-block;
}
.modal .vendor-line-container .label {
	width: 50px;
	text-align: right;
	margin-right: 10px;
	color: #ddd;
	user-select: none;
}

.modal .vendor-line-container .buyer-name { width: 130px; }
.modal .vendor-line-container .buyer-phone { width: 120px; }
.modal .vendor-line-container .buyer-email { width: 190px; }

.modal .vendor-line-container .vendor { width: 260px; }
.modal .vendor-line-container .type { width: 100px; }
.modal .vendor-line-container .terms { width: 80px; }

.modal input:disabled,
.modal select:disabled,
.modal textarea:disabled {
	cursor: not-allowed;
	opacity: 0.75;
	resize: none;
}


.modal .line-line-container {
	min-width: 490px;
	max-width: 520px;
	background: #111;
	padding: 15px;
	margin-top: 10px;
	outline: 1px solid #333;
	border-radius: 5px;
}
.modal .line-line-container * { margin: 0; }

.modal .line-line * { display: inline-block; }

.modal .line-line a {
	display: inline-block;
	background: #222;
}
/* .modal .line-line input { display: inline-block; } */
.modal .line-line { white-space: nowrap; }
.modal .line-line .quantity { width: 35px; }
.modal .line-line .line { width: 50px; }
.modal .line-line .line > option { font-family: monospace; }
.modal .line-line .amount { width: 115px; }
.modal .line-line .description { width: 280px; }


.modal .line-line-button-container { width: 90%; }

.modal .line-summary {
	display: inline-block;
	/* float: right; */
	/* padding: 8px 10px; */
	padding: 8px 0;
}

.modal .line-add {
	margin: 10px 0;
	padding: 5px 0;
}


.modal a {
	margin: 5px 10px;
	display: flex;
	align-items: center;
}
.modal a img {
	height: 20px;
	margin-right: 4px;
}
.modal .budget-under {
	margin: 0;
	color: green;
}
.modal .budget-over {
	margin: 0;
	color: red;
}
.modal .button {
	display: inline-block;
	margin: 10px 5px 5px 0;
}

.modal .line-button {
	display: inline-block;
	background: black;
	color: white;
	outline: none;
	border: none;
	background: #222;
	outline: 1px solid grey;
	border-radius: 5px;
	width: fit-content;
	height: 16px;
	cursor: pointer;
	vertical-align: middle;
	padding: 5px 10px;
	color: grey;
}
.modal .line-delete {
	color: red;
}

.modal .line-button:hover { background: #444; }
.modal .line-button:active { background: #666; }


.error::placeholder { color: red; }


.modal .history-event {
	display: block;
	background: #333;
	border-radius: 10px;
	margin: 8px 0;
	user-select: none;
}
.modal .history-event a {
	margin: 0;
	padding: 3px 8px;
}
.modal .history-event .descriptor {
}
.modal .history-event .message {
	color: lightblue;
}
.modal .history-event .date {
	color: grey;
}



.modal .settings-field {
	display: block;
	width: 200px;
}


.modal .vendor-verify-section {
	border: 1px solid grey;
	border-radius: 10px;
	padding: 10px;
	margin: 0 0 20px 0;
}
.modal .vendor-details-section { width: 310px; }
.modal .vendor-verify-section * {
	display: inline-block;
	padding: 0;
	margin: 0;
}
.modal .vendor-verify-section input,
.modal .vendor-verify-section select,
.modal .vendor-selection textarea {
	padding: 5px;
}
.modal .vendor-verify-section .vendor-submitted {
	margin-right: 10px;
}

.modal .vendor-verify-section .vendor-name {
	width: 310px;
	display: block;
	margin-bottom: 10px;
}

.modal .vendor-verify-section .vendor-tax-id {
	margin-right: 10px;
	margin-bottom: 10px;
}
.modal .vendor-verify-section .vendor-vendor-id {
	margin-bottom: 10px;
}

.modal .vendor-verify-section .vendor-address {
	width: 310px;
	max-width: 310px;
	min-width: 310px;
	height: 100px;
	max-height: 100px;
	min-height: 100px;
	padding: 5px;
}


.modal .vendor-info input {
	color: white;
	margin-right: 10px;
	padding: 5px;
}


.loading-fullscreen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
	z-index: 10;
}
.loading-fullscreen img {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
}



.modal .message-input {
	display: block;
	width: 280px;
}




.admin-user-list {
	width: fit-content;
	margin: 0;
	padding: 5px 10px;
	background: #222;
	border-radius: 10px;
}
.admin-user-list * {
	margin: 0;
	padding: 0;
}

.admin-password-holder {
	display: block;
	margin: 0 0 20px 0;
	padding: 0;
}
.modal .admin-password-field {
	display: inline-block;
	width: 170px;
	margin: 0;
}
.modal .admin-field {
	display: block;
	width: 200px;
}
.modal .admin-password-button {
	display: inline-block;
	background: #222;
	border: 1px solid grey;
	width: fit-content;
	height: fit-content;
	border-radius: 5px;
	padding: 2px 5px;
	margin: 0 4px;
	cursor: pointer;
}
.modal .admin-password-button:hover {
	background: #444;
}

.admin-user-line {
	display: block;
	width: fit-content;
	background: #333;
	margin: 10px 0;
	padding: 5px 0;
	border-radius: 5px;
	transition: background 100ms ease-in;
}
.admin-user-line:hover {
	background: #444;
}
.admin-user-line * {
	display: inline-block;
}
.admin-user-list h4 {
	font-weight: bold;
	margin: 0 5px 0 2px;
	cursor: default;
}
.admin-user-list .admin-user-button {
	cursor: pointer;
	border: 1px solid white;
	background: #555;
	padding: 2px 5px;
	border-radius: 5px;
	margin: 0 5px;
	transition: background 100ms ease-in;
}
.admin-user-list .admin-user-button:hover {
	background: #777;
}




.tooltip {
    display: none;
    position: absolute;
    z-index: 1000;
    padding: 10px;
    border: 1px solid white;
    background-color: green;
    border-radius: 10px;
	border-top-left-radius: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	/* margin: 16px 0 0 18px; */
	margin: -6px 0 0 18px;
	width: fit-content;
}
.tooltip a {
	white-space: nowrap;
	line-height: 22px;
}

.tooltip-active {
    display: block;
}

.tooltip-graph {
	display: inline-block;
	border: 1px solid white;
	margin-left: 5px;
	padding: 0;
	border-radius: 50%;
	cursor: default;
	width: 26px;
	height: 26px;
	overflow: hidden;
	/* cursor: pointer; */
}
.readout {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	width: 100%;
	height: 100%;
}

.tooltip-graph:hover .tooltip {
    display: block;
}



.admin-user-job {
	margin: 10px 10px 20px 10px;
	padding: 10px 20px 10px 10px;
	border-radius: 10px;
	background: #333;
	transition: all 150ms ease-in;
}
.admin-user-job:hover {
	background: #393939;
}
.admin-user-job-title {
	display: flex;
	align-items: center;
}
.admin-user-job-title img {
	height: 26px;
	margin-right: 8px;
}
.admin-user-job-title a {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	width: fit-content;
	max-width: 500px;
}
.admin-user-job .type-entry {
	display: block;
	width: fit-content;
	margin-left: 15px;
	cursor: pointer;
	opacity: 0.6;
}
.admin-user-job .type-entry:hover {
	opacity: 1;
}



.circle {
    --percentage: calc(var(--p, 0) * 1%);
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 5px solid transparent; /* Space for the border color */
    background: conic-gradient(
        red var(--percentage),
        transparent 0 100%
    );
}

.circle::before,
.circle::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    z-index: -1;
}

.circle::before {
    border: 5px solid #e5e5e5; /* Default border color */
}

.circle::after {
    border: 5px solid red; /* Filled border color */
    clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 0 100%, 0 0, 100% 0);
}


.sync-line {
	display: block;
	cursor: pointer;
	line-height: 20px;
	opacity: 0.8;
	width: fit-content;
}
.sync-line:hover {
	opacity: 1;
}

.sync-button {
	width: 14px;
	margin-right: 5px;
}