.con-status { border-radius: 6px; color: #fff; font-size: 12px; letter-spacing: 0.16px; line-height: 16px; position: absolute; width: 100%; &-header { background-color: rgba(0, 0, 0, 0.7); align-items: center; display: flex; padding: 8px 12px; } &-circle { border-radius: 50%; display: inline-block; padding: 4px; margin-right: 16px; } &--good { background: #31B76A; } &--poor { background: #E12D2D; } &--non-optimal { background: #E39623; } &-arrow { margin-left: auto; transition: background-color 0.16s ease-out; &--up { transform: rotate(180deg); } &>svg { cursor: pointer; } &:hover { background-color: rgba(1,1,1, 0.1); } } &-text { text-align: center; } &-details { background-color: rgba(0, 0, 0, 0.7); border-top: 1px solid #5E6D7A; padding: 16px; transition: opacity 0.16s ease-out; &-visible { opacity: 1; } &-hidden { opacity: 0; } } }