:root { --primarycolorgrey: #000000; --accentcoloryellow: #fbc223; --primarycolorwhite: #ffffff; --secondarycolorgrey1: #787878; --secondarycolorgrey2: #c8c8c8; --secondarycolorgrey3: #e1e1e1; --secondarycolorgrey4: #f5f5f5; --black:#000000
}

input, textarea, select { resize:none; font-family:Tahoma, Helvetica, Verdana, Arial, sans-serif; color:var( --primarycolorgrey ); }

input[type = "text"], input[type = "password"], input[type = "number"], input[type = "time"], textarea, select { background-color:white; border:1px solid var( --secondarycolorgrey2 ); box-shadow:none; }

input[disabled], input[readonly], textarea[disabled], select[disabled], button:disabled {
    border-color:var( --secondarycolorgrey3 );
    background-color:var( --secondarycolorgrey4 );
}

    input:checked + .toggle-field-slider {
        background-color: var( --accentcoloryellow );
    }

.button, button:enabled { border:1px solid var( --primarycolorgrey ) }
.button:hover, button:hover:enabled { color:#000000; cursor:pointer; border:1px solid var( --primarycolorgrey ); }
.button_inactive { border:1px solid var( --primarycolorgrey ); }

.quickMenuEntry { background:url( "images/quickNaviBtn.png" ) no-repeat right bottom var( --secondarycolorgrey2 ); padding:3px; }

.quickMenuEntryHover { background:url( "images/quickNaviBtn_on.png" ) no-repeat right bottom #000000; }
.quickMenuEntrySelected { background:url( "images/quickNaviBtn_on.png" ) no-repeat right bottom #000000; }

a.quickMenuEntry:link,
a.quickMenuEntry:visited,
a.quickMenuEntry:active { color:var( --primarycolorgrey ); padding-left:5px; background:none }

a.quickMenuEntry:hover { color:var( --primarycolorgrey ); }

/* AJAX Calendar */
.Calendar .ajax__calendar_header { background:url( ../COMMON/images/PanelHeaderBg.png ) repeat-x left top var( --primarycolorgrey ); }
.Calendar .ajax__calendar_today { background:url( ../COMMON/images/PanelHeaderBg.png ) repeat-x left top var( --primarycolorgrey ); }

.Calendar .ajax__calendar_prev { background-repeat:no-repeat; background-position:50% 50%; background-image:url( "../common/images/ajax/arrow_left.gif" ); }
.Calendar .ajax__calendar_next { background-repeat:no-repeat; background-position:50% 50%; background-image:url( "../common/images/ajax/arrow_right.gif" ); }
.Calendar .ajax__calendar_dayname { background:url( ../COMMON/images/menuHeadItemBg.png ) repeat-x right bottom var( --primarycolorgrey ); }

.combobox .ajax__combobox_itemlist { background-color:var( --primarycolorwhite ); }

.combobox .ajax__combobox_buttoncontainer button { border:1px solid var( --secondarycolorgrey2 ); border-top:1px solid var( --secondarycolorgrey2 ); border-bottom:1px solid var( --secondarycolorgrey2 ); border-right:1px solid var( --secondarycolorgrey2 ); }

/* AJAX TabControl */
.ajax__tab_default .ajax__tab { margin-top:0 }
.tabs .ajax__tab_header .ajax__tab_outer { background-color:var( --primarycolorwhite ); color:var( --primarycolorgrey ); }

.tabs .ajax__tab_header .ajax__tab_outer:active { background-color:var( --accentcoloryellow ); color:var( --primarycolorwhite ); }

.tabs .ajax__tab_header .ajax__tab_outer:hover { background:url( ../COMMON/images/menuHeadItemBg.png ) repeat-x right top var( --accentcoloryellow ); }
.tabs .ajax__tab_active .ajax__tab_tab {
    background: var( --accentcoloryellow );
    border-bottom: 1px solid var( --accentcoloryellow );
    color:var( --black );
}
.tabs .ajax__tab_body { padding:10px; border-top:1px solid var( --secondarycolorgrey3 ); border-left:1px solid var( --secondarycolorgrey3 ); border-right:1px solid var( --secondarycolorgrey3 ); border-bottom:1px solid var( --secondarycolorgrey3 ); border-top:2px solid var( --accentcoloryellow ); background:#ffffff; }

.activeTab { color:var( --primarycolorwhite ); background-color:var( --accentcoloryellow ); }

.tabContent { border-top-color:var( --accentcoloryellow ); }

/* flatpickr Calendar*/
.flatpickr-day.selected,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.selected:focus { background:var( --accentcoloryellow ); color:var(--primarycolorgrey); }
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover { color:var( --accentcoloryellow ); }

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill:var( --accentcoloryellow ); }