/***** ship.list (override admin table styling) *****/
.panel-ship-list .datatables-wrapper thead th:nth-child(1) { width: 20px; }
.panel-ship-list .datatables-wrapper thead th:nth-child(2) { width: 40px; }
.panel-ship-list .datatables-wrapper thead th:nth-child(3) { width: 50px; }
.panel-ship-list .datatables-wrapper thead th:nth-child(4),
 .panel-ship-list .datatables-wrapper thead th:nth-child(5)
 .panel-ship-list .datatables-wrapper thead th:nth-child(6) { width: 80px; }
.panel-ship-list .datatables-wrapper thead th:nth-child(7) { width: 100px; }
.panel-ship-list .datatables-wrapper thead th:nth-child(8),
 .panel-ship-list .datatables-wrapper thead th:nth-child(9) { width: 80px; }
.panel-ship-list .datatables-wrapper thead th:nth-child(13) { width: 100px; }
.panel-ship-list .datatables-wrapper thead th:nth-child(14) { width: 80px; }
.panel-ship-list .datatables-wrapper thead th:nth-child(16) { width: 50px; }
.panel-ship-list .datatables-wrapper thead th:nth-child(17),
 .panel-ship-list .datatables-wrapper thead th:nth-child(18) { width: 80px; }
.panel-ship-list .datatables-wrapper thead th:nth-child(20) { width: 70px; }
.panel-ship-list .datatables-wrapper thead th:nth-child(21),
 .panel-ship-list .datatables-wrapper thead th:nth-child(22) { width: 100px; }

.panel-ship-list .datatables-wrapper thead th:nth-child(10),
 .panel-ship-list .datatables-wrapper thead th:nth-child(11),
 .panel-ship-list .datatables-wrapper thead th:nth-child(12),
 .panel-ship-list .datatables-wrapper thead th:nth-child(15),
 .panel-ship-list .datatables-wrapper thead th:nth-child(19) { width: auto; }


/***** ship.list.req *****/
.panel-ship-list-request .datatables-wrapper thead th:nth-child(1) { width: 40px; }
.panel-ship-list-request .datatables-wrapper thead th:nth-child(4) { width: 100px; }
.panel-ship-list-request .datatables-wrapper thead th:nth-child(5) { width: 80px; }
.panel-ship-list-request .datatables-wrapper thead th:nth-child(7) { width: 50px; }
.panel-ship-list-request .datatables-wrapper thead th:nth-child(8),
 .panel-ship-list-request .datatables-wrapper thead th:nth-child(9) { width: 80px; }

 


/***** home: overlay-ship-weight *****/
.tbl-ship-weight-pkg { margin-bottom: 20px; width: 500px; }
.tbl-ship-weight-pkg input { min-width: auto; width: 100%; }
.tbl-ship-weight-pkg tbody td { padding: 0; }
.tbl-ship-weight-pkg tbody td:nth-child(1) { min-width: 40px; width: 40px; text-align: center; }
.tbl-ship-weight-pkg tbody td:nth-child(2),
.tbl-ship-weight-pkg tbody td:nth-child(8) { min-width: 100px; width: 100px; } /* weight */
.tbl-ship-weight-pkg tbody td:nth-child(3),
 .tbl-ship-weight-pkg tbody td:nth-child(5),
 .tbl-ship-weight-pkg tbody td:nth-child(7),
 .tbl-ship-weight-pkg tbody td:nth-child(9),
 .tbl-ship-weight-pkg tbody td:nth-child(11),
 .tbl-ship-weight-pkg tbody td:nth-child(13) { min-width: 50px; width: 50px; } /* w, h, d */
.tbl-ship-weight-pkg tbody td:nth-child(4),
 .tbl-ship-weight-pkg tbody td:nth-child(6),
 .tbl-ship-weight-pkg tbody td:nth-child(10),
 .tbl-ship-weight-pkg tbody td:nth-child(12) { min-width: 20px; width: 20px; text-align: center; } /* "x" between w, h, d */
.tbl-ship-weight-pkg td:nth-child(8) [name="pkg_weight[]"] { border-left: 0; }
.tbl-ship-weight-pkg [name="pkg_w[]"],
 .tbl-ship-weight-pkg [name="pkg_h[]"],
 .tbl-ship-weight-pkg [name="pkg_d[]"],
 .tbl-ship-weight-pkg [name="pkg_w_master[]"],
 .tbl-ship-weight-pkg [name="pkg_h_master[]"],
 .tbl-ship-weight-pkg [name="pkg_d_master[]"] { border-right: 1px solid #ccc; }





/***** invoice list *****/
.panel-inv-list .datatables-wrapper thead th:nth-child(1) { width: 70px; }
.panel-inv-list .datatables-wrapper thead th:nth-child(2) { width: 90px; }
.panel-inv-list .datatables-wrapper thead th:nth-child(3) { width: 80px; }
.panel-inv-list .datatables-wrapper thead th:nth-child(4) { width: 90px; }
.panel-inv-list .datatables-wrapper thead th:nth-child(6) { width: 90px; }
.panel-inv-list .datatables-wrapper thead th:nth-child(7),
 .panel-inv-list .datatables-wrapper thead th:nth-child(8) { width: 80px; }
.panel-inv-list .datatables-wrapper thead th:nth-child(9) { width: 60px; }
 .panel-inv-list .datatables-wrapper thead th:nth-child(10),
 .panel-inv-list .datatables-wrapper thead th:nth-child(11),
 .panel-inv-list .datatables-wrapper thead th:nth-child(12),
 .panel-inv-list .datatables-wrapper thead th:nth-child(13),
 .panel-inv-list .datatables-wrapper thead th:nth-child(14),
 .panel-inv-list .datatables-wrapper thead th:nth-child(15) { width: 100px; }

.panel-inv-list .datatables-wrapper thead th:nth-child(5) { width: auto; }




.adv-search-checks {
  display: flex;
  flex-wrap: wrap;
  width: 800px;
}
.adv-search-checks > div {
  display: inline-block;
}

/* ship list */
.wrapper-toggle-container #r-is-ship-0:checked ~ .toggle-tab-group label[for="r-is-ship-0"],
.wrapper-toggle-container #r-is-ship-10:checked ~ .toggle-tab-group label[for="r-is-ship-10"],
.wrapper-toggle-container #r-is-ship-11:checked ~ .toggle-tab-group label[for="r-is-ship-11"],
.wrapper-toggle-container #r-is-ship-30:checked ~ .toggle-tab-group label[for="r-is-ship-30"],
.wrapper-toggle-container #r-is-ship-31:checked ~ .toggle-tab-group label[for="r-is-ship-31"],
.wrapper-toggle-container #r-is-ship-50:checked ~ .toggle-tab-group label[for="r-is-ship-50"],
.wrapper-toggle-container #r-is-ship-52:checked ~ .toggle-tab-group label[for="r-is-ship-52"],
.wrapper-toggle-container #r-is-all:checked ~ .toggle-tab-group label[for="r-is-all"] {
  z-index: 3;
  background: #fff;
  border-bottom: 1px solid #fff;
  color: #387ef5;
}
.wrapper-toggle-container #r-is-ship-0:checked ~ .toggle-tab-group label[for="r-is-ship-0"] .tab-counter,
.wrapper-toggle-container #r-is-ship-10:checked ~ .toggle-tab-group label[for="r-is-ship-10"] .tab-counter,
.wrapper-toggle-container #r-is-ship-11:checked ~ .toggle-tab-group label[for="r-is-ship-11"] .tab-counter,
.wrapper-toggle-container #r-is-ship-30:checked ~ .toggle-tab-group label[for="r-is-ship-30"] .tab-counter,
.wrapper-toggle-container #r-is-ship-31:checked ~ .toggle-tab-group label[for="r-is-ship-31"] .tab-counter,
.wrapper-toggle-container #r-is-ship-50:checked ~ .toggle-tab-group label[for="r-is-ship-50"] .tab-counter,
.wrapper-toggle-container #r-is-ship-52:checked ~ .toggle-tab-group label[for="r-is-ship-52"] .tab-counter,
.wrapper-toggle-container #r-is-all:checked ~ .toggle-tab-group label[for="r-is-all"] .tab-counter {
  background: #387ef5;
}
.wrapper-toggle-container #r-is-ship-0:checked ~ .toggle-tab-group label[for="r-is-ship-0"]::before,
.wrapper-toggle-container #r-is-ship-10:checked ~ .toggle-tab-group label[for="r-is-ship-10"]::before,
.wrapper-toggle-container #r-is-ship-11:checked ~ .toggle-tab-group label[for="r-is-ship-11"]::before,
.wrapper-toggle-container #r-is-ship-30:checked ~ .toggle-tab-group label[for="r-is-ship-30"]::before,
.wrapper-toggle-container #r-is-ship-31:checked ~ .toggle-tab-group label[for="r-is-ship-31"]::before,
.wrapper-toggle-container #r-is-ship-50:checked ~ .toggle-tab-group label[for="r-is-ship-50"]::before,
.wrapper-toggle-container #r-is-ship-52:checked ~ .toggle-tab-group label[for="r-is-ship-52"]::before,
.wrapper-toggle-container #r-is-all:checked ~ .toggle-tab-group label[for="r-is-all"]::before {
  background: #387ef5;
  transform: scaleX(1);
}
/* ship list-hold */
.wrapper-toggle-container #rTab0:checked ~ .toggle-tab-group label[for="rTab0"],
.wrapper-toggle-container #rTab10:checked ~ .toggle-tab-group label[for="rTab10"],
.wrapper-toggle-container #rTab11:checked ~ .toggle-tab-group label[for="rTab11"],
.wrapper-toggle-container #rTab20:checked ~ .toggle-tab-group label[for="rTab20"],
.wrapper-toggle-container #rTab30:checked ~ .toggle-tab-group label[for="rTab30"],
.wrapper-toggle-container #rTab40:checked ~ .toggle-tab-group label[for="rTab40"],
.wrapper-toggle-container #rTab41:checked ~ .toggle-tab-group label[for="rTab41"],
.wrapper-toggle-container #rTab50:checked ~ .toggle-tab-group label[for="rTab50"],
.wrapper-toggle-container #rTab60:checked ~ .toggle-tab-group label[for="rTab60"],
.wrapper-toggle-container #rTab70:checked ~ .toggle-tab-group label[for="rTab70"],
.wrapper-toggle-container #rTab80:checked ~ .toggle-tab-group label[for="rTab80"],
.wrapper-toggle-container #rTaball:checked ~ .toggle-tab-group label[for="rTaball"] {
  z-index: 3;
  background: #fff;
  border-bottom: 1px solid #fff;
  color: #387ef5;
}
.wrapper-toggle-container #rTab0:checked ~ .toggle-tab-group label[for="rTab0"] .tab-counter,
.wrapper-toggle-container #rTab10:checked ~ .toggle-tab-group label[for="rTab10"] .tab-counter,
.wrapper-toggle-container #rTab11:checked ~ .toggle-tab-group label[for="rTab11"] .tab-counter,
.wrapper-toggle-container #rTab20:checked ~ .toggle-tab-group label[for="rTab20"] .tab-counter,
.wrapper-toggle-container #rTab30:checked ~ .toggle-tab-group label[for="rTab30"] .tab-counter,
.wrapper-toggle-container #rTab40:checked ~ .toggle-tab-group label[for="rTab40"] .tab-counter,
.wrapper-toggle-container #rTab41:checked ~ .toggle-tab-group label[for="rTab41"] .tab-counter,
.wrapper-toggle-container #rTab50:checked ~ .toggle-tab-group label[for="rTab50"] .tab-counter,
.wrapper-toggle-container #rTab60:checked ~ .toggle-tab-group label[for="rTab60"] .tab-counter,
.wrapper-toggle-container #rTab70:checked ~ .toggle-tab-group label[for="rTab70"] .tab-counter,
.wrapper-toggle-container #rTab80:checked ~ .toggle-tab-group label[for="rTab80"] .tab-counter,
.wrapper-toggle-container #rTaball:checked ~ .toggle-tab-group label[for="rTaball"] .tab-counter {
  background: #387ef5;
}
.wrapper-toggle-container #rTab0:checked ~ .toggle-tab-group label[for="rTab0"]::before,
.wrapper-toggle-container #rTab10:checked ~ .toggle-tab-group label[for="rTab10"]::before,
.wrapper-toggle-container #rTab11:checked ~ .toggle-tab-group label[for="rTab11"]::before,
.wrapper-toggle-container #rTab20:checked ~ .toggle-tab-group label[for="rTab20"]::before,
.wrapper-toggle-container #rTab30:checked ~ .toggle-tab-group label[for="rTab30"]::before,
.wrapper-toggle-container #rTab40:checked ~ .toggle-tab-group label[for="rTab40"]::before,
.wrapper-toggle-container #rTab41:checked ~ .toggle-tab-group label[for="rTab41"]::before,
.wrapper-toggle-container #rTab50:checked ~ .toggle-tab-group label[for="rTab50"]::before,
.wrapper-toggle-container #rTab60:checked ~ .toggle-tab-group label[for="rTab60"]::before,
.wrapper-toggle-container #rTab70:checked ~ .toggle-tab-group label[for="rTab70"]::before,
.wrapper-toggle-container #rTab80:checked ~ .toggle-tab-group label[for="rTab80"]::before,
.wrapper-toggle-container #rTaball:checked ~ .toggle-tab-group label[for="rTaball"]::before {
  background: #387ef5;
  transform: scaleX(1);
}


/***** user profile *****/
.pg-user-profile {
  display: flex;
  flex-wrap: wrap
}


/* ***** open-track page (ktxpress popup) ***** */
.wrapper-open-track {
  font-family: 'Noto Sans KR';

  width: 600px;
  max-width: 600px;
  margin: auto;
  padding: 30px 0;
}
.wrapper-open-track .open-track-header {
  display: flex;
  justify-content: space-between;
}
.wrapper-open-track .open-track-header .kt-logo,
.wrapper-open-track .open-track-header .header-spacer {
  width: 120px;
}
.wrapper-open-track .open-track-header .kt-logo img {
  max-width: 100%;
}
.wrapper-open-track .wrapper-body {
  text-align: left;
  margin: 40px auto;
}
.wrapper-open-track .panel-white {
  background: white;
  border-radius: 10px;
  padding: 30px;
}

.wrapper-open-track .wrapper-body .err-msg {
  text-align: center;
}

.wrapper-open-track .info-flex {
  display: flex;
  font-size: 1rem;
}
.wrapper-open-track .info-flex .title {
  width: 120px;
  font-weight: bold;
}
.wrapper-open-track .info-flex + .info-flex {
  margin-top: 15px;
}

.wrapper-progress {
  padding: 50px 30px;
}
.wrapper-progress .prog-bar,
.wrapper-progress .stat-bar {
  display: flex;
  justify-content: space-between;
}
.wrapper-progress .prog-bar > div,
.wrapper-progress .stat-bar > div {
  width: 20%;
  text-align: center;
}
.wrapper-progress .prog-bar .point {
  z-index: 1;
  width: 30px; height: 30px;
  margin: 10px auto;
  border-radius: 100%;
  border: 1px solid #999999;
  background: white;
}
.wrapper-progress .prog-bar .point:not(.curr) .md {
  display: none;
}
.wrapper-progress .prog-bar .point.curr {
  width: 50px; height: 50px;
  margin: 0 auto;
  border: 0;
  background: #322ecf;
  color: white;
  text-align: center;
}
.wrapper-progress .prog-bar .point.curr.is-returned {
  background: var(--color-danger-dark);
}
.wrapper-progress .prog-bar .point.curr .md {
  margin-top: 7px;
  font-size: 36px;
}
.wrapper-progress .prog-bar .bar {
  position: absolute;
  top: 25px; left: 50px;
  width: 440px; height: 1px;
  border-top: 1px solid #999999;
}
.wrapper-progress .stat-bar {
  margin-top: 20px;
}
.wrapper-progress .stat-bar .curr {
  font-weight: bold;
}

.wrapper-info + .wrapper-events {
  margin-top: 30px;
}

.wrapper-open-track .wrapper-events {
  min-height: 400px;
  padding-bottom: 50px;
}
.wrapper-open-track .wrapper-events thead th {
  padding-bottom: 10px;
  color: black;
}
.wrapper-open-track .wrapper-events thead th,
.wrapper-open-track .wrapper-events tbody td {
  font-size: 12px;
}
.wrapper-open-track .wrapper-events thead th:nth-child(1),
.wrapper-open-track .wrapper-events thead th:nth-child(2) {
  width: 200px;
}
.wrapper-open-track .wrapper-events .out-track-col1 > div {
  display: inline-block;
}
.wrapper-open-track .wrapper-events .ts-tracks-wrapper {
  margin-top: 50px;;
}
.wrapper-open-track .wrapper-events .ts-tracks-wrapper > h3 + .ts-track-item {
  margin-top: 30px;
}
.wrapper-open-track .wrapper-events .ts-tracks-wrapper table td div {
  text-wrap: wrap;
}
.wrapper-open-track .wrapper-events .ts-tracks-wrapper .ck-ts-events ~ div.flex {
  gap: 10px;
  padding: 5px 0;
}
.wrapper-open-track .wrapper-events .ts-tracks-wrapper .ck-ts-events ~ table {
  display: none;
  margin-top: 20px;
  margin-bottom: 30px;
}
.wrapper-open-track .wrapper-events .ts-tracks-wrapper .ck-ts-events ~ div.flex .btn-event-close { display: none; }
.wrapper-open-track .wrapper-events .ts-tracks-wrapper .ck-ts-events:checked ~ table { display: table; }
.wrapper-open-track .wrapper-events .ts-tracks-wrapper .ck-ts-events:checked ~ div .btn-event-open { display: none; }
.wrapper-open-track .wrapper-events .ts-tracks-wrapper .ck-ts-events:checked ~ div .btn-event-close { display: inline; }



@media screen and (max-width: 700px) {

  body {
    height: auto;
    min-height: 100%;
  }
  .wrapper.wrapper-lg-table {
    display: block;
  }

  .btn-group :not(:last-child) input[type=submit],
  .btn-group input[type=submit]:not(:last-child),
  .btn-group :not(:last-child) input[type=button],
  .btn-group input[type=button]:not(:last-child),
  .btn-group :not(:last-child) button,
  .btn-group button:not(:last-child) {
    margin-bottom: auto;
  }

  .btn-group {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    flex-wrap: wrap;

    width: auto;
    margin-bottom: 5px;
  }
  .btn-group > *,
  .btn-group > input[type=button], .btn-group > input[type=submit], .btn-group > button {
    min-width: calc(50% - 5px);
    width: auto;
    margin-bottom: auto;
  }
  .btn-group > *:first-child:last-child {
    flex-grow: 1;
  }

  .col-n {
    display: block;
  }

  .wrapper-adv-search {
    margin: 0 0 50px;
  }
  .wrapper-search [type=search] {
    width: calc(100% - 60px);
  }
  .panel-adv-search .col-n {
    display: flex;
    gap: 5px;

    padding-left: 10px;
  }

  .panel-ship-list .ship-tabs-warning {
    margin: 10px auto;
  }
  .toggle-tab-group {
    display: flex;
    gap: 5px;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .wrapper-toggle-container label.toggle-tab {
    min-width: calc(50% - 3px);
    width: 30%;
  }
  .wrapper-toggle-container label.toggle-tab ~ .toggle-tab {
    margin: 0;
  }
  .tab-divider {
    display: none;
  }
  .datatables-wrapper {
    margin: 50px 0;
    padding-top: 10px;
    border-top: 1px solid #ccc;
    overflow: auto;
  }
  .datatables-wrapper .dataTables_wrapper  {
    width: fit-content;
  }
  .datatables-wrapper .dataTables_length {
    text-align: left;
  }

  .tbl-wrapper {
    overflow: auto;
  }

  #alert-pane section.btn-group { display: block; }
  #alert-pane section.btn-group button,
  #alert-pane section.btn-group input[type=button],
  #alert-pane section.btn-group input[type=submit] {
    min-width: 120px;
  }

  /* dashboard */
  .wrapper-dashboard .panel-dash-home h3 {
    margin: 20px 0;
  }
  .wrapper-dashboard .panel-dash-home .input-group {
    display: flex;
    justify-content: space-between;
  }
  .wrapper-dashboard .panel-dash-home .input-group > * {
    width: 50%;
  }
  .wrapper-dashboard .panel-dash-home .input-group .output h2 {
    margin: 0;
  }
  
  /* ship list */
  .wrapper-toggle-container #r-is-ship-0:checked ~ .toggle-tab-group label[for="r-is-ship-0"],
  .wrapper-toggle-container #r-is-ship-10:checked ~ .toggle-tab-group label[for="r-is-ship-10"],
  .wrapper-toggle-container #r-is-ship-11:checked ~ .toggle-tab-group label[for="r-is-ship-11"],
  .wrapper-toggle-container #r-is-ship-30:checked ~ .toggle-tab-group label[for="r-is-ship-30"],
  .wrapper-toggle-container #r-is-ship-31:checked ~ .toggle-tab-group label[for="r-is-ship-31"],
  .wrapper-toggle-container #r-is-ship-50:checked ~ .toggle-tab-group label[for="r-is-ship-50"],
  .wrapper-toggle-container #r-is-ship-52:checked ~ .toggle-tab-group label[for="r-is-ship-52"],
  .wrapper-toggle-container #r-is-all:checked ~ .toggle-tab-group label[for="r-is-all"],

  /* ship list-hold */
  .wrapper-toggle-container #rTab0:checked ~ .toggle-tab-group label[for="rTab0"],
  .wrapper-toggle-container #rTab10:checked ~ .toggle-tab-group label[for="rTab10"],
  .wrapper-toggle-container #rTab11:checked ~ .toggle-tab-group label[for="rTab11"],
  .wrapper-toggle-container #rTab20:checked ~ .toggle-tab-group label[for="rTab20"],
  .wrapper-toggle-container #rTab30:checked ~ .toggle-tab-group label[for="rTab30"],
  .wrapper-toggle-container #rTab40:checked ~ .toggle-tab-group label[for="rTab40"],
  .wrapper-toggle-container #rTab41:checked ~ .toggle-tab-group label[for="rTab41"],
  .wrapper-toggle-container #rTab50:checked ~ .toggle-tab-group label[for="rTab50"],
  .wrapper-toggle-container #rTab60:checked ~ .toggle-tab-group label[for="rTab60"],
  .wrapper-toggle-container #rTab70:checked ~ .toggle-tab-group label[for="rTab70"],
  .wrapper-toggle-container #rTab80:checked ~ .toggle-tab-group label[for="rTab80"],
  .wrapper-toggle-container #rTaball:checked ~ .toggle-tab-group label[for="rTaball"] {
    border-bottom: 1px solid #ccc;
  }

  /* ship view */
  .panel-ship-view .col-ship-view {
    display: block;
    min-width: auto;
  }

  /* order view */
  .pg-order-view .panel-order-info {
    display: block;
    min-width: auto;
  }
  .pg-order-view .flex-order-left + .flex-order-right {
    margin-top: 20px;
  }
  .pg-order-view .tbl-order-pkg,
  .pg-order-view .tbl-order-shipments,
  .pg-order-view .tbl-order-item {
    width: 100%;
  }

  /* invoice list */
  .panel-inv-list .btn-group {
    margin-bottom: 10px;
  }

  /* invoice view */
  .panel-invoice-view {
    min-width: auto;
  }

  /* user profile */
  .pg-user-profile .input-group {
    display: flex;
    justify-content: space-between;
  }
  .pg-user-profile .input-group > * {
    width: 50%;
  }
  
  
  .wrapper-open-track {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    padding: 30px 20px;
  }
  .wrapper-open-track .panel-white {
    padding: 20px;
  }
  .wrapper-open-track .open-track-header .kt-logo,
  .wrapper-open-track .open-track-header .header-spacer {
    width: 80px;
  }
  .wrapper-progress {
    padding: 30px;
  }
  .wrapper-progress .prog-bar .point {
      width: 20px; height: 20px;
      margin: 15px auto;
  }
  .wrapper-progress .prog-bar .point.curr {
    width: 40px; height: 40px;
    margin: 5px auto;
  }
  .wrapper-progress .prog-bar .point.curr .md {
    margin-top: 8px;
    font-size: 24px;
  }
  .wrapper-progress .prog-bar .bar {
    left: 30px;
    width: calc(100vw - 160px);
  }
  .wrapper-open-track .wrapper-events thead th,
  .wrapper-open-track .wrapper-events tbody td {
    font-size: 10px;
    line-height: 16px;
  }
  .wrapper-open-track .wrapper-events .out-track-col1 > div,
  .wrapper-open-track .wrapper-events .out-track-col3 > div {
    display: block;
  }
}