@charset "UTF-8";
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

body {
  color: #333;
  margin: 0;
  line-height: 1.5;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; }

a {
  color: unset;
  text-decoration: none; }
  a:hover {
    color: unset;
    text-decoration: none; }

img {
  vertical-align: middle; }

button, input, optgroup, select, textarea {
  font-size: inherit;
  line-height: inherit; }

input,
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: none; }

button {
  cursor: pointer;
  border: none;
  background-color: white;
  padding: 0; }
  button[disabled] {
    opacity: 0.4;
    cursor: unset; }

textarea {
  resize: none;
  border-radius: 20px;
  border: 1px solid #bbb;
  font-size: 16px;
  line-height: 20px;
  padding: 10px 12px;
  color: #333;
  resize: vertical; }
  textarea::placeholder {
    color: #aaa; }

input {
  background: none;
  border: 1px solid #bbb;
  border-radius: 4px;
  padding: 0 8px; }
  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset; }
  input::placeholder {
    color: #aaa; }

table {
  border-collapse: collapse; }

hr {
  border-top: none;
  border-color: #ccc; }

.flex-row {
  display: flex; }

.flex-column, .staff-stats-bigItem {
  display: flex;
  flex-direction: column; }

.flex1 {
  flex: 1; }

.center {
  justify-content: center; }

.align-center {
  align-items: center; }

.space-between {
  justify-content: space-between; }

.flex-end {
  justify-content: flex-end; }

.flexDirection-column {
  flex-direction: column; }

.textCenter {
  text-align: center; }

.textRight {
  text-align: right; }

.text-error {
  color: #e00; }

.parent {
  position: relative; }

button.capsule,
label.capsule {
  border-radius: 2em;
  padding: 0.3em 1.5em;
  margin: 0 1em;
  color: #777;
  border: 1px solid #999;
  transition-duration: 0.1s;
  cursor: pointer; }
  button.capsule:hover,
  label.capsule:hover {
    background: #1f86ef;
    border-color: #1f86ef;
    color: white; }
  button.capsule.danger,
  label.capsule.danger {
    background: #d02;
    border-color: #d02;
    color: white;
    font-weight: bold; }
    button.capsule.danger:hover,
    label.capsule.danger:hover {
      background: #c02;
      border-color: #c02; }
  button.capsule[selected],
  label.capsule[selected] {
    background: #1f86ef;
    border-color: #1f86ef;
    color: white; }

.badge {
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  top: -0.5em;
  right: -0.5em;
  border-radius: 1.2rem;
  color: white;
  background: #d02;
  font-size: 0.7rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center; }

.pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 1rem 0; }
  .pager a {
    display: inline-block;
    width: 2.2em;
    height: 2.2em;
    line-height: 2.2em;
    margin: 0 0.2em;
    text-align: center;
    font-size: 0.9rem;
    border: 1px solid #888;
    color: #777;
    background: white;
    box-shadow: 0 0 0 2px white;
    cursor: pointer; }
    .pager a:hover {
      color: #333;
      border-color: #444; }
    .pager a[selected] {
      background: #555;
      border: none;
      color: white; }
      .pager a[selected]:hover {
        background: #444; }

.counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid #888;
  border-radius: 4px;
  /* padding: 1rem; */
  margin: 0 1rem;
  width: 7rem;
  height: 4rem; }
  .counter label {
    font-size: 0.8rem;
    color: #444;
    cursor: pointer; }
  .counter div {
    flex: 1;
    align-items: center;
    display: flex;
    padding-bottom: 0.5rem;
    font-size: 1.2rem;
    font-weight: bold; }
  .counter.selected {
    color: white;
    background: #1f86ef;
    border-color: #17d; }
    .counter.selected label {
      color: white; }

.local-loader {
  margin: auto;
  opacity: 0.7; }

.month-select {
  width: 13rem;
  margin: 0rem auto 0.5rem;
  padding: 0 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #3a3a3a;
  border: 1px solid #aaa;
  border-radius: 1rem; }
  .month-select-current {
    flex: 1;
    text-align: center;
    line-height: 2rem; }
  .month-select a {
    width: 1rem;
    display: flex;
    align-items: center; }
  .month-select img {
    height: 0.9rem; }

.leaved-badge {
  color: white;
  background: #444;
  display: inline-block;
  padding: 0em 0.6em;
  border-radius: 1em;
  font-size: 0.8rem;
  font-weight: bold;
  line-height: 1.5em; }

a.sfLink {
  color: #09d; }

/* 
ソートアイコン 
*/
.iconUnSorted,
.iconSortedAsc,
.iconSortedDesc {
  display: inline-block;
  padding: 5px 18px 5px 5px;
  margin: -5px -5px -5px -5px;
  background: no-repeat right center; }

.iconUnSorted {
  background-image: url(data:image/gif;base64,R0lGODlhFQAJAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAkAAAIXjI+AywnaYnhUMoqt3gZXPmVg94yJVQAAOw==); }

.iconSortedAsc {
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7); }

.iconSortedDesc {
  background-image: url(data:image/gif;base64,R0lGODlhFQAEAIAAACMtMP///yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7); }

.iconFixed {
  display: inline-block;
  color: #454545;
  background: #e2e2e2;
  border-radius: 2px;
  font-size: 0.8em;
  padding: 7px 5px;
  line-height: 1;
  margin-right: 10px;
  margin-top: -2px;
  vertical-align: middle;
  font-weight: bold; }

.modal-progressCount {
  color: white; }

.caption {
  font-size: 0.9em;
  color: #777;
  margin-top: 1em; }

.progress {
  height: 10px;
  width: calc(100% - 16px);
  border: 1px solid rgba(123, 123, 123, 0.7);
  border-radius: 4px;
  overflow: hidden; }
  .progress-bar {
    background: rgba(0, 100, 220, 0.8);
    height: 100%; }

/* 
ボタン 
*/
.common-btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: bold; }
  .common-btn + .common-btn {
    margin-left: 1em; }
  .flexDirection-column .common-btn + .common-btn {
    margin-left: 0;
    margin-top: 1em; }

.common-button-add {
  vertical-align: middle;
  display: inline-block;
  text-decoration: none;
  transition: all .3s ease;
  vertical-align: middle;
  cursor: pointer; }
  .common-button-add:hover {
    opacity: .6; }
  .common-button-add::before {
    display: inline-block;
    text-align: center;
    content: "＋";
    margin-right: 1rem;
    font-size: 1.5rem;
    font-weight: bold;
    border: 1px solid #a1a1a1;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 2rem;
    color: #999;
    vertical-align: middle; }
  .common-button-add:hover::before {
    background: #aaa;
    color: white; }

.common-button-add-min {
  vertical-align: middle;
  line-height: 1.4rem;
  display: inline-block;
  text-decoration: none;
  transition: all .3s ease;
  vertical-align: middle;
  cursor: pointer; }
  .common-button-add-min:hover {
    opacity: .6; }
  .common-button-add-min::before {
    display: inline-block;
    text-align: center;
    content: "＋";
    font-size: 0.7rem;
    line-height: 1rem;
    font-weight: bold;
    border: 1px solid #A49A91;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 1rem;
    color: #524843;
    vertical-align: middle; }
  .common-button-add-min.is-active::before {
    content: "−"; }
  .common-button-add-min:hover::before {
    background: #aaa;
    color: white; }

.common-btn-primary {
  color: #fff;
  background-color: #e4212c;
  border-color: #e4212c; }
  .common-btn-primary:hover {
    background-color: #c02; }

.common-btn-outline-secondary {
  color: #999;
  border-color: #999; }
  .common-btn-outline-secondary:hover {
    color: #fff;
    background-color: #999; }

.common-btn-sm {
  border-radius: 4px;
  font-size: 13px;
  width: 120px;
  padding: 0.1875rem 0.75rem; }

.errorMessage {
  font-size: 1.1em;
  color: #721c24;
  position: relative;
  padding: 0.75rem 1.25rem;
  background-color: #f8d7da;
  margin: 0.5rem 0 1rem;
  border: 1px solid #f5c6cb;
  border-radius: 0.25rem; }

.successMessage {
  font-size: 1.1em;
  color: #0D5741;
  position: relative;
  padding: 0.75rem 1.25rem;
  background-color: #C4E5DC;
  margin: 0.5rem 0 1rem;
  border: 1px solid #C1D4CB;
  border-radius: 0.25rem; }

.noticeMessage {
  font-size: 1.1em;
  color: #383d41;
  position: relative;
  padding: 0.75rem 1.25rem;
  background-color: #e2e3e5;
  margin: 0.5rem 0 1rem;
  border: 1px solid #d6d8db;
  border-radius: 0.25rem; }

.text-limit-5em {
  width: 5em;
  display: inline-block;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.text-limit-8em {
  width: 8em;
  display: inline-block;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.text-limit-10em {
  width: 10em;
  display: inline-block;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.text-limit-12em {
  width: 12em;
  display: inline-block;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.text-limit-15em {
  width: 15em;
  display: inline-block;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.text-limit-16em {
  width: 16em;
  display: inline-block;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.text-limit-18em {
  width: 18em;
  display: inline-block;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.text-limit-20em {
  width: 20em;
  display: inline-block;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.text-limit-30em {
  width: 30em;
  display: inline-block;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.text-limit-40em {
  width: 40em;
  display: inline-block;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

/*
ごめんなさ。。
*/
.ma-0 {
  margin: 0rem !important; }

.mb-0 {
  margin-bottom: 0rem !important; }

.mt-0 {
  margin-top: 0rem !important; }

.ml-0 {
  margin-left: 0rem !important; }

.mr-0 {
  margin-right: 0rem !important; }

.pa-0 {
  padding: 0rem !important; }

.pb-0 {
  padding-bottom: 0rem !important; }

.pt-0 {
  padding-top: 0rem !important; }

.pl-0 {
  padding-left: 0rem !important; }

.pr-0 {
  padding-right: 0rem !important; }

.w00 {
  width: 00px !important; }

.w00per {
  width: 00% !important; }

.w0em {
  width: 0em !important; }

.w00em {
  width: 00em !important; }

.ma-1 {
  margin: 1rem !important; }

.mb-1 {
  margin-bottom: 1rem !important; }

.mt-1 {
  margin-top: 1rem !important; }

.ml-1 {
  margin-left: 1rem !important; }

.mr-1 {
  margin-right: 1rem !important; }

.pa-1 {
  padding: 1rem !important; }

.pb-1 {
  padding-bottom: 1rem !important; }

.pt-1 {
  padding-top: 1rem !important; }

.pl-1 {
  padding-left: 1rem !important; }

.pr-1 {
  padding-right: 1rem !important; }

.w10 {
  width: 10px !important; }

.w10per {
  width: 10% !important; }

.w1em {
  width: 1em !important; }

.w10em {
  width: 10em !important; }

.ma-2 {
  margin: 2rem !important; }

.mb-2 {
  margin-bottom: 2rem !important; }

.mt-2 {
  margin-top: 2rem !important; }

.ml-2 {
  margin-left: 2rem !important; }

.mr-2 {
  margin-right: 2rem !important; }

.pa-2 {
  padding: 2rem !important; }

.pb-2 {
  padding-bottom: 2rem !important; }

.pt-2 {
  padding-top: 2rem !important; }

.pl-2 {
  padding-left: 2rem !important; }

.pr-2 {
  padding-right: 2rem !important; }

.w20 {
  width: 20px !important; }

.w20per {
  width: 20% !important; }

.w2em {
  width: 2em !important; }

.w20em {
  width: 20em !important; }

.ma-3 {
  margin: 3rem !important; }

.mb-3 {
  margin-bottom: 3rem !important; }

.mt-3 {
  margin-top: 3rem !important; }

.ml-3 {
  margin-left: 3rem !important; }

.mr-3 {
  margin-right: 3rem !important; }

.pa-3 {
  padding: 3rem !important; }

.pb-3 {
  padding-bottom: 3rem !important; }

.pt-3 {
  padding-top: 3rem !important; }

.pl-3 {
  padding-left: 3rem !important; }

.pr-3 {
  padding-right: 3rem !important; }

.w30 {
  width: 30px !important; }

.w30per {
  width: 30% !important; }

.w3em {
  width: 3em !important; }

.w30em {
  width: 30em !important; }

.ma-4 {
  margin: 4rem !important; }

.mb-4 {
  margin-bottom: 4rem !important; }

.mt-4 {
  margin-top: 4rem !important; }

.ml-4 {
  margin-left: 4rem !important; }

.mr-4 {
  margin-right: 4rem !important; }

.pa-4 {
  padding: 4rem !important; }

.pb-4 {
  padding-bottom: 4rem !important; }

.pt-4 {
  padding-top: 4rem !important; }

.pl-4 {
  padding-left: 4rem !important; }

.pr-4 {
  padding-right: 4rem !important; }

.w40 {
  width: 40px !important; }

.w40per {
  width: 40% !important; }

.w4em {
  width: 4em !important; }

.w40em {
  width: 40em !important; }

.ma-5 {
  margin: 5rem !important; }

.mb-5 {
  margin-bottom: 5rem !important; }

.mt-5 {
  margin-top: 5rem !important; }

.ml-5 {
  margin-left: 5rem !important; }

.mr-5 {
  margin-right: 5rem !important; }

.pa-5 {
  padding: 5rem !important; }

.pb-5 {
  padding-bottom: 5rem !important; }

.pt-5 {
  padding-top: 5rem !important; }

.pl-5 {
  padding-left: 5rem !important; }

.pr-5 {
  padding-right: 5rem !important; }

.w50 {
  width: 50px !important; }

.w50per {
  width: 50% !important; }

.w5em {
  width: 5em !important; }

.w50em {
  width: 50em !important; }

.ma-6 {
  margin: 6rem !important; }

.mb-6 {
  margin-bottom: 6rem !important; }

.mt-6 {
  margin-top: 6rem !important; }

.ml-6 {
  margin-left: 6rem !important; }

.mr-6 {
  margin-right: 6rem !important; }

.pa-6 {
  padding: 6rem !important; }

.pb-6 {
  padding-bottom: 6rem !important; }

.pt-6 {
  padding-top: 6rem !important; }

.pl-6 {
  padding-left: 6rem !important; }

.pr-6 {
  padding-right: 6rem !important; }

.w60 {
  width: 60px !important; }

.w60per {
  width: 60% !important; }

.w6em {
  width: 6em !important; }

.w60em {
  width: 60em !important; }

.ma-7 {
  margin: 7rem !important; }

.mb-7 {
  margin-bottom: 7rem !important; }

.mt-7 {
  margin-top: 7rem !important; }

.ml-7 {
  margin-left: 7rem !important; }

.mr-7 {
  margin-right: 7rem !important; }

.pa-7 {
  padding: 7rem !important; }

.pb-7 {
  padding-bottom: 7rem !important; }

.pt-7 {
  padding-top: 7rem !important; }

.pl-7 {
  padding-left: 7rem !important; }

.pr-7 {
  padding-right: 7rem !important; }

.w70 {
  width: 70px !important; }

.w70per {
  width: 70% !important; }

.w7em {
  width: 7em !important; }

.w70em {
  width: 70em !important; }

.ma-8 {
  margin: 8rem !important; }

.mb-8 {
  margin-bottom: 8rem !important; }

.mt-8 {
  margin-top: 8rem !important; }

.ml-8 {
  margin-left: 8rem !important; }

.mr-8 {
  margin-right: 8rem !important; }

.pa-8 {
  padding: 8rem !important; }

.pb-8 {
  padding-bottom: 8rem !important; }

.pt-8 {
  padding-top: 8rem !important; }

.pl-8 {
  padding-left: 8rem !important; }

.pr-8 {
  padding-right: 8rem !important; }

.w80 {
  width: 80px !important; }

.w80per {
  width: 80% !important; }

.w8em {
  width: 8em !important; }

.w80em {
  width: 80em !important; }

.ma-9 {
  margin: 9rem !important; }

.mb-9 {
  margin-bottom: 9rem !important; }

.mt-9 {
  margin-top: 9rem !important; }

.ml-9 {
  margin-left: 9rem !important; }

.mr-9 {
  margin-right: 9rem !important; }

.pa-9 {
  padding: 9rem !important; }

.pb-9 {
  padding-bottom: 9rem !important; }

.pt-9 {
  padding-top: 9rem !important; }

.pl-9 {
  padding-left: 9rem !important; }

.pr-9 {
  padding-right: 9rem !important; }

.w90 {
  width: 90px !important; }

.w90per {
  width: 90% !important; }

.w9em {
  width: 9em !important; }

.w90em {
  width: 90em !important; }

.ma-10 {
  margin: 10rem !important; }

.mb-10 {
  margin-bottom: 10rem !important; }

.mt-10 {
  margin-top: 10rem !important; }

.ml-10 {
  margin-left: 10rem !important; }

.mr-10 {
  margin-right: 10rem !important; }

.pa-10 {
  padding: 10rem !important; }

.pb-10 {
  padding-bottom: 10rem !important; }

.pt-10 {
  padding-top: 10rem !important; }

.pl-10 {
  padding-left: 10rem !important; }

.pr-10 {
  padding-right: 10rem !important; }

.w100 {
  width: 100px !important; }

.w100per {
  width: 100% !important; }

.w10em {
  width: 10em !important; }

.w100em {
  width: 100em !important; }

.w18em {
  width: 20em !important; }

html, body {
  height: 100%; }

.login, .reset {
  width: 300px;
  margin: auto;
  margin-top: 80px; }

.login-logo {
  text-align: center; }

.login-logo img {
  height: 200px; }

.login-forms, .reset-forms {
  display: flex;
  flex-direction: column;
  margin-top: 32px; }

.login-forms input {
  margin: 4px 0;
  height: 32px; }

.login-btn, .reset-btn {
  border-radius: 4px;
  height: 34px;
  margin-top: 30px;
  background-color: #e4212c;
  color: white;
  font-weight: bold;
  border: none; }

.login-btn:hover {
  background-color: #c02; }

.login-forget {
  font-size: .9em;
  margin: 1em 0; }

.reset-forms input, .reset-forms button {
  display: block;
  width: 100%; }

.pop-enter-active, .pop-leave-active {
  transition: transform .15s; }

.pop-enter, .pop-leave-to {
  transform: scale(0, 0); }

.nav {
  background-color: #272425;
  color: white;
  /* #bbc */
  width: 200px;
  min-height: 670px;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: all .3s ease;
  position: fixed;
  top: 0;
  left: -200px;
  z-index: 200; }
  .nav.active {
    transform: none;
    position: static; }

.nav-logo {
  padding: 6px 12px;
  position: relative; }
  .nav-logo img {
    width: 170px; }
  .nav-logo-region {
    position: absolute;
    color: white;
    font-weight: bold;
    font-size: 12px;
    right: 20px;
    bottom: 4px;
    width: 100px;
    text-align: center; }

.nav-menu {
  position: relative; }
  .nav-menu-wrap {
    height: 100%;
    overflow-y: scroll;
    padding-bottom: 100px; }
  .nav-menu a {
    color: white; }
    .nav-menu a:hover {
      text-decoration: none; }
  .nav-menu-badge {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    right: 12px;
    width: 2em;
    height: 2em;
    border-radius: 2em;
    line-height: 2em;
    background: #c02;
    text-align: center;
    font-size: 15px; }
  .nav-menu.selected {
    background-color: #c02; }
    .nav-menu.selected .nav-menu-link {
      opacity: 1; }
    .nav-menu.selected .nav-menu-badge {
      color: #c02;
      background: white;
      font-weight: bold;
      width: 1.84em;
      height: 1.84em;
      border-radius: 1.84em;
      line-height: 1.84em;
      margin-right: 0.08em; }

.nav-menu-link {
  display: flex;
  align-items: center;
  font-size: 16px;
  height: 52px;
  padding: 4px 12px;
  opacity: 0.8; }
  .nav-menu-link:hover {
    opacity: 1; }
  .nav-menu-link.selected {
    background-color: #c02;
    opacity: 1; }
  .nav-menu-link img {
    height: 26px;
    margin-right: 12px; }

.nav-menu-admin .nav-menu-link {
  font-size: 16px;
  height: 54px; }
  .nav-menu-admin .nav-menu-link img {
    height: 18px;
    margin-left: 4px;
    margin-right: 12px; }

.nav-logout {
  margin: 26px 0 0 26px; }
  .nav-logout a {
    display: block;
    border: 2px solid white;
    width: 90px;
    padding: 3px 0;
    text-align: center;
    color: white;
    font-weight: bold;
    font-size: 11px;
    border-radius: 16px;
    opacity: 0.75; }
    .nav-logout a:hover {
      opacity: 1; }

.nav-disk {
  margin-left: 12px;
  margin-top: 2rem;
  font-size: 0.8rem;
  color: #aaa; }

.nav-menu-trigger {
  position: fixed;
  left: 1em;
  bottom: 1em;
  z-index: 200; }

.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box; }

.menu-trigger {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #000; }
  .menu-trigger span {
    position: absolute;
    left: 50%;
    width: 60%;
    height: 4px;
    background: #fff;
    border-radius: 4px;
    transform: translateX(-50%); }
    .menu-trigger span:nth-of-type(1) {
      top: 14px; }
    .menu-trigger span:nth-of-type(2) {
      top: 28px; }
    .menu-trigger span:nth-of-type(3) {
      bottom: 14px; }
  .menu-trigger.active {
    background: #fff; }
    .menu-trigger.active span {
      background-color: #000; }
      .menu-trigger.active span:nth-of-type(1) {
        top: 0;
        transform: translateX(-50%) translateY(28px) rotate(-45deg); }
      .menu-trigger.active span:nth-of-type(2) {
        opacity: 0; }
      .menu-trigger.active span:nth-of-type(3) {
        bottom: 0;
        transform: translateX(-50%) translateY(-28px) rotate(45deg); }

/*
  フォーム関係
*/
.formlist {
  width: 500px;
  margin: auto; }

.formlist-item {
  display: flex;
  margin: 6px 0px;
  align-items: center;
  padding-right: 40px; }

.formlist-item-label {
  width: 140px;
  font-weight: bold;
  font-size: 15px; }
  .formlist-item-label.required::after {
    color: red;
    font-size: 15px;
    font-weight: bold;
    content: "*"; }

.formlist-item-body {
  flex: 1;
  position: relative; }

.formlist-item input {
  height: 40px;
  padding: 0 12px;
  width: 100%; }
  .formlist-item input.isReadOnly {
    padding: 0;
    border: none;
    font-size: 16px;
    font-family: inherit !important;
    color: inherit;
    cursor: default; }
    .formlist-item input.isReadOnly::placeholder {
      color: transparent; }

.formlist-item select {
  height: 40px;
  width: 100%; }

.formlist-item-btn {
  background-color: #e4212c;
  color: white;
  width: 140px;
  height: 40px;
  border-radius: 20px;
  font-weight: bold;
  margin: auto;
  margin-top: 20px; }
  .formlist-item-btn:hover {
    background-color: #c02; }
  .formlist-item-btn.disabled {
    opacity: 0.7;
    user-select: none;
    pointer-events: none; }
  .formlist-item-btn.btn-outline {
    color: #e4212c;
    border: 2px solid #e4212c;
    background: #fff; }
    .formlist-item-btn.btn-outline:hover {
      border-color: #c02;
      background-color: #c02;
      color: #fff; }
  .center .formlist-item-btn {
    margin: 1rem; }

.formlist-item-btn-secondary {
  color: #999;
  border: 1px solid #999;
  width: 140px;
  height: 40px;
  border-radius: 20px;
  font-weight: bold;
  margin: auto;
  margin-top: 20px; }
  .formlist-item-btn-secondary:hover {
    color: #fff;
    background-color: #999; }
  .formlist-item-btn-secondary.disabled {
    opacity: 0.7;
    user-select: none;
    pointer-events: none; }
  .center .formlist-item-btn-secondary {
    margin: 1rem; }

.formlist-item-error {
  display: none;
  position: absolute;
  top: 6px;
  left: 101%;
  width: 200px;
  height: 26px;
  line-height: 24px;
  border: 1px solid #e00;
  border-radius: 12px;
  color: #e00;
  font-size: 14px;
  text-align: center; }

.formlist-item textarea.isReadOnly {
  padding: 0;
  border: none;
  border-radius: 0;
  color: inherit;
  cursor: default; }

.talkroom-content {
  display: flex;
  height: 100%;
  padding-top: 74px;
  margin-top: -90px; }

/*
スタッフ一覧
*/
.talk-staffs {
  display: flex;
  flex-flow: column;
  width: 300px;
  border-left: 1px solid #aaa;
  height: 100%;
  overflow-y: scroll;
  direction: rtl; }

.talk-staffs-title {
  height: 60px;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 0 10px 20px;
  background-color: #e9e4e0;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  line-height: 20px; }

.talk-staff {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #aaa;
  direction: ltr;
  padding: 0.5rem 0.5rem; }
  .talk-staff[selected] {
    border-right: none; }
  .talk-staff:not([selected]) {
    cursor: pointer; }
    .talk-staff:not([selected]):hover {
      background-color: #eee; }
  .talk-staff-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 1.5rem;
    object-fit: cover;
    margin-right: 0.5rem; }
  .talk-staff-main {
    min-height: 3rem;
    margin-right: 0.5rem; }
  .talk-staff-name {
    font-size: 17px;
    font-weight: bold; }
  .talk-staff-lasttalk {
    color: #888;
    font-size: 13px;
    line-height: 16px;
    height: 32px;
    width: 15rem;
    overflow: hidden;
    text-overflow: ellipsis; }
  .talk-staff-icon + .talk-staff-main .talk-staff-lasttalk {
    width: 12rem; }
  .talk-staff-lastupdate {
    position: absolute;
    right: 20px;
    /* 6px */
    top: 10px;
    font-size: 12px;
    color: #999; }
  .talk-staff-talkcount {
    width: 30px;
    height: 30px;
    border-radius: 16px;
    background-color: #e4212c;
    color: white;
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
    position: absolute;
    right: 8px;
    top: 0;
    bottom: 0;
    margin: auto; }

.talk-staff-detail {
  display: none;
  flex-wrap: wrap;
  margin: 8px 0 8px 10px;
  padding: 4px 0;
  font-size: 15px;
  color: #777; }

.talk-staff[selected] .talk-staff-detail {
  display: flex; }

.talk-staff[selected] .talk-staff-lasttalk,
.talk-staff[selected] .talk-staff-lastupdate {
  display: none; }

.talk-staff-detail-item {
  display: flex;
  width: 100%; }

.talk-staff-detail-item.created,
.talk-staff-detail-item.phone {
  width: 100%; }

.talk-staff-detail-label {
  width: 74px; }

.talk-staff-end {
  flex: 1;
  border-right: 1px solid #aaa; }

.talk-refresh-btn {
  padding: 1rem;
  opacity: 0.4;
  transition: opacity 0.2s;
  border-right: 1px solid #aaa; }
  .talk-refresh-btn:hover {
    opacity: 1; }
  .talk-refresh-btn.loading {
    opacity: 1; }
    .talk-refresh-btn.loading img {
      animation: spin 0.6s linear 0s infinite normal; }
  .talk-refresh-btn img {
    height: 24px; }

@keyframes spin {
  0% {
    transform: rotate(0deg); }
  50% {
    transform: rotate(180deg); }
  100% {
    transform: rotate(360deg); } }

/*
トーク欄
*/
.talk-submit-btn {
  color: white;
  background-color: #e4212c;
  height: 40px;
  width: 70px;
  border-radius: 20px;
  margin-left: 4px;
  font-size: 14px;
  font-weight: bold; }

.talkrooms {
  flex: 999999;
  max-width: 600px; }

.talkroom {
  border-right: 1px solid #bbb;
  height: 100%;
  display: flex;
  flex-flow: column;
  flex: 1;
  max-width: 40rem;
  transition: width 0.4s; }
  .talkroom.hidden {
    width: 0 !important;
    overflow: hidden; }

.talkroom-date {
  text-align: center;
  border-top: 1px solid #ddd;
  padding: 4px;
  margin: 8px 0;
  color: #333; }

.talkroom-talker {
  font-size: 12px;
  color: #888;
  margin: 0 8px;
  line-height: 14px; }
  .talkroom-talker.right {
    text-align: right; }

.talkroom-talks {
  flex: 1;
  overflow-y: scroll;
  padding-top: 1rem; }

.talkroom-talk {
  display: flex;
  align-items: flex-end;
  margin-bottom: 5px;
  padding: 0 6px; }

.talkroom-talk.right {
  flex-flow: row-reverse; }

.talkroom-talk-text {
  background-color: #e9e4e0;
  color: #000;
  border: 1px solid #e6e3de;
  border-radius: 22px;
  padding: 8px 14px;
  max-width: 20rem;
  line-height: 22px;
  white-space: pre-wrap;
  word-break: break-all; }
  .talkroom-talk-text.isDeleted {
    background: #ddd; }

.talkroom-talk.right .talkroom-talk-text {
  background-color: #f44038;
  color: white;
  border: none; }
  .talkroom-talk.right .talkroom-talk-text.isDeleted {
    background: #ddd; }

.talkroom-talk-date {
  color: #888;
  font-size: 14px;
  margin: 0 4px;
  margin-bottom: 2px;
  line-height: 16px; }

.talkroom-submit {
  display: flex;
  align-items: center;
  padding: 8px 8px 24px 8px;
  border-top: 1px solid #bbb; }

.talkroom-submit textarea {
  flex: 1; }

.talkroom-option {
  padding: 0 1rem 1rem; }
  .talkroom-option-title {
    font-weight: bold;
    margin-bottom: 0.5rem; }
  .talkroom-option-button {
    padding: 0;
    margin-right: 10px; }
    .talkroom-option-button img {
      height: 34px; }
  .talkroom-option-item {
    display: flex;
    margin-bottom: 6px; }
    .talkroom-option-item-label {
      width: 4rem; }
    .talkroom-option-item input {
      border-radius: 12px;
      flex: 1;
      max-width: 25em; }
  .talkroom-option-clear img {
    height: 16px;
    opacity: 0.5; }
  .talkroom-option-worklist {
    border-top: 1px solid #ccc; }

.talkroom-worklist-item {
  border-bottom: 1px solid #ccc;
  font-size: 14px;
  padding: 2px 1em; }
  .talkroom-worklist-item.selected {
    background-color: #cee; }

.talkroom-option-submit-btn {
  padding: 8px 24px;
  margin: 1rem auto;
  font-size: 14px;
  color: white;
  background-color: #e4212c;
  border-radius: 18px;
  font-weight: bold; }

.talkroom-offer-text {
  color: #08d; }

.talkroom-photoInput {
  opacity: 0.75;
  cursor: pointer; }
  .talkroom-photoInput:hover {
    opacity: 1; }
  .talkroom-photoInput input {
    display: none; }
  .talkroom-photoInput img {
    height: 52px;
    padding: 12px 4px; }

.talkroom-modalImage {
  width: 100%;
  height: calc(70vh - 2rem);
  object-fit: contain; }

.talkroom-talk-image {
  margin-bottom: 1rem; }
  .talkroom-talk-image.right {
    text-align: right; }
  .talkroom-talk-image img {
    max-width: calc(50% - 20px);
    box-shadow: 0px 1px 4px 0px #4c4c4c;
    margin-left: 10px;
    margin-top: 2px;
    border-radius: 6px; }

img.talkroom-delete-btn {
  height: 1.5rem;
  opacity: 0.4;
  transition: 0.2s; }
  img.talkroom-delete-btn:hover {
    opacity: 1; }

/*
  スタッフ詳細
*/
.talkroom-content .shift-inspecter-staff {
  overflow-y: auto;
  width: 18rem; }

#talklist h3 {
  margin-top: 2.5rem;
  margin-left: 1rem;
  font-size: 1.1rem; }

.talklist {
  margin-bottom: 40vh; }
  .talklist.unchecked, .talklist.private {
    margin-bottom: 0; }

.talklist-item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding-left: 0.5rem;
  cursor: pointer; }
  .talklist-item:hover {
    background: #eee; }
  .talklist-item-icon {
    width: 3rem;
    height: 3rem;
    object-fit: cover;
    background: #ccc;
    margin: 0.5rem; }
  .talklist-item-main {
    display: flex;
    flex-direction: column;
    min-width: 12rem;
    max-width: 20rem;
    flex: 1; }
  .talklist-item-client {
    font-size: 0.7rem;
    line-height: 0.7rem;
    color: #444;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }
  .talklist-item-title {
    display: flex;
    align-items: center;
    padding: 0.1rem 0; }
  .talklist-item-name {
    font-weight: bold; }
  .talklist-item-badge {
    width: 1.3rem;
    min-width: 1.3rem;
    height: 1.3rem;
    border-radius: 0.65rem;
    background: #e4212c;
    color: white;
    font-size: 0.85rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem; }
  .talklist-item-lasttalk {
    color: #888;
    font-size: 0.75rem;
    line-height: 0.9rem; }
  .talklist-item-talk {
    display: flex;
    flex-direction: column;
    min-width: 11rem;
    max-width: 20rem;
    flex: 1;
    padding-right: 3rem; }
  .talklist-item-talker {
    display: flex;
    align-items: center;
    justify-content: space-between; }
    .talklist-item-talker-icon {
      width: 2.4rem;
      height: 2.4rem;
      object-fit: cover;
      background: #ccc;
      border-radius: 1.2rem;
      margin: 0.5rem; }
    .talklist-item-talker-name {
      font-size: 0.8rem;
      font-weight: bold; }
    .talklist-item-talker-date {
      font-size: 0.75rem;
      color: #888; }

.roomlist {
  flex: 1; }

.roomlist-title {
  height: 68px;
  font-size: 22px;
  line-height: 74px;
  border-bottom: 1px solid #aaa;
  margin-bottom: 16px;
  padding-left: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.roomlist-items {
  display: flex;
  flex-wrap: wrap;
  padding: 0 12px; }

.roomlist-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid #aaa;
  width: 340px;
  height: 154px;
  margin: 0 3px 12px 3px; }

.roomlist-item.closed {
  opacity: 0.5; }

.roomlist-item.closed .roomlist-item-title {
  color: #555; }

.roomlist-item.unchecked .roomlist-item-title {
  background-color: #e4212c;
  color: white;
  font-weight: bold; }

.roomlist-item-title {
  line-height: 20px;
  font-size: 16px;
  padding: 9px 6px;
  background-color: #e9e4e0;
  color: #333;
  font-weight: unset;
  border-bottom: 1px solid #aaa; }

.roomlist-item-status {
  display: flex;
  color: #888;
  justify-content: space-between;
  align-items: center;
  padding: 2px 6px;
  font-size: 15px; }

.roomlist-item-members {
  display: flex;
  padding-left: 4px;
  font-size: 1rem; }

.roomlist-item-members img {
  height: 24px;
  opacity: 0.6;
  margin-right: 4px; }

a.roomlist-item-link {
  flex: 1; }

a.roomlist-item-link:hover .roomlist-item-message {
  text-decoration: underline; }

.roomlist-item-body {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 12px 12px 12px; }

.roomlist-item-caution {
  color: #e00;
  display: flex;
  align-items: center; }

.roomlist-item-caution img {
  height: 48px; }

.roomlist-item-caution-body {
  margin-left: 10px;
  line-height: 20px; }

.roomlist-item-message {
  color: #888;
  text-align: center; }

.roomlist-item-users {
  /*background-color: #e9e4e0;*/
  height: 20px;
  border-top: 1px solid #ddd;
  font-size: 13px;
  color: #777;
  /*padding: 0 8px;*/
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

.roomlist-item-users span {
  margin: 0 8px; }

.roomlist-item-users img {
  height: 100%; }

.user-btn {
  width: 60px;
  font-size: 14px;
  border-radius: 14px;
  transition: color 0.1s, background-color 0.1s;
  margin-right: 8px;
  line-height: 19px; }

.user-btn:hover {
  font-weight: bold; }

.user-btn.delete {
  color: #e4212c;
  border: 1px solid #e4212c; }

.user-btn.delete:hover {
  color: white;
  background-color: #e4212c; }

.user-btn.edit {
  color: #4a0;
  border: 1px solid #4a0; }

.user-btn.edit:hover {
  color: white;
  background-color: #4a0; }

.user-list-item.deleted .user-btn {
  display: none; }

.content-body {
  display: flex;
  flex-direction: column; }

.workapplicant-list-container {
  display: flex;
  flex: 1; }

.workapplicant-list {
  display: flex;
  flex-direction: column;
  width: 440px;
  height: 100%;
  border-right: 1px solid #888; }

.workapplicant-list.approved {
  background-color: #dfdddc; }

.workapplicant-list-items {
  flex: 1;
  overflow-y: overlay; }

.workapplicant-list-title {
  width: 100%;
  height: 30px;
  line-height: 29px;
  background-color: #e2dbd5;
  font-size: 15px;
  font-weight: bold;
  text-align: center;
  border-bottom: 1px solid #aaa;
  border-top: 1px solid #ddd; }

.workapplicant-list-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #bbb;
  background-color: white;
  /*cursor: pointer;*/
  padding-right: 4px; }

.workapplicant-list-item-heading {
  display: flex;
  align-items: center;
  height: 80px; }

.workapplicant-list-item-detail {
  display: none; }

.workapplicant-list-item:hover {
  background-color: #f5f4f4; }

.workapplicant-list-item-number {
  width: 20px;
  text-align: center;
  color: #555; }

.workapplicant-list-item-icon {
  height: 60px;
  width: 60px;
  border-radius: 30px;
  margin-right: 10px;
  object-fit: cover; }

.workapplicant-list-item-name {
  font-size: 15px;
  font-weight: bold; }

.workapplicant-list-item-info {
  flex: 1;
  color: #888;
  margin-left: 10px;
  font-size: 15px; }

.workapplicant-list-item-action {
  display: flex;
  margin-right: 10px; }

.workapplicant-list-item-action button {
  width: 58px;
  height: 58px;
  font-size: 14px;
  border-radius: 29px;
  transition: color 0.1s, background-color 0.1s;
  margin: 4px;
  line-height: 19px;
  user-select: none;
  background-color: transparent; }

.workapplicant-list-item-action button:hover {
  font-weight: bold; }

.workapplicant-list-item-action button.approve {
  color: #008ff4;
  border: 1px solid #008ff4; }

.workapplicant-list-item-action button.approve:hover {
  color: white;
  background-color: #008ff4; }

.workapplicant-list-item-action button.reject {
  color: #e4212c;
  border: 1px solid #e4212c; }

.workapplicant-list-item-action button.reject:hover {
  color: white;
  background-color: #e4212c; }

.workapplicant-list.rejected .workapplicant-list-title {
  background-color: #e5e5e5; }

.workapplicant-list.rejected .workapplicant-list-item {
  opacity: 0.5; }

.workapplicant-list.approved .workapplicant-list-item-action button,
.workapplicant-list.rejected .workapplicant-list-item-action button {
  width: 54px;
  height: 22px;
  border-radius: 29px;
  font-size: 13px;
  line-height: 18px;
  color: #ccc;
  border-color: #ccc; }

.workapplicant-list.approved .workapplicant-list-item-action button:hover,
.workapplicant-list.rejected .workapplicant-list-item-action button:hover {
  color: white;
  border-color: #e4212c; }

.work-icon {
  display: flex;
  align-items: center;
  line-height: 1em;
  border: 1px solid #aaa;
  border-radius: 0.5rem;
  padding: 1rem 1.5rem; }
  .work-icon-column {
    display: flex;
    flex-direction: column;
    justify-content: center; }
    .work-icon-column.flex1 {
      flex: 1; }
  .work-icon-order {
    font-size: 0.8rem;
    margin-right: 1rem; }
  .work-icon-name {
    font-weight: bold;
    margin-right: 2rem; }
  .work-icon-time {
    font-size: 0.85rem;
    margin-right: 1rem; }
  .work-icon-count {
    font-size: 0.8rem;
    padding: 0.15em 0.6em 0.1em;
    color: white;
    background: #e4212c;
    border-radius: 1rem; }

#work .content-box {
  padding: 0 1em; }
  #work .content-box .scroll-box-x {
    width: calc(100vw - 220px);
    padding-bottom: 20px;
    overflow-x: auto; }

#work .search-button-box {
  margin: 0 0 1em;
  display: flex; }
  #work .search-button-box.select, #work .search-button-box .search-button-box > div, #work .search-button-box .search-button-box input {
    width: 100%; }

#work .select-date, #work .select-case, #work .select-occupation {
  margin-right: 1em; }
  #work .select-date div, #work .select-date select, #work .select-case div, #work .select-case select, #work .select-occupation div, #work .select-occupation select {
    width: 100%; }

#work .search-button {
  width: 24%; }
  #work .search-button button {
    color: #fff;
    background: #302a2e; }

#work [v-cloak] {
  display: none; }

#work .loader,
#work .loader:before,
#work .loader:after {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out; }

#work .loader {
  color: #ccc;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s; }

#work .loader:before,
#work .loader:after {
  content: '';
  position: absolute;
  top: 0; }

#work .loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s; }

#work .loader:after {
  left: 3.5em; }

@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em; }
  40% {
    box-shadow: 0 2.5em 0 0; } }

@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em; }
  40% {
    box-shadow: 0 2.5em 0 0; } }

#work .notfound {
  margin: 4em 0; }

#work .works-table tr.cancelled {
  opacity: 0.3; }
  #work .works-table tr.cancelled button {
    pointer-events: none; }

#work .works-table .showRowSelected {
  display: none; }

#work .works-table .hideRowSelected {
  display: inline-block; }

#work .works-table tr.isRowSelected td {
  background: #FDFBE2; }

#work .works-table tr.isRowSelected .showRowSelected {
  display: inline-block; }

#work .works-table tr.isRowSelected input.showRowSelected {
  background: #fff; }

#work .works-table tr.isRowSelected .hideRowSelected {
  display: none; }

#work .works-table th, #work .works-table td {
  border: 1px solid #ccc;
  padding: .6em 1em; }
  #work .works-table th:not(.text-break), #work .works-table td:not(.text-break) {
    white-space: nowrap; }
  #work .works-table th.no-border, #work .works-table td.no-border {
    border: none; }
  #work .works-table th.isChanged, #work .works-table td.isChanged {
    background: #f5ea40; }

#work .works-table tr.isRowSelected td.isChangedValue {
  background: #f5ea40; }

#work .works-table.works-table-min th, #work .works-table.works-table-min td {
  padding: .6em 0.2em; }

#work .works-table th {
  background: #e2dbd5; }

#work .works-table a {
  text-decoration: underline;
  transition: all .3s ease; }
  #work .works-table a:hover {
    opacity: .6; }

#work .works-table-time {
  position: relative; }
  #work .works-table-time small {
    font-size: .6rem;
    position: absolute;
    top: -2em;
    left: 0;
    color: #c02;
    padding: .1em .4em;
    border: 1px solid #c02;
    border-radius: 6px; }

#work .works-table input.isReadOnly {
  padding: 0;
  border: none;
  font-size: 16px;
  font-family: inherit !important;
  color: inherit;
  cursor: default; }
  #work .works-table input.isReadOnly::placeholder {
    color: transparent; }

#work .works-table textarea.isReadOnly {
  padding: 0;
  border: none;
  border-radius: 0;
  color: inherit;
  cursor: default; }

#work .uploaded {
  width: 100px; }

#work .works-filter {
  margin-bottom: 1em; }

#work button:not(.formlist-item-btn):not(.formlist-item-btn-secondary):not(.common-btn):not(.filter-button):not(.chatter-edit-box__button):not(.chatter-edit-box__button-secondary):not(.chatter-edit-box__button-secondary) {
  height: 2.5rem;
  border-radius: 1.25rem;
  padding: 0 1rem;
  margin: 0 1rem;
  color: #999;
  border: 1px solid #999; }

#work .works-filter-items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 1em 0; }
  #work .works-filter-items > div {
    height: 100%;
    background: #f5f5f5;
    padding: 1em;
    margin-right: 1em; }
    #work .works-filter-items > div strong {
      display: block;
      font-weight: normal;
      margin: 0 0 1em;
      padding-left: .6em;
      border-left: 4px solid #ccc; }
    #work .works-filter-items > div label + label {
      margin-left: 1em; }
    #work .works-filter-items > div input {
      background: #fff; }

#work-detail .content-box {
  padding: 0 1rem;
  flex: 1; }
  #work-detail .content-box h2 {
    margin: 0 0 1rem;
    border: 1px solid #999;
    border-radius: 0.3rem;
    font-size: 1.2rem;
    padding: 0.5em 0.75em; }
    #work-detail .content-box h2 span.caution {
      color: #d00;
      font-size: 1rem;
      margin-left: 0.5rem; }
    #work-detail .content-box h2 > a {
      display: inline-block;
      width: 1em;
      height: 1em;
      margin-left: .6em;
      transition: all .3s ease; }
      #work-detail .content-box h2 > a:hover {
        opacity: .6; }
      #work-detail .content-box h2 > a img {
        width: 100%; }

#work-detail .uploadimage-link {
  background: #ddd;
  font-weight: bold;
  padding: .2em .8em; }

#work-detail .table-cover {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; }

#work-detail table {
  width: 100%;
  max-width: 100%; }

#work-detail th, #work-detail td {
  border: 1px solid #bbb;
  padding: .6em 1em; }

#work-detail th {
  background: #e2dbd5;
  white-space: nowrap; }

#work-detail td textarea {
  display: block;
  width: 100%;
  border-radius: 0; }

#work-detail .button-box {
  margin: 1em 0;
  text-align: center; }
  #work-detail .button-box button {
    color: #fff;
    font-weight: bold;
    background: #e4212c;
    padding: .6em 2em;
    transition: all .3s ease; }
    #work-detail .button-box button:hover {
      opacity: .6; }

#work-detail .add-place-box {
  display: flex; }
  #work-detail .add-place-box select {
    margin-right: 2em; }

#work-detail .add-place-button {
  cursor: pointer;
  background: #ddd;
  font-weight: bold;
  padding: .2em .8em;
  margin-left: 2em; }

#work-detail .add-place-box-head {
  display: flex;
  justify-content: space-between; }

#work-detail .add-place-head {
  font-weight: bold; }

#work-detail .place-setting-button {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  transition: all .3s ease; }
  #work-detail .place-setting-button:hover {
    opacity: .6; }
  #work-detail .place-setting-button img {
    width: 100%; }

#work-detail .selected-place-box label {
  display: block; }

#work-detail .selected-place-item-box {
  padding: 1em 0;
  border-bottom: 1px solid #ccc; }

#work-detail .remove-button {
  border-radius: 4px;
  margin-left: .8em;
  cursor: pointer;
  transition: all .3s ease;
  display: flex;
  align-items: center; }
  #work-detail .remove-button:hover {
    opacity: .6; }
  #work-detail .remove-button span {
    background: #ddd;
    padding: 0 .4em; }

#work-detail .selected-place-item-box {
  display: flex;
  justify-content: space-between; }

#work-detail .add-item-lists {
  padding-left: 0;
  margin-top: 0; }

#work-detail .add-item-list {
  margin-bottom: .4em;
  display: flex; }
  #work-detail .add-item-list .remove-button {
    background: #ddd;
    border-radius: 4px;
    margin-left: .4em;
    cursor: pointer;
    transition: all .3s ease;
    display: flex;
    align-items: center;
    padding: 0 .4em; }

#work-detail .add-item-box {
  display: flex; }

#work-detail .add-item-button {
  cursor: pointer;
  background: #ddd;
  font-weight: bold;
  padding: .2em .8em;
  margin-left: 2em; }

#work-detail .meeting-items {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; }
  #work-detail .meeting-items:after {
    content: "";
    display: block;
    width: 30%; }

#work-detail .meeting-item {
  width: 30%; }

#work-detail .work-detail-leaders {
  display: flex;
  flex-direction: column; }
  #work-detail .work-detail-leaders-item {
    display: flex;
    align-items: center;
    height: 1.5rem; }
    #work-detail .work-detail-leaders-item-name {
      font-weight: bold;
      margin-right: 1rem;
      margin-left: 2rem; }
    #work-detail .work-detail-leaders-item .delete-btn {
      margin-left: 1rem;
      color: white;
      font-size: 0.8rem;
      font-weight: bold;
      background: #888;
      border-radius: 1rem;
      width: 1rem;
      height: 1rem;
      line-height: 1rem; }

.work-content {
  display: flex; }

.work-right {
  width: 360px; }

.work-detail {
  border: 1px solid #999;
  border-radius: 0.3rem;
  padding: 0 1rem 0.6rem;
  margin: 0 0 20rem;
  overflow: hidden; }
  .work-detail h3 {
    background: #ddd0c3;
    margin: 1rem 0 0.9rem;
    padding: 0.25rem 0.6rem 0.2rem;
    font-size: 1rem;
    font-weight: normal;
    color: #000;
    border-radius: 0.2rem; }
  .work-detail-caption {
    font-size: 0.8rem;
    color: #555; }
  .work-detail input {
    border: 1px solid #ccc; }
  .work-detail textarea {
    flex: 1;
    font-size: 1rem;
    line-height: 1.2rem;
    border-radius: 0.2rem;
    padding: 0.2rem 0.3rem;
    border: 1px solid #ccc; }
  .work-detail-wrapitems {
    display: flex;
    flex-wrap: wrap; }
  .work-detail-update-btn {
    color: white;
    background: #e4212c;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 0.2rem 1rem;
    border-radius: 1rem;
    display: block;
    margin: 1rem auto;
    cursor: pointer; }
  .work-detail .belonging-lists {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 0.5rem -1.6rem; }
  .work-detail .belonging-list {
    margin-left: 1.6rem; }
  .work-detail span.deleted {
    color: #666; }

.work-detail-image {
  display: flex;
  margin: 1rem 0 0; }
  .work-detail-image-item {
    position: relative;
    height: 8rem;
    width: 12rem;
    border: 1px dashed #bbb;
    box-sizing: border-box;
    background: #fafafa; }
    .work-detail-image-item:not(:last-child) {
      margin-right: 1rem; }
    .work-detail-image-item:hover .work-detail-image-delete-btn:not(.empty) {
      display: block; }
  .work-detail-image img {
    position: absolute;
    margin: -1px 0 0 -1px;
    height: 8rem;
    width: 12rem;
    object-fit: cover;
    cursor: pointer; }
    .work-detail-image img[src=""] {
      display: none; }
    .work-detail-image img.work-detail-image-delete-btn {
      display: none;
      width: 1.1rem;
      height: 1.1rem;
      top: 0.5rem;
      right: 0.5rem;
      cursor: pointer; }
  .work-detail-image input[type="file"] {
    display: none; }

.work-detail-row, .order-detail-row {
  display: flex; }
  .work-detail-row .work-detail-item:not(:first-child), .order-detail-row .work-detail-item:not(:first-child), .work-detail-row .order-detail-item:not(:first-child), .order-detail-row .order-detail-item:not(:first-child) {
    margin-left: 1rem; }

.work-detail-item, .order-detail-item {
  display: flex;
  flex: 1;
  margin-bottom: 0.4rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid #ccc;
  line-height: 1.5rem;
  align-items: center; }
  .work-detail-item.blank, .blank.order-detail-item {
    border: none; }
  .work-detail-item a, .order-detail-item a {
    color: #08c; }
    .work-detail-item a:hover, .order-detail-item a:hover {
      text-decoration: underline; }
  .work-detail-item-label, .order-detail-item label {
    width: 7rem;
    font-size: 0.85rem;
    font-weight: bold; }
    .work-detail-item-label.required::after, .order-detail-item label.required::after {
      color: red;
      font-size: 0.80rem;
      font-weight: bold;
      content: "*"; }
  .work-detail-item-value, .order-detail-item div {
    flex: 1;
    line-height: 1.2rem; }
  .work-detail-item-checkbox {
    display: flex; }
    .work-detail-item-checkbox label {
      margin-right: 1em;
      display: flex;
      align-items: center; }
      .work-detail-item-checkbox label + label {
        margin-left: 1em;
        position: relative; }
        .work-detail-item-checkbox label + label:before {
          content: "";
          display: block;
          width: 1px;
          height: 1em;
          position: absolute;
          top: 0;
          left: -1em;
          bottom: 0;
          margin: auto;
          background: #ccc; }

.work-detail-staff {
  width: 10rem;
  display: flex;
  align-items: center; }
  .work-detail-staff-icon {
    margin: 0 0.5rem; }
    .work-detail-staff-icon img {
      width: 2rem;
      height: 2rem;
      object-fit: cover;
      border-radius: 32px; }

.work-subcard-row {
  display: flex;
  padding-left: 1rem; }

.work-subcard {
  flex: 1;
  border: 1px solid #999;
  border-radius: 0.3rem;
  overflow: hidden;
  margin: 0 1rem 1rem 0;
  padding: 0.5rem 1rem; }
  .work-subcard.wide {
    flex: 1.4; }
  .work-subcard h3 {
    margin: 0 0 0.6rem 0;
    font-size: 0.9rem;
    border-bottom: 1px solid #bbb;
    padding: 0.2rem 0 0.5rem 0; }
  .work-subcard a, .work-subcard button {
    color: #05a; }
  .work-subcard-item {
    display: flex;
    margin: 0.7rem 0;
    line-height: 1.2rem; }
    .work-subcard-item-label {
      width: 6rem;
      font-size: 0.9rem; }
    .work-subcard-item-value {
      flex: 1; }
      .work-subcard-item-value .switchArea {
        margin: inherit; }
    .work-subcard-item .postal-code {
      font-size: 0.8rem; }

.switchArea {
  line-height: 28px;
  letter-spacing: 0;
  text-align: center;
  font-size: 14px;
  position: relative;
  margin: auto;
  width: 90px;
  background: #fff; }
  .switchArea .switch-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-radius: 30px;
    border: 2px solid #78bd78 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important; }
    .switchArea .switch-button span {
      padding: 0 !important; }
      .switchArea .switch-button span:after {
        content: "公開";
        padding: 0 0 0 26px;
        color: #78bd78; }
    .switchArea .switch-button.on {
      border: 2px solid #999999 !important; }
      .switchArea .switch-button.on span:after {
        content: "非公開";
        padding: 0 26px 0 0;
        color: #999999; }
      .switchArea .switch-button.on .swImg {
        transform: translateX(58px);
        background: #999999; }
  .switchArea .swImg {
    position: absolute;
    width: 24px;
    height: 24px;
    top: 4px;
    left: 4px;
    border-radius: 26px;
    transition: .2s;
    pointer-events: none;
    background: #78bd78; }

.attached-file {
  font-size: 0.9rem;
  line-height: 1.9rem;
  padding: 0 0.4rem;
  margin: -0.5rem 0 -0.5rem 0; }
  .attached-file a {
    color: #05a; }
  .attached-file table {
    text-align: left; }
  .attached-file tr + tr {
    border-top: 1px solid #ccc; }
  .attached-file th, .attached-file td {
    padding: .4em 0 !important; }
  .attached-file th {
    background: none !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #ccc !important;
    font-weight: normal; }
  .attached-file th.size {
    width: 7rem; }
  .attached-file th.updated {
    width: 9rem; }
  .attached-file td {
    border: 0 !important; }
  .attached-file-delete img {
    width: 1rem;
    height: 1rem;
    opacity: 0.2;
    transition-duration: 0.2s; }
    .attached-file-delete img:hover {
      opacity: 1; }

.work-qr-cover {
  display: flex;
  justify-content: center;
  margin: 4em 0; }

.work-qr {
  width: 258px;
  margin: 0 2em; }
  .work-qr .work-qr-label {
    font-size: 1.4rem; }
  .work-qr.attendance canvas {
    border: 2px solid #4a0; }
  .work-qr.attendance .work-qr-label {
    color: #4a0; }
  .work-qr.departure canvas {
    border: 2px solid #e4212c; }
  .work-qr.departure .work-qr-label {
    color: #e4212c; }

.work-qr-label {
  text-align: center; }

.order-detail {
  margin: 0 1rem; }
  .order-detail h2 {
    margin: 0 0 1rem;
    border: 1px solid #999;
    border-radius: 0.3rem;
    font-size: 1.2rem;
    padding: 0.5em 0.75em; }
    .order-detail h2 span.caution {
      color: #d00;
      font-size: 1rem;
      margin-left: 0.5rem; }
  .order-detail h3 {
    background: #ddd0c3;
    margin: 1rem 0 0.9rem;
    padding: 0.25rem 0.6rem 0.2rem;
    font-size: 1rem;
    font-weight: normal;
    color: #000;
    border-radius: 0.2rem; }
  .order-detail-box {
    border: 1px solid #999;
    border-radius: 0.3rem;
    padding: 0.5em 0.75em; }
  .order-detail-worklist {
    display: flex;
    flex-wrap: wrap; }
  .order-detail-map {
    height: 6.4rem;
    flex: 1;
    margin-left: 1rem; }

.worklist-item {
  display: flex;
  width: 28rem;
  margin: 0 1rem 0.5rem 0; }
  .worklist-item.cancelled {
    opacity: 0.3; }
  .worklist-item-icon {
    background: #aaa;
    width: 6rem;
    min-width: 6rem;
    height: 4rem;
    border-radius: 0.3rem;
    overflow: hidden; }
    .worklist-item-icon img {
      width: 100%;
      height: 100%;
      object-fit: cover; }
  .worklist-item-orderName {
    margin: 0 1rem -0.25rem 0.3rem;
    font-size: 0.8rem;
    width: 12rem; }
  .worklist-item-name {
    width: 12rem;
    margin: 0 0.3rem;
    line-height: 1.2em;
    font-size: 0.95rem;
    font-weight: bold;
    display: flex;
    align-items: center; }
  .worklist-item-date {
    font-size: 0.95rem; }
  .worklist-item-time {
    font-size: 0.85rem;
    line-height: 1em; }
  .worklist-item-date-box {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center; }

#cancellist .content-box {
  padding: 0 1rem; }

#cancellist .work-lists {
  list-style: none;
  padding: 0 0 0 1em; }

#cancellist .work-list {
  border-bottom: 1px solid #ccc;
  padding: .4em 0; }
  #cancellist .work-list a {
    transition: .3s ease; }
    #cancellist .work-list a:hover {
      opacity: .6; }

#meetingplace .content-box {
  padding: 1em; }

#meetingplace .calendar-nav {
  display: flex;
  justify-content: center;
  margin: 2em 0; }
  #meetingplace .calendar-nav a, #meetingplace .calendar-nav p {
    margin: 0 1em; }
  #meetingplace .calendar-nav a {
    transition: all .3s ease; }
    #meetingplace .calendar-nav a:hover {
      opacity: .6; }

#meetingplace .calendar-table {
  width: 100%; }
  #meetingplace .calendar-table th {
    text-align: center;
    background: #e2dbd5; }
    #meetingplace .calendar-table th.today {
      background: #c3bdb8; }
  #meetingplace .calendar-table th, #meetingplace .calendar-table td {
    border: 1px solid #ccc;
    padding: .4em 1em; }

#meetingplace .calendar-date {
  text-align: center;
  background: #e2dbd5; }
  #meetingplace .calendar-date .today {
    font-weight: bold;
    border-bottom: 4px solid #888; }

#meetingplace .calendar-hour {
  text-align: center;
  background: #e2dbd5; }

#meetingplace .place-head {
  font-size: 1.2rem;
  margin: 1em 0 2em;
  font-weight: bold;
  padding-left: .8em;
  border-left: 4px solid #000; }

#meetingplace .place-lists {
  margin: 0 0 1em; }

#meetingplace .place-list {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ccc; }
  #meetingplace .place-list:last-child {
    border-bottom: 0; }

#meetingplace .place-list-button-box {
  display: flex;
  align-items: center; }

#meetingplace .place-lists {
  padding-left: 0; }

#meetingplace .place-list-button {
  cursor: pointer;
  transition: all .3s ease;
  border-radius: 14px;
  transition: color 0.1s, background-color 0.1s;
  padding: .2em 1em;
  font-size: 14px; }
  #meetingplace .place-list-button.delete {
    color: #e4212c;
    border: 1px solid #e4212c; }
    #meetingplace .place-list-button.delete:hover {
      color: white;
      background-color: #e4212c; }
  #meetingplace .place-list-button.edit {
    color: #4a0;
    border: 1px solid #4a0;
    margin-right: 1em; }
    #meetingplace .place-list-button.edit:hover {
      color: white;
      background-color: #4a0; }
  #meetingplace .place-list-button span {
    display: inline-block;
    background: #ccc;
    padding: .2em .4em; }

#meetingplace .button-box {
  margin: 2em 0;
  text-align: center; }

#meetingplace .save-button {
  color: #4a0;
  border: 1px solid #4a0;
  margin: 1em 0;
  padding: .4em 1em;
  border-radius: 30px; }

#modal-edit-place .form-item {
  display: flex;
  margin-bottom: 1em; }

#modal-edit-place .form-item-heading {
  width: 20%; }

#modal-edit-place .form-item-content {
  width: 80%; }
  #modal-edit-place .form-item-content input {
    width: 100%; }

#workmeeting .content-box {
  padding: 1em; }

#workmeeting .calendar-nav {
  display: flex;
  justify-content: center;
  margin-bottom: 2em; }
  #workmeeting .calendar-nav > p {
    margin: 0 2em; }

#workmeeting .calendar-table {
  width: 100%; }
  #workmeeting .calendar-table th, #workmeeting .calendar-table td {
    border: 1px solid #ccc;
    padding: 1em; }
  #workmeeting .calendar-table th, #workmeeting .calendar-table .calendar-date td, #workmeeting .calendar-table .calendar-hour {
    text-align: center;
    background: #e9e4e0; }

.staff-icon {
  width: 1.5em;
  height: 1.5em;
  background: #ccc;
  border: 1px solid #aaa;
  border-radius: 0.75em;
  overflow: hidden; }
  .staff-icon.large {
    width: 5em;
    height: 5em;
    border-radius: 2.5em; }
  .staff-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: top; }

.staff-debug {
  display: flex;
  justify-content: flex-end;
  flex: 1;
  margin-right: 1rem; }
  .staff-debug a {
    font-size: 0.85rem;
    border: 1px solid #999;
    color: #888;
    border-radius: 0.2rem;
    padding: 0.1rem 0.7rem; }

.staff-button {
  position: relative;
  margin: 0 2px;
  padding: 4px 8px;
  font-size: 12px;
  color: #89b;
  background-color: white;
  border: 1px solid #89b;
  border-radius: 12px;
  cursor: pointer; }
  .staff-button:hover {
    color: #1f86ef;
    border-color: #1f86ef; }
  .staff-button.selected {
    color: white;
    font-weight: bold;
    background-color: #1f86ef;
    border-color: #1f86ef; }

.staff-badge {
  position: absolute;
  top: -4px;
  right: -8px;
  width: 16px;
  height: 16px;
  text-align: center;
  line-height: 16px;
  color: white;
  font-weight: bold;
  background: #d00;
  font-size: 10px;
  border-radius: 8px; }

#staff .filter-item .flex-column, #staff .filter-item .staff-stats-bigItem {
  margin-right: 1rem; }

#staff .list {
  max-width: unset; }

#staff .list-item:first-child > div a.active:after {
  border-right: 2px solid #000;
  border-bottom: 2px solid #000; }

#staff .list-item:first-child > div.desc a.active:after {
  transform: rotate(-135deg);
  top: .1em; }

#staff .list-item:first-child > div a {
  transition: opacity .3s ease-in-out; }
  #staff .list-item:first-child > div a:hover {
    opacity: .6; }
  #staff .list-item:first-child > div a:after {
    margin-left: .8em;
    content: "";
    display: inline-block;
    width: .6em;
    height: .6em;
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
    position: relative;
    transform: rotate(45deg);
    top: -.2em; }

#staff .list-item-name {
  width: 200px;
  display: flex;
  align-items: center; }
  #staff .list-item-name span {
    display: inline-block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #ccc;
    margin-right: .4em;
    overflow: hidden; }
  #staff .list-item-name img {
    width: 25px;
    height: 25px;
    object-fit: cover; }
  #staff .list-item-name .icon-identificated {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: .2em; }
    #staff .list-item-name .icon-identificated img {
      vertical-align: top; }

#staff .list-item-sex {
  width: 70px; }

#staff .list-item-age {
  width: 60px; }

#staff .list-item-birth {
  width: 160px; }

#staff .list-item-region {
  width: 100px; }

#staff .list-item-phone {
  width: 150px; }

#staff .list-item-created {
  width: 150px; }

#staff .list-item-submitted {
  width: 150px; }

#staff .list-item.leaved {
  opacity: 0.5; }

#staff .list-item-badge {
  font-size: 0.75rem;
  font-weight: bold;
  color: white;
  background: #333;
  padding: 0 0.4em;
  height: 1.4em;
  line-height: 1.5em;
  border-radius: 0.7em;
  margin-left: 0.3rem; }

#staff .filter-item label {
  margin-right: 1rem; }

#staff-detail .content-box {
  padding: 1em;
  max-width: 70rem; }

#staff-detail .staff-icon {
  width: 8rem;
  height: 8rem;
  border-radius: 4rem;
  margin: 1rem 2rem 0 3rem; }

#staff-detail .staff-info-table {
  width: 100%; }
  #staff-detail .staff-info-table th {
    width: 260px;
    text-align: left;
    background: #e2dbd5; }
  #staff-detail .staff-info-table th, #staff-detail .staff-info-table td {
    border: 1px solid #ccc;
    padding: .4em 1em; }
  #staff-detail .staff-info-table img {
    max-width: 20rem;
    max-height: 20rem; }
  #staff-detail .staff-info-table a {
    color: #08c; }
    #staff-detail .staff-info-table a:hover {
      text-decoration: underline; }
  #staff-detail .staff-info-table textarea {
    width: 100%; }

#staff-detail .button {
  font-size: 14px;
  display: inline-block;
  border: 1px solid #000;
  padding: .4em 1em;
  border-radius: 20px;
  margin: 1em .6em;
  transition: all .3s ease;
  position: relative; }
  #staff-detail .button:hover {
    opacity: .6; }
  #staff-detail .button.danger:hover {
    opacity: 1;
    color: white;
    background: #d00;
    font-weight: bold;
    border: 1px solid #d00; }
  #staff-detail .button.blue:hover {
    opacity: 1;
    color: white;
    background: #1f86ef;
    font-weight: bold;
    border: 1px solid #1f86ef; }

#staff-detail h3 {
  margin: 2rem 0 1rem;
  border: 1px solid #999;
  border-radius: 0.3rem;
  padding: 0.5em 0.75em;
  font-size: 1rem; }

#staff-detail .worklist-item {
  width: unset;
  flex: 1; }
  #staff-detail .worklist-item-box {
    display: flex; }
  #staff-detail .worklist-item-date-box {
    width: 8rem;
    flex: unset; }

#staff-detail .report-staff {
  flex: 1; }

#staff-detail .report-staff-price {
  font-weight: bold;
  color: #444;
  margin-left: 1rem; }

#staff-detail .report-staff-icon,
#staff-detail .report-staff-name,
#staff-detail .report-staff-status,
#staff-detail .report-staff-price {
  display: flex;
  align-items: center; }

#staff-detail .chart-cover {
  display: flex;
  padding-right: 2rem;
  padding-top: 0.8rem; }

#staff-detail .chart-box:first-child {
  margin-right: 1em; }

#staff-detail .chart-box-item {
  position: relative; }

#staff-detail .chart-box p {
  text-align: center;
  margin: 0; }

#staff-detail .chart-box span {
  position: absolute;
  top: 54%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: center;
  font-size: 1.4rem;
  font-weight: bold; }

#staff-detail .staff-detail-bank img {
  width: 1.5rem;
  height: 1.5rem; }

#staff-identification .content-box {
  padding: 1em; }

#staff-identification .identification-photo {
  margin-bottom: 2em; }
  #staff-identification .identification-photo img {
    width: 100%;
    max-width: 300px; }

#staff-identification .button {
  font-size: 16px;
  border-radius: 20px;
  transition: color 0.1s, background-color 0.1s;
  margin-right: 8px;
  padding: .2em 1em; }
  #staff-identification .button:hover {
    font-weight: bold; }
  #staff-identification .button.edit {
    color: #4a0;
    border: 1px solid #4a0; }
    #staff-identification .button.edit:hover {
      color: white;
      background-color: #4a0; }
    #staff-identification .button.edit:before {
      content: "承認する"; }
    #staff-identification .button.edit.off {
      opacity: .6; }
      #staff-identification .button.edit.off:before {
        content: "承認済み"; }
  #staff-identification .button.delete {
    color: #e4212c;
    border: 1px solid #e4212c; }
    #staff-identification .button.delete:hover {
      color: white;
      background-color: #e4212c; }

#staff-identification .staff-info {
  margin-bottom: 2em; }
  #staff-identification .staff-info th, #staff-identification .staff-info td {
    border: 1px solid #ccc;
    padding: .4em .8em; }
  #staff-identification .staff-info th {
    text-align: left;
    background: #e2dbd5; }

.staff-stats {
  border: 1px solid #bbb;
  border-radius: 0.4rem;
  margin-left: 1rem;
  padding: 0.2rem 0; }
  .staff-stats h4 {
    margin: 0;
    font-weight: normal;
    padding: 0 1rem; }
  .staff-stats-item {
    display: flex;
    align-items: center;
    margin: 0 1.5rem; }
    .staff-stats-item label {
      width: 5em;
      font-size: 0.9rem; }
  .staff-stats-bigItem {
    align-items: center;
    justify-content: center; }
    .staff-stats-bigItem label {
      font-size: 0.9rem;
      margin: 0 1rem; }
    .staff-stats-bigItem div {
      font-size: 1.5rem;
      font-weight: bold;
      color: #404040; }

.staff-profile {
  width: 11rem; }
  .staff-profile-name {
    font-weight: bold;
    font-size: 1.2rem; }
    .staff-profile-name-badge {
      color: white;
      background: #444;
      display: inline-block;
      padding: 0em 0.6em;
      border-radius: 1em;
      font-size: 0.8rem;
      line-height: 1.5em;
      transform: translateY(-0.15em); }
  .staff-profile-kana {
    font-size: 0.9rem;
    line-height: 1em;
    color: #888;
    margin-bottom: 0.5em; }
  .staff-profile-age {
    width: 3rem; }
  .staff-profile-agreement {
    font-size: 0.8rem;
    border: 1px solid #d00;
    color: #d00;
    border-radius: 1rem;
    text-align: center;
    margin-top: 0.3rem; }

.worklist-cover {
  margin: 2em 0 26rem; }

button.capsule.worklist-filter {
  font-size: 0.95rem;
  padding: 0 0.7em;
  margin-right: 0; }
  button.capsule.worklist-filter b {
    border-left: 1px solid #aaa;
    padding-left: 0.5em;
    margin-left: 0.5em; }

.switchArea-appli {
  line-height: 28px;
  letter-spacing: 0;
  text-align: center;
  font-size: 14px;
  position: relative;
  margin: auto;
  display: inline-block; }
  .switchArea-appli .swImg {
    position: absolute;
    width: 22px;
    height: 22px;
    top: 5px;
    left: 5px;
    right: 5px;
    margin-left: 0;
    border-radius: 22px;
    transition: .2s;
    pointer-events: none;
    background: #78bd78; }
  .switchArea-appli .switch-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border-radius: 30px;
    border: 2px solid #78bd78 !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important; }
    .switchArea-appli .switch-button span {
      padding: 0 !important; }
      .switchArea-appli .switch-button span:after {
        content: "アプリ公開中";
        padding: 0 0 0 20px;
        margin: 0 12px;
        color: #78bd78; }
    .switchArea-appli .switch-button.on {
      border: 2px solid #999999 !important; }
      .switchArea-appli .switch-button.on span:after {
        content: "アプリ非公開";
        padding: 0 20px 0 0;
        margin: 0 12px;
        color: #999999; }
      .switchArea-appli .switch-button.on .swImg {
        margin-left: calc( 100% - 32px);
        background: #999999; }

.publisedhArea {
  background-color: #e2dbd5;
  font-size: 15px;
  padding: 10px;
  vertical-align: middle; }
  .publisedhArea-item {
    display: inline-block;
    margin-right: 0.5rem; }

.tab-wrap {
  display: flex;
  padding: 0;
  margin: 0;
  flex-direction: row-reverse;
  justify-content: flex-end;
  border-bottom: 3px solid #E0E0E0; }

.tab-item {
  list-style-type: none;
  margin-bottom: -3px; }

.tab-link {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  border-bottom: 3px solid transparent; }
  .tab-link.isActive, .tab-link:hover {
    color: #4085E8;
    border-color: #4085E8; }

.importArea {
  background-color: #EBEBEB;
  padding: 2rem 1rem; }
  .importArea input[type=file] {
    background-color: #fff; }
  .importArea-tab .tab-wrap {
    margin: 2rem -1rem -2rem -1rem;
    padding-left: 2rem; }

.fixed-pagination {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin-bottom: 0.5rem; }
  .fixed-pagination .pagination-list {
    background-color: #fff;
    box-shadow: 0 0 0 2px white; }

.shift {
  display: flex;
  flex: 1;
  position: absolute;
  padding-right: 2rem; }

.shift-content {
  display: flex;
  flex: 1;
  margin-top: -1rem;
  overflow: hidden; }
  .shift-content-left {
    overflow-x: scroll;
    position: relative;
    padding-right: 1rem;
    flex: 1; }
  .shift-content-right {
    width: 18rem;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
    background: white;
    position: relative;
    transition: width 0.4s;
    overflow: scroll;
    white-space: nowrap;
    z-index: 99; }
    .shift-content-right.hidden {
      width: 0; }
    .shift-content-right-close, .shift-inspecter-menu-button {
      position: absolute;
      right: 1.5rem;
      top: 1rem;
      background-color: unset; }
      .shift-content-right-close img, .shift-inspecter-menu-button img {
        height: 1rem; }

.shift-info-lists {
  display: flex;
  list-style: none;
  padding-left: 1em; }

.shift-info-list {
  padding: 0 1em; }
  .shift-info-list.shortage span {
    color: #e4212c; }
  .shift-info-list span {
    display: inline-block;
    margin-left: 1em; }
    .shift-info-list span:first-child {
      margin-left: 0; }
    .shift-info-list span img {
      width: .8em; }
  .shift-info-list + .shift-info-list {
    border-left: 1px solid #000; }

.shift-group {
  height: fit-content;
  border: 1px solid #999;
  border-radius: 0.5rem;
  overflow: hidden;
  margin: 0 3px; }
  .shift-group-date {
    height: 3rem;
    line-height: 3rem;
    font-weight: bold;
    padding-left: 1rem;
    border-bottom: 1px solid #ddd; }
  .shift-group-items {
    display: flex; }
  .shift-group.on .shift-group-date {
    width: 100%;
    min-width: 220px;
    position: fixed;
    top: 0;
    background: #fff;
    z-index: 99;
    border-bottom: 0; }
  .shift-group.on .shift-item-top {
    width: 220px;
    min-width: 220px;
    position: fixed;
    background: #fff;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
    z-index: 99; }

.shift-item {
  width: 220px;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  outline: 1px solid #999;
  margin: 0 0.5px;
  padding-bottom: 1.5rem;
  position: relative; }
  .shift-item.col2, .shift-item.truck {
    width: 440px; }
    .shift-item.col2 .shift-item-top, .shift-item.truck .shift-item-top {
      width: 440px; }
    .shift-item.col2 .shift-staffs-item, .shift-item.truck .shift-staffs-item {
      width: 220px; }
      .shift-item.col2 .shift-staffs-item:nth-child(odd), .shift-item.truck .shift-staffs-item:nth-child(odd) {
        border-right: 1px solid #fff; }
  .shift-item.cancelled {
    opacity: 0.5; }
  .shift-item.truck .shift-staffs {
    display: flex;
    flex-wrap: wrap; }
  .shift-item.col2 .shift-staffs-box {
    display: flex;
    flex-wrap: wrap; }
  .shift-item.deleted {
    opacity: 0.5; }
    .shift-item.deleted .shift-staffs-item.empty {
      background: #efebea; }
      .shift-item.deleted .shift-staffs-item.empty .shift-staffs-item-name {
        font-weight: normal;
        color: #888381; }
  .shift-item:first-child {
    margin: 0; }
  .shift-item-samework {
    margin: .4em 0;
    padding: .2em; }
    .shift-item-samework a {
      display: inline-block;
      font-size: .8em;
      border: 1px solid #999;
      border-radius: 12px;
      padding: .1em .2em; }
  .shift-item-time {
    color: white;
    text-align: center;
    background: #826f67; }
  .shift-item-client {
    font-size: 0.7rem;
    opacity: 0.6;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer; }
  .shift-item-name {
    height: 7rem;
    line-height: 1rem;
    padding: 0 0.25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    flex-direction: column;
    margin-top: 1rem; }
    .shift-item-name-order {
      font-size: 0.75rem;
      line-height: 0.8rem;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3; }
    .shift-item-name-work {
      font-weight: bold; }
    .shift-item-name .switchArea {
      transform: scale(0.7);
      font-size: 1.2rem;
      margin: 0; }
    .shift-item-name .shift-item-confirm {
      padding: 0; }
    .shift-item-name .shift-item-confirm-button {
      width: 5em;
      padding: 0.15em 0 0.05em;
      margin-right: 1rem;
      font-size: 0.9rem; }
  .shift-item-heading {
    background: #ddd0c3;
    padding-left: 0.25rem; }
    .shift-item-heading.meetings, .shift-item-heading.belongings, .shift-item-heading.cars, .shift-item-heading.staffs, .shift-item-heading.toggle {
      cursor: pointer;
      position: relative;
      margin-bottom: 2px; }
      .shift-item-heading.meetings.on:after, .shift-item-heading.belongings.on:after, .shift-item-heading.cars.on:after, .shift-item-heading.staffs.on:after, .shift-item-heading.toggle.on:after {
        top: 30%;
        transform: rotate(225deg) translateY(-30%); }
      .shift-item-heading.meetings:after, .shift-item-heading.belongings:after, .shift-item-heading.cars:after, .shift-item-heading.staffs:after, .shift-item-heading.toggle:after {
        content: "";
        display: inline-block;
        width: .6em;
        height: .6em;
        border-right: 2px solid #000;
        border-bottom: 2px solid #000;
        transform: rotate(45deg) translateY(-20%);
        transition: all .8s ease;
        position: absolute;
        top: 20%;
        right: 1em;
        margin: auto; }
  .shift-item-cars {
    padding: .4em; }
    .shift-item-cars select {
      display: block;
      width: 100%;
      margin-bottom: .4em;
      padding-bottom: .4em;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border: none;
      outline: none;
      background: transparent;
      border-bottom: 1px solid #ccc; }
      .shift-item-cars select:last-of-type {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: 0; }
    .shift-item-cars-item {
      display: flex;
      align-items: center;
      margin-bottom: .2em;
      cursor: pointer;
      position: relative; }
      .shift-item-cars-item.deleted {
        opacity: 0.5; }
    .shift-item-cars-remove {
      background: #ccc;
      padding: 0 .4em;
      border-radius: 4px; }
    .shift-item-cars-add {
      padding: .2em 0;
      text-align: center;
      cursor: pointer;
      transition: all .3s ease; }
      .shift-item-cars-add:hover {
        opacity: .6; }
      .shift-item-cars-add img {
        width: 20px; }
    .shift-item-cars-deleted {
      position: absolute;
      color: #d00;
      font-size: 0.75rem;
      bottom: -0.6rem; }
  .shift-item-term {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    padding: 2px 4px;
    font-size: .7rem; }
    .shift-item-term span {
      padding: 0 .2em; }
      .shift-item-term span:first-child {
        padding: 0 .2em 0 0; }
      .shift-item-term span:last-child {
        padding: 0 0 0 .2em; }
    .shift-item-term span + span {
      border-left: 1px solid #ccc; }

.shift-item-caution {
  font-size: 0.7rem;
  font-weight: bold;
  color: #c00;
  text-align: center; }

.shift-item-memo {
  position: absolute;
  top: 4.5rem;
  transform: translateX(-6rem);
  max-width: 18rem;
  min-width: 8rem;
  padding: 1.5rem 1rem 0.5rem;
  border-radius: 1rem;
  background: white;
  border: 1px solid #bbb;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3); }
  .shift-item-memo-title {
    position: absolute;
    top: 0.25rem;
    left: 1.1rem;
    font-size: 0.8rem;
    color: #777; }
  .shift-item-memo-close {
    position: absolute;
    height: 0.7rem;
    right: 0.7rem;
    top: 0.5rem;
    cursor: pointer; }
  .shift-item-memo-body, .shift-item-memo textarea {
    margin-bottom: 0.4rem;
    font-size: 0.8rem;
    line-height: 1rem;
    white-space: pre-wrap;
    max-height: 20rem;
    overflow-y: auto; }
  .shift-item-memo textarea {
    border-radius: 0.5rem;
    padding: 0.5rem;
    width: 16rem; }
  .shift-item-memo .capsule {
    font-size: 0.75rem;
    padding: 0.1em 1.3em 0.05em;
    margin: 0 0.1rem; }
  .shift-item-memo-button {
    width: 1rem;
    height: 1rem;
    cursor: pointer; }

.staff-count {
  font-size: 0.8rem;
  padding-left: 0.4rem;
  opacity: 0.9;
  background: #8a736a;
  color: white;
  padding: 0.0rem 0.5rem;
  border-radius: 0.7rem;
  line-height: 1.3rem;
  vertical-align: text-top;
  margin-left: 0.2rem; }
  .staff-count span.overCapacity {
    color: #fa9;
    font-weight: bold; }
  .staff-count-extra {
    font-size: 0.75rem;
    font-weight: bold;
    color: #8e0;
    line-height: 0.95rem;
    vertical-align: text-top; }

.shift-closed {
  padding: 1em 0; }

.shift-meetings {
  padding: 0.2rem 0.4rem; }
  .shift-meetings-item {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    position: relative; }
    .shift-meetings-item + .shift-meetings-item:before {
      content: "";
      display: block;
      position: absolute;
      width: 0px;
      height: 1.2rem;
      border-left: 1px dashed #999;
      left: 1.2rem;
      top: -0.6rem; }
    .shift-meetings-item-time {
      font-weight: bold;
      width: 2.5rem;
      text-align: center;
      cursor: pointer;
      transition: opacity .3s ease; }
      .shift-meetings-item-time:hover {
        opacity: .6; }
    .shift-meetings-item-name {
      flex: 1;
      line-height: 1rem;
      height: 2.5rem;
      display: flex;
      align-items: center;
      flex-wrap: wrap; }
      .shift-meetings-item-name button {
        text-align: left; }
      .shift-meetings-item-name span {
        margin-left: .4em;
        padding: 0 .4em;
        position: relative; }
        .shift-meetings-item-name span:before {
          content: "";
          display: inline-block;
          width: 1px;
          height: .8em;
          background: #000;
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          margin: auto; }

.shift-belongings-item {
  padding: 0 0.45rem;
  max-height: 4em; }

.shift-belongings-item + .shift-belongings-item {
  border-top: 1px solid #ccc; }

.shift-staffs hr {
  border-bottom: 1px solid #ddd;
  margin: 0; }
  .shift-staffs hr.light {
    border-color: white; }

.shift-staffs-item {
  display: flex;
  align-items: center;
  height: 2.3rem;
  font-size: 0.9rem;
  padding: 0 0.45rem;
  border-bottom: 1px solid #ddd;
  cursor: pointer; }
  .shift-staffs-item:not(.empty):hover {
    background: #eee; }
  .shift-staffs-item.empty {
    background: #f3ddda; }
    .shift-staffs-item.empty.confirmed {
      background: #efeceb; }
      .shift-staffs-item.empty.confirmed .shift-staffs-item-name {
        color: #888482;
        font-weight: normal; }
      .shift-staffs-item.empty.confirmed:hover {
        background: #efeceb;
        cursor: default; }
    .shift-staffs-item.empty:not(:last-child) {
      border-bottom: 1px solid white; }
    .shift-staffs-item.empty:hover {
      background: #ebcccc; }
    .shift-staffs-item.empty .shift-staffs-item-name {
      font-weight: bold;
      color: #a94442;
      font-size: 0.7rem;
      opacity: 0.8;
      text-align: center; }
  .shift-staffs-item.rejected {
    opacity: 0.4; }
  .shift-staffs-item.progress {
    pointer-events: none;
    opacity: 0.4; }
  .shift-staffs-item.leaved {
    opacity: 0.4; }
  .shift-staffs-item.outsource {
    font-size: 0.8rem;
    line-height: 0.9rem; }
    .shift-staffs-item.outsource .shift-staffs-item-icon {
      width: 2.2rem;
      height: 1rem;
      font-size: 0.6rem;
      font-weight: bold;
      color: white;
      background: #8a736a;
      border: 1px solid #8a736a;
      text-align: center;
      opacity: 0.85; }
    .shift-staffs-item.outsource .shift-staffs-item-number {
      color: #bbb; }
  .shift-staffs-item.overCapacity {
    background: #faa; }
    .shift-staffs-item.overCapacity:hover {
      background: #ff9191; }
  .shift-staffs-item-label {
    padding: 0 0.5rem;
    font-size: 0.75rem; }
  .shift-staffs-item .leaved-badge {
    font-size: 0.7rem;
    background: #222; }

.shift-staffs-item-icon {
  position: relative;
  margin-right: 0.5rem; }
  .shift-staffs-item-icon .badge {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 0.3rem;
    font-size: 0.4rem; }

.shift-staffs-item-name {
  flex: 1; }

.shift-staffs-item-caution {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  margin-right: .4em; }
  .shift-staffs-item-caution img {
    width: 100%; }

.shift-staffs-item-badge {
  width: 1.1rem;
  height: 1.1rem;
  margin-left: 0.2rem;
  vertical-align: text-bottom; }

.shift-staffs-item-kintai {
  font-size: 0.7rem;
  color: white;
  background: #e4212c;
  font-weight: bold;
  padding: 0 0.4rem;
  border-radius: 1rem; }
  .shift-staffs-item-kintai.checkedYesterday {
    background: #f87600; }
  .shift-staffs-item-kintai.checked {
    background: #f8b000; }
  .shift-staffs-item-kintai.arrived {
    background: #46b200; }
  .shift-staffs-item-kintai.finished {
    background: #1f9aec; }
  .shift-staffs-item-kintai.accept {
    background: #935CCB; }

.shift-staffs-item-btn {
  width: 2.5rem;
  height: 1.5rem;
  font-size: 0.7rem;
  border-radius: 1rem;
  transition: color 0.1s, background-color 0.1s;
  margin: 0.1rem;
  line-height: 0.8rem;
  user-select: none;
  background-color: transparent;
  border: 1px solid #999;
  color: #999; }
  .shift-staffs-item-btn.approve:hover {
    color: white;
    background-color: #008ff4;
    border-color: #008ff4; }
  .shift-staffs-item-btn.reject:hover {
    color: white;
    background-color: #e4212c;
    border-color: #e4212c; }

.shift-staffs-item-ng {
  color: #c00;
  font-size: 0.7rem;
  border: 2px solid;
  border-radius: 2px;
  padding: 0rem 0.15rem;
  font-weight: bold; }

.shift-item-confirm {
  padding: 1em 0;
  text-align: center; }
  .shift-item-confirm-button {
    color: #e4212c;
    border: 1px solid #e4212c;
    padding: 0 1.4em;
    border-radius: 25px; }
    .shift-item-confirm-button.on {
      color: #4a0;
      border: 1px solid #4a0; }

.shift-inspecter-edit {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem; }
  .shift-inspecter-edit button {
    font-size: 0.8rem;
    padding: 0.2em 1em;
    border-radius: 1em;
    margin: 0 0.2em; }
  .shift-inspecter-edit .save {
    color: white;
    background: #e4212c;
    font-weight: bold; }
  .shift-inspecter-edit .cancel {
    color: #777;
    border: 1px solid #777; }

.shift-inspecter-item {
  display: flex;
  align-items: center;
  position: relative;
  width: 13rem;
  border-bottom: 1px solid #ddd;
  padding: 0.3rem 0 0.1rem 0.2rem; }
  .shift-inspecter-item.vertical {
    flex-direction: column;
    align-items: start; }
  .shift-inspecter-item label {
    width: 6rem;
    font-size: 0.9rem; }
  .shift-inspecter-item div, .shift-inspecter-item input {
    flex: 1;
    font-size: 0.9rem;
    white-space: normal;
    display: flex;
    align-items: center;
    justify-content: space-between; }
  .shift-inspecter-item input {
    width: 0; }
  .shift-inspecter-item select {
    font-size: 0.9rem;
    height: 1.6rem;
    flex: 1;
    min-width: 0; }
  .shift-inspecter-item img {
    height: 1rem;
    margin: 0 0.2rem 0.1rem 0.2rem;
    opacity: 0.3;
    cursor: pointer; }
    .shift-inspecter-item img:hover {
      opacity: 1; }

.shift-inspecter-menu-button {
  right: unset;
  left: 1.5rem; }
  .shift-inspecter-menu-button img {
    height: 1.2rem; }

.shift-inspecter-menu {
  position: absolute;
  top: 3rem;
  left: 1.5rem;
  display: flex;
  flex-direction: column;
  width: 10rem;
  border-radius: 0.3rem;
  overflow: hidden;
  font-size: 0.9rem;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.3); }
  .shift-inspecter-menu button {
    display: block;
    height: 2rem; }
    .shift-inspecter-menu button:hover {
      background-color: #ddd; }

.shift-inspecter-staff {
  padding: 1rem 0 0; }
  .shift-inspecter-staff h3 {
    display: flex;
    align-items: center;
    font-size: 1rem;
    margin: 1.2rem 0 0.2rem;
    justify-content: space-between; }
    .shift-inspecter-staff h3 img {
      height: 1rem;
      opacity: 0.3;
      cursor: pointer; }
      .shift-inspecter-staff h3 img:hover {
        opacity: 1; }
  .shift-inspecter-staff-top {
    padding: 1rem 3rem 0;
    width: 17rem; }
  .shift-inspecter-staff-box {
    padding: 1rem 3rem 2rem;
    background: #f8f8f8;
    border-top: 1px solid #ccc; }
  .shift-inspecter-staff-caution {
    display: block;
    font-size: .8rem;
    color: #fff;
    background: #e4212c;
    border-radius: 20px;
    padding: .4em .6em;
    text-align: center;
    margin-top: 0.2rem; }
  .shift-inspecter-staff-icon {
    text-align: center;
    padding: 1rem 0;
    padding-left: 0.5rem; }
    .shift-inspecter-staff-icon .staff-icon {
      margin: auto;
      width: 7rem;
      height: 7rem;
      border-radius: 4rem; }
  .shift-inspecter-staff-info {
    display: flex;
    justify-content: space-around;
    margin: 1em 0; }
    .shift-inspecter-staff-info dl {
      margin: 0; }
    .shift-inspecter-staff-info dt {
      font-size: .8rem; }
    .shift-inspecter-staff-info dt, .shift-inspecter-staff-info dd {
      text-align: center;
      margin: 0; }
  .shift-inspecter-staff-name {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
    white-space: normal; }
    .shift-inspecter-staff-name-badge {
      font-size: 0.75rem;
      font-weight: bold;
      color: white;
      background: #333;
      width: 5rem;
      height: 1.4em;
      line-height: 1.5em;
      border-radius: 0.7em;
      text-align: center;
      margin: -0.5rem auto 0; }
  .shift-inspecter-staff-spell {
    font-size: 0.9rem;
    text-align: center;
    margin-bottom: 1rem;
    white-space: normal; }
  .shift-inspecter-staff-actions button {
    position: relative; }
    .shift-inspecter-staff-actions button.on {
      color: #fff;
      background: #1f86ef;
      border-color: #1f86ef; }
  .shift-inspecter-staff-table th {
    font-weight: normal;
    text-align: left;
    padding-right: 1em; }

.shift-inspecter-driver-meetings {
  padding-left: 1.2em; }

.shift-inspecter-button, .shift-inspecter-staff-actions button, .shift-inspecter-submit-button, #agreement .agreement button, .modal-content button {
  display: block;
  padding: 0.2rem 1rem;
  margin: 0.5rem auto;
  font-size: 0.9rem;
  color: #777;
  border: 1px solid #777;
  border-radius: 2rem;
  transition: background-color,color 0.15s; }
  .shift-inspecter-button:hover:not([disabled]), .shift-inspecter-staff-actions button:hover:not([disabled]), .shift-inspecter-submit-button:hover:not([disabled]), #agreement .agreement button:hover:not([disabled]), .modal-content button:hover:not([disabled]) {
    background: #1f86ef;
    border-color: #1f86ef;
    color: white; }
  .shift-inspecter-button.secondary:hover, .shift-inspecter-staff-actions button.secondary:hover, .secondary.shift-inspecter-submit-button:hover, #agreement .agreement button.secondary:hover, .modal-content button.secondary:hover {
    background: #888;
    border-color: #888; }

.shift-inspecter-submit-button:hover:not([disabled]), #agreement .agreement button:hover:not([disabled]) {
  background: #e4212c;
  border-color: #e4212c; }

.shift-inspecter-submit-button.danger, #agreement .agreement button.danger {
  color: white;
  background: #e4212c;
  border-color: #e4212c; }
  .shift-inspecter-submit-button.danger:hover, #agreement .agreement button.danger:hover {
    background: #c00;
    border-color: #c00; }

.shift-inspecter-report-status {
  width: 8rem;
  height: 1.8rem;
  display: block;
  margin: auto; }

.shift-inspecter-report-time {
  width: 2.3rem; }

.shift-inspecter-staff-kintai-item {
  display: flex;
  align-items: center;
  position: relative;
  margin: 0.6rem 0; }
  .shift-inspecter-staff-kintai-item-time {
    font-size: 0.9rem;
    font-weight: bold;
    width: 3rem;
    min-width: 3rem;
    margin-right: 0.5rem;
    text-align: center; }
  .shift-inspecter-staff-kintai-item-name {
    color: white;
    font-size: 0.8rem;
    font-weight: bold;
    width: 2.4rem;
    height: 2.4rem;
    min-width: 2.4rem;
    border-radius: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center; }
    .shift-inspecter-staff-kintai-item-name.checkedYesterday {
      background: #f87600;
      line-height: 1.1; }
    .shift-inspecter-staff-kintai-item-name.checked {
      background: #f8b000; }
    .shift-inspecter-staff-kintai-item-name.arrived {
      background: #46b200; }
    .shift-inspecter-staff-kintai-item-name.finished {
      background: #1f9aec; }
    .shift-inspecter-staff-kintai-item-name.accept {
      background: #935CCB;
      line-height: 1.1; }
  .shift-inspecter-staff-kintai-item-distance {
    font-size: 0.9rem;
    color: #888;
    margin-left: 1rem; }
  .shift-inspecter-staff-kintai-item .shift-meetings-connecter {
    left: 1.5rem;
    top: -0.85rem; }

.shift-inspecter-radio {
  display: flex;
  align-items: center;
  margin-left: 1em; }
  .shift-inspecter-radio label {
    user-select: none; }
  .shift-inspecter-radio input[type=radio] {
    margin: 0 0.2em; }

.shift-inspecter-expense {
  align-items: start; }
  .shift-inspecter-expense-image {
    width: 5rem;
    height: 4rem !important;
    object-fit: cover;
    opacity: 1 !important; }
  .shift-inspecter-expense-body {
    flex-direction: column;
    align-items: start !important;
    padding-left: 1.5rem; }
  .shift-inspecter-expense-price {
    font-family: 'Arial';
    font-size: 1rem;
    line-height: 1; }
  .shift-inspecter-expense-memo {
    font-size: 0.8em !important;
    color: rgba(0, 0, 0, 0.5);
    line-height: 1.1; }

.shift-talk {
  background: white;
  z-index: 100;
  border-left: 1px solid #bbb;
  transition: width 0.4s;
  white-space: nowrap;
  overflow: hidden; }
  .shift-talk .talkroom {
    width: 20rem;
    white-space: normal; }
  .shift-talk .talkroom-talks {
    width: 20rem; }
  .shift-talk .talkroom-talk-text {
    max-width: 15rem; }

.v-enter-active, .v-leave-active {
  transition: all .2s ease-in-out;
  max-height: 4em; }

.v-enter, .v-leave-to {
  opacity: 0;
  max-height: 0; }

.confirm-meeting-time-button {
  color: white !important;
  border: 0 !important;
  background: #e4212c;
  font-size: 0.8rem;
  font-weight: bold;
  padding: 0.2rem 1rem;
  border-radius: 1rem;
  display: block;
  margin: 1rem auto; }

.modal {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center; }
  .modal-content {
    width: 50%;
    min-width: 20rem;
    background: white;
    border-radius: 1rem;
    padding: 1rem 1.5rem;
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    margin: auto;
    max-height: 100%;
    overflow: scroll; }
    .modal-content table {
      width: 100%; }
    .modal-content th, .modal-content td {
      border: 1px solid #bbb;
      padding: .6em 1em; }
    .modal-content th {
      background: #e2dbd5;
      white-space: nowrap; }
    .modal-content.wide {
      width: 60%; }
    .modal-content.w70p {
      width: 70%; }
    .modal-content.h90p {
      height: 90%; }
    .modal-content.narrow {
      width: 40%; }
    .modal-content-title {
      font-size: 1.2rem;
      padding-bottom: 0.7rem;
      border-bottom: 1px solid #bbb;
      display: flex;
      align-items: center; }
      .modal-content-title button {
        margin: 0 0 0 1rem; }
    .modal-content-body {
      margin-top: 1rem; }
    .modal-content-item {
      width: 33%; }
      .modal-content-item:after {
        content: "";
        display: block;
        width: 33%; }
      .modal-content-item-box {
        display: flex;
        flex-wrap: wrap; }
    .modal-content-action {
      display: flex;
      justify-content: center; }
      .modal-content-action button {
        margin: 0.5rem 1rem; }
        .modal-content-action button.primary {
          background: #e4212c;
          border-color: #e4212c;
          color: white; }
          .modal-content-action button.primary:hover {
            background: #c00;
            border-color: #c00; }
    .modal-content-map-cover {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap; }
    .modal-content .vue-map-container {
      width: 60%;
      height: 400px; }
    .modal-content .vue-map {
      width: 100%;
      height: 100%; }
    .modal-content .staff-box {
      width: 40%;
      padding: 1em; }
      .modal-content .staff-box > p {
        font-weight: bold; }
      .modal-content .staff-box ul {
        padding: 0;
        list-style: none; }
      .modal-content .staff-box li {
        display: flex;
        margin-bottom: .4em; }
      .modal-content .staff-box .staff-icon {
        margin-right: .4em; }
    .modal-content-filter-item {
      margin: 1em 0; }
  .modal-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    background: rgba(0, 0, 0, 0.6);
    z-index: 999; }
    .modal-box.meeting-time {
      text-align: center; }
      .modal-box.meeting-time select {
        color: #333;
        font-size: 1.4rem; }
      .modal-box.meeting-time .modal-content {
        height: 30%;
        padding: 1em; }
      .modal-box.meeting-time .time-box {
        margin: 2em 0; }

.modal-submit-button {
  margin: auto; }

.assgnStaff-info {
  border: 1px dashed #888;
  padding: 0 1em;
  background: #f8f8f8;
  margin-bottom: 1em;
  border-radius: 1rem; }
  .assgnStaff-info dl {
    display: flex;
    border-bottom: 1px solid #ccc;
    padding: .6em 0;
    margin: 0;
    font-size: .9rem; }
    .assgnStaff-info dl:last-child {
      border-bottom: 0; }
  .assgnStaff-info dt {
    width: 6rem; }
  .assgnStaff-info dd {
    margin-inline-start: 0; }

.assignStaff-filter, .moveStaff-filter {
  margin: auto;
  width: 90%;
  margin-bottom: 1.2rem;
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.8rem; }
  .assignStaff-filter-item, .moveStaff-filter-item {
    display: flex;
    margin-bottom: 0.2rem;
    align-items: center; }
    .assignStaff-filter-item label, .moveStaff-filter-item label {
      width: 6rem;
      display: block; }
    .assignStaff-filter-item :not(label), .moveStaff-filter-item :not(label) {
      flex: 1; }

.assignStaff-staffs, .moveStaff-works {
  display: flex;
  flex-wrap: wrap;
  margin: auto;
  width: 90%;
  margin-bottom: 0.5rem;
  user-select: none; }
  .assignStaff-staffs-item, .moveStaff-works-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    width: 9rem;
    cursor: pointer; }
    .assignStaff-staffs-item.client, .client.moveStaff-works-item {
      width: 50%;
      min-width: 16rem; }
    .assignStaff-staffs-item-icon {
      height: 1.6rem;
      width: 1.6rem;
      border-radius: 0.8rem;
      overflow: hidden;
      border: 1px solid #aaa;
      margin-right: 0.5rem;
      background: #ccc; }
      .assignStaff-staffs-item-icon img {
        height: 1.6rem;
        width: 1.6rem;
        width: 100%;
        object-fit: cover;
        vertical-align: top; }
    .assignStaff-staffs-item-name {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis; }
      .assignStaff-staffs-item-name:hover {
        background: #eee; }
      .assignStaff-staffs-item-name.on {
        border-bottom: 1px dashed #888; }

.assignStaff-count {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1rem 0 1.5rem; }
  .assignStaff-count label {
    font-weight: bold;
    font-size: 0.9rem; }
    .assignStaff-count label input {
      font-size: 1rem;
      width: 4rem;
      margin-left: 1rem; }

.shift-filter-search {
  display: flex; }
  .shift-filter-search a {
    display: inline-block;
    height: 2.5rem;
    line-height: 2.5rem;
    border-radius: 1.25rem;
    padding: 0 1rem;
    margin: 0 1rem;
    color: #999;
    border: 1px solid #999; }

.moveStaff-filter-item .popover-container {
  text-align: center; }
  .moveStaff-filter-item .popover-container input {
    width: 100%;
    text-align: center; }

.moveStaff-works {
  font-size: 0.9rem;
  justify-content: space-between; }
  .moveStaff-works-item {
    width: 48%;
    min-width: 10rem; }
    .moveStaff-works-item.disabled {
      opacity: 0.5;
      user-select: none;
      pointer-events: none; }
    .moveStaff-works-item[selected] .moveStaff-works-item-name {
      border-bottom: 4px solid #1086ef; }
    .moveStaff-works-item:hover {
      background: #eee; }
    .moveStaff-works-item-name {
      flex: 1;
      line-height: 1rem; }
    .moveStaff-works-item-orderName {
      font-size: 0.75rem;
      line-height: 0.8rem; }
    .moveStaff-works-item-workName {
      font-weight: bold; }
    .moveStaff-works-item-datetime {
      width: 5rem;
      display: flex;
      flex-direction: column; }
    .moveStaff-works-item-date {
      font-size: 0.85rem;
      height: 1.05rem; }
    .moveStaff-works-item-time {
      font-size: 0.8rem; }
    .moveStaff-works-item-count {
      width: 3rem;
      display: flex;
      justify-content: center;
      white-space: nowrap; }
    .moveStaff-works-item .caution {
      font-size: 0.7rem;
      font-weight: normal;
      color: #e30; }
  .moveStaff-works .staff-count {
    font-size: 0.7rem;
    line-height: 1rem;
    padding: 0 0.4rem;
    opacity: 1;
    background: #e4212c; }

.edit-outsource-count {
  display: flex;
  justify-content: center;
  margin: 2rem; }
  .edit-outsource-count input {
    font-size: 1.5rem;
    width: 4rem;
    color: #333; }

.fade-enter-active, .fade-leave-active {
  transition: opacity .2s; }

.fade-enter, .fade-leave-to {
  opacity: 0; }

.shift-inspecter-outsource {
  padding: 1rem 2rem; }
  .shift-inspecter-outsource-icon {
    display: inline-block;
    width: 7rem;
    height: 7rem;
    border-radius: 4rem;
    color: white;
    background: #8a736a;
    opacity: 0.85;
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    line-height: 7rem; }
  .shift-inspecter-outsource .shift-inspecter-item label {
    width: 5rem; }

.shift-applicant {
  width: 100%;
  padding: 1em; }
  .shift-applicant .shift-filter-search {
    margin-bottom: 1rem; }
  .shift-applicant-table {
    min-width: 950px;
    border-bottom: 1px solid #ccc;
    margin: 0;
    padding: 1em 0; }
    .shift-applicant-table th, .shift-applicant-table td {
      text-align: left;
      padding: .4em .6em;
      border-bottom: 1px solid #ccc; }
    .shift-applicant-table-work {
      transition: all .3s ease; }
      .shift-applicant-table-work:hover {
        opacity: .6; }
    .shift-applicant-table-staff {
      cursor: pointer; }
      .shift-applicant-table-staff:hover {
        background: #eee; }
      .shift-applicant-table-staff > div {
        display: flex;
        align-items: center;
        height: 2.5em;
        font-size: 0.9rem;
        padding: 0 0.45rem; }
        .shift-applicant-table-staff > div.rejected {
          opacity: 0.4; }
      .shift-applicant-table-staff-icon {
        width: 1.5em;
        height: 1.5em;
        background: #ccc;
        margin-right: 0.5rem;
        border: 1px solid #aaa;
        border-radius: 0.75em;
        overflow: hidden; }
        .shift-applicant-table-staff-icon img {
          width: 1.5em;
          height: 1.5em;
          object-fit: cover; }
    .shift-applicant-table-staffs-label {
      margin-left: 1em; }

.shift-inspecter-icon {
  width: 12rem;
  height: 8rem;
  background: #ccc;
  margin: 3rem auto 1rem; }
  .shift-inspecter-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover; }

.shift-inspecter-name {
  font-size: 1.1rem;
  font-weight: bold;
  text-align: center;
  width: 16rem;
  white-space: normal;
  margin: auto; }

.modal-extraStaff-form {
  text-align: center;
  margin: 2rem 0 1rem; }
  .modal-extraStaff-form input {
    font-size: 1.4rem;
    padding: 0.2em 0.6em 0.3em;
    max-width: 4em; }

.modal-batchEdit-form {
  text-align: center;
  margin: 2rem 0 1rem; }
  .modal-batchEdit-form input {
    font-size: 1.4rem;
    padding: 0.2em 0.6em 0.3em;
    max-width: 10em; }

#setting .content-box {
  padding: 0 1em; }

#setting .setting-lists {
  list-style-type: none; }

#setting .setting-list {
  border-bottom: 1px solid #ccc; }
  #setting .setting-list:last-child {
    border-bottom: none; }
  #setting .setting-list a {
    display: inline-block;
    padding: .2em 1em .2em .2em;
    transition: opacity .3s ease; }
    #setting .setting-list a:hover {
      opacity: .6; }
    #setting .setting-list a span {
      display: inline-block;
      vertical-align: middle; }
    #setting .setting-list a:after {
      content: "";
      display: inline-block;
      width: .6em;
      height: .6em;
      border-top: 1px solid #000;
      border-right: 1px solid #000;
      transform: rotate(45deg);
      vertical-align: middle;
      margin-left: .4em; }

#setting .pickup-list {
  display: flex;
  overflow-x: scroll; }

#setting .pickup-list-wrap {
  overflow-x: scroll; }

#setting .pickup-list-inner {
  display: inline-flex; }

#setting .pickup-item {
  border: 1px solid #bbb;
  border-radius: 0.5rem;
  padding: 2rem 1rem 1rem;
  margin-right: 1rem;
  position: relative;
  min-width: 355.5px;
  min-height: 12rem; }
  #setting .pickup-item-delete {
    position: absolute;
    right: 0.5rem;
    top: 0.2rem; }
    #setting .pickup-item-delete img {
      height: 0.9rem; }
  #setting .pickup-item-image {
    position: relative;
    border: 1px solid #ddd; }
    #setting .pickup-item-image img {
      width: 319.5px;
      height: 100px;
      object-fit: cover;
      cursor: pointer; }
  #setting .pickup-item-image-blank {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 319.5px;
    height: 100px;
    opacity: 0.5;
    cursor: pointer; }
    #setting .pickup-item-image-blank:hover {
      opacity: 1; }
    #setting .pickup-item-image-blank img {
      width: 3rem;
      height: 3rem; }
  #setting .pickup-item-worklist {
    margin-top: 1rem; }
    #setting .pickup-item-worklist .worklist-item {
      width: 319.5px;
      margin: 0 0 1rem 0;
      align-items: center; }
    #setting .pickup-item-worklist .worklist-item-icon {
      width: 6rem;
      height: 4rem;
      align-self: flex-start; }
    #setting .pickup-item-worklist .worklist-item-orderName,
    #setting .pickup-item-worklist .worklist-item-name,
    #setting .pickup-item-worklist .worklist-item-time {
      margin-left: 1rem;
      width: unset; }
    #setting .pickup-item-worklist .worklist-item-name {
      margin-top: 0.2rem; }
    #setting .pickup-item-worklist .worklist-item-time {
      margin-top: 0.4rem; }
    #setting .pickup-item-worklist .worklist-item-date-box {
      flex: unset; }
    #setting .pickup-item-worklist .delete-button img {
      width: 1rem;
      opacity: 0.5;
      margin-left: 0.3rem; }
      #setting .pickup-item-worklist .delete-button img:hover {
        opacity: 1; }
  #setting .pickup-item button.capsule {
    font-size: 0.9rem;
    margin-top: 0.5rem; }

#setting button.pickup-item {
  margin-left: 1rem;
  opacity: 0.5; }
  #setting button.pickup-item:hover {
    opacity: 1; }
  #setting button.pickup-item img {
    width: 2.5rem; }

#setting .pickup-action {
  margin-top: 1rem; }
  #setting .pickup-action button {
    padding: 0.3em 4rem; }

#setting .fade-leave-active {
  transition: opacity 2s ease-in-out; }

#setting .fade-leave-to {
  opacity: 0; }

#modal-select-work .modal-content {
  max-height: 100%; }
  #modal-select-work .modal-content-works {
    list-style-type: none;
    padding: 0; }
  #modal-select-work .modal-content-work {
    padding: .6em .4em;
    border-bottom: 1px dashed #ccc;
    cursor: pointer; }
    #modal-select-work .modal-content-work:hover {
      background: #f1f1f1; }
    #modal-select-work .modal-content-work span {
      margin-right: 2em; }
    #modal-select-work .modal-content-work.active {
      background: #f1f1f1;
      border-left: 4px solid #000; }
  #modal-select-work .modal-content-filter {
    display: flex;
    margin: 1em 0; }
    #modal-select-work .modal-content-filter label {
      margin-right: 1em; }

#agreement form {
  display: flex;
  height: 100%; }

#agreement .agreement {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 0 1rem; }
  #agreement .agreement textarea {
    flex: 1;
    max-width: 40rem;
    width: 100%;
    min-height: 20rem;
    margin: 0 1rem;
    border-radius: 0.5rem;
    line-height: 1.5em; }
  #agreement .agreement button {
    margin: 4rem;
    font-size: 1rem;
    padding: 0.2rem 3rem; }

#workDocument-trash .attached-file {
  padding: 0 1rem; }

#workDocument-trash tr {
  padding-right: 1rem; }
  #workDocument-trash tr button {
    font-size: 0.85rem;
    padding: 0 1rem; }

.annouce-img {
  display: flex;
  justify-content: center; }
  .annouce-img img {
    max-width: 500px;
    min-width: 200px;
    border: 1px solid #bbb; }

.announce-row input {
  margin-top: 1rem;
  flex: 1;
  max-width: 500px;
  min-width: 200px; }

.announce-action {
  margin-top: 1rem; }

img.arrowIcon {
  height: 1.5rem;
  margin: 0.5rem; }

#car .content-box {
  padding: 0 1em; }

#car .car-list {
  display: flex;
  margin-bottom: 1em; }
  #car .car-list.deleted {
    opacity: 0.3; }

#car .remove-button {
  display: flex;
  background: #ddd;
  border-radius: 4px;
  margin-left: .4em;
  cursor: pointer;
  transition: all .3s ease;
  align-items: center;
  padding: 0 .4em; }

#car .remove-button.restore:hover {
  background: #08c;
  color: white; }

#car .add-car-box {
  display: flex; }

#car .add-car-button {
  cursor: pointer;
  background: #ddd;
  font-weight: bold;
  padding: 0.2em 0.8em;
  margin-left: 2em; }

#report-list {
  display: flex;
  height: 100%;
  overflow: hidden;
  margin-top: -1rem; }
  #report-list hr {
    margin: 1rem 0 0 0; }
  #report-list input[type=checkbox] {
    font-size: 1.5rem; }
  #report-list .work-title {
    display: flex;
    flex-direction: column; }
    #report-list .work-title-order {
      font-size: 0.75rem;
      line-height: 0.8rem; }
    #report-list .work-title-name {
      font-size: 0.95rem;
      font-weight: bold;
      line-height: 1.1rem; }

.report-list-main {
  flex: 1;
  display: flex;
  flex-direction: column; }

.report-list-actions {
  font-size: 0.85rem;
  position: absolute;
  bottom: 4.5rem;
  left: 0;
  right: 0;
  margin: auto; }
  .report-list-actions button {
    box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.4); }

.report-list-sections {
  flex: 1;
  overflow-y: scroll;
  padding-bottom: 5rem;
  margin-top: 0; }

.report-list-date {
  width: 14rem;
  height: 2rem;
  margin: 1rem 1rem 1rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #aaa;
  border-radius: 0.4rem; }

.report-list-section {
  margin-left: 1rem;
  margin-top: 1rem; }
  .report-list-section h3 {
    font-size: 1.1rem;
    margin: 0.3rem 0; }

.report-list-section-heading {
  display: flex;
  align-items: center;
  border-left: 4px solid #d86;
  padding: 0.2rem 0;
  padding-left: 0.4rem; }
  .report-list-section-heading .work-title {
    padding-right: 0.5rem; }
  .report-list-section-heading-time {
    margin: 0 1rem; }
    .report-list-section-heading-time span {
      width: 2.5em;
      display: inline-block;
      text-align: center; }

.report-list-row {
  display: flex;
  padding: 0.1rem 2rem;
  padding-right: 0;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
  margin-left: 2rem;
  padding-left: 1rem;
  border-left: 1px solid #ccc; }
  .report-list-row:first-of-type {
    border-top: 1px solid #ccc; }
  .report-list-row:hover {
    background: #eee; }
  .report-list-row.deleted {
    opacity: 0.4; }
  .report-list-row-name {
    width: 8rem; }
  .report-list-row-status {
    width: 5rem; }
  .report-list-row-start, .report-list-row-end {
    width: 5rem; }
  .report-list-row-resttime {
    width: 4rem; }

.report-staff {
  display: flex;
  align-items: center;
  font-size: 0.95rem;
  padding: 0.2rem 0;
  margin-right: 1rem;
  border-bottom: 1px solid #ddd;
  cursor: pointer; }
  .report-staff:hover {
    background: #eee; }
  .report-staff-name {
    width: 8em;
    margin-left: 0.2rem; }
  .report-staff-status {
    color: #222;
    width: 5rem; }
    .report-staff-status span {
      border: 1px solid #444;
      border-radius: 0.5em;
      font-size: 0.85rem;
      padding: 0 0.4em; }
  .report-staff-start, .report-staff-end, .report-staff-rest, .report-staff-allowance {
    display: flex;
    align-items: center;
    width: 5rem; }
    .report-staff-start label, .report-staff-end label, .report-staff-rest label, .report-staff-allowance label {
      display: inline-block;
      width: 1.1rem;
      height: 1.1rem;
      margin-right: 0.4em;
      color: white;
      font-size: 0.7rem;
      font-weight: bold;
      border-radius: 1.1rem;
      line-height: 1.1rem;
      text-align: center; }
    .report-staff-start unit, .report-staff-end unit, .report-staff-rest unit, .report-staff-allowance unit {
      font-size: 0.8em;
      margin-left: 0.1rem; }
  .report-staff-start label {
    background: #3a0; }
  .report-staff-end label {
    background: #08e; }
  .report-staff-time span {
    line-height: 1.1rem; }
    .report-staff-time span:nth-of-type(2) {
      color: #888; }
  .report-staff-rest label {
    background: #777; }
  .report-staff-allowance {
    width: 6rem; }
    .report-staff-allowance label {
      width: 2.2rem;
      background: #d86; }
  .report-staff-noreport {
    color: #666;
    font-size: 0.8rem;
    align-items: center;
    display: flex; }

.report-list-pager {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-bottom: 0.5rem; }

.report-inspecter {
  width: 18rem;
  height: 100%;
  padding: 2rem;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3);
  z-index: 1; }
  .report-inspecter .staff-icon {
    margin: 0 auto 1rem;
    width: 7rem;
    height: 7rem;
    border-radius: 4rem; }

.report-list-block-reports {
  display: flex; }

.reports-item {
  margin-top: 1rem;
  margin-bottom: 1rem; }
  .reports-item-name {
    font-weight: bold;
    text-align: center;
    font-size: 1.1rem; }
  .reports-item-spell {
    font-size: 0.8rem;
    text-align: center; }

.reports-item-row {
  display: flex;
  border-bottom: 1px solid #ddd;
  padding: 0.3rem 0 0.1rem 0.2rem;
  font-size: 0.9rem;
  position: relative; }
  .reports-item-row label {
    width: 6rem; }
  .reports-item-row div, .reports-item-row select {
    flex: 1; }
  .reports-item-row input {
    flex: 1;
    width: 0;
    padding-right: 0; }
  .reports-item-row .deleted {
    font-size: 0.9rem; }

.transfer-dashboard {
  display: flex; }

.transfer-list {
  overflow: auto;
  padding-bottom: 4rem; }

.transfer-list-item {
  display: flex;
  align-items: center;
  padding: 0.15rem 1rem;
  border-bottom: 1px solid #ccc; }
  .transfer-list-item.heading {
    padding: 0.15rem 1rem;
    background: #ddd0c3;
    font-weight: bold;
    font-size: 0.9rem;
    border-top: 1px solid #ba9;
    border-bottom: 1px solid #ba9; }
  .transfer-list-item.resolved {
    opacity: 0.5; }
  .transfer-list-item a:hover {
    text-decoration: underline; }
  .transfer-list-item-id {
    width: 3rem;
    font-size: 0.8rem;
    font-weight: bold;
    color: #666; }
  .transfer-list-item-name {
    width: 7rem; }
  .transfer-list-item-amount {
    width: 5.5rem; }
  .transfer-list-item-fee {
    width: 5.5rem; }
  .transfer-list-item-sentAt {
    width: 8.5rem; }
  .transfer-list-item-date {
    width: 8.5rem; }
  .transfer-list-item-cria {
    width: 5.5rem; }
  .transfer-list-item-status {
    width: 5rem; }
  .transfer-list-item-action {
    width: 5rem; }
  .transfer-list-item-error {
    flex: 1; }
  .transfer-list-item:not(.heading) .transfer-list-item-cria {
    font-size: 0.8rem;
    font-weight: bold; }
  .transfer-list-item:not(.heading) .transfer-list-item-status {
    width: 4rem;
    margin-right: 1rem;
    height: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    color: white;
    border-radius: 1rem;
    background: #e4212c; }
    .transfer-list-item:not(.heading) .transfer-list-item-status.waiting {
      background: #ea0; }
    .transfer-list-item:not(.heading) .transfer-list-item-status.cancelled {
      background: #009aec; }
    .transfer-list-item:not(.heading) .transfer-list-item-status.done {
      background: #3a0; }
    .transfer-list-item:not(.heading) .transfer-list-item-status.resolved {
      background: #888; }
  .transfer-list-item:not(.heading) .transfer-list-item-action button {
    border: 1px solid #888;
    border-radius: 1rem;
    padding: 0 0.7em;
    font-size: 0.8rem;
    color: #888;
    transition: 0.15s; }
    .transfer-list-item:not(.heading) .transfer-list-item-action button:hover {
      border: 1px solid #e4212c;
      background: #e4212c;
      color: white;
      font-weight: bold; }
  .transfer-list-item:not(.heading) .transfer-list-item-error {
    font-size: 0.85rem;
    line-height: 0.9rem; }

.notification .send-button {
  display: block;
  margin: 1rem auto;
  padding: 0.2em 3em;
  color: white;
  background: #d01;
  border-radius: 1em; }

.notification-form {
  width: 600px;
  max-width: 100%; }

.notification-form-item {
  display: flex;
  flex-direction: column;
  margin: 1rem 1rem; }
  .notification-form-item.wrap {
    flex-wrap: wrap;
    flex-direction: row; }
  .notification-form-item label {
    width: 100%;
    font-size: 0.9rem; }
  .notification-form-item input {
    line-height: 2rem; }
  .notification-form-item textarea {
    border-radius: 0.5rem;
    line-height: 1.5rem;
    resize: vertical;
    font-size: 0.9rem; }
  .notification-form-item select {
    background: none;
    border: 1px solid #bbb;
    border-radius: 4px;
    padding: 7px 4px; }
  .notification-form-item-work {
    display: flex;
    margin-bottom: 0.5rem;
    margin-right: 0.5rem; }
    .notification-form-item-work .work-icon {
      width: 100%;
      max-width: 24rem; }
  .notification-form-item .add-button {
    margin: 1rem;
    font-size: 1.5rem;
    font-weight: bold;
    border: 1px solid #a1a1a1;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 2rem;
    color: #999; }
    .notification-form-item .add-button:hover {
      background: #aaa;
      color: white; }

.notification-preset {
  padding: 1rem;
  flex: 1; }
  @media screen and (max-width: 1000px) {
    .notification-preset {
      min-width: 10rem; } }
  .notification-preset label {
    font-size: 0.9rem; }
  .notification-preset-list {
    margin-bottom: 1rem; }
    .notification-preset-list-item {
      background: none;
      font-size: 0.85rem;
      margin-bottom: 0.25rem;
      padding: 0.5em 1em;
      border: 1px solid #aaa;
      border-radius: 6px;
      color: #333; }
      .notification-preset-list-item:hover {
        background: #ddd; }

.notification-caption {
  margin-left: 1rem; }

.notification-error-item {
  display: flex; }
  .notification-error-item-name {
    width: 10em; }

.modal-progress {
  text-align: center; }
  .modal-progress-text {
    color: white; }
  .modal-progress .progress {
    width: 5rem;
    color: white;
    font-size: 2rem; }
    .modal-progress .progress-bar {
      height: 100%;
      background: rgba(123, 123, 123, 0.7); }

.expense-list {
  padding-left: 1rem; }
  .expense-list-image img {
    width: 5rem;
    height: 4rem;
    object-fit: cover; }
  .expense-list-deadline {
    padding: 0.1em 0.4em;
    border: 1px solid #888;
    color: #555;
    font-size: 0.9em; }

.expense-list-item {
  padding: 0.2rem 0;
  margin: 0 1rem;
  align-items: center;
  border-bottom: 1px solid #ddd;
  line-height: 1.3; }
  .expense-list-item-id {
    width: 2rem; }
  .expense-list-item-work {
    width: 8rem;
    padding-right: 1rem; }
  .expense-list-item-staff {
    display: flex;
    font-size: 0.85rem;
    align-items: center;
    width: 7rem; }
  .expense-list-item-amount {
    width: 5rem; }
  .expense-list-item-sf {
    width: 4rem;
    display: flex;
    justify-content: center; }
  .expense-list-item-sfImage {
    width: 8rem; }

.expense-list-body {
  width: 7rem;
  padding-left: 0.5rem; }

.expense-list-date {
  width: 8rem; }

.expense-list-memo {
  flex: 1;
  padding-right: 1rem;
  color: #888;
  font-size: 0.85em; }

.expense-list-upload {
  width: 4rem; }

.expense-list-button {
  font-size: 0.75rem;
  font-weight: bold;
  padding: 0.3em 0.6em;
  border-radius: 1em;
  transition: 0.1s;
  line-height: 1.2;
  color: #999;
  border: 1px solid #999; }
  .expense-list-button:hover {
    color: white;
    background: #1f86ef;
    border-color: #1f86ef; }
  .expense-list-button.danger {
    color: white;
    background: #c20;
    border-color: #c20; }
    .expense-list-button.danger:hover {
      background: #900;
      border-color: #900; }

.account-side-box {
  width: 20vw; }
  .account-side-box-content {
    border-bottom: 1px solid #aaa;
    margin-bottom: 0.5rem; }
    .account-side-box-content__head {
      font-size: 0.9em;
      color: #808080;
      margin-bottom: 0.5em;
      display: flex; }
    .account-side-box-content__new {
      color: #F41807;
      display: inline-block;
      margin-left: 0.75em; }
    .account-side-box-content__menuWrap {
      flex-grow: 1;
      text-align: right;
      position: relative; }
    .account-side-box-content__menu {
      width: 1em;
      margin-right: 0.5em;
      display: inline-block;
      cursor: pointer; }
      .account-side-box-content__menu img {
        width: 100%; }
      .account-side-box-content__menu:hover {
        opacity: .6; }
    .account-side-box-content__title {
      font-weight: bold;
      margin: 0 0 0.5em;
      font-size: 0.9em; }
    .account-side-box-content__body {
      margin: 0 0 0.5em;
      font-size: 0.9em; }
      .account-side-box-content__body a {
        color: #08c; }
  .account-side-box-footer {
    width: 100%;
    text-align: center; }

.account-menu {
  position: absolute;
  top: 2rem;
  right: 0;
  display: flex;
  flex-direction: column;
  width: 4rem;
  border-radius: 0.3rem;
  overflow: hidden;
  font-size: 0.9rem;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.3);
  background: #fff;
  z-index: 2; }
  .account-menu__button {
    display: block;
    background: #fff;
    cursor: pointer;
    color: #000;
    padding: 0.3rem 0.5rem;
    text-align: left;
    vertical-align: middle; }
    .account-menu__button:hover {
      background-color: #ddd; }

.chatter-edit-box__input-text {
  width: 100%; }
  .chatter-edit-box__input-text + .chatter-edit-box__textarea-wrap {
    margin-top: 0.5rem; }

.chatter-edit-box__textarea-wrap {
  background: #F4F4F4;
  border: 1px solid #bbb;
  border-radius: 4px;
  line-height: 0; }
  .chatter-edit-box__textarea-wrap .chatter-edit-box__textarea {
    width: 100%;
    border-radius: 4px 4px 0 0;
    padding: 0.3rem 0.5rem;
    border-width: 0 0 1px 0;
    line-height: 1.2; }
  .chatter-edit-box__textarea-wrap .chatter-edit-box__input-file {
    display: none; }
  .chatter-edit-box__textarea-wrap .chatter-edit-box__icon-photo {
    width: 1.8rem;
    margin: 0;
    display: block;
    cursor: pointer;
    padding: 0.3rem; }
    .chatter-edit-box__textarea-wrap .chatter-edit-box__icon-photo img {
      line-height: 0;
      width: 100%; }

.chatter-edit-box__error {
  color: #F41807;
  font-size: 0.8rem;
  margin-top: 0.3rem;
  margin-bottom: 0; }

.chatter-edit-box__files {
  display: block;
  padding-left: 0; }

.chatter-edit-box__file {
  display: flex;
  justify-content: space-between;
  margin-right: 0; }

.chatter-edit-box__link-text {
  color: #08c;
  word-break: break-all; }
  .chatter-edit-box__link-text:hover {
    color: #08c;
    text-decoration: underline; }

.chatter-edit-box__link-file {
  color: #08c;
  padding-left: 1rem;
  text-indent: -1rem;
  word-break: break-all; }
  .chatter-edit-box__link-file svg {
    height: 1rem;
    margin-right: 0.2rem;
    vertical-align: -0.1rem; }
    .chatter-edit-box__link-file svg path {
      fill: #08c; }
  .chatter-edit-box__link-file:hover {
    color: #08c;
    text-decoration: underline; }

.chatter-edit-box__text-file {
  color: #333;
  padding-left: 1rem;
  text-indent: -1rem;
  word-break: break-all; }
  .chatter-edit-box__text-file svg {
    height: 1rem;
    margin-right: 0.2rem;
    vertical-align: -0.1rem; }
    .chatter-edit-box__text-file svg path {
      fill: #333; }

.chatter-edit-box__delete-file {
  cursor: pointer;
  width: 1rem;
  min-width: 1rem;
  opacity: 0.2;
  transition-duration: 0.2s; }
  .chatter-edit-box__delete-file img {
    width: 100%; }
  .chatter-edit-box__delete-file:hover {
    opacity: 1; }

.chatter-edit-box__buttonGroup {
  margin: 1rem 0;
  display: flex;
  justify-content: center; }

.chatter-edit-box__button, .chatter-edit-box__button-secondary {
  font-size: 0.8rem;
  display: inline-block;
  border-radius: 1.5rem;
  padding: 0.3rem 1rem;
  margin: 0 0.1rem;
  letter-spacing: 0.1rem;
  cursor: pointer;
  color: #999;
  background: #e4212c;
  border: 1px solid transparent;
  color: #fff;
  white-space: nowrap; }
  .chatter-edit-box__button:hover, .chatter-edit-box__button-secondary:hover {
    background-color: #c02; }
  .chatter-edit-box__button-secondary {
    color: #999999;
    background-color: #fff;
    border: 1px solid #999;
    font-weight: bold; }
    .chatter-edit-box__button-secondary:hover {
      background-color: #999;
      color: #fff; }

.chatter-refresh-btn {
  padding: 0.3rem 1rem;
  transition: background 0.2s, color 0.2s;
  background: #fff;
  color: #999;
  display: inline-block;
  margin: 10px auto;
  border: 1px solid #999;
  border-radius: 1.5rem;
  cursor: pointer; }
  .chatter-refresh-btn:hover {
    opacity: 1;
    background: #999;
    color: #fff; }

[v-cloak] {
  display: none; }

.radio-group {
  display: flex; }
  .radio-group.is-invalid {
    opacity: 0.5; }
  .radio-group label {
    width: fit-content; }
  .radio-group input {
    flex: 1; }

span.deleted {
  text-decoration: line-through;
  opacity: 0.8; }

*[disabled] {
  cursor: unset;
  pointer-events: none; }

.content {
  display: flex;
  position: absolute;
  width: 100%;
  min-height: 100%;
  left: 0; }
  .content.singlePage {
    height: 100%; }

.content-title {
  min-height: max-content;
  font-size: 22px;
  line-height: 74px;
  border-bottom: 1px solid #aaa;
  margin-top: 0;
  margin-bottom: 16px;
  padding-left: 18px;
  font-weight: normal; }
  .content-title-inner {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.4; }
    .content-title-inner.with-link {
      max-width: calc(100% - 280px); }
  .content-title a:not(.content-title-link):not(.region-select-item):not(.content-title-link-flex) {
    color: #08c; }
  .content-title a:not(.content-title-link):not(.region-select-item):not(.content-title-link-flex):hover {
    text-decoration: underline;
    text-decoration-thickness: 1px; }

.content-title-link {
  display: inline-block;
  border-radius: 4px;
  background-color: #e4212c;
  color: white;
  font-size: 13px;
  font-weight: bold;
  line-height: 25px;
  vertical-align: text-top;
  text-align: center;
  width: 120px;
  margin-left: 100px;
  vertical-align: middle; }
  .content-title-link:hover {
    color: white;
    background-color: #c02; }
  .content-title-link.secondary {
    background-color: #777; }
    .content-title-link.secondary:hover {
      background-color: #555; }
  .content-title-link-flex {
    display: inline-block;
    border: 1px solid #e4212c;
    border-radius: 4px;
    background-color: #e4212c;
    color: white;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    padding: 0.2rem 0.8rem;
    line-height: 1rem; }
    .content-title-link-flex + .content-title-link-flex {
      margin-left: 1rem; }
    .content-title-link-flex:hover {
      color: white;
      background-color: #c02; }
    .content-title-link-flex.secondary {
      color: #e4212c;
      background-color: #fff;
      border: 1px solid #e4212c; }
      .content-title-link-flex.secondary:hover {
        color: #c02;
        border-color: #c02; }
  .content-title-link-separator {
    overflow: hidden;
    width: 0;
    padding-left: 1px;
    display: inline-block;
    background: #999;
    width: 1px;
    margin: 0 1rem;
    height: 1.2rem; }

.content-body {
  flex: 1; }

.empty-state {
  color: #666;
  margin: 12px 0; }

.link {
  text-decoration: underline; }

.link-text {
  color: #08c; }
  .link-text:hover {
    text-decoration: underline;
    color: #08c; }

.bold {
  font-weight: bold; }

/*
リスト
*/
.list {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  border-top: 1px solid #ccc; }

.list-item {
  display: flex;
  font-size: 17px;
  padding: 10px 0;
  padding-left: 12px;
  border-bottom: 1px solid #ccc; }

.list-item.deleted {
  opacity: 0.4; }

.list-item.heading {
  font-size: 13px;
  font-weight: bold;
  color: #222;
  background-color: #e2dbd5;
  padding: 8px 0;
  padding-left: 12px; }

/*
地域選択
*/
.region-select {
  margin: 1rem; }

.region-select-item,
.jobtype-select-item {
  display: inline-block;
  white-space: nowrap;
  margin: 3px 1px;
  margin-right: calc(1px - 0.2em);
  padding: 2px 8px;
  font-size: 12px;
  color: #89b;
  background-color: white;
  border: 1px solid #89b;
  border-radius: 12px;
  cursor: pointer;
  line-height: 1rem; }
  .region-select-item:hover,
  .jobtype-select-item:hover {
    color: #1f86ef;
    border-color: #1f86ef; }
  .region-select-item.selected,
  .jobtype-select-item.selected {
    font-weight: bold;
    color: white;
    background-color: #1f86ef;
    border-color: #1f86ef;
    pointer-events: none; }

.flash-success {
  color: #3c763d;
  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
  background-image: -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc));
  background-image: linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
  background-repeat: repeat-x;
  border-color: #b2dba1;
  text-align: center;
  margin: 1em 0; }

.pagination-lists {
  list-style-type: none;
  padding: 0;
  text-align: center; }

.pagination-list {
  display: inline-block;
  margin: .4em .2em; }
  .pagination-list a, .pagination-list span {
    display: inline-block;
    width: 2em;
    min-width: fit-content;
    height: 2em;
    line-height: 2em;
    transition: all .3s ease;
    border: 1px solid #333;
    cursor: pointer; }
    .pagination-list a:hover, .pagination-list span:hover {
      opacity: .6; }
    .pagination-list a.active, .pagination-list span.active {
      color: #fff;
      background: #333; }

.pagination-dots {
  display: inline-block;
  vertical-align: middle; }
  .pagination-dots span {
    display: inline-block;
    height: 2em;
    vertical-align: middle; }

.filter {
  margin: 1rem 0;
  padding: 0 0.5rem;
  align-items: center; }
  .filter-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center; }
  .filter-content {
    border-bottom: 1px solid #ccc; }
  .filter-items {
    padding: 1em 0; }
    .filter-items > div {
      height: 100%;
      background: #f5f5f5;
      padding: 1em;
      margin-right: 1em; }
      .filter-items > div label + label {
        margin-left: 1em; }
  .filter-item {
    margin-bottom: 1em; }
    .filter-item-datepicker input {
      width: 300px;
      background: #fff; }
    .filter-item .filter-head {
      display: block;
      font-weight: normal;
      margin: 0 0 1em;
      padding-left: .6em;
      border-left: 4px solid #ccc; }
    .filter-item select {
      background: none;
      border: 1px solid #bbb;
      border-radius: 4px;
      padding: 2px 8px; }
    .filter-item input, .filter-item select {
      background: #fff; }
  .filter-search {
    text-align: center;
    margin: 0 0 1em; }
    .filter-search a {
      display: inline-block;
      color: #fff !important;
      border: none !important;
      background: #e4212c;
      border-radius: 1.25rem;
      padding: .5rem 1rem;
      margin: 0 1rem; }
  .filter button {
    height: 2.5rem;
    border-radius: 1.25rem;
    padding: 0 1rem;
    margin: 0 1rem;
    color: #999;
    border: 1px solid #999; }
  .filter .filter-button.active {
    color: #fff;
    background: #999; }
  .filter .shift-badge {
    border-left: 1px solid #999;
    padding-left: .4em;
    color: #e4212c; }

.time-list {
  display: flex;
  flex-direction: column;
  position: absolute;
  background: white;
  width: 6rem;
  border: 1px solid #ccc;
  height: 10rem;
  overflow-y: scroll;
  z-index: 1;
  top: 1.8rem;
  right: 0;
  user-select: none; }
  .time-list-item {
    cursor: pointer;
    user-select: none;
    width: 100%;
    padding-left: 1rem; }
    .time-list-item:hover {
      background: #ccc; }

.loader-box {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  display: none; }

.loader {
  margin: 100px auto;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateY(-50%) translateZ(0);
  -ms-transform: translateY(-50%) translateZ(0);
  transform: translateY(-50%) translateZ(0);
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto; }

@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7); }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5); }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff; } }

@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7); }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5); }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2); }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff; } }