#mapHeader{
    position:absolute;
   }
   #mapHeader > div{
    display: inline-block;
   }
   #stats{
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 80%;
    padding: 12px 24px;
   }
   #filters{
    position:fixed;
    top:12px;
    padding-left:300px;
   }
   /*#filters div{
    display: inline-grid;
    margin-right:12px;
    box-shadow:none;
   }*/
   .map-overlay__list{
    background-color:#448ee4;
    color:white;
   }

   .modalComponent{
    visibility:hidden;
   }
   #modalContent{
    max-height:510px;
    overflow-y:scroll;
   }
 #filters {
    padding-left: /*25%*/12%;
    position: fixed;
    top: 25px;
    margin: 25px auto;
}

#filters div {
    display: inline-table;
    margin-right: 20px;
}

#map {
    bottom: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

#stats {
    bottom: 35px;
    color: white;
    font-family: 'Roboto', arial, sans-serif;
    font-size: 12px;
    left:25px ;
    padding: 12px;
    position: fixed;
    display: none !important;
}

.btn .dropdown-toggle .map-overlay__button .active .map-overlay__list {
    max-height: 250px ;
}

.map-overlay__button {
    border-bottom: 1px solid #ccc;
    font-size: 0.8rem ;
    letter-spacing: .02rem ;
    min-width: 190px;
    /*max-width: 300px;*/
    padding: 14px 20px ;
    text-align: left ;
    width: 100% ;
    border-radius: 0;
}

.map-overlay__button:hover {
    background: #8a100a;
    color: #fff;
}

.btn .dropdown-toggle, .btn {
    display: inline-block;
    font-weight: 700;
    background-color: #fff ;
    color: #222;
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.16);
}

.map-overlay__filter {
    padding: 0px;
    /*max-width: 300px;*/
}

.map-overlay__list {
    height: 300px;
    margin: 0;
    overflow: auto;
    padding: 0px;
    background: #fff;
    color: #333;
}

.map-overlay__list-item {
    border-top: 1px solid #ececec;
    font-size: 0.9rem;
    letter-spacing: .02rem;
    padding: 12px 20px;
}

.map-overlay__list-item:first-child {
    padding-top: .65rem;
}

.mapboxgl-ctrl-group:not(:empty) {
    -moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1) ;
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1) ;
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1) ;
}

.mapboxgl-popup .mapboxgl-popup-anchor-bottom ,.mapboxgl-popup .mapboxgl-popup-anchor-top ,.mapboxgl-popup .mapboxgl-popup-anchor-top-right ,.mapboxgl-popup .mapboxgl-popup-anchor-top-left, .mapboxgl-popup .mapboxgl-popup-anchor-bottom-left ,.mapboxgl-popup .mapboxgl-popup-anchor-bottom-right  {
    padding: 10px;

      }
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip, .mapboxgl-popup-anchor-top .mapboxgl-popup-tip, .mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip, .mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip, .mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip, .mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip {
    border-bottom-color: #480000 ;
    border-top-color: #480000 ;
}

.mapboxgl-popup-anchor-left .mapboxgl-popup-tip {
    border-right-color: #480000 ;
}

.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
    border-left-color: #480000 ;
}

.mapboxgl-popup-close-button {
    color: #fff ;
    font-size: 20px ;
    font-weight: normal ;
}

.mapboxgl-popup-content {
    background-color: rgba(138, 15, 11, 0.85) ;
    border: 1px solid #480000 ;
    border-radius: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) ;
    color: #fff ;
    padding: 7px 7px 3px ;
}

.mapboxgl-popup-content h3 {
    display: block;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .05em;
    margin-block-end: 0em;
    margin-block-start: 0em;
    max-width: 155px;
    text-transform: uppercase;
}

.mapboxgl-controcontainer {
    padding: 10px 4px;
      }
.total-count {
    background-color: #E24D4D;
    border-radius: 7px;
    height: 26px;
    padding: 6px 10px;
    width: 38px;
    font-weight: normal;
    color: #fff;
}


body {
    margin: 0;
    padding: 0;
}

/*.mapboxgl-ctrl-top-right .mapboxgl-ctrl {
	float: right !important;
	margin: 200px 10px !important;
}*/

div.mapboxgl-popup-content li:nth-child(2) {
    border-bottom: 2px solid #b5726c ;
    margin-bottom: 8px ;
    padding-bottom: 10px ;
}

div.mapboxgl-popup-content ul {
    font: 14px/24px 'Roboto', Arial, sans-serif ;
    font-weight: 400;
    list-style: none ;
    padding-inline-end: 1.1em ;
    padding-inline-start: 1.1em ;
}

option {
    border-bottom: 1px solid #ccc;
    letter-spacing: 0.3px;
    line-height: 43px;
}

select {
    background: rgba(138, 16, 11, 0.84);
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.16);
    color: #fff;
    /*background-color: #8A100B;*/
    display: inline-table;
    font-size: 15px;
    height: 45px;
    width: 196px;
}

.w600 {
    width: 64% !important;
    max-width: 940px !important;
}

.bg-red, .bg-white {
    background-color: rgba(138, 17, 9, .85) !important;
    color: #fff !important;
}

#facultyTable {
    width: 100%;
    z-index: 9999;
}
#facultyTable thead {
    position: absolute;
    display: table;
}

#facultyTable td {
    padding: 10px 12px 10px 2px ;
    border-bottom: 1px solid #ad4f4f;
}
#facultyTable tr:hover td {
    background: #6b130d;
    cursor: pointer;
}

#facultyTable th {
    padding: 5px 4px ;
    text-align: left ;
    text-transform: uppercase;
    font-size: 13px;
    color: #e1c88f;
    border-bottom: 2px solid #c56a6a;
    letter-spacing: .03em;
    position: sticky;
}

/*This will work on every browser*/

.color-darken50 {
    color: #b29d6c !important;
    font-size: 24px!important;
}

.pt60 {
    padding-top: 100px !important;
}

.scroll {
    width: 200px;
    height: 400px;
    background: red;
    overflow: scroll;
}

#modalTitle {
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 600;
}

#modalContent {
    max-height: 400px;
    overflow-y: auto;
}

#modalContent:-webkit-scrollbar {
    width: 12px;
}

#modalContent:-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

#modalContent:-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

      /* Shape: */
.chevron {
    display: inline-block;
    float: right;
    right: -22px;
    background-color: #D01C19;
    -webkit-mask-image: url(chevron.svg);
    mask-image: url(chevron.svg);
    mask-position: 1rem 1rem, right;
    height: 8px;
    width: 12px;
    position: relative;
    top: 8px;
}
.active:hover .chevron {
    -webkit-mask-image: url(chevron-up-white.svg) !important;
    mask-image: url(chevron-up-white.svg) !important;
    height: 8px;
    width: 12px;
    background-color: #fff;
      }
.active .chevron {
    -webkit-mask-image: url(chevron-up-white.svg) !important;
    mask-image: url(chevron-up-white.svg) !important;
    height: 8px;
    width: 12px;
    background-color: #D01C19;
      }
@media screen and (max-width: 1200px) and (min-width: 767px) {
      #filters {
         padding-left: 25px;
          top: 5px;
            margin: 10px auto;
     }
   }

@media screen and (max-width: 767px) and (min-width: 340px) {
  #stats, .mapbox-improve-map {
    display: none;
  }
    .w600 {
    width: 95% !important;
    max-width: 370px !important;
    }
    #filters {
       padding-left: 10px;
        top: 5px;
            margin: 5px auto;
     }
    .map-overlay__button {
      padding: 10px 6px 10px 10px;;
        }
    .chevron {
        right: -14px
      }
      .map-overlay__filter {
        padding: 0px;
        margin-right: 48px !important;
    }
    .map-overlay__control {
        margin: .5rem;
    }
  }