.webix_toolbar.MainHeader {
	background-color: var(--main-header-bg);
}
.webix_el_label .MainHeaderText {
	color: var(--main-header-text);
    font-size: 150%;
}
.webix_el_label .logo {
	color: var(--logo-color);
    font-size: 150%;
}
.webix_el_button.tbBars {
	color: red;
	line-height: 28px;
}
.webix_forminput fieldset {
    border:none !important; 
}
/*.webix_forminput legend {
    text-transform: inherit;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #313131 !important;
    padding: 3px 2px;
}*/
.button-transparent button,
.button-transparent input,
.button-transparent span {
    background-color: transparent !important;
    color: white !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    text-align: center !important;
    padding-left: inherit !important;
}

.button-transparent:hover {
    background-color: rgba(255,255,255,0.1) !important;
    cursor: pointer !important;
}
.webix_transparent,
.webix_selected.webix_transparent,
.webix_transparent.webix_row_select,
.webix_transparent.webix_cell_select{
    opacity:0.6;
    background: #edeff5;
}
.gridbar.webix_layout_toolbar .webix_control,
.gridbar.webix_layout_toolbar .webix_control button{
    font-size: 15px;
}
.usermenu_hover .webix_list_item:hover{
    background-color: #c294f5;
}

.webix_image {
    background-size: 100% 100%;
}
.align-right {
    text-align: right;
}
.webix_message-warning div{
	background-color: #fb9355;
	border: 1px solid #db804a;
	color: #000;
}

.webix_message-warning {
	background-color: #777;
	border: 1px solid #777;
	box-shadow: 0 0 10px #000
}
.sc_text_align_right {
    text-align: right;
}
.sc_text_align_left {
    text-align: left;
}
.sc_text_align_center {
    text-align: center;
}
.toolbar_button_delete button {
    text-transform: uppercase;
}

.toolbar_button_delete button {
    color: var(--danger-color) !important;
}

.toolbar_button_delete button:hover {
    background-color: var(--danger-color) !important;
    color: var(--light-color) !important;
}

.toolbar_button_delete button:before {
    content: "\f2ed";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    font-size: 16px;
    padding-right: 5px;
}
.toolbar_button_save button {
    text-transform: uppercase;
}

.toolbar_button_save button {
    color: var(--accent-dark) !important;
}

.toolbar_button_save button:hover {
    background-color: var(--accent-dark) !important;
    color: var(--light-color) !important;
}

.toolbar_button_save button:before {
    content: "\f0c7";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    font-size: 16px;
    padding-right: 5px;
}
.toolbar_button_cancel button {
    text-transform: uppercase;
}

.toolbar_button_cancel button {
    color: var(--neutral-color) !important;
}

.toolbar_button_cancel button:hover {
    background-color: var(--neutral-color) !important;
    color: var(--light-color) !important;
}

.toolbar_button_cancel button:before {
    content: "\f0e2";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    font-size: 16px;
    padding-right: 5px;
}
.toolbar_button_new button {
    text-transform: uppercase;
}

.toolbar_button_new button {
    color: var(--accent-dark) !important;
}

.toolbar_button_new button:hover {
    background-color: var(--accent-dark) !important;
    color: var(--light-color) !important;
}

.toolbar_button_new button:before {
    content: "\f055";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    font-size: 16px;
    padding-right: 5px;
}
::placeholder, .webix_placeholder {
	color: var(--form-placeholder-text);
	opacity: 1;
	font-style: italic;
}
.vptTraineeMobileTabbar .webix_item_tab,
.vptTraineeMobileTabbar .webix_el_tabbar{
    height: 65px !Important; 
    font-size: large !Important;
}

.vptTraineeMobileTabbar span,
.vptTraineeMobileTabbar i {
    font-size: large !Important;
}

/*.webix_all_tabs*/
.vptTraineeMobileTabbar .webix_item_tab.webix_selected ::selection {
    height: 65px !Important; 
    font-size: large !Important;
    background: cornflowerblue !Important;
}
.webix_resizer_vx, .webix_resizer_x {
    width: 5px !important;
    background-color: #f4f5f9;
}
.webix_resizer_vy, .webix_resizer_y {
    height: 5px !important;
    background-color: #f4f5f9;
}
/* --> for equipments lists in suggest */
.vptSuggestListIconWidth50 .webix_icon{
    width: 50px;
}

.vptSuggestListIcon .webix_icon{
    height: 50px;
}

.vptSuggestListIconWidth50 .webix_cell,
.vptSuggestListIcon .webix_cell {
    display: flex;
    align-content: center;
    line-height: 70px!important;
}
/*<-- for equipments lists in suggest */

.vptToggle .webix_button.webix_img_btn {
    padding-left: 5px;
    border-radius: 3px;    
}
.vptToggle .webix_button.webix_img_btn .webix_icon_btn {
    vertical-align: middle;
}

.vptToggle .webix_pressed .webix_button.webix_img_btn  .webix_icon_btn {
    color: #F18B28;
}
 
.webix_form.vptFilterForm {
    border-radius: 10px;
    background: #d4d4d466;
}

.vptSearch.webix_el_search input:focus {
    border: 1px solid #F18B28;
}
.vptSearch.webix_el_search .webix_input_icon {
    color: #F18B28;
}

.vptTextarea.webix_el_textarea textarea:focus {
    border: 1px solid #F18B28;
}

.vptLayoutWhiteOpacity95 {    
    opacity: 0.95;
    background-color: white;
}

.vptIcon .webix_icon_button:hover .webix_icon {
    color: #F18B28;
}
.vptIcon .webix_icon_button .webix_icon {
    color: #F18B28;    
}

.webix_el_button.vptIconBtn button {    
    background: #F18B28;
    color: white;
}

.webix_el_button.vptIconBtn .webix_el_box button:focus {    
    background: #F18B28;
}

.webix_el_button.vptIconBtn button .webix_icon {    
    color: white;
}

.vptTransparent {
    background: transparent;
}

.vptBackgroungGray {
    background: gray;
}

.vptBackgroungWhite {
    background: white;
}

/* vpt -------------- start ----*/
.vptTopToolbar.webix_toolbar {
    background-color: #393939;
    opacity: 0.95;
}

.vptTopToolbarIcon .webix_icon_button .webix_icon {
    font-size: 25px;
    height: 25px;
    width: 30px;
    color: #F18B28;
}

.vptTopToolbarIcon .webix_icon_button .webix_icon:hover {
    font-size: 25px;
    height: 25px;
    width: 30px;
    color: #F18B28;
}

.opacity96 {
    opacity: 0.95;
}

.vptReadonlytext .webix_template {
    font-weight: 600;
}

.vptMultiview.webix_view.webix_multiview {
    background-color: transparent;
}

.vptAccentBtn button.webix_button {
    background: #F18B28;
    color: #ffffff;
}

.vptAccentBtn.vptStartBtn button.webix_button {
    font-size: 22px;
}

.vptAccentBtn button.webix_button:hover,
.vptAccentBtn button.webix_button:focus {
    background: #ff8004;
    color: #ffffff;
}

.vptSecondaryBtn button.webix_button {
    background: #F4F5F9;
    color: #ff8004;
}

.vptLayoutTransparent {
    background-color: transparent
}

.vptLayoutWithImg {
    background-image: url(/Content/images/vpt/vpt_mobile_background.jpg);
    background-size: cover;
    background-position: center;
}

.vptLink {
    color: #ff8004;
    text-decoration: underline;
}

.vptTextCenter{
    text-align: center;
}

.vptColorpicker.webix_el_colorpicker .webix_inp_static:focus, 
.vptDatepicker.webix_el_datepicker .webix_inp_static:focus, 
.vptDbldatepicker.webix_el_dbldatepicker .webix_inp_static:focus, 
.vptRichselect.webix_el_richselect .webix_inp_static:focus, 
.vptSelect.webix_el_select select:focus, 
.vptTextarea.webix_el_textarea textarea:focus {
    border: 1px solid #ff8004;
}

.vptColorpicker.webix_el_colorpicker input:focus,
.vptCombo.webix_el_combo input:focus,
.vptDatepicker.webix_el_datepicker input:focus,
.vptSearch.webix_el_search input:focus,
.vptText.webix_el_text input:focus {
    border: 1px solid #ff8004;
}

.vptSegmented .webix_segment_0.webix_selected,
.vptSegmented .webix_segment_1.webix_selected, 
.vptSegmented .webix_segment_N.webix_selected {
    background: #f4f5f9;
    background-color: #ff8004;
    border-color: #ff8004;
    color: #fff;
}

.vptSegmented .webix_segment_0, .vptSegmented .webix_segment_1, .vptSegmented .webix_segment_N {
    background-color: #f4f5f9;
    border-color: #f4f5f9;
    color: #ff8004;
    font-weight: 500;
}

.vptSegmented .webix_segment_0 {
    border-radius: 5px 0 0 5px;
}

.vptSegmented .webix_segment_N {
    border-radius: 0 5px 5px 0;
}

/* menu*/
.vptMenuList.webix_list .webix_list_item {
    border: none;
    line-height: 60px;
}
.vptMenuList.webix_list .webix_list_item .webix_icon {
    padding-right: 10px;
}

.vptUserInfoBlock {
    text-align: center;
}

.vptUserIcon {
    height: 150px;
}
.vptUserName {
    font-size: 18px;
    font-weight: 500;
    padding: 10px;
}

.vptPageNameTemplate {
    display: flex;
    align-items: center;
    background: transparent;
    color: white;
    font-size: 18px;
    font-weight: 500;
    /*text-transform: uppercase;*/
}
.vptPageNameTemplate .webix_template{
    display: flex;
    align-items: center;
}
/* menu */

/* auth pages */
.vptAuthFormHeader .vptLogo {
    height: 50px;
    width: auto;
}
/* auth pages */

/* customize page*/

.vptMulticombo .webix_focused .webix_inp_static{
    border: 1px solid #ff8004;
}

.vptRichselect.webix_el_richselect .webix_inp_static:focus{
    border: 1px solid #ff8004;
}

.vptSwitch .webix_switch_box.webix_switch_on {
    background: #ff8004;
}

.vptMultilist .webix_multilist .wxi-checkbox-marked {
    color: #ff8004
}

.vptForm .webix_slider_alt .webix_slider_box .webix_slider_left {
    background: #ff8004;
}

.vptForm.webix_view.webix_form {
    opacity: 0.96
}
.vptMulticombo .webix_multicombo_value .webix_multicombo_delete:after{
    color: #ff8004;
}
/* customize page*/

/* startWorkout page*/

.vptDetailsTemplate{
    background: transparent;
}

.vptDetailsTemplate .webix_template {
    border: 2px solid #F18B28;
    padding: 0;
    border-radius: 2px;

}
.vptDetailsBlock {
    background-color: #393939;
    color: white;
    opacity: 0.95;
}
.vptDetailsBlock .vptHeader {
    text-transform: uppercase;
    color: #fff;
    font-size: 25px;
    font-weight: 500;
    text-align: center;
    padding: 20px 10px;
    background-color: #393939;
}
.vptImgContainer {
    position: relative;
    text-align: center;
    opacity: 0.95;
}

.vptImgContainer:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/*.details-block .muscules-svg {
    max-width: 50%;
    height: auto;
    max-height: 50%;
}*/



.vptCustomizeInfo {
    font-size: 20px;
    color: white;
    text-align: center;
}

.vptMusculesBlock {
    padding: 20px;
    text-align: center;
}

.vptMusculesBlock .vptDetailsValue {
    font-size: 22px;
    font-weight: 500;
}

.vptEstimatedTimeBlock {
    padding: 20px 10px;
    text-align: right;
    font-size: 18px;
}
/* startWorkout page*/

/* exercises page*/
.vptExercisesList.webix_list {
    background: transparent;
}

.vptExercisesList.webix_list .vptStartBtn {
    padding: 0px 30px;
    background: #ff8004;
    border-radius: 2px;
    color: #fff;
    font-weight: 500;
}
.vptExercisesList.webix_list .vptExerciseInfo .vptExerciseName{
    font-size: 18px;
    font-weight: 500;
}

.vptExercisesList.webix_list .vptExerciseInfo .vptExerciseSets{
    font-size: 16px;
    color: #ff8004;
    text-decoration: underline;
    display: inline-block;
}

.vptExercisesList.webix_list .vptExerciseInfo {
    padding-left: 5px;
    text-align: left;
}
.vptExercisesList.webix_list .webix_list_item {
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.vptExercisesList.webix_list .webix_list_item.webix_selected .vptBlock {
    box-shadow: 0 7px 10px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22);
}

.vptExercisesList.webix_list .webix_list_item.webix_selected {
    box-shadow: none;
    background: transparent;
}
.vptExercisesList.webix_list .vptBlock {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 10px 10px;
    background-color: #EFEFEF;
    border-radius: 3px;
}

.vptExercisesList.webix_list .vptMetaInfo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}

.vptExercisesList.webix_list .vptState {
    line-height: 25px;
    padding: 0px 10px;
    border-radius: 3px;
}

.vptBlockCompleted {
    border-left: 4px solid #039e037d;
}

.vptBlockTodo {
    border-left: 4px solid #80808047;
}

.vptBlockInProgress {
    border-left: 4px solid #f18b28ad;
}

.vptBlockCancelled {
    border-left: 4px solid #ff0000bd;
    opacity: 0.6;
}

.vptState {
    width: 70px;
    text-align: center;
    color: #313131;
}

.vptStateCompleted {
    background-color: #039e037d;
}

.vptStateTodo {
    background-color: #80808047;
}

.vptStateInProgress {
    background-color: #f18b28ad;
}

.vptStateCancelled {
    background-color: #ff0000bd;
}

/* exercises page*/

/* current exercise page */

.vptCurrentExercisePage {
    background: #f3f3f3;
}

.vptCurrentExercisePage .vptHeaderTemplate .vptMusclesName {
    font-size: 18px;
    text-align: center
}

.vptCurrentExerciseTemplate {
    background: transparent;
    font-size: 20px;
    line-height: 20px;
}

.vptCurrentExerciseTemplate .webix_template {
    display: flex;
    align-items: center;
}

.vptCurrentExerciseInfoTemplate .webix_template {
    padding: 10px;
}

.vptCurrentExerciseInfoTemplate .vptInfoSectionName {    
    font-size: 16px;
    padding: 15px 0px 15px 20px;
    font-weight: 500;
}

.vptCurrentExerciseInfoTemplate .vptInfoContent {
    //text-indent: 30px;
}

.webix_view.vptCurrentExerciseSmallImageTemplate {
    background: transparent;
}

.vptCurrentExerciseImagesTemplate .vptExersisesImagesIconsContainer,
.vptCurrentExerciseSmallImageTemplate .vptExersisesImagesIconsContainer {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
}

.vptCurrentExerciseImagesTemplate .vptExersisesImagesImgContainer{
    padding: 10px 15px;
}

.vptCurrentExerciseImagesTemplate .vptExersisesImagesImgContainer img {
    height:150px;
}

.vptCurrentExerciseSmallImageTemplate .vptExersisesImagesImgContainer img {
    height:70px;
    width: 85px;
}

.vptCurrentExerciseSmallImageTemplate .webix_template {
    padding: 0px;
}

/*
@keyframes cfFadeInOut {
    0% {opacity:1;} 
    45% {opacity:1;}
    55% {opacity:0;} 
    100% {opacity:0;}
}
*/

.vptCurrentExerciseImagesTemplate .cf {
    position:relative;
    height:150px;
    width:210px;    
}

.vptCurrentExerciseSmallImageTemplate .cf {
    position:relative;
    height:72px;
    width: 87px;
}

.vptCurrentExerciseImagesTemplate .cf img,
.vptCurrentExerciseSmallImageTemplate .cf img{
    position: absolute;
    top: 0;
    left: 0; 
    opacity: 0;
    z-index: 1;       
    
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;        
}

.cf img.showing {
    opacity: 1;
    z-index: 2;
}

.vptCurrentExercisePage .webix_el_button.webix_secondary button .webix_icon_btn {
    color: white;
}

.vptFormGrayTopLabel .webix_inp_top_label {
    color: gray;
    font-size: 12px;
    font-weight: 500;
}

.vptTimerMessage,
.vptTimerContainer .vptTime  {
    text-align: center;
    font-weight: 500;
}

.vptTimerContainer .vptTime  {
    font-size: 26px;
}

.vptTimerMessage {
    padding-top: 8px;
    font-size: 20px;
}



/* vpt -------------- end-- ----*/
/* https://snippet.webix.com/tto9ckg4 */
.green_switch .webix_switch_box {
    background-color: var(--primary-color);
    color : black;
}
.green_switch .webix_switch_off {
  	background-color: var(--primary-color);
}
.zeroPaddingTemplate .webix_template {
    padding: 0!important;
}
.cgTag {
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    background-color: transparent; 
}

.cgCategory {
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    background-color: transparent; 
}

.cgNewsArticle .webix_template {
    width: fit-content !important;
}

.webix_view .cglogo {
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    background-color: transparent; 
}

.cgIcon span.webix_icon {
    font-size: x-large;
    color: yellowgreen !important;
}

.webix_sidebar.height60 .webix_tree_item {
    height: 60px;
    line-height: 60px;
    font-size: 150%;
    padding-right: 10px !important;
}

.webix_sidebar.height60 .webix_sidebar_icon {
    padding-right: 10px !important;
}


/* cg -------------- start ----*/
.cgTopToolbar.webix_toolbar {
    background-color: #393939;
    opacity: 0.95;
}

.cgTopToolbarIcon .webix_icon_button .webix_icon {
    font-size: 25px;
    height: 25px;
    width: 30px;
    color: yellowgreen;
}

.cgTopToolbarIcon .webix_icon_button .webix_icon:hover {
    font-size: 25px;
    height: 25px;
    width: 30px;
    color: yellowgreen;
}

.cgPopup {
    /*opacity: 0.96;*/
    -webkit-box-shadow: 10px 10px 5px 0px rgba(166,166,166,0.76);
    -moz-box-shadow: 10px 10px 5px 0px rgba(166,166,166,0.76);
    box-shadow: 10px 10px 5px 0px rgba(166,166,166,0.76);
}

.cgReadonlytext .webix_template {
    font-weight: 600;
}

.cgMultiview.webix_view.webix_multiview {
    background-color: transparent;
}

.cgAccentBtn button.webix_button, 
.cgAccentBtn span.webix_icon_btn {
    background: transparent !important;
    color: yellowgreen !important; 
    font-size: 22px;
}

.cgAccentBtn button.webix_button:hover,
.cgAccentBtn button.webix_button:focus,
.cgAccentBtn span.webix_icon_btn:hover,
.cgAccentBtn span.webix_icon_btn:focus {
    background: rgb(204, 204, 204) !important; 
    color: yellowgreen !important; 
}

.cgSecondaryBtn button.webix_button {
    background: #F4F5F9;
    color: #475466;
    font-size: 22px;
}

.cgLayoutTransparent {
    background-color: transparent
}

.cgLayoutWithImg {
    background-image: url(/Content/images/cg/cg_mobile_background.png);
    background-size: cover;
    background-position: center;
    /*background: rgba(0, 0, 0, 0.6);*/
}
.container{
    position: relative;
    z-index:1;
    overflow:hidden; /*if you want to crop the image*/
}
.container:before{
    z-index:-1;
    position:absolute;
    left:0;
    top:0;
    /*content: url('path/to/image.ext');*/
    opacity:0.4;
}


.cgLink {
    color: yellowgreen !important;
    text-decoration: underline;
}

.cgTextCenter{
    text-align: center;
}

.cgColorpicker.webix_el_colorpicker .webix_inp_static:focus, 
.cgDatepicker.webix_el_datepicker .webix_inp_static:focus, 
.cgDbldatepicker.webix_el_dbldatepicker .webix_inp_static:focus, 
.cgRichselect.webix_el_richselect .webix_inp_static:focus, 
.cgSelect.webix_el_select select:focus, 
.cgTextarea.webix_el_textarea textarea:focus {
    border: 1px solid yellowgreen !important;
}

.cgColorpicker.webix_el_colorpicker input:focus,
.cgCombo.webix_el_combo input:focus,
.cgDatepicker.webix_el_datepicker input:focus,
.cgSearch.webix_el_search input:focus,
.cgText.webix_el_text input:focus {
    border: 1px solid yellowgreen !important;
}

.cgSegmented .webix_segment_0.webix_selected,
.cgSegmented .webix_segment_1.webix_selected, 
.cgSegmented .webix_segment_N.webix_selected {
    background: yellowgreen !important;
    background-color: yellowgreen !important;
    border-color: yellowgreen !important;
    color: #f4f5f9 !important;
}

.cgSegmented .webix_segment_0, .cgSegmented .webix_segment_1, .cgSegmented .webix_segment_N {
    background: #f4f5f9 !important;
    background-color: #f4f5f9 !important;
    border-color: #f4f5f9 !important;
    color: yellowgreen !important;
    font-weight: 500;
}

.cgSegmented .webix_segment_0 {
    border-radius: 5px 0 0 5px;
}

.cgSegmented .webix_segment_N {
    border-radius: 0 5px 5px 0;
}

/* menu*/
.cgMenuList.webix_list .webix_list_item {
    border: none;
    line-height: 60px;
}
.cgMenuList.webix_list .webix_list_item .webix_icon {
    padding-right: 10px;
}

.cgUserInfoBlock {
    text-align: center;
}

.cgUserIcon {
    height: 150px;
}
.cgUserName {
    font-size: 18px;
    font-weight: 500;
    padding: 10px;
}

.cgPageNameTemplate {
    display: flex;
    align-items: center;
    background: transparent;
    color: white;
    font-size: 18px;
    font-weight: 500;
    /*text-transform: uppercase;*/
}
.cgPageNameTemplate .webix_template{
    display: flex;
    align-items: center;
}
/* menu */

/* auth pages */
.cgAuthFormHeader .cgLogo {
    height: 50px;
    width: auto;
}
/* auth pages */

/* customize page*/

.cgMulticombo .webix_focused .webix_inp_static{
    border: 1px solid yellowgreen !important;
}

.cgRichselect.webix_el_richselect .webix_inp_static:focus{
    border: 1px solid yellowgreen !important;
}

.cgSwitch .webix_switch_box.webix_switch_on {
    background: yellowgreen !important;
}

.cgMultilist .webix_multilist .wxi-checkbox-marked {
    color: yellowgreen !important
}

.cgForm .webix_slider_alt .webix_slider_box .webix_slider_left {
    background: yellowgreen !important;
}

.cgForm.webix_view.webix_form {
    opacity: 0.96
}
.cgMulticombo .webix_multicombo_value .webix_multicombo_delete:after{
    color: yellowgreen !important;
}
/* customize page*/

/* startWorkout page*/

.cgDetailsTemplate{
    background: transparent;
}

.cgDetailsTemplate .webix_template {
    border: 2px solid yellowgreen;
    padding: 0;
    border-radius: 2px;

}
.cgDetailsBlock {
    background-color: #393939;
    color: white;
    opacity: 0.95;
}
.cgDetailsBlock .cgHeader {
    text-transform: uppercase;
    color: #fff;
    font-size: 25px;
    font-weight: 500;
    text-align: center;
    padding: 20px 10px;
    background-color: #393939;
}
.cgImgContainer {
    position: relative;
    text-align: center;
    opacity: 0.95;
}

.cgImgContainer:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.cgCustomizeInfo {
    font-size: 20px;
    color: white;
    text-align: center;
}
/* startWorkout page*/


.cgInfoTemplate {
    color: yellowgreen !important
}
.cgDatatable.webix_dtable {
    background: #eff0f452;
}


.cgDatatable .cgMultiline {
    line-height: 20px !important;
}

.cgDatatable.webix_dtable .webix_dt_editor input, .webix_view.cgDatatable.webix_dtable .webix_dt_editor select {
    border-color: yellowgreen;
    border-radius: 2px;
}
.cgDatatable .cgCellCompleted {
    background: #00ff4324;
}
.cgDatatable .cgCellInProgress {
    background: rgba(241, 139, 40, 0.3);
}

.cgDatatable .webix_cell {
    text-align: center;
}

.cgDatatable .cgEditableCell .webix_cell {
    background: white;
    border: 1px solid grey;
    border-radius: 2px;
}

.cgDatatable.webix_dtable .webix_ss_body .webix_column.cgEditableCell > div {
    border: 1px solid #80808036;
}

.cgDatatable.webix_dtable .webix_ss_header td.webix_last_row {
    border-bottom: 1px solid yellowgreen;
}


.cgInfoIcon .webix_icon_button .webix_icon {
    font-size: 30px;
    height: 30px;
    width: 30px;
    color: yellowgreen;
}

.cgContentToolbar {
    background: transparent;
}

.cgContentToolbar .cgAccentBtn .webix_button {
    font-size: 17px;
}

.cgContentToolbar .cgAccentBtn .webix_button .webix_icon_btn {
    font-size: 22px;
    color: white;
}

.cgZeroPadding .webix_template {
    padding: 0px !important;
}

.cgToggle {
    font-weight: 500;
    background-color: beige;
    height: inherit;
    width: inherit;
    text-align: center;
}
/* cg -------------- end-- ----*/
.cursor-pointer button,
.cursor-pointer input,
.cursor-pointer a,
.cursor-pointer span {
    vertical-align: middle !important;
    cursor: pointer !important;
}

.cursor-pointer:hover button,
.cursor-pointer:hover a,
.cursor-pointer:hover input,
.cursor-pointer:hover span {
    color: #020197 !important;
    cursor: pointer !important;
    font-weight: 500;
}
mark.red {
    color:#ff0000;
    background: none;
}

mark.blue {
    color:#0000A0;
    background: none;
}

mark.on_yellow {
    background: yellow;
}

mark.blue_on_gray{
    background: #f0f0f0;
    border-color: #f0f0f0 #d8d8d8 #d3d3d3;
    text-shadow: 0 1px 0 #fff;
    box-shadow: 0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb;
    display: inline-block;
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    padding: 3px 8px;
    margin: 2px;
    line-height: 14px;
    color: #0000A0;
    text-transform: uppercase;
    border: 1px solid #dedede;
    border-radius: 3px;
    cursor: unset;
}

mark.green_on_gray{
    background: #f0f0f0;
    border-color: #dedede #d8d8d8 #d3d3d3;
    text-shadow: 0 1px 0 white;
    box-shadow: 0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb;
    display: inline-block;
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    padding: 3px 8px;
    margin: 2px;
    line-height: 14px;
    color: rgb(0, 131, 22)3;
    text-transform: uppercase;
    border: 1px solid #dedede;
    border-radius: 3px;
    cursor: unset;
}

mark.white_on_green{
    background: green;
    /*border-color: #dedede #d8d8d8 #d3d3d3;
    text-shadow: 0 1px 0 #eaeaea;*/
    box-shadow: 0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb;
    display: inline-block;
    text-decoration: none;
    font-size: 10px;
    font-weight: 400;
    padding: 3px 8px;
    margin: 2px;
    line-height: 14px;
    color: white;
    text-transform: uppercase;
    border: 1px solid #dedede;
    border-radius: 3px;
   /* cursor: pointer;*/
}

mark.white_on_darkgray{
    background: darkgray;
    border-color: #dedede #d8d8d8 #d3d3d3;
    text-shadow: 0 1px 0 #fff;
    box-shadow: 0 1px 1px #eaeaea, inset 0 1px 0 #fbfbfb;
    display: inline-block;
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    padding: 3px 8px;
    margin: 2px;
    line-height: 14px;
    color: white;
    text-transform: uppercase;
    border: 1px solid #dedede;
    border-radius: 3px;
    /*cursor: pointer;*/
}


/*Usage example: <mark class="blue">data</mark> base!*/
div.mapper_panel_spacer div.webix_scroll_cont{
    height: inherit !important;
}
/* Font Size: 50, 80, 90, 110, 120, 150, 200 */
.font50 {
    font-size: 50%;
}
.font80 {
    font-size: 80%;
}
.font90 {
    font-size: 90%;
}
.font110 {
    font-size: 110%;
}
.font120 {
    font-size: 120%;
}
.font150 {
    font-size: 150%;
}
.font200 {
    font-size: 200%;
}


.mhTag {
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    background-color: transparent; 
}

.mhCategory {
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    background-color: transparent; 
}

.mhNewsArticle .webix_template {
    width: fit-content !important;
}

.webix_view .mhlogo {
    -webkit-appearance: none;
    -webkit-font-smoothing: antialiased;
    background-color: transparent; 
}

.mhIcon span.webix_icon {
    font-size: x-large;
    color: yellowgreen !important;
}

.webix_sidebar.height60 .webix_tree_item {
    height: 60px;
    line-height: 60px;
    font-size: 150%;
    padding-right: 10px !important;
}

.webix_sidebar.height60 .webix_sidebar_icon {
    padding-right: 10px !important;
}


/* mh -------------- start ----*/
.mhTopToolbar.webix_toolbar {
    background-color: #393939;
    opacity: 0.95;
}

.mhTopToolbarIcon .webix_icon_button .webix_icon {
    font-size: 25px;
    height: 25px;
    width: 30px;
    color: rgba(38, 157, 255, 0.795);
}

.mhTopToolbarIcon .webix_icon_button .webix_icon:hover {
    font-size: 25px;
    height: 25px;
    width: 30px;
    color: rgba(38, 157, 255, 0.795);
}

.mhPopup {
    /*opacity: 0.96;*/
    -webkit-box-shadow: 10px 10px 5px 0px rgba(166,166,166,0.76);
    -moz-box-shadow: 10px 10px 5px 0px rgba(166,166,166,0.76);
    box-shadow: 10px 10px 5px 0px rgba(166,166,166,0.76);
}

.mhReadonlytext .webix_template {
    font-weight: 600;
}

.mhMultiview.webix_view.webix_multiview {
    background-color: transparent;
}

.mhAccentBtn button.webix_button {
    background: rgba(38, 157, 255, 0.795);
    color: #ffffff;
    font-size: 22px;
}

.mhAccentBtn button.webix_button:hover,
.mhAccentBtn button.webix_button:focus {
    background: rgba(38, 157, 255, 0.795);
    color: #ffffff;
}

.mhSecondaryBtn button.webix_button {
    background: #F4F5F9;
    color: #475466;
    font-size: 22px;
}

.mhLayoutTransparent {
    background-color: transparent
}

.mhLayoutWithImg {
    background-image: url(/Content/images/mh/mh_mobile_background.png);
    background-size: cover;
    background-position: center;
    /*background: rgba(0, 0, 0, 0.6);*/
}
.container{
    position: relative;
    z-index:1;
    overflow:hidden; /*if you want to crop the image*/
}
.container:before{
    z-index:-1;
    position:absolute;
    left:0;
    top:0;
    /*content: url('path/to/image.ext');*/
    opacity:0.4;
}


.mhLink {
    color: rgba(38, 157, 255, 0.795);
    text-decoration: underline;
}

.mhTextCenter{
    text-align: center;
}

.mhColorpicker.webix_el_colorpicker .webix_inp_static:focus, 
.mhDatepicker.webix_el_datepicker .webix_inp_static:focus, 
.mhDbldatepicker.webix_el_dbldatepicker .webix_inp_static:focus, 
.mhRichselect.webix_el_richselect .webix_inp_static:focus, 
.mhSelect.webix_el_select select:focus, 
.mhTextarea.webix_el_textarea textarea:focus {
    border: 1px solid rgba(38, 157, 255, 0.795);
}

.mhColorpicker.webix_el_colorpicker input:focus,
.mhCombo.webix_el_combo input:focus,
.mhDatepicker.webix_el_datepicker input:focus,
.mhSearch.webix_el_search input:focus,
.mhText.webix_el_text input:focus {
    border: 1px solid rgba(38, 157, 255, 0.795);
}

.mhSegmented .webix_segment_0.webix_selected,
.mhSegmented .webix_segment_1.webix_selected, 
.mhSegmented .webix_segment_N.webix_selected {
    background: #f4f5f9;
    background-color: rgba(38, 157, 255, 0.795);
    border-color:rgba(38, 157, 255, 0.795);
    color: #fff;
}

.mhSegmented .webix_segment_0, .mhSegmented .webix_segment_1, .mhSegmented .webix_segment_N {
    background-color: #f4f5f9;
    border-color: #f4f5f9;
    color: rgba(38, 157, 255, 0.795);
    font-weight: 500;
}

.mhSegmented .webix_segment_0 {
    border-radius: 5px 0 0 5px;
}

.mhSegmented .webix_segment_N {
    border-radius: 0 5px 5px 0;
}

/* menu*/
.mhMenuList.webix_list .webix_list_item {
    border: none;
    line-height: 60px;
}
.mhMenuList.webix_list .webix_list_item .webix_icon {
    padding-right: 10px;
}

.mhUserInfoBlock {
    text-align: center;
}

.mhUserIcon {
    height: 150px;
}
.mhUserName {
    font-size: 18px;
    font-weight: 500;
    padding: 10px;
}

.mhPageNameTemplate {
    display: flex;
    align-items: center;
    background: transparent;
    color: white;
    font-size: 18px;
    font-weight: 500;
    /*text-transform: uppercase;*/
}
.mhPageNameTemplate .webix_template{
    display: flex;
    align-items: center;
}
/* menu */

/* auth pages */
/* all base classes for authentification are located in 'auth'*/ 
.mhAuthFormHeader .mhLogo {
    height: 50px;
    width: auto;
}

/* auth pages */

/* customize page*/

.mhMulticombo .webix_focused .webix_inp_static{
    border: 1px solid rgba(38, 157, 255, 0.795);
}

.mhRichselect.webix_el_richselect .webix_inp_static:focus{
    border: 1px solid rgba(38, 157, 255, 0.795);
}

.mhSwitch .webix_switch_box.webix_switch_on {
    background: rgba(38, 157, 255, 0.795);
}

.mhMultilist .webix_multilist .wxi-checkbox-marked {
    color: rgba(38, 157, 255, 0.795);
}

.mhForm .webix_slider_alt .webix_slider_box .webix_slider_left {
    background: rgba(38, 157, 255, 0.795);
}

.mhForm.webix_view.webix_form {
    opacity: 0.96
}
.mhMulticombo .webix_multicombo_value .webix_multicombo_delete:after{
    color: rgba(38, 157, 255, 0.795);
}
/* customize page*/

/* startWorkout page*/

.mhDetailsTemplate{
    background: transparent;
}

.mhDetailsTemplate .webix_template {
    border: 2px solid rgba(38, 157, 255, 0.795);
    padding: 0;
    border-radius: 2px;

}
.mhDetailsBlock {
    background-color: #393939;
    color: white;
    opacity: 0.95;
}
.mhDetailsBlock .mhHeader {
    text-transform: uppercase;
    color: #fff;
    font-size: 25px;
    font-weight: 500;
    text-align: center;
    padding: 20px 10px;
    background-color: #393939;
}
.mhImgContainer {
    position: relative;
    text-align: center;
    opacity: 0.95;
}

.mhImgContainer:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.mhCustomizeInfo {
    font-size: 20px;
    color: white;
    text-align: center;
}
/* startWorkout page*/


.mhInfoTemplate {
    color: #039e03c4
}
.mhDatatable.webix_dtable {
    background: #eff0f452;
}


.mhDatatable .mhMultiline {
    line-height: 20px !important;
}

.mhDatatable.webix_dtable .webix_dt_editor input, .webix_view.mhDatatable.webix_dtable .webix_dt_editor select {
    border-color: rgba(38, 157, 255, 0.795);
    border-radius: 2px;
}
.mhDatatable .mhCellCompleted {
    background: #00ff4324;
}
.mhDatatable .mhCellInProgress {
    background: rgba(241, 139, 40, 0.3);
}

.mhDatatable .webix_cell {
    text-align: center;
}

.mhDatatable .mhEditableCell .webix_cell {
    background: white;
    border: 1px solid grey;
    border-radius: 2px;
}

.mhDatatable.webix_dtable .webix_ss_body .webix_column.mhEditableCell > div {
    border: 1px solid #80808036;
}

.mhDatatable.webix_dtable .webix_ss_header td.webix_last_row {
    border-bottom: 1px solid rgba(38, 157, 255, 0.795);
}


.mhInfoIcon .webix_icon_button .webix_icon {
    font-size: 30px;
    height: 30px;
    width: 30px;
    color: rgba(38, 157, 255, 0.795);
}

.mhContentToolbar {
    background: transparent;
}

.mhContentToolbar .mhAccentBtn .webix_button {
    font-size: 17px;
}

.mhContentToolbar .mhAccentBtn .webix_button .webix_icon_btn {
    font-size: 22px;
    color: white;
}

.mhZeroPadding .webix_template {
    padding: 0px !important;
}
/* mh -------------- end-- ----*/
.scPythonEditorResults .error {
    color: red;
    width: auto; 
    font-family: monospace, monospace;
}

.scPythonEditorState .error {
    color: red;
    font-weight: 500;
    font-size: larger;
}
.scPythonEditorState .processing {
    color: darkgrey;
    font-weight: 500;
}
.scPythonEditorState .loading {
    color: red;
    font-weight: 500;
}
.scPythonEditorState .ready {
    color: green;
    font-weight: 500;
}
.lowHeightControl.webix_view.webix_control span.webix_input_icon
{
    line-height: 14px;
    padding-left: 0px;
    width: 20px;
}
.webix_view.webix_fieldset.scFieldsetBorderless>fieldset{
    border: none;
}
.webix_view.webix_fieldset.scFieldsetTopLine>fieldset {
    border: none;
    border-top: 1px solid var(--accent-color);
}
.webix_view.webix_fieldset.scFieldsetBottomLine>fieldset{
    border: none;
    border-bottom: 1px solid var(--accent-color);
}
.webix_view.webix_fieldset.scFieldsetTopBottomLine>fieldset{
    border: none;
    border-top: 1px solid var(--accent-color);
    border-bottom: 1px solid var(--accent-color);
}
.webix_view.webix_fieldset.scFieldsetFullBorder>fieldset {
    border: 1px solid var(--accent-color);
}
.webix_view.webix_fieldset.scFieldsetTopLine .webix_fieldset_label,
.webix_view.webix_fieldset.scFieldsetBottomLine .webix_fieldset_label,
.webix_view.webix_fieldset.scFieldsetTopBottomLine .webix_fieldset_label,
.webix_view.webix_fieldset.scFieldsetFullBorder .webix_fieldset_label,
.webix_view.webix_fieldset.scFieldsetBorderless .webix_fieldset_label {
    padding: 0 2px;
    text-transform: none;    
}



/* -- scfieldset: collapsible variant --- */
/* Left-align the legend with form labels above the fieldset by stripping
   the fieldset's default left padding. Border stays intact on right/top/
   bottom; the body views inside also start at x=0 so inner form rows
   align with outer form rows. */
.sc-fieldset-collapsible > fieldset {
	padding-left: 0 !important;
}

/* Legend becomes clickable: label on the left, right-side controls (the
   ellipsis hint + chevron) grouped on the right via flex. */
.sc-fieldset-legend-collapsible {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	cursor: pointer;
	user-select: none;
	padding-left: 0 !important;
}
.sc-fieldset-legend-right {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}
.sc-fieldset-chevron {
	font-size: 10px;
	color: var(--dark-color);
	margin-left: 8px;
	flex-shrink: 0;
	transition: color 0.15s ease;
}
.sc-fieldset-legend-collapsible:hover .sc-fieldset-chevron,
.sc-fieldset-legend-collapsible:hover .sc-fieldset-ellipsis {
	color: var(--accent-dark);
}

/* Ellipsis hint — only shown when the section is collapsed, signals
   that Advanced has hidden content inside. */
.sc-fieldset-ellipsis {
	display: none;
	color: var(--neutral-color);
	letter-spacing: 2px;
	font-size: 14px;
	line-height: 1;
	padding: 0 2px;
	transition: color 0.15s ease;
}
.sc-fieldset-collapsed .sc-fieldset-ellipsis {
	display: inline-block;
}

/* Hide every child of the inner <fieldset> except the <legend>. Webix
   renders the body views after the legend, so this cleanly collapses. */
.sc-fieldset-collapsed > fieldset > *:not(legend) {
	display: none !important;
}
.sc-fieldset-collapsed > fieldset {
	padding-bottom: 0 !important;
}

.webix_resizer.scResizer {
    background-color: #f4f5f9;
}
.webix_el_sctoggle.scToggle button{
    height: 100%;
}

.webix_el_sctoggle .webix_button.webix_img_btn .webix_icon_btn.far {
    vertical-align: middle;
}
.webix_view .webix_progress_icon .webix_progress_state {
    color: #333;
}
.webix_view .webix_progress_icon {
    background: lightgrey;
    opacity: 0.4;
}
.webix_inp_static div,
.wxi-menu-down span {
    background-color: transparent !important;
    border-color: transparent !important;
}

.webix_inp_static:hover {
    background-color: transparent !important;
    cursor: pointer !important;
}
.webix_view .webix_view.webix_form.webix_layout_form.formShadow {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.noShadow.webix_sidebar.webix_sidebar_left .webix_tree_item.webix_selected,
.noShadow.webix_sidebar.webix_sidebar_left .webix_tree_item.webix_sidebar_selected, 
.noShadow.webix_sidebar.webix_sidebar_left .webix_tree_item.webix_sidebar_selected + .webix_tree_leaves .webix_tree_item {
    box-shadow: none;
}
.rotateXLabels90 .webix_canvas_text.webix_axis_item_x{
    transform: rotate(-90deg);
    margin: 30px 0px 0 0;
}
.range>div:not(.webix_chart_resizer):not(.webix_chart_resizer){
    z-index:80 !important;
}
.toolbar_button_wizard_finish button {
	box-shadow: 0px 0px 0px 0px var(--accent-dark);
	background-color: var(--light-color);
	border-radius: var(--sc-radius-sm);
	border: 1px solid var(--accent-dark);
	display:inline-block;
	cursor:pointer;
	color: var(--light-color);
	font-family:Arial;
	font-size:16px;
	text-decoration:none;
	text-shadow: none;
}

.toolbar_button_wizard_finish button {
    color: var(--accent-dark) !important;
}

.toolbar_button_wizard_finish button:hover {
    background-color: var(--accent-dark) !important;
    color: var(--light-color) !important;
}

.toolbar_button_wizard_finish button:after {
    content: "\f560";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    font-size: 16px;
    padding-left: 5px;
}


.toolbar_button_wizard_finish button:active {
	position:relative;
	top:1px;
}


.toolbar_button_wizard_next button {
	box-shadow: 0px 0px 0px 0px var(--accent-dark);
	background-color: var(--light-color);
	border-radius: var(--sc-radius-sm);
	border: 1px solid var(--accent-dark);
	display:inline-block;
	cursor:pointer;
	color: var(--light-color);
	font-family:Arial;
	font-size:16px;
	text-decoration:none;
	text-shadow: none;
}

.toolbar_button_wizard_next button {
    color: var(--accent-dark) !important;
}

.toolbar_button_wizard_next button:hover {
    background-color: var(--accent-dark) !important;
    color: var(--light-color) !important;
}

.toolbar_button_wizard_next button:after {
    content: "\f356";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    font-size: 16px;
    padding-left: 5px;
}


.toolbar_button_wizard_next button:active {
	position:relative;
	top:1px;
}


.toolbar_button_wizard_back button {
	box-shadow: 0px 0px 0px 0px var(--accent-dark);
	background-color: var(--light-color);
	border-radius: var(--sc-radius-sm);
	border: 1px solid var(--accent-dark);
	display:inline-block;
	cursor:pointer;
	color: var(--light-color);
	font-family:Arial;
	font-size:16px;
	/*padding:5px 25px;*/
	text-decoration:none;
	text-shadow: none;
}

.toolbar_button_wizard_back button {
    color: var(--accent-dark) !important;
}

.toolbar_button_wizard_back button:hover {
    background-color: var(--accent-dark) !important;
    color: var(--light-color) !important;
}

.toolbar_button_wizard_back button:before {
    content: "\f355";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    font-size: 16px;
    padding-right: 5px;
}


.toolbar_button_wizard_back button:active {
	position:relative;
	top:1px;
}


.toolbar_button_wizard_cancel button {
	box-shadow: 0px 0px 0px 0px var(--danger-color);
	background-color: var(--light-color);
	border-radius: var(--sc-radius-sm);
	border: 1px solid var(--danger-color);
	display:inline-block;
	cursor:pointer;
	color: var(--light-color);
	font-family:Arial;
	font-size:16px;
	/*padding:5px 25px;*/
	text-decoration:none;
	text-shadow: none;
}

.toolbar_button_wizard_cancel button {
    color: var(--danger-color) !important;
}

.toolbar_button_wizard_cancel button:hover {
    background-color: var(--danger-color) !important;
    color: var(--light-color) !important;
}

.toolbar_button_wizard_cancel button:before {
    content: "\f05e";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    font-size: 16px;
    padding-right: 5px;
}


.toolbar_button_wizard_cancel button:active {
	position:relative;
	top:1px;
}


.scReadOnly .monaco-editor .monaco-editor-background,
.scReadOnly .monaco-editor .margin,
.scReadOnly .monaco-editor .minimap-decorations-layer {
    background-color: #adadad14;
}

.scHover {
    background-color:lightgrey;
}
/* auth pages */
.authMavenTextCenter {
    text-align: center;
}
.authMavenPage {
    position: relative;
    background: linear-gradient(to left, #51ccbe, #3945c4);
}
.authMavenPage::before {
    content: '';
    width: 100%;
    position: absolute;
    height: 1500px;
    bottom: -40%;
    left: 0;
    background: url(/content/static/sc/img/sc_bg.png) bottom center no-repeat;
}
.authMavenAccentButton.webix_el_button button,
.authMavenAccentButton.webix_el_toggle button {
    background: darkblue;
    color: white;
    text-transform: uppercase;
    font-size: 18px;
}
.authMavenAccentButton.webix_el_button.webix_secondary button:focus,
.authMavenAccentButton.webix_el_button.webix_secondary button:hover, 
.authMavenAccentButton.webix_el_toggle.webix_secondary button:focus, 
.authMavenAccentButton.webix_el_toggle.webix_secondary button:hover {
    background-color: darkblue;
}
.authMavenLink {
    color: darkblue;
    cursor: pointer;
    font-size: 16px;
    text-decoration: underline;
}
.authMavenHeader {
    cursor: pointer; 
}
.authMavenHeaderContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 15px;

}
.authMavenHeaderContainer img {
    height: 60px;
}
.authMavenHeaderText {
    font-size: 18px;
    font-weight: 500;
    color: #848282;
    padding-top: 7px;
}
.authMavenTextContainer{
    font-size: 14px;
    color:#848282;
    line-height: initial;
} 
/* auth pages */
.transparent.webix_view.webix_toolbar {
    background-color: transparent;
}

.centered-button-icon .webix_icon_btn {
    font-size: initial;
}
.toolbar_button_copy button {
    text-transform: uppercase;
}

.toolbar_button_copy button {
    color: var(--neutral-color) !important;
}

.toolbar_button_copy button:hover {
    background-color: var(--neutral-color) !important;
    color: var(--light-color) !important;
}

.toolbar_button_copy button:before {
    content: "\f0c5";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    font-size: 16px;
    padding-right: 5px;
}
.djs-direct-editing-parent .djs-direct-editing-content {
    text-align: center !important;
}
.webix_disabled_view {
    opacity: 0.6!important;
}
.mermaidClassDiagram .nodeLabel {
	font-size: 15px !important;
}

.mermaidClassDiagram .node {
    cursor: pointer !important;
}
/*
.mermaidClassDiagram.webix_view {
    display: flex;
    justify-content: center;
    align-items: center;
}*/

.mermaidClassDiagram .currentClass.node rect,
.mermaidClassDiagram .currentClass.node path,
.mermaidClassDiagram .currentClass.node circle,
.mermaidClassDiagram .currentClass.node ellipse,
.mermaidClassDiagram .currentClass.node polygon {
    fill: rgba(83, 253, 188, 0.664) !important;
    stroke-width: 1px !important;
}

.mermaidClassDiagram .level_m1.node rect,
.mermaidClassDiagram .level_m1.node path,
.mermaidClassDiagram .level_m1.node circle,
.mermaidClassDiagram .level_m1.node ellipse,
.mermaidClassDiagram .level_m1.node polygon {
    fill: lightgrey !important;
    stroke-width: 1px !important;
}


.mermaidClassDiagram .level_1.node rect,
.mermaidClassDiagram .level_1.node path,
.mermaidClassDiagram .level_1.node circle,
.mermaidClassDiagram .level_1.node ellipse,
.mermaidClassDiagram .level_1.node polygon {
    fill: rgba(83, 213, 253, 0.664) !important;
    stroke-width: 1px !important;
}

.mermaidClassDiagram .level_2.node rect,
.mermaidClassDiagram .level_2.node path,
.mermaidClassDiagram .level_2.node circle,
.mermaidClassDiagram .level_2.node ellipse,
.mermaidClassDiagram .level_2.node polygon {
    fill: rgba(148, 83, 253, 0.363) !important;
    stroke-width: 1px !important;
}

.mermaidClassDiagram .level_3.node rect,
.mermaidClassDiagram .level_3.node path,
.mermaidClassDiagram .level_3.node circle,
.mermaidClassDiagram .level_3.node ellipse,
.mermaidClassDiagram .level_3.node polygon {
    fill: rgba(213, 255, 25, 0.363) !important;
    stroke-width: 1px !important;
}
.mermaidClassDiagram .level_4.node rect,
.mermaidClassDiagram .level_4.node path,
.mermaidClassDiagram .level_4.node circle,
.mermaidClassDiagram .level_4.node ellipse,
.mermaidClassDiagram .level_4.node polygon {
    fill: rgba(131, 253, 83, 0.363) !important;
    stroke-width: 1px !important;
}
.mermaidClassDiagram .level_5.node rect,
.mermaidClassDiagram .level_5.node path,
.mermaidClassDiagram .level_5.node circle,
.mermaidClassDiagram .level_5.node ellipse,
.mermaidClassDiagram .level_5.node polygon {
    fill: rgba(253, 185, 83, 0.363) !important;
    stroke-width: 1px !important;
}
/*
.mermaidClassDiagram .node line.divider:nth-child(3) {
	display: none;
}
*/


.toolbar_button_edit button {
    text-transform: uppercase;
}

.toolbar_button_edit button {
    color: var(--accent-dark) !important;
}

.toolbar_button_edit button:hover {
    background-color: var(--accent-dark) !important;
    color: var(--light-color) !important;
}

.toolbar_button_edit button:before {
    content: "\f304";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    font-size: 16px;
    padding-right: 5px;
}
.trumbowyg .trumbowyg-editor {
    padding-top: 0;
    padding-bottom: 0;
}
/* .accent_button button {
    text-transform: uppercase;
} */

.accent_button button {
    background-color: var(--accent-dark) !important;
    color: var(--light-color) !important;
    
}

.accent_button button:hover {
    background-color: var(--accent-color) !important;
    color: var(--dark-color) !important;
}

.accent_button button .webix_icon_btn {
    color: inherit !important;
}
.display_none {
    display: none !important;
}
.toolbar_button_export button {
    text-transform: uppercase;
}

.toolbar_button_export button {
    color: var(--accent-dark) !important;
}

.toolbar_button_export button:hover {
    background-color: var(--accent-dark) !important;
    color: var(--light-color) !important;
}

.toolbar_button_export button:before {
    content: "\f56e";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    font-size: 16px;
    padding-right: 5px;
}
.webix_view.webix_control.input_background_transparent input{
    background: transparent !important;
}
.red_control.webix_view.webix_control.webix_el_text input{
	color: red !important;
}

.red_control.webix_view.webix_control.webix_el_scswitch .webix_switch_box {
	background-color: red !important;
}
.green_control.webix_view.webix_control.webix_el_text input{
	color: green !important;
}

.green_control.webix_view.webix_control.webix_el_scswitch .webix_switch_box {
	background-color: green !important;
}
.webix_view.clean_template .webix_template {
    padding: 0px !important;
}
.webix_toolbar.MainHeader_Link {
	background-color: rgb(0, 0, 110);
}

.webix_control [aria-readonly="true"],
.webix_control [aria-readonly] {
  cursor: default !important;
}
.editor_label.webix_required .webix_el_box:after {
    color: var(--danger-color);
    content: "*";
    padding-left: 4px;
}

.webix_invalid .lines-content.monaco-editor-background,
.webix_invalid .margin-view-overlays,
.webix_invalid .minimap-decorations-layer
{
    background-color: var(--danger-bg);
    border-color: var(--danger-color);
    color: var(--dark-color);
}
.toolbar_button_ai button {
    text-transform: uppercase;
}

.toolbar_button_ai button {
    color: rgba(190, 190, 5, 0.582) !important;
    opacity: 80%;
}

.toolbar_button_ai button:hover {
    background-color: rgba(190, 190, 5, 0.582) !important;
    color: gray !important;
}

.toolbar_button_ai button:before {
    content: "\f544";
    font-family: 'Font Awesome 5 Pro';
    font-weight: 400;
    font-size: 16px;
    padding-right: 5px;
}
/* covers the whole viewport with semi-transparent black */
.highlight-control-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 9997;
}

.highlight-control-overlay-region {
  background: rgba(0,0,0,0.5);
}

/* slider-read-only */
.slider-read-only,
.slider-read-only .webix_slider_box,
.slider-read-only .webix_slider_handle,
.slider-read-only .webix_slider_left,
.slider-read-only .webix_slider_right{ pointer-events:none !important; }
.slider-read-only,
.slider-read-only .webix_slider_handle{ cursor:default !important; }

/* -- sctreetable cross-reference overlay (enabled via `renderReferences:true`).
   SVG element sits absolutely over the treetable body; ribbons / dots /
   arrows are drawn as filled polygons & circles. Colors come from inline
   fill/stroke attributes, derived deterministically from (sourceId, targetId).
   ----------------------------------------------------------------------- */
.crossref-overlay {
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: none;
	overflow: visible;
	z-index: 5;
}
.crossref-link-shape   { pointer-events: none; }
.crossref-link-hit {
	fill: none;
	stroke: transparent;
	stroke-width: 14;
	pointer-events: stroke;
	cursor: pointer;
}
.crossref-arrow        { pointer-events: none; }

.crossref-ctx-menu {
	position: fixed;
	z-index: 99999;
	background: var(--bg-primary);
	border: 1px solid var(--border-color);
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18);
	padding: 4px 0;
	font-size: 13px;
	font-family: sans-serif, Tahoma, Arial;
	min-width: 180px;
}
.crossref-ctx-menu-item {
	padding: 6px 14px;
	cursor: pointer;
	user-select: none;
	color: var(--text-primary);
}
.crossref-ctx-menu-item:hover {
	background: var(--bg-secondary);
}
/* multiComboFilter / richSelectFilter popup footer (Select all / Unselect all) */
.common_footer_action        { cursor: pointer; }
.common_footer_action:hover  { text-decoration: underline; }
/* dialog_action_first: the action of a confirmation first, Cancel last */
.webix_modal_box .webix_popup_controls {
    display: flex;
    justify-content: center;
}
.webix_modal_box .webix_popup_controls .webix_popup_button.confirm {
    order: -1;
}
/* uppercase_button: a button's label in upper case, nothing else */
.uppercase_button button {
    text-transform: uppercase;
}
/* via_main_page_header: grey background of a page header toolbar */
.webix_toolbar.via_main_page_header {
    background-color: var(--main-header-bg);
}
/* platform_variables: the platform's colours (SoftCreator green, light and dark) and its shape scale;
   every other rule reads these; a product overrides them in its own row */
:root {
    --primary-color: #6fd42f;
    --secondary-color: #4caf50;
    --accent-color: #bcffb4;
    --accent-light: #dcf5dc;
    --accent-dark: #008807;
    --light-color: #f5fff2;
    --dark-color: #2c3e2e;
    --accent-hover: #eaf5ea;
    --accent-active: #a5d6a7;
    --accordion-hover-bg: #e8f5e9;
    --accordion-hover-text: var(--dark-color);
    --accordion-expanded-bg: var(--accent-color);
    --accordion-expanded-text: var(--dark-color);
    --nav-bg: var(--light-color);
    --nav-text: var(--dark-color);
    --nav-selected-bg: var(--accent-light);
    --nav-selected-text: var(--dark-color);
    --nav-hover-bg: #e8f5e9;
    --nav-hover-text: var(--dark-color);
    --nav-disabled-bg: #f0f0f0;
    --nav-disabled-text: #999999;
    --content-bg: var(--light-color);
    --content-text: var(--dark-color);
    --content-selected-bg: var(--accent-light);
    --content-selected-text: var(--dark-color);
    --content-hover-bg: #e8f5e9;
    --content-hover-text: var(--dark-color);
    --content-header-bg: var(--secondary-color);
    --content-header-text: var(--light-color);
    --header-bg: var(--accent-light);
    --header-text: var(--dark-color);
    --header-hover-bg: var(--accent-color);
    --header-hover-text: var(--dark-color);
    --header-active-bg: var(--accent-dark);
    --header-active-text: var(--dark-color);
    --control-bg: var(--light-color);
    --control-text: var(--dark-color);
    --control-border: var(--accent-color);
    --control-hover-bg: #e8f5e9;
    --control-hover-text: var(--dark-color);
    --control-active-bg: var(--accent-color);
    --control-active-text: var(--dark-color);
    --control-focus-border: var(--accent-dark);
    --overlay-bg: rgba(44, 62, 46, 0.1);
    --overlay-text: var(--dark-color);
    --modal-bg: rgba(44, 62, 46, 0.7);
    --modal-text: var(--light-color);
    --loading-bg: rgba(44, 62, 46, 0.1);
    --loading-text: var(--dark-color);
    --message-info-bg: var(--info-color);
    --message-info-text: white;
    --message-success-bg: var(--success-color);
    --message-success-text: var(--dark-color);
    --message-warning-bg: var(--warning-color);
    --message-warning-text: var(--dark-color);
    --message-error-bg: var(--error-color);
    --message-error-text: white;
    --state-selected-bg: var(--accent-light);
    --state-selected-text: var(--dark-color);
    --state-hover-bg: var(--accent-hover);
    --state-hover-text: var(--dark-color);
    --state-active-bg: var(--accent-color);
    --state-active-text: var(--dark-color);
    --state-disabled-bg: #f0f0f0;
    --state-disabled-text: #999999;
    --tooltip-bg: var(--accent-color);
    --tooltip-text: var(--dark-color);
    --tooltip-border: var(--dark-color);
    --form-bg: var(--light-color);
    --form-text: var(--dark-color);
    --form-border: var(--accent-color);
    --form-label-text: var(--dark-color);
    --form-placeholder-text: #d4e3d5;
    --table-header-bg: var(--accent-light);
    --table-header-text: var(--dark-color);
    --table-cell-bg: var(--light-color);
    --table-cell-text: var(--dark-color);
    --table-selected-bg: var(--accent-light);
    --table-selected-text: var(--dark-color);
    --table-hover-bg: var(--accent-hover);
    --table-hover-text: var(--dark-color);
    --table-border: var(--accent-color);
    --dark-mode-bg: #1a291c;
    --dark-mode-bg-area: #345038;
    --dark-mode-text: #f5fff2;
    --dark-mode-border: #324634;
    --dark-mode-hover: #2a3a2c;
    --dark-mode-active: #3a513d;
    --error-color: #ff5252;
    --warning-color: #ffc107;
    --success-color: #4caf50;
    --info-color: #2196f3;
    --sidebar-item-radius: 0 30px 30px 0;
    --sidebar-right-margin: 2px;
    --segment-bg: var(--light-color);
    --segment-text: var(--dark-color);
    --segment-border: var(--accent-color);
    --segment-hover-bg: var(--accent-hover);
    --segment-hover-text: var(--dark-color);
    --segment-active-bg: var(--accent-color);
    --segment-active-text: var(--dark-color);
    --segment-selected-bg: var(--secondary-color);
    --segment-selected-text: var(--light-color);
    --segment-selected-hover-bg: var(--accent-dark);
    --segment-selected-hover-text: var(--light-color);
    --segment-selected-active-bg: var(--accent-light);
    --segment-selected-active-text: var(--light-color);
    --tab-hover-highlight-bottom: #0eff0d;
    --tab-text-color: var(--secondary-color);
    --tab-hover-bg: var(--control-hover-bg);
    --tab-selected-color: var(--secondary-color);
    --tab-selected-shadow: var(--secondary-color);
    --tab-selected-hover-bg: var(--light-color);
    --tab-close-icon-color: var(--text-color);
    --scrollbar-track: var(--control-bg);
    --scrollbar-thumb: var(--control-border);
    --scrollbar-thumb-hover: var(--control-hover-bg);
    --selection-bg: var(--state-selected-bg);
    --selection-text: var(--state-selected-text);
    --border-color: var(--control-border);
    --text-color: var(--content-text);
    --toolbar-button-cancel-bg: var(--state-disabled-bg);
    --sc-radius-sm: 4px;
    --sc-radius-md: 6px;
    --sc-radius-lg: 8px;
    --sc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --sc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
    --sc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
    --sc-transition: 0.2s ease;
    --main-header-bg: #737373;
    --main-header-text: #ffffff;
    --logo-color: #8cc540;
    --danger-color: #d32f2f;
    --danger-bg: #fdecea;
    --warning-bg: #fff8e1;
    --neutral-color: #737373;
    --sc-shadow-pressed: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    --sc-color-scheme: light;
    --accent-darker: #006b05;
    --text-on-light: #2c3e2e;
}
@media (prefers-color-scheme: dark) {
    :root {
        --nav-bg: var(--dark-mode-bg);
        --nav-text: var(--dark-mode-text);
        --content-bg: var(--dark-mode-bg);
        --content-text: var(--dark-mode-text);
        --control-bg: var(--dark-mode-bg);
        --control-text: var(--dark-mode-text);
        --state-hover-bg: var(--dark-mode-hover);
        --state-hover-text: var(--dark-mode-text);
        --state-active-bg: var(--dark-mode-active);
        --state-active-text: var(--dark-mode-text);
        --state-selected-bg: var(--dark-mode-hover);
        --state-selected-text: var(--dark-mode-text);
        --state-disabled-text: #888888;
        --tooltip-bg: var(--dark-mode-bg);
        --tooltip-text: var(--dark-mode-text);
        --tooltip-border: var(--dark-mode-border);
        --form-bg: var(--dark-mode-bg);
        --form-text: var(--dark-mode-text);
        --form-border: var(--dark-mode-border);
        --form-label-text: var(--dark-mode-text);
        --table-cell-bg: var(--dark-mode-bg);
        --table-cell-text: var(--dark-mode-text);
        --table-border: var(--dark-mode-border);
        --header-bg: var(--dark-mode-hover);
        --header-text: var(--dark-mode-text);
        --header-hover-bg: var(--dark-mode-active);
        --header-hover-text: var(--dark-mode-text);
        --header-active-bg: var(--dark-mode-active);
        --header-active-text: var(--dark-mode-text);
        --table-header-bg: var(--dark-mode-hover);
        --table-header-text: var(--dark-mode-text);
        --table-selected-bg: var(--dark-mode-hover);
        --table-selected-text: var(--dark-mode-text);
        --table-hover-bg: var(--dark-mode-active);
        --table-hover-text: var(--dark-mode-text);
        --nav-selected-bg: var(--dark-mode-hover);
        --nav-selected-text: var(--dark-mode-text);
        --nav-hover-bg: var(--dark-mode-active);
        --nav-hover-text: var(--dark-mode-text);
        --nav-disabled-bg: #2a2a2a;
        --nav-disabled-text: #888888;
        --content-selected-bg: var(--dark-mode-hover);
        --content-selected-text: var(--dark-mode-text);
        --content-hover-bg: var(--dark-mode-active);
        --content-hover-text: var(--dark-mode-text);
        --content-header-bg: var(--secondary-color);
        --content-header-text: var(--light-color);
        --control-border: var(--dark-mode-border);
        --control-hover-bg: var(--dark-mode-hover);
        --control-hover-text: var(--dark-mode-text);
        --control-active-bg: var(--dark-mode-active);
        --control-active-text: var(--dark-mode-text);
        --overlay-bg: rgba(245, 255, 242, 0.1);
        --overlay-text: var(--dark-mode-text);
        --modal-bg: rgba(245, 255, 242, 0.7);
        --modal-text: var(--dark-mode-bg);
        --loading-bg: rgba(245, 255, 242, 0.1);
        --loading-text: var(--dark-mode-text);
        --accordion-hover-bg: var(--dark-mode-hover);
        --accordion-hover-text: var(--dark-mode-text);
        --accordion-expanded-bg: var(--dark-mode-active);
        --accordion-expanded-text: var(--dark-mode-text);
        --message-info-bg: var(--info-color);
        --message-info-text: var(--dark-mode-bg);
        --message-success-bg: var(--success-color);
        --message-success-text: var(--dark-mode-bg);
        --message-warning-bg: var(--warning-color);
        --message-warning-text: var(--dark-mode-bg);
        --message-error-bg: var(--error-color);
        --message-error-text: var(--dark-mode-bg);
        --tab-hover-highlight-bottom: var(--primary-color);
        --tab-text-color: var(--primary-color);
        --tab-hover-bg: var(--dark-mode-hover);
        --tab-selected-color: var(--primary-color);
        --tab-selected-shadow: var(--primary-color);
        --tab-selected-hover-bg: var(--dark-mode-active);
        --tab-close-icon-color: var(--dark-mode-text);
        --scrollbar-track: var(--dark-mode-bg);
        --scrollbar-thumb: var(--dark-mode-border);
        --scrollbar-thumb-hover: var(--dark-mode-hover);
        --selection-bg: var(--dark-mode-hover);
        --selection-text: var(--dark-mode-text);
        --placeholder-color: rgba(245, 255, 242, 0.5);
        --border-color: var(--dark-mode-border);
        --text-color: var(--dark-mode-text);
        --segment-bg: var(--dark-mode-bg);
        --segment-text: var(--dark-mode-text);
        --segment-border: var(--dark-mode-border);
        --segment-hover-bg: var(--dark-mode-hover);
        --segment-hover-text: var(--dark-mode-text);
        --segment-active-bg: var(--dark-mode-active);
        --segment-active-text: var(--dark-mode-text);
        --segment-selected-bg: var(--secondary-color);
        --segment-selected-text: var(--light-color);
        --segment-selected-hover-bg: var(--accent-dark);
        --segment-selected-hover-text: var(--light-color);
        --segment-selected-active-bg: var(--accent-dark);
        --segment-selected-active-text: var(--light-color);
        --sc-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
        --sc-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
        --sc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
        --sc-shadow-pressed: inset 0 2px 4px rgba(0, 0, 0, 0.5);
        --sc-color-scheme: dark;
        --light-color: #1a291c;
        --dark-color: #f5fff2;
        --accent-dark: #6fd42f;
        --accent-darker: #8fe35a;
        --accent-light: #2a3a2c;
        --accent-color: #3a513d;
        --accent-hover: #233325;
        --accent-active: #4d6b51;
        --neutral-color: #b3bdb4;
        --danger-color: #ff7b6e;
        --danger-bg: #3b2220;
        --warning-bg: #3a3420;
        --state-disabled-bg: #263127;
        --form-placeholder-text: #3a4e3c;
        --control-focus-border: #6fd42f;
        --surface-gutter: #111b12;
        --surface-raised: #223024;
        --border-dark: #324634;
    }
}
/* tooltip: every Webix tooltip in the platform colours, rounded, with a shadow and an arrow towards the pointer */
.webix_tooltip {
    background-color: var(--tooltip-bg);
    color: var(--tooltip-text);
    border: 1px solid var(--tooltip-border);
    border-radius: var(--sc-radius-lg);
    box-shadow: var(--sc-shadow-md);
    padding: 6px 10px;
    margin-left: 10px;
    max-width: min(600px, 60vw);
    width: fit-content;
    animation: sc-tooltip-pop var(--sc-transition);
}
.webix_tooltip:before {
    content: "";
    position: absolute;
    top: 6px;
    left: -9px;
    border-width: 5px 9px 5px 0;
    border-style: solid;
    border-color: transparent var(--tooltip-border) transparent transparent;
}
.webix_tooltip:after {
    content: "";
    position: absolute;
    top: 7px;
    left: -7px;
    border-width: 4px 8px 4px 0;
    border-style: solid;
    border-color: transparent var(--tooltip-bg) transparent transparent;
}
@keyframes sc-tooltip-pop {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.webix_tooltip.sc_tooltip_left {
    margin-left: -10px;
}
.webix_tooltip.sc_tooltip_left:before {
    left: auto;
    right: -9px;
    border-width: 5px 0 5px 9px;
    border-color: transparent transparent transparent var(--tooltip-border);
}
.webix_tooltip.sc_tooltip_left:after {
    left: auto;
    right: -7px;
    border-width: 4px 0 4px 8px;
    border-color: transparent transparent transparent var(--tooltip-bg);
}
.webix_tooltip.sc_tooltip_above:before {
    top: auto;
    bottom: 6px;
}
.webix_tooltip.sc_tooltip_above:after {
    top: auto;
    bottom: 7px;
}
/* grid_states: selected grid rows and cells in the platform colours, stronger while the grid has the focus; light values until the dark page */
.webix_column > div.webix_cell_select,
.webix_column > div.webix_column_select,
.webix_column > div.webix_row_select {
    background: var(--accent-light);
    color: var(--dark-color);
}
.webix_dtable_focused .webix_column > div.webix_column_select,
.webix_dtable_focused .webix_column > div.webix_row_select,
.webix_column > div.webix_cell_select:focus,
.webix_column > div.webix_column_select:focus,
.webix_column > div.webix_row_select:focus {
    background: var(--accent-color);
    color: var(--dark-color);
}
.webix_dtable .webix_select_mark > div.webix_row_select {
    box-shadow: inset 2px 0 var(--secondary-color);
}
.webix_table_row_hover {
    background-color: var(--accent-hover) !important;
    color: var(--dark-color) !important;
}
/* focus_ring: one thin focus frame in the platform colour on every control; buttons, switches, checkboxes, segments, tabs and list items show it only when reached by the keyboard */
.webix_view.webix_control input:focus:not(.webix_multicombo_input),
.webix_view.webix_control textarea:focus,
.webix_view.webix_control .webix_inp_static:focus,
.webix_focused .webix_inp_static,
.webix_view .webix_dt_editor input,
.webix_view .webix_dt_editor select,
.webix_dtable .webix_ss_filter input:focus,
.webix_dtable .webix_ss_filter select:focus {
    border-color: var(--control-focus-border);
    box-shadow: none;
}
.webix_switch_handle:focus {
    box-shadow: none;
}
.webix_el_button button:focus-visible,
.webix_el_toggle button:focus-visible,
.webix_el_icon button:focus-visible,
.webix_icon_button:focus-visible,
.webix_custom_checkbox:focus-visible,
.webix_custom_radio:focus-visible,
.webix_segment_0:focus-visible,
.webix_segment_1:focus-visible,
.webix_segment_N:focus-visible,
.webix_switch_handle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 1px var(--control-focus-border);
}
.webix_item_tab:focus-visible,
.webix_list_item:focus-visible,
.webix_tree_item:focus-visible,
.webix_view .monaco-editor.focused {
    outline: 1px solid var(--control-focus-border);
    outline-offset: -1px;
}
/* button_states: the platform's toolbar, accent and wizard buttons - one radius, a light resting background, a smooth change, a pressed shadow */
.webix_el_button[class*="toolbar_button_"] .webix_button,
.webix_el_button.accent_button .webix_button {
    border-radius: var(--sc-radius-sm);
    transition: background-color var(--sc-transition), color var(--sc-transition), box-shadow var(--sc-transition);
}
.webix_el_button[class*="toolbar_button_"] .webix_button {
    background-color: var(--light-color);
}
.webix_el_button[class*="toolbar_button_"] .webix_button:active,
.webix_el_button.accent_button .webix_button:active {
    box-shadow: var(--sc-shadow-pressed);
}
/* dialog_buttons: in a confirmation the action is filled with the platform colour, Cancel is outlined */
.webix_modal_box .webix_popup_button {
    background-color: var(--light-color);
    border: 1px solid var(--neutral-color);
    border-radius: var(--sc-radius-sm);
    transition: background-color var(--sc-transition), box-shadow var(--sc-transition);
}
.webix_modal_box .webix_popup_button,
.webix_modal_box .webix_popup_button div {
    color: var(--neutral-color);
}
.webix_modal_box .webix_popup_button:hover {
    background-color: var(--accent-hover);
}
.webix_modal_box .webix_popup_button.confirm {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
}
.webix_modal_box .webix_popup_button.confirm,
.webix_modal_box .webix_popup_button.confirm div {
    color: var(--light-color);
}
.webix_modal_box .webix_popup_button.confirm:hover {
    box-shadow: var(--sc-shadow-sm);
}
.webix_modal_box .webix_popup_button:active {
    box-shadow: var(--sc-shadow-pressed);
}
.webix_alert .webix_popup_text,
.webix_alert .webix_popup_title,
.webix_confirm .webix_popup_text,
.webix_confirm .webix_popup_title {
    box-shadow: inset 0 4px var(--secondary-color);
}
/* field_states: a disabled field reads on a grey background; an invalid field is framed in red, its text stays dark */
.webix_view.webix_control .webix_disabled_box input,
.webix_view.webix_control .webix_disabled_box textarea,
.webix_view.webix_control .webix_disabled_box .webix_inp_static {
    background-color: var(--state-disabled-bg);
    color: var(--dark-color);
}
.webix_invalid .webix_el_box input,
.webix_invalid .webix_el_box textarea,
.webix_invalid .webix_inp_static {
    background-color: var(--danger-bg);
    border-color: var(--danger-color);
    color: var(--dark-color);
}
.webix_invalid .webix_inp_label,
.webix_invalid .webix_inp_top_label,
.webix_invalid .webix_inp_bottom_label {
    color: var(--danger-color);
}
/* fieldset_frame: every form section's frame and title in the platform colours */
.webix_view.webix_fieldset > fieldset {
    border-color: var(--accent-color);
}
.webix_view.webix_fieldset .webix_fieldset_label {
    color: var(--dark-color);
    font-weight: 500;
}
/* scrollbars: thin scroll bars in the platform colours */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
    background: var(--light-color);
}
::-webkit-scrollbar-thumb {
    background: var(--accent-active);
    border: 2px solid var(--light-color);
    border-radius: var(--sc-radius-sm);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}
@supports (-moz-appearance: none) {
    * {
        scrollbar-color: var(--accent-active) var(--light-color);
        scrollbar-width: thin;
    }
}
/* messages: webix.message boxes in the platform colours, rounded, with a shadow; one colour per type */
.webix_message {
    background-color: var(--light-color);
    border-color: var(--accent-color);
    border-radius: var(--sc-radius-lg);
    box-shadow: var(--sc-shadow-md);
    color: var(--dark-color);
}
.webix_message.webix_success {
    background-color: var(--accent-light);
    border-color: var(--secondary-color);
    color: var(--dark-color);
}
.webix_message.webix_success div {
    background: transparent;
}
.webix_message.webix_error {
    background-color: var(--danger-bg);
    border-color: var(--danger-color);
    color: var(--dark-color);
}
.webix_message.webix_debug,
.webix_message.webix_warning {
    background-color: var(--warning-bg);
    border-color: var(--warning-color);
    color: var(--dark-color);
}
/* skin_palette: the Webix skin's teal replaced by the platform colours (generated by work/css_skin_palette.py from skins/mini.min.css) */
.webix_header.webix_dark .webix_selected.webix_segment_0, .webix_header.webix_dark .webix_selected.webix_segment_1, .webix_header.webix_dark .webix_selected.webix_segment_N {
    background: var(--accent-dark);
}
.webix_header.webix_dark .webix_selected.webix_segment_0:focus, .webix_header.webix_dark .webix_selected.webix_segment_0:hover, .webix_header.webix_dark .webix_selected.webix_segment_1:focus, .webix_header.webix_dark .webix_selected.webix_segment_1:hover, .webix_header.webix_dark .webix_selected.webix_segment_N:focus, .webix_header.webix_dark .webix_selected.webix_segment_N:hover {
    background-color: var(--accent-darker);
}
.webix_header.webix_dark .webix_selected.webix_segment_0:active, .webix_header.webix_dark .webix_selected.webix_segment_1:active, .webix_header.webix_dark .webix_selected.webix_segment_N:active {
    background-color: var(--accent-darker);
}
.webix_header.webix_dark .webix_control {
    border-color: var(--accent-dark);
}
.webix_accordionitem_header.webix_dark .webix_selected.webix_segment_0, .webix_accordionitem_header.webix_dark .webix_selected.webix_segment_1, .webix_accordionitem_header.webix_dark .webix_selected.webix_segment_N {
    background: var(--accent-dark);
}
.webix_accordionitem_header.webix_dark .webix_selected.webix_segment_0:focus, .webix_accordionitem_header.webix_dark .webix_selected.webix_segment_0:hover, .webix_accordionitem_header.webix_dark .webix_selected.webix_segment_1:focus, .webix_accordionitem_header.webix_dark .webix_selected.webix_segment_1:hover, .webix_accordionitem_header.webix_dark .webix_selected.webix_segment_N:focus, .webix_accordionitem_header.webix_dark .webix_selected.webix_segment_N:hover {
    background-color: var(--accent-darker);
}
.webix_accordionitem_header.webix_dark .webix_selected.webix_segment_0:active, .webix_accordionitem_header.webix_dark .webix_selected.webix_segment_1:active, .webix_accordionitem_header.webix_dark .webix_selected.webix_segment_N:active {
    background-color: var(--accent-darker);
}
.webix_accordionitem_header.webix_dark .webix_control {
    border-color: var(--accent-dark);
}
.webix_pager_item {
    color: var(--accent-dark);
}
.webix_pager_item_selected:focus, .webix_pager_item_selected:hover {
    background-color: var(--accent-darker);
}
.webix_pager_item_selected:active {
    background-color: var(--accent-darker);
}
.webix_chart_frame {
    background-color: var(--accent-active);
}
.webix_chart_resizer:focus {
    border-color: var(--accent-dark);
}
.webix_dd_over_column, .webix_sel_hcell {
    background-color: var(--accent-light);
}
.webix_dtable .webix_resize_handle_x .webix_handle_content, .webix_dtable .webix_resize_handle_y .webix_handle_content {
    background-color: var(--accent-dark);
}
.webix_resize_frame {
    background: var(--accent-dark);
    border: 1px solid var(--accent-darker);
}
.webix_cal_icon:hover, .webix_cal_month_name:hover, .webix_cal_time:hover {
    color: var(--accent-dark);
}
.webix_cal_icon:focus, .webix_cal_month_name:focus, .webix_cal_time:focus {
    color: var(--accent-dark);
}
.webix_cal_done {
    color: var(--accent-dark);
}
.webix_property_label_line.webix_dark .webix_selected.webix_segment_0, .webix_property_label_line.webix_dark .webix_selected.webix_segment_1, .webix_property_label_line.webix_dark .webix_selected.webix_segment_N {
    background: var(--accent-dark);
}
.webix_property_label_line.webix_dark .webix_selected.webix_segment_0:focus, .webix_property_label_line.webix_dark .webix_selected.webix_segment_0:hover, .webix_property_label_line.webix_dark .webix_selected.webix_segment_1:focus, .webix_property_label_line.webix_dark .webix_selected.webix_segment_1:hover, .webix_property_label_line.webix_dark .webix_selected.webix_segment_N:focus, .webix_property_label_line.webix_dark .webix_selected.webix_segment_N:hover {
    background-color: var(--accent-darker);
}
.webix_property_label_line.webix_dark .webix_selected.webix_segment_0:active, .webix_property_label_line.webix_dark .webix_selected.webix_segment_1:active, .webix_property_label_line.webix_dark .webix_selected.webix_segment_N:active {
    background-color: var(--accent-darker);
}
.webix_property_label_line.webix_dark .webix_control {
    border-color: var(--accent-dark);
}
.webix_comments_message a {
    color: var(--accent-dark);
}
.webix_comments_mention {
    color: var(--accent-dark);
}
.webix_comments_avatar_text {
    color: var(--accent-dark);
}
.webix_comments_more {
    color: var(--accent-dark);
}
.webix_popup_button {
    color: var(--accent-dark);
}
.webix_popup_button.confirm {
    background: var(--accent-dark);
}
.webix_popup_button.confirm:focus, .webix_popup_button.confirm:hover {
    background-color: var(--accent-darker);
}
.webix_popup_button.confirm:active {
    background-color: var(--accent-darker);
}
.webix_el_button.webix_secondary button, .webix_el_toggle.webix_secondary button {
    color: var(--accent-dark);
}
.webix_el_button.webix_secondary button .webix_icon, .webix_el_button.webix_secondary button .webix_icon_btn, .webix_el_button.webix_secondary button .webix_img_btn_text, .webix_el_toggle.webix_secondary button .webix_icon, .webix_el_toggle.webix_secondary button .webix_icon_btn, .webix_el_toggle.webix_secondary button .webix_img_btn_text {
    color: var(--accent-dark);
}
.webix_el_button.webix_primary button, .webix_el_toggle.webix_primary button {
    background: var(--accent-dark);
}
.webix_el_button.webix_primary button:focus, .webix_el_button.webix_primary button:hover, .webix_el_toggle.webix_primary button:focus, .webix_el_toggle.webix_primary button:hover {
    background-color: var(--accent-darker);
}
.webix_el_button.webix_primary button:active, .webix_el_toggle.webix_primary button:active {
    background-color: var(--accent-darker);
}
.webix_el_button.webix_primary .webix_pressed button, .webix_el_toggle.webix_primary .webix_pressed button {
    background-color: var(--accent-darker);
}
.webix_el_button button, .webix_el_toggle button, .webixbutton {
    color: var(--accent-dark);
}
.webix_img_btn .webix_icon {
    color: var(--accent-dark);
}
.webix_img_btn_text {
    color: var(--accent-dark);
}
.webix_inp_counter_prev {
    color: var(--accent-dark);
}
.webix_inp_counter_next {
    color: var(--accent-dark);
}
.webix_segment_0, .webix_segment_1, .webix_segment_N {
    color: var(--accent-dark);
}
.webix_segment_0.webix_selected, .webix_segment_1.webix_selected, .webix_segment_N.webix_selected {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
}
.webix_item_tab {
    color: var(--accent-dark);
}
.webix_item_tab.webix_selected {
    color: var(--accent-dark);
}
.webix_menu-x .webix_list_item {
    background: var(--accent-dark);
}
.webix_menu-x .webix_list_item:active, .webix_menu-x .webix_list_item:focus, .webix_menu-x .webix_list_item:hover {
    background-color: var(--accent-darker);
}
.webix_layout_toolbar.webix_dark .webix_selected.webix_segment_0, .webix_layout_toolbar.webix_dark .webix_selected.webix_segment_1, .webix_layout_toolbar.webix_dark .webix_selected.webix_segment_N {
    background: var(--accent-dark);
}
.webix_layout_toolbar.webix_dark .webix_selected.webix_segment_0:focus, .webix_layout_toolbar.webix_dark .webix_selected.webix_segment_0:hover, .webix_layout_toolbar.webix_dark .webix_selected.webix_segment_1:focus, .webix_layout_toolbar.webix_dark .webix_selected.webix_segment_1:hover, .webix_layout_toolbar.webix_dark .webix_selected.webix_segment_N:focus, .webix_layout_toolbar.webix_dark .webix_selected.webix_segment_N:hover {
    background-color: var(--accent-darker);
}
.webix_layout_toolbar.webix_dark .webix_selected.webix_segment_0:active, .webix_layout_toolbar.webix_dark .webix_selected.webix_segment_1:active, .webix_layout_toolbar.webix_dark .webix_selected.webix_segment_N:active {
    background-color: var(--accent-darker);
}
.webix_layout_toolbar.webix_dark .webix_control {
    border-color: var(--accent-dark);
}
.webix_toolbar.webix_layout_subbar.webix_dark .webix_selected.webix_segment_0, .webix_toolbar.webix_layout_subbar.webix_dark .webix_selected.webix_segment_1, .webix_toolbar.webix_layout_subbar.webix_dark .webix_selected.webix_segment_N {
    background: var(--accent-dark);
}
.webix_toolbar.webix_layout_subbar.webix_dark .webix_selected.webix_segment_0:focus, .webix_toolbar.webix_layout_subbar.webix_dark .webix_selected.webix_segment_0:hover, .webix_toolbar.webix_layout_subbar.webix_dark .webix_selected.webix_segment_1:focus, .webix_toolbar.webix_layout_subbar.webix_dark .webix_selected.webix_segment_1:hover, .webix_toolbar.webix_layout_subbar.webix_dark .webix_selected.webix_segment_N:focus, .webix_toolbar.webix_layout_subbar.webix_dark .webix_selected.webix_segment_N:hover {
    background-color: var(--accent-darker);
}
.webix_toolbar.webix_layout_subbar.webix_dark .webix_selected.webix_segment_0:active, .webix_toolbar.webix_layout_subbar.webix_dark .webix_selected.webix_segment_1:active, .webix_toolbar.webix_layout_subbar.webix_dark .webix_selected.webix_segment_N:active {
    background-color: var(--accent-darker);
}
.webix_toolbar.webix_layout_subbar.webix_dark .webix_control {
    border-color: var(--accent-dark);
}
.webix_slider_box .webix_slider_handle:focus {
    border-color: var(--accent-dark);
}
.webix_slider_box .webix_slider_left {
    background: var(--accent-dark);
}
.webix_slider_alt .webix_slider_box .webix_slider_handle:focus {
    border-color: var(--accent-dark);
}
.webix_slider_alt .webix_slider_box .webix_slider_left {
    background: var(--accent-dark);
}
.buttonFont {
    color: var(--accent-dark);
}
.layoutBarBG.webix_dark .webix_selected.webix_segment_0, .layoutBarBG.webix_dark .webix_selected.webix_segment_1, .layoutBarBG.webix_dark .webix_selected.webix_segment_N {
    background: var(--accent-dark);
}
.layoutBarBG.webix_dark .webix_selected.webix_segment_0:focus, .layoutBarBG.webix_dark .webix_selected.webix_segment_0:hover, .layoutBarBG.webix_dark .webix_selected.webix_segment_1:focus, .layoutBarBG.webix_dark .webix_selected.webix_segment_1:hover, .layoutBarBG.webix_dark .webix_selected.webix_segment_N:focus, .layoutBarBG.webix_dark .webix_selected.webix_segment_N:hover {
    background-color: var(--accent-darker);
}
.layoutBarBG.webix_dark .webix_selected.webix_segment_0:active, .layoutBarBG.webix_dark .webix_selected.webix_segment_1:active, .layoutBarBG.webix_dark .webix_selected.webix_segment_N:active {
    background-color: var(--accent-darker);
}
.layoutBarBG.webix_dark .webix_control {
    border-color: var(--accent-dark);
}
.webix_toolbar.webix_dark .webix_selected.webix_segment_0, .webix_toolbar.webix_dark .webix_selected.webix_segment_1, .webix_toolbar.webix_dark .webix_selected.webix_segment_N {
    background: var(--accent-dark);
}
.webix_toolbar.webix_dark .webix_selected.webix_segment_0:focus, .webix_toolbar.webix_dark .webix_selected.webix_segment_0:hover, .webix_toolbar.webix_dark .webix_selected.webix_segment_1:focus, .webix_toolbar.webix_dark .webix_selected.webix_segment_1:hover, .webix_toolbar.webix_dark .webix_selected.webix_segment_N:focus, .webix_toolbar.webix_dark .webix_selected.webix_segment_N:hover {
    background-color: var(--accent-darker);
}
.webix_toolbar.webix_dark .webix_selected.webix_segment_0:active, .webix_toolbar.webix_dark .webix_selected.webix_segment_1:active, .webix_toolbar.webix_dark .webix_selected.webix_segment_N:active {
    background-color: var(--accent-darker);
}
.webix_toolbar.webix_dark .webix_control {
    border-color: var(--accent-dark);
}
.webix_accordionitem.collapsed .webix_accordionitem_header, .webix_accordionitem.horizontal.collapsed .webix_accordionitem_header {
    color: var(--accent-dark);
}
.webix_accordionitem.collapsed .webix_accordionitem_header .webix_accordionitem_button, .webix_accordionitem.collapsed .webix_accordionitem_header .webix_accordionitem_label .webix_icon, .webix_accordionitem.horizontal.collapsed .webix_accordionitem_header .webix_accordionitem_button, .webix_accordionitem.horizontal.collapsed .webix_accordionitem_header .webix_accordionitem_label .webix_icon {
    color: var(--accent-dark);
}
.webix_layout_accordion.webix_dark .webix_accordionitem_header.collapsed {
    color: var(--accent-dark);
}
.webix_layout_accordion.webix_dark .webix_accordionitem_header.collapsed .webix_accordionitem_button {
    color: var(--accent-dark);
}
.webix_popup_button.confirm {
    border-color: var(--accent-dark);
}
.webix_dtable .webix_ss_header td.webix_last_row {
    border-bottom: 1px solid var(--primary-color);
}
.webix_dtable .webix_ss_footer tr:nth-child(2) td {
    border-top: 1px solid var(--primary-color);
}
.webix_block_selection {
    background: var(--accent-dark);
}
.webix_area_selection, .webix_area_selection_handle {
    background: var(--accent-dark);
}
.webix_dtable_focused .webix_area_selection, .webix_dtable_focused .webix_area_selection_handle {
    background-color: var(--accent-darker);
}
.webix_dtable div.webix_ss_vscroll_header {
    border-bottom-color: var(--primary-color);
}
.webix_dtable div.webix_ss_vscroll_footer {
    border-top-color: var(--primary-color);
}
.webix_dataview .webix_dataview_item.tiles.webix_selected .webix_dataview_inner_item {
    border-color: var(--primary-color);
}
.webix_view .webix_pager_item {
    color: var(--accent-dark);
}
.webix_view .webix_pager_item_selected {
    background: var(--accent-dark);
}
.webix_view .webix_pager_item_selected:focus, .webix_view .webix_pager_item_selected:hover {
    background-color: var(--accent-darker);
}
.webix_view .webix_pager_item_selected:active {
    background-color: var(--accent-darker);
}
.focusStyle {
    border: 1px solid var(--accent-dark);
}
.webix_el_colorpicker input:focus, .webix_el_combo input:focus, .webix_el_datepicker input:focus, .webix_el_search input:focus, .webix_el_text input:focus {
    border: 1px solid var(--accent-dark);
}
.webix_el_colorpicker .webix_inp_static:focus, .webix_el_datepicker .webix_inp_static:focus, .webix_el_dbldatepicker .webix_inp_static:focus, .webix_el_richselect .webix_inp_static:focus, .webix_el_select select:focus, .webix_el_textarea textarea:focus {
    border: 1px solid var(--accent-dark);
}
.webix_multilist .wxi-checkbox-marked {
    color: var(--accent-dark);
}
.webix_checksuggest_select_all:hover .webix_label_right {
    color: var(--accent-dark);
}
.webix_checksuggest_select_all .webix_label_right {
    color: var(--accent-dark);
}
.buttonStyle {
    color: var(--accent-dark);
}
.webix_all_tabs .webix_item_tab {
    color: var(--accent-dark);
}
.webix_all_tabs .webix_item_tab:hover {
    box-shadow: inset 0 -4px var(--accent-darker);
    color: var(--accent-darker);
}
.webix_all_tabs .webix_item_tab.webix_selected {
    box-shadow: inset 0 -4px var(--accent-dark);
}
.webix_all_tabs .webix_item_tab.webix_selected:hover {
    box-shadow: inset 0 -4px var(--accent-darker);
    color: var(--accent-darker);
}
.webix_all_tabs .webix_item_tab.webix_selected:focus {
    box-shadow: inset 0 -4px var(--accent-darker);
    color: var(--accent-darker);
}
.webix_all_tabs .webix_tab_more_icon .webix_icon {
    color: var(--accent-dark);
}
.webixtype_bottom .webix_item_tab.webix_selected {
    box-shadow: inset 0 2px var(--accent-dark);
    color: var(--accent-dark);
}
.webix_el_tabbar .webixtype_icon .webix_img_btn .webix_icon_btn {
    color: var(--accent-dark);
}
.webix_el_tabbar .webixtype_iconTop .webix_icon, .webix_el_tabbar .webixtype_image .webix_icon {
    color: var(--accent-dark);
}
.webix_el_tabbar .webixtype_iconTop .webix_item_tab.webix_selected .webix_icon, .webix_el_tabbar .webixtype_iconTop .webix_item_tab.webix_selected .webix_img_btn_text, .webix_el_tabbar .webixtype_image .webix_item_tab.webix_selected .webix_icon, .webix_el_tabbar .webixtype_image .webix_item_tab.webix_selected .webix_img_btn_text {
    color: var(--accent-dark);
}
.webix_el_tabbar .webixtype_iconTop .webix_item_tab.webix_selected .webix_img_btn, .webix_el_tabbar .webixtype_image .webix_item_tab.webix_selected .webix_img_btn {
    color: var(--accent-dark);
}
.webix_el_tabbar .webixtype_icon .webix_item_tab .webix_img_btn, .webix_el_tabbar .webixtype_iconTop .webix_item_tab .webix_img_btn, .webix_el_tabbar .webixtype_image .webix_item_tab .webix_img_btn {
    color: var(--accent-dark);
}
.webix_el_tabbar .webixtype_bottom .webix_tab_more_icon .webix_icon, .webix_el_tabbar .webixtype_icon .webix_tab_more_icon .webix_icon, .webix_el_tabbar .webixtype_iconTop .webix_tab_more_icon .webix_icon, .webix_el_tabbar .webixtype_image .webix_tab_more_icon .webix_icon {
    color: var(--accent-dark);
}
.passiveBarBG {
    color: var(--accent-dark);
}
.webix_uploader button {
    background: var(--accent-dark);
}
.webix_uploader button:focus, .webix_uploader button:hover {
    background-color: var(--accent-darker);
}
.webix_uploader button:active {
    background-color: var(--accent-darker);
}
.webix_el_text .webix_input_icon:active, .webix_el_text .webix_input_icon:hover {
    color: var(--accent-dark);
}
.webix_selected.webix_segment_0:focus, .webix_selected.webix_segment_0:hover, .webix_selected.webix_segment_1:focus, .webix_selected.webix_segment_1:hover, .webix_selected.webix_segment_N:focus, .webix_selected.webix_segment_N:hover {
    background-color: var(--accent-darker);
}
.webix_selected.webix_segment_0:active, .webix_selected.webix_segment_1:active, .webix_selected.webix_segment_N:active {
    background-color: var(--accent-darker);
}
.webix_segment_0, .webix_segment_1, .webix_segment_N {
    color: var(--accent-dark);
}
.webix_checkbox_1 .webix_custom_checkbox {
    color: var(--accent-dark);
}
.webix_custom_checkbox:focus {
    color: var(--accent-dark);
}
.webix_el_radio .webix_radio_1 .webix_custom_radio {
    color: var(--accent-dark);
}
.webix_el_radio .webix_custom_radio:focus {
    color: var(--accent-dark);
}
.webix_cal_icon:hover, .webix_cal_month_name:hover, .webix_cal_time:hover {
    color: var(--accent-dark);
}
.webix_cal_next_button:focus, .webix_cal_next_button:hover, .webix_cal_prev_button:focus, .webix_cal_prev_button:hover {
    color: var(--accent-dark);
}
.webix_cal_body .webix_cal_today .webix_cal_day_inner {
    box-shadow: inset 0 0 0 1px var(--accent-dark);
}
.webix_cal_body .webix_cal_event {
    color: var(--accent-dark);
}
.webix_cal_body .webix_cal_select .webix_cal_day_inner, .webix_cal_body .webix_cal_today.webix_cal_select .webix_cal_day_inner {
    background-color: var(--accent-dark);
}
.webix_cal_body .webix_cal_select .webix_cal_day_inner:hover, .webix_cal_body .webix_cal_today.webix_cal_select .webix_cal_day_inner:hover {
    background-color: var(--accent-dark);
}
.webix_cal_body .webix_cal_select:focus .webix_cal_day_inner, .webix_cal_body .webix_cal_today.webix_cal_select:focus .webix_cal_day_inner {
    background-color: var(--accent-darker);
}
.webix_cal_body .webix_cal_block.webix_selected span {
    background-color: var(--accent-dark);
}
.webix_cal_body .webix_cal_block.webix_selected span:hover {
    background-color: var(--accent-dark);
}
.webix_cal_body .webix_cal_block.webix_selected:focus span {
    background-color: var(--accent-darker);
}
.webix_cal_body .webix_cal_range_first:before, .webix_cal_body .webix_cal_range_last:after {
    background: var(--accent-light);
}
.webix_cal_body .webix_cal_range_end .webix_cal_day_inner, .webix_cal_body .webix_cal_range_start .webix_cal_day_inner, .webix_cal_body .webix_cal_today.webix_cal_range_end .webix_cal_day_inner, .webix_cal_body .webix_cal_today.webix_cal_range_start .webix_cal_day_inner {
    background-color: var(--accent-dark);
}
.webix_cal_body .webix_cal_range {
    background-color: var(--accent-light);
}
.webix_progress_bottom .webix_progress_state, .webix_progress_top .webix_progress_state {
    background: var(--accent-dark);
}
.webix_switch_box.webix_switch_on {
    background-color: var(--accent-dark);
}
.webix_sidebar.webix_sidebar_left .webix_tree_item.webix_selected, .webix_sidebar.webix_sidebar_left .webix_tree_item.webix_sidebar_selected, .webix_sidebar.webix_sidebar_left .webix_tree_item.webix_sidebar_selected + .webix_tree_leaves .webix_tree_item {
    box-shadow: inset 2px 0 var(--accent-dark);
}
.webix_sidebar.webix_sidebar_right .webix_tree_item.webix_selected, .webix_sidebar.webix_sidebar_right .webix_tree_item.webix_sidebar_selected, .webix_sidebar.webix_sidebar_right .webix_tree_item.webix_sidebar_selected + .webix_tree_leaves .webix_tree_item {
    box-shadow: inset -2px 0 var(--accent-dark);
}
.webix_sidebar .webix_tree_item.webix_selected, .webix_sidebar .webix_tree_item.webix_sidebar_selected {
    color: var(--accent-dark);
}
.webix_sidebar .webix_tree_item.webix_selected .webix_sidebar_dir_icon, .webix_sidebar .webix_tree_item.webix_selected .webix_sidebar_icon, .webix_sidebar .webix_tree_item.webix_sidebar_selected .webix_sidebar_dir_icon, .webix_sidebar .webix_tree_item.webix_sidebar_selected .webix_sidebar_icon {
    color: var(--accent-dark);
}
.webix_sidebar .webix_tree_item.webix_selected span {
    color: var(--accent-dark);
}
.webix_sidebar_popup_list .webix_list_item.webix_sidebar_selected {
    color: var(--accent-dark);
}
.webix_sidebar_popup_list .webix_list_item.webix_selected {
    color: var(--accent-dark);
}
.webix_sidebar_popup_left .webix_list_item.webix_selected, .webix_sidebar_popup_left .webix_list_item.webix_sidebar_selected {
    box-shadow: inset 2px 0 var(--accent-dark);
}
.webix_sidebar_popup_right .webix_list_item.webix_selected, .webix_sidebar_popup_right .webix_list_item.webix_sidebar_selected {
    box-shadow: inset -2px 0 var(--accent-dark);
}
.webix_sidebar_popup .webix_sidebar_popup_title.webix_selected {
    color: var(--accent-dark);
}
.webix_sidebar.webix_dark .webix_tree_item.webix_selected, .webix_sidebar.webix_dark .webix_tree_item.webix_sidebar_selected {
    color: var(--accent-dark);
}
.webix_sidebar_popup.webix_dark .webix_sidebar_popup_title.webix_selected .webix_template {
    color: var(--accent-dark);
}
.webix_sidebar_popup_list.webix_dark .webix_list_item.webix_selected, .webix_sidebar_popup_list.webix_dark .webix_list_item.webix_sidebar_selected {
    color: var(--accent-dark);
}
.webix_list_item.webix_selected {
    box-shadow: inset 2px 0 var(--accent-dark);
}
.portlet_marker, .portlet_markerbottom, .portlet_markerleft, .portlet_markerright, .portlet_markertop {
    background: var(--accent-dark);
}
.webix_treemap_item:hover {
    box-shadow: inset 0 0 0 1px var(--primary-color);
}
.webix_treemap_item.webix_selected {
    box-shadow: inset 0 0 0 2px var(--accent-dark);
}
.webix_dbllist .dbllist_button .webix_icon {
    color: var(--accent-dark);
}
.webix_organogram .webix_organogram_item.webix_selected {
    background: var(--accent-hover);
    border-color: var(--accent-dark);
}
/* skins/material.min.css teal that mini does not redeclare, on the pages that link material */
:root:has(link[href*="material.min.css" i]) .webix_dtable .webix_select_mark>div.webix_row_select {
    box-shadow: inset 2px 0 var(--accent-dark);
}
:root:has(link[href*="material.min.css" i]) .webixtype_bottom .webix_item_tab.webix_selected:focus {
    box-shadow: inset 0 2px var(--accent-darker);
}
:root:has(link[href*="material.min.css" i]) .webix_sidebar.webix_sidebar_left .webix_tree_item.webix_sidebar_selected+.webix_tree_leaves .webix_tree_item {
    box-shadow: inset 2px 0 var(--accent-dark);
}
:root:has(link[href*="material.min.css" i]) .webix_sidebar.webix_sidebar_right .webix_tree_item.webix_sidebar_selected+.webix_tree_leaves .webix_tree_item {
    box-shadow: inset -2px 0 var(--accent-dark);
}
/* dark_page: under the OS dark preference the Webix skin's own light surfaces, text, borders, fields, buttons, tabs,
   segments, switches, side menu and the rich text editor read the platform colours (platform_variables swaps them
   in its dark block); colours stored in the data keep their hue with the lightness flipped */
@media (prefers-color-scheme: dark) {
    /* surfaces: the skin paints every view white (.webix_view), the gutters and headers its greys */
    body,
    .webix_view {
        background-color: var(--light-color);
    }
    .webix_view.webix_layout_space,
    .webix_view.webix_layout_wide,
    .webix_view.webix_layout_accordion,
    .webix_view.webix_sidebar,
    .webix_sidebar .webix_tree_item {
        background-color: var(--surface-gutter);
    }
    .webix_view.webix_layout_line,
    .webix_view.webix_layout_clean,
    .webix_view.webix_form,
    .webix_view.webix_toolbar:not(.MainHeader):not(.via_main_page_header):not(.mxHeader),
    .webix_view.webix_multiview,
    .webix_view.webix_scrollview,
    .webix_view.webix_template,
    .webix_view.webix_accordionitem,
    .webix_accordionitem_body,
    .webix_view.webix_window,
    .webix_win_content,
    .webix_view.webix_popup,
    .webix_view.webix_list,
    .webix_view.webix_tree,
    .webix_view.webix_dtable,
    .webix_dtable .webix_ss_body,
    .webix_dtable .webix_ss_footer,
    .webix_dtable .webix_ss_footer td,
    .webix_dtable .webix_ss_vscroll_header,
    .webix_dtable .webix_ss_vscroll_footer,
    .webix_dtable .webix_cell,
    .webix_view.webix_el_tabbar,
    .webix_view.webix_control.webix_el_tabbar,
    .webix_all_tabs,
    .webix_item_tab,
    .webix_all_tabs .webix_item_tab.webix_selected,
    .webix_view.webix_fieldset,
    .webix_modal_box,
    .webix_popup_title,
    .webix_popup_text {
        background-color: var(--light-color);
    }
    /* the page header keeps its own colour: its inner views stay see-through */
    .webix_toolbar.MainHeader .webix_view,
    .webix_toolbar.via_main_page_header .webix_view,
    .webix_toolbar.mxHeader .webix_view {
        background-color: transparent;
    }
    .webix_win_head,
    .webix_accordionitem_header,
    .webix_accordionitem_header.collapsed,
    .webix_accordionitem.collapsed .webix_accordionitem_header,
    .webix_accordionitem.horizontal.collapsed .webix_accordionitem_header,
    .webix_dtable .webix_ss_header,
    .webix_dtable .webix_ss_header td,
    .webix_dtable .webix_hcell {
        background-color: var(--surface-raised);
    }

    /* text */
    body,
    .webix_view,
    .webix_el_box,
    .webix_el_label,
    .webix_el_label .webix_el_box,
    .webix_view.webix_control.webix_el_label .webix_el_box,
    .webix_inp_label,
    .webix_inp_top_label,
    .webix_inp_bottom_label,
    .webix_template,
    .webix_hcell,
    .webix_cell,
    .webix_tree_item,
    .webix_list_item,
    .webix_accordionitem_label,
    .webix_win_head,
    .webix_fieldset_label,
    .webix_popup_title,
    .webix_popup_text,
    .webix_sidebar .webix_tree_item,
    .webix_sidebar .webix_tree_item span,
    .webix_switch_text {
        color: var(--dark-color);
    }
    .webix_switch_box.webix_switch_on .webix_switch_text {
        color: var(--light-color);
    }

    /* colours stored in the data (tree / grid names, template text): their lightness flipped, their hue kept;
       an element with its own background (a badge, a highlight) keeps its colours and gets dark text */
    .webix_tree_item [style*="color"]:not([style*="background"]),
    .webix_cell [style*="color"]:not([style*="background"]),
    .webix_template [style*="color"]:not([style*="background"]) {
        filter: invert(1) hue-rotate(180deg);
    }
    .webix_template [style*="background"]:not([style^="color"]):not([style*=";color"]):not([style*="; color"]),
    .webix_cell [style*="background"]:not([style^="color"]):not([style*=";color"]):not([style*="; color"]) {
        color: var(--text-on-light);
    }

    /* borders */
    .webix_view.webix_layout_line > .webix_view,
    .webix_view.webix_dtable,
    .webix_dtable .webix_hcell,
    .webix_dtable .webix_cell,
    .webix_dtable .webix_ss_header,
    .webix_dtable .webix_column,
    .webix_view.webix_accordionitem,
    .webix_accordionitem_header,
    .webix_view.webix_toolbar,
    .webix_view.webix_window,
    .webix_modal_box {
        border-color: var(--border-dark);
    }

    /* fields and header filters */
    .webix_el_box input,
    .webix_el_box textarea,
    .webix_el_box select,
    .webix_view .webix_inp_static,
    .webix_view.webix_control .webix_inp_static,
    .webix_dtable .webix_ss_filter input,
    .webix_dtable .webix_ss_filter select,
    .webix_dtable .webix_ss_filter .webix_inp_static {
        background-color: var(--accent-hover);
        color: var(--dark-color);
        border-color: var(--border-dark);
    }
    /* the skin gives the filter text its grey with !important: the typed filter looked like a hint */
    .webix_dtable .webix_ss_filter input,
    .webix_dtable .webix_ss_filter select {
        color: var(--dark-color) !important;
    }

    .webix_multicombo_value {
        background-color: var(--accent-light);
        color: var(--dark-color);
        border-color: var(--border-dark);
    }

    /* ordinary Webix buttons (the platform's toolbar buttons read --light-color already) */
    .webix_el_button .webix_button:not(.webix_primary),
    .webix_view.webix_control .webix_button:not(.webix_primary),
    .webix_el_button .webix_img_btn,
    .webix_el_toggle .webix_button,
    .webix_icon_button {
        background-color: var(--accent-light);
        color: var(--accent-dark);
    }

    /* tabs, segments, switch, checkbox */
    .webix_item_tab,
    .webix_item_tab.webix_selected {
        color: var(--accent-dark);
    }
    .webix_segment_0,
    .webix_segment_1,
    .webix_segment_N {
        background-color: var(--accent-hover);
        color: var(--dark-color);
        border-color: var(--border-dark);
    }
    .webix_segment_0.webix_selected,
    .webix_segment_1.webix_selected,
    .webix_segment_N.webix_selected {
        background-color: var(--accent-dark);
        border-color: var(--accent-dark);
        color: var(--light-color);
    }
    .webix_switch_box,
    .webix_view .webix_switch_box {
        background-color: var(--border-dark);
    }
    .webix_switch_box.webix_switch_on,
    .webix_view .webix_switch_box.webix_switch_on {
        background-color: var(--accent-dark);
    }
    .webix_custom_checkbox {
        color: var(--accent-dark);
    }

    /* side menu */
    .webix_sidebar .webix_tree_item.webix_selected,
    .webix_sidebar .webix_tree_item:hover {
        background-color: var(--accent-light);
    }
    .webix_sidebar .webix_tree_item.webix_selected span,
    .webix_sidebar .webix_tree_item.webix_selected .webix_sidebar_icon {
        color: var(--accent-dark);
    }
    .webix_sidebar .webix_sidebar_icon,
    .webix_sidebar .webix_sidebar_dir_icon {
        color: var(--neutral-color);
    }

    /* tree / list selection (grid_states reads the swapped base colours already) */
    .webix_tree_item.webix_selected,
    .webix_list_item.webix_selected {
        background-color: var(--accent-light);
        color: var(--dark-color);
    }
    .webix_tree_item:hover,
    .webix_list_item:hover {
        background-color: var(--accent-hover);
    }

    /* rich text editor (trumbowyg; its own stylesheet loads after this file, hence the .webix_view prefix) */
    .webix_view .trumbowyg-box,
    .webix_view .trumbowyg-editor,
    .webix_view .trumbowyg-textarea {
        background-color: var(--light-color);
        color: var(--dark-color);
        border-color: var(--border-dark);
    }
    .webix_view .trumbowyg-button-pane,
    .webix_view .trumbowyg-button-pane::after {
        background-color: var(--surface-raised);
        border-color: var(--border-dark);
    }
    .webix_view .trumbowyg-button-pane button {
        color: var(--dark-color);
    }
    .webix_view .trumbowyg-button-pane button svg {
        fill: var(--dark-color);
        color: var(--dark-color);
    }
}
/* type_badge: a type badge of fixed width before a name ("M" a Data Mapping, "E" an Enumeration Mapping or an
   Enumeration), white on the type's colour; the same colours under the dark preference */
.type_badge {
    display: inline-block;
    width: 16px;
    margin-right: 5px;
    border-radius: 3px;
    text-align: center;
    font-size: 10px;
    line-height: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #94A1B3;
}
.type_badge.type_data {
    background-color: #1E6FB8;
}
.type_badge.type_enumeration {
    background-color: #6B3FA0;
}
/* type_name: a name in its type's colour (type_data a Data Mapping, type_enumeration an Enumeration Mapping or an
   Enumeration); under the dark preference a lighter one of the same hue */
.type_name.type_data {
    color: #1E6FB8;
}
.type_name.type_enumeration {
    color: #6B3FA0;
}
@media (prefers-color-scheme: dark) {
    .type_name.type_data {
        color: #7FB2E6;
    }
    .type_name.type_enumeration {
        color: #B99AE6;
    }
}
/* switch_states: a switched-off track keeps a visible outline and every handle a thin shadow, so on and off look the same size */
.webix_switch_box:not(.webix_switch_on) {
    border: 1px solid var(--neutral-color);
}
.webix_switch_box .webix_switch_handle {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.webix_switch_box .webix_switch_handle:focus-visible {
    box-shadow: 0 0 0 1px var(--control-focus-border), 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* ruleTestTrue: the True result of a Rule Editor test line */
.ruleTestTrue {
    color: var(--danger-color);
    font-weight: 600;
}
/* ruleTestFalse: the False result of a Rule Editor test line */
.ruleTestFalse {
    color: var(--success-color);
    font-weight: 600;
}
/* ruleTestError: the Error result of a Rule Editor test line */
.ruleTestError {
    color: var(--error-color);
    font-weight: 600;
}
/* tabview_no_tabbar: a tab view (Proto UI class sc_tabview, not borderless) whose tab bar is hidden draws its top line, in the colour of its borders */
.webix_view.sc_tabview:not(:has(> .webix_el_tabbar)) {
    position: relative;
}
.webix_view.sc_tabview:not(:has(> .webix_el_tabbar))::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    border-top: 1px solid;
    border-top-color: inherit;
    z-index: 1;
    pointer-events: none;
}
.editor_label .webix_el_box {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}