// out: ../style-css/style.css, compress: true, sourceMap: true
@import "_mixins";
$cGray: #74788d;
$cGrayLight: #ced4da;
$cGrayBg: #f8f8fb;
$cBlue: #4aa3ff;
$cMenuBg: #2a3042;
$cMenuText: #8691b2;
$cFilemenagerBg: #dbdee8;
$cHoverBackground: #f3f4f7;
$cGreenBtn: #1cbb8c;
$cGreenBtnHover: #179a73;
$cRedBtn: #ff3d60;
$cRedBtnHover: #ff1741;
$cVioletBtn: #5664d2;
$cVioletBtnHover: #3848ca;
$cInfoBtn: #939dba;
$cInfoBtnHover: #8691b2;
$cYellowBtn: #fcb92c;
$cYellowBtnHover: #fbac06;
$font1: 'Open Sans',
sans-serif;

body {
  font-size: 13px;
}

.form-group {
  &::after {
    content: '';
    display: block;
    clear: both;
  }
}

.table {
  .text-bold {
    font-weight: 600;
  }

  .text-center {
    input {
      margin: auto;
    }
  }
}

.baselinker-delete-linking,
.apilo-delete-linking {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  cursor: pointer;
}

// statusy zamówień
tr.status-0 {
  .order-status {
    color: $cVioletBtn;
  }
}

tr.status-1 {
  .order-status {
    color: #468639;
  }
}

tr.status-2,
tr.status-3 {
  .order-status {
    color: $cRedBtn;
  }
}

tr.status-4 {
  .order-status {
    color: $cYellowBtn;
  }
}

// zamówienie wysłane
tr.status-5 {
  .order-status {
    color: #f7abb0;
  }
}

// zamówienie zrealizowane
tr.status-6,
tr.status-8 {
  .order-status {
    color: #bfbfbf;
  }
}

tr.status-7 {
  .order-status {
    color: #95c11f;
  }
}

body {
  font-family: $font1;
  color: $cMenuBg;

  a {
    &:hover {
      text-decoration: none;
    }
  }

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
  select:-webkit-autofill,
  select:-webkit-autofill:hover,
  select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  }
}

#main {
  height: 100vh;

  .container-fluid {
    height: 100%;

    .row {
      height: 100%;

      .unlogged-panel {
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;

        .login-panel {
          width: 80%;

          .login-panel-content {
            .login-shoppro {
              text-align: center;
              font-size: 26px;
              color: $cBlue;
            }

            .title {
              text-align: center;
              font-size: 22px;
              line-height: 24px;
              font-weight: 600;
              margin-top: 50px;
              margin-bottom: 10px;
            }

            .subtitle {
              text-align: center;
              font-size: 12px;
              line-height: 20px;
              font-weight: 300;
              color: $cGray;
            }

            .form-horizontal {
              margin-top: 50px;

              .form-group {
                .input-login {
                  position: relative;

                  &:before {
                    position: absolute;
                    content: 'Login';
                    color: $cGray;
                    font-size: 14px;
                    line-height: 21px;
                    top: 5px;
                    left: 50px;
                    z-index: 801;
                  }
                }

                .input-password {
                  position: relative;

                  &:before {
                    position: absolute;
                    content: 'Hasło';
                    color: $cGray;
                    font-size: 14px;
                    line-height: 21px;
                    top: 5px;
                    left: 50px;
                    z-index: 801;
                  }
                }

                .input-group {
                  input {
                    height: 60px;
                    background: transparent;
                    padding-top: 30px;
                    padding-bottom: 10px;
                    padding-left: 50px;
                    margin-left: -52px;
                    border: 1px solid #dedfe0;
                    box-shadow: none;
                  }

                  .form-control {
                    border: 1px solid #dedfe0;
                  }

                  .input-group-prepend {
                    .input-group-text {
                      background: transparent;
                      border: none;
                    }

                    .icon {
                      padding-left: 20px;
                      padding-right: 20px;

                      i {
                        z-index: 800;
                      }
                    }
                  }
                }
              }

              .sumbit {
                text-align: center;

                .btn {
                  background-color: $cBlue;
                  color: #fff;
                  border-radius: 4px;
                  font-size: 14px;
                  line-height: 21px;
                  font-weight: 400;
                  padding: 10px 30px;
                  margin-top: 50px;
                }
              }
            }

            .copyright {
              text-align: center;
              font-size: 14px;
              line-height: 21px;
              font-weight: 400;
              color: $cGray;
              margin-top: 100px;

              a {
                color: $cGray;
              }
            }
          }
        }
      }

      .unlogged-bg {
        background: url('/admin/layout/images/bg-unlogged.png') no-repeat right;
        background-size: cover;
        display: flex;

        @include respond-below(xs) {
          display: none;
        }
      }
    }
  }

  .home {
    position: fixed;
    z-index: 999;
    color: #fff;
    top: 30px;
    right: 30px;

    img {
      width: 30px;

      @include respond-below(xs) {
        filter: invert(100%);
      }
    }
  }
}

.admin-page {
  background-color: $cGrayBg;

  .menu {
    &.visible {
      display: block;

      @include respond-below(xs) {
        width: 100vw;

      }
    }

    @include respond-below(md) {
      display: none;
    }

    z-index: 900;
    padding: 0 25px;
    background-color: $cMenuBg;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    overflow: scroll;

    &::-webkit-scrollbar {
      display: none;
      /* Chrome Safari */
      width: 0;
      height: 0;
    }

    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
    overflow-y:scroll;
    overflow-x:hidden;
    color: $cMenuText;

    .logo {
      width: 100%;
      color: #fff;
      background-color: $cMenuBg;
      text-align: center;
      padding: 20px 0;
      font-size: 24px;
      font-weight: 400;

      span {
        font-size: 11px;
        color: $cMenuText;
      }

      a {
        font-size: 11px;
        padding: 5px 20px;
        border-radius: .25rem;
        display: inline-block;
        margin-top: 10px;
        transition: ease 0.3s;
        text-transform: uppercase;
        font-weight: 700;
        color: $cMenuBg;
        background-color: #fff;
        border: 1px solid #fff;

        &:hover {
          color: $cMenuText;
          background-color: $cMenuBg;
          border: 1px solid $cMenuText;
        }
      }
    }

    .menu-content {
      .title {
        text-transform: uppercase;
        color: $cMenuText;
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 10px;
      }

      ul {
        list-style-type: none;
        padding-inline-start: 0px;

        li {
          a {
            color: $cMenuText;
            font-size: 13px;
            font-weight: 400;
            line-height: 27px;
            padding: 4px 0px;
            display: block;

            &:hover {
              color: #fff;

              img {
                filter: brightness(200%);
              }
            }

            img,
            i {
              margin-right: 20px;
              width: 20px;
              text-align: center;
            }
          }
        }
      }
    }
  }
}

.preview {
  width: 100%;
  background: $cMenuBg;
  text-align: center;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  z-index: 1020;

  @include respond-below(xs) {
    text-align: left;
  }

  &:hover {
    a {
      color: #fff;
      width: 100%;
      height: 100%;
    }

    img {
      filter: brightness(200%);
    }
  }

  a {
    text-transform: uppercase;
    padding: 20px 0;
    color: $cMenuText;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
    display: inline-block;
    margin-bottom: 0;

    img {
      margin-top: -4px;
    }
  }
}

.site-content {

  &.with-menu {
    width: 100%;

    @include respond-above(xs) {
      width: calc(100% - 243px);

      margin-left: 243px;
    }
  }

  @include respond-below(md) {
    margin-left: 0;
  }

  background-color: #fff;
  margin-left: 244px;

  .top-user {
    text-align: right;
    background-color: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: right;
  }

  .dropdown {
    position: relative;
    display: inline-block;
    color: $cMenuBg;
    font-size: 15px;

    img {
      margin-left: 10px;
    }

    &:hover {
      .dropdown-content {
        display: block;
      }
    }

    .dropdown-content {
      display: none;
      transition: ease 0.3s;
      position: absolute;
      background-color: #fff;
      box-shadow: 7px 7px 15px 5px rgba(0, 0, 0, 0.05);
      padding: 12px 16px;
      z-index: 1;
      right: 0;
      font-size: 14px;

      a {
        font-size: 14px;
        line-height: 15px;
        font-weight: 400;
        color: $cMenuBg;
        display: block;
        padding: 5px 0;
        white-space: nowrap;

        span {
          margin-right: 10px;
        }
      }
    }
  }

  .dashboard-page {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: $cHoverBackground;



    .dashboard-content {
      border-radius: .25rem;
      margin-bottom: 15px;
      background: #fff;
      margin: 10px 0;
      padding: 15px;
      box-shadow: 7px 7px 15px 5px rgba(0, 0, 0, 0.05);

      .dashboard-title {
        text-transform: uppercase;
        font-weight: 800;
        margin-bottom: 15px;
      }

      table {
        white-space: nowrap;
        font-size: 13px;

        &.dashboard-products {
          tbody {
            tr {
              td:nth-child(2) {
                max-width: 300px;
                text-overflow: ellipsis;
                overflow: hidden;
              }

              td.text-right {
                display: table-cell;
                text-align: right;
              }
            }
          }
        }

        a {
          color: $cMenuText;
          transition: .15s ease;
          font-weight: 800;

          &:hover {
            color: $cMenuBg;
          }
        }

        img {
          height: 50px;
        }

        thead {
          background-color: $cHoverBackground;

          th {
            vertical-align: middle;
            border-bottom: none;
            border-top: none;
          }
        }

        tbody {
          td {
            vertical-align: middle;
          }
        }
      }

      .table-hover tbody tr:hover {
        background-color: $cHoverBackground;
      }
    }
  }
}

.alert {
  .fa {
    margin-right: 10px;
  }
}

.btn-default,
.btn-success,
.btn-danger,
.btn-info,
.btn-system,
.btn-dark,
.btn-primary {
  color: #fff;
  padding: .47rem .75rem;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 300;
  border-radius: .25rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

  @include respond-below(xs) {
    font-size: 12px;
  }

  &:hover {
    color: #fff;
  }

  .fa {
    margin-right: 8px;
  }

  &#g-columns-list-close {
    .fa {
      margin-right: 0px;
    }
  }

  &.article_image_delete {
    .fa {
      margin-right: 0;
    }
  }

  &#g-select-columns {
    .fa {
      margin-right: 0px;
    }
  }

  &.btn-value-remove {
    margin-left: 15px;

    .fa-trash-o {
      margin-right: 0px;
    }
  }

  &.btn-delete-permutation {
    text-align: center;
    color: #FFF;

    i {
      margin: 0;
    }
  }

  &.fa-link {
    height: 35px;
  }
}

.btn-default {
  color: #000;
}

.attribute-value-add {
  margin-top: 16px;
}

.btn-success {
  background-color: $cGreenBtn;
  border-color: $cGreenBtn;

  &:hover {
    background-color: $cGreenBtnHover;
    border-color: $cGreenBtnHover;
  }
}

.btn-danger {
  background-color: $cRedBtn;
  border-color: $cRedBtn;

  &:hover {
    background-color: $cRedBtnHover;
    border-color: $cRedBtnHover;
  }
}

.btn-info {
  background-color: $cVioletBtn;
  border-color: $cVioletBtn;

  &:hover {
    background-color: $cVioletBtnHover;
    border-color: $cVioletBtnHover;
  }
}

.btn-primary {
  background-color: $cInfoBtn;
  border-color: $cInfoBtn;

  &:hover {
    background-color: $cInfoBtnHover;
    border-color: $cInfoBtnHover;
  }
}

.btn-system {
  background-color: $cYellowBtn;
  border-color: $cYellowBtn;

  &:hover {
    background-color: $cYellowBtnHover;
    border-color: $cYellowBtnHover;
  }
}

#fg-values-edit {
  #settings-tabs {
    .resp-tabs-container {

      .resp-tab-content {
        @include respond-above(sm) {
          padding-bottom: 0;
        }

        #languages-main {
          .btn-value-add {
            margin-bottom: 15px;
          }
        }
      }

      .default-value {
        margin-bottom: 1rem;
      }
    }
  }
}

#g-list td a i {
  color: $cMenuBg !important;
}

#g-list {

  input.product-price,
  input.product-price-promo {
    width: 100%;
  }
}

#g-columns-list {
  font-size: 13px;
  font-weight: 400;
  border: 1px solid $cHoverBackground !important;
  border-radius: 0.25rem;

  ul {
    li {
      border-bottom: 1px solid $cHoverBackground !important;
      height: auto !important;
      min-height: 30px;
      display: flex;
      align-items: center;
    }
  }
}

#g-results {
  font-size: 13px;
  margin-top: 10px;

  #g-list {
    color: $cMenuBg;

    >thead:nth-child(1) {
      >tr:nth-child(1) {
        background-color: $cHoverBackground;
      }
    }

    th {
      vertical-align: middle;
    }
  }

  table {
    color: $cMenuBg;

    thead {
      tr {
        th {
          border: none;
        }
      }
    }

    tbody {
      tr {
        background-color: #fff;

        &:hover {
          background-color: $cHoverBackground;
        }

        td {
          border-color: $cHoverBackground;

          a:not(.btn) {
            transition: .15s ease;

            &:hover {
              text-decoration: none;
              color: $cMenuBg;
            }
          }
        }
      }
    }
  }

  .g-search-select,
  #g-row-limit {
    text-align: center;
  }

  .form-control {
    border-color: $cMenuText;
    color: $cMenuBg;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 13px;

    &:focus {
      box-shadow: none;
    }
  }
}

.table-striped tbody tr:nth-of-type(2n+1) {
  background-color: #fff;
}

.table-bordered th,
.table-bordered td {
  border-right: none;
  border-left: none;
}

.text-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  &.text-centred-xs {
    @include respond-below(xs) {
      justify-content: center;
    }
  }

  #g-row-limit {
    width: auto;
    margin: 0 10px;
  }


}

.text-centred-xs {
  @include respond-below(xs) {
    justify-content: center;
  }
}

.pull-left-sm {
  @include respond-above(sm) {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

}


.pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  gap: 10px;

  span {
    font-weight: 900;
  }
}

.flags {
  padding-left: 20px;

  img {
    width: 14px;
    margin-top: -8px;
  }
}

.fa-star {
  color: $cGreenBtn;
  margin-right: 5px;
}

.text-danger {
  color: $cRedBtn !important;
}

ol.sortable,
ol.sortable ol {
  margin: 0 0 0 25px;
  padding: 0;
  list-style-type: none;
}

ol.sortable {
  margin: 0;
}

ol.sortable,
ol.sortable *,
ol.sortable *:after,
ol.sortable *:before {
  box-sizing: content-box;
}

.sortable li {
  margin: 0;
  padding: 0;
}

.sortable li div.content {
  color: $cMenuBg;
  cursor: move;
  height: 45px;
  line-height: 45px;
  margin: 0;
  padding: 0 10px;
  border-bottom: 1px solid #e1e1e1;
  height: 100%;

  .text-danger {
    margin-right: 10px;

    @include respond-below(xs) {
      margin-top: 16px;
      vertical-align: top;
      margin-right: 5px;
    }
  }

}

#fg-pages-list {
  .sortable {
    li {
      div {

        &.content {
          color: $cMenuBg;
          cursor: move;
          height: 45px;
          line-height: 45px;
          margin: 0;
          padding: 0 10px;
          border-bottom: 1px solid #e1e1e1;
          height: 100%;

          @include respond-above(xs) {
            display: flex;
            align-items: center;
          }

          .text-danger {
            margin-right: 10px;

            @include respond-below(xs) {
              margin-top: 16px;
              vertical-align: top;
              margin-right: 5px;
            }
          }

          b {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            @include respond-above(xs) {
              display: block;
            }

            @include respond-below(xs) {
              display: inline-block;
              width: calc(100% - 70px);
            }

            @include respond-above(lg) {
              width: calc(100% - 670px);
            }

            @include respond-between(md, lg) {
              width: calc(100% - 222px);
            }

            @include respond-between(sm, md) {
              width: calc(100% - 222px);
            }

            @include respond-between(xs, sm) {
              width: calc(100% - 222px);
            }
          }

          .menu-box-title {

            display: flex;
            align-items: center;
            justify-content: flex-start;

            .disclose,
            .text-danger {
              @include respond-below(xs) {

                margin-top: 0;
              }
            }

            @include respond-below(xs) {

              width: 100%;
            }

            @include respond-above(lg) {
              width: calc(100% - 670px);
            }

            @include respond-between(md, lg) {
              width: calc(100% - 222px);
            }

            @include respond-between(sm, md) {
              width: calc(100% - 222px);
            }

            @include respond-between(xs, sm) {
              width: calc(100% - 222px);
            }

          }
        }
      }

      &.sort-leaf {
        .content {
          b {
            @include respond-below(xs) {
              display: inline-block;
              width: calc(100% - 52px);
            }

          }
        }
      }
    }
  }
}

#fg-product-edit {
  .sortable {
    li {
      div {
        &.content {

          b {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            width: calc(100% - 62px);
          }
        }
      }
    }
  }
}

.sortable li.sort-branch div {
  color: $cMenuBg;
}

.sort-leaf .disclose {
  content: '- ';
  text-indent: -3000px;
  background-image: url('/libraries/jquery-nested-sortable/skin-vista/icons.gif');
  background-position: -16px -64px;
  background-repeat: no-repeat;
  display: inline-block;
  height: 16px;
  vertical-align: top;
  width: 16px;
  margin: 16px 5px 0 1px;

  @include respond-above(xs) {
    margin: 0px 5px 0 1px;
  }
}

li.sort-collapsed.sort-hover div {
  border-color: #999999;
}

.disclose {
  cursor: pointer;
  width: 20px;
  display: none;
  text-align: center;
}

.sortable li.sort-collapsed>ol {
  display: none;
}

.sortable li.sort-branch>div .disclose {
  display: block;
  float: left;
  margin-right: 15px;
}

.sortable li.sort-collapsed>div .disclose>span:before {
  display: inline-block;
  font-family: FontAwesome;
  font-size: 10px;
  content: '\f054';
  height: 25px;
  width: 25px;
  line-height: 25px;
  border-radius: 13px;
  background: rgba(134, 145, 178, .1);
  color: $cMenuText;
  border: 1px solid $cMenuText;
  transition: .15s ease;
}

.sortable li.sort-collapsed>div .disclose:hover>span:before,
.sortable li.sort-expanded>div .disclose:hover>span:before {
  background: $cMenuText;
  color: #FFF;
}

.sortable li.sort-expanded>div .disclose>span:before {
  display: inline-block;
  font-family: FontAwesome;
  font-size: 10px;
  content: '\f078';
  height: 25px;
  width: 25px;
  line-height: 25px;
  border-radius: 13px;
  background: rgba(134, 145, 178, .1);
  color: $cMenuText;
  border: 1px solid $cMenuText;
  transition: .15s ease;
}

.menu_sortable .btn-group {
  display: none;
  transition: .15s ease;
}

.menu_sortable div {
  &:hover {
    .btn-group {
      display: block;
      margin-top: -1px;

      &.pull-right {
        float: none;
        margin-bottom: 20px;
        margin-left: 20px;

        @include respond-above(xs) {
          float: right;
          margin-bottom: 0;
          margin-left: 0;
          display: flex;
          justify-content: space-between;
          align-items: center;

        }

        @include respond-above(lg) {
          width: 668px;
        }

        @include respond-between(md, lg) {
          width: 222px;
        }

        @include respond-between(sm, md) {
          width: 222px;
        }

        @include respond-between(xs, sm) {
          width: 222px;
        }





      }

      .btn {
        &.btn-sm {
          @include respond-below(lg) {

            .fa {
              margin-right: 0;
            }

          }
        }
      }

      .hidden-xs {
        @include respond-below(lg) {
          display: none;
        }
      }
    }
  }
}

.resp-vtabs li.resp-tab-active {
  position: relative;
  z-index: 1;
  margin-right: -1px;
  padding: 10px 15px;
  margin-bottom: 0;
  border-top: none;
  border: none;
  border-left: none;
  border-right: none;
  border-right: 2px solid $cMenuText;
  background-color: $cHoverBackground;
}

.resp-tab-active {
  color: $cMenuText;
}

.htabs {
  li.resp-tab-active {
    border-right: none;
    color: $cMenuBg;
    background-color: $cMenuText;
    border-radius: .25rem;
    color: #fff;

    .fa-star {
      color: #fff;
    }
  }
}

.resp-vtabs>.resp-tabs-container {
  border: none;
  min-height: 274px;
}

#fg-order-details {
  .details {
    .order-history {
      div {
        font-size: 13px;
      }
    }

    i.fa-copy {
      font-size: 16px;
      cursor: pointer;
      margin-left: 5px;
      margin-right: 10px;
    }

    b {
      a {
        color: $cMenuText;
        transition: ease 0.3s;

        &:hover {
          color: $cMenuBg;
        }
      }
    }

    .order-status {
      margin-bottom: 5px;
    }
  }

  .resend_order_confirmation_email {
    margin-top: 25px;
  }
}

.date-range-icon {
  display: flex;
  align-items: center;

  .fa-calendar:before {
    margin-left: 10px;
    margin-right: 10px;
    height: 100%;
  }
}

.input-group {
  .btn {
    border-radius: 0 3px 3px 0;
    display: flex;
    align-items: center;
  }
}

input[type="checkbox"] {
  position: relative;
  width: 40px;
  height: 20px;
  -webkit-appearance: none;
  background: $cGrayLight;
  outline: none;
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .2);
}

input:checked[type="checkbox"] {
  background: $cMenuText;
}

input[type="checkbox"]:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  top: 0;
  left: 0;
  background: #fff;
  transform: scale(1.1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  transition: .5s;
}

input:checked[type="checkbox"]:before {
  left: 20px;
}

#images-uploader,
#files-uploader {
  clear: both;
}

#images-uploader,
#images-uploader *,
#files-uploader,
#files-uploader * {
  box-sizing: content-box !important;
}

#images-list {
  margin: 0;
  padding: 0 5px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
  ;
}

#images-list li {
  background: #FFF;
  text-align: center;
  display: block;
  height: 165px;
  margin: 5px 5px 10px 5px;
  vertical-align: middle;
  position: relative;
}

#images-list li.sortable-chosen {
  -webkit-box-shadow: -1px 1px 6px rgba(0, 0, 0, .75);
  -moz-box-shadow: -1px 1px 6px rgba(0, 0, 0, .75);
  box-shadow: -1px 1px 6px rgba(0, 0, 0, .75);
}

#images-list li .article-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

#images-list li .image-alt {
  padding: 5px;
  height: 30px;
  font-size: 13px;
}

#images-list li .article_image_delete {
  border: 0;
  padding: 13px;
  position: absolute;
  top: 0;
  right: 0;
}

#images-list li .article_image_delete i {
  font-size: 18px;
}

#images-list li .image-alt {
  position: absolute;
  bottom: 10px;
  border: 0;
  background: $cMenuBg;
  text-align: center;
  color: #FFF;
}

#images-list li .image-alt::placeholder {
  color: #FFF;
}

#images-list li:hover .article-image-edit,
#images-list li.pending .article-image-edit {
  display: block;
}

.article-image-edit {
  background: rgba(255, 255, 255, .8);
  position: absolute;
  height: 100%;
  width: 150px;
  cursor: pointer;
  line-height: 168px;
  display: none;
}

.article-image-edit i {
  font-size: 28px;
  color: #cc0000;
}

.article-image-edit img {
  height: 50px;
  position: relative;
  top: 12px;
}

#files-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#files-list li {
  float: left;
  margin: 5px 7px;
}

#files-list li .article_file_delete {
  border-color: rgba(0, 0, 0, 0.05);
}

#fg-order-details {
  .details {
    .row {
      margin-bottom: 15px;
    }
  }
}

.cke_chrome {
  background: #fff !important;
}

.cke_bottom,
.cke_top {
  background: #fff !important;
}

.plupload_filelist_header,
.plupload_filelist_footer {
  background: $cFilemenagerBg !important;
}

.plupload_scroll .plupload_filelist {
  background: transparent !important;
}

.icheckbox_minimal-blue {
  background-position: 0 0 !important;

  &:hover {
    background-position: 0 0 !important;
  }
}

.icheckbox_minimal-blue.checked {
  background-position: -40px 0 !important;

  &:hover {
    background-position: -40px 0 !important;
  }
}

#fg-product-edit,
#fg-promotion-edit,
#fg-article-edit,
#fg-values-edit {
  .form-group {
    width: 100%;

    .list {
      margin-bottom: 5px;
    }
  }

  #settings-tabs {
    .settings-tabs {
      .form-group {
        .menu_sortable {
          .sortable {
            .content {
              display: flex;
              justify-content: flex-start;
              align-items: center;

              .g-checkbox {
                margin-right: 5px;
              }
            }
          }
        }

        #products_related {
          max-width: 100%;
          overflow: overlay;
        }
      }
    }
  }
}

#fg-g-edit,
#fg-layout-edit {
  .sortable {
    .sort-leaf {
      .content {
        display: flex;
        align-items: center;

        @include respond-below(xs) {
          align-items: flex-start;
        }

        .icheckbox_minimal-blue {
          @include respond-below(xs) {
            margin-top: 16px;
            margin-right: 5px;
          }
        }
      }
    }
  }
}

#files-uploader_container,
#images-uploader_container {

  .plupload {
    .plupload_content {
      .plupload_filelist_footer {
        @include respond-below(xs) {
          display: flex;
          align-items: center;
        }

        height: auto;

        .plupload_file_status,
        .plupload_file_size,
        .plupload_progress {
          width: 40px;
        }
      }
    }
  }
}

.selectize-control {
  .selectize-input {
    .item {
      a {
        &.remove {
          margin: 1px;
        }
      }
    }
  }
}

.progress-box {
  position: absolute;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 200;
  background: #fff;
  padding: 0px;
  margin-left: -15px;

  &.hidden {
    display: none;
  }
}

.progress {
  margin: 15px;
  height: 35px;
  transform: translateY(-100%);
  position: relative;
  top: 30%;
  background-color: #333;
}

.version {
  position: relative;
  top: 5%;
}

.version h3 p {
  display: inline-block;
}

.version h3 {
  text-align: center;

}

#fg-order-details {
  .details {
    table {
      margin-top: 30px;

      .order-product-details {
        .custom-fields {
          font-size: 11px;

          b {
            font-weight: 600;
          }
        }

        .atributes {
          font-size: 11px;

          b {
            font-weight: 600;
          }
        }

      }
    }
  }
}

.table {
  white-space: nowrap;
  font-size: 13px;

  .tab-center {
    text-align: center;
  }

  .product-image {
    float: left;
    width: 75px;
    height: 75px;
    margin-right: 10px;

    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }

  .tab-right {
    text-align: right;
  }

  a:not(.btn) {
    color: $cBlue;
    transition: .15s ease;
    font-weight: 500;

    &:hover {
      color: $cMenuBg;
    }
  }

  a.btn {
    color: #fff;

    &:hover,
    &:focus {
      color: #fff;
    }
  }

  a.btn-default {
    color: #000;

    &:hover,
    &:focus {
      color: #000;
    }
  }

  thead {
    background-color: $cHoverBackground;

    th {
      vertical-align: middle;
      border-bottom: none;
      border-top: none;
    }
  }

  tbody {

    td {
      vertical-align: middle;

      &.product-image {

        width: 100px;
        padding: 0;

        img {
          width: 100%;
        }
      }

    }
  }
}

#table-products {
  .product-categories {
    display: block;
    width: 100%;
    text-wrap: wrap;
  }

  .product-name {
    display: flex;
    justify-content: space-between;

    .duplicate-product {
      margin-left: 15px;
    }
  }

  .duplicate-product {
    float: right;
    font-size: 13px;
  }

  .btn-success {
    color: #FFF !important;

    &.btn-create-product {
      margin-top: 5px;
    }
  }
}

.inpost-map-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .75);
  z-index: 1000;
  padding: 100px;
  display: none;
  @include transition;

  @include respond-below(sm) {
    padding: 15px;
  }

  #inpost-map {
    background: #FFF;
  }

  .inpost-hide {
    margin: 15px auto;
    float: right;
    color: #FFF !important;
    text-transform: uppercase;
    @include transition;
    font-weight: 600;
  }
}

.sales-grid {
  text-align: center;

  td {
    padding: 2px 4px;
    width: calc(100% / 8);
  }
}

.mobile-menu-btn {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 9999;
  height: 50px;
  width: 50px;
  color: #FFF;
  background: $cMenuBg;
  line-height: 50px;
  text-align: center;
  font-size: 25px;
  cursor: pointer;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  display: none;

  @include respond-below(md) {
    display: block;
  }

  &.active {
    @include respond-below(xs) {
      background: #fff;
      color: $cMenuBg;
    }
  }

}

.hidden-xs {
  @include respond-below(xs) {
    display: none;
  }
}

.dashboard-page {

  #table-products,
  .g-container {
    >.row {
      >#g-menu {
        margin-bottom: 10px;
      }

      >.col-md-3 {

        >.pull-right {
          @include respond-below(sm) {
            float: left;

          }

          #g-columns-list {
            @include respond-below(sm) {
              right: auto;
              left: 15px;
            }
          }
        }

      }
    }
  }


  .g-container {
    .panel-info {
      .panel-body {
        #fg-newsletter-prepare {
          .form-group {
            .input-group {
              #dates {
                max-width: 200px;
              }

              .date-range-icon {

                border-top: 1px solid #ced4da;
                border-right: 1px solid #ced4da;
                border-bottom: 1px solid #ced4da;
                border-top-right-radius: 0.25rem;
                border-bottom-right-radius: 0.25rem;
              }
            }

            select {
              &#template {
                max-width: 233px;
              }
            }
          }
        }

        .resp-vtabs {
          .resp-tabs-container {
            @include respond-below(sm) {
              padding: 0;
            }

            h2 {
              i {
                margin-right: 10px;
              }
            }

            .resp-tab-content {
              padding: 10px;

              @include respond-below(sm) {
                padding: 10px;
              }

            }
          }
        }

        #fg-order-details {
          .details {
            .row {

              .col-lg-4,
              .col-xl-4 {
                .row {
                  .buttons {

                    .order_status_change_email,
                    .order_status_change {

                      margin-bottom: 10px;


                    }
                  }
                }
              }
            }

            .input-group {
              span {
                &.input-group-addon {
                  border-top-left-radius: 0;
                  border-bottom-left-radius: 0;

                }
              }
            }

            .row {
              .col-md-6 {


                .col-sm-6:last-child {
                  .form-control {
                    @include respond-below(xs) {
                      margin-top: 15px;
                    }

                  }
                }
              }
            }
          }
        }
      }
    }
  }

}

.status_select {
  #order-status {
    max-width: 280px;
  }
}

.combination-attribute {
  border: 1px solid $cGrayLight;

  .title {
    padding: 5px 10px;
    font-weight: 600;
  }

  .values {
    padding: 5px 10px;
    list-style-type: none;
  }
}

.panel {
  .panel-heading {
    .btn-send-order-to-apilo {
      @media (max-width: 768px) {
        float: none !important;
      }
    }

    &.with-buttons {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}

.nav {
  &.nav-tabs-right {
    justify-content: flex-end;
  }
}

.input-group-addon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 65px;
}

select.input-sm {
  line-height: 20px;
}

.form-control {
  font-size: 14px;
}

.baselinker-product-search,
.apilo-product-search {
  cursor: pointer;
}

.baselinker-found-products {
  margin-top: 10px;

  p {
    margin-bottom: 0;
  }

  button {
    margin-top: 5px;
  }
}

.dashboard-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;

  .panel {
    max-width: 300px;
    width: 100%;
  }
}

.custom-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;

  input {
    max-width: 150px;
    border: 1px solid #dfdfdf !important;
    padding: 0 5px;
    font-size: 12px !important;

    &::placeholder {
      color: #dfdfdf;
      font-style: italic;
    }
  }
}

input.form-control[type="text"],
select.form-control {
  height: 35px;
  font-size: 13px;
}

textarea.form-control {
  font-size: 13px;
}

.order-details {
  .paid-status {
    margin-top: 10px;

    a {
      font-weight: 300;
    }

    .panel-body {
      span {
        display: inline-flex;
        height: 30px;
        width: 30px;
        background: $cMenuBg;
        color: #FFF;
        align-items: center;
        justify-content: center;
        border-radius: 50%;

        &.danger {
          background: $cRedBtnHover;
        }
      }
    }
  }
}

.product-xml-data {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;

  @include respond-above(sm) {
    grid-template-columns: 1fr 1fr;
  }

  @include respond-above(md) {
    grid-template-columns: 1fr 1fr 1fr;
  }

  @include respond-above(lg) {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }

  input::placeholder {
    font-style: italic;
    opacity: .5;
  }

  .custom_label_0_container,
  .custom_label_1_container,
  .custom_label_2_container,
  .custom_label_3_container,
  .custom_label_4_container {
    position: relative;

    .custom_label_0_suggestions,
    .custom_label_1_suggestions,
    .custom_label_2_suggestions,
    .custom_label_3_suggestions,
    .custom_label_4_suggestions {
      position: absolute;
      top: 101%;
      left: 0;
      border: 1px solid #1cbb8c;
      width: 100%;
      display: none;
      z-index: 99;

      div {
        padding: 5px;
        cursor: pointer;
        background: #1cbb8c;
        color: #FFF;
        border-bottom: 1px solid #1cbb8c;

        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
}

.jconfirm-title {
  line-height: 1.25 !important;
}

.site-title {
  font-size: 18px;
  font-weight: 600;
  margin: 5px 0 10px 5px;
}

.site-subtitle {
  font-size: 13px;
  margin: 0 0 10px 5px;
}

#g-list {
  margin-bottom: 15px !important;
}

.pagination {
  input[type="number"] {
    border: 1px solid #dddddd;
    height: 31px;
    width: 50px;
    text-align: center;
  }
}

.input-group-addon {
  width: auto;

  label {
    display: flex;
    align-items: center;
    gap: 5px;
  }
}

.additional_fields {
  input[type="text"] {
    height: 40px;
  }
}

#integrationsDropdownBtn {
  width: 50px;
  text-align: center;
}

.dropdown-menu-right {
  a {
    font-size: 14px;
  }
}