@import url("title-buttons.04aeb43c395f.css");

html {
    
  /*
  Use full window height with no margins. See comment in body CSS for
  justification.
  */
  height: 100%;
  margin: 0;
  
}

body {

  /*
  Use full window height with no margins. It is important to keep the
  vertical margins zero here to keep an unwanted vertical scrollbar
  at bay. We worry about margins at lower levels of the DOM element
  hierarchy, for example to ensure that the clip album title appears
  below the navbar rather than behind it.
  */
  height: 100%;
  margin: 0;

  /*
  We set min-width and min-height properties for the body to help avoid
  problems that tend to arise at smaller sizes, for example playback
  buttons that are taller than the clip views that are supposed to contain
  them. While such problems can occur for a clip album of any height (since
  there is no limit on the number of page rows one can specify), for
  reasonable album settings they tend to occur only at smaller view sizes.
  */
  min-width: 320px;
  min-height: 480px;
  
}

main {
    
  /*
  Use full window height with no margins. It is important to keep the
  vertical margins zero here to keep an unwanted vertical scrollbar
  at bay. We worry about margins at lower levels of the DOM element
  hierarchy, for example to ensure that the clip album title appears
  below the navbar rather than behind it.
  */
  height: 100%;
  margin: 0;
  
  display: flex;
  flex-direction: column;
  
}

#error-div {
  margin-top: 70px;            /* Leave room at top for navbar. */
  margin-left: 20px;
  display: inline-block;
  text-align: left;
}

::selection {
  background-color: transparent;
}

#title-div {
  margin-top: 70px;            /* Leave room at top for navbar. */
  display: inline-block;
  text-align: center;
}

#title {
  display: inline-block;
  font-weight: bold;
  margin-top: 0;
}

#go-to-page-modal-number {
    width: 6em;
}

#go-to-page-modal-number:invalid {
    box-shadow: 0 0 5px 1px red;
}

#rug-plot {
  width: 95%;
  max-width: 600px;
  height: 45px;
  margin: 10px auto 0;
  padding: 0;
  background-color: white;
}

#rug-plot-rug {
  display: block;    /* default inline display yields space between canvases */
  width: 100%;
  height: 25px;
  margin: 0;
  border: 1px solid black;
  padding: 0;
  background-color: transparent;
}

#rug-plot-axis {
  display: block;    /* default inline display yields space between canvases */
  width: 100%;
  height: 20px;
  margin: 0;
  padding: 0;
  background-color: transparent;
}

#clips {
  margin: 0;
}

.clip-row {
}

.clip {
  background-color: gray;
  outline-style: solid;
}

.clip-canvas {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: gray;
}

.clip-overlay-canvas {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 2;
  background-color: clear;
}

.clip:hover > button {
  visibility: visible;
}

/*
 * The top and bottom attributes of the play button are set in Javascript,
 * since they depend on the label location.
 */
.clip-play-button {
  background-color: transparent;
  color: darkorange;
  visibility: hidden;
  position: absolute;
  width: 23px;
  height: 23px;
  padding: 0;
  border: none;
  outline: none;
  z-index: 3;
}

.clip-play-button:hover {
  color: #00AA00;
}

.clip-play-button-icon {
    position: relative;
    top: -8px;
    left: -2px;
    font-size: 27px;
}

.clip-audio {
  visibility: hidden;
}

/*
 * We set the margin, padding, and line height to eliminate all space
 * around the text by default.
 *
 * We set the overflow to "hidden" to clip labels to the album div
 * to avoid undesirable horizontal scrollbars.
 */
.clip-label {
  white-space: pre;
  background-color: transparent;
  position: absolute;
  text-align: center;
  margin: 0;
  padding: 0;
  line-height: 1;
  overflow: hidden;
  z-index: 3;
}

#footer {
  width: 100%;
  height: 25px;
  padding: 0;
  margin: 0;
  background-color: black;
}