:root {
  --main-green: #367e7f;
}

/* atom/pagination */
.pagination {
  display: flex;
  align-items: center;

  .page-item {
    .page-link {
      display: flex;
      align-items: center;
      min-height: 44px;
      margin: 0;
      color: #367e7f;
      font-size: 1.0rem;
      border: 1px solid #367e7f;
      border-radius: .4rem;
    }
    .page-link:hover {
      color: #367e7f;
      opacity: .7;
    }
  }
  .page-item.next {
    .page-link {
      padding: .5rem;
    }
    .page-link:after {
      padding-left: .5rem;
      content: ">";
    }
  }
  .page-item.prev {
    .page-link {
      padding: .5rem;
    }
    .page-link:before {
      padding-right: .5rem;
      content: "<";
    }
  }

  .page-place {
    padding: 0 1rem;
    font-weight: 600;
  }

  .disabled {
    .page-link {
      border: 1px solid #777;
      color: #777;
    }
  }
}

/* atom/layout */
html {
  font-size: 72.5%;
}
body {
  background-color: #f5f5f5;
  box-sizing: border-box;
  margin: 0;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, Verdana, Meiryo, sans-serif;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
}
h2 {
  margin: 0 0 1rem;
  padding-bottom: 1rem;
  color: #777;
  font-size: 1.8rem;
  font-weight: 600;
  border-bottom: 1px solid #D7D7D7;
  word-break: break-word;
}
h2.h2_border_none {
  padding-bottom: 0;
  border-bottom: none;
}
h2.h2_large,
h2.h2_large_border {
  color: #333;
  font-size: 1.6rem;
}
h2.h2_large {
  margin: 0;
  padding-bottom: 0;
  border-bottom: none;
}
h2.h2_large_border {
  margin: 0 0 2rem;
  padding-bottom: 2rem;
}

h3 {
  margin: 0 0 2rem;
  color: #777;
  font-size: 1.2rem;
  font-weight: 600;
}
h3.h3_border {
  margin: 0 0 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #D7D7D7;
}
h3.h3_large {
  margin: 0 0 1.5rem;
  color: #333;
  font-size: 1.4rem;
}

p {
  margin: 0 0 1rem;
}

.control-area {
  white-space: nowrap;
  display: flex;
  align-items: center;
  margin-right: 2rem;

  .control-area_section {
    display: flex;
    align-items: center;
    margin-right: 2rem;

    .control-area_section_article {
      display: flex;
      align-items: center;
      margin-right: 1rem;

      .control-area_section_article_date {
        margin: 0 .5rem;
      }

      .control-area_section_article_title {
        white-space: nowrap;
        margin-right: .5rem;
      }
    }
    .control-area_section_article:last-child {
      margin-right: 0;
    }
  }
  .control-area_section:last-child {
    margin-right: 0;
  }
  .control-area_section_stretch_wrap {
    flex-direction: column;
    flex-grow: 2;

    .control-area_section_article_stretch {
      width: 100%;
      margin-right: 0;
      margin-bottom: 1rem;

      .control-area_stretch {
        width: 100%;

        .control-area_section_stretch {
          flex-grow: 2;

          .control-area_section_article {
            width: 100%;

            .form-select,
            .form-text {
              width: 100%;
            }

            .multi-select {
              width: 100%;

              .select2-container {
                width: 100%!important;

                .select2-selection--multiple {
                  height: 34px;
                  min-height: 34px;
                  padding: 0;

                  .select2-selection__rendered {
                    display: flex;
                    align-items: center;
                    height: 100%;
                    padding: .5rem 1rem;
                    font-size: 1.2rem;

                    .select2-search__field {
                      margin-top: 0;
                    }

                    .select2-selection__choice {
                      margin: 0;
                    }
                  }
                }
              }
            }
          }
        }
      }

      .control-area_section_article_date,
      .control-area_section_article_title {
        font-size: 1.2rem;
      }
    }
    .control-area_section_article_stretch:last-child {
      margin-bottom: 0;
    }
  }
}
.control-area:last-child {
  margin-right: 0;
}

.form-area {
  display: flex;
  align-items: center;

  label {
    width: 8%;
    margin-right: 1rem;
    text-align: right;
    color: #777;
    font-size: 1.2rem;
    font-weight: 600;
    white-space: nowrap;
  }
}
.form-area-area_multiple-lines {
  align-items: flex-start;
}

.heading-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;

  .title-area {
    width: 100%;
    margin-right: 2rem;

    h1 {
      display: flex;
      align-items: center;
      margin: 0;
      font-size: 1.8rem;
      font-weight: 600;
    }

    h2 {
      margin: 0;
      padding: 0;
      color: #333;
      font-size: 1.6rem;
      border-bottom: 0;
    }

    div {
      display: flex;
      align-items: center;
      margin-top: .5rem;

      .title-area_contents {
        display: flex;
        align-items: center;
        margin-right: 2rem;
        color: #777;

        span:last-child {
          padding-left: .5rem;
        }
      }
      .title-area_contents:last-child {
        margin-right: 0;
      }
    }
    .title-area_pagination {
      display: flex;
      align-items: center;
      margin-top: 0;

      h1 {
        margin-right: 2rem;
        font-size: 1.4rem;
      }

      div {
        margin-top: 0;
      }
    }
  }
}
.heading-area_card {
  margin-bottom: 0;
}
.heading-area_right_large {
  .title-area {
    width: inherit;
  }
  form {
    flex-grow: 2;
  }
}
.heading-area_secondary {
  margin-top: 4rem;
}
.row-area_card {
  .heading-area {
    margin-bottom: 0;

    h2 {
      color: #333;
      font-size: 1.8rem;
      border-bottom: 0;
    }
  }

  .heading-area_border {
    margin: 0 0 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #D7D7D7;

    h2 {
      margin: 0;
      padding: 0;
      color: #777;
      font-size: 1.2rem;
      font-weight: 600;
      word-break: break-word;
    }
  }
}

.icon-area {
  display: flex;
  align-items: center;
  width: 100%;

  span {
    margin-right: .5rem;
  }
  span:last-child {
    margin-right: 0;
  }
}

.img-txt-btn-area {
  display: flex;

  .img-txt-btn-area_img {
    display: flex;
    width: 150px;
    height: 85px;
    background-color: #EBEBEB;
    margin-right: 1rem;

    img {
      object-fit: cover;
    }
  }
  .img-txt-btn-area_txt {
    flex-grow: 2;

    .img-txt-btn-area_txt_article {
      margin-bottom: 1.5rem;
    }
    .img-txt-btn-area_txt_article:last-child {
      margin-bottom: 0;
    }
  }
  .img-txt-btn-area_btn {
    display: flex;
    flex-direction: column;
    margin-left: 2rem;

    > div {
      margin-bottom: 1rem;
    }
    > div:last-child {
      margin-bottom: 0;
    }
  }
}

.input-area {
  display: flex;
  align-items: center;

  span:nth-child(odd) {
    flex-grow: 1;
  }
  span:nth-child(even) {
    margin: 0 1rem;
  }
}

.main-side-area {
  display: flex;
  justify-content: space-between;

  .main-side-area_main {
    flex-grow: 2;
  }

  .main-side-area_side {
    width: 25%;
    margin-left: 2rem;
  }
}

.row-area {
  display: flex;
  align-items: center;

  span {
    margin-right: 1rem;
  }
  span:last-child {
    margin-right: 0;
  }
}
.row-area_xlarge {
  > div,
  > span {
    margin-right: 2rem;
  }
}
.row-area_xlarge {
  > div:last-child,
  > span:last-child {
    margin-right: 0;
  }
}
.row-area_small {
  > span {
    margin-right: .5rem;
  }
  > span:last-child {
    margin-right: 0;
  }
}
.row-area_card {
  display: flex;
}
.row-area_liquid {
  span {
    flex-grow: 2;
    margin: 0;
  }
  .row-area_liquid_connect {
    flex-grow: 0;
    margin: 0 1rem;
  }
  .row-area_liquid_noconnect {
    margin-right: 1rem;
  }
  .row-area_liquid_noconnect:last-child {
    margin-right: 0;
  }

  &.clear-date {
    padding-left: 2px;
    font-size: 120%;
    cursor: pointer;
  }
}
.row-area_ai-start {
  align-items: start;
}
.row-area_jc-space-between {
  justify-content: space-between;
}

.section-area {
  margin-bottom: 2rem;
}
.content {
  .section-area:last-child {
    margin-bottom: 0;
  }
}

.space-between-area {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .space-between-area_main-area {
    flex-grow: 1;

    > div {
      flex-grow: 1;
    }

    .control-area_section_article {
      width: 100%;
    }
  }
}

.thumbnail-area {
  img {
    max-height: 100px;
  }
}

.text-red {
  color: red;
}

.w-30 {
  width: 30%;
}
.w-70 {
  width: 70%;
}

/* atom/form */
.form-select,
.form-text {
  input,
  select,
  textarea {
    border-radius: .4rem;
    font-size: 1.2rem;
    min-height: 44px;
    padding: 1rem;
    width: 100%;
  }
}

.form-group {
  label {
    font-size: 1.2rem;
  }

  input,select,textarea {
    font-size: 1.2rem;
  }
}

.form-group.submit {
  margin-top: 3rem;
  text-align: center;
}

.form-group.required {
  label::after {
    font-size: 85%;
    content: '必須';
    color: #fff;
    background-color: #dc3545;
    font-weight: 700;
    border-radius: 0.25rem;
    padding: 0.25em 0.4em;
    margin-left: 0.25rem !important;
    line-height: 1;
  }
}

.form-small {
  input,
  select {
    height: 34px;
    min-height: 34px;
    padding: .5rem 1rem;
    font-size: 1.2rem;
  }
}

/* atom/card */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  padding: 2rem;
  border: 1px solid #D7D7D7;
  border-bottom: none;

  .card_section {
    .card_article:last-child,
    .card_section_article:last-child,
    .card_row:last-child {
      margin-bottom: 0;
    }

    .card_section_article_border:last-child {
      padding-bottom: 0;
      border-bottom: none;
    }
  }
  .card_section:last-child {
    margin-bottom: 0;
  }
}
.card:only-child {
  border-radius: .4rem;
}

.card_article {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;

  .card_side:last-child {
    margin-right: 0;
  }
}

.card_section {
  margin-bottom: 2.5rem;

  .card:first-child {
    border-radius: .4rem .4rem 0 0;
  }
  .card:last-child {
    border-bottom: 1px solid #D7D7D7;
    border-radius: 0 0 .4rem .4rem;
  }
  .card:only-child {
    border-radius: .4rem;
  }
}

.card_section_article {
  display: block;
  margin-bottom: 2rem;
}
.card_section_article_border {
  padding-bottom: 2rem;
  border-bottom: 1px solid #D7D7D7;
}

.card_row {
  margin-bottom: 1rem;
}

.card_side {
  width: 100%;
  margin-right: 2rem;
  padding: 2rem;
  border: 1px solid #D7D7D7;

  h3 {
    text-align: center;
  }
}

.row-area.row-area_card,
.row-area_card {
  align-items: stretch;

  .card {
    flex-grow: 2;
    width: 100%;
    margin-right: 2rem;
    border-bottom: 1px solid #D7D7D7;
  }
  .card:last-child {
    margin-right: 0;
  }
}

/* application */
.turbolinks-progress-bar {
  height: 3px;
  background-color: green;
}

body {
  background-color: #f7f7f7;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  width: 100%;
  min-width: 891px;
  z-index: 100;
  height: 70px;
}

.main-nav {
  display: flex;
  height: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #f9fff9;
  border-bottom: 1px solid var(--main-green);

  .navbar-brand {
    font-size: 1.8rem;
  }

  a {
    color: var(--main-green);
    &:hover {
      color: black;
    }
  }
}

.container-fluid {
  padding-left:271px;
  margin-top: 90px;
  .content {
    background-color: #ffffff;
    padding: 20px 20px;
    min-height: 250px;
    border: 1px solid var(--main-green);
    border-radius: 6px;
    margin-top: 24px;
  }
}

.container-center {
  margin-top: 90px;
}

.login-form {
  width: 40%;
  border: 1px solid var(--main-green);
  margin: auto;
  border-radius: 5px;
  padding: 30px 30px;
  background-color: white;
  input[type="submit"] {
    color: #ffffff;
    margin-bottom: 0;
    background-color: var(--main-green);

    &:hover {
      cursor: pointer;
      color: #f8f9fa;
      background-color: #296061;
    }
  }
}

.reset-password-form {
  width: 40%;
  border: 1px solid var(--main-green);
  margin: auto;
  border-radius: 5px;
  padding: 30px 30px;
  background-color: white;
}

.roles {
  .role-form {
    width: 40%;
    margin: auto;
  }
}

#sidebar {
  position: fixed;
  padding: 0;
  padding-top: 70px;
  height: 100vh;
  overflow-y: scroll;
  z-index: 99;
  background-color: var(--main-green);
}

#sidebar .list-group {
  width: 240px;
}

#sidebar .list-group .list-group-item {
  color: #ffffff;
  background-color: var(--main-green);
}

#sidebar .list-group .collapse .list-group-item {
 padding-left: 20px;
}

#sidebar .list-group .collapse > .collapse .list-group-item {
 padding-left: 30px;
}


.card-section {
  margin-bottom: 2rem;
}

.table {
  background-color: #ffffff;
}

.table th {
  vertical-align: middle;
  text-align: center;
  background-color: rgba(86,61,124,.15);
  border: 1px solid rgba(86,61,124,.2)
}

.table td {
  vertical-align: middle;
  word-break: break-word;
}

.table td.action {
  white-space: nowrap;
  text-align: center;
}

.service-option-index {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  align-items: center;
  justify-content: space-between;
}

.service-option-header {
  display: flex;
  flex-wrap: wrap;
  margin: 0.5rem;
  border-bottom: 1px solid #dee2e6;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
}

.form-group.required {
  label::after{
    font-size: 75%;
    content: '必須';
    color: #fff;
    background-color: #dc3545;
    font-weight: 700;
    border-radius: 0.25rem;
    padding: 0.25em 0.4em;
    margin-left: 0.25rem !important;
    line-height: 1;
  }
}

.flex {
  display: flex;
  .form-group{
    width: 50%;
  }
}

.yellow {
  background-color: lemonchiffon;
}

.text-red {
  color: red;
}
.text-blue {
  color: blue;
}

.button-area {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;

  > span {
    margin-right: 1rem;
  }
  > span:last-child {
    margin-right: 0;
  }
}
.button-area_liquid {
  > span {
    width: 100%;
    margin-top: 1rem;
  }

  a {
    justify-content: center;
  }
}
.button-area_start {
  justify-content: flex-start;
}

.button-display-inline {
  display:flex;
  justify-content: center;
}
.button-margin {
  margin-left: 2px;
}
.button-text {
  font-size: 12px;
}
.button-align {
  text-align: center;
}
.button-text-margin {
  margin: 5px 0 5px 0;
}

.button {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  height: 44px;
  padding: 1rem;
  color: #fff;
  border-radius: .4rem;
  cursor: pointer;
}

.card_article {
  display: flex;
  align-items: center;
  margin-bottom: 2rem;

  .card_side:last-child {
    margin-right: 0;
  }
}

.card_side {
  width: 100%;
  margin-right: 2rem;
  padding: 2rem;
  border: 1px solid #D7D7D7;

  h4 {
    text-align: center;
  }
}

.attendance-table {
  th.break-time {
    max-width: 70px;
  }
  p {
    margin: 0;
  }
}
.time-select {
  display: flex;
}
.notification-title {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3rem;
  max-height: 4rem;
  border: 2px solid #dcdcdc;
  border-radius: 4px;
  background-color: #dcdcdc;
  padding: 2px;
  color: #000;
}
.notification-body {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 5rem;
  max-height: 10rem;
  border: 2px solid #777;
  border-radius: 4px;
  background-color: #dcdcdc;
  padding: 2px;
  color: #000;
}

.lightsteelblue {
  background-color: #b0c4de
}

.text-centering {
  text-align: center;
}

.row-monthly_summary {
  display: flex;
  justify-content: end;
  margin-top: 24px;
  margin-right: 16px;
}