@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;
}

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

.dzsulb-main-con {
  z-index: 555555 !important;
}


.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;
  }
}

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

    margin-bottom: 5px;
    >*{
      display: inline-block;
      vertical-align: middle;

      +*{
        margin-left: 5px;
      }
    }
  }
  &+.setting{
    margin-top: 15px;
  }
}
.tooltip-info-indicator{
  vertical-align: top;
}
.setting-upload {
  .input-con {
    display: flex;
    align-items: center;
    justify-content: center;

    .uploader-preview, .dzs-wordpress-uploader, .refresh-main-thumb {
      flex: 0 0 auto;
    }

    > * + * {
      margin-left: 3px;
    }

    .setting-field {
      flex: 100;
      max-width: 200px;
    }

  }
}


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

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

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


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

  p {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
}

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


/* ---- styleme selector */
.dzs--select-wrapper {
  background: url("img/select.png") no-repeat scroll right center #fefefe;
  width: 190px;
  height: 28px;
  border-color: #CCCCCC #EEEEEE #EEEEEE #CCCCCC;
  border-radius: 4px 4px 4px 4px;
  border-style: solid;
  border-width: 1px;
  color: #888888;
  display: inline-block;
}

.dzs--select-wrapper select {
  cursor: pointer;
  height: 28px;
  padding: 0;
  margin-left: 0;
  opacity: 0;
  position: relative;
  width: 100%;
  z-index: 4;
}

.dzs--select-wrapper span {
  height: 26px;
  line-height: 26px;
  padding-left: 6px;
  position: absolute;
  z-index: 2;
}

html[dir=rtl] .dzs--select-wrapper span {
  margin-right: 36px;
}

/* ---- styleme selector END */


body .dzs--dzs-select-wrapper .dzs--dzs-select-wrapper-head {
  background-color: #ffffff;
}

body .dzs--dzs-select-wrapper {
  width: 200px;
}


$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);
  }
}


.weight-strong {
  font-weight: bold;
}


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

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

  }
}

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


/* ------- Page Builder Columns ------- */
.dzspb_lay_con, .dzspb_layb_layout {
  position: relative;
  margin-left: -15px;
  margin-right: -15px;
  margin-top: 15px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.dzspb_lay_con:after, .dzspb_layb_layout:after {
  display: block;
  content: " ";
  clear: both;
}

.dzspb_lay_con *, .dzspb_layb_layout * {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}

.dzspb_layb_one_full {
  padding-right: 15px;
  padding-left: 15px;
}

.dzspb_layb_one_half {
  width: 50%;
}

.dzspb_layb_one_third {
  width: 33.3333%;
}

.dzspb_layb_two_third {
  width: 66.6666%;
}

.dzspb_layb_one_fourth {
  width: 25%;
}

.dzspb_layb_three_fourth {
  width: 75%;
}

.dzspb_layb_one_fifth {
  width: 20%;
}

.dzspb_layb_two_fifth {
  width: 40%;
}

.dzspb_layb_three_fifth {
  width: 60%;
}

.dzspb_layb_four_fifth {
  width: 80%;
}

.dzspb_layb_one_sixth {
  width: 16.6%;
}

.dzspb_layb_five_sixth {
  width: 83.3%;
}

.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;
  padding-right: 15px;
  padding-left: 15px;
  float: left;
}

.clearboth {
  clear: both;
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
  width: 100%;
}

.dzspb_layb_layout:after {
  content: "";
  display: block;
  clear: both;
}


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;
}





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

.select-hidden-con .select-hidden-metastyle select, .select-hidden-metastyle .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;
  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;
  background-repeat: no-repeat;
}

.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: top;
}


.setting-three-floats {
  > .preview-media-con-left {
    float: left;
    margin-right: 5px;
  }

  > .change-media-con {

    float: right;
    margin-left: 5px;
  }
}

.overflow-it {
  overflow: hidden;
}


// -- gutenberg classic editor START
.dzs-shortcode-button {

  line-height: 1 !important;
  box-shadow: 0 1px 0 #773f3f !important;
  padding: 0 10px 1px 3px;

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

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

  .the-icon {

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

    svg {

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

      display: block;
    }
  }

  .the-label {

  }
}

.mce-btn-group {

  .dzs-shortcode-button {


    .the-icon {
      margin-right: 0;
      padding: 5px;

    }

    .the-label {
      font-size: 0px;

      pointer-events: none;


    }

    &:hover {
      position: absolute;
      z-index: 5555;

      .the-icon {

        margin-right: 3px;
      }

      .the-label {
        font-size: 14px;
      }
    }

  }
}

// -- gutenberg classic editor END


body.video-gallery_page_dzsvg-mo {
  .dzsulb-main-con.close-btn-inset .close-btn-con {
    right: 20px;
    width: 40px;
    height: 40px;


  }

  .dzsulb-main-con .box-main .close-btn-con:before {
    background-color: #8e7b7b;
  }
}

#import-sample-lib {
  h3 {
    color: #fffde8;
  }
}


.dzsvg-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://via.placeholder.com/400);
    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);
  }

}


body.taxonomy-dzsvg_sliders {


  tbody{
    .column-posts{
      font-size: 17px;
    }
  }
  .dzsvg-sliders {
    display: none;
  }

  .wrap {
    > h1 {
      display: flex;
      align-items: center;

      .the-gallery-slug {

        margin-left: 5px;
        font-weight: 300;
      }
    }
  }

  h5 {
    margin-bottom: 8px;
  }

  #ajax-response {
    &.empty {
      font-size: 0;
    }
  }

  .do-not-hide-spectrum-input {
    display: block !important;
  }

  .button-primary {
    z-index: 55;
  }


  .sliders-admin-label {
    opacity: 0.7;

    font-size: 14px;

    font-weight: 300;

    & + .dzsvg-slider-items {
      margin-top: 0;
    }
  }

  .edit-tag-actions {
    > input {
      position: fixed;
      bottom: 15px;
      right: 15px;
      padding: 10px 20px;
      height: auto;
      font-size: 15px;

      z-index: 55;

    }
  }

  .setting.rounded-highlight .dzs-select-wrapper.opener-listbuttons .bigoption.active {
    border-radius: 50%;
    background-color: #fc20208a;
  }

  .tooltip--sliders-admin {
    background-color: rgba(50, 50, 50, 0.99);
    width: 402px;

    input[type=text].setting-field, textarea.setting-field {
      border-radius: 5px;
      padding: 5px;
    }

    textarea {
      width: 100%;
    }
  }

  .for-feed_mode-manual {

    .add-btn {

      display: inline-block;
    }
  }

  .add-btn {
    margin-top: 15px;
    position: relative;

    > i {
      font-size: 42px;
      transform: scale(1);
      $transition-property: transform;
      $transition-duration: 0.3s;
      $transition-timing: ease-out;
      @include apply_transition($transition-property, $transition-duration, $transition-timing);
    }


    > .add-btn-new, > .add-btn-existing {

      transform: scale(0) rotate(0deg);

      position: absolute;
      left: 100%;
      margin-left: 15px;
      top: 0;

      transform-origin: bottom left;


      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0);
      $transition-property: transform, top, box-shadow;
      $transition-duration: 0.3s;
      $transition-timing: ease-out;
      @include apply_transition($transition-property, $transition-duration, $transition-timing);
    }

    .add-btn-existing {
      top: 20px;
      transform-origin: top left;
    }

    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 100%;
      height: 100%;
      width: 0px;
    }

    &:hover {
      &:before {
        width: 100px;
      }


      > .add-btn-new, .add-btn-existing {

        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);
      }

      > .add-btn-new {

        top: -20px;
        transform: scale(1) rotate(-5deg);
      }

      > .add-btn-existing {

        top: 30px;
        transform: scale(1) rotate(5deg);
      }

      > i {
        transform: scale(1.1);
      }
    }
  }
}

.slider-label {
  > span {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
  }

  .editing, .the-gallery-slugger {
    display: none;
  }

  .slider-status.loading {

    background-color: #5c6834;
  }

  .slider-status {

    .slider-status--inner {


      line-height: 1;
      white-space: nowrap;
      padding: 5px 10px;
      background-color: #347534;
      color: #ffffff;

      border-radius: 5px;

      margin-left: 15px;

      font-size: 11px;

      $transition-property: margin, width, height, padding, font-size, line-height, background;
      $transition-duration: 0.3s;
      $transition-timing: ease-out;
      @include apply_transition($transition-property, $transition-duration, $transition-timing);


      > i {

        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
      }

      > .text-label {

        display: inline-block;
        vertical-align: middle;

        position: relative;
        top: -1px;
      }
    }
  }

  .slider-status.empty {
    .slider-status--inner {
      font-size: 0;
      line-height: 0;
      padding: 0;
    }


  }
}


.dzsvg-update-available {
  padding: 10px;
}

.update-available {
  color: #d66055;
}


.dzscheckbox.skin-nova input[type="checkbox"] {
  visibility: hidden;;
}

/* SLIDE THREE */
.dzscheckbox.skin-nova {
  width: 80px;
  height: 26px;
  background: #eee;

  border-radius: 10px;
  position: relative;

  box-shadow: 0 0 0 1px rgba(0, 20, 0, 0.1);

  box-sizing: border-box;
  display: block;
}

.dzscheckbox.skin-nova * {

  box-sizing: border-box;
}

.dzscheckbox.skin-nova:after {
  content: 'OFF';
  font: 11px/26px "Open Sans", Arial, sans-serif;
  color: #000;
  position: absolute;
  right: 10px;
  z-index: 0;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, .15);
}

.dzscheckbox.skin-nova:before {
  content: 'ON';
  font: 11px/26px Arial, sans-serif;
  color: #c9302c;
  position: absolute;
  left: 10px;
  z-index: 0;
}

.dzscheckbox.skin-nova label {
  display: block;
  width: 34px;
  height: 20px;

  border-radius: 10px;

  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -o-transition: all .3s ease-out;
  -ms-transition: all .3s ease-out;
  transition: all .3s ease-out;
  cursor: pointer;
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 1;

  background: #aaa;
}


.dzscheckbox.skin-nova > input[type="checkbox"]:checked + label {
  left: 43px;
}

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

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

  > .upload-for-target {
    flex: 0 0 auto;
  }
}


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




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

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

.page-slider-single {

  #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;

          padding: 15px;
          border-radius: 5px;

          height: auto;
        }
      }
    }

    .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;
  }
}


.sliders-con {

  margin-bottom: 15px;

  tfoot, .check-column {
    display: none;
  }

  .widefat td {
    padding-bottom: 15px;
    padding-top: 10px;
  }

  .name {
    padding-left: 15px;
  }

  .row-title {
    font-size: 21px !important;

    margin-bottom: -3px;

    font-weight: 300;

    display: block;

    margin-bottom: -15px;

    margin-top: 5px;

    filter: brightness(118%) grayscale(52%);


    $transition-property: margin, font;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;

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

  .row-actions {
    max-height: 0;

    transform: scale(0);

    transform-origin: top left;

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

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


  tr:hover {
    .row-title {
      font-size: 14px !important;;
      margin-bottom: -13px;


    }

    .row-actions {
      transform: scale(1);
      max-height: 50px;
    }
  }

  > #col-right {
    display: block;
    float: none;
    width: 100%;

    .row-actions {
      position: static;
    }

    .tablenav.top, .tablenav.bottom {

      .bulkactions {

        display: none;
      }
    }
  }
}

.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;
}


/*

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: #7eafda;
span.dzs-button, a.dzs-button {
  display: inline-block;
}

.dzs-button {

  cursor: pointer;
  position: relative;


  line-height: 1.6;

  font-size: 13px;

  color: #fff9f9;


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

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

  &:before {
    content: '';
    position: absolute;
    transform: translate3d(0, 0, 0);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #444444;
    $transition-property: background, transform, opacity;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;

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

  & {

    padding: 7px 12px;
  }

  .the-text {
    position: relative;
    display: inline-block;
    $transition-property: background, transform, opacity;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;

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


  $color_light: #eee;
  $color_dark: #444;

  &.color-normal-dark, &.color-over-dark:hover {

    color: $color_light;

    &:before {

      background-color: $color_dark;
    }
  }

  &.color-normal-light, &.color-over-light:hover {

    color: $color_dark;

    &:before {
      background-color: $color_light;
    }
  }

  &.color-normal-highlight, &.color-over-highlight:hover {

    color: $color_light;

    &:before {
      background-color: $color_highlight;
    }
  }


  &.btn-style-border-outside {
    &.color-normal-highlight {
      color: $color_highlight;
      border-color: $color_highlight;
    }

    &.color-over-highlight:hover {
      color: $color_light;
      border-color: $color_highlight;

      &:before {
        opacity: 1;
        background-color: $color_highlight;

      }
    }
  }

  &.btn-style-border-outside {
    &.color-normal-dark {
      color: $color_dark;
      border-color: $color_dark;
    }

    &.color-over-dark:hover {
      color: $color_light;
      border-color: $color_dark;

      &:before {
        opacity: 1;
        background-color: $color_dark;

      }
    }
  }

  &.btn-style-border-outside {
    &.color-normal-light {
      color: $color_light;
      border-color: $color_light;
    }

    &.color-over-light:hover {
      color: $color_dark;

      border-color: $color_light;

      &:before {
        opacity: 1;
        background-color: $color_light;

      }
    }
  }


  &.skinvariation-border-radius-more {
    &, &:before {
      border-radius: 20px;
    }

    &.btn-padding-hero {
      &, &:before {

        border-radius: 30px;
      }
    }

    &.btn-style-border-outside {
      &:before {
        border-radius: 15px;
      }
    }
  }


  &.font-size-small {
    font-size: 11px;
  }

  &.font-size-big {
    font-size: 17px;
  }


  &.image-background {
    background-size: cover;


    background-position: center center;

    &:before {
      display: none;
    }

    .the-text {
      text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
    }
  }


  .the-text {

    > i {
      font-size: 120%;
      opacity: 0.6;
    }

    i {
      display: inline-block;
      vertical-align: middle;

      margin-right: 10px;


      & + .the-text-text {

        display: inline-block;
        vertical-align: middle;

      }
    }
  }

}


.btn-style-border-outside.effect-background-touch {
  perspective: 800px;

  &:before {
    transform: translate3d(0, 0, -100px) scale(0.9);
  }

  &:hover:before {

    transform: translate3d(0, 0, 0px) scale(1);
  }
}

.effect-background-scale {

  &:before {

    transform: translate3d(0, 0, 0px) scale(1);
  }

  .the-text {

    transform: translate3d(0, 0, 0px) scale(1);
    display: inline-block;


    font-size: 100%;

    $transition-property: font;
    $transition-duration: 0.3s;
    $transition-timing: ease-out;

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

  &:hover {

    .the-text {

      transform: translate3d(0, 0, 0px) scale(1);
      font-size: 105%;
    }

    &:before {

      transform: translate3d(0, 0, 0px) scale(0.9);
    }
  }

}

.effect-opacity {
  opacity: 0.8;

  &:hover {
    opacity: 1;
  }

}

.dzs-btn-shadow {
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

.btn-padding-small {


  & {
    font-size: 80%;
    padding: 3px 8px;
  }
}

.btn-padding-medium {

}

.btn-padding-big {

  & {
    padding: 12px 19px;
  }

}

.btn-padding-hero {

  & {
    padding: 18px 27px;
  }

}

.text-strong {
  font-weight: 700;
}

.btn-style-default {


  &, &:before {

    border-radius: 5px;
  }


}

.btn-style-border-outside {


  color: #222222;
  font-weight: bold;
  border: 2px solid rgba(50, 50, 50, 1);

  &:before {

    opacity: 0;

  }

  &:hover {

  }


}

.dzs-button + .dzs-button {
  vertical-align: bottom;
  margin-left: 5px;
}

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

.setting-for-item-type {
  .opener-listbuttons-wrap {
    font-size: 0;
  }

  .option-con .option-label {
    bottom: -2px;
  }

  .bigoption {
    width: 20%;
    display: inline-block;

    vertical-align: top;

    img {
      width: 100%;
    }
  }
}

#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";
}

.dzs-tabs-meta-item {
  .tabs-menu {
    text-align: center;
  }

  .tab-content {

    text-align: center;
  }
}

.tab-content {

  .setting-label {

    margin-top: 2px;
    font-weight: bold;
    font-size: 14px;
  }

  > .setting:first-of-type {
    &, .setting-label {

      margin-top: 0;
    }
  }
}


.for-feed_mode-manual {
  display: none;
}

.dzsvg-sliders-con[data-feed_mode="manual"] {
  .for-feed_mode-manual {
    display: block;

    &.add-btn {
      display: inline-block;
    }
  }
}

.for-feed_mode-youtube {
  display: none;
}

.dzsvg-sliders-con[data-feed_mode="youtube"] {
  .for-feed_mode-youtube {
    display: block;
  }
}

.for-feed_mode-vimeo {
  display: none;
}

.dzsvg-sliders-con[data-feed_mode="vimeo"] {
  .for-feed_mode-vimeo {
    display: block;
  }
}

.for-feed_mode-facebook {
  display: none;
}

.dzsvg-sliders-con[data-feed_mode="facebook"] {
  .for-feed_mode-facebook {
    display: block;
  }
}

.for-feed_mode-import-folder {
  display: none;
}

.dzsvg-sliders-con[data-feed_mode="import-folder"] {
  .for-feed_mode-import-folder {
    display: block;
  }
}

.align-inside-middle {
  > *:not(.a):not(.a) {
    display: inline-block;
    vertical-align: middle;
  }
}


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

.dzsvg-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 {

    .dzsvg-dashicon-preloader {

      opacity: 1;
    }
  }

}


@import "admin-css/sliders-admin";


.capability-div {

  > * {
    display: inline-block;
    vertical-align: middle;
  }

  > strong {
    margin-right: 10px;

    width: 260px;
  }

  > span {
    opacity: .7;
  }
}

.big-rounded-field:not(.a) {
  background-color: #e2dede;
  border-radius: 5px;
  font-size: 13px;
  box-shadow: none;
  padding: 10px;
}


/// -- gutenberg block css
.gutenberg-dzsvg-con {
  > * {
    pointer-events: none;
  }
}

.react-setting-container {

  & + & {
    margin-top: 10px;
  }

  display: flex;
  align-items: center;

  &--label {

    font-size: 11px;
    font-style: italic;

    flex: 0 0 100px;
  }

  &--control {
    flex: 100;
    max-width: calc(100% - 100px);

    .editor-rich-text__tinymce {
      white-space: nowrap;
      width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}

@import "admin-css/general";


.wp-block {


  .wp-content-media-buttons {
    display: none;
  }

  &.is-selected {

    .wp-content-media-buttons {
      display: block;
    }

  }
}

.dzs-dependency-recently-revealed {
  box-shadow: 0 0 10px 0 rgba(255, 121, 153, 0.44);
}

.dzs-tabs.skin-qcre {
  .tabs-content {
    overflow: visible;
  }
}


body .tooltip-indicator:hover + .dzstooltip, body .dzstooltip.active {
  z-index: 56566;
}

.is-not-valid:not(.a):not(.a):not(.a){
  border: 2px solid red;
}

@import "css_common/admin_common";
@import "css_common/gutenberg";
@import "css_common/dzs_feedbacker";
@import "css_common/dzs_layout";

// -- main options
.dzs--main-setings--search-con {
  margin-bottom: 15px;

  > div {
    display: inline-block;
    position: relative;

    input {
      &::-webkit-search-cancel-button {
        position: relative;
        right: 21px;
        cursor: pointer;
      }
    }

    > i {
      position: absolute;
      right: 10px;
      $size: 20px;
      top: 50%;
      transform: translate3d(0%, -50%, 0);

      opacity: 0.5;
      width: $size;
      height: $size;

      > svg {

        width: 100%;
        height: 100%;
      }
    }
  }
}


@import "admin-css/page-about";

.dzssa--sample-shortcode-area--readonly{
  background-color: #dadada;
  padding: 15px;
}