.ol-map-analysis-sunny-rain-ratio {
    &-statistics-item {
        &-wrap {
            height: 80px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #E1E1E1;
            display: flex;
            align-items: center;
            font-size: 14px;
            color: #222222;
            padding: 10px;
            gap: 16px;
            cursor: pointer;
            &.active {
                border-radius: 8px;
                border: 1px solid #2198FD;
                position: relative;
            }
        }
        &-checked {
            position: absolute;
            top: 0;
            left: 0;
            width: 20px;
            height: 18px;
            background: #0B74FA;
            border-top-left-radius: 8px;
            border-bottom-right-radius: 8px;
            border: 1px solid #2198FD;
            color: #FFFFFF;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }
        &-left {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        &-right {
            flex: 1;
            min-width: 0;
            color: #55565B;
        }
        &-value {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        &-number {
            font-size: 18px;
            color: #00B132;
            &-error {
                color: #FF3A3B;
            }
            &.active {
                text-decoration: underline;
            }
        }
        &-unit {
            font-size: 12px;
        }
    }
    &-status {
        height: 24px;
        background: #FFFFFF;
        border-radius: 4px;
        border: 1px solid #35B3FF;
        color: #FFFFFF;
        font-size: 14px;
        display: flex;
        align-items: center;
        padding-right: 10px;
        &.error {
            border-color: #FA5C5E;
        }
    }
    &-status-bg {
        height: 100%;
        width: 70px;
        position: relative;
    }
    &-status-label {
        width: 100%;
        position: absolute;
        left:0;
        top: 0;
        padding-left: 10px;
    }
    &-status-number {
        font-weight: 600;
        font-size: 18px;
        color: #1677FF;
        flex: 1;
        min-width: 0;
        text-align: center;
        &.error {
            color: #FF3A3B;
        }
    }
    &-detail-modal-status {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 62px;
        height: 62px;
        &-wrap {
            position: relative;
        }
    }
}
