.design-create-or-edit-variable{
    .variable-transverse {
        width: 100%;
        margin: 1rem auto;
    
        .variable-title {
            white-space: nowrap;
            float: left;
        }
        .storage{
            margin-top:0.1rem;
        }
    
        .variable-title{
            width: 30%;
            line-height: 30px;
            text-align: right;
            padding-right: 20px;
            word-break: break-all;
    
            .star {
                color: red;
            }
        }
    
        .label-input {
            margin-bottom: 5px;
        }
    
        .label-input {
            margin-left: 30%;
            width: 271px;
    
            label {
                width: 20px;
                margin-right: 5px;
            }
    
            input {
                width: 246px;
                height: 30px;
            }
        }
    
        .variable-input {
            // margin-left: 30%;
            width: 271px;
            float: left;
            .storage-time-types{
                width: 76%;
                ::ng-deep.ng-star-inserted{
                    color:#999;
                }
            }
            .ui-inputgroup{
                width:76%;
                .ui-inputgroup-addon {
                    height: 30px;
                    margin-left: 10px;
                    padding-top: 0px !important;
                }
            }
            input {
                width: 100%;
                height: 30px;
            }
    
            select {
                height: 30px;
            }
    
            .data-source-name-select {
                width: 100%;
            }
    
            .monitor-point-name-select {
                width: calc(100% - 31px);
            }
    
            .open-monitor-btn {
                height: 30px;
                width: 30px;
                background-color: white;
                border: 1px solid #b5c2ca;
                cursor: pointer;
                margin-left: 0;
                float: right;
                span {
                    color: #3695FF;
                }
    
                span.disable-span {
                    color: #7F939F;
                }
            }
    
            button[disabled] {
                border: 1px solid #C4C6CF;
                background-color: #F2F3F7;
                height: 30px;
            }
    
            .access-btn.rw-selected {
                background-color: #EBECF0;
            }
    
            .access-btn {
                white-space: nowrap;
                width: 91px;
                font-size: 12px;
                height: 30px;
                border: 1px solid #C4C6CF;
                background-color: white;
                cursor: pointer;
            }
    
            .access-btn:not(:first-child) {
                margin-left: -1px;
            }
        }
        .acquisition-interval{
            input{
                width:100px;
                padding-left:10px;
            }
        }
    
    }
    .ng-select-container .ng-value-container .ng-input{
        top: 0!important;
    }
    .has-danger .form-control-feedback{
        float: left;
        margin-left: 30%;
    }
    
}

.margin-left-15px{
    margin-left:15px;
}
input, select {
    color: rgba(0, 0, 0, 0.6);
}

option {
    color: rgba(0, 0, 0, 0.6)
}

.fe-modal-container .fe-modal-header {
    border-bottom: 1px solid #f4f4f4;

    .fe-modal-header-title {
        line-height: 50px;
    }
}

.modal-content .modal-body {
    padding: 16px 16px 0;
}
.design-content{
    .variable-transverse:last-child {
        margin-bottom: 0;
    }
}


.fe-btn.fe-btn-default.fe-btn-save.save-and-import {
    width: auto;
    padding: 0 10px;
}

.sub-title {
    border-bottom: 1px solid #f4f4f4;
}

.data-source-type {
    button:not(:first-child) {
        margin-left: 8px;
    }
}

select:invalid {
    color: gray !important;
}

option[disabled] {
    display: none !important;
}

option {
    color: black !important;
}

.select-search {
    float: left;
    width: 260px;
    margin-left: 30%;
    padding: 8px;
    background-color: #eee;

    div {
        margin-bottom: 4px;

        div:first-child {
            float: left;
            margin-right: 10px;
        }

        div:last-child {
            word-break: break-all;
            overflow: hidden;
        }
    }
}

.focus {
    color: white;
    background-color: #3695FF;
}