.editcontainer {
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
    width: 500px;
    border-left: 2px solid var(--main-color);
    background: var(--subpanel-color);

    .edit {

        .split {
            position: absolute;
            top: 5px;
            bottom: 5px;
            left: 5px;
            right: 5px;
            opacity: 1;
            transition-duration: .2s;

            .row {
                width: calc(100% - 10px);
                margin-top: 5px;
                padding: 5px;
                background: #363636;

                .label {
                    color: #fff;
                    margin: 0 0 5px 0;
                    font-size: 13px;
                    border-bottom: 1px solid #525252;
                    padding-bottom: 4px;
                    padding-left: 5px;
                }

                .inputs {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                }
            }

            .row75 {
                width: 100%;
                display: flex;
                align-items: flex-start;

                .row {
                    width: calc(25% - 15px);
                    margin: 0px 0px 0px 5px;

                    &:first-child {
                        width: calc(75% - 10px);
                        margin: 0px;
                    }
                }
            }

            .buttontype {
                width: calc(100% + 10px);
                display: flex;
                justify-content: center;
                align-items: center;
                border-bottom: 2px solid var(--main-color);
                padding-bottom: 5px;
                margin-left: -5px;

                .types {
                    display: flex;
                    justify-content: center;

                    .buttonitem {
                        border: solid var(--main-hover-color);
                        border-width: 2px 2px 2px 0px;
                        transition-duration: .2s;
                        padding: 5px 10px;
                        background: var(--background);
                        color: #fff;
                        font-size: 12px;
                        transition-duration: .2s;
                        cursor: pointer;

                        &:hover {
                            background: var(--main-hover-color);
                        }

                        &:first-child {
                            border-left-width: 2px;
                            border-top-left-radius: var(--border-radius);
                            border-bottom-left-radius: var(--border-radius);
                        }

                        &:last-child {
                            border-top-right-radius: var(--border-radius);
                            border-bottom-right-radius: var(--border-radius);
                        }
                    }

                    .buttonitem.selected,
                    .buttonitem.selected:hover {
                        background: var(--main-color);
                        border-color: var(--main-color);
                    }
                }
            }

            .editinner {
                width: 100%;
                height: calc(100% - 36px);
                overflow-y: auto;
            }


            .container {
                // position: absolute;
                // top: 0px;
                // bottom: 0px;
                width: 100%;
            }

            .containertitle {
                width: calc(100% - 10px);
                padding-left: 10px;
                margin: 10px 0 5px 0;

                &.checktitle {
                    display: flex;

                    .text {
                        width: 100%;
                    }

                    .checks {
                        display: flex;
                        align-items: center;

                        .check {
                            display: flex;
                            align-items: center;
                            margin-left: 10px;
                            user-select: none;

                            input {
                                width: 18px;
                                height: 18px;
                                pointer-events: none;
                                margin-right: 5px;
                            }

                            .checklabel {
                                font-size: 12px;
                            }

                        }
                    }
                }
            }

            .container.appearence {
                // left: 0px;
                // right: 50%;
                // padding-right: 10px;


                .advanced {
                    width: calc(100% + 10px);
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-left: -5px;
                    margin-top: 5px;

                    .subrow {
                        width: 100%;
                        display: flex;
                        align-items: center;
                        flex-wrap: wrap;
                        margin: 0px 5px;

                        .label {
                            width: 100%;
                            color: #a5a5a5;
                            margin: 0px 0px -3px 5px;
                            font-size: 10px;
                            border-bottom: 0px;
                            padding: 0px;
                        }

                        input[type="range"] {
                            width: calc(100% - 42px);
                            margin: 0px;
                            padding: 0px;
                        }

                        input[type="number"] {
                            padding: 2px 0px;
                            width: 30px;
                            font-size: 10px;
                            text-align: center;

                            &::-webkit-inner-spin-button,
                            &::-webkit-outer-spin-button {
                                -webkit-appearance: none;
                                -moz-appearance: none;
                                appearance: none;
                                margin: 0;
                            }
                        }
                    }
                }



                .row.text {
                    .value {
                        height: 17px;
                        width: calc(100% - 104px);
                        border-top-right-radius: 0px;
                        border-bottom-right-radius: 0px;
                    }

                    .size {
                        width: 80px;
                        border-radius: 0px;
                        border-width: 2px 0px;
                    }

                    .color {
                        height: 31px;
                        width: 60px;
                        border-top-left-radius: 0px;
                        border-bottom-left-radius: 0px;
                    }
                }

                .row.background {
                    .color {
                        height: 31px;
                        width: 100%
                    }
                }

                .row.image {
                    // width: 100%;
                    // height: calc(100% - 72px);
                    // display: flex;
                    // justify-content: center;
                    // align-items: flex-start;
                    // flex-wrap: wrap;

                    .imagemenu {
                        width: 100%;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;

                        .imagetype {
                            display: flex;
                            justify-content: center;

                            .selectoritem {
                                border: solid var(--main-hover-color);
                                border-width: 2px 2px 2px 0px;
                                transition-duration: .2s;
                                padding: 5px 10px;
                                background: var(--background);
                                color: #fff;
                                font-size: 12px;
                                transition-duration: .2s;
                                cursor: pointer;

                                &:hover {
                                    background: var(--main-hover-color);
                                }

                                &:first-child {
                                    border-left-width: 2px;
                                    border-top-left-radius: var(--border-radius);
                                    border-bottom-left-radius: var(--border-radius);
                                }

                                &:last-child {
                                    border-top-right-radius: var(--border-radius);
                                    border-bottom-right-radius: var(--border-radius);
                                }
                            }

                            .selectoritem.selected,
                            .selectoritem.selected:hover {
                                background: var(--main-color);
                                border-color: var(--main-color);
                            }
                        }

                        .info {
                            width: 100%;
                            height: 28px;
                            margin-left: 10px;

                            .infopanel {
                                width: 100%;
                                height: 100%;
                                display: none;
                            }

                            .infopanel.selected {
                                display: block;
                            }
                        }
                    }

                    .panels {
                        width: 100%;

                        .panel {
                            width: 100%;
                            height: calc(100% - 10px);
                            padding: 5px 0px;
                            display: none;
                        }

                        .panel.selected {
                            display: block;
                        }

                        .panel.icons {
                            max-height: 150px;
                            overflow-y: auto;
                            overflow-x: hidden;

                            .list {
                                width: calc(100% + 4px);
                                height: 100%;
                                display: flex;
                                justify-content: center;
                                align-items: flex-start;
                                flex-wrap: wrap;
                                margin-left: -2px;
                                cursor: pointer;
                                overflow-y: auto;

                                .icon {
                                    position: relative;
                                    width: 55px;
                                    height: 55px;
                                    overflow: hidden;
                                    background: #343434;
                                    margin: 1px;
                                    transition-duration: .2s;
                                    border: 1px solid transparent;

                                    &:hover {
                                        border-color: var(--main-hover-color);

                                        .name {
                                            max-height: 100%;
                                        }

                                    }

                                    img {
                                        position: absolute;
                                        top: 10px;
                                        bottom: 10px;
                                        left: 10px;
                                        right: 10px;
                                        z-index: 1;
                                        width: calc(100% - 20px);
                                        height: calc(100% - 20px);
                                        opacity: 0;
                                        transition-duration: .2s;
                                    }

                                    .name {
                                        position: absolute;
                                        max-height: 20%;
                                        bottom: 0px;
                                        left: 0px;
                                        right: 0px;
                                        z-index: 2;
                                        text-align: center;
                                        font-size: 9px;
                                        padding: 2px;
                                        background: #00000096;
                                        transition-duration: .3s;
                                    }
                                }

                                .icon.selected,
                                .icon.selected:hover {
                                    border-color: var(--main-color);
                                    background: var(--main-secondary-color);
                                }
                            }
                        }
                    }



                }
            }


            .container.actions {}


        }
    }

    .edit.disabled {
        pointer-events: none;

        .split {

            opacity: 0;
        }
    }
}