.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

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

.interface {
  &.loading {
    opacity:0 !important;
    height:0px;
    overflow:hidden;
  }
  &.not-loading {

  }
}

.onboarding-status {
  position:relative;
  top:25px;
  ul {
    margin:0;
    padding:0;
    list-style-type:none;
    margin-top:15px;
    li {
      margin:0;
      padding:0;
      line-height:30px;
      clear:both;
      border-bottom:1px dotted #202223;
      max-width:500px;
      span {
        &.cache-status {
          float:right;
          span {
            padding:0 4px;
          }
        }
      }
    }
  }
}
/* resource list css */
.collection-content-container {
  .Polaris-ResourceList__HeaderOuterWrapper {
    //margin-top:-65px;
  }
}
.collections-header-container {
  .resource-list-headings {
    display:flex;
    width:95%;
    margin-top:20px;
    position:relative;
    .resource-list-button-group {
      position:absolute;
      z-index:10;
      top:4px;
      left:40px;
      width:100%;
      background:#fff;
      //display:flex;
      &.not-all-selected {
        > span {
          display:none;
        }
        .Polaris-Button--plain:last-of-type {
          display:none;
        }
      }
      &.all-selected {
        .Polaris-Button--plain:first-of-type {
          display:none;
        }

      }
      .Polaris-ButtonGroup {
        //flex:4;
        float:left;
        margin-right:20px;
      }
      .Polaris-Button--plain {
       // flex:3
       margin-top:0;
      }
      .resource-list-num-selected {
        position:absolute;
        right:0;
        top:7px;
      }
      > span {
        padding-right:10px;
      }
    }
    .resource-list-num-selected {
      flex:1;
    }
    /*
    position:relative;
    top:0;
    margin-left:40px;
    padding:10px 0;
    z-index:20;
    background:rgba(0,0,0,.4);
    */
    .resource-list-heading-item {
      padding:10px 0;
      h3 {
        font-weight:bold;
      }
      &.rlhi-0 {
        flex:1;
        padding-top:8px;
        padding-left:4px;
      }
      &.rlhi-1{
        flex:4;
      }
      &.rlhi-2{
        flex:4;
      }
      &.rlhi-3{
        flex:3;
      }
      &.rlhi-4{
        flex:1;
      }
    }
  }
}
.metric-header-container {
  .resource-list-headings {
    width:95%;
    margin-top:25px;
    display:flex;
    .resource-list-heading-item {
      h3 {
        font-weight:bold;
      }
      &.rlhi-1{
        flex:4;
      }
      &.rlhi-2{
        flex:4;
      }
      &.rlhi-3{
        flex:3;
      }
      &.rlhi-4{
        flex:1;
      }
      &.rlhi-5{
        flex:1;
      }
    }
  }
}
.product-data-attributes {
  h4 {
    padding:20px 0 10px 15px;
    margin:0 0 10px;
    border-bottom:1px solid #D9DCDE;
  }
  .configurable-half {
    display:flex;
    margin-right:25px;
    .configurable-half-field {
      flex:6;
      margin-right:8px;
    }
    .configurable-half-button {
      flex:2;
      padding-top:24px;
      text-align:right;
    }
  }
}
.attribute-select-container {
  label {
    //font-weight:bold;
  }
  > div {
    display:inline-block;
    width:calc(100% - 100px);
    margin-right:8px;
  }
}
.attribute-ui-label {
  display:block;
  .Polaris-Label__Text{
    //font-weight:bold;
    padding-bottom:4px;
  }
}
.attribute-multiform-container {
  label {
    font-weight:bold;
  }
  .Polaris-Label {
    label {
      font-weight:bold;
      padding-bottom:4px;
    }
  }
  .iec-flex-container {
    padding-bottom:8px;
    > div {
      display:inline-block;
      width:calc(47% - 50px);
    }
    button {
      display:inline-block;
      width:80px;
    }
  }
  .attributes-resource-item-meta-container {
    padding-bottom:15px;
    &.hide{
      display:none;
    }
    > div {
      display:inline-block;
      width:calc(47% - 50px);
      &:last-of-type{
        margin-left:8px;
      }      
    }
  }
}
.add-attribute-container {
  border-top:1px solid #DBDCDF;
  padding:20px;
}

.attributes-header-container {
  .resource-list-headings {
    width:100%;
    margin-top:0;
    margin-bottom:10px;
    display:flex;
    .resource-list-heading-item {
      h3 {
        font-weight:bold;
      }
      &.rlhi-1{
        flex:28;
      }
      &.rlhi-2{
        flex:11;
      }
      &.rlhi-3{
        flex:69;
      }
      &.rlhi-4{
        flex:6;
      }
      &.rlhi-5{
        flex:6;
      }
    }
  }
}

.Polaris-Filters-ConnectedFilterControl__AuxiliaryContainer {
  .Polaris-Icon {
    display:inline-block;
    position:relative;
    top:6px;
    left:-6px;
    margin-top:-6px;
  }
}
.Polaris-ResourceList {

  .Polaris-ResourceItem__Actions {
    display:none;
  }
  .Polaris-ResourceItem__Disclosure {
    display:flex;
  }
  .collection-resource-item-col-4{
    .Polaris-Badge {
      position:relative;
      top:10px;
      left:10px;
    }
  }
  .Polaris-ResourceItem__Disclosure{
    > div {
      > button {
        position:relative;
        top:22px;
        left:15px;
      }
    }
  }
  .Polaris-ResourceItem__Content {
    display:flex;
    width:95%;
    .resource-item-col{
      flex:1;
      &.collection-resource-item-col-1 {
        flex:4;
      }
      &.collection-resource-item-col-2 {
        flex:4;
      }
      &.collection-resource-item-col-3 {
        flex:3;
      }
      a {
        text-decoration:none;
      }
      &.attributes-resource-item-col-1 {
        flex:78;
        width:calc(100% - 25px);
      }
      &.attributes-resource-item-col-2 {
        flex:30;
      }
      &.attributes-resource-item-col-3 {
        flex:190;
      }    
      &.attributes-resource-item-col-4 {
        flex:20;
        span[data-polaris-tooltip-activator]{
          position:relative;
          top:11px;
        }
      }     
    }
  }
}
.attribute-partner-image {
  display:inline-block;
  height:18px;
  position:relative;
  top:5px;
  padding-right:4px;
}
/* pagination styles */
.pagination-container {
  text-align:center;
  padding:25px 0;
  nav {
    display:inline-block;
    margin:0 auto;
  }
}
.Polaris-Layout__AnnotatedSection {
  .Polaris-Card{
    margin:0 20px;
    padding:20px;
    .Polaris-Heading {
      margin:15px 0;
    }
    .Polaris-FormLayout {
      table{
        width:100%;
        th {
          border-bottom:2px solid #b9bdc0;
          padding:10px;
          text-align:left;
          margin:0;
        }
        td {
          padding:10px;
          text-align:left;          
        }
      }
    }
  }
}
.settings-save-container {
  text-align:right;
  margin:20px 0;
  button {
    margin-left:10px;
  }
}
.modal-content {
  padding:10px 20px 30px;
}
.top-padding {
  padding-top:50px;
}
/* Create Metrics Styles */
.Polaris-Page {
  position:relative;
  .metrics-top-actions {
    right:25px;
    top:20px;
    position:absolute;
    z-index:10;
    display:flex;
    .Polaris-Button--plain {
      margin-right:25px;
      font-weight:bold;
      button {
        font-weight:bold;
      }
    }
  }
  h4.Polaris-Heading {

  }
  .edit-metrics-card-heading {
    margin-top:25px;
    h4 {
      margin-bottom:10px;
      padding-bottom:0;
      font-weight:bold;
      font-size:16px;
    }
  }
}
.inline-tooltip-container {
  display:inline;
  position:absolute;
  padding-left:10px;
}
.metric-attribute-row {
  display:flex;
  margin-bottom:10px;
  > div {
    flex:1;
    padding-right:10px;
  }
}
.inline-tooltip {
  display:inline-block;
}
/* products */
.products-footer {
  .Polaris-Card__Section {
    text-align:center;
    background:#f4f6f8;
    border-top-left-radius:0;
    border-top-right-radius:0;
    //
  }
}
.products-empty {
  text-align:center;
  padding:100px;
  .Polaris-TextContainer {
    font-size:20px;
    padding:15px 0;
  }
  .Polaris-Icon {
    font-size:32px;
    width:32px;
    height:32px;
  }
}
.header-selection-form {
  margin-bottom:25px;
  .Polaris-FormLayout {
    display:flex;

    > div:nth-of-type(1){
      flex:1;
    }
    > div:nth-of-type(2){
      flex:1;
    }
    > div:nth-of-type(3){
      flex:1;
      .box-right{
        text-align:right;
        button {
          display:inline-block;
          margin-left:15px;
          margin-top:-2px;
          span{
            font-weight:bold;
          }
        }
      }
    }
  }
}
.metrics-preview-products {
  .metric-product-item-col:nth-of-type(1) {
    flex:1;
    text-align:left;
  }
  .metric-product-item-col:nth-of-type(2) {
    flex:1;
    text-align:center;
    img {
      width:100%;
      height:auto;
      border:1px solid #efefef;
      border-radius:2px;
    }
  }
  .metric-product-item-col:nth-of-type(3) {
    flex:12;
    text-align:left;
    margin-left:20px;
    margin-right:20px;
  }
  .metric-product-item-col:nth-of-type(4) {
    flex:1;
    text-align:center;
  }
}
.metric-attribute-list {
  list-style-type:none;
  text-transform: capitalize;;
  .metrics-and-more {
    opacity:0.7;
  }
}
.edit-product-rows-list {
  padding:10px 15px;

}
.product-index-table {

  .Polaris-IndexTable__TableHeading.display-false,
  .Polaris-IndexTable__TableCell.display-false {
    display:none;
  }
  .table-heading-dot {
    display:inline-block;
    border:1px solid #ccc;
    height:10px;
    width:10px;
    border-radius:5px;
    margin-right:4px;
    &.active {
      border:1px solid #007f5f;
      background:#007f5f;
    }
  }
  .products-product-data {
    display:flex;
    width:320px;
    .image {
      flex:1;
      margin-right:8px;
      img {
        width:40px;
      }
    }
    .products-product-info {
      flex:5;
      strong{
        display:block;
        width:100%;
        text-overflow: ellipsis;
      }
      .sep{
        padding:0 5px;
      }
    }
  }
  .products-product-boost {
    display:flex;
    .Polaris-TextField__Input{
      width:60px;
    }
    .Polaris-Labelled--hidden{
      padding-right:5px;
    }
  }
  .products-product-totals,
  .products-product-quantity,
  .products-product-full-size-run,
  .products-product-age-of-newest-variant,
  .products-product-sales-last-30-days,
  .products-product-sales-last-7-days,
  .products-product-margin,
  .products-product-sold-out,
  .products-product-on-sale,
  .products-product-coming-soon,
  .products-product-brand-boost,
  .products-product-yotpo,
  div[class*="products-product-custom_"] {
    strong {
      display:block;
    }
  }

}
.sort-popover-container {
  position:relative;
  .sort-popover {
    position:absolute;
    top:100%;
    z-index:10;
    background:#fff;
    background-color: var(--p-surface);
    box-shadow: var(--p-shadow-card);
    border-radius: var(--p-border-radius-2);
    padding:10px;
    &.hide {
      display:none;
    }
  }
}
.collection-content-container {
  position:relative;
  .sort-popover-container {
    .sort-popover{
      width:220%;
      left:-120%;
    }
  }
  .collection-count-status {
    position:absolute;
    top:30px;
    right:55px;
  }
}
.collections-side-card {
  padding-bottom:20px;
  .Polaris-TextField {
    margin:10px 20px;
  }
  ul {
    list-style-type:none;
    padding:0;
    margin:0;
    li {
      line-height:20px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      margin:4px 20px 4px;
      padding:10px 0;
      border-bottom:1px solid #DBDCDF;
      &:last-of-type{
        border-bottom:none;
      }
      &.collections-side-card-item-10{
        font-style:italic;
      }
    }
    
  }
}
.nav-status {
  .Polaris-Badge {
    cursor:pointer;
  }
}
.custom-attributes-disabled{
  .Polaris-ResourceItem__Disclosure {
    opacity:0;
  }
}
.Polaris-Modal-Dialog__Modal {
  max-width:720px;
}
.onboarding-modal-content {
  display:flex;
  .Polaris-Modal-CloseButton {
    border:1px solid red;
    color:#fff;
    fill:#fff;
  }
  .content {
    flex:1;
    .onboarding-welcome {
      background:#f6f6f7;
      padding:20px 30px;
      border:0px solid transparent;
      border-bottom:1px solid #dcdcdc;
      height:100px;
      border-top-left-radius:8px;

      h4 {
        font-size:20px;
        margin:12px 0 4px;
      }
    }
    .onboarding-modal-item {
      margin:20px 30px;
      border-bottom:1px solid #dcdcdc;
      padding:10px 30px 20px;
      position:relative;
      height:80px;
      &:last-of-type{
        border:none;
      }
      h5 {
        font-size:16px;
      }
      > span {
        position:absolute;
        left:1px;
        top:12px;
        display:block;
        height:16px;
        width:16px;
        background:#c8c8c8;
        border:0px solid transparent;
        border-radius:50%;
        &.completed {
          background:#107f61;
        }
      }
      > strong {
        color:#107f61;
        font-weight:bold;
      }
    }
  }
  .image {
    flex:1;
    background:url(https://dynasort.immersiveecommerce.com/assets/img/dynasort-modal-bg.png) center center no-repeat;
    background-size:cover;
    border:0px solid transparent;
    border-top-right-radius:8px;
    border-bottom-right-radius:8px;
  }
}
.hr {
  border-top:1px solid #b9bdc0;
  margin:8px 0;
}
