@import './custom/variables';
@import './custom/custom';


.list-container {
  .tab-content {
    padding: 10px;
  }

  .back {
    color: $main-sub-color;
    font-size: .875em;

    a {
      text-decoration: underline;
      color: $main-sub-color;
    }
  }

  .col1 {
    width: 5vw;
  }

  .col2 {
    width: 75vw;
  }

  .col3 {
    width: 10vw;
  }

  .col4 {
    width: 10vw;
  }

  background-color: $gray-101;
  height: 100%;


  .list-header {
    background-color: $white;
    padding: 7px 1.1em;
    border-bottom: 1px solid $bordercolor1;
    letter-spacing: .4px;

    .pagelink {
      color: $white;

      path {
        fill: $white
      }

      filter: invert(.5) sepia(1);
    }

    h2 {
      font-size: 1.625em;
      color: $main-sub-color;
      font-weight: bold;
      margin-top: .5rem;
    }

    .col-2 {
      padding-top: .3rem !important;
    }
  }

  h4 {
    font-size: 1.625em;
    color: $main-sub-color;
    font-weight: bold;
  }

  .card {
    h2 {
      font-size: 1.225em;
      color: $main-sub-color;
      font-weight: bold;
    }

    .label {
      font-size: .875em;
      color: $main-sub-color;
      font-weight: 600;
    }

    .label-txt {
      font-size: .75em;
      color: $txt-light;
    }
  }

  .img-selected-container {
    margin-top: 4px;

    .col-6 .media {
      border: 1px solid $bordercolor1;
      background-color: $white;
      padding: 10px;
      height: 120px;

      .media-body {
        padding-top: 10px;
      }
    }

    img {
      width: 100%;
      height: 100px;
      padding: 0.25rem;
      background-color: $white;
      border: 1px solid $bordercolor1;
      border-radius: 0.25rem;
      margin: 0;
    }
  }

  .input-group {
    .form-control {
      height: 37.5px;
    }
  }

  .navbar {
    padding: 16px 6px .5rem 24px;

    .nav {
      background-color: transparent;
      width: 100%;

      .nav-item {
        font-size: 16px !important;
      }
    }

    section {
      padding: 60px 0;
    }

    .nav-tabs .nav-item.show .nav-link,
    .nav-tabs .nav-link.active {
      color: $gray-800;
      border-bottom: 4px solid $main-color !important;
      font-size: 16px;
      background-color: transparent;
    }

    .nav-tabs .nav-link {
      border: 0px solid;
      border-top-left-radius: .25rem;
      border-top-right-radius: .25rem;
      color: $gray-600;
      font-size: 16px;
      padding: 8px;
      margin-right: 5px;
      font-weight: normal;
    }

    .nav-tabs .nav-link {
      &:hover {
        color: $gray-800;
        border-bottom: 4px solid $main-sub-color !important;
        font-size: 16px;
        background-color: transparent;
      }
    }
  }

  .rightbar {
    padding-top: 10px;
    margin-top: 5px;
    padding-left: 14px;

    form {
      .label-heading {
        font-weight: bold;
        font-size: .875em;
        margin-bottom: 4px;
      }
    }
  }

  .list {
    background-color: $gray-101;
    padding: 1em 0.938em;

    .orderlist {
      margin-left: 9px;
      padding: 26px 19px 24px 15px !important;
      border-radius: 1px !important;

      &:hover {
        background-color: transparent;
      }
    }

    .table-contaner {
      .std-shipping {
        font-size: 12px;
      }

      .order-action {
        .order {
          font-size: 12px;
        }

        .address {
          .ship {
            color: $txt-light;
            font-size: 12px;
          }

          .name {
            font-size: 12px;
            font-weight: 600;
          }

          .addres-detail {
            font-size: 12px;
          }
        }

        .dropdown {
          width: 36px;

          a {
            padding: 5px;
            position: relative;

            img {
              width: 20px;
            }
          }
        }
      }

      .lineitem {
        .name {
          font-weight: 500;
        }

        .order-datail {
          font-size: 12px;

          span {
            &:first-child {
              text-decoration: underline;
            }

            margin-right: 10px;
          }
        }

        .lineitem-detail {
          a {
            img {
              width: 75px;
              height: 75px;
              border-radius: 3px;
            }
          }

          .name {
            font-size: 12px;
          }

          .media-body div:first-child {
            width: 65%;
          }

          .variant {
            span {
              font-size: 12px;

              &:first-child {
                font-weight: 300;
                line-height: 1.6;
                color: $txt-light;
              }

              &:last-child {
                font-weight: bold;
                color: $main-sub-color;
              }
            }
          }
        }
      }

      .col-1 {
        padding: 0 0;

        &:first-child {
          padding-left: 15px;
          padding-right: 0;
        }

        .col {
          padding: 0;
        }
      }

      @extend .border-custom;

      .head {
        color: $main-sub-color;
        padding: .6em 0.72em;
        font-weight: 600;
        font-size: 1.23em
      }

      .table {
        border-top: 0 solid;

        thead {
          background-color: $bg-color;
        }

        .table-btn {
          background-color: $main-sub-color !important;
          color: $white;
        }

        td {
          border-bottom-color: $bordercolor1 !important;
          font-size: 0.875em;
          padding: 10px 18px;
        }

        th {
          font-size: 0.875em;
          padding: 1.12em;
          color: $gray-900;
          border-top: 0px solid $white !important;
          border-bottom: 1px solid $bordercolor1 !important;
        }
      }
    }

    .edit-option {
      .dropdown-toggle::after {
        border-top: 0.3em solid $bordercolor2;
      }
    }

    .dropdown-selectall {
      height: 38.4px;
      width: 62px;
      margin-right: 15px;
      margin-left: 8px;
      padding-top: 9px;
      background-color: $white;

      .checkbox {
        margin-right: 11px;

        .cr {
          background-color: $white;
        }
      }

      .dropdown-toggle::after {
        border-top: 0.3em solid $bordercolor2;
      }
    }

    .btn-group {
      display: inline !important;

      .btn {
        height: 38.4px;
        margin: 0 -2.6px;
        cursor: pointer;
        padding: 9px 12px 6.7px;
        color: $txt-lightdark;
        letter-spacing: .3px;
        font-size: 13.85px;

        &:focus {
          box-shadow: none !important;
          color: $bordercolor1;
          background-color: $main-sub-color;
        }
      }
    }

    .card {
      .tab-content {
        padding: 15px;
      }

      padding: 0px !important;

      .card-img-top {
        width: 100%;
        height: 178px;
        object-fit: contain;
      }

      .card-footer {
        padding: 10px;
        background-color: $white;
        border-top: 1px solid $bordercolor1;

      }

      .card-body {
        padding: 0em;
        background-color: $white;

        .card-title {
          padding: 10px;
          font-size: .8em;
          height: 4em;
          overflow: hidden;
        }

        .variants {
          padding: 2px 10px;
          font-size: 14px;
          height: 25px;
        }
      }
    }
  }

  .list-extra {
    padding: 1.5em 0.638em;
  }

  .options-container {
    width: 60px;

    .options {
      color: $txt-lightdark;
      position: relative;
      top: 2px;

      &:hover {
        text-decoration: none;
        color: $main-color;
        border: 1px solid $gray-300;
        border-radius: 4px;
      }
    }
  }

  .checkbox label {
    cursor: pointer;
    margin-bottom: 0;
  }

  .checkbox label:after,
    {
    content: '';
    display: table;
    clear: both;
  }

  .checkbox .cr {
    margin-right: 0 !important;
    background-color: $white
  }

  .checkbox .cr,
  .radio .cr {
    position: relative;
    display: inline-block;
    border: 1px solid $bordercolor2;
    border-radius: 3px;
    width: 16px;
    height: 16px;
    margin-right: .5em;
  }

  .radio .cr {
    border-radius: 50%;
    position: relative;
    top: 4px;
  }

  .checkbox .cr .cr-icon,
  .radio .cr .cr-icon {
    position: absolute;
    font-size: .6em;
    line-height: 0;
    top: 56%;
    left: 13%;
  }

  .radio .cr .cr-icon {
    margin-left: 0.04em;
  }

  .checkbox label input[type="checkbox"],
  .radio label input[type="radio"] {
    display: none;
  }

  .checkbox label input[type="checkbox"]+.cr>.cr-icon,
  .radio label input[type="radio"]+.cr>.cr-icon {
    transform: scale(3) rotateZ(-20deg);
    opacity: 0;
    transition: all .3s ease-in;
  }

  .checkbox label input[type="checkbox"]:checked+.cr>.cr-icon,
  .radio label input[type="radio"]:checked+.cr>.cr-icon {
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
  }

  .radio label {
    cursor: pointer;

    input[type="radio"]:checked+.cr>.cr-icon {
      top: 7.85px;
      left: 2.1px;
    }
  }

  .checkbox label input[type="checkbox"]:disabled+.cr,
  .radio label input[type="radio"]:disabled+.cr {
    opacity: .5;
  }

  .order-detail {
    h2 {
      font-size: 20px;
      font-weight: 500;
    }

    .order-btns {
      .btn-outline-secondary {
        background-color: $white;
        color: $main-sub-color;

        &:hover {
          background-color: transparent;
        }
      }
    }

    .print {
      .print-sub-head {
        font-weight: 800;
        font-size: 14px;
        margin: 10px 0
      }

      .name {
        font-weight: bold;
        font-size: 13px;
      }

      .variant {
        font-size: 12px;
        color: $txt-light;
      }
    }

    h3 {
      font-size: 16px;
      font-weight: bold;
    }

    .table {
      font-size: 14px;
      color: $main-sub-color;

      thead th {
        border-bottom: 1px solid $bordercolor1;
      }

      th,
      td {
        border-top: 0px solid $bordercolor1;

        .media {
          .media-body {
            a {
              width: 65%;
            }
          }

        }
      }

      td {
        text-align: center;
      }
    }

    .summery-datail {
      margin-bottom: 15px;
      padding: 0px 0 15px;
      border-bottom: 1px solid $bordercolor1;
      font-size: 14px;

      .left {
        text-align: left;
        padding-left: 10px;
      }

      .right {
        text-align: right;
      }
    }

    .total {
      margin-bottom: 15px;
      padding: 15px 0;
      font-size: 14px;

      .left {
        text-align: left;
      }

      .right {
        text-align: right;
      }

      .total-text {
        font-weight: bold;
        margin-top: 6px;
      }

      .paid-via {
        font-size: 14px;

        .n-paid {
          color: $main-color;
        }
      }
    }

    .shipby {
      font-size: 13px;
      font-weight: bold;
    }

    .lineitem-detail {
      a {
        img {
          width: 75px;
          height: 75px;
          border-radius: 3px;
        }
      }

      .variant {
        span {
          font-size: 12px;

          &:first-child {
            font-weight: 300;
            line-height: 1.6;
            color: $txt-light;
          }

          &:last-child {
            font-weight: bold;
            color: $main-sub-color;
          }
        }
      }
    }

    .address {
      .ship {
        color: $txt-light;
        font-size: 12px;
        font-weight: normal;
      }

      .lineitem-detail {
        .media-body div:first-child {
          width: 65%;
        }
      }

      .std-shipping {
        font-size: 12px;
        font-weight: bold;
      }

      .name {
        font-size: 12px;
        font-weight: 600;
      }

      .addres-detail {
        font-size: 12px;
      }
    }

    .orderhead {
      font-weight: bold;
      font-size: 13px;
    }

    .orderon {
      font-size: 12px;
    }
  }
}

.card1 {
  display: flex;
  overflow-x: auto;

  .list-group-item {
    border-bottom: 1px solid $bordercolor1;
    border-right: 1px solid $bordercolor1;
    border-left: 0 soid $bordercolor1;
    border-top: 0 soid $bordercolor1;
    border-radius: 0;

    &:hover {
      cursor: pointer;
    }
  }

  .card--content {
    min-width: 300px;
    box-shadow: 3px 5px rgba(255, 255, 255, 0.05);
  }

  .list-group {
    overflow-y: auto;
  }

  .add-product {
    position: relative;
    top: 50%;
    transform: perspective(1px) translateY(-50%);
    text-align: center;
  }
}

#category_loader {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background-color: $white;
  opacity: 0.8;
}

/* width */

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

/* Track */

::-webkit-scrollbar-track {
  background: $main-sub-color;
}

/* Handle */

::-webkit-scrollbar-thumb {
  background: $main-sub-color;
}

/* Handle on hover */

::-webkit-scrollbar-thumb:hover {
  background: $main-sub-color
}

//
// Switches for Bootstrap 4.
//
// - Fully customizable with Sass variables
// - No JavaScript required
// - Fully accessible
//
//
// IMPORTANT: These Sass variables are defined in Bootstrap's variables.scss. You should import that file first, then remove these.
//
$font-size-base: 1rem;
$font-size-lg: ($font-size-base * 1.25);
$font-size-sm: ($font-size-base * .875);
$input-height: 2.375rem;
$input-height-sm: 1.9375rem;
$input-height-lg: 3rem;
$input-btn-focus-width: .2rem;
$custom-control-indicator-bg: #dee2e6;
$custom-control-indicator-disabled-bg: #e9ecef;
$custom-control-description-disabled-color: #868e96;
$white: white;
$theme-colors: ('primary': #08d);
//
// These variables can be used to customize the switch component.
//
$switch-height: calc(#{$input-height} * .8) !default;
$switch-height-sm: calc(#{$input-height-sm} * .8) !default;
$switch-height-lg: calc(#{$input-height-lg} * .8) !default;
$switch-border-radius: $switch-height !default;
$switch-bg: $custom-control-indicator-bg !default;
$switch-checked-bg: map-get($theme-colors, 'primary') !default;
$switch-disabled-bg: $custom-control-indicator-disabled-bg !default;
$switch-disabled-color: $custom-control-description-disabled-color !default;
$switch-thumb-bg: $white !default;
$switch-thumb-border-radius: 50% !default;
$switch-thumb-padding: 2px !default;
$switch-focus-box-shadow: 0 0 0 $input-btn-focus-width rgba(map-get($theme-colors, 'primary'), .25);
$switch-transition: .2s all !default;

.switch {
  font-size: $font-size-base;
  position: relative;

  input {
    position: absolute;
    height: 1px;
    width: 1px;
    background: none;
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    padding: 0;

    +label {
      position: relative;
      min-width: calc(#{$switch-height} * 2);
      border-radius: $switch-border-radius;
      height: $switch-height;
      line-height: $switch-height;
      display: inline-block;
      cursor: pointer;
      outline: none;
      user-select: none;
      vertical-align: middle;
      text-indent: calc(calc(#{$switch-height} * 2) + .5rem);
    }

    +label::before,
    +label::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: calc(#{$switch-height} * 2);
      bottom: 0;
      display: block;
    }

    +label::before {
      right: 0;
      background-color: $switch-bg;
      border-radius: $switch-border-radius;
      transition: $switch-transition;
    }

    +label::after {
      top: $switch-thumb-padding;
      left: $switch-thumb-padding;
      width: calc(#{$switch-height} - calc(#{$switch-thumb-padding} * 2));
      height: calc(#{$switch-height} - calc(#{$switch-thumb-padding} * 2));
      border-radius: $switch-thumb-border-radius;
      background-color: $switch-thumb-bg;
      transition: $switch-transition;
    }

    &:checked+label::before {
      background-color: $switch-checked-bg;
    }

    &:checked+label::after {
      margin-left: $switch-height;
    }

    &:focus+label::before {
      outline: none;
      box-shadow: $switch-focus-box-shadow;
    }

    &:disabled+label {
      color: $switch-disabled-color;
      cursor: not-allowed;
    }

    &:disabled+label::before {
      background-color: $switch-disabled-bg;
    }
  }

  // Small variation
  &.switch-sm {
    font-size: $font-size-sm;

    input {
      +label {
        min-width: calc(#{$switch-height-sm} * 2);
        height: $switch-height-sm;
        line-height: $switch-height-sm;
        text-indent: calc(calc(#{$switch-height-sm} * 2) + .5rem);
      }

      +label::before {
        width: calc(#{$switch-height-sm} * 2);
      }

      +label::after {
        width: calc(#{$switch-height-sm} - calc(#{$switch-thumb-padding} * 2));
        height: calc(#{$switch-height-sm} - calc(#{$switch-thumb-padding} * 2));
      }

      &:checked+label::after {
        margin-left: $switch-height-sm;
      }
    }
  }

  // Large variation
  &.switch-lg {
    font-size: $font-size-lg;

    input {
      +label {
        min-width: calc(#{$switch-height-lg} * 2);
        height: $switch-height-lg;
        line-height: $switch-height-lg;
        text-indent: calc(calc(#{$switch-height-lg} * 2) + .5rem);
      }

      +label::before {
        width: calc(#{$switch-height-lg} * 2);
      }

      +label::after {
        width: calc(#{$switch-height-lg} - calc(#{$switch-thumb-padding} * 2));
        height: calc(#{$switch-height-lg} - calc(#{$switch-thumb-padding} * 2));
      }

      &:checked+label::after {
        margin-left: $switch-height-lg;
      }
    }
  }

  +.switch {
    margin-left: 1rem;
  }
}

.file-upload {
  cursor: pointer;
  position: relative;
  display: inline-block;

  .file-upload__label {
    display: block;
    padding: 1.2em 1em;
    color: $main-sub-color;
    background: transparent;
    border-radius: .25em;
    border: 1px solid $main-color;
    text-align: center;
    cursor: pointer;

    i {
      font-size: 2em;
      color: $main-sub-color;
    }

    &:hover {
      cursor: pointer;
    }
  }

  .file-upload__input {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    font-size: 1;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
  }
}

// For the tree

.select2 {
  width: 100% !important
}

.tree {
  Ul:first-child {
    padding: 0;
    margin: 0;
  }

  .icon-minus-sign {
    padding-left: 2px;

    &:before {
      font-family: "Font Awesome 5 Free";
      content: "\f068";
      margin-right: 4px;
    }
  }

  .icon-plus-sign {
    padding-left: 2px;

    &:before {
      font-family: "Font Awesome 5 Free";
      content: "\f067";
      margin-right: 4px;
    }
  }
}

.tree li {
  list-style-type: none;
  margin: 0;
  padding: 10px 0px 0 5px;
  position: relative;
}

.tree li::before,
.tree li::after {
  content: '';
  left: -20px;
  position: absolute;
  right: auto
}

.tree li::before {
  border-left: 1px solid #999;
  bottom: 50px;
  height: 100%;
  top: 0;
  width: 1px
}

.tree li::after {
  border-top: 1px solid #999;
  height: 20px;
  top: 25px;
  width: 25px
}

.tree li span {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border: 1px solid #999;
  border-radius: 5px;
  display: inline-block;
  padding: 3px 8px;
  text-decoration: none;
  width: 100%
}

.tree li.parent_li>span {
  cursor: pointer
}

.tree>ul>li::before,
.tree>ul>li::after {
  border: 0
}

.tree li:last-child::before {
  height: 30px
}

.tree li.parent_li>span:hover,
.tree li.parent_li>span:hover+ul li span {
  background: #eee;
  border: 1px solid #94a0b4;
  color: #000
}

.taxon-actions {
  border: none !important;
  display: inline;
}

.taxon-actions i {
  margin-left: 5px;
  margin-right: 5px;
}

.taxon-actions i:hover {
  cursor: pointer;
}