:root {
  --yaleblue: #044B7F;
}

body {
  font-family: 'Open Sans', sans-serif;
}

body.mapPages {
  background-color:#86B8D9;
}

body.nonmapPages {
  background-color:#F7F5F2;
}

p {
  font-family: 'Domine', sans-serif;
  font-size: 1rem;
}

h2, h5.tRole {
  font-family: 'Domine', sans-serif;
}

h5.tRole {
  font-style: italic;
}

.tMember {
  color: #50514F;
  margin-top: 16px;
}

.tSection {
  margin-top: 32px;
  text-transform: uppercase;
  color: rgba(0,0,0,0.5);
}

b {
  color: #be5a38;
}

#aContainer {
  padding: 0;
  color: #FFFFFF;
  position: absolute;
  z-index: 100;
  right: 0;
  width: 90vw;
}

.leaflet-container {
  font-family: 'Open Sans', sans-serif;
}

.leaflet-container a, #aLlist a, #Llist a, #team a {
  text-decoration: none;
  color: #247BA0;
}

.leaflet-container a:hover, #aLlist a:hover, #team a:hover , a:hover.navbar-brand-mobile {
  color: #91972a;
}

.accordion {
  --bs-accordion-bg: #F7F5F2;
  --bs-accordion-btn-focus-border-color: #F7F5F2;
  --bs-accordion-active-bg: #F7F5F2;/*#C3B299;*/
  --bs-accordion-active-color: var(--bs-body-color);
  --bs-accordion-btn-focus-box-shadow: none!important;
}

.accordion-button {
  font-size: calc(1.325rem + .9vw)!important;
  color: var(--bs-body-color);
  padding-left: 0!important;
  padding-right: 0!important;
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%20data-prefix%3D%22fas%22%20data-icon%3D%22caret-up%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20512%22%20class%3D%22svg-inline--fa%20fa-caret-up%20fa-w-10%20fa-3x%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M288.662%20352H31.338c-17.818%200-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81%2020.474-7.81%2028.284%200l128.662%20128.662c12.6%2012.599%203.676%2034.142-14.142%2034.142z%22%20class%3D%22%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  transform: rotate(180deg);
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%20data-prefix%3D%22fas%22%20data-icon%3D%22caret-up%22%20role%3D%22img%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20512%22%20class%3D%22svg-inline--fa%20fa-caret-up%20fa-w-10%20fa-3x%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M288.662%20352H31.338c-17.818%200-26.741-21.543-14.142-34.142l128.662-128.662c7.81-7.81%2020.474-7.81%2028.284%200l128.662%20128.662c12.6%2012.599%203.676%2034.142-14.142%2034.142z%22%20class%3D%22%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
  transform: rotate(0deg);
}

.accordion-body {
  padding-left:0!important;
  padding-right: 0!important;
}

div#creditsLogos div {
  display:flex;
}

div#creditsLogos ul {
  list-style-type: none!important;
  /*width: inherit;*/
  padding-left: 0px;
  padding-right: 0px;
}

div#creditsLogos ul li{
  float:left;
  margin: 16px 32px;
}

#Llist a:hover {
  color: #FFFFFF;
}

#infoTxt, #infoTxt2 {
  padding-left: 15px;
  font-size: 0.9rem;
  margin-bottom: 5px;
  color: #000;
}

#infoTxt2 {
  padding-left: 0!important;
}

div.leaflet-control-layers-base label, div.leaflet-control-layers-overlays{
  margin-left: 16px!important;
  color: #000;
}

div.leaflet-control-layers-separator {
  opacity: 0.5;
  margin-left: 16px;
  margin-right: 2px;
}

.leaflet-control-layers-expanded {
  color: #FFFFFF;
  background: #C3B299;
  max-width: 350px;
}

.leaflet-control-layers-list {
  padding-bottom:10px;
}

/* Base Map */
#map {
  height: 100vh;
}

#legendMap {
  width: 300px;
  margin-left: 16px;
  margin-top: 10px;
}

#Ltitle {
  padding-left: 15px;
  margin-top: 15px;
}

#Llist, #aLlist {
  max-width: 400px;
  list-style: none;
  padding-left: 15px;
  font-size: 0.9rem;
}

#aLlist {
  max-width: 100%;
  font-size: 1rem;
}

#Lheader {
  padding-left: 15px;
  color: #50514F;
}

#arTab {
  margin-top: 16px;
}

#links-tab.nav-link, #layers-tab.nav-link, #lmap-tab.nav-link {
  color: black!important;
  background-color: white!important;
  border-color: white!important;
}

#links-tab.nav-link.active, #layers-tab.nav-link.active, #lmap-tab.nav-link.active {
  color: white!important;
  background-color: #50514F!important;
  border-color: #50514F!important;
}

.navbar-brand-mobile {
  display:none;
}

.navbar-brand-desktop {
  display:block;
  color: #50514F;
  font-family: 'Domine',serif;
  margin-left: 5px;
}

.floatBtn {
  background-color: white;
  padding: 10px 20px!important;
  color: black;
  border-radius: 5px;
  text-decoration: none;
  /*margin-top: 32px !important;*/
  text-transform: uppercase;
  font-weight: bold;
  border: 2px solid rgba(0,0,0,0.3);
  margin-left: 3px;
  margin-right: 3px;
}

a.floatBtn.highlighted {
  background-color: #C3B299;
  color: #FFFFFF!important;
}

a.floatBtn:hover {
  background-color: #F7F5F2;
  color: #50514F!important;
}

.leaflet-control-zoom-out, .leaflet-control-zoom-in {
  color: #000;
}

.arTooltip {
  color: #FFFFFF;
  background-color: #000;
  border: none;
  border-radius: 5px;
}

.arLabel, .modernLabel, .colonialLabel, .watersLabel, .riversLabel, .tropicsLabel, .oceansLabel, .seasLabel, .redSea, .adenGulf, .landformsLabel, .riftValley, .drakensberg, .atlas, .zambezi, .limpopo, .volta, .senegal, .niger {
  color: #50514F;
  background-color: transparent!important;
  border: none!important;
  box-shadow: none!important;
}

.modernLabel {
  text-transform: uppercase;
  font-family: 'Times New Roman', serif;
}

.colonialLabel {
  color: black;
  text-transform: uppercase;
  font-family: 'Times New Roman', serif;
  visibility: hidden;
}

.watersLabel {
  color: black;
  font-style: italic;
  font-family: 'Times New Roman', serif;
  letter-spacing: 3px;
}

.riversLabel, .zambezi, .limpopo, .volta, .senegal, .niger {
  color: var(--yaleblue,blue);
  font-style: italic;
  font-family: 'Times New Roman', serif;
  letter-spacing: 3px;
  font-size: 13px;
}

.tropicsLabel {
  color: red;
  font-family: 'Times New Roman', serif;
  letter-spacing: 3px;
  font-size: 13px;
}

.oceansLabel {
  color: var(--yaleblue,blue);
  font-family: 'Times New Roman', serif;
  letter-spacing: 3px;
  font-size: 19px;
  text-align: center!important;
}

.landformsLabel, .riftValley, .drakensberg, .atlas {
  color: black;
  font-family: 'Times New Roman', serif;
  /*letter-spacing: 3px;*/
  font-size: 13px;
  font-weight: bold;
  text-align: center!important;
}

.seasLabel, .redSea, .adenGulf {
  color: var(--yaleblue);
  font-family: 'Times New Roman', serif;
  letter-spacing: 3px;
  font-size: 16px;
  text-align: center!important;
}

.redSea, .adenGulf, .riftValley, .drakensberg, .atlas, .zambezi, .limpopo, .volta, .senegal, .niger {
  transform-origin: center;
}

/* Hide the Tooltip triangle */
.leaflet-tooltip-left.arTooltip::before{
  border-left-color: transparent;
}

.leaflet-tooltip-right.arTooltip::before{
  border-right-color: transparent;
}

.leaflet-popup-tip {
    /*background: rgba(0, 0, 0, 0) !important;
    box-shadow: none !important;*/
}

.leaflet-tooltip-top:before,
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-left:before,
.leaflet-tooltip-right:before {
    border: none !important;
}

/* Side Panel */
#main {
  transition: margin-right .5s;
  /*padding: 20px;*/
}

.sidePanel {
  height: 100%;
  width: 0; /* Will be changed using JavaScript */
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  background-color: #F7F5F2;
  border-left: 1px solid rgba(0,0,0,0.2);
  overflow-x: hidden; /* No horizontal scroll */
  padding-top: 60px;
  transition: 0.5s;
  color: #111;
}

.sidePanel .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

.closebtn, .closebasebtn {
  color: #472836;
  text-decoration: none;
}

.leaflet-popup-close-button {
  margin: 5px;
}

#rContainer {
  position: fixed;
  max-height: 90vh;
  overflow-y: auto;
  width: 350px;
}

#rTitle {}

#rDesc {}

/* Blur the SVGs */
.blurme {
  -webkit-filter: url('#myblurfilter');
  -moz-filter: url('#myblurfilter');
  -o-filter: url('#myblurfilter');
  -ms-filter: url('#myblurfilter');
  filter: url('#myblurfilter');
}

.navbar-toggler {
  margin-bottom: 8px;
}

nav.noBorder {
  border: none;
  margin-right: 0px;
}

#google_translate_element {
  padding-left: 5px;
  padding-right: 5px;
  background-color: #F7F5F2;
  padding-top: 5px;
  border-radius: 5px;
}

#layers {
  margin-left: 10px;
  margin-right: 10px;
}

ul#arTab.nav.nav-tabs {
  margin-left: 10px;
  margin-right: 10px;
}

div#arTabContent.tab-content{
  min-height: 250px;
  padding-top: 16px;
}

@media screen and (max-width: 1200px){
  /* Catch larger screens and below */
  /* About Page */
  div#creditsLogos ul li{
    margin: 16px 10px;
  }
  div#creditsLogos ul li img{
    max-width: 130px!important;
    height:auto;
  }
}

@media screen and (max-width: 992px){
  /* Catch larger tablets and below */
  /* About Page */
  table tbody tr, table tbody tr td {
    height: fit-content!important;
  }
  table tbody tr td p img {
    width: 65vw !important;
    height: auto !important;
  }
}

@media screen and (max-width: 768px){
  /* For mobile phones & tablets */
  .leaflet-control-layers-expanded {
    width: 250px;
    margin-bottom: 32px!important;
    margin-left: 16px!important;
  }

  #legendMap, #Llist, .divider {
    display: none;
  }

  #infoTxt, #infoTxt2 {
    margin-top: 16px;
  }

  .leaflet-popup-content {
    width: 250px!important;
  }

  nav {
    --bs-bg-opacity: 1;
    background-color: #F7F5F2;
    border-radius: 2px;
    border: 2px solid rgba(0,0,0,0.2);
    margin-right: 8px;
  }

  .navbar-brand-mobile {
    display:block;
    color: #50514F;
    font-family: 'Domine',serif;
    margin-left: 5px;
    text-decoration: none;
  }

  .navbar-brand-desktop {
    display: none;
  }

  .floatBtn {
    border-radius: 0px;
    border: none;
  }

  .navbar-toggler:focus{
    box-shadow: none;
  }

  .navbar-toggler {
    border:none;
  }

  #aContainer {
    width: 80vw;
  }

  /* About Page */
  table tbody tr td p img {
    width: 75vw !important;
    height: auto !important;
  }
}

@media screen and (max-width: 576px){
  /* For mobile phone */
  /* About Page */
  table tbody tr, table tbody tr td {
    height: fit-content!important;
  }
  table tbody tr td p img {
    width: 90vw !important;
    height: auto !important;
  }
  div#creditsLogos ul {
    padding-left: 0px;
  }
}