/*RU-РУ*/ :root { --main-max-z-index: 4; --main-color: #000; --main-background: #FFF; --main-font-size: 0.88vw; --main-min-font-size: 14px; --main-base-margin-padding: 0.25rem; --main-icon-margin-padding: 2.7rem; --show-hide-btn-ratio: 3.8; --show-hide-btn-border-color: #5AA6C9; --show-hide-btn-background: #FFFFFF; --show-hide-border-color: #A7CBEB; --element-disabled-color: #777; --btn-background: #FFF; --btn-border-color: #BEBEBE; --btn-focus-border-color: #4E8EC6; --scrollbar-track-background: #ECECEC; --scrollbar-thumb-hover-background: #AAAAAA; --scrollbar-thumb-background: #BEBEBE; --link-color: #000; --link-underline-hover-background: #74A7BF; --nav-link-ico-background: #83b0d7; --main-header-background-start: #4E8EC6; --main-header-background-end: #F2F8Fb; --tabbox-caption-color: #414141; --treeview-background: #FFFFFF; --treeview-caption-color: #414141; --treeview-border-color: #BEBEBE; --treeview-row-border-color: #E6E6E6; --treeview-row-background: #FAFAFA; --treeview-header-background: #5AA6C9; --treeview-header-color: #FFFFFF; --treeview-item-hover-background: #DEECFA; --treeview-item-icon-background: #4E8EC6; --treeview-item-selector-background: #B5E24D; --treeview-cmd-icon-add-background: #B5E24D; --treeview-cmd-icon-del-background: #FC5C5C; --treeview-cmd-icon-background: #5AA6C9; --treeview-btns-icon-background-1: #FFF; --treeview-btns-icon-background-2: #FFF; --treeview-btns-icon-hover-background: #B5E24D; --treeview-row-select-background: #EFF8FF; --treeview-show-hide-background: #4E8EC6; /**/ --treeview-line-color: #CCC; --h2-icon-background: #FAFCFE; --h2-icon-border-color: #DDDDDD; --h2-spin-border-color: #C3DEEB; --input-error-color: #FB3131; --input-background: #FFFFFF; --input-color: #000000; --input-border-color: #BEBEBE; --input-error-border-color: #FF9999; --input-caption-color: #414141; --btn-help-background: #5AA6C9; --btn-help-icon-color: #FFF; --btn-help-hover-background: #B5E24D; --menu-border-color: #BEBEBE; --menu-background-1: #FAFAFA; --menu-background-2: #FFFFFF; --menu-background: linear-gradient(to right, #FAFAFA 0%, #FFFFFF 100%); --menu-item-hover-background: #E9F4FD; --menu-item-key-color: #BBBBBB; --separator-background: #D6D6D6; --title-background: #FFF; --title-border-color: #74A7BF; --title-color: #000; --nav-btn-border-color: #74A7BF; --nav-btn-background: #FFFFFF; --nav-btn-icon-background: #AED3E3; --wnd-header-text-color: #FFFFFF; --wnd-header-background: #5AA6C9; --wnd-header-close-icon-background: #FFFFFF; --wnd-header-close-icon-hover-background: #B5E24D; --wnd-message-icon-background: #4E8EC6; --wnd-message-icon-hover-background: #B0D15F; --wnd-border-color: #FFFFFF; --wnd-body-background: #E9F3F7; --wnd-spin-border-color: #4295BC; --wnd-icon-background: #C6E0EC; --wnd-help-body-background: #FFFFFF; --wnd-help-border-color: #74A7BF; --wnd-inform-background: #FEFEFE; --wnd-inform-body-background: #FFFFFF; --wnd-inform-body-border-color: #BEBEBE; --wnd-inform-body-color: #414141; --wnd-inform-row-icon-info-background: #83b0d7; --wnd-inform-row-icon-warning-background: #a0ce35; --wnd-inform-row-icon-error-background: #FC5C5C; --loader-color-1: #B5E24D; --loader-color-2: #4295BC; --li-before-background: #417DB0; --program-icon-background_1: #FFFFFF; --program-icon-background_2: #96C31C; --icon-error-background: #C50000; --slider-border-color: #999999; --alpha-bg-background: #D9D9D9; /**/ --chk-icon-background: #FFF; --chk-icon-color: #FFF; --chk-icon-border-color: #BEBEBE; --chk-icon-checked-background: #4E8EC6; --chk-color: #414141; --combobox-arrow-background: #777777; --combobox-background: #FFFFFF; --combobox-border-color: #BEBEBE; --combobox-caption-color: #414141; --page-message-icon-background: #FFF; --page-message-icon-color: #5AA6C9; --element-focus-background: #28679F; /**/ --svg-icon-arrow-down: url("data:image/svg+xml,") center center no-repeat; --svg-icon-ok: url("data:image/svg+xml;charset=UTF-8,") center center no-repeat; --svg-icon-error: url("data:image/svg+xml;charset=UTF-8,") center center no-repeat; --svg-icon-warning: url("data:image/svg+xml;charset=UTF-8,") center center no-repeat; --svg-element-focus: url('data:image/svg+xml;charset=UTF-8,') center center no-repeat; --svg-icon-save: url("data:image/svg+xml;charset=UTF-8,") center center no-repeat; --svg-icon-save-file: url("data:image/svg+xml;charset=UTF-8,") center center no-repeat; --svg-icon-load-file: url("data:image/svg+xml;charset=UTF-8,") center center no-repeat; --svg-icon-general: url("data:image/svg+xml;charset=UTF-8,") center center no-repeat; --svg-icon-graphics-sound: url("data:image/svg+xml;charset=UTF-8,") center center no-repeat; --svg-icon-traffic: url("data:image/svg+xml;charset=UTF-8,") center center no-repeat; --svg-icon-question: url("data:image/svg+xml;charset=UTF-8,") center center no-repeat; --svg-icon-minus: url("data:image/svg+xml;charset=UTF-8,") center center no-repeat; --svg-icon-plus: url("data:image/svg+xml;charset=UTF-8,") center center no-repeat; --svg-body-bg-1: url("data:image/svg+xml;charset=UTF-8,") center center no-repeat; --svg-body-bg-2: url("data:image/svg+xml;charset=UTF-8,"); --svg-icon-list: url("data:image/svg+xml;charset=UTF-8,") center center no-repeat; --svg-icon-edit: url("data:image/svg+xml;charset=UTF-8,") center center no-repeat; --svg-icon-connect: url("data:image/svg+xml;charset=UTF-8,") center center no-repeat; --svg-icon-pwd: url("data:image/svg+xml;charset=UTF-8,") center center no-repeat; --svg-icon-msg: url("data:image/svg+xml;charset=UTF-8,") center center no-repeat; --svg-icon-info: url('data:image/svg+xml;charset=UTF-8,') center center no-repeat; --svg-icon-volume-on: url('data:image/svg+xml;charset=UTF-8,') center center no-repeat; --svg-icon-volume-off: url('data:image/svg+xml;charset=UTF-8,') center center no-repeat; --svg-icon-bx-widget-icon: url('data:image/svg+xml;charset=UTF-8,') center center no-repeat; --svg-icon-eye: url('data:image/svg+xml;charset=UTF-8,') center center no-repeat; --svg-icon-eye-close: url('data:image/svg+xml,') center center no-repeat; --svg-icon-play: url("data:image/svg+xml,") center center no-repeat; --svg-icon-stop: url("data:image/svg+xml,") center center no-repeat; --svg-wnd-bg: url("data:image/svg+xml;charset=UTF-8,") center center no-repeat; --svg-icon-colorpicker: url("data:image/svg+xml;charset=UTF-8,") center center no-repeat; --svg-icon-back: url('data:image/svg+xml;charset=UTF-8,') center center no-repeat; --svg-icon-clear: url('data:image/svg+xml;charset=UTF-8,') center center no-repeat; --svg-icon-copy: url('data:image/svg+xml;charset=UTF-8,') center center no-repeat; --svg-icon-paste: url('data:image/svg+xml;charset=UTF-8,') center center no-repeat; --svg-hand-up: url('data:image/svg+xml;charset=UTF-8,') center center no-repeat; --svg-icon-plus-circle: url("data:image/svg+xml;charset=UTF-8,") center center no-repeat; --svg-icon-minus-circle: url("data:image/svg+xml;charset=UTF-8,") center center no-repeat; --svg-icon-folder-1: url('data:image/svg+xml;charset=UTF-8,') center center no-repeat; --svg-icon-folder-2: url('data:image/svg+xml;charset=UTF-8,') center center no-repeat; /*--svg-icon-folder-3: url('data:image/svg+xml;charset=UTF-8,') center center no-repeat;*/ --svg-icon-element-1: url('data:image/svg+xml;charset=UTF-8,') center center no-repeat; --svg-icon-element-2: url('data:image/svg+xml;charset=UTF-8,') center center no-repeat; } @keyframes kf_h2_spin { from { transform: rotate(15deg); } 100% { transform: rotate(375deg); } } @keyframes kf_title { from { transform: translateX(-50%) translateY(0); opacity: 0; } 50% { transform: translateX(-50%) translateY(150%); opacity: 1; } 80% { transform: translateX(-50%) translateY(101%); opacity: 1; } 100% { transform: translateX(-50%) translateY(110%); opacity: 1; } } @keyframes kf_title_top { from { transform: translateX(-50%) translateY(0); opacity: 0; } 50% { transform: translateX(-50%) translateY(-150%); opacity: 1; margin-top: 0.25rem; } 80% { transform: translateX(-50%) translateY(-95%); opacity: 1; } 100% { transform: translateX(-50%) translateY(-100%); opacity: 1; } } @keyframes kf_title_up { from { transform: translateY(0); opacity: 0; } 50% { transform: translateY(-150%); opacity: 1; margin-top: 0.25rem; } 80% { transform: translateY(-95%); opacity: 1; } 100% { transform: translateY(-100%); opacity: 1; } } @keyframes kf_title_down { from { transform: translateY(0); opacity: 0; } 50% { transform: translateY(150%); opacity: 1; } 80% { transform: translateY(101%); opacity: 1; } 100% { transform: translateY(110%); opacity: 1; } } @keyframes kf_fade_in_down_wnd_center_x { from { opacity: 0.01; transform: translate(-50%, -25%); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes kf_fade_in_down_wnd { from { opacity: 0.01; transform: translateY(-25%); } to { opacity: 1; transform: none; } } @keyframes kf_loader_spin { 0%, 100% { box-shadow: .2em 0px 0 0px currentcolor; } 12% { box-shadow: .2em .2em 0 0 currentcolor; } 25% { box-shadow: 0 .2em 0 0px currentcolor; } 37% { box-shadow: -.2em .2em 0 0 currentcolor; } 50% { box-shadow: -.2em 0 0 0 currentcolor; } 62% { box-shadow: -.2em -.2em 0 0 currentcolor; } 75% { box-shadow: 0px -.2em 0 0 currentcolor; } 87% { box-shadow: .2em -.2em 0 0 currentcolor; } } @keyframes kf_pathanimation { 1% { opacity: 1; } 40% { stroke-dasharray: 2rem 16.5rem; } 60% { stroke-dashoffset: -4.6rem; } 95% { opacity: 1; } 100% { stroke-dashoffset: -4.6rem; stroke-dasharray: 11.4rem; opacity: 0; } } @keyframes kf_pathanimation_out { 100% { stroke-dashoffset: 0; opacity: 0; } 99% { opacity: 1; } 60% { stroke-dasharray: 2rem 16.5rem; } 40% { stroke-dashoffset: -4.6rem; } from { stroke-dashoffset: -4.6rem; stroke-dasharray: 11.4rem; opacity: 1; } } @keyframes kf_fadeInLeft { from { opacity: 0; transform: translate3d(-25%, 0, 0); pointer-events: none; } 100% { opacity: 1; transform: none; pointer-events: auto; } } @keyframes kf_chk_hover { from { box-shadow: 0 0 0 0 #006391; opacity: .5; } 14% { box-shadow: 0 0 0 2rem #000; opacity: 0; } 16% { box-shadow: 0 0 0 0 #000; opacity: 0; } 20% { box-shadow: 0 0 0 0 #006391; opacity: .5; } 34% { box-shadow: 0 0 0 2rem #000; opacity: 0; } 36% { box-shadow: 0 0 0 0 #000; opacity: 0; } 40% { box-shadow: 0 0 0 0 #006391; opacity: .5; } 54% { box-shadow: 0 0 0 2rem #000; opacity: 0; } 100% { box-shadow: 0 0 0 0 #000; opacity: 0; } } @keyframes kf_err_hide { to { width: 0; height: 0; visibility: hidden; } } @keyframes kf_err_blink { 100% { opacity: 0; } } ::-ms-reveal { display: none; } body, html { height: 100%; min-height: 400px; min-width: 320px; } body { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; background: var(--main-background); } body:after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 1rem; z-index: calc(var(--main-max-z-index) + 2); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0) 100%); pointer-events: none; } * { margin: 0; padding: 0; box-sizing: border-box; position: relative; color: var(--main-color); } html, * { font-family: Arial; font-size: max(var(--main-font-size), var(--main-min-font-size)); } .siz_no_select, .siz_no_select *:not(input) { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; outline: none; } #check_main_audio, input[name=radio_wnd], #radio_main_close, #radio_main_save, #radio_main_save_file, #radio_main_load_file { display: none; } input { outline: none; } input[readonly] { cursor: default; } ul { margin: 0; padding: 0; } ul li, ol li { list-style-type: none; } ul.siz_li_before > li:before { content: ''; display: inline-block; top: -0.15em; left: 0; width: 0.4rem; height: 0.4rem; background: var(--li-before-background); border-radius: 50%; position: relative; margin-right: 0.5rem; } html *::-webkit-scrollbar { height: 0.8rem; width: 0.8rem; } html *::-webkit-scrollbar-track { background: var(--scrollbar-track-background); } html *::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb-background); } html.siz_no_touch *::-webkit-scrollbar-thumb:hover { background-color: var(--scrollbar-thumb-hover-background); } #svg_symbol { display: none; } #main_header { position: fixed; width: 4.5rem; min-width: 4.5rem; max-width: 4.5rem; background: linear-gradient(to top, var(--main-header-background-start) 0%, var(--main-header-background-end) 100%); height: 100%; z-index: calc(var(--main-max-z-index) + 2); /*WARNING*/ } #main_header h1 { transform: rotate(270deg); display: block; position: absolute; bottom: 0; transform-origin: left center; font-weight: normal; white-space: nowrap; left: 50%; font-size: 1.7rem; color: #FFFFFF; } #main_body { width: 100%; height: 100%; position: relative; display: flex; flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; padding: 0 0 0 4.5rem; } /*siz_group*/ .siz_group { width: 100%; } .siz_group .siz_group_body { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; justify-content: flex-start; align-items: center; } .siz_group_right .siz_group_body { justify-content: flex-end; } .siz_group_vertical .siz_group_body { flex-direction: column; } .siz_group_vertical.siz_group_right .siz_group_body { justify-content: flex-start; align-items: flex-end; } .siz_group_center .siz_group_body { justify-content: center; } .siz_group_vertical.siz_group_center .siz_group_body { justify-content: flex-start; align-items: center; } /*END siz_group*/ /*siz_slider*/ .siz_slider { width: 16rem; height: 2.4rem; } .siz_slider_square { width: 16rem; height: 16rem; } .siz_slider_vertical { width: 2.4rem; height: 16rem; } .siz_slider:before { content: ''; display: block; position: absolute; top: -0.2rem; left: -0.2rem; right: -0.2rem; bottom: -0.2rem; background: var(--slider-border-color); opacity: 0.1; } .siz_slider_body { position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .siz_slider_picker { width: 1.4rem; height: 2.7rem; position: absolute; border-top-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; border: 0.15rem solid #FFF; top: 50%; box-shadow: 0 0 0.2rem rgba(0,0,0,0.5); transform: translate(-50%, -50%); cursor: pointer; } .siz_slider:not(.siz_slider_square) .siz_slider_picker:before { content: ""; display: block; position: relative; height: 100%; width: 100%; background: #FFF; opacity: 0.5; box-shadow: -0.2rem -0.2rem 0.6rem rgba(0, 0, 0, 0.1) inset; } .siz_slider:not(.siz_slider_square) .siz_slider_picker:after { content: ""; position: absolute; width: 1px; height: calc(100% - 0.15rem); border-right: 1px dashed #000; left: 50%; top: 0.15rem; margin-left: -1px; } .siz_slider_square .siz_slider_picker { width: 1.25rem; height: 1.25rem; border-radius: 50%; position: absolute; border: 0.15rem solid #FFF; box-shadow: 0 0 0.2rem #000; transform: translate(-50%, -50%); cursor: pointer; top: auto; } .siz_slider_vertical .siz_slider_picker { width: 2.7rem; height: 1.4rem; top: auto; left: 50%; } .siz_slider.siz_slider_vertical .siz_slider_picker:after { width: calc(100% - 0.15rem); height: 1px; border-right: 0; border-bottom: 1px dashed #000; left: 0.15rem; top: 50%; margin-top: -1px; } /*END siz_slider*/ /*siz_colorpicker*/ .siz_colorpicker_picking_area .siz_slider_body { background: linear-gradient(to bottom, transparent 0%, #000 100%), linear-gradient(to left, transparent 0%, #FFF 100%); background-color: #F00; } .siz_colorpicker_hue .siz_slider_body { background: linear-gradient(to top, #F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%); } .siz_bg_alpha { background: #FFF; background-image: linear-gradient(45deg, var(--alpha-bg-background) 25%, transparent 25%, transparent 74%, var(--alpha-bg-background) 75%, var(--alpha-bg-background)), linear-gradient(45deg, var(--alpha-bg-background) 25%, transparent 25%, transparent 74%, var(--alpha-bg-background) 75%, var(--alpha-bg-background)); background-size: 0.6rem 0.6rem; background-position: 0 0, 0.3rem 0.3rem; } .siz_colorpicker_hue_alpha .siz_slider_body > div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,1)); } .siz_colorpicker_input_area .siz_input input[type=text] { max-width: 3.5rem; } .siz_colorpicker .siz_colorpicker_r .siz_input_caption, .siz_colorpicker .siz_colorpicker_g .siz_input_caption, .siz_colorpicker .siz_colorpicker_b .siz_input_caption { min-width: 0; } .siz_colorpicker_preview_color { width: 6rem; height: 6rem; } .siz_colorpicker .siz_colorpicker_input_area_preview .siz_group { width: auto; } .siz_colorpicker_preview_color > div > div { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #FFF; } .siz_colorpicker_value.siz_input input[type=text] { min-width: 4rem; text-align: left; text-transform: lowercase; } .siz_colorpicker_value .siz_input_body { padding: 0 0.5rem 0 0.5rem; } .siz_colorpicker_input_area .siz_colorpicker_a, .siz_colorpicker_input_area .siz_colorpicker_value { width: 100%; } .siz_wnd_colorpicker .siz_wnd_btns .siz_chk { flex: 1; } .siz_wnd_btns .siz_group_body:before { content: ''; position: absolute; top: -0.2rem; left: 0; right: 0; height: 0.1rem; background: #DDD; /*WARNING*/ opacity: 0.5; border-bottom: 0.1rem solid #FFF; /*WARNING*/ box-sizing: content-box; } /*END siz_colorpicker*/ /*siz_btn*/ .siz_btn:not(.siz_wnd_close):not(.siz_action_btn):not(.siz_action_show_hide_btn) { height: 2.8rem; min-width: 2.8rem; text-align: center; top: 0; cursor: pointer; display: table; border-top-left-radius: 1rem; border-bottom-right-radius: 1rem; } .siz_btn_bg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-top-left-radius: 1rem; border-bottom-right-radius: 1rem; overflow: hidden; } .siz_btn_bg:after { content: ''; position: absolute; display: block; top: 0; left: 0; right: 0; bottom: 0; background: var(--btn-background); box-shadow: inset 0px 0px 1rem 0.5rem rgba(150, 150, 150, 0.1); border-top-left-radius: 1rem; border-bottom-right-radius: 1rem; border: 1px solid var(--btn-border-color); } .siz_btn * { cursor: pointer; } #main_btns { position: sticky; top: 0; background: var(--main-background); z-index: calc(var(--main-max-z-index) + 1); /*WARNING*/ } #main_btns:after { content: ''; position: absolute; bottom: -1rem; left: 0; width: 100%; height: 1rem; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%); z-index: 1; pointer-events: none; } #main_btns .siz_group_body > .siz_btn { margin: 0.5rem 0.5rem 0 0; visibility: hidden; } #main_btns .siz_group_body > .siz_btn:last-of-type { margin-right: 0; } #main_btns_show_hide { width: calc(var(--show-hide-btn-ratio) * 0.5rem + 0.7rem); height: calc(var(--show-hide-btn-ratio) * 0.5rem + 0.7rem); position: absolute; right: 0; bottom: calc(var(--show-hide-btn-ratio) * -0.5rem - 0.7rem); cursor: pointer; border-left: 1px solid var(--show-hide-border-color); border-bottom: 1px solid var(--show-hide-border-color); border-radius: 0; border-bottom-left-radius: 50%; background: var(--show-hide-btn-background); z-index: 1; /*WARNING*/ top: auto; min-width: 0; } #main_btns_show_hide:before { content: ''; position: absolute; top: 15%; left: 19%; width: 70%; height: 70%; mask: var(--svg-icon-arrow-down); background-color: var(--show-hide-btn-border-color); } #siz_show_check_main_btns + #main_btns > .siz_group_body { margin-top: -100%; } #siz_show_check_main_btns:checked + #main_btns > .siz_group_body { margin-top: 0; } #siz_show_check_main_btns:checked + #main_btns > #main_btns_show_hide:before { transform: rotate(180deg); } #siz_show_check_main_btns:checked + #main_btns .siz_group_body > .siz_btn { visibility: visible; } #siz_show_check_main_btns:checked + #main_btns > label[for^=siz_show_check_] > .siz_title { visibility: hidden; } #siz_show_check_main_btns:checked + #main_btns > label[for^=siz_show_check_] > .siz_title ~ .siz_title { visibility: visible; } .siz_wnd_btns .siz_btn { height: 2.6rem !important; min-width: 8rem !important; margin: 0.5rem 0.5rem 0 0 !important; } .siz_wnd_btns .siz_btn:last-of-type { margin-right: 0; } /*END siz_btn*/ /*siz_nav_link*/ .siz_btn > .siz_nav_link { width: 100%; height: 100%; display: table-cell; border-top-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem; vertical-align: middle; position: relative; padding: 0.5rem 1rem 0.5rem 1rem; } .siz_nav_link { text-decoration: none; } .siz_nav_link_text { color: var(--link-color); text-decoration: none; background-image: linear-gradient(var(--link-underline-hover-background), var(--link-underline-hover-background)); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 0.13rem; transition: background-size 0.3s; display: inline; } .siz_nav_link:focus > .siz_nav_link_text, .siz_btn:focus .siz_nav_link_text, html.siz_no_touch .siz_nav_link:hover > .siz_nav_link_text, html.siz_no_touch .siz_nav_link:hover > span > .siz_nav_link_text, html.siz_no_touch .siz_btn:hover .siz_nav_link_text { background-size: 100% 0.13rem; } /*END siz_nav_link*/ /*siz_element_focus*/ .siz_element_focus { position: absolute; left: 50%; top: -0.6rem; transform: translateX(-50%); display: none; width: 0.8rem; height: 0.4rem; background: var(--svg-element-focus); opacity: 0.5; z-index: 2; /*WARNING*/ } .siz_element_focus_left { top: 50%; left: -0.8rem; transform: translateY(-50%) rotate(-90deg); } .siz_element_focus_top_right { top: 0.2rem; left: auto; right: 0.01rem; transform: rotate(-135deg); } *:focus .siz_element_focus, .siz_treeview:not(.siz_treeview_use_header) *:focus + .siz_element_focus { display: block; } /**:focus .siz_element_focus .siz_element_focus { display: none; }*/ /*END siz_element_focus*/ #main_btns { padding: 0.25rem 1rem 0.75rem 1rem; } #main_btns .siz_group_body > .siz_btn { min-width: 9rem; } /*siz_nav_link_ico*/ .siz_nav_link.siz_ico { padding-left: 2.7rem; } .siz_nav_link_ico { position: absolute; top: 50%; transform: translateY(-50%); width: 1.6rem; height: 1.6rem; display: inline-block; margin: 0 0 0 -2rem; background: var(--nav-link-ico-background); } /*END siz_nav_link_ico*/ .siz_btn_save .siz_nav_link_ico { mask: var(--svg-icon-save); } .siz_btn_save_file .siz_nav_link_ico { mask: var(--svg-icon-save-file); } .siz_btn_load_file .siz_nav_link_ico { mask: var(--svg-icon-load-file); } /*siz_treeview*/ .siz_treeview_bg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: hidden; } .siz_treeview_bg:after { content: ""; position: absolute; display: block; top: 0; left: 0; right: 0; bottom: 0; background: var(--treeview-background); } .siz_treeview_caption { color: var(--treeview-caption-color); } .siz_treeview_border .siz_treeview_main { border: 1px solid var(--treeview-border-color); } .siz_treeview_body { overflow: auto; min-height: 4.4rem; } .siz_treeview ul { margin: 0; position: relative; width: fit-content; min-width: 100%; } .siz_treeview_stretch_v { align-self: stretch; } .siz_treeview_stretch_v > .siz_treeview_main > .siz_treeview_body { height: 100%; } .siz_treeview_item { min-height: 2.4rem; display: table; min-width: 100%; table-layout: fixed; order: 2; } .siz_treeview_item_selector { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .siz_treeview_item_selector:before { content: ""; position: absolute; top: 1px; bottom: 1px; left: 0; right: 100%; background: var(--treeview-item-hover-background); } .siz_treeview_item_cell_1 { width: 100%; } .siz_treeview_set.siz_treeview_focused .siz_treeview_item_cell[data-select="1"] > .siz_treeview_item_selector:before, html.siz_no_touch .siz_treeview_hover .siz_treeview_item > .siz_treeview_item_cell:hover > .siz_treeview_item_selector:before { right: 0; transition: all 0.2s linear; } .siz_treeview_set .siz_treeview_item:not(.siz_treeview_item_header)[data-set="1"] > .siz_treeview_item_cell_1 > .siz_treeview_item_selector:after { content: ""; position: absolute; top: 1px; bottom: 1px; right: 0; width: 0.3rem !important; background: var(--treeview-item-selector-background); mask: none !important; height: auto !important; transform: none !important; } .siz_treeview_use_header .siz_element_focus_top_right { mask: var(--svg-element-focus); background: #FFF; top: 0.2rem; right: 0.05rem; } .siz_treeview_row_border .siz_treeview_item:not(.siz_treeview_item_header) .siz_treeview_item_style { border-bottom: 1px solid var(--treeview-row-border-color); } .siz_treeview_item_style { position: absolute; top: 0; /*WARNING*/ bottom: 0; /*WARNING*/ right: 0; left: -1000%; } .siz_treeview_header { position: sticky; top: 0; z-index: 2; /*WARNING*/ } .siz_treeview_header > .siz_treeview_item > .siz_treeview_item_style { background: var(--treeview-header-background); box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2); } .siz_treeview_header .siz_lbl_text { color: var(--treeview-header-color); font-weight: bold; } .siz_treeview_border .siz_treeview_item_cell_1 { padding-left: 0.5rem; padding-right: 0.5rem; } .siz_treeview_row_odd .siz_treeview_item_style_odd > .siz_treeview_item_style { background: var(--treeview-row-background); } .siz_treeview_item_read_only { pointer-events: none !important; } .siz_treeview > input[type="radio"] { display: none; } input[id^="siz_treeview_show_context_menu_"]:checked ~ .siz_modal, input[id^="siz_input_show_context_menu_"]:checked ~ .siz_modal, input[id^="siz_input_show_context_menu_"]:checked ~ .siz_input_body_main > .siz_modal { display: flex; } .siz_treeview_btns + .siz_treeview_main { margin-top: 1.25rem; } .siz_treeview_btns:before { content: ''; position: absolute; height: 1.4rem; left: 0; right: 1rem; border-top: 1px solid #969696; border-right: 1px solid #969696; border-top-right-radius: 0.5rem; display: block; top: 100%; } .siz_treeview_btns > .siz_group_body { min-height: 2.4rem; flex-wrap: nowrap; align-items: flex-end; } .siz_treeview_btns .siz_btn { width: 2.4rem !important; height: 2.4rem !important; min-width: 2.4rem !important; min-height: 2.4rem !important; border-radius: 50% !important; margin-right: 0.75rem !important; top: 0.5rem !important; } .siz_treeview_btns .siz_btn.siz_treeview_btn_menu { margin-right: 1.5rem !important; } .siz_treeview_btns > .siz_group_body > .siz_btn:last-of-type { margin-right: 0; } .siz_treeview_btns .siz_btn > .siz_nav_link { border-radius: 50%; padding: 0; box-shadow: inset 0 0.15rem 0.3rem rgba(0, 0, 0, 0.2); background: var(--treeview-cmd-icon-background); } .siz_treeview_btns .siz_btn .siz_nav_link_ico { width: 60%; height: 60%; margin: 0; transform: translate(-50%, -50%); background: none; } .siz_treeview_btns .siz_btn .siz_nav_link_ico:before { content: ''; position: absolute; top: 0; left: 0; mask: var(--svg-icon-list); height: 100%; width: 100%; background: var(--treeview-btns-icon-background-1); transform: none; } .siz_treeview_btns .siz_btn .siz_nav_link_ico > span { position: absolute; bottom: -70%; right: -80%; width: 105%; height: 105%; border-radius: 50%; background: var(--treeview-btns-icon-background-2); box-shadow: 0 0 0.3rem rgba(0, 0, 0, 0.2); } .siz_treeview_btns .siz_btn .siz_nav_link_ico > span:before { content: ''; position: absolute; width: 60%; height: 60%; top: 20%; left: 20%; background: var(--nav-link-ico-background); } .siz_treeview_btns .siz_treeview_btn_add .siz_nav_link_ico > span:before { mask: var(--svg-icon-plus); background: var(--treeview-cmd-icon-add-background); } .siz_treeview_btns .siz_treeview_btn_edit .siz_nav_link_ico > span:before { width: 70%; height: 70%; top: 15%; left: 16%; mask: var(--svg-icon-edit); } .siz_treeview_btns .siz_treeview_btn_del .siz_nav_link_ico > span:before { mask: var(--svg-icon-plus); background: var(--treeview-cmd-icon-del-background); transform: rotate(45deg); } .siz_treeview_btns .siz_treeview_btn_test .siz_nav_link_ico:before { mask: var(--svg-icon-connect); } .siz_treeview_btns .siz_treeview_btn_test .siz_nav_link_ico > span:before { width: 75%; height: 75%; top: 15%; left: 16%; mask: var(--svg-icon-warning); } .siz_treeview_btns .siz_btn:focus > .siz_nav_link, html.siz_no_touch .siz_treeview_btns .siz_btn:hover > .siz_nav_link { background: var(--treeview-btns-icon-hover-background); } .siz_treeview_context_menu:before, .siz_input_context_menu:before { content: ''; position: absolute; } .siz_treeview_focused .siz_treeview_body > .siz_element_focus { position: sticky; } .siz_treeview .siz_treeview_body > .siz_element_focus_top_right { left: 100%; margin-top: -0.4rem; } .siz_treeview_use_header .siz_treeview_body > .siz_element_focus { display: none; } .siz_btn.siz_treeview_btn_menu { display: none !important; } /*select all row*/ .siz_treeview_set.siz_treeview_select_all_row .siz_treeview_item:not(.siz_treeview_item_header)[data-select="1"] > .siz_treeview_item_style { background: var(--treeview-row-select-background); } /*END select all row*/ .siz_treeview input { display: none; } .siz_treeview li > label { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; cursor: pointer; } .siz_treeview .siz_treeview_item_show_hide { display: inline-block; width: 2.5rem; min-width: 2.5rem; min-height: 2rem; height: 2rem; order: 1; z-index: 1; } .siz_treeview li > label > .siz_treeview_item { flex: 1; min-width: 0; } .siz_treeview .siz_treeview_item_show_hide > span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #FFF; outline: 0.3rem solid #FFF; } .siz_treeview .siz_treeview_item_show_hide > span:before { content: ''; position: absolute; top: 50%; left: 50%; width: 1.8rem; height: 1.8rem; border-radius: 50%; mask: var(--svg-icon-plus-circle); background: var(--treeview-show-hide-background); box-shadow: inset 0 0.15rem 0.3rem rgba(0,0,0,0.2); transform: translate(-50%, -50%); } .siz_treeview .siz_treeview_item_show_hide > span:after { content: ''; position: absolute; top: 50%; left: 50%; width: 1.5rem; height: 1.5rem; border-radius: 50%; box-shadow: inset 0 0.15rem 0.3rem rgba(0,0,0,0.2); transform: translate(-50%, -50%); } .siz_treeview_icon .siz_treeview_item > .siz_nav_link .siz_nav_link_ico, .siz_treeview_icon .siz_treeview_item > .siz_lbl > .siz_lbl_ico { mask: var(--svg-icon-element-1); } .siz_treeview_icon .siz_treeview_item > .siz_nav_link .siz_nav_link_ico:before, .siz_treeview_icon .siz_treeview_item > .siz_lbl > .siz_lbl_ico:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; mask: var(--svg-icon-element-2); opacity: 0.6; background: #FFF; } .siz_treeview_icon .siz_treeview_item_childs > label[for^="siz_treeview_"] > .siz_treeview_item > .siz_nav_link .siz_nav_link_ico, .siz_treeview_icon .siz_treeview_item_childs > label[for^="siz_treeview_"] > .siz_treeview_item > .siz_lbl > .siz_lbl_ico { mask: var(--svg-icon-folder-1); } .siz_treeview_icon .siz_treeview_item_childs > label[for^="siz_treeview_"] > .siz_treeview_item > .siz_nav_link .siz_nav_link_ico:before, .siz_treeview_icon .siz_treeview_item_childs > label[for^="siz_treeview_"] > .siz_treeview_item > .siz_lbl > .siz_lbl_ico:before { mask: var(--svg-icon-folder-2); } .siz_treeview li > ul { display: none; } .siz_treeview input[id^="siz_treeview_"]:checked ~ ul { display: block; width: 100%; } .siz_treeview input[id^="siz_treeview_"]:checked + label > .siz_treeview_item_show_hide > span:before { mask: var(--svg-icon-minus-circle); } .siz_treeview ul ul { padding: 0 0 0 3.75rem !important; } .siz_treeview_line:not(.siz_treeview_view_list) li:after, .siz_treeview_line:not(.siz_treeview_view_list) .siz_treeview_item:after { content: ''; position: absolute; top: 0; left: -2.5rem; border-left: 0.1rem solid var(--treeview-line-color); width: 2.5rem; min-width: 2.5rem; height: 100%; z-index: 1; /*WARNING*/ } .siz_treeview_line:not(.siz_treeview_view_list) li > label:before, .siz_treeview_line:not(.siz_treeview_view_list) li > .siz_treeview_item:before { content: ''; position: absolute; top: 0; left: -2.5rem; border-left: 0.1rem solid var(--treeview-line-color); border-bottom: 0.1rem solid var(--treeview-line-color); width: 2.5rem; min-width: 2.5rem; height: 50%; z-index: 1; /*WARNING*/ border-bottom-left-radius: 0.25rem; } .siz_treeview_line li > .siz_treeview_item:after { height: 50%; } .siz_treeview .siz_treeview_level_0 > li:after, .siz_treeview .siz_treeview_level_0 > li > label:before, .siz_treeview .siz_treeview_level_0 > li > .siz_treeview_item:before, .siz_treeview .siz_treeview_level_0 > li > .siz_treeview_item:after, .siz_treeview .siz_treeview_level_0 > .siz_treeview_item_childs > label[for^="siz_treeview_"]:after, .siz_treeview .siz_treeview_level_0 > .siz_treeview_item_childs > label[for^="siz_treeview_"] .siz_treeview_item:after { display: none; } .siz_treeview_line ul > li:last-child:after, .siz_treeview_line ul > li:last-child .siz_treeview_item:after, .siz_treeview_line li.siz_treeview_item_childs > label > .siz_treeview_item:after { display: none; } .siz_treeview_line:not(.siz_treeview_view_list) .siz_treeview_item_childs > label[for^=siz_treeview_]:after { content: ""; position: absolute; top: 50%; left: -0.2rem; bottom: 0; width: 1.45rem; border-top: 0.1rem solid var(--treeview-line-color); z-index: 1; /*WARNING*/ } .siz_treeview_line .siz_treeview_item_childs > input[id^=siz_treeview_]:checked + label[for^=siz_treeview_]:after { border-right: 0.1rem solid var(--treeview-line-color); } .siz_treeview_line .siz_treeview_item { padding-left: 2.7rem; } /*.siz_treeview_icon .siz_treeview_item_childs > label[for^="siz_treeview_"] > .siz_treeview_item > .siz_nav_link .siz_nav_link_ico:after, .siz_treeview_icon .siz_treeview_item_childs > label[for^="siz_treeview_"] > .siz_treeview_item > .siz_lbl > .siz_lbl_ico:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; mask: var(--svg-icon-folder-3); }*/ /*END siz_treeview*/ /*siz_tabbox*/ .siz_tabbox > input[class^=siz_tabbox_] { display: none; } .siz_tabbox > .siz_group_body:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-bottom: 1px solid var(--btn-border-color); } .siz_tabbox_caption { color: var(--tabbox-caption-color); } .siz_tabbox > .siz_group_body > .siz_btn, .siz_tabbox > .siz_group_body > .siz_btn > .siz_btn_bg:after, .siz_tabbox > .siz_group_body > .siz_btn > .siz_btn_bg, .siz_tabbox > .siz_group_body > .siz_btn > .siz_nav_link { border-bottom-right-radius: unset; } .siz_tabbox_1:checked ~ .siz_group_body > .siz_tabbox_btn_1 > .siz_btn_bg:after, .siz_tabbox_2:checked ~ .siz_group_body > .siz_tabbox_btn_2 > .siz_btn_bg:after, .siz_tabbox_3:checked ~ .siz_group_body > .siz_tabbox_btn_3 > .siz_btn_bg:after { box-shadow: none; border-bottom: 0; } .siz_tabbox *[class^=siz_tabbox_body_] { display: none; } .siz_tabbox_1:checked ~ .siz_tabbox_body > .siz_tabbox_body_1, .siz_tabbox_2:checked ~ .siz_tabbox_body > .siz_tabbox_body_2, .siz_tabbox_3:checked ~ .siz_tabbox_body > .siz_tabbox_body_3 { display: block; } .siz_tabbox_body:before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(to bottom, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%); } .siz_tabbox_body { padding: 0 0.75rem 0 0.75rem; } /*END siz_tabbox*/ /*siz_title*/ .siz_title { display: none; color: var(--title-color); min-width: 4rem; text-align: center; padding: 0.4rem; background: var(--title-background); border: 1px solid; border-color: var(--title-border-color); position: absolute; left: 50%; bottom: 0; box-shadow: 0.25rem 0.25rem 0.25rem rgba(0, 0, 0, 0.1); opacity: 0; pointer-events: none; font-size: 0.9rem; } .siz_title_top { bottom: auto; top: 0; margin-top: -0.3rem; } .siz_title ~ .siz_title { visibility: hidden; } html.siz_no_touch .siz_btn:hover, html.siz_no_touch .siz_btn_hlp_main:hover { z-index: var(--main-max-z-index); } html.siz_no_touch label[for^=siz_show_check_]:hover > .siz_title, html.siz_no_touch .siz_btn:hover > .siz_title, html.siz_no_touch .siz_btn_hlp_main:hover > .siz_title { display: inline-block; transform: translateX(-50%) translateY(0); animation: kf_title 0.5s both cubic-bezier(0.4, 0, 0.2, 1); opacity: 1; } html.siz_no_touch .siz_btn:hover > .siz_title_top, html.siz_no_touch .siz_btn_hlp_main:hover > .siz_title_top { transform: translateX(-50%) translateY(0); animation: kf_title_top 0.5s both cubic-bezier(0.4, 0, 0.2, 1); } html.siz_no_touch label[for^=siz_show_check_]:hover > .siz_title_left_down, html.siz_no_touch .siz_btn:hover > .siz_title_left_down, html.siz_no_touch .siz_btn_hlp_main:hover > .siz_title_left_down { left: 0.25rem; animation: kf_title_down 0.5s both cubic-bezier(0.4, 0, 0.2, 1); } html.siz_no_touch label[for^=siz_show_check_]:hover > .siz_title_right_down, html.siz_no_touch .siz_btn:hover > .siz_title_right_down, html.siz_no_touch .siz_btn_hlp_main:hover > .siz_title_right_down { left: auto; right: 0.25rem; animation: kf_title_down 0.5s both cubic-bezier(0.4, 0, 0.2, 1); } html.siz_no_touch label[for^=siz_show_check_]:hover > .siz_title_right_up, html.siz_no_touch .siz_btn:hover > .siz_title_right_up, html.siz_no_touch .siz_btn_hlp_main:hover > .siz_title_right_up { left: auto; right: 0.25rem; animation: kf_title_up 0.5s both cubic-bezier(0.4, 0, 0.2, 1); } html.siz_no_touch label[for^=siz_show_check_]:hover > :not(.siz_title), html.siz_no_touch .siz_btn:hover > :not(.siz_title) { z-index: 1; /*WARNING*/ } /*END siz_title*/ /*siz_modal*/ .siz_modal { display: none; position: fixed; height: 100vh; width: 100vw; top: 0; left: 0; overflow: auto; } .siz_input > .siz_modal, .siz_treeview > .siz_modal, .siz_input > .siz_input_body_main .siz_modal { z-index: calc(var(--main-max-z-index) + 2); } .siz_treeview > .siz_modal > label, .siz_input > .siz_modal > label, .siz_input > .siz_input_body_main .siz_modal > label{ display: block; top: 0; left: 0; width: 100%; height: 100%; position: absolute; } /*END siz_modal*/ .siz_input_context_menu, .siz_treeview_context_menu { display: inline-block; position: absolute; } .siz_input > input[type="radio"] { display: none; } /*siz_menu*/ .siz_menu { border: 1px solid var(--menu-border-color); } .siz_menu_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--menu-background); box-shadow: 0.25rem 0.25rem 0.25rem rgba(0, 0, 0, 0.1); } .siz_menu_el { display: flex; min-height: 2.6rem; flex-direction: row; justify-content: flex-start; align-items: center; padding: 0.25rem 0.75rem 0.25rem 0.75rem; cursor: pointer; } .siz_menu_ico .siz_menu_el > span:last-of-type { padding-right: 2rem; } .siz_menu_el > .siz_nav_link_ico { width: 2rem; height: 2rem; min-width: 2rem; min-height: 2rem; margin: 0 0.5rem 0 0; position: relative; top: auto; transform: none; background: none; } .siz_menu_el .siz_nav_link_text { font-size: 0.95rem; } .siz_menu_el > .siz_nav_link_ico:before { position: absolute; display: block; background: var(--nav-link-ico-background); } .siz_menu_body { overflow: auto; display: block; } .siz_menu_el:before { content: ''; position: absolute; left: 0.2rem; top: 0.1rem; bottom: 0.1rem; right: 100%; transition: all 0.2s linear; background: var(--menu-item-hover-background); } .siz_menu_el:first-of-type:before { top: 0.2rem; } .siz_menu_el:last-of-type:before { bottom: 0.2rem; } .siz_separator { display: block; min-height: 1px; height: 1px; border-top: 1px solid var(--separator-background); left: 0.5rem; width: calc(100% - 1rem); } .siz_menu_el[data-select="1"]:before, html.siz_no_touch .siz_menu_el:hover:before { right: 0.2rem; } label[for^=siz_treeview_cmd_add_] > .siz_nav_link_ico:before { content: ''; top: 20%; left: 20%; width: 60%; height: 60%; mask: var(--svg-icon-plus); background: var(--treeview-cmd-icon-add-background); } label[for^=siz_treeview_cmd_edit_] > .siz_nav_link_ico:before { content: ''; top: 10%; left: 10%; width: 80%; height: 80%; mask: var(--svg-icon-edit); } label[for^=siz_treeview_cmd_del_] > .siz_nav_link_ico:before { content: ''; top: 20%; left: 20%; width: 60%; height: 60%; mask: var(--svg-icon-plus); transform: rotate(45deg); background: var(--treeview-cmd-icon-del-background); } label[for^=siz_treeview_cmd_test_] > .siz_nav_link_ico:before { content: ''; top: 10%; left: 10%; width: 80%; height: 80%; mask: var(--svg-icon-warning); } label[for^=siz_treeview_cmd_row_move_up_] > .siz_nav_link_ico:before, label[for^=siz_treeview_cmd_row_move_down_] > .siz_nav_link_ico:before { content: ""; top: 40%; left: 30%; width: 40%; height: 20%; mask: var(--svg-element-focus); } label[for^=siz_treeview_cmd_row_move_up_] > .siz_nav_link_ico:before { transform: rotate(180deg); } label[for^=siz_treeview_cmd_view_] > .siz_nav_link_ico:before { content: ''; top: 15%; left: 15%; width: 75%; height: 75%; mask: var(--svg-icon-eye); } label[for^=siz_input_cmd_paste_] > .siz_nav_link_ico:before, label[for^=siz_input_cmd_copy_] > .siz_nav_link_ico:before, label[for^=siz_treeview_cmd_copy_] > .siz_nav_link_ico:before, label[for^=siz_input_cmd_view_] > .siz_nav_link_ico:before, label[for^=siz_input_cmd_showHidePassword_] > .siz_nav_link_ico:before, label[for^=siz_input_cmd_createPassword_] > .siz_nav_link_ico:before, label[for^=siz_input_cmd_user_play] > .siz_nav_link_ico:before, label[for^=siz_input_cmd_clear_] > .siz_nav_link_ico:before, label[for^=siz_input_cmd_select_] > .siz_nav_link_ico:before, label[for^=siz_input_cmd_default_] > .siz_nav_link_ico:before, label[for^=siz_input_cmd_back_] > .siz_nav_link_ico:before { content: ''; top: 12.5%; left: 12.5%; width: 75%; height: 75%; mask: var(--svg-icon-copy); } label[for^=siz_input_cmd_paste_] > .siz_nav_link_ico:before { mask: var(--svg-icon-paste); } label[for^=siz_input_cmd_showHidePassword_] > .siz_nav_link_ico:before, label[for^=siz_input_cmd_view_] > .siz_nav_link_ico:before { mask: var(--svg-icon-eye); } label[for^=siz_input_cmd_clear_] > .siz_nav_link_ico:before { top: 20%; left: 20%; width: 60%; height: 60%; mask: var(--svg-icon-error); } label[for^=siz_input_cmd_createPassword_] > .siz_nav_link_ico:before { top: 10%; left: 10%; width: 80%; height: 80%; mask: var(--svg-icon-pwd); } label[for^=siz_input_cmd_select_] > .siz_nav_link_ico:before { mask: var(--svg-icon-edit); } label[for^=siz_input_cmd_user_play] > .siz_nav_link_ico:before { top: 20%; left: 20%; width: 60%; height: 60%; mask: var(--svg-icon-play); } label[for^=siz_input_cmd_default_] > .siz_nav_link_ico:before { mask: var(--svg-icon-load-file); } label[for^=siz_input_cmd_back_] > .siz_nav_link_ico:before { top: 20%; left: 20%; width: 60%; height: 60%; mask: var(--svg-icon-back); } .siz_nav_link_text ~ .siz_nav_link_text { display: none; } input[id^=siz_user_play_]:checked ~ .siz_input_body_main label[for^=siz_input_cmd_user_play] > .siz_nav_link_ico:before { mask: var(--svg-icon-stop); } input[id^=siz_user_play_]:checked ~ .siz_input_body_main label[for^=siz_input_cmd_user_play] .siz_nav_link_text { display: none; } input[id^=siz_user_play_]:checked ~ .siz_input_body_main label[for^=siz_input_cmd_user_play] .siz_nav_link_text ~ .siz_nav_link_text { display: inline; } /*END siz_menu*/ /*siz_lbl*/ /*.siz_nav_link,*/ .siz_lbl { width: 100%; height: 100%; display: table-cell; vertical-align: middle; position: relative; padding: calc(var(--main-base-margin-padding) * 2) calc(var(--main-base-margin-padding) * 4) calc(var(--main-base-margin-padding) * 2) calc(var(--main-base-margin-padding) * 4); /*calc(var(--main-base-margin-padding) * 2) calc(var(--main-base-margin-padding) * 4) calc(var(--main-base-margin-padding) * calc(var(--main-base-margin-padding) * 4)) 1rem;*/ } .siz_lbl.siz_ico { padding-left: var(--main-icon-margin-padding); } /*.siz_nav_link > .siz_nav_link_ico,*/ .siz_lbl > .siz_lbl_ico { position: absolute; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; display: inline-block; /*left: var(--main-icon-margin-padding);*/ background-color: var(--treeview-item-icon-background); margin: 0 0 0 calc(var(--main-icon-margin-padding) * -1); } .siz_lbl_text { display: inline; } /*END siz_lbl*/ /*h2*/ h2 { position: relative; padding: 0 8.5rem 0.35rem 1.75rem; min-height: 3.5rem; display: flex; flex-direction: row; align-items: flex-end; } h2:after { content: ''; position: absolute; bottom: 0; left: 0; right: 3rem; height: 0.15rem; background: linear-gradient(to right, rgba(160, 160, 160, 1) 0%, rgba(160, 160, 160, 0) 100%); } h2 > span:first-of-type { font-size: 1.8rem; font-weight: normal; } h2 > span:last-of-type { position: absolute; right: 2rem; width: 5rem; height: 5rem; background: var(--h2-icon-background); border: 0.15rem solid var(--h2-icon-border-color); border-radius: 50%; bottom: -1rem; z-index: 1; } h2 > span:last-of-type:before { content: ''; position: absolute; top: 15%; left: 15%; width: 70%; height: 70%; opacity: 0.5; background: var(--nav-link-ico-background); } /*END h2*/ /*.siz_spin*/ .siz_spin { position: absolute; width: 100%; height: 100%; display: block; top: 0; left: 0; } .siz_spin > span { position: relative; display: block; width: 120%; height: 120%; margin-left: -10%; margin-top: -10%; border-radius: 50%; border: 0.2rem solid; transform: rotate(15deg); animation: kf_h2_spin 5s infinite linear; border-color: var(--h2-spin-border-color); border-left-color: transparent; border-right-color: transparent; } /*END .siz_spin*/ /*siz_btn_hlp*/ .siz_btn_hlp { border-radius: 50%; width: 2.2rem; height: 2.2rem; display: inline-block; } .siz_btn_hlp > input[type=checkbox] { display: none; } .siz_btn_hlp_main > .siz_btn_hlp_ico:before { content: ''; position: absolute; top: 10%; left: 9.5%; width: 80%; height: 80%; mask: var(--svg-icon-question); background: var(--btn-help-icon-color); border-radius: 50%; } .siz_btn_hlp_clear .siz_btn_hlp_main > .siz_btn_hlp_ico:before { top: 23%; left: 23%; width: 55%; height: 55%; mask: Var(--svg-icon-plus); transform: rotate(45deg); } .siz_btn_hlp_menu .siz_btn_hlp_main > .siz_btn_hlp_ico:before { top: 22.5%; left: 22.5%; width: 55%; height: 55%; mask: Var(--svg-icon-list); border-radius: 0; } .siz_btn_hlp_back .siz_btn_hlp_main > .siz_btn_hlp_ico:before { top: 20%; left: 20%; width: 60%; height: 60%; mask: var(--svg-icon-back); border-radius: 0; } .siz_btn_hlp_default .siz_btn_hlp_main > .siz_btn_hlp_ico:before { top: 15%; left: 12.5%; width: 70%; height: 70%; mask: var(--svg-icon-load-file); border-radius: 0; } .siz_btn_hlp_create_pwd .siz_btn_hlp_main > .siz_btn_hlp_ico:before { top: 12.5%; left: 12.5%; width: 75%; height: 75%; mask: var(--svg-icon-pwd); } .siz_btn_hlp_select .siz_btn_hlp_main > .siz_btn_hlp_ico:before { top: 12.5%; left: 12.5%; width: 75%; height: 75%; mask: var(--svg-icon-edit); } .siz_btn_hlp_play .siz_btn_hlp_main > .siz_btn_hlp_ico:before { top: 12.5%; left: 12.5%; width: 75%; height: 75%; mask: var(--svg-icon-play); } input[id^=siz_user_play_]:checked ~ .siz_input_body_main .siz_btn_hlp_play > .siz_btn_hlp_main > .siz_btn_hlp_ico:before { top: 12.5%; left: 12.5%; width: 75%; height: 75%; mask: var(--svg-icon-stop); } input[id^=siz_user_play_]:checked ~ .siz_input_body_main .siz_btn_hlp_play > .siz_btn_hlp_main > .siz_title { visibility: hidden; } input[id^=siz_user_play_]:checked ~ .siz_input_body_main .siz_btn_hlp_play > .siz_btn_hlp_main > .siz_title ~ .siz_title { visibility: visible; } .siz_btn_hlp_show_pwd .siz_btn_hlp_main > .siz_btn_hlp_ico:before { top: 15%; left: 15%; width: 70%; height: 70%; mask: var(--svg-icon-eye); } input[id^=show_pwd_]:checked ~ .siz_input_body_main .siz_btn_hlp_show_pwd .siz_btn_hlp_main > .siz_btn_hlp_ico:before { mask: var(--svg-icon-eye-close); } input[id^=show_pwd_]:checked ~ .siz_input_body_main .siz_btn_hlp_show_pwd .siz_btn_hlp_main > .siz_title { visibility: hidden; } input[id^=show_pwd_]:checked ~ .siz_input_body_main .siz_btn_hlp_show_pwd .siz_btn_hlp_main > .siz_title + .siz_title { visibility: visible; } input[id^=show_pwd_] ~ .siz_input_body_main label[for^=siz_input_cmd_showHidePassword_] .siz_menu_el_text > .siz_nav_link_text + .siz_nav_link_text { display: none; } input[id^=show_pwd_]:checked ~ .siz_input_body_main label[for^=siz_input_cmd_showHidePassword_] .siz_menu_el_text > .siz_nav_link_text { display: none; } input[id^=show_pwd_]:checked ~ .siz_input_body_main label[for^=siz_input_cmd_showHidePassword_] .siz_menu_el_text > .siz_nav_link_text + .siz_nav_link_text { display: inline; } input[id^=show_pwd_]:checked ~ .siz_input_body_main label[for^=siz_input_cmd_showHidePassword_] > .siz_nav_link_ico:before { mask: var(--svg-icon-eye-close); } .siz_btn_hlp_minus .siz_btn_hlp_main > .siz_btn_hlp_ico:before { top: 22.5%; left: 22.5%; width: 55%; height: 55%; mask: var(--svg-icon-minus); } .siz_btn_hlp_plus .siz_btn_hlp_main > .siz_btn_hlp_ico:before { top: 22.5%; left: 22.5%; width: 55%; height: 55%; mask: var(--svg-icon-plus); } .siz_btn_hlp:focus .siz_btn_hlp_main > .siz_btn_hlp_ico, html.siz_no_touch .siz_btn_hlp_main > .siz_btn_hlp_ico:hover { background: var(--btn-help-hover-background); } /*END siz_btn_hlp*/ /*siz_input*/ .siz_input { display: inline-block; } .siz_input_header { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: flex-end; } .siz_input_body_main { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; } .siz_input_caption { flex: 1; padding: 0 0.5rem 0 0.5rem; cursor: default; display: none; min-width: 40%; color: var(--input-caption-color); } .siz_input_header_left .siz_input_body { margin-top: 0; } .siz_input_header_left > .siz_input_header > .siz_input_caption { display: none; } .siz_input_caption_visible .siz_input_caption { display: inline-block; } .siz_input_body { display: inline-flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; height: 2.5rem; min-height: 2.5rem; padding: 0 0.5rem 0 1rem; margin-top: 0.15rem; } .siz_input_body > span { color: var(--input-color); padding: 0 0.2rem 0 0.5rem; } .siz_input:not(.siz_input_header_left) > .siz_input_body_main > .siz_input_caption { display: none; } .siz_input_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; border-top-left-radius: 1rem; border-bottom-right-radius: 1rem; } .siz_input_bg:after { content: ''; position: absolute; display: block; top: 0; left: 0; right: 0; bottom: 0; background: var(--input-background); border: 1px solid var(--input-border-color); border-top-left-radius: 1rem; border-bottom-right-radius: 1rem; } .siz_input input[type=text], .siz_input input[type=password] { min-height: 2.4rem; height: 2.4rem; border: 0; background: none; color: var(--input-color); width: 100%; text-overflow: ellipsis; } .siz_input .siz_btn_hlp { width: 1.9rem; height: 1.9rem; min-width: 1.9rem; min-height: 1.9rem; } .siz_btn_hlp_main { display: inline-block; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; } .siz_btn_hlp_main > .siz_btn_hlp_ico { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0.15rem 0.3rem rgba(0, 0, 0, 0.2); background: var(--btn-help-background); cursor: pointer; } .siz_input_header { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-end; align-items: flex-end; } .siz_caption_err { font-style: italic; font-size: 0.9rem; color: var(--input-error-color); margin: 0 0.2rem 0 0; text-align: right; } input[id^=show_pwd_], input[id^=siz_wnd_hlp_], .siz_wnd_hlp:before { display: none; } .siz_btn_hlp_help:focus ~ .siz_element_focus { display: block; } .siz_input_err .siz_input_bg:after { border-color: var(--input-error-border-color); } .siz_input > input[id^=siz_user_] { display: none; } /*END siz_input*/ /*siz_input_argb*/ .siz_input_argb .siz_input_bg, .siz_input_argb .siz_input_bg:after { border-top-left-radius: 0; } .siz_input_argb .siz_input_body { padding-left: 0; } .siz_input_argb .siz_input_view { width: 2.5rem; min-width: 2.5rem; height: 100%; cursor: pointer; } .siz_input_argb .siz_input_view:before { content: ''; position:absolute; top: 0; left: 0; bottom: 0; right: 0; border: 1px solid var(--input-border-color); } .siz_input_argb .siz_input_view > .siz_bg_alpha, .siz_input_argb .siz_input_view_main { position: absolute; top: 0.2rem; bottom: 0.2rem; left: 0.2rem; right: 0.2rem; } .siz_input_argb .siz_input_view_main { background: rgba(78, 143, 198, 0.25); } .siz_input_argb input[type=text] { max-width: 8.5rem; } .siz_input_argb .siz_input_body { max-width: 18rem; } /*END siz_input_argb*/ .siz_wnd_modal { display: none; position: fixed; z-index: calc(var(--main-max-z-index) + 2); height: 100vh; width: 100vw; top: 0; left: 0; overflow: auto; justify-content: safe center; align-items: safe center; padding: 0.5rem; background: rgba(0, 0, 0, 0.1); } .siz_wnd_modal > label { display: block; top: 0; left: 0; width: 100%; height: 100%; position: absolute; } /*siz_wnd*/ .siz_wnd { padding: 0.3rem; } .siz_wnd:not(.siz_wnd_on_page):not(.siz_wnd_hlp) { box-shadow: 0px -0.1rem 0.75rem 0 rgba(0, 0, 0, 0.1); animation: kf_fade_in_down_wnd 0.6s backwards; max-width: 60rem; border-top-left-radius: 1rem; border-bottom-right-radius: 1rem; } .siz_wnd:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: var(--wnd-border-color); border-top-left-radius: 1rem; border-bottom-right-radius: 1rem; } .siz_wnd_header { display: none; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; min-height: 3.2rem; cursor: move; border-top-left-radius: 0.75rem; } .siz_wnd_header:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--wnd-header-background); border-top-left-radius: 0.75rem; } .siz_wnd_header_visible > .siz_wnd_header { display: flex; } .siz_wnd_header_visible .siz_wnd_body_bg { border-top-left-radius: 0; } .siz_wnd_icon { position: absolute; top: -0.75rem; left: -1.75rem; width: 4.5rem; height: 4.5rem; border-radius: 50%; box-shadow: 0px 0px 0.5rem rgba(0, 0, 0, 0.1); background: #FFF; z-index: 1; } .siz_wnd_icon:before { content: ''; position: absolute; top: 20%; left: 20%; width: 60%; height: 60%; mask: var(--svg-icon-msg); background: var(--wnd-icon-background); } .siz_wnd_input_box .siz_wnd_icon:before { mask: var(--svg-icon-list); top: 30%; left: 30%; width: 40%; height: 40%; } .siz_wnd_colorpicker .siz_wnd_icon:before { background: var(--svg-icon-colorpicker); top: 10%; left: 10%; width: 80%; height: 80%; mask: none; } .siz_wnd_caption { flex: 1; padding: 0.5rem 1rem 0.5rem 4rem; color: var(--wnd-header-text-color); text-align: center; font-size: 1.05rem; } .siz_wnd_header > .siz_wnd_close, .siz_wnd_inform_close, .siz_wnd_inform_clear { width: 2rem; height: 2rem; margin: 0 0.6rem 0 0; border-radius: 50%; } .siz_wnd_header > .siz_wnd_close > :last-child, .siz_wnd_inform_close > :last-child, .siz_wnd_inform_clear > :last-child { display: block; height: 100%; border-radius: 50%; background: #4E8EC6; box-shadow: inset 0 0.15rem 0.3rem rgba(0, 0, 0, 0.2); } .siz_wnd > .siz_wnd_close > :last-child:before, .siz_wnd_header > .siz_wnd_close > :last-child:before, .siz_wnd_inform_close > :last-child:before, .siz_wnd_inform_clear > :last-child:before { content: ""; position: absolute; mask: var(--svg-icon-plus); background: var(--wnd-header-close-icon-background); top: 23%; left: 23%; width: 55%; height: 55%; transform: rotate(45deg); } .siz_wnd_header_visible > .siz_wnd_body > .siz_wnd_body_main > .siz_wnd_body_bg, .siz_wnd_header_visible > .siz_wnd_body > .siz_wnd_body_main > .siz_wnd_body_bg_top { box-shadow: 0 0.5rem 0.3rem -0.3rem rgba(0, 0, 0, 0.1) inset; } .siz_wnd .siz_spin > span { border-color: var(--wnd-spin-border-color); border-left-color: transparent; border-right-color: transparent; } html.siz_no_touch .siz_wnd_close:hover > :last-child, .siz_wnd_close:focus > :last-child, html.siz_no_touch .siz_wnd_inform_close:hover > :last-child, .siz_wnd_inform_close:focus > :last-child, html.siz_no_touch .siz_wnd_inform_clear:hover > :last-child, .siz_wnd_inform_clear:focus > :last-child { background: var(--wnd-header-close-icon-hover-background); } .siz_wnd_body_main { padding: 1rem; } .siz_wnd_body_bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--wnd-body-background); border-bottom-right-radius: 0.75rem; border-top-left-radius: 0.75rem; } .siz_wnd_body_bg_top { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--svg-body-bg-1); background-size: cover; border-bottom-right-radius: 0.75rem; overflow: hidden; } .siz_wnd_body_bg_top:before { content: ''; position: absolute; top: -100%; left: -100%; width: 500%; height: 500%; background: var(--svg-body-bg-2) repeat; background-size: 6% 6%; transform: rotate(-33deg); opacity: 0.35; } .siz_wnd_body_bg_top:after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--svg-wnd-bg); background-size: cover; border-bottom-right-radius: 0.75rem; } /*END siz_wnd*/ .siz_wnd_hlp { position: absolute; right: 0; top: 2.3rem; padding: 0; display: none; border: 1px solid var(--wnd-help-border-color); background: var(--wnd-help-body-background); box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.2); min-width: 13rem; } input.siz_wnd_hlp_inp_open:checked ~ .siz_modal, input.siz_wnd_hlp_inp_open:checked ~ .siz_wnd_hlp { z-index: calc(var(--main-max-z-index) + 2); display: block; } .siz_input .siz_wnd_hlp { top: 2rem; } .siz_wnd_hlp > .siz_wnd_body > .siz_wnd_body_main { padding: 0.75rem; } .siz_wnd_hlp > .siz_wnd_body * { font-size: 0.9rem; } .siz_wnd_hlp ul ul { margin-left: 1rem; } .siz_wnd_hlp ul.siz_li_before li > span:first-child { margin-left: -0.25rem; } .siz_wnd_hlp.siz_wnd_hlp_up { top: auto; bottom: calc(100% + 0.1rem); } /*loader*/ .siz_loader { transform: rotateZ(45deg); perspective: 1000px; border-radius: 50%; width: 3rem; height: 3rem; margin: 0 1rem 0 0; display: block; color: var(--loader-color-1); } .siz_loader:before, .siz_loader:after { content: ""; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; transform: rotateX(70deg); animation: 1s kf_loader_spin linear infinite; } .siz_loader:after { color: var(--loader-color-2); transform: rotateY(70deg); animation-delay: .4s; } /*end loader*/ /*siz_show_hide*/ .siz_show_hide { margin-left: min(-20%, -13.5rem); visibility: hidden; } .siz_show_hide_btn { position: absolute; top: 0; left: 0; width: calc(var(--show-hide-btn-ratio) * 0.5rem); height: calc(var(--show-hide-btn-ratio) * 0.5rem); } .siz_show_hide_btn:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; } .siz_show_hide_lines { position: absolute; top: 50%; left: 50%; display: block; width: 60%; border-bottom: 0.15rem solid var(--show-hide-btn-border-color); transform: translateX(-50%) translateY(-50%); transition: border-color 0.4s steps(1, end); } .siz_show_hide_lines:before, .siz_show_hide_lines:after { content: ''; top: 0; left: 0; width: 100%; height: 100%; position: absolute; border-top: 0.15rem solid var(--show-hide-btn-border-color); transform: translateY(-0.4rem); transition: transform 0.4s; transform-origin: 100% 50%; display: block; } .siz_show_hide_lines:after { transform: translateY(0.4rem); } input[id^=siz_show_check_]:checked + .siz_show_hide .siz_show_hide_btn:before { transition: border 0s linear 0.4s; border: 0.15rem solid var(--show-hide-btn-border-color); } input[id^=siz_show_check_]:checked + .siz_show_hide .siz_show_hide_lines { transition: background 0.4s steps(1, start); border-color: transparent; } input[id^=siz_show_check_]:checked + .siz_show_hide .siz_show_hide_lines:before { transform: translateX(-15%) translateY(calc(var(--show-hide-btn-ratio) * 0.1rem * -1)) rotate(-45deg); } input[id^=siz_show_check_] { display: none; } input[id^=siz_show_check_]:checked + .siz_show_hide .siz_show_hide_lines:after { transform: translateX(-15%) translateY(calc(var(--show-hide-btn-ratio) * 0.1rem)) rotate(45deg); } .siz_show_hide_path { width: 100%; height: 100%; opacity: 0; fill: transparent; stroke-width: 7%; stroke: var(--show-hide-btn-border-color); stroke-dasharray: 2rem 16.5rem; animation: kf_pathanimation_out 0.4s linear; display: block; background: var(--main-background); } input[id^=siz_show_check_]:checked + .siz_show_hide .siz_show_hide_path { animation: kf_pathanimation 0.4s linear; } input[id^=siz_show_check_]:checked ~ .siz_show_hide label[for^=siz_show_check_] > .siz_title { visibility: hidden; } input[id^=siz_show_check_]:checked ~ .siz_show_hide label[for^=siz_show_check_] > .siz_title ~ .siz_title { visibility: visible; } input[id^=siz_show_check_]:checked + .siz_show_hide { margin-left: 0; visibility: visible; } .siz_show_hide label[for^=siz_show_check_] .siz_element_focus_top_right { top: 0.05rem; right: -0.15rem; opacity: 0.4; } /*END siz_show_hide*/ /*siz_nav_btn*/ .siz_nav_btn { width: 3.5rem; height: 3.5rem; position: relative; margin: 0.5rem 0 0 0; left: 0.5rem; display: inline-block; } .siz_nav_btn_text { white-space: nowrap; display: none; position: absolute; padding: 0 1rem 0 4rem; height: 3.3rem; box-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.05); top: 0.1rem; border-radius: 0.875rem; border-top-right-radius: 0; border-bottom-left-radius: 0; animation: kf_fadeInLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1) both 0.5s; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; border: 1px solid var(--nav-btn-border-color); background: var(--nav-btn-background); pointer-events: none; } .siz_nav_btn_text > span { font-size: 1.1rem; } .siz_nav_btn_ico { width: 100%; height: 100%; position: relative; border: 1px solid var(--nav-btn-border-color); background: var(--nav-btn-background); border-radius: 0.875rem; border-top-right-radius: 0; border-bottom-left-radius: 0; display: block; cursor: pointer; z-index: 1; } .siz_nav_btn_ico:before { content: ''; position: absolute; top: 25%; left: 25%; width: 50%; height: 50%; background: var(--nav-btn-icon-background); } #siz_nav_btn_info .siz_nav_btn_ico:before { mask: var(--svg-icon-info); } html.siz_no_touch .siz_nav_btn_ico:hover + .siz_nav_btn_text { display: flex; } /*END siz_nav_btn*/ .siz_wnd_body_main > label[for^=siz_wnd_hlp_inp_close_] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .siz_wnd_hlp a { z-index: 1; } #radio_wnd_input:checked ~ #siz_wnd_input_box { display: flex; } #radio_wnd_colorpicker:checked ~ #siz_wnd_colorpicker { display: flex; } .siz_input *:focus ~ .siz_element_focus { display: block; top: 0.1rem; right: -0.1rem; } .siz_w100, .siz_w100 .siz_input_body { width: 100%; } .siz_wnd_input_box { width: 33rem; } .siz_wnd_body_scroll { overflow: auto; max-height: calc(100vh - 10rem); } .siz_wnd_message_box_main { min-height: 4rem; display: table; border-collapse: collapse; table-layout: fixed; } .siz_wnd_message_box_main > .siz_ico { padding-left: 3.7rem; min-height: 4rem; } .siz_wnd_message_box_main > .siz_ico > .siz_lbl_text { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; /*safe center;*/ min-height: 4rem; margin-left: 0.75rem; margin-bottom: 0.75rem; } .siz_wnd_message_box .siz_wnd_body_main { padding-left: 1.5rem; } .siz_wnd_message_box_main .siz_lbl_ico { width: 3rem; height: 3rem; min-width: 3rem; min-height: 3rem; border-radius: 50%; background: var(--wnd-message-icon-background); margin: -0.35rem 0 0 -3.25rem; } .siz_wnd_message_box .siz_btn_no_ok_cancel .siz_nav_link_text_ok { display: none; } .siz_wnd_message_box_main .siz_loader { transform: translateY(-50%) rotate(-45deg); background: none; display: none; } .siz_wnd_message_box_main .siz_wnd_message_box_ico:before { content: ''; position: absolute; top: 15%; left: 15%; width: 70%; height: 70%; mask: var(--svg-icon-question); background: #FFF; } #radio_wnd_message:checked ~ #siz_wnd_message_box { display: flex; } #siz_wnd_message_box > .siz_wnd { max-width: 45rem !important; } #siz_wnd_message_box > .siz_wnd .siz_wnd_body_scroll { max-width: 37rem; } .siz_message_text { white-space: pre-wrap; padding-right: 0.5rem; max-width: 44rem; max-height: calc(100vh - 11rem); margin: auto; } /*siz_page_message*/ .siz_page_message { position: fixed; animation: kf_fade_in_down_wnd_center_x 0.6s backwards !important; /*, kf_err_hide 0s ease-in 10s forwards !important;*/ left: 50%; transform: translateX(-50%); top: 2.5%; z-index: calc(var(--main-max-z-index) + 2); } .siz_page_message .siz_message_text { text-align: center; } .siz_page_message .siz_wnd_message_box_main > .siz_ico { padding-left: 4.2rem; } .siz_page_message .siz_wnd_message_box_main .siz_lbl_ico { margin: 0 0 0 -3.7rem; width: 3.5rem; height: 3.5rem; border-bottom-right-radius: 1rem; background: var(--page-message-icon-background); } .siz_page_message .siz_wnd_message_box_main .siz_lbl_ico:before { top: -5%; left: -5%; width: 110%; height: 110%; mask: var(--svg-hand-up); background: var(--page-message-icon-color); } .siz_page_message .siz_wnd_message_box_main > .siz_ico > .siz_lbl_text { margin-bottom: 0; max-height: 5rem; margin-left: 1rem; } .siz_message_link { position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: pointer; display: none; } .siz_page_message_chk { display: none; } .siz_page_message_link .siz_message_link { display: block; } /*END siz_page_message*/ .siz_err_blink { animation: kf_err_blink 1s linear infinite; } /*siz_loading*/ .siz_wnd_modal_loading .siz_wnd_btns, .siz_wnd_modal_loading .siz_lbl_ico_question, .siz_wnd_modal_loading .siz_wnd_close { display: none; } .siz_wnd_modal_loading .siz_loader { display: inline-block; } .siz_wnd_modal_loading .siz_wnd_message_box_main { width: auto; margin: 0 auto; } .siz_wnd_modal_loading > label[for=radio_wnd_close] { pointer-events: none; } /*end siz_loading*/ /*siz_info*/ .siz_wnd_modal_info .siz_btn_yes_retry, .siz_wnd_modal_info .siz_btn_no_ok_cancel .siz_nav_link_text_no { display: none !important; } .siz_wnd_modal_info .siz_wnd_message_box_main .siz_wnd_message_box_ico { background: var(--wnd-message-icon-background); } .siz_wnd_modal_info .siz_wnd_message_box_main .siz_wnd_message_box_ico:before { top: 22.5%; left: 23.5%; width: 55%; height: 55%; mask: var(--svg-icon-info); } .siz_wnd_modal_info .siz_btn_no_ok_cancel .siz_nav_link_text_ok { display: inline; } .siz_wnd_message_box_main .siz_wnd_message_box_ico.siz_wnd_message_box_ico_warning { background: var(--wnd-message-icon-hover-background); } .siz_wnd_message_box_main .siz_wnd_message_box_ico.siz_wnd_message_box_ico_warning:before { mask: var(--svg-icon-warning); top: 20%; left: 19%; width: 65%; height: 65%; } .siz_wnd_message_box_main .siz_wnd_message_box_ico.siz_wnd_message_box_ico_error { background: var(--icon-error-background); } .siz_wnd_message_box_main .siz_wnd_message_box_ico.siz_wnd_message_box_ico_error:before { mask: var(--svg-icon-plus); top: 25%; left: 26%; width: 50%; height: 50%; transform: rotate(45deg); } /*end siz_info*/ /*siz_checkbox*/ .siz_chk > input[type=checkbox] { display: none; } .siz_chk > label { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; cursor: pointer; } .siz_chk > label:before { content: ''; position: absolute; left: 0.2rem; top: 50%; transform: translateY(-50%); opacity: 1; width: 1rem; height: 1rem; border-radius: 50%; } html.siz_no_touch .siz_chk > label:hover:before { animation: kf_chk_hover 5s linear infinite; } .siz_chk > label > .siz_chk_ico { width: 1.4rem; min-width: 1.4rem; height: 1.4rem; display: block; overflow: hidden; } .siz_chk > label > .siz_chk_ico:before { content: ''; top: 0; left: 0; width: 100%; height: 100%; position: absolute; box-sizing: border-box; border: 0.15rem solid var(--chk-icon-border-color); background: var(--chk-icon-background); } .siz_chk > input[type=checkbox]:checked ~ label > .siz_chk_ico:before { border: 0; background: var(--chk-icon-checked-background); } .siz_chk > input[type=checkbox]:checked ~ label > .siz_chk_ico:after { content: ''; position: absolute; width: 65%; height: 65%; top: 17.5%; left: 17.5%; mask: var(--svg-icon-ok); background: var(--chk-icon-color); } .siz_chk_text { padding: 0.3rem 0.5rem 0.3rem 0.4rem; flex: 1; } .siz_chk > label > * { color: var(--chk-color); } .siz_chk > input[type=checkbox]:checked ~ label > * { color: var(--main-color); } .siz_chk:focus:before { content: ''; position: absolute; left: -0.45rem; height: 1.3rem; width: 0.2rem; top: 50%; transform: translateY(-50%); background: var(--element-focus-background); opacity: 0.5; } /*END siz_checkbox*/ #siz_wnd_about .siz_wnd { min-width: 22rem; } #siz_wnd_about .siz_wnd_icon:before { mask: var(--svg-icon-info); width: 45%; height: 45%; left: 27.5%; top: 26%; } .program_ico { position: relative; width: 4rem; height: 4rem; border-radius: 50%; background: var(--program-icon-background_1); box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.15); } .program_ico:before { content: ''; position: absolute; top: -10%; left: -10%; width: 120%; height: 120%; mask: var(--svg-icon-bx-widget-icon); background: var(--program-icon-background_2); } #siz_wnd_about .siz_group_vertical { width: auto; } #siz_wnd_about .siz_group_vertical > .siz_group_body { align-items: flex-start; } #siz_wnd_about .program_group > .siz_group_body { justify-content: center; margin-left: -0.5rem; } .program_group * { color: #414141; } .program_name { font-size: 1.3rem; font-weight: bold; } /*siz_wnd_inform*/ #chk_wnd_inform { display: none; } #chk_wnd_inform:checked + .siz_wnd_inform { display: block; } .siz_wnd_inform { position: sticky; bottom: 0; background: var(--wnd-inform-background); display: none; box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1); } .siz_wnd_inform_main { width: 100%; height: 100%; display: flex; flex-direction: column; } .siz_wnd_inform_header { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; min-height: 2.75rem; padding: calc(var(--main-base-margin-padding) * 2); } .siz_wnd_inform_caption { flex: 1; } .siz_wnd_inform_header .siz_wnd_inform_close, .siz_wnd_inform_header .siz_wnd_inform_clear { width: 1.75rem; height: 1.75rem; min-width: 1.75rem; border-radius: 50%; margin: 0 var(--main-base-margin-padding) 0 0; } .siz_wnd_inform_header .siz_wnd_inform_close { margin: 0; } .siz_wnd_inform_header .siz_wnd_inform_clear > :last-child, .siz_wnd_inform_header .siz_wnd_inform_close > :last-child { min-height: 1.75rem; } .siz_wnd_inform_clear > :last-child:before { mask: var(--svg-icon-clear); transform: none; width: 70%; height: 70%; left: 15%; top: 15%; } .siz_wnd_inform_body { flex: 1; width: 100%; height: 100%; padding: calc(var(--main-base-margin-padding) * 2); padding-top: 0; background: var(--wnd-inform-body-background); } .siz_wnd_inform_body * { color: var(--wnd-inform-body-color); } .siz_wnd_inform .siz_treeview_body { max-height: 7rem; min-height: 4rem; } .siz_wnd_inform .siz_treeview_item_selector:after { display: none; } .siz_wnd_inform .siz_treeview_item_cell { padding: calc(var(--main-base-margin-padding) * 2); } .siz_wnd_inform_row .siz_lbl_text { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } .siz_wnd_inform_row_message { white-space: pre-wrap; } .siz_wnd_inform_row_icon { min-width: 2rem; min-height: 1.25rem; } .siz_wnd_inform_row_icon:before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; right: 0; mask: var(--svg-icon-info); background: var(--wnd-inform-row-icon-info-background); } .siz_wnd_inform_row_warning > .siz_lbl_text > .siz_wnd_inform_row_icon:before { mask: var(--svg-icon-warning); background: var(--wnd-inform-row-icon-warning-background); } .siz_wnd_inform_row_error > .siz_lbl_text > .siz_wnd_inform_row_icon:before { mask: var(--svg-icon-error); background: var(--wnd-inform-row-icon-error-background); } /*END siz_wnd_inform*/ .siz_menu_el_text { flex: 1; } .siz_menu_el_key { padding-left: 2rem; font-size: 0.95rem; color: var(--menu-item-key-color); } /*siz_combobox*/ .siz_combobox { display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; justify-content: flex-start; } .siz_combobox_caption { display: inline-block; padding: 0 0.5rem 0 0.5rem; color: var(--combobox-caption-color); } .siz_combobox_body { display: inline-flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; height: 2.6rem; min-height: 2.6rem; min-width: 7.5rem; padding: 0 2rem 0 0.75rem; border-top-left-radius: 1rem; border-bottom-right-radius: 1rem; min-width: 9rem; } .siz_combobox_bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-top-left-radius: 1rem; border-bottom-right-radius: 1rem; } .siz_combobox_bg:after { content: ''; position: absolute; display: block; top: 0; left: 0; right: 0; bottom: 0; background: var(--combobox-background); border: 1px solid var(--combobox-border-color); border-top-left-radius: 1rem; border-bottom-right-radius: 1rem; } .siz_combobox_body > input[type=checkbox], .siz_combobox_options { display: none; } .siz_combobox_sel_val { margin-top: 0.1rem; display: block; overflow: hidden; text-overflow: ellipsis; } .siz_combobox_sel_val > input[type=radio], .siz_combobox_sel_val > span { display: none; } .siz_combobox_sel_val > span { white-space: nowrap; } .siz_combobox_body > span:not(.siz_combobox_sel_val) { position: absolute; right: 0.7rem; top: 50%; pointer-events: none; width: 1rem; height: 1rem; transform: translateY(-50%); } .siz_combobox_body > span:not(.siz_combobox_sel_val):before { content: ''; display: block; width: 100%; height: 100%; mask: var(--svg-icon-arrow-down); background: var(--combobox-arrow-background); } .siz_combobox_modal { display: none; position: fixed; height: 100vh; width: 100vw; top: 0; left: 0; overflow: auto; z-index: calc(var(--main-max-z-index) + 2); } .siz_combobox_body > label:not(.siz_combobox_modal) { position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: pointer; border-top-left-radius: 1rem; border-bottom-right-radius: 1rem; z-index: 1; } .siz_combobox_options { position: absolute; top: 2.55rem; left: 0; min-width: calc(100% - 0.4rem); z-index: calc(var(--main-max-z-index) + 2); } .siz_combobox_body > input[type=checkbox]:checked ~ .siz_combobox_modal, .siz_combobox_options > span, .siz_combobox_body > input[type=checkbox]:checked ~ .siz_combobox_options { display: block; } .siz_combobox_body > input[type=checkbox]:checked ~ span:not(.siz_combobox_sel_val):before { transform: rotate(180deg); } .siz_combobox_sel_val > input[type=radio]:checked + span { display: inline; } .siz_tabbox .siz_combobox_bg:after { border-bottom: 0; border-bottom-right-radius: 0; } .siz_tabbox .siz_combobox_options .siz_menu_el { padding-left: 1.25rem; padding-right: 1.25rem; } .siz_tabbox .siz_combobox_options { border-top: 0; } .siz_tabbox .siz_combobox_options > .siz_menu_bg { background: linear-gradient(to bottom, var(--combobox-background) 0%, var(--menu-background-1) 20%); } .siz_combobox_top .siz_combobox_options { top: auto; bottom: 2.55rem; } .siz_combobox_options:focus + .siz_element_focus { display: block; } /*END siz_combobox*/ .siz_lbl_general .siz_lbl_ico { mask: var(--svg-icon-general) !important; } .siz_lbl_graphics_sound .siz_lbl_ico { mask: var(--svg-icon-graphics-sound) !important; } .siz_lbl_traffic .siz_lbl_ico { mask: var(--svg-icon-traffic) !important; } .siz_lbl_general .siz_lbl_ico:before, .siz_lbl_graphics_sound .siz_lbl_ico:before, .siz_lbl_traffic .siz_lbl_ico:before { display: none !important; } html.siz_no_touch .siz_input .siz_btn_hlp_menu { display: none; } @media (max-width: 640px) { .siz_combobox { flex-direction: column; } .siz_combobox_body { margin-top: calc(var(--main-base-margin-padding) / 2); } #main_btns .siz_group_body { justify-content: center; } #main_btns .siz_group_body > .siz_btn:last-of-type { margin-right: 0.5rem; } .siz_input.siz_input_header_left:not(.siz_input_header_nowrap) > .siz_input_body_main > .siz_input_caption, .siz_treeview_btns .siz_btn { display: none !important; } .siz_input.siz_input_header_left:not(.siz_input_header_nowrap) > .siz_input_header > .siz_input_caption { display: block; } .siz_btn.siz_treeview_btn_menu { display: table !important; } .siz_input.siz_input_header_left:not(.siz_input_header_nowrap) .siz_input_body { margin-top: 0.15rem; } #main_header { width: 3.5rem; max-width: 3.5rem; min-width: 3.5rem; } #main_header h1 { font-size: 1.3rem; } #main_header .siz_nav_btn { width: 2.8rem; height: 2.8rem; left: 0.25rem; } .siz_nav_btn_text { height: 2.6rem; padding-left: 3.5rem; } .siz_nav_btn_text > span { font-size: 0.95rem; } #main_body { padding-left: 3.5rem; } #main_btns .siz_btn { height: 2.6rem; } #main_btns .siz_btn .siz_nav_link_ico { width: 1.4rem; height: 1.4rem; } #main_btns .siz_btn .siz_nav_link_text { font-size: 0.9rem; } .siz_wnd { width: calc(100% - 2rem); } #siz_wnd_message_box > .siz_wnd .siz_wnd_body_scroll { max-width: calc(100vw - 9.5rem); } html.siz_no_touch .siz_input .siz_btn_hlp_menu { display: block; } .siz_input .siz_btn_hlp:not(.siz_btn_hlp_menu):not(.siz_btn_hlp_help):not(.siz_btn_hlp_minus):not(.siz_btn_hlp_plus) { display: none; } } @media (max-width: 480px) { .siz_wnd_btns .siz_btn { width: 100%; margin-right: 0 !important; max-width: none; } .siz_wnd_btns .siz_group_body { justify-content: center; } .siz_wnd_colorpicker .siz_wnd_btns .siz_chk { flex: none; } } @media (max-width: 400px) { .siz_colorpicker_picking_area { width: 13rem; height: 13rem; } .siz_colorpicker_hue, .siz_colorpicker_hue_alpha { height: 13rem; width: 2.2rem; margin-left: 1rem !important; } .siz_colorpicker_input_area { text-align: center; } .siz_colorpicker_input_area > .siz_input { margin-top: 0.5rem; } h2 { padding-right: 0.5rem; } h2 > span:last-of-type { display: none; } } .siz_mtop { margin-top: var(--main-base-margin-padding); /*0.25rem;*/ } .siz_mtop_double { margin-top: calc(var(--main-base-margin-padding) * 2); /*0.5rem;*/ } .siz_mtop_triple { margin-top: calc(var(--main-base-margin-padding) * 3); /*0.75rem;*/ } .siz_mtop_big { margin-top: calc(var(--main-base-margin-padding) * 4); /*1rem;*/ } .siz_mtop_big_single { margin-top: calc(var(--main-base-margin-padding) * 5); /*1.25rem;*/ } .siz_mtop_big_double { margin-top: calc(var(--main-base-margin-padding) * 6); /*1.5rem;*/ } .siz_mright { margin-right: var(--main-base-margin-padding); } .siz_mright_double { margin-right: calc(var(--main-base-margin-padding) * 2); } .siz_mright_triple { margin-right: calc(var(--main-base-margin-padding) * 3); } .siz_mright_big { margin-right: calc(var(--main-base-margin-padding) * 4); /*1rem;*/ } .siz_mleft { margin-left: var(--main-base-margin-padding); } .siz_mleft_double { margin-left: calc(var(--main-base-margin-padding) * 2); } .siz_mleft_triple { margin-left: calc(var(--main-base-margin-padding) * 3); } .siz_mleft_big { margin-left: calc(var(--main-base-margin-padding) * 4); /*1rem;*/ } .siz_mleft_big_single { margin-left: calc(var(--main-base-margin-padding) * 5); /*1.25rem;*/ } .siz_mleft_big_double { margin-left: calc(var(--main-base-margin-padding) * 6); /*1.5rem;*/ } .siz_mleft_big_triple { margin-left: calc(var(--main-base-margin-padding) * 7); /*1.75rem;*/ } .siz_pleft_double { padding-left: calc(var(--main-base-margin-padding) * 2); } .siz_pleft_big { padding-left: calc(var(--main-base-margin-padding) * 4); } .siz_pright_double { padding-right: calc(var(--main-base-margin-padding) * 2); } .siz_dnone { display: none !important; } .siz_disabled, .siz_disabled * { pointer-events: none; color: var(--element-disabled-color) !important; } .siz_disabled.siz_menu_el .siz_nav_link_ico:before { background: var(--element-disabled-color) !important; } .siz_tacenter { text-align: center; }