/* ------------------------------------------------------- */

.nqSpinnerIconFill {
  transform-origin: center;
  animation: nqSpinnerIconAnimation .75s infinite linear;
}

@keyframes nqSpinnerIconAnimation {
  100% {
    transform:rotate(360deg)
  }
}

/* ------------------------------------------------------- */

/* ------------------------------------------------------- */

.nqModal {
  margin: auto auto;
  border-radius: 8px;
  border-width: 0;
  overflow: hidden;
  max-height: 80%;
}

dialog.nqModal::backdrop {
  background: var(--colorBackdrop);
}

.nqModalContent {
  width: 100%;
  height: 100%;
  background-color: white;
}

.nqModalContent {
  display: flex;
  flex-direction: column;
}

.nqModalHeading {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 24px;
}

.nqModalInteraction {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: auto;
  gap: 16px;
  padding: 24px;
  background-color: whitesmoke;
}

.nqModalHeading h3 {
  font-size: 24px;
  margin: 30px 0px;
}

/* ------------------------------------------------------- */

.nqModalForm {
  min-width: 50%;
}

.nqModalForm .nqModalHeading {
  justify-content: flex-start;
  margin: 0px 0px;
  padding: 20px;
  background-color: var(--modalFormHeaderBackgroundColor);
}

.nqModalForm .nqModalHeading h3 {
  margin: 0px 0px;
  font-size: 16px;
}

.nqModalForm .nqModalBody {
  padding: 32px;
  max-height: 80%;
  overflow: scroll;
}

.nqModalForm .nqModalInteraction {
  justify-content: space-between;
}

/* ------------------------------------------------------- */

/* ------------------------------------------------------- */

.nqMenu {
  background-color: var(--menuBackgroundColor);
  color: var(--menuTextColor);
  width: 100%;
  height: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;

  @media (max-width: 1024px) {
    padding: 0 14px;
  }
}

.nqMenuLogo {
  padding: 70px 0px;
  text-align: center;

  @media (max-width: 1024px) {
    padding: 50px 0px;
  }
}


.nqMenu li:not(.nqMenuLogo) {
  border-bottom: 1px solid var(--menuItemBorderColor);
  overflow: hidden;
  padding: 10px;
  
  @media (max-width: 1024px) {
    border: none !important;
    border-radius: 6px;
    padding: 0;
  }
}

.nqMenu li:nth-child(2), 
.nqMenu li:last-child {
  border-top: 1px solid var(--menuItemBorderColor);
}

.nqMenu li.bottom {
  margin-top: auto;
  border-bottom: none;
}

.nqMenu li a.active {
  background-color: var(--menuSelectedItemBackground);
  border-radius: 6px;
}

.nqMenu li a {
  display: flex;
  flex-direction: row;
  align-items: center;
  text-decoration: none;
  gap: 15px;
  padding: 20px;

  @media (max-width: 1024px) {
    padding: 13px;
  }
}

.nqMenu li a img {
  width: 26px;
  height: 26px;
}

.nqMenu a span {
  @media (max-width: 1024px) {
    display: none;
  }
}

.nqMenu svg {
  fill: white ;
}

/* ------------------------------------------------------- */

/* ------------------------------------------------------- */

/* We don't want the `<NqCard>` to grow to all available space by default; looks wierd :)  */
.nqCard.nqFormCard {
  flex-grow: 0;
}

/* ------------------------------------------------------- */

/* Wraps everything at the top of a form. */
.nqFormHeader {
 padding: var(--spacingLarge);
 border-bottom: 1px solid var(--colorGrayLight);
}

/* ------------------------------------------------------- */

.nqFormColumn {
  display: flex;
  flex-direction: column;
  padding: var(--spacingNormal);
  padding-left: var(--spacingLarge);
  padding-right: var(--spacingLarge);
  border-bottom: 1px solid var(--colorGrayLight);
}

.nqFormColumn label {
  font-weight: bold;
  margin-bottom: var(--spacingTiny);
  display: inline-block;
}

.nqFormColumnFields {
  display: flex;
  flex-direction: row;
  gap: var(--spacingSmall);
}

.nqFormColumn .nqFormRow {
  flex: 1;
  padding-left: 0;
  padding-right: 0;
  border-bottom: none;
}

.nqFormColumnFields .nqFormRow label {
  font-size: 12px;
  font-weight: normal;
}

/* ------------------------------------------------------- */

.nqFormRow {
  display: flex;
  flex-direction: column;
  padding: var(--spacingMedium);
  padding-left: var(--spacingLarge);
  padding-right: var(--spacingLarge);
  border-bottom: 1px solid var(--colorGrayLight);
}

/* ------------------------------------------------------- */

.nqFormColumn label,
.nqFormRow label {
  font-weight: bold;
  margin-bottom: var(--spacingTiny);
  display: inline-block;
}

.nqFormRow [class="nqText"][variant="formInfo"] {
  margin-bottom: var(--spacingMedium);
}

/* ------------------------------------------------------- */

.nqNumberFieldRow,
.nqDatePickerRow {
  display: flex;
  flex-direction: column;
}

/* ------------------------------------------------------- */

.nqFormRowButtons {
  display: flex;
  flex-direction: row;
  gap: var(--spacingNormal);
}

.nqFormRowButtons .nqDeleteButton {
  margin-left: auto;
}

/* ------------------------------------------------------- */

/* ------------------------------------------------------- */

/* Extra Light */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url(45b106123a076a3d9da1.ttf) format('truetype');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* Light */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url(6c8e1d7ccc92d1bf041b.ttf) format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Regular */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url(8b8f90ab0e945b1e795a.ttf) format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Medium */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url(f78ffc04acb877ce387e.ttf) format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Semi Bold */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url(cf92107f36f071f6384c.ttf) format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url(542d4930de15d99be736.ttf) format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------- */

/* Light */
@font-face {
  font-family: 'Fraunces';
  src: url(0d782a0a99afb93505b5.ttf) format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------- */

/* From: https://piccalil.li/blog/a-more-modern-css-reset/ */
*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  min-height: 100%;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
}

body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

ul,
ol {
  list-style: none;
}

body {
  line-height: 1.5;
}

h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

h1, h2,
h3, h4 {
  text-wrap: balance;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

img,
picture {
  max-width: 100%;
  display: block;
}

input, button,
textarea, select {
  font: inherit;
}

textarea:not([rows]) {
  min-height: 10em;
}

:target {
  scroll-margin-block: 5ex;
}

/* ------------------------------------------------------- */

:root {

  /* Use these colors */
  --colorHighlight: rgb(80, 93, 250);
  --colorHighlightLight: rgb(153, 160, 243);
  --colorDark: rgb(0, 0, 0);
  --colorNight: rgb(23, 23, 23);
  --colorLight: rgb(255, 255, 255);
  --colorGrayNormal: rgb(154, 154, 154);
  --colorGrayMedium: rgb(242, 242, 242);
  --colorGrayLight: rgba(112, 112, 112, .1);
  --colorGraySilver: rgb(234, 234, 234);
  --colorSuccessNormal: rgb(31, 122, 31);
  --colorSuccessLight: rgb(39, 229, 160);
  --colorDangerNormal: rgb(252, 90, 90);
  --colorDangerLight: rgb(246, 174, 174);
  --colorBackdrop: rgba(0, 0, 0, 0.7); /* E.g. for modals */

  /* Border radius */
  --radiusTiny: 6px;
  --radiusSmall: 10px;
  --radiusMedium: 20px;
  --radiusGenerous: 25px;
  --radiusLarge: 30px;

  /* Spacing (e.g. margin, padding) */
  --spacingTiny: 8px;
  --spacingSmall: 10px;
  --spacingNormal: 15px;
  --spacingMedium: 20px;
  --spacingGenerous: 24px;
  --spacingLarge: 30px;
  --spacingGrand: 34px;
  --spacingHuge: 40px;

  /* Geometry */
  --geomButtonHeight: 55px;
  --geomTextFieldHeight: 55px;
  --geomNumberFieldHeight: 55px;

  /* Table */
  --tableRowBorderColor: rgba(112, 112, 112, .1);
  --tableRowBackgroundColorHover: whitesmoke;
  --tableTextColor: rgb(112, 112, 112);
  --tableTextColorDark: rgb(23, 23, 23);
  --tableTextColorHighlight: var(--variantHighlightColor);

  /* Schmuck */
  --shadowNormal: 0 3px 10px rgb(0, 0, 0, .1);
  --shadowStrong: 0 3px 10px rgb(0, 0, 0, .25);
  
  /* "old" Bojan styles */
  --variableLightFontWeight: 400;
  --variableRegularFontWeight: 400;
  --variableMediumFontWeight: 500;
  --variableSemiBoldFontWeight: 600;
  --variableBoldFontWeight: 700;

  --variantRegularBorderColor: rgb(234, 234, 234);
  --variantBorder: 1px solid var(--variantRegularBorderColor);
  --variantBorderRadius: 6px;
  --variantNonMandatoryBgColor: rgb(242, 242, 242);
  --variableFontSize: 14px;
  --variantTextColor: rgb(0, 0, 0);
  --variantTextColorLight: rgb(255, 255, 255);
  --variantBgColor: rgb(255, 255, 255);
  --variantPrimaryBgColor: rgb(80, 93, 250);
  --variantPrimaryColor: rgb(0, 0, 0);
  --variantSecondaryColor: rgb(234, 234, 234);
  --variantSoftColor: rgb(154, 154, 154);
  --variantBgColorDark: rgb(0, 0, 0);
  --variantBoxShadow: 0 3px 6px rgb(70, 70, 70, .2);
  --variantDisabledBgColor: rgb(193, 193, 193); 
  --variantPrimaryTextColor: rgb(0, 0, 0);
  --variantCheckboxBgColor: rgb(255, 255, 255);
  --variantCheckboxBorderColor: rgb(193, 193, 193);
  --variantBorderColor: rgb(193, 193, 193);

  --variantHighlightColor: rgb(80, 93, 250);
  --variantToggleBgColor: rgb(168, 168, 168);

  --menuBackgroundColor: rgb(23, 23, 23);
  --menuTextColor: var(--variantTextColorLight);
  --menuSelectedItemBackground: var(--variantHighlightColor);
  --menuItemBorderColor: rgba(46, 46, 46, .7);

  --cardBackgroundColor: rgb(242, 242, 242);
  --cardBackgroundDarkColor: rgb(23, 23, 23);

  --failedColor: rgb(252, 90, 90);

  --adminLayoutBgColor: rgb(229, 229, 229);
}

/* ------------------------------------------------------- */

.nqError {
  color: var(--colorHighlight);
}

/* ------------------------------------------------------- */

[color~="primary"] {
  --variantBgColor: rgb(80, 93, 250);
  --variantPrimaryBgColor: rgb(80, 93, 250);
  --variantTextColor: rgb(255, 255, 255);
  --variantPrimaryTextColor: rgb(255, 255, 255);
}

[color~="primary"]:hover {
  --variantBgColor: rgb(76, 87, 224);
  --variantBoxShadow: none;
}

[color~="secondary"] {
  --variantBgColor: rgb(23, 23, 23);
  --variantPrimaryBgColor: rgb(23, 23, 23);
  --variantTextColor: rgb(255, 255, 255);
  --variantPrimaryTextColor: rgb(255, 255, 255);
}

[color~="secondary"]:hover {
  --variantBgColor: rgb(0, 0, 0);
  --variantBoxShadow: none;
  --variantTextColor: rgb(255, 255, 255);
}

[color~="tertiary"] {
  --variantBgColor: rgb(255, 255, 255);
  --variantPrimaryBgColor: rgb(255, 255, 255);
  --variantTextColor: rgb(0, 0, 0);
  --variantPrimaryTextColor: rgb(0, 0, 0);
}

[color~="tertiary"]:hover {
  --variantBoxShadow: none;
}

/* [color="selected"] {
  --variantPrimaryTextColor: rgb(0, 0, 0);
  --variantPrimaryBgColor: rgb(0, 0, 0);
  --variantSoftBgColor: rgb(227, 239, 251);
} */

[color="neutral"] {
  --variantBgColor: rgb(255, 255, 255);
  --variantPrimaryBgColor: rgb(255, 255, 255);
  --variantTextColor: rgb(0, 0, 0);
  --variantPrimaryTextColor: rgb(0, 0, 0);
  --variableFontSize: 14px;
}

[color="danger"] {
  --variantPrimaryTextColor: rgb(196, 28, 28);
  --variantPrimaryBgColor: rgb(196, 28, 28);
  --variantTextColor: rgb(196, 28, 28);
  --variantBgColor: rgb(196, 28, 28);
}

[color="success"] {
  --variantPrimaryTextColor: rgb(31, 122, 31);
  --variantPrimaryBgColor: rgb(31, 122, 31);
  --variantTextColor: rgb(31, 122, 31);
  --variantBgColor: rgb(31, 122, 31);
}

[color="neutral"] {
  --variantPrimaryTextColor: rgb(99, 107, 116);
  --variantPrimaryBgColor: rgb(99, 107, 116);
  --variantTextColor: rgb(99, 107, 116);
  --variantBgColor: rgb(99, 107, 116);
}

[variant="plain"],
[variant="plain"]:hover {
  --variantBgColor: transparent;
  --variantBorderColor: transparent;
  --variantRegularBorderColor: transparent;
  box-shadow: none;
  --variantTextColor: var(--variantPrimaryTextColor);
}

[variant="outlined"] {
  --variantBgColor: white;
  --variantBorderColor: var(--variantPrimaryBgColor);
  --variantTextColor: var(--variantPrimaryBgColor);
}

[variant="solid"] {
  --variantBgColor: var(--variantPrimaryBgColor);
  --variantBorderColor: var(--variantPrimaryBgColor);
  --variantTextColor: white;
}

[variant~="focus"]:focus {
  --variantRegularBorderColor: rgb(80, 93, 250);
}

/* ------------------------------------------------------- */

[stretched="yes"] {
  flex: 1;
}

/* ------------------------------------------------------- */

[vmargin="tiny"] {
  margin-bottom: var(--spacingTiny);
}

[vmargin="small"] {
  margin-bottom: var(--spacingSmall);
}

[vmargin="normal"] {
  margin-bottom: var(--spacingNormal);
}

[vmargin="generous"] {
  margin-bottom: var(--spacingGenerous);
}

[vmargin="large"] {
  margin-bottom: var(--spacingLarge);
}

[vmargin="grand"] {
  margin-bottom: var(--spacingGrand);
}

[vmargin="huge"] {
  margin-bottom: var(--spacingHuge);
}

/* ------------------------------------------------------- */

[vspace="extrasmall"] {
  padding-top: 5px;
  padding-bottom: 5px;
}

[vspace="small"] {
  padding-top: 10px;
  padding-bottom: 10px;
}

[vspace="normal"] {
  padding-top: 15px;
  padding-bottom: 15px;
}

[vspace="medium"] {
  padding-top: 20px;
  padding-bottom: 20px;
}

[vspace="mediumlarge"] {
  padding-top: 25px;
  padding-bottom: 25px;
}

[vspace="large"] {
  padding-top: 30px;
  padding-bottom: 30px;
}

[hspace="extrasmall"] {
  padding-left: 5px;
  padding-right: 5px;
}

[hspace="small"] {
  padding-left: 10px;
  padding-right: 10px;
}

[hspace="normal"] {
  padding-left: 15px;
  padding-right: 15px;
}

[hspace="medium"] {
  padding-left: 20px;
  padding-right: 20px;
}

[hspace="mediumlarge"] {
  padding-left: 25px;
  padding-right: 25px;
}

[hspace="large"] {
  padding-left: 30px;
  padding-right: 30px;
}

/* ------------------------------------------------------- */

[fsize="tiny"] {
  font-size: 10px;
}

[fsize="smaller"] {
  font-size: 12px;
}

[fsize="small"] {
  font-size: 13px;
}

[fsize="normal"] {
  font-size: 14px;
}

[fsize="medium"] {
  font-size: 16px;
}

[fsize="mediumlarge"] {
  font-size: 18px;
}

[fsize="large"] {
  font-size: 20px;
}

[fsize="larger"] {
  font-size: 24px;
}

[fsize="extralarge"] {
  font-size: 30px;
}

[fsize="huge"] {
  font-size: 36px;
}

[fsize="extrahuge"] {
  font-size: 40px;
}

/* ------------------------------------------------------- */

[fontcolor="dark"] {
  color: rgb(0, 0, 0);
}

[fontcolor="night"] {
  color: rgb(23, 23, 23);
}

[fontcolor="bright"] {
  color: rgb(242, 242, 242);
}

[fontcolor="smoke"] {
  color: rgb(112, 112, 112);
}

[fontcolor="light"] {
  color: rgb(255, 255, 255);
}

[fontcolor="grayer"] {
  color: rgb(154, 154, 154);
}

[fontcolor="inherit"] {
  color: inherit;
}

/* ------------------------------------------------------- */

[fweight="light"] {
  font-weight: 300;
}

[fweight="normal"] {
  font-weight: 400;
}

[fweight="medium"] {
  font-weight: 500;
}

[fweight="semibold"] {
  font-weight: 600;
}

[fweight="bold"] {
  font-weight: 700;
}

[fweight="extrabold"] {
  font-weight: 800;
}

/* ------------------------------------------------------- */

[bordervariant="default"] {
  border: 1px solid var(--variantRegularBorderColor);
}

[rborder="small"] {
  border-radius: 2px;
}

[rborder="normal"] {
  border-radius: 6px;
}

[rborder="medium"] {
  border-radius: 25px;
}

[rborder="large"] {
  border-radius: 30px;
}

.border {
  border: 1px solid var(--variantRegularBorderColor);
}

.borderFocus {
  border-color: rgb(80, 93, 250);
}

.borderMedium {
  border-radius: 6px;
}

.borderLarge {
  border-radius: 30px;
}

.borderRound {
  border-radius: 50%;
}

.paddingVerticalMedium {
  padding-top: 20px; 
  padding-bottom: 20px; 
}

.paddingHorizontalMedium {
  padding-left: 20px; 
  padding-right: 20px; 
}

.paddingSmall {
  padding: 10px;
}

/*
input[haserror="yes"] {
  border-color: rgb(80, 93, 250);
  border-width: 2px;
}
*/

.hideWhenXs {
  @media (max-width: 767px) {
    display: none;
  }
}

.hideWhenSm {
  @media (max-width: 1023px) {
    display: none;
  }
}

.hideWhenMd {
  @media (max-width: 1199px) {
    display: none;
  }
}

.hideWhenLg {
  @media (max-width: 1399px) {
    display: none;
  }
}

.hideWhenXl {
  @media (min-width: 1400px) {
    display: none;
  }
}

/* ------------------------------------------------------- */

.nqInputWrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  transition: border-color 0.4s ease;
  position: relative;
}

.nqInputWrapper textarea {
    resize: none;
}

.nqTextArea,
.nqInput {
  padding-left: var(--spacingMedium);
  padding-right: var(--spacingMedium);
  font-size: 14px;
  font-weight: 500;
  background-color: var(--colorLight);
  color: var(--colorDark);
  height: var(--geomTextFieldHeight);
  width: 100%;
  outline: none;
  border-radius: var(--radiusTiny);
  border: 1px solid var(--colorGraySilver);
}

.nqTextArea {
  padding: var(--spacingMedium);
}

.nqError .nqInput {
  border-color: var(--colorHighlight);
}

.nqError .nqInputField {
  margin-bottom: var(--spacingTiny);
}

.nqInputNonMandatory {
  background-color: var(--variantNonMandatoryBgColor);
}

.nqInput:disabled {
  pointer-events: none;
  background-color: var(--colorGraySilver);
}

.nqInputField {
  position: relative;
  display: flex;
  flex-direction: row;
  flex: 1;
  gap: 16px;
}

.nqInput::-ms-input-placeholder { /* Edge 12-18 */
  color: var(--variantSoftColor);
}

.nqInput::placeholder {
  color: var(--variantSoftColor);
}

.nqInput::-webkit-search-cancel-button {
  display: none;
}

/* ------------------------------------------------------- */

.nqInputEndAdornment {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 15px;
}

/*
  Make sure that the adornment doesn't overlap with the
  endornment. We assume that the adornment is an icon which is
  not too large.
 */
.nqInputWrapper:has(.nqInputEndAdornment) .nqInput {
  padding-right: 50px;
}

/* ------------------------------------------------------- */

.nqCheckboxGroup {
  display: flex;
  gap: 20px;
  flex-direction: column;
}

.nqCheckbox {
  width: fit-content;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 16px;
  position: relative;
  cursor: pointer;
}

.nqCheckbox:hover > .nqCheckboxInputStyledCheckbox{
  border-color: var(--variantPrimaryColor);
}

.nqCheckboxInputStyledCheckbox {
  width: 20px;
  height: 20px;
  min-width: 20px;
  background-color: var(--variantCheckboxBgColor);
  border: 1px solid var(--variantCheckboxBorderColor);
  border-radius: 2px;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.nqCheckboxInput {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 2;
  cursor: pointer;
}

.nqCheckboxInput:checked ~ .nqCheckboxInputStyledCheckbox {
  background-color: var(--variantPrimaryColor);
  border-color: var(--variantPrimaryColor);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.nqCheckboxInput ~ label {
  color: var(--variantSoftColor);
  user-select: none;
  cursor: pointer;
}

.nqCheckboxInput:checked ~ label {
  color: var(--variantPrimaryColor);
}

.nqRadio {
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 1;
}

.nqRadioButtonGroup {
  display: flex;
  gap: 20px;
  flex-direction: column;
}

.nqRadioButton {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 0;
  width: 20px;
  height: 20px;
  border: 1px solid var(--variantBorderColor);
  background-color: var(--variantBgColor);
  transition: background-color .1s ease-in-out;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.nqRadioButton:checked {
  color: var(--variantSoftColor);
  position: relative;
  cursor: pointer;
}

.nqRadioButton:checked {
  background-color: var(--variantPrimaryColor);
  border-color: var(--variantPrimaryColor);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.nqRadioButton:checked::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
}

.nqRadioButton:checked + label {
  color: var(--variantTextColor);
}

.nqLabel {
  color: var(--variantSoftColor);
  user-select: none;
}

.nqSliderWrapper {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.nqSliderWrapperValue {
  font-size: 11px;
  color: var(--variantTextColor);
}

.nqSlider {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}

.nqSliderTrack {
  position: absolute;
  width: 100%;
  height: 6px;
  border-radius: 4px;
  background-color: var(--variantSecondaryColor);
  top: 50%;
  transform: translate(0, -50%);
  z-index: 0;
}

.nqSliderTrackProgess {
  position: absolute;
  height: 6px;
  border-radius: 4px;
  background-color: var(--variantPrimaryColor);
  top: 50%;
  transform: translate(0, -50%);
  z-index: 0;
  width: 0;
}

.nqSlider > input {
  -webkit-appearance: none;
  appearance: none;
  height: 100%;
  background: transparent;
  outline: none;
  width: 100%;
  position: relative;
  z-index: 1;
}

.nqSlider > input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 6px solid white;
  background: var(--variantPrimaryColor);
  cursor: pointer;
  transition: .2s ease-in-out;
  box-shadow: 0 2px 6px rgba(#000, 0.18);
}

.nqSlider > input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--variantPrimaryColor);
  cursor: pointer;
  transition: .2s ease-in-out;
  box-shadow: 0 2px 6px rgba(#000, 0.18);
}

.nqSlider > input.nqSliderInputInactive::-webkit-slider-thumb {
  background: var(--variantSecondaryColor);
}

.nqSlider > input.nqSliderInputInactive::-moz-range-thumb {
  background: var(--variantSecondaryColor);
}

.nqSlider > input::-webkit-slider-runnable-track, 
.nqSlider > input::-moz-range-track {
  background: transparent;
  outline: none;
}

.nqSliderValueIndicator {
  position: absolute;
  padding: 4px 5px;
  color: #fff;
  border-radius: 4px;
  background-color: var(--variantPrimaryColor);
  bottom: calc(100% + 8px);
  font-size: 11px;
}

.nqSliderValueIndicator > div {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

.nqSliderValueIndicator > div:after {
  content:'';
  position: absolute;
  width: 10px;
  height: 10px;
  z-index: 0;
  background-color: var(--variantPrimaryColor);
  left: 50%;
  bottom: -60%;
  transform: rotate(45deg) translateX(-50%);
}

.nqToggleSwitch {
  height: 22px;
  width: 38px;
  border-radius: 25px;
  border: none;
  overflow: hidden;
  position: relative;
}

.nqToggleSwitch > input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  cursor: pointer;
}

.nqToggleSwitchThumb {
  width: 100%;
  height: 100%;
  background-color: var(--variantToggleBgColor);
  padding: 4px;
  transition: 300ms all;
}

.nqToggleSwitchThumb:before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 25px;
    background: white;
    top: 50%;
    transform: translate(0, -50%);
    transition: 300ms all;
}

.nqToggleSwitch > input:checked ~ .nqToggleSwitchThumb {
  background-color: var(--variantBgColorDark);
}

.nqToggleSwitch > input:checked ~ .nqToggleSwitchThumb:before {
  transform: translate(100%, -50%);
}

.nqSelector {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.nqSelector::after {
  content: '';
  position: absolute;
  top: 10px;
  height: 2px;
  width: 100%;
  z-index: 0;
  background-color: rgb(242, 242, 242);
}

.nqSelectBar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

/* ------------------------------------------------------- */

.nqButton {
  color: var(--variantTextColor);
  background-color: var(--variantBgColor);
  padding: 15px;
  height: var(--geomButtonHeight);
  font-size: var(--variableFontSize);
  font-weight: var(--variableSemiBoldFontWeight);
  border-radius: var(--variantBorderRadius);
  box-shadow: var(--variantBoxShadow);
  outline: none;
  border: none;
  cursor: pointer;
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;

  @media (max-width: 1024px) {
    max-width: 100%;
  }
}

.nqButton:disabled {
  pointer-events: none;
  --variantTextColor: var(--variantTextColorLight);
  --variantBgColor: var(--variantDisabledBgColor);
}

/* ------------------------------------------------------- */

.nqFileButton {
  display: none;
}

/* ------------------------------------------------------- */

.nqButton[variant="outlined"] {
  border-width: 2px;
  border-style: solid;
}

.nqButtonSizeSmall {
  height: 30px;
}

.nqDeleteIconButton {
  fill: var(--colorDangerNormal);
  width: 32px;
}

.nqChoiceChips {
  display: flex;
  gap: 10px;
}

.nqChoiceChip {
  background-color: var(--variantBgColor);
  color: var(--variantTextColor);
  font-weight: var(--variableRegularFontWeight);
  border: 1px solid var(--variantRegularBorderColor);
  border-radius: var(--variantBorderRadius);
  font-size: var(--variableFontSize);
  text-align: center;
  padding: 10px 20px;
  cursor: pointer;
}

.nqChoiceChipSelected {
  background-color: var(--variantBgColorDark);
  color: var(--variantTextColorLight);
  box-shadow: var(--variantBoxShadow);
  border-color: transparent;
}

.nqChoiceChipDisabled {
  pointer-events: none;
  background-color: var(--variantDisabledBgColor);
}

/* ------------------------------------------------------- */

.nqSearch .nqInput {
  border: 1px solid var(--colorGraySilver);
}

.nqSearchMagnifierIcon {
  margin-top: 5px;
}

.nqSearchClearIcon {
  padding: 10px;
}

/* ------------------------------------------------------- */

.nqLink {
  font-size: 14px;
  font-weight: var(--variableSemiBoldFontWeight);
  color: var(--variantHighlightColor);
  text-decoration: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.nqLinkDark {
  color: var(--variantPrimaryColor);
}

.nqAccordion {
  display: flex;
  flex-direction: column;
}

.nqAccordionItem {
  width: 100%;
  padding: 20px;
}

.nqItemContent {
  padding: 20px;
}

.nqTreeIcon {
  display: flex;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
  transition: all .4s ease;
}

.nqTreeIconActive {
  transform: rotate(90deg);
}

.nqTreeContent .nqView:last-child {
  border-bottom: none;
}
.nqView {
  border: 0px solid var(--variantRegularBorderColor);
  transition: background-color .3s ease, border-color .3s ease;
  background-color: var(--variantBgColor);
}

.nqViewFocus {
  border-color: var(--variantHighlightColor) !important;
}

/* ------------------------------------------------------- */

.nqText {
  display: inline-block;
  font-size: var(--variableFontSize);
  font-weight: var(--variableMediumFontWeight);
}

.nqTextSelected {
  color: var(--variantTextColor) !important;
}

/* ------------------------------------------------------- */

[class="nqText"][variant="tableStrong"] {
  font-family: 'Plus Jakarta Sans';
  font-size: 14px;
  font-weight: 700;
  color: black;
}

/* Used for the `No data` message in tables. */
[class="nqText"][variant="tableMessage"] {
  font-family: 'Plus Jakarta Sans';
  font-size: 14px;
  font-weight: 700;
  font-style: italic;
  color: rgb(79, 93, 250);
}

[class="nqText"][variant="tableThin"] {
  font-family: 'Plus Jakarta Sans';
  font-size: 14px;
  font-weight: 100;
  color: #171717;
}

[class="nqText"][variant="tableDetailStrong"] {
  font-family: 'Plus Jakarta Sans';
  font-size: 12px;
  font-weight: 700; /* bold */
  color: rgb(112, 112, 112);
}

[class="nqText"][variant="tablePrimary"] {
  font-family: 'Plus Jakarta Sans';
  font-size: 14px;
  font-weight: 600; /* semi bold */
  color: rgb(79, 93, 250);
}

/* ------------------------------------------------------- */

[class="nqText"][variant="cardHeading"] {
  font-family: 'Plus Jakarta Sans';
  font-size: 18px;
  font-weight: 700; /* bold */
  line-height: 0px;
  margin-top: 10px;
}

[class="nqText"][variant="cardSubHeading"] {
  font-family: 'Plus Jakarta Sans';
  font-size: 16px;
  font-weight: 500; /* medium */
  color: rgb(112, 112, 112);
}

[class="nqText"][variant="cardNormal"] {
  font-family: 'Plus Jakarta Sans';
  font-size: 14px;
  font-weight: 500; /* medium */
  color: black;
  line-height: 36px;
}

/* ------------------------------------------------------- */

[class="nqText"][variant="dataTableHeading"] {
  font-family: 'Plus Jakarta Sans';
  font-size: 18px;
  font-weight: 700; /* bold */
  margin-top: 10px;
}

/* ------------------------------------------------------- */

[class="nqText"][variant="statsHeader"] {
  font-family: 'Plus Jakarta Sans';
  font-size: 18px;
  font-weight: 600; /* semi bold */
  color: white;
}

[class="nqText"][variant="statsLabel"] {
  font-family: 'Plus Jakarta Sans';
  font-size: 14px;
  font-weight: 600;
  color: white;
}

[class="nqText"][variant="statsPrimaryNumber"] {
  font-family: 'Plus Jakarta Sans';
  font-size: 40px;
  font-weight: 300; /* light */
  line-height: 53px;
  color: white;
}

[class="nqText"][variant="statsPrimaryLabel"] {
  font-family: 'Plus Jakarta Sans';
  font-size: 12px;
  font-weight: 500; /* medium */
  color: white;
}

[class="nqText"][variant="statsSecondaryNumber"] {
  font-family: 'Plus Jakarta Sans';
  font-size: 40px;
  font-weight: 300; /* light */
  color: rgba(255, 255, 255, 0.4);
}

[class="nqText"][variant="statsSecondaryLabel"] {
  font-family: 'Plus Jakarta Sans';
  font-size: 12px;
  font-weight: 500; /* medium */
  color: rgb(105, 105, 105);
}

/* ------------------------------------------------------- */

[class="nqText"][variant="strong"] {
  font-family: 'Plus Jakarta Sans';
  font-weight: 700; /* bold */
}

[class="nqText"][variant="label"] {
  font-family: 'Plus Jakarta Sans';
  font-weight: 500; /* bold */
}

[class="nqText"][variant="light"] {
  font-family: 'Plus Jakarta Sans';
  font-weight: 300; /* bold */
}

/* ------------------------------------------------------- */

/* Used to add extra information underneath a label for a form row. */
[class="nqText"][variant="formInfo"] {
  font-style: italic;
}

/* ------------------------------------------------------- */

.nqDateSelector {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: auto;
  gap: 10px;
  justify-items: center;
  align-items: center;
  width: 100%;

  @media (max-width: 400px) {
    gap: 6px;
  }
}

/* ------------------------------------------------------- */

.nqGridRow {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1200px;
}

.nqGridCol {
  /*
  padding-left: 16px;
  padding-top: 16px;
 */
}

/* ------------------------------------------------------- */

.nqGridColXs1  { max-width: calc(1/12 * 100%);    flex-basis: calc(1/12 * 100%);  }
.nqGridColXs2  { max-width: calc(2/12 * 100%);    flex-basis: calc(2/12 * 100%);  }
.nqGridColXs3  { max-width: calc(3/12 * 100%);    flex-basis: calc(3/12 * 100%);  }
.nqGridColXs4  { max-width: calc(4/12 * 100%);    flex-basis: calc(4/12 * 100%);  }
.nqGridColXs5  { max-width: calc(5/12 * 100%);    flex-basis: calc(5/12 * 100%);  }
.nqGridColXs6  { max-width: calc(6/12 * 100%);    flex-basis: calc(6/12 * 100%);  }
.nqGridColXs7  { max-width: calc(7/12 * 100%);    flex-basis: calc(7/12 * 100%);  }
.nqGridColXs8  { max-width: calc(8/12 * 100%);    flex-basis: calc(8/12 * 100%);  }
.nqGridColXs9  { max-width: calc(9/12 * 100%);    flex-basis: calc(9/12 * 100%);  }
.nqGridColXs10 { max-width: calc(10/12 * 100%);   flex-basis: calc(10/12 * 100%); }
.nqGridColXs11 { max-width: calc(11/12 * 100%);   flex-basis: calc(11/12 * 100%); }
.nqGridColXs12 { max-width: calc(12/12 * 100%);   flex-basis: calc(12/12 * 100%); }

@media (min-width: 768px) {
  .nqGridColSm1  { max-width: calc(1/12 * 100%);  flex-basis: calc(1/12 * 100%);  }
  .nqGridColSm2  { max-width: calc(2/12 * 100%);  flex-basis: calc(2/12 * 100%);  }
  .nqGridColSm3  { max-width: calc(3/12 * 100%);  flex-basis: calc(3/12 * 100%);  }
  .nqGridColSm4  { max-width: calc(4/12 * 100%);  flex-basis: calc(4/12 * 100%);  }
  .nqGridColSm5  { max-width: calc(5/12 * 100%);  flex-basis: calc(5/12 * 100%);  }
  .nqGridColSm6  { max-width: calc(6/12 * 100%);  flex-basis: calc(6/12 * 100%);  }
  .nqGridColSm7  { max-width: calc(7/12 * 100%);  flex-basis: calc(7/12 * 100%);  }
  .nqGridColSm8  { max-width: calc(8/12 * 100%);  flex-basis: calc(8/12 * 100%);  }
  .nqGridColSm9  { max-width: calc(9/12 * 100%);  flex-basis: calc(9/12 * 100%);  }
  .nqGridColSm10 { max-width: calc(10/12 * 100%); flex-basis: calc(10/12 * 100%); }
  .nqGridColSm11 { max-width: calc(11/12 * 100%); flex-basis: calc(11/12 * 100%); }
  .nqGridColSm12 { max-width: calc(12/12 * 100%); flex-basis: calc(12/12 * 100%); }
}

@media (min-width: 1024px) {
  .nqGridColMd1  { max-width: calc(1/12 * 100%);  flex-basis: calc(1/12 * 100%);  }
  .nqGridColMd2  { max-width: calc(2/12 * 100%);  flex-basis: calc(2/12 * 100%);  }
  .nqGridColMd3  { max-width: calc(3/12 * 100%);  flex-basis: calc(3/12 * 100%);  }
  .nqGridColMd4  { max-width: calc(4/12 * 100%);  flex-basis: calc(4/12 * 100%);  }
  .nqGridColMd5  { max-width: calc(5/12 * 100%);  flex-basis: calc(5/12 * 100%);  }
  .nqGridColMd6  { max-width: calc(6/12 * 100%);  flex-basis: calc(6/12 * 100%);  }
  .nqGridColMd7  { max-width: calc(7/12 * 100%);  flex-basis: calc(7/12 * 100%);  }
  .nqGridColMd8  { max-width: calc(8/12 * 100%);  flex-basis: calc(8/12 * 100%);  }
  .nqGridColMd9  { max-width: calc(9/12 * 100%);  flex-basis: calc(9/12 * 100%);  }
  .nqGridColMd10 { max-width: calc(10/12 * 100%); flex-basis: calc(10/12 * 100%); }
  .nqGridColMd11 { max-width: calc(11/12 * 100%); flex-basis: calc(11/12 * 100%); }
  .nqGridColMd12 { max-width: calc(12/12 * 100%); flex-basis: calc(12/12 * 100%); }
}

@media (min-width: 1200px) {
  .nqGridColLg1  { max-width: calc(1/12 * 100%);  flex-basis: calc(1/12 * 100%);  }
  .nqGridColLg2  { max-width: calc(2/12 * 100%);  flex-basis: calc(2/12 * 100%);  }
  .nqGridColLg3  { max-width: calc(3/12 * 100%);  flex-basis: calc(3/12 * 100%);  }
  .nqGridColLg4  { max-width: calc(4/12 * 100%);  flex-basis: calc(4/12 * 100%);  }
  .nqGridColLg5  { max-width: calc(5/12 * 100%);  flex-basis: calc(5/12 * 100%);  }
  .nqGridColLg6  { max-width: calc(6/12 * 100%);  flex-basis: calc(6/12 * 100%);  }
  .nqGridColLg7  { max-width: calc(7/12 * 100%);  flex-basis: calc(7/12 * 100%);  }
  .nqGridColLg8  { max-width: calc(8/12 * 100%);  flex-basis: calc(8/12 * 100%);  }
  .nqGridColLg9  { max-width: calc(9/12 * 100%);  flex-basis: calc(9/12 * 100%);  }
  .nqGridColLg10 { max-width: calc(10/12 * 100%); flex-basis: calc(10/12 * 100%); }
  .nqGridColLg11 { max-width: calc(11/12 * 100%); flex-basis: calc(11/12 * 100%); }
  .nqGridColLg12 { max-width: calc(12/12 * 100%); flex-basis: calc(12/12 * 100%); }
}

@media (min-width: 1400px) {
  .nqGridColXl1  { max-width: calc(1/12 * 100%);  flex-basis: calc(1/12 * 100%);  }
  .nqGridColXl2  { max-width: calc(2/12 * 100%);  flex-basis: calc(2/12 * 100%);  }
  .nqGridColXl3  { max-width: calc(3/12 * 100%);  flex-basis: calc(3/12 * 100%);  }
  .nqGridColXl4  { max-width: calc(4/12 * 100%);  flex-basis: calc(4/12 * 100%);  }
  .nqGridColXl5  { max-width: calc(5/12 * 100%);  flex-basis: calc(5/12 * 100%);  }
  .nqGridColXl6  { max-width: calc(6/12 * 100%);  flex-basis: calc(6/12 * 100%);  }
  .nqGridColXl7  { max-width: calc(7/12 * 100%);  flex-basis: calc(7/12 * 100%);  }
  .nqGridColXl8  { max-width: calc(8/12 * 100%);  flex-basis: calc(8/12 * 100%);  }
  .nqGridColXl9  { max-width: calc(9/12 * 100%);  flex-basis: calc(9/12 * 100%);  }
  .nqGridColXl10 { max-width: calc(10/12 * 100%); flex-basis: calc(10/12 * 100%); }
  .nqGridColXl11 { max-width: calc(11/12 * 100%); flex-basis: calc(11/12 * 100%); }
  .nqGridColXl12 { max-width: calc(12/12 * 100%); flex-basis: calc(12/12 * 100%); }
}

/* ------------------------------------------------------- */
.nqSelect.dark > .inputWrapper, 
.nqSelect.dark .nqSelectScrollableMenu,
.nqSelect.dark .nqSelectScrollableMenu > .nqView
{
  background-color: rgb(36, 36, 36);
  border-color: rgb(46, 46, 46);
}

.nqSelect.dark .inputWrapper {
  border: none;
  background-color: black;
}

.nqSelect.dark .inputWrapper.nqViewFocus {
  background-color: rgb(65, 65, 65);
}

.nqSelect.dark .nqSelectMenu {
  border: none;
  background-color: transparent;
  transform: translateY(0);
}

.nqSelect.dark .nqText {
  color: #fff;
}

.nqSelect {
  background-color: transparent;
  border: none;
}

.nqSelect .nqSearch {
  visibility: hidden;
}

.nqSelect.nqSelectOpen .nqSearch {
  visibility: visible;
}

.nqSelect.nqSelectDisabled .nqView {
  background-color: var(--colorGraySilver);
}

.nqSelectItem {
  position: relative;
}

.nqSelectMenu {
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  max-height: 0;
  top: 100%;
  left: 0;
  right: 0;
  margin: 0;
  border: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 0px solid transparent;
  overflow: hidden;
  z-index: 666;
  transition: max-height .3s ease-in;
  transform: translateY(-6px);
  padding-bottom: 1.5px;
}

.nqSelectMenuExpanded {
  max-height: 300px;
  height: fit-content;
  border: 1px solid var(--colorHighlight);
  border-top: 1px solid var(--colorGraySilver);
}

.inputWrapper {
  transition: none;
  border: 1px solid var(--variantRegularBorderColor);
}

.inputWrapper.nqViewFocus {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  /* border-bottom: none; */
}


.nqSelectScrollableMenu {
  overflow-y: auto;
  flex: 1;
}

.nqSelectScrollableMenu::-webkit-scrollbar {
  width: 14px;
}

.nqSelectScrollableMenu::-webkit-scrollbar-thumb {
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  background-color: var(--variantRegularBorderColor);
  -webkit-border-radius: 7px;
  -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05),
  inset 1px 1px 0px rgba(0, 0, 0, 0.05);
}

.nqSelectScrollableMenu::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.nqSelectScrollableMenu::-webkit-scrollbar-corner {
  background-color: transparent;
}

.nqPaging {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: auto;
}

.nqPaging .nqButton {
  box-shadow: none;
  background-color: transparent;
}

/* ------------------------------------------------------- */

.nqFormHeading,
.nqTableHeading {
  color: var(--tableHeadingTextColor);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  vertical-align: baseline;
}

.nqTable {
  border-collapse: collapse;
  table-layout: fixed;
  align-self: flex-start; /* We don't want to default to `normal` aka stretch. */
  margin-bottom: var(--radiusSmall); /* This prevents the table to break out the `<NqCard>` which has a radius. To see this, remove this line and hover over the last row of a list. */
}

.nqTable th {
  text-align: left;
}

.nqTable th:first-child {
  padding-left: var(--spacingMedium);
}

.nqTable tbody tr:first-child {
  border-top: 1px solid var(--tableRowBorderColor);
  cursor: pointer;
}

.nqTable tbody tr {
  border-bottom: 1px solid var(--tableRowBorderColor);
  cursor: pointer;
}

.nqTable tbody tr:last-child {
  border-bottom: none;
}

.nqTable tbody tr td {
  padding: 20px 5px;
  color: var(--tableTextColor);
  font-weight: var(--variableLightFontWeight);
}

.nqTable tbody tr td:first-child {
  padding-left: var(--spacingLarge);
}

.nqTable tbody tr td:last-child {
  padding-right: var(--spacingLarge);
}

.nqTable tbody tr td:nth-child(1) {
  color: var(--tableTextColorDark);
}

.nqTable tr:hover td {
  background-color: var(--tableRowBackgroundColorHover);
}

.nqTableInteraction {
  display: flex;
  flex-direction: row;
  margin-bottom: 20px;
  align-items: center;
}

.nqTableButtons {
  margin-left: auto;
}

.nqTableFilterBar {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  padding-top: 20px;
}

.nqTableFilterBar .nqFilterContainer {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 24px;
  flex: 1;
}

/* ------------------------------------------------------- */

.nqActivityIndicator {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: all;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
}

.nqActivityIndicator.active {
  display: block;
}

/* ------------------------------------------------------- */

.nqActivityLoader {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 40px;
  aspect-ratio: 1.154;
  --_g: no-repeat radial-gradient(farthest-side,#fff 90%,#0000);
  background: 
    var(--_g) 50%  0,
    var(--_g) 0    100%,
    var(--_g) 100% 100%;
  background-size: 35% calc(35%*1.154);
  animation-name: nqActivityLoaderAnimation;
  animation-iteration-count: infinite;
  animation-duration: 500ms;
}

@keyframes nqActivityLoaderAnimation {
  50%,100% {
    background-position: 100% 100%,50% 0,0 100%
  } 
}

/* ------------------------------------------------------- */

.nqMessageOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: all;
  background-color: var(--colorBackdrop);
  cursor: pointer;
}

.nqMessageOverlay.active {
  display: block;
}

.nqMessage {
  border-radius: 10px;
  background-color: #fff;
  padding: 20px;
  display: flex;
  gap: 20px;
  align-items: center;
  transform: translate(0, 0);
  transition: transform .3s ease-in;
  white-space: pre;
  position: fixed;
  top: 100px;
  left: 100px;
  right: 100px;
}

.nqMessage .nqMessageContent > * {
  display: block;
}


.nqLine {
  height: 1px;
  background-color: rgba(112, 112, 112, 0.1);
  align-self: stretch; /* We want a line to span the available space, right? */
  margin-top: 5px;
  margin-bottom: 5px;
}

/* ------------------------------------------------------- */

.nqAdminContainer {
  display: flex;
  flex-direction: row;
  flex: 1;
}

.nqAdminMenu {
  display: flex;
  width: 250px;

  @media (max-width: 1024px) {
    width: 80px;
  }
}

.nqAdminContent {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 20px;
  padding: 20px 30px;
  background-color: var(--adminLayoutBgColor);
}

.nqAnimatedArrow {
  display: flex;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
  transition: transform 0.4s ease;
}
/* ------------------------------------------------------- */

.nqDataTableContent {
  display: flex;
  flex-direction: row;
}

.nqTable {
  flex: 1;
}

.nqFilter.active {
  margin-left: 30px !important;
  margin-right: 20px !important;
}

.nqDataTableSelect {
  height: 40px;
  max-width: 180px;
  min-width: 140px;
  margin-left: auto;
}

.nqDataTableSelect .inputWrapper {
  height: 100%;
  padding: 10px 15px;
}

.nqDataTableHeader {
  padding: 20px 30px;
}

/* ------------------------------------------------------- */

.nqDataTableHeader input[type="search"] {
  max-height: 40px; /* The search bar needs to be slightly smaller than normal inputs. */
}

/* ------------------------------------------------------- */

/* Make sure that the "interaction" (e.g. add button) is aligned to the right of the heading. */
.nqDataTableHeader .nqCardHeading {
  justify-content: space-between;
}

/* ------------------------------------------------------- */

.nqDataTableInteraction {
  display: flex;
  flex-direction: row;
  gap: var(--spacingNormal);
}

/* ------------------------------------------------------- */

.nqFilter {
  max-width: 0px;
  flex: 1;
  transition: max-width .3s ease-in, margin .2s ease-in, visibility .2s ease;
  margin: 0;
  visibility: hidden;
  overflow: hidden;
}

.nqFilter.active {
  max-width: 400px;
  visibility: visible;
}

.nqFilterButton {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 10px 20px;
  max-width: 100px;
  box-shadow: none;
  border: 1px solid var(--variantRegularBorderColor);
}

.nqFilterButton.active {
  background-color: var(--variantHighlightColor);
  border: none;
  color: var(--variantTextColorLight);
  box-shadow: 0 3px 6px rgba(80, 93, 250, .3);
}

.nqFilter > .nqView.root {
  border-right: none;
  border-left: none;
  border-top: none;
  border-radius: 0;
  border-color: rgb(234,234,234) !important;
}

.nqFilter > .nqView:first-child {
  border: none;
  border-bottom: 1px solid rgb(234,234,234);
}

.nqFilter > .nqView.root:not(.nqViewFocus){
  border-bottom-width: 0;
}
/* ------------------------------------------------------- */

.nqChip {
  padding: 4px 16px;
  border-radius: 100px;
  display: inline-block;
  font-weight: bold;
}

.nqChip[color='success'] {
  background-color: var(--colorSuccessLight);
  border-color: var(--colorSuccessNormal);
  color: var(--colorSuccessNormal);
}

.nqChip[color='danger'] {
  background-color: var(--colorDangerLight);
  border-color: var(--colorDangerNormal);
  color: var(--colorDangerNormal);
}

.nqChip[color='primary'] {
  background-color: var(--colorHighlightLight);
  border-color: var(--colorHighlight);
  color: var(--colorHighlight);
}

.nqChip[color='grayLight'] {
  background-color: var(--colorGrayLight);
  border-color: var(--colorGrayLight);
  color: var(--colorNight);
}

.nqChip[color='grayNormal'] {
  background-color: var(--colorGrayNormal);
  border-color: var(--colorGrayNormal);
  color: var(--colorNight);
}

/* ------------------------------------------------------- */

/* ------------------------------------------------------- */

.nqCard {
  position: relative; /* Required so that we can fill an activity indicator in the available space. */
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  row-gap: 16px;
  border-radius: var(--radiusSmall);
  background-color: var(--cardBackgroundColor);
  box-shadow: 0 3px 10px rgb(0, 0, 0, .06);
}

.nqCardDark {
  background-color: var(--colorNight);
}

/* Wraps everything at the top of a card. */
.nqCardHeading {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* ------------------------------------------------------- */


/* ------------------------------------------------------- */

.nqDatePicker {
  display: flex;
  flex-direction: column;
}

.nqDatePicker input[type="date"] {
  border-radius: var(--radiusTiny);
  padding: var(--spacingTiny);
  border: 1px solid var(--colorGraySilver);
}

.nqDatePicker.nqError input[type="date"] {
  margin-bottom: var(--spacingTiny);
}

/* ------------------------------------------------------- */

/* ------------------------------------------------------- */

.nqError {
  color: var(--colorHighlight);
}

/* ------------------------------------------------------- */


.nqNumberField {
  border-radius: var(--radiusTiny);
  border: 1px solid var(--colorGraySilver);
  padding: 0px var(--spacingMedium);
  height: var(--geomNumberFieldHeight);
}

/* ------------------------------------------------------- */

.nqBreadCrumps {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.nqBreadCrumps ul {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.nqBreadCrumps li {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
}

.nqBreadCrumps li:last-child {
  font-weight: bold;
}

.nqBreadCrumpSeparator {
  padding: 0 5px;
}

.nqBreadCrumps svg {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* ------------------------------------------------------- */

/* ------------------------------------------------------- */

.nqFileUploadDropAreaContainer {
  gap: 0;
  flex: 0;
  cursor: pointer;
}

.nqFileUploadDropArea {
  border: 3px dashed var(--colorGrayNormal);
  border-radius: var(--radiusMedium);
  margin-bottom: var(--spacingNormal);

  padding: 10px;
  height: 100px;
}

.nqFileUploadIsDragging .nqFileUploadDropArea {
  border: 3px dashed var(--colorSuccessNormal);
  background-color: var(--colorSuccessLight);
}

/* ------------------------------------------------------- */

/* ------------------------------------------------------- */

.nqFileUploadListItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacingSmall) var(--spacingNormal);
  border-bottom: 1px solid var(--colorGrayLight);
}

/* ------------------------------------------------------- */

.nqFileUploadListItem:last-child {
  border-bottom: none;
}

.nqFromToSelect {
  display: flex;
  flex-direction: row;
  gap: var(--spacingNormal);
  min-height: 250px;
  max-width: 900px;
}

.nqFromToSelect select {
  padding: var(--spacingTiny);
  flex: 1;
}

.nqFromToSelect option {
  padding: 3px;
}

.nqFromToIcons {
  display: flex;
  flex-direction: column;
  gap: var(--spacingNormal);
  justify-content: center;
}

.nqFromToIcons svg {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px;
  width: 44px;
  height: 44px;
  cursor: pointer;
}


/* ----------------------------------------------- */
/* Modal popup                                     */
/* ----------------------------------------------- */

.nqMasModal {
  width: 60%;
  height: 640px;
}

/* ----------------------------------------------- */
/* Asset select button                             */
/* ----------------------------------------------- */

/* "button" that allows the user to open the asset modal where he can select an asset. */
.nqMasSelectAsset {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacingTiny);
  border: 1px solid var(--colorGraySilver);
  background-color: var(--colorGrayLight);
  border-radius: var(--radiusTiny);
  width: 200px;
  height: 80px;
  cursor: pointer;
  margin-top: var(--spacingTiny);
}

.nqMasSelectAsset svg {
  fill: var(--colorGrayNormal);
}

.nqMasSelectAsset:hover {
  color: var(--colorHighlight);
  border-color: var(--colorHighlight);

}
.nqMasSelectAsset:hover svg {
    fill: var(--colorHighlight);
}

/* ----------------------------------------------- */
/* Selected asset list                             */
/* ----------------------------------------------- */

.nqMasSelectedAssetRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--tableRowBorderColor);
  padding-top: var(--spacingTiny);
  padding-bottom: var(--spacingTiny);
  font-family: monospace;
}

.nqMasSelectedAssetRow:last-child {
  border-bottom: none;
}

.nqMasSelectedAssetRow svg {
  cursor: pointer;
}

/* ------------------------------------------------------- */

.nqCheckboxList .nqCheckbox {
  margin-bottom: var(--spacingNormal);
}

.nqCollapsable {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: var(--spacingMedium);
  border-bottom: 1px solid var(--colorGraySilver);
  cursor: pointer;
  user-select: none;
}

.nqCollapsable .nqArrowIcon {
  transition: transform 200ms;
}

.nqCollapsableOpen .nqArrowIcon {
  transform: rotate(90deg);
}

.nqCollapsableContent .nqCheckbox:last-child {
  margin-bottom: 0;
}

.nqCollapsableContent {
  padding: var(--spacingMedium);
  border-bottom: 1px solid var(--colorGraySilver);
}



.nqExportImportOverlay {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 6666;
  background-color: rgba(0, 0, 0, 0.3);
  padding: var(--spacingHuge);
}

.nqColorPicker {
}

.ace_content {
  padding: var(--spacingNormal);
}

.nqToggle {
  cursor: pointer;
}

.nqToggleIconContainer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  padding: 5px;
  background-color: white;
  border: 2px solid black;
  float: left;
}

.nqToggleText {
  margin-left: 40px;
}

/* ------------------------------------------------------- */

.nqToggleCheckmark {
  fill: black;
  display: none;
}

.nqToggleOn .nqToggleCheckmark {
  display: block;
}

/* ------------------------------------------------------- */

.nqDivider {
  margin-bottom: 30px;
}

/* ------------------------------------------------------- */

.nqToasts {
  position: fixed;
  bottom: var(--spacingLarge);
  right: var(--spacingMedium);
}

/* ------------------------------------------------------- */

.nqToast {
  border-radius: var(--radiusSmall);
  padding: var(--spacingMedium);
  margin-bottom: var(--spacingNormal);
  min-width: 350px;
  transition: transform 1000ms;
  transform: translateX(200%);
  border: 1px solid var(--colorGrayLight);
  box-shadow: var(--shadowStrong);
  font-weight: bold;
  background-color: white;
}

.nqToast p {
  color: black;
  font-weight: normal;
}

.nqToast[type="error"] {
  border: 2px solid var(--colorDangerNormal);
  border-left: 12px solid var(--colorDangerNormal);
  color: var(--colorDangerNormal);
}

.nqToast[type="success"] {
  border: 2px solid var(--colorSuccessNormal);
  border-left: 12px solid var(--colorSuccessNormal);
  color: var(--colorSuccessNormal);
}

.nqToast[state="visible"] {
  transition-delay: 300ms;
  transform: translateX(0%);
}

/* ------------------------------------------------------- */

.nqProgressBar {
  position: relative;
  background-color: var(--colorGrayLight);
  height: 10px;
  border-radius: var(--radiusTiny);
  overflow: hidden;
}

.nqProgressBarBackground {
  position: absolute;
  inset: 0;
}

.nqProgressBarForeground {
  position: absolute;
  width: 0%;
  left: 0;
  top: 0;
  bottom: 0;
  background-color: var(--colorSuccessLight);
}

/*
 from: https://css-loaders.com/dots/
 HTML: <div class="loader"></div>
*/
.nqActivityDots {
  display: inline-block;
  width: 30px;
  aspect-ratio: 2;
  --_g: no-repeat radial-gradient(circle closest-side,#000 90%,#0000);
  background: 
    var(--_g) 0%   50%,
    var(--_g) 50%  50%,
    var(--_g) 100% 50%;
  background-size: calc(100%/3) 50%;
  animation: l3 1s infinite linear;
}
@keyframes l3 {
    20%{background-position:0%   0%, 50%  50%,100%  50%}
    40%{background-position:0% 100%, 50%   0%,100%  50%}
    60%{background-position:0%  50%, 50% 100%,100%   0%}
    80%{background-position:0%  50%, 50%  50%,100% 100%}
}

/* ------------------------------------------------------- */

.nqAccountButtons {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 50px;
}

.nqAccountButton {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background-color: gray;
  border-radius: 100px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(16px);
  font-weight: bold;
  font-size: 18px;
  color: white;
  animation: nqLoginFormLogoFadeInUp ease 600ms;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

/* A "special" variant for the Nooq Entry Admin */
.nqAccountButton[variant="special"] {
  border: 4px solid var(--colorHighlight);
  background-color: var(--colorHighlightLight);
  color: var(--colorDark);
}

@keyframes nqAccountButtonAnimation {
  
  0% {
    opacity: 0;
    transform: translateY(60px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* ------------------------------------------------------- */


.nqMailTemplateJson textarea {
  font-family: monospace;
  height: 600px;
}

.nqMailPreviewText .nqFormRow {
  padding: 0;
}

.nqMailPreviewText textarea {
  font-family: monospace;
  height: 600px;
}

/* ------------------------------------------------------- */

.ncCardImage img {
  width: 300px;
  cursor: pointer;
}

/* ------------------------------------------------------- */

.ncCardImageLargeContainer {
  position: fixed;
  inset: 0;
  z-index: 668;
  padding: var(--spacingHuge);
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--colorBackdrop);
  cursor: pointer;
}

/* ------------------------------------------------------- */



.ncIconSelector {
  display: flex;
  flex-direction: row;
  gap: var(--spacingNormal);
}

.ncIconSelectorIcon {
  padding: var(--spacingNormal);
  background-color: var(--colorLight);
  border-radius: var(--radiusTiny);
  width: 60px;
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.ncIconSelectorIcon img {
  max-width: 26px;
}

.ncIconSelectorIconSelected {
  border: 3px solid var(--colorHighlightLight);
}

/* ------------------------------------------------------- */

/* For now, only used to make sure that the message is nicely aligned with the list. */
.ncListContainer {
  position: relative;
}

/* ------------------------------------------------------- */

.ncListBreadCrumps {
  background-color: white;
  padding: 20px;
  margin-bottom: 0;
}

.nqCard.ncLists,
.nqCard:has(.ncListBreadCrumps) {
  overflow: hidden;
  gap: 0;
}

.nqCard:has(.ncListBreadCrumps) .nqDataTableHeader {
  display: none;
}

/* ------------------------------------------------------- */

.ncListNewForm .nqFormGroup {
  display: flex;
  flex-direction: row;
  gap: 16px;
  padding: 20px;
  border-top: 1px solid var(--colorGraySilver);
  background-color: white;
}

/* ------------------------------------------------------- */

.ncListImportCsvButton {
  margin-left: auto; /* Push the import button to the right. */
}

/* ------------------------------------------------------- */

/* ------------------------------------------------------- */

.ncMediaAssetUploadCard {
  row-gap: 0;
  flex: 0;
  padding: var(--spacingNormal);
}

.ncMediaAssetUploadButton {
  flex: 1;
}

/* ------------------------------------------------------- */

.ncDuplicateCarouselModal {
  min-width: 50%;
}

.ncCarouselBreadCrumps {
  background-color: var(--colorLight);
  padding: var(--spacingSmall);
  padding-left: var(--spacingNormal);
  border-radius: var(--radiusMedium);
  box-shadow: 0 3px 6px rgb(70, 70, 70, .2);
}

/* ------------------------------------------------------- */

.ncCodeScanned .nqInput {
  animation-name: ncCodeScannedFlash;
  animation-duration: 500ms;
  animation-iteration-count: 4;
  animation-direction: alternate;
  border: 1px solid var(--colorSuccessNormal);
}

@keyframes ncCodeScannedFlash {
  from {
    background-color: var(--colorLight);
  }
  to {
    background-color: var(--colorSuccessLight);
  }
}

/* ------------------------------------------------------- */

/* ------------------------------------------------------- */
/*       C O N F I G U R A B L E   S E T T I N G S         */
/* ------------------------------------------------------- */

#root {

  /* Form Page */
  --formBackground: linear-gradient(180deg, rgba(32,43,50,1) 0%, rgba(76,81,92,1) 44%, rgba(76,81,92,1) 100%);
  --formButtonsMarginTop: 40px;
  
  --elementBgColor: #202B32;
  --elementBorderColor: white;
  --elementBorderErrorColor: red;
  --elementFont: 'NcFontRegular';
  --elementTextColor: white;
  --elementBorderWidth: 2px;
  
  --titleFont: 'NcFontMedium';
  --titleTextColor: white;

  --descriptionFont: 'NcFontMedium';
  --descriptionTextColor: white;

  --labelFont: 'NcFontMedium';
  --labelTextColor: white;

  --toggleOnBgColor: none;
  --toggleOnBorderColor: white;

  --submitFont: 'NcFontRegular';
  --submitBgColor: red;
  --submitTextColor: white;
  --submitBorderRadius: 25px;
  --submitHeight: 40px;
  
  /* Thanks Page */
  --thanksTextColor: #202b32;
  --thanksBgColor: #E9EEF2;

  --externalLinkFont: 'NcFontRegular';
  --externalLinkBgColor: red;
  --externalLinkBorderColor: red;
  --externalLinkTextColor: red;
  --externalLinkBorderRadius: 25px;
  --externalLinkHeight: 40px;
  --externalLinkWidth: 225px;

  /* General */
  --logoMarginBottom: 20px;
  --spinnerColor: red;
}

/* ------------------------------------------------------- */
/*               P O S I T I O N I N G                     */
/* ------------------------------------------------------- */

/* Page wrapper for both the Thanks and Form page. */
.ncPage {
  position: relative; /* Required so we can position the message. */
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  font-family: 'NcFontRegular', serif; /* NcFontRegular can be set via admin. */
  padding: 40px;
}

/* ------------------------------------------------------- */

.ncFormButtons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 20px;
  margin-top: var(--formButtonsMarginTop);
}

/* ------------------------------------------------------- */

.ncLogo {
  margin-bottom: var(--logoMarginBottom);
  align-self: flex-start;
}

/* ------------------------------------------------------- */

.ncMessageBackdrop {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: var(--colorBackdrop);
}

.ncMessage {
  position: fixed;
  top: 25%;
  padding: 20px;
  width: 70%;
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: white;
  gap: 20px;
  font-family: var(--labelFont), serif;
}

.ncMessage[type="success"] .ncSpinner {
  display: block;
}

.ncMessage[type="error"] .ncErrorIcon {
  display: block;
}

/* ------------------------------------------------------- */

.ncSpinner {
  display: none;
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  border: 5px solid var(--spinnerColor);
  border-bottom-color: transparent;
  border-radius: 50%;
  box-sizing: border-box;
  animation: ncSpinnerRotation 1s linear infinite;
}

@keyframes ncSpinnerRotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ------------------------------------------------------- */

.ncErrorIcon {
  display: none;
  fill: red;
  width: 48px;
  height: 48px;
}

/* ------------------------------------------------------- */

.ncContent {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
}

/* Wrapper for link to external site. */
.ncExternal {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: auto;
}

/* ------------------------------------------------------- */

/* ----------------------------------------------- */
/*            F O R M   P A G E                    */
/* ----------------------------------------------- */

.ncPageForm {
  background: var(--formBackground);
}

/* Title above form */
.ncTitle {
  font-family: var(--titleFont), serif;
  font-size: 26px;
}

.ncPageForm .ncTitle {
  color: var(--titleTextColor);
}

/* Description above form. */
.ncDescription {
  font-family: var(--descriptionFont), serif;    
  font-size: 16px;
  color: var(--elementTextColor);
}

/* A label + form element. */
.ncFormRow {
  margin-bottom: 15px;
}

.ncTitle, 
.ncDescription {
  margin-bottom: 30px;
}

.ncFormRow label {
  margin-bottom: 15px;
  font-family: var(--labelFont), serif;    
  font-size: 12px;
  color: var(--labelTextColor);
  text-transform: uppercase;
}

.ncFormRow .nqInput {
  font-family: var(--elementFont), serif;
  border-radius: 0;
  background-color: var(--elementBgColor);
  border-width: var(--elementBorderWidth);
  border-color: var(--elementBorderColor);
  color: var(--elementTextColor);
}

.ncFormRowError .nqInput {
  border-color: var(--elementBorderErrorColor);
}

/* Hide placeholder */
.ncFormRow .nqInput::placeholder {
  color: var(--elementBgColor);
}

.ncFormRow .nqSelectBox {
  font-family: var(--elementFont), serif;
}

.nqSelectBox select {
  height: 55px;
  width: 100%;    
  padding: 3px 10px 3px 10px;
  border: var(--elementBorderWidth) solid var(--elementBorderColor);
  color: var(--elementTextColor);
  background-color: var(--elementBgColor);
}

.ncFormRowError .nqSelectBox select {
  border-color: var(--elementBorderErrorColor);
}

.nqSelectBox option {
  padding: 5px;
}

.ncFormRow .nqToggle {
  font-family: var(--elementFont), serif;    
  font-size: 15px;
  color: var(--elementTextColor);
}

.ncFormRow .nqToggleOn .nqToggleIconContainer {
  background-color: var(--toggleOnBgColor);
  border-color: var(--toggleOnBorderColor);
}


.ncFormRow .nqToggleIconContainer {
  border-color: var(--elementBorderColor);
  background-color: var(--elementBgColor);
}

.ncFormRowError .nqToggleIconContainer {
  border-color: var(--elementBorderErrorColor);
}

.ncFormRow .nqToggleCheckmark {
  fill: var(--elementTextColor);
}

.ncSubmit {
  font-family: var(--submitFont);
  font-size: 15px;
  min-width: 175px;
  height: var(--submitHeight);
  border-radius: var(--submitBorderRadius);
  color: var(--submitTextColor);
  background-color: var(--submitBgColor);
  text-transform: uppercase;
}

/* ----------------------------------------------- */
/*          T H A N K S    P A G E                 */
/* ----------------------------------------------- */

.ncPageThanks {
  background-color: var(--thanksBgColor);
  color: var(--thanksTextColor);
}

.ncPageThanks .ncTitle,
.ncPageThanks .ncDescription {
  color: var(--thanksTextColor);
}

.ncExternalLink {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-width: var(--externalLinkWidth);
  height: var(--externalLinkHeight);
  border-radius: var(--externalLinkBorderRadius);
  font-family: var(--externalLinkFont), serif;
  color: var(--externalLinkTextColor);
  border: 2px solid var(--externalLinkBorderColor);
  background-color: var(--externalLinkBgColor);
}

.ncExternalLink a {
  display: block;
  flex: 1;
  text-align: center;
  text-decoration: none;
}

/* ------------------------------------------------------- */

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#root,
body,
html {
  min-height: 100dvh;
}

#root {
  display: flex;
  flex: 1;
  flex-direction: column;
  position: relative; /* Make sure NqMessages are anchored at the root. */
}