.icon {
    background-repeat: no-repeat;
    background-position: center;
    background-size: 26px;
    height: 30px;
    margin-bottom: 10px;
}
.right {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cstyle%3E.icon-canvas-transparent{opacity:0;fill:%23f6f6f6}.icon-vs-bg{fill:%23424242}.icon-vs-out{fill:%23f6f6f6}%3C/style%3E%3Cpath class='icon-canvas-transparent' d='M16 16H0V0h16v16z' id='canvas'/%3E%3Cpath class='icon-vs-out' d='M6.391 13.694L3.916 11.22 7.135 8 3.916 4.78l2.475-2.475L12.084 8l-5.693 5.694z' id='outline'/%3E%3Cg id='iconBg'%3E%3Cpath class='icon-vs-bg' d='M6.39 12.28l-1.06-1.06L8.549 8 5.33 4.78l1.06-1.06L10.67 8l-4.28 4.28z'/%3E%3C/g%3E%3C/svg%3E");
}
.right-all {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' enable-background='new 0 0 16 16'%3E%3Cstyle type='text/css'%3E.icon-canvas-transparent{opacity:0;fill:%23F6F6F6;} .icon-vs-out{fill:%23F6F6F6;} .icon-vs-bg{fill:%23424242;}%3C/style%3E%3Cpath class='icon-canvas-transparent' d='M0 0h16v16h-16v-16z' id='canvas'/%3E%3Cpath class='icon-vs-out' d='M5 7.684l-2.58-2.58 2.121-2.121 2.018 2.017h.34l2.018-2.018 5.017 5.018-5.018 5.018-2.018-2.018h-.34l-2.018 2.018-2.12-2.122 2.58-2.58v-.632z' id='outline'/%3E%3Cpath class='icon-vs-bg' d='M3.834 10.896l2.896-2.896-2.896-2.897.707-.707 3.604 3.604-3.604 3.604-.707-.708zm5.082.708l3.604-3.604-3.604-3.604-.707.707 2.896 2.897-2.896 2.896.707.708z' id='iconBg'/%3E%3C/svg%3E");
}
.left {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cstyle%3E.icon-canvas-transparent{opacity:0;fill:%23f6f6f6}.icon-vs-bg{fill:%23424242}.icon-vs-out{fill:%23f6f6f6}%3C/style%3E%3Cpath class='icon-canvas-transparent' d='M0 0h16v16H0V0z' id='canvas'/%3E%3Cpath class='icon-vs-out' d='M9.609 2.306l2.475 2.475L8.865 8l3.219 3.22-2.475 2.475L3.916 8l5.693-5.694z' id='outline'/%3E%3Cg id='iconBg'%3E%3Cpath class='icon-vs-bg' d='M9.61 3.72l1.06 1.06L7.451 8l3.22 3.22-1.061 1.06L5.33 8l4.28-4.28z'/%3E%3C/g%3E%3C/svg%3E");
}

.left-all{
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' enable-background='new 0 0 16 16'%3E%3Cstyle type='text/css'%3E.icon-canvas-transparent{opacity:0;fill:%23F6F6F6;} .icon-vs-out{fill:%23F6F6F6;} .icon-vs-bg{fill:%23424242;}%3C/style%3E%3Cpath class='icon-canvas-transparent' d='M16 16h-16v-16h16v16z' id='canvas'/%3E%3Cpath class='icon-vs-out' d='M11 8.316l2.58 2.58-2.121 2.121-2.018-2.017h-.34l-2.018 2.018-5.017-5.018 5.018-5.018 2.018 2.018h.34l2.018-2.018 2.121 2.121-2.581 2.581v.632z' id='outline'/%3E%3Cpath class='icon-vs-bg' d='M11.459 11.604l-3.604-3.604 3.604-3.604.707.707-2.896 2.897 2.896 2.897-.707.707zm-3.668-.708l-2.896-2.896 2.897-2.897-.708-.707-3.604 3.604 3.604 3.604.707-.708z' id='iconBg'/%3E%3C/svg%3E");
}

.up {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cstyle type='text/css'%3E.icon-canvas-transparent{opacity:0;fill:%23F6F6F6;} .icon-vs-out{fill:%23F6F6F6;} .icon-vs-bg{fill:%23424242;}%3C/style%3E%3Cpath class='icon-canvas-transparent' d='M16 16h-16v-16h16v16z' id='canvas'/%3E%3Cpath class='icon-vs-out' d='M1.586 11l6.414-6.414 6.414 6.414h-12.828z' id='outline'/%3E%3Cpath class='icon-vs-bg' d='M12 10h-8l4-4 4 4z' id='iconBg'/%3E%3C/svg%3E");
}

.down {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cstyle%3E.icon-canvas-transparent{opacity:0;fill:%23f6f6f6}.icon-vs-out{fill:%23f6f6f6}.icon-vs-bg{fill:%23424242}%3C/style%3E%3Cpath class='icon-canvas-transparent' d='M16 16H0V0h16v16z' id='canvas'/%3E%3Cpath class='icon-vs-out' d='M1.586 5h12.828L8 11.414 1.586 5z' id='outline'/%3E%3Cg id='iconBg'%3E%3Cpath class='icon-vs-bg' d='M8 10L4 6h8l-4 4z'/%3E%3C/g%3E%3C/svg%3E");
}

.end {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgAgMAAACf9p+rAAAACVBMVEUAAAAzMzMyMjIH2j3VAAAAA3RSTlMA/4CE6rqMAAAAc0lEQVR4Ae3NoQ0CUBAFQXLuCrmSHkFSCk1cvySo0QQB5I9dsZfjDXk54YTPhQ2uhAluhA7uhAoeTtaFxoXahSoutC40LtQuVHGhdaFxoXahigutC40LtQtVXGhdaFyoXajiQutC40LtQuXivyT63XB8iycdcJ0OPAoNRAAAAABJRU5ErkJggg==');
}

.top {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgAgMAAACf9p+rAAAACVBMVEUAAAAzMzMyMjIH2j3VAAAAA3RSTlMA/4CE6rqMAAAAd0lEQVR4Ae3ToQ2AABAEwQ+OQijpCJJSaIJ+sRNAYYDk154YddV9sMT+NrzRsBXRuBbRtBTRPhdBJCASCYhEAiKRiEiISEREIiISEZE4IxAiEiISIhJXBEJEQkRCREJEQkTiDoEQkRCREJEQkQAxT9NDD8+Gb9YdVAydDo2xY38AAAAASUVORK5CYII=');
}

:host fieldset { height: 550px; }

:host .v-center {
    justify-content: center;
    display: flex;
    flex-direction: column;
}
.columns-box {
    height: 510px; padding: 0; border: 1px solid #d0d0d0;
}

:host legend {
    font-size: 0.9rem;
    font-weight: bold;
}