﻿/*
  Font Icon
  https://fontawesome.com/icons?d=gallery&m=free
*/
.fa-fw2 {
  text-align: center;
  width: 2em;
}
.fa-fw1 {
  text-align: center;
  width: 1.5em;
}


h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-bottom: 0;
}

.btn.btn-label {
  opacity: 1;
  pointer-events: none;
}

.btn-toolbar > div:last-child:not(:first-child) {
  margin-left: auto;
}

header .btn-toolbar,
footer .btn-toolbar {
  justify-content: space-between;
}

  header .btn-toolbar .btn,
  footer .btn-toolbar .btn {
    flex-grow: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
    /*border-radius: 0;*/
  }

/*
  Modal Dialog
*/

.modal {
  padding: 0 !important;
}

  .modal > .modal-dialog.noside,
  .modal > .modal-dialog.rightside,
  .modal > .modal-dialog.leftside {
    height: 100%;
    max-height: none;
  }

  .modal > .modal-dialog {
    margin-left: auto;
    margin-right: auto;
    padding: 0 0.5rem;
  }

    .modal > .modal-dialog.rightside,
    .modal > .modal-dialog.leftside {
      max-width: 300px;
    }

    .modal > .modal-dialog.noside {
      margin-top: 0 !important;
      margin-bottom: 0 !important;
      padding-top: 1rem;
      padding-bottom: 1rem;
    }

    .modal > .modal-dialog.rightside {
      margin: 0 0 0 auto !important;
      padding-right: 0;
    }

    .modal > .modal-dialog.leftside {
      margin: 0 auto 0 0 !important;
      padding-left: 0;
    }

      .modal > .modal-dialog.noside > .modal-content,
      .modal > .modal-dialog.rightside > .modal-content,
      .modal > .modal-dialog.leftside > .modal-content {
        height: 100%;
        border-radius: 0;
        border-top-width: 0;
        border-bottom-width: 0;
      }

    .modal > .modal-dialog.rightside > .modal-content {
      border-right-width: 0;
    }

    .modal > .modal-dialog.leftside > .modal-content {
      border-left-width: 0;
    }

      .modal > .modal-dialog.noside > .modal-content > .modal-body,
      .modal > .modal-dialog.rightside > .modal-content > .modal-body,
      .modal > .modal-dialog.leftside > .modal-content > .modal-body {
        overflow-y: auto;
      }

.fade.modal .modal-dialog.leftside {
  -o-transform: translate(-50px, 0);
  -ms-transform: translate(-50px, 0);
  -moz-transform: translate(-50px, 0);
  -webkit-transform: translate(-50px, 0);
  transform: translate(-50px, 0);
}

.fade.modal .modal-dialog.rightside {
  -o-transform: translate(50px, 0);
  -ms-transform: translate(50px, 0);
  -moz-transform: translate(50px, 0);
  -webkit-transform: translate(50px, 0);
  transform: translate(50px, 0);
}

.fade.modal.show .modal-dialog.rightside,
.fade.modal.show .modal-dialog.leftside {
  -o-transform: none;
  -ms-transform: none;
  -moz-transform: none;
  -webkit-transform: none;
  transform: none;
}

.modal.modal-child {
  z-index: 1070;
}

  .modal.modal-child + .modal-backdrop {
    z-index: 1060;
  }

.modal .modal-content{
  position: relative;
}

.modal.show .modal-busy {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  z-index: 99999;
  opacity: 0;
  -o-animation: fadeIn 1s ease 0.5s 1 forwards;
  -moz-animation: fadeIn 1s ease 0.5s 1 forwards;
  -webkit-animation: fadeIn 1s ease 0.5s 1 forwards;
  animation: fadeIn 1s ease 0.5s 1 forwards;
}

@-moz-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.modal-header {
  align-items: center;
  padding: 0.5rem;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  flex-shrink: 0;
}

  .modal-header > hr,
  .modal-footer > hr {
    width: 100%;
    margin: 0.5rem 0;
  }

  .modal-header > .modal-titlebar {
    width: 100%;
    display: flex;
    align-items: center;
  }

  .modal-header .modal-title {
    flex-grow: 1;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .modal-header .close {
    margin: -0.5rem;
    margin-left: 0.5rem;
    padding: 0.5em;
  }

.modal-footer {
  padding: 0.5rem;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  flex-shrink: 0;
  position: relative;
}

  .modal-footer .btn {
    min-width: 6rem;
  }

  .modal-footer > .alert-toast {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    margin: 1rem 2rem;
  }

    .modal-footer > .alert-toast > .alert {
      margin: 0;
    }

  .modal-header .alert,
  .modal-footer .alert {
    width: 100%;
    padding: 0.3rem;
    margin: 0;
  }


.modal-body.menu {
  padding: 0;
}

  .modal-body.menu > .btn-group-vertical {
    width: 100%;
  }

    .modal-body.menu > .btn-group-vertical > .btn {
      text-align: left;
      border-radius: 0;
      padding: 0.75rem;
    }

    .modal-body.menu > .btn-group-vertical > hr {
      width: 100%;
    }


.modal-dialog.msgbox {
  justify-content: center;
}

  .modal-dialog.msgbox > .modal-content {
    width: auto;
    max-width: 100%;
    min-width: 200px;
    overflow: hidden;
  }

    .modal-dialog.msgbox > .modal-content > .modal-footer {
      justify-content: center;
    }

      .modal-dialog.msgbox > .modal-content > .modal-footer > .btn {
        min-width: 7em;
      }

  .modal-dialog.msgbox .modal-body .alert {
    text-align: left;
    margin: 1rem 0 0 0;
  }

.modal._busy_loader_ .modal-body {
  display: flex;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

  .modal._busy_loader_ .modal-body .spinner-border {
    margin: 1rem;
    align-self: center;
  }

.modal._busy_loader_.show {
  z-index: 1051;
}

  .modal._busy_loader_.show ._busy_loader_progress {
    width: 0;
    height: 0;
    /*height: 2rem;*/
    background-color: #ccc;
  }

.modal .modal-body.list {
  padding: 0;
}

  .modal .modal-body.list .list-group-item {
    border-left-width: 0;
    border-right-width: 0;
    border-top-width: 0;
  }


/*
  Overlay
*/
.overlay {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.3);
  z-index: 1048;
  opacity: 0;
  -o-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

  .overlay.active {
    display: block;
    opacity: 1;
  }

/*
  DatetimePicker
*/
.bootstrap-datetimepicker-widget.dropdown-menu {
  z-index: 1040;
}

/*
  DropDown
*/

.dropdown > .btn.dropdown-toggle {
  height: 100%;
  text-align: left;
  overflow: hidden;
  /*padding-right: 2rem;*/
  -o-text-overflow: ellipsis;
  -ms-text-overflow: ellipsis;
  text-overflow: ellipsis;
}

.dropdown-toggle-right::after {
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 1em;
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent;
  -o-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  -moz-transform: translate(0, -50%);
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
}

.show.dropdown-menu {
  z-index: 1040;
  max-height: none !important;
}

  .show.dropdown-menu > .dropdown-item {
    min-height: 2rem;
  }

.btn-group > .dropdown {
  flex-grow: 1;
  flex-shrink: 1;
}

  .btn-group > .dropdown > .btn {
    width: 100%;
    height: 100%;
  }

    .btn-group > .dropdown:not(:first-child):not(:last-child) > .btn {
      border-radius: 0;
    }

    .btn-group > .dropdown:first-child:not(:last-child) > .btn {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    .btn-group > .dropdown:last-child:not(:first-child) > .btn {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

/*
  Menu List
*/
.btn-group.divider {
  border: none;
  border-left: 1px solid rgba(0, 0, 0, 0.3);
  padding-left: 0.3rem;
  margin-left: 0.3rem !important;
  align-items: center;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}


/*
  ListView
*/
ul {
  -ms-word-wrap: break-word;
  word-wrap: break-word;
  padding-left: 0;
  margin-bottom: 0;
  list-style-type: none;
}

  ul.fill {
    width: auto;
  }

  ul > li.list-group-item,
  ul > li > .list-group-item {
    border-radius: 0 !important;
    border-top-width: 0;
    border-right-width: 0;
    border-left-width: 0;
    /*-ms-word-break:keep-all;
    word-break: keep-all;*/
  }

    ul > li > .list-group-item:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(0,0,0,0.10) inset !important;
    }

    ul > li > .list-group-item > .btn-group-toggle.checkbox > label.btn {
      display: block;
      position: relative;
    }

  ul > li > .list-group-item-thum {
    display: flex;
    padding: 0;
  }

    ul > li > .list-group-item-thum > .thumbnail {
      min-height: 12rem;
      display: flex;
      flex-shrink: 0;
      flex-grow: 0;
      justify-content: center;
      align-items: center;
    }

      ul > li > .list-group-item-thum > .thumbnail > img {
        width: auto;
        height: auto;
        max-width: 100%;
        flex-grow: 0;
        flex-shrink: 0;
        max-height: 100%;
        padding: 0.3rem;
      }

    ul > li > .list-group-item-thum > .content {
      background-color: transparent;
      width: 100%;
    }

      ul > li > .list-group-item-thum > .content.card {
        border-radius: 0;
        border-width: 0;
      }

        ul > li > .list-group-item-thum > .content.card > div {
          border-width: 0;
          background-color: transparent; /*border off*/
        }

  ul > li.tile {
    display: inline-block;
    vertical-align: top;
    margin: 0.5rem 0 0 0.5rem;
  }

    ul > li.tile > .list-group-item-thum {
      -ms-flex-direction: column;
      -webkit-flex-direction: column;
      flex-direction: column;
      width: 12rem;
      align-items: center;
      justify-content: center;
      border-width: 1px;
      border-color: #A5A5A5;
    }

      ul > li.tile > .list-group-item-thum > div {
        width: 100%;
        margin: 0;
      }

        ul > li.tile > .list-group-item-thum > div.thumbnail {
          height: 12rem;
        }

      ul > li.tile > .list-group-item-thum > .content.card {
        border-top-width: 1px;
        border-top-width: 0; /*border off*/
      }

  ul > li .card.content > .card-header {
    -ms-word-break: break-all;
    word-break: break-all;
    padding: .25rem .75rem;
    min-height: 4rem;/*2行分*/
    text-align: center;
    color: initial;
    font-weight: bold;
  }


  ul > li:not(.tile) > .list-group-item-thum > .thumbnail {
    width: 10em;
    min-height: 10em;
  }

  ul > li:not(.tile) > .list-group-item-thum > .content.card {
    border-left-width: 1px;
    border-left-width: 0; /*border off*/
  }

  ul > li.divider {
    width: 100%;
    padding: 0.5em 1em;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
  }

  ul > li.tile + li.divider {
    margin-top: 1rem;
  }

  .list-group-divider{
    border-width: 0.25rem !important;
  }

/*
  Table
*/

div.handsontable .nowrap-multiline {
  white-space: pre;
}

div.handsontable .checkall { 
  vertical-align: middle;
}

div.handsontable .htDimmed { /* ReadOlnyセル */
  color: #000;
}

div.handsontable tbody > tr:nth-child(even) > td:not(.current-row):not(.current) { /* 偶数列 */
  background-color: #f8f8f8;
}

div.handsontable tbody > tr:nth-child(odd) > td:not(.current-row):not(.current) { /* 奇数列 */
  background-color: transparent;
}

div.handsontable .ht_clone_top tr:first-child th,
div.handsontable .ht_clone_top_left_corner tr:first-child th {
   /*border-top-width: 0; /* 上端部罫線不要 */
}

div.handsontable .ht_clone_left th:first-child,
div.handsontable .ht_clone_top_left_corner tr:first-child th {
  /*border-left-width: 0; /* 左端部罫線不要 */
}

.handsontable td:first-of-type,.handsontable th:first-child{
  /*border-left-width: 0; /* 左端部罫線不要 */
}

div.handsontable th, /* ヘッダ */
div.handsontable td { /* セル */
  vertical-align: middle;
  text-shadow: none;
}

div.handsontable .data-row { 
  display: inline-block;
}

div.handsontable .data-bold { 
  font-weight:bold;
}

div.handsontable .bootstrap-datetimepicker-widget th{
    font-weight: bold;
    border-width: 0 !important;
}

div.handsontable .bootstrap-datetimepicker-widget td {
  border-width: 0 !important;
}

div.handsontable.border-left0 tr > th {
  border-left-width: 0;
}



.list-group.list-group-horizontal > .list-group-item.list-group-item-action {
  width: auto;
}


.entry-form {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem;
}

  .entry-form.wide {
    max-width: 80rem;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
  }

.centered_alert {
  position: absolute;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin-right: -50%;
  margin-bottom: -50%;
  z-index: 999;
  padding: 1rem;
  border-radius: 0.25rem;
}

  .centered_alert .btn {
    padding: 0;
  }

  .centered_alert > button.close {
    margin-left: 1rem;
    line-height: 0.8;
  }


.custom-checkbox > .custom-control-label{
  width: 100%;
}

.no-spin {
  -moz-appearance: textfield;
}
  .no-spin::-webkit-outer-spin-button,
  .no-spin::-webkit-inner-spin-button {
    display: none;
    -webkit-appearance: none;
    margin: 0;
  }

.ime-active{
  ime-mode: active; /* 全角入力モード */
}
.ime-disabled{
  ime-mode: disabled; /* ON不可 */
}
.ime-inactive{
  ime-mode: inactive; /* 半角入力モード */
}

.alert .alert-btn {
  background-color: transparent;
  border-width: 0;
  padding: 0;
}

