@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

*,
*::after,
*::before {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

body {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #dbdbdb 0%, #b4b4b4 100%);
  overflow: hidden;
}
body #app {
  width: 100%;
  height: 100vh;
}
body #main-container {
  background: rgb(160, 160, 160);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
}
body #main-container .loading-cover {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 99;
  background-color: #f3fbff;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
body #main-container .loading-cover.isLoaded {
  display: none;
}
body #main-container .loading-cover img {
  width: 36px;
}
body #main-container .content {
  width: 100%;
  height: 100vh;
  text-align: center;
  font-family: Arial, sans-serif;
}

.cover {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 768px;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.cover .alertbox {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  gap: 2rem;
  border-radius: 10px;
  color: #333;
}
.cover .alertbox h1 {
  font-size: 2rem;
}
.cover .alertbox .message {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 1rem;
  font-size: 1.4rem;
}
.cover .alertbox .message-choose {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  gap: 1rem;
  font-size: 1.4rem;
}
.cover .alertbox .message-choose .btn-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 10px;
}
.cover .alertbox .message-choose .btn-box button {
  width: 150px;
  height: 150px;
  font-size: 1.8rem;
  background-color: rgb(243, 246, 253);
  color: rgb(49, 49, 105);
  border: none;
  cursor: pointer;
  border-radius: 10px;
  font-weight: 600;
}
.cover .alertbox .message-choose .btn-box button:nth-child(1) {
  color: rgb(121, 48, 48);
  background-color: rgb(248, 237, 237);
}
.cover .alertbox .btn-wrap {
  display: flex;
  gap: 1rem;
}
.cover .alertbox .btn-wrap button {
  border: none;
  font-size: 1.5rem;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  cursor: pointer;
}
.cover .alertbox .btn-wrap button.confirm {
  background-color: rgb(255, 255, 255);
  color: rgb(43, 53, 196);
  border: 1px solid rgb(43, 53, 196);
}
.cover .alertbox .btn-wrap button.confirm:hover, .cover .alertbox .btn-wrap button.confirm:active {
  background-color: rgb(43, 53, 196);
  color: white;
}
.cover .alertbox .btn-wrap button.cancel {
  background-color: rgb(255, 255, 255);
  color: rgb(153, 36, 36);
  border: 1px solid rgb(153, 36, 36);
}
.cover .alertbox .btn-wrap button.cancel:hover, .cover .alertbox .btn-wrap button.cancel:active {
  background-color: rgb(153, 36, 36);
  color: white;
}

.login-container {
  width: 100%;
  height: 768px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(-45deg, #ee7752, #f5b6ce, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.login-container .inputBox {
  width: 50%;
  max-width: 450px;
  height: 50px;
  display: flex;
  align-items: center;
  background-color: white;
  border-radius: 5px;
  padding: 0 10px 0 0;
  position: relative;
}
.login-container .inputBox span {
  min-width: 80px;
  text-align: center;
  background-color: rgb(145, 145, 145);
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px 0 0 5px;
  color: white;
  font-size: 1.5rem;
  font-weight: 500;
}
.login-container .inputBox input {
  height: 30px;
  outline: none;
  border: none;
  flex: 1;
  padding-left: 10px;
  background-color: transparent;
  font-size: 1.3rem;
}
.login-container .inputBox .visibility-btn {
  position: absolute;
  right: 1px;
  background: transparent;
  box-shadow: none;
  width: auto;
  border: none;
}
.login-container .click-btn {
  cursor: pointer;
  border: none;
  width: 30%;
  max-width: 100px;
  min-height: 100px;
  font-size: 1.5rem;
  padding: 5px 10px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #3a3a3a;
  font-size: 2rem;
  font-weight: 600;
}

.memberSearchBox {
  position: fixed;
  left: 25%;
  top: 25%;
  background: rgb(255, 255, 255);
  border: 1px solid #333;
  border-radius: 20px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  color: #333;
}
.memberSearchBox h1 {
  font-size: 2rem;
}
.memberSearchBox input {
  border: 1px solid #333333;
  padding: 10px 20px;
  border-radius: 100px;
  font-size: 1.5rem;
}
.memberSearchBox span {
  color: red;
}
.memberSearchBox .btn-wrap {
  margin-top: 10px;
  display: flex;
  gap: 1rem;
}
.memberSearchBox .btn-wrap button {
  border: none;
  font-size: 1.5rem;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  cursor: pointer;
}
.memberSearchBox .btn-wrap button.confirm {
  background-color: rgb(255, 255, 255);
  color: rgb(43, 53, 196);
  border: 1px solid rgb(43, 53, 196);
}
.memberSearchBox .btn-wrap button.confirm:hover, .memberSearchBox .btn-wrap button.confirm:active {
  background-color: rgb(43, 53, 196);
  color: white;
}
.memberSearchBox .btn-wrap button.cancel {
  background-color: rgb(255, 255, 255);
  color: rgb(153, 36, 36);
  border: 1px solid rgb(153, 36, 36);
}
.memberSearchBox .btn-wrap button.cancel:hover, .memberSearchBox .btn-wrap button.cancel:active {
  background-color: rgb(153, 36, 36);
  color: white;
}

.top-line {
  width: 100%;
  height: 10px;
  background-image: url("../img/top_line.jpg");
  background-size: contain;
}

.top {
  display: flex;
  width: 100%;
  height: 245px;
}
.top .left {
  width: 55%;
  display: flex;
  flex-direction: column;
}
.top .left .itemScreen {
  padding: 10px;
  flex: 1;
  background: #434343;
}
.top .left .itemScreen div {
  height: 100%;
  background: #212121;
  color: #ffffff;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.top .left .itemScreen div h3 {
  font-size: 48px;
  font-weight: 200;
  text-align: start;
}
.top .left .itemScreen div p {
  margin-top: auto;
  text-align: right;
  font-size: 32px;
  font-weight: 200;
}
.top .left ul {
  display: flex;
  flex-wrap: wrap;
}
.top .left ul li {
  width: 33.3333333333%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px;
  border: 1px solid #d6c573;
}
.top .left ul li p {
  font-size: 24px;
}
.top .left ul li.yellow1 {
  background: #fef6c7;
}
.top .left ul li.yellow2 {
  background: #fef09d;
}
.top .left ul li.yellow3 {
  background: #efdb66;
}
.top .left ul li.red {
  color: red;
}
.top .right {
  width: 45%;
  display: flex;
  flex-direction: column;
  background: white;
}
.top .right .logo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: start;
  padding: 10px;
  gap: 4px;
  padding: 2px;
}
.top .right .logo img {
  width: 280px;
}
.top .right .date {
  display: flex;
  flex-shrink: 0;
  justify-content: flex-start;
  align-items: flex-start;
  font-weight: 500;
  color: #333;
  flex-direction: row;
  gap: 4px;
  margin-left: 12px;
}
.top .right .date span {
  word-break: break-all;
}
.top .right ul {
  display: flex;
  flex-wrap: wrap;
  flex: 8;
}
.top .right ul li {
  width: 50%;
  display: flex;
}
.top .right ul li h3 {
  flex-shrink: 0;
  background: #e2e2e2;
  padding: 8px;
  width: 100px;
  border-bottom: 1px solid #cfcfcf;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: right;
  font-weight: 400;
}
.top .right ul li div {
  background: #f4f4f4;
  border-bottom: 1px solid #e2e2e2;
  padding: 2px 4px;
  flex: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.top .right ul li div input {
  padding: 5px;
  width: 100%;
  border: 1px solid #eee;
}
.top .right ul li div input.red {
  color: red;
}

.main {
  display: flex;
  height: 513px;
  width: 100%;
}
.main .main-left {
  flex: 1;
  max-width: calc(100% - 308.09px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  max-height: 535.71px;
  overflow-y: scroll;
  scrollbar-width: thick;
}
.main .main-left::-webkit-scrollbar {
  width: 8px;
  /* 固定寬度 */
}
.main .main-left::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.main .main-left::-webkit-scrollbar-thumb {
  background: #cfcfcf;
  border-radius: 10px;
}
.main .main-left table.h-36 {
  width: 100%;
  height: 100%;
  flex: 1;
  height: 535.71px;
  color: #333;
}
.main .main-left table.h-36 thead {
  height: 36px;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
}
.main .main-left table.h-36 thead tr th {
  background: #808080;
  color: #ffffff;
  padding: 10px;
  text-align: center;
  font-weight: 300;
  border-left: 1px solid white;
  height: 36px;
}
.main .main-left table.h-36 tbody {
  width: 100%;
}
.main .main-left table.h-36 tbody tr {
  width: 100%;
  cursor: pointer;
}
.main .main-left table.h-36 tbody tr.selected {
  color: rgb(156, 0, 0);
}
.main .main-left table.h-36 tbody tr:nth-child(even) td {
  background: #fee9eb;
}
.main .main-left table.h-36 tbody tr:nth-child(even) td.text-end {
  text-align: end;
}
.main .main-left table.h-36 tbody tr:nth-child(odd) td {
  background: #ffffff;
}
.main .main-left table.h-36 tbody tr:nth-child(odd) td.text-end {
  text-align: end;
}
.main .main-left table.h-36 tbody td {
  padding: 10.4px;
  text-align: center;
  border-left: 1px solid rgb(233, 233, 233);
  word-break: break-all;
}
.main .main-left table.h-36 tbody td:nth-child(1) {
  width: 6.5%;
}
.main .main-left table.h-36 tbody td:nth-child(2) {
  width: 25%;
  font-size: 13px;
}
.main .main-left table.h-36 tbody td:nth-child(3) {
  width: 20%;
}
.main .main-left table.h-36 tbody td:nth-child(4) {
  width: 10.25%;
}
.main .main-left table.h-36 tbody td:nth-child(5) {
  width: 10.25%;
}
.main .main-left table.h-36 tbody td:nth-child(6) {
  width: 10%;
}
.main .main-left table.h-36 tbody td:nth-child(7) {
  width: 20%;
}
.main .main-left div.table-wrapper {
  width: 100%;
  height: 100%;
  flex: 1;
  height: 499.71px;
  max-height: 499.71px;
  overflow-y: scroll;
  scrollbar-width: thick;
}
.main .main-left div.table-wrapper::-webkit-scrollbar {
  width: 15px;
  /* 固定寬度 */
}
.main .main-left div.table-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.main .main-left div.table-wrapper::-webkit-scrollbar-thumb {
  background: #cfcfcf;
  border-radius: 10px;
}
.main .main-left div.table-wrapper table.main-table {
  width: 100%;
  color: #333;
}
.main .main-left div.table-wrapper table.main-table tbody {
  width: 100%;
}
.main .main-left div.table-wrapper table.main-table tbody tr {
  width: 100%;
  cursor: pointer;
}
.main .main-left div.table-wrapper table.main-table tbody tr.selected {
  color: rgb(156, 0, 0);
}
.main .main-left div.table-wrapper table.main-table tbody tr:nth-child(even) td {
  background: #fee9eb;
}
.main .main-left div.table-wrapper table.main-table tbody tr:nth-child(even) td.text-end {
  text-align: end;
}
.main .main-left div.table-wrapper table.main-table tbody tr:nth-child(odd) td {
  background: #ffffff;
}
.main .main-left div.table-wrapper table.main-table tbody tr:nth-child(odd) td.text-end {
  text-align: end;
}
.main .main-left div.table-wrapper table.main-table tbody td {
  padding: 10.4px;
  text-align: center;
  border-left: 1px solid rgb(233, 233, 233);
  word-break: break-all;
}
.main .main-left div.table-wrapper table.main-table tbody td:nth-child(1) {
  width: 6.5%;
}
.main .main-left div.table-wrapper table.main-table tbody td:nth-child(2) {
  width: 25%;
  font-size: 13px;
}
.main .main-left div.table-wrapper table.main-table tbody td:nth-child(3) {
  width: 20%;
}
.main .main-left div.table-wrapper table.main-table tbody td:nth-child(4) {
  width: 10.25%;
}
.main .main-left div.table-wrapper table.main-table tbody td:nth-child(5) {
  width: 10.25%;
}
.main .main-left div.table-wrapper table.main-table tbody td:nth-child(6) {
  width: 10%;
}
.main .main-left div.table-wrapper table.main-table tbody td:nth-child(7) {
  width: 20%;
}
.main .main-left div.table-wrapper .table-pagination {
  background-color: #8b8b8b;
  padding: 2px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.main .main-left div.table-wrapper .table-pagination button {
  border: none;
  background: transparent;
  color: #fee9eb;
  cursor: pointer;
  font-size: 1rem;
}
.main .right {
  width: 308.09px;
  max-width: 308.09px;
  display: flex;
  flex-direction: column;
}
.main .right .type {
  display: flex;
  height: 36px;
}
.main .right .type li {
  flex: 1;
  text-align: center;
  background: #fe946e;
  padding: 10px;
  color: #b93006;
  cursor: pointer;
  border-left: 1px solid white;
}
.main .right .type li.active {
  background: #df3c00;
  color: #ffffff;
}
.main .right .func-box {
  flex: 2;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}
.main .right .func-box .option {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  background: #feeae3;
  flex: 1;
  align-items: center;
}
.main .right .func-box .option li {
  width: calc((100% - 20px) / 3);
}
.main .right .func-box .option li button {
  display: block;
  width: 100%;
  min-height: 40px;
  background: #ffffff;
  border: 1px solid #ffb398;
  border-radius: 4px;
  cursor: pointer;
}
.main .right .func-box .option li button:hover {
  background-color: rgba(255, 179, 152, 0.5);
  border: 1px solid transparent;
}
.main .right .func-box .navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  background: #fe946e;
}
.main .right .func-box .navigation button {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #ec5b26;
  border: none;
  padding: 5px 10px;
  border-radius: 40px;
  color: #fff;
  box-shadow: inset 1px 1px 1px 0px white, inset 0px -2px 2px 0px rgba(0, 0, 0, 0.25);
}
.main .right .func-box .navigation button img {
  width: 16px;
}
.main .right .calculate {
  flex: 8;
  display: flex;
  background: #effafe;
  gap: 10px;
}
.main .right .calculate .number-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.main .right .calculate .number-box .number {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
  gap: 10px;
  flex: 1;
}
.main .right .calculate .number-box .number li {
  width: calc((100% - 30px) / 4);
}
.main .right .calculate .number-box .number li button {
  cursor: pointer;
  width: 60px;
  height: 60px;
  padding: 0;
  border: none;
  background: url("../img/circle.png") no-repeat center;
  background-size: contain;
  font-size: 28px;
  font-weight: bold;
  color: #333;
}
.main .right .calculate .number-box .number li button.blue {
  color: #2f6987;
}
.main .right .calculate .number-box .bottomBtn {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.main .right .calculate .number-box .bottomBtn li {
  width: calc((100% - 20px) / 3);
}
.main .right .calculate .number-box .bottomBtn li button {
  cursor: pointer;
  width: 80px;
  height: 60px;
  border: none;
  padding: 0;
  background: url("../img/button.png") no-repeat center;
  background-size: contain;
  font-size: 24px;
  font-weight: bold;
  color: #2f6987;
}
.main .right .calculate .leftBtn {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: 10px;
  justify-content: space-between;
}
.main .right .calculate .leftBtn button {
  cursor: pointer;
  border: none;
  padding: 0;
  width: 80px;
  height: 60px;
  background: url("../img/button.png") no-repeat center;
  background-size: contain;
  font-size: 24px;
  font-weight: bold;
  color: #2f6987;
}

.funcModal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  border: 3px solid #60a2db;
  background-color: rgba(205, 236, 202, 0.95);
}
.funcModal .title {
  width: 100%;
  text-align: center;
  color: #333;
  padding: 8px;
  background-image: linear-gradient(#9ac6ec, #7ba2c5);
  font-size: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  font-size: 20px;
}
.funcModal .title span.time {
  font-size: 14px;
}
.funcModal .main {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 24px;
  gap: 12px;
}
.funcModal .main .left,
.funcModal .main .number-pad,
.funcModal .main .status {
  flex: 1;
  height: 100%;
}
.funcModal .main input {
  outline: none;
  cursor: pointer;
}
.funcModal .main input:focus {
  border: 2px solid red !important;
}
.funcModal .main .left {
  flex: 1.5;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
.funcModal .main .left table {
  width: 100%;
  font-size: 24px;
}
.funcModal .main .left table th {
  padding: 16px;
  font-weight: 400;
  border-bottom: 1px solid #333;
}
.funcModal .main .left table th,
.funcModal .main .left table td {
  text-align: start;
}
.funcModal .main .left table tr {
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}
.funcModal .main .left table tr:nth-last-child(1) {
  border-bottom: none;
}
.funcModal .main .left table tr th:nth-child(1),
.funcModal .main .left table tr td:nth-child(1) {
  text-align: end;
  width: 160px;
}
.funcModal .main .left table tr th:nth-child(2),
.funcModal .main .left table tr td:nth-child(2) {
  padding-left: 8px;
  width: 120px;
}
.funcModal .main .left table tr th:nth-child(3),
.funcModal .main .left table tr td:nth-child(3) {
  text-align: start;
}
.funcModal .main .left table tr td {
  padding: 16px;
}
.funcModal .main .left table tr td.red {
  color: red;
}
.funcModal .main .left table tr td.p-0 {
  padding: 0;
  padding-left: 8px;
}
.funcModal .main .left table tr td.p-0 input {
  height: 34.92px;
  width: 120px;
  font-size: 24px;
  text-align: start;
  border: none;
}
.funcModal .main .left table tr.bt-1 {
  border-top: 1px solid #333;
}
.funcModal .main .number-pad {
  display: grid;
  grid-template-columns: repeat(3, 80px);
  grid-template-rows: auto;
  margin: 0 auto;
}
.funcModal .main .number-pad button {
  font-size: 36px;
  cursor: pointer;
}
.funcModal .main .number-pad button.cht {
  font-size: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.funcModal .bottom {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  padding: 12px;
}
.funcModal .bottom button {
  margin-top: 24px;
  padding: 12px;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-image: linear-gradient(rgb(241, 241, 241), rgb(218, 217, 217), rgb(230, 230, 230));
  border: 1px solid #333;
}
.funcModal .bottom button:hover {
  background-image: none;
  background-color: rgb(241, 241, 241);
}
.funcModal .row-list-box {
  width: 100%;
}
.funcModal .row-list-box .row-list {
  width: 100%;
  padding: 8px;
  min-height: 300px;
  max-height: 400px;
  overflow-y: scroll;
}
.funcModal .row-list-box .row-list table {
  width: 100%;
}
.funcModal .row-list-box .row-list table thead tr th {
  border-bottom: 1px solid #333;
  padding: 4px;
  padding-bottom: 8px;
}
.funcModal .row-list-box .row-list table tbody {
  background-color: rgba(255, 255, 255, 0.5);
}
.funcModal .row-list-box .row-list table tbody tr td {
  padding: 4px;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
}
.funcModal .row-list-box .row-list table tbody tr:nth-last-child(1) td {
  border-bottom: 1px solid #333;
}
.funcModal.changeShift, .funcModal.closeShop {
  width: 80%;
  height: auto;
}
.funcModal.changeShift .main, .funcModal.closeShop .main {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 12px 24px;
  height: auto;
}
.funcModal.changeShift .main .status,
.funcModal.changeShift .main .left, .funcModal.closeShop .main .status,
.funcModal.closeShop .main .left {
  width: 100%;
}
.funcModal.changeShift .main .status table,
.funcModal.changeShift .main .left table, .funcModal.closeShop .main .status table,
.funcModal.closeShop .main .left table {
  font-size: 18px;
}
.funcModal.changeShift .main .status table.input-box td,
.funcModal.changeShift .main .status table.input-box th,
.funcModal.changeShift .main .left table.input-box td,
.funcModal.changeShift .main .left table.input-box th, .funcModal.closeShop .main .status table.input-box td,
.funcModal.closeShop .main .status table.input-box th,
.funcModal.closeShop .main .left table.input-box td,
.funcModal.closeShop .main .left table.input-box th {
  padding: 2px;
  width: auto;
}
.funcModal.changeShift .main .status table.input-box td:nth-child(1),
.funcModal.changeShift .main .status table.input-box th:nth-child(1),
.funcModal.changeShift .main .left table.input-box td:nth-child(1),
.funcModal.changeShift .main .left table.input-box th:nth-child(1), .funcModal.closeShop .main .status table.input-box td:nth-child(1),
.funcModal.closeShop .main .status table.input-box th:nth-child(1),
.funcModal.closeShop .main .left table.input-box td:nth-child(1),
.funcModal.closeShop .main .left table.input-box th:nth-child(1) {
  width: 33.3%;
}
.funcModal.changeShift .main .status table.input-box td:nth-child(2),
.funcModal.changeShift .main .status table.input-box th:nth-child(2),
.funcModal.changeShift .main .left table.input-box td:nth-child(2),
.funcModal.changeShift .main .left table.input-box th:nth-child(2), .funcModal.closeShop .main .status table.input-box td:nth-child(2),
.funcModal.closeShop .main .status table.input-box th:nth-child(2),
.funcModal.closeShop .main .left table.input-box td:nth-child(2),
.funcModal.closeShop .main .left table.input-box th:nth-child(2) {
  width: 33.3%;
}
.funcModal.changeShift .main .status table.input-box td:nth-child(3),
.funcModal.changeShift .main .status table.input-box th:nth-child(3),
.funcModal.changeShift .main .left table.input-box td:nth-child(3),
.funcModal.changeShift .main .left table.input-box th:nth-child(3), .funcModal.closeShop .main .status table.input-box td:nth-child(3),
.funcModal.closeShop .main .status table.input-box th:nth-child(3),
.funcModal.closeShop .main .left table.input-box td:nth-child(3),
.funcModal.closeShop .main .left table.input-box th:nth-child(3) {
  width: 33.3%;
}
.funcModal.changeShift .main .status table.input-box td p,
.funcModal.changeShift .main .status table.input-box th p,
.funcModal.changeShift .main .left table.input-box td p,
.funcModal.changeShift .main .left table.input-box th p, .funcModal.closeShop .main .status table.input-box td p,
.funcModal.closeShop .main .status table.input-box th p,
.funcModal.closeShop .main .left table.input-box td p,
.funcModal.closeShop .main .left table.input-box th p {
  background: white;
  padding: 4px 8px;
  text-align: end;
}
.funcModal.changeShift .main .status table.input-box td input,
.funcModal.changeShift .main .status table.input-box th input,
.funcModal.changeShift .main .left table.input-box td input,
.funcModal.changeShift .main .left table.input-box th input, .funcModal.closeShop .main .status table.input-box td input,
.funcModal.closeShop .main .status table.input-box th input,
.funcModal.closeShop .main .left table.input-box td input,
.funcModal.closeShop .main .left table.input-box th input {
  font-size: 18px !important;
}
.funcModal.changeShift .main .status table.total tr.bb-2,
.funcModal.changeShift .main .left table.total tr.bb-2, .funcModal.closeShop .main .status table.total tr.bb-2,
.funcModal.closeShop .main .left table.total tr.bb-2 {
  border-bottom: 1px solid #333;
}
.funcModal.changeShift .main .status table.total tr td,
.funcModal.changeShift .main .status table.total tr th,
.funcModal.changeShift .main .left table.total tr td,
.funcModal.changeShift .main .left table.total tr th, .funcModal.closeShop .main .status table.total tr td,
.funcModal.closeShop .main .status table.total tr th,
.funcModal.closeShop .main .left table.total tr td,
.funcModal.closeShop .main .left table.total tr th {
  padding: 2px;
}
.funcModal.changeShift .main .status table.total tr td:nth-child(1),
.funcModal.changeShift .main .status table.total tr th:nth-child(1),
.funcModal.changeShift .main .left table.total tr td:nth-child(1),
.funcModal.changeShift .main .left table.total tr th:nth-child(1), .funcModal.closeShop .main .status table.total tr td:nth-child(1),
.funcModal.closeShop .main .status table.total tr th:nth-child(1),
.funcModal.closeShop .main .left table.total tr td:nth-child(1),
.funcModal.closeShop .main .left table.total tr th:nth-child(1) {
  text-align: end;
}
.funcModal.changeShift .main .status table.total tr td:nth-child(2),
.funcModal.changeShift .main .status table.total tr th:nth-child(2),
.funcModal.changeShift .main .left table.total tr td:nth-child(2),
.funcModal.changeShift .main .left table.total tr th:nth-child(2), .funcModal.closeShop .main .status table.total tr td:nth-child(2),
.funcModal.closeShop .main .status table.total tr th:nth-child(2),
.funcModal.closeShop .main .left table.total tr td:nth-child(2),
.funcModal.closeShop .main .left table.total tr th:nth-child(2) {
  text-align: end;
  width: 160px;
}
.funcModal.changeShift .main .status table.total tr td p,
.funcModal.changeShift .main .status table.total tr th p,
.funcModal.changeShift .main .left table.total tr td p,
.funcModal.changeShift .main .left table.total tr th p, .funcModal.closeShop .main .status table.total tr td p,
.funcModal.closeShop .main .status table.total tr th p,
.funcModal.closeShop .main .left table.total tr td p,
.funcModal.closeShop .main .left table.total tr th p {
  background: white;
  padding: 4px 8px;
  text-align: end;
}
.funcModal.changeShift .main .status table.total tr td p.red,
.funcModal.changeShift .main .status table.total tr th p.red,
.funcModal.changeShift .main .left table.total tr td p.red,
.funcModal.changeShift .main .left table.total tr th p.red, .funcModal.closeShop .main .status table.total tr td p.red,
.funcModal.closeShop .main .status table.total tr th p.red,
.funcModal.closeShop .main .left table.total tr td p.red,
.funcModal.closeShop .main .left table.total tr th p.red {
  color: red;
}
.funcModal.changeShift .main .status, .funcModal.closeShop .main .status {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 4px;
}
.funcModal.changeShift .main .status .row, .funcModal.closeShop .main .status .row {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  font-size: 18px;
}
.funcModal.changeShift .main .status .row.bb-2, .funcModal.closeShop .main .status .row.bb-2 {
  border-bottom: 1px solid #333;
  padding-bottom: 8px;
}
.funcModal.changeShift .main .status .row.bt-2, .funcModal.closeShop .main .status .row.bt-2 {
  padding-top: 8px;
}
.funcModal.changeShift .main .status .row p, .funcModal.closeShop .main .status .row p {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.funcModal.changeShift .main .status .row p:nth-child(1), .funcModal.closeShop .main .status .row p:nth-child(1) {
  text-align: end;
}
.funcModal.changeShift .main .status .row p:nth-child(2), .funcModal.closeShop .main .status .row p:nth-child(2) {
  text-align: end;
  background-color: #fff;
  padding: 4px 8px;
}
.funcModal.changeShift .main .status .row p.red, .funcModal.closeShop .main .status .row p.red {
  color: red;
}
.funcModal.changeShift .main .number-pad, .funcModal.closeShop .main .number-pad {
  aspect-ratio: auto;
  height: auto;
  grid-template-columns: repeat(3, 80px);
}
.funcModal.changeShift .main .number-pad button.cht, .funcModal.closeShop .main .number-pad button.cht {
  flex-direction: row;
}
.funcModal.changeShift .bottom, .funcModal.closeShop .bottom {
  width: 100%;
  align-self: center;
  gap: 8px;
  padding: 2px 0;
}
.funcModal.changeShift .bottom button, .funcModal.closeShop .bottom button {
  margin-top: 0;
}/*# sourceMappingURL=main.css.map */