#setting_products_option {
  // * ----------------
  // มีบางส่วนใช้ร่วมกับ หน้า _setting.scss
  // ----------------
  
  .option__tool--container {
    text-align: right;
  }
  .addProductOptionCategories{
    border-radius: 5px;
    background-color: #004f9c;
    color: #fff;
  }
  .products_option{
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    margin: 0;
    border-collapse: collapse;

    td{
      padding: 15px 10px;
      border-bottom: 1px solid #ddd;
      .name{
        display: flex;
        align-items: center;
      }
      .option{
        font-size: 14px;
        color: #888;
      }
      .using{
        text-align: center;
      }
      
    }
    thead{
      font-weight: 500;
      background-color: transparent;
      font-size: 15px;
      td{
        padding: 10px;
      }
      td:first-child{
        cursor: unset;
      }
      td:nth-child(4):after{
        content: '';
      }
    }
    tbody{
      tr{
        cursor: pointer;
        &:hover{
          background-color: #dfeaf3;
        }
      }
      td{
        &:last-child{
          div{
            display: flex;
          align-items: center;
          justify-content: center;
          }
        }
      }
    }
  }
  .dataTables_filter{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: 15px 0;
    label{
      font-weight: 300;
      input{
        border: 1px solid #ddd;
        padding: 5px;
        border-radius: 5px;
      }
    }
  }
  .dataTables_wrapper{
    .bottom{
      padding: 20px 0;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
    }
    .dataTables_length{
      label{
        font-weight: 300;
      }
    }
    .paginate_button{
      text-decoration: underline !important;
      font-weight: 300;
      border: 0 !important;
      &.disabled{
        color: #bfbfbf !important;
      }
      &:hover{
        background: transparent;
        color: #000 !important;
      }
      &.disabled:hover{
        color: #bfbfbf !important;
      }
    }
    span .paginate_button{
      text-decoration: none !important;
      &.current{
        font-weight: 700;
        background: #d9d9d9;
        line-height: 1em;
        padding: 7px 12px;
      }
    }
  }
  @media only screen and (max-width: 992px) {
    .addProductOptionCategories{
      margin-bottom: 20px;
      width: 100%;
      padding: 10px;
    }
    .products_option{
      td{
        font-size: 13px;
        &:first-child{
          padding: 5px;
        }
        &:nth-child(2){
          img{
            width: 50px;
          }
        }
        &:last-child{
          div{flex-wrap: wrap;}
          .product_option_btn{
            margin: 5px;
            padding: 5px;
          }
        }
      }
    }
    .dataTables_filter{

    }
  }
}

#modal_product_option_categories{
  .modal-header{
    font-weight: 700;
    font-size: 22px;
  }
  .modal-body{
    padding: 15px 40px;
  }
  .modal-footer{
    text-align: left;
  }
  .productOption-delete{
    text-decoration: underline;
    font-size: 14px;
    color: red;
    cursor: pointer;
  }
  .productOption-close{
    float: right;
    margin-right: 10px;
  }
  .productOption-submit{
    background-color: #004f9c;
    color: #fff;
    float: right;
  }
  .productOption{
    border-bottom: 1px solid#e5e5e5;
    &__line{
      display: flex;
      // align-itemss: center;
      margin-bottom: 15px;
      position: relative;
      width: fit-content;

      &--title{
        width: 100px;
        font-weight: 500;
        font-size: 16px;
        padding: 10px 0;
      }
      input{
        border: 1px solid #ddd;
        padding: 10px 20px;
        border-radius: 3px;
        font-size: 16px;
        &:disabled{
          border: 0;
          background-color: #f2f2f2;
        }
      }
    }
    &__add{
      color: #004f9c;
      border: 1px solid #004f9c;
      border-radius: 3px;
      padding: 0.5em 0.8em;
      width: fit-content;
      float: right;
      cursor: pointer;
    }
    .options{
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      &__switch{
        position: relative;
        margin-right: 10px;
        input[type=checkbox]{
            height: 100%;
            width: 100%;
            position: absolute;
            opacity: 0;
        }
        
        label {
            cursor: pointer;
            text-indent: -9999px;
            width: 40px;
            height: 21px;
            background: grey;
            border-radius: 100px;
            position: relative;
            display: flex;
            align-items: center;
            margin-bottom: 0;
        }
        
        label:after {
            content: '';
            position: absolute;
            left: 2px;
            width: 17px;
            height: 17px;
            background: #fff;
            border-radius: 50%;
            transition: 0.3s;
        }
        
        input:checked + label {
            background: #9ecc3b;
        }
        
        input:checked + label:after {
            left: calc(100% - 2px);
            transform: translateX(-100%);
        }
      }
      &__btn{
        width: 20px;
        margin: 10px;
        cursor: pointer;
        img{max-width: 100%;max-height: 100%;}
      }
      &__move{
        cursor: move;
      }
    }
  }
  .productOptionUsing{
    &__title{
      font-weight: 500;
      font-size: 16px;
      padding: 10px 0;
    }
    &__product{
      display: flex;
      flex-wrap: wrap;
      color: #888;
      div{
        margin-right: 20px;
        line-height: 2em;
      }
    }
  }
  @media only screen and (max-width: 992px) {
    .modal-body{
      padding: 15px;
      .productOption{
        &__line{
          flex-wrap: wrap;
          &--title{
            width: 100%;
          }
          input{
            width: 100%;
          }
        }
      }
    }
  }
}