.alarm-transverse {
    width: 100%;
    margin: 1rem auto;

    .alarm-input {
        input {
            width: 100%;
            height: 30px;
        }

        input:disabled {
            background-color: #f9f9f9;
        }

        select {
            height: 30px;
        }
    }
}

.disabled {
    pointer-events: none;
    background-color: #f9f9f9;
}

.alarm-level-content {
    width: 320px;

    .alarm-level-button {
        width: 80px;
        height: 30px;
        float: left;
        border: 1px solid #C4C6CF;
        display: flex;
        justify-content: space-around;
        align-items: center;
        cursor: pointer;

        .level-color {
            width: 16px;
            height: 16px;
        }

        div:last-child {
            font-size: 14px;
        }
    }

    .alarm-level-button.active {
        background-color: #EBECF0;
    }

    .level-one {
        .level-color {
            background-color: #3695FF;
        }
    }

    .level-two {
        .level-color {
            background-color: #FFE900;
        }
    }

    .level-three {
        .level-color {
            background-color: #FFA800;
        }
    }

    .level-four {
        .level-color {
            background-color: #E84F4F;
        }
    }

    .alarm-level-button:not(:last-child) {
        border-right: 0;
    }
}