@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
:root {
	--lighter-colour: #f4eff7;
	--main-colour: #dbd3e0;
	--main-colour-darker: #d3cbd7;
	--base-colour: #b19fb9;
	--header-colour: #6c5974;
	--nav-colour: #483c4d;
	--nav-darker-colour: #211e22;
	--padding: 15px;
	--form-padding: 8px;
	--border-radius-small: 3px;
	--border-radius-large: 6px;
	--border-radius-xlarge: 12px;
	--loader-background-colour: rgba(50, 39, 54, 0.7);
}
html,
body {
	background-color: var(--header-colour);
	margin: 0;
	font-size: 95%;
	font-weight: 400;
	font-family: 'Raleway', sans-serif;
}
* {
	box-sizing: border-box;
	//border: 1px dotted red
}
hr {
	height: 1px;
	background: #6c5974;
	font-size: 0;
	border: 0;
}
strong {
	font-weight: 600
}
h1,
h2,
h3 {
	color: var(--header-colour);
	font-size: 135%;
	text-transform: capitalize;
	font-weight: 600
}
h2 {
	font-size: 125%
}
h3 {
	font-size: 115%
}
header {
	color: var(--main-colour);
	padding: var(--padding);
	position: relative;
	z-index: 3;
	font-weight: 500
}
header img {
	height: 20px;
	width: auto;
	margin-right: 10px;
	margin-bottom: -4px;
}
header span:before {
	content: ' | ';
}
main {
	background-color: var(--main-colour);
	position: relative;
	z-index: 2
}
footer {
	padding: var(--padding);
	color: var(--main-colour);
	text-align: center;
	position: relative;
	z-index: 1
}
footer p {
	margin: 0;
}
.nav_open,
.nav_open:visited {
	text-decoration: none;
	transition: .25s;
	position: fixed;
	top: 13px;
	right: 24px;
	color: var(--main-colour) !important;
	z-index: 5;
}
.nav_is_open {
	transform: rotate(-90deg)
}
nav {
	position: fixed;
	z-index: 4;
	background-color: var(--nav-colour);
	top: 0;
	padding-top: 48px;
	right: -147px;
	bottom: 0;
	transition: .25s
}
nav a,
nav a:visited {
	color: var(--main-colour);
	text-decoration: none;
	display: block;
	margin: 10px 0 10px 0;
	opacity: .5;
	transition: .5s;
	text-transform: capitalize
}
nav a:hover {
	opacity: 1
}
nav span {
	display: inline-block;
	vertical-align: middle
}
nav div span:nth-child(1) {
	width: 60px;
	font-size: 25px;
	padding-left: 14px
}
nav div span:nth-child(2) {
	width: 150px;
	margin-bottom: -2px;
	padding: 0 var(--padding) 0 5px
}
.nav_show {
	right: 0;
}
section {
	padding: var(--padding);
	padding-right: 80px;
	max-width: 1300px;
	margin: auto;
	position: relative
}
input[type=text],
input[type=password],
input[type=submit],
select,
textarea {
	outline: none;
	appearance: none;
	padding: var(--form-padding);
	font-size: inherit;
	font-style: inherit;
	border-radius: var(--border-radius-small);
	background-color: rgba(255, 255, 255, 0.75);
	resize: none;
	border: none
}
input[type=submit] {
	background-color: var(--header-colour);
	color: var(--lighter-colour);
	text-transform: uppercase;
}
input[type=submit]:disabled {
	opacity: .2 !important
}
select {
	background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
	background-repeat: no-repeat;
	background-position-x: 100%;
	background-position-y: 5px;
	margin-right: 2rem;
	padding-right: 2rem;
}
.required_field {
	color: red;
	margin-right: 5px
}
.required_field_marked {
	background-color: rgb(246, 197, 193) !important
}
.form {
	display: inline-block
}
.form x-label * {
	margin-top: 5px;
}
.form x-label {
	display: inline-block;
	vertical-align: bottom;
	padding: var(--padding) var(--padding) 0 var(--padding);
}
.form_1 x-label {
	width: 100%;
	padding-left: 0;
	padding-right: 0;
}
.form_2 x-label {
	width: calc(100%/2);
}
.form_3 x-label {
	width: calc(100%/3);
}
.form_4 x-label {
	width: calc(100%/4);
}
.form_5 x-label {
	width: calc(100%/5);
}
.form_6 x-label {
	width: calc(100%/6);
}
.form_2 x-label:first-child,
.form_3 x-label:first-child,
.form_4 x-label:first-child,
.form_5 x-label:first-child,
.form_6 x-label:first-child {
	padding-left: 0
}
.form_2 x-label:last-child,
.form_3 x-label:last-child,
.form_4 x-label:last-child,
.form_5 x-label:last-child,
.form_6 x-label:last-child {
	padding-right: 0
}
.debug {
	color: var(--lighter-colour);
	padding: var(--padding);
	border-top: dashed 1px var(--lighter-colour);
	display: block;
	text-decoration: none;
	pointer-events: none;
	opacity: .5
}
.debug ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.mobile_menu {
	display: none;
	background-color: var(--nav-colour);
}
.mobile_menu a,
.mobile_menu a:visited {
	display: block;
	text-align: center;
	color: var(--lighter-colour);
	text-decoration: none;
	padding: var(--form-padding)
}
.mobile_menu a span:nth-child(1) {
	display: none
}
.mobile_menu div {
	display: none
}
.open_mobile_menu {
	background-color: var(--nav-darker-colour)
}
.paging a,
.paging a:visited {
	background-color: var(--header-colour);
	color: var(--lighter-colour);
	text-decoration: none;
	text-transform: uppercase;
	display: inline-block;
	padding: var(--form-padding);
	margin-right: var(--form-padding);
	border-radius: var(--border-radius-small)
}
.paging a:hover {
	background-color: var(--nav-colour)
}
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: inherit;
	vertical-align: middle;
	background: transparent;
	border-collapse: collapse
}
td,
th {
	padding: var(--form-padding);
}
.data td,
.data th {
	border: 1px solid var(--header-colour);
}
.data tr:nth-child(even) td {
	background-color: rgba(0, 0, 0, 0.10)
}
.data tr:nth-child(odd) td {
	background-color: rgba(0, 0, 0, 0.05)
}
.data th {
	background-color: var(--header-colour);
	color: var(--lighter-colour);
	border: none;
	border-radius: var(--border-radius-xlarge) var(--border-radius-xlarge) 0 0;
	font-weight: 400;
	text-transform: uppercase
}
.table_divider {
	border-radius: 0 !important;
	background-color: var(--header-colour) !important;
	color: var(--lighter-colour) !important;
	text-align: center;
	font-weight: 400;
	text-transform: uppercase
}
.data tr:last-child td:last-child {
	border-radius: 0 0 var(--border-radius-xlarge) 0 !important;
}
.data tr:last-child td:first-child {
	border-radius: 0 0 0 var(--border-radius-xlarge) !important;
}
.data tr:last-child td {
	border-bottom: none;
}
.data tr td:first-child {
	border-left: none
}
.data tr td:last-child {
	border-right: none
}
.full {
	width: 100%
}
.nowrap {
	white-space: nowrap
}
.center {
	text-align: center
}
.top {
	vertical-align: top
}
.loading,
.popup {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	background-color: var(--loader-background-colour);
	display: none;
}
.loading img {
	width: 200px;
	aspect-ratio: 1/1;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -100px;
	margin-top: -100px
}
.development {
	padding: var(--padding);
	text-align: center;
	background-color: orangered;
	color: white;
	text-transform: uppercase
}
noscript {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	padding: var(--padding);
	color: var(--lighter-colour);
	background-color: var(--base-colour);
	text-align: center;
	z-index: 200
}
.system_message {
	position: absolute;
	z-index: 5;
	background-color: salmon;
	padding: calc(var(--padding)*2);
	top: 0;
	right: 0;
	left: 0;
	padding-right: var(--padding);
	text-align: center;
	color: black;
	text-transform: uppercase;
	opacity: .7;
}
.box,
.invoice_copybox {
	padding: var(--padding);
	background-color: var(--main-colour-darker);
	border-radius: var(--border-radius-large);
	margin-bottom: var(--padding);
	position: relative;
	border: 1px solid var(--base-colour);
}
.invoice_copybox {
	font-family: monospace;
	background-color: rgba(255, 255, 255, 0.7)
}
section .box:last-child {
	margin-bottom: 0;
}
.box h1,
.box h2,
.box h3 {
	margin-top: 0
}
.material-symbols-outlined,
.material-symbols-outlined:visited {
	text-decoration: none;
	color: inherit;
	font-size: inherit;
}
.material-symbols-outlined:hover {
	opacity: 1
}
.box .material-symbols-outlined,
.box .material-symbols-outlined:visited {
	opacity: .5;
	transition: .5s;
	margin-right: var(--padding)
}
.box .material-symbols-outlined:hover {
	opacity: 1
}
.box_details {
	position: relative;
	z-index: 2
}
.box_background {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: .1
}
.pop_up_inner {
	position: absolute;
	left: 50%;
	top: 50%;
	background-color: var(--main-colour);
	padding: var(--padding);
	padding-top: calc(var(--padding)*2);
	border-radius: var(--border-radius-large);
	width: 500px;
	height: 500px;
	margin-left: -250px;
	margin-top: -250px
}
.close_popup,
.close_popup:visited,
.close_popup:hover {
	position: absolute;
	right: 10px;
	top: 10px;
	color: var(--base-colour);
	text-decoration: none
}
.pipeline td {
	position: relative;
	border: none;
	vertical-align: top;
}
.pipeline_cards {
	position: relative;
	z-index: 2
}
.pipeline_base {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	opacity: .3;
}


.pipeline tr:nth-child(2) td:first-child .pipeline_base {
	border-radius: 0 0 0 var(--border-radius-xlarge) !important
}
.pipeline tr:nth-child(2) td:last-child .pipeline_base {
	border-radius: 0 0 var(--border-radius-xlarge) 0 !important
}


.pipe_card {
	padding: var(--padding);
	border-radius: var(--border-radius-large);
	border: 1px solid var(--lighter-colour);
	background-color: rgba(255, 255, 255, 0.2);
	margin-bottom: var(--form-padding);
	text-align: center;
	cursor: move;
	font-size: 85%;
	z-index: 1000
}
.pipe_card p {
	margin: 0
}
td .pipe_card:last-child {
	margin-bottom: 0
}
.stat_bar {
	display: block;
	height: 20px;
	border-radius: var(--border-radius-small);
	opacity: .75
}
.hours_invoiced {
	opacity: .3;
	text-decoration: line-through;
	color: black !important
}
.reminder_box {
	background-color: rgba(249, 127, 114, 0.483)
}
.reminder_box_alerts {
	display: none
}
.too_small {
	position: fixed;
	z-index: 200;
	background-color: var(--nav-colour);
	color: var(--lighter-colour);
	padding: var(--padding);
	text-align: center;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: none
}
.show_note_content {
	padding: var(--padding);
	border-radius: var(--border-radius-small);
	background-color: white;
	font-family: monospace;
	font-size: 110%
}
.days_remain div {
	white-space: nowrap;
	position: relative;
	z-index: 1;
	border-radius: var(--border-radius-small);
	overflow: hidden
}
.days_remain div {
	background-color: rgba(0, 0, 0, 0.1);
	width: 100%;
}
.days_remain .stat_bar {
	background-color: red;
	position: relative;
	z-index: 3;
	opacity: .5;
	border-radius: 0 !important;
	height: 10px !important;
}
.job_easy_invoice_copy {
	background-color: #f2f2f2;
	font-family: monospace;
	color: black;
	padding: 20px;
	font-size: 120%;
	border-radius: var(--border-radius-large);
	position: relative
}
.job_easy_invoice_copy p:first-of-type {
	margin-top: 0;
}
.job_easy_invoice_copy p:last-of-type {
	margin-bottom: 0;
}
@media screen and (max-width: 1024px) {
	.too_small {
		display: block
	}
}