@charset "UTF-8";
/* CSS Document */
.dot {
	height: 12px;
	width: 12px;
	border-radius: 50%;
	border-style: solid;
	border-color: black;
	border-width: 1px;
	display: inline-block;
}
.quaternary {
	background-color: #F4FE7A;
}
.tertiary {
	background-color: #fcdaab;
	}
.cretaceous {
	background-color: #c7e09b;
}
.jurassic {
	background-color: #72cfec;
}
.triassic {
	background-color: #bb9dca;
}
.permian {
	background-color: #e97863;
}
.carboniferous {
	background-color: #c4c58a;
}
.devonian {
	background-color: #EF8023;
}
.silurian {
	background-color: #b1deca;
}
.ordovician {
	background-color: #32a78d;
}
.cambrian {
	background-color: #8bab78;
}
.precambrian {
	background-color: #EF5356;
}
.leaflet-control-layers {
	text-align: left;
}
/* RESIZE THE WEBPAGE TO SEE THE AFFECT */
/* With Autoprefixer Applied */

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

.mcontainer {
 height: 95vh;
 display: -webkit-box;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
     -ms-flex-direction: column;
         flex-direction: column;
	flex-basis: 1400px;
}

.header {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
  padding: 0 1rem;
}

.title {
  /* Fallback for calc / vmin */
  font-size: 2rem;
  font-size: calc( 2vmin + 1rem);
}

.map-container {
  height: 100%;
  /* Fallback for vmin */
  padding: 1rem 1rem 1rem 1rem;
  padding: 1vmin 1vmin 1vmin 1vmin;
}

.map-frame {
  height: 100%;
  width: 100%;
/*   We use outline over border as has issues in some cases */
  outline: 1px solid black;
}

#map-id { 
  height: 100%;
}

/* 
Support for browsers that DON'T support Flexbox uses 100% height on the map-container defined above.
Map will at least render, for the small amount of browsers that DON'T support flexbox. Users will just have to scroll abit ¯\_(ツ)_/¯
*/
@supports (display: flex) {
  .map-container {
    height: 0;
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
  }

  .map-frame {
    -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
            flex: 1 0 auto;
  }
}