@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  src: url(/static/fonts/materialsymbolsoutlined_v10.woff2) format('woff2');
}

/* Default styling for Material Symbols icons */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/* Font variations on top of the defaults. */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 20
}

@font-face {
    font-family: 'Barlow';
    src: url(/static/fonts/Barlow-Regular-webfont.woff) format('woff');
    font-weight: 400;
}

@font-face {
    font-family: 'Barlow';
    src: url(/static/fonts/Barlow-Medium-webfont.woff) format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow';
    src: url(/static/fonts/Barlow-MediumItalic-webfont.woff) format('woff');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Barlow';
    src: url(/static/fonts/Barlow-SemiBold-webfont.woff) format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow';
    src: url(/static/fonts/Barlow-SemiBoldItalic-webfont.woff) format('woff');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Barlow';
    src: url(/static/fonts/Barlow-Bold-webfont.woff) format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow';
    src: url(/static/fonts/Barlow-BoldItalic-webfont.woff) format('woff');
    font-weight: 700;
    font-style: italic;
}

/* There are italic variants of Barlow Semi Condensed, but we're not loading them in just to reduce page load size a bit. */

@font-face {
    font-family: 'Barlow Semi Condensed';
    src: url(/static/fonts/BarlowSemiCondensed-Regular-webfont.woff) format('woff');
    font-weight: 400;
}

@font-face {
    font-family: 'Barlow Semi Condensed';
    src: url(/static/fonts/BarlowSemiCondensed-Medium-webfont.woff) format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow Semi Condensed';
    src: url(/static/fonts/BarlowSemiCondensed-SemiBold-webfont.woff) format('woff');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow Semi Condensed';
    src: url(/static/fonts/BarlowSemiCondensed-Bold-webfont.woff) format('woff');
    font-weight: 700;
    font-style: normal;
}

/* Hide uncompiled Vue template elements ( [[ ...whatever... ]] ) previous to the Vue app mounting */
[v-cloak] {
  display: none;
}

* {
    font-family: 'Barlow', sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 500;
}

h1 {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -0.02rem;
    margin-top: 3px;
    margin-left: 3px;
}

h2 {
    font-size: 1.6rem;
    margin-top: 3rem;
}

.navbar {
    /*background-color: rgb(121 61 131)*/
}

.nav-item {
    margin-left: 6px
}

/* Show and hide the alerts by transitioning the height of the containing div, and hiding its content completely */

.kc-alert  {
    transition: max-height, padding 0.15s cubic-bezier(0.22, 1, 0.36, 1);
    max-height: 999px;
    position: relative;  /* Needs to be something other than static to allow the z-index to have an effect. */
    z-index: 999;  /* Needs to be high enough to show over the map. */
}

.kc-alert:not(.show) {
    max-height: 0;
    padding: 0 !important;
    border-bottom-width: 0 !important;
}

.kc-alert:not(.show) * {
    display: none;
}

.kc-alert#success-alert  {
    color: #155724;
    /* background-color: #bfe8bf; */
    background-color: #d4edda;
    border-bottom: 1px solid #c3e6cb;
}

.kc-alert#error-alert  {
    color: #721c24;
    background-color: #f8d7da;
    border-bottom: 1px solid #f5c6cb;
}

/* Attempt to align the vertical center of the icon with the vertical center of the text.
   Doesn't actually work, because it pushes the text above the baseline of the branding text. */
.material-symbols-outlined {
    vertical-align: bottom;
}

.material-symbols-outlined.icon-open-in-new {
    font-size: 95%;
    vertical-align: middle;
}

.importer-machine-name,
.importer-display-name {
    line-height: 1.35;
}

.importer-display-name {
    font-weight: 700;
}

.importer-machine-name,
.importer-machine-name a {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 400;
    color: #757575;
    text-decoration: none;
}

#importers button {
    /* Give importer buttons an explicit height so that they don't squash down when the spinner is displayed.
       If the text size changes, this will need to be updated as well. */
    height: 38px;
}

#importers button .hidden {
    display: none;
}

/* https://stephanwagner.me/only-css-loading-spinner */

@keyframes spinner {
  to {transform: rotate(360deg);}
}

button span.active { position: relative; }

button span.active:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-top-color: rgba(255, 255, 255, 1.0);
  animation: spinner .8s linear infinite;
}

button.btn-warning span.active:before {
  border: 2px solid rgba(0, 0, 0, 0.2);
  border-top-color: rgba(0, 0, 0, 1.0);
}

#map {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 72px;  /* Height of the navbar */
    margin-bottom: 56px;  /* Height of the footer */
    z-index: 1;
}

.map-popup .leaflet-popup-content {
    overflow-y: auto;
}

table.map-popup-table td.property-name {
    font-family: 'Barlow Semi Condensed', sans-serif;
    font-weight: 600;
    padding-right: 4px;
}

#legend {
    z-index: 999;
    position: relative;
    background-color: rgba(255, 255, 255, 0.8);
    float: right;
    padding: 12px;
    margin-top: 10px;
    border-radius: 5px;
    box-shadow: 0 0 15px rgb(0 0 0 / 20%);
}

.kc-legend-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 6px;
}

@keyframes fadeIn {
  from { opacity: 0; }
}

.kcLegendLoading {
    animation: fadeIn 1s infinite alternate;
}

[v-cloak] {
  display: none;
}