#printing-view {

  #bed-container{background: transparent;}


  .temp-subheading{
    padding-top: 8px;
  }
  .controls{
    background: $jet;
  }
  h2 {
    font-size: rem-calc(28);
    margin: 0 0 8px 0;
  }

  .bottom-space{
    margin-bottom: 20px;
  }
  #buttons-box{

    button,span.button{
      margin-bottom: 10px;
      margin-top: 0;
      letter-spacing: 0.5px;
      margin-top: 15px;

      &.controls:hover {
        background-color: lighten($jet,10%);
      }

      &:focus{
        outline: 0;
      }
    }

    .top-10 {
      display: block;
      line-height: initial;
      margin-top: -10px;
    }
  }

  div {
    #filename-progress-container {
      margin: 15px !important;
      margin-top: -5px !important;
    }
  }

  .progress {
    background-color: rgba(240, 82, 81, 0.2);
    position: relative;
    text-align: left;
    height: 15px;
    margin-top: 50px;
    margin-bottom: -10px;

    .filename {
      position: absolute;
      top: -22px;
      left: 2px;
      color: rgba(0, 0, 0, 0.3);
      font-size: rem-calc(14);
      overflow-x: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      width: 60%;
    }

    .progress-label {
      position: absolute;
      right: 0;
      top: -45px;
      font-size: rem-calc(36);
      color: $green;
    }
  }

  .print-info {
    font-size: rem-calc(40);
    margin: 10px 0 0 0;

    .highlighted {
      font-size: rem-calc(35);
      color: $success-color;

      &.layer-count{
        color: $red;
      }
    }

    .info {
      background: $white;
      box-shadow: 0px 1px 2px 2px rgba(82, 82, 82, 0.04);
      min-height: 280px;
      margin-bottom: 20px;

      > div {
        margin: 10px 0;
        margin-top: 18px;
      }

      h2 {
        font-size: 0.875rem;
        margin-bottom: 0;
        text-transform: uppercase;
        letter-spacing: 2px;
      }

      &.fullscreen{
        display: none;
      }

      #time-layer-container {

        .top-10 {
          display: block;
          line-height: initial;
          margin-top: -10px;
        }

        .h2-top-5 {
          margin: -5px;
        }

        i {
          font-size: rem-calc(28);
        }
        div {
          margin-top: -15px;
        }
      }

    }

    #heating-container {
      display: none;
    }

    .camera-container {
      min-height: 220px;
      position: relative;
      background: $oil;
      overflow: hidden;

      i {
        position: absolute;
        top: 50%;
        left: 50%;
        color: #666666;
        transform: translate(-50%, -65%);
      }

      img {
        position: absolute;
        width: 100%;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
      }

      &.no-camera {
        min-height: 280px !important;
      }
    }

    $camera-controls-height: 60px;

    .camera-controls {
      height: $camera-controls-height;
      background: #dfdfdf;

      .loading-button {
        display: block;
        height: 70px;
        width: 70px;
        margin-top: -15px;
      }

      .loading-button {
        .video-off, .video-on {
          i {
            padding: 15px;

            &.icon-rocket-spinner {
              padding: 5px;
            }
          }
        }
      }

      button, .button.loading {
        padding: 0;
        width: 100%;
        height: 100%;
        margin: 0;
      }

      button.take-pic {
        i {
          margin-left: -2px;
          margin-top: 1px;
          display: block;
          font-size: 30px
        }
      }

      .timelapse {
        position: relative;
        height: $camera-controls-height;
        cursor: pointer;
        width: 75px;

        .overlay {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }

        i {
          color: #505050;
          left:0px;
          position: absolute;
          font-size: 18px;
          top: 5px;
          border: 2px solid;
          border-radius: 4px;
          box-shadow: 1px 0px 2px rgba(0, 0, 0, 0.45);
          cursor: pointer;
          min-width: 50px;
          text-align: center;
        }

        .dot {
          position: absolute;
          top: 43px;
          left: 0;
          display: inline-block;
          width: 10px;
          height: 10px;
          background-color: $alert-color;
          @include radius(30px);
        }

        select {
          -moz-appearance: window;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 40px 0 0 15px;
          border: 0;
          background: none;
          color: #505050;
        }

        .no-user & {
          visibility: hidden;
        }
      }

      .button.loading {
        i {
          display: inline-block;
          font-size: 30px;
          margin-top: 14px;
        }
      }

      .camera-mode {
        padding: 0 rem-calc(10) 0 0;

        p {
          color: $charcoal;
          margin: 0;
          white-space: nowrap;

          i {
            font-size: rem-calc(16);
            margin: 0 4px 0 5px;

            &.icon-picture-1 {
              margin-left: 0;
            }
          }
        }


        .switch input + label {
          display: block;
          width: 65px;
          height: 28px;
          border: 1px solid #ccc;
          background: $steel;

          &:after {
            height: 20px;
            top: rem-calc(3);
            left: rem-calc(3);
          }
        }

        .switch input:checked + label {

          &:after {
            left: rem-calc(36);
          }
        }
      }
    }
  }

  #temp-control-template {
    margin-bottom: 15px;
    color: $iron;

    .semi-circle-temps {
      width: 280px !important;
      .temp-container .buttons-container {
        .temp-target {
          .target {
            left: 2%;
            padding: 0;
          }
        }
      }
      .progress-temp-circle {
        left: 0%;
      }
    }

    .white-background {
      background: $white;
      box-shadow: 0px 3px 2px 2px rgba(82, 82, 82, 0.04);
      overflow: hidden;
      margin-bottom: 20px;
      border-radius: 3px;

      ::-webkit-scrollbar {
        -moz-appearance: none !important;
        background: transparent !important;
        height: 0;
      }
    }

    #extruder-container {
      display: inline-block;
      white-space: nowrap;
      min-height: 270px;
      left: 0 !important;
      background: transparent !important;

      .arrow {
        color: $oil;
        z-index: 4;
        position: absolute;
        top: 21px;
        cursor: pointer;
        font-size: 36px !important;

        &.arrow-disabled{
          opacity: 0.3;
          cursor: not-allowed;
        }

      }

      .icon-angle-left {
        left: 10px;
        padding: 0;
      }

      .icon-angle-right {
        right: 5px;
        padding: 0;
      }

      #slider-nav {
        white-space: nowrap;
        overflow: hidden;
        overflow-x: scroll;

        .nav-extruder {
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          float: none !important;
          vertical-align: top;
          margin-top: 5px;
          height: 55px;

          &.current-slide {
            .extruder-number {
              background: url(/img/icon-extruder-active.svg) top no-repeat !important;
              color: white;
              height: 45px;
              font-size: 23px;
              padding-top: 0;
              opacity: 1;
            }

            .all-temps {
              border: 2px solid;
              color: #f05251;
              opacity: 0;
            }
          }

          .extruder-number {
            background: url(/img/icon-extruder.svg) center no-repeat !important;
            padding: 2px 15px 10px 15px;
            color: $oil;
            opacity: 0.5;
            font-family: "nexa_boldregular", Helvetica, Arial, sans-serif;
            text-align: center;
            display: block;
            margin: 0 3px;
          }
        }
      }

      #slider {
        white-space: nowrap;
        overflow: hidden;
        overflow-x: scroll;
        margin-top: 10px;
        padding-bottom: 25px;

        .semi-circle-temps {
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          float: none !important;

          -webkit-filter: grayscale(100%);
          filter: grayscale(100%);
          cursor: pointer;
            .circle-container{
              opacity: 0.5;
              transform: scale(0.75);
              transition: all 500ms ease;
            }

          &:hover{
            transition: all 500ms ease;

              .circle-container{
                opacity: 1;
                transition: all 500ms ease;
              }
          }

          &.current-slide {
            -webkit-filter: initial;
            filter: initial;
            overflow: visible;

            .circle-container{
              transform: scale(0.95);
              opacity: 1;
              transition: all 500ms ease;
            }
          }
        }

        img.icon-bed{display: none;}
      }
    }

    .bed {
      height: 245px;
      box-shadow: 0px 3px 2px 2px rgba(82, 82, 82, 0.04);
      .semi-circle-temps {
        width: 100% !important;
      }
    }

    .no-bed {
      cursor:not-allowed !important;

      .semi-circle-temps, span,{
        opacity: 0.3;
        -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
        filter: grayscale(100%);
      }

      .current{animation-iteration-count: initial;}

      button[disabled]{
        cursor: not-allowed;
      }

    }
  }

  &.heating-up {
    .print-info {
      #heating-container {
        display: block;
        font-size: rem-calc(22);
        color: $red;
        height: auto;
        //margin-bottom: -30px;

        > div {
          padding: 12px 0;
        }

        i.icon-temperatire {
          margin-bottom: -5px;
          margin-top: 5px;
          display: block;
          font-size: rem-calc(45);
        }

        .columns{
          padding-top: 0;
        }
      }

      #filename-progress-container {
        display: block;
      }

      #time-layer-container {
        display: none;
      }

      #buttons-box {
        display: none;
      }

      .status-and-buttons {
        bottom: 24px;
        .heating {
          margin-top: -9px !important;
          height: auto !important;
        }
      }
    }

    button.pause-print {
      display: none;
    }
  }

  div.video-preparing {
    display:none;
  }

  .camera-view {
    padding: 0;
    margin-bottom: 20px;
    max-width: 100%;

    .panel{
      margin-bottom: 0;
      height: 281px;
    }

    .center-icon{
      position: absolute;
      top: 60%;
      left: 50%;
      color: #666666;
      transform: translate(-50%, -65%);
      width: 100%;
    }
    .camera-controls-fullscreen {
      display: none;
    }

    .button-full-screen {
      position: absolute;
      right: 5px;
      top: 8px;
      color: white;
      font-size: 25px;
      z-index: 99 !important;
      cursor: pointer;

      &:hover, &:active{
        transform: scale(1.2);
        transition:all 0.5s ease;
        opacity: 0.6;
      }

      .icon-resize-small{
        display: none;
      }
    }

    div.video-error {
      display: none;
    }

    .video-container {
      position: relative;
      min-height: 220px;
      background: #3e3e3e;
      @include radius($global-radius $global-radius 0 0);

      .video-text{
        position: absolute;
        top: 50%;
        left: 50%;
        color: #666666;
        transform: translate(-50%, -65%);
      }

      .video-off,
      .no-detection,
      .video-preparing {
        text-align: center;
        padding-top: rem-calc(25);
      }

      i {
        font-size: rem-calc(80);
        line-height: 1;
        color: $base;
      }

      h3, h4 {
        color: $base;
        margin: 0;
      }
    }

    .video-on {
      display:none;
    }

    &.preparing {
      .video-preparing {
        display:block;
      }

      .video-off {
        display:none;
      }

      .video-on {
        display:none;
      }
    }

    &.error {
      .video-container {
        div.video-text,
        div.video-off {
          display:none;
        }

        div.video-error {
          display: block;
          padding-top: 40px;
          position: absolute;
          top:0;
          left:0;
          width: 100%;
          height: 100%;
          background: url('/img/static.gif');
          i, h3 {
            position: relative;
            color: white;
          }

          .overlay {
            background: rgba(0,0,0,.5);
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
          }
        }
      }
    }

    &.streaming {
      .video-preparing {
        display:none;
      }

      .video-off {
        display:none;
      }

      #videoScreen {
        position: absolute;
        top:0;
        width: 100%;
        height: 100%;
      }

      #video-stream {
        width: 100%;
        height: 100%;
        background: $jet;
      }

      .video-on {
        display:block;

        button {
          background: $base;
          &:hover {
            background: darken($base, 20%);
          }
        }
      }
    }

    &.fullscreen {
      max-width: 100%;
      width: 30px;
      height: 30px;
      z-index: 999 !important;
      //transition: width 1s ease;
      padding-left: 0 !important;

      .icon-resize-small {
        display: block !important;
      }
      .icon-resize-full {
        display: none !important;
      }

      .camera-controls {
        display: none;
      }

      .camera-controls-fullscreen {
        .status-and-buttons {
          max-height: 65px;
          .heating {
            bottom: -8px;
            .icon-temperatire {
              color: $alert-color;
              font-size: 18px;
              margin-bottom: 5px;
            }
          }

          .heating{
            margin-top: -5px;
            height: 31px;
          }
          #cancel-button {
            padding-left: 0;
            .loading-button, button, span {
              top: -30px;
              font-size: rem-calc(12);
              width: 80px;
              margin: 0 auto 3px 0;
              margin-left: auto !important;
              height: 20px;
              padding: 0;
              letter-spacing: 0.5px;
            }
          }
        }
        @extend .camera-controls;
        display: block;
        //bottom: -75px !important;
        background: $oil !important;
        height: auto !important;
        min-height: 75px !important;
        padding-top: 10px;

        .border-left{
          padding-left: 12px;
          border-left: 1px solid #505050;
        }

        .camera-mode p > i{color: $steel;}

        .buttons .loading-button {
          .video-off, .video-on {
            i {
              padding:8px 15px !important;
            }
          }
        }

        .timelapse{
          select, i{color: white !important;}
        }

        .info-container {
          color: white;

            .printing-info {
              margin-top: -4px;
              padding-left: 10px;
              font-size: rem-calc(18);
              white-space: nowrap;

              .layers-group {
                margin-top:2px;
              }

              i{margin-right: 5px;}
            }

          .progress-info-section {
            margin-left: -50px;
            margin-bottom: 0px;
            padding-left: 0;

            .printfile-info-name {
              color: white;
              top: -20px;
              font-size: rem-calc(12);
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
              text-align: left;
              letter-spacing: 0.5px;
              position: absolute;
              left: 0px;
              bottom: 8px;
              width: 75%;
            }

            .progress {
              background-color: rgba(240, 82, 81, 0.2);
              position: relative;
              text-align: left;
              border-radius: 10px;
              height: 10px;
              margin-top: 34px;
              margin-bottom: 8px;
              border: 0;

              .progress-label {
                position: absolute;
                right: 0;
                top: -25px;
                color: $green;
                font-size: rem-calc(18);
              }

              .meter{
                border-radius: 10px;
              }
            }
          }
        }

        .buttons .loading-button {
          display: block;
          font-size: 33px;
          padding: 0;
          height: 55px;
          width: 70px;
          margin-top: 0;
        }
      }

      .camera-container,.video-container{
        height: 67vh !important;

        img {
          height: 100% !important;
          width: auto !important;
          color: #666666;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }

      }
    }
  }

  #temp-control-template .bed img {
    height: 41px;
    padding-top: 10px;
    margin-bottom: 31px;
  }
}


#cancel-print-modal {
  .reasons {
    h3 {
      margin: 10px 0;
      .icon-ok-circled {
        color: $success-color;
        font-size: rem-calc(35);
      }

      font-size: rem-calc(25);
    }
  }
}

#upgrade-plan{
  .reveal-content img {
    height: 60px;
    text-align: center;
    padding-bottom: 10px;
    margin-top: 10px;
  }
}

#printing-view .temp-target{padding:0;}

@media #{$large-up} {
    .camera-view {
      padding-right: 0 !important;
      padding-left: 0.9375rem !important;
    }

    #printing-view #temp-control-template{
      .end{
        padding-right: 6px;
      }
    }
    #printing-view #extruder-container{
      padding-right: 0;
    }
}

@media #{$medium-up} {
  #printing-view {
    #slider {
      .semi-circle-temps {
        max-width: 50% !important;
        width: 100%;
      }
    }
  }
}

@media #{$small-up} {
  #printing-view{
      template .end {
        padding-right: 0.9375rem;
    }
  }

}

@media #{$small-only} {
  #printing-view #temp-control-template{
    .extruders{
      height: 320px;
      border-bottom: 2px dashed gainsboro;
    }
  }
 .button-full-screen{display: none;}

  #printing-view {
    .camera-view{
      max-height: 284px;
    }
    #slider {
      .semi-circle-temps {
        //width: 316px !important;
        min-width: 100%;
      }
    }
  }
}
