@font-face {
  font-family: "custom-font";
  src: url(volvo-videojs-icons/fonts/icomoon.ttf);
  font-display: swap;
}

@font-face {
  font-family: "Volvo Novum Medium";
  src: url(fonts/Volvo-Novum-Medium.eot) format("embedded-opentype"),
    url(fonts/Volvo-Novum-Medium.svg) format("svg");
}

@font-face {
  font-family: "Volvo Novum SemiLight";
  src: url(fonts/Volvo\Novum-SemiLight.eot) format("embedded-opentype"),
    url(fonts/Volvo\Novum-SemiLight.svg) format("svg");
}

#tecviz_video {
  background-color: transparent;
}

.tecviz-js {
  width: 100%;
  height: 100%;
}

.video-js{
  overflow: hidden;
  border-radius: 16px;
}

.video-js:fullscreen,
.video-js:-webkit-full-screen,
.video-js:-moz-full-screen,
.video-js:-ms-fullscreen{
  border-radius: 0 !important;
}

.video-js.vjs-fullscreen {
  border-radius: 0 !important;
}


.vjs-control-bar button {
  outline: none;
}

.tecviz-js:focus:not(:focus-visible) {
  outline: none;
}

.tecviz-js .vjs-control-bar::before {
  pointer-events: none;
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  background: rgb(0, 0, 0);
  background: linear-gradient(0deg,
      rgb(0 0 0 / 67%) 0%,
      rgb(0 0 0 / 71%) 13%,
      rgb(0 0 0 / 50%) 24%,
      rgb(0 0 0 / 35%) 38%,
      rgba(0, 0, 0, 0.19511554621848737) 55%,
      rgba(0, 0, 0, 0.09987745098039214) 67%,
      rgba(0, 0, 0, 0.052258403361344574) 75%,
      rgba(0, 0, 0, 0) 86%);
  height: 30em;
}

.vjs-menu .vjs-menu-content>* {
  white-space: nowrap;
}

.tecviz-js .vjs-control-bar {
  background-color: transparent;

  /* OPTIONAL */
  height: 50px;
  padding: 0 2em;
}

.video-js .vjs-play-control .vjs-icon-placeholder,
.vjs-play-control .vjs-icon-placeholder,
.video-js .vjs-play-control.vjs-playing .vjs-icon-placeholder,
.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  font-family: "custom-font";
}

.vjs-icon-fullscreen-exit,
.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder,
.vjs-icon-fullscreen-enter,
.video-js .vjs-fullscreen-control .vjs-icon-placeholder {
  font-family: "custom-font";
}

.vjs-icon-fullscreen-exit:before,
.video-js.vjs-fullscreen .vjs-fullscreen-control .vjs-icon-placeholder:before {
  content: "\e902";
  font-size: 1.8em;
}

.vjs-icon-fullscreen-enter:before,
.video-js .vjs-fullscreen-control .vjs-icon-placeholder:before {
  content: "\e903";
  font-size: 1.8em;
}

.vjs-icon-pause:before,
.tecviz-js .vjs-play-control.vjs-playing .vjs-icon-placeholder:before {
  content: "\e901";
}

.vjs-icon-play:before,
.video-js .vjs-play-control .vjs-icon-placeholder:before,
.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  content: "\e900";
  font-size: 1.5em;
}

.vjs-icon-audio:before,
.video-js .vjs-audio-button .vjs-icon-placeholder:before,
.vjs-icon-volume-high:before,
.video-js .vjs-mute-control .vjs-icon-placeholder:before {
  font-size: 1.8em;
}

button.vjs-picture-in-picture-control.vjs-control.vjs-button {
  display: none;
}

.tecviz-js .vjs-big-play-button {
  background-color: transparent !important;
  border-radius: 25px;
  font-size: 4em;
}

.tecviz-js .vjs-control:focus:before,
.video-js .vjs-control:hover:before,
.video-js .vjs-control:focus {
  text-shadow: none;
}

/* EXPRIMENT */

.vjs-audio-button.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button {
  height: 52px;
}

/* FRÅN ÄLDRE KOD */

.tecviz-js .vjs-big-play-button {
  background-color: transparent !important;
  font-size: 5em;
}

/* Control bar buttons  */

.tecviz-js .vjs-remaining-time {
  order: 3;
  /* flex: 1; */
  text-align: left;
  display: flex;
  align-items: center;
}

.tecviz-js .vjs-play-control {
  order: 2;
  margin-right: 10px;
}

.tecviz-js .vjs-volume-panel {
  order: 1;
  align-items: center;
}

.tecviz-js .vjs-audio-button.vjs-menu-button.vjs-menu-button-popup.vjs-control.vjs-button {
  order: 4;
}

.tecviz-js .vjs-progress-control {
  order: 3;
  height: 100%;
  flex: 1;
}

.tecviz-js .vjs-fullscreen-control,
.tecviz-js .vjs-picture-in-picture-control {
  order: 5;
  margin-left: 10px;
}

/* .tecviz-js .vjs-fullscreen-control {
  font-size: 0.8rem !important;
  display: none;
} */

.vjs-button>.vjs-icon-placeholder:before {
  font-size: 1.8rem;
  line-height: unset !important;
}

span.vjs-remaining-time-display {
  font-size: 0.8rem;
}

.vjs-modal-dialog .vjs-modal-dialog-content,
.video-js .vjs-modal-dialog,
.vjs-button>.vjs-icon-placeholder:before,
.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  position: unset !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.tecviz-js .vjs-volume-panel .vjs-hover .vjs-volume-control .vjs-volume-horizontal {
  display: flex;
  align-items: center;
}

.tecviz-js .vjs-menu .vjs-menu-content {
  font-family: "Volvo Novum SemiLight" !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 1.2em;
  border-radius: 5px;
  width: fit-content;
  bottom: 1.9em;
  right: 0.5rem;
  background-color: rgb(0 0 0 / 60%);
}

.tecviz-js .vjs-menu-button-popup .vjs-menu {
  margin-bottom: 2.5em;
}

.vjs-menu li {
  padding: 0.5em 1.2em;
  text-transform: unset;
}

/* LIVE UI */

.vjs-live .vjs-time-control span {
  display: none !important;
}

.vjs-live-display {
  /* display: none; */
  font-size: 1.2em;
  letter-spacing: 0.5px;
}

.tecviz-js .vjs-live-control {
  font-family: "Volvo Novum Medium" !important;
  font-weight: normal !important;
  font-style: normal !important;
}

/* .video-js .vjs-live-control::after {
    content: "LIVE";
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width:100%;
    font-size: 1.2em;
    color: red;
} */

.video-js .vjs-live-control {
  align-items: center;
  justify-content: flex-start;
  order: 3;
  color: white;
  padding-left: 10px;
}

.video-js button {
  padding: 0 !important;
}

.tecviz-js-fullscreen {
  cursor: pointer;
  order: 5;
}

.tecviz-js-fullscreen .vjs-icon-placeholder {
  position: relative;
  background-image: url(/images/fullscreen-open-arrow.svg);
  height: 100%;
  width: 1.8em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 12px;
}





@media screen and (max-width: 1049px) {

  .tecviz-js .vjs-poster,
  .video-js,
  video,
  video#my_video_html5_api {
    border-radius: 0px;
  }

  .tecviz-js .vjs-control-bar::before {
    border-radius: 0 0 4px 4px;
  }

  button.vjs-control.vjs-button.tecviz-js-fullscreen {
    display: none;
  }

  .tecviz-js .vjs-fullscreen-control {
    display: block;
    margin-left: 0;
  }

  .vjs-icon-fullscreen-enter:before,
  .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before {
    font-size: 1.4em;
  }
}

@media screen and (max-width: 600px) {
  .tecviz-js .vjs-control-bar {
    padding: 0;
  }

  .tecviz-js-fullscreen {
    margin-right: 8px !important;
  }
}

/* REMOVE FUNCTION FOR NATIVE FULLSCREEN */

/* .tecviz-js .vjs-fullscreen-control {
        pointer-events: none;
    }

    .vjs-icon-fullscreen-enter:before, .video-js .vjs-fullscreen-control .vjs-icon-placeholder:before {
        display: none;
    } */