/**
 * 𝐍𝐄𝐖 𝐂𝐒𝐒 𝐒𝐄𝐂𝐓𝐈𝐎𝐍
 * This is the main CSS for this template. Feel free to change anything in this top section (the config).
**/
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap");

html {
	overflow: hidden;
}

* {
	font-family: "Roboto" !important;
}

html>body {
	font-family: "Roboto";
}

html>body button,
html>body input,
html>body optgroup,
html>body select,
html>body textarea {
	font-family: "Roboto";
}

:root {
	--color-success: #66A15C;
	--color-warning: #ce8047;
	--color-danger: #d06161;
	--color-info: #429a94;
	--color-dark: #252525;
	--color-light: #fafafa;
	--color-blue: #609BD0;
	--color-darkgreen: #497143;
	--color-background: #E5E5E5;
}

::selection {
	color: var(--color-light);
	background: var(--color-dark);
}

div.os-scrollbar {
	position: absolute !important;
	z-index: 999999999999999 !important;
	right: 0 !important;
	padding: 8px 6px 8px 6px !important;
	width: 18px !important;
}

div.os-scrollbar>div.os-scrollbar-track>div.os-scrollbar-handle {
	background: rgba(0, 0, 0, 0.17) !important;
	border-radius: 2px !important;
	cursor: pointer !important;
}

.row::after {
	content: "";
	clear: both;
	display: table;
}

.row {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
}

[class*="col-"] {
	float: left;
	padding: 15px;
}

.col-1 {
	width: 8.33%;
}

.col-2 {
	width: 16.66%;
}

.col-3 {
	width: 25%;
}

.col-4 {
	width: 33.33%;
}

.col-5 {
	width: 41.66%;
}

.col-6 {
	width: 50%;
}

.col-7 {
	width: 58.33%;
}

.col-8 {
	width: 66.66%;
}

.col-9 {
	width: 75%;
}

.col-10 {
	width: 83.33%;
}

.col-11 {
	width: 91.66%;
}

.col-12 {
	width: 100%;
}

.hov-lift {
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}

.hov-lift:hover {
	-webkit-transform: translateY(-10px);
	-ms-transform: translateY(-10px);
	transform: translateY(-10px);
}


.text-dark {
	color: var(--color-dark) !important;
}

.text-light {
	color: var(--color-light) !important;
}

body {
	/* background-color: #73a838; */
	/* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='344' height='344' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23527829' stroke-width='1.3'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23496b23'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E"); */
	background-color: #73a838;
	background-image: url("../images/AES_Background.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}


/* Overrides */


div.swal2-popup,
div.swal2-success-circular-line-left,
div.swal2-success-fix,
div.swal2-success-circular-line-right {
	background-color: var(--color-dark) !important;
}

h2.swal2-title,
#swal2-content {
	color: var(--color-light);
}

div.swal2-popup {
	border: 1.5px #00000061 solid;
	border-radius: 5px;
	box-shadow: 0px 0px 11px 2px #0e0e0e99;
}

div.swal2-footer {
	border-top: 1px solid #353535e0;
	color: var(--color-light);
}

div.datepicker {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 10rem;
	padding: .75rem;
	margin: .125rem 0 0;
	font-size: 1rem;
	color: var(--color-light);
	text-align: left;
	list-style: none;
	background-color: var(--color-dark);
	background-clip: padding-box;
	border: 1px solid rgba(0, 0, 0, 0.582);
	box-shadow: 0px 0px 11px 2px #0e0e0e99;
	border-radius: .25rem;
}

.datepicker table tr td.day:hover,
.datepicker table tr td.day.focused,
.datepicker thead tr:first-child th:hover,
.datepicker tfoot tr th:hover,
.datepicker table tr td span:hover {
	background-color: #545454 !important;
}

div.datepicker>div>table {
	color: var(--color-light);
}

td.day {
	color: var(--color-light);
}

td.new.day,
td.old.day {
	color: #5a5a5a;
}

.popover.bottom>.arrow:after {
	border-bottom-color: var(--color-dark)
}

.clockpicker-popover .popover-content {
	background-color: var(--color-dark) !important;
}

div.popover {
	background-color: #000;
}

.clockpicker-popover .popover-title {
	background-color: var(--color-dark) !important;
	color: #dcdcdc !important;
}

div.popover-title {
	border-bottom: 1px solid #0e0e0e;
}

div.clockpicker-plate {
	background-color: #252525 !important;
	border: 1px solid #000 !important;
}

div.clockpicker-tick {
	color: #dcdcdc !important;
}

div.clockpicker-tick.active,
div.clockpicker-tick:hover {
	background-color: #585858 !important;
}

.clockpicker-canvas line {
	stroke: #949494 !important;
}

circle.clockpicker-canvas-bearing,
circle.clockpicker-canvas-fg {
	fill: #949494;
}

circle.clockpicker-canvas-bg {
	fill: #616161;
}

/* End Overrides */


/**
 * 𝐍𝐄𝐖 𝐂𝐒𝐒 𝐒𝐄𝐂𝐓𝐈𝐎𝐍
 * Okay, now the styling begins past this point, don't change any of this unless you really need to.
 * Everything you need should be in the config above.
**/


/* -- CONTAINER -- */

div.container {
	max-width: 1400px;
	width: 100%;
	margin: 0 auto;
	/* padding: 0 24px; */
}

/* -- NAV/HEADER -- */

nav {
	position: relative;
	z-index: 5;
	width: 100%;
	display: block;
	top: 0;
	left: 0;
	padding: 20px 0;
	transition: background-color 0.2s ease;
	background-color: transparent;
}

nav.bg {
	background-color: var(--color-primary);
}

nav div.container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

nav a.logo {
	color: white;
	text-decoration: none;
	cursor: pointer;
	display: inline-block;
	padding-top: .3125rem;
	padding-bottom: .3125rem;
	margin-right: 1rem;
	font-size: 1.25rem;
	line-height: inherit;
	white-space: nowrap;
}

nav a.logo h1 {
	font-weight: bold;
	color: rgba(255, 255, 255, 0.77);
}

nav a.logo img {
	max-width: 256px;
	width: 100%;
	max-height: 64px;
	object-fit: contain;
	object-position: left;
}


nav div.items ul {
	display: flex;
}

nav div.items ul li {
	display: block;
	color: #cce0ed;
	font-size: 19px;
	padding-right: 10px;
	padding-left: 17px;
	font-weight: 500;
	cursor: pointer;
	transition: color 0.5s ease
}


/* Show mobile hamburger menu. */


nav a.menu {
	text-decoration: none;
	cursor: pointer;
	padding: 8px;
	border-radius: 2px;
	transition: background-color 0.1s ease;
	position: relative;
	z-index: 150;
}


nav a.menu svg {
	fill: var(--color-dark);
	display: none;
	width: 50px;
	height: 50px;
	opacity: 1;
	transition: all 0.3s ease;
}

nav a.menu svg:hover {
	fill: #3D3E3D;
}

nav a.menu:hover svg {
	opacity: 1;
}

nav a.menu svg.shown {
	display: block;
}

nav div.items {
	display: none;
	position: absolute;
	z-index: 100;
	top: 60px;
	right: 40px;
	border-radius: 5px;
	background: rgba(0, 0, 0, 0.85);
	overflow: auto;
	width: 150px;
	box-shadow: 0px 5px 11px 2px #0000009e;
	border: solid 1px black;
}


nav div.items ul {
	list-style-type: none;
	display: block;
	text-align: left;
	margin: auto;
	width: 100%;
	max-width: 440px;
}

/* nav div.items ul li {
	display: block;
	background: var(--color-dark);
	padding: 10px 15px;
	color: var(--color-light);
	user-select: none;
	cursor: pointer;
	transition: all 0.25s ease;
	border-bottom: #808080 1px solid;
}

nav div.items ul li svg {
	fill: var(--color-light);
	top: 5px;
}

nav div.items ul li:last-child {
	border-bottom: none;
}

nav div.items ul li:hover, nav div.items ul li:focus {
	background: #383838;
	color: #fff;
} */

nav div.items ul a {
	display: block;
	background: var(--color-dark);
	padding: 10px 15px;
	color: var(--color-light);
	user-select: none;
	cursor: pointer;
	transition: all 0.25s ease;
	border-bottom: #808080 1px solid;
}

nav div.items ul a svg {
	fill: var(--color-light);
	top: 5px;
}

nav div.items ul a:last-child {
	border-bottom: none;
}

nav div.items ul a:hover,
nav div.items ul a:focus {
	background: #383838;
	color: #fff;
}

.items a {
	text-decoration: none;
	color: var(--color-light);
	user-select: none;
	cursor: pointer;
	transition: all 0.25s ease;
}


/* -- JOBS SECTION -- */
.jobs {
	margin-bottom: 100px;
}

.jobs-table {
	border-collapse: collapse;
	width: 90%;
	margin: auto;
}

.jobs-table-header {
	background-color: var(--color-darkgreen) !important;
	height: 70px;
	border-radius: 30px;
}

.jobs-table td {
	text-align: left;
	padding: 10px 0px 10px 0px;
}

.jobs-table td,
.jobs-table-header th {
	padding: 15px 15px 15px 15px;
	color: var(--color-light);
}


.jobs-table th:first-child {
	border-radius: 5px 0 0 0;
}

.jobs-table th:last-child {
	border-radius: 0 5px 0 0;
}

.jobs-table tr:last-child td:first-child {
	border-radius: 0 0 0 5px;
}

.jobs-table tr:last-child td:last-child {
	border-radius: 0 0 5px 0;
}

.jobs-table tr {
	background-color: #252525;
	transition: all 0.25s ease;
}

.jobs-table tr:hover {
	background-color: #2c2c2c;
}

.pill {
	padding: 7px 10px 7px 10px;
	border-radius: 20px;
	background: var(--color-dark);
	color: var(--color-light);
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	white-space: nowrap;
}

.btn {
	text-decoration: none;
	cursor: pointer;
	background: var(--color-dark);
	color: var(--color-light);
	padding: 5px 10px;
	border-radius: 5px;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	transition: all 0.1s ease-in-out;
	margin: 0px 5px;
	white-space: nowrap;
}


.pill-danger,
.btn-danger,
.btn-danger:hover,
.btn-danger:focus {
	background: var(--color-danger);
	color: var(--color-light);

}

.pill-warning,
.btn-warning,
.btn-warning:hover,
.btn-warning:focus {
	background: var(--color-warning);
	color: var(--color-light);

}

.pill-success,
.btn-success,
.btn-success:hover,
.btn-success:focus {
	background: var(--color-success);
	color: var(--color-light);
}

.pill-info,
.btn-info,
.btn-info:hover,
.btn-info:focus {
	background-color: var(--color-info);
	color: var(--color-light);
}

.btn:hover {
	transform: scale(1.05);
}

.pill-blue,
.btn-blue,
.btn-blue:hover,
.btn-blue:focus {
	background: var(--color-blue);
	color: var(--color-light);
}



/* Login Page */

.login {
	padding: 8px;
	min-height: 100vh;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
}

.login-box {
	max-width: 558px;
	width: 100%;
	background: var(--color-dark);
	border-radius: 6px;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
	overflow: hidden;
}

.login-box-header {
	background: var(--color-dark);
	background: linear-gradient(45deg, #383838, #414141);
	padding: 28px 40px;
	text-align: center;
	color: var(--color-light);
}

.login-box-header h4 {
	font-size: 30px;
	font-weight: 600;
}

.login-box-content {
	padding: 40px;
	max-height: 542px;
	overflow: auto;
}

.form-container {
	display: block;
	width: 100%;
	padding: 0;
	margin: 0;
}

label.form-label {
	font-weight: bold;
	display: block;
	width: fit-content;
	width: -moz-fit-content;
	width: -webkit-fit-content;
	cursor: default;
	color: #fff;
	text-transform: uppercase;
	font-size: 18px;
	margin: 0;
}

input.form-input {
	margin: 4px 0 20px 0;
	border-radius: 3px;
	display: block;
	font-size: 18px;
	background: #363636;
	padding: 10px 18px;
	border: 0;
	box-shadow: none;
	transition: background-color 5000s ease 0s;
	background-color: #363636 !important;
	-webkit-text-fill-color: #eee;
	-webkit-box-shadow: none;
	width: 100%;
	max-width: none;
}

input.form-input::-webkit-input-placeholder {
	opacity: 0.5;
}

input.form-input:hover {
	cursor: text;
}



.btn.submit {
	border: 1px solid rgba(189, 189, 189, 0.12);
	border-radius: 4px;
	box-shadow: none;
	background: #363636;
	font-weight: normal;
	padding: 12px 20px;
	color: #CDCDCD;
	transition: box-shadow .15s ease, background-color .2s ease, transform .2s ease;
	font-size: 15px;
	font-weight: 500;
}

.btn.submit:hover {
	transform: scale(1.01);
	background-color: #414040;
}


.btn.submit svg.after {
	margin: 0 -6px 0 6px;
}



.break {
	height: 16px;
}

/* Report Page */

.report {
	margin-bottom: 100px;
}












/**/

.accordion {
	background-color: #1d1d1d;
	color: #444;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 15px;
	transition: 0.4s;

	font-weight: bold;
	color: #ccc;
	text-transform: uppercase;
	font-size: 18px;
	margin: 0;
}

.active,
.accordion:hover {
	background-color: #3c3c3c;
}

.panel {
	padding: 0 18px;
	background-color: var(--color-dark);
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease-out;
	box-shadow: rgba(0, 0, 0, 0.31) 0px 18px 20px 5px;
}


label.form-control-label {
	display: block;
	width: fit-content;
	width: -moz-fit-content;
	width: -webkit-fit-content;
	cursor: default;
	color: #fff;
	font-size: 18px;
	margin: 0;
}


input.form-control,
textarea.form-control,
.form-control {
	margin: 4px 0 20px 0;
	display: block;
	padding: 10px 12.5px;
	transition: background-color 5000s ease 0s;
	-webkit-text-fill-color: #eee;
	width: 100%;
	max-width: 100%;
	min-width: 100%;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	background-clip: padding-box;
	border: 1px solid #767a7e;
	border-radius: .25rem;
}

textarea.form-control {
	min-height: 46px;
}





input.form-control:focus,
textarea.form-control:focus,
.form-control:focus {
	box-shadow: 0 0 0 1px rgba(220, 220, 220, 0.37);
}

.form-control[disabled],
.form-control[readonly] {
	background-color: #444;
	cursor: not-allowed;
}


input.form-control,
select.form-control,
textarea.form-control,
.form-control {
	background-color: #444;
	border-color: #555;
	color: #eee
}

input.form-control,
select.form-control {
	height: 46px;
}



.form-control:disabled,
.form-control[readonly] {
	background-color: #3f3e3e;
	opacity: 1;
	cursor: not-allowed;
}

.form-control[readonly]:hover {
	cursor: not-allowed;
}



input.form-control::-webkit-input-placeholder,
textarea.form-control::-webkit-input-placeholder {
	opacity: 0.5;
}

input.form-control:hover,
textarea.form-control:hover {
	cursor: text;
}

label.disabled-input {
	cursor: not-allowed;
}



.chck[type=checkbox] {
	position: absolute;
	opacity: 0;
	z-index: -1;
}

.check-trail {
	display: flex;
	align-items: center;
	width: 9em;
	height: 5em;
	background: #a01616;
	border-radius: 2.5em;
	transition: all 0.5s ease;
	cursor: pointer;
	transform: scale(0.5);
	position: relative;
	top: -16px;
	left: -38px;
}

table .check-trail {
	position: relative;
	top: 0px;
}

.check-handler {
	display: flex;
	margin-left: 0.5em;
	justify-content: center;
	align-items: center;
	width: 4em;
	height: 4em;
	background: #bc1a1a;
	border-radius: 50%;
	transition: all 0.5s ease;
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

.check-handler:before {
	content: "×";
	color: white;
	font-size: 2em;
	font-weight: bold;
}

input[type=checkbox]:checked+.check-trail {
	background: #16a085;
}

input[type=checkbox]:checked+.check-trail .check-handler {
	margin-left: 50%;
	background: #1abc9c;
}

input[type=checkbox]:checked+.check-trail .check-handler::before {
	content: "✔";
}


.accordian-container>button:first-child {
	border-radius: 5px 5px 0px 0px;
}


.accordian-container>button:nth-last-child(2):not(.active) {
	border-radius: 0px 0px 5px 5px;
}

.accordian-container .panel:last-child {
	border-radius: 0px 0px 5px 5px;
}

#materialTable {
	margin-top: 30px;
	margin-bottom: 50px;
}

.remove-material,
.remove-labour {
	padding: 1px 6px;
	padding: .375rem .75rem;
	border-radius: .25rem !important;
	transition: all .15s ease-in-out;
	position: relative;
	top: -8px;
}

.remove-labour {
	top: -10px !important;
}

.remove-material:hover,
.remove-labour:hover {
	transform: scale(1.25);
	color: var(--color-light) !important;
}

.material-index {
	position: relative;
	top: -10px;
}

[name=matDesk] {
	width: 100% !important;
	min-width: 100% !important;
	max-width: 100% !important;
}

[name=workOut] {
	padding: 15px !important;
}

.labour-table,
.labour-table>table,
.unit-table,
.unit-table>table,
.material-table,
.material-table>table {
	overflow-x: scroll;
}

.labour-table>table>thead>tr,
.unit-table>table>thead>tr,
.material-table>table>thead>tr {
	white-space: nowrap;
}

.labour-table::-webkit-scrollbar,
.unit-table::-webkit-scrollbar,
.material-table::-webkit-scrollbar {
	width: 5px;
}

/* Track */
.labour-table::-webkit-scrollbar-track,
.unit-table::-webkit-scrollbar-track,
.material-table::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px #80808000;
	border-radius: 10px;
}

/* Handle */
.labour-table::-webkit-scrollbar-thumb,
.unit-table::-webkit-scrollbar-thumb,
.material-table::-webkit-scrollbar-thumb {
	background: #4242424f;
	border-radius: 10px;
}

/* Handle on hover */
.labour-table::-webkit-scrollbar-thumb:hover,
.unit-table::-webkit-scrollbar-thumb:hover,
.material-table::-webkit-scrollbar-thumb:hover {
	background: #6363634f;
}

.acceptance {
	margin-top: 50px;
	margin-bottom: 50px;
	padding: 0 18px;
}

.acceptance .panel{
	padding: 0 18px;
}

.col>.accordian-container {
	border: 1px solid black;
	border-radius: 5px;
	box-shadow: -5px 12px 20px 2px #00000069;
}

.loader-overlay {
	overflow-y: auto;
	align-items: center;
	background: rgba(0, 0, 0, .4);
	display: flex;
	position: fixed;
	z-index: 1060;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: .625em;
	overflow-x: hidden;
	transition: background-color .1s;
}

.loader {
	display: flex;
	margin: auto;
	border: 1.5px #00000061 solid;
	border-radius: 5px;
	box-shadow: 0px 0px 11px 2px #0e0e0e99;
	background-color: var(--color-dark) !important;
	position: relative;
	box-sizing: border-box;
	flex-direction: column;
	justify-content: center;
	width: 32em;
	max-width: 100%;
	padding: 1.25em;
	background: #fff;
	font-size: 1rem;
}

.loader-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 1.8em;
}


.loader-title {
	display: flex;
	position: relative;
	max-width: 100%;
	margin: 0 0 .4em;
	padding: 0;
	font-size: 1.875em;
	font-weight: 600;
	text-align: center;
	text-transform: none;
	color: var(--color-light);
}

.loader-icon {
	position: relative;
	box-sizing: content-box;
	justify-content: center;
	width: 5em;
	height: 5em;
	margin: 1.25em auto 1.875em;
	border: .25em solid transparent;
	border-radius: 50%;
	line-height: 5em;
	cursor: default;
}

.swal2-file,
.swal2-input,
.swal2-textarea {
	color: white !important;
}

.swal2-select {
	background-color: #444 !important;
	border-color: #555 !important;
	color: #eee !important;
	transition: background-color 5000s ease 0s;
	-webkit-text-fill-color: #eee;
	width: 100%;
	font-weight: 400;
	line-height: 1.5;
	border: 1px solid #767a7e;
	border-radius: .25rem;
}


.material-description {
	min-width: 400px !important;
}

.material-unitnumber {
	min-width: 150px !important;
}

.remove-material-pill {
	position: relative;
	top: -9px;
}

.remove-labour-pill {
	position: relative;
	top: -12px;
}













.lds-dual-ring {
	display: inline-block;
	width: 80px;
	height: 80px;
}

.lds-dual-ring:after {
	content: " ";
	display: block;
	width: 64px;
	height: 64px;
	margin: 8px;
	border-radius: 50%;
	border: 6px solid #fff;
	border-color: #fff transparent #fff transparent;
	animation: spin 1.2s linear infinite;
}





















/* Table */

#labourTable {
	table-layout: fixed;
}

#labourTable th:nth-child(1) {
	width: 140px;
}

#labourTable th:nth-child(2) {
	width: 115px;
}

#labourTable th:nth-child(3) {
	width: 120px;
}

#labourTable th:nth-child(4) {
	width: 120px;
}

#labourTable th:nth-child(5) {
	width: 140px;
}

#labourTable th:nth-child(6) {
	width: 100px;
}

#labourTable th:nth-child(7) {
	width: 130px;
}

#labourTable th:nth-child(8) {
	width: 130px;
}

#labourTable th:nth-child(9) {
	width: 200px;
}

#unitTable td {
	vertical-align: middle;
	display: table-cell;
	padding: 0px 0px 0px 8px !important;
}

.table>thead>tr>th {
	background-color: #444;
	font-size: 18px;
}

.table-striped tbody tr:nth-of-type(odd) {
	background-color: #2c2c2c
}

.table-striped tbody tr:nth-of-type(even) {
	background-color: #333
}

.table>tbody>tr>td.info,
.table>tbody>tr.info>td {
	background-color: #d7edf9
}

.stripe-even,
.row-odd {
	background-color: #2c2c2c
}

.stripe-odd,
.row-even {
	background-color: #262626
}


.table-condensed>thead>tr>th,
.table-condensed>tbody>tr>th,
.table-condensed>tfoot>tr>th,
.table-condensed>thead>tr>td,
.table-condensed>tbody>tr>td,
.table-condensed>tfoot>tr>td {
	padding: 5px
}

.table>tbody>tr>td.danger,
.table>tbody>tr.danger>td,
.table>tbody>tr>td.warning,
.table>tbody>tr.warning>td {
	background-color: inherit
}

.table>tbody>td.warning,
.table>tbody>tr.warning,
.table>tbody>td.danger,
.table>tbody>tr.danger {
	border-left: 0
}

.table>tbody>td.info,
.table>tbody>tr.info {
	color: #333
}

table {
	margin-top: 30px;
	margin-bottom: 50px;
	max-width: 100%;
	background-color: transparent;
	color: #d7d7d7;
	font-weight: 800;
	border-collapse: collapse;
	width: 100%;
	margin-bottom: 20px
}

th {
	text-align: left
}


.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
	padding: 8px;
	line-height: 1.42857143;
	vertical-align: top;
}


.table>caption+thead>tr:first-child>th,
.table>colgroup+thead>tr:first-child>th,
.table>thead:first-child>tr:first-child>th,
.table>caption+thead>tr:first-child>td,
.table>colgroup+thead>tr:first-child>td,
.table>thead:first-child>tr:first-child>td {
	border-top: 0
}



table col[class*=col-] {
	position: static;
	float: none;
	display: table-column
}

table td[class*=col-],
table th[class*=col-] {
	position: static;
	float: none;
	display: table-cell
}


@media (max-width: 767px) {
	.table-responsive {
		width: 100%;
		margin-bottom: 15px;
		overflow-y: hidden;
		overflow-x: scroll;
		-ms-overflow-style: -ms-autohiding-scrollbar;
		border: 1px solid #ddd;
		-webkit-overflow-scrolling: touch
	}

	.table-responsive>.table {
		margin-bottom: 0
	}

	.table-responsive>.table>thead>tr>th,
	.table-responsive>.table>tbody>tr>th,
	.table-responsive>.table>tfoot>tr>th,
	.table-responsive>.table>thead>tr>td,
	.table-responsive>.table>tbody>tr>td,
	.table-responsive>.table>tfoot>tr>td {
		white-space: nowrap
	}

	.table-responsive>.table-bordered {
		border: 0
	}

	.table-responsive>.table-bordered>thead>tr>th:first-child,
	.table-responsive>.table-bordered>tbody>tr>th:first-child,
	.table-responsive>.table-bordered>tfoot>tr>th:first-child,
	.table-responsive>.table-bordered>thead>tr>td:first-child,
	.table-responsive>.table-bordered>tbody>tr>td:first-child,
	.table-responsive>.table-bordered>tfoot>tr>td:first-child {
		border-left: 0
	}

	.table-responsive>.table-bordered>thead>tr>th:last-child,
	.table-responsive>.table-bordered>tbody>tr>th:last-child,
	.table-responsive>.table-bordered>tfoot>tr>th:last-child,
	.table-responsive>.table-bordered>thead>tr>td:last-child,
	.table-responsive>.table-bordered>tbody>tr>td:last-child,
	.table-responsive>.table-bordered>tfoot>tr>td:last-child {
		border-right: 0
	}

	.table-responsive>.table-bordered>tbody>tr:last-child>th,
	.table-responsive>.table-bordered>tfoot>tr:last-child>th,
	.table-responsive>.table-bordered>tbody>tr:last-child>td,
	.table-responsive>.table-bordered>tfoot>tr:last-child>td {
		border-bottom: 0
	}
}


.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
	background-color: transparent
}

.table-striped>tbody>tr:nth-child(even)>td,
.table-striped>tbody>tr:nth-child(even)>th {
	background-color: transparent
}

.table>thead>tr>th {
	border-bottom: 2px solid #323232
}

.table>thead>tr>th,
.table>tbody>tr>th,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
	vertical-align: middle
}

.table>tbody>tr.active>td:first-child {
	box-shadow: inset 2px 0 #323232
}

html[dir="rtl"] .table>tbody>tr.active>td:first-child {
	box-shadow: inset -2px 0 #323232
}

.table>tbody>tr>td.active,
.table>tbody>tr.active>td {
	background-color: #e0e0e0;
	color: #323232
}

.table>tbody>tr.danger>td:first-child {
	box-shadow: inset 2px 0 #e74c3c
}

html[dir="rtl"] .table>tbody>tr.danger>td:first-child {
	box-shadow: inset -2px 0 #e74c3c
}

.table>tbody>tr>td.danger,
.table>tbody>tr.danger>td {
	background-color: #f2dede
}

.table>tbody>tr.info>td:first-child {
	box-shadow: inset 2px 0 #2980b9
}

html[dir="rtl"] .table>tbody>tr.info>td:first-child {
	box-shadow: inset -2px 0 #2980b9
}

.table>tbody>tr>td.info,
.table>tbody>tr.info>td {
	background-color: #d7edf9
}

.table>tbody>tr.success>td:first-child {
	box-shadow: inset 2px 0 #27ae60
}

html[dir="rtl"] .table>tbody>tr.success>td:first-child {
	box-shadow: inset -2px 0 #27ae60
}

.table>tbody>tr>td.success,
.table>tbody>tr.success>td {
	background-color: #dff2d5
}

.table>tbody>tr.warning>td:first-child {
	box-shadow: inset 2px 0 #f1c40f
}

html[dir="rtl"] .table>tbody>tr.warning>td:first-child {
	box-shadow: inset -2px 0 #f1c40f
}

.table>tbody>tr>td.warning,
.table>tbody>tr.warning>td {
	background-color: #fcf8e1
}

.table th.checkColumn {
	padding-left: 0
}


.loading-indicator {
	-webkit-animation: spin .8s infinite linear;
	-moz-animation: spin .8s infinite linear;
	-o-animation: spin .8s infinite linear;
	animation: spin .8s infinite linear
}

@-moz-keyframes spin {
	from {
		-moz-transform: rotate(0deg)
	}

	to {
		-moz-transform: rotate(360deg)
	}
}

@-webkit-keyframes spin {
	from {
		-webkit-transform: rotate(0deg)
	}

	to {
		-webkit-transform: rotate(360deg)
	}
}

@keyframes spin {
	from {
		transform: rotate(0deg)
	}

	to {
		transform: rotate(360deg)
	}
}
























.signature-pad {
	margin-top: 10px;
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	font-size: 10px;
	width: 100%;
	height: 100%;
	max-width: 700px;
	max-height: 460px;
	border: 1px solid #000000;
	background-color: #252525;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
	border-radius: 4px;
	padding: 16px;
	height: 350px;
	width: 550px;
	box-shadow: -6px 9px 20px 5px #000000a3;
}

.signature-pad::before,
.signature-pad::after {
	position: absolute;
	z-index: -1;
	content: "";
	width: 40%;
	height: 10px;
	bottom: 10px;
	background: transparent;
	box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}

.signature-pad::before {
	left: 20px;
	-webkit-transform: skew(-3deg) rotate(-3deg);
	transform: skew(-3deg) rotate(-3deg);
}

.signature-pad::after {
	right: 20px;
	-webkit-transform: skew(3deg) rotate(3deg);
	transform: skew(3deg) rotate(3deg);
}

.signature-pad--body {
	position: relative;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	border: 1px solid #000000;
}

.signature-pad--body canvas {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	border-radius: 4px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.59) inset;
	background: var(--color-light);
}

.signature-pad--footer {
	color: #C3C3C3;
	text-align: center;
	font-size: 1.2em;
	margin-top: 8px;
	margin-left: auto;
	margin-right: auto;
}

.signature-pad--actions {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin-top: 8px;
}

h3.form-control {
	background-color: unset;
	height: 46px;
}

h3.form-control:hover {
	cursor: no-drop;
}

/* input::-webkit-calendar-picker-indicator {
    filter: invert(1);
} */

input[type="time"] {
	position: relative;
}

input[type="time"]::-webkit-calendar-picker-indicator {
	color: transparent;
	background: none;
	z-index: 1;
}

input[type="time"]:before {
	color: white;
	background: none;
	display: block;
	font-family: "FontAwesome";
	content: "🕐";
	/* This is the calendar icon in FontAwesome */
	width: 15px;
	height: 20px;
	position: absolute;
	top: 10px;
	right: 10px;
	color: #999;
}


input.es-input {
	padding-right: 20px !important;
	background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAICAYAAADJEc7MAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAG2YAABzjgAA4DIAAIM2AAB5CAAAxgwAADT6AAAgbL5TJ5gAAABGSURBVHjaYvz//z8DOYCJgUzA0tnZidPK8vJyRpw24pLEpwnuVHRFhDQxMDAwMPz//x+OOzo6/iPz8WFGuocqAAAA//8DAD/sORHYg7kaAAAAAElFTkSuQmCC) right center no-repeat, #444;
}

input.es-input.open {
	-webkit-border-bottom-left-radius: 0;
	-moz-border-radius-bottomleft: 0;
	border-bottom-left-radius: 0;
	-webkit-border-bottom-right-radius: 0;
	-moz-border-radius-bottomright: 0;
	border-bottom-right-radius: 0;
}

.es-list {
	position: absolute;
	padding: 0;
	margin: 0;
	border: 1px solid #555;
	display: none;
	z-index: 1000;
	background: #444;
	max-height: 160px;
	overflow-y: auto;
	color: #fff;
}

.es-list li {
	display: block;
	padding: 5px 10px;
	margin: 0;
}

.es-list li.selected {
	background: rgb(85, 85, 85);
}

.es-list li[disabled] {
	opacity: .55;
}

.checkbox-wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	gap: 10px;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	color: #fff;
}

.checkbox-wrapper input[type="checkbox"] {
	visibility: hidden;
	display: none;
}

.checkbox-wrapper .toggle {
	position: relative;
	display: block;
	width: 40px;
	height: 20px;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	-webkit-transform: translate3d(0, 0, 0);
	        transform: translate3d(0, 0, 0);
}

.checkbox-wrapper .toggle:before {
	content: "";
	position: relative;
	top: 3px;
	left: 3px;
	width: 34px;
	height: 14px;
	display: block;
	background: #a01616;
	border-radius: 8px;
	-webkit-transition: background 0.2s ease;
	-o-transition: background 0.2s ease;
	transition: background 0.2s ease;
}

.checkbox-wrapper .toggle span {
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	display: block;
	background: #bc1a1a;
	border-radius: 10px;
	-webkit-box-shadow: 0 3px 8px rgba(160, 22, 22, 0.5);
	        box-shadow: 0 3px 8px rgba(160, 22, 22, 0.5);
	-webkit-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

.checkbox-wrapper .toggle span:before {
	content: "";
	position: absolute;
	display: block;
	margin: -18px;
	width: 56px;
	height: 56px;
	background: rgba(22, 160, 133, 0.2);
	border-radius: 50%;
	-webkit-transform: scale(0);
	    -ms-transform: scale(0);
	        transform: scale(0);
	opacity: 1;
	pointer-events: none;
}

.checkbox-wrapper input[type="checkbox"]:checked+.toggle:before {
	background: #158a73;
}

.checkbox-wrapper input[type="checkbox"]:checked+.toggle span {
	background: #1abc9c;
	-webkit-transform: translateX(20px);
	    -ms-transform: translateX(20px);
	        transform: translateX(20px);
	-webkit-transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
	-o-transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
	transition: all 0.2s cubic-bezier(0.8, 0.4, 0.3, 1.25), background 0.15s ease;
	-webkit-box-shadow: 0 3px 8px rgba(22, 160, 133, 0.2);
	        box-shadow: 0 3px 8px rgba(22, 160, 133, 0.2);
}

.checkbox-wrapper input[type="checkbox"]:checked+.toggle span:before {
	-webkit-transform: scale(1);
	    -ms-transform: scale(1);
	        transform: scale(1);
	opacity: 0;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}

.custom-row{
	padding: 15px 0px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 20px;
    row-gap: 10px;
	display: -ms-grid;
	display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 750px) {
	.custom-row-2-col { grid-template-columns: repeat(2, 1fr); }

	.custom-row-3-col {grid-template-columns: repeat(2, 1fr);}
}

@media (min-width: 1350px) {
	.custom-row-3-col {grid-template-columns: repeat(3, 1fr);}
}

.row-column{
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
}

.row-item{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
    -ms-flex-item-align: center;
	-ms-grid-row-align: center;
	align-self: center;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	flex-wrap: wrap;
}

.row-item label.form-control-label{
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	margin-right: 10px;
}

.row-item  input.form-control, .row-item  select.form-control{
	width: 100%;
	min-width: 0%;
	margin: 0;
}

.row-item>select{
	margin-bottom: 0!important;
}

.swal-wide{
	width: 60em!important;
}

.unit-error-list{
	display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2em;
}

.unit-error-list>span{
	background: rgba(0,0,0,0.25);
    width: fit-content;
    padding: 0.15em 1em;
    border-radius: 0.1em;
}