#map {
  height: 1225px;
  width: 100vw;
}

/* --------------- General Map --------------- */
/* Restricts width to 1920px */
#map {
  max-width: 1920px;
}

.options-container {
  background: white;
  border: 1px solid #bab3ad;
  border-bottom: 1px solid #bab3ad;
  margin-right: 20px !important;
  margin-top: 20px !important;
  -webkit-box-shadow: 2px 2px gray;
          box-shadow: 2px 2px gray;
}
/* Formats map control buttons (e.g. location) */
.map-button {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: #fff;
  cursor: pointer;
  padding: 6px;
  border: 0;
  border-bottom: 1px solid #bab3ad;
  width: 100%;
}

/* Sizes images used in control buttons */
.map-button-img {
  height: 25px;
  width: 25px;
}

.map-container h1.page-title {
  /*
  text-align: center;
  margin-top: .25em;*/
  position:absolute;
  left:-10000px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.map-container h2 {
  font-weight: bold;
  font-family: "aleobold", serif;
  font-size: 1.75em;
}

#sidebar-left,
.search-result,
.section-header h3 {
  font-family: "Lato", sans-serif;
}

/* --------------- Admin Tabs --------------- */

.map-content .footerDiv {
  margin: 1em;
  text-align: center;
}

.map-content .footerDiv .buttonColumn {
  margin: 0 .25em;
}

/* --------------- Search Bars --------------- */

/* Allows input and clear button to be beside each other */
.search {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
}
/* Styles the input search bar */
.search-bar {
  width: 88%;
  -webkit-border-radius: 5px 0 0 5px;
          border-radius: 5px 0 0 5px;
  padding: 7px 12px;
  margin: 1.25em 0 .25em 0;
  font-size: 16px;
  display: inline-block;
  border: 1px solid #ccc;
  border-right: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
/* Removes clear 'x' in Microsoft browsers */
.search-bar::-ms-clear {
  display: none;
}
/* Styles the block for the search results */
.search-results {
  margin-top: -.35em;
  font-size: 16px;
  background-color: white;
  border: 1px solid #ccc !important;
  border-bottom: none !important;
}
/* Styles the button for clearing the search */
.clear-search {
  -webkit-border-radius: 0 5px 5px 0;
          border-radius: 0 5px 5px 0;
  margin: 1.25em 0 .25em 0;
  display: inline-block;
  font-size: 16px;
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 12%;
}
/* Dims background on hover */
.clear-search:hover {
  background: #a2aaad;
  cursor: pointer;
  -webkit-transition: 200ms;
  -o-transition: 200ms;
  transition: 200ms;
}
/* Styles each individual search result */
.search-result {
  display: block;
  font-size: 16px;
  text-decoration: none;
  border: none;
  border-bottom: 1px solid #ccc;
  padding: .4em .8em;
  background-color: #ffffff;
  width: 100%;
  text-align: left;
  color: #0078A8;
}
/* Adds the hover effect on the individual search result */
.search-result:hover {
  background-color: #e8e8e8;
  color: black;
  cursor: pointer;
  -webkit-transition: 200ms;
  -o-transition: 200ms;
  transition: 200ms;
}
/* Removes border when results is empty */
.search-results:empty {
  border: none !important;
}


/* --------------- Misc. Sidebar --------------- */

/* Background color for sidebar header */
.sidebar-header {
  background-color: #862633;
}
/* Font size for sidebar footer */
.sidebar-footer {
  font-size: 16px;
}
/* Background color of back button container */
.sidebar-back {
  background: #e0e0e0;
}
/* Styles the back button across layers */
.back-button {
  background: #fff;
  border: 1px solid #bab3ad;
  padding: .5em 1.25em;
  cursor: pointer;
}
/* Allows for custom checkbox styling */
input[type="checkbox"] {
  display: none;
  z-index: 1;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  border: 2px solid #5b6770;
}
input[type="checkbox"].section-check {
  position: absolute;
  top: 1.4em;
  right: 1em;
}

/* Dims checkbox background for hover effect */
input[type="checkbox"]:hover {
  background: #ccd1d1;
  cursor: pointer;
  -webkit-transition: 200ms;
  -o-transition: 200ms;
  transition: 200ms;
}
/* Sets background color for checkbox */
input[type="checkbox"]:checked {
  background-color: #5b6770;
  -webkit-transition: 200ms;
  -o-transition: 200ms;
  transition: 200ms;
}
/* Adds checkmark to checkbox */
input[type="checkbox"]:checked:before {
  color: #ffffff;
  font-size: 16px;
  content: '\002714';
  filter: brightness(0) invert(1);
  font-weight: bold;
}
/* Lightens checkbox background for hover effect */
input[type="checkbox"]:checked:hover {
  background-color: #000000;
  -webkit-transition: 200ms;
  -o-transition: 200ms;
  transition: 200ms;
}
/* Allows for custom radio button styling */
input[type="radio"] {
  display: none;
  margin: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-border-radius: 50%;
          border-radius: 50%;
  border: 2px solid #5b6770;
}
/* Dims radio button background for hover effect */
input[type="radio"]:hover {
  background: #ccd1d1;
  cursor: pointer;
  -webkit-transition: 200ms;
  -o-transition: 200ms;
  transition: 200ms;
}
/* Sets background color for radio button */
input[type="radio"]:checked {
  background-color: #5b6770;
  -webkit-transition: 200ms;
  -o-transition: 200ms;
  transition: 200ms;
}
/* Adds checkmark to radio button */
input[type="radio"]:checked:before {
  color: #ffffff;
  font-size: 16px;
  content: '\002714';
  font-weight: bold;
}
/* Lightens checkbox background for hover effect */
input[type="radio"]:checked:hover {
  background-color: #000000;
  -webkit-transition: 200ms;
  -o-transition: 200ms;
  transition: 200ms;
}
/* Centers buttons at the bottom of layer */
.buttons {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 3em;
  margin-bottom: 1em;
}
/* Gives a little extra space to the right for the first button */
.buttons .sidebar-button:first-child {
  margin-right: 1em;
}
/* Styles the blue sidebar buttons */
.sidebar-button {
  border: none;
  background-color: #2D5986;
  color: #fff;
  font-size: 1.2em;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  font-weight: bold;
  padding: .5em 1em;
  cursor: pointer;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  width: 49%;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.share-location-btn {
  background-color: #ffffff;
  color: #2D5986;
  border: 1px solid #2D5986;
}

.sidebar-button.share-location-btn img,
#direction-button img {
  width: 20px;
  height: 20px;
}

/* Formats any image in the blue buttons */
.sidebar-button img {
  width: 25px;
  height: 25px;
  margin-right: 10px;
}
/* Sets background color of blue button */
.sidebar-button:hover {
  background-color: #1a446f;
  -webkit-transition: 200ms;
  -o-transition: 200ms;
  transition: 200ms;
}
.sidebar-button.share-location-btn:hover {
  background-color: #f1f1f1;
  -webkit-transition: 200ms;
  -o-transition: 200ms;
  transition: 200ms;
}
/* Sizes the logo container in header */
.logo-container {
  margin: 15px;
  height: 65%;
}
/* Sizes the logo image in header */
.nccu-logo {
  height: 100%;
  width: auto;
}
/* Creates fake link */
.fake-footer-link {
  color: rgb(0, 112, 192);
  cursor: pointer;
  text-decoration: underline;
}
/* Styles footer links to match fake link */
html a {
  color: rgb(0, 112, 192);
}


/* --------------- List Sidebar layer --------------- */

/* Formats location genre */
.section {
  cursor: pointer;
  margin: 0;
  width: 100%;
  margin-bottom: 5px;
  position: relative;
}
/* Sizes location genre image */
.section-image {
  height: 30px;
  width: 30px;
  margin-right: 10px;
}
/* Formats location genre title (e.g. dorm) */
.section-title h3 {
  font-size: 15px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  font-weight: bold;
  color: rgb(50, 50, 50);
  margin: 1em 0;
}
/* Adds underline to genre title */
.section-title:hover p:hover {
  text-decoration: underline;
}
/* Formats genre title row with checkbox */
.section-header {
  background: #ffffff;
  padding: 0 .5em;
  margin: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border: 1px solid silver;
  padding-left: 10px;
  padding-right: 10px;
  -webkit-transition: .2s;
  -o-transition: .2s;
  transition: .2s;
  width: 100%;
}

.section-header h3 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 1em 0;
  font-size: 1.2em;
}

.section-header:hover {
  cursor: pointer;
}
/* Styling for individual location in genre */
.section-location {
  padding: .6em .5em;
  padding-left: 1em;
  font-size: 14px;
  border: 1px solid #a2aaad;
  border-top: none;
  -webkit-transition: .2s;
  -o-transition: .2s;
  transition: .2s;
  width: 100%;
  text-align: left;
  background-color: #ffffff;
}
/* Adds underline to individual location */
.section-location:hover {
  text-decoration: underline;
  cursor: pointer;
}
/* Dims background for hover effect on individual location */
.section-header:hover,
.section-location:hover {
  background-color: #ccd1d1;
  -webkit-transition: 200ms;
  -o-transition: 200ms;
  transition: 200ms;
}
/* Don't display genre list (on default) */
.section-list
 {
  display: none;
}
/* Positioning for genre checkbox */
.section-check {
  display: block;
}


/* --------------- Location Sidebar --------------- */

/* Sizing for information icon */
.detail-image {
  width: 25px;
  height: 25px;
  margin-right: 8px;
}
/* Formatting for information about building */
.location-detail {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: .5em;
  margin-bottom: 5px;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  min-height: 2.75em;
}

.location-detail-text {
  font-size: 1.02em;
  margin: .9em 0 0 0;
}

.location-detail a:after {
  content: '';
  background: url('https://www.nccu.edu/themes/custom/nccu/style/images/icons/icon-arrowright.svg') 0 0 no-repeat;
  width: 35px;
  height: 35px;
  position: absolute;
  right: 0;
  top: 0;
}

.location-detail a {
  position: relative;
  display: block;
  width: 100%;
  padding: .5em;
  margin-bottom: .5em;
  color: #000000;
}

.location-detail p {
  width: 100%;
  margin: 0;
}

.location-detail-ico a:only-child {
  padding-left: 0;
}

.location-detail a:not(:last-child),
#location-content .location-detail:not(:last-child),
.location-detail p:not(:last-child) {
  border-bottom: 1px solid #ccc;
}

/* Sizing for name of building */
#location-title {
  font-size: 1.5em;
  margin-top: .5em;
  font-weight: bold;
}
/* Sizing for image of building */
#location-image {
  width: 100%;
  height: auto;
}
/* Sizing for information on building */
#location-content {
  font-size: 16px;
}
/* Remove underline (for aesthetic purposes) */
#location-content a {
  text-decoration: none;
  color: #000000;
  padding-right: 2em;
  padding-left: .5em;
}

#location-content a:hover {
  text-decoration: underline;
  -webkit-transition: 200ms;
  -o-transition: 200ms;
  transition: 200ms;
}

.location-inside-ico {
  background: url('../images/icons/inside-ico.svg');
}

.location-website-ico {
  background: url('../images/icons/website-ico.svg');
}

.location-phone-ico {
  background: url('../images/icons/phone-ico.svg');
}

.location-parktype-ico {
  background: url('../images/icons/parktype-ico.svg');
}

.location-accessible-ico {
  background: url('../images/icons/accessible-ico.svg');
}

.location-bathroom-ico {
  background: url('../images/icons/bathroom-ico.svg');
}

.location-printer-ico {
  background: url('../images/icons/printloc-ico.svg');
}

.location-detail-ico {
  background-size: 24px 24px;
	background-repeat: no-repeat;
	background-position: left 10px;
	padding-left: 2.3em;
	margin-bottom: .9em;
}

.location-multiple-detail-ico {
	background-position: left 9%;
}

/* --------------- Directions Sidebar layer --------------- */

/* Sizing and positioning for icons for direction options */
.direction-image {
	height: 25px;
	width: 25px;
	min-width: 25px;
	min-height: 25px;
	margin-left: .5em;
	margin-right: 10px;
}
/* Sizing for starting point options */
.direction-options {
	font-size: 1.4em;
}
/* Formatting for individual starting point option */
.direction-option {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-webkit-align-items: center;
	    -ms-flex-align: center;
	        align-items: center;
	margin-bottom: 15px;
}
/* Sizing for length of route */
#directions-time {
	text-align: center;
	font-size: 16px;
}
/* Formatting for location search bar */
.direction-search {
	width: 80%;
	-webkit-border-radius: 5px;
	        border-radius: 5px;
	padding: 7px 12px;
	font-size: 16px;
	border: 1px solid #ccc;
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
/* Creates custom box for directions */
#directions-info {
	margin-top: 20px;
	max-height: 30vh;
	font-size: 16px;
	overflow: auto;
}
.direction-header h2 {
  margin-bottom: 0;
  font-weight: bold;
}
/* Sizes title of directions layer */
#direction-title {
	font-size: 1.5em;
	margin: .1em 0;
}
/* Sizes directions table */
.direction-table {
	width: 100%;
	border-collapse: collapse;
	margin-left: 0;
	padding-left: 0;
	border: 1px solid #d6d6d6;
}
.top-direction-row {
	background: #008000;
	color: #ffffff;
}
.direction-row:last-child {
	background: #bf1313;
	color: #ffffff;
}
/* Sizes and borders each directions row */
.direction-row {
	padding: 10px;
	padding-right: 15px;
	padding-left: 15px;
	text-align: left;
	border-bottom: 1px solid #d6d6d6;
}

.direction-row td {
  padding: 10px;
}
/* Formats individual table index */
td {
	padding: .5em .75em;
}

/* --------------- Share Sidebar layer --------------- */
/* Styles header/title for sharing map */
#link-title {
  font-size: 1.5em;
  margin: 0 0 2em 0;
}

.link-header h2 {
  margin-bottom: .2em;
  font-weight: bold;
}

/* Styles text area for copying URL */
.copy-url {
	width: 100%;
	font-size: 14px;
	height: 6vh;
	padding: 5px;
	resize: none;
}
/* Styles text area for copying embed code */
.copy-map {
	width: 95%;
	font-size: 14px;
	height: 10vh;
	padding: 5px;
	resize: none;
}
.copy-url, .copy-map {
	border: 1px solid #c3c3c3;
}

.link-content h3 {
  margin-bottom: 0;
  font-weight: bold;
}
.link-content p {
	margin: .5em 0;
}
/* Sizes and formats copy to clipboard buttons */
.copy-button {
	width: 100%;
	margin-top: -.3em;
	margin-bottom: 1em;
	font-size: 14px;
	background: #2D5986;
	color: white;
	border: none;
	font-weight: bold;
	padding: .75em 1.25em;
	cursor: pointer;
	-webkit-border-radius: 0 0 7px 7px;
	        border-radius: 0 0 7px 7px;
}
.copy-button:hover {
	background: #1a446f;
	-webkit-transition: .2s;
	-o-transition: .2s;
	transition: .2s;
}


/* --------------- About Sidebar layer --------------- */

/* Styles "header" for the about map page */
.about-header {
  color: #404040;
  font-size: 16px;
}
/* Styles content for the about map page */
.about-content {
  font-size: 14px;
}


/* --------------- jQuery popup --------------- */

/* Ensures dialog is in front of map/modal */
.ui-dialog {
  z-index: 10000 !important;
}
/* Styles header bar of dialog */
.ui-dialog .ui-dialog-titlebar {
  background-color: #862633;
  color: #fff;
  font-size: 1.1em;
}
/* Positions dialog buttons */
.ui-dialog .ui-dialog-buttonpane button {
  margin: .5em 1em .5em 0;
}
/* Positions dialog text */
.ui-dialog .ui-dialog-content {
  padding: 1em;
}
/* Positions pane for dialog buttons */
.ui-dialog .ui-dialog-buttonpane {
  padding: .5em 1em .5em .4em;
}
/* Positions dialog buttons */
.ui-dialog-buttonset button {
  padding: .4em 1.3em;
}
/* Ensures dialog source text is not displayed */
.dialog {
  display: none;
}
/* Ensures close button is gone (to prevent unwanted behavior) */
.no-close .ui-dialog-titlebar-close
/*.leaflet-tooltip,
.leaflet-tooltip.location-names,
.leaflet-tooltip.location-names-second */{
  display: none;
}

.leaflet-tooltip {
    width: 10rem;
    text-align: left;
    font-weight: bold;;
    word-wrap: break-word;
    /*
    overflow: hidden;
    text-overflow: ellipsis;
    */
}

.leaflet-tooltip-bottom:before {
    border-bottom: transparent !important;
}

.leaflet-tooltip.location-names,
.leaflet-tooltip.location-names-second {
    font-size: xx-small;
    background: none;
    border: none;
    box-shadow: none;
    color: #7B94A8;
        text-shadow: 1px 0 #ffffff, -1px 0 #ffffff, 0 1px #ffffff, 0 -1px #ffffff,
          1px 1px #ffffff, -1px -1px #ffffff, 1px -1px #ffffff, -1px 1px #ffffff;
}