:root
{
    --gui-default-color: var(--gui-color, #C5CAE9) !important;
    --gui-default-colordark: var(--gui-colordark, #004A7F) !important;
    --gui-default-coloraccent: var(--gui-coloraccent, #287AA9) !important;
    --gui-default-colorcontrol: var(--gui-colorcontrol, #FFFFFF) !important;
    --gui-default-colorcontrolbackground: var(--gui-colorcontrolbackground, #E6E6E6) !important;
    --gui-default-shadow: var(--gui-shadow, 0 0 5px 2px rgba(0, 0, 0, 0.15)) !important;
    --gui-default-shadowwindow: var(--gui-shadowwindow, 0 0 1em #000000) !important;
    --gui-default-shadowcontextmenu: var(--gui-shadowcontextmenu, 0 0 5px 2px rgba(0, 0, 0, 0.75)) !important;
    --gui-default-shadowhover: var(--gui-shadowhover, 0 0 5px 0 rgba(0, 0, 0, 0.26)) !important;
    --gui-default-bordercolor: var(--gui-bordercolor, #BCBCBC) !important;
    --gui-default-colortext: var(--gui-colortext, #000000) !important;
    --gui-default-colorinfo: var(--gui-default-colordark) !important;
    --gui-default-colorerror: var(--gui-colorerror, #FF0000) !important;
    --gui-default-colortexthover: var(--gui-colortexthover, #FFFFFF) !important;
}

/* HTML */
/**
{
    box-sizing: border-box;
    font-family: Verdana !important;
    outline: none;
    user-select: none;
}

html
{
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

body
{
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    font-size: 12px;
    font-weight: normal;
    color: var(--gui-default-colortext);
}*/
/* HTML */

/* STANDARD CONTROLS */
div[data-gui-control]
{
    font-family: Verdana !important;
    font-size: 12px !important;
}

a:link, a:visited, a:active
{
    text-decoration: none !important;
    color: var(--gui-default-coloraccent) !important;
    font-style: italic !important;
}

a:hover
{
    color: var(--gui-default-coloraccent) !important;
}

input:not([type='checkbox']):not([type='radio']), textarea, select, button
{
    box-sizing: border-box !important;
    padding: 2px 5px 2px 5px !important;
    border-radius: 5px !important;
    font-size: 1em !important;
    user-select: text !important;
    background-color: var(--gui-default-colorcontrol) !important;
    width: 175px;
}

input:not([type='checkbox']):not([type='radio']):not([type='button']):not([type='submit']):not([type='reset']), textarea, select
{
    border: 1px solid var(--gui-default-coloraccent) !important;
}

input:not([type='button']):not([type='checkbox']):not([type='radio']), textarea
{
    cursor: text !important;
}

input[type='button'], input[type='checkbox'], input[type='radio'], select, button
{
    cursor: pointer !important;
}

textarea
{
    min-height: 80px !important;
    resize: none;
}

input[type='button'], input[type='submit'], input[type='reset'], button
{
    -webkit-appearance: none !important;
    min-width: 100px !important;
    text-align: center !important;
    font-weight: bold !important;
    color: var(--gui-default-colortexthover) !important;
    background-color: var(--gui-default-colordark) !important;
    border: 1px solid var(--gui-default-colordark) !important;
}

input[readonly]:not([type='checkbox']):not([type='radio']):not([type='button']):not([type='submit']):not([type='reset']), textarea[readonly], select[readonly]
{
    background-color: var(--gui-default-color) !important;
}

input[required]:not([type='checkbox']):not([type='radio']):not([type='button']):not([type='submit']):not([type='reset']), textarea[required], select[required]
{
    border-color: var(--gui-default-colorerror) !important;
}

div[data-gui-control='button']
{
    box-sizing: border-box !important;
    display: inline-block !important;
    min-width: 100px !important;
    padding: 2px 5px 2px 5px !important;
    text-align: center !important;
    cursor: pointer !important;
    background-color: var(--gui-default-colordark) !important;
    border: 1px solid var(--gui-default-colordark) !important;
    border-radius: 5px !important;
    font-weight: bold !important;
    color: var(--gui-default-colortexthover) !important;
}

@media (hover: hover)
{
    input[type='button']:hover, div[data-gui-control='button']:hover
    {
        background-color: var(--gui-default-coloraccent) !important;
        border: 1px solid var(--gui-default-coloraccent) !important;
    }
}

div[data-gui-control='button'][data-visible='true']
{
    display: inline-block !important;
}

div[data-gui-control='button'][data-visible='false']
{
    display: none !important;
}
/* STANDARD CONTROLS */

/* GROUP BOX */
div[data-gui-control='groupbox']
{
    display: block !important;
    border-radius: 2px !important;
    padding: 5px !important;
    margin-bottom: 10px !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: transparent !important;
    box-shadow: var(--gui-default-shadow) !important;
}

div[data-gui-control='groupbox'] > label
{
    display: block !important;
    margin-bottom: 5px !important;
    color: var(--gui-default-coloraccent) !important;
    border-bottom: 1px solid var(--gui-default-coloraccent) !important;
    font-weight: bold !important;
}

div[data-gui-control='groupbox'] label img
{
    height: 16px !important;
    cursor: pointer !important;
}
/* GROUP BOX */

/* FORM */
ul[data-gui-control='form']
{
    list-style-type: none !important;
    padding: 0 !important;
}

ul[data-gui-control='form'] li
{
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
}

ul[data-gui-control='form'] > li > div
{
    flex-grow: 1 !important;
    flex-shrink: 0 !important;
    flex-basis: 1% !important;
    margin-left: 10px !important;
    margin-right: 10px !important;
    margin-bottom: 15px !important;
}

ul[data-gui-control='form'] > li > div > label
{
    display: block !important;
    min-width: 175px !important;
    margin-bottom: 5px !important;
}
ul[data-gui-control='form'] > li > div > *:not(img):not(svg)
{
    width: 100% !important;
}
/* FORM */

/* BACKGROUND */
div[data-gui-control='background']
{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    background-color: #808080 !important;
    opacity: 0.5 !important;
}
/* BACKGROUND */

/* LOADING */
div[data-gui-control='loading']
{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

div[data-gui-loading='window']
{
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    padding: 5px !important;
    background-color: var(--gui-default-colorcontrol) !important;
    box-shadow: var(--gui-default-shadowwindow) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--gui-default-bordercolor) !important;
}

div[data-gui-loading='window'][data-empty='true']
{
    border-radius: 50% !important;
}

div[data-gui-loading='window'] span
{
    margin-left: 10px !important;
    font-weight: bold !important;
    font-size: 14px !important;
    white-space: nowrap !important;
    text-wrap: avoid !important;
    color: var(--gui-default-coloraccent) !important;
}

div[data-gui-loading='window'] span:empty
{
    margin-left: 0 !important;
}

div[data-gui-loading='progressbar']
{
    width: 32px !important;
    height: 32px !important;
}

div[data-gui-loading='progressbar'] div
{
    box-sizing: border-box !important;
    position: absolute !important;
    width: inherit !important;
    height: inherit !important;
    display: block !important;
    animation: gui_loading_progressbar 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite !important;
}

div[data-gui-loading='progressbar'] div:nth-child(1)
{
    animation-delay: -0.45s !important;
}

div[data-gui-loading='progressbar'] div:nth-child(2)
{
    animation-delay: -0.3s !important;
}

div[data-gui-loading='progressbar'] div:nth-child(3)
{
    animation-delay: -0.15s !important;
}

@keyframes gui_loading_progressbar
{
    0%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotate(360deg);
    }
}

div[data-gui-loading='progress']
{
    border-width: 4px !important;
    border-style: solid !important;
    border-radius: 50% !important;
    border-top-color: var(--gui-default-coloraccent) !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
}
/* LOADING */

/* PROGRESS DIALOG  */
div[data-gui-control='progressbar']
{
    background-color: var(--gui-default-colorcontrolbackground) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--gui-default-bordercolor) !important;
}

div[data-gui-control='progress']
{
    background-color: var(--gui-default-coloraccent) !important;
}

div[data-gui-control='percent']
{
    color: var(--gui-default-colortext) !important;
}

div[data-gui-control='percent'][data-hover='true']
{
    color: var(--gui-default-colortexthover) !important;
}
/* PROGRESS DIALOG  */

/* PULLTOREFRESH */
div[data-gui-control='pulltorefresh']
{
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    margin: auto !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999999 !important;
    background-color: var(--gui-default-colorcontrol) !important;
    box-shadow: var(--gui-default-shadowwindow) !important;
    border-width: 1px !important;
    border-style: solid !important;
    border-color: var(--gui-default-bordercolor) !important;
    fill: var(--gui-default-coloraccent) !important;
}
/* PULLTOREFRESH */

/* NOTIFYBALLOON */
div[data-gui-control='notifyballoon']
{
    position: fixed !important;
    top: 8px !important;
    right: 30px !important;
    width: 40px !important;
    height: 40px !important;
    background-color: var(--gui-default-colorcontrol) !important;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.75) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

div[data-gui-control='notifyballoon'] svg
{
    border-radius: inherit !important;
}

div[data-gui-control='notifyballoon'] *:first-child
{
    width: inherit !important; height: inherit !important;
}
/* NOTIFYBALLOON */

/* CONTEXT MENU */
div[data-gui-control='contextmenu']
{
    background-color: var(--gui-default-color) !important;
    box-shadow: var(--gui-default-shadowwindow) !important;
}

div[data-gui-control='contextmenu'] div
{
    padding: 5px !important;
    min-width: 100px !important;
    color: var(--gui-default-colortext) !important;
    cursor: pointer !important;
}

div[data-gui-control='contextmenu'] div:hover
{
    background-color: var(--gui-default-coloraccent) !important;
    color: var(--gui-default-colortexthover) !important;
}
/* CONTEXT MENU */

/* WINDOW */
div[data-gui-control='window']
{
    box-sizing: content-box !important;
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    margin: auto !important;
    max-width: calc(100% - 22px) !important;
    max-height: calc(100% - 22px) !important;
    background-color: var(--gui-default-colorcontrol) !important;
    box-shadow: var(--gui-default-shadowwindow) !important;
    border: 1px solid var(--gui-default-bordercolor) !important;
}

/*div[data-gui-control='window'] >:first-child, div[data-gui-control='window'] >:last-child
{
    border-top-left-radius: inherit !important;
    border-top-right-radius: inherit !important;
}*/

div[data-gui-control='window'][data-maximized='true']
{
    width: auto !important;
    height: auto !important;
    margin: 10px !important;
}
div[data-gui-control='window'][data-maximize-button='false'] [data-gui-window-part-title-button='maximize']
{
    display: none !important;
}

div[data-gui-control='window'][data-close-button='false'] [data-gui-window-part-title-button='close']
{
    display: none !important;
}

div[data-gui-control='window'] div[data-gui-window-part='title']
{
    box-sizing: border-box !important;
    padding: 5px !important;
    min-height: 30px !important;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    font-size: 1.2em;
    font-weight: bold;
    display: flex !important;
    align-items: start !important;
    justify-content: space-between !important;
    color: var(--gui-default-coloraccent) !important;
}

div[data-gui-control='window'] div[data-gui-window-part='title'] > div:first-child /*text*/
{
    box-sizing: content-box !important;
    margin-right: 5px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

div[data-gui-control='window'] div[data-gui-window-part='title'] > div:last-child /*action buttons content*/
{
    display: flex !important;
}

div[data-gui-control='window'] div[data-gui-window-part='title'] > div:last-child > div /*action button*/
{
    box-sizing: content-box !important;
    width: 18px !important;
    height: 18px !important;
    padding: 0 !important;
    margin-left: 5px !important;
    fill: currentColor !important;
    cursor: pointer !important;
}

div[data-gui-control='window'] div[data-gui-window-part='content']
{
    box-sizing: content-box !important;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 8px !important;
    overflow: auto !important;
}

div[data-gui-control='window'] div[data-gui-window-part='content'][data-url]
{
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
}

div[data-gui-control='window'] div[data-gui-window-part='content'] > iframe
{
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

div[data-gui-control='window'] div[data-gui-window-part='buttons']
{
    box-sizing: content-box !important;
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    padding: 5px !important;
    text-align: right !important;
    background-color: var(--gui-default-color) !important;
    border-top: 1px solid var(--gui-default-color) !important;
}

div[data-gui-control='window'] div[data-gui-window-part='buttons'] div
{
    margin-left: 3px !important;
    margin-right: 3px !important;
}

/*div[data-gui-window-part-button-name='YesButton']
{
    color: var(--gui-colorinfo, var(--gui-default-colorinfo));
}

div[data-gui-window-part-button-name='NoButton']
{
    color: var(--gui-colorerror, var(--gui-default-colorerror));
}*/

@media (hover: hover)
{
    div[data-gui-control='window'] div[data-gui-window-part='title'] > div:hover
    {
        fill: currentColor !important;
    }

    div[data-gui-control='window'] div[data-gui-window-part='title'] > div:last-child > div:hover
    {
        background-color: var(--gui-default-coloraccent) !important;
        color: var(--gui-default-colortexthover) !important;
    }

    div[data-gui-control='window'] div[data-gui-window-part='buttons'] div:hover
    {
        background-color: var(--gui-default-coloraccent) !important;
        border: 1px solid var(--gui-default-colordark) !important;
        color: var(--gui-default-colortexthover) !important;
    }
}
/* WINDOW */

/* TOOLBAR */
div[data-gui-control='toolbar']
{
    box-sizing: border-box !important;
    /*position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    padding: 0 !important;*/
    margin-bottom: 5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    background-color: var(--gui-default-color) !important;
}

div[data-gui-toolbar='nextbutton']
{
    position: absolute !important;
    top: 0 !important;
    right: 5px !important;
    bottom: 0 !important;
    fill: currentColor !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

div[data-gui-toolbar='item']
{
    box-sizing: border-box !important;
    display: inline-block !important;
    padding: 5px !important;
    text-align: center !important;
    fill: var(--gui-default-colortext) !important;
    cursor: pointer !important;
}

div[data-gui-toolbar='item'] select
{
    min-width: 80px !important;
    width: 80px;
}

div[data-gui-toolbar='item'] :first-child
{
    width: 16px;
    height: 16px;
    margin-right: 5px;
}

div[data-gui-toolbar='item'] *
{
    vertical-align: middle !important;
}

div[data-gui-toolbar='more']
{
    box-sizing: border-box !important;
    position: fixed !important;
    padding: 5px !important;
    text-align: center !important;
    overflow: auto !important;
}

div[data-gui-toolbar='more'] div[data-gui-toolbar='item']
{
    display: block !important;
    text-align: left !important;
}

div[data-gui-toolbar='more'] div[data-gui-toolbar='item'] :first-child
{
    margin-right: 5px !important;
}

div[data-gui-toolbar='more'] div[data-gui-toolbar='item'] *
{
    display: inline-block !important;
    text-align: left !important;
}

@media (hover: hover)
{
    div[data-gui-toolbar='item']:hover
    {
        background-color: var(--gui-default-coloraccent) !important;
        color: var(--gui-default-colortexthover) !important;
        fill: var(--gui-default-colortexthover) !important;
        /*box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.26) !important;*/
    }
}
/* TOOLBAR */

/* TABPANEL */
div[data-gui-control='tabpanel']
{
    box-sizing: border-box !important;
    background-color: var(--gui-default-colortexthover) !important;
}

div[data-gui-control='tabpanel'] div[data-gui-tabpanel='tabs']
{
    box-sizing: border-box !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

div[data-gui-control='tabpanel'] div[data-gui-tabpanel='tabpanelscrollbutton']
{
    position: absolute !important;
    top: 0 !important;
    fill: currentColor !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

div[data-gui-control='tabpanel'] div[data-gui-tabpanel='tabs'] div[data-gui-tabpanel='tab']
{
    display: inline-block !important;
    margin-bottom: -1px !important;
    padding: 5px !important;
    font-weight: bold !important;
    text-align: center !important;
    border: 1px solid var(--gui-default-bordercolor) !important;
    border-top: 2px solid var(--gui-default-color) !important;
    color: var(--gui-default-color) !important;
    cursor: pointer !important;
}

div[data-gui-control='tabpanel'] div[data-gui-tabpanel='tabs'] div[data-gui-tabpanel='tab'][data-checked]
{
    border-top: 2px solid var(--gui-default-coloraccent) !important;
    border-bottom: 1px solid background-color: var(--gui-default-colortexthover) !important;
    color: var(--gui-default-colortext) !important;
}

div[data-gui-control='tabpanel'] div[data-gui-tabpanel='tabscontent']
{
    box-sizing: border-box !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    overflow: auto !important;
    padding: 10px !important;
    border: 1px solid var(--gui-default-bordercolor) !important;
}

div[data-gui-control='tabpanel'] div[data-gui-tabpanel='tabscontent'] div[data-gui-tabpanel='tabcontent']
{
    box-sizing: border-box !important;
    padding: 0;
    margin: 0 !important;
}

@media (hover: hover)
{
    div[data-gui-control='tabpanel'] div[data-gui-tabpanel='tabs'] div[data-gui-tabpanel='tab']:hover
    {
        color: var(--gui-default-coloraccent) !important;
    }
}
/* TABPANEL */

/* LISTVIEW */
table[data-gui-control='listview']
{
    box-sizing: border-box !important;
    width: initial !important;
    border-collapse: collapse !important;
    table-layout: fixed !important;
}

table[data-gui-control='listview'] thead
{
    position: relative !important;
    display: block !important;
    overflow: visible !important;
}

table[data-gui-control='listview'] thead th
{
    padding: 5px !important;
    cursor: default !important;
    word-break: break-word !important;
    text-align: left;
    font-weight: bold;
    background-color: var(--gui-default-color);
    border-bottom: 1px solid var(--gui-default-colordark);
}

table[data-gui-control='listview'] thead th[data-type='2']
{
    text-align: right !important;
}

table[data-gui-control='listview'] thead th:last-child
{
    min-width: 0 !important;
    max-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

table[data-gui-control='listview'] tbody
{
    position: relative !important;
    display: block !important;
    overflow-y: scroll !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
}

/*table[data-gui-control='listview'] tbody tr[data-selected]
{
    background-color: var(--gui-default-coloraccent);
    color: background-color: var(--gui-default-colortexthover);
}*/

table[data-gui-control='listview'] tbody td
{
    padding: 5px !important;
    vertical-align: top !important;
    word-break: break-word !important;
    border-bottom: 1px solid var(--gui-default-color);
}

table[data-gui-control='listview'] tbody td[data-type='2']
{
    text-align: right !important; word-break: normal !important;
}

table[data-gui-control='listview'] tbody td[data-type='2'] *:not(:last-child)
{
    margin-right: 5px !important;
}

table[data-gui-control='listview'][data-mobile-type='true'] thead th:not(:last-child)
{
    display: none !important;
}

table[data-gui-control='listview'][data-mobile-type='true'] tbody td div:first-child /*listbox*/
{
    width: auto !important;
    display: block !important;
    margin: 0 !important;
    padding: 5px !important;
    border: 1px solid transparent !important;
    vertical-align: top !important;
    white-space: normal !important;
    cursor: default !important;
}

table[data-gui-control='listview'][data-mobile-type='true'] tbody td div div[data-type='1']
{
    margin: 0 !important;
    padding: 0 !important;
}

table[data-gui-control='listview'][data-mobile-type='true'] tbody td div div[data-type='2']
{
    margin: 0 !important;
    padding: 0 !important;
    float: right !important;
    text-align: right !important;
}

table[data-gui-control='listview'][data-mobile-type='true'] tbody td div div[data-type='1'] *
{
    vertical-align: middle !important;
}
/* LISTVIEW */