/* 全体
**********************************************************************/
body,
table,
.form-control,
.form-select,
.input-group-text,
.btn,
.popover,
.popover-header {
  font-size: 0.8rem !important;
}

.sidebarMargin {
  margin-left: 260px;
}

.mainBorder {
  margin: 0;
  color: #dee2e6;
  opacity: unset;
}
.nav-tabs .nav-link.active {
  color: #fff !important;
  background-color: #0d6efd !important;
  border-color: #dee2e6 #dee2e6 #0d6efd !important;
}

.btn-tab-inactive {
  color: #0d6efd !important;
  background-color: #f0f1f2;
  border-color: #ffc107;
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.25rem;
  font-weight: 700 !important;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
}

.btn-tab-active {
  color: #fff !important;
  background-color: #0d6efd;
  font-weight: 700 !important;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-color: #dee2e6 #dee2e6 #0d6efd !important;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.btn-tab-body-active {
  border-top-left-radius: 0 !important;
}

.card-header.alert {
  margin-bottom: 0 !important;
}

.searchResult .alert {
  font-weight: 700 !important;
}

.iconLink a,
.iconLink span {
  text-decoration: none;
}

.iconLink a:not(.disabled):hover,
.iconLink span:not(.disabled):hover {
  text-decoration: underline;
  cursor: pointer;
}

.preWrap {
  white-space: pre-wrap !important;
}

.fontSizeMinimum {
  font-size: 1px !important;
}

.fontSizeMinimum.form-control {
  padding: 1px 4px !important;
}

textarea.autoHeightTextarea {
  resize: none;
  overflow: hidden;
}

.row .img-thumbnail {
  padding-right: 0.25rem;
  padding-left: 0.25rem;
}

hr.customTdHr {
  margin: 5px;
  color: rgba(0, 0, 0, 0.125);
  opacity: unset;
}

.small-1 {
  font-size: 0.7rem !important;
}

.small-2 {
  font-size: 0.6rem !important;
}

/* ページナビバー
**********************************************************************/
#pageNavbar {
  padding-top: 12px;
  padding-bottom: 12px;
}
#pageNavbar .nav-link {
  padding-top: 0;
  padding-bottom: 0;
}
#pageNavbar .nav-link:hover {
  text-decoration: underline;
  cursor: pointer;
}
#pageNavbar .nav-item:first-child i {
  display: none;
}
#pageNavbar .nav-item .dropdown-item {
  font-size: 0.8rem !important;
}
#pageNavbar .nav-item .dropdown-toggle {
  color: unset;
}
#pageNavbar .nav-item .dropdown-item:focus,
.dropdown-item:hover {
  color: unset;
  background-color: unset;
  text-decoration: underline;
  cursor: pointer;
}

/* iframe
**********************************************************************/
.iframeForm .card-body {
  margin: 0 !important;
  padding: 0.5rem 0.7rem !important;
}

.iframeActionResult {
  text-align: center;
}

.iframeActionResult img {
  width: 30%;
}

/* 画面中央に表示
**********************************************************************/
.screenCenter {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem 1rem;
  color: #000;
  text-align: center;
  width: 33%;
}

/* タブレット向けのスタイル */
@media (max-width: 1399px) and (min-width: 768px) {
  .screenCenter {
    width: 50%;
  }
}

/* スマートフォン向けのスタイル */
@media (max-width: 767px) {
  .screenCenter {
    width: 100%;
  }
}

.screenCenter a {
  text-decoration: none;
}

.screenCenter a:hover {
  text-decoration: underline;
}

.screenCenter .actionResult img {
  width: 30%;
}

.screenCenter .dbLogo img {
  width: unset;
  max-height: 50px;
}

.screenCenter .poweredBy span {
  font-size: 12px;
}

.screenCenter .poweredBy img {
  max-height: 25px;
}

/* csv_process.php
**********************************************************************/
.csvTemplate a {
  text-decoration: none;
}

.csvTemplate a:hover {
  text-decoration: underline;
}

/* バリデーションによるフォームエラー
**********************************************************************/
.formAlert {
  border-color: #dc3545;
  padding-right: calc(1.5em + 0.75rem);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right calc(0.375em + 0.1875rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.formAlertMessage {
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #dc3545;
}

/* データテーブル
**********************************************************************/
.table {
  word-break: break-word;
}

.table .badge.largeBadge {
  font-size: 12px !important;
}

.table select.badge {
  font-size: 12px;
}

.table .fontSizeMinimum .badge {
  font-size: 8px;
}

.table tr th.checkbox,
.table tr td.checkbox {
  width: 0;
  padding-left: 1px;
  padding-right: 1px;
}

.table thead th:not(.home th) {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  z-index: 1;
}

.table thead tr th:not(.home th) {
  border-bottom: none;
}

.table tbody td .card.card-body {
  margin: 0.3rem 0 0.6rem !important;
  padding: 0.5rem 0.7rem !important;
}

.table tbody td .card .card-body {
  margin: 0 !important;
  padding: 0.5rem 0.7rem !important;
}

.table tbody td .card:not(:first-child) {
  margin: 0.5rem 0 0 0 !important;
}

.table tbody tr td.borderCreate {
  border-left-width: 1px !important;
}

.table tbody tr td img.accountIcon {
  width: 3rem;
}

.table.multipleTd tbody td {
  border-bottom-width: 5px !important;
}

.table-tab-active {
  --bs-table-bg: #2c3034;
  color: #fff;
  border-color: #dee2e6;
}

.tdBorder:not(.home .tdBorder) {
  margin: 5px;
}

.home .tdBorder {
  margin: 0.5rem;
}

ul.pagination {
  margin-bottom: 0;
}

.table img {
  max-width: 100%;
  max-height: 20vh;
}

.table video {
  max-width: 100%;
  max-height: 20vh;
}

.card table {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.tableCardHeader {
  border: 1px solid #dee2e6;
  border-bottom: 0;
  padding: 0.5rem;
}

/* ローディングのアニメーション
**********************************************************************/
.loader,
.loader:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

.loader {
  margin: 60px auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(255, 255, 255, 0.2);
  border-right: 1.1em solid rgba(255, 255, 255, 0.2);
  border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
  border-left: 1.1em solid #ffffff;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}

.alert .loader {
  margin: 0 auto 1rem;
  font-size: 0.4rem;
}

.alert-warning .loader {
  border-top: 1.1em solid rgba(102, 77, 3, 0.2);
  border-right: 1.1em solid rgba(102, 77, 3, 0.2);
  border-bottom: 1.1em solid rgba(102, 77, 3, 0.2);
  border-left: 1.1em solid #664d03;
}

@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

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

@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

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

/* バッジ
**********************************************************************/
select.badge {
  width: 100%;
}

/* モーダル
**********************************************************************/
.modal img {
  max-width: 100%;
  max-height: 70vh;
}

.modal video {
  max-width: 100%;
  max-height: 70vh;
}

/* ポップオーバー
**********************************************************************/
.popover.actionResult .popover-body {
  padding: 0.5rem;
  font-weight: 700;
}

.popover.actionResult .popover-body .actionResultSuccess {
  color: #198754;
}

.popover.actionResult .popover-body .actionResultDanger {
  color: #dc3545;
}

/* ドロップエリア
**********************************************************************/
.btn.dropArea {
  border: 3px dashed #ced4da !important;
  border-radius: 5px;
}

label.dropArea:hover {
  cursor: pointer !important;
  background-color: #d8dde3 !important;
}