* {
    margin: 0px;
    padding: 0px;
}



html,
body {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    padding: 0;
    margin: 0;
    background: #f8f8f8;
    width: 100%;
    height: 100%;
    --overflow: auto;
}

a, a:visited, a:focus, a:active, a:hover {
    outline: 0 none !important;
}

#wrapper {
    width: 100%;
    overflow-x: hidden;
}

#mainLayoutContainer {
    height: auto;
    margin: 0 auto;
    min-height: 100%;
    min-width: 100%;
    width: 100%;
}

#sub-container {
    position: absolute;
    margin: 0px;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 37px;
    z-index: 0;
    display: block;
    visibility: visible;
    overflow: hidden;
}




#MainContent {
    position: absolute;
    margin: 0px;
    left: 0px;
    right: 0px;
    top: 40px;
    bottom: 10px;
}

.page-container {
    margin: 20px;
}


/* horizontal panel*/

.panel-container {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    height: 100%;
    /* avoid browser level touch actions */
    xtouch-action: none;
    box-sizing: border-box;
    border: 0px solid red;
}




.doco-treeclass-panel-left {
    flex: 0 0 auto;
    /* only manually resize */
    padding: 10px;
    width: 400px;
    min-height: 200px;
    min-width: 300px;
    background: #fff;
    max-width: 50%;
    position: relative;
    box-sizing: border-box;
    border: 0px solid green;
}

.splitter {
    flex: 0 0 auto;
    border-left: 1px solid #CCC;
    border-right: 1px solid #CCC;
    width: 5px;
    background: url("/images/splitt.png") center center no-repeat #fff;
    min-height: 200px;
    cursor: col-resize;
}



.doco-treeclass-panel-right {
    flex: 1 1 auto;
    /* resizable */
    /*padding: 10px 25px;*/
    padding: 0;
    width: 100%;
    min-height: 200px;
    min-width: 200px;
    background: #fbfbfb;
    overflow-y: auto;
    box-sizing: border-box;
    border: 0px solid green;
}

.doco-treeclass-panel-left-resizebutton {
    position: absolute;
    left: 50px;
    top: 0;
    bottom: 0;
    width: 30px;
    height: 38px;
    background: url('/images/f18Main/menu-icon.png') center left 0 no-repeat #fff;
    border: 0;
    box-sizing: border-box;
}


    .doco-treeclass-panel-left-resizebutton:hover {
        background-color: #f6f6f6;
    }

.panel-expanded {
    background-position: 0px 0px;
}

.panel-collapsed {
    background-position: -30px 0px;
}


.doco-treeclass-panel-right .header1 {
    color: rgb(80, 116, 165);
    font-weight: normal;
    text-transform: uppercase;
    overflow: hidden;
    font-size: 1.1em;
    width: 95%;
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(220, 218, 218);
}

.doco-treeclass-menupanel {
    font-family: 'lato', Helvetica, Arial, sans-serif;
    font-size: 13px;
    background: #fff;
    position: relative;
    margin-left: 0;
    border: 0;
    box-sizing: border-box;
}
/*tree*/

.doco-tree-container {
    overflow-y: auto;
    overflow-x: hidden;
}

.doco-tree-folder{
    min-width:16px;
    min-height:16px;
    display:table-cell;
    position:relative;
}



.tree-pan {
    position: absolute;
    bottom: 74px;
    top: 140px;
    overflow-y: auto;
    right: 10px;
    left: 10px;
    overflow-x: hidden;
}

.doco-treeview .doco-tree-find-container {
    position: relative;
    display: flex;
    flex-flow: column;
}


.cd-accordion-menu {
    margin: 10px 0 0 10px;
    overflow: auto;
}

    .cd-accordion-menu ul {
        /* by default hide all sub menus */
        display: none;
    }

    .cd-accordion-menu li {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .cd-accordion-menu input[type=checkbox] {
        /* hide native checkbox */
        position: absolute;
        opacity: 0;
    }

    .cd-accordion-menu label, .cd-accordion-menu a {
        position: relative;
        display: block;
        padding: 5px 10px 5px 13px;
        color: #000;
        font-size: 14px;
    }

.no-touch .cd-accordion-menu label:hover, .no-touch .cd-accordion-menu a:hover {
    background: #52565d;
}

.cd-accordion-menu label::after /*.cd-accordion-menu a::after*/ {
    /* icons */
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 20px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

.cd-accordion-menu label {
    cursor: pointer;
}

    .cd-accordion-menu label::before, .cd-accordion-menu label::after {
        background-image: url(../images/f18Main/cd-icons.svg);
        background-repeat: no-repeat;
    }

    .cd-accordion-menu label::before {
        /* arrow icon */
        left: 0px;
        background-position: 0 0;
        -webkit-transform: translateY(-50%) rotate(-90deg);
        -moz-transform: translateY(-50%) rotate(-90deg);
        -ms-transform: translateY(-50%) rotate(-90deg);
        -o-transform: translateY(-50%) rotate(-90deg);
        transform: translateY(-50%) rotate(-90deg);
    }

    .cd-accordion-menu label::after {
        /* folder icons */
        left: 0px;
        background-position: -16px 0;
    }

.cd-accordion-menu a::after {
    /* image icon */
    left: 36px;
    background: url(../images/F18Main/cd-icons.svg) no-repeat -48px 0;
}
/*.cd-accordion-menu input[type=checkbox]:checked + label::before {
  /* rotate arrow 
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}*/
.cd-accordion-menu input[type=checkbox]:checked + label::after {
    /* show open folder icon if item is checked */
    background-position: -32px 0;
}

.cd-accordion-menu input[type=checkbox]:checked + label + ul,
.cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
    /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
    /* show children when item is checked */
    display: block;
}

.cd-accordion-menu ul label,
.cd-accordion-menu ul a {
    padding-left: 25px;
}

.no-touch .cd-accordion-menu ul label:hover, .no-touch
.cd-accordion-menu ul a:hover {
    background: #3c3f45;
}

.cd-accordion-menu > li:last-of-type > label,
.cd-accordion-menu > li:last-of-type > a,
.cd-accordion-menu > li > ul > li:last-of-type label,
.cd-accordion-menu > li > ul > li:last-of-type a {
    box-shadow: none;
}

.cd-accordion-menu ul label::before {
    left: 36px;
}

.cd-accordion-menu ul label::after,
.cd-accordion-menu ul a::after {
    left: 25px;
}

.cd-accordion-menu ul ul label,
.cd-accordion-menu ul ul a {
    padding-left: 40px;
}

    .cd-accordion-menu ul ul label::before {
        left: 54px;
    }

    .cd-accordion-menu ul ul label::after,
    .cd-accordion-menu ul ul a::after {
        left: 54px;
    }

.cd-accordion-menu ul ul ul label,
.cd-accordion-menu ul ul ul a {
    padding-left: 79px;
}

.sub-group-level-3-a {
    padding-left: 30px !important;
}

.cd-accordion-menu ul ul ul label::before {
    left: 72px;
}

.cd-accordion-menu ul ul ul label::after,
.cd-accordion-menu ul ul ul a::after {
    left: 80px;
}

ol, ul {
    list-style: none;
}
/*левое меню*/

.menu-filter {
    padding: 10px;
    background: #fff;
    border: 1px solid #e7eaec;
    margin-bottom: 20px;
    font-size: 14px;
}

.menu-filter-top {
    padding: 10px 10px 10px 0;
    border-bottom: 1px solid #e7eaec;
    margin-bottom: 20px;
    font-size: 14px;
}

.menu-filter-bottom {
    padding: 10px 10px 10px 0;
    border-top: 1px solid #e7eaec;
    font-size: 14px;
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
}

.content {
    display: table;
    width: 100%;
    height: 100%;
    margin-top: 10px;
}

    .content .right-block {
        display: table-cell;
        width: auto;
        height: 100%;
        padding: 10px 10px 20px 10px;
    }

    .content .left-menu {
        display: table-cell;
        width: 350px;
        height: 100%;
        padding: 10px 10px 20px 20px;
    }
/**/
.navbar {
    margin: 0 20px 20px 0;
}
/*ScrollBar*/

/*блоки*/

.block-name {
    padding: 10px 0;
    font-size: 18px;
    display: block;
}

.menu-block-filter {
    background: #f6f6f6;
    padding: 10px 15px;
    font-size: 14px;
}

.menu-close {
    display: inline-block;
    width: 25px;
    height: 25px;
}

    .menu-close:hover {
    }

.data-main {
}

.block-data-inner {
    margin: 20px;
}



.doco-centered-layout {
}



.doco-wrapper {
    height: auto;
    margin: 0 auto;
    min-height: 100%;
    min-width: 100%;
    width: 100%;
    border: 0;
    box-sizing: border-box;
}


.doco-formgroup-name {
    padding: 3px 0;
    font-size: 18px;
    display: block;
    background-position-x: left;
    background-position-y: center;
    background-repeat: no-repeat;
    color: #000000;
    text-decoration: none;
    font-weight: normal;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    position: relative;
}

    .doco-formgroup-name:hover {
        color: rgb(80, 116, 165);
    }


.doco-formgroup {
    margin: 0 0 15px 0;
    border: 1px solid #3481b9;
    background: #fff;
    -webkit-box-shadow: 3px 3px 0px 0px rgba(52,129,185,0.5);
    -moz-box-shadow: 3px 3px 0px 0px rgba(52,129,185,0.5);
    box-shadow: 3px 3px 0px 0px rgba(52,129,185,0.5);
}

.doco-formgroup-noborder {
    margin: 0;/* 0 15px 0;*/
    background: #fff;
}


.doco-form, .doco-cont {
    width: 100%;
    box-sizing: border-box;
    height: 100%;
    display: block;
    padding: 0;
    margin: 0;
    position: relative;
    box-sizing: border-box;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}





/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) {
    /* Hide captions */


}



/*search*/
.container-1 {
    vertical-align: middle;
    white-space: nowrap;
    position: relative;
}

    .container-1 input.doco-search {
        width: 100%;
        height: 39px;
        border: none;
        font-size: 12pt;
        float: left;
        color: #4c9ed9;
        padding-left: 45px;
        outline: none;
        border-bottom: 2px solid #dcdcdc;
    }

        .container-1 input.doco-search:active, .container-1 input.doco-search:focus {
            border-bottom: 2px solid #4c9ed9;
        }

        .container-1 input.doco-search::-webkit-input-placeholder {
            color: #65737e;
        }

        .container-1 input.doco-search:-moz-placeholder { /* Firefox 18- */
            color: #65737e;
        }

        .container-1 input.doco-search::-moz-placeholder { /* Firefox 19+ */
            color: #65737e;
        }

        .container-1 input.doco-search:-ms-input-placeholder {
            color: #65737e;
        }

    .container-1 .icon {
        position: absolute;
        top: 50%;
        margin-left: 10px;
        margin-top: 10px;
        z-index: 1;
        color: #4f5b66;
    }

    .container-1 input.doco-search:focus .icon {
        color: red !important;
    }



.doco-treeelement {
    padding-left: 24px;
}


.doco-commandlink {
}

    .doco-commandlink:hover {
        color: rgb(80, 116, 165) ;
        cursor: pointer;
    }

    .doco-commandlink[disabled="disabled"]:hover {
        color: silver !important;
        cursor: pointer;
    }


.doco-treeelement-folder:hover {
}





.doco-form-header .textarea {
    position: relative;
}

.doco-form-header .headerarea {
    width: 100%;
}




.doco-form-header i {
    padding-right: 10px;
}



.table {
    display: table;
    width: 100%;
}

.table-row {
    display: table-row;
}

.table-cell {
    display: table-cell;
    user-select: none;
}

.flex-row {
    user-select: none;
}

.flex-column {
    user-select: none;
}

.doco-formgroup-header {
    background: #dee1e6;
    padding: 10px 20px;
    font-size: 16px;
    color: #4c9ed9;
    cursor: pointer;
    display: flex;
}


    .doco-formgroup-header [role="text"] {
        display: inline-block;
        outline: none;
        text-decoration: none;
        color: #4c9ed9;
        font-size: 16px;
    }


    .doco-formgroup-header a span {
        padding-right: 10px;
    }

.btn-sm {
    text-decoration: none;
    color: #6c7079;
    padding: 5px;
    background: #fff;
    font-size: 16px;
}

    .btn-sm:hover {
        color: #4c9ed9;
    }

.radius {
    border-radius: 5px;
}

.comand-menu {
    padding: 10px;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid #dee1e6;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    border: 0px solid black;
    box-sizing: border-box;
}

.doco-toolbar-command-area {
    padding: 10px;
    background: #fff;
    border: 1px solid #dee1e6;
    border: 0px solid black;
    box-sizing: border-box;
}

.doco-btn-toolbar, .btn {
    display: inline-block;
    text-decoration: none;
    color: #363636;
    padding: 5px 0px !important;
    font-size: 14px;
    /* -webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
 transition: all 0.2s;
 margin-right: 10px;*/
    position: relative;
    cursor: pointer;
    /*margin-right:20px;*/
}


    .doco-btn-toolbar:hover, .btn:hover {
        color: #4c9ed9;
    }


        .doco-btn-toolbar:hover:after {
            position: absolute;
            content: '';
            left: 0;
            right: 0;
            bottom: 0;
            height: 2px;
            background: #4c9ed9;
        }



    .btn:after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        visibility: hidden;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        background-color: #4c9ed9;
        transition: all .3s ease;
    }

    .btn:hover::after, .f-linck-top-menu:hover::after {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        visibility: visible;
    }

    .doco-btn-toolbar span i, .btn span i {
        padding-right: 10px;
    }

        .doco-btn-toolbar span i::before, .btn span i::before {
            font-size: 14px;
        }

.btn-red:hover {
    background: #f97c7c;
}


.menu-block-filter-3 {
    background: #fff;
    text-align: right;
    min-width: 200px;
}


.dropdown {
    position: relative;
    display: inline-block;
}

.report-btn {
    margin-right: 10px;
}

.dropbtn {
    background-color: #fff;
    color: #6c7079;
    font-size: 16px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    border-radius: 5px;
    padding: 3px 10px 3px 10px;
    border: 1px solid #edeff5;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    outline: none;
    display: inline-block;
}



.report-btn span {
    padding: 0 10px 0 0 !important;
}




.dropdown a:hover {
    background-color: #f7f7f7;
}


.show {
    display: block;
}

.param-block {
    padding: 10px;
    background: #fbfbfb;
    position: relative;
    display: block;
    border: 1px solid #dee1e6;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    margin-bottom: 0px;
    border: 0px solid green;
    margin-bottom: 10px;
    background: #fff;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
}

    .param-block h1 {
        font-size: 14px;
        position: relative;
        font-weight: normal;
        padding-bottom: 5px;
        color: #4a4d54;
    }

        .param-block h1::after {
            right: 0;
            left: auto;
        }

        .param-block h1::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            height: 1px;
            width: 100%;
            background-color: #ccc;
        }

        .param-block h1::before {
            content: '';
            position: absolute;
            margin-top: -2px;
            left: 0;
            height: 1px;
            bottom: 0;
            width: 61px;
            background-color: #4a4d54;
            z-index: 10;
        }


.field {
    position: relative;
    display: inline-block;
    padding: 0;
    width: 400px;
    margin: 10px 10px 0 0;
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -ms-box-sizing: content-box;
}


    .field label {
        display: block;
        font-size: 14px;
        color: #6c7079;
        padding: 0 0 3px 5px;
    }

    .field input[type="text"] {
        padding: 5px 30px 5px 10px;
        border-radius: 10px;
        border: 1px solid #c5c5c5;
        font-size: 14px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
        display: block;
        background: #fff;
        width: 100%;
    }

.table-wrapper {
    /*margin-top: 20px;*/
    height: 100%;
}


.tbl-header {
    background-color: rgb(76, 158, 217);
    /*
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    */
}


    .tbl-header > table > thead > tr > th {
        padding-left: 3px !important;
        text-align: center;
        padding-top: 5px;
        padding-bottom: 5px;
        border-right: 1px solid rgba(125,125,125,1);
    }

        .tbl-header > table > thead > tr > th:hover {
            border-right: 1px solid rgba(125,125,125,0.3);
        }

.doco-form-table-header {
    width: 100%;
    table-layout: fixed;
}


th {
    padding: 20px 15px;
    text-align: left;
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
}

.tbl-content {
    height: 100%;
    overflow-x: auto;
    margin-top: 0px;
    border: solid 1px #c5c5c5;
    -webkit-border-bottom-right-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-bottomright: 0;
    -moz-border-radius-bottomleft: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.mCustomScrollBox {
    position: relative;
    overflow: hidden;
    height: 100%;
    max-width: 100%;
    outline: none;
    direction: ltr;
}

    .mCustomScrollBox.mCSB_vertical_horizontal.mCSB_inside > .mCSB_container_wrapper.mCS_no_scrollbar_x.mCS_x_hidden {
        margin-bottom: 0;
    }

.mCSB_container_wrapper {
    position: absolute;
    height: auto;
    width: auto;
    overflow: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin-right: 0px;
    margin-bottom: 30px;
}


    .mCSB_container_wrapper > .mCSB_container {
        padding-right: 0px;
        padding-bottom: 0px;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

.mCSB_container {
    overflow: hidden;
    width: auto;
    height: auto;
}

.doco-form-table {
    width: 100%;
    table-layout: fixed;
}

.mCustomScrollBox {
    direction: ltr;
}

.doco-form-table > tbody > tr > td {
    padding: 15px;
    text-align: left;
    vertical-align: middle;
    font-weight: 300;
    font-size: 12px;
    color: #000;
    border-bottom: solid 1px #efefef;
}

.hidden {
    display: none !important;
}


.rownumber {
    display: inline-block;
    width: 35px;
    text-align: center;
    padding-top: 5px;
    background-color: darkgray;
    border-right: 1px solid dimgray;
    display: none;
}


.rownumer_header {
    display: inline-block;
    width: 35px;
    text-align: center;
    padding-top: 5px;
    color: #fff;
    display: none;
}

.data_row_template {
    visibility: collapse;
    display: none !important;
    height: 30px;
    background-color: rgba(125,125,125,0.1);
}

.data_table_line_control, [role='columnrowcontrol'] {
    width: 20px;
    background-color: #efefef;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 0 !important;
    background-size: 16px 16px;
}

.data_table_line_control_active, .active[role='columnrowcontrol'] {
    background-image: url('/images/icons//Designer DB/Команда.png');
}

.data_table_line_control_edited, .edited[role='columnrowcontrol'] {
    background-image: url('/images/global/icons/row-edit.ico') !important;
}

.data_table_line_control_header, [role='columnrowcontrolheader'] {
    width: 20px;
    box-sizing: border-box;
    padding: 0 !important;
}


.data_row_template td {
    padding: 0 !important;
}


.h100pct {
    height: 100%;
}

.doco-notification {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    z-index: 1000;
    background: rgba(255,255,255,0.7);
}


.pre-loader {
    margin: 0 auto;
    width: 70px;
    height: 50px;
    text-align: center;
}

.doco-notification .doco-notification-content {
    min-height: 50px;
    height: auto;
    display: flex;
    padding: 20px;
    margin: 200px auto;
    max-width: 350px;
    flex-flow: column;
    --background-image: url(../images/Lamp-Process.gif);
    --background-position: center;
    --background-repeat: no-repeat;
    --background-size: 180px;
}

    .doco-notification .doco-notification-content .doco-notification-text {
        color: #000;
        width: 90%;
        margin: 0 auto;
        text-align: center;
        font-weight: bold;
    }

.pre-loader > div {
    background-color: #34495e;
    height: 100%;
    width: 10px;
    display: inline-block;
}


@keyframes myMove {
    0% {
        top: 0px;
    }

    25% {
        top: 200px;
    }

    50% {
        top: 100px;
    }

    75% {
        top: 200px;
    }

    100% {
        top: 0px;
    }
}


@-webkit-keyframes heightChange {
    0%, 40%, 100% {
        -webkit-transform: scaleY(0.4)
    }

    20% {
        -webkit-transform: scaleY(1.0)
    }
}

@keyframes heightChange {
    0%, 40%, 100% {
        transform: scaleY(0.4);
    }

    20% {
        transform: scaleY(1.0);
    }
}


.pre-loader > div {
    background-color: #4c9ed9;
    height: 100%;
    width: 10px;
    display: inline-block;
    -webkit-animation: heightChange 1s infinite ease-in-out;
    animation: heightChange 1s infinite ease-in-out;
}


.pre-loader .box2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.pre-loader .box3 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

.pre-loader .box4 {
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
}

.pre-loader .box5 {
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
}




.CommandParamBlock {
    display: inline-block;
}

.CommandParamBlockHidden {
    display: none !important;
}

.CommandParamBlock .HeaderText {
    display: block;
    font-size: 14px;
    color: #6c7079;
    padding: 0 0 3px 5px;
    position: relative;
}

    .CommandParamBlock .HeaderText .required {
        color: red;
        position: absolute;
    }





.inpet-ico {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

    .inpet-ico .right-btn, .right-btn {
        position: absolute;
        padding: 6px 15px;
        top: 0;
        right: 0px;
        color: #6c7079;
        height: auto;
        box-sizing: border-box;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 10px;
        border-bottom-right-radius: 10px;
        background: silver;
        text-align: center;
        vertical-align: middle;
        font-size: 16px !important;
        position: absolute;
        top: 1px;
        bottom: 1px;
        right: 1px;
        width: 30px;
        padding: 4px 0px 0px 2px;
        background-color: #f3f3f3;
    }

        .inpet-ico .right-btn:hover, .right-btn:hover {
            color: #fff;
            cursor: pointer;
            color: #4c9ed9 !important;
        }


.tbl-footer-content {
    padding: 5px 15px;
    text-align: left;
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    text-transform: none;
    background: #fff;
    /*
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    */
    border-top: 0px;
    border-right: 1px solid #c5c5c5;
    border-bottom: 1px solid #c5c5c5;
    border-left: 1px solid #c5c5c5;
    background-color: #dee1e6;
}


.doco-popup-window, .doco-window {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 80%;
    height: 80%;
    border: 1px solid red;
    margin: auto;
    background-color: white;
}

    .doco-popup-window .doco-window-content, .doco-window .doco-window-content {
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
    }

.doco-window-header {
    height: 50px;
    width: 100%;
    border-bottom: 1px solid rgba(108, 112, 121, 0.37);
    position: relative;
}

    .doco-window-header > .doco-window-header-text {
        display: block;
        padding-left: 20px;
        padding-top: 10px;
    }

    .doco-window-header .doco-window-header-close {
        background-image: url('/images/select2x2.png');
        background-position: -95px 0px;
        background-repeat: no-repeat;
        width: 24px;
        height: 24px;
        float: right;
        display: block;
        position: absolute;
        right: 5px;
        top: 0px;
        bottom: 0px;
        margin: auto;
        cursor: pointer;
    }




        .doco-window-header .doco-window-header-close:hover {
            background-position: -95px -22px;
        }



.doco-content-cont {
    display:flex;
    position: absolute !important;
    margin: 0px;
    left: 0px;
    right: 0px;
    top: 39px;
    bottom: 10px;
}

.doco-footer {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    height: 45px;
    padding-left: 250px;
    padding: 0px 35px 0 250px;
    border-top: 1px solid #CCC;
    background: #f8f8f8;
}

.doco-footer-title {
    position: absolute;
    margin-left: -190px;
    top: 15px;
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 14px;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fa-bookmark::before {
    content: "\f02e";
}


.doco-footer-title span {
    padding-right: 10px;
}









.fa-chevron-left::before {
    content: "\f053";
}

.fa-chevron-right::before {
    content: "\f054";
}


.fa-remove::before, .fa-close::before, .fa-times::before {
    content: "\f00d";
}


.carousel {
    width: 100%;
    margin-top: 6px;
}

.carousel-wrapper {
    overflow: hidden;
    position: relative;
}

.carousel-items {
    width: 10000px;
    position: relative;
}

.carousel-block {
    float: left;
    padding: 3px;
}

    .carousel-block div {
        color: #37383a;
        padding: 5px 5px 5px 10px !important;
        background: #fff;
        font-size: 14px;
        border-radius: 5px;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
        margin-right: 10px;
        border: 1px solid #d4d4d4;
        -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1);
        -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1);
        box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1);
        cursor: pointer;
    }

.carousel-block-action div, .carousel-block-action div:hover {
    color: #fff !important;
    padding: 5px 5px 5px 10px !important;
    background: #4c9ed9;
    font-size: 14px;
    border-radius: 5px;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    margin-right: 10px;
    border: 1px solid #4c9ed9;
    -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1);
    cursor: pointer;
}

    .carousel-block-action div span {
        color: #fff !important;
    }

        .carousel-block-action div span:hover {
            color: #f97c7c !important;
        }

.carousel-block div:hover {
    border-color: #4c9ed9;
    color: #000;
}

.carousel-block div span {
    margin-left: 10px;
    padding: 5px;
    cursor: pointer;
}

    .carousel-block div span:hover {
        color: #f97c7c;
    }

.carousel-button-left b, .carousel-button-right b, .doco-control-carousel-button-left b, .doco-control-carousel-button-right b, {
    position: relative;
    cursor: pointer;
    text-decoration: none;
    line-height: 26px;
    padding: 0 10px;
    margin-top: 5px;
    color: #6c7079;
}

    .carousel-button-left b:hover, .carousel-button-right b:hover, .doco-control-carousel-button-left b:hover, .doco-control-carousel-button-right b:hover {
        color: #4c9ed9;
        cursor:pointer;
    }

.carousel-button-left b, .doco-control-carousel-button-left b {
    float: left;
}

.carousel-button-right b, .doco-control-carousel-button-right b {
    float: right;
}


.hidden {
    display: none;
}



/*left vertical menu*/
.left-ver-menu {
    --display:none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 50px;
    background: #e3e3e6;
}

    .left-ver-menu button,
    .left-ver-menu .check-close,
    .left-ver-menu .quantity-close {
        display: block;
        cursor: pointer;
        background: none;
        border: none;
        width: 50px;
        color: #6c7079;
        text-align: center;
    }

.fa-12 {
    font-size: 12px;
}

.left-ver-menu .font-block, .left-ver-menu .action-block {
    position: relative;
    padding: 2px 0;
}

    .left-ver-menu .font-block:after, .left-ver-menu .action-block:after {
        position: absolute;
        content: '';
        left: 15px;
        right: 15px;
        top: 0;
        height: 1px;
        background: #fff;
    }

.menu-close {
    margin: 10px 0 2px 0;
    font-size: 16px;
    display: block;
    width: 50px;
    text-align: center;
}

.left-ver-menu .cta-btn-container {
    overflow: hidden;
}

    .left-ver-menu .cta-btn-container:hover span {
        cursor: pointer;
        color: #4C9ED9;
    }

    .left-ver-menu .cta-btn-container:hover .cta-btn:after {
        -webkit-transform: scale(1) translateZ(0);
        transform: scale(1) translateZ(0);
        transition: -webkit-transform .3s ease-in;
        transition: transform .3s ease-in;
        transition: transform .3s ease-in, -webkit-transform .3s ease-in;
    }

.left-ver-menu .cta-btn {
    color: #6c7079;
    ;
    position: relative;
    z-index: 10;
    padding: 9px 14px;
}

    .left-ver-menu .cta-btn:after {
        content: "";
        width: 150%;
        height: 0;
        padding-top: 150%;
        -o-object-fit: contain;
        object-fit: contain;
        background-color: #f9f9f9;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -75%;
        opacity: 1;
        border-radius: 50%;
        -webkit-transform: scale(0) translateZ(0);
        transform: scale(0) translateZ(0);
        transition: -webkit-transform .2s ease-out;
        transition: transform .2s ease-out;
        transition: transform .2s ease-out, -webkit-transform .2s ease-out;
        z-index: -1;
    }
/*иконки левого меню*/
#eye {
    background: url(/images/icon-set.png) -88px -22px no-repeat;
}

    #eye.eye-on {
        background-position: -88px -44px;
    }

    #eye.eye-off {
        background-position: -88px -22px;
    }

.cta-btn-close-menu {
    width: 22px;
    height: 22px;
}

.cta-btn-font-plus {
    background: url(/images/icon-set.png) -44px -22px no-repeat;
    width: 22px;
    height: 22px;
}

.cta-btn-font-normal {
    background: url(/images/icon-set.png) -66px -22px no-repeat;
    width: 22px;
    height: 22px;
}

.cta-btn-font-minus {
    background: url(/images/icon-set.png) -22px -22px no-repeat;
    width: 22px;
    height: 22px;
}

.cta-btn-check {
    background: url(/images/icon-set.png) -110px -22px no-repeat;
    width: 22px;
    height: 22px;
}

.cta-btn-chart {
    background: url(/images/icon-set.png) 0px -22px no-repeat;
    width: 22px;
    height: 22px;
}





.fa-arrows-h::before {
    content: "\f07e";
}





/*Select*/
.custom-select {
    position: relative;
    margin-bottom: 10px;
}

    .custom-select select {
        display: none; /*hide original SELECT element:*/
    }

.select-selected {
}
    /*style the arrow inside the select element:*/
    .select-selected:after {
        position: absolute;
        content: "";
        top: 14px;
        right: 5px;
        width: 0;
        height: 0;
        border: 6px solid transparent;
        border-color: #6c7079 transparent transparent transparent;
    }
    /*point the arrow upwards when the select box is open (active):*/
    .select-selected.select-arrow-active:after {
        border-color: transparent transparent #6c7079 transparent;
        top: 7px;
    }
/*style the items (options), including the selected item:*/
.select-items div {
    color: #6c7079;
    padding: 8px 16px;
    cursor: pointer;
    user-select: none;
}

.select-selected {
    color: #6c7079;
    padding: 8px 16px;
    border: 1px solid #dee1e6;
    border-radius: 5px;
    cursor: pointer;
    user-select: none;
}
/*style items (options):*/
.select-items {
    position: absolute;
    background-color: #fff;
    top: 102%;
    left: 0;
    right: 0;
    z-index: 99;
    border: 1px solid #dee1e6;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    white-space: normal;
    color: #6c7079;
    max-height: 300px;
    overflow-y: auto;
}
/*hide the items when the select box is closed:*/
.select-hide {
    display: none;
}

.select-items div:hover, .same-as-selected {
    background-color: #f7f7f7;
}



/*search*/
.container-1 {
    vertical-align: middle;
    white-space: nowrap;
    position: relative;
}

    .container-1 input#search {
        width: 100%;
        height: 39px;
        border: none;
        font-size: 12px;
        float: left;
        color: #6c7079;
        padding-left: 45px;
        outline: none;
        border: 1px solid #f5f5f5;
        border-radius: 5px;
        background: #f5f5f5;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        transition: all 0.4s;
    }

        .container-1 input#search:active, .container-1 input#search:focus {
            border: 1px solid #ddd;
            background: #fff;
            -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
            -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
            box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
        }

        .container-1 input#search::-webkit-input-placeholder {
            color: #65737e;
        }

        .container-1 input#search:-moz-placeholder { /* Firefox 18- */
            color: #65737e;
        }

        .container-1 input#search::-moz-placeholder { /* Firefox 19+ */
            color: #65737e;
        }

        .container-1 input#search:-ms-input-placeholder {
            color: #65737e;
        }

    .container-1 .icon {
        position: absolute;
        top: 50%;
        margin-left: 15px;
        margin-top: 9px;
        z-index: 1;
        color: #6c7079;
        left: 0;
    }

    .container-1 input#search:focus .icon {
    }



/*header & footer*/
header {
    position: relative;
    background-position: top 7px left 12px;
    border-bottom: 2px solid #4c9ed9;
    height: 38px;
}

footer {
    height: 50px;
    margin: 0 auto;
}

/*выбор подсистемы*/
#toggle {
    position: absolute;
    appearance: none;
    cursor: pointer;
    left: -100%;
    top: -100%;
}

    #toggle + label {
        position: absolute;
        cursor: pointer;
        width: 50px;
        height: 38px;
        line-height: 38px;
        background: #fff;
        color: #FFF;
        text-align: center;
        -webkit-font-smoothing: antialiased;
        cursor: pointer;
    }

        #toggle + label:hover span {
            color: #fff;
        }

.cta-btn-container {
    overflow: hidden;
}

    .cta-btn-container:hover {
        cursor: pointer;
        color: #fff;
    }

        .cta-btn-container:hover .cta-btn:after {
            -webkit-transform: scale(1) translateZ(0);
            transform: scale(1) translateZ(0);
            transition: -webkit-transform .3s ease-in;
            transition: transform .3s ease-in;
            transition: transform .3s ease-in, -webkit-transform .3s ease-in;
        }

.cta-btn {
    color: white;
    position: relative;
    z-index: 10;
}

    .cta-btn:after {
        content: "";
        width: 150%;
        height: 0;
        padding-top: 150%;
        -o-object-fit: contain;
        object-fit: contain;
        background-color: #4C9ED9;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -75%;
        opacity: 1;
        border-radius: 50%;
        -webkit-transform: scale(0) translateZ(0);
        transform: scale(0) translateZ(0);
        transition: -webkit-transform .2s ease-out;
        transition: transform .2s ease-out;
        transition: transform .2s ease-out, -webkit-transform .2s ease-out;
        z-index: -1;
    }

#toggle + label:after {
    content: ""
}

#toggle + label span {
    color: #4C9ED9;
}

#toggle:checked + label span {
    color: #fff;
}

.container {
    /*transition: margin 300ms cubic-bezier(0.17, 0.04, 0.03, 0.94);
  padding:5em 3em;*/
}

#toggle:checked ~ .message {
    top: 38px;
}

#toggle:checked ~ .container {
    margin-top: 250px;
}

#toggle:checked + label {
    background: #4C9ED9;
}

    #toggle:checked + label:after {
        content: ""
    }

.message {
    background: #4C9ED9;
    color: #FFF;
    position: absolute;
    top: -500px;
    left: 0;
    width: 100%;
    padding: 20px 20px 20px 0;
    overflow: hidden;
    box-sizing: border-box;
    z-index: 199;
}

    .message em {
        padding-left: 10px;
        font-style: normal;
    }

.block-web, .block-sub-sys, .block-interface {
    display: table-cell;
    width: 25%;
    min-width: 300px;
    padding-left: 20px;
}

.message .message-title {
    padding: 10px 0;
}

.message .spenser {
    border-bottom: 1px solid #b8daf3;
}

.rounded-list {
    margin-top: 5px;
}

    .rounded-list li {
        padding: 5px 0;
        position: relative;
    }

        .rounded-list li a {
            padding: 5px 0;
            display: inline-block;
            text-decoration: none;
            color: #fff;
            margin-left: 20px;
            position: relative;
        }

            .rounded-list li a::after {
                content: '';
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 2px;
                visibility: hidden;
                -webkit-transform: scaleX(0);
                transform: scaleX(0);
                background-color: #fff;
                transition: all .3s ease;
            }

            .rounded-list li a:hover::after {
                -webkit-transform: scaleX(1);
                transform: scaleX(1);
                visibility: visible;
            }

            .rounded-list li a:before {
                content: '-';
                /*content: '»';*/
                position: absolute;
                opacity: 0;
                top: 6px;
                left: -25px;
                transition: 0.5s;
                width: 16px;
                height: 16px;
            }

            .rounded-list li a:hover:before {
                opacity: 1;
                right: 10px;
                padding-left: 10px;
            }



/*menu*/
[role="worksitetopmenu"] {
    padding: 0;
    margin: 0;
    border: 0;
    margin-left: 50px;
}

    [role="worksitetopmenu"] ul, [role="worksitetopmenu"] li {
        list-style: none;
        margin: 0;
        padding: 0;
    }


    [role="worksitetopmenu"] ul {
        position: relative;
        z-index: 597;
    }


        [role="worksitetopmenu"] ul li {
            float: left;
            min-height: 1px;
            vertical-align: middle;
        }

            [role="worksitetopmenu"]u ul li.hover,
            [role="worksitetopmenu"] ul li:hover {
                position: relative;
                z-index: 599;
                cursor: default;
            }

        [role="worksitetopmenu"] ul ul {
            visibility: hidden;
            position: absolute;
            top: 100%; /*left: 0;*/
            z-index: 598;
            width: 100%;
        }

            [role="worksitetopmenu"] ul ul li {
                float: none;
            }

            [role="worksitetopmenu"] ul ul ul {
                top: 0;
                left: auto;
                right: -99.5%;
            }

        [role="worksitetopmenu"] ul li:hover > ul {
            visibility: visible;
            width:300px;
        }

        [role="worksitetopmenu"] ul ul {
            bottom: 0; /*left: 0;*/
        }

        [role="worksitetopmenu"] ul ul {
            margin-top: 0;
        }

    [role="worksitetopmenu"]u ul ul li {
        font-weight: normal;
    }

    [role="worksitetopmenu"] a {
        display: block;
        line-height: 1em;
        text-decoration: none;
    }

[role="worksitetopmenu"] {
    /*margin-left: 50px;*/
    font-size: 14px;
    background: #fff;
}

    [role="worksitetopmenu"] > ul {
        *display: inline-block;
    }

    [role="worksitetopmenu"]:after, [role="worksitetopmenu"] ul:after {
        content: '';
        display: block;
        clear: both;
    }

    [role="worksitetopmenu"] a {
        background: #fff;
        color: #4E4D4D;
        padding: 0 20px;
    }

    [role="worksitetopmenu"] ul li ul li a span {
        display: table-cell;
    }

    [role="worksitetopmenu"] a span {
        padding-right: 10px;
    }

    [role="worksitetopmenu"] .spenser:after {
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 0;
        height: 1px;
        background: #b8daf3;
    }

    [role="worksitetopmenu"] ul ul {
        text-transform: none;
        min-width: 250px;
    }

    [role="worksitetopmenu"] .top-menu-user-sub {
        min-width: 190px;
    }

    [role="worksitetopmenu"] ul ul a {
        background: #4c9ed9;
        color: #FFF;
        padding: 10px 20px;
    }

    [role="worksitetopmenu"] ul ul ul {
        border-top: 0 none;
    }

    [role="worksitetopmenu"] ul ul li {
        position: relative
    }

    [role="worksitetopmenu"] > ul > li > a {
        line-height: 38px;
    }

    [role="worksitetopmenu"] ul ul li:first-child > a {
    }

    [role="worksitetopmenu"] ul ul li:hover > a {
        background: #35a6ff;
    }

    [role="worksitetopmenu"] ul ul li:last-child > a {
    }

    [role="worksitetopmenu"] ul ul li:last-child:hover > a {
    }

    [role="worksitetopmenu"] ul ul li.has-sub > a:after {
        content: '';
        position: absolute;
        top: 50%;
        right: 15px;
        border: 4px solid transparent;
        border-left: 4px solid;
        width: 0;
        height: 0;
        margin-top: -3px;
    }

.has-sub ul li ul li a {
    margin-left: 2px;
}

[role="worksitetopmenu"] ul li:hover > a, [role="worksitetopmenu"] ul li.active > a {
    background: #4c9ed9;
    color: #FFF;
}

[role="worksitetopmenu"] ul li.has-sub > a:after {
    content: '';
    margin-left: 5px;
    border: 4px solid transparent;
    border-top: 4px solid;
    width: 0;
    height: 0;
    position: absolute;
    top: 50%;
}

[role="worksitetopmenu"] ul li.last ul {
    left: auto;
    right: 0;
}

    [role="worksitetopmenu"] ul li.last ul ul {
        left: auto;
        right: 99.5%;
    }

[role="worksitetopmenu"] .top-menu-user {
    float: right;
    margin-right: 20px;
}

.top-menu-user-sub {
    right: 0 !important;
}

[role="worksitetopmenu"] ul li ul li {
    -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.1);
    box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.1);
}

    [role="worksitetopmenu"] ul li ul li:hover {
        -webkit-box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.1);
        -moz-box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.1);
        box-shadow: 2px 0px 5px 0px rgba(0,0,0,0.1);
    }




.data_table_line {
    min-height: 30px;
    height: 30px;
    max-height: 100%;
    padding: 1px;
    display: table-row;
    display: flex;
    height: auto;
    padding: 0;
}

.data_table_line_header {
    min-height: 30px;
    height: 90px;
    max-height: 100%;
    padding: 1px;
    display: table-row;
    display: flex;
    height: auto;
}


.datafield-header {
    border-right: 1px solid rgba(125,125,125,0.3);
    padding-left: 3px;
    position: relative;
    text-align: center;
}

.datafield {
    /*border-right: 1px solid rgba(125,125,125,0.3);
    border-bottom: solid 1px #efefef;*/
    padding: 0;
    margin: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}


    .datafield[data-iseditable='0'] > .datafield-text {
        color: rgb(125,125,125);
        background: #fbfbfb;
    }



    .datafield:last-child, datafield-header:last-child {
        border-right: 0;
    }

.fieldenumeration {
    overflow: visible;
    box-sizing: border-box;
}

.doco-form-table-page-header {
    background-color: rgba(125,125,125,0.1);
    /*display: none;*/
}

.doco-form-table-page {
    border: 0px solid silver;
    box-sizing: border-box;
}



.CommandFormContent {
    box-sizing: border-box;
    border: 0;
    display: flex;
    flex-flow: column;
}

.DataTableContent {
    box-sizing: border-box;
    border: 0;
    display: flex;
    flex-flow: column;
}

.CommandFormHeaderArea {
    border: 0px solid green;
    position: relative;
    box-sizing: border-box;
    width: 100%;
}



.doco-form-header {
    padding: 10px 10px 10px 20px !important;
    font-size: 18px;
    display: block;
    color: #6c7079;
    padding-left: 1px;
    position: relative;
    margin-bottom: 10px;
    /*width: calc(100% - 40px);*/
    box-sizing: border-box;
}


.CommandFormActiveContentArea {
    border: 0;
    box-sizing: border-box;
    flex: 1;
}

.DataTableActiveContentArea {
    border: 0;
    box-sizing: border-box;
    height: 100%;
    overflow-y: auto;
}

.CommandFormWorkArea {
    box-sizing: border-box;
    border: 0px solid red;
    /*padding-top: 5px;*/
    height: 100%;
    display: flex;
    flex-flow: column;
}

.DataTableWorkArea {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    height: 100%;
}


.CommandFormWorkArea_Table {
    box-sizing: border-box;
    border: 0px solid black;
    height: 100%;
    box-sizing: border-box;
}

.DataTableWorkArea_Table {
    box-sizing: border-box;
    border: 0px solid black;
    height: 100%;
}

.CommandFormWorkArea_TableContent {
    box-sizing: border-box;
    height: 100%;
    display: flex;
}

    .CommandFormWorkArea_TableContent .table-wrapper {
        display: flex;
        flex-flow: column;
        flex: 1;
    }

.WorkArea_TableContent {
    height: 100%;
}

.editor-window {
    display: none;
    position: absolute;
    top: 102%;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #dee1e6;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    z-index: 999;
    min-width: 50px;
    min-height: 50px;
}

.editor-window-date {
    min-width: 200px;
}


.CommandFormBottomArea {
    margin-top: 5px;
    margin-bottom: 5px;
    height: auto;
    min-height: 20px;
    bottom: 0;
    box-sizing: border-box;
    flex: 0 0 auto;
    padding-left: 10px;
}

    .CommandFormBottomArea .InfoText {
        color: #006CC2;
        font-weight: bold;
        font-size: 0.8em;
        margin-left: 10px;
    }



.overlay-target {
    visibility: visible !important;
    opacity: 1 !important;
}

.overlay {
    position: fixed;
    top: 40px;
    bottom: 45px;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 500ms;
    visibility: hidden;
    opacity: 0;
    z-index: 9999;
}

.popup {
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    width: 30%;
    position: relative;
    transition: all 5s ease-in-out;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
}


    .popup .content {
        max-height: 30%;
        overflow: auto;
        text-align: center;
        padding-bottom: 10px;
    }

svg {
    --width: 100px;
    --display: block;
    --margin: 0 auto 0;
}



.path.circle {
    -webkit-animation: dash 0.9s ease-in-out;
    animation: dash 0.9s ease-in-out;
}

.path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
}

    .path.check {
        -webkit-animation: dash-check 0.9s 0.35s ease-in-out forwards;
        animation: dash-check 0.9s 0.35s ease-in-out forwards;
    }


.btn-div::after {
    position: absolute;
    content: '';
    left: 20px;
    right: 20px;
    top: 0;
    height: 1px;
    /*background: #e4e4e4;*/
    background: transparent;
}


.btn-div {
    position: relative;
    text-align: center;
    padding-top: 20px;
}

.popup .success {
    background-color: #fff;
    color: #4c9ed9;
    border-color: #4c9ed9;
}

.popup a {
    background-color: #fff;
    color: #6c7079;
    cursor: pointer;
    font-size: 14px;
    border-radius: 5px;
    padding: 4px 10px 4px 10px;
    border: 1px solid #cdd0da;
    border-top-color: rgb(205, 208, 218);
    border-right-color: rgb(205, 208, 218);
    border-bottom-color: rgb(205, 208, 218);
    border-left-color: rgb(205, 208, 218);
    outline: none;
    display: inline-block;
    margin-left: 10px;
    text-decoration: none;
}




.data-editor-target {
    display: none;
    position: absolute !important;
    top: 102%;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #dee1e6;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    z-index: 999;
}

    .data-editor-target[data-line='1'] {
        left: 0;
        margin-top: 5px;
    }

.data_table_line .active {
    font-weight: bold;
}


.target-link {
    display: block;
    position: relative;
    margin-top: 15px;
}

.target-link-a {
    display: inline-block;
    position: relative;
    width: auto;
    padding: 5px 10px;
    outline: none;
    text-decoration: none;
    border: 1px solid #4c9ed9;
    color: #4c9ed9;
    border-radius: 5px;
    background: #fff;
    cursor: pointer;
}

    .target-link-a:hover {
        background: #4c9ed9;
        color: #fff;
    }

    .target-link-a span {
        margin-right: 5px;
    }

.target-link-a-close {
    float: right;
    display: inline-block;
    cursor: pointer;
}

.target-title {
    position: relative;
    display: block;
    height: 25px;
    line-height: 25px;
    border-bottom: 1px solid #c5c5c5;
    padding-bottom: 5px;
}

    .target-title span {
        display: inline-block;
        position: relative;
        padding: 0 5px;
        font-weight: bold;
    }

    .target-title a {
        color: #6c7079;
    }

        .target-title a:hover {
            color: #f97c7c;
        }
/*таблица справочника*/
.fixed_headers {
    width: auto;
    table-layout: fixed;
    border-collapse: collapse;
}

    .fixed_headers th {
        color: #000;
    }

    .fixed_headers th,
    .fixed_headers td {
        padding: 10px 5px;
        text-align: left;
    }

        .fixed_headers td:nth-child(1),
        .fixed_headers th:nth-child(1) {
            min-width: 200px;
        }

        .fixed_headers td:nth-child(2),
        .fixed_headers th:nth-child(2) {
            min-width: 200px;
        }

        .fixed_headers td:nth-child(3),
        .fixed_headers th:nth-child(3) {
            width: 350px;
        }

    .fixed_headers thead {
        color: #000;
    }

        .fixed_headers thead tr {
            display: block;
            position: relative;
            border-bottom: 2px solid #4c9ed9;
        }

    .fixed_headers tbody {
        display: block;
        overflow: auto;
        width: 100%;
        height: 150px;
        border-bottom: 1px solid #EFEFEF;
    }

}

.fixed_headers tbody tr:nth-child(even) {
}

.fixed_headers tbody {
    display: block;
    overflow: auto;
    width: 100%;
    height: 200px;
    color: #6C7079 !important;
}

    .fixed_headers tbody tr:hover {
        background: #f9f9f9;
    }

    .fixed_headers tbody td {
        color: #6C7079 !important;
        font-size: 14px;
    }

.old_ie_wrapper {
    height: 300px;
    width: 750px;
    overflow-x: hidden;
    overflow-y: auto;
}

    .old_ie_wrapper tbody {
        height: auto;
    }

.table-btn-select {
    display: inline-block;
    color: #6fbbe4;
    margin-top: 20px;
    font-size: 14px;
    background: #fff;
    border: 2px solid #6fbbe4;
    outline: none;
    border-radius: 5px;
}


.doco-editor-table {
}

    .doco-editor-table > tbody {
        padding-left: 1px;
    }


    .doco-editor-table .doco-editor-row:hover {
        background-color: #f9f9f9;
        cursor: pointer;
    }

    .doco-editor-table .doco-editor-row {
        border: 1px;
    }

    .doco-editor-table .doco-row-active {
        border: 1px dashed silver;
        background-color: #f9f9f9;
    }



.doco-menu-icon, .doco-form-icon, .doco-control-icon, .doco-icon {
    width: 16px;
    height: 16px;
}


/*search*/
.container-1 {
    vertical-align: middle;
    white-space: nowrap;
    position: relative;
}

    .container-1 input#search {
        width: 100%;
        height: 39px;
        border: none;
        font-size: 12px;
        float: left;
        color: #6c7079;
        padding-left: 45px;
        outline: none;
        border: 1px solid #f5f5f5;
        border-radius: 5px;
        background: #f5f5f5;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        transition: all 0.4s;
    }

        .container-1 input#search:active, .container-1 input#search:focus {
            border: 1px solid #ddd;
            background: #fff;
            -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
            -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
            box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2);
        }

        .container-1 input#search::-webkit-input-placeholder {
            color: #65737e;
        }

        .container-1 input#search:-moz-placeholder { /* Firefox 18- */
            color: #65737e;
        }

        .container-1 input#search::-moz-placeholder { /* Firefox 19+ */
            color: #65737e;
        }

        .container-1 input#search:-ms-input-placeholder {
            color: #65737e;
        }

    .container-1 .icon {
        position: absolute;
        top: 50%;
        margin-left: 15px;
        margin-top: 9px;
        z-index: 1;
        color: #6c7079;
        left: 0;
    }

    .container-1 input#search:focus .icon {
    }

.clearable {
    position: relative;
    display: flex;
    flex-flow:column;
}

    .clearable input[type=text] {
        padding: 8px 24px 8px 25px;
        font-size: 14px;
        color: #6c7079;
        outline: none;
        border: 1px solid #dee1e6;
        border-radius: 3px;
        background: #fff;
        -webkit-transition: all 0.4s;
        -moz-transition: all 0.4s;
        transition: all 0.4s;
    }

    .clearable input:active, .clearable input:focus {
        border: 1px solid #ddd;
        background: #fff;
        border-color: #4c9ed9;
    }

.clearable__clear {
    display: none;
    position: absolute;
    right: 3px;
    top: 0;
    padding: 0 8px;
    font-style: normal;
    user-select: none;
    cursor: pointer;
    height: 34px;
    line-height: 34px;
    color: #6c7079;
    z-index: 99;
}

.clearable .icon {
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 8px;
    font-style: normal;
    user-select: none;
    height: 34px;
    line-height: 34px;
    color: #6c7079;
}

.clearable input::-ms-clear { /* Remove IE default X */
    display: none;
}




/*Хлебные крошки*/
.breadcrumbs {
    margin-top: 5px;
}

ul.breadcrumb {
    list-style: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    /* Display list items side by side */
    ul.breadcrumb li {
        display: inline;
        font-size: 13px;
    }

        /* Add a slash symbol (/) before/behind each list item */
        ul.breadcrumb li + li:before {
            padding: 3px;
            color: black;
            content: "\203A";
        }

        /* Add a color to all links inside the list */
        ul.breadcrumb li a {
            color: #4c9ed9;
            text-decoration: none;
        }

            /* Add a color on mouse-over */
            ul.breadcrumb li a:hover {
                color: #4190c9;
                text-decoration: underline;
            }

/*контекстное меню*/
.context-open {
}

.context-menu {
    position: absolute;
    opacity: 0;
    position: absolute;
    visibility: hidden;
    text-align: left;
    font-size: 14px;
    border: 1px solid #dee1e6;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    white-space: nowrap;
    background: #fff;
    z-index: 999;
}

    .context-menu.open {
        opacity: 1;
        transition: none;
        visibility: visible;
    }

    .context-menu .context-menu-item {
        color: black;
        text-decoration: none;
        font-size: 14px;
    }

    .context-menu a {
        display: block;
        padding: 10px;
        color: black;
        text-decoration: none;
        font-size: 14px;
    }

    .context-menu span {
        padding-right: 5px;
    }

    .context-menu a:hover {
        background-color: #f7f7f7;
    }

.context-menu-separator {
    display: block;
    margin: 0 10px;
    height: 1px;
    border-bottom: 1px solid #ded8d8;
}

/*дерево 2.0*/
.treeview li ul {
    display: none;
}

.folder {
    width: 15px;
    display: table-cell;
    text-align: center;
    cursor: pointer;
}

.folder-fol {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;

    display: table-cell;
    text-align: center;
    cursor: pointer;
    background-image: url(/images/cd-icons.png);
    background-repeat: no-repeat;
    background-position: -16px 0;
}

.folder-open {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    display: table-cell;
    text-align: center;
    cursor: pointer;
    background-image: url(/images/cd-icons.png);
    background-repeat: no-repeat;
    background-position: -32px 0;
}


.end-ch {
    display: table-cell;
    font-size: 14px;
    color: #6c7079;
}

.treeview ul li {
    list-style: none;
}

    


.treeview a {
    display: table-cell;
    text-decoration: none;
    padding: 0 5px;
    /*color: #474747;*/
    width: 100%;
}

    .treeview a:hover {
        color: #4c9ed9;
        cursor:pointer;
    }

.treeview .chek-tree {
    width: 20px;
    min-width: 20px;
    display: table-cell;
    position: relative;
}

    .treeview .chek-tree input {
        position: absolute;
        top: 2px;
        left: 5px;
    }

#content {
    margin: 0 auto;
}

/*checkbox tree*/
.tree-quantity {
    padding: 5px;
    background: #dee1e6;
    text-align: center;
    color: #000;
    right: -30px;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    border-radius: 5px;
    position: absolute;
    cursor: default;
}

.quantity {
    background: #dee1e6;
    text-align: center;
    color: #000;
    font-size: 11px;
    border-radius: 5px;
    width: 25px;
    height: 25px;
    display: block;
    line-height: 25px;
}

.tree-quantity- {
    display: table-cell;
    position: relative;
    vertical-align: middle;
    text-align: center;
    min-width: 25px;
}

.tree-action {
    display: table-cell;
    position: relative;
    vertical-align: middle;
    text-align: right;
    min-width: 20px;
    color: #6c7079;
}

    .tree-action button {
        padding: 0 5px;
        color: #6c7079;
        cursor: pointer;
        background-color: transparent;
        font-size: 14px;
        border: none;
        outline: none;
    }

        .tree-action button:hover {
            color: #4c9ed9;
        }


/*drop down list*/
.dropbtn {
    background-color: #fff;
    color: #6c7079;
    font-size: 14px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    border-radius: 5px;
    padding: 4px 10px 4px 10px;
    border: 1px solid #cdd0da;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    outline: none;
    display: inline-block;
    margin-left: 10px;
}

.report-btn {
}

    .report-btn span {
        padding: 0 10px 0 0 !important;
    }


.dropbtn:hover, .dropbtn:focus {
    border-color: #4c9ed9;
    outline: none;
    color: #4c9ed9;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    overflow: auto;
    z-index: 100;
    right: 0;
    text-align: left;
    font-size: 14px;
    border: 1px solid #dee1e6;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    white-space: nowrap;

}

.treeview .dropdown-content {
}

.tree-drop-a a {
    display: block !important;
    width: auto !important;
    color: black !important;
    padding: 10px !important;
    text-decoration: none !important;
    font-size: 14px !important;
}

    .tree-drop-a a:hover {
        background-color: #f7f7f7;
    }

.dropdown-content a {
    color: black;
    padding: 10px;
    text-decoration: none;
    display: block;
    font-size: 14px;
}

.dropdown a:hover {
    background-color: #f7f7f7;
}

.show {
    display: block;
}


.content {
    margin: 0 auto;
}

.doco-customtable-line {
    display: flex;
    padding: 5px;
    box-sizing: border-box;
    position: relative;
}

.doco-formgroup-data-cont {
    display: block;
    position: relative;
}


/*меню по клику*/
.menu-toggle {
    color: #fff;
}

.decreasetext {
    font-size: 11px !important;
}

.increasetext {
    font-size: 16px !important;
}
/*.menu-toggle:hover {
  background-color: #fff;
  color: #000;
  border-color: #000;
}*/

.menu-content {
    position: absolute;
    background-color: #ffffff;
    z-index: 99;
    color: #000000;
    display: none;
    left: 0px;
    -webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.2);
    box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.2);
}

    .menu-content button {
        width: auto;
        text-align: left;
        white-space: nowrap;
        width: 100%;
    }

        .menu-content button span {
            padding: 10px 15px;
            display: block;
            color: #000 !important;
        }

        .menu-content button:hover {
            background: #f9f9f9;
        }

.menu-toggle.active-1 {
    background-color: #ffffff;
    border-color: #000;
    color: #000000;
}

    .menu-toggle.active-1 .menu-content {
        display: block;
    }





/*правая панель*/
.right-menu {
    position: fixed;
    right: -50%;
    top: 40px;
    width: 50%;
    bottom: 0;
    background: transparent;
    z-index: 10;
    padding-left: 5px;
    overflow: hidden;
    transition: all 0.6s ease-in-out;
}

.chart-set {
    position: relative;
    margin-bottom: 25px;
}

.right-settings {
    padding: 0 10px;
    position: relative;
    cursor: pointer;
}

    .right-settings:hover {
        padding: 0 10px;
        color: #4c9ed9;
    }

        .right-settings:hover:after {
            position: absolute;
            content: '';
            left: 10px;
            right: 10px;
            bottom: -5px;
            height: 2px;
            background: #4c9ed9;
        }

.chart-ather {
    float: right;
    padding-right: 15px;
    color: #4c9ed9;
    cursor: pointer;
}

    .chart-ather:after {
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        border: 4px solid transparent;
        border-top: 4px solid;
        width: 0;
        height: 0;
        margin-top: -2px;
        color: #4c9ed9;
    }

.chart-res {
    color: #4c9ed9;
    cursor: pointer;
}

.chart-drive {
    position: relative;
    margin-top: 10px;
}

.menu-hide.show {
    right: 0px;
    transition: all 0.6s ease-in-out;
}

.right-menu-content {
    position: absolute;
    left: 5px;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
    box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
}



.right-menu-content {
    position: absolute;
    left: 5px;
    right: 0;
    top: 0;
    bottom: 0;
    background: #fff;
    padding: 15px;
    -webkit-box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
    box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
    overflow: auto;
}

.menu-tab-r {
    padding: 0 15px 0 0 !important;
    color: #6c7079 !important;
    float: right;
}

.menu-tab {
    cursor: pointer;
}

.menu-tab- {
    width: 50px;
    height: 38px;
    cursor: pointer;
    color: #ccc;
    text-align: center;
    line-height: 38px;
}
/*контекстное меню*/
.context-open {
}

.context-menu {
    position: absolute;
    opacity: 0;
    position: absolute;
    visibility: hidden;
    text-align: left;
    font-size: 14px;
    border: 1px solid #dee1e6;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    white-space: nowrap;
    background: #fff;
    z-index: 999;
}

    .context-menu.open {
        opacity: 1;
        transition: none;
        visibility: visible;
    }

    .context-menu .context-menu-item {
        color: black;
        text-decoration: none;
        font-size: 14px;
    }

    .context-menu a {
        display: block;
        padding: 10px;
        color: black;
        text-decoration: none;
        font-size: 14px;
    }

    .context-menu span {
        padding-right: 5px;
    }

    .context-menu a:hover {
        background-color: #f7f7f7;
    }

.context-menu-separator {
    display: block;
    margin: 0 10px;
    height: 1px;
    border-bottom: 1px solid #ded8d8;
}


#MainContentContainer {
    margin-left: 50px;
    flex:1;
}


.doco-dialog-window {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40%;
    height: 80%;
    border: 0;
    box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
    margin: auto;
    background-color: white;
}


    .doco-dialog-window .doco-dialog-window-content {
        height: 100%;
        width: 100%;
        box-sizing: border-box;
        padding: 20px;
    }

.doco-dialog-window-header {
    height: 50px;
    width: 100%;
    border-bottom: 1px solid rgba(108, 112, 121, 0.37);
    position: relative;
}

    .doco-dialog-window-header > .doco-dialog-window-header-text {
        display: block;
        padding-left: 20px;
        padding-top: 10px;
    }


    .doco-dialog-window-header .doco-dialog-window-header-close {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
    }






        .doco-dialog-window-header .doco-dialog-window-header-close:hover {
        }




.CommandParamTextBox {
    padding: 5px 30px 5px 10px;
    border-radius: 10px;
    border: 1px solid #c5c5c5;
    font-size: 14px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    display: block;
    background: #fff;
    width: 100%;
}

.doco-form-label-1 {
    font-weight: bold;
    text-transform: uppercase;
}


.doco-form-allspaceincontainer {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}


.doco-form-container-header {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    min-height: 30px;
    margin-bottom: 5px;
}

/*контекстное меню*/

.doco-context-menu {
    position: absolute;
    opacity: 0;
    position: absolute;
    visibility: hidden;
    text-align: left;
    font-size: 14px;
    border: 1px solid #dee1e6;
    border-radius: 5px;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    white-space: nowrap;
    background: #fff;
    z-index: 999;
}


    .doco-context-menu.open {
        opacity: 1;
        transition: none;
        visibility: visible;
    }


    .doco-context-menu .context-menu-item {
        color: black;
        text-decoration: none;
        font-size: 14px;
    }

    .doco-context-menu a {
        display: block;
        padding: 10px;
        color: black;
        text-decoration: none;
        font-size: 14px;
    }


    .doco-context-menu span {
        padding-right: 5px;
    }


    .doco-context-menu a:hover {
        background-color: #f7f7f7;
    }

.context-menu-separator {
    display: block;
    margin: 0 10px;
    height: 1px;
    border-bottom: 1px solid #ded8d8;
}



.split::before {
    content: '|';
    position: absolute;
    width: 1px;
    height: 16px;
    margin-top: -8px;
    color: #a6a6a6;
    position: static;
    padding: 0 10px;
}

/*menu по клику*/
.nav {
    display: inline;
    margin: 0;
    padding: 0;
}

    .nav li {
        display: inline-block;
        list-style: none;
    }

        .nav li a.dropdown-toggle.active-2:after {
            position: absolute;
            content: '';
            left: 1px;
            right: 1px;
            bottom: 0;
            margin-bottom: 0px;
            height: 2px;
            background: #fff;
            z-index: 3;
        }

    .nav .button-dropdown {
        position: relative;
    }

    .nav li a {
        display: block;
        color: #333;
        background-color: #fff;
        padding: 5px 10px;
        text-decoration: none;
        border: 1px solid #fff;
    }

        .nav li a span {
            display: inline-block;
            margin-right: 5px;
        }

.dropdown-toggle:hover {
    color: #4c9ed9;
}

.dropdown-toggle .ather {
    margin-left: 5px;
}

.nav li a.dropdown-toggle.active-2 {
    color: #4c9ed9;
    border: 1px solid #cccccc;
}

    .nav li a.dropdown-toggle.active-2:hover {
    }

    .nav li a:hover span, .nav li a.dropdown-toggle.active-2 span {
    }

.nav li .dropdown-menu {
    display: none;
    position: absolute;
    left: 0;
    padding: 0;
    margin: 0;
    text-align: left;
    z-index: 2;
    margin-top: -2px;
    border: 1px solid #cccccc;
    -webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.2);
    -moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.2);
    box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.2);
}

    .nav li .dropdown-menu.active-2 {
        display: block;
    }

    .nav li .dropdown-menu a {
        width: 150px;
        border: none;
        padding: 10px;
    }

        .nav li .dropdown-menu a:hover {
            background: #f9f9f9;
        }


/*скрытие элементов*/
.doco-rollup {
    position: relative;
    height: 15px;
}


    .doco-rollup:after {
        background-color: #dee1e6;
        content: "";
        height: 0px;
        position: absolute;
        vertical-align: middle;
        right: 20px;
        left: 0;
        top: 7px;
    }


    .doco-rollup a {
        font-size: 12px;
        color: #797878;
        background: transparent;
        display: inline;
        position: absolute;
        right: 8px;
        z-index: 2;
        padding: 0 5px 0 5px;
        text-decoration: none;
    }


        .doco-rollup a:hover {
            color: #4c9ed9;
        }


        .doco-rollup a:after {
            content: '';
            margin-left: 5px;
            border: 4px solid transparent;
            border-top: 4px solid;
            width: 0;
            height: 0;
            position: absolute;
            top: 50%;
        }


    .doco-rollup i {
        border: solid black;
        border-width: 0 1px 1px 0;
        display: inline-block;
        padding: 3px;
        position: absolute;
        position: absolute;
    }


    .doco-rollup:hover i {
        border-color: #4c9ed9;
    }


    .doco-rollup:hover span {
        color: #4c9ed9;
    }


    .doco-rollup .right {
        transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
    }


    .doco-rollup .left {
        transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
    }


    .doco-rollup .up {
        transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
        right: 3px;
        top: 6px;
    }


    .doco-rollup .down {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        right: 3px;
        top: -2px;
    }




.disabled {
    cursor: default !important;
    color: #a8a7a7;
    !important;
    background: #ededed !important;
}

.disabled-tool-button {
    cursor: default !important;
    color: #ededed !important;
}

.disabled:hover {
    color: #a8a7a7 !important;
}


.doco-property-grid {
    border: 3px solid red;
    box-sizing: border-box;
    padding: 5px;
}

    .doco-property-grid tr {
        border-bottom: 2px solid gray;
    }


.doco-dialog-form-wrapper {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: rgba(125, 125,125,0.5);
}


.doco-dialog-form {
    width: 400px;
    height: 400px;
    z-index: 10;
    overflow: auto;
    background-color: white;
    padding: 10px;
    box-shadow: -1px 0px 3px 0px rgba(0,0,0,0.3);
}

.doco-centered-form {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto auto;
}



.doco-form-header .textarea {
    position: relative;
}

.doco-form-header .headerarea {
    width: 100%;
}



.doco-form-header:after {
    display: block;
    content: '';
    position: absolute;
    /*border-bottom: 2px solid #4c9ed9;*/
    bottom: 2px;
    left: 0px;
    right: 5px;
}

.doco-form-header i {
    padding-right: 10px;
}



.datafield-text {
    width: 100%;
    height: 100%;
    border: 0;
    padding-left: 10px;
    padding-right: 30px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
}

    .datafield-text[readonly] {
        color: rgb(125,125,125);
        background: #fbfbfb;
    }

.edited {
    border-bottom: 1px solid gray;
}

    .edited[contenteditable="true"] {
        background-color: rgba(124, 124, 124, 0.1);
        border-bottom: 1px solid transparent;
        background-position: right top;
        background-image: url(/images/global/icons/pen-editor.png);
        background-repeat: no-repeat;
    }




.tree-element-icon {
    width: 16px;
    height: 16px;
    padding-right: 5px;
}



.doco-notification-timer {
    position: fixed;
    bottom: 50px;
    right: 50px;
    padding: 20px;
    box-shadow: 2px 2px 2px #344B5E;
    background-color: #344B5E;
    color: #fff;
    font-weight: bold;
    z-index:100;
}

.doco-tree-toolbar {
    padding: 10px 10px 10px 10px;
    border-top: 1px solid #e7eaec;
    font-size: 14px;
    border-radius: 5px;
}

.doco-toolbar-bottom {
    padding: 10px 10px 10px 10px;
    border-top: 1px solid #e7eaec;
    font-size: 14px;
    position: absolute;
    bottom: 0;
    left: 10px;
    right: 10px;
    border-radius: 5px;
}





.doco-btn-2 {
    margin-right: 15px;
    padding-bottom: 3px;
    display: inline-block;
    text-decoration: none;
    color: #363636;
    font-size: 14px;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    margin-right: 10px;
    position: relative;
}


    .doco-btn-2:hover {
        color: #4c9ed9;
    }


    .doco-btn-2:last-child {
        margin-right: 0;
    }

    .doco-btn-2:hover::after {
        position: absolute;
        content: '';
        left: 0;
        right: 0;
        bottom: 0;
        height: 0px;
        background: #4c9ed9;
    }





.form-container {
    /*margin-top: 5px;*/
}

.editor-form-container {
    flex:1;
}


/*
.form-container::before {
    content: "";
    overflow: hidden;
    display: block;
}
    */

.form-button-1 {
    border: 1px solid gray;
    padding: 5px;
    background-color: rgba(101, 115, 126, 0.29);
}


.form-textbox-1 {
    padding-left: 10px;
    background-color: rgb(248, 248, 248);
    border: 2px solid transparent;
    box-sizing: border-box;
}

    .form-textbox-1:focus {
        background-color: white;
        border: 2px solid silver;
    }

.padding-tb-15 {
    padding-top: 15px;
    padding-bottom: 15px;
}

.padding-t-15 {
    padding-top: 15px;
}

.padding-t-5 {
    padding-top: 5px;
}

.padding-lr-15 {
    padding-left: 15px;
    padding-right: 15px;
}

.padding-lr-5 {
    padding-left: 5px;
    padding-right: 5px;
}



.ta-center {
    text-align: center;
}

.ta-left {
    text-align: left;
}

.ta-right {
    text-align: right;
}



.datafield_template {
    position: relative;
}


.select-list {
    border: 1px solid #d4cfcf;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    text-align: justify;
    box-sizing: border-box;
    display: flex;
    flex-flow: column-reverse;
    background: white;
    min-height: 100%;
}

    .select-list:hover {
        border: 1px solid #d4cfcf;
        cursor: pointer;
    }

    .select-list:focus {
        border: 1px solid red;
    }

.select-list-active {
    position: absolute !important;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #dee1e6;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    z-index: 999;
    left: 0;
    margin-top: 0;
    display: flex;
    flex-flow: column;
    padding-left: 0;
    padding-right: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    top: 0px;
    box-sizing: border-box;
}

.datavalue {
    padding-left: 10px;
    width: 100%;
}

.select-list .select-element {
    width: 100%;
    height: 30px;
    cursor: pointer;
    color: #6C7079 !important;
    font-size: 14px;
}


    .select-list .select-element:hover {
        background-color: #f9f9f9;
    }

.select-list .select-element-active {
    display: flex;
}

    .select-list .select-element-active .select-element-active-button {
        position: relative;
        background-color: transparent;
        height: 20px;
        width: 20px;
        min-width: 20px;
        margin-left: 10px;
        background-image: url(/images/select2x2.png);
        background-repeat: no-repeat;
        background-position: -8px -16px;
        float: right;
        cursor: pointer;
    }


.show-block {
    display: block;
    padding-left: 5px;
    box-sizing: border-box;
    padding-top: 5px;
}

.show-flex {
    display: flex;
}


.selected-value {
    background-color: rgba(0, 120, 212, 0.1);
}


.form-container-group-1 {
    display: flex;
    flex-flow: column;
}


.form-container-textfield {
    padding: 2px;
    display: flex;
}

.form-textfield-label {
    color: rgba(0, 0, 0, 0.55);
    margin: 10px;
    font-size: 16px;
    width: 100px;
}

#doco-editor-method {
    display: none;
    position: absolute !important;
    margin: auto auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
    width: 800px;
    height: 350px;
    box-sizing: border-box;
}

.padding-0 {
    padding: 0;
}


.doco-icon {
    width: 16px;
    height: 16px;
    box-sizing: border-box;
}

.doco-icon-64 {
    width: 64px !important;
    height: 64px !important;
}

.doco-control-text-container {
    position: relative;
    /*    display:flex;*/
}

.doco-control-text {
}

.doco-body-center {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto auto;
    width: 50%;
    height: 50%;
    z-index: 10;
}

.doco-form-header-comment-right {
    float: right;
    font-size: 12px;
    color: green;
    font-weight: bold;
    padding: 5px;
    padding-right: 5px;
    padding-left: 5px;
    position: absolute;
    right: 80px;
    background-color: #e3e3e6;
    padding-left: 20px;
    padding-right: 10px;
}

.doco-button {
    border-radius: 5px;
    padding: 10px;
}

.doco-button-blue {
    border-radius: 5px;
    padding: 10px;
    color: white;
    background-color: rgb(76, 158, 217);
    cursor: pointer;
}

.doco-button-transparent {
    border-radius: 5px;
    padding: 10px;
    color: black;
    background-color: transparent;
    cursor: pointer;
    border: 1px solid silver;
}

.doco-button-silver {
    border-radius: 5px;
    padding: 10px;
    color: white;
    background-color: silver;
    cursor: pointer;
}


    .doco-button-blue:hover, .doco-button-silver:hover, .doco-button-transparent:hover {
        color: red !important;
    }


.doco-button-image {
    width: 16px;
    height: 16px;
    padding: 2px;
    margin-right: 5px;
}

.doco-button-text {
    font-weight: bold;
}

.doco-error {
    color: white;
    background-color: red;
}


.doco-form-tab {
    padding: 0;
    flex-flow: column;
    overflow: auto;
    position: relative;
    display: flex;
    box-sizing: border-box;
}

.doco-bg-color-1 {
    background-color: #e3e3e6;
}


.doco-height-30 {
    height: 30px;
}


.doco-height-40 {
    height: 40px;
}

.doco-width-100pct {
    width: 100%;
}


.doco-control-design {
    border-top: 1px dotted green;
    border-bottom: 1px dotted green;
    border-left: 1px dotted green;
    border-right: 1px dotted green;
/*    padding: 5px;*/
    box-sizing: border-box;
/*    margin: 5px;*/
    cursor: pointer;
    box-sizing:border-box;
}

.doco-control-design-active {
    border-top: 3px solid #4c9ed9 !important;
    border-bottom: 3px solid #4c9ed9 !important;
    border-left: 3px solid #4c9ed9 !important;
    border-right: 3px solid #4c9ed9 !important;
}


.table-column-style-fix {
    background-color: #efefef;
    text-align: center;
    border-right: 0;
}

.br-0 {
    border-radius: 0;
}

.br-5 {
    border-radius: 5px;
}

.br-10 {
    border-radius: 10px;
}

.br-15 {
    border-radius: 15px;
}

.doco-control-editor-container {
    width: 100%;
    height: 100%;
    padding-right: 34px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}


.doco-notification-error {
    background-color: red !important;
}


.doco-formdesign-area-header {
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    padding-left: 10px;
    padding-right: 20px;
    background-color: silver;
    color: black;
    font-weight: bold;
    z-index: 10;
}


.doco-formdesign-title, .formdesign-content-toolbar, .formdesign-content-grouparea, .formdesign-content-group {
    padding-bottom: 5px;
    padding-left: 5px;
    border: 2px dashed green;
    min-height: 50px !important;
    position: relative;
    margin-bottom: 15px;
}

.formdesign-content-group {
    margin-top: 25px;
    border: 1px dashed rgb(76, 158, 217) ;
    padding: 5px;
    padding-top: 25px;
}

.formdesign-content-grouparea {
    padding-right: 5px;
}


.pos-parent-center {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto auto !important;
}







.login-form {
    padding: 30px;
    background: #fff;
    border: 1px solid #dee1e6;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.1);
    border-radius: 5px;
    position: relative;
}



.title {
    width: 100%;
    margin-bottom: 30px;
    line-height: 30px;
    font-size: 26px;
    color: #000;
    position: relative;
}


    .title::before {
        content: "";
        width: 5px;
        height: 100%;
        position: absolute;
        top: 0;
        left: -30px;
        background: #e41b3b;
    }



.logo-row {
    position: relative;
    padding: 0;
    width: 100%;
    margin: auto auto 10px;
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -ms-box-sizing: content-box;
}


.login-input {
    border-radius: 5px;
    -webkit-box-shadow: inset 0px 0px 0px 1px rgba(197,197,197,1);
    -moz-box-shadow: inset 0px 0px 0px 1px rgba(197,197,197,1);
    box-shadow: inset 0px 0px 0px 1px rgba(197,197,197,1);
    border: 2px solid transparent;
    font-size: 14px;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
    background: #fff;
    padding: 17px 43px 15px 28px;
    color: #000;
    width: 100%;
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

    .login-input::placeholder {
        color: #999;
    }


    .login-input:focus {
        border: 2px solid #b7ebff;
        -webkit-box-shadow: inset 0px 0px 0px 1px rgba(83,185,223,1);
        -moz-box-shadow: inset 0px 0px 0px 1px rgba(83,185,223,1);
        box-shadow: inset 0px 0px 0px 1px rgba(83,185,223,1);
    }



.form-label {
    position: absolute;
    pointer-events: none;
    left: 28px;
    top: 0;
    line-height: 52px;
    transition: .3s;
    font-size: 14px;
    color: #8f8f8f;
}

.login-error, .pass-error {
    font-size: 14px;
    color: #dd5656;
}


.forgot-pas {
    float: right;
    display: inline-block;
    text-decoration: underline;
    color: #333;
    font-size: 14px;
    margin-top: 4px;
}

.login-form button {
    border: none;
    display: inline-block;
    color: #fff;
    padding: 10px 45px;
    font-size: 14px;
    background: #2b9b0d;
    outline: none;
    border-radius: 3px;
}

    .login-form button:hover {
        color: #fff;
        background: #2b9010;
        cursor: pointer;
    }

button:active, button:focus {
    outline: none;
}

.footer {
    position: absolute;
    right: 0;
    top: 630px;
    left: 0;
    margin: auto;
    color: #c8c8c8;
    font-size: 14px;
    padding-top: 40px;
}

.first-block {
    position: relative;
    width: 100%;
    height: 630px;
    background: #fff;
}

.login-block {
    width: 500px;
    height: 500px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

.header {
    position: relative;
    height: 80px;
    background: #fff;
    -webkit-box-shadow: 0px 0px 5px 2px rgba(163,163,163,0.3);
    -moz-box-shadow: 0px 0px 5px 2px rgba(163,163,163,0.3);
    box-shadow: 0px 0px 5px 2px rgba(163,163,163,0.3);
    z-index: 2;
}


.top-logo {
    display: block;
    position: relative;
    height: 40px;
    border-bottom: 1px solid #e6e6e6;
    padding: 0 20px;
    background: #323232;
}

.och-logo {
    width: 195px;
    height: 40px;
    display: inline-block;
}

.form-main-content {
    position: absolute;
    margin: 0px;
    left: 0px;
    right: 0px;
    top: 80px;
    bottom: 45px;
}

.form-main-container-1 {
    position: absolute;
    margin: 0px;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0;
    z-index: 0;
    display: block;
    visibility: visible;
    overflow: hidden;
}

.form-footer {
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    height: 45px;
    padding: 0 20px;
    background: #323232;
    color: #c8c8c8;
    font-size: 12px;
}

.footer-info-blor-left {
    width: 200px;
    display: inline-block;
    padding-top: 6px;
}


    .footer-info-blor-left span {
        display: block;
    }

.form-cont-pan-1 {
    background: #fff;
    border-radius: 3px;
    -webkit-box-shadow: 0px 0px 5px 2px rgba(163,163,163,0.3);
    -moz-box-shadow: 0px 0px 5px 2px rgba(163,163,163,0.3);
    box-shadow: 0px 0px 5px 2px rgba(163,163,163,0.3);
}

.element-title {
    padding: 15px 20px 0 20px;
}

    .element-title span, .element-title h1 {
        border-bottom: 1px solid #e6e6e6;
        padding-bottom: 10px;
        display: block;
        position: relative;
        font-weight: bold;
    }

        .element-title span::after, .element-title h1::after {
            position: absolute;
            content: '';
            left: 0;
            bottom: 0;
            width: 30px;
            height: 2px;
            background: #e41b3d;
        }

.form-title-template-1 {
    padding: 15px 20px 0 20px;
    border-bottom: 1px solid #e6e6e6;
}

    .form-title-template-1 span, .form-title-template-1 h1 {
        padding-bottom: 10px;
        display: block;
        position: relative;
        font-weight: bold;
        padding-left: 10px;
        color: rgb(80, 116, 165);
        font-weight: normal;
        text-transform: uppercase;
        overflow: hidden;
        font-size: 1.1em;
        padding-bottom: 10px;
    }

        .form-title-template-1 span::after, .form-title-template-1 h1::after {
            position: absolute;
            content: '';
            left: 0;
            bottom: 0;
            width: 30px;
            height: 2px;
            background: #e41b3d;
        }


.list-ul {
    padding: 10px 0 15px 0;
}

    .list-ul li {
        list-style: none;
        padding: 5px 20px;
        font-size: 14px;
    }


        .list-ul li span {
            display: table-cell;
            position: relative;
            vertical-align: middle;
            text-align: right;
            min-width: 20px;
            color: #6c7079;
        }

        .list-ul li:hover {
            background: rgb(240, 240, 240);
            color: #000;
            cursor: pointer;
        }

.list-element-active {
    background: rgb(230, 240, 249);
    color: #000;
    cursor: pointer;
}


.ul-40 {
}

    .ul-40 li {
        height: 40px;
        line-height: 40px;
    }



.comand-menu-midle {
    display: block;
    margin-top: 20px;
    padding: 20px 0;
    border-top: 1px solid #e6e6e6;
}


.form-button-green {
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    padding: 9px 15px;
    background: #48a857;
    border-radius: 3px;
}

.form-button-blue {
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    padding: 9px 15px;
    background: #4c9ed9;
    border-radius: 3px;
}

.form-button-red {
    cursor: pointer;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    padding: 9px 15px;
    background: #e41b3d;
    border-radius: 3px;
}

.form-tool-button-1 {
    margin: 5px;
    padding: 10px;
    width: 100px;
    cursor: pointer;
    border: 0;
    background: transparent;
    border-radius: 4px;
}


    .form-tool-button-1:hover {
        background-color: rgb(245,245,245);
    }



.border-0 {
    border: 0 !important;
}




.nav li:first-child {
    margin-left: 0;
}

.nav li {
    display: inline-block;
    list-style: none;
    margin-left: 20px;
}

    .nav li a:hover {
        color: #e41b3d;
    }


        .nav li a:hover::after {
            -webkit-transform: scaleX(1);
            transform: scaleX(1);
            visibility: visible;
        }

.f-linck-top-menu {
    position: relative;
    height: 100%;
    line-height:40px;
}

.f-linck-top-menu:hover {
    cursor:pointer;
}

    .f-linck-top-menu::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        visibility: hidden;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        background-color: #e41b3d;
        transition: all .3s ease;
    }

.dropbtn {
    background-color: #fff;
    background: #323232;
    color: #DEDEDE;
    font-size: 14px;
    border: none;
    cursor: pointer;
    height: 40px;
}

    .dropbtn:hover, .dropbtn:focus {
        color: #fff;
    }



    .dropbtn::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        visibility: hidden;
        -webkit-transform: scaleX(0);
        transform: scaleX(0);
        background-color: #e41b3d;
        transition: all .3s ease;
    }

    .dropbtn:hover::after, .dropbtn:focus::after {
        -webkit-transform: scaleX(1);
        transform: scaleX(1);
        visibility: visible;
    }

.dropdown {
    position: relative;
    display: inline-block;
    float: right;
    margin-left: 50px;
}

.form-style-default-1 {
    padding: 10px;
    background-color: white;
}


.form-group-style-default-1 {
    padding: 10px;
    background-color: white;
}

.style-flex-column {
    display: flex;
    flex-flow: column;
}

.style-border-test-5 {
    border: 5px solid red;
}

.clr-white {
    color: white;
}

.fs-12px {
    font-size: 12px;
}

.bg-white {
    background-color: white;
}

.bg-white-hover {
    background-color: white;
}

    .bg-white-hover:hover {
        background-color: #fcfcfc;
    }

.no-border {
    border: 0;
}


.tbl-header-border {
    border-color: transparent;
}

    .tbl-header-border:hover {
        border-color: rgba(125,125,125,0.3);
    }


.form-absolute-all-size {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.form-panel-1 {
    margin: 0 20px 0 20px;
    border-top: 1px solid #e6e6e6;
    display: block;
    padding: 5px 0 10px 0;
}

.tab-button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 14px;
    position: relative;
    color: #ccc !important;
    margin-top: 10px;
}

    .tab-button.active {
        color: #000 !important;
    }


.checkbox {
    display: inline-block;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
}

.checkbox input[type='checkbox'] {
        position: absolute;
        z-index: -1;
        opacity: 0;
}

.checkbox input[type='checkbox']:checked ~ .checkbox__indicator {
            background: #e41b3d;

}

.checkbox input[type='checkbox']:checked ~ .checkbox__indicator::after {
    display: block;
}


.checkbox__indicator {
    position: absolute;
    top: 0px;
    left: 6px;
    height: 16px;
    width: 16px;
    background: #e6e6e6;
}

.checkbox__indicator::after {
    left: 6px;
    top: 2px;
    width: 3px;
    height: 8px;
    border: solid #fff;
    border-top-width: medium;
    border-right-width: medium;
    border-bottom-width: medium;
    border-left-width: medium;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox__indicator::after {
    content: '';
    position: absolute;
    display: none;
}




.doco-centered-layout::before {
    width: 100%;
    height: 100%;
    content: "";
    background: url("/images/wallpaper/wall_1.jpg") center center no-repeat #fff;
    background-size: cover;
    filter: opacity(0.9);
    position: absolute;
}


#MainContentContainer {
    position: relative;
}


.datafield-active {
    border: 1px dashed black !important;
}

/* CUSTOM RADIO & CHECKBOXES
   https://stackoverflow.com/a/17541916/383904 */
.option-group-style-1 .radio-item {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

    .option-group-style-1 .radio-item > input { /* HIDE ORG RADIO & CHECKBOX */
        visibility: hidden;
        position: absolute;
    }
    /* RADIO & CHECKBOX STYLES */
    .option-group-style-1 .radio-item span > i { /* DEFAULT <i> STYLE */
        display: inline-block;
        vertical-align: middle;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        transition: 0.2s;
        box-shadow: inset 0 0 0 8px #fff;
        border: 1px solid gray;
        background: gray;
        margin-right: 10px;
    }


    .option-group-style-1 .radio-item > span { /* DEFAULT <i> STYLE */
        color: gray;
    }

    .option-group-style-1 .radio-item:hover span > i { /* HOVER <i> STYLE */
        box-shadow: inset 0 0 0 3px #fff;
        background: silver;
    }

    .option-group-style-1 .radio-item > input:checked + span > i { /* (RADIO CHECKED) <i> STYLE */
        box-shadow: inset 0 0 0 3px #fff;
        background: #65737e;
    }


    .option-group-style-1 .radio-item > input:checked + span { /* (RADIO CHECKED) <i> STYLE */
        font-weight: bold;
        color: black;
    }




.option-group-style-2 {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    font-family: sans-serif;
    border: 2px solid #4c9ed9;
    border-radius: 6px;
}

    .option-group-style-2 .radio-item {
        width: 100%;
        border-bottom: 0px solid #0082fe;
        overflow: hidden;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
    }

    .option-group-style-2 * {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    .option-group-style-2 .radio-item:last-child {
        border-bottom: 0px;
    }

    .option-group-style-2 .radio-item span {
        background-color: transparent;
        color: #000;
        width: 100%;
        height: 100%;
        display: inline-block;
        padding: 6px 12px;
        text-align: left;
        cursor: pointer;
    }

    .option-group-style-2 .radio-item input {
        display: none;
    }

        .option-group-style-2 .radio-item input:checked + span {
            background-color: #4c9ed9;
            color: #fff;
        }

    .option-group-style-2 .radio-item span > i { /* DEFAULT <i> STYLE */
        display: inline-block;
        vertical-align: middle;
        width: 16px;
        height: 16px;
        margin-right: 10px;
    }


    .option-group-style-2 .radio-item:hover span > i {
        box-shadow: inset 0 0 0 3px #fff;
        background: gray;
    }

    .option-group-style-2 .radio-item > input:checked + span > i {
        box-shadow: inset 0 0 0 3px #fff;
        background: #65737e;
    }


.w-a {
    width: auto !important;
}

.actionlink {
    color: #65737e;
    cursor: pointer;
}


    .actionlink > i {
        font-size: 14px;
    }


    .actionlink:hover {
        color: red;
    }


::-webkit-scrollbar {
    width: 12px;
}


::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}


::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: silver;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

    ::-webkit-scrollbar-thumb:window-inactive {
        background: rgba(255,0,0,0.4);
    }

.ui-datepicker-calendar tr th {
    color: rgb(51,51,51);
    font-weight: bold;
}

#ui-datepicker-div {
    margin-top: 3px;
    border-radius: 0;
    border: 1px solid silver;
}

.ui-datepicker-trigger {
    position: absolute;
    padding: 6px 15px;
    top: 0;
    right: 0px;
    color: #6c7079;
    box-sizing: border-box;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: silver;
    text-align: center;
    vertical-align: middle;
    width: 30px;
    padding: 4px 0px 0px 2px;
    background-color: #f3f3f3;
    margin: 0 !important;
    border: 0;
    height: 100%;
    cursor: pointer;
}

    .ui-datepicker-trigger img {
        width: 16px;
        height: 16px;
    }

.datapicker-cont-1 {
    margin-bottom: 5px;
    box-sizing: border-box;
    border: 1px solid silver;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.datapicker-1 {
    box-sizing: border-box;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 35px;
}

.doco-textbox-with-editor {
    display: flex;
    position: relative;
    box-sizing: border-box;
    width: 100%;
}

.spin-button-container-1 {
}

.spin-button-container .spin-down, .spin-button-container .spin-up {
    width: 24px;
    height: 100%;
    padding: 5px;
    border: 1px solid gray;
    margin: auto;
    background: transparent;
    cursor: pointer;
    font-size: 10px;
    color: #65737e;
}

.spin-button-container input {
    /*margin-left:5px;margin-right:5px;*/
}


.spin-button-container .spin-down {
    border-right: 0;
}

.spin-button-container .spin-up {
    border-left: 0;
}


.align-center {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.align-left {
}



.align-right {
    position: fixed;
    right: -50%;
    transition: all 0.6s ease-in-out;
}


.align-show {
    right: 0 !important;
}

.background-gray-show {
    background-color: rgba(125,125,125,0.5);
    transition: all 0.6s ease-in-out;
    visibility: visible;
}



.doco-form-container-content {
    width: 100%;
}


#popupDiv {
    position: absolute;
    top: 100px;
    left: 10px;
    padding: 5px;
    /*    background: slategray;*/
    background: cornsilk;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 3px;
    white-space: nowrap;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 10000;
    opacity: 0;
    transition: transform 200ms ease, opacity 200ms;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}


    #popupDiv > [data-role='content'] {
        color: maroon;
        font-size: 1.1em;
    }







.width100pct {
    width: 100%;
}

.fileform {
    background-color: #FFFFFF;
    border: 1px solid #CCCCCC;
    border-radius: 2px;
    height: 26px;
    overflow: hidden;
    padding: 2px;
    position: relative;
    text-align: left;
    vertical-align: middle;
    width: 230px;
}

    .fileform .selectbutton {
        background-color: #A2A3A3;
        border: 1px solid #939494;
        border-radius: 2px;
        color: #FFFFFF;
        float: right;
        font-size: 16px;
        height: 20px;
        line-height: 20px;
        overflow: hidden;
        padding: 2px 6px;
        text-align: center;
        vertical-align: middle;
        width: 50px;
        cursor: pointer;
        position: absolute;
        right: 1px;
        top: 1px;
        bottom: 1px;
    }

    .fileform #upload {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        -moz-opacity: 0;
        filter: alpha(opacity=0);
        opacity: 0;
        font-size: 150px;
        height: 30px;
        z-index: 20;
    }

    .fileform #fileformlabel {
        background-color: #FFFFFF;
        float: left;
        height: 22px;
        line-height: 22px;
        overflow: hidden;
        padding: 2px;
        text-align: left;
        vertical-align: middle;
        width: auto;
        min-width: 160px;
    }




.readonly {
    color: gray;
}


.action-btn{
    padding-left:10px;
    padding-right:10px;
}

.action-btn:first-child{
    padding-left:0;
}

    
.action-btn:last-child {
        padding-right: 0;
    }


.custom-select-container .custom-select-header{
    padding:10px;
    margin-bottom:5px;
    color:green;
    font-weight:bold;
}


.FormMaximize{
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    right:0;
    z-index:1000;

}




.doco-control-tabcollection-header {
    padding-bottom: 2px;
    height: auto;
    min-height: 34px;
    width: 100%;
    border-bottom: 3px solid #4c9ed9;
    display: flex;
    overflow: auto;
    box-sizing: border-box;
    overflow: hidden;
}

.doco-sql{
    padding:10px;
}

.doco-sql span[data-role="error-message"]{
    font-weight:bold;
    color:red;
}

.doco-treeview-element{
    display:table;
}

.doco-form-editor-enum-content {
    padding-right:0 !important;
}

.doco-form-editor-enum-content .custom-select {
    margin-bottom:0;
}

[data-class='TreeView'] a.doco-treeelement-active[role="doco-treeelement-text"], .doco-treeclass a.doco-treeelement-active {
    font-weight: bold;
}

[data-class='TreeView'] a.doco-treeview-element:hover, .doco-treeclass a.doco-treeelement:hover {
    cursor: pointer;
}

div[role='widget-control']
{
    position:absolute;
    right:0;
}

div[role='widget-control'] button{
    width:32px;height:32px;
}

[role='copybutton'] {
    display: inline-block;
    margin-left: 10px;
}

[role='copybutton']:hover{
    background-color: transparent !important;
}

[role='copybutton']::before{
}

    [role='copybutton']::after {
        content: url('/images/icons/action-black.png');
        display: inline-block;
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

[role='columnheadersplitter'] {
    flex: 0 0 auto;
    width: 1px;
    cursor: col-resize;
    padding: 0 !important;
    background-color: silver;
    border: 0;
    box-sizing: border-box;
}

    [role='columnheadersplitter']:hover {
        background-color: gray;
    }

[role='columnsplitter'] {
    flex: 0 0 auto;
    width: 1px;
    cursor: col-resize;
    padding: 0 !important;
    background-color: transparent;
    border: 0;
    box-sizing: border-box;
}