@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');

html {
	font-size:					16px;
	box-sizing:					border-box;
}

*, *:before, *:after {
  box-sizing:					inherit;
}

body {
	font-family:				-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}



body {
	font-size:					.875rem;
}

.feather {
	width:						16px;
	height:						16px;
	vertical-align:				text-bottom;
}

#main {
	margin-top:				61px;
}


.bg-page {
	background-color:			#fbfbfb;
}

.sticky-overlay {
	padding-left:				1rem;
	padding-right:				1rem;
	margin-left:				-1rem;
	margin-right:				-1rem;
	z-index:					1000;
	
	top:						61px;
}

@media ( min-width: 991.98px ) {
	main.with-sidebar {
		padding-left:				300px;
	}
}

/* Sidebar */
.sidebar {
	position:					fixed;
	top:						0;
	bottom:						0;
	left:						0;
	padding:					58px 0 0; /* Height of navbar */
	box-shadow:					0 2px  5px 0 rgb( 0 0 0 / 5% ),
								0 2px 10px 0 rgb( 0 0 0 / 5% );
	width:						300px;
	z-index:					600;
	overflow:					auto;
}

@media ( max-width: 991.98px ) {
	.sidebar {
		width:						100%;
	}
}

.sidebar .active {
	border-radius:				5px;
	box-shadow:					0 2px  5px 0 rgb( 0 0 0 / 16% ),
								0 2px 10px 0 rgb( 0 0 0 / 12% );
}

.sidebar-sticky {
	position:					relative;
	top:						0;
	height:						calc( 100vh - 48px );
	padding-top:				0.5rem;
	overflow-x:					hidden;
	overflow-y:					auto; /* Scrollable contents if viewport is shorter than content. */
}

.sidebar .list-group .list-group {
	font-size:					0.9em;
}

.sidebar .list-group .list-group .list-group {
	font-size:					0.9em;
}

.sidebar .list-group .list-group a {
	padding-left:				2rem;
}

.sidebar .list-group .list-group .list-group a {
	padding-left:				4rem;
}

/* Navigation folding icons */
a[data-mdb-toggle="collapse"]:after {
	position:					absolute;
	right:						0.5rem;
	color:						#889;
	font:						var(--fa-font-solid);

	position:					absolute;
	right:						0.5rem;
	top:						0.75rem;
}

a[data-mdb-toggle="collapse"].collapsed:after {
	content:					"\f054";

}

a[data-mdb-toggle="collapse"]:not(.collapsed):after {
	content:					"\f054";
	transform:					rotate( 90deg );
}

#sidebarMenu {
	z-index:					1021;
}

#sidebarMenu .submenu {
	background-color:			#f0f0f0 !important;
}

#sidebarMenu .submenu a {
	padding-left:				3.5rem;
}

#sidebarMenu .submenu a:hover {
	background-color:			#fefefe !important;
}

#sidebarMenu .expanded {
	font-weight:				bold;
}

#sidebarMenu .expanded .icon {
	color: var(--mdb-primary);
}


.form-outline,
.form-check {
}

.vstack .form-outline,
.vstack .form-check {
	margin-bottom:				0.5rem;
}

.form-helptext,
.form-errortext {
}

.form-helptext:before,
.form-errortext:before {
	font:						var(--fa-font-solid);
	margin-right:				0.2rem;
	padding-left:				0.2rem;
}

.form-helptext:before {
	content:					"\f30f";
	color:						#aaa;
}

.form-errortext:before {
	content:					"\f06a";
}

.form-errortext.text-warning:before {
	content:					"\f071";
}

input.postcode:not(:placeholder-shown) {
	text-transform:				uppercase;
}

/*
h5 {
	margin-top:					2rem;
}
*/

.form-outline.color {
	width:						auto;
	padding:					0;
	padding:					0.32rem;
}

.form-outline.color .form-control {
	margin:						0;
	padding:					0;
}

input[type=color] {
	width:						100%;
	margin:						0;
	padding:					0;
}

.form-outline.inactive-field {
	opacity:					0.3;
	pointer-events:				none;
}

.input-group-text {
	background-color:			var(--mdb-gray-200);
}

.form-control[type=range] {
	-webkit-appearance:			auto;
	-moz-appearance:			auto;
	appearance:					auto;
	
	margin-left:				1rem !important;
	margin-right:				1rem !important;
}



.radio-group {
	background:					transparent;
	position:					relative;
	font-size:					.875rem;
	
	padding-top:				1.5rem;
	
	margin-bottom:				2rem;
}

.radio-group p.form-label {
	transform:					translateY(-1.4rem) translateY(-0.8rem) scale(.80);
	left:						0;
	position:					absolute;
	background-color:			#fbfbfb;
	padding-left:				0.4rem;
	padding-right:				0.4rem;
}

.radio-group .form-check {
	margin-bottom:				0.2rem;
}



.editorHeader {
	border-bottom:				2px solid #red;
	margin-bottom:				1rem;
	padding-bottom:				0.25rem;
	position:					relative;
}

.editorHeader nav {
	position:					absolute;
	top:						0.5rem;
	right:						0;
}




.ck.ck-toolbar {
	background:					transparent !important;
	border-top:					none !important;
}

[disabled=disabled] {
	opacity:					0.2 !important;
}




.invalid-select .form-notch .form-notch-leading,
.invalid-select .form-notch .form-notch-trailing {
	border-color:			#dc4c64 !important;
}

.invalid-select .form-notch .form-notch-middle {
	border-bottom-color:	#dc4c64 !important;
}

.invalid-select label {
	color:					#dc4c64 !important;
}

.form-outline.htmleditor-wrapper .form-label {
	transform:				translateY(-1rem) translateY(.1rem) scale(.8) !important;
	background-color:		#fbfbfb;
	z-index:				2;
	padding-left:			4px;
	padding-right:			4px;
}

.card .form-outline.htmleditor-wrapper .form-label {
	background-color:		#ffffff;
}

.no-overlay-label .form-label {
	transform:				translateY(-1rem) translateY(.1rem) scale(.8) !important;
	background-color:		#fbfbfb;
	z-index:				2;
	padding-left:			4px;
	padding-right:			4px;
}

.card .no-overlay-label .form-label {
	background-color:		#ffffff;
}


.bg-off-white {
	background-color:		#fdfdfd;
}

.chip {
	display:				inline-block;
	text-wrap:				nowrap;
}

.chip img {
	max-height:				100%;
}

.card .table tbody tr:last-child th,
.card .table tbody tr:last-child td {
	border-bottom-width:	0;
}


.avatar {
	width:					1.75rem;
	height:					1.75rem;
	line-height:			1.6rem;
	text-align:				center;
	font-size:				0.65rem;
	display:				inline-block;
	/* float:				left; */
	color:			rgba( 000, 000, 000, 0.5 );
	font-weight:			bold;
}

.profile-pic {
	text-align:				center;
	color:			rgba( 000, 000, 000, 0.5 );
	font-weight:			bold;
}

.chip-md {
	line-height:			2.4rem;
}

.chip-md .avatar {
	height:					2.4rem;
	width:					2.4rem;
	line-height:			2.1rem;
	font-size:				0.9rem;
}

.chip-lg {
	line-height:			3rem;
	font-size:				1.1em;
}

.chip-lg .avatar {
	height:					3rem;
	width:					3rem;
	line-height:			2.7rem;
	font-size:				1.1rem;
}

.no-pill .avatar {
	width:					1.8em;
	height:					1.8em;
}



.avatar.yellow,
.profile-pic.yellow,
.user-background.yellow {
	background-color:		#fbf8cc;
	color:			#ADA65A;
}

.avatar.orange,
.profile-pic.orange,
.user-background.orange {
	background-color:		#fde4cf;
	color:			#C99F7C;
}

.avatar.red,
.profile-pic.red,
.user-background.red {
	background-color:		#ffcfd2;
	color:			#CC7C81;
}

.avatar.pink,
.profile-pic.pink,
.user-background.pink {
	background-color:		#f1c0e8;
	color:					#BF72B1;
}

.avatar.purple,
.profile-pic.purple,
.user-background.purple {
	background-color:		#cfbaf0;
	color:			#8C6DBC;
}

.avatar.navy,
.profile-pic.navy,
.user-background.navy {
	background-color:		#a3c4f3;
	color:			#5983BF;
}

.avatar.blue,
.profile-pic.blue,
.user-background.blue {
	background-color:		#90dbf4;
	color:			#4BA4C1;
}

.avatar.teal,
.profile-pic.teal,
.user-background.teal {
	background-color:		#8eecf5;
	color:			#49B7C1;
}

.avatar.turquoise,
.profile-pic.turquoise,
.user-background.turquoise {
	background-color:		#98f5e1;
	color:			#51C1A9;
}

.avatar.green,
.profile-pic.green,
.user-background.green {
	background-color:		#b9fbc0;
	color:			#6BC675;
}





.datatable {
    --mdb-datatable-color:		#212529;
    --mdb-datatable-border-color:	#e0e0e0;
    --mdb-datatable-striped-color: #212529;
    --mdb-datatable-accent-bg: rgba(0,0,0,0.02);
    --mdb-datatable-hover-color: #131313;
    --mdb-datatable-hover-bg: #f3f3f3;
    --mdb-datatable-muted-color: grey;
    --mdb-datatable-active-color: rgba(19,19,19,0.05);
    --mdb-datatable-font-size: 0.9rem;
    --mdb-datatable-background-color: #FBFBFB;
    --mdb-datatable-table-th-td-max-width: 250px;
    --mdb-datatable-table-th-td-padding-y: 1rem;
    --mdb-datatable-table-th-td-padding-x: 1rem; /* 1.4rem; */
    --mdb-datatable-thead-tr-border-width: 1px;
    --mdb-datatable-thead-th-font-weight: 500;
    --mdb-datatable-thead-fixed-cell-background-color: #FBFBFB;
    --mdb-datatable-tbody-font-weight: 400;
    --mdb-datatable-tbody-tr-transition: all 0.3s ease-in;
    --mdb-datatable-tbody-tr-last-child-height: 71px;
    --mdb-datatable-tbody-loader-height: 2px;
    --mdb-datatable-tbody-progress-animation: datatableProgress 3s ease-in-out;
    --mdb-datatable-tbody-progress-width: 45%;
    --mdb-datatable-tbody-progress-opacity: 0.5;
    --mdb-datatable-tbody-progress-border-radius: 1px;
    --mdb-datatable-pagination-padding-y: 0.5rem;
    --mdb-datatable-pagination-border-width: 1px;
    --mdb-datatable-pagination-nav-font-size: 0.9rem;
    --mdb-datatable-pagination-buttons-margin-left: 2rem;
    --mdb-datatable-pagination-button-padding-x: 1rem;
    --mdb-datatable-sort-icon-transition-duration: 0.3s;
    --mdb-datatable-sort-icon-left: 0.4rem;
    --mdb-datatable-sort-icon-top: calc(50% - 0.5rem);
    --mdb-datatable-select-wrapper-font-size: 0.9rem;
    --mdb-datatable-select-wrapper-font-weight: 400;
    --mdb-datatable-sm-th-td-padding-y: 0.5rem;
    --mdb-datatable-sm-th-td-padding-x: 1.25rem;
    --mdb-datatable-sm-tbody-tr-last-child-height: 55px;
    --mdb-datatable-sm-pagination-padding: 0.2rem;
    --mdb-datatable-bordered-th-td-border-width: 1px;
    --mdb-datatable-hover-tbody-tr-transition: background-color 0.2s ease-in;
    --mdb-datatable-dark-select-arrow-input-color: #fff;
    --mdb-datatable-dark-border-color: #fbfbfb;
    --mdb-datatable-dark-check-border-color: #fff;
    --mdb-datatable-dark-datatable-progress-opacity: 0.8;
    font-size: var(--mdb-datatable-font-size);
    color: var(--mdb-datatable-color);
    background-color: var(--mdb-datatable-background-color);
}

.shallowResults .datatable-inner {
	overflow:			initial !important;
}

attr {
	cursor:				help;
}

.chip {
	--mdb-chip-img-margin-left:		0;
}

.chip.tiny {
	font-size:			inherit;
	line-height:		inherit;
	height:				inherit;
	
	margin:				0;
}

.chip.tiny.border-1 {
	border-width:		1px;
}

.chip.tiny a {
	color:				inherit;
	padding-left:		1.7rem;
}

.chip.tiny .avatar {
	margin-right:		0.25em;
	
	font-size:			0.7em;
	width:				1.25rem;
	height:				1.25rem;
	
	position:			absolute;
	left:				1px;
	top:				1px;
	line-height:		1.2rem;
}

.text-inherit {
	color:				inherit;
}

.table>:not(caption) > * > .avatar {
	padding:			0;
}
.table>:not(caption) > * > .chip {
	padding:			0;
	padding-right:		1rem;
}

.rounded-pill.inset {
	box-shadow:			inset -1px 1px 3px 0 rgba( 000, 000, 000, 0.2 ),
						1px -1px 1px 0 rgba( 000, 000, 000, 0.05 );
}

.field-outline {
	position:			relative;
}

.field-outline .form-control {
	background-color:	transparent;
}

.field-outline.read-only-field .form-control .form-label {
	position: absolute;
	top: 0;
	max-width: 90%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	left: .75rem;
	padding-top: .37rem;
	padding-left: 0.2rem;
	padding-right: 0.2rem;
	pointer-events: none;
	transform-origin: 0 0;
	transition: all .2s ease-out;
	color: rgba(0,0,0,.6);
	margin-bottom: 0;
	transform: translateY(-1.1rem) translateY(.1rem) scale(.8);
	background-color: #fbfbfb;
}




.bg-primary .accordion-button:after {
	color: red;
}


.signaturePreview {
	
}

.signaturePreview span.display-1 {
	display: inline-block;
	transform: rotate(-2deg);
	font-family: "Dancing Script", cursive;
	opacity: 0.9;
}


.approvalPreview span.display-1 {
	font-family: "Special Elite", system-ui;
	font-weight: 400;
	font-style: normal;
}

.approvalPreview .approved {
	transform: rotate(-2deg);
	color: #007B6F;
	text-transform: uppercase;
}

.approvalPreview .rejected {
	transform: rotate(1deg);
	color: var(--mdb-danger);
	text-transform: uppercase;
}

.approvalPreview .pending {
	color: #eee;
	text-transform: uppercase;
}





body.dark-mode {
	background-color: #333;
	--mdb-border-color: #4e4e4e;
}

body.dark-mode .list-group-light {
	--mdb-list-group-light-item-border: 2px solid #4e4e4e; 
}

body.dark-mode .editorHeader {
	border-bottom-color: #767676;
}

body.dark-mode .accordion-item {
	--mdb-accordion-flush-border-bottom: 2px solid #4e4e4e;
}

body.dark-mode .chip {

    --mdb-chip-font-color: #cfcfcf;
    --mdb-body-color-rgb: #fff;
	--mdb-chip-bg: #444;

    --mdb-chip-contenteditable-border-color: #b2b3b4;
    --mdb-chip-icon-hover-color: #8b8b8b;
}

body.dark-mode .chip.btn-outline-secondary,
body.dark-mode .chip.btn-outline-secondary:hover {
    color: #e3ebf7;
    border-color: #444;
}

body.dark-mode .table {
	--mdb-table-hover-bg: #3a3a3a;
	--mdb-table-hover-color: #fff;
}

body.dark-mode .accordion-flush .accordion-item {
}

.dark-mode .bg-white {
	background-color: #333 !important;
}

.dark-mode .bg-light {
	background-color: #333 !important;
}



.tab-indicator {
	margin-left:			-1rem;
	margin-top:				1rem;
}





.date-of-birth .datepicker-toggle-button {
	right: 2.2rem;
}




.select-option input[type=checkbox] + .select-option-secondary-text {
	margin-left: 1.8rem;
}


.nav-item.alerts .list-group {
	width:						max-content;
}

.notification-list a:hover {
	background-color:			var( --mdb-gray-50 ) !important;
}





/* Report Generation */
@media screen and ( min-width: 768px ) {
	.field-select {
		columns:				2;
		column-gap:				0;
		column-fill:			balance;
	}
}

@media screen and ( min-width: 1200px ) {
	.field-select {
		columns:				3;
	}
}


.field-select .form-check {
	margin:					0;
}

.field-select .form-switch .form-check-input {
	margin-top:				0.75rem;
}

.field-select label {
	display:				block;
	cursor:					pointer;
	margin:					0;
	padding-top:			0.5rem;
	padding-bottom:			0.5rem;
	break-inside:			avoid;
}





/* Report Generator */


.joinedTable_group {
	position: relative;
}

.joinedTable_group:before {
	content: '';
	display: block;
	text-indent: 0;
	width: 2px;
	height: calc( 100% + 1.5rem );
	position: absolute; 
	background-color: #d6d6d6;

	left: -1.5rem;
	top: -1.5rem;
}

.joinedTable_group:after {
	content: '';
	display: block;
	text-indent: 0;
	width: 1.5rem;
	height: 2px;
	position: absolute; 
	background-color: #d6d6d6;

	left: -1.5rem;
	top: 1rem;
}

.joinedTable_group:last-child:before {
	height: 2.6rem;
}





.border-lightish {
	border-color: rgba( 240, 240, 240, 1 ) !important;
}





.response-abandoned {
	background-color:		#CFD8DC;
}

.response-open {
	background-color:		var(--mdb-warning);
}

.response-editors {
	background-color:		#F57C00;
}

.response-for-signing {
	background-color:		#009688;
}

.response-signed {
	background-color:		#00695C;
}

.response-for-approval {
	background-color:		#7E57C2;
}

.response-complete {
	background-color:		var(--mdb-success);
}

.response-deleted {
	background-color:		var(--mdb-danger);
}

.response-rejected {
	background-color:		#7B1A98;
}

.response-unknown {
	background-color:		#CFD8DC;
}


.response-text-abandoned {
	color:		#CFD8DC;
}

.response-text-open {
	color:		var(--mdb-warning);
}

.response-text-editors {
	color:		#F57C00;
}

.response-text-for-signing {
	color:		#009688;
}

.response-text-signed {
	color:		#00695C;
}

.response-text-for-approval {
	color:		#7E57C2;
}

.response-text-complete {
	color:		var(--mdb-success);
}

.response-text-deleted {
	color:		var(--mdb-danger);
}

.response-text-unknown {
	color:		#CFD8DC;
}




.statusCount .split {
	width: 5px;
}


.bg-open,
.statusCount.open .badge {
	background-color:		var(--mdb-warning);
	color:					var(--mdb-light);
}

.bg-open:hover {
	background-color:		#CF8E0D;
	color:					var(--mdb-light);
}

.bg-signatures,
.statusCount.signatures-signaturesRequested .badge {
	background-color:		#009688;
	color:					var(--mdb-light);
}

.statusCount.signatures-signaturesRequested .split {
	background-color:		#009688;
	background-image:		-webkit-linear-gradient(-20deg, #009688 50%, #007B6F 50%);
}

.bg-signaturesRequested,
.bg-signatures:hover,
.statusCount.signatures-signaturesRequested .badge:nth-child(3) {
	background-color:		#007B6F;
	color:					var(--mdb-light);
}



.bg-edits,
.statusCount.edits-editsRequested .badge {
	background-color:		#0689AB;
	color:					var(--mdb-light);
}

.statusCount.edits-editsRequested .split {
	background-color:		#0689AB;
	background-image:		-webkit-linear-gradient(-20deg, #0689AB 50%, #007796 50%);
}

.bg-editsRequested,
.bg-edits:hover,
.statusCount.edits-editsRequested .badge:nth-child(3) {
	background-color:		#007796;
	color:					var(--mdb-light);
}



.bg-approvals,
.statusCount.approvals-approvalsRequested .badge {
	background-color:		#A856C1;
	color:					var(--mdb-light);
}

.bg-approvals.disabled {
	background-color:		#CDA6D9;
}

.statusCount.approvals-approvalsRequested .split {
	background-color:		#A856C1;
	background-image:		-webkit-linear-gradient(-20deg, #A856C1 50%, #7B1A98 50%);
}

.bg-approvalsRequested,
.bg-approvals:hover,
.statusCount.approvals-approvalsRequested .badge:nth-child(3) {
	background-color:		#7B1A98;
	color:					var(--mdb-light);
}