/* fonts */
@import url(https://fonts.googleapis.com/css?family=Lato:300|Lato:400|Lato:700|Merriweather:italic);

/* colors */
:root {
  --headerColor: black;
  --arpColor: white;
  --uiColor:  #d8ab4c; /* vandy gold */
  --uiColor2: #006682; /* vandy dark blue */
  --uiColor3: #993d1b; /* vandy red */
  --uiColor4: #333333; /* vandy dark gray */
  --uiColor5: #464e21; /* vandy green */
  --backgroundColor: #dadcd3; /* beige */
  --lighterBackgroundColor: #f1f2ed;
  --selectColor: #006682; /* #048; */ /* dark blue */
  --gradientColor1: #d8ab4c; /* gold */;
  --gradientColor2: #bad64b; /* green */;
  --gradientColor3: #47d1c3; /* teal */;
  --disabledFg: #fff; /* white */
  --disabledBg: #c0c2ba; /* darker variant of page background */
}

/* use alternate box model */
html {
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

/* unselectable
.unselectable {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}*/

/* generic */
body {
  margin: 0px;
  background-color: var(--backgroundColor);
  font-family: "Lato", sans-serif;
  font-size: 0.8rem;

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;  
}

h3 {
  font-size: 0.8rem;
  font-weight: bold;
}

table {
  border: none;
  border-collapse: collapse;
}

/* don't allow text to be selectable 
*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
  -ms-user-select: none;
   user-select: none;
}*/

/* header */
header {
  background-color: var(--headerColor);
  height: 50px;
  padding: 10px;
  overflow: hidden; /* ensure that header text does not scroll or spill over */
}

#vandy {
  float: left;
  height: 35px;
}

h1 {
  display: inline; /* usually headers are blocks but not here */
  position: relative; /* non-standard position */
  top: -3px; /* shift up three pixels */
  font-family: "Merriweather", serif;
  font-size: 1rem;
  font-weight: normal;
  font-style: italic;
  color: var(--uiColor);
  padding-left: 10px; /* space between the Vanderbilt logo and the text */
}

h2 {
  display: inline; /* usually headers are blocks but not here */
  font-family: "Lato", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--arpColor);
  padding-left: 10px; /* space between the two headings */
}

/* overall layout */
/* wrap: a grid with three columns, each of which is in turn a grid, which allows the frame spacing to be different in each of the three columns */
#wrap {
  margin: 10px; /* gutters */
  height: calc(100vh - 70px); /* height of viewport minus header (50px) and gutters (2 * 10px) */
  display: grid; 
  grid-gap: 10px;
  grid-template-columns: 13rem 1fr 1fr;
  grid-template-rows: 1fr auto;
}

/* right column */
#col3 {
  grid-column: 3;
  grid-row: 1 / 3;
  display: grid;
  grid-gap: 10px;
  grid-template-rows: auto 1fr; /* size of media frame is determined by media player size */
  overflow: hidden; /* content clipped, and no scrolling at the column level */
}

/* section attributes apply to all frames */
section {
  background-color: white;
  padding: 10px;
}

#flatpage {
  width: 1024px;
  margin: 0 auto;

}

/* CHOOSER */
#chooserFrame {
  grid-column: 1;
  grid-row: 1;
  overflow-y: auto; /* vertical scrollbar appears when needed */
}

.chooser { /* this class applies to the chooser ul as well the uls it contains */
  list-style: none; /* no bullets */
  margin: 0;
  padding-left: 20px; /* hanging indent */
  text-indent: -9px; /* hanging indent */
  line-height: 1.15rem;
}

.chooserChild { /* this class applies only to the non-top-level uls */
  padding-left: 20px; /* indent */
}

.chooserExpander { /* triangles and circles */
  font-family: "Courier New", "Courier", monospace;
  font-size: 1.05rem;
  text-decoration: none; /* don't underline the link */
  display: inline-block; /* allows width to be specified */
  width: 9px; /* width of the element which is the icon plus adjacent white space */
  color: var(--uiColor);
}

.chooserText { /* text describing sets, patients, timepoints */
  text-decoration: none; /* don't underline the link */
  color: black; /* don't colorize the link */
}

.selectedSet, .selectedPatient, .selectedTimepoint {
  color: white;
  background-color: var(--selectColor);
}

.icon {
  height: 12px;
  width: 12px;
  stroke: var(--uiColor4);
  fill: var(--uiColor4);
  margin-left: 6px;
  position: relative; /* non-standard position */
  top: 1px; /* shift down */
}

/* PLOT */
#plotFrame {
  grid-column: 2;
  grid-row: 1;
}

/* subscoreNav */
.nav {
  margin: 0px;
  padding-left: 0px;
  list-style: none; /* no bullets */
  /*margin-bottom: 15px; /* space between the nav and the plot */
  display: inline-flex;
  justify-content: space-between;
  height: 1.1rem; /* need a fixed height so we can properly size the plotDiv below */
}

.nav li {
  background-color: var(--uiColor);
  margin-right: 0.3rem;
}

.nav li a {
  display: block; /* this allows clicks anywhere in the box, not just on the text */
  width: 2.5rem; /* fixed width, big enough for the longest item */
  line-height: 1.1rem;
  text-decoration: none; /* don't underline the link */
  text-align: center;
  color: black; /* don't colorize the link */
}

.nav li a:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

.nav li a.selected {
  color: white;
  background-color: var(--selectColor);
}

.nav li a.selected:hover {
  background-color: var(--selectColor);
}

.nav li a.unclickable {
  color: var(--disabledFg);
  background-color: var(--disabledBg);
  cursor: default;
}

.covert {
  display: none;
}

/* plotDiv is used to position the plot axes svg, leaving space for the x and y axis labels */
#plotDiv {
  width: calc(100% - 1.5rem);
  height: calc(100% - 3.1rem - 15px); /* subtract own margins, nav height, and nav bottom margin */
  margin-top: 0.5rem;
  margin-left: 1.5rem; /* space for y axis labels */
  margin-bottom: 1.5rem; /* space for x axis labels */
}

.traj {
  cursor: pointer;
}

/* IMAGING */
#imagingFrame {
  grid-column: 1 / 3;
  grid-row: 2;
  display: grid; 
  grid-gap: 5px;
  grid-template-columns: 157fr 189fr 157fr;
  grid-template-rows: 1fr 1fr auto 1fr;
}

#imgUpperNav1 {
  grid-column: 2 / 4;
  grid-row: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}

#imgUpperNav2 {
  grid-column: 2 / 4;
  grid-row: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
}

#imgLowerNav {
  grid-column: 2 / 4;
  grid-row: 4;
  overflow: hidden;
}

#axDiv {
  grid-column: 1;
  grid-row: 1 / 5;
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
}
#axUpper { /* this creates a container relative to which the L and R labels can be positioned */
  grid-column: 1;
  grid-row: 1;
  position: relative;
}
#sagDiv {
  grid-column: 2;
  grid-row: 3;
  position: relative;
  /*align-self: start;*/
}
#corDiv {
  grid-column: 3;
  grid-row: 3;
  position: relative;
  /*align-self: end;*/
}

#ax {
  width: 100%;
}
#sag {
  width: 100%;
}
#cor {
  width: 100%;
}

#axSvg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#sagSvg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

#corSvg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.coord {
  position: absolute;
  top: 6px;
  right: 6px;
  color: var(--uiColor);
}

.cross {
  stroke: var(--uiColor);
  stroke-width: 1;
}

.leftLabel {
  position: absolute;
  bottom: 6px;
  left: 6px;
  color: var(--uiColor);
}

.rightLabel {
  position: absolute;
  bottom: 6px;
  right: 6px;
  color: var(--uiColor);
}

/* MEDIA */
#mediaFrame {
  grid-row: 1;
}

/* connectionNav */
#connectionNav {
  margin: 0px;
  padding-left: 0px;
  list-style: none; /* no bullets */
  display: flex;
  justify-content: center;
  height: 1.1rem;
}

#connectionNav li {
  background-color: var(--uiColor);
}

#connectionNav li a {
  display: block; /* this allows clicks anywhere in the box, not just on the text */
  line-height: 1.1rem;
  padding: 0px 10px;
  text-decoration: none; /* don't underline the link */
  text-align: center;
  color: black; /* don't colorize the link */
}

#connectionNav li a:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

#connectionNav li a.unclickable {
  color: var(--disabledFg);
  background-color: var(--disabledBg);
  cursor: default;
}

.mediaIcon {
  height: 12px;
  width: 12px;
  stroke: var(--uiColor4);
  fill: var(--uiColor4);
  margin-right: 6px;
  position: relative; /* non-standard position */
  top: 1.5px; /* shift down */
}

#video {
  width: 100%;
  display: none;
}

#audio {
  width: 100%;
  outline: none;
  display: none;
}

/* QAB */
#qabFrame {
  grid-row: 2;
  overflow-y: auto; /* vertical scrollbar appears when needed */
}

#qabTables {
  display: none;
}

.qabTable {
  width: 100%;
  table-layout: fixed;
  border-bottom: 2px solid var(--lighterBackgroundColor);
}

.qabTable td {
  vertical-align: top;
  padding-right: 3px;
}

.qabTable td:nth-child(1) { width: 50%; }
.qabTable td:nth-child(2) { width: 50%; }
.qabTable td:nth-child(3) { width: 2rem; }

#sum td:nth-child(1) { width: 100%; }
#sum td:nth-child(2) { width: 4rem; text-align: right; padding-right: 1.8em; }

#cs td:nth-child(1), #ms2 td:nth-child(1), #lwa td:nth-child(1) { width: 100%; }
#cs td:nth-child(2), #ms2 td:nth-child(2), #lwa td:nth-child(2) { width: 2rem; }

.qabTable tr:nth-child(odd) {
  background-color: var(--lighterBackgroundColor);  
}
.qabTable tr:nth-child(even) {
  background-color: white;
}

.qabItem {
  font-weight: 300;
}

/* slider */

#slider {
  display: inline-block;
  width: 200px;
  text-align: right;
}

/* slider body */
.noUi-target {
  background: var(--disabledBg);
  border-radius: 4px;
  border: none;
  box-shadow: none;
}

/* selected part */
.noUi-connect {
  background: var(--selectColor);
}

/* handles for dragging */
.noUi-handle {
  border: none;
  border-radius: 16px;
  background: var(--selectColor);
  cursor: default;
  box-shadow: none;
}

.noUi-handle:focus {
  outline: none;
}

/* sizing */
.noUi-horizontal {
  height: 8px;
}

.noUi-horizontal .noUi-handle {
  width: 16px;
  height: 16px;
  right: -8px;
  top: -4px;
}

/* no stripes */
.noUi-handle:before, .noUi-handle:after {
  display: none;
}

input, label span {
  vertical-align: middle;
}