qc-trousse-sdg 1.4.6 → 1.4.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qc-trousse-sdg",
-  "version": "1.4.6",
+  "version": "1.4.8",
   "description": "Trousse de développement du Système de design gouvernemental du Québec",
   "main": "index.js",
   "scripts": {

package/public/css/qc-doc-sdg.css

@@ -167,6 +167,9 @@ code.hljs {
 .exemple-area > figure > figcaption {
   display: block;
 }
+.exemple-area > figure:has(qc-select) {
+  overflow-x: visible;
+}
 
 table.qc-table {
   margin-bottom: 0;
@@ -352,39 +355,68 @@ h1, h2, h3, h4, h5, h6 {
   border: 1px solid var(--qc-color-grey-light);
 }
 
+a.pseudo-visited {
+  color: var(--qc-color-link-visited);
+}
+a.pseudo-visited > .qc-ext-link-img {
+  background-color: var(--qc-color-link-visited);
+}
 a.pseudo-hover {
   color: var(--qc-color-link-hover);
   text-decoration: none;
 }
+a.pseudo-hover .qc-ext-link-text {
+  text-decoration: none;
+}
+a.pseudo-hover > .qc-ext-link-img {
+  background-color: var(--qc-color-link-hover);
+}
 a.pseudo-active {
   color: var(--qc-color-link-active);
   text-decoration: none;
 }
+a.pseudo-active .qc-ext-link-text {
+  text-decoration: none;
+}
+a.pseudo-active > .qc-ext-link-img {
+  background-color: var(--qc-color-link-active);
+}
 a.pseudo-focus {
   color: var(--qc-color-link-hover);
   text-decoration: none;
+}
+a.pseudo-focus .qc-ext-link-text {
+  text-decoration: none;
+}
+a.pseudo-focus {
   outline: 2px solid var(--qc-color-link-focus-outline);
   outline-offset: 1px;
 }
-a.pseudo-visited {
-  color: var(--qc-color-link-visited) !important;
+a.pseudo-focus > .qc-ext-link-img {
+  background-color: var(--qc-color-link-text);
 }
 a.not-visited:visited:not(:hover) {
   color: var(--qc-color-link-text);
 }
+a.not-visited:visited:not(:hover) > .qc-ext-link-text {
+  color: var(--qc-color-link-text);
+}
 
-a.pseudo-visited span.qc-ext-link-img {
+a.pseudo-visited div.qc-ext-link-img {
   background: var(--qc-color-link-visited) !important;
 }
-a.pseudo-focus span.qc-ext-link-img {
+a.pseudo-focus div.qc-ext-link-img {
   background: var(--qc-color-link-hover) !important;
 }
-a.pseudo-hover span.qc-ext-link-img {
+a.pseudo-hover div.qc-ext-link-img {
   background: var(--qc-color-link-hover) !important;
 }
-a.pseudo-active span.qc-ext-link-img {
+a.pseudo-active div.qc-ext-link-img {
   background: var(--qc-color-link-active) !important;
 }
+a.not-visited:visited:not(:hover) div.qc-ext-link-img {
+  background: var(--qc-color-link-text) !important;
+}
 
 p, h1, h2, h3, h4, h5, h6 {
   hyphens: auto;

package/public/css/qc-sdg-no-grid.css

@@ -755,7 +755,7 @@ qc-icon {
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzMDEuNjkxIDMwMS42OTEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwMS42OTEgMzAxLjY5MTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwb2x5Z29uIHBvaW50cz0iMTE5LjE1MSwwIDEyOS42LDIxOC40MDYgMTcyLjA2LDIxOC40MDYgMTgyLjU0LDAiIC8+Cgk8cmVjdCB4PSIxMzAuNTYzIiB5PSIyNjEuMTY4IiB3aWR0aD0iNDAuNTI1IiBoZWlnaHQ9IjQwLjUyMyIgLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K");
 }
 
-.icon-external-link, span.qc-ext-link-img, .qc-icon[data-img-type=external-link] {
+.icon-external-link, .qc-ext-link-img, .qc-icon[data-img-type=external-link] {
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOS4yMDciIGhlaWdodD0iMjkuNjA4IiB2aWV3Qm94PSIwIDAgMjkuMjA3IDI5LjYwOCI+CiAgPGcgaWQ9Ikdyb3VwZV8zOTQiIGRhdGEtbmFtZT0iR3JvdXBlIDM5NCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEzOSAtNTQ1LjYyNCkiPgogICAgPGcgaWQ9Ikdyb3VwZV8zOTAiIGRhdGEtbmFtZT0iR3JvdXBlIDM5MCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE3MjIuMDA4IDQzNy41MjQpIj4KICAgICAgPGcgaWQ9Ikdyb3VwZV8zODkiIGRhdGEtbmFtZT0iR3JvdXBlIDM4OSI+CiAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV82NzEiIGRhdGEtbmFtZT0iVHJhY8OpIDY3MSIgZD0iTTE4ODQuMDg3LDEyMC44MTRhMS4xNDUsMS4xNDUsMCwwLDAtMS4xNDUsMS4xNDV2MTMuNDU4SDE4NjMuM3YtMjAuMWgxMy4wNTdhMS4xNDYsMS4xNDYsMCwxLDAsMC0yLjI5MWgtMTUuMzQ4djI0LjY4M2gyNC4yMjVWMTIxLjk1OUExLjE0NiwxLjE0NiwwLDAsMCwxODg0LjA4NywxMjAuODE0WiIgLz4KICAgICAgICA8cGF0aCBpZD0iVHJhY8OpXzY3MiIgZGF0YS1uYW1lPSJUcmFjw6kgNjcyIiBkPSJNMTg3OS43OTIsMTA4LjFhMS4xNDYsMS4xNDYsMCwwLDAsMCwyLjI5MWg2LjUzM2wtMTQuMDE5LDE0LjE3YTEuMTQ2LDEuMTQ2LDAsMCwwLDEuNjI5LDEuNjExbDEzLjk4OS0xNC4xNHY2LjM3N2ExLjE0NiwxLjE0NiwwLDAsMCwyLjI5MSwwVjEwOC4xWiIgLz4KICAgICAgPC9nPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg==");
 }
 
@@ -826,6 +826,10 @@ qc-icon {
 a {
   color: var(--qc-color-link-text);
 }
+a:has(.qc-ext-link-text) {
+  white-space: nowrap;
+  text-decoration: none;
+}
 a:visited {
   color: var(--qc-color-link-visited);
 }
@@ -833,9 +837,17 @@ a:hover {
   color: var(--qc-color-link-hover);
   text-decoration: none;
 }
+a:hover .qc-ext-link-text {
+  text-decoration: none;
+}
 a:focus, a:focus-visible {
   color: var(--qc-color-link-hover);
   text-decoration: none;
+}
+a:focus .qc-ext-link-text, a:focus-visible .qc-ext-link-text {
+  text-decoration: none;
+}
+a:focus, a:focus-visible {
   outline: 2px solid var(--qc-color-link-focus-outline);
   outline-offset: 1px;
 }
@@ -843,33 +855,38 @@ a:active {
   color: var(--qc-color-link-active);
   text-decoration: none;
 }
+a:active .qc-ext-link-text {
+  text-decoration: none;
+}
 a .img-wrap {
   white-space: nowrap;
 }
 
-span.qc-ext-link-img {
+.qc-external-link .qc-ext-link-text {
+  white-space: normal;
+  text-decoration: underline;
+}
+
+.qc-ext-link-img {
   height: 0.6875em;
   width: 0.6875em;
-  display: inline-block;
   background: var(--qc-color-link-text);
   mask-size: 0.6875em;
-  margin-left: 4px;
+  display: inline-block;
+  mask-repeat: no-repeat;
 }
-a:visited span.qc-ext-link-img {
+a:visited .qc-ext-link-img {
   background: var(--qc-color-link-visited);
 }
-a:focus span.qc-ext-link-img {
+a:focus .qc-ext-link-img {
   background: var(--qc-color-link-hover);
 }
-a:hover span.qc-ext-link-img {
+a:hover .qc-ext-link-img {
   background: var(--qc-color-link-hover);
 }
-a:active span.qc-ext-link-img {
+a:active .qc-ext-link-img {
   background: var(--qc-color-link-active);
 }
-.img-wrap + span.qc-ext-link-img {
-  display: none;
-}
 
 p {
   margin-top: 0;
@@ -1270,7 +1287,7 @@ hr {
   line-height: var(--qc-line-height-md);
   font-weight: var(--qc-font-weight-bold);
   color: var(--qc-color-red-regular);
-  margin-left: 0.6rem;
+  margin-left: var(--qc-spacer-xs);
 }
 
 .qc-disabled {
@@ -1785,6 +1802,26 @@ qc-search-input {
   width: 100%;
   max-width: 54.8rem;
 }
+qc-search-input[size=xs] {
+  max-width: 100%;
+  width: 6.3rem;
+}
+qc-search-input[size=sm] {
+  max-width: 100%;
+  width: 15.6rem;
+}
+qc-search-input[size=md] {
+  max-width: 100%;
+  width: 24.9rem;
+}
+qc-search-input[size=lg] {
+  max-width: 100%;
+  width: 52.8rem;
+}
+qc-search-input[size=xl] {
+  max-width: 100%;
+  width: 82.5rem;
+}
 
 .qc-search-bar, .qc-search-input {
   display: flex;
@@ -2013,9 +2050,9 @@ input[type=radio].qc-choicefield:checked.qc-compact::before {
   justify-items: start;
 }
 .qc-fieldset legend {
-  font-weight: var(--qc-font-weight-content-bold);
   display: inline-block;
   margin-bottom: var(--qc-spacer-md);
+  white-space: nowrap;
 }
 .qc-fieldset.qc-compact {
   margin-bottom: var(--qc-spacer-sm);
@@ -2168,9 +2205,10 @@ input[type=checkbox].qc-choicefield.qc-compact:checked::after {
 }
 .qc-label, qc-textfield label,
 .qc-textfield label {
-  font-weight: var(--qc-font-weight-content-bold);
-  display: block;
+  display: inline-block;
   width: fit-content;
+  white-space: nowrap;
+  margin: 0;
 }
 .qc-label.qc-compact, qc-textfield label.qc-compact,
 .qc-textfield label.qc-compact {
@@ -2186,6 +2224,14 @@ input[type=checkbox].qc-choicefield.qc-compact:checked::after {
   cursor: not-allowed;
 }
 
+.qc-label-text {
+  white-space: wrap;
+  margin: 0;
+  font-size: var(--qc-font-size-md);
+  line-height: var(--qc-line-height-md);
+  font-weight: var(--qc-font-weight-bold);
+}
+
 qc-textfield,
 .qc-textfield {
   display: block;
@@ -2245,26 +2291,6 @@ qc-textfield textarea:disabled {
   padding: 0.6rem;
 }
 
-[size=xs] {
-  max-width: 100%;
-}
-
-[size=sm] {
-  max-width: 100%;
-}
-
-[size=md] {
-  max-width: 100%;
-}
-
-[size=lg] {
-  max-width: 100%;
-}
-
-[size=xl] {
-  max-width: 100%;
-}
-
 [size=xs] input, [size=xs] input + .qc-textfield-charcount,
 [size=xs] textarea,
 [size=xs] textarea + .qc-textfield-charcount {
@@ -2608,15 +2634,16 @@ li[aria-selected=true] {
 
 .qc-dropdown-list-expanded {
   position: absolute;
-  width: calc(100% + 2px);
-  left: -0.1rem;
-  right: -0.1rem;
-  top: 100%;
+  width: calc(100% + 2 * var(--dropdown-button-border) px);
+  left: calc(var(--dropdown-button-border) * 0.1 * -1rem);
+  right: calc(var(--dropdown-button-border) * 0.1 * -1rem);
+  top: calc(var(--dropdown-items-top-offset) * 0.1 * 1rem);
   z-index: 11;
   background-color: var(--qc-color-background);
   border-left: 0.1rem solid var(--qc-color-grey-medium);
   border-right: 0.1rem solid var(--qc-color-grey-medium);
-  border-bottom: 0.1rem solid var(--qc-color-grey-medium);
+  border-bottom: calc(var(--dropdown-items-bottom-border) * 0.1 * 1rem) solid var(--qc-color-grey-medium);
+  border-top: calc(var(--dropdown-items-top-border) * 0.1 * 1rem) solid var(--qc-color-grey-medium);
 }
 
 .qc-dropdown-list-hidden {

package/public/css/qc-sdg.css

@@ -755,7 +755,7 @@ qc-icon {
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAzMDEuNjkxIDMwMS42OTEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwMS42OTEgMzAxLjY5MTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwb2x5Z29uIHBvaW50cz0iMTE5LjE1MSwwIDEyOS42LDIxOC40MDYgMTcyLjA2LDIxOC40MDYgMTgyLjU0LDAiIC8+Cgk8cmVjdCB4PSIxMzAuNTYzIiB5PSIyNjEuMTY4IiB3aWR0aD0iNDAuNTI1IiBoZWlnaHQ9IjQwLjUyMyIgLz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8Zz4KPC9nPgo8L3N2Zz4K");
 }
 
-.icon-external-link, span.qc-ext-link-img, .qc-icon[data-img-type=external-link] {
+.icon-external-link, .qc-ext-link-img, .qc-icon[data-img-type=external-link] {
   mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOS4yMDciIGhlaWdodD0iMjkuNjA4IiB2aWV3Qm94PSIwIDAgMjkuMjA3IDI5LjYwOCI+CiAgPGcgaWQ9Ikdyb3VwZV8zOTQiIGRhdGEtbmFtZT0iR3JvdXBlIDM5NCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEzOSAtNTQ1LjYyNCkiPgogICAgPGcgaWQ9Ikdyb3VwZV8zOTAiIGRhdGEtbmFtZT0iR3JvdXBlIDM5MCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE3MjIuMDA4IDQzNy41MjQpIj4KICAgICAgPGcgaWQ9Ikdyb3VwZV8zODkiIGRhdGEtbmFtZT0iR3JvdXBlIDM4OSI+CiAgICAgICAgPHBhdGggaWQ9IlRyYWPDqV82NzEiIGRhdGEtbmFtZT0iVHJhY8OpIDY3MSIgZD0iTTE4ODQuMDg3LDEyMC44MTRhMS4xNDUsMS4xNDUsMCwwLDAtMS4xNDUsMS4xNDV2MTMuNDU4SDE4NjMuM3YtMjAuMWgxMy4wNTdhMS4xNDYsMS4xNDYsMCwxLDAsMC0yLjI5MWgtMTUuMzQ4djI0LjY4M2gyNC4yMjVWMTIxLjk1OUExLjE0NiwxLjE0NiwwLDAsMCwxODg0LjA4NywxMjAuODE0WiIgLz4KICAgICAgICA8cGF0aCBpZD0iVHJhY8OpXzY3MiIgZGF0YS1uYW1lPSJUcmFjw6kgNjcyIiBkPSJNMTg3OS43OTIsMTA4LjFhMS4xNDYsMS4xNDYsMCwwLDAsMCwyLjI5MWg2LjUzM2wtMTQuMDE5LDE0LjE3YTEuMTQ2LDEuMTQ2LDAsMCwwLDEuNjI5LDEuNjExbDEzLjk4OS0xNC4xNHY2LjM3N2ExLjE0NiwxLjE0NiwwLDAsMCwyLjI5MSwwVjEwOC4xWiIgLz4KICAgICAgPC9nPgogICAgPC9nPgogIDwvZz4KPC9zdmc+Cg==");
 }
 
@@ -826,6 +826,10 @@ qc-icon {
 a {
   color: var(--qc-color-link-text);
 }
+a:has(.qc-ext-link-text) {
+  white-space: nowrap;
+  text-decoration: none;
+}
 a:visited {
   color: var(--qc-color-link-visited);
 }
@@ -833,9 +837,17 @@ a:hover {
   color: var(--qc-color-link-hover);
   text-decoration: none;
 }
+a:hover .qc-ext-link-text {
+  text-decoration: none;
+}
 a:focus, a:focus-visible {
   color: var(--qc-color-link-hover);
   text-decoration: none;
+}
+a:focus .qc-ext-link-text, a:focus-visible .qc-ext-link-text {
+  text-decoration: none;
+}
+a:focus, a:focus-visible {
   outline: 2px solid var(--qc-color-link-focus-outline);
   outline-offset: 1px;
 }
@@ -843,33 +855,38 @@ a:active {
   color: var(--qc-color-link-active);
   text-decoration: none;
 }
+a:active .qc-ext-link-text {
+  text-decoration: none;
+}
 a .img-wrap {
   white-space: nowrap;
 }
 
-span.qc-ext-link-img {
+.qc-external-link .qc-ext-link-text {
+  white-space: normal;
+  text-decoration: underline;
+}
+
+.qc-ext-link-img {
   height: 0.6875em;
   width: 0.6875em;
-  display: inline-block;
   background: var(--qc-color-link-text);
   mask-size: 0.6875em;
-  margin-left: 4px;
+  display: inline-block;
+  mask-repeat: no-repeat;
 }
-a:visited span.qc-ext-link-img {
+a:visited .qc-ext-link-img {
   background: var(--qc-color-link-visited);
 }
-a:focus span.qc-ext-link-img {
+a:focus .qc-ext-link-img {
   background: var(--qc-color-link-hover);
 }
-a:hover span.qc-ext-link-img {
+a:hover .qc-ext-link-img {
   background: var(--qc-color-link-hover);
 }
-a:active span.qc-ext-link-img {
+a:active .qc-ext-link-img {
   background: var(--qc-color-link-active);
 }
-.img-wrap + span.qc-ext-link-img {
-  display: none;
-}
 
 p {
   margin-top: 0;
@@ -1270,7 +1287,7 @@ hr {
   line-height: var(--qc-line-height-md);
   font-weight: var(--qc-font-weight-bold);
   color: var(--qc-color-red-regular);
-  margin-left: 0.6rem;
+  margin-left: var(--qc-spacer-xs);
 }
 
 .qc-disabled {
@@ -1785,6 +1802,26 @@ qc-search-input {
   width: 100%;
   max-width: 54.8rem;
 }
+qc-search-input[size=xs] {
+  max-width: 100%;
+  width: 6.3rem;
+}
+qc-search-input[size=sm] {
+  max-width: 100%;
+  width: 15.6rem;
+}
+qc-search-input[size=md] {
+  max-width: 100%;
+  width: 24.9rem;
+}
+qc-search-input[size=lg] {
+  max-width: 100%;
+  width: 52.8rem;
+}
+qc-search-input[size=xl] {
+  max-width: 100%;
+  width: 82.5rem;
+}
 
 .qc-search-bar, .qc-search-input {
   display: flex;
@@ -2013,9 +2050,9 @@ input[type=radio].qc-choicefield:checked.qc-compact::before {
   justify-items: start;
 }
 .qc-fieldset legend {
-  font-weight: var(--qc-font-weight-content-bold);
   display: inline-block;
   margin-bottom: var(--qc-spacer-md);
+  white-space: nowrap;
 }
 .qc-fieldset.qc-compact {
   margin-bottom: var(--qc-spacer-sm);
@@ -2168,9 +2205,10 @@ input[type=checkbox].qc-choicefield.qc-compact:checked::after {
 }
 .qc-label, qc-textfield label,
 .qc-textfield label {
-  font-weight: var(--qc-font-weight-content-bold);
-  display: block;
+  display: inline-block;
   width: fit-content;
+  white-space: nowrap;
+  margin: 0;
 }
 .qc-label.qc-compact, qc-textfield label.qc-compact,
 .qc-textfield label.qc-compact {
@@ -2186,6 +2224,14 @@ input[type=checkbox].qc-choicefield.qc-compact:checked::after {
   cursor: not-allowed;
 }
 
+.qc-label-text {
+  white-space: wrap;
+  margin: 0;
+  font-size: var(--qc-font-size-md);
+  line-height: var(--qc-line-height-md);
+  font-weight: var(--qc-font-weight-bold);
+}
+
 qc-textfield,
 .qc-textfield {
   display: block;
@@ -2245,26 +2291,6 @@ qc-textfield textarea:disabled {
   padding: 0.6rem;
 }
 
-[size=xs] {
-  max-width: 100%;
-}
-
-[size=sm] {
-  max-width: 100%;
-}
-
-[size=md] {
-  max-width: 100%;
-}
-
-[size=lg] {
-  max-width: 100%;
-}
-
-[size=xl] {
-  max-width: 100%;
-}
-
 [size=xs] input, [size=xs] input + .qc-textfield-charcount,
 [size=xs] textarea,
 [size=xs] textarea + .qc-textfield-charcount {
@@ -2608,15 +2634,16 @@ li[aria-selected=true] {
 
 .qc-dropdown-list-expanded {
   position: absolute;
-  width: calc(100% + 2px);
-  left: -0.1rem;
-  right: -0.1rem;
-  top: 100%;
+  width: calc(100% + 2 * var(--dropdown-button-border) px);
+  left: calc(var(--dropdown-button-border) * 0.1 * -1rem);
+  right: calc(var(--dropdown-button-border) * 0.1 * -1rem);
+  top: calc(var(--dropdown-items-top-offset) * 0.1 * 1rem);
   z-index: 11;
   background-color: var(--qc-color-background);
   border-left: 0.1rem solid var(--qc-color-grey-medium);
   border-right: 0.1rem solid var(--qc-color-grey-medium);
-  border-bottom: 0.1rem solid var(--qc-color-grey-medium);
+  border-bottom: calc(var(--dropdown-items-bottom-border) * 0.1 * 1rem) solid var(--qc-color-grey-medium);
+  border-top: calc(var(--dropdown-items-top-border) * 0.1 * 1rem) solid var(--qc-color-grey-medium);
 }
 
 .qc-dropdown-list-hidden {