/**
 * Default Variables.
 *
 * Modify this file to provide default Bootstrap Framework variables. The
 * Bootstrap Framework will not override any variables defined here because it
 * uses the `!default` flag which will only set their default if not already
 * defined here.
 *
 * You can copy existing variables directly from the following file:
 * ./THEMENAME/bootstrap/assets/stylesheets/bootstrap/_variables.scss
 */
:root {
  --secondary-nav-background-color: #F8DA10;
  --secondary-nav-text-color: #212529;
  --main-navbar-top-border: 4px solid #F8DA10;
  --social-links-background: #B34949;
  --text-color: #212529;
  --inverted-text-color: #ffffff;
  --link-color: #B34949;
  --link-color-light: #ecd2d2;
  --border-radius: 30px;
  --vertical-padding: 30px;
  --popular-datasets-background: #fef8cf;
  --featured-content-panel-background: #F4F4F4;
  --small-screen-margins: 20px;
  --row-hover-color: #FFFEEE;
  --views-lists-background: #f4f4f4;
  --views-lists-background-hover: gainsboro;
  --announcements-background: radial-gradient(#1e1e1e, #2d2d2d);
  --footer-background-color: linear-gradient(to right, #A34811, #CA5E56);
  --homepage-search-input-background-color: black;
  --homepage-search-input-text-color: white;
  --homepage-search-submit-button-background: #F8DA10;
  --map-background: radial-gradient(rgba(255, 255, 255, 0.8), #8CB4D3);
  --site-slogan-color: #F8DA10;
  --content-header-background: transparent url("/themes/custom/inform_base/assets/images/hero-image.jpg") center center;
  --content-header-border-top: 4px solid #B34949;
  --content-header-overlay: linear-gradient(to bottom, rgba(3, 48, 89, 0.8), rgba(87, 87, 53, 0.5));
  --motif-overlay: url("/themes/custom/inform_base/assets/images/footer-image.png") center top repeat;
  --motif-opacity: .05;
  --motif-blend-mode: normal;
  --mm-color-background: purple;
  --sidebar-block-heading-background: #115ea3;
  --sidebar-block-heading-text-color: white;
}
@media (min-width: 768px) {
  :root {
    --vertical-padding: 50px;
  }
}
@media (min-width: 1200px) {
  :root {
    --vertical-padding: 60px;
  }
}
@media (min-width: 1440px) {
  :root {
    --vertical-padding: 80px;
    --small-screen-margins: 0px;
  }
}

.dark-mode {
  --link-color: #F8DA10;
  --inverted-text-color: #212529;
  --text-color: #ffffff;
  --link-color-hover: darken(var(--link-color),40%);
}

.dark-mode {
  --link-color: #44baaa;
  --inverted-text-color: #212529;
  --text-color: #ffffff;
  --link-color-hover: darken(var(--link-color),40%);
}

:root {
  --secondary-nav-background-color: #44baaa;
  --secondary-nav-text-color: #000;
  --main-navbar-top-border: 4px solid #44baaa;
  --social-links-background: #025482;
  --text-color: #212529;
  --inverted-text-color: #ffffff;
  --link-color: #025482;
  --link-color-light: #c0d4e0;
  --border-radius: 30px;
  --popular-datasets-background: #daf1ee;
  --popular-datasets-background: #daf1ee;
  --featured-content-panel-background: #F4F4F4;
  --small-screen-margins: 20px;
  --row-hover-color: #FFFEEE;
  --views-lists-background: #f4f4f4;
  --views-lists-background-hover: gainsboro;
  --announcements-background: radial-gradient(#1e1e1e, #2d2d2d);
  --footer-background-color: linear-gradient(to right, #44baaa, #3a50bd);
  --homepage-search-input-background-color: black;
  --homepage-search-input-text-color: white;
  --homepage-search-submit-button-background: #44baaa;
  --map-background: radial-gradient(rgba(255, 255, 255, 0.8), #8CB4D3);
  --site-slogan-color: #44baaa;
  --content-header-background: transparent url("/themes/custom/inform_regional/assets/images/hero-image.jpg") center center;
  --content-header-border-top: 4px solid #025482;
  --motif-overlay: url("/themes/custom/inform_regional/assets/images/footer-image.png") right center no-repeat;
  --motif-opacity: .07;
  --motif-blend-mode: normal;
  --sidebar-block-heading-background: #115ea3;
  --sidebar-block-heading-text-color: white;
}

#page-footer {
  --motif-opacity: .1;
}

/*-----------------------------------------------------------------------------
	Some basic defaults for SVG maps on homepage
-----------------------------------------------------------------------------*/
.block-svg-map {
  background: radial-gradient(rgba(255, 255, 255, 0.8), #8CB4D3);
  background: var(--map-background);
}
.block-svg-map > * {
  max-width: 1260px;
  margin: 0 auto;
  padding: 15px 30px;
  padding-top: var(--vertical-padding);
  padding-bottom: var(--vertical-padding);
}
.block-svg-map svg {
  background: none;
}

/* COUNTRY MAP
--------------------------------------------------*/
div[class*=-svgmap] {
  text-align: center;
  padding-bottom: 10em;
}
div[class*=-svgmap] h2 {
  padding: 1.1em;
  margin-bottom: 0;
  margin-top: 0;
  color: #ffffff;
  text-shadow: 4px 4px 10px #115ea3;
  font-size: 2em;
}

.clickable-svg-map-wrapper {
  position: relative;
  margin: auto;
}
.clickable-svg-map-wrapper canvas.for-ie {
  display: block;
  width: 100%;
  visibility: hidden;
}
.clickable-svg-map-wrapper svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.clickable-svg-map-wrapper svg text {
  font-size: 10px;
  font-weight: bold;
}
.clickable-svg-map-wrapper svg > g > g#land {
  fill: #F3A200;
  fill-opacity: 0.8;
  stroke: #000;
  stroke-width: 0.5px;
  stroke-opacity: 0.8;
}
.clickable-svg-map-wrapper svg > g > g:not(#land) {
  cursor: pointer;
  fill: #fff;
  fill-opacity: 0.4;
  stroke: #000;
  stroke-width: 1px;
  stroke-opacity: 0.4;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: stroke-width 0.1s linear, fill-opacity 0.1s linear;
}
.clickable-svg-map-wrapper svg > g > g:not(#land).hover, .clickable-svg-map-wrapper svg > g > g:not(#land):hover {
  stroke-width: 2px;
  fill-opacity: 0.7;
}