/*CSS variables*/
:root {
	--nqc-primary: #0A4F16;
	--nqc-black: #000000;
	--nqc-white: #ffffff;
	--nqc-red: #9E1420;
	--nqc-pale-orange: #FFF5DA;
	--nqc-orange: #F47738;
	--nqc-green: #149E2B;
	--nqc-sepia: #9E5614;
	--nqc-transparent: transparent;
	--nqc-body-black: #161616;
	--nqc-text-black: #131518;

	--nqc-blue: #2766E4;
	--nqc-grey-blue: #E5EEF5;
	--nqc-light-blue: #2B8CC4;
	--nqc-dark-blue: #0A214F;

	--nqc-light-grey: #efefef;
	--nqc-grey: #d3d3d3;
	--nqc-mid-grey: #999999;
	--nqc-dark-grey: #595959;

	--nqc-focus-colour: #0229f0;

	--nqc-primary-hover: #3B7245;
	--nqc-primary-active: #083F12;
	--nqc-primary-disabled: #9DB9A2;

	--nqc-secondary-hover: #E6EDE7;
	--nqc-secondary-active: #CEDCD0;
	--nqc-secondary-disabled: #9DB9A2;

	--nqc-tertiary-hover: #F1F3F5;
	--nqc-tertiary-active: #DEE2E6;
	--nqc-tertiary-disabled: #ADB5BD;

	--nqc-neutral: #F8F9FA;

	--nqc-toggle-button-hover: #FFE59D;
	--nqc-toggle-button-active: #FFD253;

	--nqc-questionnaire-risk-low: #24A148;
	--nqc-questionnaire-risk-medium: #FF8932;
	--nqc-questionnaire-risk-high: #98141B;
	--nqc-questionnaire-risk-none: #EAEDEF;

	--nqc-award-purple: #E427D0;
	--nqc-award-purple2: #CE258A;
	--nqc-award-turquoise: #28A197;
	--nqc-award-lightblue: #2B8CC4;
	--nqc-award-orange: #F47738;
	--nqc-award-grey2: #BBB;

	--nqc-component-separation-line: #CFD4DA;
}

/*ELEMENTS*/

/*PILLS*/
.nqc-pill {
	position: fixed;
	max-width: 741px;
	width: 90%;
	left: 50%;
	transform: translate(-50%, 0);
	top: 1rem;
	padding: 1rem 3rem;
	border-radius: 2rem;
	border: 1px solid transparent;
	box-shadow: 0 0 17px -8px var(--nqc-black);
	z-index: 1500;
	overflow: hidden;
	text-align: center;
	transition: border-color 0.3s ease-in;
}

.nqc-pill.hide {
	display: none;
}

.nqc-pill .nqc-pill-bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: var(--nqc-white);
	opacity: 0.9;
	
	transition: opacity 0.3s ease-in;
}

.nqc-pill.nqc-pill-red, .nqc-pill-orange {
	color: var(--nqc-white);
}

.nqc-pill.nqc-pill-red .nqc-pill-bg {
	background-color: var(--nqc-red);
}

.nqc-pill.nqc-pill-orange .nqc-pill-bg {
	background-color: var(--nqc-orange);
}

.nqc-pill .nqc-pill-text {
	position: relative;
}

.nqc-pill .nqc-pill-close {
	position: absolute;
    top: 50%;
    margin-top: -0.5rem;
    right: 1rem;
    height: 1rem;
}

.nqc-pill:hover {
	border-color: var(--nqc-red);
}

.nqc-pill:hover .nqc-pill-bg {
	opacity: 1;
}

.nqc-pill .nqc-pill-close:hover {
	cursor: pointer;
}

.nqc-infobox {
	padding: 0.5rem 1rem;
    background-color: var(--nqc-grey-blue);
    border-left: 8px solid var(--nqc-blue);
}

.nqc-stamp {
	border: 1px solid var(--nqc-grey);
	padding: 0.5rem;
    background-color: var(--nqc-white);
    color: var(--nqc-black);
    align-self: flex-start;
	font-weight: 700;
}

.nqc-stamp.light-blue {
	border-color: var(--nqc-light-blue);
	background-color: var(--nqc-light-blue);
	color: var(--nqc-white);
}

.nqc-stamp.sepia {
	border-color: var(--nqc-sepia);
	background-color: var(--nqc-sepia);
	color: var(--nqc-white);
}

.nqc-stamp.grey {
	border-color: var(--nqc-mid-grey);
	background-color: var(--nqc-mid-grey);
	color: var(--nqc-white);
}

.nqc-stamp.dark-blue {
	border-color: var(--nqc-dark-blue);
	background-color: var(--nqc-dark-blue);
	color: var(--nqc-white);
}
/*CARDS*/
.nqc-card {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	border-radius: 0.5rem;
	box-shadow: 1px 1px 14px -7px var(--nqc-black);
	overflow: hidden;
}

.nqc-card.nqc-card-simple {
	padding: 2rem;
}

.nqc-card .nqc-card-bg {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;

	border-radius: 0.5rem;
	z-index: 0;
}


.nqc-card.border-light-blue {
	border: 1px solid var(--nqc-light-blue);
}

.nqc-card.border-sepia {
	border: 1px solid var(--nqc-sepia);
}

.nqc-card.border-grey {
	border: 1px solid var(--nqc-mid-grey);
}

.nqc-card.border-dark-blue {
	border: 1px solid var(--nqc-dark-blue);
}

.nqc-card.nqc-card-dark {
	color: var(--nqc-white);
}

.nqc-card.nqc-card-dark .nqc-card-bg {
	background-color: #171E27;
}

.nqc-card.nqc-card-red {
	color: var(--nqc-white);
}

.nqc-card.nqc-card-red .nqc-card-bg {
	background-color: var(--nqc-red);
}

.nqc-card.nqc-card-orange {
	color: var(--nqc-white);
}

.nqc-card.nqc-card-orange .nqc-card-bg {
	background-color: var(--nqc-orange);
}

.nqc-card.nqc-card-green {
	color: var(--nqc-white);
}

.nqc-card.nqc-card-green .nqc-card-bg {
	background-color: var(--nqc-green);
}

.nqc-card.nqc-card-primary, .nqc-card.nqc-card-primary .paragraph {
	color: var(--nqc-white);
}

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

.nqc-card.nqc-card-grey {
	color: var(--nqc-black);
}

.nqc-card.nqc-card-grey .nqc-card-bg {
	background-color: var(--nqc-grey);
}

.nqc-card-header, .nqc-card-body, .nqc-card-footer {
	width: 100%;
	z-index: 0;
}

.nqc-card-header {
	/*padding: 1rem 1rem 0.5rem 1rem;*/
	display: flex;
	padding: 1rem;
	border-radius: 0.5rem 0.5rem 0 0;
}

.nqc-card .image-container {
	margin: -1rem -1rem 0 -1rem;
}

.nqc-card-header img {
	display: block;
	width: 100%;
}

.nqc-card.borders .nqc-card-header {
	border-bottom: 2px solid;
}

.nqc-card-header h3 {
	font-size: 22px;
}

.nqc-card-body {
	/*padding: 0.5rem 1rem;*/
	padding: 1rem;
	font-size: 15px;
}

.nqc-card-footer {
	display: flex;
	flex-flow: row nowrap;
	padding: 1rem;
	border-radius: 0 0 0.5rem 0.5rem;
	font-size: 15px;
}

.nqc-card.borders .nqc-card-footer {
	border-top: 2px solid;
}

.nqc-info-card {
	padding: 2.5rem 1.5rem 1.5rem 1.5rem;
	border-radius: 0.5rem;
}

/*TABS*/
.nqc-tabs {
	display: flex;
	flex-flow: row wrap;
}

.nqc-tab {
	position: relative;
	padding: 1rem;
	border: 1px solid transparent;
	background-color: var(--nqc-light-grey);
	border-right: 2px solid var(--nqc-white);
	border-left: 2px solid var(--nqc-white);
	border-bottom: 3px solid var(--nqc-white);
}

.nqc-tab h3 {
	font-size: 22px;
}
.nqc-tab:hover {
	cursor: pointer;
}

.nqc-tab.active-tab {
	background-color: var(--nqc-white);
	border-top: 1px solid var(--nqc-black);
	border-right: 1px solid var(--nqc-black);
	border-left: 1px solid var(--nqc-black);
	top: 1px;
	margin-top: -1px;
	margin-left: 1px;
	margin-right: 1px;
}

.nqc-tab h1, .nqc-tab h2, .nqc-tab h3 {
	font-weight: 700;
}

.nqc-tabs-page {
	padding: 1rem;
	background-color: var(--nqc-white);
	border-top: 1px solid var(--nqc-black);
	margin: 0 1px;
}

.nqc-tabs-page.hide {
	display: none;
}

/*links*/
.nqc-link {
	display: inline-block;
	padding: 0;
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	font-family: inherit;
	background-color: transparent;
	color: var(--nqc-primary);
	/*prevent flashing of button when tapped on mobile*/
	-webkit-tap-highlight-color: transparent;
	text-decoration: underline;
}

.nqc-link:hover {
	background-color: var(--nqc-light-grey);
}

/*lists*/
.nqc-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nqc-list li {
	display: flex;
	align-items: flex-start;
    position: relative;
	width: 100%;
}

.nqc-list.nqc-list-item-borders li {
	border-bottom: 1px solid var(--nqc-grey);
}
.nqc-list li.list-item-expandable .list-item-expand-toggle {float: right; cursor: pointer; transition: all .2s ease-in-out; }
.nqc-list li.list-item-expandable .list-item-expand-toggle:hover {transform: scale(1.2); }
.nqc-list li.list-item-expandable .list-item-expand-toggle:focus, .check-box-holder:focus, .radio-button-holder:focus {box-shadow: 0 0 0 4px #efefef !important; outline: 3px solid #FFBF47 !important; transition: none }

.nqc-list li.list-item-expandable {
	flex-wrap: wrap;
	margin-bottom: 0.5rem;
	padding-bottom: 0.5rem;
}

.nqc-list li.list-item-expandable > div {
	width: 100%;
}

.nqc-list li.list-item-expandable > div.expandable-body {
	display: none;
	overflow: hidden;
}

/* .nqc-list li.list-item-expandable > div.expandable-body.list-item-expanded {
	height: auto;
	transition: height 0.3s ease;
} */

.nqc-list .list-item > *:not(.prepend) {
	overflow: hidden;
}

.nqc-list li.valign-center .prepend {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
/*
.nqc-list-simple li {
	border-bottom: none;
}
*/
.nqc-list li > a {
	display: inline-block;
	padding: 1rem;
	width: 100%;
}

.nqc-list li .prepend {
	display: inline-flex;
	padding: 1rem 0.5rem 1rem 1rem;
}

.nqc-list li .item-text {
	display: inline-flex;
	flex-wrap: wrap;
	padding: 1rem;
}

.nqc-list li .prepend + .item-text {
	padding-left: 0.5rem;
}

.nqc-list.nqc-list-small li .prepend {
	display: inline-flex;
	padding: 0.5rem 0.25rem 0.5rem 0.5rem;
}

.nqc-list.nqc-list-small li a, .nqc-list.nqc-list-small li .item-text {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.nqc-list li .prepend + .item-text {
	padding-left: 0.25rem;
}
/*
.nqc-list-simple li a, .nqc-list-simple li .item-text {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}
*/
/*
.nqc-list li a:hover {
	background-color: var(--nqc-light-grey);
	font-weight: normal;
}
*/
.nqc-list li.list-item-expandable a:hover {
	background-color: transparent;
}

.nqc-list.nqc-list-horizontal {
	display: flex;
	flex-flow: row nowrap;
}

.nqc-list.nqc-list-horizontal li {
	border-bottom: none;
}

/*key value pairs*/
.nqc-pair-list {
	display: block;
	word-wrap: break-word;
}

.nqc-pair {
	display: flex;
	position: relative;
}

.nqc-pair > * {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.nqc-pair > *:nth-child(1) {
	padding-right: 3rem;
	flex-basis: 33%;
	flex-shrink: 0;
	flex-grow: 0;
}

.nqc-pair-list.bold-key .nqc-pair > *:nth-child(1) {
	font-weight: 700;
}

.nqc-pair-list.bold-value .nqc-pair > *:nth-child(2) {
	font-weight: 700;
}

.nqc-pair-list.stack {
	display: block;
}

.nqc-pair-list.stack .nqc-pair {
	display: block;
}

.nqc-pair-list.stack .nqc-pair * {
	display: block;
	width: 100%;
}

.nqc-pair-list.stack .nqc-pair > *:nth-child(1) {
	display: block;
	padding-bottom: 0.1rem;
}

.nqc-pair-list.stack .nqc-pair > *:nth-child(2) {
	display: block;
	padding-top: 0.1rem;
}

.nqc-accordian  {
	width: 100%;
}

.nqc-accordian ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nqc-accordian:not(.nqc-accordian-classic-style) ul li.nqc-accordian-item {
    border: 1px solid var(--nqc-grey);
	background-color: var(--nqc-white);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

.nqc-accordian.nqc-accordian-classic-style ul li.nqc-accordian-item:not(.nqc-accordian-item-closed) .nqc-accordian-item-trigger-classic-style {
	border-bottom: 2px solid var(--nqc-green);
	font-weight: bold;
}

.nqc-accordian.nqc-accordian-classic-style ul li.nqc-accordian-item-closed .nqc-accordian-item-trigger-classic-style {
	border-bottom: 1px solid var(--nqc-grey);
}

.nqc-accordian.nqc-accordian-classic-style ul li.nqc-accordian-item-closed .nqc-accordian-item-trigger-classic-style.nqc-accordian-item-trigger-disabled {
	color: var(--nqc-grey);
	cursor: default;
}

.nqc-accordian-item .nqc-accordian-item-trigger-classic-style::before {
	content: url("../images/gadgets/caret-up.svg");
	transform: rotate(0deg) translateY(-2px);
	transition-duration: 0.21s;
	position: absolute;
}

.nqc-accordian-item .nqc-accordian-item-trigger-classic-style.nqc-accordian-item-trigger-disabled::before {
	content: url("../images/gadgets/caret-up-disabled.svg");
	transform: rotate(0deg) translateY(-2px);
	transition-duration: 0.21s;
	position: absolute;
}

.nqc-accordian-item-closed .nqc-accordian-item-trigger-classic-style::before {
	content: url("../images/gadgets/caret-up.svg");
	transform: rotate(180deg) translateY(5px);
	transition-duration: 0.21s;
	position: absolute;
}

.nqc-accordian-item-closed .nqc-accordian-item-trigger-classic-style.nqc-accordian-item-trigger-disabled::before {
	content: url("../images/gadgets/caret-up-disabled.svg");
	transform: rotate(180deg) translateY(5px);
	transition-duration: 0.21s;
	position: absolute;
}

.nqc-accordian ul li.nqc-accordian-item .nqc-accordian-item-trigger {
	color: inherit;
	padding: 1rem;
}

.nqc-accordian ul li.nqc-accordian-item .nqc-accordian-item-trigger:hover {
	cursor: pointer;
}

.nqc-accordian ul li.nqc-accordian-item .nqc-accordian-item-body {
	overflow: hidden;
	position: relative;
	transition: height 0.3s ease-in;
}

.nqc-accordian ul li.nqc-accordian-item .nqc-accordian-item-body .content {
	position: absolute;
	padding: 0 1rem 1rem 1rem;
	width: 100%;
}

.nqc-accordian ul li.nqc-accordian-item.nqc-accordian-item-closed .nqc-accordian-item-body {
	height: 0!important;
}

.nqc-table-container {
	width: 100%;
	overflow-x: auto;
	padding: 0.5rem;
}

.nqc-table {
	font-size: 1em;
	display: table;
	min-width: 100%;
	border-collapse: collapse;
}

.nqc-table.selectable-rows .nqc-table-row:not(.heading-row):hover {
	cursor: pointer;
}

.nqc-table-row {
	position: relative;
	display: table-row;
}

.nqc-table-row a {
	position: absolute;
}

.nqc-table-row.heading-row .nqc-table-cell {
	font-weight: 700;
}

.nqc-table-cell {
	display: table-cell;
	text-align: left;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	font-size: 1em;
	font-weight: normal;
	padding: 0.4em 0.5rem;
	border-bottom: 1px solid var(--nqc-grey);
	white-space: nowrap;
}

.nqc-table-cell-multi-line {
	white-space: normal;
	min-width: 350px; /*TODO: consider this width*/
}


.sa-badge {
	border-radius: 100%;
	text-align: center;
}

.sa-badge-32 {
	height: 32px;
	width: 32px;
	line-height: 32px;
	font-size: 14px;
}

.sa-badge-green {
	background: #0A4F16;
	color: #FFFFFF;
}

.sa-list li {
	display: flex;
}

.group_chat_member {
	display: flex; 
	padding: 8px 0;
	border-bottom: 1px solid #CFD4DA;
	width: 100%;	
}

.sa-list li:last-child .group_chat_member {
	border-bottom: none;
}

.group_chat_member .left-content {
	display: grid;
	place-content: center;
	padding-right: 8px;
}

.group_chat_member .timezone {
	color: #868E96;
}
  
.group_chat_member .right-content {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	line-height: 150%;
}

.group_chat_member .nqc-badge {
	display: inline-flex;
	min-width: 1.5rem;
	height: 1.5rem;
	background-color: var(--nqc-grey);
	align-items: center;
	justify-content: center;
	color: var(--nqc-black);
	border-radius: 5px;
	padding: 0 0.5rem;
}

.nqc-badge.nqc-badge-light-blue {
	background-color: var(--nqc-light-blue);
	color: var(--nqc-white);
}

.nqc-badge.nqc-badge-sepia {
	background-color: var(--nqc-sepia);
	color: var(--nqc-white);
}

.nqc-badge.nqc-badge-red {
	background-color: var(--nqc-red);
	color: var(--nqc-white);
}

.nqc-badge.nqc-badge-orange {
	background-color: var(--nqc-orange);
	color: var(--nqc-white);
}

.nqc-badge.nqc-badge-green {
	background-color: var(--nqc-green);
	color: var(--nqc-white);
}

.nqc-tree {}
.nqc-tree-node {position: relative; padding-top: 0.25rem; padding-bottom: 0.25rem}
.nqc-tree-node:before {content: ""; position: absolute; left: -1.25rem; top: 50%; width: 1.25rem; border-bottom: 2px solid}
.nqc-tree-node:after {content: ""; position: absolute; left: -1.25rem; top: -0.9rem; height: 2rem; border-left: 2px solid}
.nqc-tree-node span:first-child {position: relative; z-index: 3; display: inline-flex; background-color: var(--nqc-grey); width: 1.5rem; height: 1.5rem; justify-content: center; align-items: center; border: 1px solid var(--nqc-grey)}
.nqc-tree-node span:first-child:hover {cursor: pointer}
.nqc-tree-node.tier-1 {margin-left: 2rem}
.nqc-tree-node.tier-2 {margin-left: 4rem}
.nqc-tree-node.tier-3 {margin-left: 6rem}
.nqc-tree-node.tier-4 {margin-left: 8rem}
.nqc-tree-node.tier-5 {margin-left: 10rem}
.nqc-tree-node.tier-6 {margin-left: 12rem}
.nqc-tree-node.tier-7 {margin-left: 14rem}

.nqc-tree.horizontal-mode .nqc-tree-node {display: inline-block; vertical-align: top; margin-left: 0; padding-top: 0; padding-bottom: 0; padding-left: 0.25rem; padding-right: 0.25rem}
.nqc-tree.horizontal-mode .nqc-tree-node.tier-1 {margin-top: 2rem}
.nqc-tree.horizontal-mode .nqc-tree-node.tier-2 {margin-top: 4rem}
.nqc-tree.horizontal-mode .nqc-tree-node.tier-3 {margin-top: 6rem}
.nqc-tree.horizontal-mode .nqc-tree-node.tier-4 {margin-top: 8rem}
.nqc-tree.horizontal-mode .nqc-tree-node.tier-5 {margin-top: 10rem}
.nqc-tree.horizontal-mode .nqc-tree-node.tier-6 {margin-top: 12rem}
.nqc-tree.horizontal-mode .nqc-tree-node.tier-7 {margin-top: 14rem}

.nqc-form {

}

.nqc-form-row {
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: flex-end;
	margin-left: -0.5rem;
	margin-right: -0.5rem;
}

.nqc-form-row-column {
	padding: 0.5rem;
	flex: auto;
}

.nqc-form-row-column.col0, .nqc-form-row-column.col1, .nqc-form-row-column.col2, .nqc-form-row-column.col3,
.nqc-form-row-column.col4, .nqc-form-row-column.col5, .nqc-form-row-column.col6, .nqc-form-row-column.col7,
.nqc-form-row-column.col8, .nqc-form-row-column.col9, .nqc-form-row-column.col10, .nqc-form-row-column.col11,
.nqc-form-row-column.col12 {
	flex-grow: 0;
	flex-shrink: 0;
}

.nqc-input-container {

}

.nqc-input-container .label-text {
	margin-bottom: 0.5em;
	margin-left: 1em;
}

.nqc-input-holder {
	font-size: inherit;
	position: relative;
	display: inline-flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	width: 100%;
	/*min-width: 150px;*/
	height: 3.25em;
	padding-left: 1em;
	padding-right: 1em;
	border: 1px solid var(--nqc-dark-grey);
	border-radius: 0.625em;
	transition: background-color 0.25s ease-out;
}

.nqc-input-holder.input-rounded {
	border-radius: 3rem;
	padding-left: 1rem;
}

.nqc-input-holder .append, .nqc-input-holder .prepend {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 100%;
	/*
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 70%;
	*/
}

.nqc-input-holder .append:focus, .nqc-input-holder .prepend:focus {
	outline: 2px solid var(--nqc-focus-colour);
	outline-offset: 2px;
}

.nqc-input-holder .prepend {
	margin-left: -1em;
	border-top-left-radius: 0.625em;
	border-bottom-left-radius: 0.625em;
	/*align-self: center;
	border-right: 1px solid var(--nqc-grey);*/
}

.nqc-input-holder .append {
	margin-right: -1em;
	margin-left: auto;
	border-top-right-radius: 0.625em;
	border-bottom-right-radius: 0.625em;
	/*
	align-self: center;
	border-left: 1px solid var(--nqc-grey);
	margin-left: auto;
	*/
}

.nqc-input-holder .prepend ~ .placeholder {
	left: 48px;
}

.nqc-input-holder .append ~ .placeholder {
	right: 48px;
}

.nqc-input-holder.input-rounded .append, .nqc-input-holder.input-rounded .prepend {
	width: 4rem;
}

.nqc-input-holder.input-rounded .append {
	padding-right: 0.25rem;
}

.nqc-input-holder.input-focussed {
	/*background-color: var(--nqc-light-grey);
	transition: background-color 0.25s ease-in;*/
	outline: 2px solid var(--nqc-focus-colour);
	outline-offset: 2px;
}

.nqc-input-holder .placeholder {
	position: absolute;
	left: 1em;
	top: calc(50% - 2px);
	margin-top: -0.5em;
	color: var(--nqc-dark-grey);
	will-change: transform;
	transform: scale(1);
	transform-origin: 0 0;
	transition: all 0.3s ease-in;
	pointer-events: none;
	white-space: nowrap;
    text-overflow: ellipsis;
    max-width: calc(85% - 1rem);
    overflow: hidden;
}

.nqc-input-holder .placeholder:hover {
	cursor: auto;
}

/*remove placholder when input is used*/
.nqc-input-holder.input-used:not(.placeholder-dynamic) .placeholder,
.nqc-input-holder.nqc-input-date:not(.placeholder-dynamic) input:focus ~ .placeholder,
.nqc-input-holder:not(.placeholder-dynamic) input[type='time']:focus ~ .placeholder,
.nqc-input-holder:not(.placeholder-dynamic) input[type='datetime-local']:focus ~ .placeholder,
.nqc-input-holder:not(.placeholder-dynamic) input[type='month']:focus ~ .placeholder {
	opacity: 0;
	transition: opacity 0.15s ease-in; 
}

.nqc-input-holder:not(.placeholder-dynamic) input {
	/*padding-bottom: 1rem;*/
}

/*if dynamic move instead of hiding*/
.nqc-input-holder.placeholder-dynamic input:focus ~ .placeholder, .nqc-input-holder.placeholder-dynamic.input-used .placeholder {
	left: 0.3rem;
	top: 16%;
	transform: scale(0.8);
	max-width: 100%;
	transition: all 0.3s ease-in;
}

/*positions above input and the appended section - if appended section exists*/
.nqc-input-holder.placeholder-dynamic .append + input:focus ~ .placeholder, .nqc-input-holder.placeholder-dynamic.input-used .append ~ .placeholder {
	left: 2.2rem;
}

.nqc-input-holder.input-rounded .placeholder {
	left: 1.5rem;
}

.nqc-input-holder input {
	display: inline-block;
	/*padding: 1rem 0.5rem 0.5rem 0.5rem;*/
	width: 100%;
	height: 100%;
	font-size: inherit;
	outline: none;
	border-radius: 0; /*IOS appears to put a border radius on inputs*/
	background-color: transparent;
	-moz-appearance: text-field;
}

.nqc-input-holder input[type='submit'] {
	color: var(--nqc-black);
	width: auto;
	min-width: auto;
	padding: 0.5rem 1.5rem;
}

.nqc-input-holder input[type='submit']:hover {
	cursor: pointer;
	background-color: var(--nqc-grey);
}

.nqc-input-holder.nqc-input-submit {
	width: auto;
    min-width: auto;
    border-radius: 2rem;
    border: 1px solid gainsboro;
    height: 2.5rem;
    align-self: center;
	overflow: hidden;
}

.nqc-input-holder.nqc-input-submit:hover {
	background-color: var(--nqc-grey);
	cursor: pointer;
	border: 1px solid transparent;
}

.nqc-input-holder.nqc-input-text {

}

.nqc-input-holder.nqc-input-search {
	
}

.nqc-input-holder.nqc-input-search input {
	background-color: transparent;
}
 
.nqc-input-holder.nqc-input-search input::-webkit-search-cancel-button, .nqc-input-holder.nqc-input-search input::-webkit-search-decoration {
	display: none;
}

.nqc-input-holder.nqc-input-tel {
	
}

.nqc-input-holder.nqc-input-url {
	
}

.nqc-input-holder.nqc-input-email {
	
}

.nqc-input-holder.nqc-input-number {
	
}

.nqc-input-holder.nqc-input-password {
	
}

.nqc-input-holder.nqc-input-date input {
	
}

.nqc-input-holder.nqc-input-date .separator {
	opacity: 0;
	transition: opacity 0.15s ease-in;
}

.nqc-input-holder.nqc-input-date.input-focussed .separator, .nqc-input-holder.nqc-input-date.input-used .separator {
	opacity: 1;
}

.nqc-input-holder.nqc-input-date .nqc-input-date_date {
	width: 2.2rem;
}
.nqc-input-holder.nqc-input-date .nqc-input-date_month {
	width: 2.2em;
}
.nqc-input-holder.nqc-input-date .nqc-input-date_year {
	width: 3.4rem;
}

.nqc-input-holder.nqc-input-time {
	
}

.nqc-input-holder.nqc-input-datetime-local {
	
}

.nqc-input-holder.nqc-input-month {
	
}

.nqc-input-holder.nqc-input-color {
	
}

/*remove specific selectors from inputs - number spinners, etc*/
input::-webkit-datetime-edit {
	opacity: 0; 
	transition: opacity 0.3s ease-out; 
	color: var(--nqc-black)
}

.input-focussed input::-webkit-datetime-edit, .input-used input::-webkit-datetime-edit {
	opacity: 1; 
	transition: opacity 0.3s ease-in
}

input::-webkit-datetime-edit-fields-wrapper {}
input::-webkit-datetime-edit-text {}
input::-webkit-datetime-edit-month-field {}
input::-webkit-datetime-edit-day-field {}
input::-webkit-datetime-edit-year-field {}
input::-webkit-inner-spin-button {}
input::-webkit-calendar-picker-indicator {
	/*
	border-radius: 50%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
	*/
	display: none;
}
input::-webkit-calendar-picker-indicator:hover {
	/*
	cursor: pointer; 
	background-color: var(--nqc-light-grey);
	*/
}
input::-webkit-file-upload-button {}

/*DATE PICKER*/
.nqc-date-picker {
	width: 14rem;
}

.nqc-date-picker-header {
	
}

.nqc-date-picker-body {
	display: flex;
	flex-wrap: wrap;
}

.nqc-date-picker-body .date {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 1rem;
	transition: background-color 0.2s ease-in;
}



.nqc-date-picker-body .date:not(.date-empty):hover {
	cursor: pointer;
	background-color: #e3e3e3;
}

.nqc-date-picker-footer {
	
}

/*BUTTONS*/

.nqc-button {
	display: inline-block;
	padding: 0;
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	font-family: inherit;
	background-color: transparent;
	color: var(--nqc-black);
	/*prevent flashing of button when tapped on mobile*/
	-webkit-tap-highlight-color: transparent;
}

/* PRIMARY BUTTON */
.nqc-cta {
	background-color: var(--nqc-primary);
	border: 1px solid;
	border-color: var(--nqc-primary);
	display: inline-flex !important;
	width: auto !important;
	align-items: center;
	justify-content: center;
	color: var(--nqc-white);
	text-decoration: none !important;
	border-radius: 0.5em;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	/* padding: 0.5rem 1.5rem !important; */
	padding: 0.5rem 1rem !important;
	background-image: none !important;
	font-weight: 400;
	transition: background-color 0.21s ease-in, border-color 0.21s ease-in;
}

.nqc-cta:hover {
	cursor: pointer;
	background-color: var(--nqc-primary-hover);
	border-color: var(--nqc-primary-hover);
}

.nqc-cta:focus {
	background-color: var(--nqc-primary);
	border-color: var(--nqc-primary);
}

.nqc-cta:active {
	background-color: var(--nqc-primary-active);
	border-color: var(--nqc-primary-active);
}

.nqc-cta:disabled {
	background-color: var(--nqc-primary-disabled);
	border-color: var(--nqc-primary-disabled);
	cursor: not-allowed;
}

.nqc-cta.disabled {
	background-color: var(--nqc-primary-disabled);
	border-color: var(--nqc-primary-disabled);
	cursor: not-allowed;
}
/* ================== */

/* SECONDARY BUTTON */
.nqc-cta.nqc-cta-secondary{
	background-color: var(--nqc-transparent);
	border: 1px solid var(--nqc-primary);
	color: var(--nqc-primary);
}

.nqc-cta.nqc-cta-secondary:hover {
	background-color: var(--nqc-secondary-hover);
}

.nqc-cta.nqc-cta-secondary:focus {
	background-color: var(--nqc-transparent);
}

.nqc-cta.nqc-cta-secondary:active {
	background-color: var(--nqc-secondary-active);
}

.nqc-cta.nqc-cta-secondary:disabled {
	color: var(--nqc-secondary-disabled);
	border: 1px solid var(--nqc-secondary-disabled);
}

.nqc-cta-secondary.button-tertiary:disabled path, .nqc-cta-secondary.button-tertiary:disabled g path, .nqc-cta-secondary.button-tertiary:disabled path, .nqc-cta-secondary.button-tertiary:disabled rect, .nqc-cta-secondary.button-tertiary:disabled line, .nqc-cta-secondary.button-tertiary:disabled circle {
	stroke: var(--nqc-secondary-disabled);
}

.nqc-cta-secondary.button-tertiary:disabled SVG .fill-hover-state {
	stroke: transparent;
	fill: var(--nqc-secondary-disabled);
}
/* ================== */

.button-tertiary[type=submit] {
	background-color: white;
}

/* TERTIARY BUTTON */
.button-tertiary {
	display: inline-flex !important;
    align-items: center;
	border-radius: 8px;
	height: 38px;
	padding: 0.5rem 1rem !important;
	vertical-align: middle;
	color: var(--nqc-body-black);
	transition: background-color 0.21s ease-in, color 0.21s ease-in;
}

.button-tertiary svg path {
	transition: background-color 0.21s ease-in, color 0.21s ease-in, stroke 0.21s ease-in;
}

.button-tertiary:hover {
	background-color: var(--nqc-tertiary-hover);
	cursor: pointer;
}

.button-tertiary.active {
	background-color: var(--nqc-tertiary-active);
}

.button-tertiary:active {
	background-color: var(--nqc-tertiary-active);
}

.button-tertiary svg {
	display: inline-flex;
	flex-shrink: 0;
	outline: 0 !important;
	vertical-align: bottom;
}

.button svg + span {
	margin-left: 5px;
}

.button-tertiary.disabled, .button-tertiary.disabled:hover, .button-tertiary.disabled:focus {
	background-color: transparent;
	cursor: not-allowed;
	color: var(--nqc-tertiary-disabled) !important;
	outline: none;
	border-color: var(--nqc-secondary-disabled);
}

.button-tertiary.disabled path, .button-tertiary.disabled g path, .button-tertiary.disabled path, .button-tertiary.disabled rect, .button-tertiary.disabled line, .button-tertiary.disabled circle {
	stroke: var(--nqc-tertiary-disabled);
}

.button-tertiary.disabled SVG .fill-hover-state {
	stroke: transparent;
	fill: var(--nqc-tertiary-disabled);
}

.button-tertiary.tertiary-small-button{
	min-width: 1rem;
	padding: 1.2rem 0.5rem;
}

.button-tertiary.no-padding {
	padding: 0 !important;
}

/** INVITE UESR TO COLLABORATE STOP UNDERLINE **/
A.button-tertiary[data-ajax-success=pd-open] {
	text-decoration: none;
}
/* ================== */

.remove-row.disabled SVG g path {
	fill: #ADB5BD;
}

/*New tertiary icon button styles*/
.tertiary-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center; 
	transition: background-color 0.21s ease-in, color 0.21s ease-in;
}

.tertiary-icon-button:hover {
	background-color: var(--nqc-tertiary-hover);
	cursor: pointer;
}

.tertiary-icon-button.disabled:hover {
	background-color: transparent;
	cursor: not-allowed;
	color: var(--nqc-tertiary-disabled) !important;
	outline: none;
	border-color: var(--nqc-secondary-disabled);
}

.tertiary-icon-button.disabled path, .tertiary-icon-button.disabled g path, .tertiary-icon-button.disabled path, .tertiary-icon-button.disabled rect, .tertiary-icon-button.disabled line, .tertiary-icon-button.disabled circle {
	stroke: var(--nqc-tertiary-disabled);
}

.tertiary-icon-button.disabled SVG .fill-hover-state {
	stroke: transparent;
	fill: var(--nqc-tertiary-disabled);
}

/*Questionnaire tile buttons*/
.nqc-secondary-tile-button {
	background-color: var(--nqc-transparent);
	border: 1px solid var(--nqc-primary);
	color: var(--nqc-primary);
	transition: background-color 0.21s ease-in, color 0.21s ease-in;
}

.nqc-secondary-tile-button:hover {
	background-color: var(--nqc-secondary-hover);
}

.nqc-secondary-tile-button:focus {
	background-color: var(--nqc-transparent);
}

.nqc-secondary-tile-button:active {
	background-color: var(--nqc-secondary-active);
}

.nqc-secondary-tile-button:disabled {
	color: var(--nqc-secondary-disabled);
	border: 1px solid var(--nqc-secondary-disabled);
}

.nqc-secondary-tile-button:disabled path, .nqc-secondary-tile-button:disabled g path, .nqc-secondary-tile-button:disabled path, .nqc-secondary-tile-button:disabled rect, .nqc-secondary-tile-button:disabled line, .nqc-secondary-tile-button:disabled circle {
	stroke: var(--nqc-secondary-disabled);
}

.nqc-secondary-tile-button:disabled SVG .fill-hover-state {
	stroke: transparent;
	fill: var(--nqc-secondary-disabled);
}

.tertiary-tile-button{
	color: var(--nqc-body-black);
	transition: background-color 0.21s ease-in, color 0.21s ease-in;
}

.tertiary-tile-button:hover {
	background-color: var(--nqc-tertiary-hover);
	cursor: pointer;
}

.tertiary-tile-button:active {
	background-color: var(--nqc-tertiary-active);
}

.tertiary-tile-button.disabled:hover {
	background-color: transparent;
	cursor: not-allowed;
	color: var(--nqc-tertiary-disabled) !important;
	outline: none;
	border-color: var(--nqc-secondary-disabled);
}

.tertiary-tile-button.disabled path, .tertiary-tile-button.disabled g path, .tertiary-tile-button.disabled path, .tertiary-tile-button.disabled rect, .tertiary-tile-button.disabled line, .tertiary-tile-button.disabled circle {
	stroke: var(--nqc-tertiary-disabled);
}

.tertiary-tile-button.disabled SVG .fill-hover-state {
	stroke: transparent;
	fill: var(--nqc-tertiary-disabled);
}


/* FOR GADGET TABLES SO TERTIARY FIT DYNAMICALLY */
span.gadget-span-button-tertiary {
	padding-top: 0px;
	padding-bottom: 0px;
}

span.gadget-span-button-tertiary .gadget-item-column-content {
	overflow: visible;
}

/*SVGs*/
.svg-icon-holder {
	border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.svg-icon-holder:hover {
	cursor: pointer;
	background-color: var(--nqc-light-grey);
}

.svg-icon-small {
	width: 80%;
}

.password-eye-icon.eye-closed .eye-icon-open, .password-eye-icon.eye-open .eye-icon-closed {
	display: none;
}

/*NEW*/
.svg-container {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
}

.svg-container.svg-container-small {
	width: 40px;
	height: 40px;
}

.post-it-note-container {
	justify-content: space-between;
}

.post-it-note {
	background-color: var(--nqc-neutral);
	width: 180px;
	height: 171px;
	margin-right: 16px;
	flex: 1;
	transition: background-color 0.21s ease-in, color 0.21s ease-in;
}

.post-it-note:hover {
	background-color: #EAEDEF;
}

.post-it-note:active {
	background-color: var(--nqc-tertiary-active);
}

.post-it-note-title {
	height: 96px;
	overflow: hidden;
	display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

#filter-questionnaire-count, .filter-questionnaire-count{
	border: 1px solid var(--nqc-text-black);
	border-radius: 12px;
	font-size: 14px;
	padding: 3.5px;
	min-width: 24px;
	min-height: 24px;
	text-align: center;
}

.filter-questionnaire-count-active {
	background-color: var(--nqc-text-black);
	color:#FFFFFF;
}

.questionnaire-list {
	position: relative;
	border-radius: 4px;
	box-shadow: 0px -0.5px 2px 0px #0000000F, 1px 4px 4px 0px #00000029;
}

.questionnaire-list-main-content {
	min-width: 0;
}

a.questionnaire-list-main-content {
	color: unset;
	outline: none;
	transition: background-color 0.21s ease-in, color 0.21s ease-in;
	cursor: pointer;
}

a.questionnaire-list-main-content:hover, a.questionnaire-list-main-content:focus {
	background-color: var(--nqc-neutral);
	text-decoration: unset;
	cursor: pointer;
}

a.questionnaire-list-main-content:active {
	background-color: var(--nqc-tertiary-active);
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}

.questionnaire-list:has(a.questionnaire-list-main-content:active) {
	top: 2px;
	left: 1px;
	box-shadow: none;
}

.questionnaire-list-main-content .details-container{
	min-width: 0;
}

.additional-detail {
	background-color: var(--nqc-tertiary-hover);
	height: auto;
	min-height: 38px;
}

.additional-detail:hover, .additional-detail:active {
	cursor: pointer;
	background-color: var(--nqc-tertiary-hover);
}

.additional-detail span.text-left {
	overflow: hidden;
	text-overflow: ellipsis;
}

.award-box-container{
	border-left: 1px solid #CFD4DA;
}

.award-box {
	min-width: 80px;
	min-height: 90px;
	background-color: #EAEDEF;
	border-radius: 4px;
}

.rating-box {
	min-width: 80px;
	min-height: 90px;
	padding: 5px;
	border-radius: 4px;
	background-color: #EAEDEF;
}

.rating-box .gauge-riskdial-middle-awardscore-award {
	margin-top: 0px !important;
}

.track-suppliers-info {
	margin-bottom: 3px;
}

.questionnaire-list-extra-button {
	border: 1px solid #0A4F16;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	display: flex;
	align-items: center;
}

A.questionnaire-list-extra-button:hover {
	background-color: var(--nqc-secondary-hover) !important;
}

A.questionnaire-list-extra-button:active {
	background-color: var(--nqc-secondary-active) !important;
}

.questionnaire-list-extra-button.disabled {
	border-color: var(--nqc-tertiary-disabled);
	cursor: not-allowed;
}

.questionnaire-list.loading {
	background-color: #F8F9FA;
}

.loading-tile {
	background: linear-gradient(90deg,#eaedef,#cfd4da);
	background-size: 200% 100%;
	animation: gradient-animation 1s ease infinite alternate;
}
  
@keyframes gradient-animation {
	0% {
		background-position: 100% 0%;
	}
	100% {
		background-position: 0% 0%;
	}
}

.loading-tile-no-animation {
	animation: none;
}

.questionnaire-list-extra-buttons {
	display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
	width: 24px;
	border-left: 1px solid #d0d4da;
}

.questionnaire-list-extra-buttons a {
	flex-grow: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
	min-height: 24px;
	min-width: 24px;
}

.questionnaire-list-extra-buttons .questionnaire-list-extra-button-top{
	border-top-right-radius: 4px;
}

.questionnaire-list-extra-buttons .questionnaire-list-extra-button-middle:not(.nqc-secondary-tile-button){
	border-bottom: 1px solid #d0d4da;
}

.questionnaire-list-extra-buttons .questionnaire-list-extra-button-bottom{
	border-bottom-right-radius: 4px;
}

.emulator-bar-chart-bar {
	width: 80px;
	height: 8px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

.chart-legend-color {
	width: 12px;
	height: 12px;
	border-radius: 2px;
	flex-shrink: 0;
}

.dropdown-button{
	position: relative; 
	display: flex;
	border-radius: 5px; 
	transition: background-color 0.21s ease-in;
	padding: 0.5rem !important;
}

.dropdown-button.nqc-cta{
	padding: 0.5rem 1rem !important;
}

.paid-coin-span {
	width: 18px;
	height: 19px;
}

/* Basic styling for your custom tooltip */
.map-tooltip-container {
	position: absolute;
	background-color: #ffffff;
	opacity: 0.9;
	border: 1px solid #ccc;
	padding: 16px 12px 16px 12px;
	border-radius: 8px;
	box-shadow: 0 2px 7px 1px rgba(0, 0, 0, .3);
	z-index: 8500;
	pointer-events: auto;
	display: none;
	font-family: Nunito, Arial;
	max-height: 500px;
	flex-wrap: nowrap;
}

.close-map-tooltip-container:active {
	outline: 3px solid #FFBF47;
    outline-offset: 0;
}

/*stylesheets/components.css*/
/***********Expandable search component***********/
.expandable-search-search-box-holder .expandable-search-search-input {
	border-color: var(--nqc-tertiary-disabled);
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
	border-right: none;
	transition: border-color 0.21s ease-in;
}

.expandable-search-search-box-holder .expandable-search-search-input::placeholder {
	transition: color 0.21s ease-in;
}

.expandable-search-search-box-holder .expandable-search-search-input:focus {
	border-color: var(--nqc-primary);
	outline: none;
}

.expandable-search-search-box-holder .expandable-search-search-input:disabled {
	background-color: transparent;
}

.expandable-search-search-box-holder .expandable-search-search-input:disabled::placeholder {
	color: transparent;
}

.expandable-search-search-box-holder INPUT.expandable-search-search-input[type="search"]::-webkit-search-cancel-button {
	display: none;
}

.expandable-search-icon-holder {
	padding: 5px;
	transition: border-color 0.21s ease-in;
	border: 1px solid transparent;
	border-left: none;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
	cursor: pointer;
}

.expandable-search-icon-holder.expanded {
	border-color: var(--nqc-tertiary-disabled);
}

.expandable-search-icon-holder.expanded.focused {
	border-color: var(--nqc-primary);
}

.expandable-search-content{
	cursor: pointer;
}

.expandable-search-content A{
	color: var(--nqc-text-black);
	text-decoration: none;
}

.expandable-search-search-input-clear-button{
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
	cursor: pointer;
	color: #888;
	display: none;
}

.expandable-search-search-input-clear-button:focus{
	outline: none;
}

.identfiy-legend-color {
	background: #FDECEC;
	background: linear-gradient(18090deg,rgba(253, 236, 236, 1) 0%, rgba(243, 64, 64, 1) 100%);
	width: 50px;
}

.dropdown-content-holder .button-tertiary .text-left{
	display: inline-flex;
	align-items: center;
}

.separator {	
	border-right: 1px solid #CFD4DA;
}

.drawer-container {
	position: fixed;
	top: 0;
	left: -340px;
	width: 340px;
	height: 100%;
	z-index: 9000;
	background-color: #F8F9FA;
}

.drawer-container .standard-form-controls{
	display: none;
}

.drawer-header {
	position: relative;
	width: 308px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 8px;
	margin: 16px 16px 0px 16px;
	border-bottom: 1px solid #CFD4DA;
	height: 41px;
}

.drawer-header-title .separator {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	height: 24px;
}

.drawer-header .close-drawer {
	height: 32px;
	width: 32px;
}

.drawer-body {
	height: calc(100vh - 41px);
	overflow-y: scroll;
	overscroll-behavior-y: contain;
}

.drawer-body .filter-container {
	padding: 16px;
}

.drawer-body .drawer-filter .form-option-custom-clear{
	right: 8px;
	height: 15px;
}

.drawer-body .drawer-filter.custom-select-wrapper button{
	height: 32px;
}

.drawer-body .drawer-filter.custom-select-wrapper.disabled button{
	color: var(--nqc-tertiary-disabled);
	border-color: var(--nqc-tertiary-disabled) !important;
	cursor: not-allowed;
}

.drawer-body .drawer-filter.custom-select-wrapper.disabled button svg{
	cursor: not-allowed;
}

.drawer-body .drawer-filter.custom-select-wrapper.disabled button svg path{
	stroke: var(--nqc-tertiary-disabled);
}

.drawer-body .drawer-filter-field-group .gadget .gadget-header{
	padding: 0;
	background: none !important;
	margin-bottom: 0.5rem;
}

.drawer-body .drawer-filter-field-group .gadget .gadget-header h2{
	font-size: 14px !important;
	font-weight: bold;
}

.drawer-body .drawer-filter-field-group .gadget .gadget-body{
	background: none;
	border: none;
}

.drawer-body .drawer-filter-field-group .drawer-filter{
	font-size: 16px;
	background: none;
}

.drawer-body .drawer-filter-field-group .drawer-filter label{
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	padding: 0 0 0 33px !important;
}

.drawer-body .drawer-filter-field-group .drawer-filter label::before{
	background-color: white;
	width: 16px;
    height: 16px;
    top: 5px;
	left: 3px;
}

.drawer-transparent-container-default {
	background-color: transparent;
	position: fixed;
	top: 0;
	left: 340px;
	width: calc(100vw - 340px);
	height: 100%;
	z-index: 9000;
	display: none;
}

/*GENERAL STYLING*/
.hide {display: none !important}

/*RESPONSIVE STYLING*/
@media screen and (max-width: 469px) {
	
}

@media screen and (min-width: 470px) {
	.nqc-pill {
		width: 80%;
	}
}

@media screen and (max-width: 699px) {
	.post-it-note {
		width: 100%;
		margin-right: 0px;
	}
}

@media screen and (min-width: 700px) {
	.nqc-pill {
		width: 70%;
	}
}

@media screen and (max-width: 849px) {
	.post-it-note-container {
		justify-content: normal;
		flex-wrap: wrap !important;
	}
	.post-it-note {
		flex: none;
	}
}

@media screen and (min-width: 850px) {

}

@media screen and (max-width: 1049px) {

}

@media screen and (min-width: 1050px) {

}

@media screen and (max-width: 1149px) {
	.tablet-view { display: block;}
	.window-view { display: none; }
	.tablet-view-flex { display: flex;}
	.window-view-flex { display: none; }
	.questionnaire-list-extra-button {
		border-top-right-radius: 0px;
		border-bottom-left-radius: 4px;
		justify-content: center;
	}
	.questionnaire-list-extra-buttons {
		width: auto;
		flex-direction: row;
		border-left: 0px;
		border-top: 1px solid #d0d4da;
	}
	.questionnaire-list-extra-buttons .questionnaire-list-extra-button-top{
		border-top-right-radius: 0px;
		border-bottom-left-radius: 4px;
	}
	.questionnaire-list-extra-buttons .questionnaire-list-extra-button-middle:not(.nqc-secondary-tile-button){
		border-bottom: 0px;
		border-right: 1px solid #d0d4da;
	}
}

@media screen and (min-width: 1150px) {
	.tablet-view { display: none !important; }
	.window-view { display: block !important; }
	.tablet-view-flex { display: none !important; }
	.window-view-flex { display: flex !important; }
}

@media screen and (max-width: 1250px) {

}

.check-box, .radio-button {
	display: none;
}

.check-box-holder{
	display: inline-block;
	background-color: white;
	border: 2px solid var(--nqc-grey);
}

.check-box-holder:has(+ .check-box), .radio-button-holder:has(+ .radio-button), .check-box-holder:has(+ .check-box-small), .radio-button-holder:has(+ .radio-button-small){
	min-width: 20px;
	min-width: 20px;

	min-height: 20px;
	max-height: 20px;
}

.check-box-holder:has(+ .check-box:checked){
	background-image: url("../images/gadgets/tick.svg");
	background-repeat: no-repeat;
	background-position: 50% 50%;
}

.check-box-holder:has(+ .check-box-small:checked){
	background-size: 10px 10px;
}

.check-box-label, .radio-button-label{
	cursor: pointer;

	display: flex;
	align-items: center;
	column-gap: 10px;

	user-select: none;
}

.check-box-label.disabled, .radio-button-label.disabled,
.check-box-label:disabled, .radio-button-label:disabled{
	color: var(--nqc-grey);
	cursor: not-allowed;
}

.radio-button-holder{
	display: inline-block;
	background-color: white;
	border: 1px solid var(--nqc-grey);
	border-radius: 50%;
}

.radio-button-holder:has(+ .radio-button:checked){
	background-image: radial-gradient(circle at center, black 42%, transparent 50%);
}

.radio-button-inline{
	display: inline-block;
}

.radio-button-inline:not(:first-child){
	margin-left: 20px;
}

.timespan-container{
	display: inline-block;
	padding: 8px 16px 8px 16px;
	background-color: var(--nqc-pale-orange);
}

.mr-bubble-counter {
	display: inline-block;
	border-radius: 12px;
	min-width: 24px;
	min-height: 24px;
	padding: 3.5px;
	line-height: 1.4rem;
	vertical-align: middle;
	text-align: center;
	margin-left: 5px;
	border: 1px solid var(--nqc-body-black);
}

.mr-bubble-counter.mr-empty-bubble-counter {
	color: var(--nqc-body-black);
	background-color: transparent;
}

.mr-bubble-counter.mr-filled-bubble-counter {
	color: var(--nqc-white);
	background-color: var(--nqc-body-black);
}

.check-box-toggle-button-container {
    align-items: center;
	border-radius: 8px;
	width: fit-content;
	padding: 0.5rem 1rem !important;
	vertical-align: middle;
	color: var(--nqc-body-black);
	transition: background-color 0.21s ease-in, color 0.21s ease-in;
}

.check-box-toggle-button-container:hover {
	background-color: var(--nqc-toggle-button-hover);
}

.check-box-toggle-button-container:has(.check-box:checked) {
	background-color: var(--nqc-toggle-button-active);
}

.timespan-limit-container {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.timespan-limit-container > div {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

/** Fixed bottom banner **/
.fixed-bottom-banner {
	background: var(--nqc-white);
	border-top: 1px solid #bfc1c3;

	bottom: 0;
	width: 100%;

	float:left;
	position: sticky;
}

.fixed-bottom-banner input {
	margin: 0px;
}

.score-indicator {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 2px;
	align-items: center;
	width: 58px;
	height: 48px;
	border-radius: 4px;
}

.score-indicator-letter {
	font-size: 28px;
	font-weight: 700;
	line-height: 42px;
}

.score-indicator-number {
	font-size: 16px;
	font-weight: 700;
}

.score-indicator-risk-high {
	background-color: var(--nqc-questionnaire-risk-high);
	color: var(--nqc-white);
}

.score-indicator-risk-medium {
	background-color: var(--nqc-questionnaire-risk-medium);
	color: var(--nqc-white);
}

.score-indicator-risk-low {
	background-color: var(--nqc-questionnaire-risk-low);
	color: var(--nqc-white);
}

.score-indicator-risk-indeterminate {
	background-color: var(--nqc-questionnaire-risk-none);
	color: var(--nqc-text-black);
}

.task-complete {
	background-color: #6AC50F;
	color: #6AC50F;
}

.task-incomplete {
	background-color: #DA1E28;
	color: #DA1E28;
}

.trend-indicator {
	display: flex;
	border-radius: 4px;
	width: 58px;
	height: 21px;
	justify-content: center;
	align-items: center;
	gap: 4px;
	border-left: 4px;
	border-right: 4px;
}

.trend-indicator-percent {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2px;
	color: var(--nqc-text-black);
	font-size: 14px;
	font-weight: 700;
}

.trend-indicator-positive {
	background-color: #DEF1E4;
}

.trend-indicator-negative {
	background-color: #F9DDDF;
}

.score-rating-overview {
	padding-left: 17px;
	padding-right: 17px;
}

.score-rating-overview-option {
	position: relative;
	padding-top: 81px;
	display: inline-flex;
	flex-direction: column;
	justify-content: end;

	text-align: center;
	font-size: 14px;
}

.score-rating-overview-option-colour-bar {
	height: 4px;
	width: 32px;
	border-radius: 1px;
}

.score-rating-overview-option > .score-trend-indicator {
	position: absolute;
	bottom: 25px;
	left: -13px;
}

.tile {
	background-color: var(--nqc-neutral);
	border-radius: 4px;
	padding: 16px;
	min-width: fit-content;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.tile-warning {
	background-color: var(--nqc-pale-orange);
}

.tile-title {
	margin-bottom: 4px;
	font-size: 16px;
	font-weight: 700;
}

.tile-content {
	font-size: 28px;
	font-weight: 700;
}

.inline-tile-group {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.days-tag {
	padding: 4px 8px 4px 8px;

	display: inline-flex;
	gap: 4px;
	align-items: center;

	font-size: 16px;
	font-weight: 700;

	color: var(--nqc-questionnaire-risk-low);
	border-radius: 4px;
	background-color: var(--nqc-white);
}

.days-tag-warning {
	color: var(--nqc-questionnaire-risk-medium);
}

.days-tag-expired {
	color: var(--nqc-questionnaire-risk-high);
}

.date-days-tag {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 700;
}

.percent-horizontal-bar-graph-title {
	color: var(--nqc-text-black);

	font-size: 14px;
	font-weight: 700;
	line-height: 21px;

	margin-bottom: 14px
}

.percent-horizontal-bar-graph-container {
	display: flex;
}

.percent-horizontal-bar-graphs {
	background: repeating-linear-gradient(
		to right,
		transparent 0%,
		transparent calc(10% - 1px), #CFD4DA calc(10% - 1px), #CFD4DA 10%, transparent 10%,
		transparent calc(20% - 1px), #CFD4DA calc(20% - 1px), #CFD4DA 20%, transparent 20%,
		transparent calc(30% - 1px), #CFD4DA calc(30% - 1px), #CFD4DA 30%, transparent 30%,
		transparent calc(40% - 1px), #CFD4DA calc(40% - 1px), #CFD4DA 40%, transparent 40%,
		transparent calc(50% - 1px), #CFD4DA calc(50% - 1px), #CFD4DA 50%, transparent 50%,
		transparent calc(60% - 1px), #CFD4DA calc(60% - 1px), #CFD4DA 60%, transparent 60%,
		transparent calc(70% - 1px), #CFD4DA calc(70% - 1px), #CFD4DA 70%, transparent 70%,
		transparent calc(80% - 1px), #CFD4DA calc(80% - 1px), #CFD4DA 80%, transparent 80%,
		transparent calc(90% - 1px), #CFD4DA calc(90% - 1px), #CFD4DA 90%, transparent 90%,
		transparent 100%
	);

	border-left: 1px solid #CACACA;
	border-right: 1px solid #CACACA;

	padding-top: 2px;

	display: inline-block;
	width: 100%;
}

.percent-horizontal-bar-graph {
	display: flex;
	align-items: center;
	position: relative;
	height: 24px;
	margin-bottom: 4px;
}

.percent-horizontal-bar-graph-content {
	text-align: right;
	height: 100%;

	transition: background-color 0.21s ease-in-out;
}

.percent-horizontal-bar-graph-content.animate {
	animation: 1s linear 0s 1 percent-horizontal-bar-graph-content-intro;
}

@keyframes percent-horizontal-bar-graph-content-intro {
	0% {
		max-width: 0%;
	}
	100% {
		max-width: 100%;
	}
}

.percent-horizontal-bar-graph-marker-group {
	display: flex;
	flex-direction: column;
	opacity: 1;

	position: absolute;
	width: 5px;
}

.percent-horizontal-bar-graph-marker {
	flex: 1;

	transition: all 0.21s ease-in-out;
}

.percent-horizontal-bar-graph-marker-group.animate {
	animation: 1.5s linear 0s 1 percent-horizontal-bar-graph-marker-intro forwards;
}

@keyframes percent-horizontal-bar-graph-marker-intro {
	0% {
		opacity: 0;
	}
	66% {
		opacity: 0
	}
}

.horizontal-bar-values {
	display: inline-block;
	width: 3%;

	margin-left: 8px;
	margin-right: 8px;
}

.horizontal-bar-value {
	height: 24px;
	line-height: 24px;
	margin-bottom: 4px;
	text-align: right;

	font-size: 14px;
	font-weight: 400;
	color: #868E96;
}

.horizontal-bar-key {
	position: absolute;
	right: 10px;
	line-height: 24px;

	font-size: 14px;
	font-weight: 700;
	color: var(--nqc-text-black);
}

.award-bright-green {
	background-color: #C3E89F;
}

.award-bright-amber {
	background-color: #FFE59D;
}

.award-bright-red {
	background-color: #F0A5A9;
}

.award-bright-grey {
	background-color: #EEE;
}

.percent-horizontal-bar-graphs-container {
	flex: 1;
}

.percent-horizontal-bar-graph-graduation {
	position: relative;
	height: 21px;

	color: #868E96;
	font-size: 14px;
	line-height: 21px;
	font-weight: 700;
}

.percent-horizontal-bar-graph-graduation-key {
	position: absolute;
}

.award-indicator-background-dark-grey {
	background-color: #515151!important;
}

.award-indicator-background-purple {
	background-color: var(--nqc-award-purple)!important;
}

.award-indicator-background-purple2 {
	background-color: var(--nqc-award-purple2)!important;
}

.award-indicator-background-turquoise {
	background-color: var(--nqc-award-turquoise)!important;
}

.award-indicator-background-lightblue, .award-indicator-background-lighblue {
	background-color: var(--nqc-award-lightblue)!important;
}

.award-indicator-background-orange {
	background-color: var(--nqc-award-orange)!important;
}

.award-indicator-background-grey2 {
	background-color: var(--nqc-award-grey2)!important;
}

.common-margin-top-16 {
	margin-top: 16px!important;
}

.common-margin-bottom-16 {
	margin-bottom: 16px!important;
}

.common-padding-bottom-16 {
	padding-bottom: 16px!important;
}

.common-margin-top-20 {
	margin-top: 20px!important;
}

.common-margin-bottom-20 {
	margin-bottom: 20px!important;
}

.common-flex-0 {
	flex: 0!important;
}

.common-opacity-0 {
	opacity: 0!important;
}

.colour-key-item {
	transition: all 0.21s ease-in-out;
}

.inline-colour-key-group {
	display: flex;
	flex-wrap: wrap;
	column-gap: 16px;
}

.inline-colour-key-item {
	white-space: nowrap;
}

.inline-colour-key-item-swatch {
	display: inline-block;

	width: 12px;
	height: 12px;

	border-radius: 1px;
}

.inline-colour-key-item-label {
	display: inline;

	vertical-align: bottom;
	margin-left: 8px;

	font-size: 12px;
	font-weight: 400;
	line-height: 18px;
}

.nqc-link-q {
	font-feature-settings: "liga" off, "clig" off;
	text-decoration: none;
	font-size: 16px;
	font-weight: 400;
	line-height: normal;
}

.completion-percentage-pie-chart-container {
	display: flex;
	flex-direction: column;
	align-items: center;
    justify-content: space-between;
}

.completion-percentage-pie-chart {
	width: fit-content;
	position: relative;
}

.completion-percentage-pie-chart-completion-readout {
	position: absolute;

	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);

	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
}

.completion-percentage-pie-chart-key {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.completion-percentage-bar-chart {
	display: flex;
}

.completion-percentage-bar {
	border-radius: 0px 4px 4px 0px;
}

.compliance-percentage-bar-chart {
	width: 80px;
	height: 8px;

	border-radius: 0px 4px 4px 0px;
}

.buyer-compliance-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;

	font-size: 14px;
	font-weight: 400;
}

.buyer-compliance-row-group-container {
	border-top: 1px solid #BFC1C3;
}

.buyer-compliance-row-group {
	border-bottom: 1px solid #BFC1C3;
	overflow-y: auto;
	padding: 16px 8px 16px 8px;
}

.buyer-compliance-row-data {
	display: flex;
	align-items: center;
}

.buyer-compliance-row-task-readout {
	min-width: 64px;
	text-align: right;
	vertical-align: middle;

	font-size: 14px;
	font-weight: 400;
}

.no-top-border {
	border-top: none!important;
}

.attachment-with-download {
	display: flex;
	justify-content: space-between;
	align-items: center;

	margin-bottom: 16px;
}

.attachment-with-download-name-question {
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;
}

.attachment-with-download-question {
	display: inline-block;
	margin-left: 16px;

	padding: 1.5px 8px 1.5px 8px;
	border: 1px solid #CFD4DA;
	border-radius: 4px;

	color: #868E96;
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
}

.inline-tile-group .gadget {
	margin-bottom: 0;
	height: 270px;
}

.inline-tile-group .gadget-header {
	min-height: 50px;
}

.inline-tile-group #nqcmap_gadget_body {
	height: 100%!important;
}

.inline-tile-group #standard-googlemap-canvas {
	height: 100%!important;
	width: auto!important;
	float: unset!important;
}

.completion-percentage-pie-chart-container-container {
	min-width: 320px;
	width: 0.25%;
}

.completion-percentage-pie-chart CIRCLE[name="foreground"].animate {
	animation: attr(--data-animation-duration s) linear 0s 1 completion-percentage-pie-chart-fill-animation forwards;
}

@keyframes completion-percentage-pie-chart-fill-animation {
	0% {
		stroke-dasharray: 0 calc(pi * 100%);
	}
}

/* Generic Search component start*/

.q-generic-search-container {
	transition: max-width 0.3s ease-out;
	min-width: 33px;
	max-width: 100%;
}

.gadget-header .q-generic-search-container {
	display: block !important;
}

.gadget-header .generic-search-result-list-container {
	display: block !important;
}

.q-generic-search-container.q-generic-search-hide {
	max-width: 33px;
}

.q-generic-search-container-align-right {
	margin-left: auto;
	margin-right: 0px;
}

.q-generic-search {
	border-radius: 5px;
	border: 1px solid #ADB5BD;
	font-size: 14px;
	font-weight: 400;
	line-height: 21px;

	transition: border 0.3s ease-out, padding 0.3s ease-out, opacity 0.3s ease-in;
	min-width: 0px;
	min-height: 33px;
}

.q-generic-search-collapse-button {
	z-index: 1;
}

.q-generic-search-expand-button {
	z-index: 2;
}

.q-generic-search-hide > .q-generic-search {
	padding-left: 0px!important;
	padding-right: 0px!important;
	border: 0px solid transparent;

	opacity: 0;
	pointer-events: none;
}

.q-generic-search-hide > .q-generic-search-collapse-button {
	opacity: 0;
	pointer-events: none;
}

.q-generic-search-container:not(.q-generic-search-hide) > .q-generic-search-expand-button {
	pointer-events: none;
}

.q-generic-search:focus {
	border: 1px solid var(--nqc-black);
}

.q-generic-search::placeholder {
	color: #868E96;
}
.q-generic-search::placeholder:active {
	color: black;
}

.generic-search-result-list-container {
	background: var(--box-panels-default, #FFF);
	border-radius: 5px;
	box-shadow: 1px 4px 4px 0 rgba(0, 0, 0, 0.16), 0 -0.5px 2px 0 rgba(0, 0, 0, 0.06);
	font-size: 14px;
	line-height: 21px;
	font-weight: 400;
	/** max-height: 4 * button-tertiary height + ([generic-search-result:not(:last-child)] * 3)) **/
	max-height: 152px;
	max-width: 420px;
	min-width: 100%;
	overflow-y: auto;
}

.generic-search-result-list {
	list-style-type: none;
}

.generic-search-result-non-interactable {
	pointer-events: none;
	color: #868E96;
	padding: 8px 16px;
	text-wrap: nowrap;
	transition: background-color 0.21s ease-in;
}

.generic-search-result SPAN {
	text-wrap: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

a.generic-search-result:focus {
	background-color: var(--nqc-tertiary-hover);
}

LI.generic-search-result {
	margin-bottom: unset!important;
}

#q_sharing_buyer_selected_nameplate {
	background-color: #F8F9FA;
	margin-bottom: 50px;
	min-height: 50px;
	padding: 8px 16px;
	font-size: 21px;
	line-height: 32px;
	font-weight: bold;
}

.dropdown-button{
	position: relative; 
	display: flex;
	border-radius: 5px; 
	transition: background-color 0.21s ease-in;
	padding: 0.5rem !important;
}

.dropdown-button.nqc-cta{
	padding: 0.5rem 1rem !important;
}