body {
    margin: 0;
    box-sizing: border-box;
    font-family: Verdana;
    user-select: none;
    overflow: hidden;
}
input {
    font-family: Verdana;
}

#main_view {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden; /* TEMP needed for some strangeness that creates a scrollbar randomally when resizing */
    /* comment out to see canvas_img_shadow */
}

#image_panel {
    display: inline-block;
    width: calc(50% - 4px);
    vertical-align: top;
   
}

#edit_panel {
    position: absolute;
    top: 0;
    display: inline-block;
    width: 50%;
    height:100%;
}
#edit_params {
    /*display: block;*/
    height: 200px;
    width: 100%;
    background-color: #312F31;
    color: #fff;  
    overflow-y: auto;  
    /*overflow-x: hidden; /* image name goes outside, manual geom needs more room to grow */
    white-space: nowrap;
}

.splitter {
    display: inline-block;
    background-color: #ddd;
}
.splitter:hover {
    background-color: #ccc;
}
#image_splitter {
    cursor: col-resize;
    width:5px;
    height:100%;
}
#edit_splitter {
    display: block;
    cursor: row-resize;
    height: 5px;
    width: 100%;
}

.ctx_menu {
    position: absolute;
    background-color: #656565;
    padding: 7px 0;
    border-radius: 4px;
    border: solid 2px #7d7d7d;
    color: #fff;
    line-height: 140%;
    white-space: nowrap;
    z-index: 101; /* above color picker */
}
.ctx_menu_opt {  
    padding: 0 7px;
    display: block;  /* for the benefit of import label element */
}
.ctx_menu_opt:hover {  
    background-color: #888888;
}
.ctx_menu_opt_var {
    color: #d8ffa5;
}
.ctx_menu_opt_anim {
    color: #a5f9ff;
}
.ctx_menu_sep {
    margin: 3px;
}
.ctx_menu_sub {
    padding-right: 20px; /* add space for the arrow */
}
.ctx_menu_sub:after {
    content: "\2b9e";
    position: absolute;
    right: 5px;
}

.selection_rect {
    position: absolute;
    border: dotted 2px #989898;;
    background-color: rgba(191, 231, 255, 0.2);
}

.node_name_edit {
    position: absolute;
}
.node_name_input {
    outline:none;  /* no focus outline */
    width: 150px;
    font-size: 14px;
    margin-left: -4px;
    background-color: #555;
    color: #fff;
    border: solid 1px #888;
    padding-left: 3px;
    border-radius: 2px;
    font-family: Verdana;
}
.measure_hidden {
    position: absolute;
    visibility: hidden;
    height: auto;
    width: auto;
    white-space: nowrap;
}
.node_text_area {
    width: 100%;
    height: 100%;
    overflow: hidden; /* hide scrollbar */
    white-space: pre;
}
.nodes_text_buttons_cont {
    position: absolute;
    height: 20px;
    top: -23px;
}
.nodes_text_button {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin: 0 2px 0 0;
}

.nodes_text_move_grip {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAJOgAACToB8GSSSgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAGBSURBVDiNrZUxbttAEEXfDlQaPkJkpHWRI0SrlZpA7HwJpzMgHcKJgJTJHVzKcEMsqSsEcB1QvoJc76Tg0BEEcWUJmYr8s/9z98/s0HEk6rq+Sik9AojIzHvf5Na7XLIsyw8iUgMfDXpRVT+ZTP6cLBhjHAJr4Gov1QCjEMLmEE8yG1weEMOw732knGAFvAKrHWwFbC13MLIeApRlOTIfSSn56XS6zq0fdA/m2RKoQgg/j33IOLfAGJh3ngq0rUFbgBvg/j1iFt+MszYNnPVZzb8CPKnqjx3SJ+fcEkBV58DvLuGcuwO+2GsjIt7FGJ+B6xN2lYvnXJXPioGIzFJKa2Bo2LlH3ohI4eDtvnY+bkMIlx0p1zYxxi1wgfnnvW8EwC78CHhQ1cUJJ1wAD8CoGxr/vbF7Bauq+qqq90ANFAavAA8sQgi/DvF6q6yqntafYgcuDBv38XJtM6cdVfvR0Hp3mmAIYZNS+gzsDtMXVQ19sxDeURRrqRWAiBTHfgF/AYRrp2lzAYNSAAAAAElFTkSuQmCC);
}
.nodes_text_color_pick {
    background-color: #444444;
    border: 1px solid #202020;
    border-radius: 10px;
    outline: none;
    width: 14px;
    height: 14px;
    margin: 3px;
}
.nodes_text_font_up {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAD6AAAA+gBtXtSawAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAHhSURBVDiNzZRLa9RgFIafk2mmpWCnk4szFQZEwYUVy0AFQRARF4Ig/gBBEMR/IF52WsSFFMSN4EIQdyPoH+hCdwURROLConipWqYtNjO01aTJcdGayWRKWgXBd5XknPOe5/0gH/zvkryiqsqbxeA0KleAIeAOjvlgVCT4Y0OvGZ5E9DpwKDPxQWImVlzz4bhIuKXh6/nwmIFOAEfy6IF3KtwYtc1HIhL1GHrNoI5wGzienmq3fM4crQPQmJrGsl20m+StiF7e7/Q/AehLsT4G9mQxNI6Z+zILQBxFm8XapyqNV3NaGqvKspEqDG0RMU+F4iAD3YSQmLdbfkLT9v2kobW0hGkW15sNgx2l4aQWxsRd9N58sAhYACfqe/k2+zkXydlZ5Zn3KXmPTNM6OCzfjZyZv1I6ckLbmJruRG75nDp8AICnz19iOS4ARqHQZRQpmjVMVLac5Pn3mQGUbQfbreQSpiLrT2B9zXbVaY6iVYKs4UXgffbXEcPArYzgVkZ6Ym4c0kdBz47vkpXOpw29UDUHF8JzKlxD2Z2PJ19V9KbY5v30ZbHp5eCpFlkIzwNXgVqm3FS4Vfph3qvVZLVnTR7DzIz2B+XwAsolYACRybW1vrtjVVnOp9+GVDV3+T/TL9MnmWuRJwGXAAAAAElFTkSuQmCC);
    margin-bottom: 1px;
}
.nodes_text_font_down {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAD6AAAA+gBtXtSawAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAGCSURBVDiNzZTNKwRhHMc/v1mDFOtlaVNbcuQg4uRATk7KXSkl/4G83JAcpOSiHJTcHPwFDo7KTetgW3mLWhyQt5md/TnQmJ1lhs3B5/b8nuf3me8zzzMD/x0JmlRVOby1BlCZBKqAZWLmequI9WthMmP3IzoDdPk6TiTH3FO9udEpYocKD67tXgOdA7qD0gNpFWZb68xNEXEKhMmM1Y6wCPSFiND8JEciOtESK9vOF15baaA5TPYNTtYxo21xeTQ8xaoiZQCR0grKAUo8RVf+cH9HznEKurwYhkFltNod2zlyfqHLYE8HVxfngcJYQ5zd5FnhgwK7isCb0D2grZ298C1HInljR1G/0KWmNlZ0Qs+W9RXe79iP+VzsOM9YfuEYcBz4cft5X3wq6FBnozx9lj7YVzUrbuxhFaZRmkJslyo6L3Xmmvdn8WWgpGopN/YIMAUkfNMZhYXoi7maSMjz16G/IZXSMqvGHkUZB8oRWcpmS1ba4vIYnP4HqOqvXu+f8QbAb3h4LCbEVwAAAABJRU5ErkJggg==);
    margin-bottom: 1px;
}

.params_node {
    margin-bottom: 7px;
}

.param_title {
    padding: 4px 6px 4px 10px;
    background: #433c15;
    border-radius: 20px 20px 0 0;
    margin: 2px 1px;
    text-align: center;
    color: #f6f689;
}
.param_title_cls {
    font-weight: bold;
}
.param_title_name {
}

.param_line {
    display: flex;
    flex-grow: 1;  /* if it's part of a flex, grows in the param_multi_line */
    padding: 5px 0 0 0;
    align-items: center;
    position: relative;  /* for error messages to appear relative to its line */
    min-height: 26px;  /* make height standard for all lines so that it would depend on if it's a checkbox or not */
}
.param_line_group {
    display: block; /* override the display flex from the parent .param_line */
    min-height: initial; /* undo stuff from param_line */
    padding: 0;
}
.param_multi_line {
}
.param_multi_line_shared {
    display: flex;   /* don't want to change the normal multi-line since that would mess Transform */
    align-items: center;
}

.param_multi_line_shared > .param_line:first-child {
    flex-grow: 0;  /* don't want the first child to take up more space that it needs*/
}

/* the second label in a shared line */
.param_multi_line_shared .param_label_pre {
    width: initial; /* don't need so much spacing as in the first labels column */
    margin-left: 30px; /* what we need is margin */
}

.param_block {
    padding: 5px 0 5px 0;
}
.param_disabled {
    opacity: 0.6;
    pointer-events:none;
}
.param_invisible {
    display: none;
}
.param_separator {
    margin: 8px 4px 4px 4px;
    border-style: none;    /* just space, no line */
}
.param_line_sep {
    position: relative;
}
.param_sep_line {
    margin: 8px 4px 4px 4px;
    border-style: none; /* override the <hr> default */
    border-bottom: 1px dotted #666;
}

.param_label_pre {
    width: 120px;
    display: inline-block;
    text-align: right;
    white-space: nowrap;
}
.param_label_pre_indent {
    width: 150px; 
}
.param_label_colon {
    padding-right: 2px;
    width: 7px;
}
.param_label_pre_empty {
    width: 120px;
    display: inline-block;
    text-align: right;    
    padding-right: 11px;    
}

.param_input {
    background-color: #555;
    color: #fff;
    border: solid 1px #888;
    margin: 0 5px;
    height: 24px;
    border-radius: 3px;
    padding: 0 5px;
    min-width: 100px;
    font-family: Verdana;
    font-size: 14px;        
}
.param_input:focus {
    outline: none; /* remove highlight in chrome */
}
.param_input_long {
    /*width: calc( 100% - 160px )*/
    flex-grow: 1;
    margin-right:10px;
}
.param_input_error {
    background-color: #a22;
}
.param_editbox {
    flex-grow: 1;
    width: 0;
    min-width: 0px; /* override the default width so that flex would work correctly */
}
.param_edit_err_box {
    position:absolute;
    background-color: #a22;
    color: #fff;
    border: solid 1px #000;
    z-index: 1; /* get on top of the following edit boxes */
    align-self: flex-end;
    margin-top: 6px;
    padding: 3px;
    border-radius: 3px;
    font-size: 14px;
    display:none;
}
.param_editbox:focus + .param_edit_err_box {
    display:initial;
}

.param_color_from_input {
    background-color: #555  !important;  /* override element style */
    color: #fff  !important;
    font-style: italic;
}
.param_color_from_input::placeholder {
    color: rgb(106, 157, 253) !important;;
}


.param_checkbox_input {
    position: absolute;
    z-index: -2;
    opacity: 0;
}
.param_checkbox_disp {
    width: 17px;
    height: 17px;
    margin: 1px 4px 0 2px;
    vertical-align: middle;
}
.param_checkbox_input + .param_checkbox_disp {
    background-image: url(img/check_none.png);
    background-repeat: no-repeat;
    display: inline-block;
}
.param_checkbox_input:checked + .param_checkbox_disp {
    background-image: url(img/check_checked.png);
}
.param_checkbox_input:indeterminate + .param_checkbox_disp {
    background-image: url(img/check_int.png);
}
.param_checkbox_input[disabled="true"] + .param_checkbox_disp {
    filter: brightness(90%);
}
.param_checkbox_text {
    display: inline-block;
}
.param_checkbox_inline { /* when in the same line as something else */ 
    margin-left: 20px;
}

.param_list_title {
    margin: 0 0 3px 0;
}
.param_list_body {
    /*overflow-x: auto; this is bad if the popup editor is in the bottom line (makes y scroll)*/
    padding-bottom: 5px; /* separate the table from the scrollbar if it appears*/
}

.param_list_body::-webkit-scrollbar {
    height: 12px;
}
.param_list_body::-webkit-scrollbar-track {
    background: #575757;   
}
.param_list_body::-webkit-scrollbar-thumb {
    background-color: #828282;
    border-radius: 20px;
    border: 2px solid #575757;
}

/*.param_list_entry {
}*/
.param_list_row:nth-child(even) {
    background-color: #4e494e;
}
.param_list_cell {
    display: inline-block;
    width: 140px;
    border-right: solid #aaa 1px;
    height: 21px;
    line-height: 21px;
    position: relative; /* for grip absolute */
    padding: 0 4px 0 4px;
    vertical-align: bottom; /* avoid the baseline change that overflow makes */
}

/*.param_list_row {
}*/
.param_monospace {
    font-family: monospace;
    font-size: 16px;
    margin: 0 0 0 15px;       
    overflow-x: hidden;
    height: 21px;
}
.param_lst_clickable:hover {
    background-color: #474780;
    border-radius: 4px;
}
.param_lst_coord_edit_wrap {
    position: absolute;
    background-color: #777;
    z-index: 2; /* needs to be above the table param_table_grip so that its cursor won't show */
    padding: 5px;
    border-radius: 4px;    
}

.param_table_title_edit_wrap {
    position: absolute;
    top: -2px;
}
.param_table_title_edit_input {
    height: 20px;
    width: calc( 100% - 12px );
    margin: 0;
    text-align: center;
    font-family: monospace;
    font-size: 16px;
}

.param_lst_order_cell {
    position: relative; /* for the drop absoute */
}
.param_lst_order_drag_placeholder {
    color: rgba(0,0,0,0);
    border: 2px dashed #aaa !important;
    background: #000 !important;
}
.param_lst_order_item {
    border: 2px solid #8282ff;
    border-radius: 5px;
    margin-top: 2px;
    padding: 0 4px 1px 3px;
    background: rgba(29, 29, 214, 0.52);
}
.param_lst_edit_popup_input {
    width: 25%;
}
.param_lst_order_idx {
    font-family: monospace;
    font-size: 16px;
    margin-top: 2px;
    padding: 2px 0 3px 3px;
    overflow-x: hidden;
    width: 120px;  /* width of the label of normal parameter */
    text-align: right;
}

.param_table_input_color {
    display: block;
    background-color: #555;
    color: #fff;
    border: solid 1px #888;
    margin: 0 5px;
    height: 21px;
    border-radius: 3px;
    padding: 0 5px;
    width: calc( 100% - 5px);;
    /*min-width: 100px;*/ /* not really needed? makes the column cut if resized to be smaller*/ 
    overflow-x: hidden;
    box-sizing: border-box;   
    outline: none; /* rid of chrome border when selected */
}
.param_list_selected_line {
    color: #ffff00
}

.param_table_column {
    position: relative; /* for grip absolute */
    display: inline-block;
    padding: 0 4px 0 4px;
    vertical-align: bottom; /* make color inputs align with normal text inputs */
}
.param_table_col_wrap {
    display: inline-block;
}
.param_table_col_title {
    font-family: monospace;
    font-size: 16px;
    overflow-x: hidden;
    height: 21px;
    text-align: center;
    color: #ababab;
}
.param_table_col_line {
    border-right: solid #aaa 1px;
}
.param_table_grip {
    position: absolute;
    height: 100%;
    width: 7px;
    right: -4px;
    top: 0;
    cursor: col-resize;
    z-index: 1;  /* don't put z-index in cell to avoid it being above it for some reason */
}

.prm_slider_ctx_line {
    display: flex;
    width: 150px;
    margin: 3px 0 0 5px;
    align-items: center;
}
.prm_slider_ctx_label {
    width: 40px;
}

.prm_ctx_bexpr_line {
    display: flex;
    align-items: center;
    margin: 0 4px 0 5px;
}

#canvas_webgl{ 
    border: solid 1px;
    display: none; /* TEMP */
}
#canvas_nd_shadow {
    border: solid 1px;
    z-index: 3;
    position: absolute;    
    display: none; /* comment out to debug nodes shadow */
}
/*#canvas_image {*/
    /*display: none; /*TEMP*/
/*}*/
#canvas_img_shadow {
    border: solid 1px;
    display: none;  /* comment out to see canvas_img_shadow */
}

#scratch_canvas {
    border: solid 1px;
    display: block;
    display: none;  /* comment out to debug scratch */
}

.slider_line {
    position: relative;
    background-color: #757575;
    height: 7px;
    border-radius:3px;
    flex-grow: 1.8;
    margin: 0 15px 0 11px;    
}
.slider_thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 19px;
    border-radius:4px;
    background-color: #cacaca;
    margin: -6px 0 0 -6px;
}
.slider_thumb_disabled {
    opacity: 0.5;
}
.slider_fill {
    position: absolute;
    height: 7px;
    border-radius:3px;
    background: #7777ce;
}

.param_btn {
    display: inline-block;
    cursor: pointer;
    border-radius: 3px;
    background-image: linear-gradient(to bottom, #808080, #707070);
    text-align: center;
    height: 25px;
    line-height: 24px;
    color: #fff;
    margin: 1px 5px 0 3px;;
    padding: 0 10px 0 10px;
    min-width: 70px;    
}
.param_btn:hover {
    background-image: linear-gradient(to bottom, #909090, #808080);  
}
.param_btn:active , .param_checkbox_input:checked+.param_btn {
    background-image: linear-gradient(to bottom, #9090d0, #8080d0) !important; /* important makes it act on rm_btn */
}

.param_var_add_btn {
    height: 30px;
    min-width: 30px;
    line-height: 30px;
}
.param_var_rm_btn {
    height: 25px;
    min-width: 0px;
    line-height: 23px;
    padding: 0 3px 0 3px;
    position: absolute;
    right: 2px; 
    background-image: linear-gradient(to bottom, #aa8080, #aa7070);    
}
.param_var_rm_btn:hover {
    background-image: linear-gradient(to bottom, #aa9090, #aa8080);  
}
.param_var_arrow {
    height: 25px;
    min-width: 0px;
    line-height: 23px;
    padding: 0 3px 0 3px;
    position: absolute;   
}
.param_var_up_btn {
    right: 35px; 
}
.param_var_down_btn {
    right: 75px; 
}


/*.param_select {
}*/
.param_file_input {
    display: none;
}
.param_file_choose_btn {
    width: 130px;
}
.solid_flex {
    flex-grow: 1;
}
.param_file_show_parent {
    position: relative;
    display: inline-block;
    max-width: calc(100% - 387px);
    overflow: visible;
}
.param_file_show {
    display: inline-block;
    margin: 1px 0 0 7px;
    font-family: monospace;
    font-size: 15px;   
    line-height: 24px; 
    width: 100%;
    overflow: hidden;    
    text-overflow: ellipsis;
}
.param_file_progress {
    position: absolute;
    top: 0;
    left: 0;
    /*width: 200px;    */
    width: 100%;
    height: 24px;
    display: none;
    margin: 0 0 0 7px;
    -webkit-appearance: none;
}
.param_file_progress::-webkit-progress-bar {
    background-color: #bbb;
    border-radius: 3px;
    opacity:0.7;
}
.param_file_progress::-webkit-progress-value {
    background-color: #8e8ef7;
    border-radius: 3px;
}

.param_img_menu {
    position: absolute;
    background-color: #656565;
    padding: 7px 0;
    border-radius: 4px;
    border: solid 2px #7d7d7d;
    width: calc(55px * 5 + 8px);
    z-index: 4;  /* above the display params panel */
    white-space: normal;
    padding-left: 7px;
}
.param_img_item {
    display: inline-block;
    margin: 4px 4px 1px 4px;
    border: solid 1px #ccc;
    line-height: 0;
}

.param_text_menu {
    position: absolute;
    background-color: #656565;
    padding: 3px 0;
    border-radius: 4px;
    border: solid 2px #7d7d7d;
    color: #fff;
    line-height: 140%;
    white-space: nowrap;
    z-index: 101;
}
.param_text_item {
    padding: 0 7px;
    display: block;
}
.param_text_item:hover {  
    background-color: #888888;
}

.dlg {
    display: flex;
    flex-direction: column;    
    position: fixed;
    left: calc( 50% - 300px );
    border-radius: 10px;
    background-color: #686868;
    border: solid #333 2px;
    box-sizing: border-box;
    top: 70px;
    z-index: 100;
}
.dlg_title {
    padding: 2px 7px 6px 7px;
    height: 21px;
    line-height: 21px; 
    cursor: move;
    overflow: hidden;
    white-space: nowrap;
    color: #fff;
    background-color: #555;    
    border-radius: 10px 10px 0 0;
}
.dlg_title_text {
    padding-right: 25px; /* room for the close btn */
}
.dlg_client {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    white-space: nowrap;
    margin-top: 2px;
    flex-grow: 1;
}
.dlg_buttons_group {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin: 12px 10px 7px 10px;
}
.dlg_button {
    background-image: linear-gradient(to bottom, #989898, #848484);
}
.dlg_resize_rb {
    position: absolute;
    width:35px;
    height:35px;
    right:-2px;
    bottom:-2px;
    /*background-color:#ff0;*/
    cursor: nw-resize;
}
.dlg_resize_lb {
    position: absolute;
    width:35px;
    height:35px;
    left:-2px;
    bottom:-2px;
    /*background-color:#ff0;*/
    cursor: ne-resize;
}
.dlg_resize_r {
    position: absolute;
    width: 7px;
    height: 100%;
    right: -2px;
    top: 0;
    cursor: w-resize;
}
.dlg_resize_l {
    position: absolute;
    width: 7px;
    height: 100%;
    left: -2px;
    top: 0;
    cursor: w-resize;
}
.dlg_resize_b {
    position: absolute;
    width: 100%;
    height: 7px;
    bottom: -2px;
    cursor: s-resize;
}
.dlg_param_text_area {
    position: absolute;
    margin: 5px;
    height: calc( 100% - 10px - 31px);
    width: calc( 100% - 10px );
  /*  background-color: #5a5a5a;*/
    flex-grow: 1;
    overflow: visible; /* override ace editor setting to hidden so that the error line would be visible */

    box-sizing: border-box;
    color: #fff;
    font-family: monospace;
    font-size: 15px;  
    resize: none;
    outline: none; /* don't show focus border */
    border: solid 1px #888;    
}
.panel_param_text_area {
    flex-grow: 1;
    margin: 0 5px 0 5px;
    border-radius: 3px;
    font-size: 15px;
    /*height: 120px;*/
    border: 1px solid #888;
    overflow: visible;  /* override ace editor setting to hidden so that the error line would be visible */
}
.panel_param_editor_wrap {
    flex-grow: 1;
    display: flex;
    position: relative;
    min-height: 35px;
    height: 120px
}

.panel_param_ed_minimized{
    height: initial !important; /* override the element inline height */
}

.panel_param_editor_resize_grip {
    position: absolute;
    bottom: -3px;
    z-index: 10;
    /*background: #ff0000;*/
    height: 6px;
    width: 100%;
    opacity: 40%;
    cursor: n-resize;
}

.panel_param_editor_resize_grip_hidden {
    display: none;
}

.prm_text_err {
    position: absolute;
    bottom: -2px;
    /*background-color: #6d0b0b;*/
    background-color: #a22;
    border: 1px solid #d30000;
    border-radius: 4px;
    padding: 4px;
    transform: translate(0, 100%);
    /* for breaking the lines */
    max-width: 100%;
    white-space: normal;

    z-index: 101;  /* go over ace gutter */
    font-family: Verdana; /* override the editor */
    
}
.prm_code_popout_btn {
    position: absolute;
    min-width: 30px;
    left: -35px;
    padding: 0;
}
.prm_code_popin_btn {
    position: absolute;
    min-width: 30px;
    padding: 0;
    width: 35px;
    height: 35px;
    line-height: 32px;
}

.dlg_close_btn {
    position: absolute;
    right: 0;
    top: 0;    
    width: 24px;
    height: 21px;
    margin: 2px 3px 0 0;
    background-image: url(img/gray_ex.png);
    cursor: auto;
}
.dlg_close_btn:hover {
    background-image: url(img/red_ex.png)
}
.dlg_label {
    /*text-align: center;*/
    color: #fff;
    margin: 5px 5px 2px 5px;
}

.top_menu {
    position: absolute;
    top: 0;
    background-color: #656565;
    padding: 0 0 2px 0;
    border-radius: 0 0 6px 6px;
    border: solid 2px #7d7d7d;
    color: #fff;
    line-height: 140%;
    width: 40px;
    text-align: center;
}
.top_menu:hover {  
    background-color: #888888;    
}
.top_menu_file {
    left: 10px;
}

/*.dlg_size_save_as {*/
    /*width: 230px;
    height: 120px;*/
/*}*/
.dlg_size_shader_edit {
    width: 600px;
    height: 600px;
}
.dlg_text_input {
    margin: 0 5px;
    height: 24px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 24px;
    background-color: #555;
    color: #fff;
    border: solid 1px #888;
    padding: 0 5px;
    font-family: Verdana;
}
.dlg_text_input::-webkit-outer-spin-button,
.dlg_text_input::-webkit-inner-spin-button {
    -webkit-appearance: none;  /* hide arrows */
}
.dlg_text_input[type=number] {
    -moz-appearance: textfield; /* hide arrows */
}
.dlg_text_input:focus {
    outline: none; /* remove highlight in chrome */
}

.dlg_save_as > .param_btn {
    margin: 5px;
}

.dl_lnk_hidden {
    display: none;
}
.dlg_input_label {
    color: #fff;
    width: 60px;
    display: inline-block;
}
.dlg_input_line {
    margin: 5px 5px 0 5px;
}

.div_display_params_cont {

}
.div_display_params {
    margin-top: 10px;
    background-color: rgba(0,161,247,0.3);
    position: relative;
    padding-bottom: 5px;    
}
.div_display_params:empty {
    display:none;
}
.div_display_params:before {
    position: absolute;
    width: 20px;
    content: "";
    height: 100%;
    display: inline-block;
    background-color: #00A1F7;
    border: solid 2px #000;
    border-radius: 5px 0 0 5px;
    box-sizing: border-box;
}

.div_display_params .param_line {
    height: 20px;
    min-height: initial;
}
.div_display_params .param_line > .param_editbox {
    height: 20px;
    background-color: rgb(85, 85, 85, 50%);
}

.hover_box {
    display: none;
    background-color: #543e04;
    border: 1px solid #000;
    border-radius: 3px;
    position: absolute;
    color: #ffd067;
    padding: 5px;
    pointer-events: none;
}

.obj_inf_dlg {
}
.obj_inf_class {
    color: #ffffff;
    font-size: 22px;
    margin: 0 0 4px 10px;
    font-family: monospace;
}

.obj_inf_desc {
    margin: 0 10px 7px 10px;
    color: #eeeeee;
}
.obj_inf_line {
    margin: 0 0 0 5px;
    
    margin-bottom: 7px;
}
.obj_inf_label {
    display: inline-block;

}
.obj_inf_value {
    display: inline-block;
}
.obj_inf_value_multi {
    display: block;
    margin-left: 25px;
}
.obj_inf_none {
    color: #1a1a1a;
}
.obj_inf_prop_list {
    font-family: monospace;
    font-size: 16px;
}
.obj_inf_desk_flex {
    display: flex;
}
.obj_inf_var_col {
    display: inline-block;
    margin: 0 10px 0 0;
    flex-grow: 1;
}
.obj_inf_grid {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-column-gap: 12px;
    grid-row-gap: 10px;
}
.obj_inf_var_value {
}
.obj_inf_var_label {
}
.obj_inf_var_matrix {
    font-family: monospace;
    font-size: 15px;
    white-space: pre;
}
.obj_inf_var_type {
    text-align: right;
}

.obj_inf_grp_obj {
    margin: 0 0 10px 6px;
}
.obj_inf_grp_detail {
    margin-left: 10px;
}


.editor_error_marker {
    position:absolute;
    background: rgba(255, 74, 74, 0.49);
    z-index:20
}

.color_dropper_back {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 101; /* above color picker */
    cursor: crosshair;

    opacity: 0%;
    background-color: #ff0000;
}

.shader_wait {
    position: absolute;
    top: 20px;
    width: 300px;
    height: 60px;
    z-index: 50;
    background-color: #9696f6;
    border-radius: 10px;
    border: 1px solid #000066;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    font-weight: bold;
    margin: auto;
    left: 0;
    right: 0;    
}

.anim_bar {
    position: absolute;
    bottom: 0;
    height: 35px;
    width: 100%;
    background-color: #312F31;
    border-top: 2px solid #dddddd;
    box-sizing: content-box;
}

.anim_btn {
    display: inline-block;
    border: 2px solid #444444;
    background-color: #707070; 
    background-repeat: no-repeat;   
    border-radius: 5px;    
    height: 27px;
}

.anim_btn:hover {
    background-color: #808080;    
}
.anim_btn:active {
    background-color: #8080d0;    
}
.anim_back_btn {
    background-image: url(img/back_anim.png);
    background-position: 4px 0;
    width: 43px;
    margin: 2px 0px 4px 10px;
}

.anim_one_next_btn {
    background-image: url(img/anim_one_next.png);
    background-position: 2px 0;
    width: 30px;
    margin: 2px 10px 4px 0px;
}

.anim_play_btn {
    background-image: url(img/play_anim.png);
    background-position: 6px 0;
    width: 60px;
    margin: 2px 10px 4px 7px;
}
.param_checkbox_input:checked + .anim_play_btn {
    background-image: url(img/pause_anim.png);
}

.anim_frame_disp_wrap {
    display: inline-block;
    vertical-align: top;
    position: relative;
}

.anim_frame_disp {
    font-family: monospace;
    display: inline-block;
    width: 50px;
    text-align: right;
    vertical-align: top;
    line-height: 20px;
    color: #ffffff;
    font-size: 18px;
    border: solid 1px #888;
    border-radius: 4px;
    padding: 2px 5px;
    margin: 5px 0;
    background-color: #555;
    outline: none; /* edit highlight in chrome */
}

.anim_fn_hover_box {
    left: -20px;
    top: -26px;
}

.anim_frame_disp:hover + .anim_fn_hover_box {
    display: initial;
}

.anim_fps_disp { 
    display: inline-block;
    color: #a0a0a0;
    vertical-align: top;
    line-height: 36px;
    font-size: 14px;
    margin-left: 15px;
}