@import '/customize/src/less/variables.less';
@import '/customize/src/less/mixins.less';
@import (once) "/customize/src/less2/include/colortheme.less";

@leftside-bg: @colortheme_sidebar-left-bg;
@leftside-color: @colortheme_sidebar-left-fg;
@rightside-color: @colortheme_sidebar-right-fg;
@description-color: @colortheme_sidebar-description;

@button-width: 400px;


.cp {
    input[type="text"] {
        padding-left: 10px;
    }
    #container {
        font-size: 16px;
        display: flex;
        flex: 1;
        min-height: 0;
        #leftSide {
            color: @leftside-color;
            width: 250px;
            background: @leftside-bg;
            display: flex;
            flex-flow: column;
            .categories {
                flex: 1;
                .category {
                    .leftsideCategory();
                }
            }
        }
        #rightSide {
            flex: 1;
            padding: 5px 20px;
            color: @rightside-color;
            overflow: auto;
            .element {
                label:not(.noTitle), .label {
                    display: block;
                    font-weight: bold;
                    margin-bottom: 0;
                }
                .description {
                    display: block;
                    color: @description-color;
                    margin-bottom: 5px;
                }
                margin-bottom: 20px;
            }
            [type="text"], button {
                vertical-align: middle;
                height: 40px;
                box-sizing: border-box;
            }
            .inputBlock {
                display: inline-flex;
                width: @button-width;
                input {
                    flex: 1;
                    border-radius: 0.25em 0 0 0.25em;
                    border: 1px solid #adadad;
                    border-right: 0px;
                }
                button {
                    border-radius: 0 0.25em 0.25em 0;
                    //border: 1px solid #adadad;
                    border-left: 0px;
                }
            }
            &>div {
                margin: 10px 0;
            }
            .sidebarButton;
        }
    }
}

