/* General */

.header-container {
    position: absolute;
    width: 100%;
    height: 36px;
}

.content-container {
    padding-top: 36px;
    height: 100%;
}

.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 wrap;
    justify-content: flex-start;
    color: #fff;
    background: #0575bd;
    line-height: 36px;
}

.demo-nav__i {
}

.demo-nav__i:hover {
    background-color: #1b6595;
}

.demo-nav__i_selected {
    background-color: #11547f
}

.demo-nav__i > a {
    display: block;
    padding: 0 50px;
    font-size: 13px;
    line-height: inherit;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

/* Index Page */

.demo-welcome {
    display: flex;
    flex-flow: column;
    height: 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;
    font-size: 14px;
}

.demo-welcome__item {
    display: flex;
    flex: 0 1 210px;
    height: 130px;
    padding-bottom: 15px;
    justify-content: center;
    align-items: flex-end;
    background:#0376b8;
    cursor: pointer;
    font-size: 13px;
    color: #fff;
    font-weight: 500;
    z-index: 1;
    position: relative;
}

.demo-welcome__item:hover {
    z-index: 2;
    color:#fff;
    text-decoration: none;
}


.demo-welcome__item:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #046399;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.demo-welcome__item:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, .5);
}

.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: #669999;
}
.demo-welcome__item_dropdown:before {
    background-color: #2d7474;
}
.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: #80669e;
}
.demo-welcome__item_list:before {
    background-color: #573f73
}
.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: #D49A6A;
}
.demo-welcome__item_other:before {
    background-color: #9b5b26;
}
.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%;
    padding: 0 250px 20px 250px;
    position: relative;
}

.demo-groups {
    position: absolute;
    left:0;
    top:0;
    width: 250px;
    height: 100%;
    overflow: auto;
    padding: 15px 20px;
    border-right: solid 1px #ced3d7
}
.demo-groups__li {
    height: 30px;
    line-height: 30px;
    padding-left: 16px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.demo-groups__li:before {
    content: '•';
    position: absolute;
    left: 0;
    color: #70787f;
    font-size: 18px;
    line-height: 30px;

}
.groups-link {
    font-size: 13px;
    font-weight: 500;
    color: #4d4d4d;
}
.groups-link:hover {
    text-decoration: none;
}

.demo-content {
    width: 100%;
    height: 100%;
    padding: 20px;
    overflow: auto;
}
.demo-content__function {
    position: relative;
    padding: 20px;
    box-shadow: 0 0 3px #999;
    margin-bottom: 10px;
}
.demo-content__description {
    padding: 5px 0;
    font-size: 13px;
    line-height: 18px;
}
.demo-content__code {
    margin: 10px 0;
    overflow: auto;
}
.demo-content__code pre {
    margin: 10px;
}

.demo-cases {
    position: absolute;
    right:0;
    top:0;
    width: 250px;
    height: 100%;
    overflow: auto;
    padding: 20px;
    border-left: solid 1px #ced3d7
}

.h3-demo{
    padding: 15px 5px 10px;
    line-height: 14px;
    font-size: 13px;
    font-family: monospace;
    font-weight: 500;
    color: #182026;
    cursor: default;
    position: relative;
}

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

.demo-list-canvas__view {
    position: relative;
    height: 300px;
    border: solid thin #64aad0;
}

.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 #64aad0;
    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: 12px;
    bottom: 0;
}


.l-field_textarea {
    height: auto;
}

.demo-popup {
    z-index: 555;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 400px;
    height: 100px;
    background-color: #FFF;
}

.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%;
}


.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: rgba(236, 236, 236, .4);
}

.demo-split-panel_right{
    background: rgba(220, 220 ,220, .15);
}

/* 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 #ced3d7;
    background: #fff;
    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: #fff;
}

.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: 0px;
    left: 0;
}

.nav-profile__name {
    margin: 18px 0 3px;
    font-size: 16px;
    font-weight: 500;
    line-height: 20px;
    color: #384650;
}

.nav-profile__links {
    padding: 10px 0;
    border-top: 1px solid #ced3d7;
    border-bottom: 1px solid #ced3d7;
}

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

.nav-profile__logout {
    padding-left: 40px;
    color: #0575bd;
    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: #009bfe;
    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==);
}

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