/* サイドバー */
.sidebar {
    width: 220px;
    transition: width 0.2s ease;
    overflow-x: hidden;
    position: sticky;
    top: 0;
    height: 100vh;
}
.sidebar.collapsed {
    width: 54px;
}
.sidebar.collapsed .sidebar-brand-text,
.sidebar.collapsed .sidebar-text,
.sidebar.collapsed .sidebar-section-label {
    display: none;
}
.sidebar-toggle-btn {
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: color 0.15s;
    flex-shrink: 0;
}
.sidebar-toggle-btn:hover {
    color: #fff;
}
.sidebar-link {
    color: #adb5bd;
    font-size: 0.875rem;
    padding: 0.45rem 0.75rem;
    transition: background 0.15s, color 0.15s;
    text-decoration: none;
}
.sidebar-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    text-decoration: none;
}
.sidebar-link.active {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}


/* bootstrap 4->5 の調整 */
/* ホバー・フォーカス時は下線あり */
.list-group-item-action:hover,
.list-group-item-action:focus {
    text-decoration: underline !important;
}
/* aタグは通常時は下線を消す*/
a {
  text-decoration: none;
}
/* ホバー・フォーカス時は下線あり */
a:hover {
  text-decoration: underline;
}

/* テーブル用 */
table, th, td {
  border-collapse: collapse;
  border: 1px solid #ccc;
  line-height: 1.5;
  width: 100%;
  table-layout: fixed;
}
table th {
  padding: 8px;
  font-weight: bold;
  background: #000000;
  color: #ffffff;
}
th.type-tr {
    width: 150px;
}
table td {
  padding: 8px;
}

/* 背景青色 */
.info {
  background-color: #00ccff;
}
/* 背景黄色 */
.warn {
  background-color: #ffff66;
}
/* 背景黄色・赤字 */
.error {
  background-color: #ffff66;
  color: #ff0000;
}
/* 背景黄色・グレー */
.disable {
  background-color: #b9b8b8;
}

.paid-message{
    color: #ff0000;
}

.loading{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
  background-color: black;
  opacity: .3;
}

.loading-active{
  display: flex;
}

.loading img{
  width: 150px;
}

@media (min-width: 1200px) {
    .container {
        max-width: 1340px;
    }
}