#calibrationWrapper {
    display: none;
    position: fixed;
    left:0;
    top:0;
    width:100vw;
    height:100vh;
    background-color: black;
    z-index:1000;
}

#calibrationMain {
    position: relative;
    left:0;
    top:0;
    width:100vw;
    height:100vh;
}


#calibrationSave,#calibrationCancel,#calibrationTestRecording{
    z-index:1001;
    border-style: none;
    outline-style: none;
    display: inline-block;
    bottom:10px;
    width: 150px;
    cursor: pointer;
    border-radius: 10px;
    padding:5px;
    color:white;
    background-color: #FFBC09;
}

#calibrationView {
    position: absolute;
    left:10px;
    background-color: grey;
    top:10px;
    width:calc(100vw - 20px);
    height:calc(100vh - 100px);
    /*background-image: url('./calibration_image_main_view.png');*/
    background-size:100% 100%;
    background-repeat: no-repeat;
}

#calibrationSave{
    position: absolute;
    right: 10px;
}
#calibrationCancel{
    position: absolute;
    right: 170px;
    background-color: darkred;
}

#calibrationMessage{
    z-index:1001;
    
    bottom:20px;
    color:white;
    position: absolute;

}

#calibrationErrorMessage{
    z-index:1001;
    text-align: center;
    position: absolute;

    color:white;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
}#bookmarks{
  padding-top:20px;
  display: flex;
  flex-direction: column;
}
#bookmarks .bookmark {
  cursor: pointer;
  background-image: url('/vca/img/label.svg');
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 25px;
}

#timeline .bookmark {
  cursor: pointer;
  width:20px;
  height:20px;
  background-image: url('/vca/img/label.svg');
  background-size: 100% 100%;
  transform: rotate(90deg) translateX(-10px) translateY(2px) ;
  position: absolute;
}

#timeline .bookmark:hover{
  filter:brightness(1000%);
}

.annotationConfiguration-item > div{
  display: inline-block;
  width:100px;
}
input.annotationConfiguration-timePadding, input.annotationConfiguration-title {
  background-color:black;
  color:white;
  margin-bottom:5px;
  margin-left:5px;
  padding:10px;
  border-style: none;
  border-radius: 10px;
  background-image: none;
  border-color: #FFBC09;
}
input.annotationConfiguration-timePadding {
  width:50px;
}@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-Bold.woff2') format('woff2'),
        url('font/Montserrat-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-ThinItalic.woff2') format('woff2'),
        url('font/Montserrat-ThinItalic.woff') format('woff');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-Light.woff2') format('woff2'),
        url('font/Montserrat-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-BlackItalic.woff2') format('woff2'),
        url('font/Montserrat-BlackItalic.woff') format('woff');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-LightItalic.woff2') format('woff2'),
        url('font/Montserrat-LightItalic.woff') format('woff');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-ExtraBold.woff2') format('woff2'),
        url('font/Montserrat-ExtraBold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-ExtraBoldItalic.woff2') format('woff2'),
        url('font/Montserrat-ExtraBoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-Thin.woff2') format('woff2'),
        url('font/Montserrat-Thin.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-SemiBoldItalic.woff2') format('woff2'),
        url('font/Montserrat-SemiBoldItalic.woff') format('woff');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-Black.woff2') format('woff2'),
        url('font/Montserrat-Black.woff') format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-Regular.woff2') format('woff2'),
        url('font/Montserrat-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-BoldItalic.woff2') format('woff2'),
        url('font/Montserrat-BoldItalic.woff') format('woff');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-ExtraLight.woff2') format('woff2'),
        url('font/Montserrat-ExtraLight.woff') format('woff');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-Medium.woff2') format('woff2'),
        url('font/Montserrat-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-SemiBold.woff2') format('woff2'),
        url('font/Montserrat-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-ExtraLightItalic.woff2') format('woff2'),
        url('font/Montserrat-ExtraLightItalic.woff') format('woff');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-MediumItalic.woff2') format('woff2'),
        url('font/Montserrat-MediumItalic.woff') format('woff');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Montserrat';
    src: url('font/Montserrat-Italic.woff2') format('woff2'),
        url('font/Montserrat-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
#menu {
    display: none; /*start hidden*/
    position: fixed;
    top:50px;
    left:0;
    background: rgb(25,25,25);
    z-index: 10000;
    list-style-type: none;
}

#menu > li {
    padding: 10px;
    cursor: pointer;
}

@media screen and (max-width: 600px) {
    #menu{
      width: 100vw;
      margin-left: 0px;
      height:100vh;
    }
  }
  
  @media screen and (min-width: 600px) {
    #menu{
      width: 300px;
      height:100vh;
    }
  }
  
.login {
    position: fixed;
    left:0;
    top:0;
    width:100vw;
    height:100vh;
    background-color: black;
    z-index:10000
  }
  
  .login > div {
    position: fixed;
    left:50vw;
    top:50vh;
    transform: translate(-50%,-50%);
    background-color: rgb(25,25,25);
    border-radius: 10px;
    padding:25px;
  }
  
  .login > div > input {
    display: block;
    background-color:black;
    color:white;
    margin-bottom:20px;
    width:calc( 100% - 40px );
    padding:20px;
    border-style: none;
    border-radius: 10px;
    background-image: none;
    border-color: #FFBC09;
  }

  .login > div > input:focus {
    border-color: #FFBC09;
    outline-color:    #FFBC09;
  }
  
  .login > div > input[type="submit"]{
    width: 100%;
    margin-bottom:0px;
    margin-top:30px;
    font-weight: bold;
    color: white;
    background-color: #FFBC09;
    cursor: pointer;
    
  }

  #forgot, #already-have-account,  #request-demo-login{
    display: block;
    text-align: right;
    color :white;
    text-decoration: none;
    margin-top:5px;
    cursor: pointer;
    font-size: small;
  }

  #loginFailureMessage, #demo-password-message, #demo-login-message {
    padding-top:10px;
    color:red;
    text-align: center;

  }

  #demo-login, #demo-register-password, #request-demo-login {
    display: none;
  }


html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: black;
  color:white;
  height: 100%;
  font-family: Montserrat;
  width:100vw; 
  max-width: 100vw;
  min-width: 100vw;
  overflow: hidden;
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
}

body {
  /* font-size: 10pt;
    font-family: Arial; */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  border-width: 0;
}


nav {
  width:100vw;
  height:75px;
}

#sidebar{
  vertical-align: top;
  margin-left:100px;
}


#hamburger{
  height: 30px;
  margin-left: 15px;
  vertical-align: middle;
  cursor: pointer;
  filter: invert(100%);
}

img#logo {
  max-height: 50px;
  vertical-align: middle;
  cursor: pointer;
}


.modal {
  color:white;
  position:fixed;
  transform: translate(-50%,-50%);
  left: 50vw;
  top:50vh;
  background-color: rgb(50,50,50);
  padding: 20px;
  border-radius: 20px;
  z-index:1000;
}

#playerWrapper{
  height: 75%; /*TODO aspect ratio*/
}

@media screen and (max-width: 600px) {
  #playerWrapper{
    display: none;
    width: 100%;
  }
}

@media screen and (min-width: 600px) {
  #playerWrapper{
    margin-left: 10vw;
    display: none;
    width: 80vw; 
  }
}


/* hide scroll bars */
body {
  margin-right: -17px !important;
  scrollbar-width: none;
}

body::-webkit-scrollbar {
  width: 0 !important
}

body {
  -ms-overflow-style: none;
}

body {
  overflow: scroll;
}

select {
  -webkit-appearance: none;
}

input[type="submit"]{
  -webkit-appearance: none;
}

#notification {
  background-color: #FFBC09;
  position: fixed;
  color:black;
  right: 5px;
  top: 5px;
  padding: 20px;
  display: none;
  border-radius: 10px;
}#newRecording{
    position: fixed;
    left:0;
    top:0;
    width:100vw;
    height:100vh;
    z-index:999;
    background-color: rgba(0,0,0,0.75);
    display: none;
}
#newRecording-box table {
    width:100%;
}
#newRecording-box{
    position: fixed;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    background-color: rgb(25,25,25);
    border-radius: 10px;
    padding: 50px;
    padding-top: 40px;
    z-index:1000;
    min-width: 30vw;
}

#newRecording INPUT, #newRecording SELECT{
    margin:0;
    color:white;
    background-color:black;
    outline:none;
    padding:10px;
    border-radius: 10px;
    width: 100%;
    border-style: solid;
    border-width: 1px;
    border-color: transparent;
}

#newRecording SELECT{
    width: calc(100% + 22px);
}

#newRecording INPUT:hover, #newRecording SELECT:hover{
    border-color: #FFBC09;;
}

#newRecording-save{
    width: 100%;
}

#newRecording INPUT#newRecording-calibrate {
    cursor: pointer;
    color:white;
    margin-bottom:5px;
    width: 33%;
    background-color: #FFBC09;
}

input:invalid {
    background-color: red;
    color:white;
  }

#newRecording TD {
    padding:10px;
}

#newRecording INPUT#newRecording-save {
    background-color: #FFBC09;
    margin-bottom: 5px;
    cursor: pointer;
}

#newRecording INPUT#newRecording-save:disabled,
#newRecording INPUT#newRecording-save[disabled],
#newRecording INPUT#newRecording-calibrate:disabled,
#newRecording INPUT#newRecording-calibrate[disabled]{
    border-width: 0;
    background-color: grey;
    color: darkgray;
    cursor: default;
}

#newRecording INPUT#newRecording-cancel {
    background-color: transparent;
    width:10px;
    height:10px;
    float:right;
    background-image: url('img/close.svg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    border-style: none;
}


#newRecording A {
    color:white;
    text-decoration: none;
    float:right;
    margin:5px;
}

#newRecording A:hover{
    text-decoration: underline;
}#player {
  width: 100%;
  height: 100%;
  position: relative;
  /*background-color: black;*/
}


canvas {
  overflow: hidden;
  margin: 0;
  padding: 0;
  border-width: 0;
  outline: none;
  background-color: black;
  cursor: grab;
  background-image: url('./logo-studio-automated.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50%;
}


#errorMessage {
  text-align: center;
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
}

img#playerLogo {
  display: none;
  width: 200px;
  position: fixed;
}



#controls {
  background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 110px;
  transition: .3s all ease;
}

#state.play {
  background-image: url('img/play.svg');
}

#state {
  background-image: url('img/pause.svg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: absolute;
  display: inline-block;
  width: 20px;
  height: 18px;
  left: 10px;
  top: 65px;
  color: white;
  padding-top: 2px;
  cursor: pointer;
}

#bar {
  position: absolute;
  left: 10px;
  top: 30px;
  width: calc(100% - 20px);
}

#timeline {
  cursor: grab;
  position: relative;
  display: inline-block;
  /*border-radius: 20px;
  background-color: rgba(75, 75, 75, 0.5);*/
  height: 20px;
  width: calc(100% - 10px);
 /*  max-width: calc(100% - 10px);*/
  overflow: visible;
}


#now {
  position: absolute;
  display: inline-block;
  border-radius: 100%;
  background-color: #FFBC09;
  width: 15px;
  height: 15px;
  top: 3px;
  z-index: 4;
}

#line {
  position: absolute;
  top: 8px;
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.25);
  height: 6px;
  width: 100%;
  /*  max-width: 100%;*/
  z-index: 1;
}

#line2 {
  position: absolute;
  top: 11px;
  display: inline-block;
  background-color: #FFBC09;
  height: 1px;
  z-index: 3;
}



.buffer {
  position: absolute;
  top: 8px;
  background-color: rgba(255, 255, 255, 0.75);
  opacity: 0.25;
  height: 6px;
  z-index: 2;
}

#view-wrapper {
  position: absolute;
  right: 20px;
  bottom: 80px;
  cursor: default;

}

#view {
  display: inline-block;
  width: 152px;
  height: 102px;
  background-color: rgba(75, 75, 75, 0.5);
  position: relative;
  overflow: hidden;
  cursor: grab;
  border-color: rgba(255, 255, 255, 0.25);
  border-style: solid;
  border-width: 1px;
  vertical-align: bottom;
}

#view-zoom {
  display: inline-block;
  color: white;
  height: 100px;
  font-size: larger;
  vertical-align: bottom;
}

#view-zoom-in,
#view-zoom-out {
  height: 15px;
  width: 15px;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#view-zoom-in {
  background-image: url('/vca/img/zoom-in.svg');
}

#view-zoom-out {
  background-image: url('/vca/img/zoom-out.svg');
}

#view-zoom-slide {
  height: 70px;
  cursor: pointer;
  background-color: rgba(75, 75, 75, 0.5);
  margin-left: 5px;
  width: 5px;
}

#view-zoom-slider {
  pointer-events: none;
  background-color: white;
  height: 70px;
}

#view-selection {
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  background-color: rgba(255, 255, 255, 0.1);
  border-style: solid;
  border-width: 1px;
  border-color: #FFBC09
}

#time {
  color: white;
  position: absolute;
  top: 67px;
  left: 50px;
  font-size: small;
}

#jumpToNow-button,
#share-button,
#fullScreen-button,
#sound-button,
#direct-button {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 30px;
  height: 20px;
  position: absolute;
  cursor: pointer;

  overflow: hidden;
  color: white;
  top: 65px;

}

#direct-button {
  background-image: url('img/direct-mode.svg');
  right: 170px;
}

#share-button {
  background-image: url('img/share.svg');
  right: 120px;
}

#jumpToNow-button {
  background-image: url('img/jump-live.svg');
  right: 20px;
}

#fullScreen-button {
  background-image: url('img/full-screen.svg');
  right: 70px;
}

#fullScreen-button :fullscreen {
  background-image: url('img/windowed.svg');
  right: 60px;
}

#sound-button {
  background-image: url('img/sound-on.svg');
  left: 130px;
}

#sound-button.muted {
  background-image: url('img/sound-off.svg');
  transform: translate(1px, 0);
}

#sound-slider {
  left: 170px;
  top: 73px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.25);
  width: 50px;
  position: absolute;
  height: 5px;
  overflow: visible;
  cursor: pointer;

}


#sound-slider-filled {
  border-radius: 5px;
  background-color: rgb(210, 210, 210);
  width: 20px;
  height: 5px;
  position: relative;
  overflow: visible;

}


#sound-slider.muted>#sound-slider-filled,
#sound-slider.muted #sound-slider-knob {
  display: none;
}

#sound-slider-knob {
  cursor: grab;
  border-radius: 5px;
  position: absolute;
  height: 10px;
  width: 10px;
  top: -2.5px;
  right: 0;
  background-color: rgb(210, 210, 210);


}


#selection {
  display: none;
  background-color: transparent;
  border-style: solid;
  position: absolute;
  border-color: #FFBC09;
}

/* hide scroll bars */
#scroll {
  margin-right: -17px !important;
  scrollbar-width: none;
}

#scroll::-webkit-scrollbar {
  width: 0 !important
}

#scroll {
  -ms-overflow-style: none;
}

#scroll {
  overflow: scroll;
}

#liveIndicator {
  position: absolute;
  right: 95px;
  bottom: 180px;
  background-image: url('img/live.svg');
  background-size: 40px 40px;
  background-repeat: no-repeat;
  width: 100px;
  height: 40px;

}
#title {
    margin-left: 50px;
}

h1 {
    margin-bottom:4px;
}
  
.recording, #new_recording  {
    background-size: 30px 15px;
    background-repeat: no-repeat;
    background-color: rgb(25,25,25);
    border-radius: 10px;
    position: relative;
    margin-bottom: 10px;
    cursor: pointer;
    padding:10px;
    padding-top: 145px;
    height: 40px;
    width:180px;
    overflow: hidden;
    border-width: 1px;
    border-style: solid;
    border-color:transparent;
    margin-right: 20px;
    margin-bottom:40px;
}

.recording:hover, #new_recording:hover {
    border-width: 1px;
    border-style: solid;
    border-color:#FFBC09;
}

.recording > span.liveIndicator, .recording > span.thumbnail, #new_recording > span.thumbnail {
    background-size: 100% 100%;
    background-repeat: no-repeat;

    position: absolute;
    left:0px;
    top:0px;
    width:200px;
    height: 140px;
    background-color: black;
    display: inline-block;
    vertical-align: top;
}

.recording > span.liveIndicator {
    background-color: transparent;
}

.recording > span.title {
    font-size: small;
    font-weight: bold;
    display: block;
    padding: 2px;
}

.recording > span.subtitle, #new_recording > span.subtitle {
    font-size: x-small;
    color: lightgray;
    display: block;
    padding: 2px;
}

.recording.live > span.liveIndicator {    
    background-image: url('img/live.svg');
    background-size: 30px 15px;
    background-repeat: no-repeat;
}

#new_recording > span.thumbnail {
    background-image: url('img/new.svg');;
    background-color: transparent;
    background-size: 70px 70px;
    background-position: center 50px;
    text-align: center;
    font-size: 50px;
    color: lightgray;
}

 #new_recording > span.title {
    font-size: small;
    color: lightgray;
    text-align: center;
    display: block;
    padding: 2px;
}

#previousRecordings, #scheduledRecordings, #previousRecordings, #liveRecordings {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width:calc(100vw - 100px);
}