ul {
  padding-left: 0;
  list-style: none;
}

::ng-deep vg-overlay-play .vg-overlay-play {
  background: linear-gradient(10deg, #E91E63 0%, #f8768f 100%);
  width: 52px !important;
  height: 52px !important;
  border-radius: 50%;
  position: absolute !important;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: solid 4px #fff;
}

::ng-deep vg-overlay-play .vg-overlay-play .overlay-play-container.vg-icon-play_arrow {
  font-size: 36px !important;
}

::ng-deep .PlayAgain .vg-icon-play_arrow {
  &::before {
    font-family: "Material Icons" !important;
    content: "\e042" !important;
    transform: rotate(-90deg);
    padding-left: 25px;
    color: #fff !important;
  }
}

::ng-deep .PlayAgain .vg-overlay-play {
  background: transparent;
  width: 126px !important;
  height: 112px !important;
  border-radius: 10px;
  border: transparent;
  opacity: 1 !important;

  &:hover {
    background: transparent;
    opacity: 0.4;
  }
}

::ng-deep .PlayAgain .vg-overlay-play:hover .vg-icon-play_arrow {
  transform: rotate(-90deg);
}

.video-wrapper {
  .video-top {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 0 20px;

    h4 {
      font-style: normal;
      font-weight: 600;
      font-size: 24px;
      line-height: 28px;
      color: #cccccc;
      margin: 0 0 0 15px;
      letter-spacing: 1px;

      span {
        color: #f35a81;
      }
    }
  }
}

::ng-deep vg-playback-button .button {
  width: auto !important;
  border: 1.5px solid #a7a5bc;
  padding: 0px 5px;
  height: 20px;
  margin-top: 12px;
  font-size: 10px;
}

@media screen and (max-width: 768px) {
  .play_again {
    position: absolute;
    top: 57% !important;
    left: 50%;
    transform: translate(-50%, -57%);
  }
}

.video-div {
  max-width: 70%;
  margin: 35px auto;
  position: relative;

  vg-player {
    border-radius: 5px !important;

    .PlayAgain {
      .vg-overlay-play {
        .vg-icon-play_arrow {
          &::before {
            content: "f007" !important;
          }
        }
      }
    }
  }

  .settings {
    display: flex;
    align-items: center;
    color: #fff;

    .active_settings {
      color: #E91E63;
    }

    .settings-button {
      cursor: pointer;

      span {
        margin-top: 5px;
        margin-left: 10px;
      }
    }

    .settings-popup {
      position: absolute;
      background: linear-gradient(120deg, #fa007e63 50%, #01025e 100%);
      border-radius: 10px 0px 10px 0px;
      border: 1px solid #303673;
      min-width: 140px;
      right: 40px;
      z-index: 11111;
      bottom: 60px;
      width: fit-content;
      padding: 5px 10px;

      .options {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 0px;
        border-bottom: 1px solid #cccccc;
        cursor: pointer;

        .option-name {
          display: flex;
          align-items: center;
          color: #d7d6e3;

          span {
            margin-right: 10px;
          }

          img {
            height: 24px;
            width: 24px;
            margin-right: 10px;
          }
        }

        .arrow {
          display: flex;
          align-items: center;
          color: #f35a81;
        }

        &:last-child {
          border-bottom: 0px solid #cccccc;
        }
      }
    }

    .PlaybackSettings {
      position: absolute;
      background: #00011f;
      border-radius: 5px;
      border: 1px solid #cccccc;
      min-width: 180px;
      right: 40px;
      z-index: 11111;
      bottom: 60px;
      width: fit-content;

      .playback-speed-options {
        label {
          padding: 10px 5px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #cccccc;
          width: 100%;
          box-sizing: border-box;
          cursor: pointer;

          .material-icons {
            color: #cccccc;
          }
        }

        .playbackSpeedList {
          overflow: auto;
          max-height: 205px;
          padding: 0px 18px 0px 20px;

          div {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 4px 0px;
            border-bottom: 1px solid #cccccc;
            color: #cccccc;
            cursor: pointer;

            span {
              width: 23px;
              font-size: initial;
            }

            &:last-child {
              border-bottom: 0px solid #cccccc;
            }
          }

          .activeSpeed {
            color: #f35a81;
          }
        }
      }
    }
  }

  .play_again {
    position: absolute;
    top: 53%;
    left: 50%;
    transform: translate(-50%, -53%);
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    z-index: 999;
    cursor: pointer;
  }

  .frm-next-btn {
    width: 210px;
    height: 40px;
    background: linear-gradient(10deg, #E91E63 0%, #f8768f 100%);
    border-radius: 22px;
    border: none;
    color: #fff;
    font-style: normal;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

.form-button-next {
  position: fixed;
  bottom: 0;
  right: 10px;
  text-align: right;
  width: 100%;
  padding-bottom: 10px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;

  .frm-next-btn-down {
    margin: 10px;
    background: #fff;
    padding: 0px;
    border-radius: 24px;
    border: none;
    color: #ee007a;
    font-style: normal;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
    width: 80px;
    height: 45px;
  }

  .frm-prev-btn {
    background: #0f133c;
    border: 1px solid #978cd9;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    color: #978cd9;
    transition: 0.3s all ease-in-out;
    cursor: pointer;
    opacity: 0;

    &:hover {
      opacity: 0.7;
    }

    &:focus {
      outline: none;
    }
  }
}

.expiredlink {
  background: url("../../../assets/emptypng.png") no-repeat bottom center;
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: 100% auto;
  flex-wrap: wrap;

  .message {
    text-align: center;
    padding-bottom: 20%;

    h1 {
      width: 100%;
      color: #d7779b;
      font-size: 3vw !important;
      font-weight: 400;
      line-height: 140%;
    }

    p {
      width: 100%;

      color: #766daa;
      font-size: 1.3em;
      font-weight: lighter;
      line-height: 1.1em;
      line-height: 140%;
    }

    a {
      color: #ccc;
      font-family: "mulish-light";
      text-decoration: underline;
      line-height: 25px;
    }
  }
}

@media only screen and (max-width: 676px) {
  .video-wrapper {
    .video-top {
      display: block;
      text-align: center;

      h4 {
        font-size: 20px;
        line-height: 2;
      }

      img {
        width: 70px;
      }
    }

    .video-div {
      .frm-next-btn {
        top: 100%;
        left: 50%;
        transform: translate(-50%, 50%);
      }

      .settings {
        .PlaybackSettings {
          .playback-speed-options {
            .playbackSpeedList {
              max-height: 60px !important;
            }
          }
        }
      }
    }

    ::ng-deep vg-time-display {
      width: 100% !important;
      justify-content: space-between !important;
    }

    ::ng-seep vg-time-display.time-display-right {
      justify-content: flex-end !important;
      margin-right: 15px;
    }

    ::ng-deep vg-fullscreen {
      width: 30px !important;
    }

    ::ng-deep vg-scrub-bar {
      position: inherit !important;
      margin: 0px 0px 0px 70px !important;
      width: calc(100% - 180px) !important;
      top: 3px;
    }

    ::ng-deep vg-time-display {
      line-height: 52px !important;
    }

    .just-con-end {
      justify-content: flex-end !important;
      margin-right: 15px;
    }

    ::ng-deep vg-playback-button {
      margin-left: auto;
    }

    ::ng-deep .vg-icon-volume_up:before {
      content: "\e033";
      font-size: 17px;
    }

    ::ng-deep vg-playback-button .button {
      width: auto !important;
      border: 1.5px solid #a7a5bc;
      padding: 0px 5px;
      height: 20px;
      margin-top: 12px;
      font-size: 10px;
    }

    ::ng-deep vg-play-pause {
      height: 30px !important;
      width: 30px !important;
    }

    ::ng-deep .vg-icon-pause:before {
      content: "\e018";
      font-size: 20px;
    }

    ::ng-deep vg-controls {
      align-items: center !important;
    }
  }
}

.is-buffering {
  .vg-buffering {
    .bufferingContainer {
      .loadingSpinner {
        -moz-animation: spin 0.5s infinite linear;
        animation: spin 0.5s infinite linear;
        -webkit-animation: spin 0.5s infinite linear;
      }
    }
  }
}

::ng-deep .is-buffering {
  display: block !important;
}

::ng-deep vg-player:hover vg-controls {
  transition: 0.5s ease-out 0s !important;
  opacity: 1 !important;
}

::ng-deep vg-player.vgControls vg-controls {
  background: #673ab74d !important;
  opacity: 0 !important;
  transition: 0.5s ease-out 1.5s !important;
}

::ng-deep vg-controls {
  font-family: "mulish-light" !important;
  font-size: small !important;
}

@media screen and (max-width: 768px) {
  ::ng-deep .PlayAgain .vg-overlay-play {
    width: 86px !important;
    height: 72px !important;
  }

  ::ng-deep .PlayAgain .vg-icon-play_arrow::before {
    font-size: 20px;
  }

  .video-div {
    .play_again {
      font-size: 11px;
    }

    .settings {
      .PlaybackSettings {
        .playback-speed-options {
          .playbackSpeedList {
            max-height: 95px;
          }
        }
      }
    }
  }

  .form-button-next {
    .frm-next-btn-down {
      position: absolute;
      bottom: 10px;
      right: 10px;
    }
  }

  .video-div {
    .frm-next-btn {
      top: 100%;
      left: 50%;
      transform: translate(-50%, 50%);
      display: none;
    }
  }
}

@media screen and (max-width: 1024px) {
  .video-div {
    .frm-next-btn {
      top: 80%;
    }
  }
}

.logoimage {
  width: 150px;
}

.survey-wrapper {
  backdrop-filter: blur(2px);
}