.layer1{
    position: absolute;
    height: 100%;
    width: 100%;
}

.layerRecord{
    position: absolute;
    height: 95%;
    width: 95%;

    
}
/*.Info{
    position: absolute;
    left:5%;
    top: 0%;
    width:15%;
    height: 60%;
    padding: 50px;
    border: 3px solid black;
}*/

.video{
    position: absolute;
    left:5%;
    top: 0%;
    height:65%;
    width:90%;
    object-fit: fill;
    boarder:5px solid black;
}

.layer2{
    position: absolute;
    top:65%;
    left:0%;
    width: 95%;
    height:10;
    zoom: 80%;

}


.LayerAudio{ 
    position: absolute;
    top:0%;
    left:0%;
    width: 95%;
    height:10;
    zoom: 100%;
}


.btn-group button {
  background-color: #0F5773; /* Green background */
  border: 1px solid black; /* Green border */
  color: white; /* White text */
  padding: 10px 50px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
  width: 100%; /* Set a width if needed */
  display: block; /* Make the buttons appear below each other */
}

.btn-group button:not(:last-child) {
  border-bottom: none; /* Prevent double borders */
}

/* Add a background color on hover */
.btn-group button:hover {
  background-color: #3e8e41;
}


.playlist {
  margin: 2em 0; }
  .playlist .playlist-time-scale {
    height: 30px; }
  .playlist .playlist-tracks {
    background: #66858a; }
  .playlist .channel {
    background: grey; }
  .playlist .channel-progress {
    background: white; }
  .playlist .cursor {
    background: gray; }
  .playlist .wp-fade {
    background-color: rgba(0, 0.0, 0.0, 0.5); }
  .playlist .state-cursor,
  .playlist .state-select {
    cursor: text; }
  .playlist .state-fadein {
    cursor: w-resize; }
  .playlist .state-fadeout {
    cursor: e-resize; }
  .playlist .state-shift {
    cursor: ew-resize; }
  .playlist .selection.point {
    background: red; }
  .playlist .selection.segment {
    background: rgba(0, 0.0, 0.0, 0.5); }
  .playlist .channel-wrapper.silent .channel {
    opacity: 0.3; }
  .playlist .controls {
    background: white;
    text-align: center; }
    .playlist .controls header {
      overflow: hidden;
      color: white;
      background-color: #0F5773;
      margin-bottom: 1em;
      height: 20px; }
    .playlist .controls label {
      margin: 1em auto;
      width: 50%;
      display: inline-block;
      font: normal normal normal 14px/1 FontAwesome;
      font-size: inherit;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      transform: translate(0, 0); }
    .playlist .controls label:before {
      content: "\f027";
      color: black;
      font-size: 18px;
      padding-right: 5px;
      -moz-osx-font-smoothing: grayscale; }
    .playlist .controls label:after {
      content: "\f028";
      color: black;
      font-size: 18px;
      padding-left: 5px; }
    .playlist .controls input[type=range] {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      display: inline-block;
      width: 75%; }
    .playlist .controls input[type=range]::-webkit-slider-runnable-track {
      height: 8px;
      background: #ddd;
      border: none;
      border-radius: 3px;
      padding: 1px; }
    .playlist .controls input[type=range]::-moz-range-track {
      height: 8px;
      background: #ddd;
      border: none;
      border-radius: 3px;
      padding: 1px; }
    .playlist .controls input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border: none;
      height: 16px;
      width: 16px;
      border-radius: 50%;
      background: goldenrod;
      margin-top: -5px;
      cursor: ew-resize; }
    .playlist .controls input[type=range]::-moz-range-thumb {
      border: none;
      height: 16px;
      width: 16px;
      border-radius: 50%;
      background: goldenrod;
      margin-top: -5px;
      cursor: ew-resize; }
    .playlist .controls input[type=range]:focus {
      outline: none; }
    .playlist .controls input[type=range]:focus::-webkit-slider-runnable-track {
      background: #ccc; }
    .playlist .controls input[type=range]:focus::-moz-range-track {
      background: #ccc; }
  .playlist .annotations .annotations-boxes {
    text-align: center; }
  .playlist .annotations .annotation-box {
    border: 2px dashed grey;
    padding: 0 10px; }
    .playlist .annotations .annotation-box .resize-handle {
      background: grey;
      opacity: 0.3;
      cursor: ew-resize; }
    .playlist .annotations .annotation-box .id {
      cursor: pointer;
      display: inline-block;
      width: 100%;
      height: 100%; }
  .playlist .annotations .annotations-text {
    font-size: 19px;
    font-weight: 300;
    margin-top: 1em;
    height: 160px;
    overflow-x: hidden;
    overflow-y: auto; }
    .playlist .annotations .annotations-text .annotation {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: flex-start;
      align-items: stretch; }
      .playlist .annotations .annotations-text .annotation span {
        margin: 0.3rem 0.6rem; }
        .playlist .annotations .annotations-text .annotation span:last-of-type {
          margin-right: 1.2rem; }
      .playlist .annotations .annotations-text .annotation .annotation-id {
        font-size: 16px;
        line-height: 27px; }
      .playlist .annotations .annotations-text .annotation .annotation-start {
        font-size: 16px;
        line-height: 27px; }
      .playlist .annotations .annotations-text .annotation .annotation-end {
        font-size: 16px;
        line-height: 27px; }
      .playlist .annotations .annotations-text .annotation .annotation-lines {
        flex-grow: 10; }
      .playlist .annotations .annotations-text .annotation .annotation-actions {
        flex-basis: auto;
        width: 80px;
        text-align: right;
        font-size: 16px; }
        .playlist .annotations .annotations-text .annotation .annotation-actions i {
          margin-right: 0.6rem; }
          .playlist .annotations .annotations-text .annotation .annotation-actions i:last-of-type {
            margin-right: 0; }
          .playlist .annotations .annotations-text .annotation .annotation-actions i:hover {
            color: orange;
            cursor: pointer; }
  .playlist .annotations .current {
    background-color: #e0eff1; }

.playlist .vocals {
  background-color: #e0eff1; }
  .playlist .vocals header {
    background-color: #e0eff1; }

.track-drop {
  border: 2px dashed blue;
  height: 100px;
  width: 100px;
  margin: 1em 0; }
  .track-drop::before {
    content: "Drop audio file(s) here!"; }
  .track-drop.drag-enter {
    border: 2px solid orange; }

footer {
  margin-top: 2em; }