/* chapterRoles */
.chapterRoles-container {
    display: flex;
    width: 940px;
}
.chapterRoles-container .column-bookRoles {
    width: 160px;
    margin-right: 10px;
    box-sizing: border-box;
    flex-shrink: 0;
    border: 1px solid #DDD;
}
.chapterRoles-container .column-Options {
    width: 80px;
    padding: 10px;
    padding-top: 40px;
    margin-right: 10px;
    box-sizing: border-box;
    flex-shrink: 0;
    border: 1px solid #DDD;
    text-align: center;
}
.chapterRoles-container .column-chapterRoles {
    box-sizing: border-box;
    flex-shrink: 1;
    flex-grow: 1;
    position: relative;
}

.chapterRoles-container .column-bookRoles .bookRoles-panel {
    background: #EEE;
    line-height: 30px;
    text-align: center;
    margin-bottom: 10px;
    font-weight: bold;
}
.chapterRoles-container .column-bookRoles ul {
    height: 400px;
    overflow-y: auto;
}
.chapterRoles-container .column-bookRoles li {
    margin: 5px 10px;
}
.chapterRoles-container .column-bookRoles li:hover {
    background: #f4f4f4;
}
.chapterRoles-container .column-bookRoles li input {
    vertical-align: middle;
}
.chapterRoles-container .column-bookRoles li label {
    vertical-align: middle;
    display: inline-block;
}

.chapterRoles-container .column-Options li {
    margin-bottom: 20px;
}
.chapterRoles-container .column-Options .spanOpt {
    background: #33c1aa;
    display: inline-block;
    padding: 2px 10px;
    color: #fff;
    cursor: pointer;
}
.chapterRoles-container .column-Options .spanOpt .optRolesIn {

}

.chapterRoles-container .column-chapterRoles .chapterRoles-scrollable {
    height: 442px;
    overflow-y: auto;
    width: 100%;
    border: 1px solid #ddd;
}
.chapterRoles-container .column-chapterRoles .chapterRoles-panel {
    font-weight: bold;
    line-height: 32px;
    padding-left: 10px;
}
.chapterRoles-container .column-chapterRoles .chapterRoles-table {
    width: 100%;
    border-collapse: collapse;
}
.chapterRoles-container .column-chapterRoles .chapterRoles-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #EEE;
}
.chapterRoles-container .column-chapterRoles .chapterRoles-table thead th {
    border-bottom: 1px solid #EEE;
    border-right: 1px solid #EEE;
    line-height: 30px;
    font-size: 12px;
}
.chapterRoles-container .column-chapterRoles .chapterRoles-table tbody::-webkit-scrollbar {
    width: 8px;
}
.chapterRoles-container .column-chapterRoles .chapterRoles-table tbody::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .3);
    border-radius: 4px;
}
.chapterRoles-container .column-chapterRoles .chapterRoles-table tbody tr:hover {
    background: #f4f4f4;
}
.chapterRoles-container .column-chapterRoles .chapterRoles-table tbody td {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 12px;
    border-bottom: 1px solid #EEE;
    border-right: 1px solid #EEE;
}
/* end chapterRoles */
/* popup-bookRoles */
.popup-bookRoles .bookRoles-selectSoundAI {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid #CCC;
    cursor: pointer;
    background: #e9ff99;
}

/* commonTableList-container */
.commonTableTitle {
    margin-bottom: 10px;
    background: #EEE;
    padding: 5px 10px;
}
.commonTableList-container {
    display: flex;
    width: 800px;
}
.commonTableList-makeTask-container {
    width: 600px;
}
.commonTableList-container .commonTableList-scrollable {
    height: 342px;
    overflow-y: auto;
    width: 100%;
    border: 1px solid #ddd;
}
.commonTableList-container .commonTableList-panel {
    font-weight: bold;
    line-height: 32px;
    padding-left: 10px;
    background: #8eceac;
    color: #FFF;
}
.commonTableList-container .commonTableList-table {
    width: 100%;
    border-collapse: collapse;
}
.commonTableList-container .commonTableList-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #EEE;
}
.commonTableList-container .commonTableList-table thead th {
    border-bottom: 1px solid #EEE;
    border-right: 1px solid #EEE;
    line-height: 30px;
    font-size: 12px;
}
.commonTableList-container .commonTableList-table tbody::-webkit-scrollbar {
    width: 8px;
}
.commonTableList-container .commonTableList-table tbody::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .3);
    border-radius: 4px;
}
.commonTableList-container .commonTableList-table tbody tr:hover {
    background: #f4f4f4;
}
.commonTableList-container .commonTableList-table tbody td {
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 12px;
    border-bottom: 1px solid #EEE;
    border-right: 1px solid #EEE;
}
/* end commonTableList-container */