html, body, .dhx_diagram {
    background: #fff;
}
.dhx_sample-container__without-editor {
    height: calc(100% - 121px);
}
.dhx_sample-container__with-editor {
    height: calc(100% - 61px);
}
.dhx_sample-widget {
    height: 100%;
}
.dhx-diagram-demo_group {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-wrap: nowrap;
    overflow: hidden;
}
.dhx-diagram-demo_group__image {
    height: 64px;
    width: 64px;
    background-size: contain;
    background-repeat: no-repeat;
}
.dhx-diagram-demo_group__text {
    overflow: hidden;
    padding-top: 10px;
    text-align: center;
    word-wrap: break-word;
    white-space: pre-wrap;

    font-weight: 500;
    line-height: 20px;
    min-height: 50px;
    width: 100%;
}

.dhx-diagram-demo_network-card {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: #F7F7F7;
width: 100%;
height: 100%;
border: 1px solid #DFDFDF;
overflow: hidden;
}
.dhx-diagram-demo_network-card span {
font-weight: 300;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
text-align: center;
}
.dhx-diagram-demo_network-card span:not(:last-child) {
font-weight: 500;
margin-top: 16px;
}







.dhx_diagram_template_a_box {
background-color: transparent;
}
.dhx_diagram_template_a_box {
padding: 0;
border: 1px solid #dfdfdf;
background-color: #fff;
overflow: hidden;
}
.dhx_diagram_template_a {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
height: 100%;
padding: 12px;
}
.dhx_diagram_template_a__inside {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
}
.dhx_diagram_template_a__picture {
width: 90px;
min-width: 90px;
background: center center/cover no-repeat #f7f7f7;
}
.dhx_diagram_template_a__picture:before {
content: "";
display: block;
padding-top: 100%;
}
.dhx_diagram_template_a__body {
padding-left: 12px;
min-width: 200px;
}
.dhx_diagram_template_a__title,
.dhx_diagram_template_a__text {
font: normal 14px/20px Roboto, sans-serif;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.dhx_diagram_template_a__title {
text-align: start;
color: rgba(0, 0, 0, 0.7);
font-weight: 500;
}
.dhx_diagram_template_a__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin: 4px 0;
}
.dhx_diagram_template_a__icon {
font-size: 18px;
margin-right: 4px;
color: rgba(0, 0, 0, 0.7);
}
.dhx_diagram_template_a__text {
color: rgba(0, 0, 0, 0.7);
}
.dhx_diagram_template_a__link {
color: #0288d1;
}






.dhx_diagram_template_b {
position: relative;
width: 100%;
height: 100%;
border: 1px solid #E6E6E6;
background-size: cover;
background-repeat: no-repeat;
cursor: pointer;
}
.dhx_diagram_template_b__lable {
position: absolute;
left: -4px;
top: -4px;
display: inline-block;
padding: 4px 8px;
border-radius: 2px;
background: #FF4D00;
color: #FFF;
font: normal 14px Roboto, sans-serif;
line-height: 16px;
font-weight: 500;
}
.dhx_diagram_template_b__cover {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(32, 161, 241, 0.8);
outline: 1px solid #E6E6E6;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
overflow: hidden;
}
.dhx_diagram_template_b__cover--visibility {
display: none;
}
.dhx_selected .dhx_diagram_template_b__cover--visibility {
display: flex;
}
.dhx_selected .dhx_diagram_template_b {
cursor: default;
}
.dhx_diagram_template_b__info {
display: flex;
}
.dhx_diagram_template_b__item {
margin: 4px 6px;
color: rgba(255, 255, 255, 0.7);
font-weight: normal;
}
.dhx_diagram_template_b__value, .dhx_diagram_template_b__title {
margin-left: 4px;
font: normal 14px Roboto, sans-serif;
font-weight: 500;
color: #FFF;
line-height: 20px;
}
.dhx_diagram_template_b__control {
display: flex;
position: absolute;
right: -10px;
bottom: 0;
transform: translate(0, 25%);
}
.dhx_diagram_template_b__button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
width: 36px;
height: 36px;
border-radius: 50%;
background: #FFF;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1), 0px 2px 16px rgba(0, 0, 0, 0.12);
margin: 0 4px;
}
.dhx_diagram_template_b__icon {
color: #0094EF;
font-size: 20px;
}
.dhx_diagram_template_b__button:hover .dhx_diagram_template_b__icon,
.dhx_diagram_template_b__button:active .dhx_diagram_template_b__icon {
color: #3db5ff;
}
.dhx_diagram_template_b__link {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
/* end of code for diagram_template_b */


.dhx_tree_template {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    width: 100%;
    height: 100%;
}
.dhx_tree_template__value {
    font-family: var(--dhx-font-famaly);
    font-size: var(--dhx-font-size-normal);
    line-height: var(--dhx-line-height-normal);
    color: var(--dhx-font-color-primary);
}
.dhx_tree_template__rows {
    display: flex;
    align-items: center;
    justify-content: center;
}
.dhx_tree_template__button {
    margin-left: 4px;
    background: inherit;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    height: 24px;
    width: 24px;
    align-items: center;
}
.dhx_tree_template__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    color: var(--dhx-font-color-primary);
}
.dhx_tree_template__icon--danger {
    color: var(--dhx-color-danger);
}
.dhx_tree-custom {
    padding: 40px;
}

.dhx_toolbar
{
width : 130%;
}
.top_layout__search
{
width :1200%;
}

.dhx_toolbar__input
{
width:110%;
}

.dhx_demogrid-card .dhx_dataview-item {
padding: 0;
border: 0;
}
.dhx_demogrid-card__image-wrapper {
width: 100%;
border: 1px solid #e4e4e4;
}
.dhx_demogrid-card__image-sizer {
position: relative;
padding-top: 100%;
overflow: hidden;
}
.dhx_demogrid-card__image {
height: 100%;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
right: 0;
bottom: 0;
transform: translate(-50%, -50%);
}
.dhx_demogrid-card__caption {
padding-left: 4px;
padding-right: 4px;
text-align: center;
padding: 4px 0;
font-family: Roboto, Arial, Tahoma, Verdana, sans-serif;
font-size: 14px;
font-weight: 500;
color: rgba(0, 0, 0, 0.7);
word-wrap: break-word;
}
.dhx_demogrid-card__bg-icon {
width: 50%;
height: 50%;
position: absolute;
top: 50%;
left: 50%;
right: 0;
bottom: 0;
transform: translate(-50%, -50%);
background-position: center right;
background-repeat: no-repeat;
background-size: contain;
}
.dhx_demogrid-card__bg-icon--grid {
width: 40px;
left: 0;
transform: translateY(-50%);
}
.dhx_demo-file-icon--other {
background-image: url("../../images/suite/other.svg");
}
.dhx_demo-file-icon--apple {
background-image: url("../../images/suite/dmg.svg");
}
.dhx_demo-file-icon--document {
background-image: url("../../images/suite/doc.svg");
}
.dhx_demo-file-icon--application {
background-image: url("../../images/suite/exe.svg");
}
.dhx_demo-file-icon--web {
background-image: url("../../images/suite/html.svg");
}
.dhx_demo-file-icon--image {
background-image: url("../../images/suite/jpg.svg");
}
.dhx_demo-file-icon--video {
background-image: url("../../images/suite/mpg.svg");
}
.dhx_demo-file-icon--pdf {
background-image: url("../../images/suite/pdf.svg");
}
.dhx_demo-file-icon--psd {
background-image: url("../../images/suite/psd.svg");
}
.dhx_demo-file-icon--text {
background-image: url("../../images/suite/txt.svg");
}
.dhx_demo-file-icon--audio {
background-image: url("../../images/suite/wav.svg");
}
.dhx_demo-file-icon--table {
background-image: url("../../images/suite/xls.svg");
}
.dhx_demo-file-icon--archive {
background-image: url("../../images/suite/zip.svg");
}
.dhx_demo-file-icon--presentation {
background-image: url("../../images/suite/ppt.svg");
}
.dhx_demo-file-icon--folder {
background-image: url("../../images/suite/folder.svg");
}
.dhx_demo-file-icon--xml {
background-image: url("../../images/suite/xml.svg");
}
.dhx_demo-file-icon--js {
background-image: url("../../images/suite/js.svg");
}
.dhx_demo-file-icon--css {
background-image: url("../../images/suite/css.svg");
}
.dhx_demo-file-icon--csv {
background-image: url("../../images/suite/csv.svg");
}
.dhx_demo-file-icon--json {
background-image: url("../../images/suite/json.svg");
}
.dhx_demo-file-icon--png {
background-image: url("../../images/suite/png.svg");
}
.dhx_demo-file-icon--svg {
background-image: url("../../images/suite/svg.svg");
}
.dhx_demo-padding {
padding: 0 24px;
}
.dhx_demo-grid__filename
{
margin-left:35px;
}

.dark-theme .dhx_layout-cell {
background-color: var(--ct-card-bg);
border-color: #434547;
}

.dark-theme .dhx_diagram_editor .dhx_diagram {
    background-color: var(--ct-card-bg);
}

.light-theme .dhx_diagram_editor .dhx_diagram {
    background-color:white;
}

.dark-theme .dhx_diagram_editor__sidebar_default .dhx_property {
    background-color: var(--ct-card-bg);
}

.ligth-theme .dhx_diagram_editor__sidebar_default .dhx_property {
    background-color: white;
}
.dark-theme .section-title {
    color: white;
}

.light-theme .section-title {
    color: black;
}

.dark-theme .input_group_up .inputs_group input {
    background-color: #404954 ;
    border: none;
}

.light-theme .input_group_up .inputs_group input {
    background: white;
}
.dark-theme .input_element input {
    color: white;
    background-color: #404954;
}

.dark-theme .dhx_textarea {
    background-color: #404954;
    color: white;
    border: none;
}

.dark-theme .dhx_topbar .dhx_editor_scale {
    background-color: #404954 ;
}

.dark-theme .inputs_group .input_element
{
    border:none
}

.dark-theme .color_picker_wrap .input_element
{
    border:none
}