/* General */
:root{
    --theme-colors__background: #ffffff;
    --demo-nav__i_selected: #11547f;
    --demo-welcome__item-bg-clr: #0376b8;
    --demo-welcome__item-box-sh1: rgba(0,0,0,0.16);
    --demo-welcome__item-box-sh2: rgba(0,0,0,0.23);
    --demo-welcome__item-hover-box-sh1: rgba(0,0,0,0.25);
    --demo-welcome__item-hover-box-sh2: rgba(0,0,0,0.22);
    --demo-box-sh1: rgba(0,0,0,0.12);
    --demo-box-sh2: rgba(0,0,0,0.24);
    --demo-welcome__item_dropdown-bgc: #669999;
    --demo-welcome__item_dropdown-bgc-before: #2d7474;
    --demo-welcome__item_list: #80669e;
    --demo-welcome__item_list-before: #573f73;
    --demo-welcome__item_other: #D49A6A;
    --demo-welcome__item_other-before: #9b5b26;
    --h3-demo-color: #182026;
    --demo-list-container-brdr-color: #64aad0;
    --demo-split-panel_left-bgc: rgba(236, 236, 236, .4);
    --demo-split-panel_right-bgc: rgba(220, 220 ,220, .15);
    --left-menu__resizer-b-color: #8f979c;
}
body {
    display: flex;
}

.wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1;
    width: 100%;
    overflow: hidden;
}

.app-region-container {
    display: flex;
    width: 100%;
}

.header-container {
    width: 100%;
    height: 40px;
    z-index: 3;
}

.content-container {
    height: 100%;
    display: flex;
}

.popup-container {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 100%;
}

.visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}

/* NavBar */

.demo-nav {
    display: flex;
    flex-flow: row nowrap;
    flex: 0 0 auto;
    justify-content: flex-start;
    color: var(--theme-colors__main);
    background: var(--theme-colors__primary);
    line-height: 36px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    overflow-x: auto;
    height: 40px;
}

.demo-nav__i {
    color: var(--theme-colors__main);
    padding: 0 15px;
    font-size: 15px;
}

.demo-nav__i:hover {
    background-color: var(--theme-colors__primary_strong);
}

.demo-nav__i_selected {
    background-color: var(--demo-nav__i_selected);
}

.demo-nav__i > a {
    display: block;
    padding: 0 50px;
    line-height: inherit;
    color: var(--theme-colors__main);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

/* Index Page */

.demo-welcome {
    display: flex;
    flex-flow: column;
    height: 100%;
    width: 100%;
    justify-content: center;
}

.demo-welcome__ribbon {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    padding: 20px;
}

.demo-welcome__doc-navi {
    text-align: center;
    width: 100%;
    display: inline-block;
}

.demo-welcome__item {
    display: flex;
    height: 350px;
    width: 270px;
    padding: 15px;
    margin: 20px;
    justify-content: center;
    align-items: flex-end;
    background: var(--demo-welcome__item-bg-clr);
    cursor: pointer;
    color: var(--theme-colors__main);
    font-weight: 500;
    z-index: 1;
    box-shadow: 0 3px 6px var(--demo-welcome__item-box-sh1), 0 3px 6px var(--demo-welcome__item-box-sh2);
    position: relative;
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    text-decoration: none;
    font-size: 1.5rem;
    border-radius: 4px;
}

.demo-welcome__item:hover {
    z-index: 2;
    color: var(--theme-colors__main);
    transform: scale(1.1);
    text-decoration: none;
    box-shadow: 0 14px 28px var(--demo-welcome__item-hover-box-sh1), 0 10px 10px var(--demo-welcome__item-hover-box-sh2);
}

.demo-welcome__item:active {
    z-index: 2;
    color: var(--theme-colors__main);
    transform: scale(0.9);
    text-decoration: none;
    box-shadow: 0 1px 3px var(--demo-box-sh1), 0 1px 2px var(--demo-box-sh2);
}

.demo-welcome__item:after {
    content: '';
    position: absolute;
    left:0;
    right: 0;
    top:0;
    bottom: 0;
    background: no-repeat 50% 42% url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAYAAABxLuKEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDNjJCNTdCMDJGQjAxMUU1QjI5M0FGMkUzOEI3NUEyRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDNjJCNTdCMTJGQjAxMUU1QjI5M0FGMkUzOEI3NUEyRiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkM2MkI1N0FFMkZCMDExRTVCMjkzQUYyRTM4Qjc1QTJGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkM2MkI1N0FGMkZCMDExRTVCMjkzQUYyRTM4Qjc1QTJGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+ayJ3uQAAApxJREFUeNrsmstqFEEUhmc0MYHEZGVQUBASL4GIr5DsRhc+gE/g2oUbwbWQLLKRgHtxJ4yZCBp3yUbciEnMjKDCNBIVBUMIuRht/9IaLMa+VLqrYU7Nf+Cjm56ebvrj1KlLdzkMwxLj/yhTDMVQDMVQDMVQDMVQDMVQDMUwKIZiKKaYOJLwWwV8B2FO9sFzMOBLxlTBNYf3ug4e+pAxPY7vddKXpvTK8b1ugUkfmtINMFfAPT+D7Yjjx3LUoQH9/6jYBdPgjisxV8GCJ52M6gCO621uMRNgxRMxO2AIHLgQoy606YGUr+A2uO9ygKfGMcMW13kEZnXB3uqGke9rcCnlGk/BFT2Y64qRr4qmxTVmDCmXddaEHc5PEIC74GjkU6mMSWAuTI+z+tzT4EsoL25GPbuLjPmmt1PghMBWUymiKQVGsR0XWk62ixDTMPYvCBXzIouYIOX3dWP/olAxtSxiPuoKHhd1YyZ+TqCUd2A1i5gfYMMiY0ZBry/ZYiMmrTnVhTejah4xzYTpwoZgMWoeuFyEmLqxL7GrXtClwrmYdeFddS3PXClJTENwxqhMeZJXTFzxfaO3pyyXJjopltLWmlzUGInNqJp32aE1SWyfT6i10w+CC2/NhZio5vS29G/9VFpXrdax37sS00zoqqWJmbc5qRvFPC5STGsMMwjOCJLyCbx0KSaIyZjzoCys6P4qKmNCY3AnrUeatz0xi5im0X1Lqi/qbeSiazFBTOGVNLhb1HKcitkr/f1KoX3yOO5jMzqMGLM5tTJGvaiSspx5YDPazSqm0ZYx/aBPiJgHuqu2j5Q3kSZjYA2MGMeedfhbxk1wD/Qf4jn/wM9ZY4JiKIZiKIZiKIZiKIZiKIZiKIZBMRRDMQXFbwEGAARGJ0FLAirMAAAAAElFTkSuQmCC');
    z-index: 3;
}


.demo-welcome__item_dropdown {
    background-color: var(--demo-welcome__item_dropdown-bgc);
}
.demo-welcome__item_dropdown:before {
    background-color: var(--demo-welcome__item_dropdown-bgc-before);
}
.demo-welcome__item_dropdown:after {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAYAAABxLuKEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpDQThBQUZDNzJGQjAxMUU1Qjg2RTgzMzBCNjIxOEUxOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpDQThBQUZDODJGQjAxMUU1Qjg2RTgzMzBCNjIxOEUxOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkNBOEFBRkM1MkZCMDExRTVCODZFODMzMEI2MjE4RTE5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkNBOEFBRkM2MkZCMDExRTVCODZFODMzMEI2MjE4RTE5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+fZy4RgAAAZdJREFUeNrs20FKw0AUxvHGjeBO3YvgMXKSHsClp3Hr3pO49QaKdV2ioN1V4gtEkJGamclL8mbm/+CDFNLX9EctX9VWbduumL9TAQMMMMAAAwwwwAADTDfHki/JXvl6zOw9iniQtaSRvPfHWmNqb8wrZis574+bX8djx9TeGBj3DpXSEzC1FxhggHGncW6fATNzj0kBpustJwPnfPzXa3KE6brKnQfMTnItuS8FZhvQgQ72mhxhQp9QBQwwy8BE9YISYKaaJGFG94IcYVR6QY4wKr0gRxiVBwIGGGDmgtHqR9nBTNWHkoSZoh/pXG8HM5DQWXlmLdl57Pvsz/Xduwm41qdDe5Z8xUzVj2rJreRy4LwXyY3kwdqPkun3rhJgTp3bb8CM6EfAAAPMbDAbyYXnRTxLrkqBUekFOcKY/kxjCSaqF5QAY+r3JsAAAwwwM/ej5GGm6kfJwyzVl5KD0epH2cHwf77AAJMfTMz3lV6dfqE1tvYG/CHrJ7XksU8dcf8k9vKdSMX3GGCAYYABBhhggLEw3wIMAEGAPGvWVe6yAAAAAElFTkSuQmCC');
}


.demo-welcome__item_list {
    background-color: var(--demo-welcome__item_list);
}
.demo-welcome__item_list:before {
    background-color: var(--demo-welcome__item_list-before);
}
.demo-welcome__item_list:after {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADkAAAA3CAYAAAC2EuL1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDowMkRFQUYyNjRGM0QxMUU2QkQ3Qjg1QzA3RjI0MTlFRiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDowMkRFQUYyNzRGM0QxMUU2QkQ3Qjg1QzA3RjI0MTlFRiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjAyREVBRjI0NEYzRDExRTZCRDdCODVDMDdGMjQxOUVGIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAyREVBRjI1NEYzRDExRTZCRDdCODVDMDdGMjQxOUVGIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+gtbqnAAABZpJREFUeNrMmnuIV0UUx+9vLTVTk1Bho11i10ebuQlWS2VZasL6jxSiEAjZQxKzB7ElBUHWH7GrWalbQaVFEa5roZL+fOW6GllpD3ssuYa2rmW/KNtHmZt1OwPnwuE0z3tnfuyB7x+/uTNz7+d3586cc2ZycRxHGhsHagdpKwWyStBc0DTQBNBoUB+oAGoF3Qf606onAanQDaAu0JugAZp6vjUG1AT6J5bbH6DpLn2qLkwBdZOON4AGFgHwXtCZWG29oJtd+5UV3gjqkdzghcCA9bHeevDZoqyQN+G/JbOOgIDPGQC7cHRFWSFLQIc1NwoFeb8B8HfQ9Q795UxvshT0jeJmp0BlngEng84aAGsc+rsHVGfzTY4EHVDc9HuPoOIf/1QD+C9+Prb9LcI2B21n1xKcph8FLQSdCAA6wzBMXT6PBxEwxqXnQhtIrrEBQF8yQJ4Djbfop07S9oo0kAlop0fQA7HZfgBVaPp4QtHuurSQQuNAJz2BfhnbmRi2lZL2yzRtxmSBjHAI/egBdHdsbydwJCVtnzVMWBdkhfQF2hC7mXAI1oJaDfW+tp1dbXQ56KcMoFPiMPaMT0ihKnQS0oK2eQb8G1TO71OSMeZrw3ivgL8rQC2gMsv2WzzHoI2gDpd40kViXfrZ8Y1OxO/Ml30HGuYST6bRBFDBEvRS5lxktYLOcfAdUVxpAToK9K1HwE78g6NiQQpVa0AvAn3sEbAVI6eo2JAq0LGWDkAHhlg6+w30sG3uKWfI1mWxq0C7QCMd2hwC1YJ6QbNAM0ETMVN3Bmfz7aAmUI9tpyEhhU3C9OEwi7qHcTn61fdDlATOnZ4EdVrUOwKaEQIwNORloP2gKkM98SdMB/0S6kFCDddqUB5UaqjXBboadDTkcArxJqeC9loAChuOE0xY87x03GbIgKvivyXYXuRm1mFg/hbP1fjIu2bVQszL2Fie1RWgj0tSIntBQ/oL5JMOb+5dTEfeqfhTBPAhsuHTkhU0K5zwONY4AIoM/VDSfoEENI/X5pNrH2QBzQI4GLTRMVKokDjrnZKNnRqyy5XkU3elBU0LOAKHka31gW5hfQxh32Af802rSeI4se08SRUKstQhnZjYYkk/K8n11fjwefbmqyT51TyOomCQIu96zBHwVUVfLSxkGoRvt4WlIpMc6tOkfBvW9w55DQufbOwjzQ71YlZ3M9Ydzobxccwk8Le/1Xb32xZwpmL3WWenyMOptJy1acIZWwTXn5PydvxMxNLzCil/3wbUBvAOwx6izM46bH1z0HUIMwoTxYl9hWVix+0NUr7JBGp6gIfIFO5iSxy/9RWs/csIegm+xcQ+w7c8AA9rJPaeDlS3Qbo8Zd5lradzAyuwvBx3t+h3PhShtpDyjSpQ2c3Ox7M7aexgmnVMA7qMnO2hu2l7cCYWS8lOUt6Mz6+FHIwfc9rcZ7kHP3gl63cpSWAX2DIyEGH3SSYvKSRfjF1M+Ji3eoxoOOgDWD4JdJp9i+fhd/oJKV9PQX0ACnvMc1wq5oTnWWRyN16rYdsL7yDQxeyITlIeJR02K46XtFsANsvOzgQAPYfLmbg2Fc/YJfYaWXboTtnbAjRZB7ntJ5snizSAbeihhEpS5/C4GwW9nTgodP1eRfZZjpLy+ojNTondxY67/CWp000c6Cgw6IvM0ajFa7MZaAOWX0sjmkiRkn+d+ayy6H1OEQBVoGKoTsNr81jg3cgC+X2RJvG0Df3E05JrDUUEpKCryDP0kqMsCxSemXDuK0WFLxxn0h1xcQ/5ctDVbHKcjNeekswXZcnsutQBcI+P7JkH0DXMCall0YnwcUfTdVLkNo9YAO7uB4AUtFHxnB9ieuZ/Hk+F4STGhn4EqAPdKUtIc7fuEYzKu3EYbMWseK6fAVLQOnx79aoo5D8BBgAwEUe7YtuSDQAAAABJRU5ErkJggg==')
}


.demo-welcome__item_other {
    background-color: var(--demo-welcome__item_other);
}
.demo-welcome__item_other:before {
    background-color: var(--demo-welcome__item_other-before);
}
.demo-welcome__item_other:after {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAYAAABxLuKEAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyMDJCRjlGODJGQjExMUU1OEFENzlFRTczQzY2M0NCQiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyMDJCRjlGOTJGQjExMUU1OEFENzlFRTczQzY2M0NCQiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjIwMkJGOUY2MkZCMTExRTU4QUQ3OUVFNzNDNjYzQ0JCIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjIwMkJGOUY3MkZCMTExRTU4QUQ3OUVFNzNDNjYzQ0JCIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+emlN5gAABVxJREFUeNrsm2loFVcUx8ctpIIaq1FTMbGoVWyC4o7Yihql1QZqGxUVoVqpC0W/adBaqKJdvrQFEVpRgta2VEytVSJaRYNLXKoYI/aDjSaaGvctMbRWX/+Hd8RhOvfOvDf3zgx4D/xg3mx35j93Oefc+1okEgnL2P+tpZHACGOEMcIYYYwwRhgjjBHGCBOGvQuOgUdgeRQP0DqGoqwEK3i7FnwXxUO0iFmsNAn8Ss8F7oAhoMY0Jcv6mEUh+zQqUeJWYwpAFW8/Ad3ADdP5WtYY23ZNlKLETZh823azGa6fWVfjx7jbi0YYd7tj274f9cPodvBeATPBW6AHuAp+A6XgrOPc1Xz+Q7DEcawzeI/9nF58n11gC/hTy5PTcK2BQrAbPEmI7RCYBV6Q3GcYKAXNgnvQ/Q+CGaClyndQ7ccMBl+BUSk2oa2ggkOA9mAgeIfv59fOcVy1g753XBy8tuBzsDAG/VYlmGdzFiMTpj8oA31j1JH/w+HFF+nWnqDCvAF+Au1imr6ggHQGaAxzuJ4KfhGIUhmBCKdd9hWBgyA7rFFpLPhbMFKcBpngbCI82w86gCuC42dAdirvmI4ofcBdyfD5Gp83EjwOQZRHIJ/LnOwhXoYuYdqAk5LCf3Ccvy4EYb52lPlzCucqE6ZEUmgTyHWcT9W7XqMo10GWo8zu4J6kRheqFqarpECyFYLrijUKM1dQ5kLJNee55isTZo2ksEvc4Yqu3aFBlBOSMID2H5ZcO0eVMK3BNUlBUzyu7wEeKBSFmsQIjzLzJSNntSphJnj09n7usVihMKU+y1wluccQ2bV+0w7jPYLAz3zcoxW76hn8+ziHEn5sLujtKHOpj+v+Zdze801wMqiDV6Ghj6BqPtxH2W97pC/StXIVaYe/QI4GN76WUwu3BMd7squfpansnkFjpU6a4ps8sMk2yWa3DA5QszSV3UlFEJmhMfibCEpc9lPKYKjGctuqEOahy77rYJ+VXJEQ1FaB0bbfk8EiBfelGc06H8n3tIW56LKPUg6FnH5oDPgCNGL9aCWnZV8GGwXNK9VZh7HcXPcI+pjAwpxy2fc0r7udq3xVwBchUb5X1K8cASM4F0Pv2NHlnBMq8jHzBEPeIId3TDHKxUR0VsleuD1UWCA4d7qK4Tqbh2yno7QNFLvUQqrC4zjbT8P8qxrmsG5ayVVXdfz1K1zmmGg4PsMzD3ZrAi9JJ/ZSCCLLBMoX+bi2VkPt2Okjd3RUcO1ar2dOJee7WpBx3+xw11O1deAb0GDbd4GnY94PcN813M84rZmPKc35bhJ8gQsgL80as8B2XmfQ0fZ7VJo1ZqbkuhIdM5E0h1xtuS/ZqGNn7ZzLsVxJH3NT0tYzuS8Q+VYNLvupfysXOKWH2V96rGOW4HVJnoNyLlM1zYf7fbYmwbNdBjk6ZwmI2R4R72ZHkwiDiaBRkhsuCGtSfw5YL3ESqYl8BDZwTkRkuZIJsdsCr9tpH4IvBc21nmdMq8NcBjJJMsdkTz5Pk+RnZVMsWzzKp0m0rZLrD4Bu6bxb0JUJtHhnOGfjRNaP46A/+Mt2UODctQEfcEdfLJjU/4RjuYYoFw5ROLDUZ8KbzvkWjOZalEqN6c7l1HjUkoJEzBYOkfu/jHO0mT7Ov8rDbi/BcVqOthd0AQOs5JJXUdR9jGtJuYoX0bUynF5kPnfQeRqTTU0c3a9VvcJC95J5+rojreTfbAo9vrhfuwL2c/+2U5BEi70wTiOPeRg3iz5WciVnDg/XrTgP84CH91vccV62kkvoqVn9znGUdovb33JiY+avf0YYI4wRxghjhDHCGGGMMEaY58P+E2AAPB7bHdBP69oAAAAASUVORK5CYII=');
}

/* Demo Page */

.demo-page {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;
}

.demo-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

@media screen and (min-width: 1000px) {
    .demo-content_container {
        flex-direction: row;
        padding: 1rem;
    }
    .demo-content__function {
        max-width: 50%;
    }
    .demo-content__code {
        margin-left: 15px;
    }
}

@media screen and (max-width: 999px) {
    .demo-content_container {
        flex-direction: column;
        padding: 1rem 0 0;
    }
    .demo-content__function {
        max-width: 100%;
    }
    .demo-content__code {
        margin-top: 15px;
    }

}
/*-----------


--------------*/
.demo-content__present{
    max-width: 100%;
    position: relative;
    flex: 1 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.demo-content__present .toolbar-container {
    flex: none;
}

/*-------------------------*/
.demo-content__attributes{
    position: relative;
    padding: 10px;
    margin-top: 15px;
    box-shadow: 0 1px 3px var(--demo-box-sh1), 0 1px 2px var(--demo-box-sh2);
    overflow: auto;
    flex: 1;
    background-color: var(--theme-colors__main);
    display: flex;
}

.demo-content__attributes:empty {
    display: none !important;
}

.demo-content_container {
    flex: 1;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
}
.demo-content__function {
    width: 100%;
    max-width: 100%;
    position: relative;
    padding: 10px;
    box-shadow: 0 1px 3px var(--demo-box-sh1), 0 1px 2px var(--demo-box-sh2);
    overflow: auto;
    flex: 1 1;
    background-color: var(--theme-colors__main);
    min-height: 30%;
}
.demo-content__description {
    font-size: 1.5rem;
    line-height: 1.5rem;
    flex: 2;
}
.demo-content__toolbar {
    flex: 1 0 40px;
    overflow: hidden;
}
.demo-content__toolbar .toolbar-menu-actions{
    margin-left: auto;
}
.demo-content__toolbar .toolbar-buttons_container__const{
    margin-left: unset;
}

.demo-content__code {
    max-width: 45%;
    overflow: auto;
    box-shadow: 0 1px 3px var(--demo-box-sh1), 0 1px 2px var(--demo-box-sh2);
    flex: 1 1;
}
.demo-content__code pre {
    margin: 0 !important;
    height: 100%;
}

.demo-content__code .code-editor,.demo-content__code .dev-codemirror  {
    height: 100%;
}

.demo-cases {
    position: absolute;
    right:0;
    top:0;
    width: 250px;
    height: 100%;
    overflow: auto;
    padding: 20px;
    border-left: solid 1px var(--theme-colors__main_strongest);
}

.h3-demo{
    line-height: 14px;
    font-size: 13px;
    font-family: monospace;
    font-weight: 500;
    color: var(--h3-demo-color);
    cursor: default;
    position: relative;
}

.editor + .h3-demo{
    margin-top: 1em;
}

.demo-list-canvas {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 100%;
    overflow-y: auto;
}

.demo-list-canvas__view {
    position: relative;
    height: 300px;
    min-width: 400px;
}

.demo-list-canvas__view_search {
    position: relative;
    height: 300px;
}

.demo-list-scrollbar {
    position: absolute;
    right: 0;
    top: 0;
    width: 12px;
    height: 100%;
}


.demo-list-search {
    float: right;
    width: 250px;
}


.demo-list-container {
    border: solid thin var(--demo-list-container-brdr-color);
    position: absolute;
    top: 45px;
    bottom: 0;
    left: 0;
    right: 0;
}

.demo-list-container__scrollbar {
    position: absolute;
    right: 0;
    top: 0;
    width: 12px;
    bottom: 0;
}

.demo-list-container__search {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
}


.l-field_textarea {
    height: auto;
}

.demo-popup {
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 400px;
    height: 100px;
    background-color: var(--theme-colors__main);
}

.message-service__button {
    display: block;
    margin-top: 10px;
}

.localization__header {
    font-size: 14px;
    font-weight: 600;
    margin: 10px 0;
}

.l-item {
    font-weight: 500;
}

.loading-behavior-view {
    height: 100%;
    width: 100%;
}



.demo-view-region{
    float: none !important;
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 0 10px;
}


.demo-split-panel{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 300;
}

.demo-split-panel_left{
    background: var(--demo-split-panel_left-bgc);
}

.demo-split-panel_right{
    background: var(--demo-split-panel_right-bgc);
}

/* Views used on demo pages */

/* ------------------------------ Profile navigation bubble ------------------------------ */


.nav-profile_test {
    width: 300px;
    padding: 18px 20px 0;
}

.nav-profile {
    width: 300px;
    padding: 18px 20px 0;
    position: fixed;
    top: 53px;
    right: 9px;
    border: 1px solid var(--theme-colors__main_strongest);
    background: var(--theme-colors__main);
    z-index: 180;
    display: none;
}

.nav-profile:before {
    height: 10px;
    background: no-repeat 0 100% url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAYCAYAAADzoH0MAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDoxYmNlMTA1YS1kOTcyLTE1NDctYjFhZC1iMTQxNjRiYzYyYjMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QURCN0IxNzE2RTVEMTFFNDk2QTdCMzNBN0RDNjU5NDciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QURCN0IxNzA2RTVEMTFFNDk2QTdCMzNBN0RDNjU5NDciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjljNmMwOWQ3LWFlYzItZmE0YS05YWI3LTRmNjMyYTZlNDBlNSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxYmNlMTA1YS1kOTcyLTE1NDctYjFhZC1iMTQxNjRiYzYyYjMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz64Ue/dAAABj0lEQVR42tySzUrDQBDHN5ttmq8mKcmmaW0PHj36ApYKHsWjID6AoHgQ8eLBkwi9CB6lF/E5VPoM3kPqsfRQeil+tOuMRCm2Iam5ObBksjP/38zujiSEIMrZI4lNkGwmvbU3vxz6O5BFPPtD0xLSYjRrYhKYZqyW2BVb5rwLE/AV8hglOe0fAFi3+5QLkPsVEucAOsNYMf59bTZbH5nvAMQyfMr1euMS1hX4bryXDoBE3LODoHaoafqxrhtH1WrtFIGLIHSB2OK8smua5jnnXMJlmqWTIKgeIDjOmQdAAOfe8Dy+bVnWNQhZoVAgjDECPgXIhe9X9rHALITOiHXHKW+UStaN67pFRVF+qiAIgRBrQ4Ed2DK/IXKr1USxCsF11/XuQOzruj53WbIsE4CyyWSyJUnS83g8fun1onekFOGi1kB87zjOimEYiW+uqirxPM+wbecWu8Wu4ZxKg3O/A+dehZU6OJqmEeiyDG4HhnCPhGH4MBgMxLI2Go1EFEUh6ff7Yjqdir/YcDgUnwIMAE9Vza6XoQGiAAAAAElFTkSuQmCC');
    content: '';
    width: 0;
    position: absolute;
    top: -27px;
    right: 6px;
    border: solid 13px rgba(0, 0, 0, 0);
    border-bottom-color: rgba(0, 0, 0, .25);
}

.nav-profile:after {
    display: none;
    content: '';
    width: 0;
    position: absolute;
    top: -26px;
    right: 6px;
    border: solid 13px rgba(0, 0, 0, 0);
    border-bottom-color: var(--theme-colors__main);
}

.nav-profile__user {
    padding: 0 0 15px 0;
    overflow: hidden;
    position: relative;
}

.nav-profile__avatar {
    width: 100px;
    height: 100px;
    margin-right: 10px;
    float: left;
}

.nav-profile__avatar .user-avatar {
    top: 0;
    left: 0;
}

.nav-profile__name {
    margin: 18px 0 3px;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: var(--theme-colors__text);
}

.nav-profile__links {
    padding: 10px 0;
    border-top: 1px solid var(--theme-colors__main_strongest);
    border-bottom: 1px solid var(--theme-colors__main_strongest);
}

.nav-profile__link {
    font-size: 14px;
    line-height: 28px;
    font-weight: 500;
    display: block;
}

.nav-profile__logout {
    padding-left: 40px;
    color: var(--theme-colors__primary);
    font-size: 16px;
    line-height: 60px;
    display: inline-block;
    cursor: pointer;
    background: no-repeat 0 50% url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAYCAYAAAARfGZ1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWtJREFUeNq0lkFnA0EYhrMzmlMISyml9NTfUHJaltLaQzWn/oPSU+iPCKXX/oAcqtUSDSWE9pJLf0IopZRSQq6jfb96NzaSlZnk6/AQZr8nM7PfvEm00XqpBIwfEPk+bCr/OMrkcaAn9pFbcAU6gfIO62yZXCZuwR5oBsqbrLsvfkFR3gZVcAQmgfIJ6yw9M/IEZOAUuBXfn2N9Rt9UfgnOwXjNBpH6M/r+5A1OPCl1YJ+7aBhu40a5xe/AoeH5DJTlsvoDkW+Dd2X5G9gxvF3fynLxxSb/oCwX31jkH7IFzyLfRNyVoxH5c970iiOVlyryB3CiLBdfV+RDZoLW6hP6hoa36QJcg/qa4jo94nOm0PQ95rJdUWxZ36NvJnJb3MUjqAWKa6xz9MzluUwcgxF4Zeb4jIzPj1g/jeyo5Nc/Zeg7htqAEfEFNnkvEnZFlWfcn7sUS/5apFzZPjNoC3zy4kmXdRdJ8/ErwACTxklVKUyU0QAAAABJRU5ErkJggg==);
}

.nav-profile__logout:hover {
    color: var(--theme-colors__primary_fade);
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAYCAYAAAARfGZ1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAWtJREFUeNq0lkFnA0EUxzcz5BTCUkopPfUzlJyWpaT2UM2p36D0VPohSuk1HyCHSiREQwmhp1z6EUIppZQSch3t/8V/240kNZO8Pn4sM++3M7NvXlKKml9RQMjkku9kE/1jrJPHgZ7YR27BHWgFylvMs+vkMtAGh6ARKG8wr1t8QVF+A8rgBMwC5TPmWXoW5AnIwDlwG34/x/yMvh/5LbgE0y0LRPIv6JvLaxx4VKrAIXdRM9zGvXKJd0Dd8HxGynJZ/bHI98CrsvwF7Bverk9lufhikz8oy8U3FfmbbMEzybcjHsjRiPwpL3rFSOWjirwHzpTl4uuLfMyeoLX6hL6x4W26Bk1Q3VJcpUd8zhSKfsC+bDcUW+YP6FtouVfcxQOoBIorzHP0LPVzGTgFE/DMnuMTGedPmO9+63b1r3/Kpu/Y1EZsER9gh/ciYVWUecbD5Uvx91+LlCs7Yg/aBe+8eFJl/VXSPL4FGAArCkpvl7H8hwAAAABJRU5ErkJggg==);
}

.demo-content_wrapper {
    display: flex;
    flex-flow: column nowrap;
    flex: 1 1 100%;
    min-width: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: var(--theme-colors__background);
}

/*-----//------*/

.editor_container, .canvas-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: auto;
}

.editor-region-wrp{
    max-height: 100%;
    width: 100%;
    flex: 0 1 auto;
    display: flex;
}

.body-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    overflow: hidden;
}

.header-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1rem 1rem 0 1rem;
    height: 3rem;
}

/* resizer */

.left-menu__resizer{
    cursor: e-resize;
    top: 0;
    bottom: 0;
    width: 1px;
    padding-left: 5px;
    right: 0;
    position: absolute;
    z-index: 5;
    box-shadow: 0 1px 3px var(--demo-box-sh1), 0 1px 2px var(--demo-box-sh2);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.left-menu__resizer:before,
.left-menu__resizer:after{
    content: '';
    width: 1px;
    height: 20px;
    position: absolute;
    left: 1px;
    top:50%;
    margin-top: -10px;
    visibility: hidden;
}
.left-menu__resizer:after{
    left: auto;
    right: -5px;
}
.left-menu__resizer:hover:before,
.left-menu__resizer:hover:after{
    visibility: visible;
}
.left-menu__resizer{
    border-right: 1px solid transparent;
}
.left-menu__resizer:hover{
    border-right-color: var(--left-menu__resizer-b-color);
}
.left-menu__resizer:before,
.left-menu__resizer:after{
    background-color: var(--left-menu__resizer-b-color);
}

/* end of resizer */