.grade-hierarchical-grid{width: 100%; font-family: Arial, sans-serif;} .grade-level{display: flex; margin-top: 10px;} .caret-container{display: flex; justify-content: center; flex: 0 0 auto;} .caretless-container{flex-grow: 1;} .grade-level-items{display: flex; flex-direction: row; width: 100%;} .caretless-container > .nested{display: none; margin-left: 20px;} .caretless-container > .nested.active{display: block;} .grade-level-1 .grade-item-1, .grade-level-2 .grade-item-1{flex-grow: 1;} .grade-item{padding: 5px; border: 1px solid #ccc; margin-right: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} .grade-item-2{width: 20%;} .grade-item-3{width: 200px;} .grade-item-4{width:100px;} .caret{cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} .caret::before{content: "\25B6"; color: black; display: inline-block; margin-right: 6px;} .smybol-dot{cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} .symbol-dot::before{content: "\2022"; color: black; display: inline-block; margin-right: 6px;} .caret-down::before{-ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg);} span.caret-down{background-color: #85c6de;}