/* KnOW demo page style 231127 */
/* These are additions to the KnOW page style for the KnOW demo page */


.clear-holder {
    width: 100%;
    padding: 1em 0 1em 0;
}

.grey-holder {
    width: 100%;
    padding: 1em 0 1em 0;
    background-color: var(--palegrey)
}

.clear-short-holder {
    width: 100%;
    padding: 0;
}


.grey-short-holder {
    width: 100%;
    padding: 0;
    background-color: var(--palegrey)
}

#demo-intro {
    width: 92%;
    max-width: 60em;
    margin: auto;
}

#demo-intro .button-container {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

#demo-intro a.button {
  padding: 0.7rem 1rem 0.5rem;
  font-family: var(--bold-fonts);
  font-size: 1rem;
  text-decoration: none;
  color: white;
  background-color: black;
  box-shadow: 0 2px 6px -4px var(--midgrey);
}

#demo-intro a.button:hover {
  background-color: var(--midgrey);
}

#map, #sources {
   width:92%;
   margin: auto;
   padding: 2em 1em 2em 1em;
}

#maps-menu {
   display: block;
   width:92%;
   margin: auto;
   padding: 0 1em 2em 1em;
}

#map, #sources {
   display: none;
}

#sources {
   padding: 1em 1em 2em 1em;
}

.file_sets {
    width: 92%;
    margin: auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 2em;
    margin-bottom: 12px;
}

.file_set {
    display: inline-block;
    width: 15em;
    vertical-align: middle;
    position: relative;
    text-align: center;
    overflow: hidden;
    margin: 4px 14px 14px 14px;
    padding: 0.7rem 1rem 0.5rem;
    font-family: var(--bold-fonts);
    font-size: 1rem;
    color: black;
    background-color: white;
    box-shadow: 0 2px 6px -4px var(--midgrey);
    cursor: alias;
}

.file_set:hover {
    background-color: var(--midgrey);
}

.clickedfileset {
    background-color: var(--palegrey);
}

.selectedfileset, .selectedfileset:hover {
    width: 18em;
    font-size: 1.2em;
    border: 2px solid black;
    color: black;
    background-color: white;
    box-shadow: 0 4px 8px -6px var(--midgrey);
}

#mapsel {
    margin-bottom: 12px;
}

.help {
    text-align: center;
}

.mapinfo, .sourcesinfo {
    display: none;
}

.intro-text {
   margin-top: 16px;
   margin-bottom: 24px;
}

#mapsvg {
    max-width:100%;
    overflow: scroll;
    border: 2px solid var(--laciblack);
    resize: both;
}