.div-canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    perspective: 2000px;
    transition: 0.3s;
}

.window {
    position: absolute;
    -webkit-box-shadow: var(--window-shadow, 0px 0px 20px 0px rgba(0,0,0,0.35));
    -moz-box-shadow: var(--window-shadow, 0px 0px 20px 0px rgba(0,0,0,0.35));
    box-shadow: var(--window-shadow, 0px 0px 20px 0px rgba(0,0,0,0.35));
    border-radius: var(--radius-content, 1rem);
    /*user-select: none;*/
}

@media (max-width: 768px) {
    .window {
        -moz-border-radius-bottomleft: 0;
        -moz-border-radius-bottomright: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
}

.titlebar-caption {
    width: 100%;
    padding-left: 70px;
    padding-right: 70px;
}

.window-content {
    position: absolute;
    background: #f7f7f7;
    height: calc(100% - 70px);
    width: 100%;
    border-radius: 0 0 7px 7px;
    margin-top: 70px;
    padding: 8px;
}



@keyframes scaleOut {
    0% {
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        -webkit-transform: scale(1.3);
        transform: scale(1.3);
    }
}

.close-form {
    -webkit-animation: closeForm 0.3s;
    animation: closeForm 0.3s;
}
@keyframes closeForm {
    0% {
        opacity: 1;
        -webkit-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-filter: blur(0);
        filter: blur(0);
    }

    100% {
        opacity: 0;
        -webkit-transform-origin: 0% 0%;
        transform-origin: 0% 0%;
        -webkit-transform: scale(0,0);
        transform: scale(0,0);
        -webkit-filter: blur(20px);
        filter: blur(20px);
    }
}

.resizer {
    width: 15px;
    height: 15px;
    background: rgba(0, 0, 0, 0);
    border: 0px solid transparent;
    position: absolute;
    bottom: 0;
    right: 0;
    border-bottom-right-radius: 7px;
    cursor: se-resize;
    z-index: 4;
}

/*MENU*/
.kymos-menu-bar {
    width: 100%;
    height: 28px;
    -webkit-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.35);
    -moz-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.35);
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.35);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #ebebeb, color-stop(1.0, #d5d5d5)));
    background: -webkit-linear-gradient(top, #ebebeb, #d5d5d5);
    background: -moz-linear-gradient(top, #ebebeb, #d5d5d5);
    background: -o-linear-gradient(top, #ebebeb, #d5d5d5);
    background: linear-gradient(top, #ebebeb, #d5d5d5);
    z-index: 10000;
    position: fixed;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

    .kymos-menu-bar button {
        height: 28px;
        padding-left: 8px;
        padding-right: 8px;
        background-color: transparent;
        border: 0px solid transparent;
        color: #333;
        font-weight: 200;
        font-size: 0.9rem;
    }


.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    border-radius: .7rem;
    /*border-bottom: 1px solid lime;
    border-top: 1px solid lime;*/
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    /*position: relative;*/
    /*margin-bottom: .35rem;*/
}

.nowrap {
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}

.wrap {
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

    .wrap li {
        /*background: gold;*/
    }

.wrap-reverse {
    -webkit-flex-wrap: wrap-reverse;
    flex-wrap: wrap-reverse;
}

    .wrap-reverse li {
        /*background: deepskyblue;*/
    }

.ky-auto-height{
    /*min-height: 200px;*/
}

.flex-item {
    /*background: tomato;*/
    padding-right: .5rem;
    padding-left: .5rem;
    /*max-width: 50%;*/
    /*height: 100px;*/
    min-width: 50%;
    /*margin: .3rem;*/
    /*background-color: purple*/
    /*border-left: 1px solid orange;
    border-right: 1px solid orange;*/
    padding-bottom: .1rem;
    /*position: relative;*/
}
    .flex-item * .flex-item {
        padding-right: .5rem;
        padding-left: 0;
        
    }
    .flex-item > .ky-checkbox {
        margin-top: 1.4rem;
    }

.ky-col-1 { min-width: 8.3333%; }
.ky-col-2 { min-width: 16.6667%; }
.ky-col-3 { min-width: 25%; }
.ky-col-4 { min-width: 33.3333%; }
.ky-col-5 { min-width: 41.6667%; }
.ky-col-6 { min-width: 50%; }
.ky-col-7 { min-width: 58.3333%; }
.ky-col-8 { min-width: 66.6667%; }
.ky-col-9 { min-width: 75%; }
.ky-col-10 { min-width: 83.3333%; }
.ky-col-11 { min-width: 91.6667%; }
.ky-col-12 { min-width: 100%; }

.ky-col-1-mx { width: 8.3333%; min-width: 3rem; }
.ky-col-2-mx { width: 16.6667%; min-width: 3rem; }
.ky-col-3-mx { width: 25%; min-width: 3rem; }
.ky-col-4-mx { width: 33.3333%; min-width: 3rem; }
.ky-col-5-mx { width: 41.6667%; min-width: 3rem; }
.ky-col-6-mx { width: 50%; min-width: 3rem; }
.ky-col-7-mx { width: 58.3333%; min-width: 3rem; }
.ky-col-8-mx { width: 66.6667%; min-width: 3rem; }
.ky-col-9-mx { width: 75%; min-width: 3rem; }
.ky-col-10-mx { width: 83.3333%; min-width: 3rem; }
.ky-col-11-mx { width: 91.6667%; min-width: 3rem; }

.ky-col-1-sx { width: 8.3333%; min-width: 3rem; }
.ky-col-2-sx { width: 16.6667%; min-width: 3rem; }
.ky-col-3-sx { width: 25%; min-width: 3rem; }
.ky-col-4-sx { width: 33.3333%; min-width: 3rem; }
.ky-col-5-sx { width: 41.6667%; min-width: 3rem; }
.ky-col-6-sx { width: 50%; min-width: 3rem; }
.ky-col-7-sx { width: 58.3333%; min-width: 3rem; }
.ky-col-8-sx { width: 66.6667%; min-width: 3rem; }
.ky-col-9-sx { width: 75%; min-width: 3rem; }
.ky-col-10-sx { width: 83.3333%; min-width: 3rem; }
.ky-col-11-sx { width: 91.6667%; min-width: 3rem; }

.flex-container.ky-dev {
    /*background-color: rgba(0,0,0,.2);*/
    border: 0px dashed var(--color-red);
    border-bottom: 1px dashed var(--color-red);
}

.flex-item{
    border-radius: .7rem;
}
.ky-dev {
    border: 1px dashed var(--primary-color);
    /*border-right: 1px dashed var(--primary-color);
    border-bottom: 1px dashed var(--primary-color);*/
}
.ky-help-tutorial-btn:hover {
    cursor: pointer;
}

@media (max-width: 768px) {
    .flex-item:not(.ky-col-1-sx,
        .ky-col-2-sx,
        .ky-col-3-sx,
        .ky-col-4-sx,
        .ky-col-5-sx,
        .ky-col-6-sx,
        .ky-col-7-sx,
        .ky-col-9-sx,
        .ky-col-10-sx,
        .ky-col-11-sx
    ) > .ky-input, .ky-msg-div, .ky-msg-div > .ky-input {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .flex-item.ky-col-6-mx {
        width: 50% !important;
        min-width: 3rem;
    }
    .flex-item.ky-col-4-mx {
        width: 33.33333% !important;
        min-width: 3rem;
    }
    .flex-item.ky-col-4-sx {
        /*width: auto !important;*/
        min-width: 3rem !important;
    }

}

.ky-btn-combination-info{
    position: absolute;
    top: 120%;
    left: 50%;
    height: 1.7rem;
    transform: translateX(-50%) !important;
    z-index: 1;

    background-color: var(--color-content) !important;
    color: var(--color-text) !important;
    border-radius: 5px;
    border: 1px solid var(--primary-color);
    box-shadow: var(--window-shadow, 0px 0px 20px 0px rgba(0, 0, 0, 0.35));
    padding: 0rem 0.2rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ky-readonly .ky-input-binding, 
    .ky-readonly .ky-input, 
    .ky-readonly .ky-btn-baritem-command,
    .ky-readonly .ky-datagrid .ky-datagrid-footer-cmd .ky-datagrid-delete-row-btn,
    .ky-readonly .ky-datagrid .ky-datagrid-footer-cmd .ky-datagrid-add-row-btn{
    pointer-events: none;
    cursor: default;
}

.ky-readonly .ky-datagrid-header-cell input,
.ky-readonly .ky-window-toolbar,
.ky-readonly .ky-command-tab,
.ky-readonly .ky-window-toolbar .btn-window-div,
.ky-readonly .ky-window-toolbar .btn-window-div *,
.ky-readonly .ky-window-toolbar .ky-btn-bar [data-ky-binding="BtnLoad"],
.ky-readonly .ky-window-toolbar .ky-btn-bar [data-ky-binding="BtnLoad"] *,
.ky-readonly .ky-window-toolbar .ky-btn-bar [data-ky-binding="BtnDev"],
.ky-readonly .ky-window-toolbar .ky-btn-bar [data-ky-binding="BtnDev"] *,
.ky-readonly .ky-window-toolbar .ky-btn-navigator,
.ky-readonly .ky-window-toolbar .ky-btn-navigator *,
.ky-readonly .ky-window-toolbar .ky-quick-reload,
.ky-readonly .ky-window-toolbar .ky-quick-reload *,
.ky-readonly .ky-window-toolbar .ky-sem-filter,
.ky-readonly .ky-window-toolbar .ky-sem-filter *,
.ky-readonly .ky-remove-form-slider,
.ky-readonly .ky-datagrid .sk-cube-grid,
.ky-readonly .ky-datagrid .ky-nav-element-row,
.ky-readonly .ky-datagrid .ky-commands-element-row button,
.ky-readonly .ky-form-command *,
.ky-readonly .ky-message-command .ky-input-binding,
.ky-readonly .ky-message-command .ky-input,
.ky-readonly .ky-message-command .ky-message-command-btn * {
    pointer-events: auto;
}

.ky-readonly .ky-window-toolbar {
    cursor: default;
}