@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
  font-size: 16px;
}

* {
  font-family: 'Kosugi Maru', sans-serif;
  color: #333;
  outline: none;
}

/* reset */
h1, h2, h3, h4, p, dl, dd, dt, ul, li {
  padding: 0px;
  margin: 0px;
}

ul {
  list-style: none;
}

select {
  padding: 5px 0px;
}

input[type=text], select, textarea {
  border: 1px solid #666;
  border-radius: 3px;
  resize: none;
}

input[type=tel] {
  text-align: center;
}

input[type=text]:disabled {
  background-color: #eee !important;
  color: #000;
}

/* header/content/footer layout */
header {
  height: 68px;
}

main {
  min-height: calc(100% - 1.15rem);
}

footer {
  height: 1.1rem;
}

/* blazor error */
#blazor-error-ui {
  background: #ff8a8ac2;
  bottom: 0.5rem;
  left: 0.5rem;
  width: calc(100% - 1rem);
  padding: 0.5rem;
  position: absolute;
  display: none;
  z-index: 300;
  border-radius: 3px;
}

  #blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
  }

/* common */
app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: hidden;
}

main {
  flex: 1;
}

.clsFlex {
  display: flex;
}

.clsVFlex {
  display: flex;
  flex-direction: column;
}

.clsFlexCenter {
  justify-content: center;
}

.clsFlexWrap {
  flex-wrap: wrap;
}

.clsFlexStart {
  align-items: flex-start;
}

.clsFlexContentStart {
  align-content: flex-start;
}

.clsTMargin {
  margin-top: 0.5rem;
}

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

.clsTSticky {
  z-index: 200;
  position: sticky;
  top: 0;
  white-space: nowrap;
}

.clsLSticky {
  z-index: 150;
  position: sticky;
}

.clsTSticky .clsLSticky {
  z-index: 210;
}

.clsMobileRadio * {
  border: 1px solid #666;
}

  .clsMobileRadio * + * {
    border-left: none;
  }

  .clsMobileRadio *:first-child {
    border-radius: 5px 0px 0px 5px / 5px 0px 0px 5px;
  }

  .clsMobileRadio *:last-child {
    border-radius: 0px 5px 5px 0px / 0px 5px 5px 0px;
  }

.clsMobileRadio .clsActive {
  background-color: #1c50a1 !important;
}

input:after {
  color: #999;
  content: attr(placeholder) !important;
}

input[value]:not([value=""]) + input:after {
  content: '' !important;
}

::placeholder {
  color: #999;
}

.clsDefaultToggle.active {
  color: #fff !important;
  background-color: #373a50 !important;
}

.clsDefaultCursor {
  cursor: default !important;
}

.clsLoading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  line-height: 100px;
  font-size: 56px;
  color: #fff;
  text-align: center;
  background-color: #000;
  opacity: .5;
  border-radius: 1rem
}

.fa-pulse {
  animation: 1s linear infinite rotationRight;
  color: #eee;
}

/* header */
main > header {
  text-align: center;
  background-image: url("/images/logo.gif"), url("/images/sappo.png");
  background-position-x: 1px, 150px;
  background-position-y: 13px, 2px;
  background-size: 154px, 44px;
  background-repeat: no-repeat, no-repeat;
  background-color: #bae5ff;
  box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

  main > header > div > span {
    line-height: 28px;
    font-weight: 700;
    margin-left: auto;
  }

.clsTodayInfo input {
  width: 9rem;
  text-align: center !important;
  display: flex;
  justify-content: center;
  border: 1px solid #999;
  margin: 0px 5px;
  height: 1.8rem;
}

.clsBulkInputSelect .clsMobileRadio a,
.clsTodayInfo .clsMobileRadio a {
  min-width: 2rem;
  background-color: #fff;
  height: 1.79rem;
  padding: 0px 10px;
  cursor: pointer;
  text-decoration: none;
  color: #000;
}

.clsBulkInputSelect .clsMobileRadio a {
  height: 1.57rem;
  padding: 0px 5px;
}

/* page parts */
.clsUserListContainer {
  height: calc(100% - 60px - 0.8rem - 0.8rem - 22px);
  overflow: auto;
  padding-bottom: 5rem; /* 同期ボタン用余白 */
}

.clsProgramDate {
  height: 1.5rem;
}

  .clsProgramDate input, .clsProgramDate span > span {
    user-select: none;
    padding: 0px 5px;
    height: 1.6rem;
    text-align: center;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  }

  .clsProgramDate input {
    border: none;
    background-color: #1c50a1;
    width: 6.5rem;
    margin-right: 0.5rem;
    color: #fff;
  }

    .clsProgramDate input:focus {
      outline: none;
    }

.clsUserListLayout.clsRow {
  min-height: 9rem;
  position: relative;
}

.clsUserInformation {
  left: 0rem;
}

/* 運動メニュー */
.clsUserListLayout.clsMotionMenu {
  width: 127rem;
}

/* 実施記録 */
.clsUserListLayout.clsImplementationRecord {
  width: 128rem;
}

/* 個別１/２ */
.clsUserListLayout.clsNursingIndividual1, .clsUserListLayout.clsNursingIndividual2 {
  width: 109rem;
}

/* 運動器 */
.clsUserListLayout.clsNursingExerciseMachine {
  width: 74rem;
}

/* 口腔 */
.clsUserListLayout.clsNursingOralCavity {
  width: 79rem;
}

/* 一括設定モーダル *****/
.clsBulkModal .modal-footer > div {
  width: 100%;
  display: flex;
}

  .clsBulkModal .modal-footer > div > div {
    display: flex;
    align-items: center;
  }

.clsBulkModal .modal-footer select {
  margin-right: auto;
}

.clsBulkModal .modal-footer span {
  margin-left: auto;
}

.clsBulkSettingContainer > div {
  width: 100%;
}

.clsBulkModal textarea {
  height: 3rem !important;
}

.clsBulkModal .clsNursingOralCavityNotices textarea,
.clsBulkModal .clsExerciseMachineNotices textarea,
.clsBulkModal .clsIndividual1Notices textarea,
.clsBulkModal .clsImplementationNotices textarea {
  height: 8rem !important;
}

.clsBulkModal .clsUserListContainer {
  height: auto !important;
}

.clsBulkModal .clsJissiSya, .clsBulkModal .clsKirokuSya {
  margin-right: 5px;
}

/* 個別１/２ */
.clsBulkSettingContainer.clsUserListLayout.clsNursingIndividual1,
.clsBulkSettingContainer.clsUserListLayout.clsNursingIndividual2 {
  width: 100%;
}

/* 運動器 */
.clsBulkSettingContainer.clsUserListLayout.clsNursingExerciseMachine {
  width: 100%;
  align-items: flex-start;
}

/* 口腔 */
.clsBulkSettingContainer.clsUserListLayout.clsNursingOralCavity {
  width: 100%;
}

/* 実施記録 */
.clsBulkSettingContainer.clsUserListLayout.clsImplementationRecord {
  width: 100% !important;
}

  .clsBulkSettingContainer.clsUserListLayout.clsNursingIndividual1 ul,
  .clsBulkSettingContainer.clsUserListLayout.clsNursingIndividual2 ul,
  .clsBulkSettingContainer.clsUserListLayout.clsNursingOralCavity ul,
  .clsBulkSettingContainer.clsUserListLayout.clsNursingExerciseMachine ul,
  .clsBulkSettingContainer.clsUserListLayout.clsImplementationRecord ul,
  .clsBulkSettingContainer .clsPractitioner select {
    width: 100%;
    align-items: flex-start;
  }

.clsBulkSettingContainer.clsUserListLayout > div > div {
  align-items: flex-start;
}

.clsBulkSettingContainer .clsPractitioner select {
  margin-top: 3px;
}

.clsBulkSettingContainer.clsUserListContainer {
  padding-bottom: 0px !important;
}

.clsBulkSettingContainer .clsTSticky li {
  display: flex !important;
  width: 100%;
  justify-content: center !important;
  align-items: center;
}

.clsBulkModal .modal-content {
  height: 350px !important;
}

.clsBulkExecute {
  border: 1px solid #1c50a1;
  border-radius: 3px;
  padding: 0px 10px;
  background-color: #1c50a1 !important;
  color: #fff;
  cursor: pointer;
}

.modal-footer {
  background-color: #eee;
}

/* 利用者情報 */
.clsUserInformation {
  width: 25rem;
}

/* 利用者15rem　その他102rem */

/* 基本 */
.clsBase {
  width: 12rem;
}

/* マシン */
.clsOralCavity {
  width: 5rem;
}

/* 口腔 */
.clsMaschine {
  width: 5rem;
}

/* 加算 */
.clsAddition {
  width: 15rem;
}

/* 平行棒 */
.clsParallelBar {
  width: 5rem;
}

/* ウ */
.clsWalking {
  width: 5rem;
}

/* バ */
.clsVital {
  width: 5rem;
}

/* 個別 */
.clsPersonal {
  width: 50rem;
}

/* 体調 */
.clsListPhysicalCondition {
  width: 10rem;
}

/* 体温 */
.clsListBodyTemperature {
  width: 7rem;
}

/* 血圧 */
.clsListBloodPressure {
  width: 21rem;
}

/* 実施プログラム */
.clsListProgram {
  width: 10rem;
}

/* 他者交流 */
.clsListExchangeWithOthers {
  width: 15rem;
}

/*  */
.clsNumberDropDown {
  direction: rtl;
}

.clsDropDownNonSelect {
  background-color: white;
}

.clsDropDownSelectNormal {
  background-color: white;
}

.clsDropDownSelectAbNormal {
  background-color: lightpink;
  color: red;
}

.clsCaution {
  background-color: lightpink !important;
}

/* 個別１/２ */
/* 実施時間 */
.clsIndividual1Time, .clsIndividual2Time {
  width: 14rem;
}

/* 評価 疲労 */
.clsIndividual1Evaluation1, .clsIndividual2Evaluation1 {
  width: 15rem;
}

/* 評価 痛み */
.clsIndividual1Evaluation2, .clsIndividual2Evaluation2 {
  width: 15rem;
}

/* 特記事項 */
.clsNursingOralCavityNotices, .clsIndividual1Notices, .clsIndividual2Notices, .clsExerciseMachineNotices, .clsImplementationNotices {
  width: 25rem;
}

/* 運動器 */
/* 実施状況 */
.clsExerciseMachineImplementationStatus {
  width: 14rem;
}

/* 疲労 */
.clsExerciseMachineFatigue {
  width: 10rem;
}

/* 痛み */
.clsExerciseMachinePain {
  width: 10rem;
}

/* 口腔 */
.clsNursingOralCavityTime {
  width: 14rem;
}

/* 実施者/記録者 */
.clsPractitioner {
  width: 15rem;
}

  .clsPractitioner select {
    width: 15rem;
  }

/* 罫線(ヘッダー) */
.clsUserListContainer .clsTSticky li {
  border: 1px solid #666;
  background-color: #bae5ff;
  text-align: center;
}

  .clsUserListContainer .clsTSticky ul:nth-of-type(2) li:nth-of-type(1),
  .clsUserListContainer .clsTSticky li + li {
    border-left: none;
  }

/* 絞り込みグループヘッダー */
.clsHGroup {
  margin-top: -1px;
}

  .clsHGroup.clsFilterReset.clsFlex li {
    width: 1.8rem;
  }

  .clsHGroup.clsGroup1.clsFlex li {
    width: 1.8rem;
  }

  .clsBulkStartButton,
  .clsHGroup.clsGroup2.clsFlex li {
    width: 2.5rem !important;
  }

  .clsBulkStartButton,
  .clsHGroup.clsFlex li span {
    min-height: 1rem !important;
    height: 1.5rem !important;
  }

.clsBulkInputSelect {
  margin-top: 5px;
  margin-right: 3px;
  margin-left: auto;
}

/* Rowボタン */
.clsBulkStartButton,
.clsSetOrder,
.clsSetGroup,
.clsHGroup span,
.clsHGroup label,
.clsUserListContainer :not(.clsTSticky) ul:not(.clsUserInformation) span {
  width: calc(100% - 4px);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 2rem;
  font-size: 0.8rem;
  margin: 2px;
  background-color: #edf8ff;
  height: calc(100% - 4px);
  border: 1px solid #666;
  border-radius: 3px;
  padding: 0px 3px;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: all .5s;
  user-select: none;
}

.clsRegistered {
  background-color: #e00 !important;
  color: #fff;
}

.clsButtonLayout {
  border: 1px solid #666;
  border-radius: 3px;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: all .5s;
  user-select: none;
  text-align: center;
  margin: 3px;
  background-color: #edf8ff;
}

  .clsButtonLayout.clsNonToggle {
    border-radius: 0px !important;
    border: none;
    border-bottom: none;
    box-shadow: none;
    text-align: left;
    background-color: #fff;
  }

.clsNonToggle input, .clsImplementation textarea, .clsImplementation h5 input, textarea {
  background-color: #fff98c75;
  border: none;
  border-radius: 0px !important;
  border-bottom: 1px solid #666;
  padding: 1px !important;
}

.clsNonToggle input {
  width: 100%;
  font-size: 0.8rem;
}

  .clsNonToggle input.timepicker {
    width: 4rem;
    text-align: center;
    display: inline-block;
  }

  .clsNonToggle input.clsTimeEdit {
    width: 4rem;
    text-align: center;
    display: inline-block;
    max-height: 2rem;
  }

.clsNoSetGroup,
.clsActive {
  transition: all .5s;
  background-color: #373a50 !important;
  color: #fff !important;
}

.clsRow .clsNursingOralCavityTime {
  align-items: baseline;
}

  .clsRow .clsNursingOralCavityTime li {
    justify-content: center;
  }

/* セル内ボタン幅 */
.clsRow .clsBase li {
  flex-basis: 33.3333%;
}

.clsRow .clsOralCavity li, .clsMaschine li, .clsAddition li, .clsParallelBar li, .clsWalking li, .clsVital li {
  flex-basis: 100%;
}

.clsRow .clsPersonal li {
  flex-basis: 14.2857% !important;
}

.clsRow .clsListPhysicalCondition li, .clsRow .clsListProgram li, .clsRow .clsListExchangeWithOthers li {
  flex-basis: 100%;
}

.clsRow .clsListPhysicalCondition div, .clsRow .clsListProgram div, .clsRow .clsListExchangeWithOthers div {
  flex-basis: 100%;
}

.clsRow .clsIndividual1Time div, .clsRow .clsIndividual1Evaluation1 div, .clsRow .clsIndividual1Evaluation2 div {
  flex-basis: 100%;
}

.clsRow .clsIndividual2Time div, .clsRow .clsIndividual2Evaluation1 div, .clsRow .clsIndividual2Evaluation2 div {
  flex-basis: 100%;
}

.clsRow .clsExerciseMachineImplementationStatus div, .clsRow .clsExerciseMachineFatigue div, .clsRow .clsExerciseMachinePain div {
  flex-basis: 100%;
}

.clsRow .clsNursingOralCavityTime div {
  flex-basis: 100%;
}

.clsRow .clsNursingIndividual1 li, .clsRow .clsNursingIndividual2 li, .clsRow .clsExerciseMachine li, .clsRow .clsNursingOralCavity li, .clsRow .clsNursingExerciseMachine li, .clsRow .clsImplementationRecord li {
  flex-basis: 100%;
}

.clsRow .clsListBodyTemperature,
.clsRow .clsListBloodPressure {
  justify-content: center;
  padding-top: .5rem;
}

  .clsRow .clsListBloodPressure li:not(:nth-of-type(1)) {
    margin-top: 10px;
  }

  .clsRow .clsListBloodPressure li input {
    font-size: 1.1rem;
    width: 2.8rem;
  }

  .clsRow .clsListBodyTemperature li input {
    font-size: 1.1rem;
    width: 80%;
  }

  .clsRow .clsListBloodPressure .clsNonToggle input.timepicker {
    width: 3.5rem;
  }

  .clsRow .clsListBloodPressure .clsNonToggle input.clsTimeEdit {
    width: 5.5rem;
    max-height: 2rem;
  }

.clsTimeEditBulkInput input.clsTimeEdit {
  width: 5.5rem;
  font-size:1.1rem;
}

.clsTimeEditModalInput input.clsTimeEdit {
  width: 5.5rem;
  font-size: 1rem;
}

.clsTimeEditGridInput input.clsTimeEdit {
  width: 4.8rem;
  font-size: 1rem;
}

.clsRow textarea {
  width: 100%;
  font-size: 0.8rem;
}

.clsRow .clsButtonLayout {
  display: flex;
  justify-content: stretch;
}

.clsRow .clsIndividual1Time .clsNonToggle, .clsRow .clsIndividual2Time .clsNonToggle, .clsRow .clsNursingOralCavityTime .clsNonToggle/*, .clsRow .clsNursingLocomotoriumTime .clsNonToggle*/ {
  justify-content: center;
  margin-top: .3rem;
  margin-bottom: .3rem;
}

/* Row間隔 */
.clsUserListContainer .clsRow {
  border-bottom: 1px dashed #666;
  padding: 0.5rem 0rem;
}

.clsLSticky {
  background-color: #fff;
}

/* 利用者情報 */
.clsUserInformation {
  vertical-align: bottom;
  padding: 0px 5px;
}

  .clsUserInformation span {
    font-size: 0.78rem;
    line-height: 1rem;
    margin-top: auto;
    display: block;
    margin-left: auto;
  }

    .clsUserInformation span.clsUserName {
      margin-left: 0px;
      display: flex;
      align-items: flex-end;
    }

      .clsUserInformation span.clsUserName ruby {
        margin-right: 5px;
      }

.clsUserName, .clsUserName rb {
  font-size: 1.2rem !important;
}

  .clsUserName, .clsUserName rb, .clsUserName rt {
    font-weight: 700;
    cursor: pointer;
    color: #454afd;
  }

.clsUserInformation li:nth-of-type(1) span:nth-of-type(1), rb, rt {
  white-space: nowrap;
}

.clsUserInformation li:nth-of-type(1) span:nth-of-type(2) {
  margin-top: auto;
  margin-left: 0px;
  margin-right: 3px;
}

.clsSetGroup, .clsNoSetGroup {
  width: 33px !important;
  min-height: 1.7rem !important;
  height: 1.7rem !important;
  background-position: 6px 3px !important;
  border-radius: 3px;
  margin: 5px 8px 0 0 !important;
}

.clsSetGroup {
  background-color: #1c50a1;
  box-shadow: none !important;
  color: #fff;
  font-weight: 700;
  font-size: 20px !important;
  text-align: center;
  line-height: 27px !important;
}

/* footer */
footer {
  background-color: #E8E8E8;
  text-align: center;
  font-size: 0.8rem;
  box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
}

/* flatpickr */
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays .flatpickr-weekday:nth-child(7n + 1),
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n + 1) {
  color: red;
}

.flatpickr-calendar .flatpickr-innerContainer .flatpickr-weekdays .flatpickr-weekday:nth-child(7),
.flatpickr-calendar .flatpickr-innerContainer .flatpickr-days .flatpickr-day:not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay):nth-child(7n) {
  color: blue;
}

.flatpickr-calendar {
  box-shadow: 0px 5px 15px rgba(0,0,0,0.5) !important
}

  .flatpickr-calendar .numInputWrapper {
    width: 4.5rem;
  }

/* Modal */
.kn-modal-dialog .modal-header {
  background-color: #bae5ff;
  padding: .5rem;
  overflow: inherit;
  display: block;
}

  .modal-header .close {
    padding: 1rem;
    outline: none;
    float: right;
  }

  .modal-header h5 {
    font-size: 1rem;
    font-weight: 700;
    width: 80%;
    float: left;
  }

.kn-modal-dialog .modal-open {
  padding: 0px !important;
}

.kn-modal-dialog .modal-dialog {
  width: 95%;
  max-width: 95%;
  height: calc(100% - 1.75rem - 1.75rem);
}

.kn-modal-dialog .modal-content {
  height: 100%;
}

.kn-modal-dialog .modal-body {
  overflow-y: auto;
}

.clsSetOrder {
  width: 6rem !important;
}

/* 確認用Modal*/
.confirm-modal {
}

.confirm-modal .modal-content {
  height: auto;
}

/* 実施記録 */
.cls1cFlex * {
  flex-basis: 100%;
}

.cls2cFlex * {
  flex-basis: 49%;
}

.cls3cFlex * {
  flex-basis: 32%;
}

.cls4cFlex * {
  flex-basis: 24%;
}

.clsImplementation h5 {
  font-size: 1rem;
  font-weight: 700;
  margin: 1rem 0rem .2rem 0rem;
}

  .clsImplementation h5 .oi {
    font-size: .85rem;
    margin-right: .3rem;
    color: #1c50a1;
    line-height: 1.3rem;
  }

  .clsImplementation h5 input {
    width: 5rem;
    margin-left: 3px;
  }

  .clsImplementation h5 > span:nth-of-type(2) {
    display: inline-block;
    text-align: right;
    width: auto;
  }

.clsImplementation dl {
  display: flex;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
}

.clsImplementation dt {
  width: 10rem;
  border-right: 1px solid #000;
  background-color: #edf8ff;
}

.clsImplementation .clsInquiry dt, .clsImplementation .clsInquiry .clsButtonLayout {
  background-color: #eee;
}

.clsDisable {
  background-color: #eee !important;
}

.clsImplementation dd {
  flex: 1;
}

  .clsImplementation dd .calendar {
    text-align: center;
    display: block;
  }

.clsImplementation section dl:nth-of-type(1) {
  border-top: 1px solid #000;
}

.clsImplementation dt, .clsImplementation dd {
  border-bottom: 1px dashed #000;
  padding: .5rem;
}

.clsImplementation section dl:nth-last-of-type(1) dt,
.clsImplementation section dl:nth-last-of-type(1) dd {
  border-bottom: 1px solid #000;
}

.clsImplementation * p,
.clsImplementation * textarea {
  flex-basis: 100%;
  margin: 3px;
}

.clsImplementation textarea {
  width: 100%;
  min-height: 5rem;
}

.clsBloodPressure input {
  width: 1.5rem;
}

.clsBodyTemperature input {
  width: 100px;
}

@media (max-width: 767.98px) {
}

@media (min-width: 768px) {
}

.clsNoSetGroup,
.clsHGroup span.clsNonFilter {
  background-size: 21px;
  background-position: center;
  background-repeat: no-repeat;
}

.clsNoSetGroup {
  background-image: url('../images/filter_on.png');
}

.clsHGroup span.clsNonFilter {
  background-image: url('../images/filter_off.png');
}

  .clsHGroup span.clsNonFilter.active {
    background-color: #373a50 !important;
    background-image: url('../images/filter_on.png');
  }

.clsHGroup span.clsNonSetGroup {
  background-size: 21px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../images/filter_off.png');
}

  .clsHGroup span.clsNonSetGroup.active {
    background-color: #373a50 !important;
    background-image: url('../images/filter_on.png') !important;
  }

.clsHGroup span.clsFilterReset {
  background-size: 21px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #ede941 !important;
}

.clsHGroup span.clsGroup1 {
  background-size: 21px;
  background-position: center;
  background-repeat: no-repeat;
}

.clsHGroup span.clsGroup1.active {
  color: #fff !important;
  background-color: #373a50 !important;
}

.clsHGroup span.clsGroup2 {
  background-size: 21px;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #e8ffe2;
}

  .clsHGroup span.clsGroup2.active {
    color: #fff !important;
    background-color: #6aa05b !important;
  }

.kn-group-selector .btn {
  border-radius: .25rem !important;
}

.kn-group-selector .btn-secondary {
  min-height: 1rem !important;
  height: 1.5rem !important;
  width: 3rem !important;
  max-width: 3rem !important;
  margin: .2rem !important;
  background-size: 21px;
  background-position: center;
  background-repeat: no-repeat;
  color: #000;
  background-color: #edf8ff;
}
  .kn-group-selector .btn-secondary:not(:disabled):not(.disabled).active {
    color: #fff !important;
    background-color: #373a50 !important;
  }

.kn-item-selector .btn {
  border-radius: .25rem !important;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  font-size: 0.8rem;
}

.kn-item-selector .btn-secondary {
  margin: .2rem !important;
  background-size: 21px;
  background-position: center;
  background-repeat: no-repeat;
  color: #000;
  background-color: #edf8ff;
}

  .kn-item-selector .btn-secondary:not(:disabled):not(.disabled).active {
    color: #fff !important;
    background-color: #373a50 !important;
  }
.clsRadioGroupnoClass label:nth-of-type(1) {
  background-image: url('../images/filter_off.png');
}

  .clsRadioGroupnoClass label:nth-of-type(1).active {
    background-image: url('../images/filter_on.png') !important;
  }

.clsControlContainer {
  display: flex;
  margin-top: auto;
  justify-content: flex-end;
  position: absolute;
  bottom: 0px;
  right: 5px;
}

.clsProcedure::after,
.clsClassification::after,
.clsCareCategory::after,
.clsAbsenteeismBlindfold::after,
.clsInputTriggerIcon::after,
.clsAbsenteeism::after {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.clsClassification, .clsProcedure, .clsCareCategory {
  margin-left: 2px !important;
}

.clsClassificationLow::after {
  content: "軽";
  color: #296bff;
  border: 3px solid #296bff;
}

.clsClassificationHigh::after {
  content: "重";
  color: #fd2f00;
  border: 3px solid #fd2f00;
}

.clsProcedure::after {
  content: "手";
  color: #44a900;
  border: 3px solid #44a900;
}

.clsCareCategoryCare::after {
  content: "介";
  color: #ff8b3f;
  border: 3px solid #ff8b3f;
}

.clsCareCategorySupport::after {
  content: "支";
  color: #6aa05b;
  border: 3px solid #6aa05b;
}

.clsClassification::after,
.clsProcedure::after,
.clsCareCategory::after {
  background-color: #fff;
  border-radius: 20px;
  font-size: 1.2rem;
  width: 1.8rem;
  height: 1.8rem;
  margin-left: 0px;
}

.clsInputTriggerIcon::after,
.clsAbsenteeism::after {
  background-color: #fff;
  border-radius: 20px;
  font-size: 1.2rem;
  min-width: 1.8rem;
  min-height: 1.8rem;
  margin-left: 5px;
}

.clsAbsenteeism::after {
  content: "欠";
  border-radius: 5px;
  color: #666;
  border: 3px solid #666;
  opacity: 0.5;
  cursor: pointer;
}

.clsAbsenteeism.active::after {
  color: #fff;
  background-color: #f00;
  border-color: #f00;
  opacity: 1;
}


.clsMi::after {
  content: "未";
  color: #fff;
  border-radius: 5px;
  background-color: #f00;
  border: 3px solid #f00;
}

.clsControlContainer .clsItai, .clsControlContainer .clsHirou {
  display: none;
}

  .clsControlContainer .clsItai::after {
    content: "痛";
    color: #fff;
    border-radius: 5px;
    background-color: #ff00eb;
    border: 3px solid #ff00eb;
  }

  .clsControlContainer .clsHirou::after {
    content: "疲";
    color: #fff;
    border-radius: 5px;
    background-color: #ff8b3f;
    border: 3px solid #ff8b3f;
  }

.clsControlContainer .clsIndiv1Itai::after {
  content: "個Ⅰ痛";
  color: #fff;
  font-size: 1.0rem;
  border-radius: 5px;
  background-color: #ff00eb;
  border: 3px solid #ff00eb;
}

.clsControlContainer .clsIndiv1Hirou::after {
  content: "個Ⅰ疲";
  color: #fff;
  font-size: 1.0rem;
  border-radius: 5px;
  background-color: #ff8b3f;
  border: 3px solid #ff8b3f;
}

.clsControlContainer .clsIndiv2Itai::after {
  content: "個Ⅱ痛";
  color: #fff;
  font-size: 1.0rem;
  border-radius: 5px;
  background-color: #ff00eb;
  border: 3px solid #ff00eb;
}

.clsControlContainer .clsIndiv2Hirou::after {
  content: "個Ⅱ疲";
  color: #fff;
  font-size: 1.0rem;
  border-radius: 5px;
  background-color: #ff8b3f;
  border: 3px solid #ff8b3f;
}

.clsControlContainer .clsLocomoItai::after {
  content: "運痛";
  color: #fff;
  font-size: 1.0rem;
  border-radius: 5px;
  background-color: #ff00eb;
  border: 3px solid #ff00eb;
}

.clsControlContainer .clsLocomoHirou::after {
  content: "運疲";
  color: #fff;
  font-size: 1.0rem;
  border-radius: 5px;
  background-color: #ff8b3f;
  border: 3px solid #ff8b3f;
}

.clsRegisteredMask,
.clsAbsenteeismBlindfold::after {
  content: "欠　　席";
  background-color: #999;
  border-radius: 5px;
  font-size: 3rem;
  border: none;
  width: calc(100% - 25rem);
  height: calc(100% - 1rem);
  position: absolute;
  margin-left: 25rem;
  left: 0rem;
  opacity: .8;
  color: #fff;
  z-index: 100;
}

.clsRegisteredMask {
  background-color: #d4e2e6;
  width: 100%;
  margin-left: 0 !important;
  z-index: 155;
  align-items: flex-end;
  display: flex;
}


/* FAB */
.clsFAB {
  width: 60px;
  height: 60px;
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  z-index: 210;
}

.clsForceSwUnregister {
  width: 20px;
  height: 20px;
  position: fixed;
  top: 0px;
  right: 20px;
  cursor: pointer;
}

.clsToggleMenu {
  width: 30px;
  height: 30px;
  position: fixed;
  top: 3px;
  right: 3px;
  cursor: pointer;
}

  .clsToggleMenu span {
    width: 30px;
    height: 30px;
  }

.clsExtraMenuIcon {
  display: block;
  background-size: 30px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../images/menu_off.png?6');
  border-radius: 5px;
}

  .clsExtraMenuIcon.active {
    background-image: url('../images/menu_on.png?6');
  }

  .clsExtraMenuIcon:hover {
    background-image: url('../images/menu_on.png?6');
  }

.clsExtraMenu {
  user-select: none;
  position: fixed;
  top: 33px;
  right: 3px;
  cursor: pointer;
  min-width: 200px;
  min-height: 50px;
  background-color: #fff;
  border: 2px solid #666;
  border-radius: 5px;
  z-index: 300;
}

  .clsExtraMenu li {
    margin-left: 1rem;
    margin-right: 1rem;
    text-align: left;
  }

  .clsExtraMenu li:hover {
      background-color:#eee !important;
  }

  .clsExtraMenu hr {
    margin-top: 5px;
    margin-bottom: 5px;
  }

.clsMenuAnimation {
  animation-name: fadeInMenu;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

.clsModalMenu {
  top: 5px !important;
  right: 40px !important;
  position: absolute !important;
}

.clsExtraModalMenu {
  top: 35px !important;
  right: 40px !important;
  position: absolute !important;
}

@keyframes fadeInMenu {
  0% {
    transform: translateX(100%);
    opacity: 0;
  }

  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

.clsSyncMiddle, .clsSyncForeground {
  pointer-events: none;
}

.clsRegistration {
  background-color: #1c50a1;
  border-radius: 60px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.37);
}

.clsRegistrationIcon {
  background-image: url(../images/sync3.png);
  animation: 0.5s fadeIn forwards;
}

.clsRotateAnimateLeftFast {
  animation: 0.4s linear infinite rotationLeft !important;
}

.clsRotateAnimateLeftSlow {
  animation: 15s linear infinite rotationLeft;
}

.clsMask {
  display: table;
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #000;
  opacity: .5;
  z-index: 200;
  top: 0;
  left: 0;
  font-size: 56px;
  color: #fff;
  text-align: center;
  background-color: #000;
  opacity: .5;
}

  .clsMask i {
    display: table-cell;
    vertical-align: middle;
    animation: 1s linear infinite rotationRight;
  }

.clsSapping {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  line-height: 100px;
  font-size: 56px;
  color: #fff;
  text-align: center;
  background-color: #000;
  opacity: .8;
  border-radius: 1rem
}

.clsSapping img{
  animation: 1s linear infinite rotationRight;
  margin-top: -0.7rem;
}

@keyframes fadeIn {
  0% {
    opacity: .5
  }

  100% {
    opacity: 1
  }
}

@keyframes rotationRight {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotationLeft {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(-360deg);
  }
}


.clsVitalError {
  background-color: #ff5d5d !important;
  color: #fff !important;
}

.calendar_readonly {
  text-align: center;
}

.clsBulkStartButton {
  margin-left: auto;
  margin-right: 3px;
}

  .clsBulkStartButton li {
    color: #000;
  }

.clsBulkStartButton, .clsGroupSetting {
  background-color: #f7bd3c !important;
}

.clsGroupSetting {
  background-image: url('../images/setting.png');
  background-repeat: no-repeat;
  background-size: 21px;
  background-position: center;
}

.clsGroupEdit .clsGroupEditHeader ul li {
  text-align: center;
  background-color: #bae5ff;
  border: 1px solid #666;
}

  .clsGroupEdit .clsGroupEditHeader ul li:nth-of-type(2) {
    width: calc(100% - 15rem);
    margin-left: -1px;
  }

.clsGroupEdit .clsUserInformation span {
  display: flex !important;
  margin-left: 0px !important;
  margin-right: 6px !important;
  align-items: flex-end;
}

.clsGroupEdit .clsRow {
  border-bottom: 1px dashed #000;
  padding: 6px;
}

.clsGroupEdit .clsGroupEditHeader ul li:nth-of-type(1),
.clsGroupEdit > div:not(.clsGroupEditHeader) > ul {
  max-width: 20rem;
  min-width: 20rem;
}

.clsGroupEdit .clsHGroup li {
  justify-content: flex-start;
  width: auto !important;
}

  .clsGroupEdit .clsHGroup li span {
    height: 3rem;
    width: 3rem;
    margin: .2rem !important;
    background-position: center;
  }

.clsCheckBox {
  background-color: #fff !important;
  border: 2px solid #1c50a1 !important;
  box-shadow: 1px 1px 3px #666 !important;
  width: 23px !important;
  height: 23px !important;
  min-height: 1rem !important;
  margin-right: 3px !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 3px !important;
  
}

  .clsCheckBox div {
    color: #1c50a1;
    display: none;
    font-weight: 700;
    font-size: 1rem;
    user-select: none;
    transform: rotate(-24deg);
  }

  .clsCheckBox.active div {
    color: #1c50a1;
    display: flex;
    font-weight: 700;
    font-size: 1rem;
    user-select: none;
    transform: rotate(-24deg);
  }

.clsMaskOfTheBlood {
  border-radius: 5px;
  background: #0000002e;
  position: absolute;
  width: 100%;
}

.clsMaskOfTheBlood1 {
  height: 2.5rem;
  top: 2rem;
}

.clsMaskOfTheBlood2 {
  height: 2.5rem;
  top: 4.5rem;
}

/* For DisplayNavFragment */
/* 優先度を上げるために一番下に定義する */
.displayNon {
  display: none !important;
}