﻿p {
  margin-top: 0;
  margin-bottom: 0;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  line-height: 1;
}

.auto-style1 {
    height: 34px;
}

input[type='number'] {
    text-align: right;
}

.hasError {
    background-color: pink !important;
}

input.hasError + input.sw-txt {
  background-color: pink !important;
}

.alert-danger {
  color: #495057;
  background-color: pink;
  border-color: lightpink;
}

.hideScrollBar {
    -ms-overflow-style: none; /* IE, Edge 対応 */
}

    .hideScrollBar::-webkit-scrollbar { /* Chrome, Safari 対応 */
        display: none;
    }

.fa,
.fab,
.fas,
.far,
.fal {
  text-align: center;
  width: 1.25em;
}

.dropdown-toggle::after {
  font-size: 1em;
}

/** 小テスト回答 選択 */
.user-choice {
  border: #00B0F0 3px solid;
  margin-left: -3px;
  margin-bottom: 5px;
}

/** 小テスト回答 正解 */
.correct-answer {
  border: #92D050 3px solid;
  margin-left: -3px;
  margin-bottom: 5px;
}

/** 小テスト回答 不正解 */
.incorrect-answer {
  border: #C00000 3px solid;
  margin-left: -3px;
  margin-bottom: 5px;
}

/*TOPメニュー*/
.navbar {
  border-radius: 0;
  border: none;
  /*background-color: #fff;*/
  background-color: #D0BED1;
  /* ベース基調となる濃い青 */
}

.navbar-default {
    margin-bottom: 10px;
}

#logo-img {
    height: 30px;
}

.nav-link {
    color: black;
}

.nav-link-selected {
    color: #FFc107;
}

.modal-open {
    padding-right: 0px !important;
}

.modal {
    padding-right: 0px !important;
}

/* tableレイアウト */
table {
    border-collapse: separate;
    border-spacing: 0;
    color: black;
    text-align: center;
}

    table th:last-child {
        border-right: 1px solid #3c6690 !important;
    }

  table th {
    text-align: center;
    color: white;
    background: #225588;
    border-left: 1px solid #A1ACBD !important;
    border-top: 1px solid #A1ACBD !important;
    border-bottom: 1px solid #A1ACBD !important;
    width: 25%;
    padding: 10px 0;
  }

    table td:last-child {
        border-right: 1px solid #a8b7c5 !important;
    }

    table td {
        text-align: center;
        border-left: 1px solid #a8b7c5 !important;
        border-bottom: 1px solid #a8b7c5 !important;
        border-top: none;
        width: 25%;
        padding: 10px 0;
        overflow-x: hidden;
    }

.table-right-border {
  border-right: 1px solid #a8b7c5 !important;
}

/* テーブル選択行 色 */
table tbody tr.selected td {
  box-shadow: inset 0 0 0 9999px lightgreen;
}

.modal .table thead th {
  white-space: nowrap;
}

.modal .table tbody td input:nth-child(n + 2) {
  margin-top: 0.25rem;
}

/* miChecker 背景色をシステム標準色　色を黒 ロービジョン対応*/
.color-black {
  background-color: #F5F5F5;
  color: black;
}

/* ToolTip Color  */
.tooltip-inner {
    color: black;
    font-size: small;
    font-weight: bold;
    background-color: #ffc107;
}

.tooltip.bs-tooltip-right .arrow:before {
    border-right-color: #ffc107 !important;
}

.tooltip.bs-tooltip-left .arrow:before {
    border-left-color: #ffc107 !important;
}

.tooltip.bs-tooltip-bottom .arrow:before {
    border-bottom-color: #ffc107 !important;
}

.tooltip.bs-tooltip-top .arrow:before {
    border-top-color: #ffc107 !important;
}

/* progress */
#loading {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: rgba(0,0,0,0.6);
  z-index: 1;
}

#spinner {
    display: none;
    color: #fff;
    z-index: 2;
}

#loadingMsg {
    display: none;
    background: transparent;
    width: 100%;
    height: 100%;
    font-size: x-large;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
    position: absolute;
    color: white;
    z-index: 3;
}

/* GoTop */
.back-to-top {
    position: fixed;
    bottom: 25px;
    right: 25px;
    display: none;
}

/* PIC シンボル */
img.pic {
    width: 70px;
    background-color: white;
    max-width: none;
}

/* ラベルっぽく見せる input type text */
input[type='text'].fake-label {
  border: none;
  background: none;
}

/* textarea の行間を開ける */
textarea {
  line-height: 1.5 !important;
}

/* ボタンの高さを調整 */
.btn {
  display: -webkit-flex;
  display: inline-flex;
  -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
  align-items: center; /* 縦方向中央揃え */
  -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
  justify-content: center; /* 横方向中央揃え */
}

/* pic が表示されているときのボタンの高さ */
.pic-btn {
  height: 120px;
}

/* 印刷時非表示 */
@media print {
  .no_print {
        display: none;
    }
}

.no-outline {
    outline: none;
}

#divInfo {
    border: 1px solid gray;
}

/* DataTableの代替品 */
/*　スクロールバーの実装 高さ設定あり */
.table_sticky {
  display: block;
  overflow-y: scroll;
  max-height: 20em;
  border: 1px solid;
  border-collapse: collapse;
}

  .table_sticky thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #225588;
    border-top: #FFFFFF;
  }

  .table_sticky th,
  .table_sticky td {
    padding-left: 0.4em;
    padding-right: 0.4em;
  }

  .table_sticky table {
    width: 100%;
  }

/*　スクロールバーの実装 高さ設定なし */
.table_sticky_noscroll {
  display: block;
  overflow-x: scroll;
  overflow-y: hidden;
  max-width: 100%;
  border: 1px solid;
  border-collapse: collapse;
}

  .table_sticky_noscroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #225588;
    border-top: #FFFFFF;
  }

  .table_sticky_noscroll th,
  .table_sticky_noscroll td {
    padding-left: 0.4em;
    padding-right: 0.4em;
  }

  .table_sticky_noscroll table {
    width: 100%;
  }

/*　検索メニュー */
.search-head {
  background-color: #b4c6e7;
}

.search-head a {
  background-color: #b4c6e7;
}

.flex-left {
  display: flex;
  align-items: center;
  justify-content: left;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-right {
  display: flex;
  align-items: center;
  justify-content: right;
}

.expanded-button {
  box-sizing: border-box;
  position: relative;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 0px;
  background: #fff;
  font-size: 1em;
  cursor: pointer;
  transition: all .2s;
}

.expanded-button-icon span {
  box-sizing: border-box;
  display: inline-block;
  position: absolute;
  width: 18px;
  height: 2px;
  border-radius: 16px;
  background: #000000;
  transition: all .2s;
}

  .expanded-button-icon span:nth-of-type(1) {
    transform: rotate(0deg);
  }

  .expanded-button-icon span:nth-of-type(2) {
    transform: rotate(90deg);
  }

.expanded-button[aria-expanded="true"] .expanded-button-icon span:nth-of-type(1) {
  display: none;
}

.expanded-button[aria-expanded="true"] .expanded-button-icon span:nth-of-type(2) {
  transform: rotate(180deg);
}

.expanded-button[aria-expanded="true"] + .search-form {
  display: block;
}

.select-row {
  background-color: lightgreen !important;
}

/* モーダル */
.modal-dialog table.dataTable.no-footer {
  min-width: 100%;
}

.modal table td {
  vertical-align: middle;
}

.modal table td .btn {
  margin: 0 !important;
}

.modal-body .color-red {
  color: red !important;
}

/* 必須ラベル */
.required:after {
  margin-left: 1.0em;
  padding: 0px 6px 0px 6px;
  border-radius: 4px;
  font-size: 0.6em;
  color: white;
  background-color: #C44;
  content: "必須";
}

/* アコーディオンの矢印 */
.btn-collapse {
  position: relative;
}

  .btn-collapse::after {
    border-right: solid 2px #fff;
    border-top: solid 2px #fff;
    content: "";
    display: block;
    height: 10px;
    margin-right: 20px;
    margin-top: 5px;
    transform: rotate(135deg);
    transform-origin: 60% 40%;
    transition: transform .3s ease-in-out, top .3s ease-in-out;
    width: 10px;
  }

  .btn-collapse.collapsed::after {
    transform: rotate(-45deg);
  }

/* header のアイコン */
body .header-icon {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  color: rgba(0,0,0,.5);
  border-color: rgba(0,0,0,.1);
}

body.sidebar-collapse .header-icon::after {
  font-family: FontAwesome;
  content: '\f105';
}

body .header-icon::after {
  font-family: FontAwesome;
  content: '\f104';
}

/* 虫メガネ */
.form-lupe .btn {
  margin-top: 0 !important;
  width: auto;
}

.dataTables_scrollBody .form-lupe button {
  opacity: 0;
}

/* 検索条件（共通） */
.content-title h2 {
  font-size: 1.1rem;
  font-weight: 400;
  margin: 0;
}

.content-btn .btn {
  min-width: 10rem;
  margin-top: 0.25rem !important;
}

.content-title h2 {
  font-size: 1.1rem;
  font-weight: 400;
  margin: 0;
}

.content-btn .btn {
  min-width: 10rem;
  margin-top: 0.25rem !important;
}

/* ReadOnly属性に色をつける */
.form-control[readonly] {
  background: #ffffdd;
}
.form-control[disabled] {
  background: #ffffdd;
}

/* InputFile の ReadOnly属性に色をつける */
.custom-file-input:disabled ~ .custom-file-label, .custom-file-input[disabled] ~ .custom-file-label {
  background-color: #ffffdd;
}
.custom-file-input:disabled ~ .custom-file-label::after, .custom-file-input[disabled] ~ .custom-file-label::after {
  display:none;
}

/* input fileのボタンをボタンと同じ色にする */
.custom-file-label::after {
  background-color: #007bff;
  color: white;
  content: "選択";
}

/* bootstrapのスタイルを上書き（2022/06/02 豊田） */
.form-group {
  margin-bottom: .5rem;
}

label {
  margin-bottom: .2rem;
}

/* 検索条件のラベルのスタイル（2022/6/6 安田） */
.fill-label {
  background-color: #225588;
  margin-bottom: 0.25rem;
  color: white;
  border-radius: 0.2rem;
}

/* チェックボックスのクラス（共通） */
.form-check-input {
  transform: scale(2);
  position:relative;
  margin-left: 7px;
  margin-top: 9px;
}
  .form-check-input:disabled {
    cursor: not-allowed;
  }

  .form-check-input:focus-visible {
    outline-color: #80bdff;
  }

.form-check-label{
    margin-left: .5em;
    margin-top: 3px;
}

/**********************
   ↓select2↓
  form-control-sm
***********************/
.select2, .select2-selection__rendered {
  line-height: calc(1.8125rem + 2px) !important;
}

.select2-container .select2-selection--single {
  height: calc(1.8125rem + 2px) !important;
}
/**********************
   ↑select2↑
***********************/

/**********************
   ↓承認状況↓
***********************/
.approval > label {
  font-weight: normal !important;
}

.approval > .approval-status {
  text-align: center;
}

/* 未承認 */
.approval-unapproved > .approval-status {
  background-color: lightgreen;
}
.approval-unapproved > .approval-name {
}

/* 差戻 */
.approval-sendback > .approval-status {
  background-color: orange;
}
.approval-sendback > .approval-name {
  display: none;
}

/* 却下 */
.approval-reject > .approval-status {
  background-color: gray;
}
.approval-reject > .approval-name {
  display: none;
}

/* 承認 */
.approval-approved > .approval-status {
  background-color: lightblue;
}
.approval-approved > .approval-name {
  display: none;
}

/**********************
   ↑承認状況↑
***********************/

/**********************
   ↓table checkbox↓
***********************/
table input[type="checkbox"]:disabled {
  cursor: not-allowed;
}

table input[type="checkbox"]:focus-visible {
  border-color: #80bdff;
  outline: 2px solid #80bdff;
  color: #495057;
  background-color: #fff;
}
/**********************
   ↑table checkbox↑
***********************/
/* 見出しの背景色をBootstrapからカスタマイズ。https://webgradients.com/ */
/* 2023/12/07 toyoda 色見変更対応（単色にする） */
.bg-primary {
  /* 077 Cold Evening */
  background-color: #0c3483 !important;
  /*background-color: #225588 !important;*/
  background-image: linear-gradient(to top, #0c3483 0%, #a2b6df 100%, #6b8cce 100%, #a2b6df 100%);
}

/* 2023/12/07 toyoda 色見変更対応（単色にする） */
.bg-info {
  /* 070 Aqua Splash */
  background-color: #13547a !important;
  background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
}

/**********************
   ↓focus↓
 todo:おかしい所があれば随時対応
***********************/
.form-control:focus,
.custom-control-input:focus ~ .custom-control-label::before {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.btn-outline-primary.focus,
.btn-outline-primary:focus,
.btn-outline-secondary.focus,
.btn-outline-secondary:focus,
.btn-primary.focus,
.btn-primary:focus,
.btn-secondary.focus,
.btn-secondary:focus,
.btn-success.focus,
.btn-success:focus,
.btn-danger.focus,
.btn-danger:focus,
.btn-warning.focus,
.btn-warning:focus,
.btn-info.focus,
.btn-info:focus,
.btn-light.focus,
.btn-light:focus,
.btn-dark.focus,
.btn-dark:focus,
.btn-link.focus,
.btn-link:focus {
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/**********************
   ↑focus↑
***********************/
