.page-sidebar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  /*
  width: 30rem;
  max-width: 30rem;
  */
  width: 30rem;
  max-width: 22.5rem;
  background-color: #ffffff;
  border-left: 1px solid rgba(34, 34, 48, 0.1);
  box-shadow: none;
  overflow: auto;
  z-index: 1029;
  transform: translate3d(100%, 0, 0);
  transition: transform 200ms ease-in-out;
}

/*
@media (min-width: 768px) {
.has-sidebar-fluid .page-sidebar {
width: calc(100vw - 30rem);
max-width: calc(100vw - 30rem);
}
}
*/

/*
@media (min-width: 1200px) {
.has-sidebar-fluid .page-sidebar {
width: calc(100vw - 37.5rem);
max-width: calc(100vw - 37.5rem);
}
}
*/

@media (min-width: 576px) {
  .has-sidebar-expand-sm .app-main > .app-footer,
  .has-sidebar-expand-sm .page-inner {
    margin-right: 30rem;
  }
  .has-sidebar-expand-sm .page-sidebar {
    transform: translate3d(0, 0, 0);
  }
  .has-sidebar-open .has-sidebar-expand-sm .page-sidebar {
    position: absolute;
    top: 0;
    transform: translate3d(100%, 0, 0);
  }
  .has-sidebar-expand-sm.has-sidebar-fluid .page-inner {
    margin-right: calc(100vw - 37.5rem);
  }
  .has-sidebar-expand-sm.has-sidebar-fluid .page-sidebar {
    width: calc(100vw - 37.5rem);
    max-width: calc(100vw - 37.5rem);
  }
}

@media (min-width: 768px) {
  .has-sidebar-expand-md .app-main > .app-footer,
  .has-sidebar-expand-md .page-inner {
    margin-right: 30rem;
  }
  .has-sidebar-expand-md .page-sidebar {
    transform: translate3d(0, 0, 0);
  }
  .has-sidebar-open .has-sidebar-expand-md .page-sidebar {
    position: absolute;
    top: 0;
    transform: translate3d(100%, 0, 0);
  }
  .has-sidebar-expand-md.has-sidebar-fluid .page-inner {
    margin-right: calc(100vw - 37.5rem);
  }
  .has-sidebar-expand-md.has-sidebar-fluid .page-sidebar {
    width: calc(100vw - 37.5rem);
    max-width: calc(100vw - 37.5rem);
  }
}

@media (min-width: 992px) {
  .has-sidebar-expand-lg .app-main > .app-footer,
  .has-sidebar-expand-lg .page-inner {
    margin-right: 30rem;
  }
  .has-sidebar-expand-lg .page-sidebar {
    transform: translate3d(0, 0, 0);
    max-width: 30rem;
  }
  .has-sidebar-open .has-sidebar-expand-lg .page-sidebar {
    position: absolute;
    top: 0;
    transform: translate3d(100%, 0, 0);
  }
  .has-sidebar-expand-lg.has-sidebar-fluid .page-inner {
    margin-right: calc(100vw - 37.5rem);
  }
  .has-sidebar-expand-lg.has-sidebar-fluid .page-sidebar {
    width: calc(100vw - 37.5rem);
    max-width: calc(100vw - 37.5rem);
  }
}

@media (min-width: 1200px) {
  .has-sidebar-expand-xl .app-main > .app-footer,
  .has-sidebar-expand-xl .page-inner {
    margin-right: 30rem;
  }
  .has-sidebar-expand-xl .page-sidebar {
    transform: translate3d(0, 0, 0);
  }
  .has-sidebar-open .has-sidebar-expand-xl .page-sidebar {
    position: absolute;
    top: 0;
    transform: translate3d(100%, 0, 0);
  }
  .has-sidebar-expand-xl.has-sidebar-fluid .page-inner {
    margin-right: calc(100vw - 37.5rem);
  }
  .has-sidebar-expand-xl.has-sidebar-fluid .page-sidebar {
    width: calc(100vw - 37.5rem);
    max-width: calc(100vw - 37.5rem);
  }
}

.has-sidebar-expand .app-main > .app-footer,
.has-sidebar-expand .page-inner {
  margin-right: 30rem;
}

.th_necessary {
  color: #6593ff;
}

.input_max_width {
  max-width:500px;
}

/* DataTable 정렬 화살표 없애기 ------------------------ */
.dataTable > thead > tr > th[class*="sort"]:after{
  content: "" !important;
}
.dataTable > thead > tr > th[class*="sort"]:before{
  content: "" !important;
}

table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > td.sorting_asc,
table.dataTable thead > tr > td.sorting_desc,
table.dataTable thead > tr > td.sorting {
  padding-right: 5px;
  vertical-align: middle;
}
/* ------------------------ DataTable 정렬 화살표 없애기*/

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.popover{
  max-width: 100%; /* Max Width of the popover (depending on the container!) */
}


#my-spinner {
  width: 100%; height: 100%;
  top: 0; left: 0;
  display: none;
  opacity: .6;
  background: silver;
  position: fixed;
  z-index: 9999;

}

#my-spinner div {
  width: 100%; height: 100%;
  display: table;
}

#my-spinner span {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

#my-spinner img {
  background: white;
  padding: 1em;
  border-radius: .7em;
}

@media print {
  body {
    -webkit-print-color-adjust: exact !important;
  }
  .workOrderTable_1 > th {
    background-color: #cecece;
  }
}

.endline{
  page-break-before:always
}