/*レベルインジケータ*/
div.level_indicators_row {
    justify-content:space-between;
    display: flex;
    margin: 5px 0 5px 0;
    flex-wrap:wrap;
}

/*double-row:2階建てのときの定義*/
div.level_indicators_row.double-row div.name {
}
div.level_indicators_row.double-row div.level_in_name {
    font-size: 80%;
    font-weight: bold;
}

div.level_indicators_row.double-row div.cells {
    width: 100%;
}


/*double-column:左右2分割のときの定義*/
div.level_indicators_row.double-column div.level_in_name {
    display:none;
}


/*bar-onlyのときの定義*/
div.level_indicators_row.bar-only div.name {
	display:none;
}
div.level_indicators_row.bar-only div.level_in_name {
    display:none;
}
div.level_indicators_row.bar-only div.cells {
    width: 100%;
}


/*全体共通*/
div.level_indicators_row div.cells{
  display:flex;
  width:60%;
}
div.level_indicators_row div.cell{
  position:relative;
  width:100%;
  height:12px;
  background:red;
  border:solid 1px white;
}
div.level_indicators_row div.cell:nth-child(1){
  border-top-left-radius:15px;
  border-bottom-left-radius:15px;
}
div.level_indicators_row div.cell:last-child{
  border-top-right-radius:15px;
  border-bottom-right-radius:15px;
}

div.level_indicators_row div.cell.off{
  background:lightgray;  
}

@media (max-width:767px) {
	div.level_indicators_row div.name {
		width: 35%;
	}
}