$mycolor: #2c3e50


#app
  font-family: Avenir, Nunito, Helvetica, Arial, sans-serif
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale
  color: $mycolor
  margin: 0
  padding: 0
  height: 100%

.error-msg
  margin-top: 100px
  width: 100%
  text-align: center

.hcode
  background: #efefef
  padding: 20px
  border-radius: 2px

FIGCAPTION
  text-align: center
  color: #555

.lv-rowset
  TH
    bold

#content-inner-container
  H1
    padding-top: 40px
  H2
    padding-top: 20px
  .content
    padding-top: 40px
    padding-bottom: 60px

.accordionviewer
  .item
    max-width: 800px

#bpane .content
  padding: 40px
  height: 100%

.section-title
  font-size: 140px
  font-weight: bold

.iframe-txt
  margin: 60px

.directive
  font-weight: bold

/* title */
.cls-1
  font-size: 122px
  stroke: #000
  stroke-width: 14px
.cls-1,.cls-2
  stroke-miterlimit: 10
.cls-2
  font-size: 40px
  fill: #f2f2f2
  stroke: gray
.cls-3
  letter-spacing: -0.02em
.cls-4
  letter-spacing: -0.02em

/* shakespeare */
.ptitle
  text-align: center
  font-size: 40px
  margin-bottom: 40px

.pdetail
  text-align: center
  height: 1.5em
  font-size: 11px

.speaker
  margin-top: 10px
  margin-bottom: 4px
  font-weight: bold

.line
  margin-left: 40px

.stagedir
  font-style: italic
  margin: 6px
  font-size: .9em


/* highlight */
.hljs
  display: block
  overflow-x: auto
  padding: 0.5em
  background: white
  color: black

.hljs-comment, .hljs-quote, .hljs-variable
  color: #008000

.hljs-keyword,
.hljs-selector-tag,
.hljs-built_in,
.hljs-name,
.hljs-tag
  color: #00f

.hljs-string,
.hljs-title,
.hljs-section,
.hljs-attribute,
.hljs-literal,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-addition
  color: #a31515

.hljs-deletion,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-meta
  color: #2b91af

.hljs-doctag
  color: #808080

.hljs-attr
  color: #f00

.hljs-symbol,
.hljs-bullet,
.hljs-link
  color: #00b0e8

.hljs-emphasis
  font-style: italic

.hljs-strong
  font-weight: bold

BUTTON
  font-size: 14px

// tooltips
.tlink
  border-bottom: 1px dotted
  border-color: #48B884
.tooltip
  display: block !important
  z-index: 10000
  .tooltip-inner
    background: black
    color: white
    border-radius: 16px
    padding: 5px 10px 4px
  .tooltip-arrow
    width: 0
    height: 0
    border-style: solid
    position: absolute
    margin: 5px
    border-color: black
    z-index: 1
  &[x-placement^="top"]
    margin-bottom: 5px
    .tooltip-arrow
      border-width: 5px 5px 0 5px
      border-left-color: transparent !important
      border-right-color: transparent !important
      border-bottom-color: transparent !important
      bottom: -5px
      left: calc(50% - 5px)
      margin-top: 0
      margin-bottom: 0
  &[x-placement^="bottom"]
    margin-top: 5px
    .tooltip-arrow
      border-width: 0 5px 5px 5px
      border-left-color: transparent !important
      border-right-color: transparent !important
      border-top-color: transparent !important
      top: -5px
      left: calc(50% - 5px)
      margin-top: 0
      margin-bottom: 0
  &[x-placement^="right"]
    margin-left: 5px
    .tooltip-arrow
      border-width: 5px 5px 5px 0
      border-left-color: transparent !important
      border-top-color: transparent !important
      border-bottom-color: transparent !important
      left: -5px
      top: calc(50% - 5px)
      margin-left: 0
      margin-right: 0
  &[x-placement^="left"]
    margin-right: 5px
    .tooltip-arrow
      border-width: 5px 0 5px 5px
      border-top-color: transparent !important
      border-right-color: transparent !important
      border-bottom-color: transparent !important
      right: -5px
      top: calc(50% - 5px)
      margin-left: 0
      margin-right: 0
  &[aria-hidden='true']
    visibility: hidden
    opacity: 0
    transition: opacity .15s, visibility .15s
  &[aria-hidden='false']
    visibility: visible
    opacity: 1
    transition: opacity .15s

// Vue Table
.table-component
  display: flex
  flex-direction: column
  margin: 4em 0

.table-component__filter
  align-self: flex-end

.table-component__filter__field
  padding: 0 0 0 .75em
  height: 2.5em
  border: solid 2px #e0e0e0
  border-radius: 2em
  font-size: inherit

.table-component__filter__clear
  position: absolute
  top: 0
  right: 0
  bottom: 0
  display: flex
  align-items: center
  justify-content: center
  width: 2em
  color: #007593
  font-weight: bold
  cursor: pointer

.table-component__filter__field:focus
  outline: 0
  border-color: #007593

.table-component__table-wrapper
  overflow-x: auto
  margin: 1em 0
  width: 100%
  border: solid 1px #ddd
  border-bottom: none

.table-component__table
  min-width: 100%
  border-collapse: collapse
  border-bottom: solid 1px #ddd
  table-layout: fixed

.table-component__table__caption
  position: absolute
  top: auto
  left: -10000px
  overflow: hidden
  width: 1px
  height: 1px

.table-component__table th,
.table-component__table td
  padding: .3em .3em
  vertical-align: top
  text-align: left
  white-space: nowrap

.table-component__table th
  background-color: #e0e0e0
  color: #999
  text-transform: uppercase
  white-space: nowrap
  text-align: center
  // font-size: .85em

.table-component__table tbody tr:nth-child(even)
  background-color: #f0f0f0

.table-component__table a
  color: #007593

.table-component__message
  color: #999
  font-style: italic

.table-component__th--sort,
.table-component__th--sort-asc,
.table-component__th--sort-desc
  text-decoration: underline
  cursor: pointer
  -webkit-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none

.table-component__th--sort-asc:after,
.table-component__th--sort-desc:after
  // position: absolute
  left: .25em
  display: inline-block
  color: #bbb

.table-component__th--sort-asc:after
  content: '↑'

.table-component__th--sort-desc:after
  content: '↓'

// section links in code
.csection-link
  font-weight: bold
  cursor: pointer

// Hack
.content
  padding-right: 2px
  padding-top: 80px
  //margin-top: 30px

.content IMG
  display: block

// used by onsen popover
DIV.pop-content
  margin: 10px
  margin-top: 20px
  font-size: 12px
  H1
    font-size: 20px
  H2
    font-size: 18px
  H3
    font-size: 16px
DIV.pop-small-text
  font-size: 12px

// onsen disables select, reenable
DIV.content *
  -webkit-user-select: text !important
  -moz-user-select: unset !important
  -ms-user-select: unset !important
  user-select: text !important
// mermaid diagrams
.mm-board
  g.node
    cursor: pointer

// wikipedia styles
.navbox, .navbox-subgroup
  background: #fdfdfd

.navbox
  box-sizing: border-box
  border: 1px solid #a2a9b1
  width: 100%
  clear: both
  font-size: 88%
  text-align: center
  padding: 1px
  margin: 1em auto 0

.rss-title
  font-size: 1em
  font-weight: bold
  margin: 4px
  margin-top: 0
.rss-description
  margin-bottom: 2px
.rss-img
  margin-right: 10px
.col-label
  text-align: right
  font-weight: bold
  padding-right: 6px
  vertical-align: top
.weather-report
  margin-top: 40px


// Books
.book-listing
  H1, H2, H3
    text-transform: capitalize
  H2
    margin-bottom: 3px
  H3
    margin-top: 6px
  .comments
    clear: both

// ResearchGate
.rg
  margin-top: 0px
  margin-bottom: 40px
  A
    text-decoration: none
  h1
    font-size: 1.4em
    margin-bottom: 20px

  .publication-meta-text
    font-size: .9em
  ol, ul
    list-style: none
    padding: 0
  .series
    margin-bottom: 15px
    margin-top: 6px
    color: #555
  .nova-c-card
    border: 1px solid #cdc
    float: left
    height: 40px
    padding-right: 8px
    min-width: 150px
    margin-right: 10px
    border-radius: 3px
    margin-bottom: 4px
    font-size: 0.85em
  .ga-journal-name
    font-weight: bold
  .nova-v-person-list-item__meta-item
    display: inline-block
  .nova-e-avatar
    display: none
  .nova-l-flex__item
    display: inline-block
    .nova-l-flex__item--shrink
      display: none
    // width: 100px
  .nova-v-person-list-item__body
    margin-left: 6px
  .footer
    margin-top: 10px
  .bars-1
    width: 10px
    height: 10px
    display: inline-block
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAACC2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS40LjAiPgogICA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICAgICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgICAgICAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyI+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDx0aWZmOkNvbXByZXNzaW9uPjE8L3RpZmY6Q29tcHJlc3Npb24+CiAgICAgICAgIDx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+CiAgICAgICAgIDx0aWZmOlBob3RvbWV0cmljSW50ZXJwcmV0YXRpb24+MjwvdGlmZjpQaG90b21ldHJpY0ludGVycHJldGF0aW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KD0UqkwAAAL9JREFUGBl9ULsKhEAMnF3jAxvBb5AVFuws7az1+/0AGxsbcQVfd5eAx1l40yyZTCaTVa8P8IC+79G2LfI8Bz1ohF7XFV3XIQxD6F8hmzvnsCyL0Eop+L4PIroLp2lCVVWo6xr7voOFF26r2XEYBsRxfPW/L43jiPM8kaapkJ7nQetbIuF10zQoyxI8wKInaA4/zzP+/JLM0nEcEvxy2rZNruSah7nmw8gYgyRJZC1ns9YiiiK5OAgCFEWBLMvwBhWCSuim7hZ0AAAAAElFTkSuQmCC)
  .publication-author-list__item
    width: 200px
    // border: 1px solid #cccccc
    border-radius: 2px
    padding-left: 10px
    font-size: 14px
    height: 40px
    padding-top: 3px
    margin-top: 3px
    display: inline-block
  .publication-author-list__item_brief
    padding-right: 10px
    font-size: 14px
    height: 40px
    padding-top: 3px
    margin-top: 3px
    display: inline-block
  .references
    font-size: 14px
    margin-top: 8px

// Table component

.title-cell DIV
  max-width: 800px
  white-space: nowrap
  overflow: hidden
  text-overflow: ellipsis
  cursor: pointer
.table-component
  margin: 10px
.data-cell DIV
  min-width: 70px
.table-component__table TD.right
  text-align: right

// font awesome
.fa-icon
  width: auto
  height: 1em /* or any other relative font sizes */

  /* You would have to include the following two lines to make this work in Safari */
  max-width: 100%
  max-height: 100%

H1, .h1
  margin-top: 15px
  font-size: 2.5em
H1, H2
  margin-bottom: 1rem

#tpane
  overflow-y: hidden
  overflow-x: hidden

// used for removing scrollbars
.inner-container
  position: absolute
  left: 0
  overflow-x: scroll
  overflow-y: scroll

// popper
.link-anchor
  position: relative
  width: 0
  font-size: .8em
  opacity: 0
  transition: opacity .2s ease-in-out

.anchor-wrapper
  border: none

.anchor-wrapper:hover .link-anchor
  opacity: 1


section h1[id]:focus,
section h2[id]:focus,
section h3[id]:focus,
section h4[id]:focus,
section h5[id]:focus
  outline: 0


p.thin
  font-weight: 100
  margin: 0
  line-height: 1.2em


p.bold
  font-weight: 900
  margin: 0
  margin-top: -5px


.rel
  width: 30%
  margin: 0 auto
  position: relative
  text-align: center
  padding: 20px
  border-style: dotted
  border-color: white
  border-width: medium


.popper, .tooltip
  position: absolute
  background: #FFC107
  color: black
  width: 150px
  border-radius: 3px
  box-shadow: 0 0 2px rgba(0,0,0,0.5)
  padding: 10px
  text-align: center

.style5 .tooltip
  background: #1E252B
  color: #FFFFFF
  max-width: 200px
  width: auto
  font-size: .8rem
  padding: .5em 1em

.popper .popper__arrow,
.tooltip .tooltip-arrow
  width: 0
  height: 0
  border-style: solid
  position: absolute
  margin: 5px


.tooltip .tooltip-arrow,
.popper .popper__arrow
  border-color: #FFC107

.style5 .tooltip .tooltip-arrow
  border-color: #1E252B

.popper[x-placement^="top"],
.tooltip[x-placement^="top"]
  margin-bottom: 5px

.popper[x-placement^="top"] .popper__arrow,
.tooltip[x-placement^="top"] .tooltip-arrow
  border-width: 5px 5px 0 5px
  border-left-color: transparent
  border-right-color: transparent
  border-bottom-color: transparent
  bottom: -5px
  left: calc(50% - 5px)
  margin-top: 0
  margin-bottom: 0

.popper[x-placement^="bottom"],
.tooltip[x-placement^="bottom"]
  margin-top: 5px

.tooltip[x-placement^="bottom"] .tooltip-arrow,
.popper[x-placement^="bottom"] .popper__arrow
  border-width: 0 5px 5px 5px
  border-left-color: transparent
  border-right-color: transparent
  border-top-color: transparent
  top: -5px
  left: calc(50% - 5px)
  margin-top: 0
  margin-bottom: 0

.tooltip[x-placement^="right"],
.popper[x-placement^="right"]
  margin-left: 5px

.popper[x-placement^="right"] .popper__arrow,
.tooltip[x-placement^="right"] .tooltip-arrow
  border-width: 5px 5px 5px 0
  border-left-color: transparent
  border-top-color: transparent
  border-bottom-color: transparent
  left: -5px
  top: calc(50% - 5px)
  margin-left: 0
  margin-right: 0

.popper[x-placement^="left"],
.tooltip[x-placement^="left"]
  margin-right: 5px

.popper[x-placement^="left"] .popper__arrow,
.tooltip[x-placement^="left"] .tooltip-arrow
  border-width: 5px 0 5px 5px
  border-top-color: transparent
  border-right-color: transparent
  border-bottom-color: transparent
  right: -5px
  top: calc(50% - 5px)
  margin-left: 0
  margin-right: 0

.inner-container::-webkit-scrollbar
  display: none

// Markdown files
.md
  IMG
    margin-bottom: 10px
.md
  h2, .h2
    margin-top: 50px
    margin-bottom: 15px
    padding-bottom: 5px
    border-bottom: 1px solid #ccc

.md
  margin-left: 10px
  margin-top: 10px
  padding-right: 10px
  margin-bottom: 80px

CODE.hljs
  background: #eeeeee
  padding: 12px
  border-radius: 6px

.lv-md IMG
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
  max-width: 675px

.popover
  max-width: inherit

.table-component__table td
  white-space: inherit