.btn-group-area {
  display: flex;
  /* margin-left: 2.5em; */
  align-items: flex-end;
}
.btn-group-area .label {
  margin: 0 4px;
}

.btn-group-area .input {
  padding-left: 8px;
}

.btn-group-area .year {
  --kuc-text-input-width: calc(4em + 16px);
  --kuc-text-input-height: 48px;
}
.btn-group-area .year input {
  text-align: center;
}

.btn-group-area .month,
.btn-group-area .date,
.btn-group-area .term {
  --kuc-combobox-toggle-width: calc(2em + 16px);
  --kuc-combobox-toggle-height: 48px;
}

.btn-group-area .term {
  --kuc-combobox-toggle-width: calc(3em + 16px);
}

.btn-group-area .month input[class^='kuc-combobox'],
.btn-group-area .date input[class^='kuc-combobox'],
.btn-group-area .term input[class^='kuc-combobox'] {
  text-align: center;
  padding-right: 8px;
}
.btn-group-area .month input + div[class$="icon"],
.btn-group-area .date input + div[class$="icon"],
.btn-group-area .term input + div[class$="icon"] {
  display: none;
}

.action-btn {
  margin: 0 8px;
}

.customized-record-header-space {
  padding-top: 16px;
  padding-left: 8px;
}
.customized-record-header-space > .btn-group-area {
  padding: 0;
  margin: 0;
}
.kintone-app-headermenu-space {
  height: auto;
  display: inline-flex;
}

#user-js-header-clocking-btn-area {
  margin: 4px 0;
  text-align: center;
}

#user-js-header-clocking-btn-area > .action-btn {
  --kuc-button-width: 6em
}

#user-js-header-clocking-btn-area > .action-btn:first-child {
  margin-right: 1em;
}

#user-js-clock-in-btn-area > .action-btn,
#user-js-clock-out-btn-area > .action-btn {
  --kuc-mobile-button-height: 35px;
  margin: .5em 12px;
}

.kuc--has-spinner {
  position: relative;
}
div[class^='kuc-spinner'][class$='__spinner'] {
  margin-top: 89px;
  height: calc(100% - 89px);
  position: absolute;
  --kuc-spinner-text-color: #3498db;
  --kuc-spinner-loader-color: #3498db;
}
div[class^='kuc-spinner'][class$='mask'] {
  top: 89px;
  position: absolute;
  background-color: white;
}