@font-face {
  font-family: roobert-reg;
  src: url(../fonts/Roobert-Regular.otf);
}

@font-face {
  font-family: roobert-semi;
  src: url(../fonts/Roobert-SemiBold.otf);
}

:root {
  --purple: #7a68ee;
  --yellow: #dfbc41;
}

.top-player-content {
  display: flex;
  justify-content: space-between;
  margin-left: 70px;
  position: absolute;
  top: 16px;
  width: calc(100% - 100px);
}

.top-player-content .wa-audio-title {
  color: #2f3247;
  font-weight: bold;
  font-size: 18px;
  line-height: 18px;
  margin-bottom: 0;
  font-family: roobert-semi;
}

.top-player-content .wa-audio-subtitle {
  font-size: 14px;
  color: #676a86;
  font-family: roobert-reg;
  margin-top: 1px;
}

.top-player-content .wa-powered-by {
  max-height: 22px;
  text-decoration: none;
  color: #676a86;
  font-size: 12px;
  font-family: roobert-reg;
}

.top-player-content .wa-powered-by img {
  display: inline-block;
}

#wt-play-button {
  cursor: pointer;
  background: #7a68ee;
  border-radius: 3px;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  margin-right: 15px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

#wt-whole-length {
  font-size: 14px;
  font-weight: 400;
  color: #676a86;
  font-family: roobert-reg;
  margin-left: 7px;
}

.plyr__controls .plyr__controls__item:first-child svg {
  fill: #fff;
}

.show-plyr-time {
  display: inline-block;
}

button.plyr__controls__item:hover {
  opacity: 0.9;
  background: #7a68ee !important;
}

.wt-metabox-container label.enable {
  margin: 10px 0;
  display: inline-block;
}

.wt-btn-blue {
  background: #00669b;
  display: block;
  color: white !important;
  box-sizing: border-box;
  margin-bottom: 10px;
  width: 100%;
  text-align: center;
  border: none;
  outline: none;
  border-radius: 3px;
  line-height: 14px;
  cursor: pointer;
  transition: opacity 0.2s;
  padding: 15px;
}

.wt-btn-blue:hover {
  opacity: 0.9;
}

.wt-btn-blue span {
  width: 44px;
  height: 44px;
  background: #6854e0;
  margin-right: 30px;
  display: flex;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
}

.wt-btn-blue div.wt-loader {
  font-size: 10px;
  margin: 0px auto;
  text-indent: -9999em;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background: #ffffff;
  background: -moz-linear-gradient(
    left,
    #ffffff 10%,
    rgba(255, 255, 255, 0) 42%
  );
  background: -webkit-linear-gradient(
    left,
    #ffffff 10%,
    rgba(255, 255, 255, 0) 42%
  );
  background: -o-linear-gradient(left, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
  background: -ms-linear-gradient(
    left,
    #ffffff 10%,
    rgba(255, 255, 255, 0) 42%
  );
  background: linear-gradient(
    to right,
    #ffffff 10%,
    rgba(255, 255, 255, 0) 42%
  );
  position: relative;
  -webkit-animation: load3 1.4s infinite linear;
  animation: load3 1.4s infinite linear;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.wt-btn-blue div.wt-loader:before {
  width: 50%;
  height: 50%;
  background: #ffffff;
  border-radius: 100% 0 0 0;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
}

.wt-btn-blue div.wt-loader:after {
  background: #00669b;
  width: 75%;
  height: 75%;
  border-radius: 50%;
  content: "";
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.wt-btn-yellow:hover {
  opacity: 0.9;
}

.wt-yellow-bg {
  background: #dfbc41;
}

.wt-yellow-bg div.wt-loader:after {
  background: #dfbc41 !important;
}

.audio-player {
  margin-top: 10px;
}

.wt-admin-audio-player {
  display: none;
  padding: 5px;
  padding: 0px !important;
  border-radius: 3px !important;
}

.wt-admin-audio-player #wt-play-button {
  width: 44px;
  height: 44px;
  background: #00669b;
  border-radius: 3px;
}

.wt-admin-audio-player .top-player-content {
  display: none;
}

.wt-admin-audio-player .wa-controls {
  display: none;
}

.wt-admin-audio-player #wt-player-progress-bar {
  width: 0px;
  background: #00669b;
}

.wt-admin-audio-player #wt-player-progress-bar-outer {
  left: 60px !important;
  bottom: 18px !important;
  width: 180px;
}

.wt-admin-audio-player #wavetech-track {
  background: #00669b;
}

.wt-admin-audio-player #wt-player-progress-bar-fill,
.wt-admin-audio-player #wt-player-progress-bar-outer,
.wt-admin-audio-player #wt-player-progress-bar {
  transform: translateY(4px);
}

.wt-admin-audio-player #wt-hover-duration {
  font-size: 10px;
  transform: translateX(-36px) !important;
}

/* Custom Dropdown */
.big {
  font-size: 1.2em;
}

.small {
  font-size: 0.7em;
}

.square {
  width: 0.7em;
  height: 0.7em;
  margin: 0.5em;
  display: inline-block;
}

/* Custom dropdown */
.select-box {
  cursor: pointer;
  position: relative;
  max-width: 20em;
  width: 100%;
  margin-bottom: 10px;
}

.select-box .sample-play {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: #EEF1F2; */
  background: #00669b;
  border-radius: 3px;
  position: absolute;
  z-index: 2;
}

.select-box select{
  padding: 7px;
  background: #f5f8fa;
  border: none;
  outline: none !important;
  box-shadow: none !important;
  /* margin-left: 37px; */
  width: calc(100% - 65px);
  /* box-sizing: border-box; */
  padding-left: 57px;
  font-size: 12px;
  color: #8f9fa8;
  cursor: pointer;
}

.select-box select option{
  padding: 0 !important;
}

.select,
.label {
  padding: 10px 0;
  color: #8f9fa8;
  display: block;
  font-size: 12px;
}

.select {
  position: absolute;
  top: 0;
  padding: 5px 0;
  height: 44px;
  opacity: 0;
  background: none transparent;
  border: 0 none;
}

.select-box1 {
  background: #f5f8fa;
  border-radius: 3px;
}

.label {
  font-size: 12px;
  position: relative;
  padding: 14px 10px 14px 56px;
  cursor: pointer;
}

.open .label::after {
  content: "▲";
}

.label::after {
  content: "▼";
  font-size: 8px;
  position: absolute;
  right: 0;
  top: 14px;
  padding: 5px 12px;
}

.voice-actor {
  color: #317cb5;
  font-size: 13px;
  margin-bottom: 4px;
}

.error-text {
  color: #fb4c4c;
  font-size: 10px;
}

/* Body */
.wavetech-body-container {
  padding: 30px;
}

.wavetech-key-input {
  min-width: 250px;
  margin: 10px 0;
  outline: none;
  padding: 6px 8px;
  border: 1px solid #a0a0a0;
}

.wavetech-pay-as-select {
  min-width: 250px;
  margin: 10px 0;
  outline: none;
  padding: 6px 8px;
  border: 1px solid #a0a0a0;
}

.d-0 {
  width: 0%;
}

/* Front Audio */

#front-player-container {
  visibility: hidden;
  position: absolute;
  top: -9999999999999px;
}

.front-player-container {
  /* display: flex; */
  justify-content: space-between;
  align-items: center;
  background: #f8f7fe;
  padding: 15px;
  border-radius: 8px;
  position: relative;
}

.wa-controls {
  position: relative;
  z-index: 99;
  margin-top: 38px;
  cursor: pointer;
}

.front-player-container .wa-tone-change {
  background: #f4f4f6;
  max-width: 176px;
  margin-bottom: 5px;
}

.wa-player {
  margin-right: 10px;
  width: 100%;
}

.wt-dropdown-controls {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: white;
  border-radius: 8px;
  padding: 6px 10px 10px 10px;
  box-shadow: 0 10px 30px rgba(48, 41, 93, 0.15);
  z-index: 999;
}

.wt-dropdown-controls .wa-control-title {
  color: #676a86;
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
  font-family: roobert-reg;
}

.wa-show-dd {
  display: block !important;
}

.speed-control {
  display: flex;
  align-items: center;
  background: #f4f4f6;
  border-radius: 8px;
}

.speed-control button {
  font-size: 1rem;
  outline: none;
  width: 54px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  text-decoration: none;
  background: #f4f4f6;
  box-sizing: border-box;
  transition: opacity 0.25s;
}

.speed-control button:hover {
  opacity: 0.9;
}

.speed-control .indicator {
  text-align: center;
  font-size: 13px;
  line-height: 14px;
  padding-top: 15px;
  background: #7a68ee;
  height: 44px;
  width: 44px;
  border-radius: 8px;
  color: white;
  font-family: roobert-reg;
}

.wa-tone-change {
  background: white;
  border-radius: 8px;
  padding: 3px 10px 10px;
  display: inline-block;
}

/*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="range"] {
    outline: none;
    -webkit-appearance: none;
    background-color: lightgray;
  }

  input[type="range"]::-webkit-slider-runnable-track {
    height: 4px;
    width: 100%;
    border-radius: 15px;
    -webkit-appearance: none;
  }

  input[type="range"]::-webkit-slider-thumb {
    width: 12px;
    -webkit-appearance: none;
    border-radius: 50%;
    height: 12px;
    cursor: pointer;
    margin-top: -4px;
    background: #7a68ee;
  }
}

.wa-tone-change-range {
  background: linear-gradient(
    to right,
    #7a68ee 0%,
    #7a68ee 50%,
    lightgray 50%,
    lightgray 100%
  );
  border-radius: 8px;
  height: 4px;
  outline: none;
  transition: background 450ms ease-in;
  -webkit-appearance: none;
}

#wavetech-plugin-form {
  margin-top: 30px;
}

#wavetech-plugin-form label {
  width: 216px;
  margin-right: 40px;
  display: inline-block;
  font-weight: bold;
}

#wt-select-box-label::after {
  display: none;
}

#wavetech-track {
  display: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgb(123, 104, 238);
  /* display: block;  */
  position: absolute;
  top: 1px;
  z-index: 999999;
  transform: translateY(0px);
}

#wt-player-progress-bar {
  background: #7a68ee;
  /* margin-bottom: 16px; */
  position: relative;
  z-index: 99999;
  border-radius: 4px;
  cursor: pointer;
  height: 6px;
  width: 0%;
  transform: translateY(4px);
  z-index: 4;
}

#wt-player-progress-bar-fill {
   pointer-events: none; 
  background: #c6befb;
  border-radius: 4px;
  position: absolute;
  height: 6px;
  width: 100%;
  transform: translateY(4px);
  z-index: 1;
}

#wt-player-progress-bar-hover {
  transform: translateY(4px);
  pointer-events: none; 
  background: #9c8ef5;
  border-radius: 4px;
  position: absolute;
  height: 6px;
  width: 0%;
  z-index: 3;
}

#wt-player-progress-bar-outer {
  transform: translateY(10px);
  background-color: transparent !important;
  position: absolute;
  bottom: 20px !important;
  left: 85px;
  z-index: 9;
  cursor: pointer;
  height: 16px;
}

#wt-hover-duration {
  box-shadow: rgba(122, 104, 238, 0.1) 0px 0px 24px;
  position: absolute;
  bottom: -18px;
  color: #676a86;
  font-size: 12px;
  padding:  4px 0;
  font-family: roobert-reg;
  line-height: 12px;
   width: 38px;
  text-align: center;
  transform: translateX(-43px);
  border-radius: 3px;
}

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

#wt-generate-status {
  font-size: 11px;
  transform: translateY(-8px);
  display: none;
}

.color-green {
  color: green;
}

.color-red {
  color: red;
}

.wt-failed,
.wt-successful {
  display: none;
  margin-left: 8px;
}

.activation-status-text {
  position: absolute;
  font-size: 12px;
  left: 290px;
  margin-top: -6px;
}