body {
    font-size: 13px !important;
    /*background-color: #000000;
    background-image: linear-gradient(315deg, #000000 0%, #5e5368 74%);*/
}


.drawflow,
.drawflow .parent-node {
    position: relative;
}

.parent-drawflow {
    display: flex;
    overflow: hidden;
    touch-action: none;
    outline: 0;
}

.no-ready > div {
    display: none !important;
}
.no-ready #modalLogin {
    display: block !important;
}
.drawflow {
    width: 100%;
    height: 100%;
    user-select: none;
}

    .drawflow .drawflow-node {
        display: flex;
        align-items: center;
        position: absolute;
        background: #0ff;
        width: 160px;
        min-height: 35px;
        border-radius: 4px;
        border: 2px solid #000;
        color: #000;
        z-index: 2;
        padding: 15px;
    }

        .drawflow .drawflow-node.selected {
            background: red;
        }

        .drawflow .drawflow-node:hover {
            cursor: move;
        }

        .drawflow .drawflow-node .inputs,
        .drawflow .drawflow-node .outputs {
            width: 0;
        }

        .drawflow .drawflow-node .drawflow_content_node {
            width: 100%;
            display: block;
        }

        .drawflow .drawflow-node .input,
        .drawflow .drawflow-node .output {
            position: relative;
            width: 20px;
            height: 20px;
            background: #fff;
            border-radius: 50%;
            border: 2px solid #000;
            cursor: crosshair;
            z-index: 1;
            margin-bottom: 5px;
        }

        .drawflow .drawflow-node .input {
            left: -27px;
            top: 2px;
            background: #ff0;
        }

        .drawflow .drawflow-node .output {
            right: -3px;
            top: 2px;
        }

    .drawflow svg {
        z-index: 0;
        position: absolute;
        overflow: visible !important;
    }

    .drawflow .connection {
        position: absolute;
        transform: translate(9999px, 9999px);
    }

        .drawflow .connection .main-path {
            fill: none;
            stroke-width: 5px;
            stroke: #4682b4;
            transform: translate(-9999px, -9999px);
        }

            .drawflow .connection .main-path:hover {
                stroke: #1266ab;
                cursor: pointer;
            }

            .drawflow .connection .main-path.selected {
                stroke: #43b993;
            }

        .drawflow .connection .point {
            cursor: move;
            stroke: #000;
            stroke-width: 2;
            fill: #fff;
            transform: translate(-9999px, -9999px);
        }

            .drawflow .connection .point.selected,
            .drawflow .connection .point:hover {
                fill: #1266ab;
            }

    .drawflow .main-path {
        fill: none;
        stroke-width: 5px;
        stroke: #4682b4;
    }

    .drawflow .selectbox {
        z-index: 3;
        position: absolute;
        transform: translate(9999px, 9999px);
    }

        .drawflow .selectbox rect {
            fill: #00f;
            opacity: 0.5;
            stroke: #ff0;
            stroke-width: 5;
            stroke-opacity: 0.5;
            transform: translate(-9999px, -9999px);
        }

.drawflow-delete {
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    background: #000;
    color: #fff;
    z-index: 4;
    border: 2px solid #fff;
    line-height: 30px;
    font-weight: 700;
    text-align: center;
    border-radius: 50%;
    font-family: monospace;
    cursor: pointer;
}

.drawflow > .drawflow-delete {
    margin-left: -15px;
    margin-top: 15px;
}

.parent-node .drawflow-delete {
    right: -15px;
    top: -15px;
}
.drawflow .drawflow-node .input {
    left:-6px;
}
.drawflow .drawflow-node .output {
    width:8px; height:8px; border:2px solid;
}
.drawflow .connection .arrow {
    transform: translate(-9999px,-9999px);
}
.drawflow .connection .arrow {
    transform: translate(-10005px,-9999px);
}
.drawflow-node .frequency {
    background-position: 14px 6px;
    padding-left: 39px;
}
:root {
    --border-color: #cacaca;
    --background-color: #e6e9eb;
    --background-box-title: #f7f7f7;
}

html, body {
    margin: 0px;
    padding: 0px;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
}

header {
    height: 36px;
    border-bottom: 1px solid #597488;
    padding-left: 4px;
}

    header h2 {
        margin: 0px;
        line-height: 35px;
        font-size: 20px;
        color: white;
        font-weight: bold;
    }

    header a {
        color: black;
    }

.them-edit-link {
    position: absolute;
    top: 10px;
    right: 100px;
    color: black;
    font-size: 40px;
}

    .them-edit-link a {
        text-decoration: none;
    }

.github-link {
    position: absolute;
    top: 10px;
    right: 20px;
    color: black;
}

.wrapper {
    width: 100%;
    height: calc(100vh - 67px);
    display: flex;
}

.col {
    overflow: auto;
    width: 300px;
    height: 100%;
    border-right: 1px solid var(--border-color);
}

.drag-drawflow {
    line-height: 32px;
    border-bottom: 1px dashed #8b878c;
    padding-left: 20px;
    cursor: move;
    user-select: none;color:white;
    font-size: 13px;
}
.model_status {
    color: #9ed5b1;
    text-align: right;
    font-size: 11px;
    padding: 0 9px;
}
.menu {
    position: absolute;
    height: 40px;
    display: block;
    background: white;
    width: 100%;
}

    .menu ul {
        padding: 0px;
        margin: 0px;
        line-height: 40px; width:50%;
    }

        .menu ul li {
            display: inline-block;
            margin-left: 10px;
            border-right: 1px solid var(--border-color);
            padding-right: 10px;
            line-height: 40px;
            cursor: pointer;
        }

            .menu ul li.selected {
                font-weight: bold;
            }




.swal-wide {
    width: 80% !important;
}




    .bar-zoom svg {
        cursor: pointer;
        padding-left: 10px;
    }

        .bar-zoom svg:nth-child(1) {
            padding-left: 0px;
        }

#drawflow {
    position: absolute;
    float: left;
    height: calc(100% - 50px);
    top: 36px;
    /*background: var(--background-color);*/
    background-size: 25px 25px;
    /*background-image: linear-gradient(to right, #f1f1f1 1px, transparent 1px), linear-gradient(to bottom, #f1f1f1 1px, transparent 1px);*/
    left: 0;
    width: 100%;
}
#ai-coms, #ai-library, #ai-mymodels {
    position: fixed;
    z-index: 1000;
    left: 35px;
    top: 37px;
    background: #5e5368;
    width: 391px;
    border: 1px solid #ddd;
    height: calc(100% - 38px);
    overflow: hidden auto;
    display: none
}
#propCom {
    min-width: 300px;
    max-width: 300px;
    color: #fff;
    padding: 7px;
    padding-bottom: 7px;
    margin: 1px -1px auto 0px;
    height: 100%;
    background: rgba(0,0,0,0.1);
    z-index: 10000; float:left;
}
#sModelName {
    clear: both;
    padding: 3px;
    color: yellow;
    font-size: 12px;
    position: absolute;
    top: -2px;
    font-weight: normal;
}

@media only screen and (max-width: 768px) {
    .col {
        width: 50px;
    }

        .col .drag-drawflow span {
            display: none;
        }

    #drawflow {
        width: calc(100vw - 51px);
    }
}



/* Editing Drawflow */

.drawflow .drawflow-node {
    background: no-repeat;
    border: 1px solid white;
    padding: 0px;
    width: auto;
    border-radius: 50px;
    color: white;
}
    .drawflow .drawflow-node.selected {
        background: none;
        border: 1px solid #4ea9ff;
        -webkit-box-shadow: 0 2px 20px 2px #4ea9ff;
        box-shadow: 0 2px 20px 2px #b391b6;
    }

        .drawflow .drawflow-node.selected .title-box {
            color: white;
            /*border-bottom: 1px solid #4ea9ff;*/
        }

.drawflow .connection .main-path {
    stroke: #4ea9ff;
    stroke-width: 1px;
}

.drawflow .drawflow-node .input, .drawflow .drawflow-node .output {
    height: 10px;
    width: 10px;
    border: 2px solid #fff;
    background: #4ea9ff;
}

    .drawflow .drawflow-node .input:hover, .drawflow .drawflow-node .output:hover {
        background: #4ea9ff;
    }

.drawflow .drawflow-node .output {
    right: 8px;
}

.drawflow .drawflow-node .input {
    left: -7px;
    background: #4ea9ff;
}

.drawflow > .drawflow-delete {
    border: 2px solid #43b993;
    background: white;
    color: #43b993;
    -webkit-box-shadow: 0 2px 20px 2px #43b993;
    box-shadow: 0 2px 20px 2px #43b993;
}

.drawflow-delete {
    border: 2px solid #4ea9ff;
    background: white;
    color: #4ea9ff;
    -webkit-box-shadow: 0 2px 20px 2px #4ea9ff;
    box-shadow: 0 2px 20px 2px #4ea9ff;
}
#propCom input[type="text"] {
    margin: 5px;
    height: 28px;
    font-size: 13px;color:white;
}
.drawflow-node .title-box {
    height: 35px;
    line-height: 35px;
    padding-left: 12px;
    font-size: 0.9em;
    margin-right: 23px;
}

.drawflow .title-box svg {
    position: initial;
}

.drawflow-node .box {
    padding: 10px 20px 20px 20px;
    font-size: 13px;
    color: #555555;
}

    .drawflow-node .box p {
        margin-top: 5px;
        margin-bottom: 5px;
    }

.drawflow-node.welcome {
    width: 250px;
}

.drawflow-node.slack .title-box {
    border-radius: 4px;
}

.drawflow-node input, .drawflow-node select, .drawflow-node textarea {
    border-radius: 4px;
    border: 1px solid var(--border-color);
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    width: 158px;
    color: #555555;
}

.drawflow-node textarea {
    height: 100px;
}


.drawflow-node.personalized {
    background: red;
    height: 200px;
    text-align: center;
    color: white;
}

    .drawflow-node.personalized .input {
        background: yellow;
    }

    .drawflow-node.personalized .output {
        background: green;
    }

    .drawflow-node.personalized.selected {
        background: blue;
    }

.drawflow .connection .point {
    stroke: var(--border-color);
    stroke-width: 2;
    fill: white;
    transform: translate(-9999px, -9999px);
}

    .drawflow .connection .point.selected, .drawflow .connection .point:hover {
        fill: #4ea9ff;
    }


/* Modal */
.modal {
    display: none;
    position: fixed;
    z-index: 7;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    
    background-color: rgba(0,0,0,0.2);
}

.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 0;
    border: 1px solid #888;
    width: 400px; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.modal .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

@media only screen and (max-width: 768px) {
    .modal-content {
        width: 80%;
    }
}
.drawflow_content_node svg {
    position: relative;
    margin-left: 15px;
}
.drag-drawflow svg, .drag-drawflow i, .drawflow_content_node svg, .drawflow_content_node i {
    color: yellow;
    margin-right: 6px;
}
#ai-controls {
    position: absolute;
    width: auto;
    right: 0;
    height: 35px;
    top: 0;
    display: flex;
}
    #ai-controls > div {
        float: right;
        color: #fff;
        
        padding: 9px 12px;
        border-radius: 4px;
        line-height: 18px;
        z-index: 5;
        cursor: pointer;
        width: auto;
        display: flex;
        margin-right: 3px;
    }
#txtModel {
    background: rgba(0,0,0,0.1);
    color: white;
}
.model_time i {
    padding-right: 4px;
}

.model_time {
    font-size: 11px;
    padding-left: 9px;
    color: #a39e9e;
}
.bar-zoom {
    width: 104px !important;
    justify-content: space-around !important;
    padding: 9px 0 !important;
}
.feats {
    width: 430px !important;
    justify-content: space-around;
}
.btnClick:hover {
    color:red;
}
#sAddModel {
    float: right;
    font-size: 12px;
}
.frequency {
    background: url(data:image/png;base64,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) no-repeat left center;
    padding: 5px 0 5px 25px;
    background-size: 17px;
}
#ai-coms{display:none;}
.controlGroup p {
    margin: 0;
    height: 33px;
    line-height: 16px;
    padding: 8px 14px 6px 14px;
    background: rgba(0,0,0,0.3); color: white;
}
.drawflow_content_node > div > div{margin-right:23px;}
#box_bottom {
    position: fixed;
    bottom: 0;
    height: 65%;
    background: rgba(0,0,0,0.2);
    width: 97%;
    z-index: 100;
    margin-left: 36px;
}
.block5 {
    display: flex;
    height: 100%;
}
.aiTables {
    width: 100%;
    height: 100%;
    float: left;
    background: rgba(0,0,0,0.1);
    padding: 7px;
    margin: 5px;
    font-size: 13px;
    color: #e3e3e3;
}

.aiTrain {
    width: 100%;
    height: 100%;
    float: left;
    background: rgba(191, 188, 188, 0.1);
    padding: 7px;
    margin: 5px;
    font-size: 13px;
    color: #e3e3e3;
}
span.r {
    float: right;
   
    color: #555;
    padding: 5px;cursor:pointer;
}
.table-responsive {
    border: 1px solid #535764;
    height: 80%;
    float: left;
    width: 100%;
}
.longer .table-responsive{height:auto}
.aiTables p {
    float: left;
    width: 100%;
    padding: 4px;
    margin: 0;
    text-align: right;
}
#propCom label {
    font-weight: normal;
    margin: 5px auto; width:100%;
}
.dock {
    position: fixed;
    width: 31px;
    height: 100%;
    top: 37px;
    background: #453845;
}
#dockright {
    right: 0;
}
#dockleft {
    left: 0;
}
.dock > ul {
    padding-left: 0;
    line-height: 1px;
}
.dock > ul a {
    color:#fff !important;font-size:12px; outline:none;
}
    .dock > ul > li {
        text-orientation: mixed;
        writing-mode: vertical-lr;
    }
.dock .nav-link.active {
    background: #9b67aa;
    color: white !important;
}
.blockOne ul {
    list-style: none;
    padding-left: 0;
}
.blockOne li {
    min-height: 32px;
    line-height: 32px;
    border-bottom: 1px dashed #69646a;
    padding-left: 18px;
    position: relative;
    font-size: 13px;
    background: no-repeat;
    color: white;
}
    .blockOne li:hover {
        background: rgba(0,0,0,0.2);
    }

.deploy, .editmodel {
    right: 23px;
    padding: 8px;
    font-size: 8px;
    position: absolute;
    border-radius: 50%;
    height: 22px;
    line-height: 8px;
    top: 11px;
    color: white;
    cursor: pointer;
    background: #9b67aa;
}
.editmodel {
    right: 50px;
    width: 22px;
    font-size: 10px;
    line-height: 5px;
}
#lsModels li.active {
    color: yellow;
}
#loading {
    font-size: 17px;
    position: absolute;
    top: 45%;
    left: 40%;
    background: #ecf0bb;
    padding: 5px 22px;
    border-radius: 22px;
    border: 2px solid #fff;
    display: none;
}
.UI-DROP li:hover {
    background:rgba(0,0,0,0.1)
}

.UI-DROP li {
    cursor: pointer;
    min-height: 22px;
    line-height: 22px;
    border-bottom: 1px dashed #627eab; padding: 6px;
    font-size: 0.9em;
    color: white;
}

#cboCols ul {
    columns: 3;
    position: absolute;
    margin-left: 0;
    width: 200%;
    margin-top: 3px;
    max-height:200px;
    overflow:auto;
}
ul {
    background-color: #38303e !important
}
.UI-SUGGEST ul {
    height: 300px;
    overflow: hidden auto;
    z-index: 20000;
}
#cboCols label {
    white-space: nowrap;
    font-weight: normal;
}
    #cboCols label span {
        padding-left: 8px;
    }
#cboCols li {
    min-height: 25px;
    padding: 0 7px;
    line-height: 25px;
    font-size: 13px;
}
.UI-DROP{position:relative;}
#ulCols {
    background: rgba(0,0,0,0.1);
    list-style: none;
    padding-left: 13px;
    max-height: 200px;
    overflow: hidden auto;
    display: flex;
    flex-wrap: wrap;
}
    #ulCols li {
        height: 40px;
        line-height: 40px;
    }
    #ulCols span {
        padding: 5px 13px;
        border: 1px solid #e12d79;
        margin: 5px;
        border-radius: 20px;
        color: #e3136b;
        font-size: 12px;
    }
#exploredata div {
    padding-left: 11px;
}
#exploredata label {
    font-weight: normal;
    width: 100%;
}
#exploredata div {
    padding-left: 11px;
    float: left;
    width: 50%;
}
.filter_add .fa-times {
    float: right;
    padding: 4px;
    position: absolute; cursor:pointer;
    right: 14px;
}
#propCom.longer, #rangeOutput.longer {
    position: fixed;
    top: 35px;
    box-shadow: 1px 12px 7px 2px #3b343a; overflow:hidden auto;
    padding-bottom: 50px;
}
#propTitle {
    color: yellow;
    font-weight: bold;
}
#visualize {
    position: fixed;
    display: none;
    right: 40px;
    top: 35%;
    z-index: 1000;
    background: #353f51;
    width: 500px;
    border: 4px solid rgba(0,0,0,0.3);
    background: #f9f9f9;
    padding: 6px;
    height: 500px;
}
    #visualize .tbblock {
        width: 100%;
        float: left;
    }
.listchart {
    display: flex;
 
    flex-wrap: wrap;
    justify-content: space-around;
}
.listchart > div {
    width: 100px;
    height: 100px;
    border: 1px solid #ddd;
    background: rgba(0,0,0,0.1);
    margin: 9px auto;
    font-size: 13px;
    text-align: center;
    line-height: 96px; cursor:pointer;
}
    .listchart > div:hover {
    background:orangered; color:#fff;
    }
#rangeOutput.longer {
    overflow: auto;
    max-height: 90%;
    width: 50%;
    right: 0;
}
.block3 {
    margin: 5px;
    float: left;
    width: 100%;
}
#deploy {
    position: absolute;
    width: 97%;
    height: 100%;
    top: 6px;
    background: white;
    z-index: 2000;
    display: none;
    right: -35px;
    margin-right: 37px;
    overflow: hidden auto;
}
.depTitle {
    padding: 5px 20px;
    font-size: 19px;
    color: red;
}
.ai_input {
    background: rgba(0,0,0,0.2);
    padding: 6px 12px;
    border: 1px dashed #555;
    margin: 5px auto;
}
#box_bottom.mini {
    bottom: -65%;
}

    #box_bottom.mini #closeBoxBottom {
        transform: rotate(180deg);
    }
#closeBoxBottom {
    position: absolute;
    right: 5px;
    top: -36px;
    padding: 6px 12px;
    border-radius: 50px;
    background: #6298ed;
}
#lsModels li:hover span {
    display: block;
}

#lsModels li span {
    display: none;
}
.form-control {
    background: none !important;
}

.table-bordered {
    border: 1px solid #656262;
}
.nav > li > a:focus, .nav > li > a:hover {
    background-color: rgba(0,0,0,0.2) !important;
}
.ai_input.mini {
    display: none;
}

/*THEME DARK*/
@import url(https://fonts.googleapis.com/css?family=Unica+One);

$colors: #2b908f, #90ee7e, #f45b5b, #7798BF, #aaeeee, #ff0066, #eeaaee, #55BF3B, #DF5353, #7798BF, #aaeeee;

.highcharts-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    text-align: left;
    line-height: normal;
    z-index: 0; /* #1072 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    font-family: 'Unica One', sans-serif;
    font-size: 12px;
}

.highcharts-root text {
    stroke-width: 0;
}

.highcharts-background {
    fill: none;
}

.highcharts-plot-border, .highcharts-plot-background {
    fill: none;
}

.highcharts-label-box {
    fill: none;
}

/* Titles */
.highcharts-title {
    fill: #E0E0E3;
    font-size: 20px;
}

.highcharts-subtitle {
    fill: #E0E0E3;
    text-transform: uppercase;
}
.aiTrain label {
    font-weight: normal;
}

.lbName {
    color: yellow;
    width: 154px;
}




/* Axes */
.highcharts-axis-line {
    fill: none;
    stroke: #C0D0E0;
}

.highcharts-yaxis .highcharts-axis-line {
    stroke-width: 0;
}

.highcharts-axis-title {
    fill: #707070;
}

.highcharts-axis-labels {
    fill: #E0E0E3;
    cursor: default;
    font-size: 0.9em;
}

.highcharts-grid-line {
    fill: none;
    stroke: #D8D8D8;
}

.highcharts-xaxis-grid .highcharts-grid-line {
    stroke-width: 0;
}

.highcharts-tick {
    stroke: #C0D0E0;
}

.highcharts-yaxis .highcharts-tick {
    stroke-width: 0;
}

.highcharts-minor-grid-line {
    stroke: #e0e0e0;
}

.highcharts-crosshair-thin {
    stroke-width: 1px;
    stroke: #c0c0c0;
}

.highcharts-crosshair-category {
    stroke: rgba(155,200,255,0.2);
}
#cboY li span {
    font-weight: normal;
    padding-left: 5px;
}

.vip1, .vip1 #propCom, .vip1 ul.dropdown-menu, .vip1 .modal-content, .vip1 #visualize, .vip1 #rangeOutput.longer {
    background: #353f51 !important;
    color: #fff;
}

    .vip1 .dock {
        background: rgba(0,0,0,0.3);
    }

    .vip1 ul {
        background-color: rgba(0,0,0,0.1) !important;
    }

    .vip1 .dock > ul > li {
        margin: 2px 1px 0px 0px;
        border: 1px solid #69797f;
        
        border-radius: 0 5px 5px 0;
        border-left: none;
    }
    .vip1 .controlGroup p {
        color: #08c0f9;
    }
    .vip1 input.form-control {
        border: none;
        color: #fff;
        background: rgba(0,0,0,0.3) !important;
    }
    .vip1 #ai-coms, .vip1 #ai-library, .vip1 #ai-mymodels {
        background: #353f51;
    }
    .vip1 #propCom i, .vip1 .aiTables i, .vip1 #visualize i {
        color: #fff;
    }
    .vip1 .UI-DROP li:hover {
        background: rgba(0,0,0,0.1);
    }
    .vip1 td {
        border: 1px dashed #627f9e !important;
    }
    .vip1 th {
        border: 1px dashed !important;
    }
    .vip1 .table-bordered {
        border: 1px solid #6c9492;
    }

    .vip2, .vip2 #propCom, .vip2 ul.dropdown-menu, .vip2 .modal-content, .vip2 #visualize, .vip2 #rangeOutput.longer
    , .vip2 #ai-coms, .vip2 #ai-library, .vip2 #ai-mymodels {
        background: #2f3d5e !important;
        color: #fff;
    }

.vip3, .vip3 #propCom, .vip3 ul.dropdown-menu, .vip3 .modal-content, .vip3 #visualize, .vip3 #rangeOutput.longer, .vip3 #ai-coms, .vip3 #ai-library, .vip3 #ai-mymodels {
    background: #074f45 !important;
    color: #fff;
}

.vip4, .vip4 #propCom, .vip4 ul.dropdown-menu, .vip4 .modal-content, .vip4 #visualize, .vip4 #rangeOutput.longer, .vip4 #ai-coms, .vip4 #ai-library, .vip4 #ai-mymodels {
    background: #5b385a !important;
    color: #fff;
}
#deploy td, #deploy th {
    color: #000;
}