#quadmenu-settings {

  /*  &.quadmenu-item-carousel,
&.quadmenu-item-tabs,
&.quadmenu-item-mega {
  .quadmenu-tab-pane-default {
    .quadmenu-setting-description {
      display: none;
    }
  }
}

&.quadmenu-item-social,
&.quadmenu-item-carousel,
&.quadmenu-item-search,
&.quadmenu-item-login {
  .quadmenu-tab-pane-default {
    .quadmenu-setting-description,
    .quadmenu-setting-xfn,
    .quadmenu-setting-target,
    .quadmenu-setting-url {
      display: none;
    }
  }
}*/

  li.quadmenu-panel-query,
  li.quadmenu-panel-content,
  li.quadmenu-panel-archive_carousel {
    display: none;
  }

  .quadmenu-column,
  &.quadmenu-item-depth-1,
  &.quadmenu-item-depth-2,
  &.quadmenu-item-depth-3,
  &.quadmenu-item-depth-4 {

    li.quadmenu-panel-query,
    li.quadmenu-panel-content,
    li.quadmenu-panel-archive_carousel {
      display: block !important;
    }
  }

  .quadmenu-column {

    .quadmenu-setting-dropdown,
    .quadmenu-setting-float {
      display: none !important;
    }
  }

  .quadmenu-setting-depth-0,
  .quadmenu-setting-depth-1,
  .quadmenu-setting-depth-2,
  .quadmenu-setting-depth-3,
  .quadmenu-setting-depth-4 {
    display: none;
  }

  &.quadmenu-item-depth-0 {

    .quadmenu-setting-depth-0 {
      display: block;
    }

  }

  &.quadmenu-item-depth-1,
  .quadmenu-item-depth-1 {

    .quadmenu-setting-depth-1 {
      display: block;
    }

  }

  &.quadmenu-item-depth-2,
  .quadmenu-item-depth-2 {

    .quadmenu-setting-depth-2 {
      display: block;
    }

  }

  &.quadmenu-item-depth-3,
  .quadmenu-item-depth-3 {

    .quadmenu-setting-depth-3 {
      display: block;
    }

  }

  &.quadmenu-item-depth-4,
  .quadmenu-item-depth-4 {

    .quadmenu-setting-depth-4 {
      display: block;
    }

  }

  .dashicons {
    //line-height: inherit;
    width         : auto;
    height        : auto;
    padding       : 0;
    vertical-align: middle;
  }

  margin       : -1px -10px -11px -10px;
  border-top   : 1px solid #ececec;
  border-bottom: 1px solid #ececec;

  &.saving {
    .quadmenu-settings-header .quadmenu_saving {
      display: block;
    }
  }

  input,
  select,
  textarea {
    border-radius: 2px;
    height       : auto;
    margin       : 0;
    box-shadow   : none;

    &:not(.button) {
      padding: 7px 10px;
    }
  }

  input[type=text],
  input[type=password],
  select,
  textarea {
    width    : 100%;
    max-width: 600px;
  }

  .button-primary {
    &:extend(body.admin-color-quadmenu .redux-container .button);
    &:extend(body.admin-color-quadmenu .redux-container .button-primary);
  }

  .quadmenu-settings-body {
    position: relative;
  }

  .quadmenu-settings-footer,
  .quadmenu-settings-header {
    position: relative;
    overflow: hidden;
    padding : 15px;
  }

  .quadmenu-settings-header {

    background-color: rgb(241, 241, 241);
    border-bottom   : 1px solid #ececec;

    .quadmenu-title {
      margin     : 0;
      line-height: 30px;

      >i {
        margin: 0 5px 0 0;
      }
    }

    .quadmenu_close {
      float: right;
    }

    .quadmenu_saving {
      font-size     : 12px;
      text-align    : right;
      padding       : 0 20px;
      display       : none;
      line-height   : 60px;
      text-transform: uppercase;
      color         : white;
      font-size     : 11px;
      font-weight   : bold;
      background    : #21c2f8;
      position      : absolute;
      right         : 0;
      top           : 0;
      bottom        : 0;

      &:before {
        color                     : white;
        display                   : inline-block;
        font                      : normal 20px 'dashicons';
        speak                     : none;
        -webkit-font-smoothing    : antialiased;
        -moz-osx-font-smoothing   : grayscale;
        vertical-align            : top;
        margin-right              : 5px;
        content                   : '\f463';
        -webkit-animation         : rotation 2s infinite linear;
        animation                 : rotation 2s infinite linear;
        line-height               : inherit;
        /* z-index                : -1; */
        /* border-top-right-radius: 5px; */
        border-radius             : 5px;
        /* display                : block; */
      }

    }

  }

  .quadmenu-setting {
    padding      : 15px 0;
    //padding: 15px;
    border-bottom: 1px solid #eee;

    &:first-of-type {
      padding-top: 0;
    }

    &:last-of-type {
      border-bottom: none;
    }

    span.title {
      display    : block;
      margin     : 0 0 5px 0;
      font-weight: 700;
    }

    span.description {
      display: block;
      margin : 5px 0 0 0;
    }

    .field-wrapper {
      label {
        display    : block;
        line-height: 25px;

        input[type=checkbox],
        input[type=radio] {
          margin: -2px 5px 0 0;
        }
      }
    }

    &.quadmenu-setting-actions {
      .button {
        padding: 0 15px;
      }
    }

    &.quadmenu-setting-background,
    &.quadmenu-setting-media {

      .field-wrapper {
        &.active {
          .edit-menu-item-media-thumbnail:before {
            display: none;
          }

          .menu-item-media-clear {
            display: inline;
          }
        }

        .edit-menu-item-media-thumbnail:before {
          .dashicons();
          line-height: 50px;
          content    : "\f128";
          font-family: dashicons;
        }

        .menu-item-media-clear {
          display: none;
        }

        .edit-menu-item-media-thumbnail,
        .edit-menu-item-media-text,
        .edit-menu-item-media-css {
          display : block;
          overflow: hidden;
        }

        .edit-menu-item-media-css {
          display    : block;
          overflow   : hidden;
          line-height: 1;
          margin     : 0;
          font-size  : 10px;
          text-align : right;
        }

        .edit-menu-item-media-thumbnail {
          float     : left;
          width     : 50px;
          height    : 50px;
          background: #ccc;
          margin    : 0 10px 0 0;
          text-align: center;
          font-size : 20px;
          color     : #aaa;
        }
      }

    }

    &.quadmenu-setting-media {

      .field-wrapper {
        background: #eee;
        display   : block;
        overflow  : hidden;
        padding   : 5px;
        border    : 1px solid #ddd;
      }
    }

    &.quadmenu-setting-background {

      position: relative;
      padding : 15px;

      .field-background {
        position : absolute;
        top      : 0;
        right    : 0;
        bottom   : 0;
        left     : 0;
        z-index  : -1;
        //padding: 15px;
        opacity  : 0.2;
      }

      .setting {
        display: block;
        padding: 10px 0;

        b {
          display: block;
        }

        select {
          min-width: 200px;
          width    : auto;
        }
      }
    }

    &.quadmenu-setting-width {

      >label {
        display  : flex;
        //padding: 0 15px;

        >.quadmenu-setting-width-icons,
        >.quadmenu-setting-width-columns,
        >.quadmenu-setting-width-offset,
        >.quadmenu-setting-width-hidden {
          flex: auto;

          >div {
            padding    : 0 20px;
            line-height: 70px;
            height     : 70px;

            &:not(:last-child) {
              border-bottom: 1px solid #efefef;
            }

            >i,
            >select,
            >input {
              margin: 0;
            }

            >select {
              margin: 0 0 3px 0;
            }
          }
        }

        >.quadmenu-setting-width-icons,
        >.quadmenu-setting-width-offset,
        >.quadmenu-setting-width-hidden {
          max-width: 60px;
        }

        >.quadmenu-setting-width-hidden {
          text-align: center;
        }

        >.quadmenu-setting-width-icons {

          >div {

            >i {
              background    : transparent url('../../backend/images/offset.png') -21px 0 no-repeat;
              width         : 21px;
              height        : 21px;
              display       : inline-block;
              vertical-align: middle;
            }

            &.md>i {
              background-position: -21px -21px;
            }

            &.sm>i {
              background-position: -21px -42px;
            }

            &.xs>i {
              background-position: -21px -84px;
            }

          }
        }

      }
    }
  }

  // Items Structure
  // -------------------------------------------------------------------------

  ul {
    >li {

      &:first-of-type {

        >a {

          &.submit-add-to-quadmenu-column,
          &.submit-add-to-quadmenu-panel,
          &.submit-add-to-quadmenu-tab {
            z-index        : 9999;
            text-align     : center;
            width          : auto;
            padding        : 0;
            text-decoration: none;
            align-items    : center;
            cursor         : pointer;
            //background: #ebebeb;
            //margin: 0 0 0 15px;

            &:after {
              position      : relative;
              display       : inline-block;
              font          : 16px dashicons;
              color         : #c3c3c3;
              content       : '\f132';
              width         : 46px;
              vertical-align: middle;
              top           : 1px;
            }

            &:hover {}
          }
        }
      }
    }
  }

  .quadmenu-columns {
    position  : relative;
    padding   : 46px 0 0 0;
    //overflow: hidden;

    >ul {
      position        : absolute;
      width           : 100%;
      left            : 0;
      right           : 0;
      top             : 0;
      display         : flex;
      background-color: #fafafa;
      border-width    : 0 0 1px 0;
      border-style    : solid;
      border-color    : #e5e5e5;
      margin          : 0;
      height          : 46px;
      align-items     : center;

      >.spinner {
        position: absolute;
        top     : 50%;
        right   : 0;
        margin  : -10px 15px 0 0;
      }

      >li {
        min-width: 40px;
        padding  : 0 15px 0 0;
        margin   : 0;

        >a {
          display: flex;
          height : 32px;
          cursor : pointer;

          .transition(all 0.4s);

          &:focus,
          &:hover {
            outline   : 0;
            box-shadow: none;

            >.col {
              background: #c3c3c3;
            }
          }

          >.col {
            flex      : auto;
            height    : 100%;
            margin    : 0 3px 0 0;
            background: #ebebeb;
            padding   : 0;

            &:last-of-type {
              margin: 0;
            }
          }

        }
      }
    }

    >.spinner {
      right: 0;
    }
  }

  .quadmenu-carousel,
  .quadmenu-panel,
  .quadmenu-tabs,
  .quadmenu-tab,
  .quadmenu-columns,
  .quadmenu-column,
  .quadmenu-column-item {

    //overflow: hidden;

    .quadmenu-title {
      font-size  : 12px;
      white-space: nowrap;

      >i {
        margin: 0 5px 0 0;
        color : #333;
      }
    }

    >.inner {
      //box-shadow: none;
      //padding: 0 15px;

      >.action-top {

        .actions {
          position    : relative;
          //z-index: 2;
          text-align  : right;
          float       : right;
          padding     : 0 15px;
          //z-index: 9999;
          //top: 1px;
          //height: 45px;
          //background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);

          a {
            display    : inline-block;
            line-height: 46px;
          }

          .spinner {
            display: none;
            margin : 10px 0;
          }
        }

        .option {
          font                   : 400 16px/1 dashicons;
          speak                  : none;
          display                : inline-block;
          position               : relative;
          -webkit-font-smoothing : antialiased;
          -moz-osx-font-smoothing: grayscale;
          text-decoration        : none !important;
          color                  : #999;

          &:hover {
            color : #333;
            cursor: pointer;
          }

          &:after {
            padding: 0;
            font   : 400 14px/40px dashicons;
            display: inline;
          }

          &.remove::after {
            content: '\f182';
            margin : 0;
          }

          &.edit::after {
            content: '\f111';
          }

          &.disabled:hover {
            color: #999;
          }

          &.expand::after {
            content: '\f345';
          }

          &.contract::after {
            content: '\f341';
          }
        }
      }
    }

    .settings {

      .quadmenu-tabs-content {
        max-height: 400px;
        overflow-y: auto;
      }

    }

    &.open {

      .option.edit::after {
        content: '\f142';
      }

      .items {
        display: none;
      }

    }

    &.saving {

      >.inner>.action-top {

        >.actions {

          .option {
            visibility: hidden;
          }

          .spinner {
            display   : block;
            visibility: visible;
          }
        }

      }
    }

  }

  // 1326, ver interacciones con mega -> columns
  .quadmenu-tab {

    >.inner {

      >.action-top {

        .actions {
          z-index: 9999;
        }
      }
    }
  }

  // Account
  // -------------------------------------------------------------------------

  .quadmenu-tab-pane-account {

    .quadmenu-columns {
      &.row {
        padding-top: 0;
        max-width  : 630px;
      }
    }

    .quadmenu-column {
      >.inner {
        padding-top: 15px;

        >.action-top>.actions {
          display: none;
        }
      }
    }
  }

  // Tabs
  // -------------------------------------------------------------------------

  .quadmenu-tabs {
    overflow: visible;
  }

  // Column
  // -------------------------------------------------------------------------

  .drop-column {

    padding   : 15px;
    box-sizing: border-box;
    overflow  : visible;
    display   : table;

    &:before {
      display   : table-cell;
      height    : 100%;
      content   : '';
      box-sizing: border-box;
      width     : 100%;
      min-height: 40px;
      position  : relative;
      border    : 1px dashed #DFDFDF;
    }
  }

  // Open
  // -------------------------------------------------------------------------
  .quadmenu-carousel,
  .quadmenu-panel,
  .quadmenu-tabs,
  .quadmenu-tab,
  .quadmenu-columns,
  .quadmenu-column,
  .quadmenu-column-item {

    &.open {

      >.inner {
        z-index  : 999;
        min-width: 220px;
        width    : 100%;
      }

      .settings {
        visibility: visible;
        opacity   : 1;
        max-height: 900px;
      }
    }

    .settings {
      position  : absolute;
      visibility: hidden;
      max-height: 0;
      opacity   : 0;
      right     : 0;
      left      : 0;
      .transition(all 0.4s cubic-bezier(.18, .74, .72, 1));
    }

  }

  .quadmenu-column {
    &.open {
      >.inner {

        &,
        >.settings {
          box-shadow: 0 3px 12px -4px rgba(0, 0, 0, 0.1);
        }
      }
    }

    &:last-of-type {

      &.open {
        >.inner {
          float: right;
        }
      }

      .quadmenu-column-item {

        &.open {
          >.inner {
            float: right;
          }
        }

      }
    }

  }

  // Column
  // -------------------------------------------------------------------------

  .quadmenu-column {
    padding   : 15px;
    box-sizing: border-box;
    overflow  : visible;

    &:not(.ui-sortable-helper) {
      .transition(all 0.4s cubic-bezier(.18, .74, .72, 1));
    }

    &:focus {
      >.inner {
        z-index: 1010;
      }
    }

    >.inner {
      position  : relative;
      padding   : 0 15px 15px 15px;
      background: #FAFAFA;

      >.action-top {
        >.actions {
          background: #FAFAFA;
        }
      }

      >.settings {
        //padding: 0 15px;
        background: #FAFAFA;

        .quadmenu-setting {

          &.quadmenu-setting-width {
            //position: absolute;
            //right: 0;
            //left: auto;
            //z-index: 1;
            min-width : 220px;
            background: #FAFAFA;
            width     : 100%;

            >label {
              padding: 0 15px;

              >.quadmenu-setting-width-icons,
              >.quadmenu-setting-width-columns,
              >.quadmenu-setting-width-offset,
              >.quadmenu-setting-width-hidden {

                >div {
                  padding    : 0 5px;
                  line-height: 40px;
                  height     : 40px;
                }
              }
            }
          }
        }
      }
    }

    .items {
      margin : 0;
      padding: 0;

      &:after {
        border     : 1px dashed #DFDFDF;
        padding    : 11px 0 7px 0;
        text-align : center;
        font-weight: 800;
        font       : 24px dashicons;
        content    : '\f132';
        color      : #c3c3c3;
        cursor     : pointer;

        &:hover {
          opacity: 0.2;
        }
      }

      &:after,
      .drop-area {
        display   : block;
        box-sizing: border-box;
        max-width : 100%;
        min-height: 46px;
        position  : relative;
        border    : 1px dashed #DFDFDF;
      }

      &.selected {
        border : 1px dashed #DFDFDF;
        padding: 5px 5px 0 5px;

        &:after {
          border: none;
        }
      }

      >li {
        margin    : 0 0 5px 0;
        list-style: none;

        .menu-item-bar {
          margin: 0;
        }

        .menu-item-settings,
        .menu-item-bar .menu-item-handle {
          width: auto;
        }

        .menu-item-handle .item-title {
          margin: 0;
        }

        .menu-item-settings {
          display: block;
          padding: 10px;
        }

        .description-wide {
          width: 100%;
        }

        .menu-item-actions,
        .field-move {
          display: none;
        }

      }
    }

  }

  // Column Item
  // -------------------------------------------------------------------------

  .quadmenu-column-item {

    .item-title {
      padding : 0 15px;
      overflow: hidden;

      .quadmenu-title {
        position      : absolute;
        max-width     : 60%;
        overflow      : hidden;
        vertical-align: middle;
        height        : 46px;
        line-height   : 46px;
        display       : inline-block;
        margin        : 0;
        padding       : 0;
        white-space   : nowrap;
        border-bottom : 0;
      }
    }

    .settings {
      left            : -1px;
      right           : -1px;
      background-color: #fff;
      border          : 1px solid #ececec;
    }

    >.inner {
      position  : relative;
      border    : 1px solid #ececec;
      box-sizing: border-box;
      background: #fff;
      .transition(all 0.4s cubic-bezier(.18, .74, .72, 1));

      >.settings {

        .quadmenu-setting {

          &.quadmenu-setting-icon {
            .button-icon {
              display: none;
            }

            input {
              max-width: 100%;
            }
          }

        }

      }
    }

  }

  // Column Invalid
  // -------------------------------------------------------------------------

  .quadmenu-invalid {

    >.inner {

      &,
      .actions {
        background  : #f6c9cc;
        border-color: #f1acb1;
      }

      .action-top {
        .option {
          color: #f5868c;
        }
      }

    }
  }

  // Column Widget
  // -------------------------------------------------------------------------

  .quadmenu-widget {
    .widget {
      margin : 0;
      padding: 15px;

      .widget-inner {
        border    : none;
        box-shadow: none;
        min-height: 100px;

        textarea {
          max-height: 110px;
        }

      }

      &.open .widget-inner {
        display: block;
      }
    }
  }

}