[v-cloak] {
    display: none;
}

:root {
  --bs-card-bg: white;
  --bs-body-bg: white;
  /* ...他の変数... */
}

html {
    font-size: 15px; /**/
}

body {
    font-family: "Meiryo", "MS Meiryo", sans-serif;
    padding-top: 3rem;
}

.py-4 {
    padding-top: 0.5rem !important;
    padding-bottom: 1.5rem !important;
}

p {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.card-header {
    color: white;
    background-color: slategray;
}

.navbar{
    padding-top : 0.2rem;
    padding-bottom : 0.2rem;
}

/* nav-itemの文字色 */
.navbar .navbar-nav .nav-link {
    color: rgb(47, 47, 54);
}
/* nav-item activeの文字色 */
.navbar .navbar-nav .active > .nav-link {
    color:white;
    background-color: slategray;
    border-radius: 0.2rem;
}
/* nav-item:focus、nav-item:hoverの文字色 */
.navbar .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    color:white;
    background-color: slategray;
    border-radius: 0.2rem;
}

/* Bootstrap primary色カスタマイズ */
.btn-primary,
.bg-primary {
    background-color: #19448e !important;  /* 瑠璃紺 るりこん */
    border-color: #19448e !important;
}
.text-primary {
    color: #19448e !important;
}

/* primaryボタンのマウスオーバー時 */
.btn-primary:hover,
.btn-primary:focus,
.bg-primary:hover,
.bg-primary:focus {
    background-color: #13356f !important;  /* 瑠璃紺 るりこん 少し暗く */
    border-color: #13356f !important;
    color: #fff !important;
}

/* Bootstrap success色カスタマイズ */
.btn-success,
.bg-success {
    background-color: #00a381 !important;  /* 花緑青 はなろくしょう */
    border-color: #00a381 !important;
}
.text-success {
    color: #00a381 !important;
}

/* successボタンのマウスオーバー時 */
.btn-success:hover,
.btn-success:focus,
.bg-success:hover,
.bg-success:focus {
    background-color: #008165 !important;  /* 花緑青 はなろくしょう 少し暗く */
    border-color: #008165 !important;
    color: #fff !important;
}

.btn-primary,.btn-secondary,.btn-danger,.btn-info,.btn-success,.btn-warning,.btn-light,.btn-dark {
    width: 12rem;
    color: #fff !important;
}
.btn-light {
    border: 1px solid gray;
}

.btn-del {
    width: 3.5rem;
    height: 1.5rem;
    padding: 0;
}

/* ドロップダウンアイテムの文字色 */
.dropdown-item {
    color:black;
}

label.lbl {
    color: #000;
    margin: 0rem 0 0 0.5rem;
    text-align: left;
}

/* 入力項目など */
.form-control{
    width: 15rem;
}

input[type='text'].txt{
    width: 10rem;
    padding: 0.2rem;
    border-radius: 0rem;
    border: 1px solid #ccc;
}

input[type="number"] {
    text-align: right;
}

input[type='number'].num{
    width: 5rem;
    padding: 0.2rem;
    border-radius: 0rem;
    border: 1px solid #ccc;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type='tel'].tl{
    width: 5rem;
    padding: 0.2rem;
    border-radius: 0rem;
    border: 1px solid #ccc;
}
  
input[type='date'].dte{
    width: 10rem;
    padding: 0.2rem;
    border-radius: 0px;
    border: 1px solid #ccc;
}

input[type='month'].mon{
    width: 10rem;
    padding: 0.2rem;
    border-radius: 0px;
    border: 1px solid #ccc;
}

input[type='time'].tim{
    width: 6rem;
    padding: 0.2rem;
    border-radius: 0px;
    border: 1px solid #ccc;
}
  
input[type='checkbox'].cbx{
    margin: 0rem 0.5rem;
    transform: scale(1.3);
}
  
select.slc{
    padding: 0.2rem;
    border: 1px solid #ccc;
}
select:disabled{
    background-color:white;
    color:black;
    cursor: not-allowed;
}

.v-enter {
    opacity: 0;
}
.v-enter-active {
transition: opacity 3s;
}
.v-enter-to {
opacity: 1;
}
.v-leave {
opacity: 1;
}
.v-leave-active {
transition: opacity 3s;
}
.v-leave-to {
opacity: 0.4;
}

table{
    border-collapse:collapse;
    margin:0 auto;
    width:100%;
    table-layout:fixed;
}

thead{
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 1;
}

thead, tbody {
    display: block;
}
tbody {
    /* overflow-x: hidden;
    overflow-y: scroll; */
    overflow-x: none;
    overflow-y: none;
    /* height: 20rem; */
}
th{
    color:#005ab3 !important;
}
td{
    border-bottom:1px dashed #999;
    word-break: break-all;
    /* border-left: 1px dashed #999; */
}
th,tr:last-child td{
    border-bottom:2px solid #005ab3;
}
td,th{
    padding:0.3rem;
}
tr.tr_box {
    border-top:1px solid #005ab3;
    border-right:1px solid #005ab3;
}
td.hidden { display: none; }
td.checkbox {
    width:5rem;
    text-align: center;
    vertical-align: middle;
}
td.edit {
    width: 5rem;
    padding: 0.3rem 0.2rem;
}
a.td-link {
    width:100%;
    height: 2.2rem;
}
.text-danger-row td {
    /* trで終了文字色を動的に付与 */
    color: red !important;
}

ul.form-errors {
    margin: 0;
}


/* 印刷横向き */
@page { size:landscape; }

.bg-danger-table{
    font-size: 0.9rem;
}

/*アイコン*/
.bi-asterisk {
    color: red;
    font-size: 0.7rem;
    margin-left: 0.2rem;
}

/* v-select */
.vs__dropdown-toggle {
    border: var(--bs-border-width) solid var(--bs-border-color) !important;
}
.vs__dropdown-toggle:focus-within {
    /* form-controlと同じハイライト */
    border-color: #9ac8ee !important;
    box-shadow: 0 0 0 0.25rem rgba(52, 144, 220, 0.25) !important;
}
.vs__dropdown-menu {
  z-index: 9999;
}
/* v-selectのplaceholderの文字サイズを調整 */
.vs__search::placeholder {
    font-size: 0.9rem; /* お好みのサイズに */
    color: #888;       /* 色も調整可能 */
}

/* スライドトグルのスタイル */
.slide-toggle-enter-active, .slide-toggle-leave-active {
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s;
  overflow: hidden;
}
.slide-toggle-enter-from, .slide-toggle-leave-to {
  max-height: 0;
  opacity: 0;
}
.slide-toggle-enter-to, .slide-toggle-leave-from {
  max-height: 500px;
  opacity: 1;
}
.slide-toggle-panel {
    margin-left: 0 !important;
    width: 100% !important;
    overflow: visible !important;
}

.bg-custom {
    background-color: #223a70 !important; /* お好みの色に変更 */
    color: #fff;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}