:host {
  overscroll-behavior: none;
}

div.workspace {
  height: calc(100vh - 48px);
  overflow: hidden;
  kendo-splitter {
    height:100%;
    .pane-content{
      height:100%;
    }
  }

}

.fullheight-tab{
  height:100%;
}


.dark-panel {
  width:100%;
  height:100%;
  background-color: darkgrey;
  padding: 10px 10px 10px 10px;
  scroll-behavior: auto;
  overflow: hidden;
  position:relative;

  &.preview{
    height: unset;
    min-height: 100%;
  }

  .main-content,
  .main-image-content{
    position:relative;
    min-height:100%;
    width:100%;
    display: inline-grid;
    margin:0;
    box-shadow: 1px 1px 10px black;
  }

  .main-image-content{
    display:block;
    text-align: center;
    margin-bottom: 30px;
    img {
      width:100%;
    }
  }

  kendo-loader{
    z-index:10;
    position: absolute;
    left: 50%;
    top: 50%;
  }

  .init-pdf{
    top: -100vh; //invisible
    transition: all 0.1s ease-in;
  }

  .ready-pdf{
    top:0;
    transition: all 0.7s ease-in;
  }

  .init-iframe {
    left:0;
    top:0;
    width:100%;
    height:100%;
    transform: rotateY(90deg);
  }
  .ready-iframe{
    width:100%;
    height:100%;
    visibility: visible;
    transform: rotateY(0deg);
    transition: all 0.1s ease-in-out;
  }

}

kendo-floatingactionbutton {
  width: 52px;
}

.init-fab{
  top : 50vh !important;
  transition: all 1s ease-in-out;
}

.ready-fab {
  top : calc(100vh - 62px);
  transition: all 1s ease-in-out;
}

div.overlay {
  height: 100px;
  background-color: #19c7ef;
  opacity: 0.5;
  z-index: 10;
  width: 100%;
  background-image: url('../../assets/img/scanbar.gif');
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top:20px;
  background-blend-mode: color; // for background image
  mix-blend-mode: hard-light; // for background
}

.scanning{
   animation: scanning 3s infinite;
}

.image-not-loaded{
  top: 100vh;
}
.image-loaded{
  top: 0;
}

@keyframes scanning {
  50% {
    transform: translateY(100vh);
  }
}

@keyframes shrinking {
  50% {
    height: 10px;
    background-color: yellow;
  }
}


.fade-out {
  opacity: 0;
  transition: all 0.5s ease-out;
}

.blink_me {
  animation: blinker 1s linear infinite;
}

.red-scan-line{
  color: red;
  width: 100%;
  border-top: 3px solid red;
  box-shadow: 1px 1px 10px red;
  animation: blinker 0.1s linear infinite;
  position: absolute;
  top: 80%;
}
@keyframes blinker {
  50% {
    opacity: 0.1;
  }
}

.scanning > .red-scan-line {
  animation: top-down 3s infinite;
}

@keyframes top-down {
  0%  {  top:80%;}
  49% {  top:80%; }
  50% {  top: 0;  }
  99% {  top: 0;  }
  100%{  top: 80%;}
}


div.analysis-result{
  height: 100%;
  width: 100%;
  background-color: lightgoldenrodyellow;
  kendo-grid{
    height: 100%;
  }
}
