.section-box .data-vertical-table,
.section-box .data-table {
    border: 2px solid #f7f8f8;
}
.section-box .data-vertical-table {
    border-bottom: none;
}
.section-box .data-table {
    border-bottom: none;
}
/*-------------------------------------------------------------------------
data-table
-------------------------------------------------------------------------*/
/* 横スクロール対応のラッパー */
.data-table-wrapper {
    overflow-x: auto;
    width: 100%;
    /*border: 1px solid #e0e0e0;*/
    border-radius: 4px;
}

/* テーブル全体構造 */
.data-table {
    display: flex;
    flex-direction: column;
    min-width: 800px;
    width: 100%;
    font-size: 12px;
}

.data-table,
.data-table .data-table-row,
.data-table .cell {
    box-sizing: border-box;
}

/* 各行のレイアウト */
.data-table .data-table-row {
    display: flex;
    align-items: center;
    border-bottom: 2px solid #f7f8f8;
    background-color: #fff;
}

/* ヘッダー行 */
.data-table .table-header {
    font-weight: 700;
    padding: 5px 0;
    background-color: #ffffff;
}
/*.table-header .cell{border-right: 2px solid #f7f8f8;}*/
/* 各セルの共通スタイル */

.data-table .cell {
    flex: 1;
    padding: 12px 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /*text-align: center;*/
}
/*
.data-table .data-table-row .cell:first-child {
  padding-left: 40px;
}*/

/*
.empty-state {
    flex: 1 1 100%;
    text-align: center;
    
}
.empty-state .empty-message {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #FF0000;
    margin-top:20px;
    margin-bottom: 20px;
}

.empty-text{
    font-size:14px;
    letter-spacing: 1px;
    font-weight: 600;
    
}*/
@media (max-width: 768px) {
    .data-table {
        font-size: 12px;
    }
}
.data-table .cell.id {
    flex: 0 1 auto;
    width: 100px;
    flex-shrink: 0;
}

.data-table .cell.action {
    flex: 0 1 auto;
    width: 120px;
    flex-shrink: 0;
}
.data-table .cell.id,
.data-table .cell.status,
.data-table .cell.action {
    text-align: center;
}

/*ツールチップのメニューを表示する時に使用*/
.cell .menu-icon-tooltip {
    width: 36px;
    height: 36px;
    background-color: #f7f8f8;
    border-radius: 50%;
    padding: 6px;
    font-size: 17px;
    color: #555555;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s 0s ease;
}
.cell .menu-icon-tooltip:hover {
    background-color: #eeeeee;
    color: #333;
}

/*ツールチップのメニューを表示する時に使用*/
.cell a.icon-link {
    width: 36px;
    height: 36px;
    background-color: #f7f8f8;
    border-radius: 50%;
    padding: 6px;
    color: #555555;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s 0s ease;
}

.cell a.icon-link .material-icons {
    font-size: 17px;
}
.cell a.icon-link:hover {
    background-color: #eeeeee;
    color: #333;
}
.material-symbols-outlined.done {
    color: #06ea41;
}
.material-symbols-outlined.done-glay {
    color: #eeeeee;
}
.data-table-row-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.data-table-row-link:hover .data-table-row {
    background-color: #f6f8fc;
    color: #434648;
}

/* 未読 */
.data-table-row.unread .cell {
    font-weight: 600;
    /*background-color: #fffbe6;*/
}



/* メンバー欄（アバター＋氏名） */
body .data-table .cell.user-name .member-with-avatar,
body .data-table .cell.survey-manager .member-with-avatar,
body .data-table .cell.operator .member-with-avatar,
body .data-table .cell.member .member-with-avatar,
body .data-table .cell.manager .member-with-avatar,
body .data-table .cell.is-post .member-with-avatar,
body .data-table .cell.owner .member-with-avatar {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
body .data-table .cell.user-name .avatar,
body .data-table .cell.survey-manager .avatar,
body .data-table .cell.operator .avatar,
body .data-table .cell.member .avatar,
body .data-table .cell.manager .avatar,
body .data-table .cell.is-post .avatar,
body .data-table .cell.owner .avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    background: #eee;
    flex: 0 0 24px;
}
body .data-table .cell.user-name .name,
body .data-table .cell.survey-manager .name-email,
body .data-table .cell.operator .name-email,
body .data-table .cell.member .name-email,
body .data-table .cell.manager .name-email,
body .data-table .cell.is-post .name-email,
body .data-table .cell.owner .name-email {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* === 保護中フラグ === */
body .data-table .cell.protected-flag {
    display: flex;
    align-items: center;
}

body .data-table .cell.protected-flag img.protected-icon {
    width: 18px;
    height: 18px;
    vertical-align: middle;
}

body .data-table .cell.protected-flag span.protected-text {
    margin-left: 4px;
    font-weight: 500;
}

body .data-table .overall-rating-value {
    font-weight:700;
    font-size:13px;
}

body .data-table .overall-rating-value.low-rating {
    color: #d32f2f;
}


body .data-table .cell.cell-dot-indicator{
      flex: 0 0 20px;
      position: relative;
     }

body .data-table .cell.cell-dot-indicator .dot-indicator {
      left: 10px;
    }
body .data-table .cell.cell-status .icon-meta{
      margin:0;
    }

body .data-table .cell.cell-status {
        flex: 0 0 100px;
        padding:0;
    }


/*-------------------------------------------------------------------------
data-vertical-table
-------------------------------------------------------------------------*/
.data-vertical-table {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    font-size: 14px;
    /*border: 1px solid #e0e0e0;*/
    border-radius: 4px;
    overflow: hidden;
    font-size: 12px;
}
.data-vertical-table input,
.data-vertical-table select,
.data-vertical-table textarea {
    font-size: 12px;
}
.data-vertical-table .row {
    display: flex;
    padding: 5px 16px;
    border-bottom: 2px solid #f7f8f8;
    background-color: #ffffff;
}

.data-vertical-table .label {
    /*background-color: #f8f9fa;*/
    padding: 5px 10px 5px 20px;
    width: 250px;
    flex-shrink: 0;
    border-right: 2px solid #f7f8f8;
    font-weight: 600;
}

.data-vertical-table .value {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 5px 10px;
}

.data-vertical-table .row:last-child {
    border-bottom: none;
}
.flex-group {
    display: flex;
    gap: 12px;
}

.flex-item {
    flex: 1;
}

/*.data-vertical-table .value .form-control,
.data-vertical-table .value .form-select {
    width: 100%;
}*/

.data-vertical-table .value .mb-2 {
    margin-bottom: 8px;
}

.data-vertical-table.bb {
    border-bottom: 2px solid #f7f8f8;
}