/*------------------------------------*\
    Apaxy
    by @adamwhitcroft

    Theme name: Apaxy
    Theme author: @adamwhitcroft

    See theme/README.md and License.md
    for details
\*------------------------------------*/
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../font/SourceSansPro-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../font/SourceSansPro-It.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../font/SourceSansPro-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: bold;
}
@font-face {
    font-family: 'Source Sans Pro';
    src: url('../font/SourceSansPro-BoldIt.otf') format('opentype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Techna Sans Regular';
    src: url('../font/TechnaSansRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
  margin:0;
  padding:0;
  box-sizing: border-box; 
}

select, input[type="text"], input[type="search"] {
  padding: 5px;
}

.dt-search label {
  padding-right: 0.3em;
}

html {
  min-height:100%;
  border-top:10px solid #ECEEF1;
  border-bottom:10px solid #ECEEF1;
  color:#61666c;
  font-weight:400;
  font-size:12pt;
  font-family:'Source Sans Pro', sans-serif;
  line-height:1.3em;
}

body {
  padding:20px;
  -webkit-backface-visibility:hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family:'Techna Sans Regular', sans-serif;
  font-weight: normal;
  line-height: 1em;
}

/* #abstract h1, #abstract h2,
#search h1, #search h2 {
  padding-left: 10px;
} */
#header h1 {
  margin-bottom: 0.5em;
}

ul+h1, ul+h2, ul+h3,
p+h1, p+h2, p+h3,
pre+h1, pre+h2, pre+h3 {
  padding-top: 1em;
}

h1+ul, h2+ul, h3+ul,
h1+p, h2+p, h3+p, h1+h2, h1+h3, h2+h3 {
  padding-top: 0.5em;
}

p+p, dl + p {
  padding-top: 0.5em;
}

.muted {
  color: grey;
  font-style: italic;
}

#logos {
  position: absolute;
  right: 30px;
}

#logos img {
  /* display: block; */
  width:158px;
  border:0;
}

/*-----------------------------------------*\
 *  development mode informational banner  *
\*-----------------------------------------*/
.dev-banner {
  margin: 0 0 1em;
  padding: 0.2em;
  text-align: center;
  /* attempting to use "brand" colors */
  background: repeating-linear-gradient(45deg,#e64479,#e64479 20px,#a32d4e 20px,#a32d4e 40px);
}

.dev-info {
  background: rgba(255,255,255,0.75);
  padding: 0.25em;
}
.dev-info input {
  padding: 0.1em 0.2em;
  margin-right: 0.5em;
  border: none;
  background: rgba(255,255,255,0.5);
}
.dev-info input::last-of-type {
  margin-right: 0;
}


#header {
  margin: 0.5em;
}

#headline, #tagline, #authors, #affiliations {
  text-align: center;
}
#tagline, #authors, #affiliations {
  padding:0 2rem;
}

.subtle-link {
  font-size: 0.8em;
}

a.subtle-link, .subtle-link a {
  text-decoration:underline;
  /* text-transform: lowercase; */
  /* font-variant: small-caps; */
}

.center {
  text-align: center;
}

.full-justify {
  text-align: justify;
}

.hide-footnotes sup {
  display: none;
}

.hide-footnotes {
  line-height: 1.3em !important;
}

#header p a, #abstract p a {
  text-decoration:underline;
}

hr {
  border: none;
  border-top: 1px solid #afafaf;
  margin-bottom: 1em;
}

.indexbreakrow hr {
  display: none;
}

.actions {
  text-align: center;
  padding: 1em;
}

.actions-top {
  /* border-bottom: 1px solid #afafaf; */
  margin-bottom: 1em;
}

#search-to-top-btn {
  height: 2em;
  font-size: 0.4em;
}

.actions-bottom {
  padding: 0;
  margin-top: 1em;
}

button {
  cursor: pointer;
  color: #333;
  border-style: solid;
  background-color: white;
  border: 1px solid #AFAFAF;
  border-radius: 5px;
  padding: 0 1em;
  margin: 0.3em;
  height: 3em;
  vertical-align: middle;
  box-shadow: none;
  font-size: 1em;
  font-family: 'Roboto', sans-serif;
}

/* need to be at least as specific as DataTables' CSS */
div.dt-buttons > .dt-button {
  height: auto;
  padding: 0.1em 1em;
}

button {
  color: #61666c; /*#2a2a2a*/
}
button:hover {
  /* box-shadow: 0 1px 1px #2281d0; -- some kinda blue */
  /* background: linear-gradient(#fff, 10%, #ecf3ff); */
  /* border-color:#2a2a2a; */
  box-shadow: 0 5px 5px -5px #666;
  border-color: #62666C;
  transition: box-shadow 100ms ease-in, border-color 100ms;
  color: inherit;
}

button:active {
  box-shadow: none;
  /* background: linear-gradient(#ecf3ff, #ecf3ff); */
  transition: box-shadow 250ms ease-out;
}

button small {
  display: block;
  font-size: 0.6em;
}

#authors {
  padding: 1em 10em 0;
  line-height: 1.0em;
}

#authors sup a, .footnote {
  text-decoration: none !important;
}

#affiliations {
  line-height: 1.2em;
  font-size: 0.8em;
  padding: 1rem 2rem;
}

#affiliations sup {
  line-height: 0.8em;
}


/* Source: https://css-tricks.com/on-target */
#affiliations a.highlight {
  /* animation: highlight 1.5s 1; */
  background-color: rgba(255,221,13,0.5);
  box-shadow: 0 0 10px rgba(255,221,13,0.6);
  border-radius: 5px;
}

#affiliations a.highlight span {
  text-decoration: underline;
}

#abstract p, #downloads p, #search p, #plain p {
  padding-left: 3em;
  padding-right: 3em;
}

#search-help-container {
  position: relative;
}

#search-help {
  margin: 1em 0;
}

/* the link to show/hide the search help */
#search-help-toggle {
  font-size: small;
  text-decoration: underline;
}

/* definition list, terms, and definitions */
dl {
  margin: 0.3em 5em;
}

dt {
  width: 3em;
  /* text-align:right; */
  font-weight: bold;
  padding-right: 2em;
  vertical-align: top;
}

/* #search dt::before { */
/*   content: '“'; */
/* } */

/* #search dt::after { */
/*   content: '”'; */
/* } */

dt, dd {
  display: inline-block;
}

#abstract ul {
  margin-left: 3em;
  padding-right: 2em;
}
#abstract li {
  line-height: 1.1em;
  padding-bottom: 0.5em;
}

ul ul>li {
  padding-top: 0.5em;
}

pre code, .dev-info input {
  font-family: consolas,monospace;  
}
pre code {
  display: block;
  padding: 1em;
  margin: 0.5em 1em;
  line-height: 1.1em;
  background-color: #eee;
  border: 1px solid #ccc;
  white-space: pre-wrap;
  text-align: left;
}

code+h1, code+h2, code+h3, code+h4 {
  margin-top: 1em;
}

a {
  color:#61666c;
  text-decoration:none;
}

a.ul-link {
  text-decoration:underline;
}

a:hover {
  color:#2a2a2a;
}

span.hotkey {
  white-space: nowrap;
}

/* keycaps style for keyboard shortcuts */
kbd {
  display: inline-block;
  font-size: 8pt;
  background-color: #F9F9F9;
  border: 1px solid #DDD;
  border-radius: 3px;
  line-height: 1.3em;
  padding: 0.3em 0.5em 0;
  box-shadow: 0 2px #ccc;
  vertical-align: baseline;
}

/*------------------------------------*\
    Wrapper
\*------------------------------------*/
.top, .wrapper {
  margin:0 auto;
  max-width:1100px;
}
.wrapper {
  padding-top:20px;
}

/*------------------------------------*\
    Demo block
\*------------------------------------*/
.block {
  font-size:.875em;
  margin:2em 0;
  padding: 0 20px;
  /* color:#61666c; */
}

.block a {
  text-decoration:underline;
}

/*------------------------------------*\
    Demo block - lists
\*------------------------------------*/
.block ul {
  padding-left: 2em;
}
.block li {
  line-height: 1.8em;
}

/* (Probably) unused rules from original Apaxy theme */
/* .block h1, .block h2 { */
/*   margin: 0.5em 0; */
/* } */
/* .block p { */
/*   padding: 0.5em 0; */
/*   /1* line-height: 1.5em; *1/ */
/* } */

/*------------------------------------*\
    Table (directory listing)
\*------------------------------------*/

#indexlist {
  margin-top: 20px;
  width:100%;
  border-collapse:collapse;
  font-size:.875em;
}

#indexlist tr {
  outline:0;
  border:0;
}

#indexlist tr:hover td {
  background:#f6f6f6;
}

#indexlist td, #indexlist th {
  line-height: 1.2em;
  padding: 0.3em;
}

#indexlist th {
  text-align:left;
  font-size:1.1em;
  padding-right:20px;
  font-family:'Techna Sans Regular';
  font-weight: normal !important;
}

#indexlist td {
  outline:0;
  border:0;
  border-bottom:1px solid #edf1f5;
  vertical-align:middle;
  text-align:left;
  transition:background 300ms ease;
}

/* the icon */
#indexlist tr td:first-of-type {
  padding-left:10px;
  padding-right:10px;
  width: 1em;
}
/* 2nd Column: Filename */
#indexlist th + th {
  /* width:65%; */
}
/* 3rd Column: Last Modified */
#indexlist th + th + th {
}
/* 4th Column: Size */
#indexlist th + th + th + th {
  /* width:5%; */
}
/* 4th Column: Size */
#indexlist th + th + th + th {
  /* width:5%; */
}

#indexlist tr.parent a {
  color:#9099A3;
}

#indexlist tr.parent a:hover {
  color:#2281d0;
  text-decoration: underline;
}

abbr:hover {
  cursor: help;
}

/*------------------------------------------------------------*\
   tabs to switch between ICD10 and Phecode tables
   https://css-tricks.com/functional-css-tabs-revisited
   license: https://css-tricks.com/license (CC-BY-NC-SA 4.0)
\*------------------------------------------------------------*/
.tabs {
  position: relative;
  clear: both;
  min-height: 28px;
}
.tab-separator {
  margin-bottom: 25px;
  border-top: 1px solid #ccc;
  position: relative;
  z-index: 1;  /* puts its border in front of inactive tabs */
}
.tab {
  float: left;
}
.tablabel {
  color: grey;
  background: #f9f9f9;
  padding: 10px 20px 6px;
  border: 1px solid #ccc;
  border-bottom: 2px solid white;
  border-radius: 5px 5px 0 0;
  position: relative;
  bottom: -1px;
  cursor: pointer;
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/user-select */
  /* basically makes tabs behave more like buttons, inhibiting text selection */
  -webkit-user-select: none; /* Safari */
  user-select: none;
}
.tab [type="radio"] {
  opacity: 0;
}
[type="radio"]:focus ~ label {
  /* outline: 2px solid blue; */
  text-decoration: underline dotted;
}
[type="radio"] ~ label:hover {
  color: black;
  border-color: #62666C;
  border-bottom: 2px solid white;
  transition: color 100ms ease-in, border-color 100ms;
}
[type="radio"]:checked ~ label:hover {
  border-color: #ccc;
  border-bottom: 2px solid white;
}
[type="radio"]:checked ~ label {
  color: #333;
  font-weight: 600;
  background: white;
  z-index: 2;
}

/*------------------------------------*\
    DataTables table
\*------------------------------------*/

table.dataTable {
  padding-top: 0.5em;
}

table.dataTable.fixedHeader-floating {
  padding-top: 0.2em;
}

/* make DataTables 'compact' style even more compact */
table.dataTable.verycompact thead th,
table.dataTable.verycompact tbody th,
table.dataTable.verycompact tbody td {
  font-size: 1em;
  padding: 0.2em !important;
  line-height: 1.2em;
  text-align:left !important;
}

table.dataTable tbody td {
  vertical-align:top;
}

table.dataTable thead th:hover {
  text-decoration: underline dotted;
  cursor: help;
}

/*------------------------------------*\
    Loading message for data tables
\*------------------------------------*/
.loading {
  /* box-shadow: inset 0 0 3px #62666C; */
  /* background: radial-gradient(white, #f9f9f9); */
  /* margin:0 10em; */
  padding: 2em 1em;
  color: #9099a3;
  text-align: center;
}

.loading h1, .loading h2, .loading h3, .loading h4, .loading h5, .loading h6 {
  padding:0;
}

/*------------------------------------*\
    Footer
\*------------------------------------*/
.footer {
  text-align:center;
  font-size:.75em;
  color:#9099A3;
  margin-top: 2em;
}

p.small {
  font-size:small;
  line-height:1.3em;
}

.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 {
  padding:0;
}

@keyframes highlight {
  0% {
    background-color: rgba(255,221,13,0.5);
    box-shadow: 0 0 10px rgba(255,221,13,0.6);
    border-radius: 5px;
  }
  100% {
    background-color: rgba(0,0,0,0);
    box-shadow: 0 0 10px rgba(255,221,13,0);
    border-radius: 5px;
  }
}

@media only screen and (max-width: 768px) {
  /* don't break headlines below this screen width */
  #headline br {
    display: none;
  }
}

@media only screen and (max-width: 1100px) {
  #logos {
    right: 0;
    text-align: center;
    position: relative;
  }
  #header {
    margin: 0.5em;
    padding: 0 2rem;
    clear: both;
  }
  #authors {
    padding: 0;
  }
}

@media only screen and (min-width: 1100px) {
  #headline {
    text-align: center;
    padding: 0 14rem;
  }
}