/**************************  Document Structure  **************************************/
/**
	HTML Overrides                     - Reset HTML styling to a default
		Improvements
	HTML Style Features                - Simple CSS tools & classes
		Border Collapse
		Simple Behaviours
		Data Types
	Site Theme
		HTML Tag Styles                - Style HTML tags to create a site theme
		Shared Usability Styles
		Function Markers
		Banner
		Header
		Navigation Menu
		Footer
		Page Content
		Global Elements
		Common Features
	Common Elements                    - Common features used on any page - often have particular structures or integrate with JS
		vertical-carry and horizontal-carry
		collapsable-list
		Global Elements
		Functional Styles
		tool-tip
		full-popup
		Rich Text Editor
	Specific Elements                  - Style features used on a limited range of pages
		View table
		Object table
		Sub-View table
		Alternating table
		Sub-Tabs
		Comments
		Site Notes
	Specific Page Styles               - General style for particular pages 
		Login
		Member QRP
		Contact Link Adder
		Contact Merger
		Hardware Requests
		Product Data
		Promo Data
		Loader
*/
/**************************  HTML Overrides  **************************************/
/**
	A blanket override of HTML styling to create a convenient "default".
*/

body ,
form ,
input ,
ul ,
ol {
	margin: 0px;
}

body {
	display: flex;
	flex-flow: column;
	min-width: -webkit-fit-content;
	min-height: -webkit-fit-content;
	height: 100%;
	background-color: white;
	background-repeat:no-repeat;
	background-size: 100% 120%;
	font-family: sans-serif;
}

textarea {
	font-family: sans-serif;
}

p {
    margin-block-start: 1em;
    margin-block-end: 1em;
	-webkit-margin-start: 0.25em;
	-webkit-margin-end: 0.25em;
}

table {
	border-spacing: 0px;
	color: inherit;
}

thead ,
tbody ,
tfoot ,
tr ,
td ,
th {
	color: inherit;
	background-color: inherit;
}

td ,
th ,
input ,
select {
	text-decoration: inherit;
}

td {
	min-width: min-content;
}

tr {
	height: 1.5em;
}

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

button {
	white-space: pre;
}

th > dl:only-child ,
td > dl:only-child {
	margin: 0px;
}

option ,
optgroup {
	background-color: white;
	color: initial;
}


/*************  HTML Overrides: Improvements  *******************/
/**
	Advanced or interactive overrides of HTML for very specific purposes.
*/

/** Global Input Placeholder Override **/

:root {
	--placeholder-color: grey;
}

input::placeholder {
	color: var(--placeholder-color);
}

select.onplaceholder {
	color: var(--placeholder-color);
}

/** Fix issues with monospace fonts **/

:root {
	--monospace-font: monospace, Courier;
}

input[type="date"] ,
input[type="datetime"] {
	font-family: var(--monospace-font);
}

/** Date Input Placeholder Override **/

input[type="date"] {
	max-width: 18ch;
}

input[type="date"][placeholder]:in-range:not(:hover):not(:focus) {
	color: transparent;
}

input[type="date"][placeholder]:in-range:not(:hover):not(:focus)::before {
	content: attr(placeholder);
	position: absolute;
	font-family: Arial;
	color: var(--placeholder-color);
}

/**  Ordered-List Override  **/

:not(ol) > ol {
	list-style-type: decimal;
}

:not(ol) > ol > ol {
	list-style-type: lower-alpha;
}

:not(ol) > ol > ol > ol {
	list-style-type: lower-roman;
}

:not(ol) > ol > ol > ol > ol {
	list-style-type: lower-greek;
}

:not(ol) > ol > ol > ol > ol > ol {
	list-style-type: decimal;
}


/**************************  HTML Style Features  **************************************/
/*
	General shortcuts to specific sets of styles to make common HTML features easier and transportable.
*/


/*************  HTML Style Features: Border Collapse  *******************/
/**
	Alternative:   table.border-collapse { border-collapse: collapse; }
	
	This method of dealing with borders is much better than using border-collapse.
	It renders faster and looks nicer, but creates a number of limitations.
*/

table.border-collapse > * > * > td:not(:last-child):not(.need-borders):not(.horizontal-carry) ,
table.border-collapse > * > * > th:not(:last-child):not(.need-borders):not(.horizontal-carry) {
	border-right: 0 !important;
}

table.border-collapse > * > * > .horizontal-carry + td ,
table.border-collapse > * > * > .horizontal-carry + th {
	border-left: 0 !important;
}

table.border-collapse > * > * > .need-borders + * ,
table.border-collapse > * > * > .need-borders + * {
	border-left: 0 !important;
}

table.border-collapse > :first-child > :not(:first-child) > td ,
table.border-collapse > :first-child > :not(:first-child) > th ,
table.border-collapse > :not(:first-child):not(.need-borders) > :not(.need-borders) > td ,
table.border-collapse > :not(:first-child):not(.need-borders) > :not(.need-borders) > th ,
table.border-collapse > .need-borders > :not(:first-child) > td ,
table.border-collapse > .need-borders > :not(:first-child) > th {
	border-top: 0 !important;
}


/*************  HTML Style Features: Simple Behaviours  *******************/
/**
	The styles here actually fulfill a specific function and purpose.
	The function can be activated simply by using these classes.
*/

/*  a.anchor  */
.anchor {
    display: block;
    position: relative;
    top: -2em;
    visibility: hidden;
}

.bold {
	font-weight: bold;
}

table.layout > * > tr > td ,
td.layout {
	padding: 0;
}

.left-align {
	text-align: left;
}
.right-align {
	text-align: right;
}
.float-right {
	float: right;
}

.center {
	text-align: center;
}
table.center {
	margin-left: auto;
	margin-right: auto;
}

/*  table.full-width  */
.full-width {
	width: 100%;
}

/*  td.one-line  */
.one-line {
	white-space: nowrap;
}

table.simple-border > * > * > * {
	border: 1px solid black;
}

/**  masked  **/

.masked {
	--placeholder-color: #b3b3b3;
}

.masked:not(:focus):not(:hover) ,
.masked:disabled {
	background: none;
	border-color: transparent;
}

a.masked:not(:focus):not(:hover) {
	color: inherit;
	text-decoration: none;	
}
u.masked:not(:focus):not(:hover) {
	text-decoration: none;
}

/**  As-Grid Definition List  **/

dl.as-grid {
	display: grid;
	width: max-content;
}

dl.as-grid > dt {
	grid-column: 1;
}

dl.as-grid > dd {
	grid-column: 2;
	margin-inline-start: 1em;
}

.no-user-select {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

/* div.flex-layout */
.flex-layout {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	align-items: center;
	align-content: stretch;
}
.flex-layout > * {
	flex-grow: 1;
}

.export-only {
	display: none;
}
@media print {
	.no-print {
		display: none;
	}
}

/* th.vertical-heading */
.vertical-heading {
	--mso-rotate:90;
}
/* span.vertical-heading-inner */
.vertical-heading-inner {
	writing-mode: vertical-rl;
	display: block;
	transform: rotate(180deg);
	margin-left: auto;
	margin-right: auto;
}
.vertical-heading.left-align {
	vertical-align: bottom;
}


/*************  HTML Style Features: Data Types  *******************/
/**
	Used for table data to style cells based on the type of data.
	Also integrates with the new_functions$.js function `save_to_xl` to inform how the data is saved.
*/

th ,
td {
	/* Override the default cell number format to imply that, unless otherwise specified, all cell data is a string literal */
	--mso-number-format: "@";
}

.money {
	--mso-number-format: "\0022$\0022\#\,\#\#0\.00";
}
.money.accounting {
	--mso-number-format: "_\-$\* \#\,\#\#0\.00_\-\;\-$\* \#\,\#\#0\.00_\-\;_\-$\* \"\-\"\?\?_\-\;_\-\@_\-";
}

.money:not(.center):not(:empty) {
	text-align: right;
	padding-left: 3ch;
	padding-right: 1ch;
	letter-spacing: 0.02ch;
}
.money:not(.center):not(:empty)::after {
	content: "$";
	position: relative;
	right: calc(100% + 0.75ch);
	margin-left: -1ch;
}

.money.center:not(:empty) {
	text-align: center;
}
.money.center:not(:empty)::before {
	content: "$";
}

.simple-border > * > * > .money {
	padding-top: 0.5ch;
	padding-bottom: 0.5ch;
}

.simple-border > * > * > .money:not(.center)::after {
	color: #A2A2A2;
	right: calc(100% + 1ch);
}

.number {
	text-align: right;
	--mso-number-format: General;
}
.number.left-align {
	text-align: left;
}
.number.center {
	text-align: center;
}

.number0 {
	text-align: right;
	--mso-number-format: 0;
}
.number0.left-align {
	text-align: left;
}
.number0.center {
	text-align: center;
}

.csnumber0 {
	text-align: right;
	--mso-number-format: "\#\,\#\#0";
}

.csnumber2 {
	text-align: right;
	--mso-number-format: "\#\,\#\#0\.00";
}

.percent {
	text-align: center;
	--mso-number-format: Percent;
}
.percent.left-align {
	text-align: left;
}
.percent.right-align {
	text-align: right;
}

.percent:not(:empty)::after {
	content: "%";
}

.simple-border > * > * > .percent {
	padding-top: 0.5ch;
	padding-bottom: 0.5ch;
}

.simple-border > * > * > .percent:not(.center)::after {
	color: #A2A2A2;
}

.data-date {
	text-align: right;
	--mso-number-format: "d mmm yyyy";
}


/**************************  Site Theme  **************************************/


/*************  Site Theme: HTML Tag Styles  *******************/
/**
	Changes to styling that create a base theme for the entire site.
*/

/**  Common HTML Tags  **/

h1 {
	font-size: 1.5em;
	text-align: center;
	max-width: 100vw;
	margin: 0.75em 0.5em 0.5em 0.5em;
	color: #b32400;
	clear: both;
}

h2 {
	font-size: 1.4em;
	padding: 0.25em;
	margin: 0.7em 0.6em 0.4em 0.55em;
	background-color: #dfdfdf;
}

h3 {
	font-size: 1.25em;
	margin: 0.8em 0.1em 0.15em 0.1em;
	padding: 0 0 0 0.2em;
}

h4 {
	margin: 8px 2px 6px 2px;
}

a ,
a:visited {
	color: rgb(40, 10, 180);
}

textarea {
	width: 100%;
	resize: vertical;
	padding-bottom: 2em;
	overflow-y: hidden;
}


/*************  Site Theme: Shared Usability Styles  *******************/
/**
	Common changes to various elements to both make them consistent with each other and improve readability.
*/

/**  Font Sizes  **/

/* These should be only very slightly smaller than their containing elements */
.tool-tip {
	font-size: 0.95em;
}
/* These should have a marginally smaller font-size than their containing elements */
li ,
input ,
textarea ,
select ,
button ,
table ,
ul > dl ,
.explanation {
	font-size: 0.9em;
}
/* (except for these) */
button.masked ,
table.layout ,
table.view-options ,
table.object {
	font-size: 1em;
}

/* These should have a much smaller font-size than their containing elements */
.change-link {
	font-size: 0.6em;
}

/* These should reset the font-size */
.full-popup-content {
	font-size: 1rem;
}


/**  Inputs  **/

/* These should have a common style to identify them as inputs */
input ,
textarea ,
select ,
button {
	border-color: #a9a9a9;
	border-style: solid;
	border-width: 1px;
}
/* (except for these) */
input[type=file] {
	border: initial;
}

/* These should have a common style to identify them as inputs that cannot be modified */
input:disabled ,
textarea:disabled ,
input[readonly] ,
textarea[readonly] {
	background: none;
	border-style: none;
	color: black;
	padding: 2px;
	cursor: text;
}

input[type="checkbox"][readonly] {
	pointer-events: none;
	background-color: rgb(206, 206, 206);
	border: 1px solid black;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 1em;
    width: 1em;
}
input[type="checkbox"][readonly]:checked::before {
	content: " ";
	border-radius: 50%;
	border: 1px solid black;
	background-color: black;
	width: 0.4em;
	height: 0.4em;
	display: block;
	position: relative;
}

/* Remove the spinner buttons from these inputs to prevent unintented user interactions */
input[type="date"].change-submit::-webkit-inner-spin-button {
	display: none;
}

/* Prevent clearing required dates */
input[type="date"].required::-webkit-clear-button {
	display: none;
}


/**  Spacing  **/

/* These are regular and repeating, so should have extra space around their content to make them readable */
th ,
td {
	padding: 0.2em 0.3em;
}

/* These should have extra space around the contained text */
input[type=text] ,
input[type=date] ,
select {
	height: 1.6em;
}

/* These should be as wide as their containing table cells */
tr > * > select ,
tr > * > button ,
tr > * > input {
	min-width: 4ch;
	width: 100%;
}
/* (except for these) */
tr > * > input[type=checkbox] ,
tr > * > input[type=date] ,
tr > * > input[type=datetime] ,
tr > * > input[type=radio] {
	min-width: initial;
	width: auto;
}


/**  Lists  **/

ul ,
ol {
	padding-left: 2em;
}

ol > ol ,
ol > ul ,
ul > ol ,
ul > ul {
	border-left: #ababab 1px dotted;
	margin-left: -0.8em;
	padding-left: 2.5em;
	
	padding-bottom: 0.05em;
	margin-top: 0.1em;
	margin-bottom: 0.3em;
}

ul > dl.as-grid {
	margin: 0;
	
	border-left: #ababab 1px dotted;
	margin-left: -0.8em;
	padding-left: 2.5em;
	
	padding-bottom: 0.05em;
	margin-top: 0.1em;
	margin-bottom: 0.3em;
}

li {
	margin-top: 0.15em;
	margin-bottom: 0.15em;
}


/*************  Site Theme: Function Markers  *******************/
/**
	Common ways of communicating a meaning to the user, often mirroring existing or known standards.
	These often have function and usage defined elsewhere, but what's important here is how that is communicated.
*/

/*  input.required, select.required  */
.required.ondefault:not(.subobject) {
	color: #ff0000;
	background-color: #4a2c2c;
}
.required.ondefault.subobject {
	color: #600000;
	background-color: #fff2f2;
}
label.ondefault {
	outline: 1px solid rgb(255, 161, 149);
	color: rgb(0, 0, 0);
	background-color: #fdf1e4;
}

select.ondisabled {
	outline: 2px solid red;
}

/*  select.tiered-list2.defaulting  */
.defaulting {
	outline: 2px solid green;
}

.inherited-check::after {
	content: " X ";
}

.draggable {
	cursor: move;
	user-select: none;
}

.changed-value {
	outline: 1px solid black;
}

.month-end {
	background-color: #ffe3d9;
}

.month-start {
	background-color: #ddffef;
}


/**  half-check  **/

.half-check:checked {
	outline: 2px solid #752e2e;
}
.half-check:checked::before {
	content: " ";
	border-radius: 50%;
	border: 1px solid #b90b0b;
	background-color: #b90b0b;
	width: 0.5em;
	height: 0.5em;
	display: block;
	position: relative;
	top: 0.15em;
	left: 0.15em;
}
.half-check:not(:checked)::before {
	content: " ";
	border-radius: 50%;
	border: 1px solid #3a3a3a;
	background-color: #3a3a3a;
	width: 0.5em;
	height: 0.5em;
	display: block;
	position: relative;
	top: 0.15em;
	left: 0.15em;
}


/**  cell-data  **/

.cell-data.copy-from {
	outline: 2px solid #068306;
	background-color: #acdfac;
}

.cell-data.copy-to {
	outline: 2px solid #0e0eb5;
	background-color: #d7d7fd;
}

/* Multiple file upload input */

.multi-file-hidden {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.multiple-file-template .multiple-file-delete {
	display: none;
}

.multiple-file-line .file-button {
	display: none;
}

/* button.file-button */
.file-button {
	pointer-events: none;
}


/*************  Site Theme: Banner  *******************/

#banner {
	flex: 0 1 auto;
	z-index: 200;
	background-image: url('images/banner.jpg');
	width: 100%;
}

/*  img#banner-image  */
#banner-image {
	height: 40px;
	margin: 12px;
	float: left;
}

#banner-title {
	float: left;
	margin: 0.6em 1.5em;
	font-size: 1.5em;
	color: #423825;
}


/*************  Site Theme: Header  *******************/

#header {
	flex: 0 1 auto;
	z-index: 100;
}

#user-information {
	font-size: 0.9em;
	text-align: right;
	margin-right: 12px;
}

#notifications {
	margin-top: 0.5em;
	font-size: 0.8em;
	text-align: right;
	margin-right: 12px;
}


/************* 	Site Theme: Navigation Menu  *******************/

#navmenu {
	margin: 10px 6px 6px 12px;
}

#navmenu > a {
	border: 1px solid #b32400;
	border-radius: 4px;
	height: 1em;
	margin: 1px;
	padding: 5px;
	background-color: #ff9900;
	text-decoration: none;
	text-align: center;
	display: inline-block;
	color: #b32400;
	font-weight: bold;
}

#navmenu > a.open {
	text-decoration: underline;
	background-color: #f6ce88;
	color: #991f00;
}

#navmenu > a:hover {
	background-color: #ff3300;
	color: white;
}

#breadcrumbs {
	display: flex;
	font-size: 0.7em;
	list-style-type: none;
	float: left;
	margin-left: 10px;
}

#breadcrumbs > a {
	border: 1px solid #b32400;
	border-radius: 0.3em;
	margin: 0.15em;
	padding: 0.5em;
	background-color: #732C04;
	text-decoration: none;
	text-align: center;
	color: white;
	font-weight: bold;
	height: max-content;
}

#breadcrumbs > a:last-child {
	text-decoration: underline;
}

#breadcrumbs > a:hover {
	background-color: #DA8069;
}


/*************  Site Theme: Footer  *******************/

/*
#footer {
	flex: 0 1 40px;
	text-align:center;
}
*/


/*************  Site Theme: Page Content  *******************/

#page {
	display: flex;
	flex-flow: column;
	margin: 0 0;
	flex: 1 1 auto;
	background-color: #ffb61b;
}

#page-content {
	flex: 1 1 auto;
	background-color: white;
	padding: 8px 0 0 0;
}

#page-content.page-object {
	padding: 7px;
}

#page-content.locked {
	background-image: url('images/locked.bmp');
	border: solid #e42f2f 4px;
	margin: 8px;
}

#page-content.inactive {
	background-color: #efd9d9;
}

/*************  Site Theme: Global Elements  *******************/

.lock-message {
	background-color: #fff8df;
	margin: 20px;
	text-align: center;
	padding: 10px;
}

#page-content.readonly .lock-message {
	border: solid 2px #de7134;
}

.change-link {
	float: right;
}

.build-time {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 50000000;
}


/*************  Site Theme: Common Features  *******************/
/**
	Across the site, we use common styling to represent particular meanings and page features.
	Pages anywhere on the site can make use of these classes to easily aide in communication.
*/

:root {
	/* PR-CONTEXTS-SUBSET */
	--nt-hue: 25;
	--qld-hue: 70;
	--fnq-hue: 60;
	--seq-hue: 80;
	--ex-qld-hue: 330;
	--vic-hue: 120;
	--tas-hue: 170;
	--ex-tas-hue: 260;
	--wa-hue: 200;
	--wa-regional-hue: 160;
	--nsw-hue: 255;
	--act-hue: 305;
	--sa-hue: 340;
	--nat-hue: 0;
	--non-cdl-hue: 100;
	--is-cdl-hue: 280;
	--qld-nt-hue: 180;
	--ex-qld-nt-hue: 20;
}

/*  span.mini-heading  */
.mini-heading {
	display: block;
	font-size: 1.25em;
	margin: 0.4em 0.1em 0.15em 0.1em;
	padding: 0 0 0 0.2em;
	font-family: sans-serif;
	font-weight: bold;
}

/*  p.explanation  */
.explanation {
    margin-block-start: 0.25em;
    margin-block-end: 0.75em;
}

/*  td.label  */
.label {
	text-align: right;
	font-weight: bold;
	white-space: nowrap;
	padding-left: 0.7em;
}
.view > * > * > .label ,
.view > * > * > * > table > * > * > .label {
	padding-left: 20px;
}

/*  input.password-edit  */
.password-edit {
	font-family: var(--monospace-font);
}
.password-edit[readonly] {
	background: initial;
	border: 1px solid #a9a9a9;
}

/*  td.unapplied  */
.unapplied {
	color: #989898;
}

/*  tr.inactive, option.inactive  */
.inactive {
	background-color: #f5d6d6;
	/* for .alternating: */
	--bg-base-color: hsl(345, 25%, 75%);
}
:not(.no-strike) > * > tr.inactive {
	text-decoration: line-through;
}

/*  tr.warning  */
.warning {
	outline: solid 2px #f94848;
	background-color: #fff1d1;
	/* for .alternating: */
	--bg-base-color: hsl(60, 60%, 77%);
}

/*  tr.highlight  */
.highlight {
	outline: solid 2px #20bf36;
}

/*  tr.pending  */
.pending {
	outline: solid 1px #004aff;
	background-color: #efe3f1;
	/* for .alternating: */
	--bg-base-color: hsl(290, 40%, 85%);
}

/*  tr.accepted  */
.accepted {
	background-color: #a7eab5;
	/* for .alternating: */
	--bg-base-color: hsl(124, 60%, 85%);
}

/*  option.faded  */
.faded {
	color: #888;
}

/*  tr.row-separator  */
.row-separator > td ,
.row-separator > th {
	border-top: 1px solid #a7a7a7 !important;
}
.sub-view > * > .row-separator > td {
	border-top: 1px solid #6b6b6b !important;
}

div.sql {
	margin: 0.2em 0.4em;
	font-family: var(--monospace-font);
	white-space: pre;
}

textarea.sql {
	width: 50vw;
	font-family: var(--monospace-font);
	white-space: pre;
}

/*  table.sql-data  */
.sql-data > tr > td {
	font-family: var(--monospace-font);
	white-space: pre;
	padding: 0.15em 0.85em;
}

.sql-data > tr.first-rowspan > td[rowspan] {
	vertical-align: top;
}

.sql-data > tr.first-rowspan > td[rowspan] > * {
	margin-top: 0;
	margin-bottom: 0;
	display: block;
	position: sticky;
	top: 50%;
}


/**************************  Common Elements  **************************************/
/**
	Important CSS required for these features to either appear or function correctly.
*/

.copy-button {
	font-size: 18pt;
	border: none;
	background: none;
	padding: 0;
	margin: 0;
	height: 0.9em;
	margin-top: -0.15em;
}


/*************  Common: vertical-carry and horizontal-carry  *******************/


/*  *.vertical-carry  */
.vertical-carry {
	z-index: 3;
}
thead.vertical-carry , tbody.vertical-carry , tfoot.vertical-carry , tr.vertical-carry , th.vertical-carry , td.vertical-carry {
	z-index: 2;
}

/*  *.horizontal-carry  */
.horizontal-carry {
	z-index: 1;
}


/*************  Common: collapsable-list  *******************/

li.collapsable-list.collapsed-list::marker {
	content: "\25BA\00a0\00a0";
}
li.collapsable-list.uncollapsed-list::marker {
	content: "\25BC\00a0\00a0";
}
li.collapsed-list + ul {
	display: none;
}


/*************  Common: tool-tip  *******************/

.tool-tip-container {
	display: inline-block;
	position: relative;
	padding: 0.1em;
	margin: -0.1em;
}

.tool-tip-container:hover {
	padding: 0.5em;
	margin: -0.5em;
	z-index: 5;
}

.tool-tip-container.telegraph::before {
	content: "";
	border-left: 0.5em solid transparent;
	border-top: 0.5em solid red;
	top: 0.1em;
	position: absolute;
	right: 0;
}

.tool-tip-container.telegraph:hover::before {
	top: 0.5em;
	right: 0.4em;
}

.tool-tip {
	background-color: #181818;
	color: #ffffff;
	position: absolute;
	z-index: 100;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 0);
	text-align: left;
	border-radius: 0.5em;
	padding: 0.7em 0.9em;
	min-width: min-content;
	width: 300px;
	max-width: -moz-max-content;
	max-width: max-content;
	font-weight: normal;
	pointer-events: none;
	line-height: 1.3em;
}

.tool-tip table.simple-border > * > * > * {
	border-color: white;
}

.tool-tip .warning {
	color: black;
}

.tool-tip .pending {
	color: black;
}

.tool-tip .alternating {
	font-size: 0.81em;
	color: black;
}

.tool-tip-container:not(:hover):not(.show) > .tool-tip {
	visibility: hidden;
}

.veritcal-carry .tool-tip ,
.horizontal-carry .tool-tip {
	transform: translate(-50%, -100%);
	top: unset;
	bottom: 0;
}


/*************  Common: full-popup  *******************/

.full-popup ,
.full-popup-toggle {
	z-index: 300;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	
	pointer-events: none;
	overflow: hidden;
}

*:not(.show-full-popup-toggle) > .full-popup-toggle {
	display: none;
}

.full-popup-inner {
	display: contents;
}

.full-popup-content {
	padding: 10px;
	position: absolute;
	margin: auto;
	inset-inline-start: 0px;
	inset-inline-end: 0px;
	inset-block-start: 0px;
	inset-block-end: 0px;
	height: max-content;
	max-height: calc(100% - 2em - 20px);
	width: max-content;
	max-width: calc(100% - 2em - 20px);
	
	pointer-events: initial;
	overflow: auto;
	
	background-color: white;
	color: black;
	text-align: left;
}

.full-popup-content > h2 {
	margin: 12px;
}

.full-popup-content .tool-tip-container {
	position: static;
}
.full-popup-content .tool-tip-container.telegraph::before {
	border-left: none;
	border-right: 0.5em solid transparent;
	top: unset;
	right: unset;
	transform: translate(-0.6ch,-0.25ch);
}
.full-popup-content .tool-tip {
	top: unset;
	margin-top: 2em;
	max-width: calc(100% - 4em);
}

.full-popup-backdrop {
	width: 100%;
	height: 100%;
	z-index: -1;
	background-color: rgba(51, 51, 51, 0.3);
	pointer-events: initial;
}

.option-chooser .full-popup-content {
	background-color: white;
	padding: 10px;
	max-width: 50%;
}

.reporting .full-popup-content {
	width: auto;
	max-width: none;
	margin: 10px;
}


/*************  Common: Rich Text Editor  *******************/

.rich-text-buttons-area {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
	display: table;
	border-spacing: 2px;
	margin-bottom: 4px;
	width: max-content;
}

.rich-text-button {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

.rich-text-attach {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.rich-text-button {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	background-color: #e2e2e2;
	border: solid 1px #868686;
	border-radius: 2px;
	font-size: 0.75em;
	
	width: 2em;
	height: 2em;
	padding: 0px;
}
label.rich-text-button {
	font-size: 1em;
}

.rich-text-area.edit-mode > .rich-text-content-outer {
	border: solid #808080 1px;
	border-radius: 3px;
}

.rich-text-area.edit-mode > * > .rich-text-content {
	border-top: solid #cecece 3px;
	border-right: solid #cecece 3px;
}

.rich-text-area.edit-mode > * > .rich-text-content {
	padding: 1px;
}

.rich-text-content *[contenteditable=false] {
	outline: 2px dashed #51bfb738;
	outline-offset: 2px;
}


/**************************  Specific Elements  **************************************/


/*************  Specific Elements: View table  *******************/

/*  table.view  */

.view {
	width: 100%;
}

.view.auto-width {
	width: auto;
	margin-left: auto;
	margin-right: auto;
}

.view > * > * > th {
	padding: 0.2em 0.7em;
	height: 2em;
}

.view > * > * > td {
	padding: 0.2em 0.7em;
	height: 2.5em;
}

.view.main {
	font-size: 0.95em;
}

/*  td.result-count  */
.result-count {
	color: #b00;
}


/*************  Specific Elements: Object table  *******************/

/*  table.object  */

.object {
	max-width: 100%;
	background-color: #e4e7ea;
	border: solid black 2px;
	padding: 5px;
	margin: 0 0 0.8em 0
}

.object > * > * > td ,
.object > * > * > th ,
.object > * > * > * > table:not(.border-collapse) > * > * > td ,
.object > * > * > * > table:not(.border-collapse) > * > * > th {
	padding: 0.1em 0.2em;
}

/* I think this is only used on the QRP page for QRP ranges? */
.object h2 {
	margin: 0.2em 0.4em;
	padding: 0.25em 0.4em;
	font-size: 1.4em;
}
.object h2.collapsed {
	background-color: #b9b9b9;
}
.object h2.uncollapsed {
	background-color: #fbfbfb;
}

.object h3 {
	background-color: #D0D0D0;
	margin-top: 0;
	margin-top: 0.4em;
}

/* tr.collapsed-section */
.collapsed-section h3::before {
	content: "\25BA\00a0\00a0";
}

/* tr.uncollapsed-section */
.uncollapsed-section h3::before {
	content: "\25BC\00a0\00a0";
}

/* tr.collapsed-section */
.collapsed-section + tr {
	display: none;
}

/*  td.save-changes  */
/*  td.create-object  */
.object > * > * > .save-changes ,
.object > * > * > .create-object {
	padding: 1em 0 0.2em 0;
}

/*  td.save-changes  */
/*  td.create-object  */
.save-changes > button ,
.create-object > button {
	float: right;
	width: auto;
}


/*************  Specific Elements: Sub-View table  *******************/

/*  table.sub-view.columns  */
.sub-view.columns > *:not(tfoot) > * > td:not(:last-child) ,
.sub-view.columns > *:not(tfoot) > * > th:not(:last-child) {
	border-right: 1px solid #696969;
}

.sub-view.columns > *:not(tfoot) > * > td ,
.sub-view.columns > *:not(tfoot) > * > th {
	padding: 0.2em 0.6em;
}

.sub-view.columns.border-collapse > *:not(tfoot) > * > td ,
.sub-view.columns.border-collapse > *:not(tfoot) > * > th {
	border-left: 1px solid #696969;
}

/*  table.sub-view  */

.sub-view > * > tr > th ,
.sub-view > * > tr > td {
	height: 1.8em;
}

.sub-view > * > tr > * > input[type=checkbox] ,
.sub-view > * > tr > * > input[type=radio] {
	width: 100%;
	min-width: 1em;
}

/* button.extra-action  */
.extra-action {
	width: auto;
}

/*  button.save-sub-object  */
.save-sub-object:not(.show) {
	visibility: hidden;
}

#page-content.readonly .sub-view > tfoot {
	display: none;
}

.acnm-row {
	background-color: #c1c0bf;
	font-size: medium;
	padding-top: 0.8em;
	padding-bottom: 0.5em;
}

.group-heading {
	background-color: #c1c0bf;
	font-size: medium;
}

.no-edit.select {
	white-space: nowrap;
}

.sub-view > tbody > tr > td > span.no-edit {
	padding: 2px;
}

.sub-view > tbody > tr > td > span.no-edit.select {
	padding-left: 6px;
}

.sub-view > tbody > tr > td > span.no-edit.datetime {
	font-family: var(--monospace-font);
}

.sub-view > * > * > td > ul {
	padding-inline-start: 1em;
	margin: 0.3em;
}
.sub-view > * > * > td > ul > li {
	margin: 0.2em;
}

tr > * > select.subobject {
	width: -webkit-fill-available;
	min-width: -moz-max-content;
	min-width: max-content;
}


/*************  Specific Elements: Alternating table  *******************/

/*  table.alternating  */

.alternating {
	--bg-base-color: hsl(220, 75%, 95%);
}

.alternating > thead {
	background-color: #C6C6C6;
}

.alternating > tfoot {
	background-color: #e4e4e4;
	outline: solid 1px #b3b3b3;
}

.alternating > tbody > tr > td[rowspan] {
	background-color: #fdfdfd;
}

.alternating > tbody:first-of-type > tr.first-rowspan:not(:first-child) > td ,
.alternating > tbody:not(:first-of-type) > tr.first-rowspan > td {
	border-top: 1px dashed #8e8e8e;
}

.alternating > tbody > tr > td {
	background-color: lch(
		from lch(from var(--bg-base-color)
			calc(l + min(0,var(--bg-var)) * 0.08 * l + max(0,var(--bg-var)) * 0.08 * (100 - l))
			calc(c + c * var(--bg-var) * -0.15)
			h
		)
		calc(l + var(--bg-emph,0) * clamp((l + 20) * -0.13, -1000 / (l - 45 - var(--bg-var) * 10), (100 - l + 20) * 0.13))
		c
		h
	);
}

.alternating > tbody > tr:nth-child(odd) {
	--bg-var: -1;
}

.alternating > tbody > tr:nth-child(even) {
	--bg-var: 1;
}


/*************  Specific Elements: Sub-Tabs  *******************/

#tabs {
	margin-bottom: 1em;
	margin-top: 1.25em;
}

#tabs > a {
	border: 1px solid black;
	border-radius: 0.3em;
	margin: 0.05em 0.3em;
	padding: 0.25em 0.8em;
	background-color: #ececec;
	text-decoration: none;
	text-align: center;
	display: inline-block;
	color: black;
}

/*  a.open  */
#tabs > .open {
	text-decoration: underline;
	color: white;
	background-color: #9e9e9e;
	border-width: 1px;
	font-weight: bold;
}


/*************  Specific Elements: Comments  *******************/

#comments > tbody {
	background-color: white;
}

#comments > tbody > tr > td {
	border: 2px #636363 solid;
	padding: 5px;
}

#comments > * > * > * > .author {
	float: left;
	font-weight: bold;
	margin-top: 8px;
	margin-left: 10px;
}

#comments > * > * > * > .created {
	float: right;
	font-weight: bold;
	margin-top: 8px;
	margin-right: 6px;
}

#comments > * > * > * > .body {
	width: 100%;
	float: left;
}

#comments > * > * > * > .editor {
	float: left;
	font-style: italic;
	margin: 0 0 4px 20px;
	display: none;
}

#comments > * > * > * > .modified {
	float: right;
	font-style: italic;
	margin-bottom: 4px;
	display: none;
}

#comments > * > * > * > button {
	width: auto;
}

#NewCommentContainer {
	display: none;
}


/*************  Specific Elements: Site Notes  *******************/

#notes {
	width: 100%;
	border-top: 2px #636363 solid;
}

#notes > * > * > td {
	border-bottom: 2px #636363 solid;
}

#notes > * > tr:nth-child(odd){
	background-color: #f0f5fb;
}

#notes > * > tr:nth-child(even) {
	background-color: #f9fffe;
}

.open-note {
	outline: 2px solid red;
}

#notes > * > .open-note:nth-child(odd){
	background-color: #fffbd7;
}

#notes > * > .open-note:nth-child(even) {
	background-color: #fff8cb;
}

#notes > * > * > .created ,
#notes > * > * > .time ,
#notes > * > * > .author ,
.outcome-table > * > * > .created ,
.outcome-table > * > * > .time ,
.outcome-table > * > * > .author {
	white-space: nowrap;
	padding: 5px 8px;
}

#notes > * > * > .body ,
.outcome-table > * > * > .body {
	width: 100%;
	padding: 1em;
}

#notes > * > * > * > .outcome-table {
	width: -webkit-fill-available;
	margin: 4px 0;
	margin: 2em 0 0.5em 30%;
	background-color: #e6e6e6;
}

#notes > * > * > * > * > .interaction-purpose ,
.outcome-table > * > * > * > * > .interaction-purpose {
	font-size: 1.15em;
	float: right;
	text-align: right;
	margin: 0.3em 0 0.5em 0.5em;
}

#notes > * > * > * > * > .note ,
.outcome-table > * > * > * > .outcome {
	width: 100%;
}

.new-note-container {
	width: 100%;
	margin: 1px;
}

.new-note-container:not(.show) ,
.new-outcome-container:not(.show) {
	display: none;
}

.outcome-table {
	border-top: 1px #636363 solid;
}

.outcome-table > * > .new > td {
	border-bottom: 1px #bbbbbb solid;
}

.outcome-table > * > .new + tr:not(:last-child) > td {
	border-bottom: 1px #636363 solid;
}

.new-outcome-button-container {
	float: right;
	margin: 0.5em;
	clear: both;
}

.new-outcome-container {
	clear: both;
	margin: 0.5em;
}


/**************************  Specific Page Styles  **************************************/


/*************  Login  *******************/

/*  form#login  */

#login {
	padding: 5px;
	width: 450px;
	margin: 25px auto;
	background-color: #E0ECF8;
}

#login > p ,
#login > table ,
#login > button {
	margin: 8px;
}

#login > * > * > * > * > input {
	width: 200px;
}

/*  a.forgot-password  */
.forgot-password {
	font-size: 0.75em;
}

.login-error {
	font-weight: bold;
	background-color: #e6e6e6;
	border: solid 3px #f34646;
	margin: 20px 250px;
	text-align: center;
	padding: 10px;
	text-decoration: underline;
}
.page-caution {
	font-weight: bold;
	background-color: #fdf3d8;
	border: solid 2px #c54b4b;
	margin: 20px auto;
	text-align: center;
	padding: 10px;
	width: 50%;
}


/*************  Member QRP  *******************/

/*  table.qrp-scores  */
.qrp-scores {
	text-align: center;
}

.qrp-scores > thead > :last-child > th {
	border-bottom: 1px black solid;
}

.qrp-scores > tbody > tr > td {
	border: 1px black solid;
	background-color: #848484;
}
.qrp-scores > tbody > tr > td.nd {
	text-align: left;
	border: none;
	background-color: inherit;
}

/*  td.perfect  */
.qrp-scores > * > * > .perfect {
	background-color: rgb(146, 208, 80);
}

/*  td.full  */
.qrp-scores > * > * > .full {
	background-color: rgb(255, 255, 0);
}

/*  td.half  */
.qrp-scores > * > * > .half {
	background-color: rgb(255, 192, 0);
}

/*  td.bad  */
.qrp-scores > * > * > .bad {
	background-color: rgb(255, 0, 0);
}

/*  td.zero  */
.qrp-scores > * > * > .zero {
	background-color: black;
	color: white;
}

/*  td.empty  */
.qrp-scores > * > * > .empty {
}

/*  td.missing  */
.qrp-scores > * > * > .missing {
}

/*  td.previous-mark  */
.qrp-scores > * > * > .previous-mark {
	background-color: #4e4e4e;
	color: #e2e2e2
}

/*  td.no-audit  */
.qrp-scores > * > * > .no-audit {
	background-color: #4e4e4e;
	color: #e2e2e2
}

/*  td.show-full-popup-toggle  */
.qrp-scores > * > * > .show-full-popup-toggle {
	border-color: transparent;
	outline: 2px solid black;
}

/*  table.qrp-visit  */
.qrp-visit {
	width: 100%;
	height: 100%;
}

.qrp-visit > thead > * > td {
	text-align: center;
	padding: 0;
}

.qrp-visit > thead > * > td.uncollapsed {
	font-size: 2em;
	padding: 0.5em;
}

.qrp-visit > tbody {
	background-color: white;
	outline: 2px solid #2b2b2b;
}

.qrp-visit > tbody > * > td {
	padding: 15px;
}

.qrp-visit .tool-tip .promo-name {
	font-size: 12pt;
	color: white;
	font-weight: bold;
}

.qrp-visit .tool-tip .promo-details {
	color: #f3f3f3;
}

.qrp-visit .tool-tip .comment {
	font-style: italic;
	color: #ece369;
}

.qrp-visit .tool-tip .comment::before {
	content: "\"";
}

.qrp-visit .tool-tip .comment::after {
	content: "\"";
}

.qrp-visit .tool-tip .bonus-smiles {
	color: #967a56;
	margin-top: 0.5em;
	display: inline-block;
}

.qrp-visit table {
	margin-left: 12px;
}

.qrp-visit .tick {
	background-color: #74c1ff;
}

.qrp-visit .no-tick {
	background-color: #e0e049;
}

.qrp-visit .exempt {
	background-color: #dec5c5;
}

.qrp-visit .perfect {
	background-color: rgb(146, 208, 80);
}

.qrp-visit-results > * > * > td {
	min-width: 0.9em;
	padding: 0.3em 0.5em;
	border: 1px solid black;
	text-align: center;
}

.qrp-visit-results > * > * > * > * > .tool-tip {
	width: 400px;
}

.qrp-visit-smiles > * > * > th {
	border: 1px solid black;
}

.qrp-visit-smiles > * > * > td {
	border: 1px solid black;
	text-align: right;
}

/*  span.qrp-visit-edit-link  */
.qrp-visit-edit-link {
	float: right;
}


/*************  Contact Link Adder  *******************/

#contact-adder {
	z-index: 900;
	position: relative;
	width: 100%;
	background: #dfdfdf;
}

#contact-adder.close {
	display: none;
}

#contact-adder > div {
	position: absolute;
	width: 100%;
	outline: solid 2px #808080;
}

.close-contact-selector {
	text-decoration: underline;
	cursor: pointer;
}

.close-contact-selector-fill {
	background: #dfdfdf !important;
}


/*************  Contact Merger  *******************/

#contact-merger > * > * > .matches {
	background-color: #c3c3c3;
}

#contact-merger > * > * > .mismatch {
	background-color: #ecc961;
}

#contact-merger > * > * > .empty {
	background-color: #b9e2fb;
}

#contact-merger input[type=radio] ,
#contact-merger input[type=checkbox] {
	margin-right: 5px;
	margin-left: 2px;
}


/*************  Hardware Requests  *******************/

#hardware-requests > li {
	border-radius: 3px;
	padding: 2px 6px;
}
#hardware-requests > li.consignment {
	background-color: #e0fbd5;
}
#hardware-requests > li.request.status-0 { /* Submitted */
	background-color: #eaeaea;
	color: #737373;
}
#hardware-requests > li.request.status-1 { /* Pending */
	background-color: #fffac4;
}
#hardware-requests > li.request.status-2 { /* Arranged */
	background-color: #b6e8bc;
}
#hardware-requests > li.request.status-3 { /* Back Order */
	background-color: #daa657;
}
#hardware-requests > li.request.status-6 { /* On Hold / TBA */
	background-color: #dfd694;
}
#hardware-requests > li.request.status-255 { /* Record */
	background-color: #e8e8e8;
}


/*************  Product Data  *******************/
/* table.pd-prices td.pd-state */
.pd-prices > * > * > .pd-state {
	background-color: hsl(var(--bg-hue), 100%, 89%);
}
.pd-prices > * > * > .pd-state.d1 {
	background-color: hsl(var(--bg-hue), 100%, 93%);
}
.pd-prices > * > * > .pd-state.d2 {
	background-color: hsl(var(--bg-hue), 85%, 90%);
}
.pd-prices > * > * > .pd-state.d3 {
	background-color: hsl(var(--bg-hue), 70%, 86%);
}
.pd-prices > * > * > .pd-state.d4 {
	background-color: hsl(var(--bg-hue), 55%, 82%);
}
.pd-prices > * > * > .pd-state.d5 {
	background-color: hsl(var(--bg-hue), 50%, 80%);
}
.pd-prices > * > * > .pd-state.d6 {
	background-color: hsl(var(--bg-hue), 45%, 80%);
}
.pd-prices > * > * > .pd-state.d7 {
	background-color: hsl(var(--bg-hue), 40%, 80%);
}
.pd-prices > * > * > .pd-state.d8 {
	background-color: hsl(var(--bg-hue), 35%, 80%);
}
.pd-prices > * > * > .pd-state.d9 {
	background-color: hsl(var(--bg-hue), 30%, 80%);
}
.pd-prices > * > * > .pd-state.NT {
	--bg-hue: var(--nt-hue);
}
.pd-prices > * > * > .pd-state.QLD {
	--bg-hue: var(--qld-hue);
}
.pd-prices > * > * > .pd-state.VIC {
	--bg-hue: var(--vic-hue);
}
.pd-prices > * > * > .pd-state.TAS {
	--bg-hue: var(--tas-hue);
}
.pd-prices > * > * > .pd-state.WA {
	--bg-hue: var(--wa-hue);
}
.pd-prices > * > * > .pd-state.NSW {
	--bg-hue: var(--nsw-hue);
}
.pd-prices > * > * > .pd-state.ACT {
	--bg-hue: var(--act-hue);
}
.pd-prices > * > * > .pd-state.SA {
	--bg-hue: var(--sa-hue);
}

.pd-prices > * > * > .pd-state.NO ,
.pd-prices > * > * > .pd-state.Non-CDL {
	--bg-hue: var(--non-cdl-hue);
}
.pd-prices > * > * > .pd-state.YES ,
.pd-prices > * > * > .pd-state.CDL {
	--bg-hue: var(--is-cdl-hue);
}

.pd-data > * > .data-group ,
.pd-prices > * > .price-group {
	background-color: #c9c9c9 !important;
}

.pd-prices > * > * > .price-change {
	outline: solid 2px #7c8ddf;
	background-color: #c6e3fb;
}

.pd-prices > * > * > .price-remove {
	outline: solid 2px #ff7d7d;
	background-color: #af7070;
}

.pd-prices > * > * > .price-add {
	outline: solid 2px #61bf61;
	background-color: #91e391;
}

.pd-data > * > * > * > .copy-from ,
.pd-prices > * > * > * > .copy-from {
	outline: 2px solid #068306;
	background-color: #acdfac;
}

.pd-data > * > * > * > .copy-to ,
.pd-prices > * > * > * > .copy-to {
	outline: 2px solid #0e0eb5;
	background-color: #d7d7fd;
}

/* div.pd-section */
.pd-section {
	outline: 2px solid #333;
	border-radius: 6px;
	padding: 0.5em 0.5em;
	width: max-content;
	margin: 0.5em 0.25em;
}


/*************  Promo Data  *******************/

.ppg-edit-product-row.dragging {
	outline: 2px dashed black;
}
.ppg-edit-product-row.dragging > * {
	visibility: hidden;
}


.promo-state input[type=text]:not(:disabled):not(.copy-from):not(.copy-to) {
	background-color: #FFFFFFCC;
}

#deal-form .promo-state {
	--bg-base-color: hsl(var(--bg-hue,220), 32%, 89%);
}
#special-offers .promo-state {
	--bg-base-color: hsl(var(--bg-hue,220), 40%, 87%);
	--bg-sat-base: 40%;
	--bg-sat-var: 10%;
	--bg-lit-base: 87%;
	--bg-lit-var: 42%;
}
.deal-preview {
	--bg-sat: 70%;
	--bg-lit: 93%;
}
.deal-preview > * > * > td {
	background-color: hsl(var(--bg-hue), var(--bg-sat), var(--bg-lit));
}
/* PR-CONTEXTS-SUBSET */
.promo-state.NT {
	--bg-hue: var(--nt-hue);
}
.promo-state.QLD {
	--bg-hue: var(--qld-hue);
}
.promo-state.SEQ {
	--bg-hue: var(--seq-hue);
}
.promo-state.FNQ {
	--bg-hue: var(--fnq-hue);
}
.promo-state.Ex-QLD {
	--bg-hue: var(--ex-qld-hue);
}
.promo-state.VIC {
	--bg-hue: var(--vic-hue);
}
.promo-state.TAS {
	--bg-hue: var(--tas-hue);
}
.promo-state.Ex-TAS {
	--bg-hue: var(--ex-tas-hue);
}
.promo-state.WA {
	--bg-hue: var(--wa-hue);
}
.promo-state.WA-Regional {
	--bg-hue: var(--wa-regional-hue);
}
.promo-state.NSW {
	--bg-hue: var(--nsw-hue);
}
.promo-state.ACT {
	--bg-hue: var(--act-hue);
}
.promo-state.SA {
	--bg-hue: var(--sa-hue);
}
.promo-state.NAT {
	--bg-hue: var(--nat-hue);
}
.promo-state.Non-CDL {
	--bg-hue: var(--non-cdl-hue);
}
.promo-state.CDL {
	--bg-hue: var(--is-cdl-hue);
}
.promo-state.Remote {
	--bg-hue: var(--tas-hue);
}
.promo-state.SANT {
	--bg-hue: var(--nt-hue);
}
.promo-state.FNQNT {
	--bg-hue: var(--fnq-hue);
}
.promo-state.QLDNT {
	--bg-hue: var(--qld-nt-hue);
}
.promo-state.Ex-QLDNT {
	--bg-hue: var(--ex-qld-nt-hue);
}
.promo-state.T1 {
	--bg-sat: 40%;
	--bg-lit: 90%;
}
.promo-state.T2 {
	--bg-sat: 30%;
	--bg-lit: 87%;
}
.promo-state.T3 {
	--bg-sat: 30%;
	--bg-lit: 85%;
}



/*************  Loader  *******************/

.loader-container{
	position:fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background-color: #dcdcdc7c;
	display:flex;
	justify-content: center;
	align-items: center;
}


.loader-container .loader{
    height: 40px;
    width: 40px;
    border-radius: 50%;
    animation-name: load;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-duration: 0.5s;
	animation-iteration-count: infinite;

}

.loader-container.nav-loader .loader{
	    border: 10px solid #52b541;
    border-top-color: transparent;
		border-bottom-color: transparent;
}

.loader-container.get-loader .loader{
	    border: 10px solid #1f87ee;
    border-top-color: transparent;
	border-bottom-color: transparent;
}

.loader-container.post-loader .loader{
	    border: 10px solid #ee431f;
    border-top-color: transparent;
		border-bottom-color: transparent;
}


@keyframes load{
	from{
		transform: rotate(0);
	}
	to{
		transform: rotate(360deg);
	}
}