// wp-content/plugins/tarokina-free/compilador_scss.php?p=back_carta.scss
@import "back_funciones";
@import "back_colors";
@import "back_base";
@import "back_bloqueo.scss";

.post-type-tarokkina_free {


  .textEditCard{
    position: relative;
    bottom: 112px;
    text-align: center;
    color: #7e7e7e;
    font-size: 15px;
  }

  // Grid
  .grid_bloq{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .addons_bloq {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    & > div a {
      display: inline-block;
      img{
        max-width: 200px;
        height: 100%;
        margin: 4px;
        -webkit-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s;
        &:hover{
          -webkit-box-shadow: 0px 15px 30px -17px rgba(#000,0.75);
                  box-shadow: 0px 15px 30px -17px rgba(#000,0.75);
        }
      }
    }
  }
}

.wrap div#message {
  margin-top: 30px !important;
}

#tarokkina_free-catchecklist {
  & li {
    margin-left: 20px;
  }
  input[type="radio"] {
    width: 34px;
    height: 34px;
    margin: 0 0 8px;
    border: none;
    position: relative;
    right: 20px;
    &::before {
      height: 34px;
    }
    &:focus {
      border: none;
    }
  }
  input[type="radio"]:checked {
    border: 2px solid $primary-color;
    position: relative;
    &::before {
      content: url('data:image/svg+xml;base64,PHN2ZyBpZD0iQ2FwYV8xIiBkYXRhLW5hbWU9IkNhcGEgMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgMTk4Ljg0IDE5OC44NCI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiNmZmY7fS5jbHMtMntmaWxsOiM3NDJjN2E7ZmlsbC1ydWxlOmV2ZW5vZGQ7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5kZWNrX2NoZWNrYm94PC90aXRsZT48ZyBpZD0iY2lyY3VsbyI+PGNpcmNsZSBjbGFzcz0iY2xzLTEiIGN4PSI5OS40MiIgY3k9Ijk5LjQyIiByPSI5OS40MiIvPjwvZz48ZyBpZD0icHJvIj48cGF0aCBjbGFzcz0iY2xzLTIiIGQ9Ik0xNjkuODYsMTE2LjEyYy0xOS4xNyw5LjI3LTM4LjQsMTguMzktNTcuNDcsMjcuODZhNDMsNDMsMCwwLDEtMzEuNTMsMy4yMWMtMTMuNDQtMy42NC0yNi45My03LjA1LTQwLjM3LTEwLjY5YTcsNywwLDAsMC02Ljg2LDEuNThjMS40OS40MywyLjcuODEsMy45MywxLjEzLDE4LjE3LDQuNzYsMzYuMzUsOS40OSw1NC41LDE0LjMyYTguMTgsOC4xOCwwLDAsMCw2LjExLS42M3EzMy4yMi0xNi4xNyw2Ni41Mi0zMi4xN2MzLTEuNDUsNi0yLjkzLDkuMzMtNC41OEEzLjcsMy43LDAsMCwwLDE2OS44NiwxMTYuMTJaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNODIuNTIsMTEwLjc2YzUuNzYsMS44MywxMC4zNiwxLjQ2LDE1LjU2LTEuNzMsNy4wOC00LjM0LDE0LjE2LTguNTQsMTkuNjQtMTUuMDgsOS0xMC43NSwxMi44LTIzLDEwLTM3LjI3YTMuODgsMy44OCwwLDAsMC0zLjA5LTMuMzVjLTE3LjE1LTUtMzQuMjgtMTAuMDYtNTEuNDItMTUuMS0zLjA3LS45MS0zLjA3LS44OS0yLjU4LDIuMzFBNDAuMzQsNDAuMzQsMCwwLDEsNjcuMiw2NC42N0M2MC43OCw3OCw1MC43MSw4Ny4zMiwzNy43NSw5My4zOGMtMS42OS43OC0zLjM5LDEuNTQtNS4wOSwyLjMxbC4xNy42MmMuNjQuMjEsMS4yOC40MywxLjkyLjYxQzUwLjY5LDEwMS40OSw2Ni43MSwxMDUuNzYsODIuNTIsMTEwLjc2WiIvPjxwYXRoIGNsYXNzPSJjbHMtMiIgZD0iTTkyLjM1LDEyNS45YTcuMjEsNy4yMSwwLDAsMCw1LjM5LS41MlExMjcuMzgsMTExLDE1Ny4wOSw5Ni42N2wxNi44LTguMTRjLS42MS0uNDMtLjgtLjY1LTEtLjctMTEuODktMy4xNS0yMy43OS02LjI2LTM1LjY2LTkuNDUtMS43OS0uNDgtMi4yLjQ2LTIuNjYsMS44OC00Ljg3LDE1LjA4LTE0LjYzLDI1Ljc5LTI3LjcyLDMzLjQ3LTMuNzgsMi4yMi03LjY5LDQuMjEtMTEuNDUsNi40OWE4Ljc3LDguNzcsMCwwLDEtNy41NCwxYy0xNC45Mi00LjM5LTI5LjkyLTguNTItNDQuODEtMTMtMy42NS0xLjExLTYuMzIuMTItOS41OCwyLjIxbDQuMTQsMS4xQzU1Ljg1LDExNi4yOSw3NC4xMSwxMjEuMDUsOTIuMzUsMTI1LjlaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNMTY3LDEwMi41N2MtMTguMjEsOC44Ny0zNi41MiwxNy41LTU0LjY3LDI2LjVBNDIuNzgsNDIuNzgsMCwwLDEsODEsMTMyLjNjLTExLjc4LTMuMTktMjMuNjYtNi0zNS4zNy05LjQ3LTQuNTQtMS4zNS04LjA4LS4xNS0xMi4xMSwyLjQxLjgxLjI4LDEuMi40NSwxLjYuNTZxMjguNjIsNy41LDU3LjIxLDE1YTcuMjEsNy4yMSwwLDAsMCw1LjM5LS41M1ExMzEuMzIsMTI0LDE2NSwxMDcuOGw5LjIzLTQuNUMxNzEuMzgsMTAyLjM2LDE2OS40MSwxMDEuNCwxNjcsMTAyLjU3WiIvPjwvZz48L3N2Zz4=');
      background: none;
      margin: 0;
      width: 30px;
    }
    &::after {
      content: "\f147";
      font-family: dashicons;
      color: #ffffff;
      font-size: 19px;
      position: absolute;
      top: 11px;
      right: -20px;
    }
  }
}

#normal-sortables,
#advanced-sortables {

  .carbon-box .hndle {
    pointer-events: none !important;
    cursor: default !important;
  }
}

#normal-sortables.empty-container,
#advanced-sortables.empty-container {
  z-index: 1 !important;
  background-color: #f1f1f1;

  .carbon-box .hndle {
    pointer-events: none !important;
    cursor: default !important;
  }
}

#poststuff {
  padding-top: 32px;
}

#slugdiv {
  #post_name {
    width: 99%;
  }
}

// Mensaje Si no hay tarots
.cartaContainer {
  position: relative;
  top: 110px;
  z-index: 1;
  color: #d5d5d5;
  padding: 18px 18px;
  border-radius: 3px 3px 0 0;
  font-size: 1.6vw;
  font-weight: 200;
  text-align: center;

  @media (max-width: 850px) {
    display: none;
  }
}

.post-php.post-type-tarokkina_free,
.post-new-php.post-type-tarokkina_free {
  #tarokkina_free-catdiv,
  #postimagediv {
    .order-lower-indicator,
    .order-higher-indicator {
      color: #ffffff;
    }
  }

  #tarokkina_free-catdiv,
  #postimagediv {
    background: $primary-color;

    .hndle,
    p {
      color: #fff;
    }

    .inside {
      background: $primary-color;

      p:nth-child(1) {
        background: $primary-color;
        padding: 22px 0;
      }
    }

    #tarokkina_free-cat-tabs,
    #tarokkina_free-cat-adder {
      display: none;
    }

    .postbox-header,
    .tabs-panel {
      border: none;
    }

    .toggle-indicator {
      color: #fff;
    }

    .categorydiv div.tabs-panel {
      background: lighten($primary-color, 4%);
      color: #fff;
    }

    a {
      color: #fff;
    }
  }

  #postimagediv {
    .postbox-header{
      background: #80d580;
    }
    p {
      text-align: center;
    }
  }
}

///////////////////////////////////////////////////////////////////

.post-php.post-type-tarokkina_free {
  .tarotCartas {
    padding: 15px;
    border: 1px solid #333;
    border-radius: 5px;
    margin: 15px 0;
  }

  #delete-action {
    width: 100%;
    line-height: 1.3;
  }

  #titlediv {
    margin-bottom: 40px;
    #title-prompt-text {
      padding: 16px;
    }

    #title {
      font-weight: bold;
      font-size: 24px;
    }
  }

  #titlediv #title-prompt-text {
    width: 100%;
    text-align: center;
    display: inline-block;
    top: 10px;
  }

  #titlediv #title {
    font-weight: bold;
    font-size: 30px;
    color: #fff;
    text-align: center;
    background: #80d580;
    border: 1px solid #e1e1e1;
    margin-bottom: -10px;
    border-radius: 0;
    padding: 28px;
  }

  #postbox-container-2 .meta-box-sortables {
    // background-color: #ffffff;
    // padding: 30px 15px;

    .cf-container__fields {
      margin: 0;

      .text_F1 {
        background: #f5f9fb;
      }

      .cf-textarea.text_F1 {
        padding-bottom: 70px;
      }

      .text_F2 {
        background-image: -o-linear-gradient(top, darken(#fff6f6, 3%), #fff6f6);
        background-image: -webkit-gradient(linear, left top, left bottom, from(darken(#fff6f6, 3%)), to(#fff6f6));
        background-image: linear-gradient(180deg, darken(#fff6f6, 3%), #fff6f6);
      }

      .cf-textarea.text_F2 {
        padding-bottom: 70px;
      }
    }

    & .carbon-box {
      display: block !important;
      border: 3px solid $primary-color;
      -webkit-box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
        0px 6px 10px 0px rgba(0, 0, 0, 0.14),
        0px 1px 18px 0px rgba(0, 0, 0, 0.12);
      box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
        0px 6px 10px 0px rgba(0, 0, 0, 0.14),
        0px 1px 18px 0px rgba(0, 0, 0, 0.12);
      background: #f1f1f1;
      z-index: 9;
      max-width: 1100px;
      margin: 0 auto;
      margin-bottom: 25px;

      .hndle {
        color: $primary-color;
        // pointer-events: none !important;
        // cursor: default !important;
      }

      .postbox-header {
        background: $primary-color;
        direction: ltr;
      }

      .inside {
        padding: 20px;
        background: $primary-color;
      }
    }

    & .carbon-box.closed {
      border: 3px double #ccc;
      background: #fff;
      -webkit-box-shadow: none;
      box-shadow: none;

      .hndle {
        color: #444;
        font-size: 16px;
        // pointer-events: none !important;
        // cursor: default !important;
      }

      .postbox-header {
        background: #fff;

        .toggle-indicator {
          color: #444;
        }
      }

      .t_mode {
        color: #fff;
        background: $primary-color;
        letter-spacing: 0.5px;

        .spre {
          color: #ffffff;
        }
      }
    }
  }

  .bloq_contCards {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
  }

  .t_mode {
    font-size: 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    color: #ffffff;
    height: 22px;
    padding: 10px 20px;
    margin-right: 20px;
    text-align: center;

    .spre {
      font-size: 13px;
      font-weight: 700;
      color: #ffffff;
      letter-spacing: 1px;
      font-style: italic;
    }
  }

  $colorTA: #4d4d4d;
  $colorTitle: #353535;
  $colorTextclaro: #696969;

  .cab_carta {
    margin: 50px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;

    .cab_cartaA {
      background: #eef2f4;
      padding: 20px 20px 0;
      font-size: 13px;
      img {
        float: left;
        margin-right: 10px;
      }
      .spreadT {
        padding-right: 10px;
        font-size: 15px;
        font-weight: bold;
        color: $colorTitle;
      }

      .textTopMce {
        span {
          background: #363636;
          color: #fff;
          border-radius: 50%;
          display: inline-block;
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          text-decoration: none;
        }
      }
    }
    .cab_cartaB {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-line-pack: center;
      align-content: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      & > div:nth-child(1) {
        text-align: left;
        margin-top: 16px;
      }
      & > div:nth-child(2) {
        overflow: hidden;
        height: 148px;
      }
      .tdCard {
        font-weight: bold;
        color: $c_cartas;
      }
    }
  }

  .bloq_BoxSecun {
    margin-top: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    .boxSecun {
      text-align: center;
      font-weight: 500;
      & > img {
        height: 34px;
        width: auto;
        vertical-align: middle;
      }
    }

    .spreadImg {
      overflow: hidden;
      height: 142px;
    }
  }

  @media (max-width: 1280px) {
    .cab_carta {
      .cab_cartaA {
        .spreadT {
          font-size: 23px;
        }
      }
      .cab_cartaB {
        table {
          font-size: 14px;
        }
      }
    }
  }

  @media (max-width: 600px) {
    .cab_carta {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
    }
    .bloq_BoxSecun {
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
    }
  }

  @media (max-width: 500px) {
    .cab_cartaA,
    .subT {
      text-align: center;
    }
    .cab_cartaB {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      margin: 15px 0 0;
      -webkit-box-pack: start !important;
      -ms-flex-pack: start !important;
      justify-content: flex-start !important;
    }
  }

  @media (min-width: 851px) and (max-width: 1200px) {
    .cab_carta {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
    }
    .cab_cartaA {
      text-align: center;
      width: 100%;
    }
  }

  @media (max-width: 850px) {
    .cab_carta .cab_cartaA {
      width: 100%;
    }
  }

  .descriptionText {
    color: $colorTextclaro;
    padding: 5px 14px 5px 12px;
    margin: 10px 0;
  }

  .btnInfo {
    .details,
    .show,
    .hide:target {
      display: none;
    }
    .hide:target + .show,
    .hide:target ~ .details {
      display: inline-block;
    }
    a {
      $color: #ebeff1;
      text-decoration: none;
      background: $color;
      color: #595959;
      padding: 1px 8px;
      display: inline-block;
      width: 69px;
      text-align: center;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s;
      &:hover {
        background: darken($color, 3%);
      }
      span::before {
        color: $c_cartas;
      }
    }
  }

  .subT {
    border-bottom: 1px solid #dadada;
    padding-bottom: 15px;
  }

  .td1Box {
    color: $colorTitle;
  }

  .td2Box {
    color: $colorTextclaro;
    font-weight: lighter;
    &.mode{
      background-color: $color-lila;
      color: #fff;
      text-align: center;
    }
  }

  .BigNum {
    font-size: 179px;
    line-height: 0;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.04);
  }

  .cf-field__head {
    font-size: 20px;
  }

  .cf-field__body {
    font-size: 15px;
  }

  .mce-panel {
    border: none;
  }

  .ul_legend {
    font-weight: normal;
  }

  .numTitle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: $c_cartas;
    color: #fff;
    text-align: center;
    line-height: 20px;
    font-size: 15px;
    display: inline-block;
    vertical-align: text-bottom;
  }

  .postbox.carbon-box {
    .handlediv {
      background: #f1f1f1;
      width: 40px;
      height: 20px;
      position: relative;
      right: 10px;
      //sombra
      -webkit-box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
              box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s;

      &:hover {
        -webkit-box-shadow: none;
        box-shadow: none;
      }
    }

    .cf-container__fields {
      background-color: #f1f1f1;
    }

    .postbox-header {
      border: none;

      & h2 {
        padding: 0 !important;
        -webkit-box-pack: start !important;
        -ms-flex-pack: start !important;
        justify-content: flex-start !important;
      }
    }

    .handle-order-higher,
    .handle-order-lower {
      display: none !important;
    }

    &.closed {
      .postbox-header {
        // background: #f4f0f6;

        & h2 {
          padding: 0 !important;
          // color: $primary-color;
        }
      }
    }
  }

  #adv-settings .t_mode {
    display: none !important;
  }

  .wp-editor-wrap .wp-editor-container {
    border: none;
  }

  input[type="color"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="datetime"],
  input[type="email"],
  input[type="month"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="text"],
  input[type="time"],
  input[type="url"],
  input[type="week"],
  select,
  textarea {
    border: none;
    background-color: transparent;
    ////sombra
  }

  .mce-branding {
    display: none;
  }

  .mce-i-resize {
    color: #000000;
  }

  //////////////////  Tabla legends

  @media (max-width: 500px) {
    #normal-sortables {
      padding: 0;
    }
  }

  $base-spacing-unit: 14px;
  $half-spacing-unit: calc($base-spacing-unit / 2);

  $color-alpha: #1772ff;
  $color-form-highlight: #e2e2e2;

  .bloqTableLegend {
    margin-bottom: 16px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;

    @media (max-width: 500px) {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;

      .table::before {
        display: none;
      }
    }

    .text1 {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
      -ms-flex: 1 1 10%;
      flex: 1 1 10%;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      text-align: center;
      // font-weight: 600;
      // color: #23282d;
      // font-size: 20px;

      img {
        margin-right: 10px;
      }

      span {
        margin-right: 18px;
        width: 75px;
        color: $primary-color;
      }
    }

    .table {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-flex: 1;
      -ms-flex: 1 1 90%;
      flex: 1 1 90%;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      width: 100%;

      &::before {
        content: "";
        width: 0;
        height: 0;
        z-index: 1;
        border-top: 6px solid transparent;
        border-right: 8px solid $primary-color;
        border-bottom: 6px solid transparent;
        opacity: 0.3;
      }
    }

    .variosTextos {
      padding: 10px;
    }

    .table-content {
      width: 100%;
      border-left: 4px solid $primary-color;
      border-top: 4px solid $primary-color;
      -webkit-box-shadow: 0px 0px 0px 1px #e2e2e2;
      box-shadow: 0px 0px 0px 1px #e2e2e2;
      border-radius: 10px;
    }

    .table-header {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      background: #000;
      padding: ($half-spacing-unit * 1.5) 0;
    }

    .table-row {
      font-size: 18px;
      border-radius: 10px 0 0 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      padding: ($half-spacing-unit * 1.5) 0;
      color: $primary-color;

      &:nth-of-type(odd) {
        background: #fff;
      }

      &:nth-of-type(even) {
        background: rgba(#000, 0.03);
      }
    }

    .table-data {
      position: relative;
    }

    .table-data,
    .header__item {
      -webkit-box-flex: 1;
      -ms-flex: 1 1 20%;
      flex: 1 1 20%;
      padding: 0 10px;
    }

    .header__item {
      text-transform: uppercase;
    }

    .filter__link {
      color: white;
      text-decoration: none;
      position: relative;
      display: inline-block;
      padding-left: $base-spacing-unit;
      padding-right: $base-spacing-unit;

      &::after {
        content: "";
        position: absolute;
        right: -($half-spacing-unit * 1.5);
        color: white;
        font-size: $half-spacing-unit;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
      }

      &.desc::after {
        content: "(desc)";
      }

      &.asc::after {
        content: "(asc)";
      }
    }
  }
}

///////////////////////////////////////////////////////////////////

[dir="rtl"]{

  #tarokkina_free-catchecklist{ 
    direction: ltr;
  }


}
