/*
===============================================================================
VIKING-MARKETS.CSS
===============================================================================
*/

/* ==================== :ROOT ==================== */

:root {

  /* BANNER */
  --banner-title_color: var(--hex-white);
  --banner-image_opacity: 0.20;
  --banner-image_background-image: url("../images/pages/markets/markets-banner.avif");
  --banner-image_background-color: rgba(36, 40, 62, 1.00);

  /* ACCORDION */
  --accordion_background-color: var(--hex-background);
  --accordion-button-active_color: var(--hex-white);
  --accordion-button-active_background-color: var(--hex-blue-1);
  --accordion-button-inactive_color: var(--hex-white);
  --accordion-button-inactive_background-color: var(--hex-blue-1b);
  --accordion-button-collapsed_background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z'/%3e%3c/svg%3e");
  --accordion-button-not-collapsed_background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M4 8a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1z'/%3e%3c/svg%3e");

  /* CONTENT */
  --region-name_text-transform: none;
  --subregion-name_text-transform: none;
  --country-row_border: 1.5px dotted var(--hex-blue-1);
  --country-row_background-color: rgba(36, 40, 62, 0.10);
  --country-name_color: var(--hex-blue-1);
  --exchange-name_color: var(--hex-blue-1);
  --exchange-link_color: var(--exchange-name_color);
    --exchange-link_border-bottom: 1.5px dotted var(--exchange-link_color);
  --exchange-link-hover_color: var(--hex-primary);
    --exchange-link-hover_border-bottom: 1.5px solid var(--exchange-link-hover_color);

}

/* ==================== @MEDIA ==================== */

/* MOBILE (PORTRAIT) OR SMALLER*/
@media screen and (max-width: 575.98px) {
  .country-flag {
    max-height: calc(2.500rem * 1.00);
  }
}

/* MOBILE (ALL) OR SMALLER*/
@media screen and (max-width: 767.98px) {
  .country-row .col-md-auto.exchange.border-end {
    border-right: none !important;
  }
}

/* ==================== BANNER ==================== */


#markets-banner.page-title::before {
  opacity: var(--banner-image_opacity);
  background-image: var(--banner-image_background-image);
  background-color: var(--banner-image_background-color);
  background-blend-mode: luminosity;
}

#markets-banner .title-page-title {
  color: var(--banner-title_color);
}

/* =============== ACCORDION =============== */
#markets-accordion .accordion-item {
  background-color: var(--accordion_background-color);
  border: none;
}
#markets-accordion .accordion-button {
  color: var(--accordion-button-inactive_color) !important;
  background-color: var(--accordion-button-inactive_background-color) !important;
  box-shadow: none;
}
#markets-accordion .accordion-button:not(.collapsed) {
  color: var(--accordion-button-active_color) !important;
  background-color: var(--accordion-button-active_background-color) !important;
  box-shadow: none;
}
#markets-accordion .accordion-button.collapsed::after {
  background-image: var(--accordion-button-collapsed_background-image);
}
#markets-accordion .accordion-button:not(.collapsed)::after {
  background-image: var(--accordion-button-not-collapsed_background-image);
}

/* =============== CONTENT =============== */
/* REGION */
.region-name {
  text-transform: var(--region-name_text-transform);
}
/* SUBREGION */
.subregion-name {
  text-transform: var(--subregion-name_text-transform);
}
/* COUNTRY */
.country-row {
  border-top: var(--country-row_border);
  border-bottom: var(--country-row_border);
  background-color: var(--country-row_background-color);
}
.country-name {
  color: var(--country-name_color);
}
.country-flag {
  width: auto;
  max-height: calc((1.375rem + 1.5vw) * 1.00);
}

/* EXCHANGES */
.exchange-name {
  color: var(--exchange-name_color) !important;
}
.exchange-name a {
  border-bottom: var(--exchange-link_border-bottom);
}
.exchange-name a:hover {
  color: var(--exchange-link-hover_color);
  border-bottom: var(--exchange-link-hover_border-bottom);
}
.exchange.border-end {
  border-right: 1.5px solid var(--exchange-name_color) !important;
}