/* hebrew */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./Heebo.woff2) format('woff2');
  unicode-range: U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* latin */
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./HeeboLatin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
  overflow: hidden;
}

body {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.anv-video-container {
  background: #000;
}

/*When we allow implementation of individual components, we will have to change the size in order not to mask others*/
.anv-custom-controller-container {
  width: 100%;
  height: 100%;
  z-index: 2147483648;
  position: absolute;
  top: 0;
}

/* Uses a sans-serif font everywhere in the player */
.anv-video-container,
.anv-control {
  font-family: Heebo, Arial, Helvetica, sans-serif;
}

.anv-video-content {
  position: absolute;
}

.anv-audio-poster {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

}

.anv-canvas-content {
  width: 100%;
  height: 100%;
}

/* The buttons/controls in the control bar */
/*Issue 14552 - make button relative (to bring them in front of the background)*/
.anv-control-btn {
  cursor: pointer;
  pointer-events: all;
  text-align: center;
  margin-top: 4px;
  padding: 5px 15px 9px 15px;
  white-space: nowrap;
  text-overflow: clip;
}

/* The control bar play/pause button. This is used to play and pause the video. */
.anv-play-pause-btn {
  clear: left;
  float: left;
  pointer-events: all;
  margin-left: 5px;
}

.anv-restart-live-btn {
  float: left;
  pointer-events: all;
}

/*
The "on" attribute:
    In general with the control bar buttons, if the button has ON and OFF states, then they are given an attribute
    called "on" with values of "true" or "false" to represent their ON/OFF state.
*/

.anv-stereo-btn {
  float: right;
  width: 32px;
  height: 32px;
  /*background-image: url("img/vr_sprite.png");*/
  background-position: -5px -47px;
}

.anv-stereo-btn[on=true] {
  /*background-image: url("img/vr.png");*/
  width: 32px;
  height: 32px;
  background-position: -5px -47px;
}

.anv-stereo-btn:hover {
  /*background-image: url("img/vr_red.png");*/
  width: 32px;
  height: 32px;
  background-position: -5px -47px;
}

.anv-stereo-btn[on=true]:hover {
  /*background-image: url("img/vr_red.png"); */
  width: 32px;
  height: 32px;
  background-position: -47px -47px;
}

.anv-stereo-btn[on=false] {
  width: 32px;
  height: 32px;
  background-position: -5px -5px;
  /*background-image: url("img/panorama.png");*/
}

.anv-stereo-btn[on=false]:hover {
  width: 32px;
  height: 32px;
  background-position: -47px -5px;
  /*background-image: url("img/panorama_red.png"); */
}

.anv-play-pause-btn[on=true] {
  background-position: 0px 0px;
}

.anv-no-touch .anv-play-pause-btn[on=true]:hover {
  background-position: 0px -33px;
}

.anv-play-pause-btn[on=false] {
  background-position: -33px -0px;
}

.anv-no-touch .anv-play-pause-btn[on=false]:hover {
  background-position: -33px -33px;
}

/* The control bar current playback time and overall video duration display. */
.anv-duration-btn {
  /*width:20%;*/
  font-size: .9em;
  text-align: center;
}

.anv-control-duration-label {}

.anv-play-next-btn {
  float: left;
}

/* This class is given to the volume icon button when the volume level is at 0 */
.anv-volume-icon-btn[on=false] svg .unmuted,
.anv-volume-icon-btn[on=true] svg .muted {
  display: none;
}

.anv-volume-icon-btn[on=true] svg .unmuted,
.anv-volume-icon-btn[on=false] svg .muted {
  display: block;
}

/* The control bar volume slider control. We use the transition property to show and hide the slider in response to the
   hover event. */
.anv-volume-slider-btn {
  position: relative;
  width: 0px;
  transition: width 0.15s;
  /* Safari */
  -webkit-transition: width 0.15s;
  background: transparent;
  overflow: hidden;
  align-items: center;
}

/*.anv-volume-icon-btn:hover + .anv-volume-slider-btn,*/
/*.anv-volume-icon-btn:active + .anv-volume-slider-btn,*/
/*.anv-volume-slider-btn:hover,*/
/*.anv-volume-slider-btn:active {*/
/*width: 75px;*/
/*transition: width 0.15s ease 0s;*/
/*!* Safari *!*/
/*-webkit-transition: width 0.15s ease 0s;*/
/*}*/
/* A sub-component of the volume slider bar, if using the tapered_bars style */
.anv-volume-slider-tapered-bar {
  display: inline-block;
  margin-top: 5px;
  background-color: #666;
}

/* A sub-component of the volume slider bar, if using the flat_line style */
.anv-volume-slider-flat-bar {
  height: 2px;
  background-color: rgba(255, 255, 255, 0.45);
}

/* A sub-component of the volume slider bar, if using the flat_line style */
.anv-volume-slider-scrubber {
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 100%;
}

/* A class given to the volume slider's left-side sub-component(s) that represents the volume level */
.anv-volume-active {
  background-color: #fff;
}

/* The control bar caption button. This button is used to show a small popup containing buttons for the available
   caption languages. */
.anv-caption-btn {
  float: right;
  width: 32px;
}

/* The popup that is associated with the caption button. This shows a list of buttons for the available caption
   languages. We use the transition property to show and hide the caption popup. This is the container that holds both
   the buttons and the tail for popup. */
.anv-caption-popup {
  bottom: 48px;
  left: -16px;
  width: auto;
  height: auto;
  z-index: 2147483648;
  visibility: hidden;
  transition: visibility 0s, opacity 0.8s;
  /*SAFARI*/
  -webkit-transition: visibility 0s, opacity 0.8s;
}

.anv-caption-popup-menu {
  width: auto;
  height: auto;
  padding: 4px;
  background: rgba(5, 4, 5, 0.69);
  border: 0px solid #555;
  border-radius: 5px;
  z-index: 2147483648;
}

.anv-caption-popup-tail {
  position: relative;
  left: 42%;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid rgba(5, 4, 5, 0.69);
  z-index: 2147483648;
}

.anv-caption-btn:hover>.anv-caption-popup,
.anv-caption-popup:hover {
  opacity: 1;
  visibility: visible;
  transition: visibility 0s linear 0s, opacity 0.2s ease 0s;
  /*SAFARI*/
  -webkit-transition: visibility 0s linear 0s, opacity 0.2s ease 0s;
}

/* One of the caption language buttons in the caption popup. These buttons are given on=true when they represent the
   caption language that is currently in use; in this case, the button is disabled and cannot be clicked. */
.anv-caption-popup-entry {
  height: 20px;
  margin-bottom: 2px;
  border: 0px solid #555;
  border-radius: 2px;
  font-size: 16px;
  text-align: left;
  vertical-align: middle;
}

.anv-caption-popup-entry[on=false]:hover {
  /*background-color: #ccc;*/
  background: rgba(256, 256, 256, .2);
}

.anv-caption-popup-entry[on=false] {
  cursor: pointer;
  color: #808080;
  /*background-color: #aaa;*/
}

.anv-caption-popup-entry[on=true] {
  cursor: default;
  color: white;
  background: rgba(256, 256, 256, .2);
  /*background-color: #444;*/
}

/* The control bar playbackspeed button. This button is used to show a small popup containing buttons for the
  playback speeds. */
.anv-playbackspeed-btn {
  float: right;
  width: auto;
  display: none !important;
}

/* The popup that is associated with the playbackspeed button. This shows a list of buttons for the
     playback speeds. We use the transition property to show and hide the playbackspeed popup. This is the container that holds both
     the buttons and the tail for popup. */
.anv-playbackspeed-popup,
.anv-quality-popup {
  bottom: 54px;
  right: 7px;
  min-width: 200px;
  /* max-height: 200px; */
  z-index: 2147483648;
  visibility: hidden;
  transition: visibility 0s, opacity 0.8s;
  /*SAFARI*/
  -webkit-transition: visibility 0s, opacity 0.8s;
}

.anv-playbackspeed-popup-menu,
.anv-quality-popup-menu {
  width: auto;
  height: auto;
  padding: 4px;
  background: rgba(5, 4, 5, 0.69);
  border: 0px solid #555;
  border-radius: 5px;
  z-index: 2147483648;
  text-align: left;
  overflow-y: scroll;
}

.anv-playbackspeed-popup-header,
.anv-quality-popup-header {
  display: flex;
  align-items: center;
  width: 100%;
  flex-direction: row;
  cursor: pointer;
}

.anv-playbackspeed-popup-header-img,
.anv-quality-popup-header-img {
  margin-right: 10px;
}

.anv-playbackspeed-popup-header-p,
.anv-quality-popup-header-p {
  font-size: 16px;
}

.anv-playbackspeed-popup-line,
.anv-quality-popup-line {
  width: 100%;
  height: 1px;
  background-color: gray;
}

.anv-playbackspeed-popup-menu::-webkit-scrollbar,
.anv-quality-popup-menu::-webkit-scrollbar {
  width: 12px;
  /* width of the entire scrollbar */
}

.anv-playbackspeed-popup-menu::-webkit-scrollbar-track,
.anv-quality-popup-menu::-webkit-scrollbar-track {
  background: gray;
  /* color of the tracking area */
}

.anv-playbackspeed-popup-menu::-webkit-scrollbar-thumb,
.anv-quality-popup-menu::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, .2);
  /* color of the scroll thumb */
  border-radius: 20px;
  /* roundness of the scroll thumb */
  border: 1px solid;
  /* creates padding around scroll thumb */
}

.anv-playbackspeed-popup-tail,
.anv-quality-popup-tail {
  position: relative;
  left: 42%;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid rgba(5, 4, 5, 0.69);
  z-index: 2147483648;
}

.anv-playbackspeed-btn:hover>.anv-playbackspeed-popup,
.anv-playbackspeed-popup:hover {
  opacity: 1;
  visibility: visible;
  transition: visibility 0s linear 0s, opacity 0.2s ease 0s;
  /*SAFARI*/
  -webkit-transition: visibility 0s linear 0s, opacity 0.2s ease 0s;
}

/* One of the playbackspeed buttons in the playbackspeed popup. These buttons are given on=true when they represent the
     playbackspeed that is currently in use; in this case, the button is disabled and cannot be clicked. */
.anv-speed-popup-entry,
.anv-quality-popup-entry {
  height: 20px;
  margin-bottom: 2px;
  border: 0px solid #555;
  border-radius: 2px;
  font-size: 16px !important;
  text-align: left;
  vertical-align: middle;
  padding: 10px;
}

.anv-speed-popup-entry[on=false]:hover {
  /*background-color: #ccc;*/
  background: rgba(256, 256, 256, .2);
}

.anv-speed-popup-entry[on=false] {
  cursor: pointer;
  color: #808080;
  /*background-color: #aaa;*/
}

.anv-speed-popup-entry[on=true] {
  cursor: default;
  color: white;
  background: rgba(256, 256, 256, .2);
  /*background-color: #444;*/
}

.anv-quality-popup-entry[on=false]:hover {
  /*background-color: #ccc;*/
  background: rgba(256, 256, 256, .2);
}

.anv-quality-popup-entry[on=false] {
  cursor: pointer;
  color: #808080;
  /*background-color: #aaa;*/
}

.anv-quality-popup-entry[on=true] {
  cursor: default;
  color: white;
  background: rgba(256, 256, 256, .2);
  /*background-color: #444;*/
}

/* The control bar caption search button. This button is used to show and hide the caption search screen. */
.anv-search-btn {
  float: right;
}

.anv-no-touch .anv-search-btn:hover {
  background-position: -258px -33px;
}

.anv-settings-btn[switch-in-progress=true] .anv-settings-btn-icon {
  -webkit-animation: spin 6s linear infinite;
  -moz-animation: spin 6s linear infinite;
  animation: spin 6s linear infinite;
}

.anv-settings-btn-icon svg {
  transition-duration: 10s;
  transition-property: transform;
}

.anv-no-touch .anv-settings-btn:hover {
  background-position: -294px -32px;
}

.anv-settings-popup {
  bottom: 48px;
  right: 7px;
  width: 250px;
  height: auto;
  z-index: 2147483648;
  visibility: hidden;
  /*transition: visibility 0s linear 0.8s, opacity 0.8s ease 0s;*/
  /*SAFARI*/
  /*-webkit-transition: visibility 0s linear 0.8s, opacity 0.8s ease 0s;*/
}

.anv-settings-popup-menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  width: auto;
  height: auto;
  padding: 4px;
  background: rgba(5, 4, 5, 0.69);
  border: 0px solid #555;
  border-radius: 5px;
  z-index: 2147483648;
}

.anv-settings-popup-tail {
  position: relative;
  left: 158px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid rgba(5, 4, 5, 0.69);
  z-index: 2147483648;
}

.anv-settings-btn:hover>.anv-settings-popup,
.anv-settings-popup:hover {
  opacity: 1;
  visibility: visible;
  transition: visibility 0s linear 0s, opacity 0.2s ease 0s;
  /*SAFARI*/
  -webkit-transition: visibility 0s linear 0s, opacity 0.2s ease 0s;
}

/* One of the caption language buttons in the caption popup. These buttons are given on=true when they represent the
   caption language that is currently in use; in this case, the button is disabled and cannot be clicked. */
.anv-settings-popup-entry {
  width: auto;
  height: 20px;
  margin-bottom: 2px;
  border: 0px solid #555;
  border-radius: 2px;
  font-size: 12px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.anv-settings-menu-list {
  display: flex;
  width: 100%;
  align-items: center;
}

.anv-settings-menu-list:hover {
  background: rgba(256, 256, 256, .2);
}

.anv-settings-menu-icon {
  margin-right: 10px;
  fill: #FFF;
  width: 24px;
  height: 24px;
}

.anv-quality-icon {
  padding-top: 7px;
}

.anv-settings-menu-text {
  margin-right: auto;
}

@-webkit-keyframes blink {
  from {
    opacity: 1.0;
  }

  to {
    opacity: 0.0;
  }
}

.anv-quality-popup-entry[on=pending] {
  -webkit-animation-name: blink;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: cubic-bezier(1.0, 0, 0, 1.0);
  -webkit-animation-duration: 1s;
}

.anv-download-btn {
  float: right;
  width: 32px;
}

.anv-download-btn:hover {
  background-position: -477px -33px;
}

/* The control bar fullscreen button. This button is used for toggling fullscreen mode. */
.anv-fullscreen-btn {
  margin-right: 5px;
}

/* The control bar container */
.anv-control {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  background: rgba(5, 4, 5, 0.69);
  background: none;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00050405', endColorstr='#D1050405', GradientType=0);
  zoom: 1;
  color: #fff;
  z-index: 2147483648;
}

/* The video preview container */
.anv-preview {
  position: relative;
  text-align: center;
  color: #fff;
}

/* The closed caption text container */
.anv-track {
  position: absolute;
  bottom: 15%;
  margin: 0 5%;
  width: 90%;
  z-index: 2147483648;
}

.anv-next-video-info {
  top: 40px;
  position: relative;
  transform: translate(0, -50%);
  padding-left: 10px;
  font-size: 20px;
  height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 258px;
}

.anv-next-video-image {
  height: 74px;
  float: left;
}

.anv-next-video-title {
  text-align: center;
  font-size: 20px;
  height: 20px;
  padding-bottom: 5px;
  border-bottom: 1px solid #333;
  margin-bottom: 5px;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.anv-next-video-container {
  display: block;
  z-index: 2147483648;
  position: absolute;
  right: 0;
  bottom: 20%;
  width: 400px;
  height: 105px;
  background-color: rgba(0, 0, 0, 0.8);
  border: 1px solid #666;
  color: #FFF;
  padding: 5px;
  max-width: 500px;
}


.anv-caption-result-holder {
  text-align: left;
  display: inline-block;
  padding: 8px;

}

.anv-caption-result {
  display: inline-block;
  /*padding: 0 5px;*/
}

/* The bar displaying playback progress. This is the actual left-side sub-component of the seek bar that grows as
   playback proceeds. */
.anv-duration-bar {
  background: #ee3f25;
  float: left;
  /*-webkit-transition: width .3s; */
  /* Safari */
  /*transition: width .3s;*/
}

/* The overall seek bar container. This contains the duration bar and the scroll button. */
.anv-time-line {
  position: relative;
  width: calc(100% - 20px);
  height: 5px;
  padding-top: 5px;
  background-clip: content-box;
  pointer-events: all;
  margin-left: 10px;
}

.anv-time-line.disabled-seek {
  height: 2px !important;
  margin-top: 4px !important;
}

.anv-time-line:hover {
  height: 5px;
  /* padding-top: 2px; */
}

.anv-time-line:hover .anv-scroll-button-circle {
  width: 15px;
  height: 15px;
  /*top: 7px;*/
  display: block;
  background-color: red;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  /*box-shadow: .8px 1.4px #000;*/
}

.anv-time-line:hover .anv-ad-break {
  top: 5px;
  height: 5px;
}

.anv-time-line:hover .anv-recall-frame {
  bottom: 3px;
}

.anv-time-line-remaining {
  background: rgba(255, 255, 255, .2);
}

.anv-ad-break {
  border-left: 3px solid #fff;
  top: 5px;
  height: 5px;
}

/* The thumb/handle of the seek bar */
.anv-scroll-button {
  position: absolute;
  margin-left: -9px;
  margin-top: -8px;
  /*-webkit-transition: left .3s; */
  /* Safari */
  /*transition: left .3s;*/
  /*border-radius: 50%;*/
  /*height: 10px;*/
  /*width: 10px;*/
  /*background: rgba(235, 204, 52, 0.69);*/
  /*float: left;*/
  width: 20px;
  height: 20px;
  /*top: 7px;*/
  border-radius: 20px;
  -moz-border-radius: 20px;
  -webkit-border-radius: 20px;
}

.anv-scroll-button-circle {
  position: absolute;
  display: none;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  width: 12px;
  height: 12px;
  /*top: 7px;*/
  background-color: red;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
}

.anv-scroll-button-circle:hover {
  width: 20px;
  height: 20px;
  /*top: 7px;*/
  background-color: #fff;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  /*box-shadow: .8px 1.4px #000;*/
}

/* The share screen */
.anv-share {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: rgba(24, 26, 27, 0.95);
  color: #fff;
  z-index: 2147483648;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

@media all and (max-width: 549px) {
  .anv-share-panel {
    font-size: 7px;
  }
}
@media all and (max-width: 549px) and (min-width: 500px) {
  .anv-share-panel {
    font-size: 8px;
  }
}
@media all and (max-width: 649px) and (min-width: 550px) {
  .anv-share-panel {
    font-size: 10px;
  }
}
@media all and (max-width: 849px) and (min-width: 650px) {
  .anv-share-panel {
    font-size: 13px;
  }
}
@media all and (max-width: 1079px) and (min-width: 850px) {
  .anv-share-panel {
    font-size: 15px;
  }
}
@media all and (max-width: 1439px) and (min-width: 1080px) {
  .anv-share-panel {
    font-size: 18px;
  }
}
@media all and (min-width: 1440px) {
  .anv-share-panel {
    font-size: 20px;
  }
}

/* The actual central area of the share screen that contains the content */
.anv-share-panel {
  /* margin: auto; */
  width: 84%;
  height: 90%;
  max-width: 30em;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: font-size 250ms ease-in-out;
}

.anv-share-panel>*{
  width: 100%;
}

.anv-share-panel .anv-share-title {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  font-size: 1.6em;
  margin-bottom: 1.4em;
}

.anv-share-panel .anv-share-social-icons {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 2.4em;
  height: 3em;
}

.anv-share-panel .anv-share-social-icons>div:first-of-type {
  margin-left: 0px !important;
}

.anv-share-panel .anv-share-social-icons>div {
  pointer-events: all;
  margin-left: 0.7em;
  cursor: pointer;
}

.anv-share-panel .anv-share-social-icons>div>svg {
  height: 100%;
  width: auto;
}

.anv-share-panel .anv-share-content {
  display: flex;
  flex-direction: column;
  margin-bottom: 2.4em;
}

.anv-share-panel .anv-share-content>div {
  display: flex;
  flex-direction: row;
  margin-bottom: 1.2em;
}

.anv-share-panel .anv-share-content>div input {
  padding: 0.85em 1em;
  color: white;
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  font-size: 0.9em;
  border: none;
  border-radius: 0.1em;
  background-color: #46484B;
  flex-grow: 100;
}

.anv-share-panel .anv-share-content>div input:focus-visible {
  outline: none;
}

.anv-share-panel .anv-share-content>div button {
  width: 8em;
  background-color: transparent;
  color: white;
  border: none;
  cursor: pointer;
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  font-size: 0.9em;
}


.anv-share-panel .anv-share-content>div:last-child {
  margin-bottom: 0px;
}


/* This class is given to all buttons within the share screen */
.anv-share-btn {
  cursor: pointer;
  pointer-events: all;
}

/* This class is given to all text-based buttons within the share screen */
.anv-share-text-btn {
  color: #fff;
  background-color: #666;
  /*font-weight: bold;*/
  text-align: center;
  font-size: 0.6em;
  height: 26px;
  max-height: 28px;
  line-height: 26px;
  overflow: hidden;
}

.anv-no-touch .anv-share-text-btn:hover {
  color: #ee3f25;
}

.anv-share-text-btn,
.anv-share-input {
  border: 0px solid #444;
  border-radius: 6px;
  margin-bottom: 4%;
}

.anv-share-to-input,
.anv-share-from-input,
.anv-share-msg-input {
  padding-left: 2%;
  padding-right: 2%;
  width: 96%;
}

/* The share panel header */
.anv-share-title-label {
  height: 1.9em;
  line-height: 2em;
}

/* The text that describes the user's email status within the share screen */
.anv-share-send-status-label {
  height: 1em;
  color: rgba(246, 91, 91, 1);
  font-size: 0.9em;
}

.anv-share-content-panel {
  min-width: 278px;
}

/* The left section of the share panel */
.anv-share-left-panel {
  min-width: 120px;
  width: 47%;
}

/* The right section of the share panel */
.anv-share-right-panel {
  min-width: 150px;
}

/* The prompt for the email section in the share screen */
.anv-share-email-label {
  margin-bottom: 4%;
  font-size: 0.8em;
}

/* The to and from textboxes in the share screen */
.anv-share-to-input,
.anv-share-from-input {
  height: 26px;
}

/* The message textarea in the share screen */
.anv-share-msg-input {
  height: 50px;
}

/* The send button in the share screen */
.anv-share-send-btn {
  width: 80px;
  margin-right: 10px;
}

.anv-share-social-links-panel {
  margin-top: 7%;
  margin-bottom: 7%;
}

/* This class is given to the social media icon buttons within the share screen */
.anv-share-social-btn {
  display: inline-block;
  margin-left: 15px;
}

.anv-share-social-btn:first-child {
  margin-left: 0;
}

.anv-share-social-btn svg {
  display: inline-block;
  width: auto;
  height: 32px;
}

/* These are buttons used for closing the share and search screens */
.anv-search-close-btn,
.anv-notification-close-btn,
.anv-caption-set-close-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  cursor: pointer;
  width: 32px;
  height: 32px;
}


@media all and (max-width: 549px) {
  .anv-share-close-btn {
    font-size: 7px;
  }
}
@media all and (max-width: 549px) and (min-width: 500px) {
  .anv-share-close-btn {
    font-size: 8px;
  }
}
@media all and (max-width: 649px) and (min-width: 550px) {
  .anv-share-close-btn {
    font-size: 10px;
  }
}
@media all and (max-width: 849px) and (min-width: 650px) {
  .anv-share-close-btn {
    font-size: 13px;
  }
}
@media all and (max-width: 1079px) and (min-width: 850px) {
  .anv-share-close-btn {
    font-size: 15px;
  }
}
@media all and (max-width: 1439px) and (min-width: 1080px) {
  .anv-share-close-btn {
    font-size: 18px;
  }
}
@media all and (min-width: 1440px) {
  .anv-share-close-btn {
    font-size: 20px;
  }
}

.anv-share-close-btn {
  position: absolute;
  top: 2.1em;
  right: 2.1em;
  cursor: pointer;
  height: 0.9em;
}

.anv-search-close-btn svg,
.anv-notification-close-btn svg,
.anv-caption-set-close-btn svg {
  width: auto;
  height: 16px;
  margin: 8px;
}
.anv-share-close-btn svg{
  width: auto;
  height: 100%;
}


.anv-notification-close-btn {
  height: 32px;
}

/* The share screen Facebook icon button. This button is used to open Facebook for sharing this video in a new tab. */
.anv-facebook-btn {
  background-position: -319px -89px;
  width: 32px;
  height: 32px;
}

.anv-no-touch .anv-facebook-btn:hover {
  background-position: -319px -124px;
}

/* The share screen Google+ icon button. This button is used to open Google+ for sharing this video in a new tab. */
.anv-google-plus-btn {
  background-position: -253px -89px;
  width: 34px;
  height: 32px;
}

.anv-no-touch .anv-google-plus-btn:hover {
  background-position: -253px -124px;
}

/* The share screen Pinterest icon button. This button is used to open Pinterest for sharing this video in a new tab. */
.anv-pinterest-btn {
  background-position: -352px -89px;
  width: 32px;
  height: 32px;
}

.anv-no-touch .anv-pinterest-btn:hover {
  background-position: -352px -124px;
}

/* The share screen Twitter icon button. This button is used to open Twitter for sharing this video in a new tab. */
.anv-twitter-btn {
  width: 32px;
  height: 32px;

}

.anv-no-touch .anv-twitter-btn:hover {
  background-position: -287px -124px;
}

/* The link and embed textboxes in the share screen */
.anv-share-content-input,
.anv-share-embed-input {
  padding-left: 2%;
  padding-right: 2%;
  height: 1.2em;
}

/* The link and embed buttons in the share screen */
.anv-share-content-btn,
.anv-share-embed-btn {
  min-width: 5em;
  margin: 0 0.25em;

}

.anv-share-start-time-panel {
  font-size: 1em;
  margin-top: 0.25em;
  height: 2.1em;
  line-height: 1.3em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 1em;
}

.anv-share-input-area {
  font-size: 1em;
}

/* The playback start time prompt in the share screen */
.anv-share-start-time-prefix {
  font-size: 1em;
  margin-right: 0.6em;
}

.anv-share-start-time-button {
  font-size: 1em;
  text-decoration: underline;
}

.anv-share-start-time-input-button {
  font-size: 1em;
  margin-left: 0.5em;
  text-decoration: underline;
}

/* The playback start time textbox in the share screen */
.anv-share-start-time-input {
  max-width: 6em;
  margin-left: 0.2em;
  margin-bottom: 0;
  text-align: center;
  color: white;
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  font-size: 0.9em;
  border: none;
  border-radius: 0.1em;
  background-color: #46484B;
  padding: 0.4em 0.6em;
  outline: 1px solid rgba(246, 91, 91, 0);
}
.anv-share-start-time-input:focus-visible {
  border: none !important;
  outline: none;
}

/* The caption search screen */
.anv-search {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  margin: 0;
  width: 403px;
  height: 100%;
  background: rgba(24, 26, 27, 0.95);
  border-radius: 2px;
  color: #fff;
  display: flex;
  padding: 48px 0px 7.6px 0px;
  flex-direction: column;
  overflow: hidden;
  z-index: 2147483648;
}

.anv-search-container {
  position: relative;
  height: calc(100% - 130px);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}

.anv-search-matching-cue-container {
  display: flex;
  flex-direction: row;
  padding: 6px 23px 6px 23px;
  cursor: pointer;
}

.anv-search-matching-cue-container:hover {
  background-color: rgba(130, 130, 130, 0.4);
}

.anv-search-matching-cue-thumbnail {
  width: 80px;
  height: 46.4px;
  min-width: 80px;
  min-height: 46.4px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background-size: auto;
}

.anv-search-matching-cue-time {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-left: 12px;
  font-size: 14px;
}

.anv-search-matching-cue-text {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin-left: 12px;
  margin-right: 5px;
  width: 80px;
  height: 46.4px;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
}

.anv-search-status-text {
  margin: 10px 0 10px 0;
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  padding-left: 23px;
}

.anv-search-input {
  border: none;
  outline: 2px solid #3672AA;
  border-radius: 2px;
  height: 36px;
  width: 100%;
  padding-left: 14px;
}

.anv-search-icon {
  position: absolute;
  top: 9px;
  right: 14px;
}

/* The search icon shown within the search screen search query textbox */
.anv-search-icon svg {
  width: 18px;
  height: 18px;
}

.anv-search-icon svg * {
  fill: #707780;
}

/*video::-webkit-media-controls {*/
/*display:none !important;*/
/*}*/
/* This is triangle attached to the preview image container that indicates the location of the preview image on the
   seek bar */
.anv-time-label-tail {
  position: relative;
  left: 30px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid rgba(5, 4, 5, 0.69);
  z-index: 2147483648;
}

/* The slider preview container */
.anv-slider-preview {
  position: absolute;
  text-align: center;
  width: 100%;
  color: #fff;
  z-index: 2147483648;
}

/* The splash screen container */
.anv-splash {
  z-index: 2147483648;
}

/* The play button displayed over top of the splash screen */
.anv-splash-play-button {
  cursor: pointer;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 15%;
  height: 26.65%;
  overflow: hidden;
  z-index: 2147483648;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  pointer-events: all;
}

.anv-splash-play-button-img {
  position: absolute;

}

.anv-splash-cast-status {
  display: none;
  position: absolute;
  left: 30px;
  padding: 5%;
  bottom: 15%;
}

.anv-splash-mode-castScreen .anv-splash-cast-status {
  display: block;
}

.anv-splash-cast-load-button {
  display: none !important;
  right: 1% !important;
  bottom: 1% !important;
  position: absolute !important;
  width: 6%;
}

.anv-splash-mode-loadScreen .anv-splash-cast-load-button:not([status="none"]) {
  display: block !important;
  color: #fff !important;
  fill: rgba(255, 255, 255);
}

.anv-splash-cast-status-icon {
  display: inline-block !important;
  width: 50px !important;
  height: 44px !important;
}

.anv-splash-cast-status-icon svg * {
  fill: #eef8ff !important;
}

.anv-splash-cast-status-icon svg {
  width: 100% !important;
  height: 100% !important;
}

.anv-splash-cast-status-icon svg .cast-error {
  display: none !important;
}

.anv-control-playlist-badge {
  background-color: rgb(238, 63, 37);
  border-radius: 50%;
  height: 12px;
  width: 12px;
  position: relative;
  left: 20px;
  top: 5px;
}

.anv-control-playlist-badge-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
}

.anv-splash-cast-status-message-wrapper {
  display: inline-block;
  vertical-align: top;
  color: lightslategray;
  margin-left: 5px;
}

.anv-splash-cast-status-message {
  font-size: .8em;
}

.anv-splash-cast-status-receiver-name {
  font-size: 1.4em;
}

/* The container for the video title and description displayed over top of the splash screen */
.anv-splash-header {
  position: relative;
  height: 30%;
  zoom: 1;
  color: #fff;
  padding: 5% 5%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.anv-splash-bottom {
  position: absolute;
  height: 60%;
  zoom: 1;
  border: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  bottom: 0;
  left: 0;
  background: rgba(5, 4, 5, 0.42);
  background: none;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00050405', endColorstr='#D1050405', GradientType=0);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(5, 4, 5, 0)), to(rgba(5, 4, 5, 1)));
  background: -moz-linear-gradient(top, rgba(5, 4, 5, 0), rgba(5, 4, 5, 1));
}

.anv-splash-header-gradient {
  background: rgba(5, 4, 5, 0.42);
  background: none;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D1050405', endColorstr='#00050405', GradientType=0);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(5, 4, 5, 0.82)), to(rgba(5, 4, 5, 0)));
  /* for webkit browsers */
  background: -moz-linear-gradient(top, rgba(5, 4, 5, 0.82), rgba(5, 4, 5, 0));
  /* for firefox 3.6+ */
}

/* Information about the video displayed in the splash screen */
.anv-splash-info {
  color: #fff;
  width: 100%;
}

/* The title of the video displayed in the splash screen */

@media all and (max-width: 499px) {
  .anv-splash-title {
    font-size: 15px !important;
  }
}

@media all and (min-width: 500px) and (max-width: 1199px) {
  .anv-splash-title {
    font-size: 20px !important;
  }
}

@media all and (min-width: 1200px) {
  .anv-splash-title {
    font-size: 32px !important;
  }
}
.anv-splash-title {
  max-width: 70%;
}

.anv-splash-title-container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* The title of the video displayed in the splash screen */
.anv-splash-description {
  font-size: 1em;
  line-height: 1.7em;
}

@media all and (max-width: 499px) {
  .anv-splash-share {
    height: 18px !important;
  }
}

@media all and (min-width: 500px) and (max-width: 1199px) {
  .anv-splash-share {
    height: 28px !important;
  }
}

@media all and (min-width: 1200px) {
  .anv-splash-share {
    height: 44px !important;
  }
}
/* The Splash share button */
.anv-splash-share {
  cursor: pointer;
  height: 32px;
  pointer-events: all;
}

.anv-splash-share svg {
  height: 100%;
  width: auto;
  opacity: 0.9;
}

.anv-splash-share:hover svg {
  opacity: 1;
}

.anv-no-touch .anv-splash-share:hover>.anv-splash-share-svg * {
  opacity: 1;
}

.anv-splash-share:hover {
  /*background-position: -224px -28px;*/
}

/* The playlist panel video entry that is currently selected */
.anv-selected-playlist-item {
  background: rgba(130, 130, 130, 0.7);
}

.anv-splash-spinning-wheel {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 47px;
  height: 47px;
  z-index: 2147483649;
}

@-webkit-keyframes play {
  from {
    background-position: 0;
  }

  to {
    background-position: -752px;
  }
}

@-moz-keyframes play {
  from {
    background-position: 0;
  }

  to {
    background-position: -752px;
  }
}

@keyframes play {
  from {
    background-position: 0;
  }

  to {
    background-position: -752px;
  }
}

.anvVideoContent:-webkit-full-screen {
  width: 100%
}

.anvVideoContent:-moz-full-screen {
  width: 100%
}

.anvVideoContent:-ms-full-screen {
  width: 100%
}

.anvVideoContent:-o-full-screen {
  width: 100%
}

.anvVideoContent:full-screen {
  width: 100%
}

.anv-recommendation {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 2147483648;
  color: white;
}

.anv-recommendation-content {
  background: rgba(24, 26, 27, 1);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.anv-recommendation-background-poster {
  background-color: #000;
  background-size: cover;
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.anv-recommendation-background-poster-filter {
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  width: 100%;
}

.anv-recommendation-nav {
  cursor: pointer;
  display: none;
  position: absolute;
  top: 20%;
  width: 3%;
  height: 75%;
}

.anv-recommendation-nav-icon {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.anv-recommendation-nav-icon svg {
  height: 32px;
  width: auto;
}

.anv-recommendation-nav-icon svg * {
  stroke: #fff;
}

.anv-no-touch .anv-recommendation-nav-icon:hover svg * {
  stroke: rgba(255,255,255,0.8);
}

.anv-recommendation-prev {
  left: 0;
}

.anv-recommendation-next {
  right: 0;
}

.anv-recommendation-header {
  /*background: #1817c0;*/
  position: relative;
  height: 20%;
  display: flex;
  padding: 0% 3%;
  align-items: center;
}

.anv-recommendation-title {
  font-size: 1.7em;
  white-space: nowrap;
  max-width: calc(100% - 200px);
  overflow: hidden;
  text-overflow: ellipsis;
  float: left;
}

.anv-spacer {
  flex-grow: 100;
}

.anv-recommendation-main {
  display: flex;
  position: relative;
  height: 75%;
  overflow-x: hidden;
  overflow-y: hidden;
  width: 94%;
  justify-content: center;
  margin: 0 3%;
}

.anv-recommendation-up-next {
  display: none;
  position: absolute;
  left: 0;
  top: 50%;
  margin: 0;
  text-align: center;
  transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  width: 100%;

}

.anv-recommendation-up-next-title {
  font-weight: 600;
  font-size: 1.3em;
  margin: 10px 0;
  padding: 0 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.anv-recommendation-up-next-play {
  cursor: pointer;
  display: none;
  font-weight: 600;
}

@media only screen and (max-width: 430px) {
  .anv-volume-slider-btn {
    display: none !important;
  }
}

@media only screen and (max-width: 500px) {
  .anv-recommendation-background-poster {
    display: block;
  }

  .anv-recommendation-small-content {
    display: block;
  }

  .anv-recommendation-nav-icon {
    display: none;
  }

  .anv-recommendation-title {
    font-size: 1.3em;
  }

  .anv-recommendation-main {
    display: none;
  }

  .anv-recommendation-up-next {
    display: block;
  }

  .anv-chromecast-button {
    display: none;
  }
}

.anv-recommendation-columns {
  position: absolute;
  height: 100%;
  max-height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

/* .anv-recommendation-columns:has(> :nth-child(-n+2):last-child) {
  justify-content: flex-start;
} */

.anv-recommendation-column {
  height: 100%;
  /*background: #1718ff;*/
  float: left;
  /*padding: 5px;*/
  /*margin: 1px;*/
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-right: 1.75em;
}
.anv-recommendation-column:last-of-type {
  margin-right: 0;
}

.anv-recommendation-frame {
  position: relative;
  width: 100%;
  border-radius: 3px;
  opacity: 1.0;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  overflow: hidden;
}

.anv-recommendation-frame:hover {
  /*background: #ee3f25;*/
}

.anv-no-touch .anv-recommendation-frame:hover .anv-recommendation-info {
  display: block;

}

.anv-no-touch .anv-recommendation-info {
  display: none;
}

.anv-recommendation-info {
  cursor: pointer;
  position: absolute;
  top: 0;
  padding: 0 5%;
  width: 90%;
  /*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(5, 4, 5, 0.82)', endColorstr='rgba(5, 4, 5, 0)');  for IE*/
  /*background: -webkit-gradient(linear, left bottom, right bottom, from(rgba(5, 4, 5, 0.82)), to(rgba(5, 4, 5, 0)));  for webkit browsers*/
  /*background: -moz-linear-gradient(left,  rgba(5, 4, 5, 0.82),  rgba(5, 4, 5, 0));  for firefox 3.6+*/
  background: linear-gradient(0deg, rgba(24, 26, 27, 0) 0%, rgba(24, 26, 27, 0.3) 34.38%, rgba(24, 26, 27, 0.56) 62.07%, rgba(24, 26, 27, 0.74) 93.32%);;
  color: #fff;
}


.anv-recommendation-info-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  width: 100%;
  font-size: 1em;
  font-weight: 400;
  margin-bottom: 0.625em;
}

.anv-recommendation-info-desc {
  /* width: 100%;
  visibility: hidden;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.7em;
  text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000; */
  display: none;
}
@media all and (max-width: 600px) {
  .anv-recommendation-info-title {
    margin: 0;
    font-size: 0.9em !important;
  }
  .anv-recommendation-info-timer {
    font-size: 0.7em !important;
  }
}
.anv-recommendation-info-timer {
  color: white;
  margin-top: 0;
  font-size: 0.9em;
  font-weight: 300;
}

.anv-recommendation-item {
  /* position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 10px;
  margin: auto 0; */
  margin-bottom: 1.75em;
}

.anv-recommendation-thumbnail {
  margin: auto;
  width: 100%;
  height: 100%;
}

.anv-recommendation-share {
  float: right;
  margin: 3%;
  cursor: pointer;
  margin-right: 0px;
}

.anv-recommendation-replay {
  float: right;
  margin: 3% 0;
  cursor: pointer;
}

.anv-recommendation-share svg,
.anv-recommendation-replay svg {
  width: auto;
  height: 1.7em;
}

.anv-recommendation-share svg *,
.anv-recommendation-replay svg * {
  fill: rgba(255,255,255,1);
}

.anv-no-touch .anv-recommendation-share:hover svg *,
.anv-no-touch .anv-recommendation-replay:hover svg * {
  fill: rgba(255,255,255,0.8);
}

.anv-recommendation-fade {
  opacity: 0.0;
}

.anv-no-touch .anv-recommendation-replay:hover {
  background-position: -415px -32px;
}

.anv-recall-frame {
  bottom: 0;
  padding: 0 5px;
  width: 50px;
  z-index: 2147483648;
}

.anv-recall-time {
  /*position: absolute;*/
  text-align: center;
  width: auto;
  padding: 4px;
  height: 15px;
  font-size: 0.8em;
  background: rgba(34, 34, 34, .95);

  /*bottom: 25px;*/
}

.anv-recall-tail {
  position: relative;
  left: 20px;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid rgba(34, 34, 34, 0.95);
}

.anv-recall-line {
  width: 24px;
  border-right: solid 2px #fff;
  height: 15px;
}

.anv-live-btn {
  /*width:20%;*/
  margin-right: 10px;
  float: left;
  justify-content: center;
  align-items: center;
}

.anv-live-label {
  font-size: 0.9em;
  line-height: 30px;
  text-align: left;
  float: left;
  margin-top: 2px;
  margin-left: 3px;
  color: #fff;
}

.anv-live-mark {
  font-size: 1.5em;
  line-height: 28px;
  float: left;
  margin-top: 2px;
}

html {
  -webkit-touch-callout: none !important;
}

body {
  -webkit-touch-callout: none !important;
}

.anv-caption-set {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  margin: auto;
  background: rgba(34, 34, 34, 0.8);
  color: white;
  border-radius: 5px;
  font-family: arial;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  z-index: 2147483648;
}

.anv-caption-set-header {
  height: 20%;
  width: 80%;
  max-width: 500px;
  max-height: 250px;
  margin: 0 auto;
  line-height: 5em;
}

.anv-caption-set-content {
  height: 50%;
  min-height: 145px;
  max-width: 500px;
  max-height: 250px;
  width: 80%;
  margin: 0 auto;
}

.anv-caption-set-main {
  width: 50%;
  height: 100%;
  float: left;
  /*background: #193;*/
}

.anv-caption-set-advanced {
  width: 45%;
  float: left;
  margin-left: 5%;
  height: 100%;
}

.anv-overlay-close-btn svg {
  height: 14px;
  padding: 2px;
  width: auto;
}

.anv-overlay-close-btn {
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 0;
}

.anv-caption-set-main-row {
  height: 25%;
  width: 100%;
}

.anv-caption-set-main-half {
  width: 48%;
  min-width: 110px;
}

.anv-caption-set-advanced-row {
  /*border: solid 1px #000;*/
  height: 25%;
  width: 100%;
}

.anv-caption-set-narrow-row {
  height: 20%;
  width: 100%;
}

.anv-caption-set-expand-button {
  font-size: 0.8em;
}

.anv-caption-set-advanced-panel {
  height: 85%;
  width: 100%;
}

.anv-caption-set-result-frame {
  min-height: 30%;
  height: auto;
  width: 100%;
  float: left;
  overflow: hidden;
  text-align: center;
}

.anv-caption-set-result-holder {
  display: inline-block;
  padding: 8px;
  height: auto;
  overflow: hidden;
  text-align: center;
}

.anv-caption-set-result {
  /*line-height: 2em;*/
  display: inline-block;
  /*margin: 10px auto;*/
  /*padding: 0 5px;*/
}

.anv-caption-set-row-label {
  color: white;
  font-size: .75em;
  height: 2em;
  line-height: 32px;
  vertical-align: middle;
  padding: 0 5px 0 0;
}

input[type="checkbox"] {
  margin: 0 4px 0 0;
}

.anv-caption-set-check-label {
  font-size: 0.75em;
  vertical-align: top;
  color: white;
}

.anv-check-holder {
  margin-right: 25px;
}

.anv-caption-set-select {
  /*-webkit-appearance: menulist-button;*/
  /*-moz-appearance: menulist-button;*/
  height: 28px;
  background: #fff;
  /*width: 68px;*/
  padding: 0 5px;
  text-align: center;
  /*font-size: 16px;*/
  /*line-height: 1;*/
  border: solid 2px rgb(132, 132, 132);
  border-radius: 5px;
  height: 28px;
  text-indent: 0.01px;
  text-overflow: '';
  -webkit-appearance: none;
  -moz-appearance: none;
  max-width: 50%;
}

.anv-color-picker-item {
  float: left;
}

.anv-left {
  float: left;
}

.anv-right {
  float: right;
}

.anv-color-picker {
  background: #444444;
  border-radius: 4px;
}

.anv-caption-set-color-box {
  position: relative;
  background: #fff;
  width: 26px;
  height: 26px;
  border: solid 2px rgb(132, 132, 132);
  border-radius: 4px;

}

.anv-select-corner {
  position: absolute;
  bottom: -1px;
  right: -2px;
  width: 10px;
  height: 10px;
  background: rgb(132, 132, 132);
  border-bottom-right-radius: 4px;
}

.anv-select-triangle {
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 6px solid #000;
  margin: 2px;
}

.anv-slate {
  position: absolute;
  top: 0;
  width: 640px;
  height: 360px;
  color: #fff;
  background: #000000;
  display: none;
  z-index: 2147483649;
}

.anv-slate-frame {
  width: 96%;
  position: absolute;
  margin: auto;
  top: 0;
  left: 2%;
  bottom: 0;
  right: 2%;
  display: inline-block;
  vertical-align: middle;
}

.anv-slate-animation {
  position: relative;
  max-width: 200px;
  width: 25%;
  height: 100%;
  display: inline-block;
  vertical-align: super;
}

.anv-slate-message-frame {
  display: inline-block;
  height: 100%;
  padding-left: 3%;
  width: 70%;
  vertical-align: top;
}

.anv-slate-message {
  line-height: 50px;
  font-family: Arial, sans-serif;
  color: #606060;
  vertical-align: middle;
  font-size: 3.5vw;
  display: inline-block;
}

.anv-slate-message-frame:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.anv-slate-outer {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 2147483649;
  -webkit-animation: anv-cv 3.6s infinite linear;
  -moz-animation: anv-cv 3.6s infinite linear;
  animation: anv-cv 3.6s infinite linear;
}

.anv-slate-inner svg,
.anv-slate-outer svg {
  width: 100%;
  height: 100%;
}

@keyframes anv-cv {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

@-webkit-keyframes anv-cv {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(359deg);
  }
}

@-moz-keyframes anv-cv {
  from {
    -moz-transform: rotate(0deg);
  }

  to {
    -moz-transform: rotate(359deg);
  }
}

@keyframes anv-ccv {
  to {
    transform: rotate(0deg);
  }

  from {
    transform: rotate(359deg);
  }
}

@-webkit-keyframes anv-ccv {
  to {
    -webkit-transform: rotate(0deg);
  }

  from {
    -webkit-transform: rotate(359deg);
  }
}

@-moz-keyframes anv-ccv {
  to {
    -moz-transform: rotate(0deg);
  }

  from {
    -moz-transform: rotate(359deg);
  }
}

.anv-slate-inner {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 50%;
  padding-bottom: 25%;
  padding-top: 25%;
  z-index: 2147483649;
  -webkit-animation: anv-ccv 3.6s infinite linear;
  -moz-animation: anv-ccv 3.6s infinite linear;
  animation: anv-ccv 3.6s infinite linear;
}

/*styling for subscriber authentication*/
.anv-login-dialog {
  font-family: Arial, sans-serif;
  margin: auto;
  width: 260px;
  height: 200px;
  position: absolute;
  top: 0;
  bottom: 40px;
  left: 0;
  right: 0;
}

.anv-login-error {
  color: red;
  height: 28px;
  font-size: 14px;
  line-height: 14px;
  margin: 10px 0;
}

.anv-full-width {
  width: 100%;
  max-width: 260px;
  display: block;
  margin-bottom: 10px;
}

.anv-row-item {
  margin-right: 10px;
}

.anv-purchase,
.anv-login {
  -moz-box-shadow: inset 0px 1px 0px 0px #f5978e;
  -webkit-box-shadow: inset 0px 1px 0px 0px #f5978e;
  box-shadow: inset 0px 1px 0px 0px #f5978e;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f24537), color-stop(1, #c62d1f));
  background: -moz-linear-gradient(center top, #f24537 5%, #c62d1f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f24537', endColorstr='#c62d1f');
  background-color: #f24537;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-indent: 0;
  border: 1px solid #d02718;
  display: inline-block;
  color: #ffffff;
  font-size: 15px;
  font-weight: bold;
  font-style: normal;
  height: 40px;
  line-height: 40px;
  width: 100px;
  text-decoration: none;
  text-align: center;
  text-shadow: 1px 1px 0px #810e05;
}

.anv-purchase:active,
.anv-login:active {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #c62d1f), color-stop(1, #f24537));
  background: -moz-linear-gradient(center top, #c62d1f 5%, #f24537 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c62d1f', endColorstr='#f24537');
  background-color: #c62d1f;
}

.anv-forgot {
  text-decoration: none;
  color: rgb(64, 153, 255);
  font-size: .9em;
}

.anv-ad-timer-wrapper {
  position: absolute;
  z-index: 999999999999999999;
  color: #fff;
  padding: 1.5%;
  width: 100%;
  box-sizing: border-box;
  pointer-events: none;
}

.anv-ad-timer-wrapper-gradient {
  background: rgba(5, 4, 5, 0.42);
  background: none;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D1050405', endColorstr='#00050405', GradientType=0);
  zoom: 1;
  background: -moz-linear-gradient(top, rgba(5, 4, 5, 0.82), rgba(5, 4, 5, 0));
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(5, 4, 5, 0.819608)), to(rgba(5, 4, 5, 0)));
  background: linear-gradient(to bottom, rgba(5, 4, 5, 0.81960784313725), rgba(5, 4, 5, 0.0));
}

.anv-learn-more {
  display: none;
  background: rgba(0, 0, 0, .8);
  border: 1px solid #eee;
  color: #fff;
  float: right;
  padding: 1%;
  pointer-events: all;
  cursor: pointer;
  z-index: 99999999999999999999999;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.anv-skip-ad-button {
  position: absolute;
  /*right: 0;*/
  /*top: 60%;*/
  background: rgba(0, 0, 0, .8);
  border: 1px solid #eee;
  padding: 1%;
  background: #000;
  color: #fff;
  cursor: pointer;
  z-index: 999999999999999999;
}

.anv-notification-dialog {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  color: #fff;
  background: rgba(0, 0, 0, .9);
  display: none;
  font-family: arial, sans-serif;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  z-index: 2147483649;
}

.anv-notification-dialog-content {
  display: inline-block;
  height: 30%;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  padding: 5%;
  font-size: 5vh;
  line-height: 7.5vh;
}

.anv-notification-dialog-content>a {
  color: white;
}

.anv-notification-button {
  position: absolute;
  top: 20px;
  right: 20px;
  height: 28px;
  color: #000000;
  display: none;
  z-index: 2147483649;
  cursor: pointer;
}

.anv-video-container-caption {
  position: absolute;
  pointer-events: none;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  z-index: 2147483648;
  /*background: rgba(16, 221, 235, 0.68);*/
  width: 100%;
  height: 100%;
  color: #fff;
  /*border: solid 1px #fff;*/
}

.anv-caption-608-frame {
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  pointer-events: none;
  /*margin-left: 12.5%;*/
  /*margin-right: 12.5%;*/
}

.anv-caption-608-frame-line {
  font-family: Courier, monospace;
}

.anv-caption-608-frame-line-char {
  display: inline-block;
  visibility: hidden;
  vertical-align: bottom;
}

.anv-autoplay-toggle-holder {
  position: absolute;
  right: 50px;
  top: 16px;
  font-size: 11px;
}

.anv-autoplay-toggle {
  border-radius: 5px;
  width: 25px;
  height: 10px;
  background-color: #888;
  float: right;
  margin-left: 5px;
  position: relative;
  cursor: pointer;
}

.anv-autoplay-toggle:before {
  position: absolute;
  content: '';
  top: -10px;
  right: -10px;
  left: -10px;
  bottom: -10px;
  cursor: pointer;
}

.anv-autoplay-toggle-inner-segment {
  position: relative;
  border-radius: 5px;
  width: 10px;
  height: 10px;
  background-color: #FFF;
  transition: left 0.2s;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


.anv-splash-play-button svg {
  width: 100%;
  height: 100%;
}

.anv-splash-play-button>.anv-splash-play-button-svg * {
  fill: rgba(255, 255, 255, 1);
}

.anv-no-touch .anv-splash-play-button>.anv-splash-play-button-svg * {
  fill: rgba(255, 255, 255, 0.8);
}

.anv-splash-play-button:hover>.anv-splash-play-button-svg * {
  fill: rgba(255, 255, 255, 1);
}

.anv-splash-share>.anv-splash-share-svg * {
  fill: #ffffff;
}

.anv-play-pause-btn.anv-control-btn[data-anv-title]:after {
  transform: translateX(-16px);
}

.anv-subtitles-btn.anv-control-btn[data-anv-title]:after {
  transform: translateX(min(calc(-100% + 100px), calc(-50% + 12px)));
}

.anv-picture-in-picture-btn.anv-control-btn[data-anv-title]:after {
  transform: translateX(min(calc(-100% + 110px), calc(-50% + 12px)));
}

.anv-fullscreen-btn.anv-control-btn[data-anv-title]:after {
  transform: translateX(calc(-100% + 40px));
}
@media (hover: none) {
  .anv-control-btn[data-anv-title]:after {
    display: none !important;
  }
}
.anv-control-btn[data-anv-title]:after {
  content: attr(data-anv-title);
  display: none;
  top: -20px;
  background-color: black;
  text-align: center;
  border-radius: 3px;
  padding: 4px 10px;
  position: absolute;
  color: #dadada;
  white-space: nowrap;
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 600;
  font-size: 11px;
  line-height: 16px;
  transform: translateX(calc(-50% + 8px));
}

.show-anv-data-title .anv-control-btn[data-anv-title]:hover:after {
  display: block;
}

.anv-control-btn>svg * {
  fill: #fff;
}

.anv-control-btn.disabled>svg * {
  fill: #8b8e93 !important;
}

@media all and (max-width: 499px) {
  .anv-control-btn>svg {
    height: 16px !important;
  }
}

@media all and (min-width: 500px) and (max-width: 1199px) {
  .anv-control-btn>svg {
    height: 18px !important;
  }
}

@media all and (min-width: 1200px) {
  .anv-control-btn>svg {
    height: 24px !important;
  }
}
.anv-control-btn>svg {
  height: 18px;
  width: auto;
  margin: 6px auto;
}

.anv-control-btn:hover>svg * {
  fill: #fff;
}

.anv-play-pause-btn[on=true] .pause,
.anv-play-pause-btn[on=false] .play {
  display: none;
}

.anv-volume-icon-btn {
  padding-right: 0;
}

/* This class is given to the volume icon button when the volume level is at 0 */
.anv-volume-icon-btn[on=false] .low,
.anv-volume-icon-btn[on=false] .medium,
.anv-volume-icon-btn[on=false] .high {
  display: none
}

.anv-volume-icon-off-btn:hover,
.anv-volume-icon-btn[on=false]:hover {}

/* This class is given to the volume icon button when the volume level is between 0 and 1/3 */
.anv-volume-icon-low-btn[on=true] .low {
  display: block;
}

.anv-volume-icon-low-btn[on=true] .medium,
.anv-volume-icon-low-btn[on=true] .high {
  display: none;
}

.anv-volume-icon-med-btn[on=true] .high {
  display: none;
}

.anv-volume-icon-med-btn[on=true] .low,
.anv-volume-icon-med-btn[on=true] .medium {
  display: block;
}

.anv-volume-icon-high-btn[on=true] .low,
.anv-volume-icon-high-btn[on=true] .medium,
.anv-volume-icon-high-btn[on=true] .high {
  display: block;
}

.anv-volume-icon-off-btn[on=true] .low,
.anv-volume-icon-off-btn[on=true] .medium,
.anv-volume-icon-off-btn[on=true] .high {
  display: none;
}

.anv-no-touch .anv-volume-icon-high-btn[on=true]:hover {
  background-position: -66px -33px;
}

.anv-fullscreen-btn[on=false]>.anv-fullscreen-btn-svg .normal {
  display: none;
}

.anv-no-touch .anv-fullscreen-btn[on=false]:hover>.anv-fullscreen-btn-svg .normal {
  display: none;
  fill: #ee3f25;
}

.anv-fullscreen-btn[on=false]>.anv-fullscreen-btn-svg .fullscreen {
  display: block;
}

.anv-fullscreen-btn[on=true]>.anv-fullscreen-btn-svg .normal {
  display: block;
}

.anv-no-touch .anv-fullscreen-btn[on=true]:hover>.anv-fullscreen-btn-svg .normal {
  display: block;
  fill: #ee3f25;
}

.anv-fullscreen-btn[on=true]>.anv-fullscreen-btn-svg .fullscreen {
  display: none;
}

.anv-share-social-btn>.anv-share-social-btn-svg * {
  fill: #fff;
}

.anv-no-touch .anv-share-social-btn:hover>.anv-share-social-btn-svg * {
  fill: #ee3f25;
}

.anv-share-close-btn svg *,
.anv-search-close-btn svg *,
.anv-notification-close-btn svg *,
.anv-caption-set-close-btn svg *,
.anv-overlay-close-btn svg * {
  fill: #fff;
}

.anv-search-input-container {
  position: relative;
  margin-right: 23px;
  margin-left: 23px;
}

.anv-search-close-btn {
  width: 12px;
  height: 12px;
  position: absolute;
  top: 19px;
  right: 23px;
}

.anv-search-close-btn svg {
  width: 12px;
  height: 12px;
  margin: 0;
}

.anv-no-touch .anv-share-close-btn:hover svg *,
.anv-no-touch .anv-search-close-btn:hover svg *,
.anv-no-touch .anv-notification-close-btn:hover svg *,
.anv-no-touch .anv-caption-set-close-btn:hover svg *,
.anv-no-touch .anv-overlay-close-btn:hover svg * {
  fill: rgba(255,255,255,0.8);
}

/* Spining wheel */


.anv-splash-spinning-wheel svg {
  animation: rotate 2s linear infinite;
  position: relative;
}

.anv-splash-spinning-wheel.ie11 svg {
  animation: rotate 1s linear infinite;
}


.anv-splash-spinning-wheel svg .path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  animation: dash 1.5s ease-in-out infinite;
  stroke-linecap: square;
  stroke: #fff;
}

.anv-splash-spinning-wheel.ie11 svg .path {
  animation: none;
  stroke-dasharray: 30, 200;
}

.anv-splash-spinning-wheel svg .guide {
  display: none;
}

.anv-splash-spinning-wheel.ie11 svg .guide {
  display: block;
  stroke: #6b6a6b;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35;
  }

  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -124;
  }
}


.anv-control-menu-button {
  border: none;
  background-color: transparent;
  padding: 0;
  color: inherit;
  text-align: inherit;
  font-size: 100%;
  font-family: inherit;
  cursor: default;
  line-height: inherit
}

.anv-control-menu-button,
.anv-control-menu-button:focus {
  outline: 0
}

.anv-control-menu-button::-moz-focus-inner {
  padding: 0;
  border: 0
}

.anv-control-menu-button:not([aria-disabled=true]):not([disabled]):not([aria-hidden=true]) {
  cursor: pointer
}

.anv-control-menu-svg-fill {
  fill: #fff
}

@-webkit-keyframes anv-control-menu-party-background-color {
  0% {
    background-color: red
  }

  20% {
    background-color: #0f0
  }

  40% {
    background-color: #00f
  }

  60% {
    background-color: #f0f
  }

  80% {
    background-color: #ff0
  }

  to {
    background-color: #0ff
  }
}

@keyframes anv-control-menu-party-background-color {
  0% {
    background-color: red
  }

  20% {
    background-color: #0f0
  }

  40% {
    background-color: #00f
  }

  60% {
    background-color: #f0f
  }

  80% {
    background-color: #ff0
  }

  to {
    background-color: #0ff
  }
}

@-webkit-keyframes anv-control-menu-party-color {
  0% {
    color: red
  }

  20% {
    color: #0f0
  }

  40% {
    color: #00f
  }

  60% {
    color: #f0f
  }

  80% {
    color: #ff0
  }

  to {
    color: #0ff
  }
}

@keyframes anv-control-menu-party-color {
  0% {
    color: red
  }

  20% {
    color: #0f0
  }

  40% {
    color: #00f
  }

  60% {
    color: #f0f
  }

  80% {
    color: #ff0
  }

  to {
    color: #0ff
  }
}

@-webkit-keyframes anv-control-menu-party-fill {
  0% {
    fill: red
  }

  20% {
    fill: #0f0
  }

  40% {
    fill: #00f
  }

  60% {
    fill: #f0f
  }

  80% {
    fill: #ff0
  }

  to {
    fill: #0ff
  }
}

@keyframes anv-control-menu-party-fill {
  0% {
    fill: red
  }

  20% {
    fill: #0f0
  }

  40% {
    fill: #00f
  }

  60% {
    fill: #f0f
  }

  80% {
    fill: #ff0
  }

  to {
    fill: #0ff
  }
}

@media print {

  :not(.anv-control-menu-mweb-player) .anv-control-menu-title,
  :not(.anv-control-menu-mweb-player) .anv-control-menu-title * {
    color: #000 !important;
    visibility: visible !important
  }
}

.anv-control-menu-back-button {
  margin-left: 4px;
  margin-top: 2px
}

@-webkit-keyframes anv-control-menu-bezel-fadeout {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: scale(2);
    transform: scale(2)
  }
}

@keyframes anv-control-menu-bezel-fadeout {
  0% {
    opacity: 1
  }

  to {
    opacity: 0;
    -webkit-transform: scale(2);
    transform: scale(2)
  }
}

@-webkit-keyframes anv-control-menu-title-channel-fade-in {
  0% {
    background-color: transparent;
    border-radius: 25px;
    max-width: 10%
  }

  25% {
    background-color: rgba(35, 35, 35, .9)
  }

  75% {
    border-radius: 25px 4px 4px 25px;
    max-width: 100%
  }
}

@keyframes anv-control-menu-title-channel-fade-in {
  0% {
    background-color: transparent;
    border-radius: 25px;
    max-width: 10%
  }

  25% {
    background-color: rgba(35, 35, 35, .9)
  }

  75% {
    border-radius: 25px 4px 4px 25px;
    max-width: 100%
  }
}

@-webkit-keyframes anv-control-menu-title-channel-fade-out {
  0% {
    background-color: rgba(35, 35, 35, .9);
    border-radius: 25px 4px 4px 25px;
    width: 500px
  }

  75% {
    background-color: rgba(35, 35, 35, .9);
    border-radius: 25px;
    width: 50px
  }
}

@keyframes anv-control-menu-title-channel-fade-out {
  0% {
    background-color: rgba(35, 35, 35, .9);
    border-radius: 25px 4px 4px 25px;
    width: 500px
  }

  75% {
    background-color: rgba(35, 35, 35, .9);
    border-radius: 25px;
    width: 50px
  }
}

@-webkit-keyframes anv-control-menu-title-channel-fade-in-big-mode {
  0% {
    background-color: transparent;
    border-radius: 35px;
    max-width: 15%
  }

  25% {
    background-color: rgba(35, 35, 35, .9)
  }

  75% {
    border-radius: 35px 4px 4px 35px;
    max-width: 100%
  }
}

@keyframes anv-control-menu-title-channel-fade-in-big-mode {
  0% {
    background-color: transparent;
    border-radius: 35px;
    max-width: 15%
  }

  25% {
    background-color: rgba(35, 35, 35, .9)
  }

  75% {
    border-radius: 35px 4px 4px 35px;
    max-width: 100%
  }
}

@-webkit-keyframes anv-control-menu-title-channel-fade-out-big-mode {
  0% {
    background-color: rgba(35, 35, 35, .9);
    border-radius: 35px 4px 4px 35px;
    width: 500px
  }

  75% {
    background-color: rgba(35, 35, 35, .9);
    border-radius: 35px;
    width: 70px
  }
}

@keyframes anv-control-menu-title-channel-fade-out-big-mode {
  0% {
    background-color: rgba(35, 35, 35, .9);
    border-radius: 35px 4px 4px 35px;
    width: 500px
  }

  75% {
    background-color: rgba(35, 35, 35, .9);
    border-radius: 35px;
    width: 70px
  }
}

@-webkit-keyframes anv-control-menu-title-expanded-fade-in {
  0% {
    opacity: 0
  }

  25% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes anv-control-menu-title-expanded-fade-in {
  0% {
    opacity: 0
  }

  25% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@-webkit-keyframes anv-control-menu-title-expanded-fade-out {
  0% {
    opacity: 1
  }

  25% {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

@keyframes anv-control-menu-title-expanded-fade-out {
  0% {
    opacity: 1
  }

  25% {
    opacity: 1
  }

  to {
    opacity: 0
  }
}

@-webkit-keyframes anv-control-menu-title-beacon-pulse {
  0% {
    background: #000;
    width: 40px;
    height: 40px;
    left: 5px;
    top: 5px
  }

  50% {
    background: 0 0;
    width: 50px;
    height: 50px;
    left: 0;
    top: 0
  }
}

@keyframes anv-control-menu-title-beacon-pulse {
  0% {
    background: #000;
    width: 40px;
    height: 40px;
    left: 5px;
    top: 5px
  }

  50% {
    background: 0 0;
    width: 50px;
    height: 50px;
    left: 0;
    top: 0
  }
}

@-webkit-keyframes arrow-fade-out-1 {
  0% {
    opacity: 0
  }

  17% {
    opacity: .9
  }

  33% {
    opacity: .6
  }

  50% {
    opacity: .3
  }

  67% {
    opacity: .3
  }

  83% {
    opacity: .3
  }

  to {
    opacity: 0
  }
}

@keyframes arrow-fade-out-1 {
  0% {
    opacity: 0
  }

  17% {
    opacity: .9
  }

  33% {
    opacity: .6
  }

  50% {
    opacity: .3
  }

  67% {
    opacity: .3
  }

  83% {
    opacity: .3
  }

  to {
    opacity: 0
  }
}

@-webkit-keyframes arrow-fade-out-2 {
  0% {
    opacity: 0
  }

  17% {
    opacity: .3
  }

  33% {
    opacity: .9
  }

  50% {
    opacity: .6
  }

  67% {
    opacity: .3
  }

  83% {
    opacity: .3
  }

  to {
    opacity: 0
  }
}

@keyframes arrow-fade-out-2 {
  0% {
    opacity: 0
  }

  17% {
    opacity: .3
  }

  33% {
    opacity: .9
  }

  50% {
    opacity: .6
  }

  67% {
    opacity: .3
  }

  83% {
    opacity: .3
  }

  to {
    opacity: 0
  }
}

@-webkit-keyframes arrow-fade-out-3 {
  0% {
    opacity: 0
  }

  17% {
    opacity: .3
  }

  33% {
    opacity: .3
  }

  50% {
    opacity: .9
  }

  67% {
    opacity: .6
  }

  83% {
    opacity: .3
  }

  to {
    opacity: 0
  }
}

@keyframes arrow-fade-out-3 {
  0% {
    opacity: 0
  }

  17% {
    opacity: .3
  }

  33% {
    opacity: .3
  }

  50% {
    opacity: .9
  }

  67% {
    opacity: .6
  }

  83% {
    opacity: .3
  }

  to {
    opacity: 0
  }
}

@-webkit-keyframes grow-circle {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0)
  }

  to {
    -webkit-transform: scale(1) translateY(-25%);
    transform: scale(1) translateY(-25%)
  }
}

@keyframes grow-circle {
  0% {
    -webkit-transform: scale(0);
    transform: scale(0)
  }

  to {
    -webkit-transform: scale(1) translateY(-25%);
    transform: scale(1) translateY(-25%)
  }
}

@-webkit-keyframes anv-control-menu-equalizer-animation {
  0% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1)
  }

  50% {
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5)
  }

  to {
    -webkit-transform: scaleY(1);
    transform: scaleY(1)
  }
}

@keyframes anv-control-menu-equalizer-animation {
  0% {
    -webkit-transform: scaleY(1);
    transform: scaleY(1)
  }

  50% {
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5)
  }

  to {
    -webkit-transform: scaleY(1);
    transform: scaleY(1)
  }
}

@-webkit-keyframes anv-control-menu-fullscreen-button-corner-0-animation {
  50% {
    -webkit-transform: translate(-1px, -1px);
    transform: translate(-1px, -1px)
  }
}

@keyframes anv-control-menu-fullscreen-button-corner-0-animation {
  50% {
    -webkit-transform: translate(-1px, -1px);
    transform: translate(-1px, -1px)
  }
}

@-webkit-keyframes anv-control-menu-fullscreen-button-corner-1-animation {
  50% {
    -webkit-transform: translate(1px, -1px);
    transform: translate(1px, -1px)
  }
}

@keyframes anv-control-menu-fullscreen-button-corner-1-animation {
  50% {
    -webkit-transform: translate(1px, -1px);
    transform: translate(1px, -1px)
  }
}

@-webkit-keyframes anv-control-menu-fullscreen-button-corner-2-animation {
  50% {
    -webkit-transform: translate(1px, 1px);
    transform: translate(1px, 1px)
  }
}

@keyframes anv-control-menu-fullscreen-button-corner-2-animation {
  50% {
    -webkit-transform: translate(1px, 1px);
    transform: translate(1px, 1px)
  }
}

@-webkit-keyframes anv-control-menu-fullscreen-button-corner-3-animation {
  50% {
    -webkit-transform: translate(-1px, 1px);
    transform: translate(-1px, 1px)
  }
}

@keyframes anv-control-menu-fullscreen-button-corner-3-animation {
  50% {
    -webkit-transform: translate(-1px, 1px);
    transform: translate(-1px, 1px)
  }
}

@-webkit-keyframes background-fade {
  0% {
    background: rgba(0, 0, 0, .8)
  }

  to {
    background: rgba(0, 0, 0, .3)
  }
}

@keyframes background-fade {
  0% {
    background: rgba(0, 0, 0, .8)
  }

  to {
    background: rgba(0, 0, 0, .3)
  }
}

.anv-control-menu-menuitem {
  display: table-row;
  cursor: default
}

.anv-control-menu-menuitem:not([aria-disabled=true]) {
  cursor: pointer
}

.anv-control-menu-menuitem-content,
.anv-control-menu-menuitem-icon,
.anv-control-menu-menuitem-label {
  display: table-cell
}

.anv-control-menu-menuitem-icon svg {
  display: block
}

.anv-control-menu-menuitem[role=menuitemradio] .anv-control-menu-menuitem-content {
  display: none
}

.anv-control-menu-menuitem[role=menuitemradio][aria-checked=true] .anv-control-menu-menuitem-label {
  background-size: 18px 18px;
  -moz-background-size: 18px 18px;
  -webkit-background-size: 18px 18px
}

.anv-control-menu-menuitem[aria-haspopup=true] .anv-control-menu-menuitem-content {
  background-size: 32px 32px;
  -moz-background-size: 32px 32px;
  -webkit-background-size: 32px 32px
}

.anv-control-menu-panel-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex
}

.anv-control-menu-panel-back-button-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex
}

.anv-control-menu-panel-title:hover {
  cursor: pointer
}

.anv-control-menu-menuitem {
  display: table-row;
  cursor: default;
  outline: 0;
  height: 40px;
  font-family: Heebo;
  font-size: 80%
}

.anv-control-menu-menuitem:not([aria-disabled=true]) {
  cursor: pointer
}

.anv-control-menu-menuitem:not([aria-disabled=true]):hover {
  background-color: rgba(255, 255, 255, .1)
}

.anv-control-menu-menuitem-label {
  display: table-cell;
  vertical-align: middle;
  padding: 0 15px
}

.anv-control-menu-menuitem-icon {
  display: table-cell;
  vertical-align: middle
}

.anv-control-menu-menuitem-content {
  display: table-cell;
  vertical-align: middle;
  padding: 0 15px
}

.anv-control-menu-menuitem-label {
  padding-left: 0
}

.anv-control-menu-menuitem-icon {
  padding: 0;
  padding-left: 10px;
}

.anv-control-menu-menuitem-icon svg {
  display: block;
  width: 20px;
  height: 20px
}

.anv-control-menu-menuitem-label {
  font-size: 90%;
  font-weight: 500;
  text-align: left;
  padding-left: 10px;
}

.anv-control-menu-quality-menu .anv-control-menu-menuitem {
  white-space: nowrap
}

.anv-control-menu-quality-menu .anv-control-menu-panel-menu {
  margin-right: 10px
}

.anv-control-menu-menuitem[role=menuitemradio] .anv-control-menu-menuitem-content {
  display: none
}

.anv-control-menu-menuitem[role=menuitemradio] .anv-control-menu-menuitem-label {
  padding-left: 35px;
  padding-right: 20px;
  border-bottom: none
}

.anv-control-menu-menuitem[role=menuitemradio][aria-checked=true] .anv-control-menu-menuitem-label {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdmVyc2lvbj0iMS4xIj48cGF0aCBkPSJNOSAxNi4yTDQuOCAxMmwtMS40IDEuNEw5IDE5IDIxIDdsLTEuNC0xLjRMOSAxNi4yeiIgZmlsbD0iI2ZmZiIgLz48L3N2Zz4=);
  background-repeat: no-repeat;
  background-position: left 10px center;
  background-size: 16px 16px;
  -moz-background-size: 16px 16px;
  -webkit-background-size: 16px 16px;
}

.anv-control-menu-menuitem-content {
  font-size: 90%;
  text-align: right
}

.anv-control-menu-menu-label-secondary {
  font-size: 91%;
  color: #ccc
}

.anv-control-menu-menuitem[aria-haspopup=true] .anv-control-menu-menuitem-content {
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 10px 10px;
  -moz-background-size: 10px 10px;
  -webkit-background-size: 10px 10px;
  padding-right: 38px;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNyIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDcgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xLjMxNTkyIDFMNS4zMTU5MiA1TDEuMzE1OTIgOSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPgo=)
}

[dir=rtl] .anv-control-menu-menuitem[aria-haspopup=true] .anv-control-menu-menuitem-content {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAzMiAzMiIgdmVyc2lvbj0iMS4xIj48cGF0aCBkPSJNIDE5LjQxLDIwLjA5IDE0LjgzLDE1LjUgMTkuNDEsMTAuOTEgMTgsOS41IGwgLTYsNiA2LDYgeiIgZmlsbD0iI2ZmZiIgLz48L3N2Zz4=)
}

.anv-control-menu-menuitem-label-count {
  color: #ccc
}

.anv-control-menu-panel {
  float: left;
  overflow-y: auto;
  overflow-x: hidden
}


.anv-control-menu-panel-header {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .2);
  line-height: inherit;
  font-size: 109%;
  color: #eee;
  padding: 8px 0;
  height: 40px;
  white-space: nowrap
}

.anv-control-menu-panel-back-button-container {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  height: 48px;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 48px
}

.anv-control-menu-panel-back-button {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDYgMTAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik01IDFMMSA1TDUgOSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPgo=);
  height: 32px;
  width: 32px;
  background-size: 10px 12px;
  background-position: center;
  background-repeat: no-repeat;
}

.anv-control-menu-panel-title:hover {
  cursor: pointer
}

.anv-control-menu-panel-title {
  font-weight: 500;
  font-size: 13px;
  margin-left: 10px;
}

[dir=rtl] .anv-control-menu-panel-title {
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAzMiAzMiIgdmVyc2lvbj0iMS4xIj48cGF0aCBkPSJtIDEyLjU5LDIwLjM0IDQuNTgsLTQuNTkgLTQuNTgsLTQuNTkgMS40MSwtMS40MSA2LDYgLTYsNiB6IiBmaWxsPSIjZmZmIiAvPjwvc3ZnPg==)
}

.anv-control-menu-popup {
  -webkit-transition: opacity .1s cubic-bezier(0, 0, .2, 1);
  transition: opacity .1s cubic-bezier(0, 0, .2, 1);
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none
}

.anv-control-menu-popup[aria-hidden=true] {
  -webkit-transition: opacity .1s cubic-bezier(.4, 0, 1, 1);
  transition: opacity .1s cubic-bezier(.4, 0, 1, 1)
}

.anv-control-menu-menuitem-toggle-checkbox {
  -webkit-transition: all .08s cubic-bezier(.4, 0, 1, 1);
  transition: all .08s cubic-bezier(.4, 0, 1, 1);
  -webkit-transform: scale(1);
  transform: scale(1)
}

.anv-control-menu-menuitem-toggle-checkbox:after {
  -webkit-transition: all .08s cubic-bezier(.4, 0, 1, 1);
  transition: all .08s cubic-bezier(.4, 0, 1, 1)
}

.anv-control-menu-menuitem[aria-checked=true] .anv-control-menu-menuitem-toggle-checkbox:after {
  -webkit-transform: translateX(16px);
  transform: translateX(16px)
}

.anv-control-menu-panel-menu {
  padding: 8px 0;
  display: table;
  width: 100%;
  color: #eee;
  -moz-box-sizing: border-box;
  box-sizing: border-box
}

.anv-control-menu-popup {
  -webkit-transition: opacity .1s cubic-bezier(0, 0, .2, 1);
  transition: opacity .1s cubic-bezier(0, 0, .2, 1);
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none
}

.anv-control-menu-popup[aria-hidden=true] {
  -webkit-transition: opacity .1s cubic-bezier(.4, 0, 1, 1);
  transition: opacity .1s cubic-bezier(.4, 0, 1, 1)
}

.anv-control-menu-popup {
  -webkit-transition: opacity .1s cubic-bezier(0, 0, .2, 1);
  transition: opacity .1s cubic-bezier(0, 0, .2, 1);
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none
}

.anv-control-menu-popup[aria-hidden=true] {
  -webkit-transition: opacity .1s cubic-bezier(.4, 0, 1, 1);
  transition: opacity .1s cubic-bezier(.4, 0, 1, 1)
}

.anv-control-menu-settings-button {
  position: relative
}

.anv-control-menu-settings-button svg {
  -webkit-transition: -webkit-transform .1s cubic-bezier(.4, 0, 1, 1);
  transition: transform .1s cubic-bezier(.4, 0, 1, 1), -webkit-transform .1s cubic-bezier(.4, 0, 1, 1)
}

.anv-control-menu-settings-button[aria-expanded=true] svg {
  -webkit-transform: rotateZ(30deg);
  transform: rotateZ(30deg)
}

.anv-control-menu-popup {
  position: absolute;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(28, 28, 28, .9);
  text-shadow: 0 0 2px rgba(0, 0, 0, .5);
  -webkit-transition: opacity .1s cubic-bezier(0, 0, .2, 1);
  transition: opacity .1s cubic-bezier(0, 0, .2, 1);
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none
}

.anv-control-menu-popup[aria-hidden=true] {
  opacity: 0;
  -webkit-transition: opacity .1s cubic-bezier(.4, 0, 1, 1);
  transition: opacity .1s cubic-bezier(.4, 0, 1, 1)
}

.anv-control-menu-settings-menu {
  right: 12px;
  bottom: 60px;
  z-index: 71;
  will-change: width, height;
  border-radius: 3px;
}

.anv-control-menu-settings-menu .anv-control-menu-menuitem-content {
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  text-overflow: ellipsis
}

@-webkit-keyframes anv-control-menu-spinner-linspin {
  to {
    -webkit-transform: rotate(360deg)
  }
}

@keyframes anv-control-menu-spinner-linspin {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg)
  }
}

@-webkit-keyframes anv-control-menu-spinner-easespin {
  12.5% {
    -webkit-transform: rotate(135deg)
  }

  25% {
    -webkit-transform: rotate(270deg)
  }

  37.5% {
    -webkit-transform: rotate(405deg)
  }

  50% {
    -webkit-transform: rotate(540deg)
  }

  62.5% {
    -webkit-transform: rotate(675deg)
  }

  75% {
    -webkit-transform: rotate(810deg)
  }

  87.5% {
    -webkit-transform: rotate(945deg)
  }

  to {
    -webkit-transform: rotate(1080deg)
  }
}

@keyframes anv-control-menu-spinner-easespin {
  12.5% {
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg)
  }

  25% {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg)
  }

  37.5% {
    -webkit-transform: rotate(405deg);
    transform: rotate(405deg)
  }

  50% {
    -webkit-transform: rotate(540deg);
    transform: rotate(540deg)
  }

  62.5% {
    -webkit-transform: rotate(675deg);
    transform: rotate(675deg)
  }

  75% {
    -webkit-transform: rotate(810deg);
    transform: rotate(810deg)
  }

  87.5% {
    -webkit-transform: rotate(945deg);
    transform: rotate(945deg)
  }

  to {
    -webkit-transform: rotate(1080deg);
    transform: rotate(1080deg)
  }
}

@-webkit-keyframes anv-control-menu-spinner-left-spin {
  0% {
    -webkit-transform: rotate(130deg)
  }

  50% {
    -webkit-transform: rotate(-5deg)
  }

  to {
    -webkit-transform: rotate(130deg)
  }
}

@keyframes anv-control-menu-spinner-left-spin {
  0% {
    -webkit-transform: rotate(130deg);
    transform: rotate(130deg)
  }

  50% {
    -webkit-transform: rotate(-5deg);
    transform: rotate(-5deg)
  }

  to {
    -webkit-transform: rotate(130deg);
    transform: rotate(130deg)
  }
}

@-webkit-keyframes anv-control-menu-right-spin {
  0% {
    -webkit-transform: rotate(-130deg)
  }

  50% {
    -webkit-transform: rotate(5deg)
  }

  to {
    -webkit-transform: rotate(-130deg)
  }
}

@keyframes anv-control-menu-right-spin {
  0% {
    -webkit-transform: rotate(-130deg);
    transform: rotate(-130deg)
  }

  50% {
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg)
  }

  to {
    -webkit-transform: rotate(-130deg);
    transform: rotate(-130deg)
  }
}

.anv-control-menu-title {
  overflow: hidden;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex
}

.anv-control-menu-menuitem-toggle-checkbox {
  height: 14px;
  width: 36px;
  float: right;
  position: relative;
  border-radius: 14px;
  background: rgba(255, 255, 255, .3);
  -webkit-transition: all .08s cubic-bezier(.4, 0, 1, 1);
  transition: all .08s cubic-bezier(.4, 0, 1, 1);
  -webkit-transform: scale(1);
  transform: scale(1)
}

.anv-control-menu-menuitem[aria-checked=true] .anv-control-menu-menuitem-toggle-checkbox {
  background: red
}

.anv-control-menu-menuitem-toggle-checkbox:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 20px;
  width: 20px;
  border-radius: 20px;
  margin-top: -3px;
  background-color: #bdbdbd;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .6);
  -webkit-transition: all .08s cubic-bezier(.4, 0, 1, 1);
  transition: all .08s cubic-bezier(.4, 0, 1, 1)
}

.anv-control-menu-menuitem[aria-checked=true] .anv-control-menu-menuitem-toggle-checkbox:after {
  background-color: #fff;
  -webkit-transform: translateX(16px);
  transform: translateX(16px)
}

@-webkit-keyframes anv-control-menu-unmute-width-anim {
  0% {
    width: 0
  }

  to {
    width: 100%
  }
}

@keyframes anv-control-menu-unmute-width-anim {
  0% {
    width: 0
  }

  to {
    width: 100%
  }
}

@-webkit-keyframes anv-control-menu-unmute-alpha-anim {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@keyframes anv-control-menu-unmute-alpha-anim {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

.rotate20 {
  transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
}

.anv-control-menu-panel[aria-hidden=true] {
  display: none;
}

.anv-control-menu-popup[aria-hidden=true] {
  display: none;
}

/* width */
::-webkit-scrollbar {
  width: 5px;
  background: #3E4042;
  border-radius: 0px 2px 2px 0px;
}

/* Track */
::-webkit-scrollbar-track {
  background: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #808489;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #909294;
}

/* New Playlist Horizontal */

.anv-playlist.horizontal {
  width: calc(100% - 20px);
  background-color: rgba(24, 26, 27, 0.95);
  position: absolute;
  left: 10px;
  bottom: 64px;
  color: #fff;
  overflow: hidden;
  flex-direction: column;
}

.anv-playlist.horizontal .anv-playlist-header {
  color: #fff;
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}

@media all and (max-width: 499px) {
  .anv-playlist.horizontal .anv-playlist-close-btn {
    width: 6px !important;
    height: 6px !important;
  }
}

@media all and (min-width: 500px) and (max-width: 1199px) {
  .anv-playlist.horizontal .anv-playlist-close-btn {
    width: 10px !important;
    height: 10px !important;
  }
}

@media all and (min-width: 1200px) {
  .anv-playlist.horizontal .anv-playlist-close-btn {
    width: 18px !important;
    height: 18px !important;
  }
}
.anv-playlist.horizontal .anv-playlist-close-btn {
  width: 10px;
  height: 10px;
  cursor: pointer;
}

.anv-playlist.horizontal .anv-playlist-close-btn svg {
  width: 100%;
  height: 100%;
}

@media all and (max-width: 499px) {
  .anv-playlist.horizontal .anv-playlist-header-title {
    font-size: 10px !important;
  }
}

@media all and (min-width: 500px) and (max-width: 1199px) {
  .anv-playlist.horizontal .anv-playlist-header-title {
    font-size: 14px !important;
  }
}

@media all and (min-width: 1200px) {
  .anv-playlist.horizontal .anv-playlist-header-title {
    font-size: 18px !important;
  }
}

.anv-playlist.horizontal .anv-playlist-header-title {
  height: 16px;
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #FFFFFF;
  align-items: center;
}

.anv-playlist.horizontal .anv-playlist-menu {
  width: calc(100% - 36px);
  margin-left: 18px;
  overflow: hidden;
  white-space: nowrap;
  scroll-behavior: smooth;
  display: flex;
  padding-bottom: 14px;
}

.anv-playlist.horizontal .anv-playlist-top-bar {
  width: 30px;
  height: calc(100% - 62px);
  position: absolute;
  left: 6px;
  bottom: 14px;
}

.anv-playlist.horizontal .anv-playlist-top-bar-btn {
  width: 30px;
  height: 30px;
  left: calc(50% - 15px);
  top: calc(50% - 15px);
  bottom: 50%;
  position: absolute;
  border-radius: 100px;
  background-color: #484C4F;
  cursor: pointer;
}

.anv-playlist.horizontal .anv-playlist-top-bar-btn svg {
  position: absolute;
  top: 4px;
  left: 6px;
  transform: rotate(270deg);
}

.anv-playlist.horizontal .anv-playlist-top-bar .anv-playlist-close-btn {
  display: none;
}

.anv-playlist.horizontal .anv-playlist-bottom-bar {
  width: 30px;
  height: calc(100% - 62px);
  position: absolute;
  right: 6px;
  bottom: 14px;
}

.anv-playlist.horizontal .anv-playlist-bottom-bar-btn {
  width: 30px;
  height: 30px;
  left: calc(50% - 15px);
  top: calc(50% - 15px);
  bottom: 50%;
  position: absolute;
  border-radius: 100px;
  background-color: #484C4F;
  cursor: pointer;
}

.anv-playlist.horizontal .anv-playlist-bottom-bar-btn svg {
  position: absolute;
  top: 4px;
  left: 0px;
  transform: rotate(90deg);
}

.anv-playlist.horizontal .anv-playlist-item {
  position: relative;
  cursor: pointer;
  min-width: 20%;
  height: 10.6vw;
}

.anv-playlist.horizontal .anv-playlist-item-thumbnail {
  width: 100%;
  height: 100%;
  background-size: cover;
}


.anv-playlist.horizontal .anv-playlist-item-info {
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  left: 0;
  top: 0;
  position: absolute;
  display: none;
  background: rgba(0, 0, 0, 0.6);
  padding: 10px;
}

.anv-playlist.horizontal .anv-playlist-item.active {
  background-color: rgba(255, 255, 255, 0.25);
}

.anv-playlist.horizontal .anv-playlist-item:hover .anv-playlist-item-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.anv-playlist.horizontal .anv-playlist-item-title {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 600;
  font-size: max(11px, 1.2vw);
  align-items: center;
  width: calc(100% - 12px);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  color: #fff;
}

@media only screen and (max-width: 689px) {
  .anv-playlist.horizontal .anv-playlist-item-desc {
    display: none !important;
  }

  .anv-playlist.horizontal .anv-playlist-item-info {
    flex-direction: row !important;
    align-items: center !important;
  }
}

.anv-playlist.horizontal .anv-playlist-item-desc {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 300;
  font-size: max(10px, 1.1vw);
  align-items: center;
  width: calc(100% - 12px);
  overflow: hidden;
  color: #fff;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: break-spaces;
  margin-top: 5px;
}

/* New Playlist Vertical */

.anv-playlist.vertical {
  width: 48%;
  max-width: 500px;
  background-color: rgba(24, 26, 27, 0.95);
  position: absolute;
  display: flex;
  right: 10px;
  bottom: 60px;
  color: #fff;
  height: calc(100% - 68px);
  flex-direction: column;
}

.anv-playlist.vertical .anv-playlist-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
}

@media all and (max-width: 499px) {
  .anv-playlist.vertical .anv-playlist-header-title {
    font-size: 10px !important;
  }
}

@media all and (min-width: 500px) and (max-width: 1199px) {
  .anv-playlist.vertical .anv-playlist-header-title {
    font-size: 14px !important;
  }
}

@media all and (min-width: 1200px) {
  .anv-playlist.vertical .anv-playlist-header-title {
    font-size: 18px !important;
  }
}

.anv-playlist.vertical .anv-playlist-header-title {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  color: #FFFFFF;
  align-items: center;
}


.anv-playlist.vertical .anv-playlist-menu {
  height: calc(100% - 57px);
  overflow: auto;
  scroll-behavior: smooth;
  display: flex;
  flex-direction: column;
}

.anv-playlist.vertical .anv-playlist-item {
  min-height: min(90px, calc(25% - 14px));
  padding: 7px 16px 7px 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.anv-playlist.vertical .anv-playlist-item:hover {
  background-color: rgba(255, 255, 255, 0.15);
  cursor: pointer;
}

.anv-playlist.vertical .anv-playlist-item.active {
  background-color: rgba(255, 255, 255, 0.25);
}

.anv-playlist.vertical .anv-playlist-item-thumbnail {
  height: 100%;
  min-width: 34%;
  margin-right: 12px;
}

.anv-playlist.vertical .anv-playlist-item-info {
  width: calc(66% - 12px);
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media only screen and (min-width: 929px) {
  .anv-playlist.vertical .anv-playlist-item-desc {
    -webkit-line-clamp: 4;
  }
}

@media only screen and (max-width: 928px) {
  .anv-playlist.vertical .anv-playlist-item-desc {
    -webkit-line-clamp: 3;
  }
}

@media only screen and (max-width: 807px) {
  .anv-playlist.vertical .anv-playlist-item-desc {
    -webkit-line-clamp: 2;
  }
}

@media only screen and (max-width: 690px) {
  .anv-playlist.vertical .anv-playlist-item-desc {
    -webkit-line-clamp: 1;
  }
}

@media only screen and (max-width: 689px) {
  .anv-playlist.vertical .anv-playlist-item-desc {
    display: none !important;
  }

  .anv-playlist.vertical .anv-playlist-item-info {
    flex-direction: row;
    align-items: center;
  }
}

.anv-playlist.vertical .anv-playlist-item-title {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  min-height: 16px;
  align-items: center;
  margin-top: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.anv-playlist.vertical .anv-playlist-item-desc {
  margin-top: 8px;
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
@media all and (min-width: 1200px) {
  .anv-playlist.vertical .anv-playlist-top-bar {
    top: 42px !important;
  }
}
.anv-playlist.vertical .anv-playlist-top-bar {
  width: 30px;
  height: 30px;
  top: 40px;
  left: calc(17% - 10px);
  position: absolute;
  display: flex;
  align-items: center;
}

.anv-playlist.vertical .anv-playlist-bottom-bar {
  width: 30px;
  height: 30px;
  bottom: 2px;
  left: calc(17% - 10px);
  position: absolute;
  display: flex;
  align-items: center;
}

@media only screen and (max-width: 500px) {
  .anv-playlist {
    display: none !important;
  }
}

@media only screen and (max-width: 730px) {
  /* .anv-playlist.vertical .anv-playlist-top-bar {
    display: none !important;
  }

  .anv-playlist.vertical .anv-playlist-bottom-bar {
    display: none !important;
  } */
}

.anv-playlist.vertical .anv-playlist-top-bar .anv-playlist-top-bar-btn {
  margin: auto;
  width: 100%;
  height: 100%;
  background-color: #484C4F;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
}

.anv-playlist.vertical .anv-playlist-bottom-bar .anv-playlist-bottom-bar-btn {
  margin: auto;
  width: 100%;
  height: 100%;
  background-color: #484C4F;
  border-radius: 50px;
  cursor: pointer;
  position: relative;
}

@media all and (max-width: 499px) {
  .anv-playlist.vertical .anv-playlist-close-btn {
    width: 6px;
    height: 6px;
  }
}

@media all and (min-width: 500px) and (max-width: 1199px) {
  .anv-playlist.vertical .anv-playlist-close-btn {
    width: 10px;
    height: 10px;
  }
}

@media all and (min-width: 1200px) {
  .anv-playlist.vertical .anv-playlist-close-btn {
    width: 18px;
    height: 18px;
  }
}
.anv-playlist.vertical .anv-playlist-close-btn {
  cursor: pointer;
}

.anv-playlist.vertical .anv-playlist-close-btn svg {
  width: 100%;
  height: 100%;
}

.anv-playlist.vertical .anv-playlist-top-bar-btn svg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 13%;
}

.anv-playlist.vertical .anv-playlist-bottom-bar-btn svg {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 13%;
  transform: rotate(180deg);
}

.anv-subtitles-btn.active {
  padding: 2px 15px 0px 15px;
}

.anv-subtitles-btn.active svg {
  padding-bottom: 4px;
  border-bottom: 2px solid #E50909;
}

.anv-control-buttons {
  display: flex;
  align-items: center;
}

.anv-control-spacer {
  flex-grow: 100;
}

@media only screen and (min-width: 1199px) {
  .anv-control-btn>svg {
    height: 24px;
  }

  .anv-control-btn {
    padding: 6px 17px 10px 17px;
  }

  .anv-subtitles-btn.active {
    padding: 6px 17px 4px 17px;
  }

  .anv-volume-slider-btn {
    padding-left: 0 !important;
    padding-right: 0px !important;
  }

  .anv-duration-btn {
    font-size: 1.2em !important;
  }

  .anv-playlist.horizontal .anv-playlist-bottom-bar {
    width: 50px;
  }

  .anv-playlist.horizontal .anv-playlist-top-bar-btn {
    width: 50px;
    height: 50px;
    left: calc(50% - 20px);
    top: calc(50% - 25px);
  }

  .anv-playlist.horizontal .anv-playlist-bottom-bar-btn {
    width: 50px;
    height: 50px;
    left: calc(50% - 20px);
    top: calc(50% - 25px);
  }

  .anv-playlist.horizontal .anv-playlist-bottom-bar-btn svg {
    width: 40px;
    height: 40px;
  }

  .anv-playlist.horizontal .anv-playlist-top-bar-btn svg {
    width: 40px;
    height: 40px;
    left: 9px;
  }

  .anv-control-btn[data-anv-title]:after {
    font-size: 14px;
  }
}

.anv-shadow-bottom {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(5, 4, 5, 0)), to(rgba(5, 4, 5, 0.5)));
  background: -moz-linear-gradient(top, rgba(5, 4, 5, 0), rgba(5, 4, 5, 0.5));
}