/*
** Global Variables
*/

:root
{
  --header_bg_color:      #2e4c9b;  /* was: #32437f; */
  --inner_bg_color:       #eef4ff;

  --spacing_medium:       5px;
}




/*
** General
*/

*
{
  box-sizing:             border-box;
}

html
{
  height:                 100%;

  background-color:       white;
/*
  background-color:       #DDEEFF;
*/
}

body
{
  height:                 100%;

  font-family:            Calibri, Arial, Helvetica, Sans-Serif;
  font-size:              11pt;
}

BODY.MainBody
{
/*
  height:                 100%;
  background-color:       White;
*/
  margin:                 0px;
  padding:                0px;

  font-family:            Calibri, Arial, Helvetica, Sans-Serif;

  overflow-y:             hidden;
}

img
{
  display:                inline;
/*
  display:                block;
*/
  max-width:              100%;
}

input
{
  height:                 25px;
  border-radius:          5px;
}

input[type=text]
{
  height:                 25px;
}

input[type=checkbox]
{
  height:                 auto;
}

textarea
{
  width:                  100%;
}

a
{
}

a:Link
{
  color:                  black;
}

a:Visited
{
  color:                  black;
}

hr
{
  color:                  #cccccc;
}



/*
** Simple utility classes
*/

div.Simple_Flex_Column_Panel
{
  display:                flex;
  flex-direction:         column;
}

div.Simple_Flex_Row_Panel
{
  display:                flex;
  flex-direction:         row;
}

div.Simple_Center_Panel
{
  display:                flex;
  flex-direction:         row;
  justify-content:        center;
}

div.Simple_Row_Left_Panel
{
  display:                flex;
  flex-direction:         row;
  justify-content:        start;
  align-items:            center;
}

div.Simple_Center_Both_Down_Panel
{
  display:                flex;
  flex-direction:         column;
  justify-content:        center;
  align-items:            center;

  height:                 100%;
}

img.Image_Simple
{
  max-width:              none;
}



/*
** Modifier classes
*/

div.Gap_Medium
{
  gap:                    var(--spacing_medium);
}

.Padding_Medium
{
  padding:                var(--spacing_medium);
}

.Float_Left
{
  float:                  left;
}

.Float_Right
{
  float:                  right;
}






DIV.PagePanel
{
  display:                flex;
  flex-direction:         column;
  height:                 100vh;
}




/*
** Login Page
*/

DIV.PageTopPanel_Logon
{
  flex-shrink:            0;

  width:                  100%;
  min-height:             50px;

  background-color:       var(--header_bg_color);
}

div.Login_ModalPanel_Main
{
  background-color:       white;
/*
  background-color:       #DDEEFF;
  border:                 3px solid Black;
  border-radius:          10px;
*/

  border:                 1px solid Gray;

  min-width:              100px;
  min-height:             50px;

  margin:                 auto;
/*
  padding:                5px;
*/

  zzz-position:               relative;

  width:                  500px;

  zzz-animation:              Login_ModalPanel_Main_Show 0.6s;
}

@keyframes Login_ModalPanel_Main_Show
{
  from {transform: scale(0)}
  to {transform: scale(1)}
}




/*
** Page Header Panel
*/

DIV.PageTopPanel_Full
{
  flex-shrink:            0;

  position:               sticky;

  zzz-position:               fixed;
  top:                    0px;
  left:                   0px;
  width:                  100%;
  min-height:             116px;

  background-color:       var(--header_bg_color);

/*
  z-index:                1;
*/
}

DIV.PageTopPanel_Basic
{
  flex-shrink:            0;

  width:                  100%;
  min-height:             50px;

  background-color:       var(--header_bg_color);

/*
  z-index:                1;
*/
}



/*
** Main Panel
*/

.PageMainPanel
{
/*
  height:                 100%;
*/

  flex-grow:              1;
  overflow-x:             hidden;
  overflow-y:             auto;

  padding:                0px;

  text-align:             center;
}


.Main_Panel
{
  width:                  100%;
}




/*
** Page Footer Panel
*/

div.PageFooterPanel
{
/*
  position:               fixed;
  left:                   0px;
  bottom:                 0px;
*/

  width:                  100%;

  flex-shrink:            0;

  padding:                0px;

  background-color:       var(--header_bg_color);
/*
  background-image:       url('../Images/Page_Headers/main_header_background.png');
  background-repeat:      repeat-y;
*/

  text-align:             center;
}

.PageFooter_Panel
{
  display:                grid;

  padding:                4px;
}

.PageFooter_Inner_Panel
{
  padding:                4px;
}

.PageFooter_Caption,
.PageFooter_Caption:link,
.PageFooter_Caption:visited,
.PageFooter_Caption:hover
{
  font-size:              8pt;
  font-weight:            normal;
  color:                  #CCCCCC;
}

/*
@media (min-width: 800px)
{
  .PageFooter_Caption
  {
    font-size:        10pt;
  }
}

@media (min-width: 1200px)
{
  .PageFooter_Caption
  {
    font-size:        12pt;
  }
}
*/



/*
** App Banner
*/

DIV.AppBanner
{
  width:                  100%;
  margin:                 0px;
  padding:                4px;
}

DIV.AppBanner_MainTitlePanel
{
  width:                  80%;
  text-align:             center;

  position:               absolute;
  top:                    10px;
  right:                  0px;
}

.AppBanner_HeaderTitle
{
/*
  float:                  left;

  position:               relative;
  top:                    8px;
  left:                   76px;
*/
}

.AppBanner_HeaderLogo
{
  float:                  left;

  position:               absolute;
  bottom:                 4px;
  left:                   24px;
}

.AppBanner_HeaderLogo_Zoll-SJ
{
  float:                  left;

  position:               absolute;
  bottom:                 4px;
  left:                   80px;
}


DIV.AppBanner_HelpPanel
{
  float:                  right;
  padding:                4px;

  position:               absolute;
  bottom:                 0px;
  right:                  4px;
}

.AppBanner_HelpItem
{
  padding:                0px 12px 0px 4px;
  border-width:           0px;
}


DIV.PageHeaderPanel
{
  display:                flex;
  justify-content:        space-between;
/*
  position:               absolute;
  left:                   0px;
  top:                    0px;
  right:                  0px;
  bottom:                 0px;
*/
  width:                  100%;
  padding:                4px;

  text-align:             center;
}

DIV.PageHeaderPanel_PopUp
{
  width:                  100%;
  text-align:             center;

  position:               absolute;
  top:                    32px;
  right:                  0px;
}

DIV.PageHeaderPanel_Printable
{
  width:                  100%;
  text-align:             center;
}




.PageTitle
{
	font-size:              18pt;
	color:                  White;
	text-align:             center;
	line-height:            22pt;
}

.PageTitle_Printable
{
	font-size:              18pt;
	color:                  Black;
	text-align:             center;
	line-height:            22pt;
}

.PageSubTitle
{
	font-size:              14pt;
	font-style:             italic;
	color:                  White;
	text-align:             center;
	line-height:            22pt;
}

.PageSubTitle_Printable
{
	font-size:              14pt;
	font-style:             italic;
	color:                  Black;
	text-align:             center;
	line-height:            22pt;
}



/*
** Action Bar(s)
*/

.PageActionBarPanel
{
  float:                  right;
  position:               absolute;
  bottom:                 0px;
  left:                   252px;  /* width of menu panel + 12 */

  padding:                0px;
  vertical-align:         middle;
}

.PageActionBarPanel A:Link
{
  text-decoration:        none;
  color:                  Black;
}

.PageActionBarPanel A:Visited
{
  text-decoration:        none;
  color:                  Black;
}



.PageActionBarPanel_Workflow
{
  float:                  right;
  position:               absolute;
/*  top:                    116px;  */
  bottom:                 -35px;  /* height of action bar  */
  right:                  100px;

  padding:                0px;
  vertical-align:         middle;
}



.PopUpActionBarPanel
{
  float:                  right;
  position:               absolute;
  bottom:                 0px;
  left:                   12px;

  padding:                0px;
  vertical-align:         middle;
}

.PopUpActionBarPanel A:Link
{
  text-decoration:        none;
  color:                  Black;
}

.PopUpActionBarPanel A:Visited
{
  text-decoration:        none;
  color:                  Black;
}


.PageActionBarItem
{
  float:                  left;

  background-color:       #E59E00;  /* gold */
  font-size:              10pt;
  padding:                4px 12px 5px 12px;
  height:                 100%;
}

.PageActionBarItem:hover
{
  background-color:       #F8A800;  /* lighter gold */
}

.PageActionBarItem_Workflow_Continue
{
  float:                  left;

  background-color:       #3BAB57;  /* green */
  Color:                  White;
  font-size:              10pt;
  padding:                4px 12px 5px 12px;
  height:                 100%;
  font-weight:            bold;
  Text-decoration:        none;

/*
  padding:                1px 9px 2px 9px;
  border:                 3px solid #E59E00;  -* gold *-
*/
}

.PageActionBarItem_Workflow_Continue:hover
{
  background-color:       #D0E000;
}

.PageActionBarItem_Workflow_Reject
{
  float:                  left;

  background-color:       #F47000;  /* reddish */
  font-size:              10pt;
  padding:                4px 12px 5px 12px;
  height:                 100%;
  font-weight:            bold;
  Text-decoration:        none;

/*
  padding:                1px 9px 2px 9px;
  border:                 3px solid #E59E00;  -* gold *-
*/
}

.PageActionBarItem_Workflow_Reject:hover
{
  background-color:       #D0E000;
}

.PageActionBarBookend
{
  float:                  left;
}



/*
** Menu Panels
*/

div.PageMenuPanel
{
/*
  background-color:       #E9F1F8;
*/
  color:                  Black;
  vertical-align:         top;
  margin:                 0px;

  z-index:                1;
}


div.PageMenu_Nav_Panel
{
  position:               fixed;
  left:                   0px;
  width:                  250px;
/*
  height:                 100%;
*/

  overflow:               hidden;

  transition:             width 0.5s, height 0.5s;

/* JJK To Do: enable this when figure height
  border:                 2px solid #404040;
  border-radius:          0px 10px 10px 10px;
*/
}

div.PageMenu_Nav_Inner_Panel
{
  zzz-background-color:   white;
  background-color:       var(--inner_bg_color);
  color:                  #404040;

/* JJK To Do: Move this up to parent when figure height */
  border:                 2px solid var(--header_bg_color);
  border-radius:          0px 10px 10px 10px;
}

div.PageMenu_Nav_MainActions_Panel
{
  display:                grid;
  grid-template-columns:  auto;

  margin:                 8px;
  text-align:             left;
}

.PageMenu_Nav_MainAction_Label
{
  margin:                 8px;
  font-size:              16px;
  font-weight:            bold;
}

div.PageMenu_User_Panel
{
  position:               fixed;
  right:                  0px;
  width:                  250px;
/*
  height:                 100%;
*/

  overflow:               hidden;

  transition:             width 0.5s, height 0.5s;

/* JJK To Do: Enable this when figure height
  border:                 2px solid #404040;
  border-radius:          10px 0px 10px 10px;
*/
}

div.PageMenu_User_Inner_Panel
{
  zzz-background-color:   white;
  background-color:       var(--inner_bg_color);
  color:                  #404040;

/* JJK To Do: Move this up to parent when figure height */
  border:                 2px solid var(--header_bg_color);
  border-radius:          10px 0px 10px 10px;
}

div.PageMenu_User_MainActions_Panel
{
  display:                grid;
  grid-template-columns:  auto;

  margin:                 8px;
  text-align:             left;
}

.PageMenu_User_MainAction_Label
{
  margin:                 8px;
  font-size:              16px;
  font-weight:            bold;
}

div.App_Menu_User_UserInfo_Panel
{
  display:                grid;
  grid-template-columns:  auto;

  margin:                 8px;
  text-align:             left;
}

.PageMenu_User_UserInfo_Value
{
  margin:                 2px;
  font-size:              12px;
  font-weight:            normal;
}


/*
** Welcome Page
*/

div.Message_Welcome_Panel
{
  display:                flex;

  width:                  100%;
  text-align:             center;

  margin:                 24px;

  justify-content:        center;
}

.Message_Welcome_Label
{
  font-size:              20px;
  font-weight:            bold;
}





/* JJK - Remove Starting Here ? */
.AppMenuPanel
{
  text-align:             center;
}

.AppMenu_LogoPanel
{
  text-align:             left;
  padding:                0px 0px 20px 0px;
}

.AppMenu_MenuLogo
{
  position:               relative;
  top:                    4px;
  left:                   24px;
}

.AppMenu_HomeAction
{
  float:                  right;
  position:               relative;
  top:                    4px;
  right:                  4px;
}

.AppMenu_MainTitle
{
  color:                  Black;
  font-size:              18pt;
  font-weight:            bold;
}

.AppMenu_CurrentUserInfo
{
  color:                  Black;
  font-size:              12pt;
  font-weight:            normal;
}

.AppMenu_LogOut_Link
{
  float:                  none;
}



.AppMenu
{
  display:                grid;

  text-align:             center;
  zzz-margin:             12px;

  zzz-width:              216px;  /* PageMenuPanel.width - 24px */
}

.AppMenu_MenuItem_Area
{
  display:                grid;

  text-align:             left;
  margin:                 5px 0px 0px 0px;
  zzz-width:              216px;  /* PageMenuPanel.width - 24px */
}

.AppMenu_MenuItem
{
  font-size:              10pt;
  font-weight:            bold;
  color:                  White;
  background-color:       #237ABF;
  border:                 1px solid #F1AF00;  /* gold */
  padding:                2px 2px 2px 6px;
}

.AppMenu_MenuItem A:Link
{
  font-size:              10pt;
  font-weight:            bold;
  text-decoration:        none;
  color:                  White;
}

.AppMenu_MenuItem A:Visited
{
  font-size:              10pt;
  font-weight:            bold;
  text-decoration:        none;
  color:                  White;
}

.AppMenu_MenuItemLabel
{
  float:                  left;
  font-size:              10pt;
  font-weight:            bold;
  color:                  White;
}

.AppMenu_MenuItemExpander
{
  float:                  right;
  font-size:              10pt;
  font-weight:            bold;
  color:                  White;
  margin:                 4px 8px 0px 0px;
}

.AppMenu_ChildPanel
{
  display:                grid;

  background-color:       #CBE0F0;
  color:                  Black;
  width:                  100%;
  padding:                0px; /* 2px 2px 2px 10px; */
  zzz-padding:                0px 0px 0px 12px;
  margin:                 0px;
  border-collapse:        collapse;
}

.AppMenu_ChildPanel A:Link
{
  text-decoration:        none;
  color:                  Black;
}

.AppMenu_ChildPanel A:Visited
{
  text-decoration:        none;
  color:                  Black;
}

.AppMenu_MenuSubItemPanel
{
  display:                table-cell;

  zzz-padding:                2px 4px 2px 14px;
  padding:                0px 0px 0px 14px;
}

.AppMenu_MenuSubItem
{
  font-size:              9pt;
  font-weight:            normal;

  margin-left:            12px;
}




.AppAbout_MainTitle
{
  display:                block;

  color:                  Black;
  font-size:              18pt;
  font-weight:            bold;

  margin:                 10px;
}

.AppAbout_VersionInfo
{
  display:                block;

  color:                  Black;
  font-size:              12pt;
  font-weight:            bold;

  margin:                 10px;
}

.AppAbout_NormalInfo
{
  display:                block;

  color:                  Black;
  font-size:              10pt;
  font-weight:            bold;

  margin:                 10px;
}
/* JJK - Remove Ending Here ? */



/*
** Page Body
*/

.PageBodyPanel
{
  zzz-vertical-align:         top;
  width:                  100%;
  height:                 100%;

/*
  background-color:       var(--inner_bg_color);
*/
  background-color:       white;
}

.PageContentPanel
{
/*
  background-color:       White;
  background-position:    right;
  background-image:       url('../Images/Other/quick_start_row_even_background.jpg');
  background-repeat:      repeat-y;
  text-align:             center;
  padding:                16px;
  margin:                 0px;
*/
}


/*
** Simple Page (e.g., question)
*/

div.Simple_Page_Panel
{
  display:                flex;
  flex-direction:         column;
  justify-content:        center;
  justify-items:          center;

  height:                 100%;
}




/*
** Quick Start Main Panel
*/
div.QuickStart_Simple_Main_Panel
{
  display:                flex;
  flex-direction:         column;

  background-color:       var(--inner_bg_color);

  border-collapse:        collapse;
  margin:                 0px;
  padding:                0px;

  height:                 100%;
}



div.Page_Navigation_Breadcrumb_Panel
{
/*
  padding:                5px;
*/
  text-align:             left;
}

.Page_Navigation_Breadcrumb_Item
{
  margin:                 5px;

  font-size:              16px;
  font-weight:            bold;
}




/*
** Standard Content Panel (with left menu)
*/

div.Standard_Content_Panel
{
  display:                grid;
  grid-template-columns:  250px auto;

  height:                 100%;
}



/*
** Simple Content Panel (no left menu)
*/

div.Simple_Content_Panel
{
/*
  display:                grid;
  grid-template-columns:  auto;
*/
  display:                flex;
  flex-direction:         column;

  align-content:          start;

  height:                 100%;

  overflow-y:             auto;
}



/*
** Content Menu Panel
*/

div.Content_Menu_Panel
{
  display:                flex;
  flex-direction:         column;

  padding:                5px;
  border-right:           2px solid var(--header_bg_color);

  background-color:       var(--inner_bg_color);

  text-align:             left;

  overflow-x:             hidden;
  overflow-y:             auto;

  height:                 100%;
}

div.Content_Menu_Page_Name_Panel
{
  padding:                5px;

  text-align:             left;
}

.Content_Menu_Page_Name
{
  margin:                 5px;

  font-size:              24px;
/*
  font-weight:            bold;
*/
}

.Content_Menu_Header
{
  font-size:              16px;
  font-weight:            bold;

  margin:                 5px;
}

div.Content_Menu_Items_Fixed_Panel
{
  flex-shrink:            0;

  padding:                5px;

  overflow-x:             hidden;
  overflow-y:             auto;

  text-align:             left;
}

div.Content_Menu_Items_Dynamic_Panel
{
  padding:                5px;

  overflow-x:             hidden;
  overflow-y:             auto;

  text-align:             left;

  border-top:             2px solid #cccccc;
}


/*
** Content Header Panel
*/
div.Content_Header_Panel
{
  display:                flex;

  background-color:       var(--header_bg_color);
  color:                  white;

  font-size:              16px;
  font-weight:            normal;

  align-items:            center;
  padding:                5px 5px 5px 10px;

  height:                 30px;
}

.Content_Header_Title
{
  font-size:              14pt;
  font-style:             italic;
  color:                  black;
}



/*
** Content Action Panel
*/
div.Content_Action_Panel
{
  display:                flex;

  background-color:       #f9efdc;

  min-height:             30px;
}

div.Content_Action_Column_Panel
{
  display:                grid;
  grid-template-columns:  auto;
}

.Action_Button_Medium
{
  display:                flex;
  align-items:            center;

  border:                 1px solid lightgray;
  border-radius:          5px;
  background-color:       white;
  color:                  black;

  font-size:              14px;
  font-weight:            bold;
  text-decoration:        none;

  padding:                0px 5px 0px 5px;
  margin:                 5px 0px 5px 5px;
  min-width:              25px;

  cursor:                 pointer;
}

.Action_Button_Large
{
  display:                flex;
  align-items:            center;

  border:                 2px solid lightgray;
  border-radius:          10px;
  background-color:       white;
  color:                  black;

  font-size:              18px;
  font-weight:            normal;
  text-decoration:        none;
  justify-content:        center;

  width:                  200px;
  height:                 40px;

  cursor:                 pointer;
}

.Button_Workflow_Continue
{
  background-color:       #C0F0C0;  /* green */
}

.Button_Workflow_Reject
{
  background-color:       #FFC0C0;  /* red */
}



/*
** Content Main Panel
*/

div.Content_Main_Panel
{
  display:                flex;
  flex-direction:         column;

  background-color:       white;

  overflow-x:             hidden;

  height:                 100%;
}

/*
** Note: The following takes effect inside "modal" panel
**
** QSI To Do: It may be better to create a new class for
** one or the other
*/
div.Simple_Content_Panel div.Content_Main_Panel 
{
  padding:                5px;
}



/*
** Supplemental class for horizontal scrolling
*/
div.Horizontal_Scroll_Panel_Modify
{
  overflow-x:             auto;
}




/*
** Two-Column Panel
*/

div.Two_Column_Panel
{
  display:                grid;
  grid-template-columns:  50% 50%;

  height:                 100%;
}






/*
** Content Search Criteria Panel
*/

div.Content_Search_Criteria_Panel
{
  display:                flex;
  flex-direction:         column;

  padding:                5px;
  border-bottom:          1px solid var(--header_bg_color);

  text-align:             left;
}

.Content_Search_Criteria_Header
{
  font-size:              16px;
  font-weight:            bold;

  margin:                 5px;
}

div.Content_Search_Criteria_Items_Panel
{
  width:                  100%;
  margin:                 5px;
}

.Content_Search_Criteria_Item
{
  font-size:              14px;
  font-weight:            normal;

  margin:                 5px;
}





/*
** List Grid
*/

.ListGrid_Table
{
  display:                table;

  border-collapse:        collapse;
  border:                 2px solid #808080;

  width:                  100%;
}

.ListGrid_Table_TextWrap
{
  display:                table;

  border:                 2px solid #808080;
  table-layout:           fixed;

  width:                  100%;
}


.ListGrid_ColumnHeader_Row
{
  display:                table-row;

  vertical-align:         middle;

  background-color:       #CCD6E9;
}

.ListGrid_CellColumnHeader
{
  display:                table-cell;

  vertical-align:         middle;

  background-color:       #CCD6E9;
  color:                  Black;
  font-size:              8pt;
  font-weight:            bold;
  text-align:             left;
  border:                 solid thin #808080;
  padding:                4px 4px 4px 4px;
}

.ListGrid_CellColumnHeader_SortAsc
{
  display:                table-cell;

  vertical-align:         middle;

  background-color:       #D0FFD0;
  color:                  #00676C;
  font-size:              8pt;
  font-weight:            bold;
  text-align:             left;
  border:                 solid thin #808080;
  padding:                4px 4px 4px 4px;
}

.ListGrid_CellColumnHeader_SortDesc
{
  display:                table-cell;

  vertical-align:         middle;

  background-color:       #bbd9e3;
  color:                  #00676c;
  font-size:              8pt;
  font-weight:            bold;
  text-align:             left;
  border:                 solid thin #808080;
  padding:                4px 4px 4px 4px;
}

.ListGrid_CellColumnHeader_Center
{
  display:                table-cell;

  vertical-align:         middle;

  background-color:       #CCD6E9;
  color:                  Black;
  font-size:              8pt;
  font-weight:            bold;
  text-align:             center;
  border:                 solid thin #808080;
  padding:                4px 4px 4px 4px;
}

.ListGrid_CellColumnHeader_Right
{
  display:                table-cell;

  vertical-align:         middle;

  background-color:       #CCD6E9;
  color:                  Black;
  font-size:              8pt;
  font-weight:            bold;
  text-align:             right;
  border:                 solid thin #808080;
  padding:                4px 4px 4px 4px;
}


.ListGrid_Row
{
  display:                table-row;

  vertical-align:         middle;

  background-color:       White;
}


.ListGrid_RowOdd
{
  display:                table-row;

  vertical-align:         middle;

  background-color:       White;
/*
  background-position:    left 0px;
  background-image:       url('../Images/Other/quick_start_row_odd_background.jpg');
  background-repeat:      repeat-y;
*/
}

.ListGrid_RowEven
{
  display:                table-row;

  vertical-align:         middle;

  background-color:       #E9F1F8;  /* #CBD2E5; */
/*
  background-position:    left 0px;
  background-image:       url('../Images/Other/quick_start_row_even_background.jpg');
  background-repeat:      repeat-y;
*/
}

.ListGrid_CellNormal
{
  display:                table-cell;

  vertical-align:         middle;

  zzz-background-color:       #White;
  font-size:              8pt;
  font-weight:            normal;
  border:                 solid thin #808080;
  padding:                4px 4px 4px 4px;
}

.ListGrid_CellNormal_Asc
{
  display:                table-cell;

  vertical-align:         middle;

	background-color:       #F0FFF0;
	font-size:              8pt;
	font-weight:            normal;
	border:                 solid thin #808080;
	padding:                4px 4px 4px 4px;
}

.ListGrid_CellNormal_Desc
{
  display:                table-cell;

  vertical-align:         middle;

	background-color:       #e4f0f4;
	font-size:              8pt;
	font-weight:            normal;
	border:                 solid thin #808080;
	padding:                4px 4px 4px 4px;
}

.ListGrid_CellNormal_Selected
{
  display:                table-cell;

  vertical-align:         middle;

	background-color:       #FFFFE0;
	font-size:              8pt;
	font-weight:            normal;
	border:                 solid thin #808080;
	padding:                4px 4px 4px 4px;
}


.ListGrid_CellNormal_Completed
{
  display:                table-cell;

  vertical-align:         middle;

	background-color:       #F0FFF0;
	font-size:              8pt;
	font-weight:            normal;
	border:                 solid thin #808080;
	padding:                4px 4px 4px 4px;
}

.ListGrid_CellNormal_InProgress
{
  display:                table-cell;

  vertical-align:         middle;

	background-color:       #FFFFF0;
	font-size:              8pt;
	font-weight:            normal;
	border:                 solid thin #808080;
	padding:                4px 4px 4px 4px;
}

.ListGrid_CellNormal_NotStarted
{
  display:                table-cell;

  vertical-align:         middle;

	background-color:       #FFF0F0;
	font-size:              8pt;
	font-weight:            normal;
	border:                 solid thin #808080;
	padding:                4px 4px 4px 4px;
}

.ListGrid_CellNormal_OverDue
{
  display:                table-cell;

  vertical-align:         middle;

	color:                  Red;
	background-color:       #f2f0f0;
	font-size:              8pt;
	font-weight:            normal;
	border:                 solid thin #808080;
	padding:                4px 4px 4px 4px;
}

.ListGrid_CellNormal_RequiredInitial
{
  display:                table-cell;

  vertical-align:         middle;

	background-color:       #f2f0f0;
	font-size:              8pt;
	font-weight:            normal;
	border:                 solid thin #808080;
	padding:                4px 4px 4px 4px;
}

.ListGrid_CellNormal_RequiredFilled
{
  display:                table-cell;

  vertical-align:         middle;

	background-color:       #f2f0f0;
	font-size:              8pt;
	font-weight:            normal;
	border:                 solid thin #808080;
	padding:                4px 4px 4px 4px;
}

.ListGrid_CellNormal_RequiredMissing
{
  display:                table-cell;

  vertical-align:         middle;

	background-color:       #ffd0d0;
	font-size:              8pt;
	font-weight:            normal;
	border:                 solid thin #808080;
	padding:                4px 4px 4px 4px;
}



.ListGrid_CellState_Completed
{
  display:                table-cell;

  vertical-align:         middle;

	background-color:       #55FF55;
	font-size:              8pt;
	font-weight:            normal;
	border:                 solid thin #808080;
	padding:                4px 4px 4px 4px;
}

.ListGrid_CellState_InProgress
{
  display:                table-cell;

  vertical-align:         middle;

	background-color:       #FFFF55;
	font-size:              8pt;
	font-weight:            normal;
	border:                 solid thin #808080;
	padding:                4px 4px 4px 4px;
}

.ListGrid_CellState_NotStarted
{
  display:                table-cell;

  vertical-align:         middle;

	background-color:       #FF5555;
	font-size:              8pt;
	font-weight:            normal;
	border:                 solid thin #808080;
	padding:                4px 4px 4px 4px;
}

.ListGrid_CellState_Rejected
{
  display:                table-cell;

  vertical-align:         middle;

	background-color:       #5555FF;
	font-size:              8pt;
	font-weight:            normal;
	border:                 solid thin #808080;
	padding:                4px 4px 4px 4px;
}

.ListGrid_CellState_Skipped
{
  display:                table-cell;

  vertical-align:         middle;

	background-color:       #CC55FF;
	font-size:              8pt;
	font-weight:            normal;
	border:                 solid thin #808080;
	padding:                4px 4px 4px 4px;
}


.ListGrid_CellParent
{
  display:                table-cell;

  vertical-align:         middle;

	background-color:       #D8D8D8;
	font-size:              8pt;
	font-weight:            normal;
	border:                 solid thin #808080;
	padding:                4px 4px 4px 4px;
}

.ListGrid_CellChild
{
  display:                table-cell;

  vertical-align:         middle;

	background-color:       #e8e5d2;
	font-size:              8pt;
	font-weight:            normal;
	border:                 solid thin #808080;
	padding:                4px 4px 4px 4px;
}

.ListGrid_Cell_Left
{
  display:                table-cell;

  vertical-align:         middle;

	background-color:       White;
	font-size:              8pt;
	font-weight:            normal;
	text-align:             left;
	border:                 solid thin #808080;
	padding:                4px 4px 4px 4px;
}

.ListGrid_Cell_Right
{
  display:                table-cell;

  vertical-align:         middle;

	background-color:       White;
	font-size:              8pt;
	font-weight:            normal;
	text-align:             right;
	border:                 solid thin #808080;
	padding:                4px 4px 4px 4px;
}

.ListGrid_Cell_Center
{
  display:                table-cell;

  vertical-align:         middle;

	background-color:       White;
	font-size:              8pt;
	font-weight:            normal;
	text-align:             center;
	border:                 solid thin #808080;
	padding:                4px 4px 4px 4px;
}



.ListGrid_NavigatorCell
{
  display:                table-cell;

	color:                  Black;
	text-align:             center;
	padding:                4px;
	margin:                 4px;
}


div.ListGrid_RecordCount_Panel
{
  display:                flex;
}

.ListGrid_RecordCount
{
  font-size:              9pt;
  font-weight:            bold;
}


.ListGrid_AlternatingRow
{
  display:                table-cell;

	background-color:       #D0D0D0;
}




/*
** Form Grid
*/

.FormGrid_Cell_Normal
{
  display:                table-cell;

  font-size:              8pt;
  font-weight:            normal;
  border:                 solid thin #808080;
  padding:                4px 4px 4px 4px;

  text-align:             left;
  vertical-align:         middle;
}

.FormGrid_Cell_Center
{
  display:                table-cell;

  font-size:              8pt;
  font-weight:            normal;
  border:                 solid thin #808080;
  padding:                4px 4px 4px 4px;

  text-align:             center;
  vertical-align:         middle;
}

.FormGrid_Cell_Right
{
  display:                table-cell;

  font-size:              8pt;
  font-weight:            normal;
  border:                 solid thin #808080;
  padding:                4px 4px 4px 4px;

  text-align:             right;
  vertical-align:         middle;
}



.Form_Layout_Table
{
  display:                flex;
  flex-direction:         row;

  margin:                 2px 0px 2px 0px;
  border-collapse:        collapse;
}

.Form_Layout_Column
{
  flex-grow:              1;

  align-content:          start;

/*
  border:                 1px dotted gray;
*/

  padding:                8px;
}



/*
** Other Panels
*/

DIV.ShowHidePanel
{
	background-color:       #D0D0D0;
}

DIV.ListPanel
{
/*	background-color: #F0F0A0; */
}

DIV.DetailPanel
{
	background-color:       #FFD0D0;
}



/*
** Detail Navigator Panel
*/

DIV.Detail_NavigatorPanel
{
  display:                flex;
  flex-direction:         row;
  align-items:            center;
  justify-content:        center;
  column-gap:             10px;

  float:                  left;
/*
  width:                  100%;
*/
  margin:                 4px;
}

.Detail_NavigatorCell
{
  margin:                 4px;
}

.Detail_NavigatorLabel
{
  margin:                 4px;
  font-size:              9pt;
}



/*
** Simple Button Bar
*/

.ButtonBar_Panel_Simple
{
  display:                table;
  margin-top:             auto;
  margin-bottom:          auto;
}

.ButtonBar_Item_Simple
{
  display:                table-cell;
  vertical-align:         middle;
  padding:                4px;

  width:                  40px;
/*
  height:                 40px;
*/
}

.ButtonBar_Item_Simple_Logo
{
  display:                table-cell;
  vertical-align:         middle;
  padding:                4px;

  width:                  70px;
/*
  height:                 40px;
*/
}



/*
** Action Button Grid
*/

/* Intended for full-width pages */
div.Action_Button_Grid_Large_Full_Panel
{
  display:                grid;
  grid-template-columns:  240px 240px 240px;
  grid-gap:               20px;
  justify-content:        center;
  align-content:          center;

  height:                 100%;
}

/* Intended for pages with left-side menu */
div.Action_Button_Grid_Large_Panel
{
  display:                grid;
  grid-template-columns:  240px 240px 240px;
  grid-gap:               20px;
  justify-content:        center;
  align-content:          start;

/*
  margin-top:             50px;
*/
  margin:                 20px;
}

/*
@media (min-width: 800px)
{
  div.Action_Button_Grid_Large_Panel
  {
    grid-template-columns:  240px 240px 240px;
  }
}
*/




/*
** Action Button
*/

.ActionButton_Normal
{
  display:                inline-block;

  border:                 1px solid lightgray;
  border-radius:          5px;
  background-color:       var(--header_bg_color);

  color:                  white;
  font-size:              12px;
  font-weight:            normal;
  text-decoration:        none;

  padding:                2px 5px 2px 5px;
  margin:                 5px 0px 5px 5px;
  min-width:              25px;

  text-align:             center;

  cursor:                 pointer;
}

/*
.ActionRefreshButton_Normal
{
  display:                inline-block;

  border:                 1px solid lightgray;
  border-radius:          5px;
  background-color:       var(--header_bg_color);

  color:                  white;
  font-size:              12px;
  font-weight:            normal;
  text-decoration:        none;

  padding:                2px 5px 2px 5px;
  margin:                 5px 0px 5px 5px;
  min-width:              25px;

  cursor:                 pointer;
}
*/

/*
.ActionButton_Small
{
  background-color: #237ABF;
  color:            White;
  font-size:        8pt;
  font-weight:      bold;
  text-align:       center;
  vertical-align:   middle;
  padding:          3px;
  margin:           4px;
  min-width:        40px;
  display:          inline-block;
  border-collapse:  collapse;
  cursor:           pointer;
  border:           1px solid #F1AF00;  / gold /
}
*/

/* JJK To Do: Replace with "Action_Button_Medium" in code */
.ActionButton_Small
{
/*
  display:                flex;
*/
  display:                inline-block;
  align-items:            center;

  border:                 1px solid lightgray;
  border-radius:          5px;
  background-color:       white;
  color:                  black;

  font-size:              14px;
  font-weight:            bold;
  text-decoration:        none;

  padding:                0px 5px 0px 5px;
  margin:                 5px 0px 5px 5px;
  min-width:              25px;

  cursor:                 pointer;
}


.ActionButton_Select
{
  display:                inline-block;

  border:                 1px solid lightgray;
  border-radius:          5px;
  background-color:       var(--header_bg_color);

  color:                  white;
  font-size:              12px;
  font-weight:            normal;
  text-decoration:        none;

  padding:                2px 5px 2px 5px;
  margin:                 5px 0px 5px 5px;
  min-width:              25px;

  cursor:                 pointer;
}



.ActionButton_Link
{
  font-size:        10pt;
  font-style:       italic;
}


.ActionButton_Large
{
  display:          flex;
  align-items:      center;
  justify-content:  center;
  vertical-align:   middle;

  margin-left:      auto;
  margin-right:     auto;
  margin-top:       5px;
  margin-bottom:    5px;

  max-width:        50%;
  min-width:        25%;
  min-height:       50px;
  width:            200px;

  border:           3px solid #333333;
  border-radius:    10px;
  background-color: red;
  color:            white;
  font-weight:      bold;
}

.ActionButton_Large_Disabled
{
  display:          flex;
  align-items:      center;
  justify-content:  center;
  vertical-align:   middle;

  margin-left:      auto;
  margin-right:     auto;
  margin-top:       5px;
  margin-bottom:    5px;

  max-width:        50%;
  min-width:        25%;
  min-height:       50px;
  width:            200px;

  border:           3px solid #333333;
  border-radius:    10px;
  background-color: lightgray;
  color:            white;
  font-weight:      bold;
}

.ActionButton_Logout
{
  display:          flex;
  align-items:      center;
  justify-content:  center;
  vertical-align:   middle;

  margin-left:      auto;
  margin-right:     auto;
  margin-top:       5px;
  margin-bottom:    5px;

  width:            100px;
  max-width:        25%;
  min-width:        12%;
  min-height:       50px;

  border:           3px solid #333333;
  border-radius:    10px;
  background-color: red;
/*
  background-color: blue;
*/
  color:            white;
  font-weight:      bold;
}


.ActionButton_Save
{
  display:          flex;
  align-items:      center;
  justify-content:  center;
  vertical-align:   middle;

  margin-left:      auto;
  margin-right:     auto;
  margin-top:       5px;
  margin-bottom:    5px;

  width:            100px;
  max-width:        25%;
  min-width:        12%;
  min-height:       40px;

  border:           3px solid #333333;
  border-radius:    10px;
  background-color: red;
/*
  background-color: orange;
*/
  color:            white;
  font-weight:      bold;
}

.ActionButton_WF_Continue
{
  display:          flex;
  align-items:      center;
  justify-content:  center;
  vertical-align:   middle;

  margin-left:      auto;
  margin-right:     auto;
  margin-top:       5px;
  margin-bottom:    5px;

  width:            100px;
  max-width:        25%;
  min-width:        12%;
  min-height:       40px;

  border:           3px solid #333333;
  border-radius:    10px;
  background-color: red;
/*
  background-color: green;
*/
  color:            white;
  font-weight:      bold;
}

.ActionButton_WF_Reject
{
  display:          flex;
  align-items:      center;
  justify-content:  center;
  vertical-align:   middle;

  margin-left:      auto;
  margin-right:     auto;
  margin-top:       5px;
  margin-bottom:    5px;

  width:            100px;
  max-width:        25%;
  min-width:        12%;
  min-height:       40px;

  border:           3px solid #333333;
  border-radius:    10px;
  background-color: red;
  color:            white;
  font-weight:      bold;
}




div.ActionButton_IconText
{
  display:                flex;
  align-items:            center;

  border:                 2px solid lightgray;
  border-radius:          10px;
  background-color:       white;
  color:                  black;

  font-size:              24px;
  font-weight:            bold;

  padding:                5px;

  cursor:                 pointer;
}

.ActionButton_IconText_Caption
{
  margin-left:            10px;
}


div.ActionButton_IconText_Large
{
  display:                flex;
  flex-direction:         column;
  align-items:            center;
  grid-gap:               20px;

  border:                 1px solid lightgray;
  border-radius:          20px;
  background-color:       white;
  color:                  black;

  font-size:              24px;

  padding:                35px 15px 35px 15px;

  cursor:                 pointer;

  transition:             all 0.5s cubic-bezier(.25,.8,.25,1);
}


div.ActionButton_IconText_Large:hover
{
	box-shadow:             0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}


.ActionButton_IconText_Large_Image
{
  width:                  64px;
/*
  height:                 64px;
*/
}

.ActionButton_IconText_Large_Caption
{
}


div.ActionButton_IconText_Large_QuickStart
{
  display:                flex;
  flex-direction:         column;
  align-items:            center;
  grid-gap:               20px;

  border:                 1px solid lightgray;
  border-radius:          20px;
  background-color:       white;
  color:                  var(--header_bg_color);
/*
  color:                  #2c4b9b;
*/

  font-size:              24px;

  padding:                35px 15px 35px 15px;

  cursor:                 pointer;

  transition:             all 0.5s cubic-bezier(.25,.8,.25,1);
}


div.ActionButton_IconText_Large_QuickStart:hover
{
	box-shadow:             0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}


.ActionButton_IconText_Large_QuickStart_Image
{
  width:                  64px;
/*
  height:                 64px;
*/
}

.ActionButton_IconText_Large_QuickStart_Caption
{
  color:                  var(--header_bg_color);
}









div.ActionButton_IconText_Menu
{
  display:                flex;
  align-items:            center;

  border:                 1px solid lightgray;
  border-radius:          6px;
  background-color:       white;
  color:                  black;

  font-size:              13px;
/*
  font-weight:            bold;
*/

  padding:                5px;
  margin:                 5px;

  cursor:                 pointer;
}

div.ActionButton_IconText_Menu:hover
{
/*
  box-shadow:             0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
*/
  box-shadow:             0 2px 5px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22);
}

.ActionButton_IconText_Menu_Image
{
  width:                  20px;
/*
  height:                 20px;
*/
}

.ActionButton_IconText_Menu_Caption
{
  margin-left:            5px;
}






/*
** List-Edit Button Panel
*/

.ListEdit_Panel_Table
{
  display:                flex;
  flex-direction:         column;
  align-items:            center;
}

/* Note: This is to align the panel to the left when in a Field Panel */
div.CellDetailValue div.ListEdit_Panel_Table
{
  align-items:            start;
}

.ListEdit_Panel_Row_Simple
{
  display:                flex;
  flex-direction:         row;
}

.ListEdit_Panel_Row
{
  display:                flex;
  flex-direction:         row;
  justify-content:        center;
}

.ListEdit_Panel_ListCell
{
  width:                  40%;
  min-width:              200px;
}

.ListEdit_ButtonPanel
{
  padding:                14px 2px 14px 2px;
  margin:                 2px;
  vertical-align:         top;
  text-align:             center;
}

.ActionButton_ListEdit
{
  display:                flex;
  justify-content:        center;

  border:                 1px solid lightgray;
  border-radius:          5px;
  background-color:       var(--header_bg_color);

  color:                  white;
  font-size:              12px;
  font-weight:            normal;
  text-decoration:        none;

  padding:                2px 5px 2px 5px;
  margin:                 5px 0px 5px 5px;
  min-width:              25px;

  cursor:                 pointer;
}



/*
** Tab Panel
*/

div.TabSet_Main_Panel
{
  display:                flex;
  flex-direction:         column;

  height:                 100%;

  overflow-x:             hidden;

/*
  margin:                 5px;
*/
}

.TabSelectorPanel
{
  display:                flex;
  flex-wrap:              wrap;

/*
  margin:                 5px;
*/

  width:                  100%;
}

.TabSelector_Row
{
  display:                table-row;

  float:                  left;
  width:                  100%;
}

.TabSelector_Item
{
/*
  display:                table-cell;

  float:                  left;

  margin:                 2px;
*/
}

.TabSelector_Current
{
  display:                flex;
  justify-content:        center;
  align-items:            center;

  background-color:       var(--header_bg_color);
  color:                  white;
  font-size:              9pt;
  font-weight:            normal;
  font-style:             normal;
  padding:                2px 6px 2px 6px;
  border-width:           2px 2px 2px 2px;
  height:                 20px;
  line-height:            20px;
/*
  min-width:              100px;
*/
  cursor:                 pointer;
  border:                 1px solid var(--header_bg_color);
  border-radius:          5px 5px 0px 0px;
  margin-right:           2px;
  margin-top:             2px;
}

.TabSelector_Hidden
{
  display:                flex;
  justify-content:        center;
  align-items:            center;

/*
  background-color:       var(--header_bg_color);
*/
  background-color:       #7070a0;
  color:                  white;
  font-size:              9pt;
  font-weight:            normal;
  font-style:             normal;
  padding:                2px 6px 2px 6px;
  height:                 20px;
  line-height:            12px;
/*
  min-width:              100px;
*/
  cursor:                 pointer;

  border:                 1.5px solid white;
  border-radius:          5px 5px 0px 0px;
  margin-right:           2px;
  margin-top:             2px;
}

.TabSelector_ReadOnly
{
  display:                flex;
  justify-content:        center;
  align-items:            center;

/*
  background-color:       #2c4b9b;
  background-color:       var(--header_bg_color);
*/
  background-color:       darkgray;
  color:                  white;
  font-size:              8pt;
  font-weight:            normal;
  font-style:             normal;
  padding:                2px 6px 2px 6px;
  height:                 20px;
  line-height:            12px;
/*
  min-width:              100px;
*/
  cursor:                 pointer;
  border:                 1px solid gray;
  border-radius:          5px 5px 0px 0px;
  margin-right:           2px;
  margin-top:             2px;
}

.TabSelector_Spacer
{
  float:                  left;
  background-color:       Transparent;
  color:                  White;
  width:                  6px;
}


.TabPanel
{
  padding:                5px;

  background-color:       var(--inner_bg_color);
  border:                 1px solid var(--header_bg_color);
/*
  border:                 1px solid #2c4b9b;
*/

/*
  overflow-x:             hidden;
*/
  overflow-x:             auto;
  overflow-y:             auto;

  height:                 100%;
}



/*
** Tab Selector Grid Panel
*/

div.TabSelector_Grid_Panel
{
  display:                grid;
  grid-template-columns:  auto auto;
  justify-content:        space-evenly;
  padding:                10px;
}

.TabSelector_Grid_Item
{
  display:            flex;
  align-items:        center;

  border:             1px solid lightgray;
  border-radius:      10px;
  background-color:   white;
  color:              black;

  font-size:          16px;
  font-weight:        bold;
  text-decoration:    none;

  padding:            5px;
  margin:             10px;
  min-width:          200px;
}



.BasicPanel
{
  display:                grid;

  zzz-vertical-align:         top;
  border-collapse:        collapse;
  margin:                 0px;
  padding:                0px;
}

div.BasicPanel_Row
{
  display:          table-row;
}

div.BasicPanel_Cell
{
  display:          table-cell;
  vertical-align:   top;
}



/*
** Basic Table
*/

div.BasicTable
{
  display:                table;

  min-width:              100%;
}

div.BasicTable_Row
{
  display:                table-row;
}

div.BasicTable_Cell
{
  display:                table-cell;
}




/*
** Detail Panel
*/

.Detail_Field_Section
{
  border:                 solid 2px #6F559D;  /* purple  */
  text-align:             left;
  font-weight:            bold;
/*
  margin:                 4px 4px 4px 4px;
*/
  background-color:       White;
/*
  background-position:    left;
  background-image:       url('../Images/Other/quick_start_row_odd_background.jpg');
  background-repeat:      repeat-y;
*/
}

.Detail_Section_Header
{
  background:             #CCD6E9;
  color:                  Black;
  border:                 solid thin #004359;
  text-align:             left;
  font-weight:            bold;
  padding:                2px;
}

.Detail_Section_Body
{
  border:                 solid thin #6F559D;
}



.Detail_SubSection_Panel
{
  width:                  100%;
  text-align:             left;
}

.Detail_SubSection_Header
{
  font-weight:            bold;
  font-size:              11pt;
}




/*
** Search Panel
*/

.SearchPanel
{
  padding:                12px 0px 0px 0px;
}

.SearchPanel_SectionHeader
{
  display:                flex;
  flex-direction:         row;

  justify-content:        left;
  align-items:            center;

	font-weight:            bold;
	font-size:              10pt;
  margin:                 4px;
}

.SearchPanel_ItemPanel
{
  display:                flex;
  flex-direction:         column;

	font-weight:            normal;
	font-size:              10pt;
  text-align:             left;

  margin:                 0px 0px 0px 12px;

  width:                  100%;
}



/*
** Field Panel (???)
*/

.FieldPanel_SectionHeader
{
  text-align:             center;
	font-weight:            bold;
	font-size:              14pt;
}



/*
** Field Labels
*/

.Date_OverDue
{
	color:                  Red;
}



.DetailField_Panel
{
/*
  display:                table;
*/
  display:                grid;
  grid-template-columns:  1fr 3fr;

  width:                  100%;

  align-content:          start;


/*
  border:                 1px solid #2c4b9b;
  margin-bottom:          3px;
*/
}

.DetailField_Panel_AutoWidth
{
  display:                grid;
  grid-template-columns:  max-content max-content;

  width:                  100%;

  align-content:          start;
}

/* Supplemental classes */
.DetailField_Panel_LeftJustify_Modify
{
  justify-items:          start;
}

.DetailField_Row
{
  display:                table-row;

/*
  display:                grid;
  grid-template-columns:  20% auto;
  grid-template-columns:  auto auto;
  justify-content:        start;
*/

/*
  margin:                 4px;
*/
}


.CellDetailLabel
{
  display:                table-cell;

  text-align:             right;
  font-size:              10pt;
  font-weight:            bold;
/*
  text-align:             left;
*/
  vertical-align:         middle;
  padding:                4px;
}

.CellDetailLabel_AlignTop
{
  display:                table-cell;

  text-align:             right;
  font-size:              10pt;
  font-weight:            bold;
/*
  text-align:             left;
*/
  vertical-align:         top;
  padding:                4px;
}

.CellDetailValue
{
  display:                table-cell;

  font-size:              10pt;
  font-weight:            normal;
  text-align:             left;
  vertical-align:         top;
  padding:                4px;
}

.CellDetailValue a
{
  color:                  var(--header_bg_color);
}

.CellDetailValue textarea
{
  width:                  auto;
}



.FieldHeaderLabel
{
  font-size:              10pt;
  font-weight:            bold;
  text-align:             left;
  vertical-align:         bottom;

  padding:                2px;
}

.Label_RequiredField
{
	color:                  Red;
}


/* QSI To Do: Re-work these as supplements to CellDetailLabel */

.FieldLabel_Normal
{
  display:                table-cell;

  font-size:              10pt;
  font-weight:            bold;
  text-align:             right;
  vertical-align:         top;

  padding:                4px;
}

.FieldLabel_Error
{
  display:                table-cell;

  font-size:              10pt;
  font-weight:            bold;
  text-align:             right;
  vertical-align:         top;
  color:                  Red;

  padding:                4px;
}

.FieldLabel_RequiredInitial
{
  display:                table-cell;

  font-size:              10pt;
  font-weight:            bold;
  text-align:             right;
  vertical-align:         top;
  color:                  Blue;

  padding:                4px;
}

.FieldLabel_RequiredMissing
{
  display:                table-cell;

  font-size:              10pt;
  font-weight:            bold;
  text-align:             right;
  vertical-align:         top;
  color:                  Red;

  padding:                4px;
}

.FieldLabel_RequiredFilled
{
  display:                table-cell;

  font-size:              10pt;
  font-weight:            bold;
  text-align:             right;
  vertical-align:         top;
  color:                  Purple;

  padding:                4px;
}


/*
** New Detail Page
*/

div.Detail_Common_Fields_Panel
{
  padding:                5px;
  min-height:             25px;
  border-bottom:          1px solid #266cb4;

  text-align:             left;
}



/*
** Report List Page
*/

div.Report_List_Column_Panel
{
  display:                grid;
  grid-template-columns:  auto auto auto;

  overflow-x:             hidden;
  overflow-y:             auto;
  height:                 100%;

  background-color:       var(--inner_bg_color);
  border:                 1px solid var(--header_bg_color);

  margin:                 4px;
}


div.Report_List_Category_Panel
{
  display:                flex;
  flex-direction:         column;
}

/* Note: This gives internal lines */
div.Report_List_Category_Panel:nth-child(1),
div.Report_List_Category_Panel:nth-child(2)
{
  border-right:           1px solid var(--header_bg_color);
}

div.Report_List_Category_Single_Panel
{
  display:                flex;
  flex-direction:         column;
}


div.Report_List_Category_Header
{
  font-size:              16px;
  font-weight:            bold;

  text-align:             left;

/*
  background-color:       #d0e8ff;
*/
  background-color:       var(--inner_bg_color);

  padding:                4px;
}

div.Report_List_Item_Panel
{
}

a.Report_List_Item_Panel
{
  display:                block;

  text-decoration:        none;

  text-align:             left;

  margin:                 4px;
}



/*
** Training Dashboard
*/

.Training_Dashboard_Table
{
  display:        table;
}

.Training_Dashboard_Row
{
  display:        table-row;
}

.Training_Dashboard_BarChart_Table
{
  display:        flex;

  margin:         0 auto;
}




/*
** Messages
*/

.ErrorMessage
{
	color:            Red;
	font-size:        larger;
	font-weight:      bold;
}

.TMWarningMessageCaution
{
	color:            Red;
	font-size:        14pt;
	font-weight:      bold;
    text-decoration:  underline;
    text-align:       left;
}

.TMWarningMessage
{
	color:            Red;
	font-size:        larger;
	font-weight:      bold;
    text-align:       left;
}

.SuccessMessage
{
	color:            Green;
	font-size:        larger;
	font-weight:      bold;
}

.InformationMessage
{
	color:            Purple;
	font-size:        larger;
	font-weight:      bold;
}


.SectionHeader
{
	font-size:        larger;
	font-weight:      bold;
}

.ImportantItem
{
	color:            Red;
	font-weight:      bold;
}


.Instruction_Inline
{
	font-size:        smaller;
	font-style:       italic;
}



/*
** Question / Prompt
*/

.PromptTitle
{
	font-size:           16pt;
	text-align:          center;
}

.PromptMessage
{
	font-size:           12pt;
	text-align:          center;
}




/*
** Tree Items
*/

.TreeNode
{
    font-family: Arial, Helvetica, Sans-Serif;
    font-size:   12px;
    font-weight: bold;
    vertical-align: middle;
}

.TreeNodeSelected
{
    font-family: Arial, Helvetica, Sans-Serif;
    font-size:   12px;
    font-weight: bold;
    vertical-align: middle;
    padding-top: 2px;
    padding-bottom: 2px;
    color: White;
    background-color: Navy;
}



/*
** Test-Related Items
*/

.TestStatus_PASSED
{
    font-weight: bold;
    color:       Green;
}

.TestStatus_FAILED
{
    font-weight: bold;
    color:       Red;
}


.TestAttempt_Question_Panel
{
    text-align:  left;
}

.TestAttempt_Question_Title
{
    font-weight: bold;
    text-align:  left;
}

.TestAttempt_Question_Footer
{
	font-size:        smaller;
	font-style:       italic;
}


.TestAttempt_Result_Message
{
    font-weight: normal;
    font-size:   larger;
}

.TestAttempt_Result_Message_Passed
{
    font-weight: bold;
    font-size:   large;
}

/* Note: This is based on "ListGrid_CellNormal", with word wrapping */
.TestAttempt_Result_Summary_Cell
{
  display:                table-cell;

  font-size:              8pt;
  font-weight:            normal;
  border:                 solid thin #808080;
  padding:                4px 4px 4px 4px;
  overflow-wrap:          break-word;
  word-wrap:              break-word;
}



.Test_Question_ListItem_Answer_Row
{
  border:      1px solid LightGray;
}

.Test_Question_ListItem_Answer_Cell
{
  padding:          2px;
  vertical-align:   middle;
}





.TrainingStatus_Current
{
    color:       Green;
}

.TrainingStatus_Pending
{
    color:       Blue;
}

.TrainingStatus_Missing
{
    color:       Red;
}

A.TrainingStatus_Current
{
    color:       Green;
}

A.TrainingStatus_Pending
{
    color:       Blue;
}

A.TrainingStatus_Missing
{
    color:       Red;
}




/*
** Workflow Design
*/

TD.WF_Outer
{
  vertical-align:   top;
  background-color: #d0d0ff;
  border:           1px solid black;
  padding:          0px 0px 0px 0px;
}

TABLE.WF_Link_Area
{
  width:          100%;
  vertical-align: top;
  border-spacing: 0px 0px;
  border-width:   0px;
}

TD.WF_Link_Header
{
  width:                100%;
  background-color:     #a0a0ff;
  font-family:          georgia,arial, helvetica;
  font-size:            8pt;
  font-weight:          bold;
  border-style:         solid;
  border-color:         black;
  border-top-width:     0px;
  border-bottom-width:  1px;
  border-left-width:    0px;
  border-right-width:   0px;
}

TD.WF_Link_Area
{
  width:                100%;
  background-color:     #d0d0ff;
  font-family:          georgia,arial, helvetica;
  font-size:            8pt;
  font-weight:          normal;
  border-width:         0px;
}




/*
** Menu Panel
*/

.MenuPanel_SubGroup
{
  border-width:           thin;
}

.MenuPanel_SubGroup_Heading
{
  border-bottom-width:    thin;
}

.MenuPanel_SubGroup_Item
{
  margin:                 4px;
}

.MenuPanel_SubGroup_ConnectorCell
{
  vertical-align:         middle;
}




/*
** Quick Start / Home Page
*/

.QuickStart_Section_Container
{
  height:                 100%;
  margin:                 0px 7px 0px 0px;
  padding:                0px 2px 0px 4px;

  position:               relative;
}

.QuickStart_GroupRows_Panel
{
  width:                  100%;
}

.QuickStart_Section_Group_Odd
{
  background-image:       url('../Images/Other/quick_start_row_odd_background.jpg');
  background-repeat:      repeat-y;
  background-size:        100% auto;
  background-position:    left center;
  vertical-align:         middle;
  text-align:             left;
  margin:                 0px;
  padding:                0px;

  width:                  100%;
  min-height:             80px;

  float:                  left;
}

.QuickStart_Section_Group_Even
{
  background-image:       url('../Images/Other/quick_start_row_even_background.jpg');
  background-repeat:      repeat-y;
  background-size:        100% auto;
  background-position:    right center;
  vertical-align:         middle;
  text-align:             left;
  margin:                 0px;
  padding:                0px;

  width:                  100%;
  min-height:             80px;

  float:                  left;
}

DIV.QuickStart_Section_Header_Odd
{
  background-color:       #1C66AE;
  text-align:             center;
  vertical-align:         middle;
  margin:                 0px;

  float:                  left;
}

SPAN.QuickStart_Section_Header_Odd
{
  color:                  White;
  font-size:              10pt;
  font-weight:            bold;
  text-align:             center;
  vertical-align:         middle;
}

DIV.QuickStart_Section_Header_Even
{
  background-color:       #237ABF;
  text-align:             center;
  vertical-align:         middle;
  margin:                 0px;

  float:                  left;
}

SPAN.QuickStart_Section_Header_Even
{
  color:                  White;
  font-size:              10pt;
  font-weight:            bold;
  text-align:             center;
  vertical-align:         middle;
}


.QuickStart_Section_Odd
{
  text-align:             left;
  vertical-align:         middle;
  margin:                 14px 0px 0px 0px;

  height:                 100%;

  overflow:               hidden;
}

.QuickStart_Section_Even
{
  text-align:             left;
  vertical-align:         middle;
  margin:                 14px 0px 0px 0px;

  height:                 100%;

  overflow:               hidden;
}


.QuickStart_Section_Item
{
  margin:                 0px;
}

.QuickStart_Section_Item_Odd
{
  float:                  left;
/*
  margin:                 0px 16px 0px 0px;
*/
  margin:                 0px 0px 0px 0px;
}

.QuickStart_Section_Item_Even
{
  float:                  left;
/*
  margin:                 0px 16px 0px 0px;
*/
  margin:                 0px 0px 0px 0px;
}



DIV.QuickStart_Right_Side_Panel_Container
{
  height:                 100%;
  background-color:       #EAE6F0;
  margin:                 8px;
}

DIV.QuickStart_Side_Panel
{
  border:                 2px solid #F1AF00;  /* gold */
  background-color:       #CCD6E9;
  vertical-align:         middle;
  margin:                 0px 2px 8px 2px;
  padding:                0px;
}

DIV.QuickStart_Side_Panel_Header
{
  border:                 1px solid #F1AF00;  /* gold */
  background-color:       #237ABF;
  color:                  White;
  font-size:              12pt;
  font-weight:            bold;
  text-align:             center;
  vertical-align:         middle;
  margin:                 3px;
  padding:                0px;
}

DIV.QuickStart_Side_Panel_Body
{
  background-color:       #CCD6E9;
  text-align:             center;
  vertical-align:         middle;
  margin:                 0px;
  padding:                0px;

  display:                grid;
  grid-template-columns:  auto auto auto auto;
}

.QuickStart_Side_Panel_Item
{
  float:                  left;
}




/*
** Activity Detail
*/

.ActivityDetail_Field_Section_Group
{
  display:                grid;
  grid-template-columns:  auto auto;
  grid-gap:               8px;
}

.ActivityDetail_FieldGroup
{
  white-space:            normal;
  min-width:              400px;
}



/*
** Hover Panel
*/

DIV.HoverPanel_Basic
{
  position:               fixed;
  min-width:              50px;
  min-height:             40px;
  z-index:                10;
  background-color:       #CCD6E9;
  border:                 1px solid gray;
  text-align:             center;
  vertical-align:         middle;
  font-size:              10pt;
}


DIV.HoverSubPanel_White
{
  background-color:       White;
}



/*
** Modal Panel
*/

DIV.ModalPanel_Background_Default
{
  position:               fixed;
  top:                    0;
  left:                   0;
  bottom:                 0;
  right:                  0;
/*
  overflow:               auto;
*/
  overflow:               hidden;

  padding:                0px;
  margin:                 0px;

  /* Transparent 1x1 pixel GIF (to prevent click-through on IE) */
  background:             url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);

  background-color:       rgba(64, 64, 64, 0.5);
  /* For IE 5.5 - 7*/
  filter:                 progid:DXImageTransform.Microsoft.gradient(startColorstr=#80404040, endColorstr=#80404040);
  /* For IE 8*/
  -ms-filter:             "progid:DXImageTransform.Microsoft.gradient(startColorstr=#80404040, endColorstr=#80404040)";
}

DIV.ModalPanel_Main_Default
{
  background-color:       #DDEEFF;
/*
  border:                 2px solid Black;
*/
  border-radius:          6px;

  min-width:              100px;
  min-height:             50px;

  margin:                 auto;
/*
  padding:                5px;
*/

  position:               relative;

  width:                  80%;
  height:                 80%;
}

DIV.ModalPanel_Simple
{
  background-color:       #DDEEFF;
/*
  border:                 2px solid Black;
*/
  border-radius:          6px;

  min-width:              100px;
  min-height:             50px;

  margin:                 auto;
/*
  padding:                5px;
*/

  position:               relative;
}

.ModalPanel_Content_Default
{
  background-color:       White;
  border:                 0px;
  border-radius:          7px;
  width:                  100%;
  height:                 100%;

  padding:                0px;
  margin:                 0px;

  position:               relative;
}


div.Modal_Controls_Right_Panel
{
  display:                flex;
  flex-direction:         row-reverse;

  padding:                5px;

  margin-left:            auto;
}

.Modal_Control_Right
{
  color:                  black;
  font-size:              20px;
  font-weight:            bold;
  text-decoration:        none;

  cursor:                 pointer;

  margin-left:            5px;
}

.Modal_Control_Right:hover,
.Modal_Control_Right:focus
{
  color:                  red;
  cursor:                 pointer;
}


.Modal_Close_Button
{
  position:               absolute;
  top:                    0px;
  right:                  0px;
  margin:                 0px 10px;

  color:                  black;
  font-size:              20px;
  font-weight:            bold;
  text-decoration:        none;

  cursor:                 pointer;
}

.Modal_Close_Button:hover,
.Modal_Close_Button:focus
{
  color:                  red;
  cursor:                 pointer;
}




/*
** Settings Menu Panel
*/
div.Settings_Menu_Main_Panel
{
  display:                flex;
  flex-direction:         column;

  height:                 100%;

  overflow-y:             hidden;
}

div.Settings_Menu_Inner_Panel
{
  display:                grid;
  grid-template-columns:  1fr 1fr 1fr 1fr;

  height:                 100%;

  background-color:       var(--inner_bg_color);
  border:                 1px solid var(--header_bg_color);
  border-radius:          0px 0px 4px 4px;

  overflow-y:             auto;
}

div.Settings_Menu_Column_Panel
{
  display:                flex;
  flex-direction:         column;

  margin:                 10px;

  text-align:             left;
}

.Settings_Menu_Column_Header
{
  font-size:              16px;
  font-weight:            bold;

  margin:                 5px;
}

.Settings_Menu_Column_Item
{
  font-size:              16px;
  font-weight:            normal;
  text-decoration:        none;

  margin:                 5px;
}

.Settings_Menu_Column_Item_Future
{
  font-size:              16px;
  font-weight:            normal;
  font-style:             italic;
  text-decoration:        none;

  margin:                 5px;
}



/*
** Embedded Page Classes
*/
.Simple_Embedded_Page
{
  width:                  100%;
  height:                 100%;

  border:                 0px;
}



/*
** Force Time Out Message Panel
*/

DIV.ForceTimeOut_Message_Panel
{
  position:         fixed;
  width:            100%;
  height:           100px;
  z-index:          10;
  background-color: #C0C0C0;
  border:           4px solid red;
  text-align:       center;
}




div.Document_Detail_General_Panel
{
/*
  display:                grid;
  grid-template-columns:  2fr 1fr;
*/

  display:                flex;
  flex-direction:         row;

  overflow-y:             hidden;
  height:                 100%;

/*
  margin-right:           5px;
*/
}

div.Document_Detail_General_Main_Panel
{
  flex-basis:             66%;

  overflow-y:             auto;
  height:                 100%;

  background-color:       var(--inner_bg_color);

  border-left:            1px solid var(--header_bg_color);
  border-top:             1px solid var(--header_bg_color);
  border-bottom:          1px solid var(--header_bg_color);

  padding:                5px;
}

div.Document_Detail_General_DocPreview_Panel
{
  flex-basis:             34%;

  display:                flex;
  flex-direction:         column;
  justify-content:        center;
  align-items:            center;

  height:                 100%;

  background-color:       var(--inner_bg_color);

  border-top:             1px solid var(--header_bg_color);
  border-bottom:          1px solid var(--header_bg_color);
  border-right:           1px solid var(--header_bg_color);
}

div.DocPreview_Inner_Panel
{
  display:                flex;
  flex-direction:         column;
  justify-content:        center;
  align-items:            center;

  height:                 100%;
  padding:                5px;
}

div.DocPreview_Image_Panel
{
  max-width:              85%;

  border:                 1px solid black;
}

.DocPreview_Image
{
  border:                 1px solid black;
}


div.FileViewer_Outer_Panel
{
  display:                flex;
  flex-direction:         column;

  align-content:          start;
  align-items:            center;

  height:                 100%;

  overflow-y:             auto;

  background-color:       var(--inner_bg_color);
}

div.FileViewer_Inner_Panel
{
  display:                flex;
  flex-direction:         column;

/*
  background-color:       white;
*/

  overflow-x:             hidden;

/*
  height:                 100%;
*/

  border:                 1px solid lightgray;
}

div.FileViewer_Error_Panel
{
  margin:                 10px;
}




div.Form_Layout_Panel
{
  display:                flex;
  flex-direction:         column;

  border:                 1px solid var(--header_bg_color);
}

div.Form_Layout_Row_Panel
{
  display:                flex;
  flex-direction:         column;

  padding:                2pt;
}

div.Form_Layout_Row_Header_Panel
{
  display:                flex;
  flex-direction:         row;

  font-weight:            bold;

  text-align:             left;

  padding:                2pt;

  background-color:       #e0e8ff;
}

div.Form_Layout_Row_Actions_Panel
{
  display:                flex;
  flex-direction:         row;

  margin-left:            auto;
  justify-content:        flex-end;
}

div.Form_Layout_Row_Info_Panel
{
  /* QSI To Do: Maybe switch to Grid layout */
  display:                flex;
  flex-direction:         row;
  flex-wrap:              wrap;

  justify-content:        space-evenly;

  text-align:             left;

  padding:                2pt;
}

div.Form_Layout_Groups_Panel
{
}

div.Form_Layout_Group_Panel
{
  display:                flex;
  flex-direction:         column;

  margin:                 2pt;
  padding:                2pt;
  border:                 1px dashed var(--header_bg_color);
}

div.Form_Layout_Group_Header_Panel
{
  display:                flex;
  flex-direction:         row;

  font-weight:            bold;

  text-align:             left;
}

div.Form_Layout_Group_Actions_Panel
{
  display:                flex;
  flex-direction:         row;

  margin-left:            auto;
  justify-content:        flex-end;
}

div.Form_Layout_Group_Info_Panel
{
  /* QSI To Do: Maybe switch to Grid layout */
  display:                flex;
  flex-direction:         row;
  flex-wrap:              wrap;

  justify-content:        space-evenly;

  text-align:             left;

  padding:                2pt;
}






@media print
{
  div.No_Print_Panel
  {
    display:                none;
  }
}



@media print
{
  .PageMainPanel
  {
    display:                flex;
    overflow:               visible;
  }

  .PageBodyPanel
  {
    display:                flex;
    flex-direction:         column;    
  }

  div.Content_Action_Panel
  {
    display:                none;
  }
}



@media print
{

.PageActionBarPanel
{
  display:                  none;
}

.PageActionBarItem
{
  display:                  none;
}

.PageActionBarBookend
{
  display:                  none;
}

}