/* body */
html {
  position: relative;
  min-height: 100%;
}

body {
  overflow-x: hidden;
  font-family: 'Figtree', Arial, Helvetica, sans-serif;
  background-color: #f2f2f2;
}

/* Header */
header {    
    background-color: #194091;
}

/* navigation */
.nav-link {color: #ffffff !important;}
.dropdown-menu.show {z-index: 1500;}

/* viewport */
.content-wrapper {
  min-height: calc(100vh - 56px);
  padding-top: 1rem;
}

@media (min-width: 992px) {
  .content-wrapper {
    margin-left: 50px;
    margin-right: 50px;
    min-height: calc(100vh - 56px);
  }

  .navigation-wrapper {
    padding-left: 50px;
    padding-right: 50px;
  }
}

@media (max-width: 994px) {
  .branding {
    text-align: center !important;
  }
}

@media (min-width: 994px) {
  .branding-form {
    float: right !important;
  }
}

@media (min-width: 1400px) {
  .content-wrapper {
    margin-left: 100px;
    margin-right: 100px;
    min-height: calc(100vh - 56px);
  }

  .navigation-wrapper {
    padding-left: 100px;
    padding-right: 100px;
  }
}

@media (min-width: 1500px) {
  .content-wrapper {
    margin-left: 200px;
    margin-right: 200px;
    min-height: calc(100vh - 56px);
  }

  .navigation-wrapper {
    padding-left: 200px;
    padding-right: 200px;
  }
}

@media (min-width: 1600px) {
  .content-wrapper {
    margin-left: 250px;
    margin-right: 250px;
    min-height: calc(100vh - 56px);
  }

  .navigation-wrapper {
    padding-left: 250px;
    padding-right: 250px;
  }
}

@media (max-width: 449px) {
  h4 {
    font-size: 1rem !important;
  }
}

@media (min-width: 450px) {
  h4 {
    font-size: 1.2rem !important;
  }
}

@media (min-width: 576px) {
  .card-columns {
    column-count: 1;
  }

  .modal-content {
    width: 90% !important;
  }

  h4 {
    font-size: 1.2rem !important;
  }
}

@media (min-width: 992px) {
  .card-columns {
    column-count: 2
  }

  .modal-content   {
    width: 80% !important;
  }

  h4 {
    font-size:1.2rem !important;
  }
}

@media (min-width: 1060px) {
  .card-columns {
    column-count: 2
  }

  .modal-content   {
    width: 80% !important;
  }

  h4 {
    font-size:1.2rem !important;
  }
}

@media (min-width: 1200px) {
  .card-columns {
    column-count: 2;
  }

  .modal-content {
    width: 70% !important;
  }

  h4 {
    font-size: 1.5rem !important;
  }

  .thumbnail {
    padding-left: 25px !important;
  }
}

/* modal settings */
.modal {
  display: none;
  position: fixed;
  z-index: 999999;
  padding-top: 50px;
  padding-right: 0px !important;
  padding-bottom: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}

/* modal content */
.modal-content {
  margin: auto;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover, .close:focus {
  text-decoration: none;
  cursor: pointer;
}

/* loading map */
.loading {
  position: absolute;
  background-color: rgba(0,0,0,0.4);
  width: 100%;
  height: 100%;
  z-index: 1001;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* leaflet background */
.leaflet-container {
    background-color:rgba(255,255,255,1);
}

/* leaflet time slider */
@font-face {
  font-family:'Glyphicons Halflings';
  src:url(//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot);
  src:url(//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),url(//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.woff) format('woff'),url(//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttf) format('truetype'),url(//netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular) format('svg')
}

.leaflet-bar-timecontrol {
  background-color:#fff;
  color:#000
}

.leaflet-bar-timecontrol *{
  box-sizing:border-box
}

.leaflet-bar-timecontrol .leaflet-control-timecontrol {
  float:left;
  height:26px;
  line-height:26px;
  border:solid #a5a5a5;
  background-color:#fff;
  border-width:0 1px 0 0
}

.leaflet-bar-timecontrol a.timecontrol-date.loading,.leaflet-bar-timecontrol a.timecontrol-date.loading:hover,.leaflet-bar-timecontrol a.timecontrol-play.loading {
  background-color:#ffefa4
}

.leaflet-bar-timecontrol .leaflet-control-timecontrol:first-child {
  border-radius:4px 0 0 4px
}

.leaflet-bar-timecontrol .leaflet-control-timecontrol:last-child {
  border-radius:0 4px 4px 0
}

.leaflet-bar-timecontrol .leaflet-control-timecontrol:before {
  font-family:'Glyphicons Halflings';
  display:block
}

.leaflet-bar-timecontrol .timecontrol-slider {
  position:relative;
  width:auto;
  cursor:auto
}

.leaflet-bar-timecontrol a.timecontrol-date,.leaflet-bar-timecontrol a.timecontrol-date:hover {
  position:relative;
  min-width:150px;
  width:auto;
  padding:0 10px 0 20px;
  white-space:nowrap;
  font-weight: bold
}

.leaflet-bar-timecontrol a.timecontrol-date.utc,.leaflet-bar-timecontrol a.timecontrol-date.utc:hover {
  min-width:150px;
  font-weight: bold
}

.leaflet-bar-timecontrol .timecontrol-dateslider .slider {
  width:200px
}

.leaflet-bar-timecontrol .timecontrol-speed {
  white-space:nowrap;
  cursor:auto
}

.leaflet-bar-timecontrol .timecontrol-speed .slider {
  width:55px;
  display:inline-block
}

.leaflet-bar-timecontrol .timecontrol-speed .speed {
  width:55px;
  display:inline-block;
  float:left;
  text-align:right
}

.leaflet-bar-timecontrol .timecontrol-play,.leaflet-bar-timecontrol .timecontrol-play:hover {
  position:relative
}

.leaflet-bar-timecontrol .timecontrol-play span {
  font-size:10px
}

.timecontrol-slider .slider {
  position:relative;
  height:12px;
  margin:6px;
  border:1px solid #a5a5a5;
  cursor:pointer
}

.timecontrol-slider .slider.has-limits {
  margin-left:15px;
  margin-right:15px;
  background-color:#ddd
}

.timecontrol-slider .slider.has-limits .range {
  position:absolute;
  height:10px;
  background-color:#fff
}

.timecontrol-slider .knob {
  position:absolute;
  width:8px;
  height:22px;
  background-color:#ddd;
  border-radius:2px;
  border:1px solid #a5a5a5;
  margin-top:-6px;
  margin-left:-4px;
  cursor:ew-resize;
  cursor:-webkit-grab;
  cursor:-moz-grab
}

.timecontrol-slider .knob:after {
  content:' ';
  display:block;
  position:absolute;
  width:20px;
  top:-5px;
  height:32px;
  left:-7px
}

.timecontrol-slider .knob.lower,.timecontrol-slider .knob.upper {
  width:11px;
  height:20px;
  border:none;
  background-color:transparent
}

.timecontrol-slider .knob.upper {
  margin-top:-5px;
  margin-left:-1px
}

.timecontrol-slider .knob.lower {
  margin-top:-5px;
  margin-left:-10px
}

.timecontrol-slider .knob.lower:after {
  right:0;
  left:initial
}

.timecontrol-slider .knob.upper:after {
  left:0
}

.timecontrol-slider .knob.lower:before,.timecontrol-slider .knob.upper:before {
  display:block;
  content:'';
  position:relative;
  top:2px;
  width:0;
  height:0;
  border-style:solid
}

.timecontrol-slider .knob.upper:before {
  border-width:16px 0 0 10px;
  border-color:transparent transparent transparent #a5a5a5
}

.timecontrol-slider .knob.lower:before {
  border-width:0 0 16px 10px;
  border-color:transparent transparent #a5a5a5
}

.timecontrol-slider .dragging .knob,.timecontrol-slider .knob.leaflet-drag-target,.timecontrol-slider .slider.dragging {
  cursor:ew-resize;
  cursor:grabbing;
  cursor:-webkit-grabbing;
  cursor:-moz-grabbing
}

@-webkit-keyframes icon-rotation {
  from {
    -webkit-transform:rotate(0);
    transform:rotate(0)
  }
  to {
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg)
  }
}

@keyframes icon-rotation {
  from {
    -webkit-transform:rotate(0);
    transform:rotate(0)
  }
  to {
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg)
  }
}
.timecontrol-loop.looped,.timecontrol-loop.looped:hover {
  background-color:#ddd;
  color:#094F8E
}

.timecontrol-backward:before,.timecontrol-forward:before,.timecontrol-loop:before,.timecontrol-play:before,.timecontrol-stop:before{
  width:100%;
  text-align:center
}

.timecontrol-play:before {
  position:absolute;
  content:"\e072"
}

.timecontrol-play.reverse:before {
  content:"\e072";
  -ms-transform:scaleX(-1);
  -webkit-transform:scaleX(-1);
  transform:scaleX(-1)
}

.timecontrol-play.pause:before {
  content:"\e073"
}

.timecontrol-play.reverse.pause:before {
  -ms-transform:none;
  -webkit-transform:none;
  transform:none
}

a.timecontrol-play.loading:before {
  content:"\e031";
  opacity:.2;
  -webkit-animation:icon-rotation 6s infinite linear;
  animation:icon-rotation 6s infinite linear
}

.timecontrol-date.loading:before {
  content:"\e031";
  left:5px;
  position:absolute;
  -webkit-animation:icon-rotation 6s infinite linear;
  animation:icon-rotation 6s infinite linear
}

.timecontrol-speed:before {
  content:"\e141";
  position:absolute;
  left:7px
}

.timecontrol-stop:before {
  content:"\e074"
}

.timecontrol-forward:before {
  content:"\e075"
}

.timecontrol-backward:before {
  content:"\e071"
}

.timecontrol-loop:before {
  content:"\e030"
}

@media (max-width:767px){
  .leaflet-bar-timecontrol .timecontrol-date,.leaflet-bar-timecontrol .timecontrol-slider {
      clear:both;
      float:none;
      border-right:none
  }
}

.leaflet-touch .leaflet-bar-timecontrol .leaflet-control-timecontrol {
  height:30px;
  line-height:30px
}

.leaflet-touch .timecontrol-slider .slider {
  margin-top:10px
}

/* background for alerts */
.bg-orange {background-color:	#fdae6b;}
.bg-custom {background-color: #194091;}
.bg-notes {background-color: #b8bcd1;}

/* buttons */
.btn:focus, .btn:active {
  outline: none !important;
  box-shadow: none !important;
}

/* forenames */
.btn-historic {
  pointer-events: none;
  color: #ffffff;
  background-color: rgba(27,158,119,0.8);
}

.btn-contemporary {
  pointer-events: none;
  color: #ffffff;
  background-color: rgba(117,112,179,0.8);
}

/* expandable text  */
button[aria-expanded=true] .fa-angle-double-down {
   display: none;
}
button[aria-expanded=false] .fa-angle-double-up {
   display: none;
}

/* output area classification */
.btn-g1 {background-color: #ccbb99;}
.btn-g1.suba {background-color: #ccbb99;}
.btn-g1.subb {background-color: #e4d3b1;}
.btn-g1.subc {background-color: #ffeecc;}
.btn-g2 {background-color: #4daf4a;}
.btn-g2.suba {background-color: #2d7f2a;}
.btn-g2.subb {background-color: #4daf4a;}
.btn-g2.subc {background-color: #8def8a;}
.btn-g3 {background-color: #ff0000;}
.btn-g3.suba {background-color: #ff0000;}
.btn-g3.subb {background-color: #cc0000;}
.btn-g3.subc {background-color: #990000;}
.btn-g4 {background-color: #f781bf;}
.btn-g4.suba {background-color: #f781bf;}
.btn-g4.subb {background-color: #f761af;}
.btn-g4.subc {background-color: #f7419f;}
.btn-g5 {background-color: #ff7f00;}
.btn-g5.suba {background-color: #ff7f00;}
.btn-g5.subb {background-color: #ffaf00;}
.btn-g6 {background-color: #ffcb1f;}
.btn-g6.suba {background-color: #ffcb1f ;}
.btn-g6.subb {background-color: #cc9b1f ;}
.btn-g6.subc {background-color: #996b1f ;}
.btn-g7 {background-color: #377eff;}
.btn-g7.suba {background-color: #377eff;}
.btn-g7.subb {background-color: #77aeff;}
.btn-g8 {background-color: #984ea3;}
.btn-g8.suba {background-color: #984ea3;}
.btn-g8.subb {background-color: #b784bf;}
.btn-g99 {background-color: #dddddd;}
.btn-g99.sub {background-color: #dddddd;}

/* london output area classifciation */
.btn-lA {background-color: #66C2A5;}
.btn-lA.sub1 {background-color: #539B84;}
.btn-lA.sub2 {background-color: #97C3B5;}
.btn-lA.sub3 {background-color: #C5FFEC;}
.btn-lB {background-color: #FC8D62;}
.btn-lB.sub1 {background-color: #CA714E;}
.btn-lB.sub2 {background-color: #FC9872;}
.btn-lC {background-color: #8DA0CB;}
.btn-lC.sub1 {background-color: #63708E;}
.btn-lC.sub2 {background-color: #C6D0E5;}
.btn-lD {background-color: #E78AC3;}
.btn-lD.sub1 {background-color: #B96E9C;}
.btn-lD.sub2 {background-color: #EEADD5;}
.btn-lD.sub3 {background-color: #FFB9DA;}
.btn-lE {background-color: #A6D854;}
.btn-lE.sub1 {background-color: #74973B;}
.btn-lE.sub2 {background-color: #CAE898;}
.btn-lF {background-color: #FFD92F;}
.btn-lF.sub1 {background-color: #CCAE26;}
.btn-lF.sub2 {background-color: #FFE882;}
.btn-lG {background-color: #D9dddf;}
.btn-lG.sub1 {background-color: #7D7D7D;}
.btn-lG.sub2 {background-color: #D1D1D1;}
.btn-l99 {background-color: #dddddd;}
.btn-l99.sub {background-color: #dddddd;}

/* internet user classification */
.btn-iuc1 {background-color: #ea4d78;}
.btn-iuc2 {background-color: #f36d5a;}
.btn-iuc3 {background-color: #e4a5d0;}
.btn-iuc4 {background-color: #ffd39b;}
.btn-iuc5 {background-color: #a5cfbc;}
.btn-iuc6 {background-color: #d2d1ab;}
.btn-iuc7 {background-color: #79cdcd;}
.btn-iuc8 {background-color: #dd7cdc;}
.btn-iuc9 {background-color: #808fee;}
.btn-iuc10 {background-color: #8470ff;}
.btn-iuc99 {background-color: #dddddd;}

/* ethnicity estimator */
.btn-eee1 {background-color: #fccde5; pointer-events: none;}
.btn-eee2 {background-color: #b3de69; pointer-events: none;}
.btn-eee3 {background-color: #fdb462; pointer-events: none;}
.btn-eee4 {background-color: #ffffb3; pointer-events: none;}
.btn-eee5 {background-color: #bebada; pointer-events: none;}
.btn-eee6 {background-color: #fb8072; pointer-events: none;}
.btn-eee7 {background-color: #80b1d3; pointer-events: none;}
.btn-eee8 {background-color: #8dd3c7; pointer-events: none;}
.btn-eee9 {background-color: #d9d9d9; pointer-events: none;}
.btn-eee99 {background-color: #d9d9d9; pointer-events: none;}

/* std */
.btn-avg {background-color: #fc8d62; pointer-events: none;}
.btn-sd {background-color: #8da0cb; pointer-events: none;}

/* colour ramps */
.ramp_class {
  width:100%;
  height:50px;
}

.ramp {
  float: left;
  width: 10%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

.mode-select {
  border-color: #000000;
  border-width: 5px;
  border-style: solid;
}

/* ahah ramp */
.ramp.a1 {background: #F46D43;}
.ramp.a2 {background: #F68A5B;}
.ramp.a3 {background: #F8A774;}
.ramp.a4 {background: #FAC48D;}
.ramp.a5 {background: #FCE1A6;}
.ramp.a6 {background: #FFFFBF;}
.ramp.a7 {background: #D0DCBC;}
.ramp.a8 {background: #A2BAB9;}
.ramp.a9 {background: #7397B6;}
.ramp.a10 {background: #4575B4;}

/* imd */
.ramp.i1 {background: #a50026;}
.ramp.i2 {background: #d73027;}
.ramp.i3 {background: #f46d43;}
.ramp.i4 {background: #fdae61;}
.ramp.i5 {background: #fee08b;}
.ramp.i6 {background: #d9ef8b;}
.ramp.i7 {background: #a6d96a;}
.ramp.i8 {background: #66bd63;}
.ramp.i9 {background: #1a9850;}
.ramp.i10 {background: #006837;}

/* bbs */
.ramp.b1 {background: #276419;}
.ramp.b2 {background: #4d9221;}
.ramp.b3 {background: #7fbc41;}
.ramp.b4 {background: #b8e186;}
.ramp.b5 {background: #e6f5d0;}
.ramp.b6 {background: #fde0ef;}
.ramp.b7 {background: #f1b6da;}
.ramp.b8 {background: #de77ae;}
.ramp.b9 {background: #c51b7d;}
.ramp.b10 {background: #8e0152;}

/* footer xl */
.mb-xl {margin-bottom: 4rem ;}