/* Some of API CSS is dependent on the jsdoc Output template.
 * Check the bottom of the following CSS files: */
/*   - docs/dash-jsdoc/static/styles/jsdoc-default.css */
/*   - docs/jaguarjs-jsdoc/static/styles/jaguar.css */

/*****************************************************************************/
/* General formatting                                                        */
/*****************************************************************************/

body {
  /* font-size: 14.5px; */
  /* This needs to match API for navbar to llok the same */
  font-size: 1rem;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  line-height: normal;
  /* This color will fill in the letterbox on iPhone landscape mode */
  background-color: rgb(33, 37, 41);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

h1, h2, h3 {
  font-weight: bold;
  padding-top: 10px;
  padding-bottom: 5px;
}

h1 {
  font-size: 1.6rem;
}

h2 {
  font-size: 1.3rem;
}

h3 {
  font-size: 0.8rem;
}

a {
  color: #428bca;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #2a6496;
  text-decoration: underline;
}

p {
  line-height: 1.3;
}


/*****************************************************************************/
/* Tutorials and Maps
/*****************************************************************************/

#my-viewer {
  text-align: center;
}

.btn-heading {
  display: inline;
  vertical-align: middle;
}

/*****************************************************************************/
/* Main Page Stuff                                                           */
/*****************************************************************************/


main {
  margin-left: 175px;
  margin-top: 50px;
  background-color: white;
  padding: 0px 20px 50px 20px;
}

main.welcome {
  background-color: transparent;
}

.app-icon {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  margin: 0 auto 15px auto;
  display: block;
  box-shadow: 0px 2px 20px 1px lightgrey;
}

/*****************************************************************************/
/* Welcome Page Stuff                                                        */
/*****************************************************************************/

.logo-sm {
  height: 34px;
  width: 34px;
  margin-right: 10px;
  margin-top: -5px;
  margin-bottom: -5px;
  vertical-align: text-bottom;
}

.github-logo img {
  width: 20px;
  height: 20px;
  margin-top: -5px;
  margin-bottom: -1px;
}

.welcome-bg {
  position: fixed;
  z-index: -1;
  background-color: rgb(32, 32, 32);
  width: 100%;
}

.header-map-bg {
  width: calc(100vw - 175px);
  min-width: 200px;
  max-width: 600px;
  height: calc(100vw - 175px);
  min-height: 200px;
  max-height: 600px;
}

.welcome-section {
  color: white;
  height: calc(100vw - 175px);
  min-height: 200px;
  max-height: 600px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
.welcome-text {
  line-height: 1;
}
.welcome-text p {
  line-height: 1;
  padding: 0;
  margin: 0;
  margin-bottom: 7px;
  font-size: 1.5rem;
}

.over-content {
  background-color: white;
  margin: 0 -20px;
  padding: 0 20px;
  padding-bottom: 20px;
}

/*****************************************************************************/
/* Sidebar Formatting                                                        */
/*****************************************************************************/

#sidebar-nav {
  background-color: rgb(26, 26, 26);
  width: 175px;
  position: fixed;
  height: calc(100vh - 50px);
  overflow: auto;
  z-index: 1000;
}
#sidebar-nav p,
#sidebar-nav li {
  margin: 0 5px;
  padding-bottom: 2px;
}

#sidebar-nav a.nav-index {
  padding-top: 10px;
  padding-bottom: 8px;
}

#sidebar-nav .side-link,
#sidebar-nav p {
  font-size: 13px;
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
  color: rgb(225, 225, 225);
  padding: .1rem 0.5rem;
  display: block;
}
#sidebar-nav p {
  color: rgb(175, 175, 175);
  margin-top: 10px;
  margin-bottom: 0;
}

#sidebar-nav .side-link.indent {
  padding-left: 1.5rem;
}
#sidebar-nav li.active {
  background-color: rgb(33, 37, 41);
  border-radius: 5px;
}
#sidebar-nav li.active .side-link {
  color: orange;
}

#sidebar-nav .sidebar-list {
  padding: 10px 0 30px 0;
  margin: 0;
}

ul#gumshoe-list {
  list-style-type: none;
}


/* .sidebar-toggle {
  border: 1px solid rgba(255,255,255,.1);
} */
.sidebar-toggle svg {
  fill: rgba(255, 255, 255, 0.55);
}
.sidebar-toggle:not(.collapsed) .bi-collapse {
  display: inline-block;
}
.sidebar-toggle .bi-collapse {
  display: none;
}
.sidebar-toggle:not(.collapsed) .bi-expand {
  display: none;
}

.side-link .subtitle {
  display: block;
  padding-left: 5px;
  font-size: smaller;
  font-style: italic;
  color: grey;
}

@media (max-width: 576px) {
  #sidebar-nav {
    max-height: 40vh;
    height: auto;
    overflow: auto;
    width: 100%;
  }
  #sidebar-nav .sidebar-list {
    height: auto;
    padding-bottom: 15px;
  }
  main {
    margin-left: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .welcome-text p {
    font-size: 1rem;
  }
}

/* Move anchor target offset by nav bar height */
:target:before {
  content: "";
  display: block;
  height: 50px; /* fixed header height*/
  margin: -50px 0 0; /* negative fixed header height */
}


/*****************************************************************************/
/* Code formatting (in Markdown)                                             */
/*****************************************************************************/
code[class*="language-"],
pre[class*="language-"] {
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 12px;
}
pre[class*="language-"] {
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 12px;
}


/*****************************************************************************/
/* Jaguar stuff I want site wide                                             */
/*****************************************************************************/

::-webkit-scrollbar {
  width: 8px;
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: gray;
  border-radius: 4px;
}


/*****************************************************************************/
/* Styles for Viewer Help                                                    */
/*****************************************************************************/

.viewer-help {
  border: 1px solid #bee5eb;
  background-color: #d1ecf1;
  color: #0c5460;
  font-size: 12px;
  margin: 5px 0;
  padding: 5px;
  /* border-radius: 5px; */
}

/*****************************************************************************/
/* Prokse Notice and Button
/*****************************************************************************/

.proksee-notice {
  border: 1px solid #bee5eb;
  border-radius: 5px;
  color: #055160;
  background-color: #cff4fc;
  border-color: #b6effb;
  text-align: center;
  font-size: 14px;
  margin: 8px 20px;
  padding: 10px;
}

.proksee-notice p {
  margin-bottom: 10px;
}

.citation {
  white-space: pre-line;
  text-align: left;
}

.btn-proksee {
  width: 120px;
  height: 45px;
  border: 1px solid black;
  border-radius: 3px;
  cursor: pointer;
  margin: 0 3px 6px 0;
  filter: none;
  transition:  0.6s;
  background-color: rgb(30, 30, 30);
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../images/proksee_logo.png);
  background-size: 102px 24px;
  margin: auto;
}

.btn-proksee:hover {
  filter: invert(89%) sepia(11%) saturate(1202%) hue-rotate(165deg) brightness(95%) contrast(92%);
}