:root {
    --primary-color: #286FB4; /*#286FB4;*/
    --secondary-color:#4EA1D3; /*#4EA1D3*/
    --selected-item: #C2EDCE;
    --warning-color: #FFA62B;
    --error-color: #EF6222;
    --brown-color: #3f3939;
    --green-color: #00c92b;
    --normal-text-size: 12px;
}

.webix_view .webix_toolbar[view_id="$toolbar1"] {
    background-color: var(--primary-color) !important;
}

.webix_all_tabs > .webix_item_tab {
    color: var(--primary-color) !important;
}
.webix_all_tabs > .webix_selected {
    box-shadow: inset 0 -2px var(--primary-color) !important;
}

.webix_button {
    font-size: 13px !important;
    color: white !important;
    background-color: var(--secondary-color) !important;
}

.webix_accordionitem_header .webix_accordionitem_label {
    color: var(--secondary-color) !important;
}
.webix_accordionitem_header .webix_accordionitem_label span {
    color: var(--primary-color) !important;
}
.webix_list_item.webix_selected {
    background: var(--selected-item);
}

.head-primary {
    background-color: var(--primary-color) !important;
}

.head-primary .webix_el_box {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white !important;
}

.head-primary .webix_el_box .webix_icon_button {
    display: flex;
    width: auto !important;
    height: auto !important;
}

.webix_window {
    border-width: 0px !important;
    height: fit-content !important
}

/* Popup UI */
.popup_header {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    background-color: var(--primary-color) !important;
    padding: 6px 0;
    color: white;
}

.popup_header-label {
    flex-grow: 1; 
    text-align: center;
    font-size: 18px !important;
}
.popup_header-label .webix_el_box {
    font-size: 18px !important;
}

.popup_header-close-icon {
    cursor: pointer; 
}

.popup_header .webix_el_box {
    color: white !important;
}


.popup_header-fire {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    background-color: rgb(212, 27, 27) !important;
    padding: 6px 0;
}

.popup_header-label-fire{
    flex-grow: 1; 
    text-align: center;
    font-size: 18px !important;
}

.popup_header-fire .webix_el_box {
    color: yellow !important;
}
.popup_header-label-fire .webix_el_box {
    font-size: 18px !important;
}

.webix_button--danger .webix_button {
    background-color: rgb(212, 27, 27) !important;
}

.pd-2 {
    padding: 2px !important;
}
.pd-3 {
    padding: 3px !important;
}
.modal-header {
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    padding: 6px;
    color: var(--primary-color) !important;
}
.border-5 {
    border-width: 3px !important;
}

.modal-body {
    padding: 0px 3px;
}

.spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: #000;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;

}

@keyframes spin {
    to { transform: rotate(360deg); }
}