/*CSS variables*/
:root {
	--nqc-primary: #0A4F16;
	--nqc-black: #000000;
	--nqc-white: #ffffff;
	--nqc-red: #9E1420;
	--nqc-orange: #F47738;
	--nqc-green: #149E2B;
	--nqc-sepia: #9E5614;
	--nqc-transparent: transparent;
	--nqc-body-black: #161616;
	
	--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;
}

/*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 {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 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 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;
}

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

.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*/
}


.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;
}

.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;
}
/* ================== */

/* 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;
}

.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;
}

/* 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;
}

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


/*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) {

}

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

}

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

}