/******************* common ********************/

.vm_flex_start>.webix_template
{
    justify-content: flex-start;
}
.vm_flex_end>.webix_template
{
    justify-content: flex-end;
}
.vm_flex_center>.webix_template
{
    justify-content: center;
}

.vm_font8 * {
    font-size: 8px;
}
.vm_font10 * {
    font-size: 10px;
}
.vm_font12 * {
    font-size: 12px;
}
.vm_font14 * {
    font-size: 14px;
}
.vm_font16 * {
    font-size: 16px;
}
.vm_font18 * {
    font-size: 18px;
}
.vm_font20 * {
    font-size: 20px;
}
.vm_font22 * {
    font-size: 22px;
}
.vm_font24 * {
    font-size: 24px;
}
.vm_font26 * {
    font-size: 26px;
}

/******************* tabselect ********************/

.vm_tabselect button.webix_selected {
    color: white !important;
}

.vm_tabselect * {
    background-color: transparent !important;
    color: #9f9f9f;
    border-color: #929292 !important;
    box-shadow: 0 0 0 0 !important;
}

.vm_tabselect .webix_segment_0, .webix_segment_1 {
    border-width: 0 1px 0 0 !important;
}
.vm_tabselect .webix_segment_N {
    border-width: 0 0 0 0 !important;
}

.vm_tabselect .webix_segment_0:hover, .webix_segment_1:hover, .webix_segment_N:hover {
    color: #d5d5d5;
}

/******************* autobars ********************/

.vm_autobars_button * {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

.vm_autobars_layout
{
    background-color: black;
}

.vm_autobars_button .webix_button {
    background-color: black;
}
.vm_autobars_button .webix_button:active {
    box-shadow: inset 0 0 0 0;
}

.vm_autobars_resizer {
    background-color: #1f1f1f;
}
.vm_autobars_resizer_hpadded {
    margin-left: 14px !important;
    margin-right: 14px !important;
}

.vm_autobars_resizer_vpadded {
    margin-top: 14px !important;
    margin-bottom: 14px !important;
}


.vm_autobars_window, .vm_autobars_window:active,.vm_autobars_window:focus {
    box-shadow: 0 0 0 0;
    border-width: 0 0 0 0 !important;
    background-color: black;
 }

.vm_autobars_template>.webix_template
{
    padding: 0 0 0 0;
}

/******************* styledlabel ********************/

.vm_styledlabel>.webix_template
{
    display: flex;
}

/******************* image ********************/

.vm_image>.webix_template
{
    display: inline-flex;
    width: 100%;
}
.vm_image
{
    border-width: 0 0 0 0 !important;
    overflow: visible;
    z-index: 10;
}

/******************* dropmenu ********************/

.vm_dropmenu .webix_list_item
{
    background-color: transparent;
    padding-top: 6px;
    width: 34px !important;
    height: 34px !important;
    margin-left: 4px !important;
    padding-left: 7px !important;
}
.vm_dropmenu .webix_list_item:hover
{
    background-color: gray;
    color: black;
    border-radius: 50%;
}
.vm_dropmenu .webix_scroll_cont
{
    display: table-cell;
    vertical-align: middle;
    padding-top: 4px;
}

.vm_dropmenu .webix_list_icon
{
    font-size: 20px;
}


.vm_button button
{
    width: 100%;
    margin: 0;
}
/******************* vmaccordion ********************/


.vm_accordion {
    border-width: 0 0 0 0 !important;
}

.vmplayout_item {
    border-width: 1px 1px 1px 1px !important;
    border-style: solid;
    border-color: #000000;
}


.vm_formpanel
{
    background-color: #4e4e4e;
}


/* TODO: make it for vmaccordion only */
/* add image to simulate panel when closed */

.webix_accordionitem_header.collapsed:after {
    content: url("closed_accordion.png");
    position: relative ;
    top: -22px;
}

/* this is to remove default icons in both collapsed and expanded modes */
.webix_accordionitem.vm_accordion .webix_accordionitem_header .webix_accordionitem_button:before {
    content: '';
}
.webix_accordionitem.vm_accordion .webix_accordionitem_header.collapsed .webix_accordionitem_button:before {
    /* content: '\F028';*/
    content: '';
}

/* new buttons */

.webix_accordionitem.vm_accordion .webix_accordionitem_header .webix_accordionitem_button {
    float: left;
    margin-left: 2px;
    background-image: url("accordion-bottom.png");
    background-repeat: no-repeat no-repeat;
    background-position: center;
    height: 25px;
}
.webix_accordionitem.vm_accordion .webix_accordionitem_header.collapsed .webix_accordionitem_button {
    float: left;
    margin-left: 2px;
    background-image: url("accordion-right.png");
    background-repeat: no-repeat no-repeat;
    background-position: center;
    height: 25px;
}

.webix_accordionitem.vm_accordion .webix_accordionitem_label {
    line-height: 25px;
    color: #a9a9a9;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* header when open should have same color of the rest */
.webix_accordionitem.vm_accordion .webix_accordionitem_header {
    background-color: #2e2e2e;
    /*color: #aaaaaa;*/
    border-bottom-color: #2e2e2e;
}
/* and also when closes */
.webix_accordionitem.vm_accordion .webix_accordionitem_header.collapsed {
    background-color: #2e2e2e;
    /*color: #aaaaaa;*/
    border-bottom-width: 1px;
}
/******************* vmpanel & co ********************/
.vm_scrollpanel
{
    background-color: #2e2e2e;
    border: solid #2e2e2e;
    border-width: 1px 1px 1px 1px !important;
}

.vm_fixpanel
{
    background-color: #2e2e2e;
    border: solid #2e2e2e;
    border-width: 1px 1px 1px 1px !important;
}

.vm_fixpanel .vm_colorspacer_div
{
    background-image: url("../img/fixed-panel-pattern.png");
    background-repeat: repeat-y;
    border: solid black;
    border-width: 1px 0 2px 0;
    box-sizing: border-box;
}
.vm_fixpanel .vm_colorspacer_div.filler_r
{
    margin-left: -1px;
}



.vm_scrollpanel.vm_scrollpanel_sb_left > .webix_c_scroll_y
{
    right: auto;
    left: 0;
}
.vm_scrollpanel.vm_scrollpanel_sb_right > .webix_c_scroll_y
{
    right: 3px !important;
    left: auto;
}

.vm_scrollpanel > .webix_c_scroll_y > div
{
    background-color: #9f9f9f;
    width: 9px;
    margin-left: 2px;
}
.vm_scrollpanel > .webix_c_scroll_y > div:hover
{
    background-color: #9f9f9f;
    width: 9px;
    margin-left: 2px;
}

/******************* vmslider ********************/

.vm_slider .webix_inp_label, .webix_inp_top_label {
    font-size: 12px;
    font-weight: 500;
    color: #cccccc;
}


.vm_slider .webix_slider_box {
    padding-top: 0;
    margin-top: -7px;
}


.vm_slider .webix_slider_box .webix_slider_handle {
    width: 8px;
    height: 8px;
    border: 1px solid #000000;
    background-color: #a9a9a9;
    top: -3px;
}

.vm_slider .webix_slider_box .webix_slider_handle:focus {
    border-color: #2e2e2e;
}

.vm_slider .webix_slider_title.webix_slider_move {
    color: #cccccc;
    font-size: 10px;
    top: -7px;
}
.vm_slider .webix_slider_box .webix_slider_left {
    height: 5px;
    border: 1px solid #000000;
    background: #A9A9A9;
}
.vm_slider .webix_slider_box .webix_slider_right {
    height: 5px;
    border: 1px solid #000000;
}

/******************* vmsegmented ********************/

.vm_segmented
{
    /*margin-left: 2px !important;*/
}

.vm_segmented .webix_segment_0, .vm_segmented .webix_segment_1, .vm_segmented .webix_segment_N {
    border-width: 0 !important;
    background-color: #4e4e4e;
    color: #f0f0f0;
    font-weight: 500;
    font-size: 12px;
}

.vm_segmented .webix_segment_0.webix_selected, .vm_segmented .webix_segment_1.webix_selected, .vm_segmented .webix_segment_N.webix_selected {
    border-width: 0 !important;
    background-color: #f0f0f0;
    color: #2e2e2e;
    font-weight: 500;
}

.vm_segmented .webix_segment_0:active, .vm_segmented .webix_segment_1:active, .vm_segmented .webix_segment_N:active {
    border-width: 0 !important;
    background-color: #f0f0f0;
    color: #2e2e2e;
    font-weight: 500;
}

/******************* vmsearch ********************/

.vm_search
{
    /*margin-left: 2px !important;*/
}
.vm_search input
{
    background: #444444;
    font-size: 10px;
    color: #a9a9a9;
    border-radius: 0;
}

.vm_search  input::placeholder {
    color: #a9a9a9;
}

.vm_search.webix_control.webix_el_search span
{
    background: transparent;
    font-size: 15px;
    font-weight: 300;
    color: #6a6a6a;
    margin-top: 3px;
}

/******************* vmprogress ********************/

.vm_progress > .webix_template
{
    padding: 0px 1px;

}