@mixin centerit() {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

@mixin apply_transition($transition-property, $transition-duration, $transition-timing) {
  transition-property: $transition-property;
  transition-duration: $transition-duration;

  @if $transition-timing == ease-out-quart {
    transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
  } @else {
    transition-timing-function: $transition-timing;
  }
}

@mixin boxsizing() {
  box-sizing: border-box;
}

body .dzsulb-main-con {
  z-index: 55555;
}

#toplevel_page_dzsap_menu .wp-menu-image {
  background: transparent url(img/icon.png) center center no-repeat;
}

#toplevel_page_dzsap_menu:hover .wp-menu-image {
  background: transparent url(img/icon-hover.png) center center no-repeat;
}

#toplevel_page_dzsap_menu.wp-menu-open .wp-menu-image {
  background: transparent url(img/icon-hover.png) center center no-repeat;
}

@import "css_common/dzs_select_wrapper";


.dzsap-woo-playlist-iframe {
  border: 1px solid rgba(69, 99, 146, 0.5);
}

.feat-sample-con {
  border: 1px dashed rgba(0, 0, 0, 0.3);
  padding: 10px;
  cursor: pointer;

  margin-bottom: 10px;

  > img.feat-sample {
    width: 100%;
    display: block;
  }

  h4 {
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
  }

  h4:last-child {
    margin-bottom: 0;
  }

  &.disabled {
    opacity: 0.5;
    pointer-events: none;
  }
}

h5.setting-label {
  margin-bottom: 5px;
  margin-top: 0;
}


.setting-upload {
  .uploader-preview {
    display: inline-block;
    vertical-align: middle;
    width: 25px;
    height: 25px;

    background-size: cover;
    background-position: center center;

    border-radius: 5px;

    margin-left: 0px;
    margin-right: 5px;


    $transition-property: margin, width, height;
    $transition-duration: 0.3s;
    $transition-timing: ease-in;

    @include apply_transition($transition-property, $transition-duration, $transition-timing);

    &:hover {
      width: 80px;
      height: 80px;
    }

    &:empty {
      margin-right: 0;
      width: 0;
      height: 0;
      margin-left: -1px;
    }
  }

  .uploader-target {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;


  }
}

.form-field .setting-upload {
  .uploader-target {
    width: 50%;
  }
}

#tabs-box {
  max-width: 900px;
}

.tab-menu {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  $transition-property: background;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;

  @include apply_transition($transition-property, $transition-duration, $transition-timing);
}

body .dzs-tabs.skin-qcre .tabs-menu .tab-menu-con.active {
  border-color: #0085ba;

  .tab-menu {
    background-color: #0085ba;

  }
}

body .dzs-tabs {
  overflow: visible;
}


/* ---- styleme selector END */


$general_margin: 22px;
table.pages-table {
  margin-bottom: $general_margin;

  .column-author {
    width: 10%;
    min-width: 6em;
  }

  .column-date {
    width: 120px;
    min-width: 6em;
  }

  .column-date, .user-phone {
    text-align: center;
  }

  tbody {

    $transition-property: opacity;
    $transition-duration: 0.3s;
    $transition-timing: ease-in;

    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }


  td, th {
    padding: 0.75em 1.5em;
    text-align: left;
  }

  td.err {
    background-color: #e992b9;
    color: #fff;
    font-size: 0.75em;
    text-align: center;
    line-height: 1;
  }

  th {
    background-color: rgba(130, 56, 50, 0.4);
    font-weight: bold;
    color: #111;
    white-space: nowrap;
  }

  tbody th {
    background-color: #2ea879;
  }

  tbody tr:nth-child(2n-1) {
    background-color: #f5f5f5;
    transition: all .125s ease-in-out;
  }

  tbody tr:hover {
    background-color: rgba(130, 56, 50, .1);
  }


  /* Not needed for sticky header/column functionality */
  td.user-name {
  }

}

table.pages-table.loading {
  tbody {
    opacity: 0.5;
  }
}

table.pages-table.nontransition {

  tbody {

    $transition-property: none;
    $transition-duration: 0.3s;
    $transition-timing: ease-in;

    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }
}

@import "css_common/dzs_feedbacker";

form.no-style {
  display: inline-block;

  button {
    background-color: transparent;
    border: 0;
    cursor: pointer;

  }
}

.widget[id*="dzsvg_showcase_widget"] {
  .widget-content {
    margin-bottom: 25px;
  }
}


hr.dzspb-separator {
  width: 100%;
  height: 1px;
  display: block;
  line-height: 1.5;
  background-color: rgba(0, 0, 0, 0.3);
}


@media only screen and (max-width: 480px) {
  .dzspb_layb_one_half, .dzspb_layb_one_third, .dzspb_layb_two_third, .dzspb_layb_three_fourth, .dzspb_layb_one_fourth, .dzspb_layb_one_fifth, .dzspb_layb_two_fifth, .dzspb_layb_three_fifth, .dzspb_layb_four_fifth, .dzspb_layb_one_sixth, .dzspb_layb_five_sixth {
    position: relative;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    float: none;
    display: block;
  }
  .dzspb_lay_con {
    margin-top: 10px;
  }
}


.dzs-wordpress-uploader {
  display: inline-block;
  vertical-align: middle;
}


div.sidenote {
  display: block;
  margin: 10px 0;
  font-style: italic;
  color: #bbb;
  font-size: 0.9em;
}

/*==== select wrapper END ===*/


/* ------- select hidden metastyle styling */
.select-hidden-con .select-hidden-metastyle {
  position: relative;
}

.select-hidden-con .select-hidden-metastyle select, .select-hidden-metastyle .dzs--select-wrapper {
  display: none;
}

.select-hidden-con .select-hidden-metastyle .option-con {
  position: relative;
  display: block;
}

.select-hidden-con .select-hidden-metastyle .option-con > .an-option {
  position: relative;
  display: block;
  float: left;
  width: 50px;
  height: 50px;
  border: 1px solid rgba(0, 0, 0, 0.3);
  padding: 0px 0px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  /* Firefox */
  -webkit-box-sizing: border-box;
  /* Safari */
  font-family: 'Lucida Grande', 'Lucida Sans Unicode', Arial, sans-serif;
  font-size: 11px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
  backface-visibility: visible;
  background: #111;
  opacity: 0.7;
  cursor: pointer;
}

.select-hidden-con .select-hidden-metastyle .option-con > .an-option > div.fullbg {
  width: 100%;
  height: 100%;
  display: block;
  background-size: cover;
}

.select-hidden-con .select-hidden-metastyle .option-con > .an-option.active {
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3);
  opacity: 1;
}

.select-hidden-con .select-hidden-metastyle .option-con > .an-option > .an-title {
  font-weight: normal;
  color: #0CC;
  font-size: 14px;
  margin-bottom: 5px;
}

.select-hidden-con .select-hidden-metastyle.select-hidden-foritemtype .an-option {
  padding: 5px 10px;
  display: inline-block;
  margin-bottom: 5px;
  width: 230px;
}

.select-hidden-con .select-hidden-metastyle.select-hidden-foritemtype .an-option .an-desc {
  display: none;
}

.select-hidden-con .select-hidden-metastyle.select-hidden-foritemtype .an-option.active .an-desc {
  display: block;
}

/* -------select hidden metastyle styling END */
.select-hidden-con [class*="mode_"] {
  display: none;
}

.select-hidden-con.mode_thumb .mode_thumb {
  display: block;
}

.select-hidden-con.mode_gallery .mode_gallery {
  display: block;
}

.select-hidden-con.mode_audio .mode_audio {
  display: block;
}

.select-hidden-con.mode_video .mode_video {
  display: block;
}

.select-hidden-con.mode_youtube .mode_youtube {
  display: block;
}

.select-hidden-con.mode_vimeo .mode_vimeo {
  display: block;
}

.select-hidden-con.mode_testimonial .mode_testimonial {
  display: block;
}

.select-hidden-con.mode_twitter .mode_twitter {
  display: block;
}


.clear {
  clear: both;
}

.dzsvg-wordpress-uploader {
  display: inline-block;
  vertical-align: middle;
}

.dzs-shortcode-button {
  line-height: 1 !important;
  box-shadow: 0 1px 0 #773f3f !important;

  .the-icon, .the-label {
    display: inline-block;

    vertical-align: middle;
    line-height: 1;
  }

  .the-icon {

    width: 18px;
    height: auto;
    margin: 0 2px;

    svg {

      $size: 15px;
      width: $size;
      height: $size;

      display: block;
    }
  }

  .the-label {

  }
}

.setting-text-ok {
  i {
    color: #208054;;
    display: inline-block;
    margin-right: 5px;
  }
}


.option-con {
  position: relative;
}


.option-con .option-label {
  position: absolute;

  width: auto;

  display: inline-block;

  left: 50%;

  bottom: 15px;

  background-color: rgba(255, 255, 255, 0.7);
  color: #444444;

  padding: 3px 5px;

  font-size: 11px;

  font-weight: bold;

  white-space: nowrap;


  transform: translateX(-50%);


  transition: color, background 0.3s ease-out;
}


body .dzs-select-wrapper.opener-listbuttons .bigoption {
  border: 1px dashed rgba(0, 0, 0, 0.15);
  background-color: rgba(130, 197, 195, 0.05);;

  margin-right: 15px;
  margin-bottom: 15px;
  transition: color, background 0.3s ease-out;
}

body .dzs-select-wrapper.opener-listbuttons .bigoption.active {

  background-color: rgba(130, 197, 195, 0.20);;
}

body .dzs-select-wrapper.opener-listbuttons .bigoption.active .option-label {

  background-color: rgba(30, 30, 30, 0.80);;

  color: #ffffff;
}


body .dzs-select-wrapper.opener-listbuttons .bigoption {

  .option-con {
    > img {
      width: 130px;
      $transition-property: width;
      $transition-duration: 0.3s;
      $transition-timing: ease-out;

      @include apply_transition($transition-property, $transition-duration, $transition-timing);
    }
  }

  &.active {

    .option-con {
      > img {
        width: 150px;
      }
    }
  }
}

body .dzstooltip .dzs-select-wrapper.opener-listbuttons .bigoption {

  .option-con {
    > img {
      width: 80px;
      $transition-property: width;
      $transition-duration: 0.3s;
      $transition-timing: ease-out;

      @include apply_transition($transition-property, $transition-duration, $transition-timing);
    }
  }

  &.active {

    .option-con {
      > img {
        width: 100px;
      }
    }
  }
}


.dzsap-slider-items {
  margin-top: 15px;
  @include boxsizing();

  * {

    @include boxsizing();
  }

  .slider-item, .ui-state-highlight {
    width: 140px;
    height: 100px;

    display: inline-block;

    position: relative;
    margin-right: 5px;

    background-image: url(https://placeholdit.imgix.net/~text?txtsize=33&txt=placeholder&w=1400&h=600);
    background-size: cover;
    background-position: center center;

    > .divimage {
      position: absolute;

      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      background-size: cover;
    }

    > .slider-item--title {
      display: block;
      width: 100%;
      bottom: 0;
      left: 0;
      padding: 10px;
      white-space: nowrap;

      overflow: hidden;
      text-overflow: ellipsis;

      position: absolute;

      background-color: rgba(50, 50, 50, 0.5);

      text-align: center;
      color: #ffffff;
      font-weight: bold;
      font-size: 11px;

      text-transform: uppercase;

    }

    .item-control-btn {
      position: absolute;
      top: 10px;
      left: 10px;

      color: #a86d67;

      font-size: 17px;

      background-color: transparentize(#dddddd, 0.7);
      border-radius: 50%;

      $size: 21px;
      width: $size;
      height: $size;

      cursor: pointer;

      > i {
        @include centerit();
        margin-top: -1px;
      }
    }

    .clone-item-btn {

      left: 33px;
      font-size: 13px;
      top: 11px;

      color: #84a7b7;

      transform: scale(0);
      $transition-property: transform;
      $transition-duration: 0.3s;
      $transition-timing: ease-out;
      @include apply_transition($transition-property, $transition-duration, $transition-timing);
    }


    &:hover {

      .clone-item-btn {

        transform: scale(1);
      }
    }
  }


  .ui-state-highlight {
    background-color: transparentize(#dab37a, 0.5);

    border: 1px dashed rgba(0, 0, 0, 0.15);
  }

}

@import "css_dzsap/sliders_admin";

.input-con.type-upload {
  max-width: 300px;
  display: flex;
  align-items: center;

  > input {
    flex: 100;
    display: inline-block;
    margin-right: 5px;
  }

  > .dzs-wordpress-uploader {
    flex: 0 0 auto;
  }
}


.dzsulb-main-con {
  .show-in-ultibox {
    display: block;
  }
}

@import "css_common/dzs_checkbox";
@import "css_common/dzs_layout";
span.dzs-row {
  display: block;
}

.page-slider-multiple {
  #addtag {
    .form-field {
      display: none;
    }

    .term-name-wrap {
      display: block;
    }
  }
}

.page-slider-single {

  .wrap {
    > .fade, .error, .notice {
      display: none;
    }
  }

  #edittag {
    max-width: 1000px;
  }

  .form-table {
    width: 100%;

    display: block;

    background-color: #ffffff;


    input[type=text], textarea {

      padding: 8px;

    }

    input[type=text], textarea, .button-secondary {
      background-color: #444444;

      color: #eeeeee;

    }

    .dzs-select-wrapper {
      width: 100%;

      &.skin-beige {
        .dzs-select-wrapper-head {

          background-color: #444444;

          color: #eeeeee;
        }
      }
    }

    .button-secondary {
      box-shadow: 0 1px 0 #4a4848;
      border-color: #6d6d6d;
    }

    @include boxsizing();

    * {

      @include boxsizing();
    }

    tbody {
      font-size: 0;
    }

    tr {
      display: inline-block;
      margin-bottom: 15px;
      padding-left: 5px;
      padding-right: 5px;
      width: 50%;
      float: none;
      vertical-align: top;

      input[type=text] {
        width: 100%;
      }
    }

    .description {
      font-size: 11px;
    }

    th, td, tbody {
      display: block;
      padding: 0;
      margin: 0;

      width: 100%;
    }

    tbody {
      width: auto;
      margin-left: -5px;
      margin-right: -5px;
    }

    th {
      margin-bottom: 5px;
    }

    &:after {
      content: "";
      display: block;
      clear: both;
    }

    .term-description-wrap {
      width: 100%;

      textarea {
        height: 40px;
        width: 100%;
      }
    }

    .clear {
      width: 100%;
      display: block;

      margin-bottom: 0;
      float: none;
    }

    .uploader-three-floats {
      display: flex;
      width: 100%;
      align-items: center;

      > .description {

      }

      > .uploader-preview, .dzs-wordpress-uploader {
        flex: 0 0 auto;
      }

      > input[type=text] {
        flex: 100;
      }
    }
  }

  #edittag {
    margin-bottom: 15px;
  }

  .edit-tag-actions {
    padding-left: 0;
  }
}



.opener-listbuttons-flex-full {

  .opener-listbuttons-wrap {

    display: flex;

    > .bigoption {
      flex: 1;

      img {
        max-width: 100%;
      }
    }
  }
}


.setting-three-floats {

  display: flex;

  > .preview-media-con-left {
    float: none;
    margin-right: 5px;

    flex: 100;
  }

  > .change-media-con {

    flex: 0 0 auto;
    margin-left: 5px;
  }

  .overflow-it {
    flex: 100;
    overflow: auto;
  }
}

.overflow-it {
  overflow: hidden;
}


@import "css_common/dzs_buttons";


/*

dzs tooltips

arrow-top,
arrow-bottom
 -- align-left
 -- align-center (js)
 -- align-top

arrow-left,
arrow-right
 -- align-top
 -- align-center (js)
 -- align-bottom


custom css3 effects

*see about custom animation

*/

@mixin apply_transition($transition-property, $transition-duration, $transition-timing) {
  transition-property: $transition-property;
  transition-duration: $transition-duration;
  transition-timing-function: $transition-timing;


}

@mixin boxsizing() {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


$transition-property: visibility, opacity;
$transition-duration: 0.3s;
$transition-timing: ease-out;


$color_bg: rgba(20, 20, 20, 0.9);
$color_txt: #eeeeee;


.slider-item--title {
  pointer-events: none;
}

#screen-options-wrap {
  &.preparing-transitioning-in {

    max-height: 0;
    transform: scale(0.5);
    opacity: 0;

    $transition-property: opacity, transform, max-height;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;

    @include apply_transition($transition-property, $transition-duration, $transition-timing);
  }

  &.transitioning-in {

    max-height: 190px;
    transform: scale(1);
    opacity: 1;
  }
}

.import-slider-form {
  display: none;

  margin: 0;
  padding: 15px;

  h3 {
    margin-top: 0;
  }
}

#import-options-link-wrap {
  float: right;
  height: 28px;
  margin: 0 0 0 6px;
  border: 1px solid #ddd;
  border-top: none;
  background: #fff;
  -webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, .1);
  box-shadow: 0 1px 1px -1px rgba(0, 0, 0, .1);
}

#screen-meta-links #import-options-link-wrap.active .show-settings:after {
  content: "\f142";
}

.setting-skin_ap {

  .dzs-select-wrapper.opener-listbuttons .bigoption {
    .option-con > img {
      width: 200px;
    }

    &.active {

      .option-con > img {
        width: 200px;
      }
    }
  }


  .option-label {
    bottom: 5px;
  }
}

.setting-text-notok {
  opacity: 0.7;
}




/*

dzs tooltips

arrow-top,
arrow-bottom
 -- align-left
 -- align-center (js)
 -- align-top

arrow-left,
arrow-right
 -- align-top
 -- align-center (js)
 -- align-bottom


custom css3 effects

*see about custom animation

*/

@mixin apply_transition($transition-property, $transition-duration, $transition-timing) {
  transition-property: $transition-property;
  transition-duration: $transition-duration;
  transition-timing-function: $transition-timing;
}

@mixin boxsizing() {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}


$transition-property: visibility, opacity;
$transition-duration: 0.3s;
$transition-timing: ease-out;


$color_bg: rgba(20, 20, 20, 0.9);
$color_txt: #eeeeee;




$color_highlight: #e74c3c;




@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.dzsap-dashicon-preloader {
  animation: spin 4s infinite linear;
  margin-left: 5px;
  color: #777777;

  opacity: 0;

  $transition-property: opacity;
  $transition-duration: 0.3s;
  $transition-timing: ease-out;
  @include apply_transition($transition-property, $transition-duration, $transition-timing);

}

.for-feed_mode-import-folder {

  &.loading {

    .dzsap-dashicon-preloader {

      opacity: 1;
    }
  }

}


$color_highlight: #ffffff;




@import "css_dzsap/gutenberg";

.gt-zoomsounds-examples-con {
  h6 {
    cursor: pointer;
  }

  &:not(.opened) {

    div {
      display: none;

    }

    .dzs-player-examples-con {
      display: none;
    }
  }

  .the-icon {
    display: inline-block;
  }

  &.opened {


    .the-icon {
      transform: scale(0.5);
    }
  }
}

.dzs-player-examples-con {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  grid-gap: 10px;
  width: calc(100% - 10px);
}

.dzs-player-example {
  background-color: #EEEEEE;
  cursor: pointer;

  width: 100%;
  display: block;
  overflow: hidden;

  .the-img {
    display: block;
    width: 100%;
    display: block;
    overflow: hidden;
  }

  h6 {
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 10px;
    text-transform: uppercase;
    font-size: 11px;
    font-family: arial, sans-serif;
  }
}

.setting-skin-layout {
  .opener-listbuttons-wrap {

    display: flex;
    align-items: center;
  }
}

.zoomsounds-inspector-setting {
  .render-song-selector {
    &:last-child {
      margin-bottom: 10px;
    }
  }
}

.system-check{
  .setting{
    h4{
      margin-bottom: 5px;
    }
    margin-bottom: 15px;
  }
}
.dzs-tabs-dzsvp-page{
  i{
    margin-right: 3px;
  }
}

// -- mainoptions
body.zoomsounds_page_dzsap-mo{
  textarea{
    width: 100%;
  }
}
.regenerate-waveform-iframe{
  padding: 5px 0;

  border: 1px dashed rgba(0,0,0,0.3);
}

@import "css_common/dzs_big-search";
@import "css_common/admin_common";
@import "css_common/nicehr";
@import "css_common/preloader_spinner";
@import "css_common/nag_intro_tooltip";
@import "css_dzsap/mainoptions";
@import "css_dzsap/vp-settings";