/**************************** _Base2021.2.css ****************************/
/**************************** START **********************/
/**************************** START **********************/
/**************************** START **********************/


/**************************** GENERAL **/
/* Do not change anything in these configurations */
html
{
    margin: 0;
    padding: 0;
	min-width: 320px;
    min-height: 100%;
}
body
{
	background-color: var(--BodyBackgroundColor);
	margin: 0px;
	padding: 0px;
	clear: none;
    min-height: 100%;
}

body, p, table, tr, td, th, q, li
{
	font-family: var(--MainFontFamily);
	font-weight: var(--MainFontWeight);
	text-align: left; 
	font-size: var(--MainFontSize);
    line-height: calc(var(--MainFontSize) * var(--MainLineHeightRatio));
	color: var(--MainFontColor);
}
h1, h2, h3, h4, h5, h6
{
	font-family: var(--HsFontFamily);
	font-weight: var(--HsFontWeight);
	text-align: left; 
    clear: both;
}
p, q, li
{
	padding: 0px;
	margin: 12px 0px 12px 0px;
	clear: none;
}
input:not([type='submit']):not([type='radio']), select, textarea, option
{
	font-family: var(--FormControlFontFamily);
	font-weight: var(--FormControlFontWeight);
	font-size: var(--FormControlFontSize);
	text-align: left; 
    vertical-align: baseline;
    background: var(--FormControlBackgroundColor);
}
input[type='submit'], button
{
	font-family: var(--FormButtonFontFamily);
	font-weight: var(--FormButtonFontWeight);
	font-size: var(--FormButtonFontSize);
	text-align: left; 
    vertical-align: baseline;
    background: var(--FormButtonBackgroundColor);
    color: var(--FormButtonTextColor);
}
ul, ol
{
    color: var(--ListColor);
	margin: 0px;
    padding: 0px 0px 0px 40px;
	margin-bottom: 12px;
}
ul ul, ul ol, ol ol, ol ul
{
    margin: 4px 0 0 0;                            /** CanChange: Spacing between UL/OL inside UL/OL **/
}
li 
{
	margin: 4px 0px 4px 0px;        /** CanChange: Inter LI Spacing **/
}
table, tr, td, th, thead, tfoot, tbody
{
	margin: 0px;
	padding: 0px;
	clear: none;
    text-align: left;
	border-spacing: 0;
}
table
{
	border-collapse: collapse;
}
td, th
{
	vertical-align: top;
}



/**************************** ADDITIONAL STYLING FOR Hs ELEMENTS **********************/
/* Your styles in here */
/* Font family, weight are var-configured, but can be overriden. Text-align is configured above.*/
/* Required configurations include font-size and color; padding and margin and line-height. */

h1 
{
	font-size: 2.4rem;
    color: var(--Black);
    padding: 1rem 0 0 0;
	margin-top: 0;
	margin-bottom: 0.5rem;
	line-height: calc(2.4rem * 1.25);
    text-transform: none;
}
h2
{
	font-size: 32px;
    color: var(--Blue);
    padding: 20px 0px 0px 0px;
	margin-top: 0;
	margin-bottom: 20px;
	line-height: calc(32px * 1.25);
    text-transform: none;
}
h3
{
	font-size: 24px;
    color: var(--Blue);
    padding: 20px 0px 0px 0px;
	margin-top: 0;
	margin-bottom: 12px;
    text-transform: none;
	line-height: calc(24px * 1.25);
}
h4
{
	font-size: 20px;
    color: var(--Blue);
    padding: 12px 0px 0px 0px;
	margin-top: 0;
	margin-bottom: 12px;
	line-height: 20px;
}

/****************************  ADDITIONAL STYLING FOR FORM CONTROL ELEMENTS **/
/* Your styles for input:not([type='submit']), select, textarea in here */
/* Standard font family, weight, size, color and background are var-configured */

input:not([type='submit']):not([type='file']):not([type='radio']), select, textarea
{
    padding: 2px 2px;
    border-radius: 0;
    box-sizing: border-box;
    border: solid 1px var(--Black);
    outline: none;
}
input:not([type='submit']):not([type='radio']), select
{
    /* height: 50px; */
}

/****************************  ADDITIONAL STYLING FOR FORM BUTTON ELEMENTS **/
/* Your styles for input[type='submit'], button in here */


/****************************  ADDITIONAL STYLING FOR TABLE ELEMENTS **/


/**************************** APS Class - If not used, first H's, P's, OL's, UL's have a margin-top and padding-top of 0; and last childs have a margin-bottom of 0 **/
div>h1:not(.APS):first-child, div>h2:not(.APS):first-child, div>h3:not(.APS):first-child, div>h4:not(.APS):first-child, div>h5:not(.APS):first-child, div>h6:not(.APS):first-child, div>p:not(.APS):first-child, div>ul:not(.APS):first-child, div>ol:not(.APS):first-child,
td>h1:not(.APS):first-child, td>h2:not(.APS):first-child, td>h3:not(.APS):first-child, td>h4:not(.APS):first-child, td>h5:not(.APS):first-child, td>h6:not(.APS):first-child, td>p:not(.APS):first-child, td>ul:not(.APS):first-child, td>ol:not(.APS):first-child,
th>h1:not(.APS):first-child, th>h2:not(.APS):first-child, th>h3:not(.APS):first-child, th>h4:not(.APS):first-child, th>h5:not(.APS):first-child, th>h6:not(.APS):first-child, th>p:not(.APS):first-child, th>ul:not(.APS):first-child, th>ol:not(.APS):first-child,
li:not(.APS):first-child
{
    margin-top: 0;
	padding-top: 0;
}
div>h1:not(.APS):last-child, div>h2:not(.APS):last-child, div>h3:not(.APS):last-child, div>h4:not(.APS):last-child, div>h5:not(.APS):last-child, div>h6:not(.APS):last-child, div>p:not(.APS):last-child, div>ul:not(.APS):last-child, div>ol:not(.APS):last-child,
td>h1:not(.APS):last-child, td>h2:not(.APS):last-child, td>h3:not(.APS):last-child, td>h4:not(.APS):last-child, td>h5:not(.APS):last-child, td>h6:not(.APS):last-child, td>p:not(.APS):last-child, td>ul:not(.APS):last-child, td>ol:not(.APS):last-child,
th>h1:not(.APS):last-child, th>h2:not(.APS):last-child, th>h3:not(.APS):last-child, th>h4:not(.APS):last-child, th>h5:not(.APS):last-child, th>h6:not(.APS):last-child, th>p:not(.APS):last-child, th>ul:not(.APS):last-child, th>ol:not(.APS):last-child,
li:not(.APS):last-child
{
	margin-bottom: 0;
}

/**************************** FIX ELEMENTS **/
div, form { margin: 0px; padding: 0px; }
div { padding-top: 0.01px; padding-bottom: 0.01px; text-align: left; }
img { border: none; display: block;}
p img { display: inline;}
table { border-spacing: 0px; border-collapse: collapse; }
td, th { border-spacing: 0px; vertical-align: top; }
object {display: block}

/**************************** A ELEMENT **/
a 
{
    color: var(--Black);
    text-decoration: underline;
	cursor: pointer;
	font-weight: inherit;
}
a:hover
{
    text-decoration: underline;
}

/**************************** LEGACY STYLES **********************/
.Bordered 
{
    border: black 1px solid;
}
div.FormGeneric div.ValidatorErrors 
{    
	background-color: var(--Red);
	border: solid 1px #000000;
	margin-bottom: 8px;
}
div.FormGeneric div.ValidatorErrors p {
	color: var(--White);
	margin: 8px 10px 8px 10px;
}

/**************************** END **********************/
/**************************** END **********************/
/**************************** END **********************/

/**************************** _Root.css ****************************/
button
{
    font-family: var(--FormButtonFontFamily);
	text-align: center; 
    background-color: var(--FormButtonBackgroundColor);
    font-weight: var(--FormButtonFontWeight);
    border-radius: 8px;
    padding: 20px 40px;
    font-size: var(--FormButtonFontSize);
    box-shadow: none;
    border: none;
    color: var(--FormButtonTextColor);
    cursor: pointer;
}
button:hover
{
    background-color: var(--FormButtonBackgroundColorHover);
}

.CenterSelfBlock
{
    margin-left: auto;
    margin-right: auto;
    width: max-content;
    display: block;
}
.RightSelfBlock
{
    margin-left: auto;
    margin-right: 0;
    width: max-content;
    display: block;
}
.CenterChildrenInlineBlocks
{
    text-align: center;
}

/**************************** _Variables.css ****************************/
:root
{
    --Black: #202020;
    --White: #ffffff;
    --DarkGreen: #00703c;
    --DarkGreenShade80: #338d63;
    --DarkGreenShade20: #cce2d8;
    --DarkGreenShade10: #e5f0eb;
    --LightGray: #ccc;
    --DarkGray: #555;
    --LightGreen: #c0d72e;
    --Gray: #767676;
    --Red: #a00000;

    --BodyBackgroundColor: #ffffff;

    --MainFontFamily: 'Source Sans Pro', sans-serif;
    --MainFontWeight: 400;
    --MainFontSize: 11px;
    --MainLineHeightRatio: 1.25;
    --MainFontColor: var(--Black);

    --HsFontFamily: 'Source Sans Pro', sans-serif;
    --HsFontWeight: 700;
    
    --FormControlFontFamily: 'Source Sans Pro', sans-serif;
    --FormControlFontWeight: 600;
    --FormControlFontSize: 12px;
    --FormControlTextColor: var(--Black);
    --FormControlBackgroundColor: var(--White);

    --FormButtonFontFamily: 'Source Sans Pro', sans-serif;
    --FormButtonFontWeight: 700;
    --FormButtonFontSize: 16px;
    --FormButtonTextColor: var(--White);
    --FormButtonBackgroundColor: var(--DarkGreen);
    --FormButtonBackgroundColorHover: var(--DarkGreenShade80);
    --FormButtonBackgroundColorLowlight: var(--DarkGreenShade20);

    --ListColor: var(--Black);

    --MainFontSizeS: 10px;
    --HeaderTopBackground: #305065;
    --HeaderTopFreezedBackground: #204055;
    --HeaderTopText: white;
    --HeaderFilterBackground: #cccccc;
    --PanelsWrapperPadding: 8px;
    --IconSizeL: 16px;
    --IconSizeXL: 24px;
    --IconColorDisabled: #cccccc;
    --ButtonFilterInactiveBackground: blue;
    --ButtonFilterActiveBackground: red;
    --ButtonFreezeColsActiveBackground: red;
    --AlertBackground: #ffffff;
    --AlertBorder: #000000;
    --AlertButtonBackground: var(--FormButtonBackgroundColor);
    --AlertButtonBackgroundDisabled: var(--FormButtonBackgroundColorLowlight);
    --AlertButtonTextColor: var(--FormButtonTextColor);
    --AlertButtonBackgroundHover: var(--FormButtonBackgroundColorHover);
    --AlertTitleBackground: #ff0000;
    --AlertTitleForeground: #ffffff;
    --AlertTitleButtonBackground: #ff0000;
    --AlertTitleButtonForeground: #ffffff;
    --AlertTitleButtonBackgroundHover: #ff4040;
    --AlertToolbarBackground: #dadada;
    --MenuPinnedBackground: #103045;
    --MenuFloatedBackground: #103045;
    --LogInBackground: #103045;
    --LogInWindowBackground: #ffffff;
    --MenuTextFontColor: #cacaca;
    --MenuH4FontColor: #dadada;
    --MenuH1FontColor: #f8f8f8;

    --SelectorNoneBackground: #608095;
    --SelectorAppliedBackground: #cccccc;
    --SortHandleBackground: #406075;

    --ErrorBackground: #c00000;
    --ErrorText: #ffffff;
    --EditingBackground: #60a520;

    --LoginBackground: #103045;

    --ExpandButton: #888888;
    --ExpandButtonHover: #305065;

    --FieldHover: #f0f0f0;

    --InfInfRelatedTableRecordPaddingBottom: 8px;

    --RecordDeleteTableCellBorderColor: #000000;
}

/* IMPORTANT CLASSES FOR LAYOUT */

/* Inside Grids, .Item's that need to have: div.Image, h4, div.Desc, div.Link & div.Progress*/

/* Section.Content can be .WhiteBackground or .GrayBackground */
/* Inside Section.Content, a div.Content that is .Read (adjusts line height) and .ConstraintWidth or .ConstraintWidthTight */

/* To float images, div.AvoidWidows with two divs inside: div.FL & div.Content */

/**************************** Alert.css ****************************/
div.AlertWrapper
{
    display: none;
    padding: 0;
    position: absolute;
    z-index: 20;
    overflow: hidden;
    bottom: 20px;
}
div.Alert
{
    display: flex;
    flex-direction: column;
    max-height: 100%;
}
div.AlertTop
{
    flex: 0 0 32px;
    border-top: solid 1px var(--AlertBorder);
    border-left: solid 1px var(--AlertBorder);
    border-right: solid 1px var(--AlertBorder);
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
}
div.AlertTitle
{
    flex: 1 1 auto;
    background-color: var(--AlertTitleBackground);
}
div.AlertTitle p
{
    font-weight: 700;
    color: var(--AlertTitleForeground);
    font-size: calc(var(--MainFontSize) * 1.25);
    line-height: 32px;
    user-select: none;
    padding: 0 20px;
}
div.AlertMinimizeButton
{
    flex: 0 0 32px;
    height: 32px;
    box-sizing: border-box;
    text-align: center;
    background-color: var(--AlertTitleButtonBackground);
    color: var(--AlertTitleButtonForeground);
    line-height: 32px;
}
div.AlertMinimizeButton:hover
{
    background-color: var(--AlertTitleButtonBackgroundHover);
    cursor: pointer;
}
div.AlertMinimizeButton i
{
    line-height: 32px;
}
div.AlertCloseButton
{
    flex: 0 0 32px;
    height: 32px;
    box-sizing: border-box;
    text-align: center;
    background-color: var(--AlertTitleButtonBackground);
    color: var(--AlertTitleButtonForeground);
    line-height: 32px;
}
div.AlertCloseButton:hover
{
    background-color: var(--AlertTitleButtonBackgroundHover);
    cursor: pointer;
}
div.AlertCloseButton i
{
    line-height: 32px;
}
div.AlertContent
{
    background-color: var(--AlertBackground);
    border-left: solid 1px var(--AlertBorder);
    border-right: solid 1px var(--AlertBorder);
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 100px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: auto auto;1
}
div.AlertOK
{
    flex: 0 0 auto;
    border-bottom: solid 1px var(--AlertBorder);
    border-left: solid 1px var(--AlertBorder);
    border-right: solid 1px var(--AlertBorder);
    background-color: var(--AlertButtonBackground);
    padding: 12px;
    text-align: center;
    color: var(--AlertButtonTextColor);
    font-weight: 700;
    font-size: calc(var(--MainFontSize) * 1.25);
    user-select: none;
    cursor: pointer;
    box-sizing: border-box;
}
div.AlertOK:hover
{
    background-color: var(--AlertButtonBackgroundHover)
}
div.AlertOK.Disabled
{
    background-color: var(--AlertButtonBackgroundDisabled)
}
div.AlertLayout
{
    display: grid;
    grid-template-columns: auto auto;
}
div.AlertNavigation
{
    padding: 20px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    background-color: #f0f0f0;
}
div.AlertNavigation p
{
    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: 0;
    margin-bottom: 0;
    clear: both;
    overflow: hidden;
    cursor: pointer;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
    user-select: none;
}
div.AlertNavigation p:hover
{
    background-color: rgba(255,255,255,0.5);
}

div.AlertInside
{
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
}
div.AlertInside progress
{
    display: none;
}

div.AlertInside input[type='text'], div.AlertInside select
{
    width: 100%;
    box-sizing: border-box;
}

div.AlertContent iframe
{
    width: 100%;
    height: calc(100% - 2px);
    
    box-sizing: border-box;
    border: none;
}

div.AlertContent div.FormRecordFieldCategory
{
    display: inline-grid; 
    grid-column-gap: 20px; grid-row-gap: 4px;
    box-sizing: border-box;
}
div.AlertContent div.FormRecordFieldCategory p
{
    user-select: none;
}
div.AlertContent div.FormRecordFieldCategory h4:not(:first-child)
{
    margin-top: 16px;
}


div.AlertRemainingSpace
{
    flex: 1000 1000 auto;
}

div.Alert div.OpErrors
{
    background: var(--ErrorBackground);
    padding: 10px;
    margin-bottom: 20px;
}
div.Alert div.OpErrors p
{
    color: var(--ErrorText);
}
div.Alert div.AlertToolbar
{
    grid-column: span 2;
    display: flex;
    flex-direction: row;
    align-items: baseline;
    padding: 4px 20px 4px 20px;
    background-color: var(--AlertToolbarBackground);
    position: sticky;
    top: 0;
}
div.Alert div.AlertToolbar p {
    flex: 0 0 auto;
    margin-right: 20px;
    margin-bottom: 4px;
    background-color: var(--AlertTitleForeground);

}
div.Alert div.AlertToolbar button {
    flex: 0 0 auto;
    padding: 2px 10px 4px 10px;
    margin-right: 10px;
}

/**************************** AlertColumnSettings.css ****************************/
div.GridColumnVisibility
{
    display: grid; grid-template-columns: max-content 1fr 1fr; align-items: flex-start; column-gap: 40px;
    user-select: none;
}
div.GridColumnVisibility>div
{
    background-color: #f0f0f0;
    padding: 20px;
    position: sticky;
    top: 0;
}

div.GridColumnVisibility div p
{
    padding-top: 4px;
    padding-bottom: 4px;
    margin-top: 0;
    margin-bottom: 0;
    clear: both;
    overflow: hidden;
    
}
div.GridColumnVisibility div p.Draggable
{
    cursor: pointer;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
}
div.GridColumnVisibility div p.ColumnLayoutPreset
{
    cursor: pointer;
    border-radius: 8px;
    padding-left: 4px;
    padding-right: 4px;
}
div.GridColumnVisibility div p.ColumnLayoutPreset:hover
{
    background-color: rgba(255,255,255,0.5);
}
div.GridColumnVisibility div h4
{
    cursor: pointer;
}
div.GridColumnVisibility div p.Draggable:hover
{
    background-color: rgba(255,255,255,0.5);
}
div.GridColumnVisibility p.AlreadyInList
{
    color: #dddddd;
}
div.GridColumnVisibility div a
{
    float: right;
}
div.GridColumnVisibility div#ColumnsLayout 
{
    min-height: 60px;
    border: solid 1px rgba(0,0,0,0.2);
    padding: 10px;
}
div.GridColumnVisibility div#ColumnsLayout span
{
    float: left;
}
div.GridColumnVisibility div#ColumnsLayout p
{
    cursor: pointer;
}
div.GridColumnVisibility div#ColumnsLayout p:hover
{
    background-color: rgba(255,255,255,0.5);
}


/**************************** ControlAutocomplete.css ****************************/
/** These are the CSS rules for the Autocomplete control, wherever it appears */
/** Right now, it may appear as a Selector or inside the alert for editing a field */
/** In some cases, we need to change the CSS depending on this - and that's why some rules are different depending if it's inside div.SelectorSelectForIs or div.AlertInside */

div.ControlAutocomplete
{
    position: relative;
    box-sizing: border-box;
}

div.ControlAutocomplete input.AutocompleteInput
{
    position: relative;
    box-sizing: border-box;
    border: solid 1px #000000;
}
div.ControlAutocomplete input.AutocompleteInput:focus
{
    outline: none;
}
div.ControlAutocomplete input.Autocomplete.Editing
{
    background-color: var(--EditingBackground);
    color: #ffffff;
}
div.ControlAutocomplete input.Autocomplete.Error
{
    background-color: var(--ErrorBackground);
    color: #ffffff;
}

div.ControlAutocomplete div.AutocompleteDropdown
{
    background-color: #ffffff;
    overflow: auto;
    border: solid 1px #000000;
    min-width: 100%;
}
div.SelectorSelectForIs div.ControlAutocomplete div.AutocompleteDropdown {position: absolute; z-index: 9; max-height: 90vh;}
div.AlertInside div.ControlAutocomplete div.AutocompleteDropdown {position: fixed; z-index: 99; max-height: 50vh;}

div.ControlAutocomplete div.AutocompleteItem
{
    cursor: pointer;
    margin: 0;
    padding: 4px 12px;
    width: 100%;
    box-sizing: border-box;
}
div.ControlAutocomplete div.AutocompleteItem:hover
{
    background-color: blue;
    color: #ffffff;
}

div.ControlAutocomplete div.AutocompleteAlert
{
    display: none;
    background-color: #ff0000;
    border: solid 1px #000000;
    width: 100%;
    padding: 2px 6px;
    box-sizing: border-box;
}
div.SelectorSelectForIs div.ControlAutocomplete div.AutocompleteAlert {position: absolute; z-index: 9;}
div.AlertInside div.ControlAutocomplete div.AutocompleteAlert {z-index: 99;}

div.ControlAutocomplete div.AutocompleteAlert p
{
    color: #ffffff;
}

div.ControlAutocomplete div.AutocompleteDelete
{
    position: absolute;
    background-color: red;
    color: #ffffff;
    width: 20px;
    height: 100%;
    top: 0px;
    display: none;
    text-align: center;
    cursor: pointer;
    border-top: solid 1px #000000;
    border-bottom: solid 1px #000000;
    border-right: solid 1px #000000;
    box-sizing: border-box;
}

div.ControlAutocomplete div.AutocompleteDelete:hover
{
    background-color: #000000;
}
div.SelectorSelectForIs div.ControlAutocomplete div.AutocompleteDelete {right: 1px;}

div.ControlAutocomplete div.AutocompleteLoading
{
    position: absolute;
    background-color: green;
    color: #ffffff;
    width: 20px;
    height: 100%;
    top: 0px;
    display: none;
    text-align: center;
    cursor: pointer;
    border-top: solid 1px #000000;
    border-bottom: solid 1px #000000;
    box-sizing: border-box;
}

/**************************** ControlCalendar.css ****************************/
/** ControlCalendar */
div.ControlCalendar
{
    position: relative;
}
div.ControlCalendar input
{
    box-sizing: border-box;
}
div.ControlCalendar input.Editing
{
    background-color: var(--EditingBackground);
    color: #ffffff;
}
div.ControlCalendar input.Error
{
    background-color: var(--ErrorBackground);
    color: #ffffff;
}

div.ControlCalendar div.CalendarDropdown
{
    background-color: #ffffff;
    z-index: 9;
    max-height: 50vh;
    overflow: auto;
    border: solid 1px #000000;
    min-width: 100%;
    display: none;
}
div.HeaderFilter2 div.ControlCalendar div.CalendarDropdown {position: absolute;}  /** Top is calculated on ControlCalendar.js */
div.HeaderFilter2 div.ControlRangeCalendar div.CalendarDropdown {position: absolute;}  /** Top is calculated on ControlCalendar.js */
div.AlertContent div.CalendarDropdown {}   /** Top should be zero inside the Alert */

div.ControlCalendar div.CalendarBar
{
	display: flex;
	flex-wrap: nowrap;
    width: 100%;
}
div.ControlCalendar span#CurrentMonth
{
	flex: 1 0 auto;
	padding: 4px;
	text-align: center;
}
div.ControlCalendar span#NextMonth
{
	flex: 0 0 auto;
	cursor: pointer;
	padding: 4px;
	text-align: right;
    background-color: #1095d3;
    color: #ffffff;
    padding: 4px;
    border-radius:2px;
}
div.ControlCalendar span#PreviousMonth {
    flex: 0 0 auto;
    cursor: pointer;
    padding: 4px;
    text-align: left;
    background-color: #1095d3;
    color: #ffffff;
    padding: 4px;
    border-radius: 2px;
}

div.ControlCalendar table.Calendar th {
    width: 30px;
    border: 1px solid #cccccc;
    border-collapse: collapse;
    padding: 2px 4px;
    box-sizing: border-box;
    text-align: center;
    background-color: #00448b;
    color: #ffffff;
}
div.ControlCalendar table.Calendar
{
    margin-top: 8px;
    width: 100%;
}
div.ControlCalendar table.Calendar td
{
	min-width: 24px;
	border: 1px solid #cccccc;
	border-collapse: collapse;
	padding: 2px 4px;
	box-sizing: border-box;
	text-align: right;
}

div.ControlCalendar table.Calendar td.Disabled
{
	color: #cccccc;
}
div.ControlCalendar table.Calendar td.Today
{
	background: #dddd00;
}
div.ControlCalendar table.Calendar td.Enabled:hover
{
	background-color: #1095d3;
	color: #ffffff;
	cursor: pointer;
}

/**************************** ControlCombobox.css ****************************/
/** These are the CSS rules for the Combobox control, wherever it appears */
/** Right now, it may appear as a Selector or inside the alert for editing a field */
/** In some cases, we need to change the CSS depending on this - and that's why some rules are different depending if it's inside div.SelectorSelectForIs or div.AlertInside */

div.ControlCombobox input.ComboboxInput
{
    box-sizing: border-box;
    border: solid 1px #000000;
    cursor: pointer;
    user-select: none;
}
div.ControlCombobox input.ComboboxInput:focus
{
    outline: none;
}
div.ControlCombobox input.ComboboxInput.Editing
{
    background-color: var(--EditingBackground);
    color: #ffffff;
}
div.ControlCombobox input.ComboboxInput.Error
{
    background-color: var(--ErrorBackground);
    color: #ffffff;
}
div.ControlCombobox div.ComboboxDropdown
{
    background-color: #ffffff;
    overflow: auto;
    border: solid 1px #000000;
    display: none;
    min-width: 100px;
}
div.SelectorSelectForIs div.ControlCombobox div.ComboboxDropdown {position: absolute; z-index: 9; max-height: 90vh;}
div.AlertInside div.ControlCombobox div.ComboboxDropdown { position: fixed; z-index: 99; max-height: 50vh; }

div.ControlCombobox input.ComboboxDropdown:focus
{
    outline: none;
}

div.ControlCombobox div.ComboboxDropdown p
{
    cursor: pointer;
    margin: 0;
    padding: 4px 12px;
}
div.ControlCombobox div.ComboboxDropdown p.Selected
{
    background-color: #f0f0f0;
}
div.ControlCombobox div.ComboboxDropdown p:hover
{
    background-color: #000080;
    color: #ffffff;
}

div.ControlCombobox div.ComboboxDropdown p.Active
{
    background-color: #0000a0;
    color: #ffffff;
}

/**************************** ControlComboboxMultiple.css ****************************/

/** SelectorComboboxMultiple */
div.ControlComboboxMultiple div.Box
{
    display: table;
    background-color: #ff0000;
    cursor: pointer;
    width: 100%;
    height: 100%;
    padding: 4px 12px;
    box-sizing: border-box;
    user-select: none;
}
div.ControlComboboxMultiple div.Box p
{
    display: table-cell;
    vertical-align: middle;
    color: #ffffff;
    text-align: center;
}

div.ControlComboboxMultiple div.ComboboxDropdown
{
    background-color: #ffffff;
    overflow: auto;
    border: solid 1px #000000;
    display: none;
    min-width: 100px;
}
div.SelectorSelectMultipleForIs div.ControlComboboxMultiple div.ComboboxDropdown {position: absolute; z-index: 9; max-height: 90vh;}

div.ControlComboboxMultiple div.ComboboxDropdown p
{
    cursor: pointer;
    margin: 0;
    padding: 4px 12px;
}
div.ControlComboboxMultiple div.ComboboxDropdown p:hover
{
    background-color: #000080;
    color: #ffffff;
}

div.ControlComboboxMultiple div.ComboboxDropdown p.Active
{
    background-color: #0000a0;
    color: #ffffff;
}
div.ControlComboboxMultiple div.ComboboxDropdown p 
{
    display: flex
}
div.ControlComboboxMultiple div.ComboboxDropdown p input
{
    flex: 0 0 auto;
    position: relative;
    top: -2px;
}
div.ControlComboboxMultiple div.ComboboxDropdown p span
{
    flex: 1 1 auto;
    user-select: none;
}

/**************************** ControlCommonRange.css ****************************/
/** SelectorCommonRange */
div.ControlCommonRange input.CommonRangeInput.Editing
{
    background-color: var(--EditingBackground);
    color: #ffffff;
}
div.ControlCommonRange input.CommonRangeInput.Error
{
    background-color: var(--ErrorBackground);
    color: #ffffff;
}
div.ControlCommonRange div.CommonRangeDropdown
{
    background-color: #ffffff;
    position: absolute;
    z-index: 9;
    max-height: 50vh;
    overflow: auto;
    border: solid 1px #000000;
    display: none;
}
div.ControlCommonRange div.CommonRangeDropdown p
{
    cursor: pointer;
    margin: 0;
    padding: 4px 12px;
}
div.ControlCommonRange div.CommonRangeDropdown p.Selected
{
    background-color: #f0f0f0;
}
div.ControlCommonRange div.CommonRangeDropdown p:hover
{
    background-color: #000080;
    color: #ffffff;
}


/**************************** ControlFile.css ****************************/


/**************************** ControlHTMLTinyMCEStringv5.css ****************************/
div.ControlHTMLTinyMCEStringv5 textarea
{
    box-sizing: border-box;
    width: 100%;
}

/**************************** ControlMonth.css ****************************/
div.ControlMonth
{
    /*display: flex;
    flex-wrap: nowrap;*/
}
div.ControlMonth input.MonthInput.Editing
{
    background-color: var(--EditingBackground);
    color: #ffffff;
}
div.ControlMonth input.MonthInput.Error
{
    background-color: var(--ErrorBackground);
    color: #ffffff;
}
div.ControlMonth div.MonthDropdown
{
    background-color: #ffffff;
    position: absolute;
    z-index: 9;
    max-height: 50vh;
    overflow: auto;
    border: solid 1px #000000;
    display: none;
}
div.ControlMonth div.MonthDropdown p
{
    cursor: pointer;
    margin: 0;
    padding: 4px 12px;
}
div.ControlMonth div.MonthDropdown p.Selected
{
    background-color: #f0f0f0;
}
div.ControlMonth div.MonthDropdown p:hover
{
    background-color: #000080;
    color: #ffffff;
}

/**************************** ControlQuarter.css ****************************/
div.ControlQuarter
{
    display: flex;
    flex-wrap: nowrap;
}
div.ControlQuarter input.QuarterInput.Editing
{
    background-color: var(--EditingBackground);
    color: #ffffff;
}
div.ControlQuarter input.QuarterInput.Error
{
    background-color: var(--ErrorBackground);
    color: #ffffff;
}
div.ControlQuarter div.QuarterDropdown
{
    background-color: #ffffff;
    position: absolute;
    z-index: 9;
    max-height: 50vh;
    overflow: auto;
    border: solid 1px #000000;
    display: none;
}
div.ControlQuarter div.QuarterDropdown p
{
    cursor: pointer;
    margin: 0;
    padding: 4px 12px;
}
div.ControlQuarter div.QuarterDropdown p.Selected
{
    background-color: #f0f0f0;
}
div.ControlQuarter div.QuarterDropdown p:hover
{
    background-color: #000080;
    color: #ffffff;
}


/**************************** ControlRangeCalendar.css ****************************/


/** SelectorDatesRange */
div.ControlRangeCalendar div.Flex>div input.Editing
{
    background-color: var(--EditingBackground);
    color: #ffffff;
}
div.ControlRangeCalendar div.Flex>div input.Error
{
    background-color: var(--ErrorBackground);
    color: #ffffff;
}
div.ControlRangeCalendar div.Flex
{
    display: flex;
    flex-direction: row;
}
div.ControlRangeCalendar div.Flex>div
{
    flex: 1 1 50%;
}
div.ControlRangeCalendar div.Flex>p
{
    flex: 0 0 auto;
    margin: 0;
}
div.ControlRangeCalendar div.CalendarDropdown
{
    background-color: #ffffff;
    position: absolute;
    z-index: 9;
    max-height: 50vh;
    overflow: auto;
    border: solid 1px #000000;
    min-width: 100%;
    display: none;
}
div.ControlRangeCalendar div.CalendarBar
{
	display: flex;
	flex-wrap: nowrap;
    width: 100%;
}
div.ControlRangeCalendar span#CurrentMonth
{
	flex: 1 0 auto;
	padding: 4px;
	text-align: center;
}
div.ControlRangeCalendar span#NextMonth
{
	flex: 0 0 auto;
	cursor: pointer;
	padding: 4px;
	text-align: right;
    background-color: #1095d3;
    color: #ffffff;
    padding: 4px;
    border-radius:2px;
}
div.ControlRangeCalendar span#PreviousMonth {
    flex: 0 0 auto;
    cursor: pointer;
    padding: 4px;
    text-align: left;
    background-color: #1095d3;
    color: #ffffff;
    padding: 4px;
    border-radius: 2px;
}

div.ControlRangeCalendar table.Calendar th {
    width: 30px;
    border: 1px solid #cccccc;
    border-collapse: collapse;
    padding: 2px 4px;
    box-sizing: border-box;
    text-align: center;
    background-color: #00448b;
    color: #ffffff;
}
div.ControlRangeCalendar table.Calendar
{
    margin-top: 8px;
    width: 100%;
}
div.ControlRangeCalendar table.Calendar td
{
	min-width: 24px;
	border: 1px solid #cccccc;
	border-collapse: collapse;
	padding: 2px 4px;
	box-sizing: border-box;
	text-align: right;
}

div.ControlRangeCalendar table.Calendar td.Disabled
{
	color: #cccccc;
}
div.ControlRangeCalendar table.Calendar td.Enabled:hover
{
	background-color: #1095d3;
	color: #ffffff;
	cursor: pointer;
}


/**************************** ControlRangeDouble.css ****************************/

div.ControlRangeDouble
{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
div.ControlRangeDouble>div
{
    flex: 1 1 50%;
}
div.ControlRangeDouble>p
{
    flex: 0 0 auto;
    margin: 0;
}
div.ControlRangeDouble>div input.Editing
{
    background-color: var(--EditingBackground);
    color: #ffffff;
}
div.ControlRangeDouble>div input.Error
{
    background-color: var(--ErrorBackground);
    color: #ffffff;
}

/**************************** ControlRangeInteger.css ****************************/

div.ControlRangeInteger
{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}
div.ControlRangeInteger>div
{
    flex: 1 1 50%;
}
div.ControlRangeInteger>p
{
    flex: 0 0 auto;
    margin: 0;
}
div.ControlRangeInteger>div input.Editing
{
    background-color: var(--EditingBackground);
    color: #ffffff;
}
div.ControlRangeInteger>div input.Error
{
    background-color: var(--ErrorBackground);
    color: #ffffff;
}

/**************************** ControlRelatedInfInfTable.css ****************************/
div.ControlRelatedInfInfTable div
{
    user-select: none;

}
div.ControlRelatedInfInfTable div div:hover
{
    background-color: var(--FieldHover);
}
div.ControlRelatedInfInfTable div div
{
    display: table-row;
    padding-bottom: var(--InfInfRelatedTableRecordPaddingBottom);
}
div.ControlRelatedInfInfTable div div span
{
    display: table-cell;
    vertical-align: baseline;
}
div.ControlRelatedInfInfTable div div label
{
    display: table-cell;
}

/**************************** ControlTextareaCSV.css ****************************/

/** SelectorTextarea */
div.ControlTextareaCSV div
{
    display: table;
    background-color: #ff0000;
    cursor: pointer;
    width: 100%;
    height: 100%;
    padding: 4px 12px;
    box-sizing: border-box;
    user-select: none;
}
div.ControlTextareaCSV div p
{
    display: table-cell;
    vertical-align: middle;
    color: #ffffff;
    text-align: center;
}
div.ControlTextareaCSV textarea
{
    width: 100%;
    resize: vertical;
    overflow-y: scroll;
    overflow-x: auto;
    box-sizing: border-box;
    background-color: #ffffff;
    position: absolute;
    z-index: 9;
    max-height: 50vh;
    border: solid 1px #000000;
    display: none;
    min-height: 20vh;
}



/**************************** ControlTextareaString.css ****************************/
div.ControlTextareaString textarea
{
    box-sizing: border-box;
    width: 100%;
}

/**************************** ControlTextboxDouble.css ****************************/
div.ControlTextboxDouble input.Editing {
    background-color: var(--EditingBackground);
    color: #ffffff;
}
div.ControlTextboxDouble input.Error {
    background-color: var(--ErrorBackground);
    color: #ffffff;
}


/**************************** ControlTextboxInteger.css ****************************/
div.ControlTextboxInteger input.Editing {
    background-color: var(--EditingBackground);
    color: #ffffff;
}
div.ControlTextboxInteger input.Error {
    background-color: var(--ErrorBackground);
    color: #ffffff;
}


/**************************** ControlTextboxMoney.css ****************************/
div.ControlTextboxMoney input.Editing {
    background-color: var(--EditingBackground);
    color: #ffffff;
}
div.ControlTextboxMoney input.Error {
    background-color: var(--ErrorBackground);
    color: #ffffff;
}


/**************************** ControlTextboxString.css ****************************/
div.ControlTextboxString input {
    box-sizing: border-box;
    width: 100%;
}
div.ControlTextboxString input.Editing {
    background-color: var(--EditingBackground);
    color: #ffffff;
}
div.ControlTextboxString input.Error {
    background-color: var(--ErrorBackground);
    color: #ffffff;
}


/**************************** ControlTreeCombobox.css ****************************/

div.ControlTreeCombobox input.TreeComboboxInput
{
    box-sizing: border-box;
    border: solid 1px #000000;
    cursor: pointer;
    user-select: none;    
}
div.ControlTreeCombobox input.TreeComboboxInput:focus
{
    outline: none;
}
div.ControlTreeCombobox input.TreeComboboxInput.Editing
{
    background-color: var(--EditingBackground);
    color: #ffffff;
}
div.ControlTreeCombobox input.TreeComboboxInput.Error
{
    background-color: var(--ErrorBackground);
    color: #ffffff;
}
div.ControlTreeCombobox div.TreeComboboxDropdown
{
    background-color: #ffffff;
    overflow: auto;
    border: solid 1px #000000;
    display: none;
    min-width: 100px;
}
div.SelectorSelectForIs div.ControlTreeCombobox div.TreeComboboxDropdown {position: absolute; z-index: 9; max-height: 90vh;}
div.AlertInside div.ControlTreeCombobox div.TreeComboboxDropdown { position: fixed; z-index: 99; max-height: 50vh; }

div.ControlTreeCombobox input.TreeComboboxDropdown:focus
{
    outline: none;
}

div.ControlTreeCombobox div.TreeComboboxDropdown p
{
    cursor: pointer;
    margin: 0;
    padding: 4px 12px;
}
div.ControlTreeCombobox div.TreeComboboxDropdown p.Selected
{
    background-color: #f0f0f0;
}
div.ControlTreeCombobox div.TreeComboboxDropdown p:hover
{
    background-color: #000080;
    color: #ffffff;
}

div.ControlTreeCombobox div.TreeComboboxDropdown p.Active
{
    background-color: #0000a0;
    color: #ffffff;
}

/**************************** ControlYear.css ****************************/
div.ControlYear input.YearInput.Editing
{
    background-color: var(--EditingBackground);
    color: #ffffff;
}
div.ControlYear input.YearInput.Error
{
    background-color: var(--ErrorBackground);
    color: #ffffff;
}

div.ControlYear div.YearDropdown
{
    background-color: #ffffff;
    position: absolute;
    z-index: 9;
    max-height: 50vh;
    overflow: auto;
    border: solid 1px #000000;
    display: none;
}
div.ControlYear div.YearDropdown p
{
    cursor: pointer;
    margin: 0;
    padding: 4px 12px;
}
div.ControlYear div.YearDropdown p.Selected
{
    background-color: #f0f0f0;
}
div.ControlYear div.YearDropdown p:hover
{
    background-color: #000080;
    color: #ffffff;
}





/**************************** DataPanel.css ****************************/
div.DataPanel
{
    position: relative;
}
div.TopBar
{
    flex: 0 0 auto;
    background-color: #cccccc;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 4px 0;
    border-bottom: solid 4px #ffffff;
    user-select: none;
    overflow-x: hidden;
}

/** BarInfo, BarTools, BarFilter, BarPagination, BarStatus, BarTree are the different tool bar areas **/
/** These are the common styles for them*/
div.TopBar>div
{
    background: linear-gradient(to bottom, #f8f8f8, #e0e0e0);
    border-bottom: solid 1px rgba(0,0,0,0.2);
    border-left: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
    min-height: 56px;
}

/** BarInfo **/
/** I am not including div.DataTopBar since this can be used for both DataTopBar and AuxiliarTopBar**/
div.TopBar div.BarInfo
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    padding-left: 10px;
}
div.TopBar div.BarInfo div
{
    flex: 0 0 auto;
    padding-right: 12px;
}
div.TopBar div.BarInfo div.InfoMain h1
{
    font-size: 24px;
    padding-right: 12px;
    margin-bottom: 0;
    padding-bottom: 0;
    line-height: normal;
}
div.TopBar div.BarInfo i
{
    font-size: var(--IconSizeL);
    margin-left: 12px;
    cursor: pointer;
}
div.TopBar div.BarInfo i.Disabled
{
    color: var(--IconColorDisabled);
    cursor: not-allowed;
}
div.TopBar div.BarInfo div.InfoMain p.MatchingStatus
{
    margin-top: 0;
    padding-top: 0;
    display: none;
}
div.TopBar div.BarInfo p
{
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    padding-right: 12px;
}



div.TopBar div.BarTools
{
    flex: 0 0 auto;
    align-items: center;
    display: flex;
    padding: 4px;
}

div.TopBar div.BarOperations a.Active
{
    background-color: var(--ButtonFreezeColsActiveBackground);
    color: #ffffff;
}

div.TopBar div.BarOperations
{
    flex: 0 0 auto;
    align-items: center;
    padding: 4px;
    display: flex;
}

div.TopBar div.BarFilter
{
    flex: 0 0 auto;
    align-items: center;
    padding: 4px;
    display: flex;
}

div.TopBar div.BarPagination
{
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 4px;
}

div.TopBar div.BarPagination input
{
    max-width: 50px;
    text-align: center;
}

div.TopBar div.BarStatus
{
    flex: 0 0 auto;
    display: block;
    padding: 4px;
}
div.TopBar div.BarStatus p
{
    margin-top: 0px;
    margin-bottom: 2px;
    padding: 0 4px;
}
div.TopBar div.BarStatus a
{
    display: inline;
}
div.TopBar div.BarTree
{
    flex: 0 0 auto;
    display: block;
    padding: 4px;
    display: flex;
}
@media (max-width: 1200px)
{
    div.TopBar div.BarInfo, div.TopBar div.BarTools, div.TopBar div.BarOperations, div.TopBar div.BarFilter, div.TopBar div.BarPagination, div.TopBar div.BarStatus, div.TopBar div.BarTree
    {
        flex: 1 0 auto;
    }
}

div.GridWrapper
{
    overflow: scroll;
    flex: 1 1 200px;
    background-color: #ffffff;
}


/* Common Icons */
div.TopBar p, div.ButtonFilterWrapper div p
{
    padding: 4px;
    margin: 0;
}
div.TopBar a, div.ButtonFilterWrapper div a
{
    font-size: var(--MainFontSizeS);
    text-align: center;
    padding: 4px;
    text-decoration: none;
    border-radius: 8px;
    display: block;
}
div.TopBar a:hover, div.ButtonFilterWrapper div a:hover
{
    background-color: rgba(255,255,255,0.5);
}
div.TopBar a i, div.ButtonFilterWrapper div a i
{
    font-size: var(--IconSizeXL);
    min-width: 48px;
}

div.DataPanel div.Footer
{
    position: sticky;
    left: 0;
}

/**************************** Grid.css ****************************/
div.Grid
{
    display: grid;
    background-color: #ffffff;
    width: max-content; /** Important to prevent sticky columns collapse when dealing with long columns on the right */
}
div.V
{
    padding: 1px;
    border: solid 1px #f0f0f0;
    background-color: #ffffff;
    overflow: hidden;
}

div.HeaderFilter1
{
    position: sticky;
    top: 0px;
    background-color: var(--HeaderFilterBackground);
    border-right: solid 2px #ffffff;
}

div.ButtonFilterHolding
{
    z-index: 6 !important;
}
div.ButtonFilterWrapper
{
    position: absolute;
    box-sizing: border-box;
    display: flex;
    background-color: #eee8aa;
    align-items: center;
    padding: 4px;
}
div.ButtonFilter
{
    cursor: pointer;
    flex: 0 0 auto;
}
div.ButtonFilterClear
{
    cursor: pointer;
    flex: 0 0 auto;
}
div.ButtonFilterWrapper div.Active a
{
    background-color: var(--ButtonFilterActiveBackground);
    color: #ffffff;
}
div.ButtonFilterWrapper div.ButtonFilterBlinker a
{
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    background-color: #ffff00;
  }
}

div.None1
{
    position: sticky;
    top: 0px;
    height: 26px;
    background-color: #ffffff;
}
div.HeaderFilter2
{
    position: sticky;
    top: 26px;
    background-color: var(--HeaderFilterBackground);
    border-right: solid 2px #ffffff;
}
div.None2
{
    position: sticky;
    top: 26px;
    height: 100%;
    background-color: #ffffff;
}
div.HeaderFilter1 select, div.HeaderFilter2 input:not([type="checkbox"]), div.HeaderFilter2 select
{
    box-sizing: border-box;
    width: 100%;
    height: 26px;
    border: solid 1px #000000;
}
div.HeaderTop
{
    position: sticky;
    top: 52px;
    background-color: var(--HeaderTopBackground);
    height: 26px;
    color: var(--HeaderTopText);
    box-sizing: border-box;
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    z-index: 2;
}
div.HeaderTop.Freezed
{
    background-color: var(--HeaderTopFreezedBackground);
}
div.HeaderTop div.FieldName
{
    flex: 1 1 50px;
    padding: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
div.HeaderTop div.FieldName p
{
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: none;
}
div.HeaderTop div.FieldName span.CaptionForColumn:hover
{
    text-decoration: underline;
    cursor: pointer;
}
div.HeaderTop div.ResizeHandle
{
    flex: 0 0 6px;
    border-right: solid 2px #ffffff;
}
div.HeaderTop div.SortHandle
{
    flex: 0 0 20px;
  background-color: var(--SortHandleBackground);
  background-image: radial-gradient(circle, rgba(0,0,0,1) 25%, transparent 10%), radial-gradient(circle, rgba(0,0,0,1) 25%, transparent 10%);
  background-size: 4px 4px;
  background-position: 0 0, 2px 2px;
cursor: grab;
}
div.ResizeHandle
{
    cursor: col-resize;
    background-color: #808080;
}
div.ResizeHandle:hover
{
    background-color: #ff0000;
}
div.SortHandle:hover
{
    background-color: #ff0000;
}
i.SortCaret
{
    margin-left: 4px;
}
div.None3
{
    position: sticky;
    top: 52px;
    height: 26px;
    background-color: #ffffff;
}


div.Side
{
    border: none;
    padding-right: 4px;
    padding-left: 4px;
    background-color: #ffffff;
}
div.Side i
{
    padding: 4px 0;
}
div.Side.Link a
{
    display: block;
    padding: 2px 0;
    text-decoration: none;
}
div.Side.Link a:hover
{
    text-decoration: underline;
}
div.LastSide
{
    padding-right: 12px;
}

div.Active
{
    background-color: #f0f0f0;
}
div.RowStart
{
    grid-column-start: 1;
}
div.CTop
{
    z-index: 5;
}

div.FA
{
    user-select: none;
}
div.HasFocus
{
    border: solid 1px #7f0000;
}
div.IsSelected.V
{
    background-color: #e0e0e0;
}
div.TreeNode
{
    white-space: nowrap;
}
div.TreeNode i
{
    margin: 0 0 0 -18px;
    padding: 0;
}
div.FA img
{
    width: 100%;
}
div.V > div.AR
{
    text-align: right;
}

div.V > span.ExpandableContent
{
    display: none;
}
div.V > span.ExpandButton
{
    color: var(--ExpandButton);
    cursor: pointer;
    margin-left: 6px;
}
div.V > span.ExpandButton:hover
{
    color: var(--ExpandButtonHover);
}

/**************************** Layout.css ****************************/
body
{
    overflow: hidden;
}
div#Layout
{
    display: flex;
    flex-wrap: nowrap;
    height: 100vh;
    box-sizing: border-box;
}
div#Menu
{
    min-width: 100px;
    max-width: 50%;
}
div#Menu.Pinned
{
    flex: 0 0 auto;
    position: relative;
    background-color: var(--MenuPinnedBackground);
    resize: horizontal;
    overflow-x: hidden;
    overflow-y: scroll;
}
div#Menu.Floating
{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    background-color: var(--MenuFloatedBackground);

}
div#PanelsWrapper 
{
    flex: 1 1 100%;
    padding: var(--PanelsWrapperPadding);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
div#DataPanel1
{
    height: 100%;
    border-bottom: solid 1px #eeeeee;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
   overflow: auto;
    display: none;
    flex: 0 0 auto;
    box-sizing: border-box;
}
div#DataPanel1.Resizable
{
    resize: vertical;
    padding-bottom: 4px;
    min-height: 20%;
}
div#DataPanel2
{
    flex: 1 0 auto;
    flex-direction: column;
    flex-wrap: nowrap;
    display: none;
    overflow: hidden; /* 2024-05-08, it was scroll, had to change to hidden, otherwise dual banner bands*/
    box-sizing: border-box;
} 
div#ContentPanel1
{
    display: none;
}
div#AuxiliarPanel
{
    flex: 1 0 auto;
    flex-direction: column;
    flex-wrap: nowrap;
    display: none;
    overflow: hidden;
    box-sizing: border-box;
}

/**************************** Login.css ****************************/
div.LogIn
{
    display: grid;
    grid-template: auto;
    height: 100vh;
    justify-content: center;
    align-content: center;
}
div.LogIn>div
{
    background-color: var(--LogInWindowBackground);
    padding: 20px;
    border-radius: 8px;
}
body.Default
{
    background-color: var(--LogInBackground)
}
body.Default button
{
    width: 100%;
    margin-top: 20px;
    min-width: 200px;
}
div.ReLogIn
{
    padding: 20px;
}

/**************************** Menu.css ****************************/
div#Menu {
    height: 100%;
    overflow-y: scroll;
    box-sizing: border-box;
}
div#MenuTools
{
    display: flex;
    justify-content: flex-end;
}
div#MenuTools a
{
    flex: 0 0 auto;
    padding: 8px;
    font-size: var(--IconSizeL);
    color: var(--MenuTextFontColor);
}
div#MenuContent
{
    box-sizing: border-box;
    padding: 8px;
}

div#Menu h1
{
    color: var(--MenuH1FontColor);
}
div#Menu h4
{
    margin-top: 12px;
    margin-bottom: 8px;
    color: var(--MenuH4FontColor);
}
div#Menu ul
{
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
div#Menu li
{
    display: grid;
    grid-template-columns: max-content 1fr;
    padding: 2px 4px;
    list-style: none;
    margin: 0;
    border-radius: 8px;
    color: var(--MenuTextFontColor);
}
div#Menu li span
{
    background-color: #ff0000;
    width: 14px;
    height: 100%;
    align-self: center;
    display: inline-block;
    margin-right: 6px;
    text-align: center;
    font-weight: bold;
}
div#Menu li:hover
{
    background-color: rgba(255,255,255,0.25);
    cursor: pointer;
    color: #ffffff;
}
div#Menu a
{
    color: #ffffff;
    text-decoration: none;
}
div#Menu p
{
    color: var(--MenuTextFontColor);
    margin-top: 2px;
    margin-bottom: 2px;
}

/**************************** PageContentPanel.css ****************************/
div.PageContentPanel
{
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
}
div.PageContentPanel div.PageContentBar
{
    flex: 0 0 content;
    background-color: #cccccc;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 4px 0;
    border-bottom: solid 4px #ffffff;
    user-select: none;
    overflow-x: hidden;
}

/** These are the common styles for the tool areas **/
div.PageContentPanel div.PageContentBar>div
{
    background: linear-gradient(to bottom, #f8f8f8, #e0e0e0);
    border-bottom: solid 1px rgba(0,0,0,0.2);
    border-left: solid 2px #ffffff;
    border-right: solid 2px #ffffff;
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
    min-height: 60px;
}

/** BarInfo **/
div.PageContentPanel div.PageContentBar div.BarInfo
{
    padding-left: 10px;
    align-items: center;
    flex: 1 1 100%;
    display: flex;
    align-content: center;
    justify-content: left;
}
div.PageContentPanel div.PageContentBar div.BarInfo h1
{
    font-size: 24px;
    padding-right: 12px;
    margin-bottom: 0;
    padding-bottom: 4px;
    padding-top: 0;
    line-height: normal;
}

/** BarButton **/
div.PageContentPanel div.PageContentBar div.BarButton
{
    flex: 0 0 content;
    padding: 4px;
}
div.PageContentPanel div.PageContentBar div.BarButton button
{
    min-width: 140px;
}
div.PageContentPanel div.PageContentBar div.BarButton button.Lowlight
{
    background-color: var(--FormButtonBackgroundColorLowlight)
}

/** This is the content area */
div.PageContentPanel div.PageContentContent
{
    flex: 1 1 100%;
}


/**************************** RecordDelete.css ****************************/
table.RecordDelete
{

}
table.RecordDelete td
{
    border: solid 1px var(--RecordDeleteTableCellBorderColor);
    padding: 2px 4px;
}
table.RecordDelete th
{
    background-color: var(--HeaderTopBackground);
    color: var(--HeaderTopText);
    border: solid 1px var(--White);
    padding: 4px 4px;
}

/**************************** Selector.css ****************************/
div.HeaderFilter2>div
{
    height: 100%;
    min-height: 26px;
}
div.SelectorNone
{
    background-color: var(--SelectorNoneBackground);
}
div.SelectorApplied
{
    background-color: var(--SelectorAppliedBackground);
}
div.SelectorCalendarMonth
{
    display: flex;
    flex-wrap: nowrap;
}
div.SelectorCalendarQuarter
{
    display: flex;
    flex-wrap: nowrap;
}
div.SelectorCalendarDateAndTime
{
    display: flex;
    flex-wrap: nowrap;
}
div.HeaderFilter2>div.Hidden
{
    display: none;
}




/**************************** SQLRun.css ****************************/
div.AuxiliarPanel 
{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
div.AuxiliarPanel div.Auxiliar 
{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}
div.AuxiliarPanel div.Auxiliar textarea
{
    width: 100%;
    flex: 0 0 auto;
    min-height: 160px;
    resize: vertical;
}
div.AuxiliarPanel div.Auxiliar div.Results
{
    flex: 1 1 1px;
    overflow: scroll;
}
div.AuxiliarPanel div.Auxiliar table
{
    border: solid 1px #000000;
}
div.AuxiliarPanel div.Auxiliar table th
{
    font-weight: 700;
    background-color: var(--HeaderTopBackground);
    color: var(--HeaderTopText);
    padding: 4px;
}
div.AuxiliarPanel div.Auxiliar table td
{
    border: solid 1px #000000;
    padding: 4px;
}